@vonage/vivid 4.10.0 → 4.12.0

package/shared/definition15.js

@@ -1,102 +1,24 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition27.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { C as CheckableFormAssociated } from './form-associated.js';
-import { a as keySpace$1 } from './key-codes.js';
 import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, g as getFeedbackTemplate } from './form-elements.js';
 import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
+const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):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: var(--_connotation-color-primary-increment)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}.base:focus-visible .control:before{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));position:absolute;display:block;border-radius:2px;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.error:not(.checked) .control{background-color:var(--vvd-color-alert-50);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}";
+
 class _Checkbox extends FoundationElement {
 }
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Checkbox:class)} component.
- *
- * @internal
- */
 class FormAssociatedCheckbox extends CheckableFormAssociated(_Checkbox) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
-    }
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
 }
 
-/**
- * A Checkbox Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
- *
- * @slot checked-indicator - The checked indicator
- * @slot indeterminate-indicator - The indeterminate indicator
- * @slot - The default slot for the label
- * @csspart control - The element representing the visual checkbox control
- * @csspart label - The label
- * @fires change - Emits a custom change event when the checked state changes
- *
- * @public
- */
-let Checkbox$1 = class Checkbox extends FormAssociatedCheckbox {
-    constructor() {
-        super();
-        /**
-         * The element's value to be included in form submission when checked.
-         * Default to "on" to reach parity with input[type="checkbox"]
-         *
-         * @internal
-         */
-        this.initialValue = "on";
-        /**
-         * The indeterminate state of the control
-         */
-        this.indeterminate = false;
-        /**
-         * @internal
-         */
-        this.keypressHandler = (e) => {
-            if (this.readOnly) {
-                return;
-            }
-            switch (e.key) {
-                case keySpace$1:
-                    if (this.indeterminate) {
-                        this.indeterminate = false;
-                    }
-                    this.checked = !this.checked;
-                    break;
-            }
-        };
-        /**
-         * @internal
-         */
-        this.clickHandler = (e) => {
-            if (!this.disabled && !this.readOnly) {
-                if (this.indeterminate) {
-                    this.indeterminate = false;
-                }
-                this.checked = !this.checked;
-            }
-        };
-        this.proxy.setAttribute("type", "checkbox");
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-    }
-};
-__decorate([
-    attr({ attribute: "readonly", mode: "boolean" })
-], Checkbox$1.prototype, "readOnly", void 0);
-__decorate([
-    observable
-], Checkbox$1.prototype, "defaultSlottedNodes", void 0);
-__decorate([
-    observable
-], Checkbox$1.prototype, "indeterminate", void 0);
-
-const styles = ":host{display:inline-flex;flex-direction:column;vertical-align:middle}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):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: var(--_connotation-color-primary-increment)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}.base:focus-visible .control:before{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));position:absolute;display:block;border-radius:2px;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.error:not(.checked) .control{background-color:var(--vvd-color-alert-50);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}";
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -108,17 +30,24 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const keySpace = " ";
-let Checkbox = class extends Checkbox$1 {
+let Checkbox = class extends FormAssociatedCheckbox {
   constructor() {
-    super(...arguments);
+    super();
     this.ariaLabel = null;
     this.tabindex = null;
     this.ariaChecked = null;
     /**
-     * !remove method as will be implemented by fast-foundation in version after 2.46.9
+     * The element's value to be included in form submission when checked.
+     * Default to "on" to reach parity with input[type="checkbox"]
      *
      * @internal
      */
+    this.initialValue = "on";
+    this.defaultSlottedNodes = [];
+    this.indeterminate = false;
+    /**
+     * @internal
+     */
     this.keypressHandler = (event) => {
       if (event.target instanceof HTMLAnchorElement) {
         return true;
@@ -136,8 +65,6 @@ let Checkbox = class extends Checkbox$1 {
       return false;
     };
     /**
-     * !remove method as will be implemented by fast-foundation in version after 2.46.9
-     *
      * @internal
      */
     this.clickHandler = (event) => {
@@ -152,9 +79,16 @@ let Checkbox = class extends Checkbox$1 {
       }
       return false;
     };
+    this.proxy.setAttribute("type", "checkbox");
   }
-  indeterminateChanged(_, next) {
-    this.checked = !next;
+  // Map to proxy element
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+    }
   }
   ariaCheckedChanged() {
     if (this.ariaChecked === "mixed") {
@@ -187,6 +121,15 @@ __decorateClass([
 __decorateClass([
   attr({ attribute: "aria-checked" })
 ], Checkbox.prototype, "ariaChecked", 2);
+__decorateClass([
+  attr({ attribute: "readonly", mode: "boolean" })
+], Checkbox.prototype, "readOnly", 2);
+__decorateClass([
+  observable
+], Checkbox.prototype, "defaultSlottedNodes", 2);
+__decorateClass([
+  observable
+], Checkbox.prototype, "indeterminate", 2);
 __decorateClass([
   observable
 ], Checkbox.prototype, "slottedContent", 2);

package/shared/definition16.cjs

@@ -217,18 +217,20 @@ let Combobox$1 = class Combobox extends FormAssociatedCombobox {
      * @internal
      */
     clickHandler(e) {
-        if (this.disabled) {
+        const captured = e.target.closest(`option,[role=option]`);
+        if (this.disabled || (captured === null || captured === void 0 ? void 0 : captured.disabled)) {
             return;
         }
         if (this.open) {
-            const captured = e.target.closest(`option,[role=option]`);
-            if (!captured || captured.disabled) {
+            if (e.composedPath()[0] === this.control) {
                 return;
             }
-            this.selectedOptions = [captured];
-            this.control.value = captured.text;
-            this.clearSelectionRange();
-            this.updateValue(true);
+            if (captured) {
+                this.selectedOptions = [captured];
+                this.control.value = captured.text;
+                this.clearSelectionRange();
+                this.updateValue(true);
+            }
         }
         this.open = !this.open;
         if (this.open) {

package/shared/definition16.js

@@ -215,18 +215,20 @@ let Combobox$1 = class Combobox extends FormAssociatedCombobox {
      * @internal
      */
     clickHandler(e) {
-        if (this.disabled) {
+        const captured = e.target.closest(`option,[role=option]`);
+        if (this.disabled || (captured === null || captured === void 0 ? void 0 : captured.disabled)) {
             return;
         }
         if (this.open) {
-            const captured = e.target.closest(`option,[role=option]`);
-            if (!captured || captured.disabled) {
+            if (e.composedPath()[0] === this.control) {
                 return;
             }
-            this.selectedOptions = [captured];
-            this.control.value = captured.text;
-            this.clearSelectionRange();
-            this.updateValue(true);
+            if (captured) {
+                this.selectedOptions = [captured];
+                this.control.value = captured.text;
+                this.clearSelectionRange();
+                this.updateValue(true);
+            }
         }
         this.open = !this.open;
         if (this.open) {

package/shared/definition20.cjs

@@ -225,7 +225,7 @@ function renderDialButton(buttonTag) {
     </${buttonTag}>`;
 }
 const DialPadTemplate = (context) => {
-  const buttonTag = context.tagFor(definition.Button);
+  const buttonTag = context.tagFor(definition.Button$1);
   const iconTag = context.tagFor(icon.Icon);
   const textFieldTag = context.tagFor(definition$1.TextField);
   return index.html` <div class="${getClasses}">

package/shared/definition20.js

@@ -1,5 +1,5 @@
 import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
-import { B as Button, a as buttonRegistries } from './definition11.js';
+import { c as Button, a as buttonRegistries } from './definition11.js';
 import { T as TextField, a as textFieldRegistries } from './definition56.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { L as Localized } from './localized.js';

package/shared/definition21.cjs

@@ -286,7 +286,7 @@ function renderDismissButton(buttonTag) {
 const DialogTemplate = (context) => {
   const elevationTag = context.tagFor(definition.Elevation);
   const iconTag = context.tagFor(icon$1.Icon);
-  const buttonTag = context.tagFor(definition$1.Button);
+  const buttonTag = context.tagFor(definition$1.Button$1);
   return index.html`
 	<${elevationTag} dp="8">
 		<dialog class="${getClasses}"

package/shared/definition21.js

@@ -1,6 +1,6 @@
 import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition27.js';
-import { B as Button, a as buttonRegistries } from './definition11.js';
+import { c as Button, a as buttonRegistries } from './definition11.js';
 import { E as Elevation, e as elevationRegistries } from './definition63.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
 import { a as applyMixins } from './apply-mixins.js';

package/shared/definition24.cjs

@@ -3,13 +3,167 @@
 const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
 const affix = require('./affix.cjs');
-const button = require('./button.cjs');
+const formAssociated = require('./form-associated.cjs');
+const ariaGlobal = require('./aria-global2.cjs');
 const applyMixins = require('./apply-mixins.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 ;
@@ -19,7 +173,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Fab extends button.Button {
+class Fab extends VividFoundationButton {
 }
 __decorateClass([
   index.attr

package/shared/definition24.js

@@ -1,13 +1,167 @@
-import { a as attr, h as html, r as registerFactory } from './index.js';
+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 { B as Button$1 } from './button.js';
+import { F as FormAssociated } from './form-associated.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global2.js';
 import { a as applyMixins } from './apply-mixins.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 ;
@@ -17,7 +171,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Fab extends Button$1 {
+class Fab extends VividFoundationButton {
 }
 __decorateClass([
   attr