@m3e/web 2.5.11 → 2.5.12

package/dist/form-field.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.min.js","sources":["../../src/form-field/FormFieldControl.ts","../../src/form-field/FormFieldElement.ts"],"sourcesContent":["/**\r\n * Adapted from Angular Material Form Field Control\r\n * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field-control.ts\r\n *\r\n * @license MIT\r\n * Copyright (c) 2025 Google LLC\r\n * See LICENSE file in the project root for full license text.\r\n */\r\n\r\n/** An interface which allows a control to work inside of a `M3eFormField`. */\r\nexport interface FormFieldControl extends HTMLElement {\r\n  /** A value indicating whether the control is disabled. */\r\n  disabled: boolean;\r\n\r\n  /** The value of the control. */\r\n  value?: unknown;\r\n\r\n  /** A value indicating whether the control is required. */\r\n  required?: boolean;\r\n\r\n  /** A value indicated whether the content of the control is read-only. */\r\n  readonly?: boolean;\r\n\r\n  /** A value indicating whether the form field's label should try to float. */\r\n  readonly shouldLabelFloat?: boolean;\r\n\r\n  /** The error message that would be displayed if the user submits the form, or an empty string if no error message. */\r\n  readonly validationMessage?: string;\r\n\r\n  /** The `HTMLFormElement` associated with this element. */\r\n  readonly form?: HTMLFormElement | null;\r\n\r\n  /**\r\n   * Handles the click event on the control's container.\r\n   * @param {MouseEvent} event The `MouseEvent`.\r\n   */\r\n  onContainerClick?: (event: MouseEvent) => void;\r\n\r\n  /**\r\n   * Returns `true` if the element has no validity problems; otherwise,\r\n   * returns `false`, fires an invalid event.\r\n   */\r\n  checkValidity?: () => boolean;\r\n}\r\n\r\nconst KNOWN_FORM_FIELD_TAGS = [\"m3e-input-chip-set\", \"m3e-select\"];\r\n\r\n/**\r\n * Determines whether a value is a `FormFieldControl`.\r\n * @param {unknown} value The value to test.\r\n * @returns {value is FormFieldControl} A value indicating whether `value` is a `FormFieldControl`.\r\n */\r\nexport function isFormFieldControl(value: unknown): value is FormFieldControl {\r\n  return (\r\n    value instanceof HTMLElement &&\r\n    (value instanceof HTMLInputElement ||\r\n      value instanceof HTMLTextAreaElement ||\r\n      value instanceof HTMLSelectElement ||\r\n      KNOWN_FORM_FIELD_TAGS.includes(value.tagName.toLowerCase()))\r\n  );\r\n}\r\n\r\n/**\r\n * Locates the first `FormFieldControl` in a given slot.\r\n * @param {HTMLSlotElement} slot The slot in which to locate a `FormFieldControl`.\r\n * @returns {FormFieldControl | null} The `FormFieldControl` located in `slot`.\r\n */\r\nexport function findFormFieldControl(slot: HTMLSlotElement): FormFieldControl | null {\r\n  for (const element of slot.assignedElements({ flatten: true })) {\r\n    if (isFormFieldControl(element)) {\r\n      return element;\r\n    }\r\n\r\n    const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);\r\n    while (walker.nextNode()) {\r\n      if (isFormFieldControl(walker.currentNode)) {\r\n        return walker.currentNode;\r\n      }\r\n    }\r\n  }\r\n\r\n  return null;\r\n}\r\n","/**\r\n * Adapted from Angular Material Form Field\r\n * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field.ts\r\n *\r\n * @license MIT\r\n * Copyright (c) 2025 Google LLC\r\n * See LICENSE file in the project root for full license text.\r\n */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  FocusController,\r\n  getTextContent,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  HoverController,\r\n  interceptProperty,\r\n  isReadOnlyMixin,\r\n  MutationController,\r\n  PressedController,\r\n  ReconnectedCallback,\r\n  registerStyleSheet,\r\n  ResizeController,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eAriaDescriber } from \"@m3e/web/core/a11y\";\r\n\r\nimport { findFormFieldControl, FormFieldControl } from \"./FormFieldControl\";\r\nimport { FormFieldVariant } from \"./FormFieldVariant\";\r\nimport { HideSubscriptType } from \"./HideSubscriptType\";\r\nimport { FloatLabelType } from \"./FloatLabelType\";\r\n\r\n/**\r\n * A container for form controls that applies Material Design styling and behavior.\r\n *\r\n * @description\r\n * The `m3e-form-field` component is a semantic, expressive container for form controls that anchors\r\n * label behavior, subscript messaging, and variant-specific layout. Designed according to Material Design 3\r\n * guidelines, it supports two visual variants—`outlined` and `filled`—each with dynamic elevation,\r\n * shape transitions, and adaptive color theming. The component responds to control state changes\r\n * (focus, hover, press, disabled, invalid) with smooth motion and semantic clarity, ensuring\r\n * visual hierarchy and emotional resonance.\r\n\r\n * The component is accessible by default, with ARIA annotations, contrast-safe color tokens,\r\n * and dynamic descriptions for hint and error messaging. It supports prefix and suffix content,\r\n * floating labels, and adaptive subscript visibility. When hosting a control with validation,\r\n * error messages are surfaced with `aria-invalid` and described for assistive technology.\r\n\r\n * Native form controls may not expose full state or messaging on their own. `m3e-form-field` bridges\r\n * these gaps by coordinating label floating, container styling, and subscript feedback.\r\n *\r\n * @example\r\n * The following example illustrates a basic usage of the `m3e-form-field`.\r\n * ```html\r\n * <m3e-form-field>\r\n *  <label slot=\"label\" for=\"field\">Text field</label>\r\n *  <input id=\"field\" />\r\n * </m3e-form-field>\r\n * ```\r\n * \r\n * @tag m3e-form-field\r\n *\r\n * @slot - Renders the control of the field.\r\n * @slot prefix - Renders content before the fields's control.\r\n * @slot prefix-text - Renders text before the fields's control.\r\n * @slot suffix - Renders content after the fields's control.\r\n * @slot suffix-text - Renders text after the fields's control.\r\n * @slot hint - Renders hint text in the fields's subscript, when the control is valid.\r\n * @slot error - Renders error text in the fields's subscript, when the control is invalid.\r\n *\r\n * @attr float-label - Specifies whether the label should float always or only when necessary.\r\n * @attr hide-required-marker - Whether the required marker should be hidden.\r\n * @attr hide-subscript - Whether subscript content is hidden.\r\n * @attr variant - The appearance variant of the field.\r\n *\r\n * @cssprop --m3e-form-field-font-size - Font size for the form field container text.\r\n * @cssprop --m3e-form-field-font-weight - Font weight for the form field container text.\r\n * @cssprop --m3e-form-field-line-height - Line height for the form field container text.\r\n * @cssprop --m3e-form-field-tracking - Letter spacing for the form field container text.\r\n * @cssprop --m3e-form-field-label-font-size - Font size for the floating label.\r\n * @cssprop --m3e-form-field-label-font-weight - Font weight for the floating label.\r\n * @cssprop --m3e-form-field-label-line-height - Line height for the floating label.\r\n * @cssprop --m3e-form-field-label-tracking - Letter spacing for the floating label.\r\n * @cssprop --m3e-form-field-subscript-font-size - Font size for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-font-weight - Font weight for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-line-height - Line height for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-tracking - Letter spacing for hint and error text.\r\n * @cssprop --m3e-form-field-color - Text color for the form field container.\r\n * @cssprop --m3e-form-field-subscript-color - Color for hint and error text.\r\n * @cssprop --m3e-form-field-invalid-color - Color used when the control is invalid.\r\n * @cssprop --m3e-form-field-focused-outline-color - Outline color when focused.\r\n * @cssprop --m3e-form-field-focused-color - Label color when focused.\r\n * @cssprop --m3e-form-field-outline-color - Outline color in outlined variant.\r\n * @cssprop --m3e-form-field-container-color - Background color in filled variant.\r\n * @cssprop --m3e-form-field-hover-container-color - Hover background color in filled variant.\r\n * @cssprop --m3e-form-field-width - Width of the form field container.\r\n * @cssprop --m3e-form-field-icon-size - Size of prefix and suffix icons.\r\n * @cssprop --m3e-outlined-form-field-container-shape - Corner radius for outlined container.\r\n * @cssprop --m3e-form-field-container-shape - Corner radius for filled container.\r\n * @cssprop --m3e-form-field-hover-container-opacity - Opacity for hover background in filled variant.\r\n * @cssprop --m3e-form-field-disabled-opacity - Opacity for disabled text.\r\n * @cssprop --m3e-form-field-disabled-container-opacity - Opacity for disabled container background.\r\n */\r\n@customElement(\"m3e-form-field\")\r\nexport class M3eFormFieldElement extends ReconnectedCallback(AttachInternals(LitElement)) {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-form-field input::placeholder,\r\n      m3e-form-field textarea::placeholder {\r\n        user-select: none;\r\n        color: currentColor;\r\n        transition: opacity ${DesignToken.motion.duration.extraLong1};\r\n      }\r\n      m3e-form-field[float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(\r\n          :state(--with-label),\r\n          :--with-label\r\n        )\r\n        input::placeholder,\r\n      m3e-form-field[float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(\r\n          :state(--with-label),\r\n          :--with-label\r\n        )\r\n        textarea::placeholder {\r\n        opacity: 0;\r\n        transition: opacity 0s;\r\n      }\r\n      m3e-form-field[variant=\"outlined\"] m3e-input-chip-set {\r\n        margin-block: calc(calc(3.5rem + ${DesignToken.density.calc(-3)}) / 4);\r\n      }\r\n      @media (prefers-reduced-motion) {\r\n        m3e-form-field input::placeholder,\r\n        m3e-form-field textarea::placeholder {\r\n          transition: none !important;\r\n        }\r\n      }\r\n    `);\r\n  }\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-flex;\r\n      flex-direction: column;\r\n      vertical-align: middle;\r\n      font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n      font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n      line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n      width: var(--m3e-form-field-width, 14.5rem);\r\n      color: var(--_form-field-color);\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled))) .base {\r\n      cursor: var(--_form-field-cursor);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      min-height: calc(3.5rem + ${DesignToken.density.calc(-3)});\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n      --_form-field-label-line-height: var(\r\n        --m3e-form-field-label-line-height,\r\n        ${DesignToken.typescale.standard.body.small.lineHeight}\r\n      );\r\n    }\r\n    .content {\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      min-height: var(--m3e-form-field-icon-size, 1.5rem);\r\n    }\r\n    .prefix,\r\n    .suffix {\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      user-select: none;\r\n      flex: none;\r\n      font-size: var(--m3e-form-field-icon-size, 1.5rem);\r\n    }\r\n    .prefix-text,\r\n    .suffix-text {\r\n      opacity: 1;\r\n      transition: opacity ${DesignToken.motion.duration.extraLong1};\r\n      user-select: none;\r\n      flex: none;\r\n    }\r\n    .input {\r\n      display: inline-flex;\r\n      flex-wrap: wrap;\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n    }\r\n    .label {\r\n      display: flex;\r\n      position: absolute;\r\n      pointer-events: none;\r\n      user-select: none;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      font-size: var(--m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      font-weight: var(--m3e-form-field-label-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n      line-height: var(--m3e-form-field-label-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      letter-spacing: var(--m3e-form-field-label-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n      color: var(--_form-field-label-color, inherit);\r\n      transition: ${unsafeCSS(\r\n        `top ${DesignToken.motion.duration.short4}, \r\n        font-size ${DesignToken.motion.duration.short4}, \r\n        line-height ${DesignToken.motion.duration.short4}`,\r\n      )};\r\n    }\r\n    :host(:is(:state(--with-select), :--with-select)) .label {\r\n      margin-inline-end: 1.5rem;\r\n    }\r\n    ::slotted([slot=\"label\"]) {\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n    .subscript {\r\n      display: inline-flex;\r\n      width: 100%;\r\n      margin-top: 0.25rem;\r\n      font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n      line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n      min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      color: var(--m3e-form-field-subscript-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    .error,\r\n    .hint {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([hide-subscript=\"always\"]) .subscript {\r\n      display: none;\r\n    }\r\n    :host([hide-subscript=\"auto\"]:not(:is(:state(--invalid), :--invalid))) .subscript {\r\n      opacity: 0;\r\n      margin-top: 0.25rem;\r\n      transform: translateY(-0.25rem);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short4}, \r\n        transform ${DesignToken.motion.duration.short4}`,\r\n      )};\r\n    }\r\n    :host([hide-subscript=\"auto\"]:not(:is(:state(--invalid), :--invalid)):focus-within) .subscript,\r\n    :host([hide-subscript=\"auto\"]:not(:is(:state(--invalid), :--invalid)):is(:state(--pressed), :--pressed))\r\n      .subscript {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n    :host(:is(:state(--invalid), :--invalid)) .hint {\r\n      display: none;\r\n    }\r\n    :host(:not(:is(:state(--invalid), :--invalid))) .error {\r\n      display: none;\r\n    }\r\n    ::slotted(input),\r\n    ::slotted(textarea),\r\n    ::slotted(select) {\r\n      outline: unset;\r\n      border: unset;\r\n      background-color: transparent;\r\n      box-shadow: none;\r\n      font-family: inherit;\r\n      font-size: inherit;\r\n      line-height: inherit;\r\n      letter-spacing: inherit;\r\n      color: var(--_form-field-input-color, inherit);\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      padding: unset;\r\n    }\r\n    ::slotted(textarea) {\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n    }\r\n    ::slotted(m3e-select),\r\n    ::slotted(m3e-input-chip-set) {\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n    }\r\n    :host([float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(:is(:state(--pressed), :--pressed)))\r\n      .label {\r\n      font-size: inherit;\r\n    }\r\n\r\n    :host([float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label))\r\n      .prefix-text,\r\n    :host([float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label))\r\n      .suffix-text {\r\n      opacity: 0;\r\n      transition: opacity 0s;\r\n    }\r\n    .prefix {\r\n      margin-inline-start: 1rem;\r\n    }\r\n    :host(:is(:state(--with-prefix), :--with-prefix)) .prefix {\r\n      margin-inline-end: 1rem;\r\n      margin-inline-start: 0.75rem;\r\n    }\r\n    .suffix {\r\n      margin-inline-end: 1rem;\r\n    }\r\n    :host(:is(:state(--with-suffix), :--with-suffix)) .suffix {\r\n      margin-inline-start: 0.25rem;\r\n      margin-inline-end: 0.5rem;\r\n    }\r\n    :host(:is(:state(--with-suffix), :--with-suffix):is(:state(--with-select), :--with-select)) .suffix {\r\n      margin-inline-start: unset;\r\n    }\r\n    :host(:is(:state(--with-select), :--with-select)) .suffix-text {\r\n      display: none;\r\n    }\r\n    :host([variant=\"outlined\"]) .label {\r\n      margin-top: calc(0px - var(--_form-field-label-line-height) / 2);\r\n    }\r\n    :host([variant=\"outlined\"]) .outline {\r\n      position: absolute;\r\n      display: flex;\r\n      pointer-events: none;\r\n      left: 0;\r\n      top: 0;\r\n      bottom: 0;\r\n      right: 0;\r\n    }\r\n    :host([variant=\"outlined\"]) .pseudo-label {\r\n      visibility: hidden;\r\n      margin-inline-end: 0.5rem;\r\n      font-size: var(--_form-field-label-font-size);\r\n      line-height: var(--_form-field-label-line-height);\r\n      letter-spacing: var(--_form-field-label-tracking);\r\n      max-width: 100%;\r\n      transition-property: max-width, margin-inline-end;\r\n      transition-duration: 1ms;\r\n    }\r\n    :host([variant=\"outlined\"]:is(:state(--required), :--required):not([hide-required-marker])) .pseudo-label {\r\n      margin-inline-end: 0.25rem;\r\n    }\r\n    :host(\r\n        [variant=\"outlined\"][float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(\r\n            :is(:state(--pressed), :--pressed)\r\n          )\r\n      )\r\n      .pseudo-label {\r\n      max-width: 0;\r\n      margin-inline-end: 0px;\r\n      transition-delay: ${DesignToken.motion.duration.short2};\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-start,\r\n    :host([variant=\"outlined\"]) .outline-notch,\r\n    :host([variant=\"outlined\"]) .outline-end {\r\n      box-sizing: border-box;\r\n      border-width: var(--_form-field-outline-size, 1px);\r\n      border-color: var(--_form-field-outline-color);\r\n      transition: border-color ${DesignToken.motion.duration.short4};\r\n    }\r\n    :host([variant=\"outlined\"]:not(:is(:state(--with-label), :--with-label))) .outline-notch {\r\n      display: none;\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-start {\r\n      min-width: 0.75rem;\r\n      border-top-style: solid;\r\n      border-inline-start-style: solid;\r\n      border-bottom-style: solid;\r\n      border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n      border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-notch {\r\n      border-bottom-style: solid;\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-end {\r\n      flex-grow: 1;\r\n      min-width: 1rem;\r\n      border-top-style: solid;\r\n      border-inline-end-style: solid;\r\n      border-bottom-style: solid;\r\n      border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n      border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n    }\r\n    :host([variant=\"outlined\"]:is(:state(--with-prefix), :--with-prefix)) .outline-start {\r\n      min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem);\r\n    }\r\n    :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled))) .base:hover .outline,\r\n    :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):focus-within) .outline,\r\n    :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .outline {\r\n      --_form-field-outline-size: 2px;\r\n    }\r\n    :host([variant=\"outlined\"]) .subscript {\r\n      margin-inline: 1rem;\r\n      width: calc(100% - 2rem);\r\n    }\r\n    :host([variant=\"outlined\"]) .content {\r\n      min-height: calc(3.5rem + ${DesignToken.density.calc(-3)});\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n    }\r\n    :host(\r\n        [variant=\"outlined\"][float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(\r\n            :is(:state(--pressed), :--pressed)\r\n          )\r\n      )\r\n      .label {\r\n      margin-top: unset;\r\n      line-height: calc(3.5rem + ${DesignToken.density.calc(-3)});\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n    }\r\n    :host([variant=\"filled\"]) .base {\r\n      --_select-arrow-margin-top: calc(\r\n        0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1))\r\n      );\r\n    }\r\n    :host([variant=\"filled\"]) .base::before {\r\n      content: \"\";\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      pointer-events: none;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      border-bottom-style: solid;\r\n      border-width: 1px;\r\n      border-radius: var(--m3e-form-field-container-shape, ${DesignToken.shape.corner.extraSmallTop});\r\n      border-color: var(--_form-field-outline-color);\r\n      background-color: var(--_form-field-container-color);\r\n    }\r\n    :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled))) .base:hover::before,\r\n    :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):focus-within) .base::before,\r\n    :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed))\r\n      .base::before {\r\n      border-width: 3px;\r\n    }\r\n    :host([variant=\"filled\"]) .base::after {\r\n      content: \"\";\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      pointer-events: none;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      background-color: var(--_form-field-hover-container-color);\r\n      transition: background-color ${DesignToken.motion.duration.short4};\r\n    }\r\n    :host([variant=\"filled\"]) .subscript {\r\n      margin-inline: 1rem;\r\n      width: calc(100% - 2rem);\r\n    }\r\n    :host([variant=\"filled\"]) .content {\r\n      padding-top: calc(1.5rem + ${DesignToken.density.calc(-3)});\r\n      margin-bottom: 0.5rem;\r\n    }\r\n    :host([variant=\"filled\"]) .label {\r\n      top: max(0px, calc(0.5rem + ${DesignToken.density.calc(-3)}));\r\n    }\r\n    :host(\r\n        [variant=\"filled\"][float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(\r\n            :is(:state(--pressed), :--pressed)\r\n          )\r\n      )\r\n      .label {\r\n      top: 0px;\r\n      line-height: calc(3.5rem + ${DesignToken.density.calc(-3)} - 0.0625rem);\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled)):not(:focus-within):not(:is(:state(--pressed), :--pressed)))\r\n      .base:hover {\r\n      --_form-field-hover-container-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-form-field-hover-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-form-field-hover-container-opacity, 8%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) {\r\n      color: var(--m3e-form-field-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)))\r\n      .base {\r\n      --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.outline});\r\n    }\r\n    :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base {\r\n      --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(\r\n        [variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):not(\r\n            :is(:state(--invalid), :--invalid)\r\n          ):focus-within\r\n      )\r\n      .base,\r\n    :host(\r\n        [variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is(\r\n            :state(--pressed),\r\n            :--pressed\r\n          )\r\n      )\r\n      .base,\r\n    :host(\r\n        [variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):not(\r\n            :is(:state(--invalid), :--invalid)\r\n          ):focus-within\r\n      )\r\n      .base,\r\n    :host(\r\n        [variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is(\r\n            :state(--pressed),\r\n            :--pressed\r\n          )\r\n      )\r\n      .base {\r\n      --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken.color.primary});\r\n      --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken.color.primary});\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled))) .base {\r\n      --_form-field-container-color: var(\r\n        --m3e-form-field-container-color,\r\n        ${DesignToken.color.surfaceContainerHighest}\r\n      );\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .base {\r\n      --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n      --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .subscript {\r\n      color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n    }\r\n    :host(:is(:state(--disabled), :--disabled)) {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-form-field-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:is(:state(--disabled), :--disabled)) .base {\r\n      --_form-field-container-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-form-field-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-form-field-disabled-container-opacity, 4%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:is(:state(--no-animate), :--no-animate)) *,\r\n    :host(:is(:state(--no-animate), :--no-animate)) *::before,\r\n    :host(:is(:state(--no-animate), :--no-animate)) *::after {\r\n      transition: none !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([variant=\"filled\"]) .base::after {\r\n        transition: none;\r\n      }\r\n      :host {\r\n        --_form-field-outline-color: CanvasText;\r\n      }\r\n      :host(:is(:state(--disabled), :--disabled)) {\r\n        --_form-field-input-color: GrayText;\r\n        --_form-field-color: GrayText;\r\n        --_form-field-label-color: GrayText;\r\n        --_form-field-outline-color: GrayText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base::before,\r\n      .prefix-text,\r\n      .suffix-text,\r\n      .label,\r\n      .subscript,\r\n      .outline-start,\r\n      .outline-notch,\r\n      .outline-end,\r\n      .pseudo-label {\r\n        transition: none !important;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #control: FormFieldControl | null = null;\r\n  /** @private */ #removeValueInterceptor?: () => void;\r\n  /** @private */ readonly #formResetHandler = () => this.#handleFormReset();\r\n  /** @private */ readonly #controlInvalidHandler = () => this.#handleControlInvalid();\r\n\r\n  /** @private */\r\n  readonly #controlMutationController = new MutationController(this, {\r\n    target: null,\r\n    config: { attributeFilter: [\"disabled\", \"readonly\", \"required\"] },\r\n    callback: () => this.notifyControlStateChange(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    callback: () => this.#handlePrefixResize(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #focusController = new FocusController(this, {\r\n    target: null,\r\n    callback: (focused) => {\r\n      focused = focused && !(this.#control?.disabled ?? true);\r\n      setCustomState(this, \"--no-animate\", false);\r\n      this.#focused = focused;\r\n      if (focused) {\r\n        setCustomState(this, \"--float-label\", true);\r\n      } else {\r\n        this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n        this.notifyControlStateChange();\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ @query(\".base\") private readonly _base!: HTMLElement;\r\n  /** @private */ @query(\".prefix\") private readonly _prefix!: HTMLElement;\r\n  /** @private */ @query(\".error\") private readonly _error!: HTMLElement;\r\n  /** @private */ @query(\".hint\") private readonly _hint!: HTMLElement;\r\n\r\n  /** @private */\r\n  readonly #hintMutationController = new MutationController(this, {\r\n    target: null,\r\n    config: { childList: true, subtree: true },\r\n    callback: () => this.#handleHintChange(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #errorMutationController = new MutationController(this, {\r\n    target: null,\r\n    config: { childList: true, subtree: true },\r\n    callback: () => this.#handleErrorChange(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    callback: (pressed) => setCustomState(this, \"--pressed\", pressed && !(this.#control?.disabled ?? true)),\r\n  });\r\n\r\n  /** @private */ #focused = false;\r\n  /** @private */ @state() private _pseudoLabel = \"\";\r\n  /** @private */ @state() private _required = false;\r\n  /** @private */ @state() private _invalid = false;\r\n  /** @private */ @state() private _validationMessage = \"\";\r\n  /** @private */ #hintText = \"\";\r\n  /** @private */ #errorText = \"\";\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new HoverController(this, { callback: () => setCustomState(this, \"--no-animate\", false) });\r\n  }\r\n\r\n  /** @private */\r\n  get #shouldFloatLabel(): boolean {\r\n    return this.#control?.shouldLabelFloat !== undefined\r\n      ? this.#control.shouldLabelFloat === true\r\n      : typeof this.#control?.value == \"string\" && this.#control.value.length > 0;\r\n  }\r\n\r\n  /** A reference to the element used to anchor dropdown menus. */\r\n  get menuAnchor() {\r\n    return this._base;\r\n  }\r\n\r\n  /** A reference to the hosted form field control. */\r\n  get control() {\r\n    return this.#control;\r\n  }\r\n\r\n  /**\r\n   * The appearance variant of the field.\r\n   * @default \"outlined\"\r\n   */\r\n  @property({ reflect: true }) variant: FormFieldVariant = \"outlined\";\r\n\r\n  /**\r\n   * Whether the required marker should be hidden.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-required-marker\", type: Boolean, reflect: true }) hideRequiredMarker = false;\r\n\r\n  /**\r\n   * Whether subscript content is hidden.\r\n   * @default \"auto\"\r\n   */\r\n  @property({ attribute: \"hide-subscript\", reflect: true }) hideSubscript: HideSubscriptType = \"auto\";\r\n\r\n  /**\r\n   * Specifies whether the label should float always or only when necessary.\r\n   * @default \"auto\"\r\n   */\r\n  @property({ attribute: \"float-label\", reflect: true }) floatLabel: FloatLabelType = \"auto\";\r\n\r\n  /**\r\n   * Notifies the form field that the state of the hosted `control` has changed.\r\n   * @param {boolean} [checkValidity=false] Whether to check validity.\r\n   */\r\n  notifyControlStateChange(checkValidity: boolean = false): void {\r\n    this._required = this.#control?.required === true;\r\n    setCustomState(this, \"--required\", this._required);\r\n    setCustomState(this, \"--disabled\", this.#control?.disabled === true);\r\n    setCustomState(this, \"--readonly\", isReadOnlyMixin(this.#control) && this.#control.readOnly === true);\r\n    if (this.floatLabel === \"auto\") {\r\n      setCustomState(this, \"--float-label\", this.#shouldFloatLabel || this.#focused);\r\n    }\r\n\r\n    if (checkValidity) {\r\n      this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n    }\r\n\r\n    setCustomState(this, \"--invalid\", this._invalid);\r\n\r\n    this._validationMessage = this.#control?.validationMessage ?? \"\";\r\n    if (!this.isUpdatePending) {\r\n      this.performUpdate();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    // Label animations are disabled on initial paint.\r\n    setCustomState(this, \"--no-animate\", true);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#changeControl(null);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"_invalid\") && this.#control) {\r\n      this.#control.ariaInvalid = this._invalid ? \"true\" : null;\r\n\r\n      if (this.#errorText) {\r\n        if (this._invalid) {\r\n          M3eAriaDescriber.describe(this.#control, this.#errorText);\r\n        } else {\r\n          M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" @click=\"${this.#handleContainerClick}\">\r\n        ${this.variant === \"outlined\"\r\n          ? html`<div class=\"outline\" aria-hidden=\"true\">\r\n              <div class=\"outline-start\"></div>\r\n              <div class=\"outline-notch\">\r\n                <div class=\"pseudo-label\">\r\n                  ${this._pseudoLabel} ${!this.hideRequiredMarker && this._required ? html`&nbsp;*` : nothing}\r\n                </div>\r\n              </div>\r\n              <div class=\"outline-end\"></div>\r\n            </div>`\r\n          : nothing}\r\n        <div class=\"prefix\">\r\n          <slot name=\"prefix\" @slotchange=\"${this.#handlePrefixSlotChange}\"></slot>\r\n        </div>\r\n        <div class=\"content\">\r\n          <span class=\"prefix-text\"><slot name=\"prefix-text\"></slot></span>\r\n          <span class=\"input\">\r\n            <slot @slotchange=\"${this.#handleSlotChange}\" @change=\"${this.#handleControlChange}\"></slot>\r\n          </span>\r\n          <span class=\"suffix-text\"><slot name=\"suffix-text\"></slot></span>\r\n          <span class=\"label\">\r\n            <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n            ${!this.hideRequiredMarker && this._required\r\n              ? html`<span class=\"required-marker\" aria-hidden=\"true\">&nbsp;*</span>`\r\n              : nothing}\r\n          </span>\r\n        </div>\r\n        <div\r\n          class=\"suffix\"\r\n          @click=\"${this.#stopPropagation}\"\r\n          @focusin=\"${this.#stopPropagation}\"\r\n          @focusout=\"${this.#stopPropagation}\"\r\n          @pointerdown=\"${this.#stopPropagation}\"\r\n          @keydown=\"${this.#stopPropagation}\"\r\n          @keyup=\"${this.#stopPropagation}\"\r\n        >\r\n          <slot name=\"suffix\" @slotchange=\"${this.#handleSuffixSlotChange}\"></slot>\r\n        </div>\r\n      </div>\r\n      <span class=\"subscript\" aria-hidden=\"true\">\r\n        <span class=\"error\"><slot name=\"error\">${this._validationMessage}</slot></span>\r\n        <span class=\"hint\"><slot name=\"hint\"></slot></span>\r\n      </span>`;\r\n  }\r\n\r\n  /** @private */\r\n  #initialize(): void {\r\n    this.#focusController.observe(this._base);\r\n    this.#pressedController.observe(this._base);\r\n\r\n    this.#hintMutationController.observe(this._hint);\r\n    this.#handleHintChange();\r\n\r\n    this.#errorMutationController.observe(this._error);\r\n    this.#handleErrorChange();\r\n  }\r\n\r\n  /** @private */\r\n  #stopPropagation(e: Event): void {\r\n    e.stopImmediatePropagation();\r\n    e.stopPropagation();\r\n  }\r\n\r\n  /** @private */\r\n  #handleLabelSlotChange(e: Event): void {\r\n    const assignedElements = (<HTMLSlotElement>e.target).assignedElements({ flatten: true });\r\n    setCustomState(this, \"--with-label\", assignedElements.length > 0);\r\n    this._pseudoLabel = assignedElements[0]?.textContent ?? \"\";\r\n  }\r\n\r\n  /** @private */\r\n  #handlePrefixSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-prefix\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n    this.#resizeController.observe(this._prefix);\r\n  }\r\n\r\n  /** @private */\r\n  #handleSuffixSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-suffix\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handlePrefixResize(): void {\r\n    if (this.variant === \"outlined\") {\r\n      this._base.style.setProperty(\"--_prefix-width\", `${this._prefix.clientWidth}px`);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#changeControl(findFormFieldControl(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleContainerClick(e: MouseEvent): void {\r\n    if (this.#control && !this.#focused && !this.#control.disabled) {\r\n      if (this.#control.onContainerClick) {\r\n        this.#control.onContainerClick(e);\r\n      } else {\r\n        this.#control.focus();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleControlInvalid(): void {\r\n    this._invalid = true;\r\n    this.notifyControlStateChange();\r\n  }\r\n\r\n  /** @private */\r\n  #handleControlChange(): void {\r\n    this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n    this.notifyControlStateChange();\r\n  }\r\n\r\n  /** @private */\r\n  #handleFormReset(): void {\r\n    this._invalid = false;\r\n    setTimeout(() => this.notifyControlStateChange());\r\n  }\r\n\r\n  /** @private */\r\n  #changeControl(control: FormFieldControl | null): void {\r\n    if (this.#control === control) return;\r\n    if (this.#control) {\r\n      if (this.#hintText) {\r\n        M3eAriaDescriber.removeDescription(this.#control, this.#hintText);\r\n      }\r\n      if (this.#errorText) {\r\n        M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n      }\r\n\r\n      this.#controlMutationController.unobserve(this.#control);\r\n      this.#control.removeEventListener(\"invalid\", this.#controlInvalidHandler);\r\n      this.#control.form?.removeEventListener(\"reset\", this.#formResetHandler);\r\n      this.#removeValueInterceptor?.();\r\n      this.#removeValueInterceptor = undefined;\r\n    }\r\n    this.#control = control;\r\n\r\n    if ([\"INPUT\", \"TEXTAREA\"].includes(this.#control?.tagName ?? \"\")) {\r\n      this._base.style.setProperty(\"--_form-field-cursor\", \"text\");\r\n    } else {\r\n      this._base.style.removeProperty(\"--_form-field-cursor\");\r\n    }\r\n\r\n    setCustomState(this, \"--with-select\", this.#control?.tagName === \"M3E-SELECT\");\r\n    if (hasCustomState(this, \"--with-select\")) {\r\n      this._base.style.setProperty(\"--_form-field-cursor\", \"pointer\");\r\n    }\r\n\r\n    if (this.#control) {\r\n      this.#controlMutationController.observe(this.#control);\r\n      this.#control.addEventListener(\"invalid\", this.#controlInvalidHandler);\r\n      this.#control.form?.addEventListener(\"reset\", this.#formResetHandler);\r\n      this.#control.removeAttribute(\"aria-invalid\");\r\n\r\n      if (this.#hintText) {\r\n        M3eAriaDescriber.describe(this.#control, this.#hintText);\r\n      }\r\n\r\n      this.notifyControlStateChange();\r\n\r\n      const tagname = this.#control.tagName.toLowerCase();\r\n      if (tagname.startsWith(\"m3e-\") && !customElements.get(tagname)) {\r\n        customElements.whenDefined(tagname).then(() => this.#bindValueInterceptor());\r\n      } else {\r\n        this.#bindValueInterceptor();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #bindValueInterceptor(): void {\r\n    if (!this.#control) return;\r\n    this.#removeValueInterceptor = interceptProperty(this.#control, \"value\", {\r\n      set: (value, setter) => {\r\n        setter(value);\r\n        this.notifyControlStateChange(true);\r\n      },\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleHintChange(): void {\r\n    const hintText = getTextContent(this._hint, true);\r\n    if (hintText === this.#hintText) return;\r\n\r\n    if (this.#control && this.#hintText) {\r\n      M3eAriaDescriber.removeDescription(this.#control, this.#hintText);\r\n    }\r\n\r\n    this.#hintText = hintText;\r\n\r\n    if (this.#control && this.#hintText) {\r\n      M3eAriaDescriber.describe(this.#control, this.#hintText);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleErrorChange(): void {\r\n    const errorText = getTextContent(this._error, true);\r\n    if (errorText === this.#errorText) return;\r\n\r\n    if (this.#control && this.#errorText) {\r\n      M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n    }\r\n\r\n    this.#errorText = errorText;\r\n\r\n    if (this.#control && this.#errorText && this._invalid) {\r\n      M3eAriaDescriber.describe(this.#control, this.#errorText);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-form-field\": M3eFormFieldElement;\r\n  }\r\n}\r\n"],"names":["KNOWN_FORM_FIELD_TAGS","isFormFieldControl","value","HTMLElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","includes","tagName","toLowerCase","findFormFieldControl","slot","element","assignedElements","flatten","walker","document","createTreeWalker","NodeFilter","SHOW_ELEMENT","nextNode","currentNode","M3eFormFieldElement","ReconnectedCallback","AttachInternals","LitElement","constructor","super","_M3eFormFieldElement_control","set","this","_M3eFormFieldElement_removeValueInterceptor","_M3eFormFieldElement_formResetHandler","__classPrivateFieldGet","_M3eFormFieldElement_instances","_M3eFormFieldElement_handleFormReset","call","_M3eFormFieldElement_controlInvalidHandler","_M3eFormFieldElement_handleControlInvalid","_M3eFormFieldElement_controlMutationController","MutationController","target","config","attributeFilter","callback","notifyControlStateChange","_M3eFormFieldElement_resizeController","ResizeController","_M3eFormFieldElement_handlePrefixResize","_M3eFormFieldElement_focusController","FocusController","focused","disabled","setCustomState","__classPrivateFieldSet","_M3eFormFieldElement_focused","_invalid","checkValidity","_M3eFormFieldElement_hintMutationController","childList","subtree","_M3eFormFieldElement_handleHintChange","_M3eFormFieldElement_errorMutationController","_M3eFormFieldElement_handleErrorChange","_M3eFormFieldElement_pressedController","PressedController","pressed","_pseudoLabel","_required","_validationMessage","_M3eFormFieldElement_hintText","_M3eFormFieldElement_errorText","variant","hideRequiredMarker","hideSubscript","floatLabel","HoverController","menuAnchor","_base","control","required","isReadOnlyMixin","readOnly","_M3eFormFieldElement_shouldFloatLabel_get","validationMessage","isUpdatePending","performUpdate","connectedCallback","disconnectedCallback","_M3eFormFieldElement_changeControl","reconnectedCallback","_M3eFormFieldElement_initialize","firstUpdated","_changedProperties","update","changedProperties","has","ariaInvalid","M3eAriaDescriber","describe","removeDescription","render","html","_M3eFormFieldElement_handleContainerClick","nothing","_M3eFormFieldElement_handlePrefixSlotChange","_M3eFormFieldElement_handleSlotChange","_M3eFormFieldElement_handleControlChange","_M3eFormFieldElement_handleLabelSlotChange","_M3eFormFieldElement_stopPropagation","_M3eFormFieldElement_handleSuffixSlotChange","undefined","shouldLabelFloat","length","observe","_hint","_error","e","stopImmediatePropagation","stopPropagation","textContent","hasAssignedNodes","_prefix","style","setProperty","clientWidth","onContainerClick","focus","setTimeout","unobserve","removeEventListener","form","removeProperty","hasCustomState","addEventListener","removeAttribute","tagname","startsWith","customElements","get","whenDefined","then","_M3eFormFieldElement_bindValueInterceptor","interceptProperty","setter","hintText","getTextContent","errorText","registerStyleSheet","css","DesignToken","motion","duration","extraLong1","density","calc","styles","typescale","standard","body","large","fontSize","fontWeight","lineHeight","tracking","small","unsafeCSS","short4","color","onSurfaceVariant","scrollbar","thinWidth","short2","shape","corner","extraSmall","extraSmallTop","onSurface","outline","primary","surfaceContainerHighest","error","__decorate","query","prototype","state","property","reflect","attribute","type","Boolean","customElement"],"mappings":"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"}
+{"version":3,"file":"form-field.min.js","sources":["../../src/form-field/FormFieldControl.ts","../../src/form-field/FormFieldElement.ts"],"sourcesContent":["/**\r\n * Adapted from Angular Material Form Field Control\r\n * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field-control.ts\r\n *\r\n * @license MIT\r\n * Copyright (c) 2025 Google LLC\r\n * See LICENSE file in the project root for full license text.\r\n */\r\n\r\n/** An interface which allows a control to work inside of a `M3eFormField`. */\r\nexport interface FormFieldControl extends HTMLElement {\r\n  /** A value indicating whether the control is disabled. */\r\n  disabled: boolean;\r\n\r\n  /** The value of the control. */\r\n  value?: unknown;\r\n\r\n  /** A value indicating whether the control is required. */\r\n  required?: boolean;\r\n\r\n  /** A value indicated whether the content of the control is read-only. */\r\n  readonly?: boolean;\r\n\r\n  /** A value indicating whether the form field's label should try to float. */\r\n  readonly shouldLabelFloat?: boolean;\r\n\r\n  /** The error message that would be displayed if the user submits the form, or an empty string if no error message. */\r\n  readonly validationMessage?: string;\r\n\r\n  /** The `HTMLFormElement` associated with this element. */\r\n  readonly form?: HTMLFormElement | null;\r\n\r\n  /**\r\n   * Handles the click event on the control's container.\r\n   * @param {MouseEvent} event The `MouseEvent`.\r\n   */\r\n  onContainerClick?: (event: MouseEvent) => void;\r\n\r\n  /**\r\n   * Returns `true` if the element has no validity problems; otherwise,\r\n   * returns `false`, fires an invalid event.\r\n   */\r\n  checkValidity?: () => boolean;\r\n}\r\n\r\nconst KNOWN_FORM_FIELD_TAGS = [\"m3e-input-chip-set\", \"m3e-select\"];\r\n\r\n/**\r\n * Determines whether a value is a `FormFieldControl`.\r\n * @param {unknown} value The value to test.\r\n * @returns {value is FormFieldControl} A value indicating whether `value` is a `FormFieldControl`.\r\n */\r\nexport function isFormFieldControl(value: unknown): value is FormFieldControl {\r\n  return (\r\n    value instanceof HTMLElement &&\r\n    (value instanceof HTMLInputElement ||\r\n      value instanceof HTMLTextAreaElement ||\r\n      value instanceof HTMLSelectElement ||\r\n      KNOWN_FORM_FIELD_TAGS.includes(value.tagName.toLowerCase()))\r\n  );\r\n}\r\n\r\n/**\r\n * Locates the first `FormFieldControl` in a given slot.\r\n * @param {HTMLSlotElement} slot The slot in which to locate a `FormFieldControl`.\r\n * @returns {FormFieldControl | null} The `FormFieldControl` located in `slot`.\r\n */\r\nexport function findFormFieldControl(slot: HTMLSlotElement): FormFieldControl | null {\r\n  for (const element of slot.assignedElements({ flatten: true })) {\r\n    if (isFormFieldControl(element)) {\r\n      return element;\r\n    }\r\n\r\n    const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);\r\n    while (walker.nextNode()) {\r\n      if (isFormFieldControl(walker.currentNode)) {\r\n        return walker.currentNode;\r\n      }\r\n    }\r\n  }\r\n\r\n  return null;\r\n}\r\n","/**\r\n * Adapted from Angular Material Form Field\r\n * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field.ts\r\n *\r\n * @license MIT\r\n * Copyright (c) 2025 Google LLC\r\n * See LICENSE file in the project root for full license text.\r\n */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  FocusController,\r\n  getTextContent,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  HoverController,\r\n  interceptProperty,\r\n  isReadOnlyMixin,\r\n  MutationController,\r\n  PressedController,\r\n  ReconnectedCallback,\r\n  registerStyleSheet,\r\n  ResizeController,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eAriaDescriber } from \"@m3e/web/core/a11y\";\r\n\r\nimport { findFormFieldControl, FormFieldControl } from \"./FormFieldControl\";\r\nimport { FormFieldVariant } from \"./FormFieldVariant\";\r\nimport { HideSubscriptType } from \"./HideSubscriptType\";\r\nimport { FloatLabelType } from \"./FloatLabelType\";\r\n\r\n/**\r\n * A container for form controls that applies Material Design styling and behavior.\r\n *\r\n * @description\r\n * The `m3e-form-field` component is a semantic, expressive container for form controls that anchors\r\n * label behavior, subscript messaging, and variant-specific layout. Designed according to Material Design 3\r\n * guidelines, it supports two visual variants—`outlined` and `filled`—each with dynamic elevation,\r\n * shape transitions, and adaptive color theming. The component responds to control state changes\r\n * (focus, hover, press, disabled, invalid) with smooth motion and semantic clarity, ensuring\r\n * visual hierarchy and emotional resonance.\r\n\r\n * The component is accessible by default, with ARIA annotations, contrast-safe color tokens,\r\n * and dynamic descriptions for hint and error messaging. It supports prefix and suffix content,\r\n * floating labels, and adaptive subscript visibility. When hosting a control with validation,\r\n * error messages are surfaced with `aria-invalid` and described for assistive technology.\r\n\r\n * Native form controls may not expose full state or messaging on their own. `m3e-form-field` bridges\r\n * these gaps by coordinating label floating, container styling, and subscript feedback.\r\n *\r\n * @example\r\n * The following example illustrates a basic usage of the `m3e-form-field`.\r\n * ```html\r\n * <m3e-form-field>\r\n *  <label slot=\"label\" for=\"field\">Text field</label>\r\n *  <input id=\"field\" />\r\n * </m3e-form-field>\r\n * ```\r\n * \r\n * @tag m3e-form-field\r\n *\r\n * @slot - Renders the control of the field.\r\n * @slot prefix - Renders content before the fields's control.\r\n * @slot prefix-text - Renders text before the fields's control.\r\n * @slot suffix - Renders content after the fields's control.\r\n * @slot suffix-text - Renders text after the fields's control.\r\n * @slot hint - Renders hint text in the fields's subscript, when the control is valid.\r\n * @slot error - Renders error text in the fields's subscript, when the control is invalid.\r\n *\r\n * @attr float-label - Specifies whether the label should float always or only when necessary.\r\n * @attr hide-required-marker - Whether the required marker should be hidden.\r\n * @attr hide-subscript - Whether subscript content is hidden.\r\n * @attr variant - The appearance variant of the field.\r\n *\r\n * @cssprop --m3e-form-field-font-size - Font size for the form field container text.\r\n * @cssprop --m3e-form-field-font-weight - Font weight for the form field container text.\r\n * @cssprop --m3e-form-field-line-height - Line height for the form field container text.\r\n * @cssprop --m3e-form-field-tracking - Letter spacing for the form field container text.\r\n * @cssprop --m3e-form-field-label-font-size - Font size for the floating label.\r\n * @cssprop --m3e-form-field-label-font-weight - Font weight for the floating label.\r\n * @cssprop --m3e-form-field-label-line-height - Line height for the floating label.\r\n * @cssprop --m3e-form-field-label-tracking - Letter spacing for the floating label.\r\n * @cssprop --m3e-form-field-subscript-font-size - Font size for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-font-weight - Font weight for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-line-height - Line height for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-tracking - Letter spacing for hint and error text.\r\n * @cssprop --m3e-form-field-color - Text color for the form field container.\r\n * @cssprop --m3e-form-field-subscript-color - Color for hint and error text.\r\n * @cssprop --m3e-form-field-invalid-color - Color used when the control is invalid.\r\n * @cssprop --m3e-form-field-focused-outline-color - Outline color when focused.\r\n * @cssprop --m3e-form-field-focused-color - Label color when focused.\r\n * @cssprop --m3e-form-field-outline-color - Outline color in outlined variant.\r\n * @cssprop --m3e-form-field-container-color - Background color in filled variant.\r\n * @cssprop --m3e-form-field-hover-container-color - Hover background color in filled variant.\r\n * @cssprop --m3e-form-field-width - Width of the form field container.\r\n * @cssprop --m3e-form-field-icon-size - Size of prefix and suffix icons.\r\n * @cssprop --m3e-outlined-form-field-container-shape - Corner radius for outlined container.\r\n * @cssprop --m3e-form-field-container-shape - Corner radius for filled container.\r\n * @cssprop --m3e-form-field-hover-container-opacity - Opacity for hover background in filled variant.\r\n * @cssprop --m3e-form-field-disabled-opacity - Opacity for disabled text.\r\n * @cssprop --m3e-form-field-disabled-container-opacity - Opacity for disabled container background.\r\n */\r\n@customElement(\"m3e-form-field\")\r\nexport class M3eFormFieldElement extends ReconnectedCallback(AttachInternals(LitElement)) {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-form-field input::placeholder,\r\n      m3e-form-field textarea::placeholder {\r\n        user-select: none;\r\n        color: currentColor;\r\n        transition: opacity ${DesignToken.motion.duration.extraLong1};\r\n      }\r\n      m3e-form-field[float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(\r\n          :state(--with-label),\r\n          :--with-label\r\n        )\r\n        input::placeholder,\r\n      m3e-form-field[float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(\r\n          :state(--with-label),\r\n          :--with-label\r\n        )\r\n        textarea::placeholder {\r\n        opacity: 0;\r\n        transition: opacity 0s;\r\n      }\r\n      m3e-form-field[variant=\"outlined\"] m3e-input-chip-set {\r\n        margin-block: calc(calc(3.5rem + ${DesignToken.density.calc(-3)}) / 4);\r\n      }\r\n      @media (prefers-reduced-motion) {\r\n        m3e-form-field input::placeholder,\r\n        m3e-form-field textarea::placeholder {\r\n          transition: none !important;\r\n        }\r\n      }\r\n    `);\r\n  }\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-flex;\r\n      flex-direction: column;\r\n      vertical-align: middle;\r\n      font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n      font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n      line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n      width: var(--m3e-form-field-width, 14.5rem);\r\n      color: var(--_form-field-color);\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled))) .base {\r\n      cursor: var(--_form-field-cursor);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      min-height: calc(3.5rem + ${DesignToken.density.calc(-3)});\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n      --_form-field-label-line-height: var(\r\n        --m3e-form-field-label-line-height,\r\n        ${DesignToken.typescale.standard.body.small.lineHeight}\r\n      );\r\n    }\r\n    .content {\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      min-height: var(--m3e-form-field-icon-size, 1.5rem);\r\n    }\r\n    .prefix,\r\n    .suffix {\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      user-select: none;\r\n      flex: none;\r\n      font-size: var(--m3e-form-field-icon-size, 1.5rem);\r\n    }\r\n    .prefix-text,\r\n    .suffix-text {\r\n      opacity: 1;\r\n      transition: opacity ${DesignToken.motion.duration.extraLong1};\r\n      user-select: none;\r\n      flex: none;\r\n    }\r\n    .input {\r\n      display: inline-flex;\r\n      flex-wrap: wrap;\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n    }\r\n    .label {\r\n      display: flex;\r\n      position: absolute;\r\n      pointer-events: none;\r\n      user-select: none;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      font-size: var(--m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      font-weight: var(--m3e-form-field-label-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n      line-height: var(--m3e-form-field-label-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      letter-spacing: var(--m3e-form-field-label-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n      color: var(--_form-field-label-color, inherit);\r\n      transition: ${unsafeCSS(\r\n        `top ${DesignToken.motion.duration.short4}, \r\n        font-size ${DesignToken.motion.duration.short4}, \r\n        line-height ${DesignToken.motion.duration.short4}`,\r\n      )};\r\n    }\r\n    :host(:is(:state(--with-select), :--with-select)) .label {\r\n      margin-inline-end: 1.5rem;\r\n    }\r\n    ::slotted([slot=\"label\"]) {\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n    .subscript {\r\n      display: inline-flex;\r\n      width: 100%;\r\n      margin-top: 0.25rem;\r\n      font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n      line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n      min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      color: var(--m3e-form-field-subscript-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    .error,\r\n    .hint {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([hide-subscript=\"always\"]) .subscript {\r\n      display: none;\r\n    }\r\n    :host([hide-subscript=\"auto\"]:not(:is(:state(--invalid), :--invalid))) .subscript {\r\n      opacity: 0;\r\n      margin-top: 0.25rem;\r\n      transform: translateY(-0.25rem);\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short4}, \r\n        transform ${DesignToken.motion.duration.short4}`,\r\n      )};\r\n    }\r\n    :host([hide-subscript=\"auto\"]:not(:is(:state(--invalid), :--invalid)):focus-within) .subscript,\r\n    :host([hide-subscript=\"auto\"]:not(:is(:state(--invalid), :--invalid)):is(:state(--pressed), :--pressed))\r\n      .subscript {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n    :host(:is(:state(--invalid), :--invalid)) .hint {\r\n      display: none;\r\n    }\r\n    :host(:not(:is(:state(--invalid), :--invalid))) .error {\r\n      display: none;\r\n    }\r\n    ::slotted(input),\r\n    ::slotted(textarea),\r\n    ::slotted(select) {\r\n      outline: unset;\r\n      border: unset;\r\n      background-color: transparent;\r\n      box-shadow: none;\r\n      font-family: inherit;\r\n      font-size: inherit;\r\n      line-height: inherit;\r\n      letter-spacing: inherit;\r\n      color: var(--_form-field-input-color, inherit);\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      padding: unset;\r\n    }\r\n    ::slotted(textarea) {\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n    }\r\n    ::slotted(m3e-select),\r\n    ::slotted(m3e-input-chip-set) {\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n    }\r\n    :host([float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(:is(:state(--pressed), :--pressed)))\r\n      .label {\r\n      font-size: inherit;\r\n    }\r\n\r\n    :host([float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label))\r\n      .prefix-text,\r\n    :host([float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label))\r\n      .suffix-text {\r\n      opacity: 0;\r\n      transition: opacity 0s;\r\n    }\r\n    .prefix {\r\n      margin-inline-start: 1rem;\r\n    }\r\n    :host(:is(:state(--with-prefix), :--with-prefix)) .prefix {\r\n      margin-inline-end: 1rem;\r\n      margin-inline-start: 0.75rem;\r\n    }\r\n    .suffix {\r\n      margin-inline-end: 1rem;\r\n    }\r\n    :host(:is(:state(--with-suffix), :--with-suffix)) .suffix {\r\n      margin-inline-start: 0.25rem;\r\n      margin-inline-end: 0.5rem;\r\n    }\r\n    :host(:is(:state(--with-suffix), :--with-suffix):is(:state(--with-select), :--with-select)) .suffix {\r\n      margin-inline-start: unset;\r\n    }\r\n    :host(:is(:state(--with-select), :--with-select)) .suffix-text {\r\n      display: none;\r\n    }\r\n    :host([variant=\"outlined\"]) .label {\r\n      margin-top: calc(0px - var(--_form-field-label-line-height) / 2);\r\n    }\r\n    :host([variant=\"outlined\"]) .outline {\r\n      position: absolute;\r\n      display: flex;\r\n      pointer-events: none;\r\n      left: 0;\r\n      top: 0;\r\n      bottom: 0;\r\n      right: 0;\r\n    }\r\n    :host([variant=\"outlined\"]) .pseudo-label {\r\n      visibility: hidden;\r\n      margin-inline-end: 0.5rem;\r\n      font-size: var(--_form-field-label-font-size);\r\n      line-height: var(--_form-field-label-line-height);\r\n      letter-spacing: var(--_form-field-label-tracking);\r\n      max-width: 100%;\r\n      transition-property: max-width, margin-inline-end;\r\n      transition-duration: 1ms;\r\n    }\r\n    :host(\r\n        :is(:state(--required), :--required):not([hide-required-marker]):not(:is(:state(--with-label), :--with-label))\r\n      )\r\n      .pseudo-label,\r\n    :host(\r\n        :is(:state(--required), :--required):not([hide-required-marker]):not(:is(:state(--with-label), :--with-label))\r\n      )\r\n      .required-marker {\r\n      display: none;\r\n    }\r\n    :host([variant=\"outlined\"]:is(:state(--required), :--required):not([hide-required-marker])) .pseudo-label {\r\n      margin-inline-end: 0.25rem;\r\n    }\r\n    :host(\r\n        [variant=\"outlined\"][float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(\r\n            :is(:state(--pressed), :--pressed)\r\n          )\r\n      )\r\n      .pseudo-label {\r\n      max-width: 0;\r\n      margin-inline-end: 0px;\r\n      transition-delay: ${DesignToken.motion.duration.short2};\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-start,\r\n    :host([variant=\"outlined\"]) .outline-notch,\r\n    :host([variant=\"outlined\"]) .outline-end {\r\n      box-sizing: border-box;\r\n      border-width: var(--_form-field-outline-size, 1px);\r\n      border-color: var(--_form-field-outline-color);\r\n      transition: border-color ${DesignToken.motion.duration.short4};\r\n    }\r\n    :host([variant=\"outlined\"]:not(:is(:state(--with-label), :--with-label))) .outline-notch {\r\n      display: none;\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-start {\r\n      min-width: 0.75rem;\r\n      border-top-style: solid;\r\n      border-inline-start-style: solid;\r\n      border-bottom-style: solid;\r\n      border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n      border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-notch {\r\n      border-bottom-style: solid;\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-end {\r\n      flex-grow: 1;\r\n      min-width: 1rem;\r\n      border-top-style: solid;\r\n      border-inline-end-style: solid;\r\n      border-bottom-style: solid;\r\n      border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n      border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n    }\r\n    :host([variant=\"outlined\"]:is(:state(--with-prefix), :--with-prefix)) .outline-start {\r\n      min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem);\r\n    }\r\n    :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled))) .base:hover .outline,\r\n    :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):focus-within) .outline,\r\n    :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .outline {\r\n      --_form-field-outline-size: 2px;\r\n    }\r\n    :host([variant=\"outlined\"]) .subscript {\r\n      margin-inline: 1rem;\r\n      width: calc(100% - 2rem);\r\n    }\r\n    :host([variant=\"outlined\"]) .content {\r\n      min-height: calc(3.5rem + ${DesignToken.density.calc(-3)});\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n    }\r\n    :host(\r\n        [variant=\"outlined\"][float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(\r\n            :is(:state(--pressed), :--pressed)\r\n          )\r\n      )\r\n      .label {\r\n      margin-top: unset;\r\n      line-height: calc(3.5rem + ${DesignToken.density.calc(-3)});\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n    }\r\n    :host([variant=\"filled\"]) .base {\r\n      --_select-arrow-margin-top: calc(\r\n        0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1))\r\n      );\r\n    }\r\n    :host([variant=\"filled\"]) .base::before {\r\n      content: \"\";\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      pointer-events: none;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      border-bottom-style: solid;\r\n      border-width: 1px;\r\n      border-radius: var(--m3e-form-field-container-shape, ${DesignToken.shape.corner.extraSmallTop});\r\n      border-color: var(--_form-field-outline-color);\r\n      background-color: var(--_form-field-container-color);\r\n    }\r\n    :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled))) .base:hover::before,\r\n    :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):focus-within) .base::before,\r\n    :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed))\r\n      .base::before {\r\n      border-width: 3px;\r\n    }\r\n    :host([variant=\"filled\"]) .base::after {\r\n      content: \"\";\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      pointer-events: none;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      background-color: var(--_form-field-hover-container-color);\r\n      transition: background-color ${DesignToken.motion.duration.short4};\r\n    }\r\n    :host([variant=\"filled\"]) .subscript {\r\n      margin-inline: 1rem;\r\n      width: calc(100% - 2rem);\r\n    }\r\n    :host([variant=\"filled\"]) .content {\r\n      padding-top: calc(1.5rem + ${DesignToken.density.calc(-3)});\r\n      margin-bottom: 0.5rem;\r\n    }\r\n    :host([variant=\"filled\"]) .label {\r\n      top: max(0px, calc(0.5rem + ${DesignToken.density.calc(-3)}));\r\n    }\r\n    :host(\r\n        [variant=\"filled\"][float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(\r\n            :is(:state(--pressed), :--pressed)\r\n          )\r\n      )\r\n      .label {\r\n      top: 0px;\r\n      line-height: calc(3.5rem + ${DesignToken.density.calc(-3)} - 0.0625rem);\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled)):not(:focus-within):not(:is(:state(--pressed), :--pressed)))\r\n      .base:hover {\r\n      --_form-field-hover-container-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-form-field-hover-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-form-field-hover-container-opacity, 8%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) {\r\n      color: var(--m3e-form-field-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)))\r\n      .base {\r\n      --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.outline});\r\n    }\r\n    :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base {\r\n      --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(\r\n        [variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):not(\r\n            :is(:state(--invalid), :--invalid)\r\n          ):focus-within\r\n      )\r\n      .base,\r\n    :host(\r\n        [variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is(\r\n            :state(--pressed),\r\n            :--pressed\r\n          )\r\n      )\r\n      .base,\r\n    :host(\r\n        [variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):not(\r\n            :is(:state(--invalid), :--invalid)\r\n          ):focus-within\r\n      )\r\n      .base,\r\n    :host(\r\n        [variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is(\r\n            :state(--pressed),\r\n            :--pressed\r\n          )\r\n      )\r\n      .base {\r\n      --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken.color.primary});\r\n      --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken.color.primary});\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled))) .base {\r\n      --_form-field-container-color: var(\r\n        --m3e-form-field-container-color,\r\n        ${DesignToken.color.surfaceContainerHighest}\r\n      );\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .base {\r\n      --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n      --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .subscript {\r\n      color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n    }\r\n    :host(:is(:state(--disabled), :--disabled)) {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-form-field-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:is(:state(--disabled), :--disabled)) .base {\r\n      --_form-field-container-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-form-field-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-form-field-disabled-container-opacity, 4%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:is(:state(--no-animate), :--no-animate)) *,\r\n    :host(:is(:state(--no-animate), :--no-animate)) *::before,\r\n    :host(:is(:state(--no-animate), :--no-animate)) *::after {\r\n      transition: none !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([variant=\"filled\"]) .base::after {\r\n        transition: none;\r\n      }\r\n      :host {\r\n        --_form-field-outline-color: CanvasText;\r\n      }\r\n      :host(:is(:state(--disabled), :--disabled)) {\r\n        --_form-field-input-color: GrayText;\r\n        --_form-field-color: GrayText;\r\n        --_form-field-label-color: GrayText;\r\n        --_form-field-outline-color: GrayText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base::before,\r\n      .prefix-text,\r\n      .suffix-text,\r\n      .label,\r\n      .subscript,\r\n      .outline-start,\r\n      .outline-notch,\r\n      .outline-end,\r\n      .pseudo-label {\r\n        transition: none !important;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #control: FormFieldControl | null = null;\r\n  /** @private */ #removeValueInterceptor?: () => void;\r\n  /** @private */ readonly #formResetHandler = () => this.#handleFormReset();\r\n  /** @private */ readonly #controlInvalidHandler = () => this.#handleControlInvalid();\r\n\r\n  /** @private */\r\n  readonly #controlMutationController = new MutationController(this, {\r\n    target: null,\r\n    config: { attributeFilter: [\"disabled\", \"readonly\", \"required\"] },\r\n    callback: () => this.notifyControlStateChange(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    callback: () => this.#handlePrefixResize(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #focusController = new FocusController(this, {\r\n    target: null,\r\n    callback: (focused) => {\r\n      focused = focused && !(this.#control?.disabled ?? true);\r\n      setCustomState(this, \"--no-animate\", false);\r\n      this.#focused = focused;\r\n      if (focused) {\r\n        setCustomState(this, \"--float-label\", true);\r\n      } else {\r\n        this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n        this.notifyControlStateChange();\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ @query(\".base\") private readonly _base!: HTMLElement;\r\n  /** @private */ @query(\".prefix\") private readonly _prefix!: HTMLElement;\r\n  /** @private */ @query(\".error\") private readonly _error!: HTMLElement;\r\n  /** @private */ @query(\".hint\") private readonly _hint!: HTMLElement;\r\n\r\n  /** @private */\r\n  readonly #hintMutationController = new MutationController(this, {\r\n    target: null,\r\n    config: { childList: true, subtree: true },\r\n    callback: () => this.#handleHintChange(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #errorMutationController = new MutationController(this, {\r\n    target: null,\r\n    config: { childList: true, subtree: true },\r\n    callback: () => this.#handleErrorChange(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    callback: (pressed) => setCustomState(this, \"--pressed\", pressed && !(this.#control?.disabled ?? true)),\r\n  });\r\n\r\n  /** @private */ #focused = false;\r\n  /** @private */ @state() private _pseudoLabel = \"\";\r\n  /** @private */ @state() private _required = false;\r\n  /** @private */ @state() private _invalid = false;\r\n  /** @private */ @state() private _validationMessage = \"\";\r\n  /** @private */ #hintText = \"\";\r\n  /** @private */ #errorText = \"\";\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new HoverController(this, { callback: () => setCustomState(this, \"--no-animate\", false) });\r\n  }\r\n\r\n  /** @private */\r\n  get #shouldFloatLabel(): boolean {\r\n    return this.#control?.shouldLabelFloat !== undefined\r\n      ? this.#control.shouldLabelFloat === true\r\n      : typeof this.#control?.value == \"string\" && this.#control.value.length > 0;\r\n  }\r\n\r\n  /** A reference to the element used to anchor dropdown menus. */\r\n  get menuAnchor() {\r\n    return this._base;\r\n  }\r\n\r\n  /** A reference to the hosted form field control. */\r\n  get control() {\r\n    return this.#control;\r\n  }\r\n\r\n  /**\r\n   * The appearance variant of the field.\r\n   * @default \"outlined\"\r\n   */\r\n  @property({ reflect: true }) variant: FormFieldVariant = \"outlined\";\r\n\r\n  /**\r\n   * Whether the required marker should be hidden.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-required-marker\", type: Boolean, reflect: true }) hideRequiredMarker = false;\r\n\r\n  /**\r\n   * Whether subscript content is hidden.\r\n   * @default \"auto\"\r\n   */\r\n  @property({ attribute: \"hide-subscript\", reflect: true }) hideSubscript: HideSubscriptType = \"auto\";\r\n\r\n  /**\r\n   * Specifies whether the label should float always or only when necessary.\r\n   * @default \"auto\"\r\n   */\r\n  @property({ attribute: \"float-label\", reflect: true }) floatLabel: FloatLabelType = \"auto\";\r\n\r\n  /**\r\n   * Notifies the form field that the state of the hosted `control` has changed.\r\n   * @param {boolean} [checkValidity=false] Whether to check validity.\r\n   */\r\n  notifyControlStateChange(checkValidity: boolean = false): void {\r\n    this._required = this.#control?.required === true;\r\n    setCustomState(this, \"--required\", this._required);\r\n    setCustomState(this, \"--disabled\", this.#control?.disabled === true);\r\n    setCustomState(this, \"--readonly\", isReadOnlyMixin(this.#control) && this.#control.readOnly === true);\r\n    if (this.floatLabel === \"auto\") {\r\n      setCustomState(this, \"--float-label\", this.#shouldFloatLabel || this.#focused);\r\n    }\r\n\r\n    if (checkValidity) {\r\n      this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n    }\r\n\r\n    setCustomState(this, \"--invalid\", this._invalid);\r\n\r\n    this._validationMessage = this.#control?.validationMessage ?? \"\";\r\n    if (!this.isUpdatePending) {\r\n      this.performUpdate();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    // Label animations are disabled on initial paint.\r\n    setCustomState(this, \"--no-animate\", true);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#changeControl(null);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"_invalid\") && this.#control) {\r\n      this.#control.ariaInvalid = this._invalid ? \"true\" : null;\r\n\r\n      if (this.#errorText) {\r\n        if (this._invalid) {\r\n          M3eAriaDescriber.describe(this.#control, this.#errorText);\r\n        } else {\r\n          M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" @click=\"${this.#handleContainerClick}\">\r\n        ${this.variant === \"outlined\"\r\n          ? html`<div class=\"outline\" aria-hidden=\"true\">\r\n              <div class=\"outline-start\"></div>\r\n              <div class=\"outline-notch\">\r\n                <div class=\"pseudo-label\">\r\n                  ${this._pseudoLabel} ${!this.hideRequiredMarker && this._required ? html`&nbsp;*` : nothing}\r\n                </div>\r\n              </div>\r\n              <div class=\"outline-end\"></div>\r\n            </div>`\r\n          : nothing}\r\n        <div class=\"prefix\">\r\n          <slot name=\"prefix\" @slotchange=\"${this.#handlePrefixSlotChange}\"></slot>\r\n        </div>\r\n        <div class=\"content\">\r\n          <span class=\"prefix-text\"><slot name=\"prefix-text\"></slot></span>\r\n          <span class=\"input\">\r\n            <slot @slotchange=\"${this.#handleSlotChange}\" @change=\"${this.#handleControlChange}\"></slot>\r\n          </span>\r\n          <span class=\"suffix-text\"><slot name=\"suffix-text\"></slot></span>\r\n          <span class=\"label\">\r\n            <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n            ${!this.hideRequiredMarker && this._required\r\n              ? html`<span class=\"required-marker\" aria-hidden=\"true\">&nbsp;*</span>`\r\n              : nothing}\r\n          </span>\r\n        </div>\r\n        <div\r\n          class=\"suffix\"\r\n          @click=\"${this.#stopPropagation}\"\r\n          @focusin=\"${this.#stopPropagation}\"\r\n          @focusout=\"${this.#stopPropagation}\"\r\n          @pointerdown=\"${this.#stopPropagation}\"\r\n          @keydown=\"${this.#stopPropagation}\"\r\n          @keyup=\"${this.#stopPropagation}\"\r\n        >\r\n          <slot name=\"suffix\" @slotchange=\"${this.#handleSuffixSlotChange}\"></slot>\r\n        </div>\r\n      </div>\r\n      <span class=\"subscript\" aria-hidden=\"true\">\r\n        <span class=\"error\"><slot name=\"error\">${this._validationMessage}</slot></span>\r\n        <span class=\"hint\"><slot name=\"hint\"></slot></span>\r\n      </span>`;\r\n  }\r\n\r\n  /** @private */\r\n  #initialize(): void {\r\n    this.#focusController.observe(this._base);\r\n    this.#pressedController.observe(this._base);\r\n\r\n    this.#hintMutationController.observe(this._hint);\r\n    this.#handleHintChange();\r\n\r\n    this.#errorMutationController.observe(this._error);\r\n    this.#handleErrorChange();\r\n  }\r\n\r\n  /** @private */\r\n  #stopPropagation(e: Event): void {\r\n    e.stopImmediatePropagation();\r\n    e.stopPropagation();\r\n  }\r\n\r\n  /** @private */\r\n  #handleLabelSlotChange(e: Event): void {\r\n    const assignedElements = (<HTMLSlotElement>e.target).assignedElements({ flatten: true });\r\n    setCustomState(this, \"--with-label\", assignedElements.length > 0);\r\n    this._pseudoLabel = assignedElements[0]?.textContent ?? \"\";\r\n  }\r\n\r\n  /** @private */\r\n  #handlePrefixSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-prefix\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n    this.#resizeController.observe(this._prefix);\r\n  }\r\n\r\n  /** @private */\r\n  #handleSuffixSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-suffix\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handlePrefixResize(): void {\r\n    if (this.variant === \"outlined\") {\r\n      this._base.style.setProperty(\"--_prefix-width\", `${this._prefix.clientWidth}px`);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#changeControl(findFormFieldControl(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleContainerClick(e: MouseEvent): void {\r\n    if (this.#control && !this.#focused && !this.#control.disabled) {\r\n      if (this.#control.onContainerClick) {\r\n        this.#control.onContainerClick(e);\r\n      } else {\r\n        this.#control.focus();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleControlInvalid(): void {\r\n    this._invalid = true;\r\n    this.notifyControlStateChange();\r\n  }\r\n\r\n  /** @private */\r\n  #handleControlChange(): void {\r\n    this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n    this.notifyControlStateChange();\r\n  }\r\n\r\n  /** @private */\r\n  #handleFormReset(): void {\r\n    this._invalid = false;\r\n    setTimeout(() => this.notifyControlStateChange());\r\n  }\r\n\r\n  /** @private */\r\n  #changeControl(control: FormFieldControl | null): void {\r\n    if (this.#control === control) return;\r\n    if (this.#control) {\r\n      if (this.#hintText) {\r\n        M3eAriaDescriber.removeDescription(this.#control, this.#hintText);\r\n      }\r\n      if (this.#errorText) {\r\n        M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n      }\r\n\r\n      this.#controlMutationController.unobserve(this.#control);\r\n      this.#control.removeEventListener(\"invalid\", this.#controlInvalidHandler);\r\n      this.#control.form?.removeEventListener(\"reset\", this.#formResetHandler);\r\n      this.#removeValueInterceptor?.();\r\n      this.#removeValueInterceptor = undefined;\r\n    }\r\n    this.#control = control;\r\n\r\n    if ([\"INPUT\", \"TEXTAREA\"].includes(this.#control?.tagName ?? \"\")) {\r\n      this._base.style.setProperty(\"--_form-field-cursor\", \"text\");\r\n    } else {\r\n      this._base.style.removeProperty(\"--_form-field-cursor\");\r\n    }\r\n\r\n    setCustomState(this, \"--with-select\", this.#control?.tagName === \"M3E-SELECT\");\r\n    if (hasCustomState(this, \"--with-select\")) {\r\n      this._base.style.setProperty(\"--_form-field-cursor\", \"pointer\");\r\n    }\r\n\r\n    if (this.#control) {\r\n      this.#controlMutationController.observe(this.#control);\r\n      this.#control.addEventListener(\"invalid\", this.#controlInvalidHandler);\r\n      this.#control.form?.addEventListener(\"reset\", this.#formResetHandler);\r\n      this.#control.removeAttribute(\"aria-invalid\");\r\n\r\n      if (this.#hintText) {\r\n        M3eAriaDescriber.describe(this.#control, this.#hintText);\r\n      }\r\n\r\n      this.notifyControlStateChange();\r\n\r\n      const tagname = this.#control.tagName.toLowerCase();\r\n      if (tagname.startsWith(\"m3e-\") && !customElements.get(tagname)) {\r\n        customElements.whenDefined(tagname).then(() => this.#bindValueInterceptor());\r\n      } else {\r\n        this.#bindValueInterceptor();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #bindValueInterceptor(): void {\r\n    if (!this.#control) return;\r\n    this.#removeValueInterceptor = interceptProperty(this.#control, \"value\", {\r\n      set: (value, setter) => {\r\n        setter(value);\r\n        this.notifyControlStateChange(true);\r\n      },\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleHintChange(): void {\r\n    const hintText = getTextContent(this._hint, true);\r\n    if (hintText === this.#hintText) return;\r\n\r\n    if (this.#control && this.#hintText) {\r\n      M3eAriaDescriber.removeDescription(this.#control, this.#hintText);\r\n    }\r\n\r\n    this.#hintText = hintText;\r\n\r\n    if (this.#control && this.#hintText) {\r\n      M3eAriaDescriber.describe(this.#control, this.#hintText);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleErrorChange(): void {\r\n    const errorText = getTextContent(this._error, true);\r\n    if (errorText === this.#errorText) return;\r\n\r\n    if (this.#control && this.#errorText) {\r\n      M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n    }\r\n\r\n    this.#errorText = errorText;\r\n\r\n    if (this.#control && this.#errorText && this._invalid) {\r\n      M3eAriaDescriber.describe(this.#control, this.#errorText);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-form-field\": M3eFormFieldElement;\r\n  }\r\n}\r\n"],"names":["KNOWN_FORM_FIELD_TAGS","isFormFieldControl","value","HTMLElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","includes","tagName","toLowerCase","findFormFieldControl","slot","element","assignedElements","flatten","walker","document","createTreeWalker","NodeFilter","SHOW_ELEMENT","nextNode","currentNode","M3eFormFieldElement","ReconnectedCallback","AttachInternals","LitElement","constructor","super","_M3eFormFieldElement_control","set","this","_M3eFormFieldElement_removeValueInterceptor","_M3eFormFieldElement_formResetHandler","__classPrivateFieldGet","_M3eFormFieldElement_instances","_M3eFormFieldElement_handleFormReset","call","_M3eFormFieldElement_controlInvalidHandler","_M3eFormFieldElement_handleControlInvalid","_M3eFormFieldElement_controlMutationController","MutationController","target","config","attributeFilter","callback","notifyControlStateChange","_M3eFormFieldElement_resizeController","ResizeController","_M3eFormFieldElement_handlePrefixResize","_M3eFormFieldElement_focusController","FocusController","focused","disabled","setCustomState","__classPrivateFieldSet","_M3eFormFieldElement_focused","_invalid","checkValidity","_M3eFormFieldElement_hintMutationController","childList","subtree","_M3eFormFieldElement_handleHintChange","_M3eFormFieldElement_errorMutationController","_M3eFormFieldElement_handleErrorChange","_M3eFormFieldElement_pressedController","PressedController","pressed","_pseudoLabel","_required","_validationMessage","_M3eFormFieldElement_hintText","_M3eFormFieldElement_errorText","variant","hideRequiredMarker","hideSubscript","floatLabel","HoverController","menuAnchor","_base","control","required","isReadOnlyMixin","readOnly","_M3eFormFieldElement_shouldFloatLabel_get","validationMessage","isUpdatePending","performUpdate","connectedCallback","disconnectedCallback","_M3eFormFieldElement_changeControl","reconnectedCallback","_M3eFormFieldElement_initialize","firstUpdated","_changedProperties","update","changedProperties","has","ariaInvalid","M3eAriaDescriber","describe","removeDescription","render","html","_M3eFormFieldElement_handleContainerClick","nothing","_M3eFormFieldElement_handlePrefixSlotChange","_M3eFormFieldElement_handleSlotChange","_M3eFormFieldElement_handleControlChange","_M3eFormFieldElement_handleLabelSlotChange","_M3eFormFieldElement_stopPropagation","_M3eFormFieldElement_handleSuffixSlotChange","undefined","shouldLabelFloat","length","observe","_hint","_error","e","stopImmediatePropagation","stopPropagation","textContent","hasAssignedNodes","_prefix","style","setProperty","clientWidth","onContainerClick","focus","setTimeout","unobserve","removeEventListener","form","removeProperty","hasCustomState","addEventListener","removeAttribute","tagname","startsWith","customElements","get","whenDefined","then","_M3eFormFieldElement_bindValueInterceptor","interceptProperty","setter","hintText","getTextContent","errorText","registerStyleSheet","css","DesignToken","motion","duration","extraLong1","density","calc","styles","typescale","standard","body","large","fontSize","fontWeight","lineHeight","tracking","small","unsafeCSS","short4","color","onSurfaceVariant","scrollbar","thinWidth","short2","shape","corner","extraSmall","extraSmallTop","onSurface","outline","primary","surfaceContainerHighest","error","__decorate","query","prototype","state","property","reflect","attribute","type","Boolean","customElement"],"mappings":"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"}

