@m3e/web 2.0.3 → 2.0.4

package/dist/chips.js

@@ -3,9 +3,9 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import { unsafeCSS, css, LitElement, nothing, html } from 'lit';
-import { query, property, customElement } from 'lit/decorators.js';
-import { DesignToken, isDisabledMixin, isDisabledInteractiveMixin, isLinkButtonMixin, renderPseudoLink, hasAssignedNodes, getTextContent, FormSubmitter, AttachInternals, LinkButton, KeyboardClick, Focusable, DisabledInteractive, Disabled, Role, Vertical, Selected, Labelled, Dirty, Touched, FormAssociated, formValue, EventAttribute, RequiredConstraintValidation, Required, ConstraintValidation } from '@m3e/web/core';
+import { LitElement, nothing, html, unsafeCSS, css } from 'lit';
+import { AttachInternals, isDisabledMixin, isDisabledInteractiveMixin, isLinkButtonMixin, renderPseudoLink, DesignToken, element, setCustomState, hasAssignedNodes, getTextContent, FormSubmitter, LinkButton, KeyboardClick, Focusable, DisabledInteractive, Disabled, Role, Vertical, Selected, Labelled, Dirty, Touched, FormAssociated, formValue, EventAttribute, RequiredConstraintValidation, Required, ConstraintValidation } from '@m3e/web/core';
+import { query, property } from 'lit/decorators.js';
 import { selectionManager, SelectionManager, ListManager, ListKeyManager } from '@m3e/web/core/a11y';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -98,7 +98,7 @@ var _M3eChipElement_instances, _M3eChipElement_value, _M3eChipElement_textConten
  * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.
  * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.
  */
