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

package/dialog/index.js

@@ -0,0 +1,214 @@
+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';
+
+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 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;
+(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, __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 _2 = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5;
+const getClasses = _ => classNames('base');
+function icon() {
+  return html(_t || (_t = _2`
+		<vwc-icon class="icon" name="${0}"></vwc-icon>
+	`), x => x.icon);
+}
+function headline() {
+  return html(_t2 || (_t2 = _2`
+	  <div class="headline">
+		  ${0}
+	  </div>
+	`), x => x.headline);
+}
+function renderDismissButton() {
+  return html(_t3 || (_t3 = _2`
+	  <vwc-button
+			  size="condensed"
+			  class="dismiss-button"
+			  icon="close-line"
+			  @click="${0}">
+	  </vwc-button>`), x => {
+    x.open = false;
+  });
+}
+function handleEscapeKey(dialog, event) {
+  if (event.key === 'Escape' && dialog.modal) {
+    dialog.open = false;
+  }
+}
+function content() {
+  return html(_t4 || (_t4 = _2`
+	  <div class="content">
+		  ${0}
+	  </div>
+	`), x => x.text);
+}
+const DialogTemplate = () => html(_t5 || (_t5 = _2`
+	<vwc-elevation 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>
+	</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]
+});
+(async () => {
+  await loadComponentsModules(['icon', 'button', 'elevation'], prefix);
+  designSystem.withPrefix(prefix).register(vividDialog());
+})();
+
+export { vividDialog };

package/divider/index.js

@@ -0,0 +1,27 @@
+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';
+
+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,31 +1,25 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.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';
 
-class Elevation extends FoundationElement {}
-
-__decorate([attr, __metadata("design:type", Number)], Elevation.prototype, "dp", void 0);
-
-var css_248z = ".control.dp-0 ::slotted(*) {\n  background-color: var(--vvd-color-surface-0dp);\n  filter: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-2 ::slotted(*) {\n  background-color: var(--vvd-color-surface-2dp);\n  filter: var(--vvd-shadow-surface-2dp);\n}\n.control.dp-4 ::slotted(*) {\n  background-color: var(--vvd-color-surface-4dp);\n  filter: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 ::slotted(*) {\n  background-color: var(--vvd-color-surface-8dp);\n  filter: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 ::slotted(*) {\n  background-color: var(--vvd-color-surface-12dp);\n  filter: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 ::slotted(*) {\n  background-color: var(--vvd-color-surface-16dp);\n  filter: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 ::slotted(*) {\n  background-color: var(--vvd-color-surface-24dp);\n  filter: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) ::slotted(*) {\n  background-color: var(--vvd-color-surface-2dp);\n  filter: var(--vvd-shadow-surface-2dp);\n}";
-styleInject(css_248z);
+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;
-
+  _t;
 const getClasses = ({
-  dp
-}) => classNames('control', [`dp-${dp}`, Boolean(dp)]);
-
+  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({
+const vividElevation = Elevation.compose({
   baseName: 'elevation',
   template: elevationTemplate,
   styles: css_248z
 });
-designSystem.register(VIVIDElevation());
+designSystem.withPrefix(getPrefix(import.meta.url)).register(vividElevation());
 
-export { VIVIDElevation };
+export { vividElevation };

package/fab/index.js

@@ -0,0 +1,98 @@
+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 '../shared/icon.js';
+import '../shared/string-trim.js';
+import '../shared/_has.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 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);
+__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 };

package/focus/index.js

@@ -1,3 +1,18 @@
-import '../shared/index.js';
-export { V as VIVIDFocus } from '../shared/index2.js';
-import '../shared/style-inject.es.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 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;
+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 };

package/header/index.js

@@ -0,0 +1,63 @@
+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';
+
+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() {
+    super(...arguments);
+    this.elevationShadow = false;
+    this.alternate = false;
+  }
+}
+__decorate([attr({
+  attribute: 'elevation-shadow',
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Header.prototype, "elevationShadow", void 0);
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Header.prototype, "alternate", void 0);
+
+let _ = t => t,
+  _t;
+const getPartAlternate = ({
+  alternate
+}) => classNames(['vvd-theme-alternate', Boolean(alternate)]);
+const headerTemplate = context => {
+  const elevationTag = context.tagFor(Elevation);
+  return html(_t || (_t = _`
+    <${0} dp="4" ?no-shadow=${0}>
+      <header class="base" part="base">
+        <!-- a container is needed to distinguish the surface background color of the
+        element from its shadow when applying elevation with alternate -->
+        <div class="container" part="${0}">
+          <section class="header-content">
+            <slot></slot>
+          </section>
+          <section class="header-content">
+            <slot name="action-items"></slot>
+          </section>
+        </div>
+      </header>
+    </${0}>
+    <div class="app-content">
+      <slot name="app-content"></slot>
+    </div>
+	`), elevationTag, x => !x.elevationShadow, getPartAlternate, elevationTag);
+};
+
+const prefix = getPrefix(import.meta.url);
+const vividHeader = Header.compose({
+  baseName: 'header',
+  template: headerTemplate,
+  styles: css_248z
+});
+(async () => {
+  await loadComponentsModules(['elevation'], prefix);
+  designSystem.withPrefix(prefix).register(vividHeader());
+})();
+
+export { vividHeader };

package/icon/index.js

@@ -1,34 +1,31 @@
-import { h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.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/web.dom-collections.iterator.js';
+import '../shared/es.promise.resolve.js';
+import '../shared/string-trim.js';
 import '../shared/_has.js';
 
-var css_248z = ":host {\n  display: inline-block;\n  vertical-align: sub;\n}\n\n.control {\n  display: flex;\n  margin: unset;\n  color: currentColor;\n  contain: strict;\n}\n.control.connotation-primary {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n\n.control.connotation-announcement {\n  --connotation: var(--vvd-color-announcement);\n  --on-connotation: var(--vvd-color-on-announcement);\n}\n\n.control.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n\n.control.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n\n.control.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n\n.control.connotation-info {\n  --connotation: var(--vvd-color-info);\n  --on-connotation: var(--vvd-color-on-info);\n}\n\n.control[class*=connotation] {\n  color: var(--connotation);\n}\n\nsvg {\n  margin: auto;\n  block-size: inherit;\n  inline-size: inherit;\n}\n\n/* Size */\n.control:not(.size-base-small):not(.size-base):not(.size-base-large) {\n  block-size: 1em;\n  inline-size: 1em;\n}\n\n.control.size-base-small {\n  block-size: 16px;\n  inline-size: 16px;\n}\n\n.control.size-base {\n  block-size: 24px;\n  inline-size: 24px;\n}\n\n.control.size-base-large {\n  block-size: 32px;\n  inline-size: 32px;\n}";
-styleInject(css_248z);
+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;
-
+  _t,
+  _t2;
 const getClasses = ({
   connotation,
   size
 }) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`size-${size}`, Boolean(size)]);
-
 const iconTemplate = () => html(_t || (_t = _`
   <figure class="${0}">
-		${0}
+		<slot>${0}</slot>
   </figure>
-	`), getClasses, when(x => x.svg, x => html(_t2 || (_t2 = _`${0}`), x.svg)));
+`), getClasses, when(x => x._svg, x => html(_t2 || (_t2 = _`${0}`), x._svg)));
 
 const vividIcon = Icon.compose({
   baseName: 'icon',
   template: iconTemplate,
   styles: css_248z
 });
-designSystem.register(vividIcon());
+designSystem.withPrefix(getPrefix(import.meta.url)).register(vividIcon());
 
 export { vividIcon };

package/index.js

@@ -1,32 +1,78 @@
-export { vividTextAnchor } from './text-anchor/index.js';
-export { VIVIDBadge } from './badge/index.js';
-export { vividButton } from './button/index.js';
-export { V as VIVIDFocus } from './shared/index2.js';
-export { vividIcon } from './icon/index.js';
-export { VIVIDLayout } from './layout/index.js';
-export { VIVIDElevation } from './elevation/index.js';
-export { vividBreadcrumbItem } from './breadcrumb-item/index.js';
+export { vividAccordion } from './accordion/index.js';
+export { vividAccordionItem } from './accordion-item/index.js';
+export { vividActionGroup } from './action-group/index.js';
+export { vividAvatar } from './avatar/index.js';
+export { vividBadge } from './badge/index.js';
+export { vividBanner } from './banner/index.js';
 export { vividBreadcrumb } from './breadcrumb/index.js';
-export { VIVIDSideDrawer } from './side-drawer/index.js';
+export { vividBreadcrumbItem } from './breadcrumb-item/index.js';
+import './button/index.js';
 export { vividCalendar } from './calendar/index.js';
-export { VIVIDPopup } from './popup/index.js';
+export { vividCalendarEvent } from './calendar-event/index.js';
+export { vividCard } from './card/index.js';
+export { vividCheckbox } from './checkbox/index.js';
+export { vividElevation } from './elevation/index.js';
+export { vividDialog } from './dialog/index.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';
+import './listbox/index.js';
+export { vividListboxOption } from './option/index.js';
+export { vividMenu } from './menu/index.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 { vividPopup } from './popup/index.js';
+export { vividProgress } from './progress/index.js';
+export { vividProgressRing } from './progress-ring/index.js';
+export { vividRadio } from './radio/index.js';
+export { vividRadioGroup } from './radio-group/index.js';
+export { vividSideDrawer } from './side-drawer/index.js';
+export { vividSlider } from './slider/index.js';
+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 { vividBanner } from './banner/index.js';
-export { vividAccordionItem } from './accordion-item/index.js';
-export { vividAccordion } from './accordion/index.js';
-export { d as designSystem, p as provideVividDesignSystem } from './shared/index.js';
-import './shared/text-anchor.js';
-import './shared/web.dom-collections.iterator.js';
+export { d as designSystem, g as getPrefix } from './shared/index.js';
+import './shared/class-names.js';
+import './shared/es.promise.resolve.js';
+import './shared/index2.js';
 import './shared/affix.js';
 import './shared/icon.js';
+import './shared/string-trim.js';
 import './shared/_has.js';
-import './shared/anchor.js';
 import './shared/apply-mixins.js';
-import './shared/aria-global.js';
-import './shared/text-anchor.template.js';
-import './shared/class-names.js';
-import './shared/style-inject.es.js';
+import './shared/focus.js';
+import './shared/focus2.js';
 import './shared/when.js';
-import './shared/breadcrumb-item.js';
+import './shared/enums.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/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';
+import './shared/es.regexp.to-string.js';
+import './shared/form-elements.js';