package/dist/option.js

@@ -124,6 +124,11 @@ let M3eOptionElement = class M3eOptionElement extends Selected(Disabled(AttachIn
         });
       }
     }
+    if (changedProperties.has("selected") || changedProperties.has("disabled")) {
+      this["dispatchEvent"](new CustomEvent("state-change", {
+        bubbles: true
+      }));
+    }
   }
   /** @inheritdoc */
   render() {
@@ -220,7 +225,7 @@ M3eOptGroupElement.styles = css`:host { display: block; --_option-padding-start:
 M3eOptGroupElement.__nextId = 0;
 M3eOptGroupElement = M3eOptGroupElement_1 = __decorate([customElement("m3e-optgroup")], M3eOptGroupElement);
 
-var _M3eOptionPanelElement_instances, _M3eOptionPanelElement_handleNoDataSlotChange, _M3eOptionPanelElement_handleLoadingSlotChange, _M3eOptionPanelElement_handleMutation;
+var _M3eOptionPanelElement_instances, _M3eOptionPanelElement_handleOptionStateChange, _M3eOptionPanelElement_handleNoDataSlotChange, _M3eOptionPanelElement_handleLoadingSlotChange, _M3eOptionPanelElement_handleMutation;
 /**
  * Presents a list of options on a temporary surface.
  *
@@ -273,10 +278,15 @@ let M3eOptionPanelElement = class M3eOptionPanelElement extends Role(M3eFloating
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base"><slot></slot><div class="no-data" aria-hidden="true"><slot name="no-data" @slotchange="${__classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleNoDataSlotChange)}"></slot></div><div class="loading" aria-hidden="true"><slot name="loading" @slotchange="${__classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleLoadingSlotChange)}"></slot></div></div>`;
+    return html`<div class="base" @state-change="${__classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleOptionStateChange)}"><slot></slot><div class="no-data" aria-hidden="true"><slot name="no-data" @slotchange="${__classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleNoDataSlotChange)}"></slot></div><div class="loading" aria-hidden="true"><slot name="loading" @slotchange="${__classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleLoadingSlotChange)}"></slot></div></div>`;
   }
 };
 _M3eOptionPanelElement_instances = new WeakSet();
