@m3e/web 2.1.3 → 2.2.0

package/dist/option.js.map

@@ -1 +1 @@
-{"version":3,"file":"option.js","sources":["../../src/option/OptionElement.ts","../../src/option/OptGroupElement.ts","../../src/option/OptionPanelElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, 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  Disabled,\r\n  getTextContent,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n  setCustomState,\r\n  TextHighlightMode,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { typeaheadLabel } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * An option that can be selected.\r\n *\r\n * @description\r\n * The `m3e-option` component represents an individual selectable item within an option list,\r\n * adhering to Material Design 3 specifications. It provides visual feedback through state layers and ripple effects,\r\n * supports single and multiple selection modes, and includes comprehensive accessibility features including\r\n * keyboard navigation and focus management. The component automatically manages its visual appearance based on\r\n * selection and disabled states, with configurable styling for interactive and non-interactive variants.\r\n *\r\n * @tag m3e-option\r\n *\r\n * @slot - Renders the label of the option.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr disable-highlight - Whether text highlighting is disabled.\r\n * @attr highlight-mode - The mode in which to highlight a term.\r\n * @attr selected - Whether the element is selected.\r\n * @attr term - The search term to highlight.\r\n * @attr value - A string representing the value of the option.\r\n *\r\n * @cssprop --m3e-option-container-height - The height of the option container.\r\n * @cssprop --m3e-option-color - The text color of the option.\r\n * @cssprop --m3e-option-container-hover-color - The color for the hover state layer.\r\n * @cssprop --m3e-option-container-focus-color - The color for the focus state layer.\r\n * @cssprop --m3e-option-ripple-color - The color of the ripple effect.\r\n * @cssprop --m3e-option-selected-color - The text color when the option is selected.\r\n * @cssprop --m3e-option-selected-container-color - The background color when the option is selected.\r\n * @cssprop --m3e-option-selected-container-hover-color - The hover color for the selected state layer.\r\n * @cssprop --m3e-option-selected-container-focus-color - The focus color for the selected state layer.\r\n * @cssprop --m3e-option-selected-ripple-color - The ripple color when the option is selected.\r\n * @cssprop --m3e-option-disabled-color - The text color when the option is disabled.\r\n * @cssprop --m3e-option-disabled-opacity - The opacity level applied to the disabled text color.\r\n * @cssprop --m3e-option-icon-label-space - The spacing between the icon and label.\r\n * @cssprop --m3e-option-padding-start - The left padding of the option content.\r\n * @cssprop --m3e-option-padding-end - The right padding of the option content.\r\n * @cssprop --m3e-option-label-text-font-size - The font size of the option label.\r\n * @cssprop --m3e-option-label-text-font-weight - The font weight of the option label.\r\n * @cssprop --m3e-option-label-text-line-height - The line height of the option label.\r\n * @cssprop --m3e-option-label-text-tracking - The letter spacing of the option label.\r\n * @cssprop --m3e-option-focus-ring-shape - The corner radius of the focus ring.\r\n * @cssprop --m3e-option-icon-size - The size of the option icons.\r\n * @cssprop --m3e-option-shape - Base shape of the option.\r\n * @cssprop --m3e-option-selected-shape - Shape used for a selected option.\r\n * @cssprop --m3e-option-first-child-shape - Shape for the first option in a list.\r\n * @cssprop --m3e-option-last-child-shape - Shape for the last option in a list.\r\n */\r\n@customElement(\"m3e-option\")\r\nexport class M3eOptionElement extends Selected(Disabled(AttachInternals(Role(LitElement, \"option\")))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: none;\r\n      height: var(--m3e-option-container-height, 2.75rem);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) .base {\r\n      color: var(--m3e-option-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-option-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not(:state(-empty))[selected]) .base {\r\n      color: var(--m3e-option-selected-color, ${DesignToken.color.onTertiaryContainer});\r\n      background-color: var(--m3e-option-selected-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-option-selected-container-hover-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-option-selected-container-focus-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([aria-disabled=\"true\"]) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-option-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-option-disabled-opacity, 38%),\r\n        transparent\r\n      );\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      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: var(--m3e-option-shape, ${DesignToken.shape.corner.extraSmall});\r\n      transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)};\r\n    }\r\n    :host([selected]:not(:state(-first))) .base {\r\n      border-top-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host([selected]:not(:state(-last))) .base {\r\n      border-bottom-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:state(-first)) .base {\r\n      border-top-left-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:state(-last)) .base {\r\n      border-bottom-left-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium});\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      flex: 1 1 auto;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      width: 100%;\r\n      overflow: hidden;\r\n      column-gap: var(--m3e-option-icon-label-space, 0.5rem);\r\n      padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem));\r\n      padding-inline-end: var(--m3e-option-padding-end, 0.75rem);\r\n      font-size: var(--m3e-option-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-option-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-option-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-option-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    .focus-ring {\r\n      border-radius: var(--m3e-option-focus-ring-shape, inherit);\r\n    }\r\n    .icon {\r\n      margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem));\r\n      transition: ${unsafeCSS(\r\n        `margin-inline-start ${DesignToken.motion.spring.fastEffects}, width ${DesignToken.motion.spring.fastEffects}`,\r\n      )};\r\n    }\r\n    :host([selected]) .icon {\r\n      margin-inline-start: 0;\r\n      width: var(--m3e-option-icon-size, 1.25rem);\r\n    }\r\n    .icon {\r\n      flex: none;\r\n      width: 0px;\r\n      font-size: var(--m3e-option-icon-size, 1.25rem);\r\n    }\r\n    :host(:state(-empty)) .icon,\r\n    :host(:state(-hide-selection-indicator)) .icon,\r\n    :host(:not([selected])) .check {\r\n      display: none;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: Menu;\r\n        color: MenuText;\r\n      }\r\n      :host([aria-disabled=\"true\"]) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .icon,\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #value?: string;\r\n  /** @private */ #textContent = \"\";\r\n\r\n  /** @internal */ @query(\".focus-ring\") readonly focusRing?: M3eFocusRingElement;\r\n  /** @internal */ @query(\".state-layer\") readonly stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** A string representing the value of the option. */\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  /**\r\n   * The search term to highlight.\r\n   * @default \"\"\r\n   */\r\n  @property() term = \"\";\r\n\r\n  /**\r\n   * The mode in which to highlight a term.\r\n   * @default \"contains\"\r\n   */\r\n  @property({ attribute: \"highlight-mode\" }) highlightMode: TextHighlightMode = \"contains\";\r\n\r\n  /**\r\n   * Whether text highlighting is disabled.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-highlight\", type: Boolean }) disableHighlight = false;\r\n\r\n  /** The textual label of the option. */\r\n  get label() {\r\n    return this.#textContent;\r\n  }\r\n\r\n  /** @internal */\r\n  [typeaheadLabel](): string {\r\n    return this.label;\r\n  }\r\n\r\n  /** Whether the option represents an empty option. */\r\n  get isEmpty() {\r\n    return this.value === \"\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    [this.focusRing, this.stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this.focusRing, this.stateLayer, this._ripple].forEach((x) => x?.attach(this));\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\") && this.selected) {\r\n      const panel = this.closest(\"[role='listbox']\") ?? this.closest(\"m3e-autocomplete\") ?? this.closest(\"m3e-select\");\r\n      if (panel && panel.ariaMultiSelectable !== \"true\" && !panel.hasAttribute(\"multi\")) {\r\n        panel.querySelectorAll(\"m3e-option\").forEach((x) => {\r\n          if (x !== this && x.selected) {\r\n            x.selected = false;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <div class=\"icon\" aria-hidden=\"true\">\r\n          <svg class=\"check\" viewBox=\"0 -960 960 960\">\r\n            <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n          </svg>\r\n        </div>\r\n        <m3e-text-overflow class=\"label\">\r\n          <m3e-text-highlight term=\"${this.term}\" mode=\"${this.highlightMode}\" ?disabled=\"${this.disableHighlight}\">\r\n            <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n          </m3e-text-highlight>\r\n        </m3e-text-overflow>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#textContent = getTextContent(<HTMLSlotElement>e.target);\r\n    setCustomState(this, \"-empty\", this.isEmpty);\r\n\r\n    if (this.selected) {\r\n      this.closest<LitElement>(\"m3e-select\")?.requestUpdate();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-option\": M3eOptionElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * Groups options under a subheading.\r\n *\r\n * @description\r\n * The `m3e-optgroup` component organizes related options within an option list,\r\n * providing visual and semantic grouping through a customizable label. It manages `aria-labelledby`\r\n * associations automatically and applies Material Design 3 typography and spacing conventions to\r\n * the group label. The component maintains proper semantic structure by utilizing the ARIA `group` role,\r\n * ensuring that assistive technologies correctly interpret the hierarchical relationship between the label\r\n * and contained options.\r\n *\r\n * @tag m3e-optgroup\r\n *\r\n * @slot - Renders the options of the group.\r\n * @slot label - Renders the label of the group.\r\n *\r\n * @cssprop --m3e-option-height - The height of the group label container.\r\n * @cssprop --m3e-option-font-size - The font size of the group label.\r\n * @cssprop --m3e-option-font-weight - The font weight of the group label.\r\n * @cssprop --m3e-option-line-height - The line height of the group label.\r\n * @cssprop --m3e-option-tracking - The letter spacing of the group label.\r\n * @cssprop --m3e-option-padding-end - The right padding of the label.\r\n * @cssprop --m3e-option-padding-start - The left padding of the label.\r\n * @cssprop --m3e-option-color - The text color of the group label.\r\n */\r\n@customElement(\"m3e-optgroup\")\r\nexport class M3eOptGroupElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      --_option-padding-start: calc(var(--m3e-option-padding-start, 0.75rem) * 2);\r\n    }\r\n    .label {\r\n      height: var(--m3e-option-height, 3rem);\r\n      font-size: var(--m3e-option-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-option-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-option-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-option-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      padding-inline-end: var(--m3e-option-padding-end, 0.75rem);\r\n      padding-inline-start: var(--m3e-option-padding-start, 0.75rem);\r\n      color: var(--m3e-option-color, ${DesignToken.color.onSurface});\r\n      flex: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #labelId = `m3e-optgroup-label-${M3eOptGroupElement.__nextId++}`;\r\n  /** @private */ #label?: Element;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-text-overflow class=\"label\">\r\n        <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n      </m3e-text-overflow>\r\n      <slot></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleLabelSlotChange(e: Event): void {\r\n    const label = (<HTMLSlotElement>e.target).assignedElements({ flatten: true })[0] ?? undefined;\r\n    if (label === this.#label) return;\r\n\r\n    if (this.#label?.id) {\r\n      removeAriaReferencedId(this, \"aria-labelledby\", this.#label.id);\r\n      if (this.#label.id === this.#labelId) {\r\n        this.#label.id = \"\";\r\n      }\r\n    }\r\n\r\n    this.#label = label;\r\n\r\n    if (this.#label) {\r\n      this.#label.id = this.#label.id || this.#labelId;\r\n      addAriaReferencedId(this, \"aria-labelledby\", this.#label.id);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-optgroup\": M3eOptGroupElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html } from \"lit\";\r\n\r\nimport {\r\n  DesignToken,\r\n  Role,\r\n  customElement,\r\n  MutationController,\r\n  deleteCustomState,\r\n  addCustomState,\r\n  setCustomState,\r\n  hasAssignedNodes,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eFloatingPanelElement } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { M3eOptGroupElement } from \"./OptGroupElement\";\r\nimport { M3eOptionElement } from \"./OptionElement\";\r\nimport { property } from \"lit/decorators.js\";\r\nimport { OptionPanelState } from \"./OptionPanelState\";\r\n\r\n/**\r\n * Presents a list of options on a temporary surface.\r\n *\r\n * @description\r\n * The `m3e-option-panel` component renders a scrollable container for displaying selectable options\r\n * as a Material Design 3 menu surface. It provides dynamic positioning and anchoring to trigger elements,\r\n * automatic viewport boundary detection with intelligent repositioning, and smooth enter/exit animations.\r\n *\r\n * @tag m3e-option-panel\r\n *\r\n * @slot - Renders the contents of the list.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-option-panel-container-shape - Corner radius of the panel container.\r\n * @cssprop --m3e-option-panel-container-min-width - Minimum width of the panel container.\r\n * @cssprop --m3e-option-panel-container-max-width - Maximum width of the panel container.\r\n * @cssprop --m3e-option-panel-container-max-height - Maximum height of the panel container.\r\n * @cssprop --m3e-option-panel-container-padding-block - Vertical padding inside the panel container.\r\n * @cssprop --m3e-option-panel-container-padding-inline - Horizontal padding inside the panel container.\r\n * @cssprop --m3e-option-panel-container-color - Background color of the panel container.\r\n * @cssprop --m3e-option-panel-container-elevation - Box shadow elevation of the panel container.\r\n * @cssprop --m3e-option-panel-gap - Vertical spacing between option items.\r\n * @cssprop --m3e-option-panel-divider-spacing - Vertical spacing around slotted `m3e-divider` elements.\r\n * @cssprop --m3e-option-panel-text-highlight-container-color - Background color used for text highlight matches.\r\n * @cssprop --m3e-option-panel-text-highlight-color - Text color used for text highlight matches.\r\n */\r\n@customElement(\"m3e-option-panel\")\r\nexport class M3eOptionPanelElement extends Role(M3eFloatingPanelElement, \"listbox\") {\r\n  static {\r\n    if (typeof window !== \"undefined\") {\r\n      const lightDomStyle = new CSSStyleSheet();\r\n      lightDomStyle.replaceSync(\r\n        css`\r\n          m3e-option-panel > m3e-divider {\r\n            margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem);\r\n          }\r\n          m3e-option-panel m3e-option[hidden],\r\n          m3e-option-panel m3e-optgroup[hidden] {\r\n            display: none;\r\n          }\r\n        `.toString(),\r\n      );\r\n\r\n      document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];\r\n    }\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    M3eFloatingPanelElement.styles,\r\n    css`\r\n      :host {\r\n        --m3e-floating-panel-container-shape: var(\r\n          --m3e-option-panel-container-shape,\r\n          ${DesignToken.shape.corner.large}\r\n        );\r\n        --m3e-floating-panel-container-min-width: var(--m3e-option-panel-container-min-width, 7rem);\r\n        --m3e-floating-panel-container-max-width: var(--m3e-option-panel-container-max-width, 17.5rem);\r\n        --m3e-floating-panel-container-max-height: var(--m3e-option-panel-container-max-height, 17.5rem);\r\n        --m3e-floating-panel-container-color: var(\r\n          --m3e-option-panel-container-color,\r\n          ${DesignToken.color.surfaceContainer}\r\n        );\r\n        --m3e-floating-panel-container-elevation: var(\r\n          --m3e-option-panel-container-elevation,\r\n          ${DesignToken.elevation.level3}\r\n        );\r\n        --m3e-floating-panel-container-padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem);\r\n        --m3e-floating-panel-container-padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem);\r\n      }\r\n      .base {\r\n        row-gap: var(--m3e-option-panel-gap, 0.125rem);\r\n        --m3e-text-highlight-container-color: var(\r\n          --m3e-option-panel-text-highlight-container-color,\r\n          ${DesignToken.color.tertiaryContainer}\r\n        );\r\n        --m3e-text-highlight-color: var(\r\n          --m3e-option-panel-text-highlight-color,\r\n          ${DesignToken.color.onTertiaryContainer}\r\n        );\r\n        --m3e-focus-ring-outward-offset: 0px;\r\n        --m3e-focus-ring-growth-factor: 1.5;\r\n      }\r\n      .no-data {\r\n        display: flex;\r\n        align-items: center;\r\n        box-sizing: border-box;\r\n        min-height: var(--m3e-option-panel-no-data-container-height, 2.75rem);\r\n        padding: var(--m3e-option-panel-no-data-container-padding, 0.75rem);\r\n        color: var(--m3e-option-panel-no-data-color, ${DesignToken.color.onSurfaceVariant});\r\n        font-size: var(--m3e-option-panel-no-data-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n        font-weight: var(\r\n          --m3e-option-panel-no-data-font-weight,\r\n          ${DesignToken.typescale.standard.label.large.fontWeight}\r\n        );\r\n        line-height: var(\r\n          --m3e-option-panel-no-data-line-height,\r\n          ${DesignToken.typescale.standard.label.large.lineHeight}\r\n        );\r\n        letter-spacing: var(\r\n          --m3e-option-panel-no-data-tracking,\r\n          ${DesignToken.typescale.standard.label.large.tracking}\r\n        );\r\n      }\r\n      .loading {\r\n        display: flex;\r\n        align-items: center;\r\n        box-sizing: border-box;\r\n        min-height: var(--m3e-option-panel-loading-container-height, 2.75rem);\r\n        padding: var(--m3e-option-panel-loading-container-padding, 0.75rem);\r\n        color: var(--m3e-option-panel-loading-color, ${DesignToken.color.onSurfaceVariant});\r\n        font-size: var(--m3e-option-panel-loading-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n        font-weight: var(\r\n          --m3e-option-panel-loading-font-weight,\r\n          ${DesignToken.typescale.standard.label.large.fontWeight}\r\n        );\r\n        line-height: var(\r\n          --m3e-option-panel-loading-line-height,\r\n          ${DesignToken.typescale.standard.label.large.lineHeight}\r\n        );\r\n        letter-spacing: var(\r\n          --m3e-option-panel-loading-tracking,\r\n          ${DesignToken.typescale.standard.label.large.tracking}\r\n        );\r\n      }\r\n      :host(:state(-no-data)) slot:not([name]),\r\n      :host(:state(-loading)) slot:not([name]),\r\n      :host(:state(-loading)) .no-data,\r\n      :host(:not(:state(-no-data))) .no-data,\r\n      :host(:not(:state(-with-no-data))) .no-data,\r\n      :host(:not(:state(-loading))) .loading,\r\n      :host(:not(:state(-with-loading))) .loading {\r\n        display: none;\r\n      }\r\n      :host(:state(-no-data)) .base,\r\n      :host(:state(-loading)) .base {\r\n        overflow-y: hidden;\r\n      }\r\n      :host(:state(-with-loading-indicator)) .loading {\r\n        padding: 0;\r\n        justify-content: center;\r\n      }\r\n    `,\r\n  ];\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new MutationController(this, {\r\n      config: {\r\n        childList: true,\r\n        subtree: true,\r\n      },\r\n      callback: () => this.#handleMutation(),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * The state for which to present content.\r\n   * @default \"content\"\r\n   */\r\n  @property({ reflect: true }) state: OptionPanelState = \"content\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#handleMutation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot></slot>\r\n      <div class=\"no-data\" aria-hidden=\"true\">\r\n        <slot name=\"no-data\" @slotchange=\"${this.#handleNoDataSlotChange}\"></slot>\r\n      </div>\r\n      <div class=\"loading\" aria-hidden=\"true\">\r\n        <slot name=\"loading\" @slotchange=\"${this.#handleLoadingSlotChange}\"> </slot>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleNoDataSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-no-data\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleLoadingSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-loading\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n    setCustomState(\r\n      this,\r\n      \"-with-loading-indicator\",\r\n      this.querySelector(\"m3e-loading-indicator[slot='loading'], m3e-circular-progress-indicator[slot='loading']\") !==\r\n        null,\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #handleMutation(): void {\r\n    const options = this.querySelectorAll(\"m3e-option\");\r\n    let first = false;\r\n    let last: M3eOptionElement | undefined;\r\n\r\n    for (let i = 0; i < options.length; i++) {\r\n      const option = options[i];\r\n      if (option.hidden) {\r\n        deleteCustomState(option, \"-first\");\r\n        deleteCustomState(option, \"-last\");\r\n      } else if (!first && !(option.parentElement instanceof M3eOptGroupElement)) {\r\n        addCustomState(option, \"-first\");\r\n        first = true;\r\n        addCustomState(option, \"-last\");\r\n        last = option;\r\n      } else {\r\n        deleteCustomState(option, \"-first\");\r\n        if (last) {\r\n          deleteCustomState(last, \"-last\");\r\n        }\r\n        addCustomState(option, \"-last\");\r\n        last = option;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-option-panel\": M3eOptionPanelElement;\r\n  }\r\n}\r\n"],"names":["M3eOptionElement","Selected","Disabled","AttachInternals","Role","LitElement","constructor","_M3eOptionElement_value","set","_M3eOptionElement_textContent","term","highlightMode","disableHighlight","value","__classPrivateFieldGet","__classPrivateFieldSet","label","WeakMap","_M3eOptionElement_instances","WeakSet","typeaheadLabel","isEmpty","connectedCallback","focusRing","stateLayer","_ripple","forEach","x","attach","firstUpdated","_changedProperties","update","changedProperties","has","selected","panel","closest","ariaMultiSelectable","hasAttribute","querySelectorAll","render","html","disabled","_M3eOptionElement_handleSlotChange","e","getTextContent","target","setCustomState","requestUpdate","styles","css","DesignToken","color","onSurface","onTertiaryContainer","tertiaryContainer","shape","corner","extraSmall","unsafeCSS","motion","spring","fastEffects","medium","typescale","standard","large","fontSize","fontWeight","lineHeight","tracking","__decorate","query","prototype","property","attribute","type","Boolean","customElement","M3eOptGroupElement","M3eOptGroupElement_1","_M3eOptGroupElement_labelId","__nextId","_M3eOptGroupElement_label","_M3eOptGroupElement_instances","_M3eOptGroupElement_handleLabelSlotChange","assignedElements","flatten","undefined","id","removeAriaReferencedId","addAriaReferencedId","M3eOptionPanelElement","M3eFloatingPanelElement","state","MutationController","config","childList","subtree","callback","_M3eOptionPanelElement_instances","_M3eOptionPanelElement_handleMutation","call","_M3eOptionPanelElement_handleNoDataSlotChange","_M3eOptionPanelElement_handleLoadingSlotChange","hasAssignedNodes","querySelector","options","first","last","i","length","option","hidden","deleteCustomState","parentElement","addCustomState","window","lightDomStyle","CSSStyleSheet","replaceSync","toString","document","adoptedStyleSheets","surfaceContainer","elevation","level3","onSurfaceVariant","reflect"],"mappings":"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"}
+{"version":3,"file":"option.js","sources":["../../src/option/OptionElement.ts","../../src/option/OptGroupElement.ts","../../src/option/OptionPanelElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, 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  Disabled,\r\n  getTextContent,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n  setCustomState,\r\n  TextHighlightMode,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { typeaheadLabel } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * An option that can be selected.\r\n *\r\n * @description\r\n * The `m3e-option` component represents an individual selectable item within an option list,\r\n * adhering to Material Design 3 specifications. It provides visual feedback through state layers and ripple effects,\r\n * supports single and multiple selection modes, and includes comprehensive accessibility features including\r\n * keyboard navigation and focus management. The component automatically manages its visual appearance based on\r\n * selection and disabled states, with configurable styling for interactive and non-interactive variants.\r\n *\r\n * @tag m3e-option\r\n *\r\n * @slot - Renders the label of the option.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr disable-highlight - Whether text highlighting is disabled.\r\n * @attr highlight-mode - The mode in which to highlight a term.\r\n * @attr selected - Whether the element is selected.\r\n * @attr term - The search term to highlight.\r\n * @attr value - A string representing the value of the option.\r\n *\r\n * @cssprop --m3e-option-container-height - The height of the option container.\r\n * @cssprop --m3e-option-color - The text color of the option.\r\n * @cssprop --m3e-option-container-hover-color - The color for the hover state layer.\r\n * @cssprop --m3e-option-container-focus-color - The color for the focus state layer.\r\n * @cssprop --m3e-option-ripple-color - The color of the ripple effect.\r\n * @cssprop --m3e-option-selected-color - The text color when the option is selected.\r\n * @cssprop --m3e-option-selected-container-color - The background color when the option is selected.\r\n * @cssprop --m3e-option-selected-container-hover-color - The hover color for the selected state layer.\r\n * @cssprop --m3e-option-selected-container-focus-color - The focus color for the selected state layer.\r\n * @cssprop --m3e-option-selected-ripple-color - The ripple color when the option is selected.\r\n * @cssprop --m3e-option-disabled-color - The text color when the option is disabled.\r\n * @cssprop --m3e-option-disabled-opacity - The opacity level applied to the disabled text color.\r\n * @cssprop --m3e-option-icon-label-space - The spacing between the icon and label.\r\n * @cssprop --m3e-option-padding-start - The left padding of the option content.\r\n * @cssprop --m3e-option-padding-end - The right padding of the option content.\r\n * @cssprop --m3e-option-label-text-font-size - The font size of the option label.\r\n * @cssprop --m3e-option-label-text-font-weight - The font weight of the option label.\r\n * @cssprop --m3e-option-label-text-line-height - The line height of the option label.\r\n * @cssprop --m3e-option-label-text-tracking - The letter spacing of the option label.\r\n * @cssprop --m3e-option-focus-ring-shape - The corner radius of the focus ring.\r\n * @cssprop --m3e-option-icon-size - The size of the option icons.\r\n * @cssprop --m3e-option-shape - Base shape of the option.\r\n * @cssprop --m3e-option-selected-shape - Shape used for a selected option.\r\n * @cssprop --m3e-option-first-child-shape - Shape for the first option in a list.\r\n * @cssprop --m3e-option-last-child-shape - Shape for the last option in a list.\r\n */\r\n@customElement(\"m3e-option\")\r\nexport class M3eOptionElement extends Selected(Disabled(AttachInternals(Role(LitElement, \"option\")))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: none;\r\n      height: var(--m3e-option-container-height, 2.75rem);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) .base {\r\n      color: var(--m3e-option-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-option-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not(:state(-empty))[selected]) .base {\r\n      color: var(--m3e-option-selected-color, ${DesignToken.color.onTertiaryContainer});\r\n      background-color: var(--m3e-option-selected-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-option-selected-container-hover-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-option-selected-container-focus-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([aria-disabled=\"true\"]) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-option-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-option-disabled-opacity, 38%),\r\n        transparent\r\n      );\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      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: var(--m3e-option-shape, ${DesignToken.shape.corner.extraSmall});\r\n      transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)};\r\n    }\r\n    :host([selected]:not(:state(-first))) .base {\r\n      border-top-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host([selected]:not(:state(-last))) .base {\r\n      border-bottom-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:state(-first)) .base {\r\n      border-top-left-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:state(-last)) .base {\r\n      border-bottom-left-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium});\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      flex: 1 1 auto;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      width: 100%;\r\n      overflow: hidden;\r\n      column-gap: var(--m3e-option-icon-label-space, 0.5rem);\r\n      padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem));\r\n      padding-inline-end: var(--m3e-option-padding-end, 0.75rem);\r\n      font-size: var(--m3e-option-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-option-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-option-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-option-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    .focus-ring {\r\n      border-radius: var(--m3e-option-focus-ring-shape, inherit);\r\n    }\r\n    .icon {\r\n      margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem));\r\n      transition: ${unsafeCSS(\r\n        `margin-inline-start ${DesignToken.motion.spring.fastEffects}, width ${DesignToken.motion.spring.fastEffects}`,\r\n      )};\r\n    }\r\n    :host([selected]) .icon {\r\n      margin-inline-start: 0;\r\n      width: var(--m3e-option-icon-size, 1.25rem);\r\n    }\r\n    .icon {\r\n      flex: none;\r\n      width: 0px;\r\n      font-size: var(--m3e-option-icon-size, 1.25rem);\r\n    }\r\n    :host(:state(-empty)) .icon,\r\n    :host(:state(-hide-selection-indicator)) .icon,\r\n    :host(:not([selected])) .check {\r\n      display: none;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: Menu;\r\n        color: MenuText;\r\n      }\r\n      :host([aria-disabled=\"true\"]) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .icon,\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #value?: string;\r\n  /** @private */ #textContent = \"\";\r\n\r\n  /** @internal */ @query(\".focus-ring\") readonly focusRing?: M3eFocusRingElement;\r\n  /** @internal */ @query(\".state-layer\") readonly stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** A string representing the value of the option. */\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  /**\r\n   * The search term to highlight.\r\n   * @default \"\"\r\n   */\r\n  @property() term = \"\";\r\n\r\n  /**\r\n   * The mode in which to highlight a term.\r\n   * @default \"contains\"\r\n   */\r\n  @property({ attribute: \"highlight-mode\" }) highlightMode: TextHighlightMode = \"contains\";\r\n\r\n  /**\r\n   * Whether text highlighting is disabled.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-highlight\", type: Boolean }) disableHighlight = false;\r\n\r\n  /** The textual label of the option. */\r\n  get label() {\r\n    return this.#textContent;\r\n  }\r\n\r\n  /** @internal */\r\n  [typeaheadLabel](): string {\r\n    return this.label;\r\n  }\r\n\r\n  /** Whether the option represents an empty option. */\r\n  get isEmpty() {\r\n    return this.value === \"\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    [this.focusRing, this.stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this.focusRing, this.stateLayer, this._ripple].forEach((x) => x?.attach(this));\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\") && this.selected) {\r\n      const panel = this.closest(\"[role='listbox']\") ?? this.closest(\"m3e-autocomplete\") ?? this.closest(\"m3e-select\");\r\n      if (panel && panel.ariaMultiSelectable !== \"true\" && !panel.hasAttribute(\"multi\")) {\r\n        panel.querySelectorAll(\"m3e-option\").forEach((x) => {\r\n          if (x !== this && x.selected) {\r\n            x.selected = false;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <div class=\"icon\" aria-hidden=\"true\">\r\n          <svg class=\"check\" viewBox=\"0 -960 960 960\">\r\n            <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n          </svg>\r\n        </div>\r\n        <m3e-text-overflow class=\"label\">\r\n          <m3e-text-highlight term=\"${this.term}\" mode=\"${this.highlightMode}\" ?disabled=\"${this.disableHighlight}\">\r\n            <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n          </m3e-text-highlight>\r\n        </m3e-text-overflow>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#textContent = getTextContent(<HTMLSlotElement>e.target);\r\n    setCustomState(this, \"-empty\", this.isEmpty);\r\n\r\n    if (this.selected) {\r\n      this.closest<LitElement>(\"m3e-select\")?.requestUpdate?.();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-option\": M3eOptionElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * Groups options under a subheading.\r\n *\r\n * @description\r\n * The `m3e-optgroup` component organizes related options within an option list,\r\n * providing visual and semantic grouping through a customizable label. It manages `aria-labelledby`\r\n * associations automatically and applies Material Design 3 typography and spacing conventions to\r\n * the group label. The component maintains proper semantic structure by utilizing the ARIA `group` role,\r\n * ensuring that assistive technologies correctly interpret the hierarchical relationship between the label\r\n * and contained options.\r\n *\r\n * @tag m3e-optgroup\r\n *\r\n * @slot - Renders the options of the group.\r\n * @slot label - Renders the label of the group.\r\n *\r\n * @cssprop --m3e-option-height - The height of the group label container.\r\n * @cssprop --m3e-option-font-size - The font size of the group label.\r\n * @cssprop --m3e-option-font-weight - The font weight of the group label.\r\n * @cssprop --m3e-option-line-height - The line height of the group label.\r\n * @cssprop --m3e-option-tracking - The letter spacing of the group label.\r\n * @cssprop --m3e-option-padding-end - The right padding of the label.\r\n * @cssprop --m3e-option-padding-start - The left padding of the label.\r\n * @cssprop --m3e-option-color - The text color of the group label.\r\n */\r\n@customElement(\"m3e-optgroup\")\r\nexport class M3eOptGroupElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      --_option-padding-start: calc(var(--m3e-option-padding-start, 0.75rem) * 2);\r\n    }\r\n    .label {\r\n      height: var(--m3e-option-height, 3rem);\r\n      font-size: var(--m3e-option-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-option-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-option-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-option-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      padding-inline-end: var(--m3e-option-padding-end, 0.75rem);\r\n      padding-inline-start: var(--m3e-option-padding-start, 0.75rem);\r\n      color: var(--m3e-option-color, ${DesignToken.color.onSurface});\r\n      flex: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #labelId = `m3e-optgroup-label-${M3eOptGroupElement.__nextId++}`;\r\n  /** @private */ #label?: Element;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-text-overflow class=\"label\">\r\n        <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n      </m3e-text-overflow>\r\n      <slot></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleLabelSlotChange(e: Event): void {\r\n    const label = (<HTMLSlotElement>e.target).assignedElements({ flatten: true })[0] ?? undefined;\r\n    if (label === this.#label) return;\r\n\r\n    if (this.#label?.id) {\r\n      removeAriaReferencedId(this, \"aria-labelledby\", this.#label.id);\r\n      if (this.#label.id === this.#labelId) {\r\n        this.#label.id = \"\";\r\n      }\r\n    }\r\n\r\n    this.#label = label;\r\n\r\n    if (this.#label) {\r\n      this.#label.id = this.#label.id || this.#labelId;\r\n      addAriaReferencedId(this, \"aria-labelledby\", this.#label.id);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-optgroup\": M3eOptGroupElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html } from \"lit\";\r\n\r\nimport {\r\n  DesignToken,\r\n  Role,\r\n  customElement,\r\n  MutationController,\r\n  deleteCustomState,\r\n  addCustomState,\r\n  setCustomState,\r\n  hasAssignedNodes,\r\n  registerStyleSheet,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eFloatingPanelElement } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { M3eOptGroupElement } from \"./OptGroupElement\";\r\nimport { M3eOptionElement } from \"./OptionElement\";\r\nimport { property } from \"lit/decorators.js\";\r\nimport { OptionPanelState } from \"./OptionPanelState\";\r\n\r\n/**\r\n * Presents a list of options on a temporary surface.\r\n *\r\n * @description\r\n * The `m3e-option-panel` component renders a scrollable container for displaying selectable options\r\n * as a Material Design 3 menu surface. It provides dynamic positioning and anchoring to trigger elements,\r\n * automatic viewport boundary detection with intelligent repositioning, and smooth enter/exit animations.\r\n *\r\n * @tag m3e-option-panel\r\n *\r\n * @slot - Renders the contents of the list.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-option-panel-container-shape - Corner radius of the panel container.\r\n * @cssprop --m3e-option-panel-container-min-width - Minimum width of the panel container.\r\n * @cssprop --m3e-option-panel-container-max-width - Maximum width of the panel container.\r\n * @cssprop --m3e-option-panel-container-max-height - Maximum height of the panel container.\r\n * @cssprop --m3e-option-panel-container-padding-block - Vertical padding inside the panel container.\r\n * @cssprop --m3e-option-panel-container-padding-inline - Horizontal padding inside the panel container.\r\n * @cssprop --m3e-option-panel-container-color - Background color of the panel container.\r\n * @cssprop --m3e-option-panel-container-elevation - Box shadow elevation of the panel container.\r\n * @cssprop --m3e-option-panel-gap - Vertical spacing between option items.\r\n * @cssprop --m3e-option-panel-divider-spacing - Vertical spacing around slotted `m3e-divider` elements.\r\n * @cssprop --m3e-option-panel-text-highlight-container-color - Background color used for text highlight matches.\r\n * @cssprop --m3e-option-panel-text-highlight-color - Text color used for text highlight matches.\r\n */\r\n@customElement(\"m3e-option-panel\")\r\nexport class M3eOptionPanelElement extends Role(M3eFloatingPanelElement, \"listbox\") {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-option-panel > m3e-divider {\r\n        margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem);\r\n      }\r\n      m3e-option-panel m3e-option[hidden],\r\n      m3e-option-panel m3e-optgroup[hidden] {\r\n        display: none;\r\n      }\r\n    `);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    M3eFloatingPanelElement.styles,\r\n    css`\r\n      :host {\r\n        --m3e-floating-panel-container-shape: var(\r\n          --m3e-option-panel-container-shape,\r\n          ${DesignToken.shape.corner.large}\r\n        );\r\n        --m3e-floating-panel-container-min-width: var(--m3e-option-panel-container-min-width, 7rem);\r\n        --m3e-floating-panel-container-max-width: var(--m3e-option-panel-container-max-width, 17.5rem);\r\n        --m3e-floating-panel-container-max-height: var(--m3e-option-panel-container-max-height, 17.5rem);\r\n        --m3e-floating-panel-container-color: var(\r\n          --m3e-option-panel-container-color,\r\n          ${DesignToken.color.surfaceContainer}\r\n        );\r\n        --m3e-floating-panel-container-elevation: var(\r\n          --m3e-option-panel-container-elevation,\r\n          ${DesignToken.elevation.level3}\r\n        );\r\n        --m3e-floating-panel-container-padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem);\r\n        --m3e-floating-panel-container-padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem);\r\n      }\r\n      .base {\r\n        row-gap: var(--m3e-option-panel-gap, 0.125rem);\r\n        --m3e-text-highlight-container-color: var(\r\n          --m3e-option-panel-text-highlight-container-color,\r\n          ${DesignToken.color.tertiaryContainer}\r\n        );\r\n        --m3e-text-highlight-color: var(\r\n          --m3e-option-panel-text-highlight-color,\r\n          ${DesignToken.color.onTertiaryContainer}\r\n        );\r\n        --m3e-focus-ring-outward-offset: 0px;\r\n        --m3e-focus-ring-growth-factor: 1.5;\r\n      }\r\n      .no-data {\r\n        display: flex;\r\n        align-items: center;\r\n        box-sizing: border-box;\r\n        min-height: var(--m3e-option-panel-no-data-container-height, 2.75rem);\r\n        padding: var(--m3e-option-panel-no-data-container-padding, 0.75rem);\r\n        color: var(--m3e-option-panel-no-data-color, ${DesignToken.color.onSurfaceVariant});\r\n        font-size: var(--m3e-option-panel-no-data-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n        font-weight: var(\r\n          --m3e-option-panel-no-data-font-weight,\r\n          ${DesignToken.typescale.standard.label.large.fontWeight}\r\n        );\r\n        line-height: var(\r\n          --m3e-option-panel-no-data-line-height,\r\n          ${DesignToken.typescale.standard.label.large.lineHeight}\r\n        );\r\n        letter-spacing: var(\r\n          --m3e-option-panel-no-data-tracking,\r\n          ${DesignToken.typescale.standard.label.large.tracking}\r\n        );\r\n      }\r\n      .loading {\r\n        display: flex;\r\n        align-items: center;\r\n        box-sizing: border-box;\r\n        min-height: var(--m3e-option-panel-loading-container-height, 2.75rem);\r\n        padding: var(--m3e-option-panel-loading-container-padding, 0.75rem);\r\n        color: var(--m3e-option-panel-loading-color, ${DesignToken.color.onSurfaceVariant});\r\n        font-size: var(--m3e-option-panel-loading-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n        font-weight: var(\r\n          --m3e-option-panel-loading-font-weight,\r\n          ${DesignToken.typescale.standard.label.large.fontWeight}\r\n        );\r\n        line-height: var(\r\n          --m3e-option-panel-loading-line-height,\r\n          ${DesignToken.typescale.standard.label.large.lineHeight}\r\n        );\r\n        letter-spacing: var(\r\n          --m3e-option-panel-loading-tracking,\r\n          ${DesignToken.typescale.standard.label.large.tracking}\r\n        );\r\n      }\r\n      :host(:state(-no-data)) slot:not([name]),\r\n      :host(:state(-loading)) slot:not([name]),\r\n      :host(:state(-loading)) .no-data,\r\n      :host(:not(:state(-no-data))) .no-data,\r\n      :host(:not(:state(-with-no-data))) .no-data,\r\n      :host(:not(:state(-loading))) .loading,\r\n      :host(:not(:state(-with-loading))) .loading {\r\n        display: none;\r\n      }\r\n      :host(:state(-no-data)) .base,\r\n      :host(:state(-loading)) .base {\r\n        overflow-y: hidden;\r\n      }\r\n      :host(:state(-with-loading-indicator)) .loading {\r\n        padding: 0;\r\n        justify-content: center;\r\n      }\r\n    `,\r\n  ];\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new MutationController(this, {\r\n      config: {\r\n        childList: true,\r\n        subtree: true,\r\n      },\r\n      callback: () => this.#handleMutation(),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * The state for which to present content.\r\n   * @default \"content\"\r\n   */\r\n  @property({ reflect: true }) state: OptionPanelState = \"content\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#handleMutation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot></slot>\r\n      <div class=\"no-data\" aria-hidden=\"true\">\r\n        <slot name=\"no-data\" @slotchange=\"${this.#handleNoDataSlotChange}\"></slot>\r\n      </div>\r\n      <div class=\"loading\" aria-hidden=\"true\">\r\n        <slot name=\"loading\" @slotchange=\"${this.#handleLoadingSlotChange}\"> </slot>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleNoDataSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-no-data\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleLoadingSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-loading\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n    setCustomState(\r\n      this,\r\n      \"-with-loading-indicator\",\r\n      this.querySelector(\"m3e-loading-indicator[slot='loading'], m3e-circular-progress-indicator[slot='loading']\") !==\r\n        null,\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #handleMutation(): void {\r\n    const options = this.querySelectorAll(\"m3e-option\");\r\n    let first = false;\r\n    let last: M3eOptionElement | undefined;\r\n\r\n    for (let i = 0; i < options.length; i++) {\r\n      const option = options[i];\r\n      if (option.hidden) {\r\n        deleteCustomState(option, \"-first\");\r\n        deleteCustomState(option, \"-last\");\r\n      } else if (!first && !(option.parentElement instanceof M3eOptGroupElement)) {\r\n        addCustomState(option, \"-first\");\r\n        first = true;\r\n        addCustomState(option, \"-last\");\r\n        last = option;\r\n      } else {\r\n        deleteCustomState(option, \"-first\");\r\n        if (last) {\r\n          deleteCustomState(last, \"-last\");\r\n        }\r\n        addCustomState(option, \"-last\");\r\n        last = option;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-option-panel\": M3eOptionPanelElement;\r\n  }\r\n}\r\n"],"names":["M3eOptionElement","Selected","Disabled","AttachInternals","Role","LitElement","constructor","_M3eOptionElement_value","set","_M3eOptionElement_textContent","term","highlightMode","disableHighlight","value","__classPrivateFieldGet","__classPrivateFieldSet","label","WeakMap","_M3eOptionElement_instances","WeakSet","typeaheadLabel","isEmpty","connectedCallback","focusRing","stateLayer","_ripple","forEach","x","attach","firstUpdated","_changedProperties","update","changedProperties","has","selected","panel","closest","ariaMultiSelectable","hasAttribute","querySelectorAll","render","html","disabled","_M3eOptionElement_handleSlotChange","e","getTextContent","target","setCustomState","requestUpdate","styles","css","DesignToken","color","onSurface","onTertiaryContainer","tertiaryContainer","shape","corner","extraSmall","unsafeCSS","motion","spring","fastEffects","medium","typescale","standard","large","fontSize","fontWeight","lineHeight","tracking","__decorate","query","prototype","property","attribute","type","Boolean","customElement","M3eOptGroupElement","M3eOptGroupElement_1","_M3eOptGroupElement_labelId","__nextId","_M3eOptGroupElement_label","_M3eOptGroupElement_instances","_M3eOptGroupElement_handleLabelSlotChange","assignedElements","flatten","undefined","id","removeAriaReferencedId","addAriaReferencedId","M3eOptionPanelElement","M3eFloatingPanelElement","state","MutationController","config","childList","subtree","callback","_M3eOptionPanelElement_instances","_M3eOptionPanelElement_handleMutation","call","_M3eOptionPanelElement_handleNoDataSlotChange","_M3eOptionPanelElement_handleLoadingSlotChange","hasAssignedNodes","querySelector","options","first","last","i","length","option","hidden","deleteCustomState","parentElement","addCustomState","registerStyleSheet","surfaceContainer","elevation","level3","onSurfaceVariant","reflect"],"mappings":"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"}

