@vonage/vivid 3.0.0-next.109 → 3.0.0-next.110

package/card/index.js

@@ -1,17 +1,11 @@
-import '../shared/index3.js';
-import '../icon/index.js';
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, o as observable, h as html, d as designSystem } from '../shared/index.js';
+import '../shared/es.promise.resolve.js';
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, V as observable, h as html, g as getPrefix, d as designSystem } from '../shared/index.js';
+import { l as loadComponentsModules } from '../shared/index2.js';
 import { s as slotted } from '../shared/slotted.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
-import '../shared/icon.js';
-import '../shared/export.js';
-import '../shared/iterators.js';
-import '../shared/to-string.js';
-import '../shared/string-trim.js';
-import '../shared/_has.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 13:40:32 GMT\n */\n:host {\n  display: flex;\n}\n\n.base {\n  border-radius: 6px;\n  inline-size: 100%;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: inherit;\n  border-radius: inherit;\n  color: var(--vvd-color-canvas-text);\n}\n\n.main-content {\n  display: flex;\n  flex-flow: column;\n  padding: 24px;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 8px;\n}\n.header-content {\n  flex: 1;\n}\n.header-wrapper {\n  display: flex;\n  gap: 8px;\n}\n.header-headline, .header-subtitle {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n.header-headline {\n  font: var(--vvd-typography-heading-4);\n  -webkit-line-clamp: var(--headline-line-clamp);\n}\n.header-subtitle {\n  font: var(--vvd-typography-base);\n  -webkit-line-clamp: var(--subtitle-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subtitle,\n.text {\n  color: var(--vvd-color-neutral-600);\n  font: var(--vvd-typography-base);\n}\n\n.text {\n  padding-right: 8px;\n  margin-top: 12px;\n}\n\n.footer {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding-bottom: 24px;\n  margin-top: auto;\n  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n  flex-shrink: 0;\n  align-self: baseline;\n  margin-block-start: 4px;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n  flex-shrink: 0;\n  align-self: flex-start;\n  margin-block-start: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: auto;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 15:37:45 GMT\n */\n:host {\n  display: flex;\n}\n\n.base {\n  border-radius: 6px;\n  inline-size: 100%;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: inherit;\n  border-radius: inherit;\n  color: var(--vvd-color-canvas-text);\n}\n\n.main-content {\n  display: flex;\n  flex-flow: column;\n  padding: 24px;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 8px;\n}\n.header-content {\n  flex: 1;\n}\n.header-wrapper {\n  display: flex;\n  gap: 8px;\n}\n.header-headline, .header-subtitle {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n.header-headline {\n  font: var(--vvd-typography-heading-4);\n  -webkit-line-clamp: var(--headline-line-clamp);\n}\n.header-subtitle {\n  font: var(--vvd-typography-base);\n  -webkit-line-clamp: var(--subtitle-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subtitle,\n.text {\n  color: var(--vvd-color-neutral-600);\n  font: var(--vvd-typography-base);\n}\n\n.text {\n  padding-right: 8px;\n  margin-top: 12px;\n}\n\n.footer {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding-bottom: 24px;\n  margin-top: auto;\n  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n  flex-shrink: 0;\n  align-self: baseline;\n  margin-block-start: 4px;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n  flex-shrink: 0;\n  align-self: flex-start;\n  margin-block-start: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: auto;\n}";
 
 class Card extends FoundationElement {}
 __decorate([attr, __metadata("design:type", String)], Card.prototype, "headline", void 0);