-let M3eChipElement = class M3eChipElement extends LitElement {
+let M3eChipElement = class M3eChipElement extends AttachInternals(LitElement) {
   constructor() {
     super(...arguments);
     _M3eChipElement_instances.add(this);
@@ -157,16 +157,16 @@ _M3eChipElement_renderContent = function _M3eChipElement_renderContent() {
   return html`${this._renderIcon()}<div class="label">${this._renderSlot()}</div>${this._renderTrailingIcon()}`;
 };
 _M3eChipElement_handleIconSlotChange = function _M3eChipElement_handleIconSlotChange(e) {
-  this.classList.toggle("-with-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "-with-icon", hasAssignedNodes(e.target));
 };
 _M3eChipElement_handleTrailingIconSlotChange = function _M3eChipElement_handleTrailingIconSlotChange(e) {
-  this.classList.toggle("-with-trailing-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "-with-trailing-icon", hasAssignedNodes(e.target));
 };
 _M3eChipElement_handleSlotChange = function _M3eChipElement_handleSlotChange(e) {
   __classPrivateFieldSet(this, _M3eChipElement_textContent, getTextContent(e.target), "f");
 };
 /** The styles of the element. */
-M3eChipElement.styles = css`:host { display: inline-block; vertical-align: middle; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; border-radius: var(--m3e-chip-container-shape, ${DesignToken.shape.corner.small}); height: calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken.density.calc(-2)}); font-size: var(--m3e-chip-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-chip-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-chip-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-chip-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host(:not(m3e-chip):not(:disabled)[disabled-interactive]) { cursor: not-allowed; } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) .base { user-select: none; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; column-gap: var(--m3e-chip-spacing, 0.5rem); } .label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host([variant="elevated"]) .base { background-color: var(--m3e-elevated-chip-container-color, ${DesignToken.color.surfaceContainerLow}); --m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1}); --m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${DesignToken.elevation.level2}); --m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1}); --m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1}); } :host([variant="outlined"]) .base { outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-style: solid; outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: var(--m3e-outlined-chip-outline-color, ${DesignToken.color.outlineVariant}); } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: color-mix( in srgb, var(--m3e-outlined-chip-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-outlined-chip-disabled-outline-opacity, 12%), transparent ); } :host(.-with-icon) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(.-with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(.-with-trailing-icon) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(.-with-trailing-icon)) .wrapper { padding-inline-end: var(--m3e-chip-padding-end, 1rem); } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]) { flex: none; width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem) !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-label-text-color, ${DesignToken.color.onSurface}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-icon-color, ${DesignToken.color.primary}); } :host(:disabled) .base, :host([disabled-interactive]) .base { color: color-mix( in srgb, var(--m3e-chip-disabled-label-text-color, ${DesignToken.color.onSurface}) var(--m3e-chip-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-chip-disabled-icon-color, ${DesignToken.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%), transparent ); } :host([variant="elevated"]:disabled) .base, :host([variant="elevated"][disabled-interactive]) .base { background-color: color-mix( in srgb, var(--m3e-elevated-chip-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-elevated-chip-disabled-container-opacity, 12%), transparent ); --m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${DesignToken.elevation.level0}); } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: CanvasText; } :host(:disabled) .base, :host([disabled-interactive]) .base, :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: GrayText; } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: GrayText; } }`;
+M3eChipElement.styles = css`:host { display: inline-block; vertical-align: middle; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; border-radius: var(--m3e-chip-container-shape, ${DesignToken.shape.corner.small}); height: calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken.density.calc(-2)}); font-size: var(--m3e-chip-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-chip-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-chip-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-chip-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host(:not(m3e-chip):not(:disabled)[disabled-interactive]) { cursor: not-allowed; } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) .base { user-select: none; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; column-gap: var(--m3e-chip-spacing, 0.5rem); } .label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host([variant="elevated"]) .base { background-color: var(--m3e-elevated-chip-container-color, ${DesignToken.color.surfaceContainerLow}); --m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1}); --m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${DesignToken.elevation.level2}); --m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1}); --m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1}); } :host([variant="outlined"]) .base { outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-style: solid; outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: var(--m3e-outlined-chip-outline-color, ${DesignToken.color.outlineVariant}); } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: color-mix( in srgb, var(--m3e-outlined-chip-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-outlined-chip-disabled-outline-opacity, 12%), transparent ); } :host(:state(-with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(:state(-with-icon))) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(:state(-with-trailing-icon)) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(:state(-with-trailing-icon))) .wrapper { padding-inline-end: var(--m3e-chip-padding-end, 1rem); } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]) { flex: none; width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem) !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-label-text-color, ${DesignToken.color.onSurface}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-icon-color, ${DesignToken.color.primary}); } :host(:disabled) .base, :host([disabled-interactive]) .base { color: color-mix( in srgb, var(--m3e-chip-disabled-label-text-color, ${DesignToken.color.onSurface}) var(--m3e-chip-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-chip-disabled-icon-color, ${DesignToken.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%), transparent ); } :host([variant="elevated"]:disabled) .base, :host([variant="elevated"][disabled-interactive]) .base { background-color: color-mix( in srgb, var(--m3e-elevated-chip-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-elevated-chip-disabled-container-opacity, 12%), transparent ); --m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${DesignToken.elevation.level0}); } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: CanvasText; } :host(:disabled) .base, :host([disabled-interactive]) .base, :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: GrayText; } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: GrayText; } }`;
 __decorate([query(".elevation")], M3eChipElement.prototype, "_elevation", void 0);
 __decorate([query(".focus-ring")], M3eChipElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eChipElement.prototype, "_stateLayer", void 0);
@@ -175,7 +175,7 @@ __decorate([property({
   reflect: true
 })], M3eChipElement.prototype, "variant", void 0);
 __decorate([property()], M3eChipElement.prototype, "value", null);
-M3eChipElement = __decorate([customElement("m3e-chip")], M3eChipElement);
+M3eChipElement = __decorate([element("m3e-chip")], M3eChipElement);
 
 /**
  * A chip users interact with to perform a smart or automated action that can span multiple applications.
@@ -247,13 +247,15 @@ M3eChipElement = __decorate([customElement("m3e-chip")], M3eChipElement);
  * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.
  * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.
  */
-let M3eAssistChipElement = class M3eAssistChipElement extends FormSubmitter(AttachInternals(LinkButton(KeyboardClick(Focusable(DisabledInteractive(Disabled(Role(M3eChipElement, "button")))))), true)) {
+let M3eAssistChipElement = class M3eAssistChipElement extends FormSubmitter(LinkButton(KeyboardClick(Focusable(DisabledInteractive(Disabled(Role(M3eChipElement, "button"))))))) {
   /** @internal @inheritdoc */
   _renderTrailingIcon() {
     return nothing;
   }
 };
-M3eAssistChipElement = __decorate([customElement("m3e-assist-chip")], M3eAssistChipElement);
+/** Indicates that this custom element participates in form submission, validation, and form state restoration. */
+M3eAssistChipElement.formAssociated = true;
+M3eAssistChipElement = __decorate([element("m3e-assist-chip")], M3eAssistChipElement);
 
 /**
  * A container used to organize chips into a cohesive unit.
@@ -290,7 +292,7 @@ let M3eChipSetElement = class M3eChipSetElement extends Vertical(LitElement) {
 };
 /** The styles of the element. */
 M3eChipSetElement.styles = css`:host { display: inline-flex; flex-wrap: wrap; vertical-align: middle; gap: var(--m3e-chip-set-spacing, 0.5rem); outline: none; } :host([vertical]) { flex-direction: column; }`;
-M3eChipSetElement = __decorate([customElement("m3e-chip-set")], M3eChipSetElement);
+M3eChipSetElement = __decorate([element("m3e-chip-set")], M3eChipSetElement);
 
 var _M3eFilterChipElement_instances, _M3eFilterChipElement_clickHandler, _M3eFilterChipElement_handleClick;
 /**
@@ -375,7 +377,7 @@ var _M3eFilterChipElement_instances, _M3eFilterChipElement_clickHandler, _M3eFil
  * @cssprop --m3e-chip-unselected-leading-icon-color - Leading icon color in unselected state.
  * @cssprop --m3e-chip-unselected-trailing-icon-color - Trailing icon color in unselected state.
  */
-let M3eFilterChipElement = class M3eFilterChipElement extends Selected(KeyboardClick(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(M3eChipElement, "radio"), true)))))) {
+let M3eFilterChipElement = class M3eFilterChipElement extends Selected(KeyboardClick(Focusable(DisabledInteractive(Disabled(Role(M3eChipElement, "radio")))))) {
   constructor() {
     super(...arguments);
     _M3eFilterChipElement_instances.add(this);
@@ -423,9 +425,11 @@ _M3eFilterChipElement_handleClick = function _M3eFilterChipElement_handleClick(e
     this.selected = selected;
   }
 };
+/** Indicates that this custom element participates in form submission, validation, and form state restoration. */
+M3eFilterChipElement.formAssociated = true;
 /** The styles of the element. */
-M3eFilterChipElement.styles = [M3eChipElement.styles, css`:host([selected]:not(.-hide-selection)) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } .icon { display: flex; align-items: center; justify-content: center; } .check { width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem); } :host(:not(:disabled):not([disabled-interactive])) .check { color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not([selected])) .check, :host(.-hide-selection) .check, :host(.-hide-selection:not(.-with-icon)) .icon { display: none; } :host(:not(.-with-icon)) .icon { margin-inline-start: calc(0px - var(--m3e-chip-with-icon-padding-start, 0.5rem)); transition: margin-inline-start ${DesignToken.motion.spring.fastEffects}; } :host([selected]) .icon { margin-inline-start: 0; } :host([selected]:not(.-hide-selection)) ::slotted([slot="icon"]) { display: none !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant}); --m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${DesignToken.color.onSurfaceVariant}); --m3e-state-layer-focus-color: var( --m3e-chip-unselected-state-layer-focus-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-state-layer-hover-color: var( --m3e-chip-unselected-state-layer-hover-color, ${DesignToken.color.onSurfaceVariant} ); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]) { color: var(--m3e-chip-unselected-leading-icon-color, ${DesignToken.color.primary}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-unselected-trailing-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: unset; outline-width: var(--m3e-chip-selected-outline-thickness, 0); color: var(--m3e-chip-selected-label-text-color, ${DesignToken.color.onSecondaryContainer}); background-color: var(--m3e-chip-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-chip-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-chip-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${DesignToken.elevation.level1}); --m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-chip-selected-state-layer-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-chip-selected-state-layer-hover-color, ${DesignToken.color.onSecondaryContainer} ); } :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]) { color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-selected-trailing-icon-color, ${DesignToken.color.onSecondaryContainer}); } @media (prefers-reduced-motion) { .base, :host(:not(.-with-icon)) .icon { transition: none; } } @media (forced-colors: active) { :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base, :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="trailing-icon"]), :host(:not(:disabled):not([disabled-interactive])) .check { color: ButtonText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-color: ButtonText; } }`];
-M3eFilterChipElement = __decorate([customElement("m3e-filter-chip")], M3eFilterChipElement);
+M3eFilterChipElement.styles = [M3eChipElement.styles, css`:host([selected]:not(:state(-hide-selection))) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } .icon { display: flex; align-items: center; justify-content: center; } .check { width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem); } :host(:not(:disabled):not([disabled-interactive])) .check { color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not([selected])) .check, :host(:state(-hide-selection)) .check, :host(:state(-hide-selection):not(:state(-with-icon))) .icon { display: none; } :host(:not(:state(-with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-chip-with-icon-padding-start, 0.5rem)); transition: margin-inline-start ${DesignToken.motion.spring.fastEffects}; } :host([selected]) .icon { margin-inline-start: 0; } :host([selected]:not(:state(-hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant}); --m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${DesignToken.color.onSurfaceVariant}); --m3e-state-layer-focus-color: var( --m3e-chip-unselected-state-layer-focus-color, ${DesignToken.color.onSurfaceVariant} ); --m3e-state-layer-hover-color: var( --m3e-chip-unselected-state-layer-hover-color, ${DesignToken.color.onSurfaceVariant} ); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]) { color: var(--m3e-chip-unselected-leading-icon-color, ${DesignToken.color.primary}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-unselected-trailing-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: unset; outline-width: var(--m3e-chip-selected-outline-thickness, 0); color: var(--m3e-chip-selected-label-text-color, ${DesignToken.color.onSecondaryContainer}); background-color: var(--m3e-chip-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-chip-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-chip-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${DesignToken.elevation.level1}); --m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-chip-selected-state-layer-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-chip-selected-state-layer-hover-color, ${DesignToken.color.onSecondaryContainer} ); } :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]) { color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-selected-trailing-icon-color, ${DesignToken.color.onSecondaryContainer}); } @media (prefers-reduced-motion) { .base, :host(:not(:state(-with-icon))) .icon { transition: none; } } @media (forced-colors: active) { :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base, :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="trailing-icon"]), :host(:not(:disabled):not([disabled-interactive])) .check { color: ButtonText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-color: ButtonText; } }`];
+M3eFilterChipElement = __decorate([element("m3e-filter-chip")], M3eFilterChipElement);
 
 var _M3eFilterChipSetElement_instances, _M3eFilterChipSetElement_directionalitySubscription, _M3eFilterChipSetElement_handleSlotChange, _M3eFilterChipSetElement_handleKeyDown, _M3eFilterChipSetElement_handleChange, _M3eFilterChipSetElement_updateChipRole, _a;
 /**
@@ -546,7 +550,7 @@ let M3eFilterChipSetElement = class M3eFilterChipSetElement extends Labelled(Dir
       this.ariaDisabled = this.multi && this.disabled ? "true" : null;
     }
     if (changedProperties.has("hideSelectionIndicator")) {
-      this.chips.forEach(x => x.classList.toggle("-hide-selection", this.hideSelectionIndicator));
+      this.chips.forEach(x => setCustomState(x, "-hide-selection", this.hideSelectionIndicator));
     }
   }
   /** @inheritdoc */
@@ -558,7 +562,7 @@ _M3eFilterChipSetElement_handleSlotChange = function _M3eFilterChipSetElement_ha
   const {
     added
   } = this[selectionManager].setItems([...this.querySelectorAll("m3e-filter-chip")]);
-  added.forEach(x => x.classList.toggle("-hide-selection", this.hideSelectionIndicator));
+  added.forEach(x => setCustomState(x, "-hide-selection", this.hideSelectionIndicator));
   __classPrivateFieldGet(this, _M3eFilterChipSetElement_instances, "m", _M3eFilterChipSetElement_updateChipRole).call(this);
 };
 _M3eFilterChipSetElement_handleKeyDown = function _M3eFilterChipSetElement_handleKeyDown(e) {
@@ -582,7 +586,7 @@ __decorate([property({
   attribute: "hide-selection-indicator",
   type: Boolean
 })], M3eFilterChipSetElement.prototype, "hideSelectionIndicator", void 0);
-M3eFilterChipSetElement = __decorate([customElement("m3e-filter-chip-set")], M3eFilterChipSetElement);
+M3eFilterChipSetElement = __decorate([element("m3e-filter-chip-set")], M3eFilterChipSetElement);
 
 var _M3eInputChipElement_instances, _M3eInputChipElement_handleAvatarSlotChange, _M3eInputChipElement_handleRemoveButtonClick, _M3eInputChipElement_handleKeyDown;
 /**
@@ -652,10 +656,15 @@ var _M3eInputChipElement_instances, _M3eInputChipElement_handleAvatarSlotChange,
  * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.
  * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.
  * @cssprop --m3e-chip-avatar-size - Font size of the avatar slot content.
+ * @cssprop --m3e-chip-avatar-icon-size - Size of the icon displayed inside the avatar when used in a chip.
+ * @cssprop --m3e-chip-avatar-font-size - Font size of text initials inside the avatar when used in a chip.
+ * @cssprop --m3e-chip-avatar-font-weight - Font weight of text initials inside the avatar when used in a chip.
+ * @cssprop --m3e-chip-avatar-line-height - Line height of text initials inside the avatar when used in a chip.
+ * @cssprop --m3e-chip-avatar-tracking - Letter spacing (tracking) of text initials inside the avatar when used in a chip.
  * @cssprop --m3e-chip-disabled-avatar-opacity - Opacity applied to the avatar when disabled.
  * @cssprop --m3e-chip-with-avatar-padding-start - Start padding when an avatar is present.
  */
-let M3eInputChipElement = class M3eInputChipElement extends EventAttribute(DisabledInteractive(Disabled(AttachInternals(Role(M3eChipElement, "row"), true))), "remove") {
+let M3eInputChipElement = class M3eInputChipElement extends EventAttribute(DisabledInteractive(Disabled(Role(M3eChipElement, "row"))), "remove") {
   constructor() {
     super(...arguments);
     _M3eInputChipElement_instances.add(this);
@@ -680,7 +689,7 @@ let M3eInputChipElement = class M3eInputChipElement extends EventAttribute(Disab
     super.update(changedProperties);
     this.removeAttribute("tabindex");
     if (changedProperties.has("removable")) {
-      this.classList.toggle("-with-trailing-icon", this.removable);
+      setCustomState(this, "-with-trailing-icon", this.removable);
     }
   }
   /** @inheritdoc */
@@ -694,7 +703,7 @@ let M3eInputChipElement = class M3eInputChipElement extends EventAttribute(Disab
 };
 _M3eInputChipElement_instances = new WeakSet();
 _M3eInputChipElement_handleAvatarSlotChange = function _M3eInputChipElement_handleAvatarSlotChange(e) {
-  this.classList.toggle("-with-avatar", hasAssignedNodes(e.target));
+  setCustomState(this, "-with-avatar", hasAssignedNodes(e.target));
 };
 _M3eInputChipElement_handleRemoveButtonClick = function _M3eInputChipElement_handleRemoveButtonClick(e) {
   e.stopPropagation();
@@ -710,8 +719,10 @@ _M3eInputChipElement_handleKeyDown = function _M3eInputChipElement_handleKeyDown
     }
   }
 };
+/** Indicates that this custom element participates in form submission, validation, and form state restoration. */
+M3eInputChipElement.formAssociated = true;
 /** The styles of the element. */
-M3eInputChipElement.styles = [M3eChipElement.styles, css`.cell { display: inline-flex; align-items: center; outline: none; column-gap: var(--m3e-chip-spacing, 0.5rem); min-width: 0; } .remove-button { --m3e-icon-button-extra-small-container-height: 1.5rem; --m3e-icon-button-extra-small-icon-size: var(--m3e-chip-icon-size, 1.125rem); width: 1.5rem; } .remove-icon { flex: none; width: var(--m3e-chip-icon-size, 1.125rem); height: var(--m3e-chip-icon-size, 1.125rem); } .touch { top: calc( 0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken.density.calc(-2)})) / 2) ); } .wrapper { height: 100%; overflow: visible; min-width: 0; } ::slotted([slot="avatar"]) { flex: none; font-size: var(--m3e-chip-avatar-size, 1.5rem); } :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { opacity: var(--m3e-chip-disabled-avatar-opacity, 38%); color: var(--m3e-chip-disabled-icon-color, ${DesignToken.color.onSurface}); } :host(.-with-avatar) ::slotted([slot="icon"]) { display: none; } :host(.-with-avatar) .wrapper { padding-inline-start: var(--m3e-chip-with-avatar-padding-start, 0.25rem); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { color: CanvasText; } }`];
+M3eInputChipElement.styles = [M3eChipElement.styles, css`.cell { display: inline-flex; align-items: center; outline: none; column-gap: var(--m3e-chip-spacing, 0.5rem); min-width: 0; } .remove-button { --m3e-icon-button-extra-small-container-height: 1.5rem; --m3e-icon-button-extra-small-icon-size: var(--m3e-chip-icon-size, 1.125rem); width: 1.5rem; } .remove-icon { flex: none; width: var(--m3e-chip-icon-size, 1.125rem); height: var(--m3e-chip-icon-size, 1.125rem); } .touch { top: calc( 0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken.density.calc(-2)})) / 2) ); } .wrapper { height: 100%; overflow: visible; min-width: 0; } ::slotted([slot="avatar"]) { flex: none; font-size: var(--m3e-chip-avatar-size, 1.5rem); } ::slotted(m3e-avatar[slot="avatar"]) { --m3e-icon-size: var(--m3e-chip-avatar-icon-size, 1.125rem); --m3e-avatar-size: var(--m3e-chip-avatar-size, 1.5rem); --m3e-avatar-font-size: var( --m3e-chip-avatar-font-size, ${DesignToken.typescale.standard.title.small.fontSize} ); --m3e-avatar-font-weight: var( --m3e-chip-avatar-font-height, ${DesignToken.typescale.standard.title.small.fontWeight} ); --m3e-avatar-line-height: var( --m3e-chip-avatar-line-height, ${DesignToken.typescale.standard.title.small.lineHeight} ); --m3e-avatar-tracking: var(--m3e-chip-avatar-tracking, ${DesignToken.typescale.standard.title.small.tracking}); } :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { opacity: var(--m3e-chip-disabled-avatar-opacity, 38%); color: var(--m3e-chip-disabled-icon-color, ${DesignToken.color.onSurface}); } :host(:state(-with-avatar)) ::slotted([slot="icon"]) { display: none; } :host(:state(-with-avatar)) .wrapper { padding-inline-start: var(--m3e-chip-with-avatar-padding-start, 0.25rem); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { color: CanvasText; } }`];
 __decorate([query(".cell")], M3eInputChipElement.prototype, "cell", void 0);
 __decorate([query(".remove-button")], M3eInputChipElement.prototype, "removeButton", void 0);
 __decorate([property({
@@ -720,7 +731,7 @@ __decorate([property({
 __decorate([property({
   attribute: "remove-label"
 })], M3eInputChipElement.prototype, "removeLabel", void 0);
-M3eInputChipElement = __decorate([customElement("m3e-input-chip")], M3eInputChipElement);
+M3eInputChipElement = __decorate([element("m3e-input-chip")], M3eInputChipElement);
 
 var _M3eInputChipSetElement_instances, _M3eInputChipSetElement_directionalitySubscription, _M3eInputChipSetElement_inputChangeHandler, _M3eInputChipSetElement_inputKeyDownHandler, _M3eInputChipSetElement_focusHandler, _M3eInputChipSetElement_focusInHandler, _M3eInputChipSetElement_focusOutHandler, _M3eInputChipSetElement_chipRemoveHandler, _M3eInputChipSetElement_chipClickHandler, _M3eInputChipSetElement_listManager, _M3eInputChipSetElement_listKeyManager, _M3eInputChipSetElement_ignoreInputChange, _M3eInputChipSetElement_input, _M3eInputChipSetElement_tabindex, _M3eInputChipSetElement_handleKeyDown, _M3eInputChipSetElement_handleSlotChange, _M3eInputChipSetElement_handleInputSlotChange, _M3eInputChipSetElement_handleFocus, _M3eInputChipSetElement_handleFocusIn, _M3eInputChipSetElement_handleFocusOut, _M3eInputChipSetElement_handleChipRemove, _M3eInputChipSetElement_handleChipClick, _M3eInputChipSetElement_handleInputChange, _M3eInputChipSetElement_handleInputKeyDown;
 /**
@@ -944,28 +955,28 @@ _M3eInputChipSetElement_handleChipRemove = function _M3eInputChipSetElement_hand
 _M3eInputChipSetElement_handleChipClick = function _M3eInputChipSetElement_handleChipClick(e) {
   __classPrivateFieldGet(this, _M3eInputChipSetElement_listKeyManager, "f").updateActiveItem(e.composedPath().find(x => x instanceof M3eInputChipElement)?.cell);
 };
-_M3eInputChipSetElement_handleInputChange = function _M3eInputChipSetElement_handleInputChange() {
+_M3eInputChipSetElement_handleInputChange = /** @private */
+async function _M3eInputChipSetElement_handleInputChange() {
   const value = __classPrivateFieldGet(this, _M3eInputChipSetElement_input, "f")?.value;
   if (!value) return;
-  setTimeout(() => {
-    const value = __classPrivateFieldGet(this, _M3eInputChipSetElement_input, "f")?.value;
-    if (!value) return;
-    const chip = document.createElement("m3e-input-chip");
-    chip.removable = true;
-    chip.appendChild(document.createTextNode(value));
-    this.appendChild(chip);
-    if (__classPrivateFieldGet(this, _M3eInputChipSetElement_input, "f")) {
-      try {
-        __classPrivateFieldSet(this, _M3eInputChipSetElement_ignoreInputChange, true, "f");
-        __classPrivateFieldGet(this, _M3eInputChipSetElement_input, "f").value = "";
-      } finally {
-        __classPrivateFieldSet(this, _M3eInputChipSetElement_ignoreInputChange, false, "f");
-      }
+  const chip = document.createElement("m3e-input-chip");
+  chip.removable = true;
+  chip.appendChild(document.createTextNode(value));
+  this.appendChild(chip);
+  if (chip.isUpdatePending) {
+    await chip.updateComplete;
+  }
+  if (__classPrivateFieldGet(this, _M3eInputChipSetElement_input, "f")) {
+    try {
+      __classPrivateFieldSet(this, _M3eInputChipSetElement_ignoreInputChange, true, "f");
+      __classPrivateFieldGet(this, _M3eInputChipSetElement_input, "f").value = "";
+    } finally {
+      __classPrivateFieldSet(this, _M3eInputChipSetElement_ignoreInputChange, false, "f");
     }
-    this.dispatchEvent(new Event("change", {
-      bubbles: true
-    }));
-  });
+  }
+  this.dispatchEvent(new Event("change", {
+    bubbles: true
+  }));
 };
 _M3eInputChipSetElement_handleInputKeyDown = function _M3eInputChipSetElement_handleInputKeyDown(e) {
   if (e.key === "Backspace" && !__classPrivateFieldGet(this, _M3eInputChipSetElement_input, "f")?.value) {
@@ -976,7 +987,7 @@ _M3eInputChipSetElement_handleInputKeyDown = function _M3eInputChipSetElement_ha
   }
 };
 (() => {
-  if (document) {
+  if (typeof window !== "undefined") {
     const lightDomStyle = new CSSStyleSheet();
     lightDomStyle.replaceSync(css`m3e-input-chip-set [slot="input"]::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken.motion.duration.extraLong1}; } m3e-input-chip-set:not(:focus-within) [slot="input"]::placeholder { opacity: 0; transition: 0s; } m3e-input-chip-set:hover [slot="input"]::placeholder { transition: 0s; } @media (prefers-reduced-motion) { m3e-input-chip-set [slot="input"]::placeholder { transition: none !important; } }`.toString());
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
@@ -984,7 +995,7 @@ _M3eInputChipSetElement_handleInputKeyDown = function _M3eInputChipSetElement_ha
 })();
 /** The styles of the element. */
 M3eInputChipSetElement.styles = [M3eChipSetElement.styles, css`::slotted([slot="input"]) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(m3e-input-chip) { min-width: 0; } span[role="row"], span[role="gridcell"] { display: contents; }`];
-M3eInputChipSetElement = __decorate([customElement("m3e-input-chip-set")], M3eInputChipSetElement);
+M3eInputChipSetElement = __decorate([element("m3e-input-chip-set")], M3eInputChipSetElement);
 
 /**
  * A chip used to help narrow a user's intent by presenting dynamically generated suggestions, such as
@@ -1057,13 +1068,15 @@ M3eInputChipSetElement = __decorate([customElement("m3e-input-chip-set")], M3eIn
  * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.
  * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.
  */
-let M3eSuggestionChipElement = class M3eSuggestionChipElement extends FormSubmitter(AttachInternals(LinkButton(KeyboardClick(Focusable(DisabledInteractive(Disabled(Role(M3eChipElement, "button")))))), true)) {
+let M3eSuggestionChipElement = class M3eSuggestionChipElement extends FormSubmitter(LinkButton(KeyboardClick(Focusable(DisabledInteractive(Disabled(Role(M3eChipElement, "button"))))))) {
   /** @internal @inheritdoc */
   _renderTrailingIcon() {
     return nothing;
   }
 };
-M3eSuggestionChipElement = __decorate([customElement("m3e-suggestion-chip")], M3eSuggestionChipElement);
+/** Indicates that this custom element participates in form submission, validation, and form state restoration. */
+M3eSuggestionChipElement.formAssociated = true;
+M3eSuggestionChipElement = __decorate([element("m3e-suggestion-chip")], M3eSuggestionChipElement);
 
 export { M3eAssistChipElement, M3eChipElement, M3eChipSetElement, M3eFilterChipElement, M3eFilterChipSetElement, M3eInputChipElement, M3eInputChipSetElement, M3eSuggestionChipElement };
 //# sourceMappingURL=chips.js.map