package/dist/option.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as o}from"tslib";import{LitElement as a,html as i,unsafeCSS as n,css as r}from"lit";import{query as l,property as s}from"lit/decorators.js";import{Selected as d,Disabled as c,AttachInternals as p,Role as h,getTextContent as m,setCustomState as g,DesignToken as f,customElement as v,MutationController as b,hasAssignedNodes as u,deleteCustomState as y,addCustomState as $}from"@m3e/web/core";import{typeaheadLabel as w,removeAriaReferencedId as x,addAriaReferencedId as k}from"@m3e/web/core/a11y";import{M3eFloatingPanelElement as S}from"@m3e/web/core/anchoring";var z,C,M,W;let E=class extends(d(c(p(h(a,"option"))))){constructor(){super(...arguments),z.add(this),C.set(this,void 0),M.set(this,""),this.term="",this.highlightMode="contains",this.disableHighlight=!1}get value(){return e(this,C,"f")??e(this,M,"f")}set value(e){t(this,C,e,"f")}get label(){return e(this,M,"f")}[(C=new WeakMap,M=new WeakMap,z=new WeakSet,w)](){return this.label}get isEmpty(){return""===this.value}connectedCallback(){super.connectedCallback(),[this.focusRing,this.stateLayer,this._ripple].forEach(e=>e?.attach(this))}firstUpdated(e){super.firstUpdated(e),[this.focusRing,this.stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){if(super.update(e),e.has("selected")&&this.selected){const e=this.closest("[role='listbox']")??this.closest("m3e-autocomplete")??this.closest("m3e-select");e&&"true"!==e.ariaMultiSelectable&&!e.hasAttribute("multi")&&e.querySelectorAll("m3e-option").forEach(e=>{e!==this&&e.selected&&(e.selected=!1)})}}render(){return i`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg></div><m3e-text-overflow class="label"><m3e-text-highlight term="${this.term}" mode="${this.highlightMode}" ?disabled="${this.disableHighlight}"><slot @slotchange="${e(this,z,"m",W)}"></slot></m3e-text-highlight></m3e-text-overflow></div></div>`}};var _,H,T,q,L;W=function(e){t(this,M,m(e.target),"f"),g(this,"-empty",this.isEmpty),this.selected&&this.closest("m3e-select")?.requestUpdate()},E.styles=r`:host { display: block; outline: none; user-select: none; flex: none; height: var(--m3e-option-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) .base { color: var(--m3e-option-color, ${f.color.onSurface}); --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${f.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${f.color.onSurface}); --m3e-ripple-color: var(--m3e-option-ripple-color, ${f.color.onSurface}); } :host(:not([aria-disabled="true"]):not(:state(-empty))[selected]) .base { color: var(--m3e-option-selected-color, ${f.color.onTertiaryContainer}); background-color: var(--m3e-option-selected-container-color, ${f.color.tertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-option-selected-container-hover-color, ${f.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-option-selected-container-focus-color, ${f.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${f.color.onTertiaryContainer}); } :host(:not([aria-disabled="true"])) { cursor: pointer; } :host([aria-disabled="true"]) .base { color: color-mix( in srgb, var(--m3e-option-disabled-color, ${f.color.onSurface}) var(--m3e-option-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-option-shape, ${f.shape.corner.extraSmall}); transition: ${n(`border-radius ${f.motion.spring.fastEffects}`)}; } :host([selected]:not(:state(-first))) .base { border-top-left-radius: var(--m3e-option-selected-shape, ${f.shape.corner.medium}); border-top-right-radius: var(--m3e-option-selected-shape, ${f.shape.corner.medium}); } :host([selected]:not(:state(-last))) .base { border-bottom-left-radius: var(--m3e-option-selected-shape, ${f.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-selected-shape, ${f.shape.corner.medium}); } :host(:state(-first)) .base { border-top-left-radius: var(--m3e-option-first-child-shape, ${f.shape.corner.medium}); border-top-right-radius: var(--m3e-option-first-child-shape, ${f.shape.corner.medium}); } :host(:state(-last)) .base { border-bottom-left-radius: var(--m3e-option-last-child-shape, ${f.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-last-child-shape, ${f.shape.corner.medium}); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; width: 100%; overflow: hidden; column-gap: var(--m3e-option-icon-label-space, 0.5rem); padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem)); padding-inline-end: var(--m3e-option-padding-end, 0.75rem); font-size: var(--m3e-option-label-text-font-size, ${f.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-option-label-text-font-weight, ${f.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-option-label-text-line-height, ${f.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-option-label-text-tracking, ${f.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-option-focus-ring-shape, inherit); } .icon { margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem)); transition: ${n(`margin-inline-start ${f.motion.spring.fastEffects}, width ${f.motion.spring.fastEffects}`)}; } :host([selected]) .icon { margin-inline-start: 0; width: var(--m3e-option-icon-size, 1.25rem); } .icon { flex: none; width: 0px; font-size: var(--m3e-option-icon-size, 1.25rem); } :host(:state(-empty)) .icon, :host(:state(-hide-selection-indicator)) .icon, :host(:not([selected])) .check { display: none; } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host([aria-disabled="true"]) .base { color: GrayText; } } @media (prefers-reduced-motion) { .icon, .base { transition: none; } }`,o([l(".focus-ring")],E.prototype,"focusRing",void 0),o([l(".state-layer")],E.prototype,"stateLayer",void 0),o([l(".ripple")],E.prototype,"_ripple",void 0),o([s()],E.prototype,"value",null),o([s()],E.prototype,"term",void 0),o([s({attribute:"highlight-mode"})],E.prototype,"highlightMode",void 0),o([s({attribute:"disable-highlight",type:Boolean})],E.prototype,"disableHighlight",void 0),E=o([v("m3e-option")],E);let A=L=class extends(h(a,"group")){constructor(){super(...arguments),_.add(this),H.set(this,"m3e-optgroup-label-"+L.__nextId++),T.set(this,void 0)}render(){return i`<m3e-text-overflow class="label"><slot name="label" @slotchange="${e(this,_,"m",q)}"></slot></m3e-text-overflow><slot></slot>`}};var R,U,j,B;H=new WeakMap,T=new WeakMap,_=new WeakSet,q=function(o){const a=o.target.assignedElements({flatten:!0})[0]??void 0;a!==e(this,T,"f")&&(e(this,T,"f")?.id&&(x(this,"aria-labelledby",e(this,T,"f").id),e(this,T,"f").id===e(this,H,"f")&&(e(this,T,"f").id="")),t(this,T,a,"f"),e(this,T,"f")&&(e(this,T,"f").id=e(this,T,"f").id||e(this,H,"f"),k(this,"aria-labelledby",e(this,T,"f").id)))},A.styles=r`:host { display: block; --_option-padding-start: calc(var(--m3e-option-padding-start, 0.75rem) * 2); } .label { height: var(--m3e-option-height, 3rem); font-size: var(--m3e-option-font-size, ${f.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-option-font-weight, ${f.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-option-line-height, ${f.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-option-tracking, ${f.typescale.standard.label.large.tracking}); padding-inline-end: var(--m3e-option-padding-end, 0.75rem); padding-inline-start: var(--m3e-option-padding-start, 0.75rem); color: var(--m3e-option-color, ${f.color.onSurface}); flex: none; }`,A.__nextId=0,A=L=o([v("m3e-optgroup")],A);let I=class extends(h(S,"listbox")){constructor(){super(),R.add(this),this.state="content",new b(this,{config:{childList:!0,subtree:!0},callback:()=>e(this,R,"m",B).call(this)})}connectedCallback(){super.connectedCallback(),e(this,R,"m",B).call(this)}render(){return i`<div class="base"><slot></slot><div class="no-data" aria-hidden="true"><slot name="no-data" @slotchange="${e(this,R,"m",U)}"></slot></div><div class="loading" aria-hidden="true"><slot name="loading" @slotchange="${e(this,R,"m",j)}"></slot></div></div>`}};R=new WeakSet,U=function(e){g(this,"-with-no-data",u(e.target))},j=function(e){g(this,"-with-loading",u(e.target)),g(this,"-with-loading-indicator",null!==this.querySelector("m3e-loading-indicator[slot='loading'], m3e-circular-progress-indicator[slot='loading']"))},B=function(){const e=this.querySelectorAll("m3e-option");let t,o=!1;for(let a=0;a<e.length;a++){const i=e[a];i.hidden?(y(i,"-first"),y(i,"-last")):o||i.parentElement instanceof A?(y(i,"-first"),t&&y(t,"-last"),$(i,"-last"),t=i):($(i,"-first"),o=!0,$(i,"-last"),t=i)}},(()=>{if("undefined"!=typeof window){const e=new CSSStyleSheet;e.replaceSync(r`m3e-option-panel > m3e-divider { margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem); } m3e-option-panel m3e-option[hidden], m3e-option-panel m3e-optgroup[hidden] { display: none; }`.toString()),document.adoptedStyleSheets=[...document.adoptedStyleSheets,e]}})(),I.styles=[S.styles,r`:host { --m3e-floating-panel-container-shape: var( --m3e-option-panel-container-shape, ${f.shape.corner.large} ); --m3e-floating-panel-container-min-width: var(--m3e-option-panel-container-min-width, 7rem); --m3e-floating-panel-container-max-width: var(--m3e-option-panel-container-max-width, 17.5rem); --m3e-floating-panel-container-max-height: var(--m3e-option-panel-container-max-height, 17.5rem); --m3e-floating-panel-container-color: var( --m3e-option-panel-container-color, ${f.color.surfaceContainer} ); --m3e-floating-panel-container-elevation: var( --m3e-option-panel-container-elevation, ${f.elevation.level3} ); --m3e-floating-panel-container-padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --m3e-floating-panel-container-padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); } .base { row-gap: var(--m3e-option-panel-gap, 0.125rem); --m3e-text-highlight-container-color: var( --m3e-option-panel-text-highlight-container-color, ${f.color.tertiaryContainer} ); --m3e-text-highlight-color: var( --m3e-option-panel-text-highlight-color, ${f.color.onTertiaryContainer} ); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } .no-data { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-no-data-container-height, 2.75rem); padding: var(--m3e-option-panel-no-data-container-padding, 0.75rem); color: var(--m3e-option-panel-no-data-color, ${f.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-no-data-font-size, ${f.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-no-data-font-weight, ${f.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-no-data-line-height, ${f.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-no-data-tracking, ${f.typescale.standard.label.large.tracking} ); } .loading { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-loading-container-height, 2.75rem); padding: var(--m3e-option-panel-loading-container-padding, 0.75rem); color: var(--m3e-option-panel-loading-color, ${f.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-loading-font-size, ${f.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-loading-font-weight, ${f.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-loading-line-height, ${f.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-loading-tracking, ${f.typescale.standard.label.large.tracking} ); } :host(:state(-no-data)) slot:not([name]), :host(:state(-loading)) slot:not([name]), :host(:state(-loading)) .no-data, :host(:not(:state(-no-data))) .no-data, :host(:not(:state(-with-no-data))) .no-data, :host(:not(:state(-loading))) .loading, :host(:not(:state(-with-loading))) .loading { display: none; } :host(:state(-no-data)) .base, :host(:state(-loading)) .base { overflow-y: hidden; } :host(:state(-with-loading-indicator)) .loading { padding: 0; justify-content: center; }`],o([s({reflect:!0})],I.prototype,"state",void 0),I=o([v("m3e-option-panel")],I);export{A as M3eOptGroupElement,E as M3eOptionElement,I as M3eOptionPanelElement};
+import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as o}from"tslib";import{LitElement as a,html as i,unsafeCSS as n,css as r}from"lit";import{query as l,property as s}from"lit/decorators.js";import{Selected as d,Disabled as c,AttachInternals as p,Role as h,getTextContent as m,setCustomState as g,DesignToken as f,customElement as v,MutationController as b,hasAssignedNodes as u,deleteCustomState as y,addCustomState as $,registerStyleSheet as x}from"@m3e/web/core";import{typeaheadLabel as w,removeAriaReferencedId as k,addAriaReferencedId as S}from"@m3e/web/core/a11y";import{M3eFloatingPanelElement as z}from"@m3e/web/core/anchoring";var C,M,W,E;let _=class extends(d(c(p(h(a,"option"))))){constructor(){super(...arguments),C.add(this),M.set(this,void 0),W.set(this,""),this.term="",this.highlightMode="contains",this.disableHighlight=!1}get value(){return e(this,M,"f")??e(this,W,"f")}set value(e){t(this,M,e,"f")}get label(){return e(this,W,"f")}[(M=new WeakMap,W=new WeakMap,C=new WeakSet,w)](){return this.label}get isEmpty(){return""===this.value}connectedCallback(){super.connectedCallback(),[this.focusRing,this.stateLayer,this._ripple].forEach(e=>e?.attach(this))}firstUpdated(e){super.firstUpdated(e),[this.focusRing,this.stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){if(super.update(e),e.has("selected")&&this.selected){const e=this.closest("[role='listbox']")??this.closest("m3e-autocomplete")??this.closest("m3e-select");e&&"true"!==e.ariaMultiSelectable&&!e.hasAttribute("multi")&&e.querySelectorAll("m3e-option").forEach(e=>{e!==this&&e.selected&&(e.selected=!1)})}}render(){return i`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg></div><m3e-text-overflow class="label"><m3e-text-highlight term="${this.term}" mode="${this.highlightMode}" ?disabled="${this.disableHighlight}"><slot @slotchange="${e(this,C,"m",E)}"></slot></m3e-text-highlight></m3e-text-overflow></div></div>`}};var H,T,q,L,A;E=function(e){t(this,W,m(e.target),"f"),g(this,"-empty",this.isEmpty),this.selected&&this.closest("m3e-select")?.requestUpdate?.()},_.styles=r`:host { display: block; outline: none; user-select: none; flex: none; height: var(--m3e-option-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) .base { color: var(--m3e-option-color, ${f.color.onSurface}); --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${f.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${f.color.onSurface}); --m3e-ripple-color: var(--m3e-option-ripple-color, ${f.color.onSurface}); } :host(:not([aria-disabled="true"]):not(:state(-empty))[selected]) .base { color: var(--m3e-option-selected-color, ${f.color.onTertiaryContainer}); background-color: var(--m3e-option-selected-container-color, ${f.color.tertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-option-selected-container-hover-color, ${f.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-option-selected-container-focus-color, ${f.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${f.color.onTertiaryContainer}); } :host(:not([aria-disabled="true"])) { cursor: pointer; } :host([aria-disabled="true"]) .base { color: color-mix( in srgb, var(--m3e-option-disabled-color, ${f.color.onSurface}) var(--m3e-option-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-option-shape, ${f.shape.corner.extraSmall}); transition: ${n(`border-radius ${f.motion.spring.fastEffects}`)}; } :host([selected]:not(:state(-first))) .base { border-top-left-radius: var(--m3e-option-selected-shape, ${f.shape.corner.medium}); border-top-right-radius: var(--m3e-option-selected-shape, ${f.shape.corner.medium}); } :host([selected]:not(:state(-last))) .base { border-bottom-left-radius: var(--m3e-option-selected-shape, ${f.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-selected-shape, ${f.shape.corner.medium}); } :host(:state(-first)) .base { border-top-left-radius: var(--m3e-option-first-child-shape, ${f.shape.corner.medium}); border-top-right-radius: var(--m3e-option-first-child-shape, ${f.shape.corner.medium}); } :host(:state(-last)) .base { border-bottom-left-radius: var(--m3e-option-last-child-shape, ${f.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-last-child-shape, ${f.shape.corner.medium}); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; width: 100%; overflow: hidden; column-gap: var(--m3e-option-icon-label-space, 0.5rem); padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem)); padding-inline-end: var(--m3e-option-padding-end, 0.75rem); font-size: var(--m3e-option-label-text-font-size, ${f.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-option-label-text-font-weight, ${f.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-option-label-text-line-height, ${f.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-option-label-text-tracking, ${f.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-option-focus-ring-shape, inherit); } .icon { margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem)); transition: ${n(`margin-inline-start ${f.motion.spring.fastEffects}, width ${f.motion.spring.fastEffects}`)}; } :host([selected]) .icon { margin-inline-start: 0; width: var(--m3e-option-icon-size, 1.25rem); } .icon { flex: none; width: 0px; font-size: var(--m3e-option-icon-size, 1.25rem); } :host(:state(-empty)) .icon, :host(:state(-hide-selection-indicator)) .icon, :host(:not([selected])) .check { display: none; } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host([aria-disabled="true"]) .base { color: GrayText; } } @media (prefers-reduced-motion) { .icon, .base { transition: none; } }`,o([l(".focus-ring")],_.prototype,"focusRing",void 0),o([l(".state-layer")],_.prototype,"stateLayer",void 0),o([l(".ripple")],_.prototype,"_ripple",void 0),o([s()],_.prototype,"value",null),o([s()],_.prototype,"term",void 0),o([s({attribute:"highlight-mode"})],_.prototype,"highlightMode",void 0),o([s({attribute:"disable-highlight",type:Boolean})],_.prototype,"disableHighlight",void 0),_=o([v("m3e-option")],_);let R=A=class extends(h(a,"group")){constructor(){super(...arguments),H.add(this),T.set(this,"m3e-optgroup-label-"+A.__nextId++),q.set(this,void 0)}render(){return i`<m3e-text-overflow class="label"><slot name="label" @slotchange="${e(this,H,"m",L)}"></slot></m3e-text-overflow><slot></slot>`}};var U,j,B,I;T=new WeakMap,q=new WeakMap,H=new WeakSet,L=function(o){const a=o.target.assignedElements({flatten:!0})[0]??void 0;a!==e(this,q,"f")&&(e(this,q,"f")?.id&&(k(this,"aria-labelledby",e(this,q,"f").id),e(this,q,"f").id===e(this,T,"f")&&(e(this,q,"f").id="")),t(this,q,a,"f"),e(this,q,"f")&&(e(this,q,"f").id=e(this,q,"f").id||e(this,T,"f"),S(this,"aria-labelledby",e(this,q,"f").id)))},R.styles=r`:host { display: block; --_option-padding-start: calc(var(--m3e-option-padding-start, 0.75rem) * 2); } .label { height: var(--m3e-option-height, 3rem); font-size: var(--m3e-option-font-size, ${f.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-option-font-weight, ${f.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-option-line-height, ${f.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-option-tracking, ${f.typescale.standard.label.large.tracking}); padding-inline-end: var(--m3e-option-padding-end, 0.75rem); padding-inline-start: var(--m3e-option-padding-start, 0.75rem); color: var(--m3e-option-color, ${f.color.onSurface}); flex: none; }`,R.__nextId=0,R=A=o([v("m3e-optgroup")],R);let V=class extends(h(z,"listbox")){constructor(){super(),U.add(this),this.state="content",new b(this,{config:{childList:!0,subtree:!0},callback:()=>e(this,U,"m",I).call(this)})}connectedCallback(){super.connectedCallback(),e(this,U,"m",I).call(this)}render(){return i`<div class="base"><slot></slot><div class="no-data" aria-hidden="true"><slot name="no-data" @slotchange="${e(this,U,"m",j)}"></slot></div><div class="loading" aria-hidden="true"><slot name="loading" @slotchange="${e(this,U,"m",B)}"></slot></div></div>`}};U=new WeakSet,j=function(e){g(this,"-with-no-data",u(e.target))},B=function(e){g(this,"-with-loading",u(e.target)),g(this,"-with-loading-indicator",null!==this.querySelector("m3e-loading-indicator[slot='loading'], m3e-circular-progress-indicator[slot='loading']"))},I=function(){const e=this.querySelectorAll("m3e-option");let t,o=!1;for(let a=0;a<e.length;a++){const i=e[a];i.hidden?(y(i,"-first"),y(i,"-last")):o||i.parentElement instanceof R?(y(i,"-first"),t&&y(t,"-last"),$(i,"-last"),t=i):($(i,"-first"),o=!0,$(i,"-last"),t=i)}},x(r`m3e-option-panel > m3e-divider { margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem); } m3e-option-panel m3e-option[hidden], m3e-option-panel m3e-optgroup[hidden] { display: none; }`),V.styles=[z.styles,r`:host { --m3e-floating-panel-container-shape: var( --m3e-option-panel-container-shape, ${f.shape.corner.large} ); --m3e-floating-panel-container-min-width: var(--m3e-option-panel-container-min-width, 7rem); --m3e-floating-panel-container-max-width: var(--m3e-option-panel-container-max-width, 17.5rem); --m3e-floating-panel-container-max-height: var(--m3e-option-panel-container-max-height, 17.5rem); --m3e-floating-panel-container-color: var( --m3e-option-panel-container-color, ${f.color.surfaceContainer} ); --m3e-floating-panel-container-elevation: var( --m3e-option-panel-container-elevation, ${f.elevation.level3} ); --m3e-floating-panel-container-padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --m3e-floating-panel-container-padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); } .base { row-gap: var(--m3e-option-panel-gap, 0.125rem); --m3e-text-highlight-container-color: var( --m3e-option-panel-text-highlight-container-color, ${f.color.tertiaryContainer} ); --m3e-text-highlight-color: var( --m3e-option-panel-text-highlight-color, ${f.color.onTertiaryContainer} ); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } .no-data { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-no-data-container-height, 2.75rem); padding: var(--m3e-option-panel-no-data-container-padding, 0.75rem); color: var(--m3e-option-panel-no-data-color, ${f.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-no-data-font-size, ${f.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-no-data-font-weight, ${f.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-no-data-line-height, ${f.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-no-data-tracking, ${f.typescale.standard.label.large.tracking} ); } .loading { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-loading-container-height, 2.75rem); padding: var(--m3e-option-panel-loading-container-padding, 0.75rem); color: var(--m3e-option-panel-loading-color, ${f.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-loading-font-size, ${f.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-loading-font-weight, ${f.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-loading-line-height, ${f.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-loading-tracking, ${f.typescale.standard.label.large.tracking} ); } :host(:state(-no-data)) slot:not([name]), :host(:state(-loading)) slot:not([name]), :host(:state(-loading)) .no-data, :host(:not(:state(-no-data))) .no-data, :host(:not(:state(-with-no-data))) .no-data, :host(:not(:state(-loading))) .loading, :host(:not(:state(-with-loading))) .loading { display: none; } :host(:state(-no-data)) .base, :host(:state(-loading)) .base { overflow-y: hidden; } :host(:state(-with-loading-indicator)) .loading { padding: 0; justify-content: center; }`],o([s({reflect:!0})],V.prototype,"state",void 0),V=o([v("m3e-option-panel")],V);export{R as M3eOptGroupElement,_ as M3eOptionElement,V as M3eOptionPanelElement};
 //# sourceMappingURL=option.min.js.map

package/dist/option.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"option.min.js","sources":["../../src/option/OptionElement.ts","../../src/option/OptGroupElement.ts","../../src/option/OptionPanelElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, 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  Disabled,\r\n  getTextContent,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n  setCustomState,\r\n  TextHighlightMode,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { typeaheadLabel } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * An option that can be selected.\r\n *\r\n * @description\r\n * The `m3e-option` component represents an individual selectable item within an option list,\r\n * adhering to Material Design 3 specifications. It provides visual feedback through state layers and ripple effects,\r\n * supports single and multiple selection modes, and includes comprehensive accessibility features including\r\n * keyboard navigation and focus management. The component automatically manages its visual appearance based on\r\n * selection and disabled states, with configurable styling for interactive and non-interactive variants.\r\n *\r\n * @tag m3e-option\r\n *\r\n * @slot - Renders the label of the option.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr disable-highlight - Whether text highlighting is disabled.\r\n * @attr highlight-mode - The mode in which to highlight a term.\r\n * @attr selected - Whether the element is selected.\r\n * @attr term - The search term to highlight.\r\n * @attr value - A string representing the value of the option.\r\n *\r\n * @cssprop --m3e-option-container-height - The height of the option container.\r\n * @cssprop --m3e-option-color - The text color of the option.\r\n * @cssprop --m3e-option-container-hover-color - The color for the hover state layer.\r\n * @cssprop --m3e-option-container-focus-color - The color for the focus state layer.\r\n * @cssprop --m3e-option-ripple-color - The color of the ripple effect.\r\n * @cssprop --m3e-option-selected-color - The text color when the option is selected.\r\n * @cssprop --m3e-option-selected-container-color - The background color when the option is selected.\r\n * @cssprop --m3e-option-selected-container-hover-color - The hover color for the selected state layer.\r\n * @cssprop --m3e-option-selected-container-focus-color - The focus color for the selected state layer.\r\n * @cssprop --m3e-option-selected-ripple-color - The ripple color when the option is selected.\r\n * @cssprop --m3e-option-disabled-color - The text color when the option is disabled.\r\n * @cssprop --m3e-option-disabled-opacity - The opacity level applied to the disabled text color.\r\n * @cssprop --m3e-option-icon-label-space - The spacing between the icon and label.\r\n * @cssprop --m3e-option-padding-start - The left padding of the option content.\r\n * @cssprop --m3e-option-padding-end - The right padding of the option content.\r\n * @cssprop --m3e-option-label-text-font-size - The font size of the option label.\r\n * @cssprop --m3e-option-label-text-font-weight - The font weight of the option label.\r\n * @cssprop --m3e-option-label-text-line-height - The line height of the option label.\r\n * @cssprop --m3e-option-label-text-tracking - The letter spacing of the option label.\r\n * @cssprop --m3e-option-focus-ring-shape - The corner radius of the focus ring.\r\n * @cssprop --m3e-option-icon-size - The size of the option icons.\r\n * @cssprop --m3e-option-shape - Base shape of the option.\r\n * @cssprop --m3e-option-selected-shape - Shape used for a selected option.\r\n * @cssprop --m3e-option-first-child-shape - Shape for the first option in a list.\r\n * @cssprop --m3e-option-last-child-shape - Shape for the last option in a list.\r\n */\r\n@customElement(\"m3e-option\")\r\nexport class M3eOptionElement extends Selected(Disabled(AttachInternals(Role(LitElement, \"option\")))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: none;\r\n      height: var(--m3e-option-container-height, 2.75rem);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) .base {\r\n      color: var(--m3e-option-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-option-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not(:state(-empty))[selected]) .base {\r\n      color: var(--m3e-option-selected-color, ${DesignToken.color.onTertiaryContainer});\r\n      background-color: var(--m3e-option-selected-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-option-selected-container-hover-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-option-selected-container-focus-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([aria-disabled=\"true\"]) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-option-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-option-disabled-opacity, 38%),\r\n        transparent\r\n      );\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      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: var(--m3e-option-shape, ${DesignToken.shape.corner.extraSmall});\r\n      transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)};\r\n    }\r\n    :host([selected]:not(:state(-first))) .base {\r\n      border-top-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host([selected]:not(:state(-last))) .base {\r\n      border-bottom-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:state(-first)) .base {\r\n      border-top-left-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:state(-last)) .base {\r\n      border-bottom-left-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium});\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      flex: 1 1 auto;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      width: 100%;\r\n      overflow: hidden;\r\n      column-gap: var(--m3e-option-icon-label-space, 0.5rem);\r\n      padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem));\r\n      padding-inline-end: var(--m3e-option-padding-end, 0.75rem);\r\n      font-size: var(--m3e-option-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-option-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-option-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-option-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    .focus-ring {\r\n      border-radius: var(--m3e-option-focus-ring-shape, inherit);\r\n    }\r\n    .icon {\r\n      margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem));\r\n      transition: ${unsafeCSS(\r\n        `margin-inline-start ${DesignToken.motion.spring.fastEffects}, width ${DesignToken.motion.spring.fastEffects}`,\r\n      )};\r\n    }\r\n    :host([selected]) .icon {\r\n      margin-inline-start: 0;\r\n      width: var(--m3e-option-icon-size, 1.25rem);\r\n    }\r\n    .icon {\r\n      flex: none;\r\n      width: 0px;\r\n      font-size: var(--m3e-option-icon-size, 1.25rem);\r\n    }\r\n    :host(:state(-empty)) .icon,\r\n    :host(:state(-hide-selection-indicator)) .icon,\r\n    :host(:not([selected])) .check {\r\n      display: none;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: Menu;\r\n        color: MenuText;\r\n      }\r\n      :host([aria-disabled=\"true\"]) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .icon,\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #value?: string;\r\n  /** @private */ #textContent = \"\";\r\n\r\n  /** @internal */ @query(\".focus-ring\") readonly focusRing?: M3eFocusRingElement;\r\n  /** @internal */ @query(\".state-layer\") readonly stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** A string representing the value of the option. */\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  /**\r\n   * The search term to highlight.\r\n   * @default \"\"\r\n   */\r\n  @property() term = \"\";\r\n\r\n  /**\r\n   * The mode in which to highlight a term.\r\n   * @default \"contains\"\r\n   */\r\n  @property({ attribute: \"highlight-mode\" }) highlightMode: TextHighlightMode = \"contains\";\r\n\r\n  /**\r\n   * Whether text highlighting is disabled.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-highlight\", type: Boolean }) disableHighlight = false;\r\n\r\n  /** The textual label of the option. */\r\n  get label() {\r\n    return this.#textContent;\r\n  }\r\n\r\n  /** @internal */\r\n  [typeaheadLabel](): string {\r\n    return this.label;\r\n  }\r\n\r\n  /** Whether the option represents an empty option. */\r\n  get isEmpty() {\r\n    return this.value === \"\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    [this.focusRing, this.stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this.focusRing, this.stateLayer, this._ripple].forEach((x) => x?.attach(this));\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\") && this.selected) {\r\n      const panel = this.closest(\"[role='listbox']\") ?? this.closest(\"m3e-autocomplete\") ?? this.closest(\"m3e-select\");\r\n      if (panel && panel.ariaMultiSelectable !== \"true\" && !panel.hasAttribute(\"multi\")) {\r\n        panel.querySelectorAll(\"m3e-option\").forEach((x) => {\r\n          if (x !== this && x.selected) {\r\n            x.selected = false;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <div class=\"icon\" aria-hidden=\"true\">\r\n          <svg class=\"check\" viewBox=\"0 -960 960 960\">\r\n            <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n          </svg>\r\n        </div>\r\n        <m3e-text-overflow class=\"label\">\r\n          <m3e-text-highlight term=\"${this.term}\" mode=\"${this.highlightMode}\" ?disabled=\"${this.disableHighlight}\">\r\n            <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n          </m3e-text-highlight>\r\n        </m3e-text-overflow>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#textContent = getTextContent(<HTMLSlotElement>e.target);\r\n    setCustomState(this, \"-empty\", this.isEmpty);\r\n\r\n    if (this.selected) {\r\n      this.closest<LitElement>(\"m3e-select\")?.requestUpdate();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-option\": M3eOptionElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * Groups options under a subheading.\r\n *\r\n * @description\r\n * The `m3e-optgroup` component organizes related options within an option list,\r\n * providing visual and semantic grouping through a customizable label. It manages `aria-labelledby`\r\n * associations automatically and applies Material Design 3 typography and spacing conventions to\r\n * the group label. The component maintains proper semantic structure by utilizing the ARIA `group` role,\r\n * ensuring that assistive technologies correctly interpret the hierarchical relationship between the label\r\n * and contained options.\r\n *\r\n * @tag m3e-optgroup\r\n *\r\n * @slot - Renders the options of the group.\r\n * @slot label - Renders the label of the group.\r\n *\r\n * @cssprop --m3e-option-height - The height of the group label container.\r\n * @cssprop --m3e-option-font-size - The font size of the group label.\r\n * @cssprop --m3e-option-font-weight - The font weight of the group label.\r\n * @cssprop --m3e-option-line-height - The line height of the group label.\r\n * @cssprop --m3e-option-tracking - The letter spacing of the group label.\r\n * @cssprop --m3e-option-padding-end - The right padding of the label.\r\n * @cssprop --m3e-option-padding-start - The left padding of the label.\r\n * @cssprop --m3e-option-color - The text color of the group label.\r\n */\r\n@customElement(\"m3e-optgroup\")\r\nexport class M3eOptGroupElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      --_option-padding-start: calc(var(--m3e-option-padding-start, 0.75rem) * 2);\r\n    }\r\n    .label {\r\n      height: var(--m3e-option-height, 3rem);\r\n      font-size: var(--m3e-option-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-option-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-option-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-option-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      padding-inline-end: var(--m3e-option-padding-end, 0.75rem);\r\n      padding-inline-start: var(--m3e-option-padding-start, 0.75rem);\r\n      color: var(--m3e-option-color, ${DesignToken.color.onSurface});\r\n      flex: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #labelId = `m3e-optgroup-label-${M3eOptGroupElement.__nextId++}`;\r\n  /** @private */ #label?: Element;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-text-overflow class=\"label\">\r\n        <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n      </m3e-text-overflow>\r\n      <slot></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleLabelSlotChange(e: Event): void {\r\n    const label = (<HTMLSlotElement>e.target).assignedElements({ flatten: true })[0] ?? undefined;\r\n    if (label === this.#label) return;\r\n\r\n    if (this.#label?.id) {\r\n      removeAriaReferencedId(this, \"aria-labelledby\", this.#label.id);\r\n      if (this.#label.id === this.#labelId) {\r\n        this.#label.id = \"\";\r\n      }\r\n    }\r\n\r\n    this.#label = label;\r\n\r\n    if (this.#label) {\r\n      this.#label.id = this.#label.id || this.#labelId;\r\n      addAriaReferencedId(this, \"aria-labelledby\", this.#label.id);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-optgroup\": M3eOptGroupElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html } from \"lit\";\r\n\r\nimport {\r\n  DesignToken,\r\n  Role,\r\n  customElement,\r\n  MutationController,\r\n  deleteCustomState,\r\n  addCustomState,\r\n  setCustomState,\r\n  hasAssignedNodes,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eFloatingPanelElement } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { M3eOptGroupElement } from \"./OptGroupElement\";\r\nimport { M3eOptionElement } from \"./OptionElement\";\r\nimport { property } from \"lit/decorators.js\";\r\nimport { OptionPanelState } from \"./OptionPanelState\";\r\n\r\n/**\r\n * Presents a list of options on a temporary surface.\r\n *\r\n * @description\r\n * The `m3e-option-panel` component renders a scrollable container for displaying selectable options\r\n * as a Material Design 3 menu surface. It provides dynamic positioning and anchoring to trigger elements,\r\n * automatic viewport boundary detection with intelligent repositioning, and smooth enter/exit animations.\r\n *\r\n * @tag m3e-option-panel\r\n *\r\n * @slot - Renders the contents of the list.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-option-panel-container-shape - Corner radius of the panel container.\r\n * @cssprop --m3e-option-panel-container-min-width - Minimum width of the panel container.\r\n * @cssprop --m3e-option-panel-container-max-width - Maximum width of the panel container.\r\n * @cssprop --m3e-option-panel-container-max-height - Maximum height of the panel container.\r\n * @cssprop --m3e-option-panel-container-padding-block - Vertical padding inside the panel container.\r\n * @cssprop --m3e-option-panel-container-padding-inline - Horizontal padding inside the panel container.\r\n * @cssprop --m3e-option-panel-container-color - Background color of the panel container.\r\n * @cssprop --m3e-option-panel-container-elevation - Box shadow elevation of the panel container.\r\n * @cssprop --m3e-option-panel-gap - Vertical spacing between option items.\r\n * @cssprop --m3e-option-panel-divider-spacing - Vertical spacing around slotted `m3e-divider` elements.\r\n * @cssprop --m3e-option-panel-text-highlight-container-color - Background color used for text highlight matches.\r\n * @cssprop --m3e-option-panel-text-highlight-color - Text color used for text highlight matches.\r\n */\r\n@customElement(\"m3e-option-panel\")\r\nexport class M3eOptionPanelElement extends Role(M3eFloatingPanelElement, \"listbox\") {\r\n  static {\r\n    if (typeof window !== \"undefined\") {\r\n      const lightDomStyle = new CSSStyleSheet();\r\n      lightDomStyle.replaceSync(\r\n        css`\r\n          m3e-option-panel > m3e-divider {\r\n            margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem);\r\n          }\r\n          m3e-option-panel m3e-option[hidden],\r\n          m3e-option-panel m3e-optgroup[hidden] {\r\n            display: none;\r\n          }\r\n        `.toString(),\r\n      );\r\n\r\n      document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];\r\n    }\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    M3eFloatingPanelElement.styles,\r\n    css`\r\n      :host {\r\n        --m3e-floating-panel-container-shape: var(\r\n          --m3e-option-panel-container-shape,\r\n          ${DesignToken.shape.corner.large}\r\n        );\r\n        --m3e-floating-panel-container-min-width: var(--m3e-option-panel-container-min-width, 7rem);\r\n        --m3e-floating-panel-container-max-width: var(--m3e-option-panel-container-max-width, 17.5rem);\r\n        --m3e-floating-panel-container-max-height: var(--m3e-option-panel-container-max-height, 17.5rem);\r\n        --m3e-floating-panel-container-color: var(\r\n          --m3e-option-panel-container-color,\r\n          ${DesignToken.color.surfaceContainer}\r\n        );\r\n        --m3e-floating-panel-container-elevation: var(\r\n          --m3e-option-panel-container-elevation,\r\n          ${DesignToken.elevation.level3}\r\n        );\r\n        --m3e-floating-panel-container-padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem);\r\n        --m3e-floating-panel-container-padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem);\r\n      }\r\n      .base {\r\n        row-gap: var(--m3e-option-panel-gap, 0.125rem);\r\n        --m3e-text-highlight-container-color: var(\r\n          --m3e-option-panel-text-highlight-container-color,\r\n          ${DesignToken.color.tertiaryContainer}\r\n        );\r\n        --m3e-text-highlight-color: var(\r\n          --m3e-option-panel-text-highlight-color,\r\n          ${DesignToken.color.onTertiaryContainer}\r\n        );\r\n        --m3e-focus-ring-outward-offset: 0px;\r\n        --m3e-focus-ring-growth-factor: 1.5;\r\n      }\r\n      .no-data {\r\n        display: flex;\r\n        align-items: center;\r\n        box-sizing: border-box;\r\n        min-height: var(--m3e-option-panel-no-data-container-height, 2.75rem);\r\n        padding: var(--m3e-option-panel-no-data-container-padding, 0.75rem);\r\n        color: var(--m3e-option-panel-no-data-color, ${DesignToken.color.onSurfaceVariant});\r\n        font-size: var(--m3e-option-panel-no-data-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n        font-weight: var(\r\n          --m3e-option-panel-no-data-font-weight,\r\n          ${DesignToken.typescale.standard.label.large.fontWeight}\r\n        );\r\n        line-height: var(\r\n          --m3e-option-panel-no-data-line-height,\r\n          ${DesignToken.typescale.standard.label.large.lineHeight}\r\n        );\r\n        letter-spacing: var(\r\n          --m3e-option-panel-no-data-tracking,\r\n          ${DesignToken.typescale.standard.label.large.tracking}\r\n        );\r\n      }\r\n      .loading {\r\n        display: flex;\r\n        align-items: center;\r\n        box-sizing: border-box;\r\n        min-height: var(--m3e-option-panel-loading-container-height, 2.75rem);\r\n        padding: var(--m3e-option-panel-loading-container-padding, 0.75rem);\r\n        color: var(--m3e-option-panel-loading-color, ${DesignToken.color.onSurfaceVariant});\r\n        font-size: var(--m3e-option-panel-loading-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n        font-weight: var(\r\n          --m3e-option-panel-loading-font-weight,\r\n          ${DesignToken.typescale.standard.label.large.fontWeight}\r\n        );\r\n        line-height: var(\r\n          --m3e-option-panel-loading-line-height,\r\n          ${DesignToken.typescale.standard.label.large.lineHeight}\r\n        );\r\n        letter-spacing: var(\r\n          --m3e-option-panel-loading-tracking,\r\n          ${DesignToken.typescale.standard.label.large.tracking}\r\n        );\r\n      }\r\n      :host(:state(-no-data)) slot:not([name]),\r\n      :host(:state(-loading)) slot:not([name]),\r\n      :host(:state(-loading)) .no-data,\r\n      :host(:not(:state(-no-data))) .no-data,\r\n      :host(:not(:state(-with-no-data))) .no-data,\r\n      :host(:not(:state(-loading))) .loading,\r\n      :host(:not(:state(-with-loading))) .loading {\r\n        display: none;\r\n      }\r\n      :host(:state(-no-data)) .base,\r\n      :host(:state(-loading)) .base {\r\n        overflow-y: hidden;\r\n      }\r\n      :host(:state(-with-loading-indicator)) .loading {\r\n        padding: 0;\r\n        justify-content: center;\r\n      }\r\n    `,\r\n  ];\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new MutationController(this, {\r\n      config: {\r\n        childList: true,\r\n        subtree: true,\r\n      },\r\n      callback: () => this.#handleMutation(),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * The state for which to present content.\r\n   * @default \"content\"\r\n   */\r\n  @property({ reflect: true }) state: OptionPanelState = \"content\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#handleMutation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot></slot>\r\n      <div class=\"no-data\" aria-hidden=\"true\">\r\n        <slot name=\"no-data\" @slotchange=\"${this.#handleNoDataSlotChange}\"></slot>\r\n      </div>\r\n      <div class=\"loading\" aria-hidden=\"true\">\r\n        <slot name=\"loading\" @slotchange=\"${this.#handleLoadingSlotChange}\"> </slot>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleNoDataSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-no-data\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleLoadingSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-loading\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n    setCustomState(\r\n      this,\r\n      \"-with-loading-indicator\",\r\n      this.querySelector(\"m3e-loading-indicator[slot='loading'], m3e-circular-progress-indicator[slot='loading']\") !==\r\n        null,\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #handleMutation(): void {\r\n    const options = this.querySelectorAll(\"m3e-option\");\r\n    let first = false;\r\n    let last: M3eOptionElement | undefined;\r\n\r\n    for (let i = 0; i < options.length; i++) {\r\n      const option = options[i];\r\n      if (option.hidden) {\r\n        deleteCustomState(option, \"-first\");\r\n        deleteCustomState(option, \"-last\");\r\n      } else if (!first && !(option.parentElement instanceof M3eOptGroupElement)) {\r\n        addCustomState(option, \"-first\");\r\n        first = true;\r\n        addCustomState(option, \"-last\");\r\n        last = option;\r\n      } else {\r\n        deleteCustomState(option, \"-first\");\r\n        if (last) {\r\n          deleteCustomState(last, \"-last\");\r\n        }\r\n        addCustomState(option, \"-last\");\r\n        last = option;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-option-panel\": M3eOptionPanelElement;\r\n  }\r\n}\r\n"],"names":["M3eOptionElement","Selected","Disabled","AttachInternals","Role","LitElement","constructor","_M3eOptionElement_value","set","this","_M3eOptionElement_textContent","term","highlightMode","disableHighlight","value","__classPrivateFieldGet","__classPrivateFieldSet","label","WeakMap","_M3eOptionElement_instances","WeakSet","typeaheadLabel","isEmpty","connectedCallback","super","focusRing","stateLayer","_ripple","forEach","x","attach","firstUpdated","_changedProperties","update","changedProperties","has","selected","panel","closest","ariaMultiSelectable","hasAttribute","querySelectorAll","render","html","disabled","_M3eOptionElement_handleSlotChange","e","getTextContent","target","setCustomState","requestUpdate","styles","css","DesignToken","color","onSurface","onTertiaryContainer","tertiaryContainer","shape","corner","extraSmall","unsafeCSS","motion","spring","fastEffects","medium","typescale","standard","large","fontSize","fontWeight","lineHeight","tracking","__decorate","query","prototype","property","attribute","type","Boolean","customElement","M3eOptGroupElement","M3eOptGroupElement_1","_M3eOptGroupElement_labelId","__nextId","_M3eOptGroupElement_label","_M3eOptGroupElement_instances","_M3eOptGroupElement_handleLabelSlotChange","assignedElements","flatten","undefined","id","removeAriaReferencedId","addAriaReferencedId","M3eOptionPanelElement","M3eFloatingPanelElement","state","MutationController","config","childList","subtree","callback","_M3eOptionPanelElement_instances","_M3eOptionPanelElement_handleMutation","call","_M3eOptionPanelElement_handleNoDataSlotChange","_M3eOptionPanelElement_handleLoadingSlotChange","hasAssignedNodes","querySelector","options","last","first","i","length","option","hidden","deleteCustomState","parentElement","addCustomState","window","lightDomStyle","CSSStyleSheet","replaceSync","toString","document","adoptedStyleSheets","surfaceContainer","elevation","level3","onSurfaceVariant","reflect"],"mappings":";;;;;woBAoEO,IAAMA,EAAN,cAA+BC,EAASC,EAASC,EAAgBC,EAAKC,EAAY,cAAlFC,WAAAA,mCA+HWC,EAAAC,IAAAC,aACAC,EAAAF,IAAAC,KAAe,IAkBnBA,KAAAE,KAAO,GAMwBF,KAAAG,cAAmC,WAMjBH,KAAAI,kBAAmB,CA4ElF,CAnGc,SAAIC,GACd,OAAOC,EAAAN,KAAIF,EAAA,MAAWQ,EAAAN,WACxB,CACA,SAAIK,CAAMA,GACRE,EAAAP,KAAIF,EAAUO,EAAK,IACrB,CAqBA,SAAIG,GACF,OAAOF,EAAAN,KAAIC,EAAA,IACb,CAGA,EAAAH,EAAA,IAAAW,QAAAR,EAAA,IAAAQ,QAAAC,EAAA,IAAAC,QAACC,MACC,OAAOZ,KAAKQ,KACd,CAGA,WAAIK,GACF,MAAsB,KAAfb,KAAKK,KACd,CAGSS,iBAAAA,GACPC,MAAMD,oBACN,CAACd,KAAKgB,UAAWhB,KAAKiB,WAAYjB,KAAKkB,SAASC,QAASC,GAAMA,GAAGC,OAAOrB,MAC3E,CAGmBsB,YAAAA,CAAaC,GAC9BR,MAAMO,aAAaC,GACnB,CAACvB,KAAKgB,UAAWhB,KAAKiB,WAAYjB,KAAKkB,SAASC,QAASC,GAAMA,GAAGC,OAAOrB,MAC3E,CAGmBwB,MAAAA,CAAOC,GAGxB,GAFAV,MAAMS,OAAOC,GAETA,EAAkBC,IAAI,aAAe1B,KAAK2B,SAAU,CACtD,MAAMC,EAAQ5B,KAAK6B,QAAQ,qBAAuB7B,KAAK6B,QAAQ,qBAAuB7B,KAAK6B,QAAQ,cAC/FD,GAAuC,SAA9BA,EAAME,sBAAmCF,EAAMG,aAAa,UACvEH,EAAMI,iBAAiB,cAAcb,QAASC,IACxCA,IAAMpB,MAAQoB,EAAEO,WAClBP,EAAEO,UAAW,IAIrB,CACF,CAGSM,MAAAA,GACP,OAAOC,CAAI,qEACyClC,KAAKmC,6EACPnC,KAAKmC,oEACbnC,KAAKmC,wUASbnC,KAAKE,eAAeF,KAAKG,6BAA6BH,KAAKI,wCAChEE,EAAAN,KAAIU,EAAA,IAAA0B,kEAKnC,4BAGkBC,GAChB9B,EAAAP,OAAoBsC,EAAgCD,EAAEE,QAAO,KAC7DC,EAAexC,KAAM,SAAUA,KAAKa,SAEhCb,KAAK2B,UACP3B,KAAK6B,QAAoB,eAAeY,eAE5C,EAvOgBlD,EAAAmD,OAAyBC,CAAG,0PAUPC,EAAYC,MAAMC,sFACsBF,EAAYC,MAAMC,sFAClBF,EAAYC,MAAMC,kEACtCF,EAAYC,MAAMC,mIAG7BF,EAAYC,MAAME,sFACGH,EAAYC,MAAMG,wGAG7EJ,EAAYC,MAAME,2GAIlBH,EAAYC,MAAME,sFAEwCH,EAAYC,MAAME,sLAQ3CH,EAAYC,MAAMC,iQAYdF,EAAYK,MAAMC,OAAOC,4BACpDC,EAAU,iBAAiBR,EAAYS,OAAOC,OAAOC,4HAGRX,EAAYK,MAAMC,OAAOM,sEACxBZ,EAAYK,MAAMC,OAAOM,uHAGvBZ,EAAYK,MAAMC,OAAOM,yEACxBZ,EAAYK,MAAMC,OAAOM,wGAG1BZ,EAAYK,MAAMC,OAAOM,yEACxBZ,EAAYK,MAAMC,OAAOM,yGAGxBZ,EAAYK,MAAMC,OAAOM,2EACxBZ,EAAYK,MAAMC,OAAOM,ubAiBtCZ,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMC,oEACvChB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAME,sEAC3CjB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMG,sEAC3ClB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMI,6LAOrFX,EACZ,uBAAuBR,EAAYS,OAAOC,OAAOC,sBAAsBX,EAAYS,OAAOC,OAAOC,6hBAqCvDS,EAAA,CAA9BC,EAAM,gBAAwD1E,EAAA2E,UAAA,oBAC/BF,EAAA,CAA/BC,EAAM,iBAA2D1E,EAAA2E,UAAA,qBAChCF,EAAA,CAAlCC,EAAM,YAAuD1E,EAAA2E,UAAA,kBAGlEF,EAAA,CAAXG,KAEA5E,EAAA2E,UAAA,QAAA,MASWF,EAAA,CAAXG,KAAqB5E,EAAA2E,UAAA,eAMqBF,EAAA,CAA1CG,EAAS,CAAEC,UAAW,oBAAkE7E,EAAA2E,UAAA,qBAAA,GAM5BF,EAAA,CAA5DG,EAAS,CAAEC,UAAW,oBAAqBC,KAAMC,WAAoC/E,EAAA2E,UAAA,wBAAA,GA9J3E3E,EAAgByE,EAAA,CAD5BO,EAAc,eACFhF,GCrCN,IAAMiF,EAAkBC,EAAxB,cAAiC9E,EAAKC,EAAY,UAAlDC,WAAAA,mCAqBW6E,WAAW,sBAAsBD,EAAmBE,YACpDC,EAAA7E,IAAAC,YA6BlB,CA1BqBiC,MAAAA,GACjB,OAAOC,CAAI,oEAC2B5B,EAAAN,KAAI6E,EAAA,IAAAC,8CAG5C,oEAGuBzC,GACrB,MAAM7B,EAA0B6B,EAAEE,OAAQwC,iBAAiB,CAAEC,SAAS,IAAQ,SAAMC,EAChFzE,IAAUF,EAAAN,KAAI4E,EAAA,OAEdtE,EAAAN,KAAI4E,EAAA,MAASM,KACfC,EAAuBnF,KAAM,kBAAmBM,EAAAN,KAAI4E,EAAA,KAAQM,IACxD5E,EAAAN,KAAI4E,EAAA,KAAQM,KAAO5E,EAAAN,KAAI0E,EAAA,OACzBpE,EAAAN,KAAI4E,EAAA,KAAQM,GAAK,KAIrB3E,EAAAP,KAAI4E,EAAUpE,EAAK,KAEfF,EAAAN,KAAI4E,EAAA,OACNtE,EAAAN,KAAI4E,EAAA,KAAQM,GAAK5E,EAAAN,KAAI4E,EAAA,KAAQM,IAAM5E,EAAAN,YACnCoF,EAAoBpF,KAAM,kBAAmBM,EAAAN,KAAI4E,EAAA,KAAQM,KAE7D,EAhDgBV,EAAA9B,OAAyBC,CAAG,kMAOCC,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMC,yDACvChB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAME,2DAC3CjB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMG,2DAC3ClB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMI,yKAGvDnB,EAAYC,MAAMC,4BAKxB0B,EAAAG,SAAW,EApB/BH,EAAkBC,EAAAT,EAAA,CAD9BO,EAAc,iBACFC,GCkBN,IAAMa,EAAN,cAAoC1F,EAAK2F,EAAyB,YAsHvEzF,WAAAA,GACEkB,oBAe2Bf,KAAAuF,MAA0B,UAbrD,IAAIC,EAAmBxF,KAAM,CAC3ByF,OAAQ,CACNC,WAAW,EACXC,SAAS,GAEXC,SAAUA,IAAMtF,EAAAN,KAAI6F,EAAA,IAAAC,GAAgBC,KAApB/F,OAEpB,CASSc,iBAAAA,GACPC,MAAMD,oBACNR,EAAAN,KAAI6F,EAAA,IAAAC,GAAgBC,KAApB/F,KACF,CAGmBiC,MAAAA,GACjB,OAAOC,CAAI,4GAG6B5B,EAAAN,KAAI6F,EAAA,IAAAG,8FAGJ1F,EAAAN,KAAI6F,EAAA,IAAAI,yBAG9C,4BAGwB5D,GACtBG,EAAexC,KAAM,gBAAiBkG,EAAkC7D,EAAEE,QAC5E,aAGyBF,GACvBG,EAAexC,KAAM,gBAAiBkG,EAAkC7D,EAAEE,SAC1EC,EACExC,KACA,0BAEE,OADFA,KAAKmG,cAAc,0FAGvB,eAIE,MAAMC,EAAUpG,KAAKgC,iBAAiB,cACtC,IACIqE,EADAC,GAAQ,EAGZ,IAAK,IAAIC,EAAI,EAAGA,EAAIH,EAAQI,OAAQD,IAAK,CACvC,MAAME,EAASL,EAAQG,GACnBE,EAAOC,QACTC,EAAkBF,EAAQ,UAC1BE,EAAkBF,EAAQ,UAChBH,GAAWG,EAAOG,yBAAyBpC,GAMrDmC,EAAkBF,EAAQ,UACtBJ,GACFM,EAAkBN,EAAM,SAE1BQ,EAAeJ,EAAQ,SACvBJ,EAAOI,IAVPI,EAAeJ,EAAQ,UACvBH,GAAQ,EACRO,EAAeJ,EAAQ,SACvBJ,EAAOI,EASX,CACF,EAnMA,MACE,GAAsB,oBAAXK,OAAwB,CACjC,MAAMC,EAAgB,IAAIC,cAC1BD,EAAcE,YACZtE,CAAG,kMAQDuE,YAGJC,SAASC,mBAAqB,IAAID,SAASC,mBAAoBL,EACjE,CACD,EAjBD,GAoBgB1B,EAAA3C,OAAyB,CACvC4C,EAAwB5C,OACxBC,CAAG,0FAIKC,EAAYK,MAAMC,OAAOS,0XAOzBf,EAAYC,MAAMwE,8GAIlBzE,EAAY0E,UAAUC,uXAStB3E,EAAYC,MAAMG,kGAIlBJ,EAAYC,MAAME,uWAWyBH,EAAYC,MAAM2E,2EACV5E,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMC,wEAG9FhB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAME,2EAI3CjB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMG,2EAI3ClB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMI,iRASAnB,EAAYC,MAAM2E,2EACV5E,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMC,wEAG9FhB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAME,2EAI3CjB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMG,2EAI3ClB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMI,ifAuCxBC,EAAA,CAA5BG,EAAS,CAAEsD,SAAS,KAA4CpC,EAAAnB,UAAA,aAAA,GAtItDmB,EAAqBrB,EAAA,CADjCO,EAAc,qBACFc"}
+{"version":3,"file":"option.min.js","sources":["../../src/option/OptionElement.ts","../../src/option/OptGroupElement.ts","../../src/option/OptionPanelElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, 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  Disabled,\r\n  getTextContent,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n  setCustomState,\r\n  TextHighlightMode,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { typeaheadLabel } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * An option that can be selected.\r\n *\r\n * @description\r\n * The `m3e-option` component represents an individual selectable item within an option list,\r\n * adhering to Material Design 3 specifications. It provides visual feedback through state layers and ripple effects,\r\n * supports single and multiple selection modes, and includes comprehensive accessibility features including\r\n * keyboard navigation and focus management. The component automatically manages its visual appearance based on\r\n * selection and disabled states, with configurable styling for interactive and non-interactive variants.\r\n *\r\n * @tag m3e-option\r\n *\r\n * @slot - Renders the label of the option.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr disable-highlight - Whether text highlighting is disabled.\r\n * @attr highlight-mode - The mode in which to highlight a term.\r\n * @attr selected - Whether the element is selected.\r\n * @attr term - The search term to highlight.\r\n * @attr value - A string representing the value of the option.\r\n *\r\n * @cssprop --m3e-option-container-height - The height of the option container.\r\n * @cssprop --m3e-option-color - The text color of the option.\r\n * @cssprop --m3e-option-container-hover-color - The color for the hover state layer.\r\n * @cssprop --m3e-option-container-focus-color - The color for the focus state layer.\r\n * @cssprop --m3e-option-ripple-color - The color of the ripple effect.\r\n * @cssprop --m3e-option-selected-color - The text color when the option is selected.\r\n * @cssprop --m3e-option-selected-container-color - The background color when the option is selected.\r\n * @cssprop --m3e-option-selected-container-hover-color - The hover color for the selected state layer.\r\n * @cssprop --m3e-option-selected-container-focus-color - The focus color for the selected state layer.\r\n * @cssprop --m3e-option-selected-ripple-color - The ripple color when the option is selected.\r\n * @cssprop --m3e-option-disabled-color - The text color when the option is disabled.\r\n * @cssprop --m3e-option-disabled-opacity - The opacity level applied to the disabled text color.\r\n * @cssprop --m3e-option-icon-label-space - The spacing between the icon and label.\r\n * @cssprop --m3e-option-padding-start - The left padding of the option content.\r\n * @cssprop --m3e-option-padding-end - The right padding of the option content.\r\n * @cssprop --m3e-option-label-text-font-size - The font size of the option label.\r\n * @cssprop --m3e-option-label-text-font-weight - The font weight of the option label.\r\n * @cssprop --m3e-option-label-text-line-height - The line height of the option label.\r\n * @cssprop --m3e-option-label-text-tracking - The letter spacing of the option label.\r\n * @cssprop --m3e-option-focus-ring-shape - The corner radius of the focus ring.\r\n * @cssprop --m3e-option-icon-size - The size of the option icons.\r\n * @cssprop --m3e-option-shape - Base shape of the option.\r\n * @cssprop --m3e-option-selected-shape - Shape used for a selected option.\r\n * @cssprop --m3e-option-first-child-shape - Shape for the first option in a list.\r\n * @cssprop --m3e-option-last-child-shape - Shape for the last option in a list.\r\n */\r\n@customElement(\"m3e-option\")\r\nexport class M3eOptionElement extends Selected(Disabled(AttachInternals(Role(LitElement, \"option\")))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: none;\r\n      height: var(--m3e-option-container-height, 2.75rem);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) .base {\r\n      color: var(--m3e-option-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-option-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not(:state(-empty))[selected]) .base {\r\n      color: var(--m3e-option-selected-color, ${DesignToken.color.onTertiaryContainer});\r\n      background-color: var(--m3e-option-selected-container-color, ${DesignToken.color.tertiaryContainer});\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-option-selected-container-hover-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-option-selected-container-focus-color,\r\n        ${DesignToken.color.onTertiaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${DesignToken.color.onTertiaryContainer});\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([aria-disabled=\"true\"]) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-option-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-option-disabled-opacity, 38%),\r\n        transparent\r\n      );\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      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: var(--m3e-option-shape, ${DesignToken.shape.corner.extraSmall});\r\n      transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)};\r\n    }\r\n    :host([selected]:not(:state(-first))) .base {\r\n      border-top-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host([selected]:not(:state(-last))) .base {\r\n      border-bottom-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:state(-first)) .base {\r\n      border-top-left-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-top-right-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host(:state(-last)) .base {\r\n      border-bottom-left-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium});\r\n      border-bottom-right-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium});\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      flex: 1 1 auto;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      width: 100%;\r\n      overflow: hidden;\r\n      column-gap: var(--m3e-option-icon-label-space, 0.5rem);\r\n      padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem));\r\n      padding-inline-end: var(--m3e-option-padding-end, 0.75rem);\r\n      font-size: var(--m3e-option-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-option-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-option-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-option-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    .focus-ring {\r\n      border-radius: var(--m3e-option-focus-ring-shape, inherit);\r\n    }\r\n    .icon {\r\n      margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem));\r\n      transition: ${unsafeCSS(\r\n        `margin-inline-start ${DesignToken.motion.spring.fastEffects}, width ${DesignToken.motion.spring.fastEffects}`,\r\n      )};\r\n    }\r\n    :host([selected]) .icon {\r\n      margin-inline-start: 0;\r\n      width: var(--m3e-option-icon-size, 1.25rem);\r\n    }\r\n    .icon {\r\n      flex: none;\r\n      width: 0px;\r\n      font-size: var(--m3e-option-icon-size, 1.25rem);\r\n    }\r\n    :host(:state(-empty)) .icon,\r\n    :host(:state(-hide-selection-indicator)) .icon,\r\n    :host(:not([selected])) .check {\r\n      display: none;\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: Menu;\r\n        color: MenuText;\r\n      }\r\n      :host([aria-disabled=\"true\"]) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .icon,\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #value?: string;\r\n  /** @private */ #textContent = \"\";\r\n\r\n  /** @internal */ @query(\".focus-ring\") readonly focusRing?: M3eFocusRingElement;\r\n  /** @internal */ @query(\".state-layer\") readonly stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /** A string representing the value of the option. */\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  /**\r\n   * The search term to highlight.\r\n   * @default \"\"\r\n   */\r\n  @property() term = \"\";\r\n\r\n  /**\r\n   * The mode in which to highlight a term.\r\n   * @default \"contains\"\r\n   */\r\n  @property({ attribute: \"highlight-mode\" }) highlightMode: TextHighlightMode = \"contains\";\r\n\r\n  /**\r\n   * Whether text highlighting is disabled.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-highlight\", type: Boolean }) disableHighlight = false;\r\n\r\n  /** The textual label of the option. */\r\n  get label() {\r\n    return this.#textContent;\r\n  }\r\n\r\n  /** @internal */\r\n  [typeaheadLabel](): string {\r\n    return this.label;\r\n  }\r\n\r\n  /** Whether the option represents an empty option. */\r\n  get isEmpty() {\r\n    return this.value === \"\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    [this.focusRing, this.stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this.focusRing, this.stateLayer, this._ripple].forEach((x) => x?.attach(this));\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\") && this.selected) {\r\n      const panel = this.closest(\"[role='listbox']\") ?? this.closest(\"m3e-autocomplete\") ?? this.closest(\"m3e-select\");\r\n      if (panel && panel.ariaMultiSelectable !== \"true\" && !panel.hasAttribute(\"multi\")) {\r\n        panel.querySelectorAll(\"m3e-option\").forEach((x) => {\r\n          if (x !== this && x.selected) {\r\n            x.selected = false;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <div class=\"icon\" aria-hidden=\"true\">\r\n          <svg class=\"check\" viewBox=\"0 -960 960 960\">\r\n            <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n          </svg>\r\n        </div>\r\n        <m3e-text-overflow class=\"label\">\r\n          <m3e-text-highlight term=\"${this.term}\" mode=\"${this.highlightMode}\" ?disabled=\"${this.disableHighlight}\">\r\n            <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n          </m3e-text-highlight>\r\n        </m3e-text-overflow>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#textContent = getTextContent(<HTMLSlotElement>e.target);\r\n    setCustomState(this, \"-empty\", this.isEmpty);\r\n\r\n    if (this.selected) {\r\n      this.closest<LitElement>(\"m3e-select\")?.requestUpdate?.();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-option\": M3eOptionElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\nimport { addAriaReferencedId, removeAriaReferencedId } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * Groups options under a subheading.\r\n *\r\n * @description\r\n * The `m3e-optgroup` component organizes related options within an option list,\r\n * providing visual and semantic grouping through a customizable label. It manages `aria-labelledby`\r\n * associations automatically and applies Material Design 3 typography and spacing conventions to\r\n * the group label. The component maintains proper semantic structure by utilizing the ARIA `group` role,\r\n * ensuring that assistive technologies correctly interpret the hierarchical relationship between the label\r\n * and contained options.\r\n *\r\n * @tag m3e-optgroup\r\n *\r\n * @slot - Renders the options of the group.\r\n * @slot label - Renders the label of the group.\r\n *\r\n * @cssprop --m3e-option-height - The height of the group label container.\r\n * @cssprop --m3e-option-font-size - The font size of the group label.\r\n * @cssprop --m3e-option-font-weight - The font weight of the group label.\r\n * @cssprop --m3e-option-line-height - The line height of the group label.\r\n * @cssprop --m3e-option-tracking - The letter spacing of the group label.\r\n * @cssprop --m3e-option-padding-end - The right padding of the label.\r\n * @cssprop --m3e-option-padding-start - The left padding of the label.\r\n * @cssprop --m3e-option-color - The text color of the group label.\r\n */\r\n@customElement(\"m3e-optgroup\")\r\nexport class M3eOptGroupElement extends Role(LitElement, \"group\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      --_option-padding-start: calc(var(--m3e-option-padding-start, 0.75rem) * 2);\r\n    }\r\n    .label {\r\n      height: var(--m3e-option-height, 3rem);\r\n      font-size: var(--m3e-option-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-option-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-option-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-option-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      padding-inline-end: var(--m3e-option-padding-end, 0.75rem);\r\n      padding-inline-start: var(--m3e-option-padding-start, 0.75rem);\r\n      color: var(--m3e-option-color, ${DesignToken.color.onSurface});\r\n      flex: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n  /** @private */ #labelId = `m3e-optgroup-label-${M3eOptGroupElement.__nextId++}`;\r\n  /** @private */ #label?: Element;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-text-overflow class=\"label\">\r\n        <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n      </m3e-text-overflow>\r\n      <slot></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleLabelSlotChange(e: Event): void {\r\n    const label = (<HTMLSlotElement>e.target).assignedElements({ flatten: true })[0] ?? undefined;\r\n    if (label === this.#label) return;\r\n\r\n    if (this.#label?.id) {\r\n      removeAriaReferencedId(this, \"aria-labelledby\", this.#label.id);\r\n      if (this.#label.id === this.#labelId) {\r\n        this.#label.id = \"\";\r\n      }\r\n    }\r\n\r\n    this.#label = label;\r\n\r\n    if (this.#label) {\r\n      this.#label.id = this.#label.id || this.#labelId;\r\n      addAriaReferencedId(this, \"aria-labelledby\", this.#label.id);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-optgroup\": M3eOptGroupElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html } from \"lit\";\r\n\r\nimport {\r\n  DesignToken,\r\n  Role,\r\n  customElement,\r\n  MutationController,\r\n  deleteCustomState,\r\n  addCustomState,\r\n  setCustomState,\r\n  hasAssignedNodes,\r\n  registerStyleSheet,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eFloatingPanelElement } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { M3eOptGroupElement } from \"./OptGroupElement\";\r\nimport { M3eOptionElement } from \"./OptionElement\";\r\nimport { property } from \"lit/decorators.js\";\r\nimport { OptionPanelState } from \"./OptionPanelState\";\r\n\r\n/**\r\n * Presents a list of options on a temporary surface.\r\n *\r\n * @description\r\n * The `m3e-option-panel` component renders a scrollable container for displaying selectable options\r\n * as a Material Design 3 menu surface. It provides dynamic positioning and anchoring to trigger elements,\r\n * automatic viewport boundary detection with intelligent repositioning, and smooth enter/exit animations.\r\n *\r\n * @tag m3e-option-panel\r\n *\r\n * @slot - Renders the contents of the list.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-option-panel-container-shape - Corner radius of the panel container.\r\n * @cssprop --m3e-option-panel-container-min-width - Minimum width of the panel container.\r\n * @cssprop --m3e-option-panel-container-max-width - Maximum width of the panel container.\r\n * @cssprop --m3e-option-panel-container-max-height - Maximum height of the panel container.\r\n * @cssprop --m3e-option-panel-container-padding-block - Vertical padding inside the panel container.\r\n * @cssprop --m3e-option-panel-container-padding-inline - Horizontal padding inside the panel container.\r\n * @cssprop --m3e-option-panel-container-color - Background color of the panel container.\r\n * @cssprop --m3e-option-panel-container-elevation - Box shadow elevation of the panel container.\r\n * @cssprop --m3e-option-panel-gap - Vertical spacing between option items.\r\n * @cssprop --m3e-option-panel-divider-spacing - Vertical spacing around slotted `m3e-divider` elements.\r\n * @cssprop --m3e-option-panel-text-highlight-container-color - Background color used for text highlight matches.\r\n * @cssprop --m3e-option-panel-text-highlight-color - Text color used for text highlight matches.\r\n */\r\n@customElement(\"m3e-option-panel\")\r\nexport class M3eOptionPanelElement extends Role(M3eFloatingPanelElement, \"listbox\") {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-option-panel > m3e-divider {\r\n        margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem);\r\n      }\r\n      m3e-option-panel m3e-option[hidden],\r\n      m3e-option-panel m3e-optgroup[hidden] {\r\n        display: none;\r\n      }\r\n    `);\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    M3eFloatingPanelElement.styles,\r\n    css`\r\n      :host {\r\n        --m3e-floating-panel-container-shape: var(\r\n          --m3e-option-panel-container-shape,\r\n          ${DesignToken.shape.corner.large}\r\n        );\r\n        --m3e-floating-panel-container-min-width: var(--m3e-option-panel-container-min-width, 7rem);\r\n        --m3e-floating-panel-container-max-width: var(--m3e-option-panel-container-max-width, 17.5rem);\r\n        --m3e-floating-panel-container-max-height: var(--m3e-option-panel-container-max-height, 17.5rem);\r\n        --m3e-floating-panel-container-color: var(\r\n          --m3e-option-panel-container-color,\r\n          ${DesignToken.color.surfaceContainer}\r\n        );\r\n        --m3e-floating-panel-container-elevation: var(\r\n          --m3e-option-panel-container-elevation,\r\n          ${DesignToken.elevation.level3}\r\n        );\r\n        --m3e-floating-panel-container-padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem);\r\n        --m3e-floating-panel-container-padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem);\r\n      }\r\n      .base {\r\n        row-gap: var(--m3e-option-panel-gap, 0.125rem);\r\n        --m3e-text-highlight-container-color: var(\r\n          --m3e-option-panel-text-highlight-container-color,\r\n          ${DesignToken.color.tertiaryContainer}\r\n        );\r\n        --m3e-text-highlight-color: var(\r\n          --m3e-option-panel-text-highlight-color,\r\n          ${DesignToken.color.onTertiaryContainer}\r\n        );\r\n        --m3e-focus-ring-outward-offset: 0px;\r\n        --m3e-focus-ring-growth-factor: 1.5;\r\n      }\r\n      .no-data {\r\n        display: flex;\r\n        align-items: center;\r\n        box-sizing: border-box;\r\n        min-height: var(--m3e-option-panel-no-data-container-height, 2.75rem);\r\n        padding: var(--m3e-option-panel-no-data-container-padding, 0.75rem);\r\n        color: var(--m3e-option-panel-no-data-color, ${DesignToken.color.onSurfaceVariant});\r\n        font-size: var(--m3e-option-panel-no-data-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n        font-weight: var(\r\n          --m3e-option-panel-no-data-font-weight,\r\n          ${DesignToken.typescale.standard.label.large.fontWeight}\r\n        );\r\n        line-height: var(\r\n          --m3e-option-panel-no-data-line-height,\r\n          ${DesignToken.typescale.standard.label.large.lineHeight}\r\n        );\r\n        letter-spacing: var(\r\n          --m3e-option-panel-no-data-tracking,\r\n          ${DesignToken.typescale.standard.label.large.tracking}\r\n        );\r\n      }\r\n      .loading {\r\n        display: flex;\r\n        align-items: center;\r\n        box-sizing: border-box;\r\n        min-height: var(--m3e-option-panel-loading-container-height, 2.75rem);\r\n        padding: var(--m3e-option-panel-loading-container-padding, 0.75rem);\r\n        color: var(--m3e-option-panel-loading-color, ${DesignToken.color.onSurfaceVariant});\r\n        font-size: var(--m3e-option-panel-loading-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n        font-weight: var(\r\n          --m3e-option-panel-loading-font-weight,\r\n          ${DesignToken.typescale.standard.label.large.fontWeight}\r\n        );\r\n        line-height: var(\r\n          --m3e-option-panel-loading-line-height,\r\n          ${DesignToken.typescale.standard.label.large.lineHeight}\r\n        );\r\n        letter-spacing: var(\r\n          --m3e-option-panel-loading-tracking,\r\n          ${DesignToken.typescale.standard.label.large.tracking}\r\n        );\r\n      }\r\n      :host(:state(-no-data)) slot:not([name]),\r\n      :host(:state(-loading)) slot:not([name]),\r\n      :host(:state(-loading)) .no-data,\r\n      :host(:not(:state(-no-data))) .no-data,\r\n      :host(:not(:state(-with-no-data))) .no-data,\r\n      :host(:not(:state(-loading))) .loading,\r\n      :host(:not(:state(-with-loading))) .loading {\r\n        display: none;\r\n      }\r\n      :host(:state(-no-data)) .base,\r\n      :host(:state(-loading)) .base {\r\n        overflow-y: hidden;\r\n      }\r\n      :host(:state(-with-loading-indicator)) .loading {\r\n        padding: 0;\r\n        justify-content: center;\r\n      }\r\n    `,\r\n  ];\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new MutationController(this, {\r\n      config: {\r\n        childList: true,\r\n        subtree: true,\r\n      },\r\n      callback: () => this.#handleMutation(),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * The state for which to present content.\r\n   * @default \"content\"\r\n   */\r\n  @property({ reflect: true }) state: OptionPanelState = \"content\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#handleMutation();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot></slot>\r\n      <div class=\"no-data\" aria-hidden=\"true\">\r\n        <slot name=\"no-data\" @slotchange=\"${this.#handleNoDataSlotChange}\"></slot>\r\n      </div>\r\n      <div class=\"loading\" aria-hidden=\"true\">\r\n        <slot name=\"loading\" @slotchange=\"${this.#handleLoadingSlotChange}\"> </slot>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleNoDataSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-no-data\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleLoadingSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-loading\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n    setCustomState(\r\n      this,\r\n      \"-with-loading-indicator\",\r\n      this.querySelector(\"m3e-loading-indicator[slot='loading'], m3e-circular-progress-indicator[slot='loading']\") !==\r\n        null,\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #handleMutation(): void {\r\n    const options = this.querySelectorAll(\"m3e-option\");\r\n    let first = false;\r\n    let last: M3eOptionElement | undefined;\r\n\r\n    for (let i = 0; i < options.length; i++) {\r\n      const option = options[i];\r\n      if (option.hidden) {\r\n        deleteCustomState(option, \"-first\");\r\n        deleteCustomState(option, \"-last\");\r\n      } else if (!first && !(option.parentElement instanceof M3eOptGroupElement)) {\r\n        addCustomState(option, \"-first\");\r\n        first = true;\r\n        addCustomState(option, \"-last\");\r\n        last = option;\r\n      } else {\r\n        deleteCustomState(option, \"-first\");\r\n        if (last) {\r\n          deleteCustomState(last, \"-last\");\r\n        }\r\n        addCustomState(option, \"-last\");\r\n        last = option;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-option-panel\": M3eOptionPanelElement;\r\n  }\r\n}\r\n"],"names":["M3eOptionElement","Selected","Disabled","AttachInternals","Role","LitElement","constructor","_M3eOptionElement_value","set","this","_M3eOptionElement_textContent","term","highlightMode","disableHighlight","value","__classPrivateFieldGet","__classPrivateFieldSet","label","WeakMap","_M3eOptionElement_instances","WeakSet","typeaheadLabel","isEmpty","connectedCallback","super","focusRing","stateLayer","_ripple","forEach","x","attach","firstUpdated","_changedProperties","update","changedProperties","has","selected","panel","closest","ariaMultiSelectable","hasAttribute","querySelectorAll","render","html","disabled","_M3eOptionElement_handleSlotChange","e","getTextContent","target","setCustomState","requestUpdate","styles","css","DesignToken","color","onSurface","onTertiaryContainer","tertiaryContainer","shape","corner","extraSmall","unsafeCSS","motion","spring","fastEffects","medium","typescale","standard","large","fontSize","fontWeight","lineHeight","tracking","__decorate","query","prototype","property","attribute","type","Boolean","customElement","M3eOptGroupElement","M3eOptGroupElement_1","_M3eOptGroupElement_labelId","__nextId","_M3eOptGroupElement_label","_M3eOptGroupElement_instances","_M3eOptGroupElement_handleLabelSlotChange","assignedElements","flatten","undefined","id","removeAriaReferencedId","addAriaReferencedId","M3eOptionPanelElement","M3eFloatingPanelElement","state","MutationController","config","childList","subtree","callback","_M3eOptionPanelElement_instances","_M3eOptionPanelElement_handleMutation","call","_M3eOptionPanelElement_handleNoDataSlotChange","_M3eOptionPanelElement_handleLoadingSlotChange","hasAssignedNodes","querySelector","options","last","first","i","length","option","hidden","deleteCustomState","parentElement","addCustomState","registerStyleSheet","surfaceContainer","elevation","level3","onSurfaceVariant","reflect"],"mappings":";;;;;gqBAoEO,IAAMA,EAAN,cAA+BC,EAASC,EAASC,EAAgBC,EAAKC,EAAY,cAAlFC,WAAAA,mCA+HWC,EAAAC,IAAAC,aACAC,EAAAF,IAAAC,KAAe,IAkBnBA,KAAAE,KAAO,GAMwBF,KAAAG,cAAmC,WAMjBH,KAAAI,kBAAmB,CA4ElF,CAnGc,SAAIC,GACd,OAAOC,EAAAN,KAAIF,EAAA,MAAWQ,EAAAN,WACxB,CACA,SAAIK,CAAMA,GACRE,EAAAP,KAAIF,EAAUO,EAAK,IACrB,CAqBA,SAAIG,GACF,OAAOF,EAAAN,KAAIC,EAAA,IACb,CAGA,EAAAH,EAAA,IAAAW,QAAAR,EAAA,IAAAQ,QAAAC,EAAA,IAAAC,QAACC,MACC,OAAOZ,KAAKQ,KACd,CAGA,WAAIK,GACF,MAAsB,KAAfb,KAAKK,KACd,CAGSS,iBAAAA,GACPC,MAAMD,oBACN,CAACd,KAAKgB,UAAWhB,KAAKiB,WAAYjB,KAAKkB,SAASC,QAASC,GAAMA,GAAGC,OAAOrB,MAC3E,CAGmBsB,YAAAA,CAAaC,GAC9BR,MAAMO,aAAaC,GACnB,CAACvB,KAAKgB,UAAWhB,KAAKiB,WAAYjB,KAAKkB,SAASC,QAASC,GAAMA,GAAGC,OAAOrB,MAC3E,CAGmBwB,MAAAA,CAAOC,GAGxB,GAFAV,MAAMS,OAAOC,GAETA,EAAkBC,IAAI,aAAe1B,KAAK2B,SAAU,CACtD,MAAMC,EAAQ5B,KAAK6B,QAAQ,qBAAuB7B,KAAK6B,QAAQ,qBAAuB7B,KAAK6B,QAAQ,cAC/FD,GAAuC,SAA9BA,EAAME,sBAAmCF,EAAMG,aAAa,UACvEH,EAAMI,iBAAiB,cAAcb,QAASC,IACxCA,IAAMpB,MAAQoB,EAAEO,WAClBP,EAAEO,UAAW,IAIrB,CACF,CAGSM,MAAAA,GACP,OAAOC,CAAI,qEACyClC,KAAKmC,6EACPnC,KAAKmC,oEACbnC,KAAKmC,wUASbnC,KAAKE,eAAeF,KAAKG,6BAA6BH,KAAKI,wCAChEE,EAAAN,KAAIU,EAAA,IAAA0B,kEAKnC,4BAGkBC,GAChB9B,EAAAP,OAAoBsC,EAAgCD,EAAEE,QAAO,KAC7DC,EAAexC,KAAM,SAAUA,KAAKa,SAEhCb,KAAK2B,UACP3B,KAAK6B,QAAoB,eAAeY,iBAE5C,EAvOgBlD,EAAAmD,OAAyBC,CAAG,0PAUPC,EAAYC,MAAMC,sFACsBF,EAAYC,MAAMC,sFAClBF,EAAYC,MAAMC,kEACtCF,EAAYC,MAAMC,mIAG7BF,EAAYC,MAAME,sFACGH,EAAYC,MAAMG,wGAG7EJ,EAAYC,MAAME,2GAIlBH,EAAYC,MAAME,sFAEwCH,EAAYC,MAAME,sLAQ3CH,EAAYC,MAAMC,iQAYdF,EAAYK,MAAMC,OAAOC,4BACpDC,EAAU,iBAAiBR,EAAYS,OAAOC,OAAOC,4HAGRX,EAAYK,MAAMC,OAAOM,sEACxBZ,EAAYK,MAAMC,OAAOM,uHAGvBZ,EAAYK,MAAMC,OAAOM,yEACxBZ,EAAYK,MAAMC,OAAOM,wGAG1BZ,EAAYK,MAAMC,OAAOM,yEACxBZ,EAAYK,MAAMC,OAAOM,yGAGxBZ,EAAYK,MAAMC,OAAOM,2EACxBZ,EAAYK,MAAMC,OAAOM,ubAiBtCZ,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMC,oEACvChB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAME,sEAC3CjB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMG,sEAC3ClB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMI,6LAOrFX,EACZ,uBAAuBR,EAAYS,OAAOC,OAAOC,sBAAsBX,EAAYS,OAAOC,OAAOC,6hBAqCvDS,EAAA,CAA9BC,EAAM,gBAAwD1E,EAAA2E,UAAA,oBAC/BF,EAAA,CAA/BC,EAAM,iBAA2D1E,EAAA2E,UAAA,qBAChCF,EAAA,CAAlCC,EAAM,YAAuD1E,EAAA2E,UAAA,kBAGlEF,EAAA,CAAXG,KAEA5E,EAAA2E,UAAA,QAAA,MASWF,EAAA,CAAXG,KAAqB5E,EAAA2E,UAAA,eAMqBF,EAAA,CAA1CG,EAAS,CAAEC,UAAW,oBAAkE7E,EAAA2E,UAAA,qBAAA,GAM5BF,EAAA,CAA5DG,EAAS,CAAEC,UAAW,oBAAqBC,KAAMC,WAAoC/E,EAAA2E,UAAA,wBAAA,GA9J3E3E,EAAgByE,EAAA,CAD5BO,EAAc,eACFhF,GCrCN,IAAMiF,EAAkBC,EAAxB,cAAiC9E,EAAKC,EAAY,UAAlDC,WAAAA,mCAqBW6E,WAAW,sBAAsBD,EAAmBE,YACpDC,EAAA7E,IAAAC,YA6BlB,CA1BqBiC,MAAAA,GACjB,OAAOC,CAAI,oEAC2B5B,EAAAN,KAAI6E,EAAA,IAAAC,8CAG5C,oEAGuBzC,GACrB,MAAM7B,EAA0B6B,EAAEE,OAAQwC,iBAAiB,CAAEC,SAAS,IAAQ,SAAMC,EAChFzE,IAAUF,EAAAN,KAAI4E,EAAA,OAEdtE,EAAAN,KAAI4E,EAAA,MAASM,KACfC,EAAuBnF,KAAM,kBAAmBM,EAAAN,KAAI4E,EAAA,KAAQM,IACxD5E,EAAAN,KAAI4E,EAAA,KAAQM,KAAO5E,EAAAN,KAAI0E,EAAA,OACzBpE,EAAAN,KAAI4E,EAAA,KAAQM,GAAK,KAIrB3E,EAAAP,KAAI4E,EAAUpE,EAAK,KAEfF,EAAAN,KAAI4E,EAAA,OACNtE,EAAAN,KAAI4E,EAAA,KAAQM,GAAK5E,EAAAN,KAAI4E,EAAA,KAAQM,IAAM5E,EAAAN,YACnCoF,EAAoBpF,KAAM,kBAAmBM,EAAAN,KAAI4E,EAAA,KAAQM,KAE7D,EAhDgBV,EAAA9B,OAAyBC,CAAG,kMAOCC,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMC,yDACvChB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAME,2DAC3CjB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMG,2DAC3ClB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMI,yKAGvDnB,EAAYC,MAAMC,4BAKxB0B,EAAAG,SAAW,EApB/BH,EAAkBC,EAAAT,EAAA,CAD9BO,EAAc,iBACFC,GCmBN,IAAMa,EAAN,cAAoC1F,EAAK2F,EAAyB,YA+GvEzF,WAAAA,GACEkB,oBAe2Bf,KAAAuF,MAA0B,UAbrD,IAAIC,EAAmBxF,KAAM,CAC3ByF,OAAQ,CACNC,WAAW,EACXC,SAAS,GAEXC,SAAUA,IAAMtF,EAAAN,KAAI6F,EAAA,IAAAC,GAAgBC,KAApB/F,OAEpB,CASSc,iBAAAA,GACPC,MAAMD,oBACNR,EAAAN,KAAI6F,EAAA,IAAAC,GAAgBC,KAApB/F,KACF,CAGmBiC,MAAAA,GACjB,OAAOC,CAAI,4GAG6B5B,EAAAN,KAAI6F,EAAA,IAAAG,8FAGJ1F,EAAAN,KAAI6F,EAAA,IAAAI,yBAG9C,4BAGwB5D,GACtBG,EAAexC,KAAM,gBAAiBkG,EAAkC7D,EAAEE,QAC5E,aAGyBF,GACvBG,EAAexC,KAAM,gBAAiBkG,EAAkC7D,EAAEE,SAC1EC,EACExC,KACA,0BAEE,OADFA,KAAKmG,cAAc,0FAGvB,eAIE,MAAMC,EAAUpG,KAAKgC,iBAAiB,cACtC,IACIqE,EADAC,GAAQ,EAGZ,IAAK,IAAIC,EAAI,EAAGA,EAAIH,EAAQI,OAAQD,IAAK,CACvC,MAAME,EAASL,EAAQG,GACnBE,EAAOC,QACTC,EAAkBF,EAAQ,UAC1BE,EAAkBF,EAAQ,UAChBH,GAAWG,EAAOG,yBAAyBpC,GAMrDmC,EAAkBF,EAAQ,UACtBJ,GACFM,EAAkBN,EAAM,SAE1BQ,EAAeJ,EAAQ,SACvBJ,EAAOI,IAVPI,EAAeJ,EAAQ,UACvBH,GAAQ,EACRO,EAAeJ,EAAQ,SACvBJ,EAAOI,EASX,CACF,EA3LEK,EAAmBnE,CAAG,mMAYR0C,EAAA3C,OAAyB,CACvC4C,EAAwB5C,OACxBC,CAAG,0FAIKC,EAAYK,MAAMC,OAAOS,0XAOzBf,EAAYC,MAAMkE,8GAIlBnE,EAAYoE,UAAUC,uXAStBrE,EAAYC,MAAMG,kGAIlBJ,EAAYC,MAAME,uWAWyBH,EAAYC,MAAMqE,2EACVtE,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMC,wEAG9FhB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAME,2EAI3CjB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMG,2EAI3ClB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMI,iRASAnB,EAAYC,MAAMqE,2EACVtE,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMC,wEAG9FhB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAME,2EAI3CjB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMG,2EAI3ClB,EAAYa,UAAUC,SAASlD,MAAMmD,MAAMI,ifAuCxBC,EAAA,CAA5BG,EAAS,CAAEgD,SAAS,KAA4C9B,EAAAnB,UAAA,aAAA,GA/HtDmB,EAAqBrB,EAAA,CADjCO,EAAc,qBACFc"}