@@ -104,11 +98,15 @@ const CardTemplate = () => html(_t8 || (_t8 = _2`
   return (_a = x.elevation) !== null && _a !== void 0 ? _a : '4';
 }, getClasses, renderHeader(), renderMetaSlot(), when(x => x.text, text()), slotted('footerSlottedContent'));
 
+const prefix = getPrefix(import.meta.url);
 const vividCard = Card.compose({
   baseName: 'card',
   template: CardTemplate,
   styles: css_248z
 });
-designSystem.register(vividCard());
+(async () => {
+  await loadComponentsModules(['icon', 'elevation'], prefix);
+  designSystem.withPrefix(prefix).register(vividCard());
+})();
 
 export { vividCard };

package/checkbox/index.js

@@ -1,20 +1,15 @@
-import '../icon/index.js';
-import '../focus/index.js';
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import '../shared/web.dom-collections.iterator.js';
+import '../shared/es.promise.resolve.js';
+import { F as FoundationElement, _ as __decorate, a as attr, V as observable, b as __metadata, h as html, g as getPrefix, d as designSystem } from '../shared/index.js';
+import { l as loadComponentsModules } from '../shared/index2.js';
 import { C as CheckableFormAssociated } from '../shared/form-associated.js';
 import { a as keySpace$1 } from '../shared/key-codes.js';
-import { f as focusTemplateFactory } from '../shared/focus2.js';
+import { f as focusTemplateFactory } from '../shared/focus.js';
 import { I as Icon } from '../shared/icon.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
-import '../shared/export.js';
-import '../shared/iterators.js';
-import '../shared/to-string.js';
+import '../shared/focus2.js';
 import '../shared/string-trim.js';
 import '../shared/_has.js';
-import '../shared/focus.js';
-import '../shared/object-keys.js';
 
 class _Checkbox extends FoundationElement {
 }
@@ -102,7 +97,7 @@ __decorate([
     observable
 ], Checkbox$1.prototype, "indeterminate", void 0);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 13:40:32 GMT\n */\n.base {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  vertical-align: middle;\n}\n.base {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n  --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n  --_connotation-color-backdrop: var(--vvd-color-canvas);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-neutral-800);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-500);\n}\n@supports selector(:focus-visible) {\n  .base:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n}\n\n.control {\n  position: relative;\n  display: flex;\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n}\n\n.indicator {\n  font-size: 16px;\n}\n.base:not(.checked) .indicator.checkmark {\n  display: none;\n}\n\n.base:not(.indeterminate) .indicator.minus, .base.checked .indicator.minus {\n  display: none;\n}\n\nlabel {\n  color: var(--vvd-color-canvas-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.base:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 15:37:45 GMT\n */\n.base {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  vertical-align: middle;\n}\n.base {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n  --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n  --_connotation-color-backdrop: var(--vvd-color-canvas);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-neutral-800);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-500);\n}\n@supports selector(:focus-visible) {\n  .base:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n}\n\n.control {\n  position: relative;\n  display: flex;\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n}\n\n.indicator {\n  font-size: 16px;\n}\n.base:not(.checked) .indicator.checkmark {\n  display: none;\n}\n\n.base:not(.indeterminate) .indicator.minus, .base.checked .indicator.minus {\n  display: none;\n}\n\nlabel {\n  color: var(--vvd-color-canvas-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.base:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
 
 const keySpace = ' ';
 class Checkbox extends Checkbox$1 {
@@ -166,6 +161,7 @@ const CheckboxTemplate = context => {
   </span>`), x => x.checked, x => x.required, x => x.disabled, x => x.readOnly, x => x.disabled ? null : 0, (x, c) => x.keypressHandler(c.event), x => x.clickHandler(), getClasses, when(x => x.checked, html(_t2 || (_t2 = _`<${0} name="check-solid"></${0}>`), iconTag, iconTag)), when(x => x.indeterminate, html(_t3 || (_t3 = _`<${0} name="minus-solid"></${0}>`), iconTag, iconTag)), () => focusTemplate, when(x => x.label, html(_t4 || (_t4 = _`<label>${0}</label>`), x => x.label)));
 };
 
