@vonage/vivid 3.0.0-next.119 → 3.0.0-next.120

package/dialog/index.js

@@ -1,237 +1,24 @@
-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 { E as Elevation } from '../shared/elevation.js';
-import { I as Icon } from '../shared/icon.js';
-import { B as Button } from '../shared/button.js';
-import { w as when } from '../shared/when.js';
-import { c as classNames } from '../shared/class-names.js';
+import { r as registerDialog } from '../shared/definition17.js';
+import '../shared/index.js';
+import '../shared/definition3.js';
+import '../shared/icon.js';
+import '../shared/to-string.js';
 import '../shared/string-trim.js';
 import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
+import '../shared/definition9.js';
+import '../shared/definition4.js';
+import '../shared/focus.js';
 import '../shared/affix.js';
-import '../shared/button2.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/definition15.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 Wed, 14 Dec 2022 14:20:57 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  align-items: flex-start;\n}\n.base:not(.icon-placement-side) .headline-wrapper {\n  flex-direction: column;\n  row-gap: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.base:not(.icon-placement-side) .headline-wrapper .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.base.icon-placement-side .headline-wrapper {\n  column-gap: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.base.icon-placement-side .headline-wrapper .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n\n.content {\n  font: var(--vvd-typography-base);\n}";
-
-var _Dialog_instances, _Dialog_modal, _Dialog_dialogElement, _Dialog_dialog_get, _Dialog_handleScrimClick, _Dialog_handleInternalFormSubmit, _Dialog_handleModal;
-let dialogPolyfill;
-(async () => {
-  if (!HTMLDialogElement || !HTMLDialogElement.prototype.showModal) {
-    delete window.HTMLDialogElement;
-    dialogPolyfill = await import('../shared/dialog-polyfill.esm.js');
-  }
-})();
-class Dialog extends FoundationElement {
-  constructor() {
-    super(...arguments);
-    _Dialog_instances.add(this);
-    this.open = false;
-    this.ariaLabelledBy = null;
-    this.ariaLabel = null;
-    this.ariaDescribedBy = null;
-    _Dialog_modal.set(this, false);
-    _Dialog_dialogElement.set(this, void 0);
-    _Dialog_handleScrimClick.set(this, event => {
-      if (event.target !== __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get)) {
-        return;
-      }
-      const rect = __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).getBoundingClientRect();
-      const clickedInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
-      this.open = clickedInDialog;
-    });
-    _Dialog_handleInternalFormSubmit.set(this, event => {
-      if (event.target.method !== 'dialog') {
-        return;
-      }
-      this.open = false;
-    });
-  }
-  set returnValue(value) {
-    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).returnValue = value;
-  }
-  get returnValue() {
-    var _a;
-    return (_a = __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get)) === null || _a === void 0 ? void 0 : _a.returnValue;
-  }
-  get modal() {
-    return __classPrivateFieldGet(this, _Dialog_modal, "f");
-  }
-  openChanged(oldValue, newValue) {
-    if (oldValue === undefined) {
-      return;
-    }
-    if (!newValue) {
-      this.close();
-    } else {
-      if (__classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get)) {
-        __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).open = true;
-      }
-    }
-  }
-  close() {
-    if (__classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).open) {
-      __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).close();
-      this.dispatchEvent(new CustomEvent('close', {
-        bubbles: true,
-        composed: true,
-        detail: this.returnValue
-      }));
-    }
-    this.open = false;
-    __classPrivateFieldGet(this, _Dialog_instances, "m", _Dialog_handleModal).call(this, false);
-  }
-  show() {
-    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).show();
-    this.open = true;
-  }
-  showModal() {
-    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).showModal();
-    this.open = true;
-    __classPrivateFieldGet(this, _Dialog_instances, "m", _Dialog_handleModal).call(this, true);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).addEventListener('click', __classPrivateFieldGet(this, _Dialog_handleScrimClick, "f"));
-    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).addEventListener('submit', __classPrivateFieldGet(this, _Dialog_handleInternalFormSubmit, "f"));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).removeEventListener('click', __classPrivateFieldGet(this, _Dialog_handleScrimClick, "f"));
-    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).removeEventListener('submit', __classPrivateFieldGet(this, _Dialog_handleInternalFormSubmit, "f"));
-  }
-}
-_Dialog_modal = new WeakMap(), _Dialog_dialogElement = new WeakMap(), _Dialog_handleScrimClick = new WeakMap(), _Dialog_handleInternalFormSubmit = new WeakMap(), _Dialog_instances = new WeakSet(), _Dialog_dialog_get = function _Dialog_dialog_get() {
-  if (!__classPrivateFieldGet(this, _Dialog_dialogElement, "f")) {
-    __classPrivateFieldSet(this, _Dialog_dialogElement, this.shadowRoot.querySelector('dialog'), "f");
-    if (__classPrivateFieldGet(this, _Dialog_dialogElement, "f")) {
-      __classPrivateFieldGet(this, _Dialog_dialogElement, "f").open = this.open;
-      if (dialogPolyfill) {
-        dialogPolyfill.registerDialog(__classPrivateFieldGet(this, _Dialog_dialogElement, "f"));
-      }
-    }
-  }
-  return __classPrivateFieldGet(this, _Dialog_dialogElement, "f");
-}, _Dialog_handleModal = function _Dialog_handleModal(show) {
-  __classPrivateFieldSet(this, _Dialog_modal, show, "f");
-  __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).toggleAttribute('aria-modal', show);
-  __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).classList.toggle('modal', show);
-};
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Dialog.prototype, "open", void 0);
-__decorate([attr, __metadata("design:type", String)], Dialog.prototype, "icon", void 0);
-__decorate([attr({
-  attribute: 'icon-placement'
-}), __metadata("design:type", String)], Dialog.prototype, "iconPlacement", void 0);
-__decorate([attr, __metadata("design:type", String)], Dialog.prototype, "text", void 0);
-__decorate([attr, __metadata("design:type", String)], Dialog.prototype, "headline", void 0);
-__decorate([attr({
-  attribute: 'aria-labelledby'
-}), __metadata("design:type", Object)], Dialog.prototype, "ariaLabelledBy", void 0);
-__decorate([attr({
-  attribute: 'aria-label'
-}), __metadata("design:type", Object)], Dialog.prototype, "ariaLabel", void 0);
-__decorate([attr({
-  attribute: 'aria-describedby'
-}), __metadata("design:type", Object)], Dialog.prototype, "ariaDescribedBy", void 0);
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5;
-const getClasses = ({
-  iconPlacement
-}) => classNames('base', [`icon-placement-${iconPlacement}`, Boolean(iconPlacement)]);
-function icon(iconTag) {
-  return html(_t || (_t = _`
-		<${0} class="icon" name="${0}"></${0}>
-	`), iconTag, x => x.icon, iconTag);
-}
-function headline() {
-  return html(_t2 || (_t2 = _`
-	  <div class="headline">
-		  ${0}
-	  </div>
-	`), x => x.headline);
-}
-function renderDismissButton(buttonTag) {
-  return html(_t3 || (_t3 = _`
-	  <${0}
-			  size="condensed"
-			  class="dismiss-button"
-			  icon="close-line"
-			  @click="${0}">
-	  </${0}>`), buttonTag, x => {
-    x.open = false;
-  }, buttonTag);
-}
-function handleEscapeKey(dialog, event) {
-  if (event.key === 'Escape' && dialog.modal) {
-    dialog.open = false;
-  }
-}
-function content() {
-  return html(_t4 || (_t4 = _`
-	  <div class="content">
-		  ${0}
-	  </div>
-	`), x => x.text);
-}
-const DialogTemplate = context => {
-  const elevationTag = context.tagFor(Elevation);
-  const iconTag = context.tagFor(Icon);
-  const buttonTag = context.tagFor(Button);
-  return html(_t5 || (_t5 = _`
-	<${0} dp="12">
-		<div>
-			<dialog class="${0}"
-					@keydown="${0}"
-					returnValue="${0}"
-					aria-labelledby="${0}"
-					aria-label="${0}"
-					aria-describedby="${0}"
-			>
-				<slot name="main">
-					<div class="main-wrapper">
-						<div class="header">
-							<div class="headline-wrapper">
-								<slot name="graphic">
-									${0}
-								</slot>
-								${0}
-							</div>
-						${0}
-						</div>
-						<slot name="content">
-							${0}
-						</slot>
-						<slot name="footer"></slot>
-					</div>
-				</slot>
-			</dialog>
-		</div>
-	</${0}>`), elevationTag, getClasses, (x, c) => handleEscapeKey(x, c.event), x => x.returnValue, x => x.ariaLabelledBy, x => x.ariaLabel, x => x.ariaDescribedBy, when(x => x.icon, icon(iconTag)), when(x => x.headline, headline()), renderDismissButton(buttonTag), when(x => x.text, content()), elevationTag);
-};
-
-const prefix = getPrefix(import.meta.url);
-const vividDialog = Dialog.compose({
-  baseName: 'dialog',
-  template: DialogTemplate,
-  styles: [css_248z, css_248z$1]
-});
-(async () => {
-  await loadComponentsModules(['icon', 'button', 'elevation'], prefix);
-  designSystem.withPrefix(prefix).register(vividDialog());
-})();
-
-export { vividDialog };
+registerDialog();

