@vonage/vivid 4.13.0 → 4.14.0

package/shared/definition24.cjs

@@ -1,169 +1,15 @@
 'use strict';
 
-const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
-const affix = require('./affix.cjs');
-const formAssociated = require('./form-associated.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const ariaGlobal = require('./aria-global2.cjs');
+const affix = require('./affix.cjs');
+const button = require('./button.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
 const styles = ".control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control:disabled{--_elevation-fill: var(--vvd-color-surface-nonedp);--_elevation-shadow: var(--vvd-shadow-surface-nonedp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
 
-class _FoundationButton extends index.FoundationElement {
-}
-class FormAssociatedButton extends formAssociated.FormAssociated(_FoundationButton) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
-var __defProp$1 = Object.defineProperty;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$1(target, key, result);
-  return result;
-};
-class VividFoundationButton extends FormAssociatedButton {
-  constructor() {
-    super(...arguments);
-    /**
-     * Prevent events to propagate if disabled
-     * @internal
-     */
-    this.handleClick = (e) => {
-      if (this.disabled) {
-        e.stopPropagation();
-      }
-    };
-    /**
-     * Submits the parent form
-     */
-    this.handleSubmission = () => {
-      if (!this.form) {
-        return;
-      }
-      this.attachProxy();
-      this.form.requestSubmit(this.proxy);
-      this.detachProxy();
-    };
-    /**
-     * Resets the parent form
-     */
-    this.handleFormReset = () => {
-      this.form?.reset();
-    };
-  }
-  // @ts-expect-error Function is delcared but not used
-  formactionChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.formAction = this.formaction;
-    }
-  }
-  // @ts-expect-error Function is delcared but not used
-  formenctypeChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.formEnctype = this.formenctype;
-    }
-  }
-  // @ts-expect-error Function is delcared but not used
-  formmethodChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.formMethod = this.formmethod;
-    }
-  }
-  // @ts-expect-error Function is delcared but not used
-  formnovalidateChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.formNoValidate = this.formnovalidate;
-    }
-  }
-  // @ts-expect-error Function is delcared but not used
-  formtargetChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.formTarget = this.formtarget;
-    }
-  }
-  // @ts-expect-error Function is delcared but not used
-  typeChanged(previous, next) {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.type = this.type;
-    }
-    next === "submit" && this.addEventListener("click", this.handleSubmission);
-    previous === "submit" && this.removeEventListener("click", this.handleSubmission);
-    next === "reset" && this.addEventListener("click", this.handleFormReset);
-    previous === "reset" && this.removeEventListener("click", this.handleFormReset);
-  }
-  /** {@inheritDoc (FormAssociated:interface).validate} */
-  validate() {
-    super.validate(this.control);
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.proxy.setAttribute("type", this.type);
-    const elements = Array.from(this.control.children);
-    if (elements) {
-      elements.forEach((span) => {
-        span.addEventListener("click", this.handleClick);
-      });
-    }
-  }
-  /**
-   * @internal
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    const elements = Array.from(this.control.children);
-    if (elements) {
-      elements.forEach((span) => {
-        span.removeEventListener("click", this.handleClick);
-      });
-    }
-  }
-}
-__decorateClass$1([
-  index.attr({ mode: "boolean" })
-], VividFoundationButton.prototype, "autofocus");
-__decorateClass$1([
-  index.attr({ attribute: "form" })
-], VividFoundationButton.prototype, "formId");
-__decorateClass$1([
-  index.attr
-], VividFoundationButton.prototype, "formaction");
-__decorateClass$1([
-  index.attr
-], VividFoundationButton.prototype, "formenctype");
-__decorateClass$1([
-  index.attr
-], VividFoundationButton.prototype, "formmethod");
-__decorateClass$1([
-  index.attr({ mode: "boolean" })
-], VividFoundationButton.prototype, "formnovalidate");
-__decorateClass$1([
-  index.attr
-], VividFoundationButton.prototype, "formtarget");
-__decorateClass$1([
-  index.attr
-], VividFoundationButton.prototype, "type");
-class DelegatesARIAButton {
-}
-__decorateClass$1([
-  index.attr({ attribute: "aria-expanded" })
-], DelegatesARIAButton.prototype, "ariaExpanded");
-__decorateClass$1([
-  index.attr({ attribute: "aria-pressed" })
-], DelegatesARIAButton.prototype, "ariaPressed");
-applyMixins.applyMixins(DelegatesARIAButton, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.applyMixins(VividFoundationButton, DelegatesARIAButton);
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -173,16 +19,16 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Fab extends VividFoundationButton {
+class Fab extends button.VividFoundationButton {
 }
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Fab.prototype, "connotation");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Fab.prototype, "size");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Fab.prototype, "label");
 applyMixins.applyMixins(Fab, affix.AffixIconWithTrailing);
 
@@ -204,7 +50,7 @@ const getClasses = ({
 );
 const FabTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return index.html`
+  return defineVividComponent.html`
 		<button
 			class="${getClasses} "
 			?autofocus="${(x) => x.autofocus}"
@@ -240,17 +86,19 @@ const FabTemplate = (context) => {
 	`;
 };
 
-const fabDefinition = Fab.compose({
-  baseName: "fab",
-  template: FabTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const fabDefinition = defineVividComponent.defineVividComponent(
+  "fab",
+  Fab,
+  FabTemplate,
+  [definition.iconDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
-});
-const fabRegistries = [fabDefinition(), ...definition.iconRegistries];
-const registerFab = index.registerFactory(fabRegistries);
+);
+const registerFab = defineVividComponent.createRegisterFunction(fabDefinition);
 
 exports.fabDefinition = fabDefinition;
-exports.fabRegistries = fabRegistries;
 exports.registerFab = registerFab;

package/shared/definition24.js

@@ -1,167 +1,13 @@
-import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition27.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { F as FormAssociated } from './form-associated.js';
+import { i as iconDefinition } from './definition27.js';
+import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { A as ARIAGlobalStatesAndProperties } from './aria-global2.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { V as VividFoundationButton } from './button.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
 const styles = ".control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control:disabled{--_elevation-fill: var(--vvd-color-surface-nonedp);--_elevation-shadow: var(--vvd-shadow-surface-nonedp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
 
-class _FoundationButton extends FoundationElement {
-}
-class FormAssociatedButton extends FormAssociated(_FoundationButton) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
-var __defProp$1 = Object.defineProperty;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$1(target, key, result);
-  return result;
-};
-class VividFoundationButton extends FormAssociatedButton {
-  constructor() {
-    super(...arguments);
-    /**
-     * Prevent events to propagate if disabled
-     * @internal
-     */
-    this.handleClick = (e) => {
-      if (this.disabled) {
-        e.stopPropagation();
-      }
-    };
-    /**
-     * Submits the parent form
-     */
-    this.handleSubmission = () => {
-      if (!this.form) {
-        return;
-      }
-      this.attachProxy();
-      this.form.requestSubmit(this.proxy);
-      this.detachProxy();
-    };
-    /**
-     * Resets the parent form
-     */
-    this.handleFormReset = () => {
-      this.form?.reset();
-    };
-  }
-  // @ts-expect-error Function is delcared but not used
-  formactionChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.formAction = this.formaction;
-    }
-  }
-  // @ts-expect-error Function is delcared but not used
-  formenctypeChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.formEnctype = this.formenctype;
-    }
-  }
-  // @ts-expect-error Function is delcared but not used
-  formmethodChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.formMethod = this.formmethod;
-    }
-  }
-  // @ts-expect-error Function is delcared but not used
-  formnovalidateChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.formNoValidate = this.formnovalidate;
-    }
-  }
-  // @ts-expect-error Function is delcared but not used
-  formtargetChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.formTarget = this.formtarget;
-    }
-  }
-  // @ts-expect-error Function is delcared but not used
-  typeChanged(previous, next) {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.type = this.type;
-    }
-    next === "submit" && this.addEventListener("click", this.handleSubmission);
-    previous === "submit" && this.removeEventListener("click", this.handleSubmission);
-    next === "reset" && this.addEventListener("click", this.handleFormReset);
-    previous === "reset" && this.removeEventListener("click", this.handleFormReset);
-  }
-  /** {@inheritDoc (FormAssociated:interface).validate} */
-  validate() {
-    super.validate(this.control);
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.proxy.setAttribute("type", this.type);
-    const elements = Array.from(this.control.children);
-    if (elements) {
-      elements.forEach((span) => {
-        span.addEventListener("click", this.handleClick);
-      });
-    }
-  }
-  /**
-   * @internal
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    const elements = Array.from(this.control.children);
-    if (elements) {
-      elements.forEach((span) => {
-        span.removeEventListener("click", this.handleClick);
-      });
-    }
-  }
-}
-__decorateClass$1([
-  attr({ mode: "boolean" })
-], VividFoundationButton.prototype, "autofocus");
-__decorateClass$1([
-  attr({ attribute: "form" })
-], VividFoundationButton.prototype, "formId");
-__decorateClass$1([
-  attr
-], VividFoundationButton.prototype, "formaction");
-__decorateClass$1([
-  attr
-], VividFoundationButton.prototype, "formenctype");
-__decorateClass$1([
-  attr
-], VividFoundationButton.prototype, "formmethod");
-__decorateClass$1([
-  attr({ mode: "boolean" })
-], VividFoundationButton.prototype, "formnovalidate");
-__decorateClass$1([
-  attr
-], VividFoundationButton.prototype, "formtarget");
-__decorateClass$1([
-  attr
-], VividFoundationButton.prototype, "type");
-class DelegatesARIAButton {
-}
-__decorateClass$1([
-  attr({ attribute: "aria-expanded" })
-], DelegatesARIAButton.prototype, "ariaExpanded");
-__decorateClass$1([
-  attr({ attribute: "aria-pressed" })
-], DelegatesARIAButton.prototype, "ariaPressed");
-applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
-applyMixins(VividFoundationButton, DelegatesARIAButton);
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -238,15 +84,18 @@ const FabTemplate = (context) => {
 	`;
 };
 
-const fabDefinition = Fab.compose({
-  baseName: "fab",
-  template: FabTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const fabDefinition = defineVividComponent(
+  "fab",
+  Fab,
+  FabTemplate,
+  [iconDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
-});
-const fabRegistries = [fabDefinition(), ...iconRegistries];
-const registerFab = registerFactory(fabRegistries);
+);
+const registerFab = createRegisterFunction(fabDefinition);
 
-export { fabRegistries as a, fabDefinition as f, registerFab as r };
+export { fabDefinition as f, registerFab as r };

package/shared/definition25.cjs

@@ -1,18 +1,19 @@
 'use strict';
 
-const index = require('./index.cjs');
 const definition$1 = require('./definition27.cjs');
 const definition = require('./definition11.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
 const enums = require('./enums.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const formAssociated = require('./form-associated.cjs');
+const vividElement = require('./vivid-element.cjs');
 const formElements = require('./form-elements.cjs');
 const localized = require('./localized.cjs');
 const when = require('./when.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.control:hover{border-style:solid;background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.control:hover,.control:active,.control:focus-visible{background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
 
 var objectExtend = extend;
 
@@ -2140,7 +2141,7 @@ function $3ed269f2f0fb224b$var$__guardMethod__(obj, methodName, transform) {
     else return undefined;
 }
 
-class _FilePicker extends index.FoundationElement {
+class _FilePicker extends vividElement.VividElement {
 }
 class FormAssociatedFilePicker extends formAssociated.FormAssociated(_FilePicker) {
   constructor() {
@@ -2421,28 +2422,28 @@ formatNumbersInMessage_fn = function(message) {
   return message;
 };
 __decorateClass([
-  index.attr({ attribute: "single-file", mode: "boolean" })
+  defineVividComponent.attr({ attribute: "single-file", mode: "boolean" })
 ], FilePicker.prototype, "singleFile", 2);
 __decorateClass([
-  index.attr({ attribute: "max-files" })
+  defineVividComponent.attr({ attribute: "max-files" })
 ], FilePicker.prototype, "maxFiles", 2);
 __decorateClass([
-  index.attr({ mode: "fromView", attribute: "max-file-size" })
+  defineVividComponent.attr({ mode: "fromView", attribute: "max-file-size" })
 ], FilePicker.prototype, "maxFileSize", 2);
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], FilePicker.prototype, "accept", 2);
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], FilePicker.prototype, "size", 2);
 __decorateClass([
-  index.attr({ attribute: "invalid-file-type-error" })
+  defineVividComponent.attr({ attribute: "invalid-file-type-error" })
 ], FilePicker.prototype, "invalidFileTypeError", 2);
 __decorateClass([
-  index.attr({ attribute: "max-files-exceeded-error" })
+  defineVividComponent.attr({ attribute: "max-files-exceeded-error" })
 ], FilePicker.prototype, "maxFilesExceededError", 2);
 __decorateClass([
-  index.attr({ attribute: "file-too-big-error" })
+  defineVividComponent.attr({ attribute: "file-too-big-error" })
 ], FilePicker.prototype, "fileTooBigError", 2);
 FilePicker = __decorateClass([
   formElements.errorText,
@@ -2455,14 +2456,14 @@ const getClasses = ({ size }) => classNames.classNames("control", "dz-default",
   Boolean(size)
 ]);
 const FilePickerTemplate = (context) => {
-  return index.html`
+  return defineVividComponent.html`
 		${(x) => {
-    x.setButtonTag(context.tagFor(definition.Button$1));
+    x.setButtonTag(context.tagFor(definition.Button));
   }}
 		<div class="base" aria-label="${(x) => x.label}">
 			${when.when(
     (x) => x.label,
-    index.html`<label>${(x) => x.label}</label>`
+    defineVividComponent.html`<label>${(x) => x.label}</label>`
   )}
 			<div
 				${ref.ref("control")}
@@ -2479,21 +2480,19 @@ const FilePickerTemplate = (context) => {
 	`;
 };
 
-const filePickerDefinition = FilePicker.compose({
-  baseName: "file-picker",
-  template: FilePickerTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const filePickerDefinition = defineVividComponent.defineVividComponent(
+  "file-picker",
+  FilePicker,
+  FilePickerTemplate,
+  [definition$1.iconDefinition, definition.buttonDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
-});
-const filePickerRegistries = [
-  filePickerDefinition(),
-  ...definition$1.iconRegistries,
-  ...definition.buttonRegistries
-];
-const registerFilePicker = index.registerFactory(filePickerRegistries);
+);
+const registerFilePicker = defineVividComponent.createRegisterFunction(filePickerDefinition);
 
 exports.filePickerDefinition = filePickerDefinition;
-exports.filePickerRegistries = filePickerRegistries;
 exports.registerFilePicker = registerFilePicker;

package/shared/definition25.js

@@ -1,16 +1,17 @@
-import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition27.js';
-import { c as Button, a as buttonRegistries } from './definition11.js';
+import { i as iconDefinition } from './definition27.js';
+import { B as Button, b as buttonDefinition } from './definition11.js';
+import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
 import { C as Connotation } from './enums.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated } from './form-associated.js';
+import { V as VividElement } from './vivid-element.js';
 import { e as errorText, f as formElements, a as FormElementHelperText, g as getFeedbackTemplate } from './form-elements.js';
 import { L as Localized } from './localized.js';
 import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.control:hover{border-style:solid;background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.control:hover,.control:active,.control:focus-visible{background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
 
 var objectExtend = extend;
 
@@ -2138,7 +2139,7 @@ function $3ed269f2f0fb224b$var$__guardMethod__(obj, methodName, transform) {
     else return undefined;
 }
 
-class _FilePicker extends FoundationElement {
+class _FilePicker extends VividElement {
 }
 class FormAssociatedFilePicker extends FormAssociated(_FilePicker) {
   constructor() {
@@ -2477,19 +2478,18 @@ const FilePickerTemplate = (context) => {
 	`;
 };
 
-const filePickerDefinition = FilePicker.compose({
-  baseName: "file-picker",
-  template: FilePickerTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const filePickerDefinition = defineVividComponent(
+  "file-picker",
+  FilePicker,
+  FilePickerTemplate,
+  [iconDefinition, buttonDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
-});
-const filePickerRegistries = [
-  filePickerDefinition(),
-  ...iconRegistries,
-  ...buttonRegistries
-];
-const registerFilePicker = registerFactory(filePickerRegistries);
+);
+const registerFilePicker = createRegisterFunction(filePickerDefinition);
 
-export { filePickerRegistries as a, filePickerDefinition as f, registerFilePicker as r };
+export { filePickerDefinition as f, registerFilePicker as r };