+const prefix = getPrefix(import.meta.url);
 const vividCheckbox = Checkbox.compose({
   baseName: 'checkbox',
   template: CheckboxTemplate,
@@ -174,6 +170,9 @@ const vividCheckbox = Checkbox.compose({
     delegatesFocus: true
   }
 });
-designSystem.register(vividCheckbox());
+(async () => {
+  await loadComponentsModules(['icon', 'focus'], prefix);
+  designSystem.withPrefix(prefix).register(vividCheckbox());
+})();
 
 export { vividCheckbox };

package/custom-elements.json

@@ -2167,55 +2167,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/listbox-option/listbox-option.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Base class for option",
-          "name": "ListboxOption",
-          "members": [
-            {
-              "kind": "field",
-              "name": "_text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "public",
-              "description": ""
-            },
-            {
-              "kind": "field",
-              "name": "text"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "_text"
-            }
-          ],
-          "superclass": {
-            "name": "FoundationListboxOption",
-            "package": "@microsoft/fast-foundation"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ListboxOption",
-          "declaration": {
-            "name": "ListboxOption",
-            "module": "libs/components/src/lib/listbox-option/listbox-option.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/menu/menu.ts",
@@ -2639,6 +2590,55 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/option/option.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Base class for option",
+          "name": "ListboxOption",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": ""
+            },
+            {
+              "kind": "field",
+              "name": "text"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "_text"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationListboxOption",
+            "package": "@microsoft/fast-foundation"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ListboxOption",
+          "declaration": {
+            "name": "ListboxOption",
+            "module": "libs/components/src/lib/option/option.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/popup/popup.ts",

package/dialog/index.js

@@ -1,32 +1,12 @@
-import '../icon/index.js';
-import '../shared/index2.js';
-import '../shared/index3.js';
-import { F as FoundationElement, c as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, j as __classPrivateFieldSet, h as html, d as designSystem } from '../shared/index.js';
-import '../shared/icon.js';
-import '../shared/web.dom-collections.iterator.js';
+import '../shared/es.promise.resolve.js';
+import { F as FoundationElement, Y as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, a9 as __classPrivateFieldSet, h as html, g as getPrefix, d as designSystem } from '../shared/index.js';
+import { l as loadComponentsModules } from '../shared/index2.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
-import '../shared/export.js';
-import '../shared/iterators.js';
-import '../shared/to-string.js';
-import '../shared/string-trim.js';
-import '../shared/_has.js';
-import '../focus/index.js';
-import '../shared/focus.js';
-import '../shared/affix.js';
-import '../shared/button.js';
-import '../shared/apply-mixins.js';
-import '../shared/form-associated.js';
-import '../shared/key-codes.js';
-import '../shared/aria-global.js';
-import '../shared/start-end.js';
-import '../shared/ref.js';
-import '../shared/focus2.js';
-import '../shared/object-keys.js';
 
 var css_248z$1 = "dialog {\n  position: absolute;\n  left: 0; right: 0;\n  width: -moz-fit-content;\n  width: -webkit-fit-content;\n  width: fit-content;\n  height: -moz-fit-content;\n  height: -webkit-fit-content;\n  height: fit-content;\n  margin: auto;\n  border: solid;\n  padding: 1em;\n  background: white;\n  color: black;\n  display: block;\n}\n\ndialog:not([open]) {\n  display: none;\n}\n\ndialog + .backdrop {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n  background: rgba(0,0,0,0.1);\n}\n\n._dialog_overlay {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n}\n\ndialog.fixed {\n  position: fixed;\n  top: 50%;\n  transform: translate(0, -50%);\n}";
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 13:40:32 GMT\n */\n.base {\n  box-sizing: border-box;\n  padding: 0;\n  border: none;\n  background: var(--_elevation-fill);\n  border-radius: 6px;\n  color: var(--vvd-color-canvas-text);\n  max-block-size: var(--dialog-max-block-size, calc(100vh - 64px));\n  max-inline-size: var(--dialog-max-inline-size);\n  min-inline-size: var(--dialog-min-inline-size, 280px);\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n@media not all and (min-width: 600px) {\n  .base {\n    --dialog-max-inline-size: 90vw;\n  }\n}\n@media (min-width: 600px) {\n  .base {\n    --dialog-max-inline-size: 560px;\n  }\n}\n.base:not(.modal) {\n  z-index: var(--dialog-z-index, 1);\n}\n\n.main-wrapper {\n  display: flex;\n  flex-direction: column;\n  padding: 24px;\n  gap: 8px;\n}\n\n.header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 4px;\n  inline-size: 100%;\n}\n\n.dismiss-button {\n  flex-shrink: 0;\n  margin-top: -8px;\n  margin-right: -8px;\n}\n\n.headline {\n  font: var(--vvd-typography-heading-4);\n}\n.headline-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  row-gap: 24px;\n}\n\n.content {\n  font: var(--vvd-typography-base);\n}\n\n.icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 15:37:45 GMT\n */\n.base {\n  box-sizing: border-box;\n  padding: 0;\n  border: none;\n  background: var(--_elevation-fill);\n  border-radius: 6px;\n  color: var(--vvd-color-canvas-text);\n  max-block-size: var(--dialog-max-block-size, calc(100vh - 64px));\n  max-inline-size: var(--dialog-max-inline-size);\n  min-inline-size: var(--dialog-min-inline-size, 280px);\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n@media not all and (min-width: 600px) {\n  .base {\n    --dialog-max-inline-size: 90vw;\n  }\n}\n@media (min-width: 600px) {\n  .base {\n    --dialog-max-inline-size: 560px;\n  }\n}\n.base:not(.modal) {\n  z-index: var(--dialog-z-index, 1);\n}\n\n.main-wrapper {\n  display: flex;\n  flex-direction: column;\n  padding: 24px;\n  gap: 8px;\n}\n\n.header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 4px;\n  inline-size: 100%;\n}\n\n.dismiss-button {\n  flex-shrink: 0;\n  margin-top: -8px;\n  margin-right: -8px;\n}\n\n.headline {\n  font: var(--vvd-typography-heading-4);\n}\n.headline-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  row-gap: 24px;\n}\n\n.content {\n  font: var(--vvd-typography-base);\n}\n\n.icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}";
 
 var _Dialog_instances, _Dialog_modal, _Dialog_dialogElement, _Dialog_dialog_get, _Dialog_handleScrimClick, _Dialog_handleInternalFormSubmit, _Dialog_handleModal;
 let dialogPolyfill;
@@ -220,11 +200,15 @@ const DialogTemplate = () => html(_t5 || (_t5 = _2`
 		</div>
 	</vwc-elevation>`), getClasses, (x, c) => handleEscapeKey(x, c.event), x => x.returnValue, x => x.ariaLabelledBy, x => x.ariaLabel, x => x.ariaDescribedBy, when(x => x.icon, icon()), when(x => x.headline, headline()), renderDismissButton(), when(x => x.text, content()));
 
+const prefix = getPrefix(import.meta.url);
 const vividDialog = Dialog.compose({
   baseName: 'dialog',
   template: DialogTemplate,
   styles: [css_248z, css_248z$1]
 });
-designSystem.register(vividDialog());
+(async () => {
+  await loadComponentsModules(['icon', 'button', 'elevation'], prefix);
+  designSystem.withPrefix(prefix).register(vividDialog());
+})();
 
 export { vividDialog };

package/divider/index.js

@@ -1,4 +1,27 @@
-import '../shared/index.js';
-export { v as vividDivider } from '../shared/index4.js';
+import { h as html, d as designSystem, g as getPrefix } from '../shared/index.js';
+import { D as Divider } from '../shared/divider.js';
+import { c as classNames } from '../shared/class-names.js';
 import '../shared/aria.js';
-import '../shared/class-names.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 15:37:45 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
+
+let _ = t => t,
+  _t;
+const getClasses = ({
+  orientation
+}) => classNames('base', [`${orientation}`, Boolean(orientation)]);
+const DividerTemplate = () => html(_t || (_t = _` 
+  <span
+  class="${0}"
+  	orientation="${0}"
+  	role="${0}"
+  ></span>`), getClasses, x => x.orientation, x => x.role);
+
+const vividDivider = Divider.compose({
+  baseName: 'divider',
+  template: DividerTemplate,
+  styles: css_248z
+});
+designSystem.withPrefix(getPrefix(import.meta.url)).register(vividDivider());
+
+export { vividDivider };

package/elevation/index.js

@@ -1,3 +1,25 @@
-import '../shared/index.js';
-export { v as vividElevation } from '../shared/index3.js';
-import '../shared/class-names.js';
+import { h as html, d as designSystem, g as getPrefix } from '../shared/index.js';
+import { E as Elevation } from '../shared/elevation.js';
+import { c as classNames } from '../shared/class-names.js';
+
+var css_248z = ":host {\n  display: contents;\n}\n\n.control {\n  display: contents;\n}\n.control.dp-0 {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-4 {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 {\n  --_elevation-fill: var(--vvd-color-surface-8dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 {\n  --_elevation-fill: var(--vvd-color-surface-16dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {\n  --_elevation-fill: var(--vvd-color-surface-2dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control ::slotted(*) {\n  background: var(--_elevation-fill);\n  filter: var(--_elevation-shadow);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n}\n.control.no-shadow ::slotted(*) {\n  filter: none;\n}";
+
+let _ = t => t,
+  _t;
+const getClasses = ({
+  dp,
+  noShadow
+}) => classNames('control', [`dp-${dp}`, Boolean(dp)], ['no-shadow', Boolean(noShadow)]);
+const elevationTemplate = () => html(_t || (_t = _`
+        <div class="${0}" part="base">
+			<slot></slot>
+		</div>`), getClasses);
+
+const vividElevation = Elevation.compose({
+  baseName: 'elevation',
+  template: elevationTemplate,
+  styles: css_248z
+});
+designSystem.withPrefix(getPrefix(import.meta.url)).register(vividElevation());
+
+export { vividElevation };

package/fab/index.js

@@ -1,28 +1,22 @@
-import '../icon/index.js';
-import '../focus/index.js';
-import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import '../shared/es.promise.resolve.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html, g as getPrefix, d as designSystem } from '../shared/index.js';
+import { l as loadComponentsModules } from '../shared/index2.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
-import { B as Button } from '../shared/button.js';
+import { B as Button } from '../shared/button2.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
-import { f as focusTemplateFactory } from '../shared/focus2.js';
+import { f as focusTemplateFactory } from '../shared/focus.js';
 import { r as ref } from '../shared/ref.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/icon.js';
-import '../shared/export.js';
-import '../shared/iterators.js';
-import '../shared/to-string.js';
 import '../shared/string-trim.js';
 import '../shared/_has.js';
-import '../shared/when.js';
-import '../shared/focus.js';
-import '../shared/web.dom-collections.iterator.js';
-import '../shared/object-keys.js';
 import '../shared/form-associated.js';
 import '../shared/key-codes.js';
 import '../shared/aria-global.js';
 import '../shared/start-end.js';
+import '../shared/focus2.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 13:40:32 GMT\n */\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background: var(--_appearance-color-fill, var(--_elevation-fill));\n  block-size: var(--_fab-block-size);\n  border-radius: var(--_fab-border-radius);\n  color: var(--_appearance-color-text, var(--vvd-color-canvas-text));\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  font: var(--vvd-typography-base-bold);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n  vertical-align: middle;\n  /* Size */\n}\n.control.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n  --_connotation-color-contrast: var(--vvd-color-neutral-800);\n  --_connotation-color-fierce: var(--vvd-color-neutral-700);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-600);\n  --_connotation-color-contrast: var(--vvd-color-cta-800);\n  --_connotation-color-fierce: var(--vvd-color-cta-700);\n  --_connotation-color-firm: var(--vvd-color-cta-600);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control.size-Expanded {\n  --_fab-border-radius: 30px;\n  --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.control:not(.size-expanded) {\n  --_fab-border-radius: 24px;\n  --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.control.icon-only {\n  border-radius: 50%;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_fab-block-size);\n  }\n}\n.control:not(.icon-only) {\n  --fab-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:disabled {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n  cursor: not-allowed;\n}\n.control:not(:disabled) {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n  cursor: pointer;\n}\n.control:not(:disabled):hover {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n.size-expanded .icon {\n  font-size: 24px;\n}\n.icon:not(.size-expanded) .icon {\n  font-size: 20px;\n}\n\n:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 15:37:45 GMT\n */\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background: var(--_appearance-color-fill, var(--_elevation-fill));\n  block-size: var(--_fab-block-size);\n  border-radius: var(--_fab-border-radius);\n  color: var(--_appearance-color-text, var(--vvd-color-canvas-text));\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  font: var(--vvd-typography-base-bold);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n  vertical-align: middle;\n  /* Size */\n}\n.control.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n  --_connotation-color-contrast: var(--vvd-color-neutral-800);\n  --_connotation-color-fierce: var(--vvd-color-neutral-700);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-600);\n  --_connotation-color-contrast: var(--vvd-color-cta-800);\n  --_connotation-color-fierce: var(--vvd-color-cta-700);\n  --_connotation-color-firm: var(--vvd-color-cta-600);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control.size-Expanded {\n  --_fab-border-radius: 30px;\n  --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.control:not(.size-expanded) {\n  --_fab-border-radius: 24px;\n  --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.control.icon-only {\n  border-radius: 50%;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_fab-block-size);\n  }\n}\n.control:not(.icon-only) {\n  --fab-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:disabled {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n  cursor: not-allowed;\n}\n.control:not(:disabled) {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n  cursor: pointer;\n}\n.control:not(:disabled):hover {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n.size-expanded .icon {\n  font-size: 24px;\n}\n.icon:not(.size-expanded) .icon {\n  font-size: 20px;\n}\n\n:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
 
 class Fab extends Button {}
 __decorate([attr, __metadata("design:type", String)], Fab.prototype, "connotation", void 0);
@@ -87,6 +81,7 @@ const FabTemplate = context => {
 `), getClasses, x => x.autofocus, x => x.disabled, x => x.formId, x => x.formaction, x => x.formenctype, x => x.formmethod, x => x.formnovalidate, x => x.formtarget, x => x.name, x => x.type, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaPressed, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate, x => affixIconTemplate(x.icon), x => x.label);
 };
 
+const prefix = getPrefix(import.meta.url);
 const vividFab = Fab.compose({
   baseName: 'fab',
   template: FabTemplate,
@@ -95,6 +90,9 @@ const vividFab = Fab.compose({
     delegatesFocus: true
   }
 });
-designSystem.register(vividFab());
+(async () => {
+  await loadComponentsModules(['icon', 'focus'], prefix);
+  designSystem.withPrefix(prefix).register(vividFab());
+})();
 
 export { vividFab };

package/focus/index.js

@@ -1,7 +1,7 @@
-import { h as html, d as designSystem } from '../shared/index.js';
-import { F as Focus } from '../shared/focus.js';
+import { h as html, d as designSystem, g as getPrefix } from '../shared/index.js';
+import { F as Focus } from '../shared/focus2.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 13:40:32 GMT\n */\n:host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: var(--focus-inset, 0);\n  outline: 2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));\n  outline-offset: -2px;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 15:37:45 GMT\n */\n:host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: var(--focus-inset, 0);\n  outline: 2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));\n  outline-offset: -2px;\n}";
 
 let _ = t => t,
   _t;
@@ -13,6 +13,6 @@ const vividFocus = Focus.compose({
   template: focusTemplate,
   styles: css_248z
 });
-designSystem.register(vividFocus());
+designSystem.withPrefix(getPrefix(import.meta.url)).register(vividFocus());
 
 export { vividFocus };

package/header/index.js

@@ -1,12 +1,10 @@
-import { E as Elevation } from '../shared/index3.js';
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import '../shared/web.dom-collections.iterator.js';
+import '../shared/es.promise.resolve.js';
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, g as getPrefix, d as designSystem } from '../shared/index.js';
+import { l as loadComponentsModules } from '../shared/index2.js';
+import { E as Elevation } from '../shared/elevation.js';
 import { c as classNames } from '../shared/class-names.js';
-import '../shared/export.js';
-import '../shared/object-keys.js';
-import '../shared/iterators.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 13:40:32 GMT\n */\n.base {\n  z-index: 1;\n  block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n  font: var(--vvd-typography-heading-4);\n  inline-size: 100%;\n}\n.base .header-content {\n  display: inline-flex;\n  align-items: center;\n  column-gap: 4px;\n}\n\n.container {\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  block-size: inherit;\n  color: var(--vvd-color-canvas-text);\n  column-gap: 12px;\n  padding-block: 8px;\n  padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n\n.app-content {\n  --vvd-header-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 04 Dec 2022 15:37:45 GMT\n */\n.base {\n  z-index: 1;\n  block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n  font: var(--vvd-typography-heading-4);\n  inline-size: 100%;\n}\n.base .header-content {\n  display: inline-flex;\n  align-items: center;\n  column-gap: 4px;\n}\n\n.container {\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  block-size: inherit;\n  color: var(--vvd-color-canvas-text);\n  column-gap: 12px;\n  padding-block: 8px;\n  padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n\n.app-content {\n  --vvd-header-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}";
 
 class Header extends FoundationElement {
   constructor() {
@@ -51,11 +49,15 @@ const headerTemplate = context => {
 	`), elevationTag, x => !x.elevationShadow, getPartAlternate, elevationTag);
 };
 