package/divider/index.js

@@ -1,27 +1,6 @@
-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 { r as registerDivider } from '../shared/definition18.js';
+import '../shared/index.js';
 import '../shared/aria.js';
+import '../shared/class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 14 Dec 2022 14:20:57 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 };
+registerDivider();

package/elevation/index.js

@@ -1,25 +1,5 @@
-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';
+import { r as registerElevation } from '../shared/definition15.js';
+import '../shared/index.js';
+import '../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 };
+registerElevation();

package/fab/index.js

@@ -1,98 +1,22 @@
-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/button2.js';
-import { a as applyMixins } from '../shared/apply-mixins.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 { r as registerFab } from '../shared/definition19.js';
+import '../shared/index.js';
+import '../shared/definition3.js';
 import '../shared/icon.js';
+import '../shared/to-string.js';
 import '../shared/string-trim.js';
 import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
+import '../shared/definition4.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';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 14 Dec 2022 14:20:57 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);
-__decorate([attr, __metadata("design:type", String)], Fab.prototype, "size", void 0);
-__decorate([attr, __metadata("design:type", String)], Fab.prototype, "label", void 0);
-applyMixins(Fab, AffixIconWithTrailing);
-
-let _ = t => t,
-  _t;
-const getClasses = ({
-  connotation,
-  size,
-  icon,
-  label,
-  iconTrailing,
-  disabled
-}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`size-${size}`, Boolean(size)], ['icon-only', !label && !!icon], ['icon-trailing', iconTrailing], ['disabled', disabled]);
-const FabTemplate = context => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const focusTemplate = focusTemplateFactory(context);
-  return html(_t || (_t = _`
-        <button
-            class="${0} "
-            ?autofocus="${0}"
-            ?disabled="${0}"
-            form="${0}"
-            formaction="${0}"
-            formenctype="${0}"
-            formmethod="${0}"
-            formnovalidate="${0}"
-            formtarget="${0}"
-            name="${0}"
-            type="${0}"
-            value="${0}"
-            aria-atomic="${0}"
-            aria-busy="${0}"
-            aria-controls="${0}"
-            aria-current="${0}"
-            aria-describedby="${0}"
-            aria-details="${0}"
-            aria-disabled="${0}"
-            aria-errormessage="${0}"
-            aria-expanded="${0}"
-            aria-flowto="${0}"
-            aria-haspopup="${0}"
-            aria-hidden="${0}"
-            aria-invalid="${0}"
-            aria-keyshortcuts="${0}"
-            aria-label="${0}"
-            aria-labelledby="${0}"
-            aria-live="${0}"
-            aria-owns="${0}"
-            aria-pressed="${0}"
-            aria-relevant="${0}"
-            aria-roledescription="${0}"
-            ${0}
-        >
-            ${0}
-            ${0}
-            ${0}
-        </button>
-`), 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,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
-});
-(async () => {
-  await loadComponentsModules(['icon', 'focus'], prefix);
-  designSystem.withPrefix(prefix).register(vividFab());
-})();
-
-export { vividFab };
+registerFab();

