@m3e/web 2.5.3 → 2.5.5

package/dist/chips.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"chips.min.js","sources":["../../src/chips/ChipElement.ts","../../src/chips/AssistChipElement.ts","../../src/chips/ChipSetElement.ts","../../src/chips/FilterChipElement.ts","../../src/chips/FilterChipSetElement.ts","../../src/chips/InputChipElement.ts","../../src/chips/InputChipSetElement.ts","../../src/chips/SuggestionChipElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  getTextContent,\r\n  hasAssignedNodes,\r\n  isDisabledInteractiveMixin,\r\n  isDisabledMixin,\r\n  isLinkButtonMixin,\r\n  M3eElevationElement,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ChipVariant } from \"./ChipVariant\";\r\n\r\n/**\r\n * A non-interactive chip used to convey small pieces of information.\r\n *\r\n * @description\r\n * The `m3e-chip` component establishes the foundational structure for chips. It supports expressive styling,\r\n * accessible interaction, and flexible content projection, aligning with Material 3 guidelines. Appearance\r\n * variants include `elevated` and `outlined`, enabling visual differentiation and contextual emphasis.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-chip` and `m3e-chip-set` components to present non-interactive chips.\r\n * ```html\r\n * <m3e-chip-set>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"palette\"></m3e-icon>Design</m3e-chip>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"accessibility_new\"></m3e-icon>Accessibility</m3e-chip>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"motion_photos_on\"></m3e-icon>Motion</m3e-chip>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"description\"></m3e-icon>Documentation</m3e-chip>\r\n * </m3e-chip-set>\r\n * ```\r\n *\r\n * @tag m3e-chip\r\n *\r\n * @slot - Renders the label of the chip.\r\n * @slot icon - Renders an icon before the chip's label.\r\n * @slot trailing-icon - Renders an icon after the chip's label.\r\n *\r\n * @attr value - A string representing the value of the chip.\r\n * @attr variant - The appearance variant of the chip.\r\n *\r\n * @cssprop --m3e-chip-container-shape - Border radius of the chip container.\r\n * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.\r\n * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.\r\n * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.\r\n * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.\r\n * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.\r\n * @cssprop --m3e-chip-label-text-color - Label text color in default state.\r\n * @cssprop --m3e-chip-icon-color - Icon color in default state.\r\n * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.\r\n * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.\r\n * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.\r\n * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.\r\n * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.\r\n * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.\r\n * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.\r\n * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.\r\n * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.\r\n */\r\n@customElement(\"m3e-chip\")\r\nexport class M3eChipElement extends AttachInternals(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      outline: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n      border-radius: var(--m3e-chip-container-shape, ${DesignToken.shape.corner.small});\r\n      height: calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken.density.calc(-2)});\r\n      font-size: var(--m3e-chip-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-chip-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-chip-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-chip-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) {\r\n      cursor: pointer;\r\n    }\r\n    :host(:not(m3e-chip):not(:disabled)[disabled-interactive]) {\r\n      cursor: not-allowed;\r\n    }\r\n    :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) .base {\r\n      user-select: none;\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      column-gap: var(--m3e-chip-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    :host([variant=\"elevated\"]) .base {\r\n      background-color: var(--m3e-elevated-chip-container-color, ${DesignToken.color.surfaceContainerLow});\r\n\r\n      --m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1});\r\n      --m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${DesignToken.elevation.level2});\r\n      --m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1});\r\n      --m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1});\r\n    }\r\n    :host([variant=\"outlined\"]) .base {\r\n      outline-width: var(--m3e-outlined-chip-outline-thickness, 1px);\r\n      outline-style: solid;\r\n      outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px));\r\n    }\r\n    :host(:not(:disabled):not([disabled-interactive])[variant=\"outlined\"]) .base {\r\n      outline-color: var(--m3e-outlined-chip-outline-color, ${DesignToken.color.outlineVariant});\r\n    }\r\n    :host(:disabled[variant=\"outlined\"]) .base,\r\n    :host([disabled-interactive][variant=\"outlined\"]) .base {\r\n      outline-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-outlined-chip-disabled-outline-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-outlined-chip-disabled-outline-opacity, 12%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:state(-with-icon)) .wrapper {\r\n      padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem);\r\n    }\r\n    :host(:not(:state(-with-icon))) .wrapper {\r\n      padding-inline-start: var(--m3e-chip-padding-start, 1rem);\r\n    }\r\n    :host(:state(-with-trailing-icon)) .wrapper {\r\n      padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem);\r\n    }\r\n    :host(:not(:state(-with-trailing-icon))) .wrapper {\r\n      padding-inline-end: var(--m3e-chip-padding-end, 1rem);\r\n    }\r\n    ::slotted([slot=\"icon\"]),\r\n    ::slotted([slot=\"trailing-icon\"]) {\r\n      flex: none;\r\n      width: 1em;\r\n      font-size: var(--m3e-chip-icon-size, 1.125rem) !important;\r\n    }\r\n    :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base {\r\n      color: var(--m3e-chip-label-text-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"icon\"]),\r\n    :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"trailing-icon\"]) {\r\n      color: var(--m3e-chip-icon-color, ${DesignToken.color.primary});\r\n    }\r\n    :host(:disabled) .base,\r\n    :host([disabled-interactive]) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-chip-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-chip-disabled-label-text-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) ::slotted([slot=\"icon\"]),\r\n    :host([disabled-interactive]) ::slotted([slot=\"icon\"]),\r\n    :host(:disabled) ::slotted([slot=\"trailing-icon\"]),\r\n    :host([disabled-interactive]) ::slotted([slot=\"trailing-icon\"]) {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-chip-disabled-icon-color, ${DesignToken.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host([variant=\"elevated\"]:disabled) .base,\r\n    :host([variant=\"elevated\"][disabled-interactive]) .base {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-elevated-chip-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-elevated-chip-disabled-container-opacity, 12%),\r\n        transparent\r\n      );\r\n      --m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${DesignToken.elevation.level0});\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base,\r\n      :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"icon\"]),\r\n      :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"trailing-icon\"]) {\r\n        color: CanvasText;\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive])[variant=\"outlined\"]) .base {\r\n        outline-color: CanvasText;\r\n      }\r\n      :host(:disabled) .base,\r\n      :host([disabled-interactive]) .base,\r\n      :host(:disabled) ::slotted([slot=\"icon\"]),\r\n      :host([disabled-interactive]) ::slotted([slot=\"icon\"]),\r\n      :host(:disabled) ::slotted([slot=\"trailing-icon\"]),\r\n      :host([disabled-interactive]) ::slotted([slot=\"trailing-icon\"]) {\r\n        color: GrayText;\r\n      }\r\n      :host(:disabled[variant=\"outlined\"]) .base,\r\n      :host([disabled-interactive][variant=\"outlined\"]) .base {\r\n        outline-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ #value?: string;\r\n  /** @private */ #textContent = \"\";\r\n\r\n  /**\r\n   * The appearance variant of the chip.\r\n   * @default \"outlined\"\r\n   */\r\n  @property({ reflect: true }) variant: ChipVariant = \"outlined\";\r\n\r\n  /** A string representing the value of the chip. */\r\n  @property() get value() {\r\n    return this.#value ?? this.#textContent;\r\n  }\r\n  set value(value: string) {\r\n    this.#value = value;\r\n  }\r\n\r\n  /** The textual label of the chip. */\r\n  get label() {\r\n    return this.#textContent;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n\r\n    if (this.role === \"listitem\") {\r\n      this.removeAttribute(\"tabindex\");\r\n    }\r\n\r\n    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => {\r\n      if (!x?.htmlFor) {\r\n        x?.attach(this);\r\n      }\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const disabled = !isDisabledMixin(this) || this.disabled;\r\n    const disabledInteractive = isDisabledInteractiveMixin(this) && this.disabledInteractive;\r\n\r\n    return html`<div class=\"base\">\r\n      <m3e-elevation class=\"elevation\" ?disabled=\"${disabled || disabledInteractive}\"></m3e-elevation>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${disabled || disabledInteractive}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${disabled || disabledInteractive}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      ${isLinkButtonMixin(this) ? this[renderPseudoLink]() : nothing}\r\n      <div class=\"wrapper\">${this.#renderContent()}</div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderContent(): unknown {\r\n    return html`${this._renderIcon()}\r\n      <div class=\"label\">${this._renderSlot()}</div>\r\n      ${this._renderTrailingIcon()}`;\r\n  }\r\n\r\n  /** @internal */\r\n  protected _renderIcon(): unknown {\r\n    return html`<slot name=\"icon\" aria-hidden=\"true\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>`;\r\n  }\r\n\r\n  /** @internal */\r\n  protected _renderTrailingIcon(): unknown {\r\n    return html`<slot\r\n      name=\"trailing-icon\"\r\n      aria-hidden=\"true\"\r\n      @slotchange=\"${this.#handleTrailingIconSlotChange}\"\r\n    ></slot>`;\r\n  }\r\n\r\n  /** @internal */\r\n  protected _renderSlot(): unknown {\r\n    return html`<slot @slotchange=\"${this.#handleSlotChange}\"></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleTrailingIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-trailing-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#textContent = getTextContent(<HTMLSlotElement>e.target);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-chip\": M3eChipElement;\r\n  }\r\n}\r\n","import { nothing } from \"lit\";\r\n\r\nimport {\r\n  customElement,\r\n  Disabled,\r\n  DisabledInteractive,\r\n  Focusable,\r\n  FormSubmitter,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eChipElement } from \"./ChipElement\";\r\n\r\n/**\r\n * A chip users interact with to perform a smart or automated action that can span multiple applications.\r\n *\r\n * @description\r\n * The `m3e-assist-chip` component presents a Material 3 assist chip, providing users with quick access to\r\n * contextually relevant actions. It is designed for use cases like suggested actions, quick filters, or\r\n * secondary operations, and supports accessibility, keyboard interaction, and expressive state styling\r\n * in line with Material 3 guidelines.  Appearance variants include `elevated` and `outlined`, enabling visual\r\n * differentiation and contextual emphasis.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-assist-chip`.  In this example, multiple chips are nested inside\r\n * a `m3e-chip-set` container to create a cohesive set of chips. The container is given the ARIA `role=\"group\"` to convey\r\n * to assistive technologies that the chips are part of a related set of element.\r\n * ```html\r\n * <m3e-chip-set role=\"group\" aria-label=\"Quick actions\">\r\n *  <m3e-assist-chip><m3e-icon slot=\"icon\" name=\"edit\"></m3e-icon>Edit</m3e-assist-chip>\r\n *  <m3e-assist-chip><m3e-icon slot=\"icon\" name=\"delete\"></m3e-icon>Delete</m3e-assist-chip>\r\n *  <m3e-assist-chip><m3e-icon slot=\"icon\" name=\"content_copy\"></m3e-icon>Copy</m3e-assist-chip>\r\n *  <m3e-assist-chip><m3e-icon slot=\"icon\" name=\"share\"></m3e-icon>Share</m3e-assist-chip>\r\n * </m3e-chip-set>\r\n * ```\r\n *\r\n * @tag m3e-assist-chip\r\n *\r\n * @slot - Renders the label of the chip.\r\n * @slot icon - Renders an icon before the chip's label.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr name - The name of the element, submitted as a pair with the element's `value` as part of form data, when the element is used to submit a form.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr target - The target of the link button.\r\n * @attr type - The type of the element.\r\n * @attr value - A string representing the value of the chip.\r\n * @attr variant - The appearance variant of the chip.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-chip-container-shape - Border radius of the chip container.\r\n * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.\r\n * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.\r\n * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.\r\n * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.\r\n * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.\r\n * @cssprop --m3e-chip-label-text-color - Label text color in default state.\r\n * @cssprop --m3e-chip-icon-color - Icon color in default state.\r\n * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.\r\n * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.\r\n * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.\r\n * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.\r\n * @cssprop --m3e-chip-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-chip-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-chip-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-chip-disabled-icon-opacity - Opacity applied to disabled icons.\r\n * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.\r\n * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.\r\n * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.\r\n * @cssprop --m3e-elevated-chip-disabled-container-color - Background color for disabled elevated variant.\r\n * @cssprop --m3e-elevated-chip-disabled-container-opacity - Opacity applied to disabled elevated background.\r\n * @cssprop --m3e-elevated-chip-disabled-elevation - Elevation level for disabled elevated variant.\r\n * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.\r\n * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.\r\n */\r\n@customElement(\"m3e-assist-chip\")\r\nexport class M3eAssistChipElement extends FormSubmitter(\r\n  LinkButton(KeyboardClick(Focusable(DisabledInteractive(Disabled(Role(M3eChipElement, \"button\")))))),\r\n) {\r\n  /** Indicates that this custom element participates in form submission, validation, and form state restoration. */\r\n  static readonly formAssociated = true;\r\n\r\n  /** @internal @inheritdoc */\r\n  protected override _renderTrailingIcon(): unknown {\r\n    return nothing;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-assist-chip\": M3eAssistChipElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, Vertical } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A container used to organize chips into a cohesive unit.\r\n *\r\n * @description\r\n * The `m3e-chip-set` component provides a flexible container for grouping chips, supporting both\r\n * horizontal and vertical layouts. It manages chip arrangement, spacing, and accessibility, and\r\n * serves as the foundation for chip set variants such as input and filter chip sets.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-chip` and `m3e-chip-set` components to present non-interactive chips.\r\n * ```html\r\n * <m3e-chip-set>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"palette\"></m3e-icon>Design</m3e-chip>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"accessibility_new\"></m3e-icon>Accessibility</m3e-chip>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"motion_photos_on\"></m3e-icon>Motion</m3e-chip>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"description\"></m3e-icon>Documentation</m3e-chip>\r\n * </m3e-chip-set>\r\n * ```\r\n *\r\n * @tag m3e-chip-set\r\n *\r\n * @slot - Renders the chips of the set.\r\n *\r\n * @attr vertical - Whether the element is oriented vertically.\r\n *\r\n * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.\r\n */\r\n@customElement(\"m3e-chip-set\")\r\nexport class M3eChipSetElement extends Vertical(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-flex;\r\n      flex-wrap: wrap;\r\n      vertical-align: middle;\r\n      gap: var(--m3e-chip-set-spacing, 0.5rem);\r\n      outline: none;\r\n    }\r\n    :host([vertical]) {\r\n      flex-direction: column;\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot></slot>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-chip-set\": M3eChipSetElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, PropertyValues } from \"lit\";\r\n\r\nimport {\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  DisabledInteractive,\r\n  Focusable,\r\n  KeyboardClick,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eChipElement } from \"./ChipElement\";\r\n\r\n/**\r\n * A chip users interact with to select/deselect options.\r\n *\r\n * @description\r\n * The `m3e-filter-chip` component presents a chip that users can select or deselect to filter\r\n * content or data sets. It supports single and multi-selection, keyboard interaction, accessibility,\r\n * and expressive state styling, providing a modern and interactive filtering experience in line\r\n * with Material 3 guidelines.  Appearance variants include `elevated` and `outlined`, enabling visual\r\n * differentiation and contextual emphasis.\r\n *\r\n * @example\r\n * The following example illustrates a single-select `m3e-filter-chip-set` containing multiple `m3e-filter-chip` components that\r\n * allow a user to choose an option. You can use the `multi` attribute to enable multiselect.\r\n * ```html\r\n * <m3e-filter-chip-set aria-label=\"Filter by topic\">\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"palette\"></m3e-icon>Design</m3e-filter-chip>\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"accessibility_new\"></m3e-icon>Accessibility</m3e-filter-chip>\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"motion_photos_on\"></m3e-icon>Motion</m3e-filter-chip>\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"description\"></m3e-icon>Documentation</m3e-filter-chip>\r\n * </m3e-filter-chip-set>\r\n * ```\r\n *\r\n * @tag m3e-filter-chip\r\n *\r\n * @slot - Renders the label of the chip.\r\n * @slot icon - Renders an icon before the chip's label.\r\n * @slot trailing-icon - Renders an icon after the chip's label.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.\r\n * @attr selected - A value indicating whether the element is selected.\r\n * @attr value - A string representing the value of the chip.\r\n * @attr variant - The appearance variant of the chip.\r\n *\r\n * @fires input - Emitted when the selected state changes.\r\n * @fires change - Emitted when the selected state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-chip-container-shape - Border radius of the chip container.\r\n * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.\r\n * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.\r\n * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.\r\n * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.\r\n * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.\r\n * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.\r\n * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.\r\n * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.\r\n * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.\r\n * @cssprop --m3e-chip-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-chip-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-chip-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-chip-disabled-icon-opacity - Opacity applied to disabled icons.\r\n * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.\r\n * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.\r\n * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.\r\n * @cssprop --m3e-elevated-chip-disabled-container-color - Background color for disabled elevated variant.\r\n * @cssprop --m3e-elevated-chip-disabled-container-opacity - Opacity applied to disabled elevated background.\r\n * @cssprop --m3e-elevated-chip-disabled-elevation - Elevation level for disabled elevated variant.\r\n * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.\r\n * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.\r\n * @cssprop --m3e-chip-selected-outline-thickness - Outline thickness for selected state.\r\n * @cssprop --m3e-chip-selected-label-text-color - Text color in selected state.\r\n * @cssprop --m3e-chip-selected-container-color - Background color in selected state.\r\n * @cssprop --m3e-chip-selected-container-hover-color - Hover state layer color in selected state.\r\n * @cssprop --m3e-chip-selected-container-focus-color - Focus state layer color in selected state.\r\n * @cssprop --m3e-chip-selected-hover-elevation - Elevation on hover in selected state.\r\n * @cssprop --m3e-chip-selected-ripple-color - Ripple color in selected state.\r\n * @cssprop --m3e-chip-selected-state-layer-focus-color - Focus state layer color in selected state.\r\n * @cssprop --m3e-chip-selected-state-layer-hover-color - Hover state layer color in selected state.\r\n * @cssprop --m3e-chip-selected-leading-icon-color - Leading icon color in selected state.\r\n * @cssprop --m3e-chip-selected-trailing-icon-color - Trailing icon color in selected state.\r\n * @cssprop --m3e-chip-unselected-label-text-color - Text color in unselected state.\r\n * @cssprop --m3e-chip-unselected-ripple-color - Ripple color in unselected state.\r\n * @cssprop --m3e-chip-unselected-state-layer-focus-color - Focus state layer color in unselected state.\r\n * @cssprop --m3e-chip-unselected-state-layer-hover-color - Hover state layer color in unselected state.\r\n * @cssprop --m3e-chip-unselected-leading-icon-color - Leading icon color in unselected state.\r\n * @cssprop --m3e-chip-unselected-trailing-icon-color - Trailing icon color in unselected state.\r\n */\r\n@customElement(\"m3e-filter-chip\")\r\nexport class M3eFilterChipElement extends Selected(\r\n  KeyboardClick(Focusable(DisabledInteractive(Disabled(Role(M3eChipElement, \"radio\"))))),\r\n) {\r\n  /** Indicates that this custom element participates in form submission, validation, and form state restoration. */\r\n  static readonly formAssociated = true;\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    M3eChipElement.styles,\r\n    css`\r\n      :host([selected]:not(:state(-hide-selection))) .wrapper {\r\n        padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem);\r\n      }\r\n      .icon {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n      }\r\n      .check {\r\n        width: 1em;\r\n        font-size: var(--m3e-chip-icon-size, 1.125rem);\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive])) .check {\r\n        color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n      }\r\n      :host(:not([selected])) .check,\r\n      :host(:state(-hide-selection)) .check,\r\n      :host(:state(-hide-selection):not(:state(-with-icon))) .icon {\r\n        display: none;\r\n      }\r\n      :host(:not(:state(-with-icon))) .icon {\r\n        margin-inline-start: calc(0px - var(--m3e-chip-with-icon-padding-start, 0.5rem));\r\n        transition: margin-inline-start ${DesignToken.motion.spring.fastEffects};\r\n      }\r\n      :host([selected]) .icon {\r\n        margin-inline-start: 0;\r\n      }\r\n      :host([selected]:not(:state(-hide-selection))) ::slotted([slot=\"icon\"]) {\r\n        display: none !important;\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base {\r\n        color: var(--m3e-chip-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant});\r\n        --m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${DesignToken.color.onSurfaceVariant});\r\n        --m3e-state-layer-focus-color: var(\r\n          --m3e-chip-unselected-state-layer-focus-color,\r\n          ${DesignToken.color.onSurfaceVariant}\r\n        );\r\n        --m3e-state-layer-hover-color: var(\r\n          --m3e-chip-unselected-state-layer-hover-color,\r\n          ${DesignToken.color.onSurfaceVariant}\r\n        );\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"icon\"]) {\r\n        color: var(--m3e-chip-unselected-leading-icon-color, ${DesignToken.color.primary});\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"trailing-icon\"]) {\r\n        color: var(--m3e-chip-unselected-trailing-icon-color, ${DesignToken.color.onSurfaceVariant});\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive])[selected]) .base {\r\n        outline-offset: unset;\r\n        outline-width: var(--m3e-chip-selected-outline-thickness, 0);\r\n        color: var(--m3e-chip-selected-label-text-color, ${DesignToken.color.onSecondaryContainer});\r\n        background-color: var(--m3e-chip-selected-container-color, ${DesignToken.color.secondaryContainer});\r\n        --m3e-state-layer-hover-color: var(\r\n          --m3e-chip-selected-container-hover-color,\r\n          ${DesignToken.color.onSecondaryContainer}\r\n        );\r\n        --m3e-state-layer-focus-color: var(\r\n          --m3e-chip-selected-container-focus-color,\r\n          ${DesignToken.color.onSecondaryContainer}\r\n        );\r\n        --m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${DesignToken.elevation.level1});\r\n        --m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n        --m3e-state-layer-focus-color: var(\r\n          --m3e-chip-selected-state-layer-focus-color,\r\n          ${DesignToken.color.onSecondaryContainer}\r\n        );\r\n        --m3e-state-layer-hover-color: var(\r\n          --m3e-chip-selected-state-layer-hover-color,\r\n          ${DesignToken.color.onSecondaryContainer}\r\n        );\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot=\"icon\"]) {\r\n        color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"trailing-icon\"]) {\r\n        color: var(--m3e-chip-selected-trailing-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n      }\r\n      @media (prefers-reduced-motion) {\r\n        .base,\r\n        :host(:not(:state(-with-icon))) .icon {\r\n          transition: none;\r\n        }\r\n      }\r\n      @media (forced-colors: active) {\r\n        :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base,\r\n        :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"icon\"]),\r\n        :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"trailing-icon\"]) {\r\n          color: CanvasText;\r\n        }\r\n        :host(:not(:disabled):not([disabled-interactive])[selected]) .base,\r\n        :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot=\"icon\"]),\r\n        :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot=\"trailing-icon\"]),\r\n        :host(:not(:disabled):not([disabled-interactive])) .check {\r\n          color: ButtonText;\r\n        }\r\n        :host(:not(:disabled):not([disabled-interactive])[selected]) .base {\r\n          outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px));\r\n          outline-width: var(--m3e-outlined-chip-outline-thickness, 1px);\r\n          outline-color: ButtonText;\r\n        }\r\n      }\r\n    `,\r\n  ];\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.closest(\"m3e-filter-chip-set\")?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc @private */\r\n  protected override _renderIcon(): unknown {\r\n    return html`<div class=\"icon\" aria-hidden=\"true\">\r\n      <svg class=\"check\" viewBox=\"0 -960 960 960\" aria-hidden=\"true\">\r\n        <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n      </svg>\r\n      ${super._renderIcon()}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    const selected = this.selected;\r\n    this.selected = !this.selected;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.closest(\"m3e-filter-chip-set\")?.[selectionManager].notifySelectionChange(this);\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.selected = selected;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-filter-chip\": M3eFilterChipElement;\r\n  }\r\n}\r\n","import { html, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Labelled,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Touched,\r\n  Role,\r\n  setCustomState,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eChipSetElement } from \"./ChipSetElement\";\r\nimport { M3eFilterChipElement } from \"./FilterChipElement\";\r\n\r\n/**\r\n * A container that organizes filter chips into a cohesive group, enabling selection and\r\n * deselection of values used to refine content or trigger contextual behavior.\r\n *\r\n * @description\r\n * The `m3e-filter-chip-set` component presents a group of filter chips, enabling users to select\r\n * one or more options to filter content or data sets. It supports single and multi-selection,\r\n * keyboard navigation, accessibility, and seamless form association, providing expressive and\r\n * interactive filtering experiences in line with Material 3 guidelines.\r\n *\r\n * @example\r\n * The following example illustrates a single-select `m3e-filter-chip-set` containing multiple `m3e-filter-chip` components that\r\n * allow a user to choose an option. You can use the `multi` attribute to enable multiselect.\r\n * ```html\r\n * <m3e-filter-chip-set aria-label=\"Filter by topic\">\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"palette\"></m3e-icon>Design</m3e-filter-chip>\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"accessibility_new\"></m3e-icon>Accessibility</m3e-filter-chip>\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"motion_photos_on\"></m3e-icon>Motion</m3e-filter-chip>\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"description\"></m3e-icon>Documentation</m3e-filter-chip>\r\n * </m3e-filter-chip-set>\r\n * ```\r\n *\r\n * @tag m3e-filter-chip-set\r\n *\r\n * @slot - Renders the chips of the set.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator.\r\n * @attr multi - Whether multiple chips can be selected.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr vertical - Whether the element is oriented vertically.\r\n *\r\n * @fires input - Emitted when the selected state of a chip changes.\r\n * @fires change - Emitted when the selected state of a chip changes.\r\n *\r\n * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.\r\n */\r\n@customElement(\"m3e-filter-chip-set\")\r\nexport class M3eFilterChipSetElement extends Labelled(\r\n  Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(M3eChipSetElement, \"radiogroup\")))))),\r\n) {\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eFilterChipElement>()\r\n    .onActiveItemChange(() => this[selectionManager].activeItem?.focus())\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current);\r\n\r\n  /**\r\n   * Whether multiple chips can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /**\r\n   * Whether to hide the selection indicator.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n  /** The chips of the set. */\r\n  get chips(): readonly M3eFilterChipElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected chip(s) of the set. */\r\n  get selected(): readonly M3eFilterChipElement[] {\r\n    return this[selectionManager]?.selectedItems ?? [];\r\n  }\r\n\r\n  /** The selected (enabled) value(s) of the set. */\r\n  get value(): string | readonly string[] | null {\r\n    const values = this.selected.filter((x) => !x.disabled).map((x) => x.value);\r\n    switch (values.length) {\r\n      case 0:\r\n        return null;\r\n      case 1:\r\n        return values[0];\r\n      default:\r\n        return values;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue]() {\r\n    const values = this.value;\r\n    if (Array.isArray(values)) {\r\n      const data = new FormData();\r\n      for (const value of values) {\r\n        data.append(this.name, value);\r\n      }\r\n      return data;\r\n    }\r\n    return <string | null>values;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this[selectionManager].directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"vertical\")) {\r\n      this[selectionManager].vertical = this.vertical;\r\n    }\r\n\r\n    if (changedProperties.has(\"disabled\") && (changedProperties.get(\"disabled\") !== undefined || this.disabled)) {\r\n      this[selectionManager].disabled = this.disabled;\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\")) {\r\n      this.role = this.multi ? \"group\" : \"radiogroup\";\r\n      this.#updateChipRole();\r\n      this[selectionManager].multi = this.multi;\r\n      this[selectionManager].disableRovingTabIndex(this.multi);\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\") || changedProperties.has(\"disabled\")) {\r\n      // aria-disabled is not supported on radiogroup roles.\r\n      this.ariaDisabled = this.multi && this.disabled ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"hideSelectionIndicator\")) {\r\n      this.chips.forEach((x) => setCustomState(x, \"-hide-selection\", this.hideSelectionIndicator));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot\r\n      @slotchange=\"${this.#handleSlotChange}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @change=\"${this.#handleChange}\"\r\n    ></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange() {\r\n    const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-filter-chip\")]);\r\n    added.forEach((x) => setCustomState(x, \"-hide-selection\", this.hideSelectionIndicator));\r\n    this.#updateChipRole();\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (!this.multi) {\r\n      this[selectionManager].onKeyDown(e);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #updateChipRole(): void {\r\n    this.chips.forEach((x) => (x.role = this.multi ? \"button\" : \"radio\"));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-filter-chip-set\": M3eFilterChipSetElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  DisabledInteractive,\r\n  Disabled,\r\n  EventAttribute,\r\n  Role,\r\n  DesignToken,\r\n  hasAssignedNodes,\r\n  setCustomState,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport { M3eChipElement } from \"./ChipElement\";\r\n\r\n/**\r\n * A chip which represents a discrete piece of information entered by a user.\r\n *\r\n * @description\r\n * The `m3e-input-chip` component represents an input chip, allowing users to enter, display,\r\n * and manage discrete values such as tags or keywords. It supports expressive styling, accessibility,\r\n * keyboard interaction, and appearance variants including `elevated` and `outlined`.\r\n *\r\n * @example\r\n * The following example illustrates the use of the `m3e-input-chip-set` inside a `m3e-form-field`.\r\n * In this example, the `input` slot specifies the `input` element used to add input chips and the\r\n * field label's `for` attribute targets the `input` element to provide an accessible label.\r\n * ```html\r\n * <m3e-form-field>\r\n *  <label slot=\"label\" for=\"keywords\">Keywords</label>\r\n *  <m3e-input-chip-set aria-label=\"Enter keywords\">\r\n *    <input id=\"keywords\" slot=\"input\" placeholder=\"New keyword...\" />\r\n *  </m3e-input-chip-set>\r\n * </m3e-form-field>\r\n * ```\r\n *\r\n * @tag m3e-input-chip\r\n *\r\n * @slot - Renders the label of the chip.\r\n * @slot avatar - Renders an avatar before the chip's label.\r\n * @slot icon - Renders an icon before the chip's label.\r\n * @slot remove-icon - Renders the icon for the button used to remove the chip.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr disabled-interactive - Whether the element is disabled and interactive.\r\n * @attr removable - Whether the chip is removable.\r\n * @attr remove-label - The accessible label given to the button used to remove the chip.\r\n * @attr value - A string representing the value of the chip.\r\n * @attr variant - The appearance variant of the chip.\r\n *\r\n * @fires remove - Emitted when the remove button is clicked or DELETE or BACKSPACE key is pressed.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-chip-container-shape - Border radius of the chip container.\r\n * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.\r\n * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.\r\n * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.\r\n * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.\r\n * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.\r\n * @cssprop --m3e-chip-label-text-color - Label text color in default state.\r\n * @cssprop --m3e-chip-icon-color - Icon color in default state.\r\n * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.\r\n * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.\r\n * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.\r\n * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.\r\n * @cssprop --m3e-chip-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-chip-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-chip-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-chip-disabled-icon-opacity - Opacity applied to disabled icons.\r\n * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.\r\n * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.\r\n * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.\r\n * @cssprop --m3e-elevated-chip-disabled-container-color - Background color for disabled elevated variant.\r\n * @cssprop --m3e-elevated-chip-disabled-container-opacity - Opacity applied to disabled elevated background.\r\n * @cssprop --m3e-elevated-chip-disabled-elevation - Elevation level for disabled elevated variant.\r\n * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.\r\n * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.\r\n * @cssprop --m3e-chip-avatar-size - Font size of the avatar slot content.\r\n * @cssprop --m3e-chip-avatar-icon-size - Size of the icon displayed inside the avatar when used in a chip.\r\n * @cssprop --m3e-chip-avatar-font-size - Font size of text initials inside the avatar when used in a chip.\r\n * @cssprop --m3e-chip-avatar-font-weight - Font weight of text initials inside the avatar when used in a chip.\r\n * @cssprop --m3e-chip-avatar-line-height - Line height of text initials inside the avatar when used in a chip.\r\n * @cssprop --m3e-chip-avatar-tracking - Letter spacing (tracking) of text initials inside the avatar when used in a chip.\r\n * @cssprop --m3e-chip-disabled-avatar-opacity - Opacity applied to the avatar when disabled.\r\n * @cssprop --m3e-chip-with-avatar-padding-start - Start padding when an avatar is present.\r\n */\r\n@customElement(\"m3e-input-chip\")\r\nexport class M3eInputChipElement extends EventAttribute(\r\n  DisabledInteractive(Disabled(Role(M3eChipElement, \"row\"))),\r\n  \"remove\",\r\n) {\r\n  /** Indicates that this custom element participates in form submission, validation, and form state restoration. */\r\n  static readonly formAssociated = true;\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    M3eChipElement.styles,\r\n    css`\r\n      .cell {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        outline: none;\r\n        column-gap: var(--m3e-chip-spacing, 0.5rem);\r\n        min-width: 0;\r\n      }\r\n      .remove-button {\r\n        --m3e-icon-button-extra-small-container-height: 1.5rem;\r\n        --m3e-icon-button-extra-small-icon-size: var(--m3e-chip-icon-size, 1.125rem);\r\n        width: 1.5rem;\r\n      }\r\n      .remove-icon {\r\n        flex: none;\r\n        width: var(--m3e-chip-icon-size, 1.125rem);\r\n        height: var(--m3e-chip-icon-size, 1.125rem);\r\n      }\r\n      .touch {\r\n        top: calc(\r\n          0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken.density.calc(-2)})) / 2)\r\n        );\r\n      }\r\n      .wrapper {\r\n        height: 100%;\r\n        overflow: visible;\r\n        min-width: 0;\r\n      }\r\n      ::slotted([slot=\"avatar\"]) {\r\n        flex: none;\r\n        font-size: var(--m3e-chip-avatar-size, 1.5rem);\r\n      }\r\n      ::slotted(m3e-avatar[slot=\"avatar\"]) {\r\n        --m3e-icon-size: var(--m3e-chip-avatar-icon-size, 1.125rem);\r\n        --m3e-avatar-size: var(--m3e-chip-avatar-size, 1.5rem);\r\n        --m3e-avatar-font-size: var(\r\n          --m3e-chip-avatar-font-size,\r\n          ${DesignToken.typescale.standard.title.small.fontSize}\r\n        );\r\n        --m3e-avatar-font-weight: var(\r\n          --m3e-chip-avatar-font-height,\r\n          ${DesignToken.typescale.standard.title.small.fontWeight}\r\n        );\r\n        --m3e-avatar-line-height: var(\r\n          --m3e-chip-avatar-line-height,\r\n          ${DesignToken.typescale.standard.title.small.lineHeight}\r\n        );\r\n        --m3e-avatar-tracking: var(--m3e-chip-avatar-tracking, ${DesignToken.typescale.standard.title.small.tracking});\r\n      }\r\n      :host(:disabled) ::slotted([slot=\"avatar\"]),\r\n      :host([disabled-interactive]) ::slotted([slot=\"avatar\"]) {\r\n        opacity: var(--m3e-chip-disabled-avatar-opacity, 38%);\r\n        color: var(--m3e-chip-disabled-icon-color, ${DesignToken.color.onSurface});\r\n      }\r\n      :host(:state(-with-avatar)) ::slotted([slot=\"icon\"]) {\r\n        display: none;\r\n      }\r\n      :host(:state(-with-avatar)) .wrapper {\r\n        padding-inline-start: var(--m3e-chip-with-avatar-padding-start, 0.25rem);\r\n      }\r\n      @media (forced-colors: active) {\r\n        :host(:disabled) ::slotted([slot=\"avatar\"]),\r\n        :host([disabled-interactive]) ::slotted([slot=\"avatar\"]) {\r\n          color: CanvasText;\r\n        }\r\n      }\r\n    `,\r\n  ];\r\n\r\n  /** A reference to the grid cell of the chip. */\r\n  @query(\".cell\") readonly cell!: HTMLSpanElement;\r\n\r\n  /** A reference to the button used to remove the chip. */\r\n  @query(\".remove-button\") readonly removeButton!: M3eIconButtonElement | null;\r\n\r\n  /**\r\n   * Whether the chip is removable.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) removable = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to remove the chip.\r\n   * @default \"Remove\"\r\n   */\r\n  @property({ attribute: \"remove-label\" }) removeLabel = \"Remove\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.removeAttribute(\"tabindex\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n    this.removeAttribute(\"tabindex\");\r\n\r\n    if (changedProperties.has(\"removable\")) {\r\n      setCustomState(this, \"-with-trailing-icon\", this.removable);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-elevation\r\n        class=\"elevation\"\r\n        for=\"cell\"\r\n        ?disabled=\"${this.disabled || this.disabledInteractive}\"\r\n      ></m3e-elevation>\r\n      <m3e-state-layer\r\n        class=\"state-layer\"\r\n        for=\"cell\"\r\n        ?disabled=\"${this.disabled || this.disabledInteractive}\"\r\n      ></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" for=\"cell\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" for=\"cell\" ?disabled=\"${this.disabled || this.disabledInteractive}\"></m3e-ripple>\r\n      <div class=\"wrapper\">\r\n        <div\r\n          id=\"cell\"\r\n          class=\"cell\"\r\n          role=\"gridcell\"\r\n          tabindex=\"${ifDefined(this.disabled ? undefined : \"-1\")}\"\r\n          @keydown=\"${this.#handleKeyDown}\"\r\n        >\r\n          <slot name=\"avatar\" @slotchange=\"${this.#handleAvatarSlotChange}\"></slot>\r\n          ${this._renderIcon()}\r\n          <div class=\"label\">${this._renderSlot()}</div>\r\n          <div class=\"touch\" aria-hidden=\"true\"></div>\r\n        </div>\r\n        ${this._renderTrailingIcon()}\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @internal @inheritdoc */\r\n  protected override _renderTrailingIcon(): unknown {\r\n    return this.removable\r\n      ? html`<span role=\"gridcell\" class=\"remove\">\r\n          <m3e-icon-button\r\n            class=\"remove-button\"\r\n            aria-label=\"${this.removeLabel}\"\r\n            size=\"extra-small\"\r\n            tabindex=\"-1\"\r\n            ?disabled=\"${this.disabled}\"\r\n            ?disabled-interactive=\"${this.disabledInteractive}\"\r\n            @click=\"${this.#handleRemoveButtonClick}\"\r\n          >\r\n            <slot name=\"remove-icon\">\r\n              <svg class=\"remove-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n                <path\r\n                  d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n                />\r\n              </svg>\r\n            </slot>\r\n          </m3e-icon-button>\r\n        </span>`\r\n      : nothing;\r\n  }\r\n\r\n  /** @private */\r\n  #handleAvatarSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-avatar\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleRemoveButtonClick(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"remove\"));\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (this.removable) {\r\n      switch (e.key) {\r\n        case \"Backspace\":\r\n        case \"Delete\":\r\n          this.dispatchEvent(new Event(\"remove\"));\r\n          break;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eInputChipElementEventMap extends HTMLElementEventMap {\r\n  remove: Event;\r\n}\r\n\r\nexport interface M3eInputChipElement {\r\n  addEventListener<K extends keyof M3eInputChipElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eInputChipElement, ev: M3eInputChipElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eInputChipElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eInputChipElement, ev: M3eInputChipElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-input-chip\": M3eInputChipElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, PropertyValues } from \"lit\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  ConstraintValidation,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Required,\r\n  RequiredConstraintValidation,\r\n  Role,\r\n  Touched,\r\n  registerStyleSheet,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ListKeyManager, ListManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { FormFieldControl } from \"@m3e/web/form-field\";\r\n\r\nimport { M3eChipSetElement } from \"./ChipSetElement\";\r\nimport { M3eInputChipElement } from \"./InputChipElement\";\r\nimport { InputChipSetChangeEventDetail } from \"./InputChipSetChangeEventDetail\";\r\n\r\n/**\r\n * A container that transforms user input into a cohesive set of interactive chips, supporting entry, editing, and removal of discrete values.\r\n *\r\n * @description\r\n * The `m3e-input-chip-set` component enables users to input, display, and manage a collection of discrete\r\n * values as input chips. Designed for expressive, accessible forms, it supports keyboard navigation, validation,\r\n * and seamless integration with form controls. This component is ideal for capturing user-generated tags,\r\n * keywords, or selections in a visually consistent and interactive manner.\r\n *\r\n * @example\r\n * The following example illustrates the use of the `m3e-input-chip-set` inside a `m3e-form-field`.\r\n * In this example, the `input` slot specifies the `input` element used to add input chips and the\r\n * field label's `for` attribute targets the `input` element to provide an accessible label.\r\n * ```html\r\n * <m3e-form-field>\r\n *  <label slot=\"label\" for=\"keywords\">Keywords</label>\r\n *  <m3e-input-chip-set aria-label=\"Enter keywords\">\r\n *    <input id=\"keywords\" slot=\"input\" placeholder=\"New keyword...\" />\r\n *  </m3e-input-chip-set>\r\n * </m3e-form-field>\r\n * ```\r\n *\r\n * @tag m3e-input-chip-set\r\n *\r\n * @slot - Renders the chips of the set.\r\n * @slot input - Renders the input element used to add new chips to the set.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr required - Whether a value is required for the element.\r\n * @attr vertical - Whether the element is oriented vertically.\r\n *\r\n * @fires change - Emitted when a chip is added to, or removed from, the set.\r\n *\r\n * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.\r\n */\r\n@customElement(\"m3e-input-chip-set\")\r\nexport class M3eInputChipSetElement\r\n  extends RequiredConstraintValidation(\r\n    Required(\r\n      ConstraintValidation(Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(M3eChipSetElement, \"grid\"))))))),\r\n    ),\r\n  )\r\n  implements FormFieldControl\r\n{\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-input-chip-set [slot=\"input\"]::placeholder {\r\n        user-select: none;\r\n        color: currentColor;\r\n        transition: opacity ${DesignToken.motion.duration.extraLong1};\r\n      }\r\n      m3e-input-chip-set:not(:focus-within) [slot=\"input\"]::placeholder {\r\n        opacity: 0;\r\n        transition: 0s;\r\n      }\r\n      m3e-input-chip-set:hover [slot=\"input\"]::placeholder {\r\n        transition: 0s;\r\n      }\r\n      @media (prefers-reduced-motion) {\r\n        m3e-input-chip-set [slot=\"input\"]::placeholder {\r\n          transition: none !important;\r\n        }\r\n      }\r\n    `);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    M3eChipSetElement.styles,\r\n    css`\r\n      ::slotted([slot=\"input\"]) {\r\n        outline: unset;\r\n        border: unset;\r\n        background-color: transparent;\r\n        box-shadow: none;\r\n        font-family: inherit;\r\n        font-size: inherit;\r\n        line-height: initial;\r\n        letter-spacing: inherit;\r\n        color: var(--_form-field-input-color, inherit);\r\n        flex: 1 1 auto;\r\n        min-width: 0;\r\n        padding: unset;\r\n      }\r\n      ::slotted(m3e-input-chip) {\r\n        min-width: 0;\r\n      }\r\n      span[role=\"row\"],\r\n      span[role=\"gridcell\"] {\r\n        display: contents;\r\n      }\r\n    `,\r\n  ];\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ readonly #inputChangeHandler = () => this.#handleInputChange();\r\n  /** @private */ readonly #inputKeyDownHandler = (e: KeyboardEvent) => this.#handleInputKeyDown(e);\r\n  /** @private */ readonly #focusHandler = () => this.#handleFocus();\r\n  /** @private */ readonly #focusInHandler = () => this.#handleFocusIn();\r\n  /** @private */ readonly #focusOutHandler = () => this.#handleFocusOut();\r\n  /** @private */ readonly #chipRemoveHandler = (e: Event) => this.#handleChipRemove(e);\r\n  /** @private */ readonly #chipClickHandler = (e: Event) => this.#handleChipClick(e);\r\n\r\n  /** @private */ readonly #listManager = new ListManager<M3eInputChipElement>();\r\n  /** @private */ readonly #listKeyManager = new ListKeyManager<HTMLElement>()\r\n    .onActiveItemChange(() => this.#listKeyManager.activeItem?.focus())\r\n    .withHomeAndEnd()\r\n    .withSkipPredicate((x) => !x.hasAttribute(\"tabindex\"))\r\n    .withDirectionality(M3eDirectionality.current);\r\n\r\n  /** @private */ #ignoreInputChange = false;\r\n  /** @private */ #input: HTMLInputElement | null = null;\r\n  /** @private */ #tabindex = 0;\r\n\r\n  /** The chips of the set. */\r\n  get chips(): readonly M3eInputChipElement[] {\r\n    // NOTE: query is used instead of the internal list management due to\r\n    // validating required state on change to support form-field integration.\r\n    return [...this.querySelectorAll(\"m3e-input-chip\")];\r\n  }\r\n\r\n  /** The values of the set. */\r\n  get value(): readonly string[] | null {\r\n    const values = this.chips.filter((x) => !x.disabled).map((x) => x.value);\r\n    return values.length == 0 ? null : values;\r\n  }\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue]() {\r\n    const values = this.value;\r\n    if (!values) return null;\r\n    const data = new FormData();\r\n    for (const value of values) {\r\n      data.append(this.name, value);\r\n    }\r\n    return data;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  get shouldLabelFloat(): boolean {\r\n    return this.chips.length > 0;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  onContainerClick(): void {\r\n    this.#input?.focus();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (!customElements.get(\"m3e-form-field\")) {\r\n      customElements.whenDefined(\"m3e-form-field\").then(() => {\r\n        this.closest(\"m3e-form-field\")?.notifyControlStateChange();\r\n      });\r\n    } else {\r\n      this.closest(\"m3e-form-field\")?.notifyControlStateChange();\r\n    }\r\n\r\n    this.#tabindex = Number.parseInt(this.getAttribute(\"tabindex\") ?? \"0\");\r\n    this.addEventListener(\"focus\", this.#focusHandler);\r\n    this.addEventListener(\"focusin\", this.#focusInHandler);\r\n    this.addEventListener(\"focusout\", this.#focusOutHandler);\r\n\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this.#listKeyManager.directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"focus\", this.#focusHandler);\r\n    this.removeEventListener(\"focusin\", this.#focusInHandler);\r\n    this.removeEventListener(\"focusout\", this.#focusOutHandler);\r\n\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n\r\n    if (!this.hasAttribute(\"tabindex\")) {\r\n      this.setAttribute(\"tabindex\", `${this.#tabindex}`);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"vertical\")) {\r\n      this.ariaOrientation = null;\r\n    }\r\n    if (changedProperties.has(\"disabled\")) {\r\n      this.#listManager.items.forEach((x) => (x.disabled = this.disabled));\r\n      if (this.#input) {\r\n        this.#input.disabled = this.disabled;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot @keydown=\"${this.#handleKeyDown}\" @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n      <span role=\"row\">\r\n        <span role=\"gridcell\"><slot name=\"input\" @slotchange=\"${this.#handleInputSlotChange}\"></slot></span>\r\n      </span> `;\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#listKeyManager.onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  async #handleSlotChange(): Promise<void> {\r\n    const { added, removed } = this.#listManager.setItems([...this.querySelectorAll(\"m3e-input-chip\")]);\r\n\r\n    for (const chip of added) {\r\n      if (chip.isUpdatePending) {\r\n        await chip.updateComplete;\r\n      }\r\n      if (this.disabled) {\r\n        chip.disabled = true;\r\n      }\r\n      chip.addEventListener(\"remove\", this.#chipRemoveHandler);\r\n      chip.cell.addEventListener(\"click\", this.#chipClickHandler);\r\n    }\r\n\r\n    removed.forEach((x) => {\r\n      x.removeEventListener(\"remove\", this.#chipRemoveHandler);\r\n      x.cell.removeEventListener(\"click\", this.#chipClickHandler);\r\n    });\r\n\r\n    this.#listKeyManager.setItems(\r\n      this.#listManager.items.flatMap((x) => (x.removeButton ? [x.cell, x.removeButton] : [x.cell])),\r\n    );\r\n    if (!this.#listKeyManager.activeItem) {\r\n      this.#listKeyManager.updateActiveItem(this.#listKeyManager.items.find((x) => x.hasAttribute(\"tabindex\")));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputSlotChange(): void {\r\n    const input = this.querySelector(\"input\");\r\n    if (this.#input) {\r\n      this.#input.removeEventListener(\"change\", this.#inputChangeHandler);\r\n      this.#input.removeEventListener(\"keydown\", this.#inputKeyDownHandler);\r\n    }\r\n\r\n    this.#input = input;\r\n    if (this.#input) {\r\n      this.#input.disabled = this.disabled;\r\n      this.#input.addEventListener(\"change\", this.#inputChangeHandler);\r\n      this.#input.addEventListener(\"keydown\", this.#inputKeyDownHandler);\r\n\r\n      const property = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, \"value\")!;\r\n      Object.defineProperty(input, \"value\", {\r\n        get: () => property.get?.call(input),\r\n        set: (value: string) => {\r\n          property.set?.call(input, value);\r\n          if (this.#input === input && !this.#ignoreInputChange) {\r\n            this.#handleInputChange();\r\n          }\r\n        },\r\n      });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleFocus(): void {\r\n    setTimeout(() => (this.#listKeyManager.activeItem ?? this.#input)?.focus());\r\n  }\r\n\r\n  /** @private */\r\n  #handleFocusIn(): void {\r\n    this.setAttribute(\"tabindex\", \"-1\");\r\n  }\r\n\r\n  /** @private */\r\n  #handleFocusOut(): void {\r\n    this.setAttribute(\"tabindex\", `${this.#tabindex}`);\r\n  }\r\n\r\n  /** @private */\r\n  #handleChipRemove(e: Event): void {\r\n    const chip = <M3eInputChipElement>e.target;\r\n    const index = this.#listManager.items.indexOf(chip);\r\n    const nextChip = this.#listManager.items.find((x, y) => y > index && !x.disabled && x.removable);\r\n\r\n    chip.remove();\r\n\r\n    this.#listKeyManager.setActiveItem(this.#listKeyManager.items.find((x) => x === nextChip?.removeButton));\r\n    if (!this.#listKeyManager.activeItem) {\r\n      this.#input?.focus();\r\n    }\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<InputChipSetChangeEventDetail>(\"change\", {\r\n        bubbles: true,\r\n        detail: { type: \"remove\", value: chip.value, chip: chip },\r\n      }),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #handleChipClick(e: Event): void {\r\n    this.#listKeyManager.updateActiveItem(e.composedPath().find((x) => x instanceof M3eInputChipElement)?.cell);\r\n  }\r\n\r\n  /** @private */\r\n  async #handleInputChange(): Promise<void> {\r\n    const value = this.#input?.value;\r\n    if (!value) return;\r\n\r\n    const chip = document.createElement(\"m3e-input-chip\");\r\n    chip.removable = true;\r\n    chip.appendChild(document.createTextNode(value));\r\n    this.appendChild(chip);\r\n\r\n    if (chip.isUpdatePending) {\r\n      await chip.updateComplete;\r\n    }\r\n\r\n    if (this.#input) {\r\n      try {\r\n        this.#ignoreInputChange = true;\r\n        this.#input.value = \"\";\r\n      } finally {\r\n        this.#ignoreInputChange = false;\r\n      }\r\n    }\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<InputChipSetChangeEventDetail>(\"change\", {\r\n        bubbles: true,\r\n        detail: { type: \"add\", value: value, chip: chip },\r\n      }),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputKeyDown(e: KeyboardEvent): void {\r\n    if (e.key === \"Backspace\" && !this.#input?.value) {\r\n      const item = [...this.#listManager.items]\r\n        .reverse()\r\n        .find((x) => !x.disabled && !x.disabledInteractive && x.removable);\r\n      if (item) {\r\n        item.dispatchEvent(new Event(\"remove\"));\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eInputChipSetElementEventMap extends HTMLElementEventMap {\r\n  change: CustomEvent<InputChipSetChangeEventDetail>;\r\n}\r\n\r\nexport interface M3eInputChipSetElement {\r\n  addEventListener<K extends keyof M3eInputChipSetElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eInputChipSetElement, ev: M3eInputChipSetElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eInputChipSetElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eInputChipSetElement, ev: M3eInputChipSetElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-input-chip-set\": M3eInputChipSetElement;\r\n  }\r\n}\r\n","import { nothing } from \"lit\";\r\n\r\nimport {\r\n  customElement,\r\n  Disabled,\r\n  DisabledInteractive,\r\n  Focusable,\r\n  FormSubmitter,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eChipElement } from \"./ChipElement\";\r\n\r\n/**\r\n * A chip used to help narrow a user's intent by presenting dynamically generated suggestions, such as\r\n * suggested responses or search filters.\r\n *\r\n * @description\r\n * The `m3e-suggestion-chip` component presents a suggestion chip, offering users contextually relevant\r\n * actions or responses. It is designed for dynamic suggestion scenarios, such as search filters or\r\n * smart replies, and supports accessibility, keyboard interaction, and expressive state styling in line\r\n * with Material 3 guidelines.  Appearance variants include `elevated` and `outlined`, enabling visual\r\n * differentiation and contextual emphasis.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-suggestion-chip`.  In this example, multiple chips are nested inside\r\n * a `m3e-chip-set` container to create a cohesive set of chips. The container is given the ARIA `role=\"group\"` to convey\r\n * to assistive technologies that the chips are part of a related set of element.\r\n * ```html\r\n * <m3e-chip-set role=\"group\" aria-label=\"Suggested replies\">\r\n *  <m3e-suggestion-chip>Sounds good!</m3e-suggestion-chip>\r\n *  <m3e-suggestion-chip>Can you clarify?</m3e-suggestion-chip>\r\n *  <m3e-suggestion-chip>Let's do it.</m3e-suggestion-chip>\r\n *  <m3e-suggestion-chip>Maybe later.</m3e-suggestion-chip>\r\n * </m3e-chip-set>\r\n * ```\r\n *\r\n * @tag m3e-suggestion-chip\r\n *\r\n * @slot - Renders the label of the chip.\r\n * @slot icon - Renders an icon before the chip's label.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr name - The name of the element, submitted as a pair with the element's `value` as part of form data, when the element is used to submit a form.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr target - The target of the link button.\r\n * @attr type - The type of the element.\r\n * @attr value - A string representing the value of the chip.\r\n * @attr variant - The appearance variant of the chip.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-chip-container-shape - Border radius of the chip container.\r\n * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.\r\n * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.\r\n * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.\r\n * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.\r\n * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.\r\n * @cssprop --m3e-chip-label-text-color - Label text color in default state.\r\n * @cssprop --m3e-chip-icon-color - Icon color in default state.\r\n * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.\r\n * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.\r\n * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.\r\n * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.\r\n * @cssprop --m3e-chip-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-chip-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-chip-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-chip-disabled-icon-opacity - Opacity applied to disabled icons.\r\n * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.\r\n * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.\r\n * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.\r\n * @cssprop --m3e-elevated-chip-disabled-container-color - Background color for disabled elevated variant.\r\n * @cssprop --m3e-elevated-chip-disabled-container-opacity - Opacity applied to disabled elevated background.\r\n * @cssprop --m3e-elevated-chip-disabled-elevation - Elevation level for disabled elevated variant.\r\n * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.\r\n * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.\r\n */\r\n@customElement(\"m3e-suggestion-chip\")\r\nexport class M3eSuggestionChipElement extends FormSubmitter(\r\n  LinkButton(KeyboardClick(Focusable(DisabledInteractive(Disabled(Role(M3eChipElement, \"button\")))))),\r\n) {\r\n  /** Indicates that this custom element participates in form submission, validation, and form state restoration. */\r\n  static readonly formAssociated = true;\r\n\r\n  /** @internal @inheritdoc */\r\n  protected override _renderTrailingIcon(): unknown {\r\n    return nothing;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-suggestion-chip\": M3eSuggestionChipElement;\r\n  }\r\n}\r\n"],"names":["M3eChipElement","AttachInternals","LitElement","constructor","_M3eChipElement_value","set","this","_M3eChipElement_textContent","variant","value","__classPrivateFieldGet","__classPrivateFieldSet","label","firstUpdated","_changedProperties","super","role","removeAttribute","_elevation","_focusRing","_stateLayer","_ripple","forEach","x","htmlFor","attach","render","disabled","isDisabledMixin","disabledInteractive","isDisabledInteractiveMixin","html","isLinkButtonMixin","renderPseudoLink","nothing","_M3eChipElement_instances","_M3eChipElement_renderContent","call","_renderIcon","_M3eChipElement_handleIconSlotChange","_renderTrailingIcon","_M3eChipElement_handleTrailingIconSlotChange","_renderSlot","_M3eChipElement_handleSlotChange","e","setCustomState","hasAssignedNodes","target","getTextContent","styles","css","unsafeCSS","DesignToken","motion","duration","short4","easing","standard","shape","corner","small","density","calc","typescale","large","fontSize","fontWeight","lineHeight","tracking","color","surfaceContainerLow","elevation","level1","level2","outlineVariant","onSurface","primary","level0","__decorate","query","prototype","property","reflect","customElement","M3eAssistChipElement","FormSubmitter","LinkButton","KeyboardClick","Focusable","DisabledInteractive","Disabled","Role","formAssociated","M3eChipSetElement","Vertical","M3eFilterChipElement","Selected","_M3eFilterChipElement_clickHandler","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","update","changedProperties","has","closest","selectionManager","notifySelectionChange","defaultPrevented","selected","dispatchEvent","Event","bubbles","composed","cancelable","onSecondaryContainer","spring","fastEffects","onSurfaceVariant","secondaryContainer","M3eFilterChipSetElement","Labelled","Dirty","Touched","FormAssociated","_M3eFilterChipSetElement_directionalitySubscription","_a","SelectionManager","onActiveItemChange","activeItem","focus","withWrap","withDirectionality","M3eDirectionality","current","multi","hideSelectionIndicator","chips","items","selectedItems","values","filter","map","length","WeakMap","_M3eFilterChipSetElement_instances","WeakSet","formValue","Array","isArray","data","FormData","append","name","observe","directionality","vertical","undefined","get","_M3eFilterChipSetElement_updateChipRole","disableRovingTabIndex","ariaDisabled","_M3eFilterChipSetElement_handleSlotChange","_M3eFilterChipSetElement_handleKeyDown","_M3eFilterChipSetElement_handleChange","added","setItems","querySelectorAll","onKeyDown","stopPropagation","type","Boolean","attribute","M3eInputChipElement","EventAttribute","removable","removeLabel","ifDefined","_M3eInputChipElement_instances","_M3eInputChipElement_handleKeyDown","_M3eInputChipElement_handleAvatarSlotChange","_M3eInputChipElement_handleRemoveButtonClick","key","title","M3eInputChipSetElement","RequiredConstraintValidation","Required","ConstraintValidation","_M3eInputChipSetElement_directionalitySubscription","_M3eInputChipSetElement_inputChangeHandler","_M3eInputChipSetElement_instances","_M3eInputChipSetElement_handleInputChange","_M3eInputChipSetElement_inputKeyDownHandler","_M3eInputChipSetElement_focusHandler","_M3eInputChipSetElement_handleFocus","_M3eInputChipSetElement_focusInHandler","_M3eInputChipSetElement_handleFocusIn","_M3eInputChipSetElement_focusOutHandler","_M3eInputChipSetElement_handleFocusOut","_M3eInputChipSetElement_chipRemoveHandler","_M3eInputChipSetElement_chipClickHandler","_M3eInputChipSetElement_listManager","ListManager","_M3eInputChipSetElement_listKeyManager","ListKeyManager","withHomeAndEnd","withSkipPredicate","hasAttribute","_M3eInputChipSetElement_ignoreInputChange","_M3eInputChipSetElement_input","_M3eInputChipSetElement_tabindex","shouldLabelFloat","onContainerClick","customElements","notifyControlStateChange","whenDefined","then","Number","parseInt","getAttribute","setAttribute","ariaOrientation","_M3eInputChipSetElement_handleKeyDown","_M3eInputChipSetElement_handleSlotChange","_M3eInputChipSetElement_handleInputSlotChange","async","removed","chip","isUpdatePending","updateComplete","cell","flatMap","removeButton","updateActiveItem","find","input","querySelector","Object","getOwnPropertyDescriptor","HTMLInputElement","defineProperty","setTimeout","index","indexOf","nextChip","y","remove","setActiveItem","CustomEvent","detail","composedPath","document","createElement","appendChild","createTextNode","item","reverse","registerStyleSheet","extraLong1","M3eSuggestionChipElement"],"mappings":"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"}
+{"version":3,"file":"chips.min.js","sources":["../../src/chips/ChipElement.ts","../../src/chips/AssistChipElement.ts","../../src/chips/ChipSetElement.ts","../../src/chips/FilterChipElement.ts","../../src/chips/FilterChipSetElement.ts","../../src/chips/InputChipElement.ts","../../src/chips/InputChipSetElement.ts","../../src/chips/SuggestionChipElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  getTextContent,\r\n  hasAssignedNodes,\r\n  isDisabledInteractiveMixin,\r\n  isDisabledMixin,\r\n  isLinkButtonMixin,\r\n  M3eElevationElement,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ChipVariant } from \"./ChipVariant\";\r\n\r\n/**\r\n * A non-interactive chip used to convey small pieces of information.\r\n *\r\n * @description\r\n * The `m3e-chip` component establishes the foundational structure for chips. It supports expressive styling,\r\n * accessible interaction, and flexible content projection, aligning with Material 3 guidelines. Appearance\r\n * variants include `elevated` and `outlined`, enabling visual differentiation and contextual emphasis.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-chip` and `m3e-chip-set` components to present non-interactive chips.\r\n * ```html\r\n * <m3e-chip-set>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"palette\"></m3e-icon>Design</m3e-chip>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"accessibility_new\"></m3e-icon>Accessibility</m3e-chip>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"motion_photos_on\"></m3e-icon>Motion</m3e-chip>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"description\"></m3e-icon>Documentation</m3e-chip>\r\n * </m3e-chip-set>\r\n * ```\r\n *\r\n * @tag m3e-chip\r\n *\r\n * @slot - Renders the label of the chip.\r\n * @slot icon - Renders an icon before the chip's label.\r\n * @slot trailing-icon - Renders an icon after the chip's label.\r\n *\r\n * @attr value - A string representing the value of the chip.\r\n * @attr variant - The appearance variant of the chip.\r\n *\r\n * @cssprop --m3e-chip-container-shape - Border radius of the chip container.\r\n * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.\r\n * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.\r\n * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.\r\n * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.\r\n * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.\r\n * @cssprop --m3e-chip-label-text-color - Label text color in default state.\r\n * @cssprop --m3e-chip-icon-color - Icon color in default state.\r\n * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.\r\n * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.\r\n * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.\r\n * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.\r\n * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.\r\n * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.\r\n * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.\r\n * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.\r\n * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.\r\n */\r\n@customElement(\"m3e-chip\")\r\nexport class M3eChipElement extends AttachInternals(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      outline: none;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n      border-radius: var(--m3e-chip-container-shape, ${DesignToken.shape.corner.small});\r\n      height: calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken.density.calc(-2)});\r\n      font-size: var(--m3e-chip-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-chip-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-chip-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-chip-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) {\r\n      cursor: pointer;\r\n    }\r\n    :host(:not(m3e-chip):not(:disabled)[disabled-interactive]) {\r\n      cursor: not-allowed;\r\n    }\r\n    :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) .base {\r\n      user-select: none;\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      column-gap: var(--m3e-chip-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    :host([variant=\"elevated\"]) .base {\r\n      background-color: var(--m3e-elevated-chip-container-color, ${DesignToken.color.surfaceContainerLow});\r\n\r\n      --m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1});\r\n      --m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${DesignToken.elevation.level2});\r\n      --m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1});\r\n      --m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${DesignToken.elevation.level1});\r\n    }\r\n    :host([variant=\"outlined\"]) .base {\r\n      outline-width: var(--m3e-outlined-chip-outline-thickness, 1px);\r\n      outline-style: solid;\r\n      outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px));\r\n    }\r\n    :host(:not(:disabled):not([disabled-interactive])[variant=\"outlined\"]) .base {\r\n      outline-color: var(--m3e-outlined-chip-outline-color, ${DesignToken.color.outlineVariant});\r\n    }\r\n    :host(:disabled[variant=\"outlined\"]) .base,\r\n    :host([disabled-interactive][variant=\"outlined\"]) .base {\r\n      outline-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-outlined-chip-disabled-outline-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-outlined-chip-disabled-outline-opacity, 12%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:is(:state(--with-icon), :--with-icon)) .wrapper {\r\n      padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem);\r\n    }\r\n    :host(:not(:is(:state(--with-icon), :--with-icon))) .wrapper {\r\n      padding-inline-start: var(--m3e-chip-padding-start, 1rem);\r\n    }\r\n    :host(:is(:state(--with-trailing-icon), :--with-trailing-icon)) .wrapper {\r\n      padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem);\r\n    }\r\n    :host(:not(:is(:state(--with-trailing-icon), :--with-trailing-icon))) .wrapper {\r\n      padding-inline-end: var(--m3e-chip-padding-end, 1rem);\r\n    }\r\n    ::slotted([slot=\"icon\"]),\r\n    ::slotted([slot=\"trailing-icon\"]) {\r\n      flex: none;\r\n      width: 1em;\r\n      font-size: var(--m3e-chip-icon-size, 1.125rem) !important;\r\n    }\r\n    :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base {\r\n      color: var(--m3e-chip-label-text-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"icon\"]),\r\n    :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"trailing-icon\"]) {\r\n      color: var(--m3e-chip-icon-color, ${DesignToken.color.primary});\r\n    }\r\n    :host(:disabled) .base,\r\n    :host([disabled-interactive]) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-chip-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-chip-disabled-label-text-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) ::slotted([slot=\"icon\"]),\r\n    :host([disabled-interactive]) ::slotted([slot=\"icon\"]),\r\n    :host(:disabled) ::slotted([slot=\"trailing-icon\"]),\r\n    :host([disabled-interactive]) ::slotted([slot=\"trailing-icon\"]) {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-chip-disabled-icon-color, ${DesignToken.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host([variant=\"elevated\"]:disabled) .base,\r\n    :host([variant=\"elevated\"][disabled-interactive]) .base {\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-elevated-chip-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-elevated-chip-disabled-container-opacity, 12%),\r\n        transparent\r\n      );\r\n      --m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${DesignToken.elevation.level0});\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base,\r\n      :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"icon\"]),\r\n      :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"trailing-icon\"]) {\r\n        color: CanvasText;\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive])[variant=\"outlined\"]) .base {\r\n        outline-color: CanvasText;\r\n      }\r\n      :host(:disabled) .base,\r\n      :host([disabled-interactive]) .base,\r\n      :host(:disabled) ::slotted([slot=\"icon\"]),\r\n      :host([disabled-interactive]) ::slotted([slot=\"icon\"]),\r\n      :host(:disabled) ::slotted([slot=\"trailing-icon\"]),\r\n      :host([disabled-interactive]) ::slotted([slot=\"trailing-icon\"]) {\r\n        color: GrayText;\r\n      }\r\n      :host(:disabled[variant=\"outlined\"]) .base,\r\n      :host([disabled-interactive][variant=\"outlined\"]) .base {\r\n        outline-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".elevation\") private readonly _elevation?: M3eElevationElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** @private */ #value?: string;\r\n  /** @private */ #textContent = \"\";\r\n\r\n  /**\r\n   * The appearance variant of the chip.\r\n   * @default \"outlined\"\r\n   */\r\n  @property({ reflect: true }) variant: ChipVariant = \"outlined\";\r\n\r\n  /** A string representing the value of the chip. */\r\n  @property() get value() {\r\n    return this.#value ?? this.#textContent;\r\n  }\r\n  set value(value: string) {\r\n    this.#value = value;\r\n  }\r\n\r\n  /** The textual label of the chip. */\r\n  get label() {\r\n    return this.#textContent;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n\r\n    if (this.role === \"listitem\") {\r\n      this.removeAttribute(\"tabindex\");\r\n    }\r\n\r\n    [this._elevation, this._focusRing, this._stateLayer, this._ripple].forEach((x) => {\r\n      if (!x?.htmlFor) {\r\n        x?.attach(this);\r\n      }\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const disabled = !isDisabledMixin(this) || this.disabled;\r\n    const disabledInteractive = isDisabledInteractiveMixin(this) && this.disabledInteractive;\r\n\r\n    return html`<div class=\"base\">\r\n      <m3e-elevation class=\"elevation\" ?disabled=\"${disabled || disabledInteractive}\"></m3e-elevation>\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${disabled || disabledInteractive}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${disabled || disabledInteractive}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      ${isLinkButtonMixin(this) ? this[renderPseudoLink]() : nothing}\r\n      <div class=\"wrapper\">${this.#renderContent()}</div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderContent(): unknown {\r\n    return html`${this._renderIcon()}\r\n      <div class=\"label\">${this._renderSlot()}</div>\r\n      ${this._renderTrailingIcon()}`;\r\n  }\r\n\r\n  /** @internal */\r\n  protected _renderIcon(): unknown {\r\n    return html`<slot name=\"icon\" aria-hidden=\"true\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>`;\r\n  }\r\n\r\n  /** @internal */\r\n  protected _renderTrailingIcon(): unknown {\r\n    return html`<slot\r\n      name=\"trailing-icon\"\r\n      aria-hidden=\"true\"\r\n      @slotchange=\"${this.#handleTrailingIconSlotChange}\"\r\n    ></slot>`;\r\n  }\r\n\r\n  /** @internal */\r\n  protected _renderSlot(): unknown {\r\n    return html`<slot @slotchange=\"${this.#handleSlotChange}\"></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleTrailingIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-trailing-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#textContent = getTextContent(<HTMLSlotElement>e.target);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-chip\": M3eChipElement;\r\n  }\r\n}\r\n","import { nothing } from \"lit\";\r\n\r\nimport {\r\n  customElement,\r\n  Disabled,\r\n  DisabledInteractive,\r\n  Focusable,\r\n  FormSubmitter,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eChipElement } from \"./ChipElement\";\r\n\r\n/**\r\n * A chip users interact with to perform a smart or automated action that can span multiple applications.\r\n *\r\n * @description\r\n * The `m3e-assist-chip` component presents a Material 3 assist chip, providing users with quick access to\r\n * contextually relevant actions. It is designed for use cases like suggested actions, quick filters, or\r\n * secondary operations, and supports accessibility, keyboard interaction, and expressive state styling\r\n * in line with Material 3 guidelines.  Appearance variants include `elevated` and `outlined`, enabling visual\r\n * differentiation and contextual emphasis.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-assist-chip`.  In this example, multiple chips are nested inside\r\n * a `m3e-chip-set` container to create a cohesive set of chips. The container is given the ARIA `role=\"group\"` to convey\r\n * to assistive technologies that the chips are part of a related set of element.\r\n * ```html\r\n * <m3e-chip-set role=\"group\" aria-label=\"Quick actions\">\r\n *  <m3e-assist-chip><m3e-icon slot=\"icon\" name=\"edit\"></m3e-icon>Edit</m3e-assist-chip>\r\n *  <m3e-assist-chip><m3e-icon slot=\"icon\" name=\"delete\"></m3e-icon>Delete</m3e-assist-chip>\r\n *  <m3e-assist-chip><m3e-icon slot=\"icon\" name=\"content_copy\"></m3e-icon>Copy</m3e-assist-chip>\r\n *  <m3e-assist-chip><m3e-icon slot=\"icon\" name=\"share\"></m3e-icon>Share</m3e-assist-chip>\r\n * </m3e-chip-set>\r\n * ```\r\n *\r\n * @tag m3e-assist-chip\r\n *\r\n * @slot - Renders the label of the chip.\r\n * @slot icon - Renders an icon before the chip's label.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr name - The name of the element, submitted as a pair with the element's `value` as part of form data, when the element is used to submit a form.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr target - The target of the link button.\r\n * @attr type - The type of the element.\r\n * @attr value - A string representing the value of the chip.\r\n * @attr variant - The appearance variant of the chip.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-chip-container-shape - Border radius of the chip container.\r\n * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.\r\n * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.\r\n * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.\r\n * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.\r\n * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.\r\n * @cssprop --m3e-chip-label-text-color - Label text color in default state.\r\n * @cssprop --m3e-chip-icon-color - Icon color in default state.\r\n * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.\r\n * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.\r\n * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.\r\n * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.\r\n * @cssprop --m3e-chip-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-chip-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-chip-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-chip-disabled-icon-opacity - Opacity applied to disabled icons.\r\n * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.\r\n * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.\r\n * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.\r\n * @cssprop --m3e-elevated-chip-disabled-container-color - Background color for disabled elevated variant.\r\n * @cssprop --m3e-elevated-chip-disabled-container-opacity - Opacity applied to disabled elevated background.\r\n * @cssprop --m3e-elevated-chip-disabled-elevation - Elevation level for disabled elevated variant.\r\n * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.\r\n * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.\r\n */\r\n@customElement(\"m3e-assist-chip\")\r\nexport class M3eAssistChipElement extends FormSubmitter(\r\n  LinkButton(KeyboardClick(Focusable(DisabledInteractive(Disabled(Role(M3eChipElement, \"button\")))))),\r\n) {\r\n  /** Indicates that this custom element participates in form submission, validation, and form state restoration. */\r\n  static readonly formAssociated = true;\r\n\r\n  /** @internal @inheritdoc */\r\n  protected override _renderTrailingIcon(): unknown {\r\n    return nothing;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-assist-chip\": M3eAssistChipElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, Vertical } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A container used to organize chips into a cohesive unit.\r\n *\r\n * @description\r\n * The `m3e-chip-set` component provides a flexible container for grouping chips, supporting both\r\n * horizontal and vertical layouts. It manages chip arrangement, spacing, and accessibility, and\r\n * serves as the foundation for chip set variants such as input and filter chip sets.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-chip` and `m3e-chip-set` components to present non-interactive chips.\r\n * ```html\r\n * <m3e-chip-set>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"palette\"></m3e-icon>Design</m3e-chip>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"accessibility_new\"></m3e-icon>Accessibility</m3e-chip>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"motion_photos_on\"></m3e-icon>Motion</m3e-chip>\r\n *  <m3e-chip><m3e-icon slot=\"icon\" name=\"description\"></m3e-icon>Documentation</m3e-chip>\r\n * </m3e-chip-set>\r\n * ```\r\n *\r\n * @tag m3e-chip-set\r\n *\r\n * @slot - Renders the chips of the set.\r\n *\r\n * @attr vertical - Whether the element is oriented vertically.\r\n *\r\n * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.\r\n */\r\n@customElement(\"m3e-chip-set\")\r\nexport class M3eChipSetElement extends Vertical(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-flex;\r\n      flex-wrap: wrap;\r\n      vertical-align: middle;\r\n      gap: var(--m3e-chip-set-spacing, 0.5rem);\r\n      outline: none;\r\n    }\r\n    :host([vertical]) {\r\n      flex-direction: column;\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot></slot>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-chip-set\": M3eChipSetElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, PropertyValues } from \"lit\";\r\n\r\nimport {\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  DisabledInteractive,\r\n  Focusable,\r\n  KeyboardClick,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eChipElement } from \"./ChipElement\";\r\n\r\n/**\r\n * A chip users interact with to select/deselect options.\r\n *\r\n * @description\r\n * The `m3e-filter-chip` component presents a chip that users can select or deselect to filter\r\n * content or data sets. It supports single and multi-selection, keyboard interaction, accessibility,\r\n * and expressive state styling, providing a modern and interactive filtering experience in line\r\n * with Material 3 guidelines.  Appearance variants include `elevated` and `outlined`, enabling visual\r\n * differentiation and contextual emphasis.\r\n *\r\n * @example\r\n * The following example illustrates a single-select `m3e-filter-chip-set` containing multiple `m3e-filter-chip` components that\r\n * allow a user to choose an option. You can use the `multi` attribute to enable multiselect.\r\n * ```html\r\n * <m3e-filter-chip-set aria-label=\"Filter by topic\">\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"palette\"></m3e-icon>Design</m3e-filter-chip>\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"accessibility_new\"></m3e-icon>Accessibility</m3e-filter-chip>\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"motion_photos_on\"></m3e-icon>Motion</m3e-filter-chip>\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"description\"></m3e-icon>Documentation</m3e-filter-chip>\r\n * </m3e-filter-chip-set>\r\n * ```\r\n *\r\n * @tag m3e-filter-chip\r\n *\r\n * @slot - Renders the label of the chip.\r\n * @slot icon - Renders an icon before the chip's label.\r\n * @slot trailing-icon - Renders an icon after the chip's label.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.\r\n * @attr selected - A value indicating whether the element is selected.\r\n * @attr value - A string representing the value of the chip.\r\n * @attr variant - The appearance variant of the chip.\r\n *\r\n * @fires input - Emitted when the selected state changes.\r\n * @fires change - Emitted when the selected state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-chip-container-shape - Border radius of the chip container.\r\n * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.\r\n * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.\r\n * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.\r\n * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.\r\n * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.\r\n * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.\r\n * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.\r\n * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.\r\n * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.\r\n * @cssprop --m3e-chip-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-chip-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-chip-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-chip-disabled-icon-opacity - Opacity applied to disabled icons.\r\n * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.\r\n * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.\r\n * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.\r\n * @cssprop --m3e-elevated-chip-disabled-container-color - Background color for disabled elevated variant.\r\n * @cssprop --m3e-elevated-chip-disabled-container-opacity - Opacity applied to disabled elevated background.\r\n * @cssprop --m3e-elevated-chip-disabled-elevation - Elevation level for disabled elevated variant.\r\n * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.\r\n * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.\r\n * @cssprop --m3e-chip-selected-outline-thickness - Outline thickness for selected state.\r\n * @cssprop --m3e-chip-selected-label-text-color - Text color in selected state.\r\n * @cssprop --m3e-chip-selected-container-color - Background color in selected state.\r\n * @cssprop --m3e-chip-selected-container-hover-color - Hover state layer color in selected state.\r\n * @cssprop --m3e-chip-selected-container-focus-color - Focus state layer color in selected state.\r\n * @cssprop --m3e-chip-selected-hover-elevation - Elevation on hover in selected state.\r\n * @cssprop --m3e-chip-selected-ripple-color - Ripple color in selected state.\r\n * @cssprop --m3e-chip-selected-state-layer-focus-color - Focus state layer color in selected state.\r\n * @cssprop --m3e-chip-selected-state-layer-hover-color - Hover state layer color in selected state.\r\n * @cssprop --m3e-chip-selected-leading-icon-color - Leading icon color in selected state.\r\n * @cssprop --m3e-chip-selected-trailing-icon-color - Trailing icon color in selected state.\r\n * @cssprop --m3e-chip-unselected-label-text-color - Text color in unselected state.\r\n * @cssprop --m3e-chip-unselected-ripple-color - Ripple color in unselected state.\r\n * @cssprop --m3e-chip-unselected-state-layer-focus-color - Focus state layer color in unselected state.\r\n * @cssprop --m3e-chip-unselected-state-layer-hover-color - Hover state layer color in unselected state.\r\n * @cssprop --m3e-chip-unselected-leading-icon-color - Leading icon color in unselected state.\r\n * @cssprop --m3e-chip-unselected-trailing-icon-color - Trailing icon color in unselected state.\r\n */\r\n@customElement(\"m3e-filter-chip\")\r\nexport class M3eFilterChipElement extends Selected(\r\n  KeyboardClick(Focusable(DisabledInteractive(Disabled(Role(M3eChipElement, \"radio\"))))),\r\n) {\r\n  /** Indicates that this custom element participates in form submission, validation, and form state restoration. */\r\n  static readonly formAssociated = true;\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    M3eChipElement.styles,\r\n    css`\r\n      :host([selected]:not(:is(:state(--hide-selection), :--hide-selection))) .wrapper {\r\n        padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem);\r\n      }\r\n      .icon {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n      }\r\n      .check {\r\n        width: 1em;\r\n        font-size: var(--m3e-chip-icon-size, 1.125rem);\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive])) .check {\r\n        color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n      }\r\n      :host(:not([selected])) .check,\r\n      :host(:is(:state(--hide-selection), :--hide-selection)) .check,\r\n      :host(:is(:state(--hide-selection), :--hide-selection):not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n        display: none;\r\n      }\r\n      :host(:not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n        margin-inline-start: calc(0px - var(--m3e-chip-with-icon-padding-start, 0.5rem));\r\n        transition: margin-inline-start ${DesignToken.motion.spring.fastEffects};\r\n      }\r\n      :host([selected]) .icon {\r\n        margin-inline-start: 0;\r\n      }\r\n      :host([selected]:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot=\"icon\"]) {\r\n        display: none !important;\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base {\r\n        color: var(--m3e-chip-unselected-label-text-color, ${DesignToken.color.onSurfaceVariant});\r\n        --m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${DesignToken.color.onSurfaceVariant});\r\n        --m3e-state-layer-focus-color: var(\r\n          --m3e-chip-unselected-state-layer-focus-color,\r\n          ${DesignToken.color.onSurfaceVariant}\r\n        );\r\n        --m3e-state-layer-hover-color: var(\r\n          --m3e-chip-unselected-state-layer-hover-color,\r\n          ${DesignToken.color.onSurfaceVariant}\r\n        );\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"icon\"]) {\r\n        color: var(--m3e-chip-unselected-leading-icon-color, ${DesignToken.color.primary});\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"trailing-icon\"]) {\r\n        color: var(--m3e-chip-unselected-trailing-icon-color, ${DesignToken.color.onSurfaceVariant});\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive])[selected]) .base {\r\n        outline-offset: unset;\r\n        outline-width: var(--m3e-chip-selected-outline-thickness, 0);\r\n        color: var(--m3e-chip-selected-label-text-color, ${DesignToken.color.onSecondaryContainer});\r\n        background-color: var(--m3e-chip-selected-container-color, ${DesignToken.color.secondaryContainer});\r\n        --m3e-state-layer-hover-color: var(\r\n          --m3e-chip-selected-container-hover-color,\r\n          ${DesignToken.color.onSecondaryContainer}\r\n        );\r\n        --m3e-state-layer-focus-color: var(\r\n          --m3e-chip-selected-container-focus-color,\r\n          ${DesignToken.color.onSecondaryContainer}\r\n        );\r\n        --m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${DesignToken.elevation.level1});\r\n        --m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n        --m3e-state-layer-focus-color: var(\r\n          --m3e-chip-selected-state-layer-focus-color,\r\n          ${DesignToken.color.onSecondaryContainer}\r\n        );\r\n        --m3e-state-layer-hover-color: var(\r\n          --m3e-chip-selected-state-layer-hover-color,\r\n          ${DesignToken.color.onSecondaryContainer}\r\n        );\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot=\"icon\"]) {\r\n        color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n      }\r\n      :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"trailing-icon\"]) {\r\n        color: var(--m3e-chip-selected-trailing-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n      }\r\n      @media (prefers-reduced-motion) {\r\n        .base,\r\n        :host(:not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n          transition: none;\r\n        }\r\n      }\r\n      @media (forced-colors: active) {\r\n        :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base,\r\n        :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"icon\"]),\r\n        :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot=\"trailing-icon\"]) {\r\n          color: CanvasText;\r\n        }\r\n        :host(:not(:disabled):not([disabled-interactive])[selected]) .base,\r\n        :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot=\"icon\"]),\r\n        :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot=\"trailing-icon\"]),\r\n        :host(:not(:disabled):not([disabled-interactive])) .check {\r\n          color: ButtonText;\r\n        }\r\n        :host(:not(:disabled):not([disabled-interactive])[selected]) .base {\r\n          outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px));\r\n          outline-width: var(--m3e-outlined-chip-outline-thickness, 1px);\r\n          outline-color: ButtonText;\r\n        }\r\n      }\r\n    `,\r\n  ];\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.closest(\"m3e-filter-chip-set\")?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc @private */\r\n  protected override _renderIcon(): unknown {\r\n    return html`<div class=\"icon\" aria-hidden=\"true\">\r\n      <svg class=\"check\" viewBox=\"0 -960 960 960\" aria-hidden=\"true\">\r\n        <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n      </svg>\r\n      ${super._renderIcon()}\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    const selected = this.selected;\r\n    this.selected = !this.selected;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.closest(\"m3e-filter-chip-set\")?.[selectionManager].notifySelectionChange(this);\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.selected = selected;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-filter-chip\": M3eFilterChipElement;\r\n  }\r\n}\r\n","import { html, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Labelled,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Touched,\r\n  Role,\r\n  setCustomState,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eChipSetElement } from \"./ChipSetElement\";\r\nimport { M3eFilterChipElement } from \"./FilterChipElement\";\r\n\r\n/**\r\n * A container that organizes filter chips into a cohesive group, enabling selection and\r\n * deselection of values used to refine content or trigger contextual behavior.\r\n *\r\n * @description\r\n * The `m3e-filter-chip-set` component presents a group of filter chips, enabling users to select\r\n * one or more options to filter content or data sets. It supports single and multi-selection,\r\n * keyboard navigation, accessibility, and seamless form association, providing expressive and\r\n * interactive filtering experiences in line with Material 3 guidelines.\r\n *\r\n * @example\r\n * The following example illustrates a single-select `m3e-filter-chip-set` containing multiple `m3e-filter-chip` components that\r\n * allow a user to choose an option. You can use the `multi` attribute to enable multiselect.\r\n * ```html\r\n * <m3e-filter-chip-set aria-label=\"Filter by topic\">\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"palette\"></m3e-icon>Design</m3e-filter-chip>\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"accessibility_new\"></m3e-icon>Accessibility</m3e-filter-chip>\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"motion_photos_on\"></m3e-icon>Motion</m3e-filter-chip>\r\n *  <m3e-filter-chip><m3e-icon slot=\"icon\" name=\"description\"></m3e-icon>Documentation</m3e-filter-chip>\r\n * </m3e-filter-chip-set>\r\n * ```\r\n *\r\n * @tag m3e-filter-chip-set\r\n *\r\n * @slot - Renders the chips of the set.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator.\r\n * @attr multi - Whether multiple chips can be selected.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr vertical - Whether the element is oriented vertically.\r\n *\r\n * @fires input - Emitted when the selected state of a chip changes.\r\n * @fires change - Emitted when the selected state of a chip changes.\r\n *\r\n * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.\r\n */\r\n@customElement(\"m3e-filter-chip-set\")\r\nexport class M3eFilterChipSetElement extends Labelled(\r\n  Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(M3eChipSetElement, \"radiogroup\")))))),\r\n) {\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eFilterChipElement>()\r\n    .onActiveItemChange(() => this[selectionManager].activeItem?.focus())\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current);\r\n\r\n  /**\r\n   * Whether multiple chips can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /**\r\n   * Whether to hide the selection indicator.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n  /** The chips of the set. */\r\n  get chips(): readonly M3eFilterChipElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected chip(s) of the set. */\r\n  get selected(): readonly M3eFilterChipElement[] {\r\n    return this[selectionManager]?.selectedItems ?? [];\r\n  }\r\n\r\n  /** The selected (enabled) value(s) of the set. */\r\n  get value(): string | readonly string[] | null {\r\n    const values = this.selected.filter((x) => !x.disabled).map((x) => x.value);\r\n    switch (values.length) {\r\n      case 0:\r\n        return null;\r\n      case 1:\r\n        return values[0];\r\n      default:\r\n        return values;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue]() {\r\n    const values = this.value;\r\n    if (Array.isArray(values)) {\r\n      const data = new FormData();\r\n      for (const value of values) {\r\n        data.append(this.name, value);\r\n      }\r\n      return data;\r\n    }\r\n    return <string | null>values;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this[selectionManager].directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"vertical\")) {\r\n      this[selectionManager].vertical = this.vertical;\r\n    }\r\n\r\n    if (changedProperties.has(\"disabled\") && (changedProperties.get(\"disabled\") !== undefined || this.disabled)) {\r\n      this[selectionManager].disabled = this.disabled;\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\")) {\r\n      this.role = this.multi ? \"group\" : \"radiogroup\";\r\n      this.#updateChipRole();\r\n      this[selectionManager].multi = this.multi;\r\n      this[selectionManager].disableRovingTabIndex(this.multi);\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\") || changedProperties.has(\"disabled\")) {\r\n      // aria-disabled is not supported on radiogroup roles.\r\n      this.ariaDisabled = this.multi && this.disabled ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"hideSelectionIndicator\")) {\r\n      this.chips.forEach((x) => setCustomState(x, \"--hide-selection\", this.hideSelectionIndicator));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot\r\n      @slotchange=\"${this.#handleSlotChange}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @change=\"${this.#handleChange}\"\r\n    ></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange() {\r\n    const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-filter-chip\")]);\r\n    added.forEach((x) => setCustomState(x, \"--hide-selection\", this.hideSelectionIndicator));\r\n    this.#updateChipRole();\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (!this.multi) {\r\n      this[selectionManager].onKeyDown(e);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #updateChipRole(): void {\r\n    this.chips.forEach((x) => (x.role = this.multi ? \"button\" : \"radio\"));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-filter-chip-set\": M3eFilterChipSetElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  DisabledInteractive,\r\n  Disabled,\r\n  Role,\r\n  DesignToken,\r\n  hasAssignedNodes,\r\n  setCustomState,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport { M3eChipElement } from \"./ChipElement\";\r\n\r\n/**\r\n * A chip which represents a discrete piece of information entered by a user.\r\n *\r\n * @description\r\n * The `m3e-input-chip` component represents an input chip, allowing users to enter, display,\r\n * and manage discrete values such as tags or keywords. It supports expressive styling, accessibility,\r\n * keyboard interaction, and appearance variants including `elevated` and `outlined`.\r\n *\r\n * @example\r\n * The following example illustrates the use of the `m3e-input-chip-set` inside a `m3e-form-field`.\r\n * In this example, the `input` slot specifies the `input` element used to add input chips and the\r\n * field label's `for` attribute targets the `input` element to provide an accessible label.\r\n * ```html\r\n * <m3e-form-field>\r\n *  <label slot=\"label\" for=\"keywords\">Keywords</label>\r\n *  <m3e-input-chip-set aria-label=\"Enter keywords\">\r\n *    <input id=\"keywords\" slot=\"input\" placeholder=\"New keyword...\" />\r\n *  </m3e-input-chip-set>\r\n * </m3e-form-field>\r\n * ```\r\n *\r\n * @tag m3e-input-chip\r\n *\r\n * @slot - Renders the label of the chip.\r\n * @slot avatar - Renders an avatar before the chip's label.\r\n * @slot icon - Renders an icon before the chip's label.\r\n * @slot remove-icon - Renders the icon for the button used to remove the chip.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr disabled-interactive - Whether the element is disabled and interactive.\r\n * @attr removable - Whether the chip is removable.\r\n * @attr remove-label - The accessible label given to the button used to remove the chip.\r\n * @attr value - A string representing the value of the chip.\r\n * @attr variant - The appearance variant of the chip.\r\n *\r\n * @fires remove - Emitted when the remove button is clicked or DELETE or BACKSPACE key is pressed.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-chip-container-shape - Border radius of the chip container.\r\n * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.\r\n * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.\r\n * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.\r\n * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.\r\n * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.\r\n * @cssprop --m3e-chip-label-text-color - Label text color in default state.\r\n * @cssprop --m3e-chip-icon-color - Icon color in default state.\r\n * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.\r\n * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.\r\n * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.\r\n * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.\r\n * @cssprop --m3e-chip-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-chip-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-chip-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-chip-disabled-icon-opacity - Opacity applied to disabled icons.\r\n * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.\r\n * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.\r\n * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.\r\n * @cssprop --m3e-elevated-chip-disabled-container-color - Background color for disabled elevated variant.\r\n * @cssprop --m3e-elevated-chip-disabled-container-opacity - Opacity applied to disabled elevated background.\r\n * @cssprop --m3e-elevated-chip-disabled-elevation - Elevation level for disabled elevated variant.\r\n * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.\r\n * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.\r\n * @cssprop --m3e-chip-avatar-size - Font size of the avatar slot content.\r\n * @cssprop --m3e-chip-avatar-icon-size - Size of the icon displayed inside the avatar when used in a chip.\r\n * @cssprop --m3e-chip-avatar-font-size - Font size of text initials inside the avatar when used in a chip.\r\n * @cssprop --m3e-chip-avatar-font-weight - Font weight of text initials inside the avatar when used in a chip.\r\n * @cssprop --m3e-chip-avatar-line-height - Line height of text initials inside the avatar when used in a chip.\r\n * @cssprop --m3e-chip-avatar-tracking - Letter spacing (tracking) of text initials inside the avatar when used in a chip.\r\n * @cssprop --m3e-chip-disabled-avatar-opacity - Opacity applied to the avatar when disabled.\r\n * @cssprop --m3e-chip-with-avatar-padding-start - Start padding when an avatar is present.\r\n */\r\n@customElement(\"m3e-input-chip\")\r\nexport class M3eInputChipElement extends DisabledInteractive(Disabled(Role(M3eChipElement, \"row\"))) {\r\n  /** Indicates that this custom element participates in form submission, validation, and form state restoration. */\r\n  static readonly formAssociated = true;\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    M3eChipElement.styles,\r\n    css`\r\n      .cell {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        outline: none;\r\n        column-gap: var(--m3e-chip-spacing, 0.5rem);\r\n        min-width: 0;\r\n      }\r\n      .remove-button {\r\n        --m3e-icon-button-extra-small-container-height: 1.5rem;\r\n        --m3e-icon-button-extra-small-icon-size: var(--m3e-chip-icon-size, 1.125rem);\r\n        width: 1.5rem;\r\n      }\r\n      .remove-icon {\r\n        flex: none;\r\n        width: var(--m3e-chip-icon-size, 1.125rem);\r\n        height: var(--m3e-chip-icon-size, 1.125rem);\r\n      }\r\n      .touch {\r\n        top: calc(\r\n          0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${DesignToken.density.calc(-2)})) / 2)\r\n        );\r\n      }\r\n      .wrapper {\r\n        height: 100%;\r\n        overflow: visible;\r\n        min-width: 0;\r\n      }\r\n      ::slotted([slot=\"avatar\"]) {\r\n        flex: none;\r\n        font-size: var(--m3e-chip-avatar-size, 1.5rem);\r\n      }\r\n      ::slotted(m3e-avatar[slot=\"avatar\"]) {\r\n        --m3e-icon-size: var(--m3e-chip-avatar-icon-size, 1.125rem);\r\n        --m3e-avatar-size: var(--m3e-chip-avatar-size, 1.5rem);\r\n        --m3e-avatar-font-size: var(\r\n          --m3e-chip-avatar-font-size,\r\n          ${DesignToken.typescale.standard.title.small.fontSize}\r\n        );\r\n        --m3e-avatar-font-weight: var(\r\n          --m3e-chip-avatar-font-height,\r\n          ${DesignToken.typescale.standard.title.small.fontWeight}\r\n        );\r\n        --m3e-avatar-line-height: var(\r\n          --m3e-chip-avatar-line-height,\r\n          ${DesignToken.typescale.standard.title.small.lineHeight}\r\n        );\r\n        --m3e-avatar-tracking: var(--m3e-chip-avatar-tracking, ${DesignToken.typescale.standard.title.small.tracking});\r\n      }\r\n      :host(:disabled) ::slotted([slot=\"avatar\"]),\r\n      :host([disabled-interactive]) ::slotted([slot=\"avatar\"]) {\r\n        opacity: var(--m3e-chip-disabled-avatar-opacity, 38%);\r\n        color: var(--m3e-chip-disabled-icon-color, ${DesignToken.color.onSurface});\r\n      }\r\n      :host(:is(:state(--with-avatar), :--with-avatar)) ::slotted([slot=\"icon\"]) {\r\n        display: none;\r\n      }\r\n      :host(:is(:state(--with-avatar), :--with-avatar)) .wrapper {\r\n        padding-inline-start: var(--m3e-chip-with-avatar-padding-start, 0.25rem);\r\n      }\r\n      @media (forced-colors: active) {\r\n        :host(:disabled) ::slotted([slot=\"avatar\"]),\r\n        :host([disabled-interactive]) ::slotted([slot=\"avatar\"]) {\r\n          color: CanvasText;\r\n        }\r\n      }\r\n    `,\r\n  ];\r\n\r\n  /** A reference to the grid cell of the chip. */\r\n  @query(\".cell\") readonly cell!: HTMLSpanElement;\r\n\r\n  /** A reference to the button used to remove the chip. */\r\n  @query(\".remove-button\") readonly removeButton!: M3eIconButtonElement | null;\r\n\r\n  /**\r\n   * Whether the chip is removable.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) removable = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to remove the chip.\r\n   * @default \"Remove\"\r\n   */\r\n  @property({ attribute: \"remove-label\" }) removeLabel = \"Remove\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.removeAttribute(\"tabindex\");\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n    this.removeAttribute(\"tabindex\");\r\n\r\n    if (changedProperties.has(\"removable\")) {\r\n      setCustomState(this, \"--with-trailing-icon\", this.removable);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-elevation\r\n        class=\"elevation\"\r\n        for=\"cell\"\r\n        ?disabled=\"${this.disabled || this.disabledInteractive}\"\r\n      ></m3e-elevation>\r\n      <m3e-state-layer\r\n        class=\"state-layer\"\r\n        for=\"cell\"\r\n        ?disabled=\"${this.disabled || this.disabledInteractive}\"\r\n      ></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" for=\"cell\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" for=\"cell\" ?disabled=\"${this.disabled || this.disabledInteractive}\"></m3e-ripple>\r\n      <div class=\"wrapper\">\r\n        <div\r\n          id=\"cell\"\r\n          class=\"cell\"\r\n          role=\"gridcell\"\r\n          tabindex=\"${ifDefined(this.disabled ? undefined : \"-1\")}\"\r\n          @keydown=\"${this.#handleKeyDown}\"\r\n        >\r\n          <slot name=\"avatar\" @slotchange=\"${this.#handleAvatarSlotChange}\"></slot>\r\n          ${this._renderIcon()}\r\n          <div class=\"label\">${this._renderSlot()}</div>\r\n          <div class=\"touch\" aria-hidden=\"true\"></div>\r\n        </div>\r\n        ${this._renderTrailingIcon()}\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @internal @inheritdoc */\r\n  protected override _renderTrailingIcon(): unknown {\r\n    return this.removable\r\n      ? html`<span role=\"gridcell\" class=\"remove\">\r\n          <m3e-icon-button\r\n            class=\"remove-button\"\r\n            aria-label=\"${this.removeLabel}\"\r\n            size=\"extra-small\"\r\n            tabindex=\"-1\"\r\n            ?disabled=\"${this.disabled}\"\r\n            ?disabled-interactive=\"${this.disabledInteractive}\"\r\n            @click=\"${this.#handleRemoveButtonClick}\"\r\n          >\r\n            <slot name=\"remove-icon\">\r\n              <svg class=\"remove-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n                <path\r\n                  d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n                />\r\n              </svg>\r\n            </slot>\r\n          </m3e-icon-button>\r\n        </span>`\r\n      : nothing;\r\n  }\r\n\r\n  /** @private */\r\n  #handleAvatarSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-avatar\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleRemoveButtonClick(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"remove\"));\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (this.removable) {\r\n      switch (e.key) {\r\n        case \"Backspace\":\r\n        case \"Delete\":\r\n          this.dispatchEvent(new Event(\"remove\"));\r\n          break;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eInputChipElementEventMap extends HTMLElementEventMap {\r\n  remove: Event;\r\n}\r\n\r\nexport interface M3eInputChipElement {\r\n  addEventListener<K extends keyof M3eInputChipElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eInputChipElement, ev: M3eInputChipElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eInputChipElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eInputChipElement, ev: M3eInputChipElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-input-chip\": M3eInputChipElement;\r\n  }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, PropertyValues } from \"lit\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  ConstraintValidation,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Required,\r\n  RequiredConstraintValidation,\r\n  Role,\r\n  Touched,\r\n  registerStyleSheet,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { ListKeyManager, ListManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { FormFieldControl } from \"@m3e/web/form-field\";\r\n\r\nimport { M3eChipSetElement } from \"./ChipSetElement\";\r\nimport { M3eInputChipElement } from \"./InputChipElement\";\r\nimport { InputChipSetChangeEventDetail } from \"./InputChipSetChangeEventDetail\";\r\n\r\n/**\r\n * A container that transforms user input into a cohesive set of interactive chips, supporting entry, editing, and removal of discrete values.\r\n *\r\n * @description\r\n * The `m3e-input-chip-set` component enables users to input, display, and manage a collection of discrete\r\n * values as input chips. Designed for expressive, accessible forms, it supports keyboard navigation, validation,\r\n * and seamless integration with form controls. This component is ideal for capturing user-generated tags,\r\n * keywords, or selections in a visually consistent and interactive manner.\r\n *\r\n * @example\r\n * The following example illustrates the use of the `m3e-input-chip-set` inside a `m3e-form-field`.\r\n * In this example, the `input` slot specifies the `input` element used to add input chips and the\r\n * field label's `for` attribute targets the `input` element to provide an accessible label.\r\n * ```html\r\n * <m3e-form-field>\r\n *  <label slot=\"label\" for=\"keywords\">Keywords</label>\r\n *  <m3e-input-chip-set aria-label=\"Enter keywords\">\r\n *    <input id=\"keywords\" slot=\"input\" placeholder=\"New keyword...\" />\r\n *  </m3e-input-chip-set>\r\n * </m3e-form-field>\r\n * ```\r\n *\r\n * @tag m3e-input-chip-set\r\n *\r\n * @slot - Renders the chips of the set.\r\n * @slot input - Renders the input element used to add new chips to the set.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr required - Whether a value is required for the element.\r\n * @attr vertical - Whether the element is oriented vertically.\r\n *\r\n * @fires change - Emitted when a chip is added to, or removed from, the set.\r\n *\r\n * @cssprop --m3e-chip-set-spacing - The spacing (gap) between chips in the set.\r\n */\r\n@customElement(\"m3e-input-chip-set\")\r\nexport class M3eInputChipSetElement\r\n  extends RequiredConstraintValidation(\r\n    Required(\r\n      ConstraintValidation(Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(M3eChipSetElement, \"grid\"))))))),\r\n    ),\r\n  )\r\n  implements FormFieldControl\r\n{\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-input-chip-set [slot=\"input\"]::placeholder {\r\n        user-select: none;\r\n        color: currentColor;\r\n        transition: opacity ${DesignToken.motion.duration.extraLong1};\r\n      }\r\n      m3e-input-chip-set:not(:focus-within) [slot=\"input\"]::placeholder {\r\n        opacity: 0;\r\n        transition: 0s;\r\n      }\r\n      m3e-input-chip-set:hover [slot=\"input\"]::placeholder {\r\n        transition: 0s;\r\n      }\r\n      @media (prefers-reduced-motion) {\r\n        m3e-input-chip-set [slot=\"input\"]::placeholder {\r\n          transition: none !important;\r\n        }\r\n      }\r\n    `);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    M3eChipSetElement.styles,\r\n    css`\r\n      ::slotted([slot=\"input\"]) {\r\n        outline: unset;\r\n        border: unset;\r\n        background-color: transparent;\r\n        box-shadow: none;\r\n        font-family: inherit;\r\n        font-size: inherit;\r\n        line-height: initial;\r\n        letter-spacing: inherit;\r\n        color: var(--_form-field-input-color, inherit);\r\n        flex: 1 1 auto;\r\n        min-width: 0;\r\n        padding: unset;\r\n      }\r\n      ::slotted(m3e-input-chip) {\r\n        min-width: 0;\r\n      }\r\n      span[role=\"row\"],\r\n      span[role=\"gridcell\"] {\r\n        display: contents;\r\n      }\r\n    `,\r\n  ];\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ readonly #inputChangeHandler = () => this.#handleInputChange();\r\n  /** @private */ readonly #inputKeyDownHandler = (e: KeyboardEvent) => this.#handleInputKeyDown(e);\r\n  /** @private */ readonly #focusHandler = () => this.#handleFocus();\r\n  /** @private */ readonly #focusInHandler = () => this.#handleFocusIn();\r\n  /** @private */ readonly #focusOutHandler = () => this.#handleFocusOut();\r\n  /** @private */ readonly #chipRemoveHandler = (e: Event) => this.#handleChipRemove(e);\r\n  /** @private */ readonly #chipClickHandler = (e: Event) => this.#handleChipClick(e);\r\n\r\n  /** @private */ readonly #listManager = new ListManager<M3eInputChipElement>();\r\n  /** @private */ readonly #listKeyManager = new ListKeyManager<HTMLElement>()\r\n    .onActiveItemChange(() => this.#listKeyManager.activeItem?.focus())\r\n    .withHomeAndEnd()\r\n    .withSkipPredicate((x) => !x.hasAttribute(\"tabindex\"))\r\n    .withDirectionality(M3eDirectionality.current);\r\n\r\n  /** @private */ #ignoreInputChange = false;\r\n  /** @private */ #input: HTMLInputElement | null = null;\r\n  /** @private */ #tabindex = 0;\r\n\r\n  /** The chips of the set. */\r\n  get chips(): readonly M3eInputChipElement[] {\r\n    // NOTE: query is used instead of the internal list management due to\r\n    // validating required state on change to support form-field integration.\r\n    return [...this.querySelectorAll(\"m3e-input-chip\")];\r\n  }\r\n\r\n  /** The values of the set. */\r\n  get value(): readonly string[] | null {\r\n    const values = this.chips.filter((x) => !x.disabled).map((x) => x.value);\r\n    return values.length == 0 ? null : values;\r\n  }\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue]() {\r\n    const values = this.value;\r\n    if (!values) return null;\r\n    const data = new FormData();\r\n    for (const value of values) {\r\n      data.append(this.name, value);\r\n    }\r\n    return data;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  get shouldLabelFloat(): boolean {\r\n    return this.chips.length > 0;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  onContainerClick(): void {\r\n    this.#input?.focus();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    if (!customElements.get(\"m3e-form-field\")) {\r\n      customElements.whenDefined(\"m3e-form-field\").then(() => {\r\n        this.closest(\"m3e-form-field\")?.notifyControlStateChange();\r\n      });\r\n    } else {\r\n      this.closest(\"m3e-form-field\")?.notifyControlStateChange();\r\n    }\r\n\r\n    this.#tabindex = Number.parseInt(this.getAttribute(\"tabindex\") ?? \"0\");\r\n    this.addEventListener(\"focus\", this.#focusHandler);\r\n    this.addEventListener(\"focusin\", this.#focusInHandler);\r\n    this.addEventListener(\"focusout\", this.#focusOutHandler);\r\n\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this.#listKeyManager.directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"focus\", this.#focusHandler);\r\n    this.removeEventListener(\"focusin\", this.#focusInHandler);\r\n    this.removeEventListener(\"focusout\", this.#focusOutHandler);\r\n\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n\r\n    if (!this.hasAttribute(\"tabindex\")) {\r\n      this.setAttribute(\"tabindex\", `${this.#tabindex}`);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"vertical\")) {\r\n      this.ariaOrientation = null;\r\n    }\r\n    if (changedProperties.has(\"disabled\")) {\r\n      this.#listManager.items.forEach((x) => (x.disabled = this.disabled));\r\n      if (this.#input) {\r\n        this.#input.disabled = this.disabled;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot @keydown=\"${this.#handleKeyDown}\" @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n      <span role=\"row\">\r\n        <span role=\"gridcell\"><slot name=\"input\" @slotchange=\"${this.#handleInputSlotChange}\"></slot></span>\r\n      </span> `;\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this.#listKeyManager.onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  async #handleSlotChange(): Promise<void> {\r\n    const { added, removed } = this.#listManager.setItems([...this.querySelectorAll(\"m3e-input-chip\")]);\r\n\r\n    for (const chip of added) {\r\n      if (chip.isUpdatePending) {\r\n        await chip.updateComplete;\r\n      }\r\n      if (this.disabled) {\r\n        chip.disabled = true;\r\n      }\r\n      chip.addEventListener(\"remove\", this.#chipRemoveHandler);\r\n      chip.cell.addEventListener(\"click\", this.#chipClickHandler);\r\n    }\r\n\r\n    removed.forEach((x) => {\r\n      x.removeEventListener(\"remove\", this.#chipRemoveHandler);\r\n      x.cell.removeEventListener(\"click\", this.#chipClickHandler);\r\n    });\r\n\r\n    this.#listKeyManager.setItems(\r\n      this.#listManager.items.flatMap((x) => (x.removeButton ? [x.cell, x.removeButton] : [x.cell])),\r\n    );\r\n    if (!this.#listKeyManager.activeItem) {\r\n      this.#listKeyManager.updateActiveItem(this.#listKeyManager.items.find((x) => x.hasAttribute(\"tabindex\")));\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputSlotChange(): void {\r\n    const input = this.querySelector(\"input\");\r\n    if (this.#input) {\r\n      this.#input.removeEventListener(\"change\", this.#inputChangeHandler);\r\n      this.#input.removeEventListener(\"keydown\", this.#inputKeyDownHandler);\r\n    }\r\n\r\n    this.#input = input;\r\n    if (this.#input) {\r\n      this.#input.disabled = this.disabled;\r\n      this.#input.addEventListener(\"change\", this.#inputChangeHandler);\r\n      this.#input.addEventListener(\"keydown\", this.#inputKeyDownHandler);\r\n\r\n      const property = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, \"value\")!;\r\n      Object.defineProperty(input, \"value\", {\r\n        get: () => property.get?.call(input),\r\n        set: (value: string) => {\r\n          property.set?.call(input, value);\r\n          if (this.#input === input && !this.#ignoreInputChange) {\r\n            this.#handleInputChange();\r\n          }\r\n        },\r\n      });\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleFocus(): void {\r\n    setTimeout(() => (this.#listKeyManager.activeItem ?? this.#input)?.focus());\r\n  }\r\n\r\n  /** @private */\r\n  #handleFocusIn(): void {\r\n    this.setAttribute(\"tabindex\", \"-1\");\r\n  }\r\n\r\n  /** @private */\r\n  #handleFocusOut(): void {\r\n    this.setAttribute(\"tabindex\", `${this.#tabindex}`);\r\n  }\r\n\r\n  /** @private */\r\n  #handleChipRemove(e: Event): void {\r\n    const chip = <M3eInputChipElement>e.target;\r\n    const index = this.#listManager.items.indexOf(chip);\r\n    const nextChip = this.#listManager.items.find((x, y) => y > index && !x.disabled && x.removable);\r\n\r\n    chip.remove();\r\n\r\n    this.#listKeyManager.setActiveItem(this.#listKeyManager.items.find((x) => x === nextChip?.removeButton));\r\n    if (!this.#listKeyManager.activeItem) {\r\n      this.#input?.focus();\r\n    }\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<InputChipSetChangeEventDetail>(\"change\", {\r\n        bubbles: true,\r\n        detail: { type: \"remove\", value: chip.value, chip: chip },\r\n      }),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #handleChipClick(e: Event): void {\r\n    this.#listKeyManager.updateActiveItem(e.composedPath().find((x) => x instanceof M3eInputChipElement)?.cell);\r\n  }\r\n\r\n  /** @private */\r\n  async #handleInputChange(): Promise<void> {\r\n    const value = this.#input?.value;\r\n    if (!value) return;\r\n\r\n    const chip = document.createElement(\"m3e-input-chip\");\r\n    chip.removable = true;\r\n    chip.appendChild(document.createTextNode(value));\r\n    this.appendChild(chip);\r\n\r\n    if (chip.isUpdatePending) {\r\n      await chip.updateComplete;\r\n    }\r\n\r\n    if (this.#input) {\r\n      try {\r\n        this.#ignoreInputChange = true;\r\n        this.#input.value = \"\";\r\n      } finally {\r\n        this.#ignoreInputChange = false;\r\n      }\r\n    }\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<InputChipSetChangeEventDetail>(\"change\", {\r\n        bubbles: true,\r\n        detail: { type: \"add\", value: value, chip: chip },\r\n      }),\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #handleInputKeyDown(e: KeyboardEvent): void {\r\n    if (e.key === \"Backspace\" && !this.#input?.value) {\r\n      const item = [...this.#listManager.items]\r\n        .reverse()\r\n        .find((x) => !x.disabled && !x.disabledInteractive && x.removable);\r\n      if (item) {\r\n        item.dispatchEvent(new Event(\"remove\"));\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ninterface M3eInputChipSetElementEventMap extends HTMLElementEventMap {\r\n  change: CustomEvent<InputChipSetChangeEventDetail>;\r\n}\r\n\r\nexport interface M3eInputChipSetElement {\r\n  addEventListener<K extends keyof M3eInputChipSetElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eInputChipSetElement, ev: M3eInputChipSetElementEventMap[K]) => void,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  addEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | AddEventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener<K extends keyof M3eInputChipSetElementEventMap>(\r\n    type: K,\r\n    listener: (this: M3eInputChipSetElement, ev: M3eInputChipSetElementEventMap[K]) => void,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n\r\n  removeEventListener(\r\n    type: string,\r\n    listener: EventListenerOrEventListenerObject,\r\n    options?: boolean | EventListenerOptions,\r\n  ): void;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-input-chip-set\": M3eInputChipSetElement;\r\n  }\r\n}\r\n","import { nothing } from \"lit\";\r\n\r\nimport {\r\n  customElement,\r\n  Disabled,\r\n  DisabledInteractive,\r\n  Focusable,\r\n  FormSubmitter,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  Role,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eChipElement } from \"./ChipElement\";\r\n\r\n/**\r\n * A chip used to help narrow a user's intent by presenting dynamically generated suggestions, such as\r\n * suggested responses or search filters.\r\n *\r\n * @description\r\n * The `m3e-suggestion-chip` component presents a suggestion chip, offering users contextually relevant\r\n * actions or responses. It is designed for dynamic suggestion scenarios, such as search filters or\r\n * smart replies, and supports accessibility, keyboard interaction, and expressive state styling in line\r\n * with Material 3 guidelines.  Appearance variants include `elevated` and `outlined`, enabling visual\r\n * differentiation and contextual emphasis.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-suggestion-chip`.  In this example, multiple chips are nested inside\r\n * a `m3e-chip-set` container to create a cohesive set of chips. The container is given the ARIA `role=\"group\"` to convey\r\n * to assistive technologies that the chips are part of a related set of element.\r\n * ```html\r\n * <m3e-chip-set role=\"group\" aria-label=\"Suggested replies\">\r\n *  <m3e-suggestion-chip>Sounds good!</m3e-suggestion-chip>\r\n *  <m3e-suggestion-chip>Can you clarify?</m3e-suggestion-chip>\r\n *  <m3e-suggestion-chip>Let's do it.</m3e-suggestion-chip>\r\n *  <m3e-suggestion-chip>Maybe later.</m3e-suggestion-chip>\r\n * </m3e-chip-set>\r\n * ```\r\n *\r\n * @tag m3e-suggestion-chip\r\n *\r\n * @slot - Renders the label of the chip.\r\n * @slot icon - Renders an icon before the chip's label.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr name - The name of the element, submitted as a pair with the element's `value` as part of form data, when the element is used to submit a form.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr target - The target of the link button.\r\n * @attr type - The type of the element.\r\n * @attr value - A string representing the value of the chip.\r\n * @attr variant - The appearance variant of the chip.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-chip-container-shape - Border radius of the chip container.\r\n * @cssprop --m3e-chip-container-height - Base height of the chip container before density adjustment.\r\n * @cssprop --m3e-chip-label-text-font-size - Font size of the chip label text.\r\n * @cssprop --m3e-chip-label-text-font-weight - Font weight of the chip label text.\r\n * @cssprop --m3e-chip-label-text-line-height - Line height of the chip label text.\r\n * @cssprop --m3e-chip-label-text-tracking - Letter spacing of the chip label text.\r\n * @cssprop --m3e-chip-label-text-color - Label text color in default state.\r\n * @cssprop --m3e-chip-icon-color - Icon color in default state.\r\n * @cssprop --m3e-chip-icon-size - Font size of leading/trailing icons.\r\n * @cssprop --m3e-chip-spacing - Horizontal gap between chip content elements.\r\n * @cssprop --m3e-chip-padding-start - Default start padding when no icon is present.\r\n * @cssprop --m3e-chip-padding-end - Default end padding when no trailing icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-start - Start padding when leading icon is present.\r\n * @cssprop --m3e-chip-with-icon-padding-end - End padding when trailing icon is present.\r\n * @cssprop --m3e-chip-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-chip-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-chip-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-chip-disabled-icon-opacity - Opacity applied to disabled icons.\r\n * @cssprop --m3e-elevated-chip-container-color - Background color for elevated variant.\r\n * @cssprop --m3e-elevated-chip-elevation - Elevation level for elevated variant.\r\n * @cssprop --m3e-elevated-chip-hover-elevation - Elevation level on hover.\r\n * @cssprop --m3e-elevated-chip-disabled-container-color - Background color for disabled elevated variant.\r\n * @cssprop --m3e-elevated-chip-disabled-container-opacity - Opacity applied to disabled elevated background.\r\n * @cssprop --m3e-elevated-chip-disabled-elevation - Elevation level for disabled elevated variant.\r\n * @cssprop --m3e-outlined-chip-outline-thickness - Outline thickness for outlined variant.\r\n * @cssprop --m3e-outlined-chip-outline-color - Outline color for outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-color - Outline color for disabled outlined variant.\r\n * @cssprop --m3e-outlined-chip-disabled-outline-opacity - Opacity applied to disabled outline.\r\n */\r\n@customElement(\"m3e-suggestion-chip\")\r\nexport class M3eSuggestionChipElement extends FormSubmitter(\r\n  LinkButton(KeyboardClick(Focusable(DisabledInteractive(Disabled(Role(M3eChipElement, \"button\")))))),\r\n) {\r\n  /** Indicates that this custom element participates in form submission, validation, and form state restoration. */\r\n  static readonly formAssociated = true;\r\n\r\n  /** @internal @inheritdoc */\r\n  protected override _renderTrailingIcon(): unknown {\r\n    return nothing;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-suggestion-chip\": M3eSuggestionChipElement;\r\n  }\r\n}\r\n"],"names":["M3eChipElement","AttachInternals","LitElement","constructor","_M3eChipElement_value","set","this","_M3eChipElement_textContent","variant","value","__classPrivateFieldGet","__classPrivateFieldSet","label","firstUpdated","_changedProperties","super","role","removeAttribute","_elevation","_focusRing","_stateLayer","_ripple","forEach","x","htmlFor","attach","render","disabled","isDisabledMixin","disabledInteractive","isDisabledInteractiveMixin","html","isLinkButtonMixin","renderPseudoLink","nothing","_M3eChipElement_instances","_M3eChipElement_renderContent","call","_renderIcon","_M3eChipElement_handleIconSlotChange","_renderTrailingIcon","_M3eChipElement_handleTrailingIconSlotChange","_renderSlot","_M3eChipElement_handleSlotChange","e","setCustomState","hasAssignedNodes","target","getTextContent","styles","css","unsafeCSS","DesignToken","motion","duration","short4","easing","standard","shape","corner","small","density","calc","typescale","large","fontSize","fontWeight","lineHeight","tracking","color","surfaceContainerLow","elevation","level1","level2","outlineVariant","onSurface","primary","level0","__decorate","query","prototype","property","reflect","customElement","M3eAssistChipElement","FormSubmitter","LinkButton","KeyboardClick","Focusable","DisabledInteractive","Disabled","Role","formAssociated","M3eChipSetElement","Vertical","M3eFilterChipElement","Selected","_M3eFilterChipElement_clickHandler","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","update","changedProperties","has","closest","selectionManager","notifySelectionChange","defaultPrevented","selected","dispatchEvent","Event","bubbles","composed","cancelable","onSecondaryContainer","spring","fastEffects","onSurfaceVariant","secondaryContainer","M3eFilterChipSetElement","Labelled","Dirty","Touched","FormAssociated","_M3eFilterChipSetElement_directionalitySubscription","_a","SelectionManager","onActiveItemChange","activeItem","focus","withWrap","withDirectionality","M3eDirectionality","current","multi","hideSelectionIndicator","chips","items","selectedItems","values","filter","map","length","WeakMap","_M3eFilterChipSetElement_instances","WeakSet","formValue","Array","isArray","data","FormData","append","name","observe","directionality","vertical","undefined","get","_M3eFilterChipSetElement_updateChipRole","disableRovingTabIndex","ariaDisabled","_M3eFilterChipSetElement_handleSlotChange","_M3eFilterChipSetElement_handleKeyDown","_M3eFilterChipSetElement_handleChange","added","setItems","querySelectorAll","onKeyDown","stopPropagation","type","Boolean","attribute","M3eInputChipElement","removable","removeLabel","ifDefined","_M3eInputChipElement_instances","_M3eInputChipElement_handleKeyDown","_M3eInputChipElement_handleAvatarSlotChange","_M3eInputChipElement_handleRemoveButtonClick","key","title","M3eInputChipSetElement","RequiredConstraintValidation","Required","ConstraintValidation","_M3eInputChipSetElement_directionalitySubscription","_M3eInputChipSetElement_inputChangeHandler","_M3eInputChipSetElement_instances","_M3eInputChipSetElement_handleInputChange","_M3eInputChipSetElement_inputKeyDownHandler","_M3eInputChipSetElement_focusHandler","_M3eInputChipSetElement_handleFocus","_M3eInputChipSetElement_focusInHandler","_M3eInputChipSetElement_handleFocusIn","_M3eInputChipSetElement_focusOutHandler","_M3eInputChipSetElement_handleFocusOut","_M3eInputChipSetElement_chipRemoveHandler","_M3eInputChipSetElement_chipClickHandler","_M3eInputChipSetElement_listManager","ListManager","_M3eInputChipSetElement_listKeyManager","ListKeyManager","withHomeAndEnd","withSkipPredicate","hasAttribute","_M3eInputChipSetElement_ignoreInputChange","_M3eInputChipSetElement_input","_M3eInputChipSetElement_tabindex","shouldLabelFloat","onContainerClick","customElements","notifyControlStateChange","whenDefined","then","Number","parseInt","getAttribute","setAttribute","ariaOrientation","_M3eInputChipSetElement_handleKeyDown","_M3eInputChipSetElement_handleSlotChange","_M3eInputChipSetElement_handleInputSlotChange","async","removed","chip","isUpdatePending","updateComplete","cell","flatMap","removeButton","updateActiveItem","find","input","querySelector","Object","getOwnPropertyDescriptor","HTMLInputElement","defineProperty","setTimeout","index","indexOf","nextChip","y","remove","setActiveItem","CustomEvent","detail","composedPath","document","createElement","appendChild","createTextNode","item","reverse","registerStyleSheet","extraLong1","M3eSuggestionChipElement"],"mappings":"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"}