+const prefix = getPrefix(import.meta.url);
 const vividHeader = Header.compose({
   baseName: 'header',
   template: headerTemplate,
   styles: css_248z
 });
-designSystem.register(vividHeader());
+(async () => {
+  await loadComponentsModules(['elevation'], prefix);
+  designSystem.withPrefix(prefix).register(vividHeader());
+})();
 
 export { vividHeader };

package/icon/index.js

@@ -1,10 +1,8 @@
-import { h as html, d as designSystem } from '../shared/index.js';
+import { h as html, d as designSystem, g as getPrefix } from '../shared/index.js';
 import { I as Icon } from '../shared/icon.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
-import '../shared/export.js';
-import '../shared/iterators.js';
-import '../shared/to-string.js';
+import '../shared/es.promise.resolve.js';
 import '../shared/string-trim.js';
 import '../shared/_has.js';
 
@@ -28,6 +26,6 @@ const vividIcon = Icon.compose({
   template: iconTemplate,
   styles: css_248z
 });
-designSystem.register(vividIcon());
+designSystem.withPrefix(getPrefix(import.meta.url)).register(vividIcon());
 
 export { vividIcon };

package/index.js

@@ -6,26 +6,26 @@ export { vividBadge } from './badge/index.js';
 export { vividBanner } from './banner/index.js';
 export { vividBreadcrumb } from './breadcrumb/index.js';
 export { vividBreadcrumbItem } from './breadcrumb-item/index.js';
