@tylertech/forge 3.0.0-next.21 → 3.0.0-next.23

package/esm/checkbox/checkbox-constants.js

@@ -4,9 +4,8 @@
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
-import { INPUT_ARIA_ATTRIBUTES } from '../core';
 const elementName = `${COMPONENT_NAME_PREFIX}checkbox`;
-const attributes = {
+const observedAttributes = {
     CHECKED: 'checked',
     DEFAULT_CHECKED: 'default-checked',
     INDETERMINATE: 'indeterminate',
@@ -15,20 +14,18 @@ const attributes = {
     DISABLED: 'disabled',
     REQUIRED: 'required',
     READONLY: 'readonly',
-    LABEL_POSITION: 'label-position'
+    LABEL_POSITION: 'label-position',
+    TABINDEX: 'tabindex'
 };
+const attributes = Object.assign({}, observedAttributes);
 const selectors = {
     ROOT: '.forge-checkbox',
-    INPUT: 'input',
-    LABEL: 'label',
-    INPUT_SLOT: 'slot[name=input]',
-    STATE_LAYER: 'forge-state-layer',
-    SLOTTED_INPUT: 'input[type=checkbox]'
+    LABEL: '#label',
+    STATE_LAYER: 'forge-state-layer'
 };
-const forwardedAttributes = [...INPUT_ARIA_ATTRIBUTES];
 export const CHECKBOX_CONSTANTS = {
     elementName,
     selectors,
-    attributes,
-    forwardedAttributes
+    observedAttributes,
+    attributes
 };

package/esm/checkbox/checkbox-foundation.d.ts

@@ -16,10 +16,6 @@ export interface ICheckboxFoundation extends ICustomElementFoundation {
     required: boolean;
     readonly: boolean;
     labelPosition: CheckboxLabelPosition;
-    proxyClick(): void;
-    proxyLabel(value: string | null): void;
-    syncValidity(hasCustomValidityError: boolean): void;
-    setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
 }
 export declare class CheckboxFoundation implements ICheckboxFoundation {
     private _adapter;
@@ -34,16 +30,14 @@ export declare class CheckboxFoundation implements ICheckboxFoundation {
     private _labelPosition;
     private get _submittedValue();
     private get _formState();
-    private readonly _changeListener;
-    private readonly _inputSlotListener;
+    private readonly _clickListener;
+    private readonly _keydownListener;
+    private readonly _keyupListener;
     constructor(_adapter: ICheckboxAdapter);
     initialize(): void;
-    proxyClick(): void;
-    proxyLabel(value: string | null): void;
-    syncValidity(hasCustomValidityError: boolean): void;
-    setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined): void;
+    private _handleKeydown;
+    private _handleKeyup;
     private _handleChange;
-    private _handleInputSlotChange;
     get checked(): boolean;
     set checked(value: boolean);
     get defaultChecked(): boolean;

package/esm/checkbox/checkbox-foundation.js

@@ -29,54 +29,46 @@ export class CheckboxFoundation {
         this._required = false;
         this._readonly = false;
         this._labelPosition = 'end';
-        this._changeListener = (evt) => this._handleChange(evt);
-        this._inputSlotListener = () => this._handleInputSlotChange();
+        // Listeners
+        this._clickListener = (evt) => this._handleChange();
+        this._keydownListener = (evt) => this._handleKeydown(evt);
+        this._keyupListener = (evt) => this._handleKeyup(evt);
     }
     initialize() {
-        this._adapter.initialize();
-        this._adapter.addRootListener('change', this._changeListener);
-        this._adapter.addInputSlotListener(this._inputSlotListener);
+        this._adapter.addHostListener('click', this._clickListener);
+        this._adapter.addHostListener('keydown', this._keydownListener);
+        this._adapter.addHostListener('keyup', this._keyupListener);
         this._adapter.syncValue(this._submittedValue, this._formState);
     }
     ;
-    proxyClick() {
-        this._adapter.proxyClick();
-    }
-    proxyLabel(value) {
-        this._adapter.proxyLabel(value);
-    }
-    syncValidity(hasCustomValidityError) {
-        this._adapter.syncValidity(hasCustomValidityError);
+    _handleKeydown(evt) {
+        if (evt.key === ' ') {
+            evt.preventDefault();
+        }
     }
-    setValidity(flags, message) {
-        this._adapter.setValidity(flags, message);
+    _handleKeyup(evt) {
+        if (evt.key === ' ') {
+            this._handleChange();
+        }
     }
-    _handleChange(evt) {
-        if (this.readonly) {
-            this._adapter.setChecked(this._checked);
-            evt.stopPropagation();
+    _handleChange() {
+        if (this._readonly) {
             return;
         }
-        const target = evt.target;
         const oldValue = this._checked;
-        const newValue = target.checked;
-        this._checked = newValue;
-        const isCancelled = !this._adapter.redispatchEvent(evt, { cancelable: true });
-        if (isCancelled) {
-            this._checked = oldValue;
-            this._adapter.setChecked(this._checked);
+        const newValue = !this._checked;
+        // Call the public setter to ensure all the update logic is run
+        this.checked = newValue;
+        const event = new Event('change', { cancelable: true });
+        this._adapter.redispatchEvent(event);
+        if (event.defaultPrevented) {
+            this.checked = oldValue;
             return;
         }
-        this._adapter.syncValue(this._submittedValue, this._formState);
-        this._adapter.toggleHostAttribute(CHECKBOX_CONSTANTS.attributes.CHECKED, this._checked);
         // Toggle inderminate off after a user action
         this._indeterminate = false;
-        this._adapter.setIndeterminate(this._indeterminate);
         this._adapter.toggleHostAttribute(CHECKBOX_CONSTANTS.attributes.INDETERMINATE, this._indeterminate);
     }
-    _handleInputSlotChange() {
-        this._adapter.detectInputElement();
-    }
     get checked() {
         return this._checked;
     }
@@ -94,7 +86,6 @@ export class CheckboxFoundation {
     set defaultChecked(value) {
         if (this._defaultChecked !== value) {
             this._defaultChecked = value;
-            this._adapter.setDefaultChecked(this._defaultChecked);
             this._adapter.toggleHostAttribute(CHECKBOX_CONSTANTS.attributes.DEFAULT_CHECKED, this._defaultChecked);
         }
     }
@@ -104,7 +95,6 @@ export class CheckboxFoundation {
     set indeterminate(value) {
         if (this._indeterminate !== value) {
             this._indeterminate = value;
-            this._adapter.setIndeterminate(this._indeterminate);
             this._adapter.syncValue(this._submittedValue, this._formState);
             this._adapter.toggleHostAttribute(CHECKBOX_CONSTANTS.attributes.INDETERMINATE, this._indeterminate);
         }
@@ -115,7 +105,6 @@ export class CheckboxFoundation {
     set value(value) {
         if (this._value !== value) {
             this._value = value;
-            this._adapter.setValue(this._value);
             this._adapter.syncValue(this._submittedValue, this._formState);
             this._adapter.setHostAttribute(CHECKBOX_CONSTANTS.attributes.VALUE, this._value);
         }

package/esm/checkbox/checkbox.d.ts

@@ -3,24 +3,32 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { internals } from '../constants';
-import { BaseNullableFormComponent, IBaseNullableFormComponent } from '../core/base/base-nullable-form-component';
-import { ILabelAware } from '../label/label-aware';
+import { getFormState, getFormValue, setValidity } from '../constants';
+import { BaseComponent, FormValue } from '../core';
+import { IWithFocusable } from '../core/mixins/focus/with-focusable';
+import { IWithFormAssociation } from '../core/mixins/form/with-form-associated';
+import { IWithDefaultAria } from '../core/mixins/internals/with-default-aria';
+import { IWithElementInternals } from '../core/mixins/internals/with-element-internals';
+import { IWithLabelAwareness } from '../core/mixins/label/with-label-aware';
 import { CheckboxLabelPosition, CheckboxState } from './checkbox-constants';
-export interface ICheckboxComponent extends IBaseNullableFormComponent, ILabelAware {
+export interface ICheckboxComponent extends IWithFormAssociation, IWithFocusable, IWithLabelAwareness, IWithElementInternals, IWithDefaultAria {
+    value: string;
     checked: boolean;
     defaultChecked: boolean;
     indeterminate: boolean;
+    required: boolean;
     dense: boolean;
     labelPosition: CheckboxLabelPosition;
     toggle(force?: boolean): void;
-    setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
+    setFormValue(value: FormValue | null, state?: FormValue | null | undefined): void;
+    [setValidity](): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'forge-checkbox': ICheckboxComponent;
     }
 }
+declare const BaseCheckboxClass: import("../constants").AbstractConstructor<import("../core/mixins/form/with-form-associated").WithFormAssociationContract> & import("../constants").AbstractConstructor<import("../core/mixins/label/with-label-aware").WithLabelAwarenessContract> & import("../constants").AbstractConstructor<import("../core/mixins/focus/with-focusable").WithFocusableContract> & import("../constants").AbstractConstructor<import("../core/mixins/internals/with-default-aria").WithDefaultAriaContract> & import("../constants").AbstractConstructor<import("../core/mixins/internals/with-element-internals").WithElementInternalsContract> & typeof BaseComponent;
 /**
  * @tag forge-checkbox
  *
@@ -63,7 +71,7 @@ declare global {
  * @cssproperty --forge-checkbox-border-width - The width of the checkbox border.
  * @cssproperty --forge-checkbox-state-layer-size - The inline and block size of the state layer.
  * @cssproperty --forge-checkbox-state-layer-dense-size - The inline and block size of the state layer when dense.
- * @cssproperty --forge-checkbox-background-color - The color of the checkbox background when unchecked and not indeterminate.
+ * @cssproperty --forge-checkbox-background - The color of the checkbox background when unchecked and not indeterminate.
  * @cssproperty --forge-checkbox-width - The inline size of the checkbox.
  * @cssproperty --forge-checkbox-height - The block size of the checkbox.
  * @cssproperty --forge-checkbox-unchecked-border-width - The width of the checkbox border when unchecked and not indeterminate.
@@ -73,7 +81,7 @@ declare global {
  * @cssproperty --forge-checkbox-gap - The space between the checkbox and label.
  * @cssproperty --forge-checkbox-justify - How the checkbox and label are distributed along their main axis.
  * @cssproperty --forge-checkbox-direction - Whether the checkbox and label are arranged along the inline or block axis.
- * @cssproperty --forge-checkbox-checked-background-color - The color of the checkbox background when checked or indeterminate.
+ * @cssproperty --forge-checkbox-checked-background - The color of the checkbox background when checked or indeterminate.
  * @cssproperty --forge-checkbox-checked-border-width - The width of the checkbox border when checked or indeterminate.
  * @cssproperty --forge-checkbox-checked-border-color - The color of the checkbox border when checked or indeterminate.
  * @cssproperty --forge-checkbox-icon-color - The color of the checkmark and indeterminate mark.
@@ -93,7 +101,7 @@ declare global {
  * @cssproperty --forge-checkbox-background-animation-timing - The timing function of the background animations.
  * @cssproperty --forge-checkbox-icon-animation-timing - The timing function of the checked and indeterminate icons animations.
  *
- * @csspart checkbox - Styles the checkbox container element.
+ * @csspart root - Styles the root element.
  * @csspart background - Styles the checkbox background element.
  * @csspart checkmark - Styles the checkmark element.
  * @csspart mixedmark - Styles the indeterminate mark element.
@@ -101,29 +109,20 @@ declare global {
  * @csspart state-layer - Styles the state layer element.
  * @csspart focus-indicator - Styles the focus indicator element.
  */
-export declare class CheckboxComponent extends BaseNullableFormComponent implements ICheckboxComponent {
+export declare class CheckboxComponent extends BaseCheckboxClass implements ICheckboxComponent {
     static get observedAttributes(): string[];
-    get name(): string;
-    set name(value: string);
-    get form(): HTMLFormElement | null;
-    get labels(): NodeList;
-    get validity(): ValidityState;
-    get validationMessage(): string;
-    get willValidate(): boolean;
-    readonly [internals]: ElementInternals;
-    private _foundation;
+    private readonly _foundation;
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    setFormValue(value: string | File | FormData | null, state?: string | File | FormData | null | undefined): void;
-    checkValidity(): boolean;
-    reportValidity(): boolean;
-    setCustomValidity(error: string): void;
+    [getFormValue](): FormValue | null;
+    [getFormState](): CheckboxState;
+    [setValidity](): void;
     formResetCallback(): void;
-    formStateRestoreCallback(state: CheckboxState, reason: 'restore' | 'autocomplete'): void;
-    formDisabledCallback(isDisabled: boolean): void;
+    formStateRestoreCallback(state: CheckboxState): void;
     labelClickedCallback(): void;
     labelChangedCallback(value: string | null): void;
+    setFormValue(value: FormValue | null, state?: FormValue | null | undefined): void;
     checked: boolean;
     defaultChecked: boolean;
     indeterminate: boolean;
@@ -139,3 +138,4 @@ export declare class CheckboxComponent extends BaseNullableFormComponent impleme
      */
     toggle(force?: boolean): void;
 }
+export {};

package/esm/checkbox/checkbox.js

@@ -4,16 +4,22 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, FoundationProperty, attachShadowTemplate, coerceBoolean, isDefined, isString, toggleAttribute } from '@tylertech/forge-core';
-import { internals } from '../constants';
-import { BaseNullableFormComponent } from '../core/base/base-nullable-form-component';
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty, isDefined, isString } from '@tylertech/forge-core';
+import { getFormState, getFormValue, getValidationMessage, inputType, internals, setDefaultAria, setValidity } from '../constants';
+import { BaseComponent } from '../core';
+import { WithFocusable } from '../core/mixins/focus/with-focusable';
+import { WithFormAssociation } from '../core/mixins/form/with-form-associated';
+import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
+import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
+import { WithLabelAwareness } from '../core/mixins/label/with-label-aware';
 import { FocusIndicatorComponent } from '../focus-indicator/focus-indicator';
 import { StateLayerComponent } from '../state-layer/state-layer';
 import { CheckboxAdapter } from './checkbox-adapter';
 import { CHECKBOX_CONSTANTS } from './checkbox-constants';
 import { CheckboxFoundation } from './checkbox-foundation';
-const template = '<template><div class=\"forge-checkbox\" part=\"checkbox\"><div id=\"container\" class=\"container\"><slot name=\"input\"><input id=\"input\" class=\"input\" type=\"checkbox\"></slot><div class=\"background\" part=\"background\"><svg class=\"icon icon--checked\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"checkmark\"><path d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path></svg> <svg class=\"icon icon--indeterminate\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"mixedmark\"><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"></line></svg><forge-focus-indicator target=\"container\" part=\"focus-indicator\"></forge-focus-indicator></div><forge-state-layer target=\"container\" exportparts=\"surface:state-layer\"></forge-state-layer></div><label id=\"label\" for=\"input\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
-const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-checkbox{--_checkbox-primary-color:var(--forge-checkbox-primary-color, var(--forge-theme-tertiary, #3d5afe));--_checkbox-size:var(--forge-checkbox-size, 16px);--_checkbox-border-width:var(--forge-checkbox-border-width, var(--forge-border-medium, 2px));--_checkbox-icon-color:var(--forge-checkbox-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_checkbox-state-layer-size:var(--forge-checkbox-state-layer-size, 40px);--_checkbox-state-layer-dense-size:var(--forge-checkbox-state-layer-dense-size, 24px);--_checkbox-background-color:var(--forge-checkbox-background-color, var(--forge-theme-surface, #ffffff));--_checkbox-width:var(--forge-checkbox-width, var(--_checkbox-size));--_checkbox-height:var(--forge-checkbox-height, var(--_checkbox-size));--_checkbox-unchecked-border-width:var(--forge-checkbox-unchecked-border-width, var(--_checkbox-border-width));--_checkbox-unchecked-border-color:var(--forge-checkbox-unchecked-border-color, var(--forge-theme-surface-container-high, #9e9e9e));--_checkbox-shape:var(--forge-checkbox-shape, var(--forge-shape-small, 2px));--_checkbox-elevation:var(--forge-checkbox-elevation, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));--_checkbox-checked-background-color:var(--forge-checkbox-checked-background-color, var(--_checkbox-primary-color));--_checkbox-checked-border-width:var(--forge-checkbox-checked-border-width, var(--_checkbox-border-width));--_checkbox-checked-border-color:var(--forge-checkbox-checked-border-color, var(--_checkbox-checked-background-color));--_checkbox-icon-checked-color:var(--forge-checkbox-icon-checked-color, var(--_checkbox-icon-color));--_checkbox-icon-indeterminate-color:var(--forge-checkbox-icon-indeterminate-color, var(--_checkbox-icon-color));--_checkbox-icon-stroke-width:var(--forge-checkbox-icon-stroke-width, 4px);--_checkbox-gap:var(--forge-checkbox-gap, 0);--_checkbox-justify:var(--forge-checkbox-justify, space-between);--_checkbox-direction:var(--forge-checkbox-direction, initial);--_checkbox-state-layer-width:var(--forge-checkbox-state-layer-width, var(--_checkbox-state-layer-size));--_checkbox-state-layer-height:var(--forge-checkbox-state-layer-height, var(--_checkbox-state-layer-size));--_checkbox-state-layer-checked-color:var(--forge-checkbox-state-layer-checked-color, var(--_checkbox-primary-color));--_checkbox-state-layer-unchecked-color:var(--forge-checkbox-state-layer-unchecked-color, var(--_checkbox-color));--_checkbox-state-layer-shape:var(--forge-checkbox-state-layer-shape, var(--forge-shape-full, 9999px));--_checkbox-state-layer-dense-width:var(--forge-checkbox-state-layer-dense-width, var(--_checkbox-state-layer-dense-size));--_checkbox-state-layer-dense-height:var(--forge-checkbox-state-layer-dense-height, var(--_checkbox-state-layer-dense-size));--_checkbox-disabled-opacity:var(--forge-checkbox-disabled-opacity, 0.38);--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, var(--forge-animation-duration-short2, 100ms));--_checkbox-background-animation-timing:var(--forge-checkbox-background-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_checkbox-icon-animation-timing:var(--forge-checkbox-icon-animation-timing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-checkbox{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_checkbox-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_checkbox-justify);justify-content:var(--_checkbox-justify);gap:var(--_checkbox-gap);display:-webkit-box;display:flex}.forge-checkbox .container{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;border-radius:var(--_checkbox-state-layer-shape);inline-size:var(--_checkbox-state-layer-width);block-size:var(--_checkbox-state-layer-height);cursor:pointer}.forge-checkbox .input{position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-checkbox .background{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:background-color,border-width,border-color;transition-property:background-color,border-width,border-color;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-background-animation-timing);transition-timing-function:var(--_checkbox-background-animation-timing);-webkit-box-shadow:var(--_checkbox-elevation);box-shadow:var(--_checkbox-elevation);border-style:solid;border-width:var(--_checkbox-unchecked-border-width);border-color:var(--_checkbox-unchecked-border-color);border-radius:var(--_checkbox-shape);-webkit-box-sizing:border-box;box-sizing:border-box;block-size:var(--_checkbox-height);inline-size:var(--_checkbox-width);background-color:var(--_checkbox-background-color)}.forge-checkbox .icon{position:absolute;-webkit-transition-property:stroke-dashoffset;transition-property:stroke-dashoffset;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-icon-animation-timing);transition-timing-function:var(--_checkbox-icon-animation-timing);fill:none;stroke-width:var(--_checkbox-icon-stroke-width)}.forge-checkbox .icon--checked{stroke:var(--_checkbox-icon-checked-color);stroke-dasharray:30;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}.forge-checkbox .icon--indeterminate{stroke:var(--_checkbox-icon-indeterminate-color);stroke-dasharray:20;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}.forge-checkbox .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label1-text-decoration,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit)}.forge-checkbox .label:empty{display:none}.forge-checkbox ::slotted([slot=input]){position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([checked]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background-color:var(--_checkbox-checked-background-color)}:host([checked]) .icon--checked{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([checked]) .icon--checked:dir(rtl){stroke-dashoffset:60}:host([checked]) .icon--indeterminate{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([indeterminate]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background-color:var(--_checkbox-checked-background-color)}:host([indeterminate]) .icon--checked{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}:host([indeterminate]) .icon--indeterminate{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([indeterminate]) .icon--indeterminate:dir(rtl){stroke-dashoffset:40}:host([indeterminate]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([dense]) .forge-checkbox .container{inline-size:var(--_checkbox-state-layer-dense-width);block-size:var(--_checkbox-state-layer-dense-height)}:host([disabled]) .forge-checkbox{opacity:var(--_checkbox-disabled-opacity)}:host([disabled]) .forge-checkbox .container{cursor:not-allowed}:host([readonly]) .forge-checkbox .container{cursor:not-allowed}@media (prefers-reduced-motion){.forge-checkbox{--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-unchecked-color)}forge-focus-indicator{--forge-focus-indicator-shape:0px;--forge-focus-indicator-outward-offset:8px}';
+const template = '<template><div class=\"forge-checkbox\" part=\"root\"><div id=\"container\" class=\"container\"><div class=\"background\" part=\"background\"><svg class=\"icon icon--checked\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"checkmark\"><path d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path></svg> <svg class=\"icon icon--indeterminate\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"mixedmark\"><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"></line></svg><forge-focus-indicator target=\":host\" part=\"focus-indicator\"></forge-focus-indicator></div><forge-state-layer target=\":host\" exportparts=\"surface:state-layer\"></forge-state-layer></div><div id=\"label\" class=\"label\" part=\"label\"><slot></slot></div></div></template>';
+const styles = ':host{display:inline-block;outline:0;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-checkbox{--_checkbox-primary-color:var(--forge-checkbox-primary-color, var(--forge-theme-tertiary, #3d5afe));--_checkbox-size:var(--forge-checkbox-size, 16px);--_checkbox-border-width:var(--forge-checkbox-border-width, var(--forge-border-medium, 2px));--_checkbox-icon-color:var(--forge-checkbox-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_checkbox-state-layer-size:var(--forge-checkbox-state-layer-size, 40px);--_checkbox-state-layer-dense-size:var(--forge-checkbox-state-layer-dense-size, 24px);--_checkbox-background:var(--forge-checkbox-background, var(--forge-theme-surface, #ffffff));--_checkbox-width:var(--forge-checkbox-width, var(--_checkbox-size));--_checkbox-height:var(--forge-checkbox-height, var(--_checkbox-size));--_checkbox-unchecked-border-width:var(--forge-checkbox-unchecked-border-width, var(--_checkbox-border-width));--_checkbox-unchecked-border-color:var(--forge-checkbox-unchecked-border-color, var(--forge-theme-surface-container-high, #9e9e9e));--_checkbox-shape:var(--forge-checkbox-shape, var(--forge-shape-small, 2px));--_checkbox-elevation:var(--forge-checkbox-elevation, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));--_checkbox-checked-background:var(--forge-checkbox-checked-background, var(--_checkbox-primary-color));--_checkbox-checked-border-width:var(--forge-checkbox-checked-border-width, var(--_checkbox-border-width));--_checkbox-checked-border-color:var(--forge-checkbox-checked-border-color, var(--_checkbox-checked-background));--_checkbox-icon-checked-color:var(--forge-checkbox-icon-checked-color, var(--_checkbox-icon-color));--_checkbox-icon-indeterminate-color:var(--forge-checkbox-icon-indeterminate-color, var(--_checkbox-icon-color));--_checkbox-icon-stroke-width:var(--forge-checkbox-icon-stroke-width, 4px);--_checkbox-gap:var(--forge-checkbox-gap, 0);--_checkbox-justify:var(--forge-checkbox-justify, start);--_checkbox-direction:var(--forge-checkbox-direction, initial);--_checkbox-state-layer-width:var(--forge-checkbox-state-layer-width, var(--_checkbox-state-layer-size));--_checkbox-state-layer-height:var(--forge-checkbox-state-layer-height, var(--_checkbox-state-layer-size));--_checkbox-state-layer-checked-color:var(--forge-checkbox-state-layer-checked-color, var(--_checkbox-primary-color));--_checkbox-state-layer-unchecked-color:var(--forge-checkbox-state-layer-unchecked-color, var(--_checkbox-color));--_checkbox-state-layer-shape:var(--forge-checkbox-state-layer-shape, var(--forge-shape-full, 9999px));--_checkbox-dense-gap:var(--forge-checkbox-dense-gap, 8px);--_checkbox-state-layer-dense-width:var(--forge-checkbox-state-layer-dense-width, var(--_checkbox-state-layer-dense-size));--_checkbox-state-layer-dense-height:var(--forge-checkbox-state-layer-dense-height, var(--_checkbox-state-layer-dense-size));--_checkbox-disabled-opacity:var(--forge-checkbox-disabled-opacity, 0.38);--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, var(--forge-animation-duration-short2, 100ms));--_checkbox-background-animation-timing:var(--forge-checkbox-background-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_checkbox-icon-animation-timing:var(--forge-checkbox-icon-animation-timing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-checkbox{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_checkbox-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_checkbox-justify);justify-content:var(--_checkbox-justify);gap:var(--_checkbox-gap);display:-webkit-box;display:flex}.forge-checkbox .container{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;border-radius:var(--_checkbox-state-layer-shape);inline-size:var(--_checkbox-state-layer-width);block-size:var(--_checkbox-state-layer-height);cursor:pointer}.forge-checkbox .background{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:background,border-width,border-color;transition-property:background,border-width,border-color;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-background-animation-timing);transition-timing-function:var(--_checkbox-background-animation-timing);-webkit-box-shadow:var(--_checkbox-elevation);box-shadow:var(--_checkbox-elevation);border-style:solid;border-width:var(--_checkbox-unchecked-border-width);border-color:var(--_checkbox-unchecked-border-color);border-radius:var(--_checkbox-shape);-webkit-box-sizing:border-box;box-sizing:border-box;block-size:var(--_checkbox-height);inline-size:var(--_checkbox-width);background:var(--_checkbox-background)}.forge-checkbox .icon{position:absolute;-webkit-transition-property:stroke-dashoffset;transition-property:stroke-dashoffset;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-icon-animation-timing);transition-timing-function:var(--_checkbox-icon-animation-timing);fill:none;stroke-width:var(--_checkbox-icon-stroke-width)}.forge-checkbox .icon--checked{stroke:var(--_checkbox-icon-checked-color);stroke-dasharray:30;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}.forge-checkbox .icon--indeterminate{stroke:var(--_checkbox-icon-indeterminate-color);stroke-dasharray:20;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}.forge-checkbox .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label1-text-decoration,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);cursor:default}:host([checked]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background:var(--_checkbox-checked-background)}:host([checked]) .icon--checked{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([checked]) .icon--checked:dir(rtl){stroke-dashoffset:60}:host([checked]) .icon--indeterminate{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([indeterminate]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background:var(--_checkbox-checked-background)}:host([indeterminate]) .icon--checked{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}:host([indeterminate]) .icon--indeterminate{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([indeterminate]) .icon--indeterminate:dir(rtl){stroke-dashoffset:40}:host([indeterminate]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([dense]) .forge-checkbox{--_checkbox-gap:var(--_checkbox-dense-gap)}:host([dense]) .forge-checkbox .container{inline-size:var(--_checkbox-state-layer-dense-width);block-size:var(--_checkbox-state-layer-dense-height)}:host([disabled]) .forge-checkbox{opacity:var(--_checkbox-disabled-opacity)}:host([disabled]) .forge-checkbox .container{cursor:not-allowed}:host([readonly]) .forge-checkbox .container{cursor:not-allowed}@media (prefers-reduced-motion){.forge-checkbox{--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-unchecked-color)}forge-focus-indicator{--forge-focus-indicator-shape:0px;--forge-focus-indicator-outward-offset:8px}';
+const BaseCheckboxClass = WithFormAssociation(WithLabelAwareness(WithFocusable(WithDefaultAria(WithElementInternals(BaseComponent)))));
 /**
  * @tag forge-checkbox
  *
@@ -56,7 +62,7 @@ const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transpare
  * @cssproperty --forge-checkbox-border-width - The width of the checkbox border.
  * @cssproperty --forge-checkbox-state-layer-size - The inline and block size of the state layer.
  * @cssproperty --forge-checkbox-state-layer-dense-size - The inline and block size of the state layer when dense.
- * @cssproperty --forge-checkbox-background-color - The color of the checkbox background when unchecked and not indeterminate.
+ * @cssproperty --forge-checkbox-background - The color of the checkbox background when unchecked and not indeterminate.
  * @cssproperty --forge-checkbox-width - The inline size of the checkbox.
  * @cssproperty --forge-checkbox-height - The block size of the checkbox.
  * @cssproperty --forge-checkbox-unchecked-border-width - The width of the checkbox border when unchecked and not indeterminate.
@@ -66,7 +72,7 @@ const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transpare
  * @cssproperty --forge-checkbox-gap - The space between the checkbox and label.
  * @cssproperty --forge-checkbox-justify - How the checkbox and label are distributed along their main axis.
  * @cssproperty --forge-checkbox-direction - Whether the checkbox and label are arranged along the inline or block axis.
- * @cssproperty --forge-checkbox-checked-background-color - The color of the checkbox background when checked or indeterminate.
+ * @cssproperty --forge-checkbox-checked-background - The color of the checkbox background when checked or indeterminate.
  * @cssproperty --forge-checkbox-checked-border-width - The width of the checkbox border when checked or indeterminate.
  * @cssproperty --forge-checkbox-checked-border-color - The color of the checkbox border when checked or indeterminate.
  * @cssproperty --forge-checkbox-icon-color - The color of the checkmark and indeterminate mark.
@@ -86,7 +92,7 @@ const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transpare
  * @cssproperty --forge-checkbox-background-animation-timing - The timing function of the background animations.
  * @cssproperty --forge-checkbox-icon-animation-timing - The timing function of the checked and indeterminate icons animations.
  *
- * @csspart checkbox - Styles the checkbox container element.
+ * @csspart root - Styles the root element.
  * @csspart background - Styles the checkbox background element.
  * @csspart checkmark - Styles the checkmark element.
  * @csspart mixedmark - Styles the indeterminate mark element.
@@ -94,83 +100,87 @@ const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transpare
  * @csspart state-layer - Styles the state layer element.
  * @csspart focus-indicator - Styles the focus indicator element.
  */
-let CheckboxComponent = class CheckboxComponent extends BaseNullableFormComponent {
+let CheckboxComponent = class CheckboxComponent extends BaseCheckboxClass {
     static get observedAttributes() {
-        return [
-            CHECKBOX_CONSTANTS.attributes.CHECKED,
-            CHECKBOX_CONSTANTS.attributes.DEFAULT_CHECKED,
-            CHECKBOX_CONSTANTS.attributes.INDETERMINATE,
-            CHECKBOX_CONSTANTS.attributes.VALUE,
-            CHECKBOX_CONSTANTS.attributes.DENSE,
-            CHECKBOX_CONSTANTS.attributes.DISABLED,
-            CHECKBOX_CONSTANTS.attributes.REQUIRED,
-            CHECKBOX_CONSTANTS.attributes.READONLY,
-            CHECKBOX_CONSTANTS.attributes.LABEL_POSITION
-        ];
-    }
-    get name() {
-        var _a;
-        return (_a = this.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
-    }
-    set name(value) {
-        toggleAttribute(this, !!value, 'name', value !== null && value !== void 0 ? value : '');
-    }
-    get form() {
-        return this[internals].form;
-    }
-    get labels() {
-        return this[internals].labels;
-    }
-    get validity() {
-        this._foundation.syncValidity(this._hasCustomValidityError);
-        return this[internals].validity;
-    }
-    get validationMessage() {
-        this._foundation.syncValidity(this._hasCustomValidityError);
-        return this[internals].validationMessage;
-    }
-    get willValidate() {
-        return this[internals].willValidate;
+        return Object.values(CHECKBOX_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
-        attachShadowTemplate(this, template, styles, true);
-        this[internals] = this.attachInternals();
+        attachShadowTemplate(this, template, styles);
+        this[inputType] = 'checkbox';
         this._foundation = new CheckboxFoundation(new CheckboxAdapter(this));
     }
     connectedCallback() {
+        super.connectedCallback();
+        this[setDefaultAria]({
+            role: 'checkbox',
+            ariaChecked: this.checked ? 'true' : 'false',
+            ariaDisabled: this.disabled ? 'true' : 'false',
+            ariaRequired: this.required ? 'true' : 'false'
+        });
         this._foundation.initialize();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case CHECKBOX_CONSTANTS.attributes.CHECKED:
+            case CHECKBOX_CONSTANTS.observedAttributes.CHECKED:
                 this.checked = coerceBoolean(newValue);
                 break;
-            case CHECKBOX_CONSTANTS.attributes.DEFAULT_CHECKED:
+            case CHECKBOX_CONSTANTS.observedAttributes.DEFAULT_CHECKED:
                 this.defaultChecked = coerceBoolean(newValue);
                 break;
-            case CHECKBOX_CONSTANTS.attributes.INDETERMINATE:
+            case CHECKBOX_CONSTANTS.observedAttributes.INDETERMINATE:
                 this.indeterminate = coerceBoolean(newValue);
                 break;
-            case CHECKBOX_CONSTANTS.attributes.VALUE:
+            case CHECKBOX_CONSTANTS.observedAttributes.VALUE:
                 this.value = newValue;
                 break;
-            case CHECKBOX_CONSTANTS.attributes.DENSE:
+            case CHECKBOX_CONSTANTS.observedAttributes.DENSE:
                 this.dense = coerceBoolean(newValue);
                 break;
-            case CHECKBOX_CONSTANTS.attributes.DISABLED:
+            case CHECKBOX_CONSTANTS.observedAttributes.DISABLED:
                 this.disabled = coerceBoolean(newValue);
                 break;
-            case CHECKBOX_CONSTANTS.attributes.REQUIRED:
+            case CHECKBOX_CONSTANTS.observedAttributes.REQUIRED:
                 this.required = coerceBoolean(newValue);
                 break;
-            case CHECKBOX_CONSTANTS.attributes.READONLY:
+            case CHECKBOX_CONSTANTS.observedAttributes.READONLY:
                 this.readonly = coerceBoolean(newValue);
                 break;
-            case CHECKBOX_CONSTANTS.attributes.LABEL_POSITION:
+            case CHECKBOX_CONSTANTS.observedAttributes.LABEL_POSITION:
                 this.labelPosition = newValue;
                 break;
         }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    [getFormValue]() {
+        return this.checked ? this.value : null;
+    }
+    [getFormState]() {
+        if (this.checked) {
+            return this.indeterminate ? 'checked-indeterminate' : 'checked';
+        }
+        return this.indeterminate ? 'unchecked-indeterminate' : 'unchecked';
+    }
+    [setValidity]() {
+        this[internals].setValidity({ valueMissing: this.required && !this.checked }, this[getValidationMessage]({
+            checked: this.checked,
+            required: this.required
+        }));
+    }
+    formResetCallback() {
+        this.checked = this.defaultChecked;
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === 'checked' || state === 'checked-indeterminate';
+        this.indeterminate = state === 'unchecked-indeterminate' || state === 'checked-indeterminate';
+    }
+    labelClickedCallback() {
+        this.click();
+        // TODO: use `{ focusVisble: false }` when supported.
+        this.focus();
+    }
+    labelChangedCallback(value) {
+        this[setDefaultAria]({ ariaLabel: value });
     }
     setFormValue(value, state) {
         this[internals].setFormValue(value, state);
@@ -190,34 +200,6 @@ let CheckboxComponent = class CheckboxComponent extends BaseNullableFormComponen
             this.checked = false;
         }
     }
-    checkValidity() {
-        this._foundation.syncValidity(this._hasCustomValidityError);
-        return this[internals].checkValidity();
-    }
-    reportValidity() {
-        this._foundation.syncValidity(this._hasCustomValidityError);
-        return this[internals].reportValidity();
-    }
-    setCustomValidity(error) {
-        this._hasCustomValidityError = !!error;
-        this._foundation.setValidity({ customError: !!error }, error);
-    }
-    formResetCallback() {
-        this.checked = this.defaultChecked;
-    }
-    formStateRestoreCallback(state, reason) {
-        this.checked = state === 'checked' || state === 'checked-indeterminate';
-        this.indeterminate = state === 'unchecked-indeterminate' || state === 'checked-indeterminate';
-    }
-    formDisabledCallback(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    labelClickedCallback() {
-        this._foundation.proxyClick();
-    }
-    labelChangedCallback(value) {
-        this._foundation.proxyLabel(value);
-    }
     /**
      * Toggles the checkbox checked or unchecked.
      * @param force Whether to set the checkbox checked or unchecked.

package/esm/chip-field/chip-field-adapter.d.ts

@@ -4,31 +4,57 @@
  * License: Apache-2.0
  */
 import { IChipFieldComponent } from './chip-field';
-import { FieldAdapter, IFieldAdapter } from '../field/field-adapter';
-export interface IChipFieldAdapter extends IFieldAdapter {
-    addRootListener(type: string, callback: (event: Event) => void): void;
-    removeRootListener(type: string, callback: (event: Event) => void): void;
-    addMemberSlotListener(listener: (evt: Event) => void): void;
-    removeMemberSlotListener(listener: (evt: Event) => void): void;
-    addInputContainerListener(type: string, callback: (event: Event) => void): void;
-    removeInputContainerListener(type: string, callback: (event: Event) => void): void;
-    getSlottedMemberElements(): NodeListOf<HTMLElement>;
+import { ChipFieldInputAttributeObserver, ChipFieldValueChangeListener } from './chip-field-constants';
+import { BaseFieldAdapter, IBaseFieldAdapter } from '../field/base/base-field-adapter';
+import { IFieldComponent } from '../field';
+export interface IChipFieldAdapter extends IBaseFieldAdapter {
+    readonly popoverTargetElement: HTMLElement;
+    readonly hasInputValue: boolean;
+    readonly inputHasFocus: boolean;
+    initialize(): void;
+    addRootListener(type: string, listener: EventListener, options?: EventListenerOptions): void;
+    removeRootListener(type: string, listener: EventListener, options?: EventListenerOptions): void;
+    addInputListener(type: string, listener: EventListener): void;
+    removeInputListener(type: string, listener: EventListener): void;
+    clickInput(): void;
+    tryAddValueChangeListener(context: unknown, listener: ChipFieldValueChangeListener): void;
+    removeValueChangeListener(): void;
+    getSlottedMemberElements(): HTMLElement[];
     focusInput(): void;
-    tryPropagateClick(target: EventTarget | null): void;
+    handleDefaultSlotChange(slot: HTMLSlotElement, listener: ChipFieldInputAttributeObserver): void;
+    tryConnectSlottedLabel(slot: HTMLSlotElement): void;
+    toggleContainerClass(className: string, force?: boolean): void;
+    setDisabled(value: boolean): void;
 }
-export declare class ChipFieldAdapter extends FieldAdapter implements IChipFieldAdapter {
-    protected _memberSlot: HTMLSlotElement;
-    protected _inputContainerElement: HTMLElement;
+export declare class ChipFieldAdapter extends BaseFieldAdapter implements IChipFieldAdapter {
+    protected readonly _fieldElement: IFieldComponent;
+    private _containerElement;
+    private _memberSlot;
+    private _popoverTargetElement;
+    private _inputElement;
+    private _inputMutationObserver?;
+    private _destroyValueChangerListener;
+    get hasValue(): boolean;
+    get hasPlaceholder(): boolean;
+    get hasInputValue(): boolean;
+    get inputHasFocus(): boolean;
+    get popoverTargetElement(): HTMLElement;
     constructor(component: IChipFieldComponent);
     initialize(): void;
-    addRootListener(type: string, callback: (event: Event) => void): void;
-    removeRootListener(type: string, callback: (event: Event) => void): void;
-    addMemberSlotListener(listener: (evt: Event) => void): void;
-    removeMemberSlotListener(listener: (evt: Event) => void): void;
-    addInputContainerListener(type: string, callback: (event: Event) => void): void;
-    removeInputContainerListener(type: string, callback: (event: Event) => void): void;
-    fieldHasValue(): boolean;
+    addRootListener(type: string, listener: EventListener, options?: EventListenerOptions): void;
+    removeRootListener(type: string, listener: EventListener, options?: EventListenerOptions): void;
+    addInputListener(type: string, listener: EventListener): void;
+    removeInputListener(type: string, listener: EventListener): void;
+    clickInput(): void;
+    tryAddValueChangeListener(context: unknown, listener: ChipFieldValueChangeListener): void;
+    removeValueChangeListener(): void;
     focusInput(): void;
-    tryPropagateClick(target: EventTarget | null): void;
-    getSlottedMemberElements(): NodeListOf<HTMLElement>;
+    getSlottedMemberElements(): HTMLElement[];
+    click(): void;
+    applyLabel(value: string | null): void;
+    tryFloatLabel(force?: boolean | undefined): void;
+    handleDefaultSlotChange(slot: HTMLSlotElement, listener: ChipFieldInputAttributeObserver): void;
+    tryConnectSlottedLabel(slot: HTMLSlotElement): void;
+    toggleContainerClass(className: string, force?: boolean): void;
+    setDisabled(value: boolean): void;
 }