+_M3eOptionPanelElement_handleOptionStateChange = function _M3eOptionPanelElement_handleOptionStateChange(e) {
+  if (e.target instanceof M3eOptionElement) {
+    e.stopImmediatePropagation();
+  }
+};
 _M3eOptionPanelElement_handleNoDataSlotChange = function _M3eOptionPanelElement_handleNoDataSlotChange(e) {
   setCustomState(this, "--with-no-data", hasAssignedNodes(e.target));
 };

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: calc(var(--m3e-option-container-height, 2.75rem) + ${DesignToken.density.calc(-3)});\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(:is(:state(--empty), :--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(:is(:state(--first), :--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(:is(:state(--last), :--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(:is(:state(--first), :--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(:is(:state(--last), :--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: calc(\r\n        var(--m3e-option-container-height, 2.75rem) + calc(var(--m3e-option-panel-gap, 0.125rem) * 2) +\r\n          ${DesignToken.density.calc(-3)}\r\n      );\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(:is(:state(--empty), :--empty)) .icon,\r\n    :host(:is(:state(--hide-selection-indicator), :--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(:is(:state(--no-data), :--no-data)) slot:not([name]),\r\n      :host(:is(:state(--loading), :--loading)) slot:not([name]),\r\n      :host(:is(:state(--loading), :--loading)) .no-data,\r\n      :host(:not(:is(:state(--no-data), :--no-data))) .no-data,\r\n      :host(:not(:is(:state(--with-no-data), :--with-no-data))) .no-data,\r\n      :host(:not(:is(:state(--loading), :--loading))) .loading,\r\n      :host(:not(:is(:state(--with-loading), :--with-loading))) .loading {\r\n        display: none;\r\n      }\r\n      :host(:is(:state(--no-data), :--no-data)) .base,\r\n      :host(:is(:state(--loading), :--loading)) .base {\r\n        overflow-y: hidden;\r\n      }\r\n      :host(:is(:state(--with-loading-indicator), :--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 === true) {\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","density","calc","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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"}
+{"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: calc(var(--m3e-option-container-height, 2.75rem) + ${DesignToken.density.calc(-3)});\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(:is(:state(--empty), :--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(:is(:state(--first), :--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(:is(:state(--last), :--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(:is(:state(--first), :--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(:is(:state(--last), :--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: calc(\r\n        var(--m3e-option-container-height, 2.75rem) + calc(var(--m3e-option-panel-gap, 0.125rem) * 2) +\r\n          ${DesignToken.density.calc(-3)}\r\n      );\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(:is(:state(--empty), :--empty)) .icon,\r\n    :host(:is(:state(--hide-selection-indicator), :--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    if (changedProperties.has(\"selected\") || changedProperties.has(\"disabled\")) {\r\n      this[\"dispatchEvent\"](new CustomEvent(\"state-change\", { bubbles: true }));\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(:is(:state(--no-data), :--no-data)) slot:not([name]),\r\n      :host(:is(:state(--loading), :--loading)) slot:not([name]),\r\n      :host(:is(:state(--loading), :--loading)) .no-data,\r\n      :host(:not(:is(:state(--no-data), :--no-data))) .no-data,\r\n      :host(:not(:is(:state(--with-no-data), :--with-no-data))) .no-data,\r\n      :host(:not(:is(:state(--loading), :--loading))) .loading,\r\n      :host(:not(:is(:state(--with-loading), :--with-loading))) .loading {\r\n        display: none;\r\n      }\r\n      :host(:is(:state(--no-data), :--no-data)) .base,\r\n      :host(:is(:state(--loading), :--loading)) .base {\r\n        overflow-y: hidden;\r\n      }\r\n      :host(:is(:state(--with-loading-indicator), :--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\" @state-change=\"${this.#handleOptionStateChange}\">\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  #handleOptionStateChange(e: Event): void {\r\n    if (e.target instanceof M3eOptionElement) {\r\n      e.stopImmediatePropagation();\r\n    }\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 === true) {\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","CustomEvent","bubbles","render","html","disabled","_M3eOptionElement_handleSlotChange","e","getTextContent","target","setCustomState","requestUpdate","styles","css","DesignToken","density","calc","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_handleOptionStateChange","_M3eOptionPanelElement_handleNoDataSlotChange","_M3eOptionPanelElement_handleLoadingSlotChange","stopImmediatePropagation","hasAssignedNodes","querySelector","options","first","last","i","length","option","hidden","deleteCustomState","parentElement","addCustomState","registerStyleSheet","surfaceContainer","elevation","level3","onSurfaceVariant","reflect"],"mappings":"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"}