-export { v as vividButton } from './shared/index2.js';
+import './button/index.js';
 export { vividCalendar } from './calendar/index.js';
 export { vividCalendarEvent } from './calendar-event/index.js';
 export { vividCard } from './card/index.js';
 export { vividCheckbox } from './checkbox/index.js';
-export { v as vividElevation } from './shared/index3.js';
+export { vividElevation } from './elevation/index.js';
 export { vividDialog } from './dialog/index.js';
-export { v as vividDivider } from './shared/index4.js';
+export { vividDivider } from './divider/index.js';
 export { vividFab } from './fab/index.js';
 export { vividIcon } from './icon/index.js';
 export { vividLayout } from './layout/index.js';
-export { vividListbox } from './listbox/index.js';
-export { v as vividListboxOption } from './shared/index5.js';
+import './listbox/index.js';
+export { vividListboxOption } from './option/index.js';
 export { vividMenu } from './menu/index.js';
-export { v as vividMenuItem } from './shared/index7.js';
+export { vividMenuItem } from './menu-item/index.js';
 export { vividNav } from './nav/index.js';
 export { vividNavDisclosure } from './nav-disclosure/index.js';
 export { vividNavItem } from './nav-item/index.js';
 export { vividNote } from './note/index.js';
-export { v as vividPopup } from './shared/index6.js';
+export { vividPopup } from './popup/index.js';
 export { vividProgress } from './progress/index.js';
 export { vividProgressRing } from './progress-ring/index.js';
 export { vividRadio } from './radio/index.js';
