diff --git a/components/checkbox/README.md b/components/checkbox/README.md
index 1fb807ac..7dfe7523 100644
--- a/components/checkbox/README.md
+++ b/components/checkbox/README.md
@@ -100,7 +100,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
```html
-
+
```
diff --git a/components/checkbox/package.json b/components/checkbox/package.json
index c9035066..e623d39b 100644
--- a/components/checkbox/package.json
+++ b/components/checkbox/package.json
@@ -17,7 +17,7 @@
"lit": "^3.2.1"
},
"peerDependencies": {
- "@aurodesignsystem/design-tokens": "^4.9.2",
+ "@aurodesignsystem/design-tokens": "^4.12.1",
"@aurodesignsystem/webcorestylesheets": "^5.1.2"
},
"devDependencies": {
@@ -25,7 +25,7 @@
"@auro-formkit/config": "*",
"@auro-formkit/form-validation": "*",
"@auro-formkit/typescript": "*",
- "@aurodesignsystem/design-tokens": "^4.10.0",
+ "@aurodesignsystem/design-tokens": "^4.12.1",
"@aurodesignsystem/webcorestylesheets": "^5.1.2",
"@rollup/plugin-node-resolve": "^15.3.0",
"rollup": "^4.24.0",
diff --git a/components/combobox/README.md b/components/combobox/README.md
index 6bae6514..40a5c930 100644
--- a/components/combobox/README.md
+++ b/components/combobox/README.md
@@ -104,7 +104,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
```html
-
+
```
diff --git a/components/combobox/apiExamples/inDialog.html b/components/combobox/apiExamples/inDialog.html
new file mode 100644
index 00000000..480f9bf8
--- /dev/null
+++ b/components/combobox/apiExamples/inDialog.html
@@ -0,0 +1,21 @@
+
+
+
Combobox in Dialog
+
+
+ Combobox in Dialog
+
+
+ Name
+
+ Apples
+ Oranges
+ Peaches
+ Grapes
+ Cherries
+ No matching option
+
+
+
+
+
diff --git a/components/combobox/apiExamples/inDialog.js b/components/combobox/apiExamples/inDialog.js
new file mode 100644
index 00000000..04f800de
--- /dev/null
+++ b/components/combobox/apiExamples/inDialog.js
@@ -0,0 +1,6 @@
+export function inDialogExample() {
+ document.querySelector("#combobox-dialog-opener").addEventListener("click", () => {
+ const dialog = document.querySelector("#combobox-dialog");
+ dialog.open = true;
+ });
+};
diff --git a/components/combobox/demo/api.html b/components/combobox/demo/api.html
index fa40caa0..428d497e 100644
--- a/components/combobox/demo/api.html
+++ b/components/combobox/demo/api.html
@@ -44,6 +44,7 @@
+
```
diff --git a/components/datepicker/apiExamples/inDialog.html b/components/datepicker/apiExamples/inDialog.html
new file mode 100644
index 00000000..99919a9d
--- /dev/null
+++ b/components/datepicker/apiExamples/inDialog.html
@@ -0,0 +1,11 @@
+
+
+
Datepicker in Dialog
+
+
+ Datepicker in Dialog
+
+
+
diff --git a/components/datepicker/apiExamples/inDialog.js b/components/datepicker/apiExamples/inDialog.js
new file mode 100644
index 00000000..6920b33c
--- /dev/null
+++ b/components/datepicker/apiExamples/inDialog.js
@@ -0,0 +1,6 @@
+export function inDialogExample() {
+ document.querySelector("#datepicker-dialog-opener").addEventListener("click", () => {
+ const dialog = document.querySelector("#datepicker-dialog");
+ dialog.open = true;
+ });
+};
diff --git a/components/datepicker/demo/api.html b/components/datepicker/demo/api.html
index 30380eab..ab93b068 100644
--- a/components/datepicker/demo/api.html
+++ b/components/datepicker/demo/api.html
@@ -46,6 +46,8 @@
+
+
+
+