@vonage/vivid 4.9.0 → 4.11.0

package/shared/definition15.cjs

@@ -4,101 +4,23 @@ const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const formAssociated = require('./form-associated.cjs');
-const keyCodes = require('./key-codes.cjs');
 const formElements = require('./form-elements.cjs');
 const icon = require('./icon.cjs');
 const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 
+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 index.FoundationElement {
 }
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Checkbox:class)} component.
- *
- * @internal
- */
 class FormAssociatedCheckbox extends formAssociated.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 keyCodes.keySpace:
-                    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;
-        }
-    }
-};
-index.__decorate([
-    index.attr({ attribute: "readonly", mode: "boolean" })
-], Checkbox$1.prototype, "readOnly", void 0);
-index.__decorate([
-    index.observable
-], Checkbox$1.prototype, "defaultSlottedNodes", void 0);
-index.__decorate([
-    index.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) => {
@@ -110,16 +32,24 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const keySpace = " ";
-exports.Checkbox = class Checkbox extends Checkbox$1 {
+exports.Checkbox = class Checkbox 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;
@@ -137,8 +67,6 @@ exports.Checkbox = class Checkbox extends Checkbox$1 {
       return false;
     };
     /**
-     * !remove method as will be implemented by fast-foundation in version after 2.46.9
-     *
      * @internal
      */
     this.clickHandler = (event) => {
@@ -153,12 +81,31 @@ exports.Checkbox = class Checkbox extends Checkbox$1 {
       }
       return false;
     };
+    this.proxy.setAttribute("type", "checkbox");
+  }
+  // Map to proxy element
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+    }
+  }
+  ariaCheckedChanged() {
+    if (this.ariaChecked === "mixed") {
+      this.indeterminate = true;
+    } else {
+      this.indeterminate = false;
+      this.checked = this.ariaChecked === "true" ? true : false;
+    }
   }
   /**
    * @internal
    */
   checkedChanged(prev, next) {
     super.checkedChanged(prev, next);
+    this.ariaChecked = next == true ? "true" : "false";
     if (prev !== void 0) {
       this.$emit("input");
     }
@@ -173,6 +120,18 @@ __decorateClass([
 __decorateClass([
   index.attr
 ], exports.Checkbox.prototype, "connotation", 2);
+__decorateClass([
+  index.attr({ attribute: "aria-checked" })
+], exports.Checkbox.prototype, "ariaChecked", 2);
+__decorateClass([
+  index.attr({ attribute: "readonly", mode: "boolean" })
+], exports.Checkbox.prototype, "readOnly", 2);
+__decorateClass([
+  index.observable
+], exports.Checkbox.prototype, "defaultSlottedNodes", 2);
+__decorateClass([
+  index.observable
+], exports.Checkbox.prototype, "indeterminate", 2);
 __decorateClass([
   index.observable
 ], exports.Checkbox.prototype, "slottedContent", 2);
@@ -213,7 +172,7 @@ const CheckboxTemplate = (context) => {
 			class="${getClasses}"
 			role="checkbox"
 			aria-label="${(x) => x.ariaLabel}"
-			aria-checked="${(x) => x.checked}"
+			aria-checked="${(x) => x.indeterminate ? "mixed" : x.checked}"
 			aria-required="${(x) => x.required}"
 			aria-disabled="${(x) => x.disabled}"
 			aria-readonly="${(x) => x.readOnly}"

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,16 +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;
@@ -135,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) => {
@@ -151,12 +79,31 @@ let Checkbox = class extends Checkbox$1 {
       }
       return false;
     };
+    this.proxy.setAttribute("type", "checkbox");
+  }
+  // Map to proxy element
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+    }
+  }
+  ariaCheckedChanged() {
+    if (this.ariaChecked === "mixed") {
+      this.indeterminate = true;
+    } else {
+      this.indeterminate = false;
+      this.checked = this.ariaChecked === "true" ? true : false;
+    }
   }
   /**
    * @internal
    */
   checkedChanged(prev, next) {
     super.checkedChanged(prev, next);
+    this.ariaChecked = next == true ? "true" : "false";
     if (prev !== void 0) {
       this.$emit("input");
     }
@@ -171,6 +118,18 @@ __decorateClass([
 __decorateClass([
   attr
 ], Checkbox.prototype, "connotation", 2);
+__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);
@@ -211,7 +170,7 @@ const CheckboxTemplate = (context) => {
 			class="${getClasses}"
 			role="checkbox"
 			aria-label="${(x) => x.ariaLabel}"
-			aria-checked="${(x) => x.checked}"
+			aria-checked="${(x) => x.indeterminate ? "mixed" : x.checked}"
 			aria-required="${(x) => x.required}"
 			aria-disabled="${(x) => x.disabled}"
 			aria-readonly="${(x) => x.readOnly}"

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

@@ -44,14 +44,6 @@ class DialPad extends index.FoundationElement {
     this._onDial = () => {
       this.callActive ? this.$emit("end-call") : this.$emit("dial");
     };
-    /**
-     *
-     * @internal
-     */
-    this._deleteLastCharacter = () => {
-      this.value = this.value.slice(0, -1);
-      this.$emit("change");
-    };
   }
   valueChanged(_oldValue, newValue) {
     if (newValue !== void 0 && newValue !== null && this._textFieldEl && newValue !== this._textFieldEl.value) {
@@ -154,6 +146,14 @@ function syncFieldAndPadValues(x) {
 function stopPropagation(_, { event: e }) {
   e.stopImmediatePropagation();
 }
+function deleteLastCharacter(dialPad) {
+  dialPad.value = dialPad.value.slice(0, -1);
+  dialPad.$emit("input");
+  dialPad.$emit("change");
+  if (dialPad.value === "") {
+    dialPad._textFieldEl.focus();
+  }
+}
 function renderTextField(textFieldTag, buttonTag) {
   return index.html`<${textFieldTag} ${ref.ref(
     "_textFieldEl"
@@ -170,8 +170,13 @@ function renderTextField(textFieldTag, buttonTag) {
          ${when.when(
     (x) => x.value && x.value.length && x.value.length > 0,
     index.html`<${buttonTag}
-                slot="action-items" size='super-condensed' icon="backspace-line" aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
-								appearance='ghost' ?disabled="${(x) => x.disabled || x.callActive}" @click="${(x) => x._deleteLastCharacter()}">
+                				slot="action-items" 
+								size='super-condensed' 
+								icon="backspace-line" 
+								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
+								appearance='ghost' 
+								?disabled="${(x) => x.disabled || x.callActive}" 
+								@click="${(x) => deleteLastCharacter(x)}">
             </${buttonTag}>`
   )}
         </${textFieldTag}>`;
@@ -220,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';
@@ -42,14 +42,6 @@ class DialPad extends FoundationElement {
     this._onDial = () => {
       this.callActive ? this.$emit("end-call") : this.$emit("dial");
     };
-    /**
-     *
-     * @internal
-     */
-    this._deleteLastCharacter = () => {
-      this.value = this.value.slice(0, -1);
-      this.$emit("change");
-    };
   }
   valueChanged(_oldValue, newValue) {
     if (newValue !== void 0 && newValue !== null && this._textFieldEl && newValue !== this._textFieldEl.value) {
@@ -152,6 +144,14 @@ function syncFieldAndPadValues(x) {
 function stopPropagation(_, { event: e }) {
   e.stopImmediatePropagation();
 }
+function deleteLastCharacter(dialPad) {
+  dialPad.value = dialPad.value.slice(0, -1);
+  dialPad.$emit("input");
+  dialPad.$emit("change");
+  if (dialPad.value === "") {
+    dialPad._textFieldEl.focus();
+  }
+}
 function renderTextField(textFieldTag, buttonTag) {
   return html`<${textFieldTag} ${ref(
     "_textFieldEl"
@@ -168,8 +168,13 @@ function renderTextField(textFieldTag, buttonTag) {
          ${when(
     (x) => x.value && x.value.length && x.value.length > 0,
     html`<${buttonTag}
-                slot="action-items" size='super-condensed' icon="backspace-line" aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
-								appearance='ghost' ?disabled="${(x) => x.disabled || x.callActive}" @click="${(x) => x._deleteLastCharacter()}">
+                				slot="action-items" 
+								size='super-condensed' 
+								icon="backspace-line" 
+								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
+								appearance='ghost' 
+								?disabled="${(x) => x.disabled || x.callActive}" 
+								@click="${(x) => deleteLastCharacter(x)}">
             </${buttonTag}>`
   )}
         </${textFieldTag}>`;