@@ -36,39 +36,41 @@ export { vividSwitch } from './switch/index.js';
 export { vividTextfield } from './text-field/index.js';
 export { vividTextArea } from './text-area/index.js';
 export { vividTooltip } from './tooltip/index.js';
-export { d as designSystem, p as provideVividDesignSystem } from './shared/index.js';
+export { d as designSystem, g as getPrefix } from './shared/index.js';
 import './shared/class-names.js';
-import './focus/index.js';
-import './shared/focus.js';
-import './shared/web.dom-collections.iterator.js';
-import './shared/export.js';
-import './shared/object-keys.js';
-import './shared/iterators.js';
+import './shared/es.promise.resolve.js';
+import './shared/index2.js';
 import './shared/affix.js';
 import './shared/icon.js';
-import './shared/to-string.js';
 import './shared/string-trim.js';
 import './shared/_has.js';
 import './shared/apply-mixins.js';
+import './shared/focus.js';
 import './shared/focus2.js';
 import './shared/when.js';
 import './shared/enums.js';
-import './shared/button.js';
-import './shared/form-associated.js';
-import './shared/key-codes.js';
-import './shared/aria-global.js';
-import './shared/start-end.js';
-import './shared/ref.js';
 import './shared/slotted.js';
 import './shared/breadcrumb-item.js';
 import './shared/anchor.js';