package/focus/index.js

@@ -1,18 +1,5 @@
-import { h as html, d as designSystem, g as getPrefix } from '../shared/index.js';
-import { F as Focus } from '../shared/focus2.js';
+import { r as registerFocus } from '../shared/definition4.js';
+import '../shared/index.js';
+import '../shared/focus.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 14 Dec 2022 14:20:57 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;
-const focusTemplate = () => html(_t || (_t = _`
-        <span class="control"></span>`));
-
-const vividFocus = Focus.compose({
-  baseName: 'focus',
-  template: focusTemplate,
-  styles: css_248z
-});
-designSystem.withPrefix(getPrefix(import.meta.url)).register(vividFocus());
-
-export { vividFocus };
+registerFocus();

package/header/index.js

@@ -1,10 +1,8 @@
-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 { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactorial } from '../shared/index.js';
+import { E as Elevation, e as elevationElements } from '../shared/definition15.js';
 import { c as classNames } from '../shared/class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 14 Dec 2022 14:20:57 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 Wed, 14 Dec 2022 16:38:57 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() {
@@ -49,15 +47,12 @@ const headerTemplate = context => {
 	`), elevationTag, x => !x.elevationShadow, getPartAlternate, elevationTag);
 };
 
-const prefix = getPrefix(import.meta.url);
-const vividHeader = Header.compose({
+const header = Header.compose({
   baseName: 'header',
   template: headerTemplate,
   styles: css_248z
-});
-(async () => {
-  await loadComponentsModules(['elevation'], prefix);
-  designSystem.withPrefix(prefix).register(vividHeader());
 })();
+const headerElements = [header, ...elevationElements];
+const registerHeader = registerFactorial(headerElements);
 
-export { vividHeader };
+registerHeader();

package/icon/index.js

@@ -1,31 +1,10 @@
-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/es.promise.resolve.js';
+import { r as registerIcon } from '../shared/definition3.js';
+import '../shared/index.js';
+import '../shared/icon.js';
+import '../shared/to-string.js';
 import '../shared/string-trim.js';
 import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
 
-var css_248z = ":host {\n  display: inline-block;\n  vertical-align: sub;\n}\n\n.control {\n  display: flex;\n  margin: unset;\n  block-size: var(--_icon-block-size);\n  color: currentColor;\n  contain: strict;\n  inline-size: var(--_icon-block-size);\n}\n.control.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.control.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement-500);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.control.connotation-information {\n  --_connotation-color-primary: var(--vvd-color-information-500);\n}\n.control.size--6 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.size--5 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n.control.size--4 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.size--3 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.control.size--2 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.size--1 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 4));\n}\n.control.size-0 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.control.size-1 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 4));\n}\n.control.size-2 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.control.size-3 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 12));\n}\n.control.size-4 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.control.size-5 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n}\n.control:not(.size--6, .size--5, .size--4, .size--3, .size--2, .size--1, .size-0, .size-1, .size-2, .size-3, .size-4, .size-5) {\n  --_icon-block-size: 1em;\n}\n\n.control[class*=connotation] {\n  color: var(--_connotation-color-primary);\n}\n\nslot, svg, ::slotted(:where(svg, img)) {\n  margin: auto;\n  block-size: inherit;\n  inline-size: inherit;\n}";
-
-let _ = t => t,
-  _t,
-  _t2;
-const getClasses = ({
-  connotation,
-  size
-}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`size-${size}`, Boolean(size)]);
-const iconTemplate = () => html(_t || (_t = _`
-  <figure class="${0}">
-		<slot>${0}</slot>
-  </figure>
-`), getClasses, when(x => x._svg, x => html(_t2 || (_t2 = _`${0}`), x._svg)));
-
-const vividIcon = Icon.compose({
-  baseName: 'icon',
-  template: iconTemplate,
-  styles: css_248z
-});
-designSystem.withPrefix(getPrefix(import.meta.url)).register(vividIcon());
-
-export { vividIcon };
+registerIcon();