package/dist/core-a11y.js

@@ -1074,10 +1074,12 @@ class M3eInteractivityChecker {
    * @param {Element} element The element to test.
    * @param {readonly Element[]} [parents = undefined] The known parent elements to test. The default value is `undefined`.
    * @param {boolean} [allowVisiblyHidden=false] Whether to allow visibly hidden elements as focusable.
+   * @param {boolean} [allowDisabled=false] Whether to allow disabled elements as focusable.
    * @returns {boolean} Whether `element` can receive focus.
    */
-  static isFocusable(element, parents, allowVisiblyHidden = false) {
-    if (element.matches(`:is(button,input,select,textarea,object,:is(a,area)[href],[tabindex]:not([tabindex='-1']),[contenteditable=true]):not(:disabled,[disabled]${allowVisiblyHidden ? "" : ",[hidden]"})`)) {
+  static isFocusable(element, parents, allowVisiblyHidden = false, allowDisabled = false) {
+    const selectors = `:is(button,input,select,textarea,object,:is(a,area)[href],[tabindex]${allowDisabled ? "" : ":not([tabindex='-1'])"},[contenteditable=true])${allowDisabled ? "" : ":not(:disabled,[disabled])"}${allowVisiblyHidden ? "" : ":not([hidden])"}`;
+    if (element.matches(selectors)) {
       return !__classPrivateFieldGet(this, _a$1, "m", _M3eInteractivityChecker_isVisiblyHidden).call(this, element, allowVisiblyHidden) && !__classPrivateFieldGet(this, _a$1, "m", _M3eInteractivityChecker_cannotFocusParent).call(this, parents, allowVisiblyHidden);
     }
     if (!element.localName.includes("-") || !element.matches(":not(:disabled,[disabled])") || element.getAttribute("aria-disabled") === "true") {
@@ -1099,7 +1101,7 @@ class M3eInteractivityChecker {
     const walker = element.ownerDocument.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
     for (let node = walker.nextNode(); node; node = walker.nextNode()) {
       const element = walker.currentNode;
-      if (this.isFocusable(element, undefined, allowVisiblyHidden)) {
+      if (this.isFocusable(element, undefined, allowVisiblyHidden, true)) {
         elements.push(element);
       }
     }