+import './shared/aria-global.js';
+import './shared/start-end.js';
+import './shared/ref.js';
 import './shared/text-anchor.template.js';
+import './shared/button.js';
+import './shared/button2.js';
+import './shared/form-associated.js';
+import './shared/key-codes.js';
 import './shared/calendar-event.js';
 import './shared/es.object.assign.js';
+import './shared/elevation.js';
+import './shared/divider.js';
 import './shared/aria.js';
-import './shared/numbers.js';
+import './shared/listbox-option.js';
 import './shared/dom.js';
+import './shared/numbers.js';
+import './shared/menu-item.js';
 import './shared/direction.js';
+import './shared/popup.js';
 import './shared/text-anchor.js';
 import './shared/base-progress.js';
 import './shared/radio.js';

package/layout/index.js

@@ -1,4 +1,4 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem, g as getPrefix } from '../shared/index.js';
 import { c as classNames } from '../shared/class-names.js';
 
 var AUTO_SIZING;
@@ -38,6 +38,6 @@ const vividLayout = Layout.compose({
   template: layoutTemplate,
   styles: css_248z
 });
-designSystem.register(vividLayout());
+designSystem.withPrefix(getPrefix(import.meta.url)).register(vividLayout());
 
 export { vividLayout };

package/lib/accordion-item/index.d.ts

@@ -1,4 +1,2 @@
-import '../icon';
-import '../focus';
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 export declare const vividAccordionItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/avatar/index.d.ts

@@ -1,3 +1,2 @@
-import '../icon';
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 export declare const vividAvatar: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/badge/index.d.ts

@@ -1,3 +1,2 @@
-import '../icon';
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 export declare const vividBadge: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/banner/index.d.ts

@@ -1,3 +1,2 @@
-import '../button';
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 export declare const vividBanner: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;