@awc-ui/core 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/md3/{p-ba2ebde1.entry.js.map → p-7c8842bf.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["mdSwitchCss","MdSwitch","constructor","hostRef","this","valueMissingLabel","customValidityMessage","selected","disabled","softDisabled","required","name","value","icons","showOnlySelectedIcon","selectedIcon","unselectedIcon","density","pressed","programmaticFocus","initialSelected","lastValidityKey","toggle","isDisabled","proposed","inputEvent","mdInput","emit","defaultPrevented","mdChange","handleKeyDown","e","key","preventDefault","repeat","setTimeout","handlePointerDown","handlePointerUp","handleBlur","componentWillLoad","syncFormValue","onValueChange","formResetCallback","setFocus","el","focus","setFormValue","internals","syncValidity","setValidityState","missing","missingMessage","customMessage","emitValidityChange","getValidity","getValidityOf","v","valid","validationMessage","primed","mdValidityChange","checkValidity","checkValidityOf","reportValidity","reportValidityOf","setCustomValidity","message","render","showSelectedIcon","showUnselectedIcon","showIcon","h","Host","role","String","tabindex","class","onClick","onKeyDown","onPointerDown","onPointerUp","onPointerLeave","onPointerCancel","onBlur","part"],"sources":["src/components/md-switch/md-switch.css?tag=md-switch&encapsulation=shadow","src/components/md-switch/md-switch.tsx"],"sourcesContent":["/* ==========================================================\n   md-switch — Material Design 3 Switch\n   Spec: https://m3.material.io/components/switch/specs\n\n   MD3-Expressive motion: the thumb morphs (16→24→28dp) and slides on a\n   SPATIAL spring, colors cross-fade on an EFFECTS spring. All sizing derives\n   from the track tokens via calc(), so resizing the track keeps the thumb\n   aligned (no hand-tuned offsets).\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-switch-track-width                Track width (52px)\n     --md-switch-track-height               Track height (32px) — density knob\n     --md-switch-handle-size                Selected handle diameter (derived\n                                            from track height; unselected +\n                                            pressed scale from it)\n     --md-switch-track-color                Unselected track fill\n     --md-switch-track-outline-color        Unselected track outline\n     --md-switch-handle-color               Unselected handle fill\n     --md-switch-selected-track-color       Selected track fill\n     --md-switch-selected-handle-color      Selected handle fill\n     --md-switch-icon-color                 Unselected icon color\n     --md-switch-selected-icon-color        Selected icon color\n     --md-switch-state-layer-color          Hover / focus / press overlay\n     --md-switch-focus-ring-color           Focus-ring color\n\n   CSS PARTS:\n     track        Track container\n     state-layer  State-layer overlay (centered on handle)\n     handle       Handle / thumb\n     icon         Check or close icon\n\n   SLOTS:\n     (none)\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST — touch target, sizing, motion & base tokens\n   ========================================================== */\n\n:host {\n  /* ── Sizing (density scales from the track) ── */\n  /* Track width shrinks proportionally with density to maintain the ~1.625\n     aspect ratio (52:32). Each rung removes 6px width vs 4px height. */\n  --_track-w: var(--md-switch-track-width, max(28px, calc(52px + var(--md-sys-density-scale, 0) * 6px)));\n  /* Global density knob: the track height drives every derived size (handle,\n     state layer, thumb travel). Each `data-density` rung (0…-4) trims 4px,\n     floored at 16px; unchanged at density 0. The host min-block-size stays\n     max(48px, …) so the touch target is preserved even as the track tightens. */\n  --_track-h: max(16px, calc(var(--md-switch-track-height, 32px) + var(--md-sys-density-scale, 0) * 4px));\n  --_track-border: 2px;\n  /* State-layer / handle-container disc, proportional to the track. */\n  --_sl: calc(var(--_track-h) + 8px);\n  /* Thumb sizes: selected is the knob; unselected + pressed scale from it. */\n  --_handle-sel: var(--md-switch-handle-size, calc(var(--_track-h) * 0.75));\n  --_handle-unsel: calc(var(--_handle-sel) * 2 / 3);\n  --_handle-press: calc(var(--_handle-sel) * 7 / 6);\n  /* Thumb-centre travel, derived so the thumb stays inset by half the track\n     height at each end regardless of track size. */\n  --_offset-unsel: calc(var(--_track-h) / 2 - var(--_sl) / 2 - var(--_track-border));\n  --_offset-sel: calc(var(--_track-w) - var(--_track-h) / 2 - var(--_sl) / 2 - var(--_track-border));\n\n  /* ── Motion (M3-Expressive springs) ── */\n  --_spring-spatial: var(--md-sys-motion-spring-spatial-fast-duration, 350ms)\n    var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90));\n  --_spring-effects: var(--md-sys-motion-spring-effects-fast-duration, 150ms)\n    var(--md-sys-motion-spring-effects-fast-easing, cubic-bezier(0.31, 0.94, 0.34, 1.00));\n\n  /* ── Unselected color tokens ── */\n  --_track-color: var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #E6E0E9));\n  --_track-outline-color: var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747E));\n  --_handle-color: var(--md-switch-handle-color, var(--md-sys-color-outline, #79747E));\n  --_state-layer-color: var(--md-switch-state-layer-color, var(--md-sys-color-on-surface, #1C1B1F));\n  --_icon-color: var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #E6E0E9));\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-block-size: max(48px, var(--_track-h));\n  inline-size: var(--_track-w);\n  cursor: pointer;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  user-select: none;\n  vertical-align: middle;\n  flex-shrink: 0;\n}\n\n/* ==========================================================\n   2. SELECTED — color overrides\n   ========================================================== */\n\n:host(.md-switch--selected) {\n  --_track-color: var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750A4));\n  --_track-outline-color: var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750A4));\n  --_handle-color: var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #FFFFFF));\n  --_state-layer-color: var(--md-switch-state-layer-color, var(--md-sys-color-primary, #6750A4));\n  --_icon-color: var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005D));\n}\n\n/* ==========================================================\n   3. INTERACTIVE STATES — hover / focus / press colors\n   Per MD3 spec, handle & track outline colors shift on interaction.\n   ========================================================== */\n\n/* ── Unselected ── */\n\n:host(:not(.md-switch--selected):hover:not(.md-switch--disabled)) {\n  --_handle-color: var(--md-sys-color-on-surface-variant, #49454F);\n  --_track-outline-color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n:host(:not(.md-switch--selected):focus-visible:not(.md-switch--disabled)) {\n  --_handle-color: var(--md-sys-color-on-surface-variant, #49454F);\n  --_track-outline-color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n:host(:not(.md-switch--selected).md-switch--pressed:not(.md-switch--disabled)) {\n  --_handle-color: var(--md-sys-color-on-surface-variant, #49454F);\n  --_track-outline-color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n/* ── Selected ── */\n\n:host(.md-switch--selected:hover:not(.md-switch--disabled)) {\n  --_handle-color: var(--md-sys-color-primary-container, #EADDFF);\n}\n\n:host(.md-switch--selected:focus-visible:not(.md-switch--disabled)) {\n  --_handle-color: var(--md-sys-color-primary-container, #EADDFF);\n}\n\n:host(.md-switch--selected.md-switch--pressed:not(.md-switch--disabled)) {\n  --_handle-color: var(--md-sys-color-primary-container, #EADDFF);\n}\n\n/* ==========================================================\n   4. TRACK — colors cross-fade on the effects spring\n   ========================================================== */\n\n.md-switch__track {\n  position: relative;\n  inline-size: var(--_track-w);\n  block-size: var(--_track-h);\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  border: var(--_track-border) solid var(--_track-outline-color);\n  background-color: var(--_track-color);\n  box-sizing: border-box;\n  transition:\n    background-color var(--_spring-effects),\n    border-color var(--_spring-effects);\n}\n\n/* ==========================================================\n   5. HANDLE CONTAINER — state-layer disc, slides on the spatial spring\n      via inset-inline-start (auto-mirrors in RTL). Offsets are derived from\n      the track tokens (see :host --_offset-*).\n   ========================================================== */\n\n.md-switch__handle-container {\n  position: absolute;\n  inset-block-start: 50%;\n  inset-inline-start: var(--_offset-unsel);\n  inline-size: var(--_sl);\n  block-size: var(--_sl);\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: inset-inline-start var(--_spring-spatial);\n  pointer-events: none;\n}\n\n:host(.md-switch--selected) .md-switch__handle-container {\n  inset-inline-start: var(--_offset-sel);\n}\n\n/* ==========================================================\n   6. STATE LAYER — fills the handle container, centered on the handle\n   ========================================================== */\n\n.md-switch__state-layer {\n  position: absolute;\n  inset: 0;\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  background-color: var(--_state-layer-color);\n  opacity: 0;\n  transition: opacity var(--_spring-effects);\n  pointer-events: none;\n}\n\n:host(:hover:not(.md-switch--disabled)) .md-switch__state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n\n:host(:focus-visible:not(.md-switch--disabled)) .md-switch__state-layer {\n  opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);\n}\n\n:host(:active:not(.md-switch--disabled)) .md-switch__state-layer,\n:host(.md-switch--pressed:not(.md-switch--disabled)) .md-switch__state-layer {\n  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);\n}\n\n/* ==========================================================\n   7. HANDLE — morphs size per state on the spatial spring\n      Unselected (no icon): --_handle-unsel (16dp @ 32 track)\n      Unselected (icon) / Selected: --_handle-sel (24dp)\n      Pressed: --_handle-press (28dp)\n   ========================================================== */\n\n.md-switch__handle {\n  position: relative;\n  z-index: 1;\n  inline-size: var(--_handle-unsel);\n  block-size: var(--_handle-unsel);\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  background-color: var(--_handle-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition:\n    inline-size var(--_spring-spatial),\n    block-size var(--_spring-spatial),\n    background-color var(--_spring-effects);\n}\n\n:host(.md-switch--selected) .md-switch__handle {\n  inline-size: var(--_handle-sel);\n  block-size: var(--_handle-sel);\n}\n\n:host(.md-switch--with-icon:not(.md-switch--selected)) .md-switch__handle {\n  inline-size: var(--_handle-sel);\n  block-size: var(--_handle-sel);\n}\n\n:host(.md-switch--pressed:not(.md-switch--disabled)) .md-switch__handle {\n  inline-size: var(--_handle-press);\n  block-size: var(--_handle-press);\n}\n\n/* ==========================================================\n   8. ICON — 16px Material Symbols\n   ========================================================== */\n\n.md-switch__icon {\n  font-size: 16px;\n  inline-size: 16px;\n  block-size: 16px;\n  color: var(--_icon-color);\n  pointer-events: none;\n  line-height: 1;\n}\n\n/* Custom slotted icons (selected-icon / unselected-icon slots) — default to the\n   glyph footprint + ink so a bare <svg>/<md-icon> fits without extra CSS. */\n.md-switch__handle ::slotted(*) {\n  inline-size: 16px;\n  block-size: 16px;\n  font-size: 16px;\n  color: var(--_icon-color);\n  pointer-events: none;\n}\n\n.material-symbols-outlined {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  overflow-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n}\n\n/* ==========================================================\n   9. FOCUS RING\n   ========================================================== */\n\n:host(:focus-visible:not([disabled])) .md-switch__track,\n:host(.md-switch--focus-ring:not([disabled])) .md-switch__track {\n  outline: 3px solid var(--md-switch-focus-ring-color, var(--md-sys-color-secondary, #625B71));\n  outline-offset: 2px;\n}\n\n/* ==========================================================\n   10. DISABLED\n   ========================================================== */\n\n:host(.md-switch--disabled) {\n  cursor: default;\n  pointer-events: none;\n}\n\n:host([soft-disabled]) {\n  cursor: default;\n  pointer-events: auto;\n}\n\n:host([soft-disabled]) .md-switch__state-layer {\n  display: none;\n}\n\n/* Disabled unselected */\n:host(.md-switch--disabled:not(.md-switch--selected)) {\n  --_track-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest, #E6E0E9) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n  --_track-outline-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n  --_handle-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_icon-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest, #E6E0E9) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n}\n\n/* Disabled selected */\n:host(.md-switch--disabled.md-switch--selected) {\n  --_track-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n  --_track-outline-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n  --_handle-color: var(--md-sys-color-surface, #FEF7FF);\n  --_icon-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n}\n\n:host(.md-switch--disabled) .md-switch__state-layer {\n  display: none;\n}\n\n/* ==========================================================\n   11. REDUCED MOTION\n   ========================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  .md-switch__handle,\n  .md-switch__handle-container,\n  .md-switch__track,\n  .md-switch__state-layer {\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* ==========================================================\n   12. FORCED COLORS (Windows High Contrast)\n   ========================================================== */\n\n@media (forced-colors: active) {\n  .md-switch__track {\n    border-color: CanvasText;\n  }\n\n  .md-switch__handle {\n    background-color: CanvasText;\n  }\n\n  .md-switch__icon {\n    color: Canvas;\n  }\n\n  :host(.md-switch--selected) .md-switch__track {\n    background-color: Highlight;\n    border-color: Highlight;\n  }\n\n  :host(.md-switch--selected) .md-switch__handle {\n    background-color: HighlightText;\n  }\n\n  :host(.md-switch--selected) .md-switch__icon {\n    color: Highlight;\n  }\n\n  :host(:focus-visible:not([disabled])) .md-switch__track,\n  :host(.md-switch--focus-ring:not([disabled])) .md-switch__track {\n    outline-color: Highlight;\n  }\n\n  :host(.md-switch--disabled) {\n    opacity: 0.5;\n  }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import { AttachInternals, Component, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';\nimport {\n  setFormValue,\n  setValidityState,\n  checkValidityOf,\n  reportValidityOf,\n  getValidityOf,\n} from '../../utils/form';\n\n/**\n * `md-switch` — Material Design 3 switch (on/off toggle).\n *\n * Form-associated: inside a `<form>` it submits its `value` under `name` when\n * selected, and restores on form reset. It is a *labelable* element — wrap it in\n * a `<label>` (clicks on the label text toggle it and name it), or pass\n * `aria-label` / `aria-labelledby` on the host.\n *\n * @slot selected-icon - Custom icon shown on the handle when selected (replaces\n *                        the `selected-icon` glyph). Requires `icons` or\n *                        `show-only-selected-icon`.\n * @slot unselected-icon - Custom icon shown on the handle when unselected\n *                         (replaces the `unselected-icon` glyph). Requires `icons`.\n *\n * @part track - Track container\n * @part state-layer - State-layer overlay (centered on handle)\n * @part handle - Handle (thumb)\n * @part icon - Check / close icon\n */\n@Component({\n  tag: 'md-switch',\n  styleUrl: 'md-switch.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class MdSwitch {\n  @Element() el!: HTMLElement;\n\n\n  /**\n   * Localized constraint-validation message shown when `required` is unmet.\n   *\n   * A prop rather than a hardcoded string, matching md-time-picker's\n   * `value-missing-label`: components stay i18n-engine-agnostic and the\n   * consumer localizes through its own dictionary. Native inputs get their\n   * message from the browser's locale for free; a form-associated custom\n   * element supplies its own, so leaving this hardcoded would ship an\n   * English-only form to every locale.\n   */\n  @Prop({ attribute: 'value-missing-label' }) valueMissingLabel: string =\n    'Please turn this on if you want to proceed.';\n\n  /** Message set via setCustomValidity(); non-empty wins over valueMissing. */\n  private customValidityMessage = '';\n\n  /**\n   * Form-association handle. The switch submits `value` under the host's `name`\n   * via `setFormValue`, so it participates in `<form>` / `FormData` natively\n   * (a hidden shadow `<input>` would be invisible to `FormData`).\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  // ─── Public Props ──────────────────────────────────────────\n\n  /** Whether the switch is on (selected) */\n  @Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n  /** Prevents interaction and removes from tab order */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Visually disabled but remains focusable for discoverability */\n  @Prop({ reflect: true, attribute: 'soft-disabled' }) softDisabled: boolean = false;\n\n  /** Mark the control required for form validation / assistive tech. */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Name submitted with the owning `<form>`. */\n  @Prop({ reflect: true }) name: string = '';\n\n  /** Value submitted when the switch is selected. */\n  @Prop() value: string = 'on';\n\n  /** Show icons on both selected and unselected states (check / close) */\n  @Prop() icons: boolean = false;\n\n  /** Show icon only when selected */\n  @Prop({ attribute: 'show-only-selected-icon' }) showOnlySelectedIcon: boolean = false;\n\n  /** Material Symbols glyph shown on the handle when selected (override the\n   *  default check). Ignored when the `selected-icon` slot is filled. */\n  @Prop({ attribute: 'selected-icon' }) selectedIcon: string = 'check';\n\n  /** Material Symbols glyph shown on the handle when unselected (override the\n   *  default close). Ignored when the `unselected-icon` slot is filled. */\n  @Prop({ attribute: 'unselected-icon' }) unselectedIcon: string = 'close';\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  // ─── Events ────────────────────────────────────────────────\n\n  /**\n   * Fires **before** the state changes. Call `event.preventDefault()` to\n   * block the internal toggle and manage state externally (controlled mode).\n   *\n   * ```ts\n   * switch.addEventListener('mdInput', (e) => {\n   *   e.preventDefault();          // prevent internal toggle\n   *   myState.value = e.detail.selected; // update your own state\n   * });\n   * ```\n   */\n  @Event({ cancelable: true }) mdInput: EventEmitter<{ selected: boolean }>;\n\n  /**\n   * Fires **after** the internal state has committed. Use for side effects\n   * like saving preferences, analytics, or syncing with other components.\n   * Not cancelable — the toggle has already happened.\n   *\n   * ```ts\n   * switch.addEventListener('mdChange', (e) => {\n   *   console.log('Switch is now', e.detail.selected ? 'ON' : 'OFF');\n   * });\n   * ```\n   */\n  @Event({ cancelable: false }) mdChange: EventEmitter<{ selected: boolean }>;\n\n  // ─── Internal State ────────────────────────────────────────\n\n  @State() private pressed = false;\n  /** Script-initiated focus doesn't trigger :focus-visible — force the ring. */\n  @State() private programmaticFocus = false;\n\n  private initialSelected = false;\n\n  private get isDisabled() {\n    return this.disabled || this.softDisabled;\n  }\n\n  // ─── Lifecycle ─────────────────────────────────────────────\n  // Because md-switch is form-associated it is a *labelable* element, so a\n  // wrapping <label> both names it and forwards clicks NATIVELY — no manual\n  // closest('label') wiring needed (that would double-toggle here, unlike the\n  // non-form-associated md-checkbox which must hand-roll it).\n\n  componentWillLoad() {\n    this.initialSelected = this.selected;\n    this.syncFormValue();\n  }\n\n  @Watch('selected')\n  @Watch('value')\n  onValueChange() {\n    this.syncFormValue();\n  }\n\n  /** Restore the initial state when the owning form is reset. */\n  formResetCallback() {\n    this.selected = this.initialSelected;\n  }\n\n  // ─── Public methods ────────────────────────────────────────\n\n  /** Programmatically focus the switch (shows the focus ring). */\n  @Method()\n  async setFocus() {\n    this.programmaticFocus = true;\n    this.el.focus();\n  }\n\n  // ─── Private ───────────────────────────────────────────────\n\n  private syncFormValue() {\n    setFormValue(this.internals, this.selected ? this.value : null);\n    this.syncValidity();\n  }\n\n  /**\n   * Publish `required` to the owning form. Without this the switch is\n   * form-associated (its value reaches FormData) yet ALWAYS reports valid, so an\n   * empty required control lets the form submit — `required` renders as a visual\n   * hint and nothing more. Kept in the same place as the value sync so the two\n   * can never drift.\n   */\n  @Watch('required')\n  @Watch('valueMissingLabel')\n  private syncValidity() {\n    setValidityState(this.internals, {\n      missing: this.required && !this.selected,\n      missingMessage: this.valueMissingLabel,\n      customMessage: this.customValidityMessage,\n    });\n      this.emitValidityChange();\n  }\n\n  /** Current validity: boolean, message and flags. Mirrors md-text-field. */\n  @Method()\n  async getValidity(): Promise<{\n    valid: boolean;\n    validationMessage: string;\n    flags: Record<string, boolean>;\n  }> {\n    return getValidityOf(this.internals);\n  }\n\n  /**\n   * Fires when this control's validity CHANGES — never on every keystroke, and\n   * never for a re-publish that lands on the same state.\n   *\n   * `composed: false` is deliberate. Composites like md-select embed an\n   * md-text-field, and a composed event escapes that inner shadow root, so a\n   * listener on md-select would receive the inner field's event as well as the\n   * host's — two events, different payloads, for one logical control. Keeping\n   * it uncomposed means each component reports only for itself, while\n   * `bubbles: true` still lets a <form> or app root hear every control.\n   */\n  @Event({ bubbles: true, composed: false }) mdValidityChange: EventEmitter<{\n    valid: boolean;\n    validationMessage: string;\n    flags: Record<string, boolean>;\n  }>;\n\n  /** Last emitted validity, so a re-publish that changes nothing stays silent. */\n  private lastValidityKey: string | null = null;\n\n  /**\n   * Emit mdValidityChange if validity actually moved.\n   *\n   * The FIRST call only primes the baseline. Initial state is not a change, and\n   * emitting on mount would fire once per control on every page load — noise a\n   * consumer would have to filter out, and misleading for anything logging\n   * \"field became invalid\".\n   */\n  private emitValidityChange() {\n    const v = getValidityOf(this.internals);\n    const key = `${v.valid}|${v.validationMessage}`;\n    if (this.lastValidityKey === key) return;\n    const primed = this.lastValidityKey !== null;\n    this.lastValidityKey = key;\n    if (primed) this.mdValidityChange.emit(v);\n  }\n\n  /** Constraint-validation API, matching md-text-field and the native contract. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return checkValidityOf(this.internals);\n  }\n\n  /** Like checkValidity(), but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return reportValidityOf(this.internals);\n  }\n\n  /** App/server-side validation: a non-empty message marks the control invalid\n   *  for its form until cleared with an empty string. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customValidityMessage = message;\n    this.syncValidity();\n  }\n\n  private toggle = () => {\n    if (this.isDisabled) return;\n\n    const proposed = !this.selected;\n\n    const inputEvent = this.mdInput.emit({ selected: proposed });\n    if (inputEvent.defaultPrevented) return;\n\n    this.selected = proposed;\n    this.mdChange.emit({ selected: this.selected });\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.isDisabled) return;\n    // WAI-ARIA switch pattern: Space toggles (Enter is reserved for form\n    // submission — matching md-checkbox / md-radio).\n    if (e.key === ' ') {\n      e.preventDefault();\n      if (e.repeat) return; // ignore OS key-repeat storms\n      this.pressed = true;\n      this.toggle();\n      setTimeout(() => { this.pressed = false; }, 150);\n    }\n  };\n\n  private handlePointerDown = () => {\n    if (!this.isDisabled) this.pressed = true;\n  };\n\n  private handlePointerUp = () => {\n    this.pressed = false;\n  };\n\n  private handleBlur = () => {\n    this.programmaticFocus = false;\n  };\n\n  // ─── Render ────────────────────────────────────────────────\n\n  render() {\n    const showSelectedIcon = this.icons || this.showOnlySelectedIcon;\n    const showUnselectedIcon = this.icons;\n    const showIcon = this.selected ? showSelectedIcon : showUnselectedIcon;\n\n    return (\n      <Host\n        role=\"switch\"\n        aria-checked={String(this.selected)}\n        aria-disabled={this.isDisabled ? 'true' : null}\n        aria-required={this.required ? 'true' : null}\n        tabindex={this.disabled ? '-1' : '0'}\n        class={{\n          'md-switch': true,\n          'md-switch--selected': this.selected,\n          'md-switch--disabled': this.disabled || this.softDisabled,\n          'md-switch--pressed': this.pressed,\n          'md-switch--with-icon': showIcon,\n          'md-switch--focus-ring': this.programmaticFocus,\n        }}\n        onClick={this.toggle}\n        onKeyDown={this.handleKeyDown}\n        onPointerDown={this.handlePointerDown}\n        onPointerUp={this.handlePointerUp}\n        onPointerLeave={this.handlePointerUp}\n        onPointerCancel={this.handlePointerUp}\n        onBlur={this.handleBlur}\n      >\n        <div class=\"md-switch__track\" part=\"track\">\n          <div class=\"md-switch__handle-container\">\n            <span class=\"md-switch__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n            <span class=\"md-switch__handle\" part=\"handle\">\n              {showIcon && (this.selected ? (\n                <slot name=\"selected-icon\">\n                  <span class=\"md-switch__icon material-symbols-outlined\" part=\"icon\" aria-hidden=\"true\">\n                    {this.selectedIcon}\n                  </span>\n                </slot>\n              ) : (\n                <slot name=\"unselected-icon\">\n                  <span class=\"md-switch__icon material-symbols-outlined\" part=\"icon\" aria-hidden=\"true\">\n                    {this.unselectedIcon}\n                  </span>\n                </slot>\n              ))}\n            </span>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["mdSwitchCss","MdSwitch","constructor","hostRef","this","valueMissingLabel","customValidityMessage","selected","disabled","softDisabled","required","name","value","icons","showOnlySelectedIcon","selectedIcon","unselectedIcon","density","pressed","programmaticFocus","initialSelected","lastValidityKey","toggle","isDisabled","proposed","inputEvent","mdInput","emit","defaultPrevented","mdChange","handleKeyDown","e","key","preventDefault","repeat","setTimeout","handlePointerDown","handlePointerUp","handleBlur","componentWillLoad","syncFormValue","onValueChange","formResetCallback","setFocus","el","focus","setFormValue","internals","syncValidity","setValidityState","missing","missingMessage","customMessage","emitValidityChange","getValidity","getValidityOf","v","valid","validationMessage","primed","mdValidityChange","checkValidity","checkValidityOf","reportValidity","reportValidityOf","setCustomValidity","message","render","showSelectedIcon","showUnselectedIcon","showIcon","h","Host","role","String","tabindex","class","onClick","onKeyDown","onPointerDown","onPointerUp","onPointerLeave","onPointerCancel","onBlur","part"],"sources":["src/components/md-switch/md-switch.css?tag=md-switch&encapsulation=shadow","src/components/md-switch/md-switch.tsx"],"sourcesContent":["/* ==========================================================\n   md-switch — Material Design 3 Switch\n   Spec: https://m3.material.io/components/switch/specs\n\n   MD3-Expressive motion: the thumb morphs (16→24→28dp) and slides on a\n   SPATIAL spring, colors cross-fade on an EFFECTS spring. All sizing derives\n   from the track tokens via calc(), so resizing the track keeps the thumb\n   aligned (no hand-tuned offsets).\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-switch-track-width                Track width (52px)\n     --md-switch-track-height               Track height (32px) — density knob\n     --md-switch-handle-size                Selected handle diameter (derived\n                                            from track height; unselected +\n                                            pressed scale from it)\n     --md-switch-track-color                Unselected track fill\n     --md-switch-track-outline-color        Unselected track outline\n     --md-switch-handle-color               Unselected handle fill\n     --md-switch-selected-track-color       Selected track fill\n     --md-switch-selected-handle-color      Selected handle fill\n     --md-switch-icon-color                 Unselected icon color\n     --md-switch-selected-icon-color        Selected icon color\n     --md-switch-state-layer-color          Hover / focus / press overlay\n     --md-switch-focus-ring-color           Focus-ring color\n\n   CSS PARTS:\n     track        Track container\n     state-layer  State-layer overlay (centered on handle)\n     handle       Handle / thumb\n     icon         Check or close icon\n\n   SLOTS:\n     (none)\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST — touch target, sizing, motion & base tokens\n   ========================================================== */\n\n:host {\n  /* ── Sizing (density scales from the track) ── */\n  /* Track width shrinks proportionally with density to maintain the ~1.625\n     aspect ratio (52:32). Each rung removes 6px width vs 4px height. */\n  --_track-w: var(--md-switch-track-width, max(28px, calc(52px + var(--md-sys-density-scale, 0) * 6px)));\n  /* Global density knob: the track height drives every derived size (handle,\n     state layer, thumb travel). Each `data-density` rung (0…-4) trims 4px,\n     floored at 16px; unchanged at density 0. The host min-block-size stays\n     max(48px, …) so the touch target is preserved even as the track tightens. */\n  --_track-h: max(16px, calc(var(--md-switch-track-height, 32px) + var(--md-sys-density-scale, 0) * 4px));\n  --_track-border: 2px;\n  /* State-layer / handle-container disc, proportional to the track. */\n  --_sl: calc(var(--_track-h) + 8px);\n  /* Thumb sizes: selected is the knob; unselected + pressed scale from it. */\n  --_handle-sel: var(--md-switch-handle-size, calc(var(--_track-h) * 0.75));\n  --_handle-unsel: calc(var(--_handle-sel) * 2 / 3);\n  --_handle-press: calc(var(--_handle-sel) * 7 / 6);\n  /* Thumb-centre travel, derived so the thumb stays inset by half the track\n     height at each end regardless of track size. */\n  --_offset-unsel: calc(var(--_track-h) / 2 - var(--_sl) / 2 - var(--_track-border));\n  --_offset-sel: calc(var(--_track-w) - var(--_track-h) / 2 - var(--_sl) / 2 - var(--_track-border));\n\n  /* ── Motion (M3-Expressive springs) ── */\n  --_spring-spatial: var(--md-sys-motion-spring-spatial-fast-duration, 350ms)\n    var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90));\n  --_spring-effects: var(--md-sys-motion-spring-effects-fast-duration, 150ms)\n    var(--md-sys-motion-spring-effects-fast-easing, cubic-bezier(0.31, 0.94, 0.34, 1.00));\n\n  /* ── Unselected color tokens ── */\n  --_track-color: var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #E6E0E9));\n  --_track-outline-color: var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747E));\n  --_handle-color: var(--md-switch-handle-color, var(--md-sys-color-outline, #79747E));\n  --_state-layer-color: var(--md-switch-state-layer-color, var(--md-sys-color-on-surface, #1C1B1F));\n  --_icon-color: var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #E6E0E9));\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-block-size: max(48px, var(--_track-h));\n  inline-size: var(--_track-w);\n  cursor: pointer;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  user-select: none;\n  vertical-align: middle;\n  flex-shrink: 0;\n}\n\n/* ==========================================================\n   2. SELECTED — color overrides\n   ========================================================== */\n\n:host(.md-switch--selected) {\n  --_track-color: var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750A4));\n  --_track-outline-color: var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750A4));\n  --_handle-color: var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #FFFFFF));\n  --_state-layer-color: var(--md-switch-state-layer-color, var(--md-sys-color-primary, #6750A4));\n  --_icon-color: var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005D));\n}\n\n/* ==========================================================\n   3. INTERACTIVE STATES — hover / focus / press colors\n   Per MD3 spec, handle & track outline colors shift on interaction.\n   ========================================================== */\n\n/* ── Unselected ── */\n\n:host(:not(.md-switch--selected):hover:not(.md-switch--disabled)) {\n  --_handle-color: var(--md-sys-color-on-surface-variant, #49454F);\n  --_track-outline-color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n:host(:not(.md-switch--selected):focus-visible:not(.md-switch--disabled)) {\n  --_handle-color: var(--md-sys-color-on-surface-variant, #49454F);\n  --_track-outline-color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n:host(:not(.md-switch--selected).md-switch--pressed:not(.md-switch--disabled)) {\n  --_handle-color: var(--md-sys-color-on-surface-variant, #49454F);\n  --_track-outline-color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n/* ── Selected ── */\n\n:host(.md-switch--selected:hover:not(.md-switch--disabled)) {\n  --_handle-color: var(--md-sys-color-primary-container, #EADDFF);\n}\n\n:host(.md-switch--selected:focus-visible:not(.md-switch--disabled)) {\n  --_handle-color: var(--md-sys-color-primary-container, #EADDFF);\n}\n\n:host(.md-switch--selected.md-switch--pressed:not(.md-switch--disabled)) {\n  --_handle-color: var(--md-sys-color-primary-container, #EADDFF);\n}\n\n/* ==========================================================\n   4. TRACK — colors cross-fade on the effects spring\n   ========================================================== */\n\n.md-switch__track {\n  position: relative;\n  inline-size: var(--_track-w);\n  block-size: var(--_track-h);\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  border: var(--_track-border) solid var(--_track-outline-color);\n  background-color: var(--_track-color);\n  box-sizing: border-box;\n  transition:\n    background-color var(--_spring-effects),\n    border-color var(--_spring-effects);\n}\n\n/* ==========================================================\n   5. HANDLE CONTAINER — state-layer disc, slides on the spatial spring\n      via inset-inline-start (auto-mirrors in RTL). Offsets are derived from\n      the track tokens (see :host --_offset-*).\n   ========================================================== */\n\n.md-switch__handle-container {\n  position: absolute;\n  inset-block-start: 50%;\n  inset-inline-start: var(--_offset-unsel);\n  inline-size: var(--_sl);\n  block-size: var(--_sl);\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: inset-inline-start var(--_spring-spatial);\n  pointer-events: none;\n}\n\n:host(.md-switch--selected) .md-switch__handle-container {\n  inset-inline-start: var(--_offset-sel);\n}\n\n/* ==========================================================\n   6. STATE LAYER — fills the handle container, centered on the handle\n   ========================================================== */\n\n.md-switch__state-layer {\n  position: absolute;\n  inset: 0;\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  background-color: var(--_state-layer-color);\n  opacity: 0;\n  transition: opacity var(--_spring-effects);\n  pointer-events: none;\n}\n\n:host(:hover:not(.md-switch--disabled)) .md-switch__state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n\n:host(:focus-visible:not(.md-switch--disabled)) .md-switch__state-layer {\n  opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);\n}\n\n:host(:active:not(.md-switch--disabled)) .md-switch__state-layer,\n:host(.md-switch--pressed:not(.md-switch--disabled)) .md-switch__state-layer {\n  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);\n}\n\n/* ==========================================================\n   7. HANDLE — morphs size per state on the spatial spring\n      Unselected (no icon): --_handle-unsel (16dp @ 32 track)\n      Unselected (icon) / Selected: --_handle-sel (24dp)\n      Pressed: --_handle-press (28dp)\n   ========================================================== */\n\n.md-switch__handle {\n  position: relative;\n  z-index: 1;\n  inline-size: var(--_handle-unsel);\n  block-size: var(--_handle-unsel);\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  background-color: var(--_handle-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition:\n    inline-size var(--_spring-spatial),\n    block-size var(--_spring-spatial),\n    background-color var(--_spring-effects);\n}\n\n:host(.md-switch--selected) .md-switch__handle {\n  inline-size: var(--_handle-sel);\n  block-size: var(--_handle-sel);\n}\n\n:host(.md-switch--with-icon:not(.md-switch--selected)) .md-switch__handle {\n  inline-size: var(--_handle-sel);\n  block-size: var(--_handle-sel);\n}\n\n:host(.md-switch--pressed:not(.md-switch--disabled)) .md-switch__handle {\n  inline-size: var(--_handle-press);\n  block-size: var(--_handle-press);\n}\n\n/* ==========================================================\n   8. ICON — 16px Material Symbols\n   ========================================================== */\n\n.md-switch__icon {\n  font-size: 16px;\n  inline-size: 16px;\n  block-size: 16px;\n  color: var(--_icon-color);\n  pointer-events: none;\n  line-height: 1;\n}\n\n/* Custom slotted icons (selected-icon / unselected-icon slots) — default to the\n   glyph footprint + ink so a bare <svg>/<md-icon> fits without extra CSS. */\n.md-switch__handle ::slotted(*) {\n  inline-size: 16px;\n  block-size: 16px;\n  font-size: 16px;\n  color: var(--_icon-color);\n  pointer-events: none;\n}\n\n.material-symbols-outlined {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  overflow-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n}\n\n/* ==========================================================\n   9. FOCUS RING\n   ========================================================== */\n\n:host(:focus-visible:not([disabled])) .md-switch__track,\n:host(.md-switch--focus-ring:not([disabled])) .md-switch__track {\n  outline: 3px solid var(--md-switch-focus-ring-color, var(--md-sys-color-secondary, #625B71));\n  outline-offset: 2px;\n}\n\n/* ==========================================================\n   10. DISABLED\n   ========================================================== */\n\n:host(.md-switch--disabled) {\n  cursor: default;\n  pointer-events: none;\n}\n\n:host([soft-disabled]) {\n  cursor: default;\n  pointer-events: auto;\n}\n\n:host([soft-disabled]) .md-switch__state-layer {\n  display: none;\n}\n\n/* Disabled unselected */\n:host(.md-switch--disabled:not(.md-switch--selected)) {\n  --_track-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest, #E6E0E9) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n  --_track-outline-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n  --_handle-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_icon-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest, #E6E0E9) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n}\n\n/* Disabled selected */\n:host(.md-switch--disabled.md-switch--selected) {\n  --_track-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n  --_track-outline-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n  --_handle-color: var(--md-sys-color-surface, #FEF7FF);\n  --_icon-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n}\n\n:host(.md-switch--disabled) .md-switch__state-layer {\n  display: none;\n}\n\n/* ==========================================================\n   11. REDUCED MOTION\n   ========================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  .md-switch__handle,\n  .md-switch__handle-container,\n  .md-switch__track,\n  .md-switch__state-layer {\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* ==========================================================\n   12. FORCED COLORS (Windows High Contrast)\n   ========================================================== */\n\n@media (forced-colors: active) {\n  .md-switch__track {\n    border-color: CanvasText;\n  }\n\n  .md-switch__handle {\n    background-color: CanvasText;\n  }\n\n  .md-switch__icon {\n    color: Canvas;\n  }\n\n  :host(.md-switch--selected) .md-switch__track {\n    background-color: Highlight;\n    border-color: Highlight;\n  }\n\n  :host(.md-switch--selected) .md-switch__handle {\n    background-color: HighlightText;\n  }\n\n  :host(.md-switch--selected) .md-switch__icon {\n    color: Highlight;\n  }\n\n  :host(:focus-visible:not([disabled])) .md-switch__track,\n  :host(.md-switch--focus-ring:not([disabled])) .md-switch__track {\n    outline-color: Highlight;\n  }\n\n  :host(.md-switch--disabled) {\n    opacity: 0.5;\n  }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import { AttachInternals, Component, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';\nimport {\n  setFormValue,\n  setValidityState,\n  checkValidityOf,\n  reportValidityOf,\n  getValidityOf,\n} from '../../utils/form';\n\n/**\n * `md-switch` — Material Design 3 switch (on/off toggle).\n *\n * Form-associated: inside a `<form>` it submits its `value` under `name` when\n * selected, and restores on form reset. It is a *labelable* element — wrap it in\n * a `<label>` (clicks on the label text toggle it and name it), or pass\n * `aria-label` / `aria-labelledby` on the host.\n *\n * @slot selected-icon - Custom icon shown on the handle when selected (replaces\n *                        the `selected-icon` glyph). Requires `icons` or\n *                        `show-only-selected-icon`.\n * @slot unselected-icon - Custom icon shown on the handle when unselected\n *                         (replaces the `unselected-icon` glyph). Requires `icons`.\n *\n * @part track - Track container\n * @part state-layer - State-layer overlay (centered on handle)\n * @part handle - Handle (thumb)\n * @part icon - Check / close icon\n */\n@Component({\n  tag: 'md-switch',\n  styleUrl: 'md-switch.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class MdSwitch {\n  @Element() el!: HTMLElement;\n\n\n  /**\n   * Localized constraint-validation message shown when `required` is unmet.\n   *\n   * A prop rather than a hardcoded string, matching md-time-picker's\n   * `value-missing-label`: components stay i18n-engine-agnostic and the\n   * consumer localizes through its own dictionary. Native inputs get their\n   * message from the browser's locale for free; a form-associated custom\n   * element supplies its own, so leaving this hardcoded would ship an\n   * English-only form to every locale.\n   */\n  @Prop({ attribute: 'value-missing-label' }) valueMissingLabel: string =\n    'Please turn this on if you want to proceed.';\n\n  /** Message set via setCustomValidity(); non-empty wins over valueMissing. */\n  private customValidityMessage = '';\n\n  /**\n   * Form-association handle. The switch submits `value` under the host's `name`\n   * via `setFormValue`, so it participates in `<form>` / `FormData` natively\n   * (a hidden shadow `<input>` would be invisible to `FormData`).\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  // ─── Public Props ──────────────────────────────────────────\n\n  /** Whether the switch is on (selected) */\n  @Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n  /** Prevents interaction and removes from tab order */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Visually disabled but remains focusable for discoverability */\n  @Prop({ reflect: true, attribute: 'soft-disabled' }) softDisabled: boolean = false;\n\n  /** Mark the control required for form validation / assistive tech. */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Name submitted with the owning `<form>`. */\n  @Prop({ reflect: true }) name: string = '';\n\n  /** Value submitted when the switch is selected. */\n  @Prop() value: string = 'on';\n\n  /** Show icons on both selected and unselected states (check / close) */\n  @Prop() icons: boolean = false;\n\n  /** Show icon only when selected */\n  @Prop({ attribute: 'show-only-selected-icon' }) showOnlySelectedIcon: boolean = false;\n\n  /** Material Symbols glyph shown on the handle when selected (override the\n   *  default check). Ignored when the `selected-icon` slot is filled. */\n  @Prop({ attribute: 'selected-icon' }) selectedIcon: string = 'check';\n\n  /** Material Symbols glyph shown on the handle when unselected (override the\n   *  default close). Ignored when the `unselected-icon` slot is filled. */\n  @Prop({ attribute: 'unselected-icon' }) unselectedIcon: string = 'close';\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  // ─── Events ────────────────────────────────────────────────\n\n  /**\n   * Fires **before** the state changes. Call `event.preventDefault()` to\n   * block the internal toggle and manage state externally (controlled mode).\n   *\n   * ```ts\n   * switch.addEventListener('mdInput', (e) => {\n   *   e.preventDefault();          // prevent internal toggle\n   *   myState.value = e.detail.selected; // update your own state\n   * });\n   * ```\n   */\n  @Event({ cancelable: true }) mdInput: EventEmitter<{ selected: boolean }>;\n\n  /**\n   * Fires **after** the internal state has committed. Use for side effects\n   * like saving preferences, analytics, or syncing with other components.\n   * Not cancelable — the toggle has already happened.\n   *\n   * ```ts\n   * switch.addEventListener('mdChange', (e) => {\n   *   console.log('Switch is now', e.detail.selected ? 'ON' : 'OFF');\n   * });\n   * ```\n   */\n  @Event({ cancelable: false }) mdChange: EventEmitter<{ selected: boolean }>;\n\n  // ─── Internal State ────────────────────────────────────────\n\n  @State() private pressed = false;\n  /** Script-initiated focus doesn't trigger :focus-visible — force the ring. */\n  @State() private programmaticFocus = false;\n\n  private initialSelected = false;\n\n  private get isDisabled() {\n    return this.disabled || this.softDisabled;\n  }\n\n  // ─── Lifecycle ─────────────────────────────────────────────\n  // Because md-switch is form-associated it is a *labelable* element, so a\n  // wrapping <label> both names it and forwards clicks NATIVELY — no manual\n  // closest('label') wiring needed (that would double-toggle here, unlike the\n  // non-form-associated md-checkbox which must hand-roll it).\n\n  componentWillLoad() {\n    this.initialSelected = this.selected;\n    this.syncFormValue();\n  }\n\n  @Watch('selected')\n  @Watch('value')\n  onValueChange() {\n    this.syncFormValue();\n  }\n\n  /** Restore the initial state when the owning form is reset. */\n  formResetCallback() {\n    this.selected = this.initialSelected;\n  }\n\n  // ─── Public methods ────────────────────────────────────────\n\n  /** Programmatically focus the switch (shows the focus ring). */\n  @Method()\n  async setFocus() {\n    this.programmaticFocus = true;\n    this.el.focus();\n  }\n\n  // ─── Private ───────────────────────────────────────────────\n\n  private syncFormValue() {\n    setFormValue(this.internals, this.selected ? this.value : null);\n    this.syncValidity();\n  }\n\n  /**\n   * Publish `required` to the owning form. Without this the switch is\n   * form-associated (its value reaches FormData) yet ALWAYS reports valid, so an\n   * empty required control lets the form submit — `required` renders as a visual\n   * hint and nothing more. Kept in the same place as the value sync so the two\n   * can never drift.\n   */\n  @Watch('required')\n  @Watch('valueMissingLabel')\n  private syncValidity() {\n    setValidityState(this.internals, {\n      missing: this.required && !this.selected,\n      missingMessage: this.valueMissingLabel,\n      customMessage: this.customValidityMessage,\n    });\n      this.emitValidityChange();\n  }\n\n  /** Current validity: boolean, message and flags. Mirrors md-text-field. */\n  @Method()\n  async getValidity(): Promise<{\n    valid: boolean;\n    validationMessage: string;\n    flags: Record<string, boolean>;\n  }> {\n    return getValidityOf(this.internals);\n  }\n\n  /**\n   * Fires when this control's validity CHANGES — never on every keystroke, and\n   * never for a re-publish that lands on the same state.\n   *\n   * `composed: false` is deliberate. Composites like md-select embed an\n   * md-text-field, and a composed event escapes that inner shadow root, so a\n   * listener on md-select would receive the inner field's event as well as the\n   * host's — two events, different payloads, for one logical control. Keeping\n   * it uncomposed means each component reports only for itself, while\n   * `bubbles: true` still lets a <form> or app root hear every control.\n   */\n  @Event({ bubbles: true, composed: false }) mdValidityChange: EventEmitter<{\n    valid: boolean;\n    validationMessage: string;\n    flags: Record<string, boolean>;\n  }>;\n\n  /** Last emitted validity, so a re-publish that changes nothing stays silent. */\n  private lastValidityKey: string | null = null;\n\n  /**\n   * Emit mdValidityChange if validity actually moved.\n   *\n   * The FIRST call only primes the baseline. Initial state is not a change, and\n   * emitting on mount would fire once per control on every page load — noise a\n   * consumer would have to filter out, and misleading for anything logging\n   * \"field became invalid\".\n   */\n  private emitValidityChange() {\n    const v = getValidityOf(this.internals);\n    const key = `${v.valid}|${v.validationMessage}`;\n    if (this.lastValidityKey === key) return;\n    const primed = this.lastValidityKey !== null;\n    this.lastValidityKey = key;\n    if (primed) this.mdValidityChange.emit(v);\n  }\n\n  /** Constraint-validation API, matching md-text-field and the native contract. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return checkValidityOf(this.internals);\n  }\n\n  /** Like checkValidity(), but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return reportValidityOf(this.internals);\n  }\n\n  /** App/server-side validation: a non-empty message marks the control invalid\n   *  for its form until cleared with an empty string. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customValidityMessage = message;\n    this.syncValidity();\n  }\n\n  private toggle = () => {\n    if (this.isDisabled) return;\n\n    const proposed = !this.selected;\n\n    const inputEvent = this.mdInput.emit({ selected: proposed });\n    if (inputEvent.defaultPrevented) return;\n\n    this.selected = proposed;\n    this.mdChange.emit({ selected: this.selected });\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.isDisabled) return;\n    // WAI-ARIA switch pattern: Space toggles (Enter is reserved for form\n    // submission — matching md-checkbox / md-radio).\n    if (e.key === ' ') {\n      e.preventDefault();\n      if (e.repeat) return; // ignore OS key-repeat storms\n      this.pressed = true;\n      this.toggle();\n      setTimeout(() => { this.pressed = false; }, 150);\n    }\n  };\n\n  private handlePointerDown = () => {\n    if (!this.isDisabled) this.pressed = true;\n  };\n\n  private handlePointerUp = () => {\n    this.pressed = false;\n  };\n\n  private handleBlur = () => {\n    this.programmaticFocus = false;\n  };\n\n  // ─── Render ────────────────────────────────────────────────\n\n  render() {\n    const showSelectedIcon = this.icons || this.showOnlySelectedIcon;\n    const showUnselectedIcon = this.icons;\n    const showIcon = this.selected ? showSelectedIcon : showUnselectedIcon;\n\n    return (\n      <Host\n        role=\"switch\"\n        aria-checked={String(this.selected)}\n        aria-disabled={this.isDisabled ? 'true' : null}\n        aria-required={this.required ? 'true' : null}\n        tabindex={this.disabled ? '-1' : '0'}\n        class={{\n          'md-switch': true,\n          'md-switch--selected': this.selected,\n          'md-switch--disabled': this.disabled || this.softDisabled,\n          'md-switch--pressed': this.pressed,\n          'md-switch--with-icon': showIcon,\n          'md-switch--focus-ring': this.programmaticFocus,\n        }}\n        onClick={this.toggle}\n        onKeyDown={this.handleKeyDown}\n        onPointerDown={this.handlePointerDown}\n        onPointerUp={this.handlePointerUp}\n        onPointerLeave={this.handlePointerUp}\n        onPointerCancel={this.handlePointerUp}\n        onBlur={this.handleBlur}\n      >\n        <div class=\"md-switch__track\" part=\"track\">\n          <div class=\"md-switch__handle-container\">\n            <span class=\"md-switch__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n            <span class=\"md-switch__handle\" part=\"handle\">\n              {showIcon && (this.selected ? (\n                <slot name=\"selected-icon\">\n                  <span class=\"md-switch__icon material-symbols-outlined\" part=\"icon\" aria-hidden=\"true\">\n                    {this.selectedIcon}\n                  </span>\n                </slot>\n              ) : (\n                <slot name=\"unselected-icon\">\n                  <span class=\"md-switch__icon material-symbols-outlined\" part=\"icon\" aria-hidden=\"true\">\n                    {this.unselectedIcon}\n                  </span>\n                </slot>\n              ))}\n            </span>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/md3/{p-4e3d6e40.entry.js → p-7d1686a7.entry.js}

@@ -1,2 +1,2 @@
-import{r as a,h as e,H as s,a as t}from"./p-DTaX19_O.js";const o=()=>`:host{--_container-color:var(--md-badge-container-color, var(--md-sys-color-error, #B3261E));--_label-color:var(--md-badge-label-color, var(--md-sys-color-on-error, #FFFFFF));--_shape:var(--md-badge-container-shape, var(--md-sys-shape-corner-full, 9999px));--_icon-color:var(--md-badge-icon-color, var(--md-badge-label-color, var(--md-sys-color-on-error, #FFFFFF)));--_icon-size:var(--md-badge-icon-size, max(8px, calc(10px + var(--md-sys-density-scale, 0) * 0.5px)));--_offset-x:var(--md-badge-offset-x, 50%);--_offset-y:var(--md-badge-offset-y, -50%);--_large-height:var(--md-badge-large-height, max(12px, calc(16px + var(--md-sys-density-scale, 0) * 1px)));--_large-padding:var(--md-badge-large-padding, 0 max(2px, calc(4px + var(--md-sys-density-scale, 0) * 0.5px)));--_small-size:var(--md-badge-small-size, max(4px, calc(6px + var(--md-sys-density-scale, 0) * 0.5px)));display:inline-flex;align-items:center;justify-content:center;position:absolute;top:0;right:0;z-index:1;box-sizing:border-box;pointer-events:none;background-color:var(--_container-color);border-radius:var(--_shape)}:host(.md-badge--small){width:var(--_small-size);height:var(--_small-size);padding:0;transform:translate(var(--_offset-x), var(--_offset-y))}:host(.md-badge--large){min-width:var(--_large-height);height:var(--_large-height);padding:var(--_large-padding);transform:translate(var(--_offset-x), var(--_offset-y));color:var(--_label-color);font-family:var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);font-size:max(9px, calc(11px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-label-small-font-weight, 500);letter-spacing:var(--md-sys-typescale-label-small-letter-spacing, 0.5px);line-height:1}:host(.md-badge--large:not(.md-badge--has-content)){padding:0}.md-badge__label{display:block;white-space:nowrap;text-align:center}.md-badge__icon{font-size:var(--_icon-size);color:var(--_icon-color);line-height:1;display:flex;align-items:center;justify-content:center}::slotted(*){width:var(--_icon-size) !important;height:var(--_icon-size) !important;font-size:var(--_icon-size) !important;color:var(--_icon-color) !important;fill:var(--_icon-color) !important}.material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-weight:normal;font-style:normal;font-size:var(--_icon-size, 10px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;overflow-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}@media (forced-colors: active){:host{forced-color-adjust:none;background-color:Mark;color:MarkText}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const r=class{constructor(e){a(this,e);this.variant="large";this.value="";this.max=999;this.icon="";this.density=0;this.hasSlottedIcon=false;this.readSlottedIcon=()=>{this.hasSlottedIcon=Array.from(this.el.children).some((a=>a.getAttribute("slot")==="icon"))}}componentWillLoad(){this.readSlottedIcon()}get displayValue(){if(this.variant==="small"||!this.value)return"";const a=Number(this.value);if(!Number.isNaN(a)&&Number.isFinite(a)&&a>this.max){return`${this.max}+`}return this.value.slice(0,4)}get accessibleLabel(){if(this.variant==="small")return"notification";const a=this.displayValue;if(a)return a;if(this.icon)return this.icon;return undefined}render(){const a=this.variant==="small";const t=this.displayValue;const o=!a&&!!t;const r=!a&&(!!this.icon||this.hasSlottedIcon);const i=o||r;return e(s,{key:"24252e87e0919c3ef49173c4659ad7509e989826",class:{"md-badge":true,"md-badge--small":a,"md-badge--large":!a,"md-badge--has-content":i},role:"status","aria-label":this.accessibleLabel},!a&&e("slot",{key:"8d9fd92575a0a03c8d7e9017b58e86b609d36d07",name:"icon",onSlotchange:this.readSlottedIcon},this.icon?e("span",{class:"md-badge__icon material-symbols-outlined",part:"icon","aria-hidden":"true"},this.icon):null),o&&e("span",{key:"c62df0bac4aa40c211e3fc830fa51fb0f003852c",class:"md-badge__label",part:"label"},t))}get el(){return t(this)}};r.style=o();export{r as md_badge};
-//# sourceMappingURL=p-4e3d6e40.entry.js.map
+import{r as a,h as e,H as s,g as t}from"./p-WmvQpZnM.js";const o=()=>`:host{--_container-color:var(--md-badge-container-color, var(--md-sys-color-error, #B3261E));--_label-color:var(--md-badge-label-color, var(--md-sys-color-on-error, #FFFFFF));--_shape:var(--md-badge-container-shape, var(--md-sys-shape-corner-full, 9999px));--_icon-color:var(--md-badge-icon-color, var(--md-badge-label-color, var(--md-sys-color-on-error, #FFFFFF)));--_icon-size:var(--md-badge-icon-size, max(8px, calc(10px + var(--md-sys-density-scale, 0) * 0.5px)));--_offset-x:var(--md-badge-offset-x, 50%);--_offset-y:var(--md-badge-offset-y, -50%);--_large-height:var(--md-badge-large-height, max(12px, calc(16px + var(--md-sys-density-scale, 0) * 1px)));--_large-padding:var(--md-badge-large-padding, 0 max(2px, calc(4px + var(--md-sys-density-scale, 0) * 0.5px)));--_small-size:var(--md-badge-small-size, max(4px, calc(6px + var(--md-sys-density-scale, 0) * 0.5px)));display:inline-flex;align-items:center;justify-content:center;position:absolute;top:0;right:0;z-index:1;box-sizing:border-box;pointer-events:none;background-color:var(--_container-color);border-radius:var(--_shape)}:host(.md-badge--small){width:var(--_small-size);height:var(--_small-size);padding:0;transform:translate(var(--_offset-x), var(--_offset-y))}:host(.md-badge--large){min-width:var(--_large-height);height:var(--_large-height);padding:var(--_large-padding);transform:translate(var(--_offset-x), var(--_offset-y));color:var(--_label-color);font-family:var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);font-size:max(9px, calc(11px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-label-small-font-weight, 500);letter-spacing:var(--md-sys-typescale-label-small-letter-spacing, 0.5px);line-height:1}:host(.md-badge--large:not(.md-badge--has-content)){padding:0}.md-badge__label{display:block;white-space:nowrap;text-align:center}.md-badge__icon{font-size:var(--_icon-size);color:var(--_icon-color);line-height:1;display:flex;align-items:center;justify-content:center}::slotted(*){width:var(--_icon-size) !important;height:var(--_icon-size) !important;font-size:var(--_icon-size) !important;color:var(--_icon-color) !important;fill:var(--_icon-color) !important}.material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-weight:normal;font-style:normal;font-size:var(--_icon-size, 10px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;overflow-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}@media (forced-colors: active){:host{forced-color-adjust:none;background-color:Mark;color:MarkText}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const r=class{constructor(e){a(this,e);this.variant="large";this.value="";this.max=999;this.icon="";this.density=0;this.hasSlottedIcon=false;this.readSlottedIcon=()=>{this.hasSlottedIcon=Array.from(this.el.children).some((a=>a.getAttribute("slot")==="icon"))}}componentWillLoad(){this.readSlottedIcon()}get displayValue(){if(this.variant==="small"||!this.value)return"";const a=Number(this.value);if(!Number.isNaN(a)&&Number.isFinite(a)&&a>this.max){return`${this.max}+`}return this.value.slice(0,4)}get accessibleLabel(){if(this.variant==="small")return"notification";const a=this.displayValue;if(a)return a;if(this.icon)return this.icon;return undefined}render(){const a=this.variant==="small";const t=this.displayValue;const o=!a&&!!t;const r=!a&&(!!this.icon||this.hasSlottedIcon);const i=o||r;return e(s,{key:"81a83dc5494fb90262e948a16795763cbb077410",class:{"md-badge":true,"md-badge--small":a,"md-badge--large":!a,"md-badge--has-content":i},role:"status","aria-label":this.accessibleLabel},!a&&e("slot",{key:"011585801a80562b772518fafdfdb9bf3cdcf6ff",name:"icon",onSlotchange:this.readSlottedIcon},this.icon?e("span",{class:"md-badge__icon material-symbols-outlined",part:"icon","aria-hidden":"true"},this.icon):null),o&&e("span",{key:"20544a829f5cdc2b6a0e564aabcc310ee0bf80bb",class:"md-badge__label",part:"label"},t))}get el(){return t(this)}};r.style=o();export{r as md_badge};
+//# sourceMappingURL=p-7d1686a7.entry.js.map

package/dist/md3/p-7e7f0e45.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,f as s,h as e,H as o,g as h}from"./p-WmvQpZnM.js";import{L as a}from"./p-DnKDoE8K.js";import{s as n,g as r,c as l,r as c}from"./p-DWxN44zD.js";import{V as p,i as d,c as u}from"./p-Bz-JaJcA.js";const m=()=>`:host{--md-text-field-padding-inline-end:var(--md-sys-spacing-inset-lg, 16px);--_min-width:var(--md-autocomplete-min-width, 220px);--_chip-gap:var(--md-autocomplete-chip-gap, var(--md-sys-spacing-gap-xs, 4px));--_chip-radius:var(--md-autocomplete-chip-radius, 8px);--_caret-color:var(--md-autocomplete-caret-color, var(--md-sys-color-on-surface-variant));--_clear-color:var(--md-autocomplete-clear-color, var(--md-sys-color-on-surface-variant));--_option-icon-size:var(--md-autocomplete-option-icon-size, 20px);--_loading-color:var(--md-autocomplete-loading-color, var(--md-sys-color-on-surface-variant));display:inline-flex;flex-direction:column;inline-size:var(--md-autocomplete-width, 100%);min-inline-size:var(--_min-width);box-sizing:border-box;vertical-align:bottom;position:relative}:host(.md-autocomplete--chips-top) .md-autocomplete__chips{margin-block-start:0;margin-block-end:var(--md-sys-spacing-inset-sm, 8px)}:host(.md-autocomplete--chips-left),:host(.md-autocomplete--chips-right){flex-direction:row;align-items:center;gap:var(--md-sys-spacing-gap-sm, 8px)}:host(.md-autocomplete--chips-left) .md-autocomplete__field,:host(.md-autocomplete--chips-right) .md-autocomplete__field{flex:1 1 auto;inline-size:auto;min-inline-size:0}:host(.md-autocomplete--chips-left) .md-autocomplete__chips,:host(.md-autocomplete--chips-right) .md-autocomplete__chips{contain:none;flex:0 1 auto;max-inline-size:50%;margin-block-start:0}.md-autocomplete__field{display:block;inline-size:100%}.md-autocomplete__chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_chip-gap);max-inline-size:100%;margin-block-start:var(--md-sys-spacing-inset-sm, 8px);contain:inline-size}.md-autocomplete__chips md-chip{--md-chip-container-shape:var(--_chip-radius)}.md-autocomplete__inline-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_chip-gap);min-inline-size:0;overflow:visible}.md-autocomplete__inline-chips md-chip{--md-chip-container-shape:var(--_chip-radius);flex-shrink:0}.md-autocomplete__caret{color:var(--_caret-color);font-size:var(--md-autocomplete-caret-size, 24px);line-height:1;display:inline-flex;align-items:center;justify-content:center;inline-size:24px;block-size:24px;cursor:pointer;transition:transform var(--md-sys-motion-duration-short4, 200ms)     var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-autocomplete--open) .md-autocomplete__caret{transform:rotate(180deg)}.md-autocomplete__clear{--md-icon-button-container-width:28px;--md-icon-button-container-height:28px;--md-icon-button-icon-size:18px;color:var(--_clear-color);margin-inline-end:2px}.md-autocomplete__clear--hidden{visibility:hidden;pointer-events:none}.md-autocomplete__loader{display:inline-flex;align-items:center;justify-content:center;inline-size:24px;block-size:24px;--md-loading-indicator-size:var(--md-autocomplete-spinner-size, 22px);--md-loading-indicator-shape-size:var(--md-autocomplete-spinner-size, 22px)}md-menu::part(empty-text){display:flex;justify-content:center;padding:var(--md-sys-spacing-inset-md, 12px) var(--md-sys-spacing-inset-lg, 16px);color:var(--md-sys-color-on-surface-variant);text-align:center}.md-autocomplete__option-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--md-autocomplete-option-icon-color, var(--md-sys-color-on-surface-variant, #49454f));font-size:var(--_option-icon-size);inline-size:var(--_option-icon-size);block-size:var(--_option-icon-size)}.md-autocomplete__listbox{display:block}.md-autocomplete__vspacer{inline-size:100%;pointer-events:none}.md-autocomplete__loading{display:block;padding:var(--md-sys-spacing-inset-md, 12px) var(--md-sys-spacing-inset-lg, 16px);color:var(--_loading-color)}.md-autocomplete__sr-status{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host(.md-autocomplete--disabled),:host(.md-autocomplete--soft-disabled){pointer-events:none}:host(.md-autocomplete--soft-disabled) .md-autocomplete__field{pointer-events:auto}@media (prefers-reduced-motion: reduce){.md-autocomplete__caret,.md-autocomplete__clear{transition:none}}@media (forced-colors: active){.md-autocomplete__caret,.md-autocomplete__clear{color:CanvasText}}.material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;overflow-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;let f=0;const y=200;const g=200;const b=class{constructor(o){t(this,o);this.mdChange=i(this,"mdChange",7);this.mdInput=i(this,"mdInput",7);this.mdOpen=i(this,"mdOpen",7);this.mdClose=i(this,"mdClose",7);this.mdClear=i(this,"mdClear",7);this.mdValidityChange=i(this,"mdValidityChange",5);if(o.$hostElement$["s-ei"]){this.internals=o.$hostElement$["s-ei"]}else{this.internals=o.$hostElement$.attachInternals();o.$hostElement$["s-ei"]=this.internals}this.valueMissingLabel="Please make a selection";this.reserveSupportingSpace=false;this.customValidityMessage="";this.variant="filled";this.label="";this.placeholder="";this.supportingText="";this.error=false;this.errorText="";this.disabled=false;this.softDisabled=false;this.required=false;this.density=0;this.options=[];this.multiple=false;this.chipPosition="below";this.value="";this.inputValue="";this.freeSolo=false;this.maxSelected=0;this.loading=false;this.noOptionsText="No options";this.noResultsText="No results";this.loadingText="Loading…";this.statusTemplate="{count} suggestions available";this.disableCloseOnSelect=false;this.clearOnBlur=false;this.clearable=true;this.clearIcon="close";this.dropdownIcon="arrow_drop_down";this.limitResults=0;this.open=false;this.virtualize="auto";this.filterMode="substring";this.placement="bottom-start";this.matchTriggerWidth=true;this.name="";this.triggerId=`md-autocomplete-${++f}`;this.focused=false;this.optionsData=[];this.labelMap=new Map;this.packing=false;this.typedSinceOpen=false;this.loadGen=0;this.pendingListFocus=null;this.providerSet=false;this.vc=new p({queryItem:t=>this.el.shadowRoot?.querySelector(`md-menu-item[data-vindex="${t}"]`)??null,requestRender:()=>s(this)});this.isSelected=t=>this.selectedArray.includes(t);this.defaultValue="";this.defaultInputValue="";this.lastValidityKey=null;this._syncGuard=false;this._lastEmit=null;this.vpWired=false;this.handleMenuOpen=()=>{this._syncGuard=true;this.open=true;this._syncGuard=false;if(this._lastEmit!=="open"){this._lastEmit="open";this.mdOpen.emit()}if(this.vc.active){this.vc.setQuery(this.query);this.attachMenuViewport()}};this.handleMenuClose=()=>{this._syncGuard=true;this.open=false;this._syncGuard=false;if(this._lastEmit!=="close"){this._lastEmit="close";this.mdClose.emit()}this.typedSinceOpen=false;this.vc.detachViewport();this.vpWired=false;if(!this.multiple&&!this.freeSolo){const t=typeof this.value==="string"&&this.value?this.labelMap.get(this.value)??this.value:"";if(this.inputValue!==t){this.inputValue=t;this.mdInput.emit(t)}}};this.removeChip=t=>i=>{i.stopPropagation();if("preventDefault"in i)i.preventDefault();if(this.disabled||this.softDisabled||!this.multiple)return;this.commitValue(this.selectedArray.filter((i=>i!==t)))};this.handleClear=()=>{if(this.disabled||this.softDisabled)return;this.inputValue="";this.mdInput.emit("");this.typedSinceOpen=false;if(this.vc.active)this.vc.setQuery("");this.commitValue(this.multiple?[]:"");this.mdClear.emit();this.fieldEl?.focus?.()};this.handleFieldInput=t=>{this.applyTyped(t.detail??"")};this.handleListboxKeyDown=t=>{if(t.ctrlKey||t.metaKey||t.altKey)return;const i=t.key.length===1;if(!i&&t.key!=="Backspace")return;t.preventDefault();t.stopPropagation();this.fieldEl?.focus?.();this.applyTyped(t.key==="Backspace"?this.inputValue.slice(0,-1):this.inputValue+t.key)};this.handleFieldKeyDown=t=>{if(this.disabled||this.softDisabled)return;switch(t.key){case"ArrowDown":t.preventDefault();if(!this.open){this.pendingListFocus="first";this.open=true}else{this.firstOptionItem()?.focus()}break;case"ArrowUp":t.preventDefault();if(!this.open){this.pendingListFocus="last";this.open=true}else{const t=this.el.shadowRoot?.querySelectorAll(".md-autocomplete__listbox md-menu-item:not([disabled])");t?.[t.length-1]?.focus()}break;case"Enter":if(this.freeSolo&&this.commitFreeSolo()){t.preventDefault();if(!this.multiple)this.open=false}break;case"Escape":if(this.open){t.preventDefault();this.open=false}break;case"Backspace":if(this.multiple&&!this.inputValue&&this.selectedArray.length>0){this.commitValue(this.selectedArray.slice(0,-1))}break}};this.handleFieldFocus=()=>{this.focused=true};this.handleFieldBlur=()=>{this.focused=false;if(this.open)return;if(this.clearOnBlur&&!this.multiple&&!this.freeSolo){const t=typeof this.value==="string"?this.labelMap.get(this.value):"";if(this.inputValue&&this.inputValue!==t){this.inputValue=t??"";this.mdInput.emit(this.inputValue)}}};this.renderChipItem=t=>e("md-chip",{key:t,part:"chip",exportparts:"remove:chip-remove,label:chip-label",variant:"input",selectable:false,label:this.labelMap.get(t)??t,disabled:this.disabled||this.softDisabled,removable:!this.disabled&&!this.softDisabled,onMdRemove:this.removeChip(t),onClick:t=>t.stopPropagation()})}async focusInput(){this.fieldEl?.focus?.()}async showMenu(){if(this.disabled)return;this.open=true}async closeMenu(){this.open=false}async loadOptions(t){const i=++this.loadGen;if(this.virtualize==="never"||!d()){const i=Array.isArray(t)?t:Array.from({length:t.count},((i,s)=>t.getRow(s)));this.vc.reset();this.optionsData=this.normalize(i);this.refreshLabelMap();return}this.optionsData=[];this.packing=true;try{this.vc.setFixedRowHeight(this.rowHeight);this.vc.setFilterMode(this.filterMode);await this.vc.load(Array.isArray(t)?this.normalize(t):t)}finally{if(i===this.loadGen)this.packing=false}if(i!==this.loadGen)return;if(this.open&&this.typedSinceOpen)this.vc.setQuery(this.query);this.refreshLabelMap();s(this)}async getLabels(t){if(this.vc.active)return Object.fromEntries(this.vc.getLabels(t));const i={};for(const s of t)i[s]=this.labelMap.get(s)??s;return i}normalize(t){return t.map((t=>({value:t.value,label:t.label??t.value,disabled:!!t.disabled,icon:t.icon,iconColor:t.iconColor,supportingText:t.supportingText??t.description,selected:!!t.selected})))}get optionList(){const t=this.options;if(Array.isArray(t))return t;if(typeof t==="string"&&t.trim()){try{const i=JSON.parse(t);return Array.isArray(i)?i:[]}catch{if(typeof console!=="undefined"){console.warn("[md-autocomplete] `options` attribute is not valid JSON:",t)}return[]}}return[]}refreshOptions(){const t=u(this.el,[]);const i=t.length>0?t:this.normalize(this.optionList);const e=this.virtualize==="always"||this.virtualize==="auto"&&i.length>y;const o=++this.loadGen;if(e&&d()&&i.length>0){this.optionsData=[];this.packing=true;this.vc.setFixedRowHeight(this.rowHeight);this.vc.setFilterMode(this.filterMode);void this.vc.load(i).then((t=>{if(o!==this.loadGen)return;if(!t){this.optionsData=i}this.packing=false;if(t&&this.open&&this.typedSinceOpen)this.vc.setQuery(this.query);this.refreshLabelMap();s(this)}))}else{this.vc.reset();this.optionsData=i;this.refreshLabelMap()}}onOptionChange(t){t.stopPropagation();this.refreshOptions()}get busy(){return this.loading||this.packing}get selectedArray(){if(this.multiple)return Array.isArray(this.value)?this.value:[];if(typeof this.value==="string"&&this.value)return[this.value];return[]}get query(){return this.typedSinceOpen?this.inputValue.trim():""}get filteredOptions(){const t=this.selectedArray;const i={inputValue:this.query,selected:t};let s=this.filterer?this.filterer(this.optionsData,i):this.defaultFilter(this.optionsData,i);if(this.limitResults>0)s=s.slice(0,this.limitResults);return s}defaultFilter(t,i){const s=i.inputValue.toLowerCase();if(!s)return t;return t.filter((t=>t.label.toLowerCase().includes(s)||t.value.toLowerCase().includes(s)||(t.supportingText?.toLowerCase().includes(s)??false)))}refreshLabelMap(){const t=this.selectedArray;if(t.length===0){if(this.labelMap.size)this.labelMap=new Map;return}const i=new Map;if(this.vc.active){const s=this.vc.getLabels(t);for(const e of t){i.set(e,s.get(e)??this.labelMap.get(e)??e)}}else{for(const s of t){const t=this.optionsData.find((t=>t.value===s));i.set(s,t?.label??this.labelMap.get(s)??s)}}this.labelMap=i}componentWillLoad(){this.refreshOptions();this.defaultValue=Array.isArray(this.value)?[...this.value]:this.value;this.defaultInputValue=this.inputValue;this.syncFormValue()}componentDidLoad(){if(this.open&&!this.disabled){void this.menuEl?.show?.({autoFocus:false});this.mdOpen.emit()}}disconnectedCallback(){clearTimeout(this.searchDebounce);this.vc.detachViewport()}formResetCallback(){this.value=Array.isArray(this.defaultValue)?[...this.defaultValue]:this.defaultValue;this.inputValue=this.defaultInputValue;this.typedSinceOpen=false;clearTimeout(this.searchDebounce);if(this.vc.active)this.vc.setQuery("")}syncFormValue(){this.updateValidity();this.refreshLabelMap();if(!this.multiple&&!this.open){const t=typeof this.value==="string"&&this.value?this.labelMap.get(this.value)??this.value:"";if(this.inputValue!==t)this.inputValue=t}if(this.multiple){const t=this.selectedArray;if(!t.length){n(this.internals,null);return}const i=new FormData;for(const s of t)i.append(this.name||"",s);n(this.internals,i);return}const t=typeof this.value==="string"?this.value:"";n(this.internals,t||null)}onMultipleFlip(){if(this.multiple){if(typeof this.value==="string")this.value=this.value?[this.value]:[];else this.syncFormValue()}else{if(Array.isArray(this.value))this.value=this.value[0]??"";else this.syncFormValue()}}updateValidity(){if(!this.internals?.setValidity)return;if(this.customValidityMessage){this.internals.setValidity({customError:true},this.customValidityMessage,this.fieldEl??this.el)}else if(this.required&&this.selectedArray.length===0){this.internals.setValidity({valueMissing:true},this.errorText||this.valueMissingLabel,this.fieldEl??this.el)}else{this.internals.setValidity({})}this.emitValidityChange()}async getValidity(){return r(this.internals)}emitValidityChange(){const t=r(this.internals);const i=`${t.valid}|${t.validationMessage}`;if(this.lastValidityKey===i)return;const s=this.lastValidityKey!==null;this.lastValidityKey=i;if(s)this.mdValidityChange.emit(t)}async checkValidity(){return l(this.internals)}async reportValidity(){return c(this.internals)}async setCustomValidity(t){this.customValidityMessage=t;this.updateValidity()}syncMenu(t){if(this._syncGuard||!this.menuEl)return;if(t){this.menuEl.show?.({autoFocus:false})}else{this.menuEl.close?.()}}attachMenuViewport(){void(async()=>{const t=await(this.menuEl?.getScrollViewport?.())??null;if(!t||this.vpWired)return;this.vpWired=true;await this.vc.attachViewport((async()=>t))})()}componentDidRender(){void this.syncComboboxRefs();if(!this.menuEl)return;if(this.vc.active&&!this.providerSet){void this.menuEl.setVirtualProvider?.(this.vc.provider);this.providerSet=true}else if(!this.vc.active&&this.providerSet){void this.menuEl.setVirtualProvider?.(null);this.providerSet=false}if(this.open&&this.vc.active&&!this.vpWired)this.attachMenuViewport();if(this.pendingListFocus&&this.open){const t=this.el.shadowRoot?.querySelectorAll(".md-autocomplete__listbox md-menu-item:not([disabled])");const i=this.pendingListFocus==="first"?t?.[0]:t?.[t.length-1];if(i){this.pendingListFocus=null;i.focus()}}else if(this.pendingListFocus&&!this.open){this.pendingListFocus=null}}async syncComboboxRefs(){const t=this.fieldEl;const i=await(t?.getInputElement?.());if(!i||!("ariaControlsElements"in i))return;const s=this.el.shadowRoot?.querySelector('[role="listbox"]');const e=this.open&&s?[s]:null;const o=i.ariaControlsElements;if(!e&&!o?.length)return;if(e&&o?.length===1&&o[0]===e[0])return;i.ariaControlsElements=e}commitValue(t){this.value=t;this.mdChange.emit(t)}pick(t,i,s,e){e?.stopPropagation();if(s)return;if(this.multiple){const s=this.selectedArray;const o=s.includes(t);const h=!o&&this.maxSelected>0&&s.length>=this.maxSelected;if(h){const t=e?.target;if(t)t.selected=false;return}this.labelMap=new Map(this.labelMap).set(t,i);const a=o?s.filter((i=>i!==t)):[...s,t];this.commitValue(a);this.inputValue="";this.mdInput.emit("");this.typedSinceOpen=false;if(this.vc.active)this.vc.setQuery("");this.fieldEl?.focus?.()}else{this.labelMap=new Map(this.labelMap).set(t,i);this.commitValue(t);this.inputValue=i;this.mdInput.emit(i);this.typedSinceOpen=false;if(this.vc.active)this.vc.setQuery("");if(!this.disableCloseOnSelect)this.open=false;this.fieldEl?.focus?.()}}commitFreeSolo(){if(!this.freeSolo)return false;const t=this.inputValue.trim();if(!t)return false;if(this.multiple){const i=this.selectedArray;if(i.includes(t))return true;if(this.maxSelected>0&&i.length>=this.maxSelected)return false;this.labelMap=new Map(this.labelMap).set(t,t);this.commitValue([...i,t]);this.inputValue="";this.mdInput.emit("")}else{this.commitValue(t)}return true}applyTyped(t){this.inputValue=t;this.typedSinceOpen=true;this.mdInput.emit(t);if(!this.open)this.open=true;if(this.vc.active){clearTimeout(this.searchDebounce);this.searchDebounce=setTimeout((()=>{this.vc.setQuery(this.query)}),g)}}firstOptionItem(){return this.el.shadowRoot?.querySelector(".md-autocomplete__listbox md-menu-item:not([disabled])")??null}get inlineChips(){return this.multiple&&this.chipPosition==="inline"}renderChips(){if(!this.multiple||this.inlineChips)return null;const t=this.selectedArray;if(t.length===0)return null;return e("div",{class:"md-autocomplete__chips",part:"chips",role:"group","aria-label":this.label?`${this.label} — selected`:"Selected"},t.map(this.renderChipItem))}renderInlineChips(){if(!this.inlineChips)return null;const t=this.selectedArray;if(t.length===0)return null;return e("div",{slot:"chips",class:"md-autocomplete__inline-chips",part:"chips",role:"group","aria-label":this.label?`${this.label} — selected`:"Selected"},t.map(this.renderChipItem))}renderClearButton(t=false){if(!this.clearable)return null;const i=this.multiple?this.selectedArray.length>0:!!this.inputValue||!!this.value;const s=t||!i;return e("md-icon-button",{class:{"md-autocomplete__clear":true,"md-autocomplete__clear--hidden":s},slot:"trailing-icon",part:"clear",variant:"standard",size:"xs",icon:this.clearIcon,"aria-label":"Clear value","aria-hidden":s?"true":undefined,onClick:t=>{t.stopPropagation();this.handleClear()}})}renderTrigger(){return e("md-text-field",{ref:t=>this.fieldEl=t,id:this.triggerId,class:"md-autocomplete__field",part:"field",variant:this.variant,label:this.label,placeholder:this.placeholder,value:this.inputValue,disabled:this.disabled,error:this.error,errorText:this.errorText,reserveSupportingSpace:this.reserveSupportingSpace,supportingText:this.supportingText,required:this.required,density:this.density,appearFocused:this.open||this.focused,"aria-haspopup":"listbox",inputRole:"combobox",inputExpanded:this.open,inputAriaAutocomplete:"list",chipsWrap:this.inlineChips,onMdInput:this.handleFieldInput,onClick:()=>{if(!this.disabled&&!this.softDisabled&&!this.open)this.open=true},onKeyDown:this.handleFieldKeyDown,onFocus:this.handleFieldFocus,onBlur:this.handleFieldBlur},this.renderInlineChips(),this.busy?[this.renderClearButton(true),e("span",{slot:"trailing-icon",class:"md-autocomplete__loader",part:"loading-spinner"},e("slot",{name:"loader"},e(a,{label:this.loadingText})))]:[this.renderClearButton(),e("span",{slot:"trailing-icon",class:"md-autocomplete__caret material-symbols-outlined",part:"caret","aria-hidden":"true",onClick:t=>{t.stopPropagation();if(!this.disabled&&!this.softDisabled)this.open=!this.open}},e("slot",{name:"dropdown-icon"},this.dropdownIcon))])}renderOptionIcon(t,i){if(!t)return null;return e("span",{slot:"leading-icon",part:"option-icon",class:"material-symbols-outlined md-autocomplete__option-icon",style:i?{color:i}:undefined,"aria-hidden":"true"},t)}renderVirtualOptions(){return e("div",{class:"md-autocomplete__listbox",role:"listbox",id:`${this.triggerId}-listbox`,"aria-label":this.label||"Options","aria-multiselectable":this.multiple?"true":undefined,onKeyDown:this.handleListboxKeyDown},e("div",{class:"md-autocomplete__vspacer",style:{height:`${this.vc.topPad}px`},"aria-hidden":"true"}),this.vc.windowRows.map(((t,i)=>{const s=this.vc.windowStart+i;const o=this.isSelected(t.value);return e("md-menu-item",{key:t.index,id:`${this.triggerId}-opt-${s}`,"data-vindex":s,presentation:"option",type:this.multiple?"checkbox":"radio","check-position":"start","keep-open":true,part:o?"option option-selected":"option",disabled:t.disabled,selected:o,headline:t.label,"supporting-text":t.supportingText||"","aria-setsize":this.vc.filteredLength,"aria-posinset":s+1,onMdClick:i=>this.pick(t.value,t.label,t.disabled,i)},this.renderOptionIcon(t.icon||undefined))})),e("div",{class:"md-autocomplete__vspacer",style:{height:`${this.vc.bottomPad}px`},"aria-hidden":"true"}))}renderMenu(){const t=this.vc.active;const i=t?[]:this.filteredOptions;const s=t?false:this.optionsData.length===0;const o=this.busy?"":t?this.vc.filteredLength===0?this.noResultsText:"":s?this.noOptionsText:i.length===0?this.noResultsText:"";const h=t?this.maxHeight??320:this.maxHeight;return e("md-menu",{ref:t=>this.menuEl=t,anchor:this.triggerId,placement:this.placement,"match-anchor-width":this.matchTriggerWidth,"max-height":h,persistent:this.disableCloseOnSelect,"empty-text":o,"auto-focus":false,listbox:true,"list-label":this.label||"Options",part:"menu",onMdOpen:this.handleMenuOpen,onMdClose:this.handleMenuClose},this.busy?e("div",{class:"md-autocomplete__loading",part:"loading",role:"status","aria-label":this.loadingText},e("md-progress-indicator",{variant:"linear",indeterminate:true,wave:true,part:"loading-progress",label:this.loadingText})):t?this.renderVirtualOptions():e("div",{class:"md-autocomplete__listbox",role:"listbox",id:`${this.triggerId}-listbox`,"aria-label":this.label||"Options","aria-multiselectable":this.multiple?"true":undefined,onKeyDown:this.handleListboxKeyDown},i.map(((t,i)=>e("md-menu-item",{key:t.value,id:`${this.triggerId}-opt-${i}`,presentation:"option",type:this.multiple?"checkbox":"radio","check-position":"start","keep-open":true,part:this.isSelected(t.value)?"option option-selected":"option",disabled:t.disabled,selected:this.isSelected(t.value),headline:t.label,"supporting-text":t.supportingText||"",onMdClick:i=>this.pick(t.value,t.label,t.disabled,i)},this.renderOptionIcon(t.icon,t.iconColor))))))}render(){const t=this.multiple&&(this.chipPosition==="top"||this.chipPosition==="left");const i=this.vc.active?this.vc.filteredLength:this.filteredOptions.length;const s=this.busy?this.loadingText:this.open?this.statusTemplate.replace("{count}",String(i)):"";return e(o,{key:"95493b711c8d67c0ad5156af5d6b406757003260",class:{"md-autocomplete":true,[`md-autocomplete--${this.variant}`]:true,"md-autocomplete--open":this.open,"md-autocomplete--disabled":this.disabled,"md-autocomplete--soft-disabled":this.softDisabled,"md-autocomplete--multiple":this.multiple,"md-autocomplete--loading":this.busy,[`md-autocomplete--chips-${this.chipPosition}`]:this.multiple},"aria-haspopup":"listbox","aria-busy":this.busy?"true":"false"},t&&this.renderChips(),this.renderTrigger(),!t&&this.renderChips(),this.renderMenu(),e("span",{key:"0f2678b39bb9644696e625623111d5ea73b7a7fa",class:"md-autocomplete__sr-status",role:"status","aria-live":"polite"},s))}static get formAssociated(){return true}get el(){return h(this)}static get watchers(){return{options:[{refreshOptions:0}],value:[{syncFormValue:0}],multiple:[{onMultipleFlip:0}],required:[{updateValidity:0}],valueMissingLabel:[{updateValidity:0}],open:[{syncMenu:0}]}}};b.style=m();export{b as md_autocomplete};
+//# sourceMappingURL=p-7e7f0e45.entry.js.map

package/dist/md3/p-7e7f0e45.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdAutocompleteCss","autocompleteIdCounter","VIRTUALIZE_THRESHOLD","SEARCH_DEBOUNCE_MS","MdAutocomplete","constructor","hostRef","this","valueMissingLabel","reserveSupportingSpace","customValidityMessage","variant","label","placeholder","supportingText","error","errorText","disabled","softDisabled","required","density","options","multiple","chipPosition","value","inputValue","freeSolo","maxSelected","loading","noOptionsText","noResultsText","loadingText","statusTemplate","disableCloseOnSelect","clearOnBlur","clearable","clearIcon","dropdownIcon","limitResults","open","virtualize","filterMode","placement","matchTriggerWidth","name","triggerId","focused","optionsData","labelMap","Map","packing","typedSinceOpen","loadGen","pendingListFocus","providerSet","vc","VirtualSelectController","queryItem","i","el","shadowRoot","querySelector","requestRender","forceUpdate","isSelected","val","selectedArray","includes","defaultValue","defaultInputValue","lastValidityKey","_syncGuard","_lastEmit","vpWired","handleMenuOpen","mdOpen","emit","active","setQuery","query","attachMenuViewport","handleMenuClose","mdClose","detachViewport","committed","get","mdInput","removeChip","e","stopPropagation","preventDefault","commitValue","filter","v","handleClear","mdClear","fieldEl","focus","handleFieldInput","applyTyped","detail","handleListboxKeyDown","ctrlKey","metaKey","altKey","isPrintable","key","length","slice","handleFieldKeyDown","firstOptionItem","all","querySelectorAll","commitFreeSolo","handleFieldFocus","handleFieldBlur","renderChipItem","h","part","exportparts","selectable","removable","onMdRemove","onClick","focusInput","showMenu","closeMenu","loadOptions","source","gen","isWasmSupported","rows","Array","isArray","from","count","_","getRow","reset","normalize","refreshLabelMap","setFixedRowHeight","rowHeight","setFilterMode","load","getLabels","values","Object","fromEntries","out","list","map","o","icon","iconColor","description","selected","optionList","raw","trim","parsed","JSON","parse","console","warn","refreshOptions","slotted","collectOptions","data","shouldVirtualize","then","ok","onOptionChange","busy","filteredOptions","state","results","filterer","defaultFilter","q","toLowerCase","size","next","resolved","set","opt","find","componentWillLoad","syncFormValue","componentDidLoad","menuEl","show","autoFocus","disconnectedCallback","clearTimeout","searchDebounce","formResetCallback","updateValidity","setFormValue","internals","FormData","append","single","onMultipleFlip","setValidity","customError","valueMissing","emitValidityChange","getValidity","getValidityOf","valid","validationMessage","primed","mdValidityChange","checkValidity","checkValidityOf","reportValidity","reportValidityOf","setCustomValidity","message","syncMenu","close","vp","getScrollViewport","attachViewport","async","componentDidRender","syncComboboxRefs","setVirtualProvider","provider","target","field","input","getInputElement","listbox","current","ariaControlsElements","mdChange","pick","exists","blocked","item","setTimeout","inlineChips","renderChips","class","role","renderInlineChips","slot","renderClearButton","forceHidden","hasValue","hidden","undefined","renderTrigger","ref","id","appearFocused","inputRole","inputExpanded","inputAriaAutocomplete","chipsWrap","onMdInput","onKeyDown","onFocus","onBlur","LazyLoadingIndicator","renderOptionIcon","style","color","renderVirtualOptions","height","topPad","windowRows","row","filteredIndex","windowStart","index","presentation","type","headline","filteredLength","onMdClick","bottomPad","renderMenu","virtual","filtered","datasetEmpty","emptyText","menuMaxHeight","maxHeight","anchor","persistent","onMdOpen","onMdClose","indeterminate","wave","render","chipsFirst","optionCount","srStatus","replace","String","Host"],"sources":["src/components/md-autocomplete/md-autocomplete.css?tag=md-autocomplete&encapsulation=shadow","src/components/md-autocomplete/md-autocomplete.tsx"],"sourcesContent":["/* ==========================================================\n   md-autocomplete — Material Design 3 free-text + filterable\n   dropdown. Composes md-text-field + md-menu.\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-autocomplete-width               Trigger width (default 100% of container)\n     --md-autocomplete-min-width           Minimum trigger width\n     --md-autocomplete-chip-gap            Gap between selected chips\n     --md-autocomplete-chip-radius         Chip corner radius\n     --md-autocomplete-caret-color         Trailing caret color\n     --md-autocomplete-caret-size          Caret glyph size (default 24px)\n     --md-autocomplete-clear-color         Clear button color\n     --md-autocomplete-option-icon-size    Leading-icon size in items\n     --md-autocomplete-loading-color       Color of the loading row\n     --md-autocomplete-spinner-size        Trigger busy-spinner size (default 22px)\n\n   CSS PARTS:\n     field    Inner md-text-field\n     chips    Selected chips container\n     caret    Trailing dropdown caret\n     clear    Trailing clear button\n     menu     Popup md-menu\n     loading  Loading row inside the menu\n     loading-spinner  Trigger busy spinner (replaces clear/caret)\n\n   SLOTS:\n     loader          Replaces the default trigger busy spinner\n     dropdown-icon   Replaces the caret glyph\n   ========================================================== */\n\n:host {\n  /* The text inset already includes the caret's 7px optical bearing (see\n     md-text-field --_text-inset). Pull the TRAILING side back to the plain\n     box inset so the caret's BOX sits 7px shallower and its INK lands on the\n     same column as the text. */\n  --md-text-field-padding-inline-end: var(--md-sys-spacing-inset-lg, 16px);\n    --_min-width: var(--md-autocomplete-min-width, 220px);\n  --_chip-gap: var(--md-autocomplete-chip-gap, var(--md-sys-spacing-gap-xs, 4px));\n  --_chip-radius: var(--md-autocomplete-chip-radius, 8px);\n  --_caret-color: var(--md-autocomplete-caret-color, var(--md-sys-color-on-surface-variant));\n  --_clear-color: var(--md-autocomplete-clear-color, var(--md-sys-color-on-surface-variant));\n  --_option-icon-size: var(--md-autocomplete-option-icon-size, 20px);\n  --_loading-color: var(--md-autocomplete-loading-color, var(--md-sys-color-on-surface-variant));\n\n  /* Fill the container (like md-select) — the trigger width must come from\n     layout, never from the typed text (a shrink-to-fit inline-block would\n     grow/shrink with the input's content). Flex column so chip-position can\n     reorder the chips around the field. */\n  display: inline-flex;\n  flex-direction: column;\n  inline-size: var(--md-autocomplete-width, 100%);\n  min-inline-size: var(--_min-width);\n  box-sizing: border-box;\n  vertical-align: bottom;\n  position: relative;\n}\n\n/* ── Chip positions around the field ───────────────────────── */\n\n:host(.md-autocomplete--chips-top) .md-autocomplete__chips {\n  /* DOM order puts the chips first for top/left (focus + reading order must\n     match the visual order) — no CSS `order` reshuffling. */\n  margin-block-start: 0;\n  margin-block-end: var(--md-sys-spacing-inset-sm, 8px);\n}\n\n:host(.md-autocomplete--chips-left),\n:host(.md-autocomplete--chips-right) {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--md-sys-spacing-gap-sm, 8px);\n}\n\n:host(.md-autocomplete--chips-left) .md-autocomplete__field,\n:host(.md-autocomplete--chips-right) .md-autocomplete__field {\n  flex: 1 1 auto;\n  inline-size: auto;\n  min-inline-size: 0;\n}\n\n:host(.md-autocomplete--chips-left) .md-autocomplete__chips,\n:host(.md-autocomplete--chips-right) .md-autocomplete__chips {\n  /* Beside the field: bounded content width (contain would collapse a row\n     flex item to zero), wrapping within it. */\n  contain: none;\n  flex: 0 1 auto;\n  max-inline-size: 50%;\n  margin-block-start: 0;\n}\n\n\n.md-autocomplete__field {\n  display: block;\n  inline-size: 100%;\n}\n\n.md-autocomplete__chips {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--_chip-gap);\n  max-inline-size: 100%;\n  margin-block-start: var(--md-sys-spacing-inset-sm, 8px);\n  /* Chips must not contribute intrinsic width: in a shrink-to-fit layout the\n     row's max-content (all chips on one line) would widen the whole host as\n     the selection grows. Contained, the trigger field alone sizes the host\n     and the chips wrap within it. */\n  contain: inline-size;\n}\n\n.md-autocomplete__chips md-chip {\n  --md-chip-container-shape: var(--_chip-radius);\n}\n\n/* Chips INSIDE the field (chip-position=\"inline\"): slotted into md-text-field's\n   `chips` slot with chips-wrap — they wrap onto new rows and the field grows. */\n.md-autocomplete__inline-chips {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--_chip-gap);\n  min-inline-size: 0;\n  overflow: visible;\n}\n\n.md-autocomplete__inline-chips md-chip {\n  --md-chip-container-shape: var(--_chip-radius);\n  flex-shrink: 0;\n}\n\n/* ── Trailing controls (caret + clear) ─────────────────────── */\n\n.md-autocomplete__caret {\n  color: var(--_caret-color);\n  /* Match the selects: 24px glyph, 200ms/standard rotation (see md-select.css). */\n  font-size: var(--md-autocomplete-caret-size, 24px);\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 24px;\n  block-size: 24px;\n  cursor: pointer;\n  transition: transform var(--md-sys-motion-duration-short4, 200ms)\n    var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n:host(.md-autocomplete--open) .md-autocomplete__caret {\n  transform: rotate(180deg);\n}\n\n/* The clear affordance is an md-icon-button (ring/ripple/a11y for free);\n   sized down to sit inside the field's trailing cluster. */\n.md-autocomplete__clear {\n  --md-icon-button-container-width: 28px;\n  --md-icon-button-container-height: 28px;\n  --md-icon-button-icon-size: 18px;\n  color: var(--_clear-color);\n  margin-inline-end: 2px;\n}\n\n/* Space stays reserved; the button is just invisible + inert while there is\n   nothing to clear (visibility also drops it from the tab order / AT). */\n.md-autocomplete__clear--hidden {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n/* Busy state: trigger spinner replacing the clear/caret cluster (see the\n   selects — same sizing convention). */\n.md-autocomplete__loader {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 24px;\n  block-size: 24px;\n  --md-loading-indicator-size: var(--md-autocomplete-spinner-size, 22px);\n  --md-loading-indicator-shape-size: var(--md-autocomplete-spinner-size, 22px);\n}\n\n/* ── Menu styling ──────────────────────────────────────────── */\n\n/* Centred, like the selects' empty states. */\nmd-menu::part(empty-text) {\n  display: flex;\n  justify-content: center;\n  padding: var(--md-sys-spacing-inset-md, 12px) var(--md-sys-spacing-inset-lg, 16px);\n  color: var(--md-sys-color-on-surface-variant);\n  text-align: center;\n}\n\n.md-autocomplete__option-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--md-autocomplete-option-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n  font-size: var(--_option-icon-size);\n  inline-size: var(--_option-icon-size);\n  block-size: var(--_option-icon-size);\n}\n\n/* Listbox wrapper (plain + virtualized) — the spacers preserve the full\n   scroll height around the rendered window. */\n.md-autocomplete__listbox {\n  display: block;\n}\n\n.md-autocomplete__vspacer {\n  inline-size: 100%;\n  pointer-events: none;\n}\n\n.md-autocomplete__loading {\n  display: block;\n  padding: var(--md-sys-spacing-inset-md, 12px) var(--md-sys-spacing-inset-lg, 16px);\n  color: var(--_loading-color);\n}\n\n/* Visually-hidden polite status region (expanded count / busy). */\n.md-autocomplete__sr-status {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* ── Disabled ──────────────────────────────────────────────── */\n\n:host(.md-autocomplete--disabled),\n:host(.md-autocomplete--soft-disabled) {\n  pointer-events: none;\n}\n\n:host(.md-autocomplete--soft-disabled) .md-autocomplete__field {\n  pointer-events: auto;\n}\n\n/* ── RTL ────────────────────────────────────────────────────── */\n\n/* ── Reduced motion ────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .md-autocomplete__caret,\n  .md-autocomplete__clear {\n    transition: none;\n  }\n}\n\n/* ── Forced colors (Windows High Contrast) ─────────────────── */\n\n@media (forced-colors: active) {\n  .md-autocomplete__caret,\n  .md-autocomplete__clear {\n    color: CanvasText;\n  }\n}\n\n/* ── Material Symbols font (shadow-root scope) ─────────────── */\n\n/* Caret, clear, and option icons render inside our shadow root\n   (even when slotted into nested md-text-field / md-menu-item),\n   so they need the font-family declared locally — shadow DOM\n   does not inherit page-level CSS class rules. */\n.material-symbols-outlined {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  overflow-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   This component FORWARDS `density` to the md-text-field it embeds, which\n   handles the field box — but that forward says nothing about this host, so its\n   OWN chrome (dropdown surface, chips, frame gaps) stayed at density-0 whenever\n   density came from the local prop rather than a global ancestor. Mapping the\n   prop onto the shared signal here fixes that asymmetry; the spacing-token half\n   of the rung arrives from the [density=\"-N\"] selector in tokens.css.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';\nimport { LazyLoadingIndicator } from '../../utils/lazy-loading-indicator';\nimport { setFormValue, checkValidityOf, reportValidityOf, getValidityOf } from '../../utils/form';\nimport {\n  collectOptions,\n  SelectOptionData,\n  SelectOptionInit,\n  OptionRowSource,\n} from '../../utils/select-options';\nimport { VirtualSelectController } from '../../utils/virtual-select-controller';\nimport { isWasmSupported, FilterMode } from '../../utils/wasm-option-store';\n\nlet autocompleteIdCounter = 0;\n\n/** Above this many options, `virtualize=\"auto\"` switches to the WASM path. */\nconst VIRTUALIZE_THRESHOLD = 200;\n\n/** Idle time after a keystroke before the virtualized query runs (debounce). */\nconst SEARCH_DEBOUNCE_MS = 200;\n\n/**\n * Programmatic option entry. Extends the shared select model with a\n * legacy `description` alias for `supportingText`.\n */\nexport interface MdAutocompleteOption extends SelectOptionInit {\n  /** @deprecated Use `supportingText`. */\n  description?: string;\n}\n\ninterface VirtualMenuEl extends HTMLElement {\n  show?: (opts?: { autoFocus?: boolean }) => Promise<void>;\n  close?: () => Promise<void>;\n  setVirtualProvider?: (p: unknown | null) => Promise<void>;\n  getScrollViewport?: () => Promise<HTMLElement | null>;\n}\n\n/**\n * `md-autocomplete` — Material Design 3 combobox: a text field that filters\n * a dropdown listbox **as you type in the input** (no separate search row),\n * with single or multiple (chips) selection.\n *\n * Built from the same primitives as `md-select` / `md-multi-select`:\n *   - the shared option model (`options` array of `{ value, label,\n *     supportingText?, icon?, iconColor?, disabled? }` or slotted\n *     `<md-select-option>` children),\n *   - `md-text-field` for the trigger (typing filters live),\n *   - `md-menu` as a WAI-ARIA listbox popup (options carry `aria-selected`),\n *   - `VirtualSelectController` for WASM-virtualized huge datasets\n *     (`virtualize`, `loadOptions()`, `filter-mode`) — the same engine as\n *     the selects, so tens of thousands of rows filter smoothly.\n *\n * Keyboard: typing filters; ArrowDown moves focus into the listbox (the\n * focus-moves-into-popup combobox variant — option focus is announced\n * directly); Enter selects; Escape closes back to the input; Backspace on an\n * empty multi input removes the last chip.\n *\n * ARIA: the real textbox — the `<input>` inside md-text-field's shadow root —\n * is promoted to `role=\"combobox\"` with `aria-expanded` / `aria-autocomplete`\n * (handed over via `input-role`, since only that component renders the input),\n * and points at this component's listbox through ARIA element reflection. An\n * IDREF could not: it would have to resolve inside md-text-field's tree, where\n * the listbox is not. See `syncComboboxRefs`.\n *\n * Extras kept from the surface this API mirrors: `free-solo` (commit arbitrary text),\n * `max-selected`, `clearable`, `disable-close-on-select`, `clear-on-blur`,\n * a custom `filterer` and `limit-results` (client-side path only).\n */\n@Component({\n  tag: 'md-autocomplete',\n  styleUrl: 'md-autocomplete.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class MdAutocomplete {\n  @Element() el!: HTMLElement;\n\n\n  /**\n   * Localized constraint-validation message shown when `required` is unmet.\n   * `errorText` still wins when set, so an app-supplied inline message and the\n   * native bubble stay in agreement.\n   */\n  @Prop({ attribute: 'value-missing-label' }) valueMissingLabel: string = 'Please make a selection';\n\n\n  /**\n   * Always occupy the supporting-text line, even when there is no message, so a\n   * validation error does not push the content below it down. Forwarded to the\n   * embedded md-text-field. See that component for why it is opt-in.\n   */\n  @Prop({ attribute: 'reserve-supporting-space' }) reserveSupportingSpace: boolean = false;\n\n  /** Message set via setCustomValidity(); non-empty wins over valueMissing. */\n  private customValidityMessage = '';\n\n  /**\n   * Form-association handle. The selection is submitted under the host's\n   * `name` via `setFormValue` (a single string, or repeated pairs when\n   * `multiple`), so the control participates in `<form>`/`FormData` natively.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Visual variant of the inner text-field. */\n  @Prop({ reflect: true }) variant: 'filled' | 'outlined' = 'filled';\n\n  /** Floating label / accessible name. */\n  @Prop() label: string = '';\n\n  /** Placeholder for the input. */\n  @Prop() placeholder: string = '';\n\n  /** Supporting / helper text below the field. */\n  @Prop({ attribute: 'supporting-text' }) supportingText: string = '';\n\n  /** Error state — forwarded to the text-field. */\n  @Prop({ reflect: true }) error: boolean = false;\n\n  /** Error text rendered in place of supporting text when `error` is true. */\n  @Prop({ attribute: 'error-text' }) errorText: string = '';\n\n  /** Disabled — non-interactive. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Soft-disabled — focusable but non-interactive. */\n  @Prop({ reflect: true, attribute: 'soft-disabled' }) softDisabled: boolean = false;\n\n  /** Required for native form parity. */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Density forwarded to the text-field. */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  /**\n   * Programmatic options (shared select model; `description` is accepted as\n   * a legacy alias for `supportingText`). Slotted `<md-select-option>`\n   * children take precedence when present.\n   *\n   * Accepts either the array (property) or a **JSON string** (attribute), the\n   * same contract `md-organization-chart.nodes` uses — so a plain-HTML page can\n   * declare its dataset inline instead of reaching for a script:\n   *\n   *     <md-autocomplete options='[{\"value\":\"a\",\"label\":\"Apple\"}]'></md-autocomplete>\n   *\n   * Malformed JSON degrades to an empty list rather than throwing: a broken\n   * attribute must not take the whole field down.\n   */\n  @Prop() options: MdAutocompleteOption[] | string = [];\n\n  /** Multi-select mode — the selection renders as removable chips. */\n  @Prop({ reflect: true }) multiple: boolean = false;\n\n  /** Where the selection chips live (`multiple` only): around the field\n   *  (`'below'` default, `'top'`, `'left'`, `'right'`) or `'inline'` inside\n   *  it, before the input, wrapping onto new rows as the selection grows\n   *  (the field grows with them). */\n  @Prop({ attribute: 'chip-position', reflect: true }) chipPosition:\n    | 'below'\n    | 'top'\n    | 'left'\n    | 'right'\n    | 'inline' = 'below';\n\n  /**\n   * Single-mode value — option `value` or free-solo string.\n   * Multi-mode value — array of option `value`s.\n   */\n  @Prop({ mutable: true }) value: string | string[] = '';\n\n  /** Live text of the input (separate from `value` so typing never commits). */\n  @Prop({ mutable: true, attribute: 'input-value' }) inputValue: string = '';\n\n  /** Allow committing arbitrary text (not just options) with Enter. */\n  @Prop({ reflect: true, attribute: 'free-solo' }) freeSolo: boolean = false;\n\n  /** When `multiple`, the max number of selected items (`0` = no limit). */\n  @Prop({ attribute: 'max-selected' }) maxSelected: number = 0;\n\n  /** Busy state: progress bar in the menu while an async dataset loads. */\n  @Prop({ reflect: true }) loading: boolean = false;\n\n  /** Empty-state text when the dataset has no options at all. */\n  @Prop({ attribute: 'no-options-text' }) noOptionsText: string = 'No options';\n\n  /** Empty-state text when the typed filter matches nothing. */\n  @Prop({ attribute: 'no-results-text' }) noResultsText: string = 'No results';\n\n  /** Text shown while `loading` is true. */\n  @Prop({ attribute: 'loading-text' }) loadingText: string = 'Loading…';\n\n  /** Template for the polite screen-reader status while the popup is open\n   *  (localisable). `{count}` is replaced with the visible option count. */\n  @Prop({ attribute: 'status-template' }) statusTemplate: string = '{count} suggestions available';\n\n  /**\n   * Keep the menu open after a selection in **single** mode.\n   *\n   * `multiple` already stays open — picking several in a row is the point, and\n   * it dismisses on an outside click, on the trigger, or on Escape. This prop\n   * gives a single-select the same stickiness when a picker is being used to\n   * scan rather than to commit.\n   */\n  @Prop({ attribute: 'disable-close-on-select', reflect: true }) disableCloseOnSelect: boolean = false;\n\n  /** Clear a non-matching input on blur (strict single mode only). */\n  @Prop({ attribute: 'clear-on-blur', reflect: true }) clearOnBlur: boolean = false;\n\n  /** Show a clear (×) button on the trailing edge. */\n  @Prop({ reflect: true }) clearable: boolean = true;\n\n  /** Material Symbols glyph for the clear button. */\n  @Prop({ attribute: 'clear-icon' }) clearIcon: string = 'close';\n\n  /** Caret glyph; rotates 180° when open (matches md-select). Slot\n   *  `dropdown-icon` overrides it. */\n  @Prop({ attribute: 'dropdown-icon' }) dropdownIcon: string = 'arrow_drop_down';\n\n  /** Max items shown in the dropdown (`0` = unlimited; client-side path only). */\n  @Prop({ attribute: 'limit-results' }) limitResults: number = 0;\n\n  /** Open state. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Custom client-side filter (ignored while virtualized — the WASM engine\n   * filters by `filter-mode` instead).\n   */\n  @Prop() filterer?: (\n    options: SelectOptionData[],\n    state: { inputValue: string; selected: string[] },\n  ) => SelectOptionData[];\n\n  /**\n   * Virtualization strategy (same engine as `md-select`):\n   *   - `'auto'` (default): virtualize above 200 rows.\n   *   - `'always'`: always virtualize the `options` / `loadOptions` dataset.\n   *   - `'never'`: plain DOM rendering.\n   */\n  @Prop() virtualize: 'auto' | 'always' | 'never' = 'auto';\n\n  /** Filter strategy for the virtualized (WASM) path. */\n  @Prop({ attribute: 'filter-mode' }) filterMode: FilterMode = 'substring';\n\n  /** Fixed virtualized row height (px). Auto-measured from the first row if unset. */\n  @Prop({ attribute: 'row-height' }) rowHeight?: number;\n\n  /** Menu placement. */\n  @Prop() placement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' = 'bottom-start';\n\n  /** Match the dropdown width to the trigger. */\n  @Prop({ attribute: 'match-trigger-width' }) matchTriggerWidth: boolean = true;\n\n  /** Max height of the dropdown menu (px). */\n  @Prop({ attribute: 'max-height' }) maxHeight?: number;\n\n  /** Form name. Multi-mode submits as repeated `name=value` pairs. */\n  @Prop({ reflect: true }) name: string = '';\n\n  /** Fires whenever the committed selection changes. */\n  @Event() mdChange: EventEmitter<string | string[]>;\n\n  /** Fires whenever the live input string changes. */\n  @Event() mdInput: EventEmitter<string>;\n\n  /** Fires when the menu opens. */\n  @Event() mdOpen: EventEmitter<void>;\n\n  /** Fires when the menu closes. */\n  @Event() mdClose: EventEmitter<void>;\n\n  /** Fires when the user clears the value. */\n  @Event() mdClear: EventEmitter<void>;\n\n  @State() private triggerId: string = `md-autocomplete-${++autocompleteIdCounter}`;\n  @State() private focused: boolean = false;\n  /** Normalised dataset for the plain-DOM path (empty while virtualized). */\n  @State() private optionsData: SelectOptionData[] = [];\n  /** value → label cache so chips / the input label survive off-window rows. */\n  @State() private labelMap: Map<string, string> = new Map();\n\n  /** True while a dataset is packing into the WASM store — presents the same\n   *  busy UI as `loading` until the rows are ready. */\n  @State() private packing = false;\n\n  /** True once the user typed since the menu opened — before that the full\n   *  list shows (reopening a committed single value must not filter to it). */\n  private typedSinceOpen = false;\n\n  /** Monotonic guard: only the NEWEST load may commit its results (a dataset\n   *  replaced mid-pack must not interleave or resurrect stale state). */\n  private loadGen = 0;\n\n  /** Deferred focus target inside the freshly-opened listbox (APG: ArrowDown\n   *  from a closed combobox opens AND focuses the first option). */\n  private pendingListFocus: 'first' | 'last' | null = null;\n\n  private fieldEl?: HTMLElement & { focus?: () => void };\n  private menuEl?: VirtualMenuEl;\n  private searchDebounce?: ReturnType<typeof setTimeout>;\n  private providerSet = false;\n\n  private vc = new VirtualSelectController({\n    queryItem: (i) =>\n      (this.el.shadowRoot?.querySelector(\n        `md-menu-item[data-vindex=\"${i}\"]`,\n      ) as HTMLElement | null) ?? null,\n    requestRender: () => forceUpdate(this),\n  });\n\n  // ── Public API ───────────────────────────────────────────\n\n  /** Programmatically focus the input. */\n  @Method()\n  async focusInput() {\n    this.fieldEl?.focus?.();\n  }\n\n  /** Open the menu. */\n  @Method()\n  async showMenu() {\n    if (this.disabled) return;\n    this.open = true;\n  }\n\n  /** Close the menu. */\n  @Method()\n  async closeMenu() {\n    this.open = false;\n  }\n\n  /**\n   * Load a large dataset into the WASM-backed virtualized list (rows are\n   * byte-packed off the JS heap). Accepts an array or a `{ count, getRow }`\n   * factory. Falls back to plain DOM when `virtualize=\"never\"` or WASM is\n   * unavailable.\n   */\n  @Method()\n  async loadOptions(source: SelectOptionInit[] | OptionRowSource) {\n    const gen = ++this.loadGen;\n    if (this.virtualize === 'never' || !isWasmSupported()) {\n      const rows = Array.isArray(source)\n        ? source\n        : Array.from({ length: source.count }, (_, i) => source.getRow(i));\n      this.vc.reset();\n      this.optionsData = this.normalize(rows);\n      this.refreshLabelMap();\n      return;\n    }\n    this.optionsData = [];\n    this.packing = true;\n    try {\n      this.vc.setFixedRowHeight(this.rowHeight);\n      this.vc.setFilterMode(this.filterMode);\n      await this.vc.load(Array.isArray(source) ? this.normalize(source) : source);\n    } finally {\n      if (gen === this.loadGen) this.packing = false;\n    }\n    if (gen !== this.loadGen) return; // superseded by a newer load/refresh\n    // A filter typed while the pack ran must apply to the fresh dataset.\n    if (this.open && this.typedSinceOpen) this.vc.setQuery(this.query);\n    this.refreshLabelMap();\n    forceUpdate(this);\n  }\n\n  /** Resolve labels for a set of values (virtual-safe). */\n  @Method()\n  async getLabels(values: string[]): Promise<Record<string, string>> {\n    if (this.vc.active) return Object.fromEntries(this.vc.getLabels(values));\n    const out: Record<string, string> = {};\n    for (const v of values) out[v] = this.labelMap.get(v) ?? v;\n    return out;\n  }\n\n  // ── Option collection ────────────────────────────────────\n\n  /** Accept the legacy `description` alias for `supportingText`. */\n  private normalize(list: ReadonlyArray<MdAutocompleteOption>): SelectOptionData[] {\n    return list.map((o) => ({\n      value: o.value,\n      label: o.label ?? o.value,\n      disabled: !!o.disabled,\n      icon: o.icon,\n      iconColor: o.iconColor,\n      supportingText: o.supportingText ?? o.description,\n      selected: !!o.selected,\n    }));\n  }\n\n  /**\n   * `options` arrives as an array from a property binding, or as a JSON string\n   * from an attribute. Everything downstream wants the array.\n   */\n  private get optionList(): MdAutocompleteOption[] {\n    const raw = this.options;\n    if (Array.isArray(raw)) return raw;\n    if (typeof raw === 'string' && raw.trim()) {\n      try {\n        const parsed = JSON.parse(raw);\n        return Array.isArray(parsed) ? parsed : [];\n      } catch {\n        // A malformed attribute is an authoring mistake, not a reason to break\n        // the field — warn once and carry on with nothing.\n        if (typeof console !== 'undefined') {\n          console.warn('[md-autocomplete] `options` attribute is not valid JSON:', raw);\n        }\n        return [];\n      }\n    }\n    return [];\n  }\n\n  @Watch('options')\n  refreshOptions() {\n    const slotted = collectOptions(this.el, []);\n    const data = slotted.length > 0 ? slotted : this.normalize(this.optionList);\n    const shouldVirtualize =\n      this.virtualize === 'always' ||\n      (this.virtualize === 'auto' && data.length > VIRTUALIZE_THRESHOLD);\n    const gen = ++this.loadGen;\n\n    if (shouldVirtualize && isWasmSupported() && data.length > 0) {\n      this.optionsData = [];\n      this.packing = true;\n      this.vc.setFixedRowHeight(this.rowHeight);\n      this.vc.setFilterMode(this.filterMode);\n      void this.vc.load(data).then((ok) => {\n        if (gen !== this.loadGen) return; // superseded by a newer load/refresh\n        if (!ok) {\n          this.optionsData = data;\n        }\n        this.packing = false;\n        // A filter typed while the pack ran must apply to the fresh dataset.\n        if (ok && this.open && this.typedSinceOpen) this.vc.setQuery(this.query);\n        this.refreshLabelMap();\n        forceUpdate(this);\n      });\n    } else {\n      this.vc.reset();\n      this.optionsData = data;\n      this.refreshLabelMap();\n    }\n  }\n\n  /** Slotted `<md-select-option>` mount/unmount/data change → re-read. */\n  @Listen('mdSelectOptionChange')\n  onOptionChange(e: Event) {\n    e.stopPropagation();\n    this.refreshOptions();\n  }\n\n  // ── Selection state ──────────────────────────────────────\n\n  /** Effective busy state: consumer-driven `loading` OR an in-flight pack. */\n  private get busy(): boolean {\n    return this.loading || this.packing;\n  }\n\n  private get selectedArray(): string[] {\n    if (this.multiple) return Array.isArray(this.value) ? this.value : [];\n    if (typeof this.value === 'string' && this.value) return [this.value];\n    return [];\n  }\n\n  private isSelected = (val: string) => this.selectedArray.includes(val);\n\n  /** The active filter query: only what the user typed since open counts. */\n  private get query(): string {\n    return this.typedSinceOpen ? this.inputValue.trim() : '';\n  }\n\n  private get filteredOptions(): SelectOptionData[] {\n    const selected = this.selectedArray;\n    const state = { inputValue: this.query, selected };\n    let results = this.filterer\n      ? this.filterer(this.optionsData, state)\n      : this.defaultFilter(this.optionsData, state);\n    if (this.limitResults > 0) results = results.slice(0, this.limitResults);\n    return results;\n  }\n\n  private defaultFilter(\n    options: SelectOptionData[],\n    state: { inputValue: string; selected: string[] },\n  ): SelectOptionData[] {\n    const q = state.inputValue.toLowerCase();\n    if (!q) return options;\n    return options.filter(\n      (o) =>\n        o.label.toLowerCase().includes(q) ||\n        o.value.toLowerCase().includes(q) ||\n        (o.supportingText?.toLowerCase().includes(q) ?? false),\n    );\n  }\n\n  /** Rebuild the value→label cache (chips, single-mode input text). */\n  private refreshLabelMap() {\n    const values = this.selectedArray;\n    if (values.length === 0) {\n      if (this.labelMap.size) this.labelMap = new Map();\n      return;\n    }\n    const next = new Map<string, string>();\n    if (this.vc.active) {\n      const resolved = this.vc.getLabels(values);\n      for (const v of values) {\n        next.set(v, resolved.get(v) ?? this.labelMap.get(v) ?? v);\n      }\n    } else {\n      for (const v of values) {\n        const opt = this.optionsData.find((o) => o.value === v);\n        next.set(v, opt?.label ?? this.labelMap.get(v) ?? v);\n      }\n    }\n    this.labelMap = next;\n  }\n\n  // ── Form association ─────────────────────────────────────\n\n  private defaultValue: string | string[] = '';\n  private defaultInputValue = '';\n\n  componentWillLoad() {\n    this.refreshOptions();\n    this.defaultValue = Array.isArray(this.value) ? [...this.value] : this.value;\n    this.defaultInputValue = this.inputValue;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    // @Watch('open') does not fire for the initial value.\n    if (this.open && !this.disabled) {\n      void this.menuEl?.show?.({ autoFocus: false });\n      this.mdOpen.emit();\n    }\n  }\n\n  disconnectedCallback() {\n    clearTimeout(this.searchDebounce);\n    this.vc.detachViewport();\n  }\n\n  formResetCallback() {\n    this.value = Array.isArray(this.defaultValue) ? [...this.defaultValue] : this.defaultValue;\n    this.inputValue = this.defaultInputValue;\n    // Stale filter state must not survive a reset.\n    this.typedSinceOpen = false;\n    clearTimeout(this.searchDebounce);\n    if (this.vc.active) this.vc.setQuery('');\n  }\n\n  @Watch('value')\n  syncFormValue() {\n    this.updateValidity();\n    this.refreshLabelMap();\n    // Programmatic single-mode value set (menu closed): reflect the committed\n    // label in the visible input — otherwise the field shows stale text until\n    // the next interaction. Silent (no mdInput): this is not user typing.\n    if (!this.multiple && !this.open) {\n      const committed =\n        typeof this.value === 'string' && this.value\n          ? this.labelMap.get(this.value) ?? this.value\n          : '';\n      if (this.inputValue !== committed) this.inputValue = committed;\n    }\n    if (this.multiple) {\n      const values = this.selectedArray;\n      if (!values.length) {\n        setFormValue(this.internals, null);\n        return;\n      }\n      const data = new FormData();\n      for (const v of values) data.append(this.name || '', v);\n      setFormValue(this.internals, data);\n      return;\n    }\n    const single = typeof this.value === 'string' ? this.value : '';\n    setFormValue(this.internals, single || null);\n  }\n\n  /** Flipping `multiple` at runtime must re-shape the value and re-submit —\n   *  ElementInternals would otherwise keep the pre-flip payload. */\n  @Watch('multiple')\n  onMultipleFlip() {\n    if (this.multiple) {\n      if (typeof this.value === 'string') this.value = this.value ? [this.value] : [];\n      else this.syncFormValue();\n    } else {\n      if (Array.isArray(this.value)) this.value = this.value[0] ?? '';\n      else this.syncFormValue();\n    }\n  }\n\n  @Watch('required')\n  @Watch('valueMissingLabel')\n  updateValidity() {\n    if (!this.internals?.setValidity) return;\n    // setCustomValidity() takes precedence over valueMissing, matching native.\n    if (this.customValidityMessage) {\n      this.internals.setValidity(\n        { customError: true },\n        this.customValidityMessage,\n        (this.fieldEl as HTMLElement) ?? this.el,\n      );\n    } else if (this.required && this.selectedArray.length === 0) {\n      this.internals.setValidity(\n        { valueMissing: true },\n        this.errorText || this.valueMissingLabel,\n        (this.fieldEl as HTMLElement) ?? this.el,\n      );\n    } else {\n      this.internals.setValidity({});\n    }\n      this.emitValidityChange();\n  }\n\n  /** Current validity: boolean, message and flags. Mirrors md-text-field. */\n  @Method()\n  async getValidity(): Promise<{\n    valid: boolean;\n    validationMessage: string;\n    flags: Record<string, boolean>;\n  }> {\n    return getValidityOf(this.internals);\n  }\n\n  /**\n   * Fires when this control's validity CHANGES — never on every keystroke, and\n   * never for a re-publish that lands on the same state.\n   *\n   * `composed: false` is deliberate. Composites like md-select embed an\n   * md-text-field, and a composed event escapes that inner shadow root, so a\n   * listener on md-select would receive the inner field's event as well as the\n   * host's — two events, different payloads, for one logical control. Keeping\n   * it uncomposed means each component reports only for itself, while\n   * `bubbles: true` still lets a <form> or app root hear every control.\n   */\n  @Event({ bubbles: true, composed: false }) mdValidityChange: EventEmitter<{\n    valid: boolean;\n    validationMessage: string;\n    flags: Record<string, boolean>;\n  }>;\n\n  /** Last emitted validity, so a re-publish that changes nothing stays silent. */\n  private lastValidityKey: string | null = null;\n\n  /**\n   * Emit mdValidityChange if validity actually moved.\n   *\n   * The FIRST call only primes the baseline. Initial state is not a change, and\n   * emitting on mount would fire once per control on every page load — noise a\n   * consumer would have to filter out, and misleading for anything logging\n   * \"field became invalid\".\n   */\n  private emitValidityChange() {\n    const v = getValidityOf(this.internals);\n    const key = `${v.valid}|${v.validationMessage}`;\n    if (this.lastValidityKey === key) return;\n    const primed = this.lastValidityKey !== null;\n    this.lastValidityKey = key;\n    if (primed) this.mdValidityChange.emit(v);\n  }\n\n  /** Constraint-validation API, matching md-text-field and the native contract.\n   *  Validity was already published to the form here, but with no public method\n   *  a consumer could not ASK this control whether it was valid. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return checkValidityOf(this.internals);\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return reportValidityOf(this.internals);\n  }\n\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customValidityMessage = message;\n    this.updateValidity();\n  }\n\n  // ── Menu open/close plumbing (mirrors md-select) ─────────\n\n  private _syncGuard = false;\n  private _lastEmit: 'open' | 'close' | null = null;\n\n  @Watch('open')\n  syncMenu(open: boolean) {\n    if (this._syncGuard || !this.menuEl) return;\n    if (open) {\n      // Focus stays in the input — typing keeps filtering.\n      this.menuEl.show?.({ autoFocus: false });\n    } else {\n      this.menuEl.close?.();\n    }\n  }\n\n  /** True once the vc is wired to the menu's live scroll viewport. */\n  private vpWired = false;\n\n  /** Wire the vc to the menu's scroll viewport (listener + row measure +\n   *  recompute). The viewport only exists once the CAPPED virtual listbox has\n   *  rendered (the busy bar renders uncapped, without a scroll viewport), so a\n   *  null resolve just returns — componentDidRender retries every render\n   *  while the menu is open until the wiring lands. */\n  private attachMenuViewport() {\n    void (async () => {\n      const vp = (await this.menuEl?.getScrollViewport?.()) ?? null;\n      if (!vp || this.vpWired) return;\n      this.vpWired = true;\n      await this.vc.attachViewport(async () => vp);\n    })();\n  }\n\n  private handleMenuOpen = () => {\n    this._syncGuard = true;\n    this.open = true;\n    this._syncGuard = false;\n    if (this._lastEmit !== 'open') {\n      this._lastEmit = 'open';\n      this.mdOpen.emit();\n    }\n    if (this.vc.active) {\n      // Apply the live query (typing may have just opened the menu — the open\n      // event lands after the keystroke, so the filter must be preserved).\n      this.vc.setQuery(this.query);\n      this.attachMenuViewport();\n    }\n  };\n\n  private handleMenuClose = () => {\n    this._syncGuard = true;\n    this.open = false;\n    this._syncGuard = false;\n    if (this._lastEmit !== 'close') {\n      this._lastEmit = 'close';\n      this.mdClose.emit();\n    }\n    // Reset the typing gate on close, so REOPENING shows the full list (a\n    // committed single value must not filter the list down to itself).\n    this.typedSinceOpen = false;\n    this.vc.detachViewport();\n    this.vpWired = false;\n    // Strict single mode: snap the input back to the committed label (or\n    // empty) — typed-but-uncommitted text must not linger after the popup\n    // closes, and the committed value itself is never touched by typing.\n    if (!this.multiple && !this.freeSolo) {\n      const committed =\n        typeof this.value === 'string' && this.value\n          ? this.labelMap.get(this.value) ?? this.value\n          : '';\n      if (this.inputValue !== committed) {\n        this.inputValue = committed;\n        this.mdInput.emit(committed);\n      }\n    }\n  };\n\n  /** Register/clear the virtual provider on the menu once it's rendered, and\n   *  (re)try the viewport wiring — the menu may have been opened while the\n   *  dataset was still packing, before the scroll viewport existed. */\n  componentDidRender() {\n    void this.syncComboboxRefs();\n    if (!this.menuEl) return;\n    if (this.vc.active && !this.providerSet) {\n      void this.menuEl.setVirtualProvider?.(this.vc.provider);\n      this.providerSet = true;\n    } else if (!this.vc.active && this.providerSet) {\n      void this.menuEl.setVirtualProvider?.(null);\n      this.providerSet = false;\n    }\n    if (this.open && this.vc.active && !this.vpWired) this.attachMenuViewport();\n    if (this.pendingListFocus && this.open) {\n      const all = this.el.shadowRoot?.querySelectorAll(\n        '.md-autocomplete__listbox md-menu-item:not([disabled])',\n      );\n      const target = (this.pendingListFocus === 'first' ? all?.[0] : all?.[all.length - 1]) as\n        | HTMLElement\n        | undefined;\n      if (target) {\n        this.pendingListFocus = null;\n        target.focus();\n      }\n    } else if (this.pendingListFocus && !this.open) {\n      this.pendingListFocus = null;\n    }\n  }\n\n  /**\n   * Point the combobox at its listbox ACROSS the shadow boundary.\n   *\n   * The textbox lives in md-text-field's shadow root and the listbox in this\n   * one, so `aria-controls` as an IDREF is unusable — an IDREF only resolves\n   * inside a single tree. ARIA element reflection takes element references\n   * instead, and a reference from a descendant tree to an element in an\n   * ancestor tree is in scope: verified in the accessibility tree, where the\n   * combobox node gains a real `controls` relation to the listbox.\n   *\n   * Where reflection is unavailable the component is still a combobox with a\n   * truthful expanded state, and ArrowDown moves REAL focus onto an option —\n   * the APG variant that does not depend on a reference at all.\n   */\n  private async syncComboboxRefs() {\n    const field = this.fieldEl as (HTMLElement & {\n      getInputElement?: () => Promise<HTMLInputElement | null>;\n    }) | undefined;\n    const input = await field?.getInputElement?.();\n    if (!input || !('ariaControlsElements' in input)) return;\n    const listbox = this.el.shadowRoot?.querySelector('[role=\"listbox\"]') as HTMLElement | null;\n    const next = this.open && listbox ? [listbox] : null;\n    const current = (input as unknown as { ariaControlsElements: Element[] | null })\n      .ariaControlsElements;\n    // Idempotent: reassigning every render would churn the AX tree.\n    if (!next && !current?.length) return;\n    if (next && current?.length === 1 && current[0] === next[0]) return;\n    (input as unknown as { ariaControlsElements: Element[] | null }).ariaControlsElements = next;\n  }\n\n  // ── Selection ────────────────────────────────────────────\n\n  private commitValue(next: string | string[]) {\n    this.value = next;\n    this.mdChange.emit(next);\n  }\n\n  private pick(value: string, label: string, disabled: boolean | undefined, e?: CustomEvent) {\n    // Composed mdClick would otherwise leak to host listeners.\n    e?.stopPropagation();\n    if (disabled) return;\n    if (this.multiple) {\n      const current = this.selectedArray;\n      const exists = current.includes(value);\n      const blocked = !exists && this.maxSelected > 0 && current.length >= this.maxSelected;\n      if (blocked) {\n        // md-menu-item self-toggled selected=true before this fired; revert it.\n        const item = e?.target as (HTMLElement & { selected?: boolean }) | null;\n        if (item) item.selected = false;\n        return;\n      }\n      this.labelMap = new Map(this.labelMap).set(value, label);\n      const next = exists ? current.filter((v) => v !== value) : [...current, value];\n      this.commitValue(next);\n      this.inputValue = '';\n      this.mdInput.emit('');\n      this.typedSinceOpen = false;\n      if (this.vc.active) this.vc.setQuery('');\n      // Multi-select stays OPEN on pick — choosing several in a row is the\n      // whole point, and md-multi-select already behaves this way. Closing\n      // after the first pick forced a reopen per item. It dismisses on an\n      // outside click, on the trigger, or on Escape like any other popup.\n      this.fieldEl?.focus?.();\n    } else {\n      this.labelMap = new Map(this.labelMap).set(value, label);\n      this.commitValue(value);\n      this.inputValue = label;\n      this.mdInput.emit(label);\n      // The selection ends the query session NOW — not at mdClose time. The\n      // close event lands ~150ms later (menu animation); reopening within\n      // that window must already show the full list, not a list filtered by\n      // the committed label.\n      this.typedSinceOpen = false;\n      if (this.vc.active) this.vc.setQuery('');\n      if (!this.disableCloseOnSelect) this.open = false;\n      this.fieldEl?.focus?.();\n    }\n  }\n\n  private commitFreeSolo(): boolean {\n    if (!this.freeSolo) return false;\n    const raw = this.inputValue.trim();\n    if (!raw) return false;\n    if (this.multiple) {\n      const current = this.selectedArray;\n      if (current.includes(raw)) return true;\n      if (this.maxSelected > 0 && current.length >= this.maxSelected) return false;\n      this.labelMap = new Map(this.labelMap).set(raw, raw);\n      this.commitValue([...current, raw]);\n      this.inputValue = '';\n      this.mdInput.emit('');\n    } else {\n      this.commitValue(raw);\n    }\n    return true;\n  }\n\n  private removeChip = (val: string) => (e: CustomEvent | MouseEvent) => {\n    e.stopPropagation();\n    if ('preventDefault' in e) e.preventDefault();\n    if (this.disabled || this.softDisabled || !this.multiple) return;\n    this.commitValue(this.selectedArray.filter((v) => v !== val));\n  };\n\n  private handleClear = () => {\n    if (this.disabled || this.softDisabled) return;\n    this.inputValue = '';\n    this.mdInput.emit('');\n    this.typedSinceOpen = false;\n    if (this.vc.active) this.vc.setQuery('');\n    this.commitValue(this.multiple ? [] : '');\n    this.mdClear.emit();\n    this.fieldEl?.focus?.();\n  };\n\n  // ── Input handlers ───────────────────────────────────────\n\n  /** Apply a typed input string (from the field, or a printable key redirected\n   *  out of the listbox): update state, open, and drive the (virtual) filter. */\n  private applyTyped(raw: string) {\n    this.inputValue = raw;\n    this.typedSinceOpen = true;\n    this.mdInput.emit(raw);\n    if (!this.open) this.open = true;\n    if (this.vc.active) {\n      clearTimeout(this.searchDebounce);\n      this.searchDebounce = setTimeout(() => {\n        this.vc.setQuery(this.query);\n      }, SEARCH_DEBOUNCE_MS);\n    }\n    // NB: typing never uncommits the value in strict single mode — a stray\n    // keystroke (even a trailing space) must not deselect the committed\n    // option. The input resyncs to the committed label when the popup closes\n    // (see handleMenuClose), matching the MUI model.\n  }\n\n  private handleFieldInput = (e: CustomEvent<string>) => {\n    this.applyTyped(e.detail ?? '');\n  };\n\n  /** Printable keys (and Backspace) pressed while focus is on an option:\n   *  an editable combobox keeps TYPING in the input — refocus it and extend\n   *  the query instead of letting md-menu's typeahead swallow the key. */\n  private handleListboxKeyDown = (e: KeyboardEvent) => {\n    if (e.ctrlKey || e.metaKey || e.altKey) return;\n    const isPrintable = e.key.length === 1;\n    if (!isPrintable && e.key !== 'Backspace') return;\n    e.preventDefault();\n    e.stopPropagation();\n    this.fieldEl?.focus?.();\n    this.applyTyped(\n      e.key === 'Backspace' ? this.inputValue.slice(0, -1) : this.inputValue + e.key,\n    );\n  };\n\n  /** First visible, enabled option row in this shadow root (plain or virtual). */\n  private firstOptionItem(): HTMLElement | null {\n    return (\n      (this.el.shadowRoot?.querySelector(\n        '.md-autocomplete__listbox md-menu-item:not([disabled])',\n      ) as HTMLElement | null) ?? null\n    );\n  }\n\n  private handleFieldKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled || this.softDisabled) return;\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!this.open) {\n          // APG: ArrowDown on a closed combobox opens the popup AND moves\n          // focus to the first option (deferred until the list renders).\n          this.pendingListFocus = 'first';\n          this.open = true;\n        } else {\n          // Focus-moves-into-popup combobox variant: the option takes real\n          // focus (announced by AT); md-menu's roving model handles the rest.\n          this.firstOptionItem()?.focus();\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (!this.open) {\n          this.pendingListFocus = 'last';\n          this.open = true;\n        } else {\n          const all = this.el.shadowRoot?.querySelectorAll(\n            '.md-autocomplete__listbox md-menu-item:not([disabled])',\n          );\n          (all?.[all.length - 1] as HTMLElement | undefined)?.focus();\n        }\n        break;\n      case 'Enter':\n        if (this.freeSolo && this.commitFreeSolo()) {\n          e.preventDefault();\n          if (!this.multiple) this.open = false;\n        }\n        break;\n      case 'Escape':\n        if (this.open) {\n          e.preventDefault();\n          this.open = false;\n        }\n        break;\n      case 'Backspace':\n        if (this.multiple && !this.inputValue && this.selectedArray.length > 0) {\n          this.commitValue(this.selectedArray.slice(0, -1));\n        }\n        break;\n    }\n  };\n\n  private handleFieldFocus = () => {\n    this.focused = true;\n  };\n\n  private handleFieldBlur = () => {\n    this.focused = false;\n    // Not while the popup is open — ArrowDown moves focus into the listbox,\n    // and resetting the input there would wipe the active filter mid-browse.\n    if (this.open) return;\n    if (this.clearOnBlur && !this.multiple && !this.freeSolo) {\n      const committed = typeof this.value === 'string' ? this.labelMap.get(this.value) : '';\n      if (this.inputValue && this.inputValue !== committed) {\n        this.inputValue = committed ?? '';\n        this.mdInput.emit(this.inputValue);\n      }\n    }\n  };\n\n  // ── Render ───────────────────────────────────────────────\n\n  /** A single removable value token (shared by the below + inline layouts). */\n  private renderChipItem = (val: string) => (\n    <md-chip\n      key={val}\n      part=\"chip\"\n      exportparts=\"remove:chip-remove,label:chip-label\"\n      variant=\"input\"\n      // A display token of a selected value (role=group, not a nested\n      // interactive button host) — only its ✕ removes it.\n      selectable={false}\n      label={this.labelMap.get(val) ?? val}\n      disabled={this.disabled || this.softDisabled}\n      removable={!this.disabled && !this.softDisabled}\n      onMdRemove={this.removeChip(val)}\n      onClick={(e: MouseEvent) => e.stopPropagation()}\n    ></md-chip>\n  );\n\n  private get inlineChips(): boolean {\n    return this.multiple && this.chipPosition === 'inline';\n  }\n\n  /** Chips BELOW the field (default layout). */\n  private renderChips() {\n    if (!this.multiple || this.inlineChips) return null;\n    const selected = this.selectedArray;\n    if (selected.length === 0) return null;\n    return (\n      <div\n        class=\"md-autocomplete__chips\"\n        part=\"chips\"\n        role=\"group\"\n        aria-label={this.label ? `${this.label} — selected` : 'Selected'}\n      >\n        {selected.map(this.renderChipItem)}\n      </div>\n    );\n  }\n\n  /** Chips INSIDE the field (md-text-field `chips` slot), wrapping onto new\n   *  rows — the field grows with them (`chips-wrap`). */\n  private renderInlineChips() {\n    if (!this.inlineChips) return null;\n    const selected = this.selectedArray;\n    if (selected.length === 0) return null;\n    return (\n      <div\n        slot=\"chips\"\n        class=\"md-autocomplete__inline-chips\"\n        part=\"chips\"\n        role=\"group\"\n        aria-label={this.label ? `${this.label} — selected` : 'Selected'}\n      >\n        {selected.map(this.renderChipItem)}\n      </div>\n    );\n  }\n\n  private renderClearButton(forceHidden = false) {\n    if (!this.clearable) return null;\n    const hasValue = this.multiple\n      ? this.selectedArray.length > 0\n      : !!this.inputValue || !!this.value;\n    // Always rendered (visibility-hidden when empty or busy): the button\n    // popping in and out would change the field's intrinsic width, making the\n    // trigger jump by its 30px whenever text appears in a shrink-to-fit layout.\n    const hidden = forceHidden || !hasValue;\n    return (\n      <md-icon-button\n        class={{\n          'md-autocomplete__clear': true,\n          'md-autocomplete__clear--hidden': hidden,\n        }}\n        slot=\"trailing-icon\"\n        part=\"clear\"\n        variant=\"standard\"\n        size=\"xs\"\n        icon={this.clearIcon}\n        aria-label=\"Clear value\"\n        aria-hidden={hidden ? 'true' : undefined}\n        onClick={(e: MouseEvent) => {\n          e.stopPropagation();\n          this.handleClear();\n        }}\n      ></md-icon-button>\n    );\n  }\n\n  private renderTrigger() {\n    return (\n      <md-text-field\n        ref={(el) => (this.fieldEl = el as HTMLElement)}\n        id={this.triggerId}\n        class=\"md-autocomplete__field\"\n        part=\"field\"\n        variant={this.variant}\n        label={this.label}\n        placeholder={this.placeholder}\n        value={this.inputValue}\n        disabled={this.disabled}\n        error={this.error}\n        errorText={this.errorText}\n        reserveSupportingSpace={this.reserveSupportingSpace}\n        supportingText={this.supportingText}\n        required={this.required}\n        density={this.density}\n        appearFocused={this.open || this.focused}\n        // Mirrored by md-text-field onto the focused input (global ARIA attr,\n        // valid on textbox) — the input truthfully announces its listbox popup.\n        aria-haspopup=\"listbox\"\n        // Promote the real textbox to a combobox: the role, the expanded state\n        // and the typing relationship all have to sit on the element AT reads.\n        // The listbox reference is wired separately (syncComboboxRefs) because\n        // it has to cross md-text-field's shadow boundary.\n        inputRole=\"combobox\"\n        inputExpanded={this.open}\n        inputAriaAutocomplete=\"list\"\n        chipsWrap={this.inlineChips}\n        onMdInput={this.handleFieldInput}\n        onClick={() => {\n          if (!this.disabled && !this.softDisabled && !this.open) this.open = true;\n        }}\n        onKeyDown={this.handleFieldKeyDown}\n        onFocus={this.handleFieldFocus}\n        onBlur={this.handleFieldBlur}\n      >\n        {this.renderInlineChips()}\n        {this.busy ? (\n          // Busy state (consumer `loading` OR a dataset packing into WASM): a\n          // spinner replaces the CARET only; the (hidden) clear button keeps\n          // its reserved slot so the trailing cluster — and therefore the\n          // field width — is identical across idle/typing/busy/loaded.\n          [\n            this.renderClearButton(true),\n            <span slot=\"trailing-icon\" class=\"md-autocomplete__loader\" part=\"loading-spinner\">\n              <slot name=\"loader\">\n                <LazyLoadingIndicator label={this.loadingText}></LazyLoadingIndicator>\n              </slot>\n            </span>,\n          ]\n        ) : (\n          [\n            this.renderClearButton(),\n            <span\n              slot=\"trailing-icon\"\n              class=\"md-autocomplete__caret material-symbols-outlined\"\n              part=\"caret\"\n              aria-hidden=\"true\"\n              onClick={(e: MouseEvent) => {\n                e.stopPropagation();\n                if (!this.disabled && !this.softDisabled) this.open = !this.open;\n              }}\n            >\n              {/* Static glyph + CSS rotation on open — same caret as the selects\n                  (a glyph swap would double-flip with the rotate rule). */}\n              <slot name=\"dropdown-icon\">{this.dropdownIcon}</slot>\n            </span>,\n          ]\n        )}\n      </md-text-field>\n    );\n  }\n\n  private renderOptionIcon(icon?: string, iconColor?: string) {\n    if (!icon) return null;\n    return (\n      <span\n        slot=\"leading-icon\"\n        part=\"option-icon\"\n        class=\"material-symbols-outlined md-autocomplete__option-icon\"\n        style={iconColor ? { color: iconColor } : undefined}\n        aria-hidden=\"true\"\n      >\n        {icon}\n      </span>\n    );\n  }\n\n  private renderVirtualOptions() {\n    return (\n      <div\n        class=\"md-autocomplete__listbox\"\n        role=\"listbox\"\n        id={`${this.triggerId}-listbox`}\n        aria-label={this.label || 'Options'}\n        aria-multiselectable={this.multiple ? 'true' : undefined}\n        onKeyDown={this.handleListboxKeyDown}\n      >\n        <div\n          class=\"md-autocomplete__vspacer\"\n          style={{ height: `${this.vc.topPad}px` }}\n          aria-hidden=\"true\"\n        ></div>\n        {this.vc.windowRows.map((row, i) => {\n          const filteredIndex = this.vc.windowStart + i;\n          const selected = this.isSelected(row.value);\n          return (\n            <md-menu-item\n              key={row.index}\n              id={`${this.triggerId}-opt-${filteredIndex}`}\n              data-vindex={filteredIndex}\n              presentation=\"option\"\n              type={this.multiple ? 'checkbox' : 'radio'}\n              check-position=\"start\"\n              keep-open\n              part={selected ? 'option option-selected' : 'option'}\n              disabled={row.disabled}\n              selected={selected}\n              headline={row.label}\n              supporting-text={row.supportingText || ''}\n              aria-setsize={this.vc.filteredLength}\n              aria-posinset={filteredIndex + 1}\n              onMdClick={(e: CustomEvent) => this.pick(row.value, row.label, row.disabled, e)}\n            >\n              {this.renderOptionIcon(row.icon || undefined)}\n            </md-menu-item>\n          );\n        })}\n        <div\n          class=\"md-autocomplete__vspacer\"\n          style={{ height: `${this.vc.bottomPad}px` }}\n          aria-hidden=\"true\"\n        ></div>\n      </div>\n    );\n  }\n\n  private renderMenu() {\n    const virtual = this.vc.active;\n    const filtered = virtual ? [] : this.filteredOptions;\n    const datasetEmpty = virtual ? false : this.optionsData.length === 0;\n    const emptyText = this.busy\n      ? ''\n      : virtual\n        ? this.vc.filteredLength === 0\n          ? this.noResultsText\n          : ''\n        : datasetEmpty\n          ? this.noOptionsText\n          : filtered.length === 0\n            ? this.noResultsText\n            : '';\n    const menuMaxHeight = virtual ? (this.maxHeight ?? 320) : this.maxHeight;\n\n    return (\n      <md-menu\n        ref={(el) => (this.menuEl = el as VirtualMenuEl)}\n        anchor={this.triggerId}\n        placement={this.placement}\n        match-anchor-width={this.matchTriggerWidth}\n        max-height={menuMaxHeight}\n        persistent={this.disableCloseOnSelect}\n        empty-text={emptyText}\n        auto-focus={false}\n        listbox\n        list-label={this.label || 'Options'}\n        part=\"menu\"\n        onMdOpen={this.handleMenuOpen}\n        onMdClose={this.handleMenuClose}\n      >\n        {this.busy ? (\n          <div class=\"md-autocomplete__loading\" part=\"loading\" role=\"status\" aria-label={this.loadingText}>\n            <md-progress-indicator\n              variant=\"linear\"\n              indeterminate\n              wave\n              part=\"loading-progress\"\n              label={this.loadingText}\n            ></md-progress-indicator>\n          </div>\n        ) : virtual ? (\n          this.renderVirtualOptions()\n        ) : (\n          <div\n            class=\"md-autocomplete__listbox\"\n            role=\"listbox\"\n            id={`${this.triggerId}-listbox`}\n            aria-label={this.label || 'Options'}\n            aria-multiselectable={this.multiple ? 'true' : undefined}\n            onKeyDown={this.handleListboxKeyDown}\n          >\n            {filtered.map((opt, i) => (\n              <md-menu-item\n                key={opt.value}\n                id={`${this.triggerId}-opt-${i}`}\n                presentation=\"option\"\n                type={this.multiple ? 'checkbox' : 'radio'}\n                check-position=\"start\"\n                keep-open\n                part={this.isSelected(opt.value) ? 'option option-selected' : 'option'}\n                disabled={opt.disabled}\n                selected={this.isSelected(opt.value)}\n                headline={opt.label}\n                supporting-text={opt.supportingText || ''}\n                onMdClick={(e: CustomEvent) => this.pick(opt.value, opt.label, opt.disabled, e)}\n              >\n                {this.renderOptionIcon(opt.icon, opt.iconColor)}\n              </md-menu-item>\n            ))}\n          </div>\n        )}\n      </md-menu>\n    );\n  }\n\n  render() {\n    const chipsFirst =\n      this.multiple && (this.chipPosition === 'top' || this.chipPosition === 'left');\n    const optionCount = this.vc.active ? this.vc.filteredLength : this.filteredOptions.length;\n    const srStatus = this.busy\n      ? this.loadingText\n      : this.open\n        ? this.statusTemplate.replace('{count}', String(optionCount))\n        : '';\n    return (\n      <Host\n        class={{\n          'md-autocomplete': true,\n          [`md-autocomplete--${this.variant}`]: true,\n          'md-autocomplete--open': this.open,\n          'md-autocomplete--disabled': this.disabled,\n          'md-autocomplete--soft-disabled': this.softDisabled,\n          'md-autocomplete--multiple': this.multiple,\n          'md-autocomplete--loading': this.busy,\n          [`md-autocomplete--chips-${this.chipPosition}`]: this.multiple,\n        }}\n        aria-haspopup=\"listbox\"\n        aria-busy={this.busy ? 'true' : 'false'}\n      >\n        {chipsFirst && this.renderChips()}\n        {this.renderTrigger()}\n        {!chipsFirst && this.renderChips()}\n        {this.renderMenu()}\n        {/* Polite live status: the visible option count — which no ARIA\n            attribute conveys — plus the busy text. The expanded state itself\n            rides on the real textbox (`input-expanded` → aria-expanded, legal\n            there because the input carries role=\"combobox\"; see renderTrigger). */}\n        <span class=\"md-autocomplete__sr-status\" role=\"status\" aria-live=\"polite\">\n          {srStatus}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/md3/p-80379565.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as t,H as o,g as a}from"./p-WmvQpZnM.js";const d=()=>`:host{--_size:var(--md-status-dot-size, max(6px, calc(12px + var(--md-sys-density-scale, 0) * 1.5px)));--_color:var(--md-status-dot-color, var(--md-sys-color-on-surface-variant, #49454F));--_pulse-color:var(--md-status-dot-pulse-color, transparent);--_outline-color:var(--md-status-dot-outline-color, var(--md-sys-color-surface, #FEF7FF));--_outline-width:var(--md-status-dot-outline-width, max(1px, calc(2px + var(--md-sys-density-scale, 0) * 0.25px)));position:absolute;inset-inline-end:var(--md-status-dot-inset-end, -2px);inset-block-end:var(--md-status-dot-inset-block-end, -2px);inline-size:var(--_size);block-size:var(--_size);border-radius:50%;background-color:var(--_color);box-sizing:border-box;pointer-events:none;user-select:none;z-index:1;outline:var(--_outline-width) solid var(--_outline-color);outline-offset:0;transition:background-color var(--md-sys-motion-duration-short2, 200ms)       var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),     outline-color var(--md-sys-motion-duration-short2, 200ms)       var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-status-dot--small){--_size:var(--md-status-dot-size, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));--_outline-width:var(--md-status-dot-outline-width, max(1px, calc(1.5px + var(--md-sys-density-scale, 0) * 0.125px)))}:host(.md-status-dot--medium){--_size:var(--md-status-dot-size, max(6px, calc(12px + var(--md-sys-density-scale, 0) * 1.5px)))}:host(.md-status-dot--large){--_size:var(--md-status-dot-size, max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px)));--_outline-width:var(--md-status-dot-outline-width, max(1.5px, calc(3px + var(--md-sys-density-scale, 0) * 0.375px)));inset-inline-end:var(--md-status-dot-inset-end, -3px);inset-block-end:var(--md-status-dot-inset-block-end, -3px)}:host(.md-status-dot--online){--_color:var(--md-status-dot-color, #2DC653);--_pulse-color:var(--md-status-dot-pulse-color, rgba(45, 198, 83, 0.55))}:host(.md-status-dot--away){--_color:var(--md-status-dot-color, #F4B400);--_pulse-color:var(--md-status-dot-pulse-color, rgba(244, 180, 0, 0.55))}:host(.md-status-dot--busy){--_color:var(--md-status-dot-color, #DB4437);--_pulse-color:var(--md-status-dot-pulse-color, rgba(219, 68, 55, 0.55))}:host(.md-status-dot--offline){--_color:var(--md-status-dot-color, var(--md-sys-color-outline, #79747E))}:host(.md-status-dot--invisible){--_color:var(--md-status-dot-color, var(--md-sys-color-surface, #FEF7FF));box-shadow:inset 0 0 0 2px var(--md-sys-color-outline, #79747E)}@keyframes md-status-dot-pulse{0%{box-shadow:0 0 0 0 var(--_pulse-color)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}@media (prefers-reduced-motion: no-preference){:host(.md-status-dot--live){animation:md-status-dot-pulse       var(--md-status-dot-pulse-duration, 1.6s)       ease-out infinite}}@media (forced-colors: active){:host{forced-color-adjust:none;background-color:Mark;outline-color:ButtonFace}:host(.md-status-dot--invisible){background-color:ButtonFace;box-shadow:inset 0 0 0 2px ButtonText}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const e=class{constructor(t){s(this,t);this.state="neutral";this.size="medium";this.live=false;this.label="";this.density=0}render(){const s=!!this.label.trim();const a=s?this.live?"status":"img":"presentation";return t(o,{key:"0f92384de5ace257aaeb5745ecd2937a1f876faa",class:{"md-status-dot":true,[`md-status-dot--${this.state}`]:true,[`md-status-dot--${this.size}`]:true,"md-status-dot--live":this.live,"md-status-dot--labelled":s},role:a,"aria-label":s?this.label:null,"aria-hidden":s?null:"true"})}get el(){return a(this)}};e.style=d();export{e as md_status_dot};
+//# sourceMappingURL=p-80379565.entry.js.map

package/dist/md3/{p-6c44cf13.entry.js.map → p-80379565.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["mdStatusDotCss","MdStatusDot","constructor","hostRef","this","state","size","live","label","density","render","labelled","trim","role","h","Host","key","class"],"sources":["src/components/md-status-dot/md-status-dot.css?tag=md-status-dot&encapsulation=shadow","src/components/md-status-dot/md-status-dot.tsx"],"sourcesContent":["/* ==========================================================\n   md-status-dot — Material Design 3 presence indicator\n   Spec: https://m3.material.io/components/badges/specs\n         (status / presence variant of the badge pattern)\n\n   A small absolutely-positioned pip that pairs with an avatar\n   (or any other tile) to surface user state. Drops into any\n   `position: relative` parent and anchors at the bottom-end\n   corner via logical-property insets so the pip auto-flips in\n   RTL with no extra CSS.\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-status-dot-size              Dot diameter (overrides preset)\n     --md-status-dot-color             Dot fill color\n     --md-status-dot-pulse-color       Halo color used by the live pulse\n     --md-status-dot-outline-color     Halo outline (default surface)\n     --md-status-dot-outline-width     Halo outline width (default 2px)\n     --md-status-dot-inset-end         inline-end anchor offset (default -2px)\n     --md-status-dot-inset-block-end   block-end anchor offset (default -2px)\n     --md-status-dot-pulse-duration    Pulse animation period (default 1.6s)\n\n   STATES:\n     state=\"online\"    Green — available\n     state=\"away\"      Amber — back soon\n     state=\"busy\"      Red   — do-not-disturb\n     state=\"offline\"   Grey  — signed out\n     state=\"invisible\" Hollow ring on a surface fill — appear-offline\n     state=\"neutral\"   Default surface tone — no semantic meaning\n\n   CSS PARTS:\n     (none — the dot is a leaf element)\n\n   SLOTS:\n     (none — content is purely decorative)\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST — anchor + custom properties\n   ========================================================== */\n:host {\n  /* Sizing — overridden per-preset below. Custom diameters via\n     `--md-status-dot-size` flow through the same pipeline. */\n  --_size: var(--md-status-dot-size, max(6px, calc(12px + var(--md-sys-density-scale, 0) * 1.5px)));\n\n  /* Default neutral surface tone — overridden by state modifiers below. */\n  --_color: var(--md-status-dot-color, var(--md-sys-color-on-surface-variant, #49454F));\n\n  /* Pulse halo color — defaults to transparent so the keyframes are\n     no-ops unless the state modifier sets a real color. */\n  --_pulse-color: var(--md-status-dot-pulse-color, transparent);\n\n  /* Halo outline — separates the dot from the avatar tile. Surface-toned\n     so it tracks the active theme. */\n  --_outline-color: var(--md-status-dot-outline-color, var(--md-sys-color-surface, #FEF7FF));\n  --_outline-width: var(--md-status-dot-outline-width, max(1px, calc(2px + var(--md-sys-density-scale, 0) * 0.25px)));\n\n  position: absolute;\n  inset-inline-end: var(--md-status-dot-inset-end, -2px);\n  inset-block-end: var(--md-status-dot-inset-block-end, -2px);\n  inline-size: var(--_size);\n  block-size: var(--_size);\n  border-radius: 50%;\n  background-color: var(--_color);\n  box-sizing: border-box;\n  pointer-events: none;\n  user-select: none;\n  z-index: 1;\n\n  /* Surface-toned halo. `outline` (rather than `border`) is used so the\n     halo lives outside the dot's box and the dot's true diameter stays\n     equal to `--_size`. */\n  outline: var(--_outline-width) solid var(--_outline-color);\n  outline-offset: 0;\n\n  /* Smooth color transitions when the state attribute is toggled\n     dynamically (e.g. websocket presence updates). */\n  transition:\n    background-color var(--md-sys-motion-duration-short2, 200ms)\n      var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    outline-color var(--md-sys-motion-duration-short2, 200ms)\n      var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* ==========================================================\n   2. SIZE PRESETS\n   ========================================================== */\n:host(.md-status-dot--small) {\n  --_size: var(--md-status-dot-size, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));\n  --_outline-width: var(--md-status-dot-outline-width, max(1px, calc(1.5px + var(--md-sys-density-scale, 0) * 0.125px)));\n}\n:host(.md-status-dot--medium) {\n  --_size: var(--md-status-dot-size, max(6px, calc(12px + var(--md-sys-density-scale, 0) * 1.5px)));\n}\n:host(.md-status-dot--large) {\n  --_size: var(--md-status-dot-size, max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px)));\n  --_outline-width: var(--md-status-dot-outline-width, max(1.5px, calc(3px + var(--md-sys-density-scale, 0) * 0.375px)));\n  /* Slightly larger anchor offset so the bigger dot still kisses the\n     avatar edge without bleeding inside the tile. */\n  inset-inline-end: var(--md-status-dot-inset-end, -3px);\n  inset-block-end: var(--md-status-dot-inset-block-end, -3px);\n}\n\n/* ==========================================================\n   3. STATE MODIFIERS — semantic colors\n   Each state writes to `--_color` (dot fill) and `--_pulse-color`\n   (live-pulse halo). Custom properties on the host take priority,\n   so consumers can override per-instance:\n\n     <md-status-dot state=\"online\"\n                    style=\"--md-status-dot-color: var(--brand-success);\">\n     </md-status-dot>\n   ========================================================== */\n:host(.md-status-dot--online) {\n  --_color: var(--md-status-dot-color, #2DC653);\n  --_pulse-color: var(--md-status-dot-pulse-color, rgba(45, 198, 83, 0.55));\n}\n\n:host(.md-status-dot--away) {\n  --_color: var(--md-status-dot-color, #F4B400);\n  --_pulse-color: var(--md-status-dot-pulse-color, rgba(244, 180, 0, 0.55));\n}\n\n:host(.md-status-dot--busy) {\n  --_color: var(--md-status-dot-color, #DB4437);\n  --_pulse-color: var(--md-status-dot-pulse-color, rgba(219, 68, 55, 0.55));\n}\n\n:host(.md-status-dot--offline) {\n  --_color: var(--md-status-dot-color, var(--md-sys-color-outline, #79747E));\n}\n\n/* \"Invisible\" reads as intentionally empty — surface fill in the centre\n   plus an inset 2 px ring in the outline color. The base surface halo\n   stays in place so the pip is still detached from the avatar tile.\n   Combining `live` with `invisible` is supported but the inner ring is\n   covered by the pulse keyframe; that combination is rarely meaningful\n   semantically (you can't pulse-while-hidden) so it's documented as a\n   minor visual conflict rather than special-cased. */\n:host(.md-status-dot--invisible) {\n  --_color: var(--md-status-dot-color, var(--md-sys-color-surface, #FEF7FF));\n  box-shadow: inset 0 0 0 2px var(--md-sys-color-outline, #79747E);\n}\n\n/* `state=\"neutral\"` is the default — no extra rules needed. */\n\n/* ==========================================================\n   4. LIVE PULSE\n   The keyframes interpolate the box-shadow color from the\n   variant's `--_pulse-color` (semi-transparent variant hue) to\n   `transparent` (alpha 0). The browser smooths both the spread\n   (0px → 8px) and the alpha in one go, producing a clean\n   outward-fading ring in the dot's own color.\n   ========================================================== */\n@keyframes md-status-dot-pulse {\n  0% {\n    box-shadow: 0 0 0 0 var(--_pulse-color);\n  }\n  70% {\n    box-shadow: 0 0 0 8px transparent;\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n  }\n}\n\n/* Honour the OS reduced-motion preference: only animate when the\n   user has expressed no preference (or explicitly opted in). */\n@media (prefers-reduced-motion: no-preference) {\n  :host(.md-status-dot--live) {\n    animation: md-status-dot-pulse\n      var(--md-status-dot-pulse-duration, 1.6s)\n      ease-out infinite;\n  }\n}\n\n/* ==========================================================\n   5. FORCED COLORS — Windows High Contrast\n   System tokens replace the design-system tokens so the dot\n   stays visible against any palette.\n   ========================================================== */\n@media (forced-colors: active) {\n  :host {\n    forced-color-adjust: none;\n    background-color: Mark;\n    outline-color: ButtonFace;\n  }\n  :host(.md-status-dot--invisible) {\n    background-color: ButtonFace;\n    box-shadow: inset 0 0 0 2px ButtonText;\n  }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\n\n/**\n * Presence states understood by `<md-status-dot>`.\n *\n * - `online`     — green, \"available\"\n * - `away`       — amber, \"back soon\"\n * - `busy`       — red, \"do not disturb\"\n * - `offline`    — neutral grey, \"signed out\"\n * - `invisible`  — hollow ring on a surface fill, \"appear offline\"\n * - `neutral`    — surface-tone default, no semantic meaning\n *                  (use this when the host already encodes the state\n *                  elsewhere and the dot is a pure decoration)\n */\nexport type MdStatusDotState =\n  | 'online'\n  | 'away'\n  | 'busy'\n  | 'offline'\n  | 'invisible'\n  | 'neutral';\n\n/** Diameter preset for the dot. */\nexport type MdStatusDotSize = 'small' | 'medium' | 'large';\n\n/**\n * `md-status-dot` — a small absolutely-positioned indicator that pairs\n * with an avatar (or any other tile) to surface presence / state.\n *\n * Designed to drop straight into a `position: relative` parent:\n *\n * ```html\n * <span style=\"position: relative; display: inline-flex;\">\n *   <md-avatar name=\"Ada Lovelace\" label=\"Ada Lovelace, online\"></md-avatar>\n *   <md-status-dot state=\"online\"></md-status-dot>\n * </span>\n * ```\n *\n * Anchors at the bottom-inline-end corner via logical-property insets, so\n * the pip auto-flips in RTL with no extra CSS. A 2 px outline in the\n * surface color keeps the dot visually detached from the avatar tile\n * regardless of the avatar's palette.\n *\n * **Accessibility.** The dot is **decorative by default** — when used to\n * decorate an avatar, the avatar's own `label` should already encode the\n * status (`label=\"Ada Lovelace, online\"`). Setting an explicit `label`\n * exposes the dot to assistive tech:\n * - **static** (`live` off) → `role=\"img\"` + `aria-label` — a labelled image\n *   conveying the current state, announced when focused/encountered.\n * - **live** (`live` on) → `role=\"status\"` (an `aria-live=\"polite\"` region) so\n *   presence *changes* (online → busy) are announced as they happen.\n *\n * **WCAG 1.4.1 (use of colour).** State is conveyed by colour alone, and in\n * Windows High-Contrast every state collapses to a single system colour. Never\n * rely on the dot's colour as the *only* signal of state — pair it with a\n * `label` (or text on the parent) so the status is also available as words.\n *\n * **Live indicator.** When `live` is `true`, the dot pulses outward in its\n * own colour (online pulses green, busy pulses red, etc.). The animation\n * is gated behind `prefers-reduced-motion: no-preference`, so users who\n * have reduced-motion enabled at the OS level see a static dot.\n */\n@Component({\n  tag: 'md-status-dot',\n  styleUrl: 'md-status-dot.css',\n  shadow: true,\n})\nexport class MdStatusDot {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Presence state. Drives the dot's fill color and its corresponding\n   * pulse-halo color (when `live` is `true`).\n   */\n  @Prop({ reflect: true }) state: MdStatusDotState = 'neutral';\n\n  /**\n   * Diameter preset:\n   * - `small`  — 8 px (pairs with `md-avatar size=\"small\"`)\n   * - `medium` — 12 px (pairs with `md-avatar size=\"medium\"` — default)\n   * - `large`  — 16 px (pairs with `md-avatar size=\"large\"`)\n   *\n   * Custom diameters are exposed via the `--md-status-dot-size` CSS\n   * custom property on the host.\n   */\n  @Prop({ reflect: true }) size: MdStatusDotSize = 'medium';\n\n  /**\n   * Pulse the dot outward in its own colour. Useful for \"live now\",\n   * \"in a call\", \"recording\" affordances. Respects\n   * `prefers-reduced-motion: reduce` automatically.\n   */\n  @Prop({ reflect: true }) live: boolean = false;\n\n  /**\n   * Optional accessible label.\n   *\n   * - When **empty** (default), the dot is exposed to AT as decorative\n   *   (`role=\"presentation\"` + `aria-hidden=\"true\"`) so the parent\n   *   element (typically an `md-avatar` or a list-item) can carry the\n   *   spoken status without doubling.\n   * - When **set** and `live` is **off**, the dot becomes `role=\"img\"` with\n   *   the value as its `aria-label` — a static, labelled status image.\n   * - When **set** and `live` is **on**, the dot becomes a `role=\"status\"`\n   *   live region so presence *changes* are announced as they occur. Use this\n   *   for standalone dots that aren't paired with another labelled element.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  render() {\n    const labelled = !!this.label.trim();\n    // Decorative → presentation; labelled+static → img; labelled+live → status\n    // (a live region that announces presence changes). role=\"status\" implies\n    // aria-live=\"polite\", so static labels deliberately avoid it to prevent\n    // spurious announcements when the dot merely renders.\n    const role = labelled ? (this.live ? 'status' : 'img') : 'presentation';\n\n    return (\n      <Host\n        class={{\n          'md-status-dot': true,\n          [`md-status-dot--${this.state}`]: true,\n          [`md-status-dot--${this.size}`]: true,\n          'md-status-dot--live': this.live,\n          'md-status-dot--labelled': labelled,\n        }}\n        role={role}\n        aria-label={labelled ? this.label : null}\n        aria-hidden={labelled ? null : 'true'}\n      />\n    );\n  }\n}\n"],"mappings":"oDAAA,MAAMA,EAAiB,IAAM,wsG,MCmEhBC,EAAW,MALxB,WAAAC,CAAAC,G,UAY2BC,KAAAC,MAA0B,UAW1BD,KAAAE,KAAwB,SAOxBF,KAAAG,KAAgB,MAejCH,KAAAI,MAAgB,GAOCJ,KAAAK,QAAiC,CAyB3D,CAvBC,MAAAC,GACE,MAAMC,IAAaP,KAAKI,MAAMI,OAK9B,MAAMC,EAAOF,EAAYP,KAAKG,KAAO,SAAW,MAAS,eAEzD,OACEO,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,gBAAiB,KACjB,CAAC,kBAAkBb,KAAKC,SAAU,KAClC,CAAC,kBAAkBD,KAAKE,QAAS,KACjC,sBAAuBF,KAAKG,KAC5B,0BAA2BI,GAE7BE,KAAMA,EAAI,aACEF,EAAWP,KAAKI,MAAQ,KAAI,cAC3BG,EAAW,KAAO,Q","ignoreList":[]}
+{"version":3,"names":["mdStatusDotCss","MdStatusDot","constructor","hostRef","this","state","size","live","label","density","render","labelled","trim","role","h","Host","key","class"],"sources":["src/components/md-status-dot/md-status-dot.css?tag=md-status-dot&encapsulation=shadow","src/components/md-status-dot/md-status-dot.tsx"],"sourcesContent":["/* ==========================================================\n   md-status-dot — Material Design 3 presence indicator\n   Spec: https://m3.material.io/components/badges/specs\n         (status / presence variant of the badge pattern)\n\n   A small absolutely-positioned pip that pairs with an avatar\n   (or any other tile) to surface user state. Drops into any\n   `position: relative` parent and anchors at the bottom-end\n   corner via logical-property insets so the pip auto-flips in\n   RTL with no extra CSS.\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-status-dot-size              Dot diameter (overrides preset)\n     --md-status-dot-color             Dot fill color\n     --md-status-dot-pulse-color       Halo color used by the live pulse\n     --md-status-dot-outline-color     Halo outline (default surface)\n     --md-status-dot-outline-width     Halo outline width (default 2px)\n     --md-status-dot-inset-end         inline-end anchor offset (default -2px)\n     --md-status-dot-inset-block-end   block-end anchor offset (default -2px)\n     --md-status-dot-pulse-duration    Pulse animation period (default 1.6s)\n\n   STATES:\n     state=\"online\"    Green — available\n     state=\"away\"      Amber — back soon\n     state=\"busy\"      Red   — do-not-disturb\n     state=\"offline\"   Grey  — signed out\n     state=\"invisible\" Hollow ring on a surface fill — appear-offline\n     state=\"neutral\"   Default surface tone — no semantic meaning\n\n   CSS PARTS:\n     (none — the dot is a leaf element)\n\n   SLOTS:\n     (none — content is purely decorative)\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST — anchor + custom properties\n   ========================================================== */\n:host {\n  /* Sizing — overridden per-preset below. Custom diameters via\n     `--md-status-dot-size` flow through the same pipeline. */\n  --_size: var(--md-status-dot-size, max(6px, calc(12px + var(--md-sys-density-scale, 0) * 1.5px)));\n\n  /* Default neutral surface tone — overridden by state modifiers below. */\n  --_color: var(--md-status-dot-color, var(--md-sys-color-on-surface-variant, #49454F));\n\n  /* Pulse halo color — defaults to transparent so the keyframes are\n     no-ops unless the state modifier sets a real color. */\n  --_pulse-color: var(--md-status-dot-pulse-color, transparent);\n\n  /* Halo outline — separates the dot from the avatar tile. Surface-toned\n     so it tracks the active theme. */\n  --_outline-color: var(--md-status-dot-outline-color, var(--md-sys-color-surface, #FEF7FF));\n  --_outline-width: var(--md-status-dot-outline-width, max(1px, calc(2px + var(--md-sys-density-scale, 0) * 0.25px)));\n\n  position: absolute;\n  inset-inline-end: var(--md-status-dot-inset-end, -2px);\n  inset-block-end: var(--md-status-dot-inset-block-end, -2px);\n  inline-size: var(--_size);\n  block-size: var(--_size);\n  border-radius: 50%;\n  background-color: var(--_color);\n  box-sizing: border-box;\n  pointer-events: none;\n  user-select: none;\n  z-index: 1;\n\n  /* Surface-toned halo. `outline` (rather than `border`) is used so the\n     halo lives outside the dot's box and the dot's true diameter stays\n     equal to `--_size`. */\n  outline: var(--_outline-width) solid var(--_outline-color);\n  outline-offset: 0;\n\n  /* Smooth color transitions when the state attribute is toggled\n     dynamically (e.g. websocket presence updates). */\n  transition:\n    background-color var(--md-sys-motion-duration-short2, 200ms)\n      var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    outline-color var(--md-sys-motion-duration-short2, 200ms)\n      var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* ==========================================================\n   2. SIZE PRESETS\n   ========================================================== */\n:host(.md-status-dot--small) {\n  --_size: var(--md-status-dot-size, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));\n  --_outline-width: var(--md-status-dot-outline-width, max(1px, calc(1.5px + var(--md-sys-density-scale, 0) * 0.125px)));\n}\n:host(.md-status-dot--medium) {\n  --_size: var(--md-status-dot-size, max(6px, calc(12px + var(--md-sys-density-scale, 0) * 1.5px)));\n}\n:host(.md-status-dot--large) {\n  --_size: var(--md-status-dot-size, max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px)));\n  --_outline-width: var(--md-status-dot-outline-width, max(1.5px, calc(3px + var(--md-sys-density-scale, 0) * 0.375px)));\n  /* Slightly larger anchor offset so the bigger dot still kisses the\n     avatar edge without bleeding inside the tile. */\n  inset-inline-end: var(--md-status-dot-inset-end, -3px);\n  inset-block-end: var(--md-status-dot-inset-block-end, -3px);\n}\n\n/* ==========================================================\n   3. STATE MODIFIERS — semantic colors\n   Each state writes to `--_color` (dot fill) and `--_pulse-color`\n   (live-pulse halo). Custom properties on the host take priority,\n   so consumers can override per-instance:\n\n     <md-status-dot state=\"online\"\n                    style=\"--md-status-dot-color: var(--brand-success);\">\n     </md-status-dot>\n   ========================================================== */\n:host(.md-status-dot--online) {\n  --_color: var(--md-status-dot-color, #2DC653);\n  --_pulse-color: var(--md-status-dot-pulse-color, rgba(45, 198, 83, 0.55));\n}\n\n:host(.md-status-dot--away) {\n  --_color: var(--md-status-dot-color, #F4B400);\n  --_pulse-color: var(--md-status-dot-pulse-color, rgba(244, 180, 0, 0.55));\n}\n\n:host(.md-status-dot--busy) {\n  --_color: var(--md-status-dot-color, #DB4437);\n  --_pulse-color: var(--md-status-dot-pulse-color, rgba(219, 68, 55, 0.55));\n}\n\n:host(.md-status-dot--offline) {\n  --_color: var(--md-status-dot-color, var(--md-sys-color-outline, #79747E));\n}\n\n/* \"Invisible\" reads as intentionally empty — surface fill in the centre\n   plus an inset 2 px ring in the outline color. The base surface halo\n   stays in place so the pip is still detached from the avatar tile.\n   Combining `live` with `invisible` is supported but the inner ring is\n   covered by the pulse keyframe; that combination is rarely meaningful\n   semantically (you can't pulse-while-hidden) so it's documented as a\n   minor visual conflict rather than special-cased. */\n:host(.md-status-dot--invisible) {\n  --_color: var(--md-status-dot-color, var(--md-sys-color-surface, #FEF7FF));\n  box-shadow: inset 0 0 0 2px var(--md-sys-color-outline, #79747E);\n}\n\n/* `state=\"neutral\"` is the default — no extra rules needed. */\n\n/* ==========================================================\n   4. LIVE PULSE\n   The keyframes interpolate the box-shadow color from the\n   variant's `--_pulse-color` (semi-transparent variant hue) to\n   `transparent` (alpha 0). The browser smooths both the spread\n   (0px → 8px) and the alpha in one go, producing a clean\n   outward-fading ring in the dot's own color.\n   ========================================================== */\n@keyframes md-status-dot-pulse {\n  0% {\n    box-shadow: 0 0 0 0 var(--_pulse-color);\n  }\n  70% {\n    box-shadow: 0 0 0 8px transparent;\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n  }\n}\n\n/* Honour the OS reduced-motion preference: only animate when the\n   user has expressed no preference (or explicitly opted in). */\n@media (prefers-reduced-motion: no-preference) {\n  :host(.md-status-dot--live) {\n    animation: md-status-dot-pulse\n      var(--md-status-dot-pulse-duration, 1.6s)\n      ease-out infinite;\n  }\n}\n\n/* ==========================================================\n   5. FORCED COLORS — Windows High Contrast\n   System tokens replace the design-system tokens so the dot\n   stays visible against any palette.\n   ========================================================== */\n@media (forced-colors: active) {\n  :host {\n    forced-color-adjust: none;\n    background-color: Mark;\n    outline-color: ButtonFace;\n  }\n  :host(.md-status-dot--invisible) {\n    background-color: ButtonFace;\n    box-shadow: inset 0 0 0 2px ButtonText;\n  }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\n\n/**\n * Presence states understood by `<md-status-dot>`.\n *\n * - `online`     — green, \"available\"\n * - `away`       — amber, \"back soon\"\n * - `busy`       — red, \"do not disturb\"\n * - `offline`    — neutral grey, \"signed out\"\n * - `invisible`  — hollow ring on a surface fill, \"appear offline\"\n * - `neutral`    — surface-tone default, no semantic meaning\n *                  (use this when the host already encodes the state\n *                  elsewhere and the dot is a pure decoration)\n */\nexport type MdStatusDotState =\n  | 'online'\n  | 'away'\n  | 'busy'\n  | 'offline'\n  | 'invisible'\n  | 'neutral';\n\n/** Diameter preset for the dot. */\nexport type MdStatusDotSize = 'small' | 'medium' | 'large';\n\n/**\n * `md-status-dot` — a small absolutely-positioned indicator that pairs\n * with an avatar (or any other tile) to surface presence / state.\n *\n * Designed to drop straight into a `position: relative` parent:\n *\n * ```html\n * <span style=\"position: relative; display: inline-flex;\">\n *   <md-avatar name=\"Ada Lovelace\" label=\"Ada Lovelace, online\"></md-avatar>\n *   <md-status-dot state=\"online\"></md-status-dot>\n * </span>\n * ```\n *\n * Anchors at the bottom-inline-end corner via logical-property insets, so\n * the pip auto-flips in RTL with no extra CSS. A 2 px outline in the\n * surface color keeps the dot visually detached from the avatar tile\n * regardless of the avatar's palette.\n *\n * **Accessibility.** The dot is **decorative by default** — when used to\n * decorate an avatar, the avatar's own `label` should already encode the\n * status (`label=\"Ada Lovelace, online\"`). Setting an explicit `label`\n * exposes the dot to assistive tech:\n * - **static** (`live` off) → `role=\"img\"` + `aria-label` — a labelled image\n *   conveying the current state, announced when focused/encountered.\n * - **live** (`live` on) → `role=\"status\"` (an `aria-live=\"polite\"` region) so\n *   presence *changes* (online → busy) are announced as they happen.\n *\n * **WCAG 1.4.1 (use of colour).** State is conveyed by colour alone, and in\n * Windows High-Contrast every state collapses to a single system colour. Never\n * rely on the dot's colour as the *only* signal of state — pair it with a\n * `label` (or text on the parent) so the status is also available as words.\n *\n * **Live indicator.** When `live` is `true`, the dot pulses outward in its\n * own colour (online pulses green, busy pulses red, etc.). The animation\n * is gated behind `prefers-reduced-motion: no-preference`, so users who\n * have reduced-motion enabled at the OS level see a static dot.\n */\n@Component({\n  tag: 'md-status-dot',\n  styleUrl: 'md-status-dot.css',\n  shadow: true,\n})\nexport class MdStatusDot {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Presence state. Drives the dot's fill color and its corresponding\n   * pulse-halo color (when `live` is `true`).\n   */\n  @Prop({ reflect: true }) state: MdStatusDotState = 'neutral';\n\n  /**\n   * Diameter preset:\n   * - `small`  — 8 px (pairs with `md-avatar size=\"small\"`)\n   * - `medium` — 12 px (pairs with `md-avatar size=\"medium\"` — default)\n   * - `large`  — 16 px (pairs with `md-avatar size=\"large\"`)\n   *\n   * Custom diameters are exposed via the `--md-status-dot-size` CSS\n   * custom property on the host.\n   */\n  @Prop({ reflect: true }) size: MdStatusDotSize = 'medium';\n\n  /**\n   * Pulse the dot outward in its own colour. Useful for \"live now\",\n   * \"in a call\", \"recording\" affordances. Respects\n   * `prefers-reduced-motion: reduce` automatically.\n   */\n  @Prop({ reflect: true }) live: boolean = false;\n\n  /**\n   * Optional accessible label.\n   *\n   * - When **empty** (default), the dot is exposed to AT as decorative\n   *   (`role=\"presentation\"` + `aria-hidden=\"true\"`) so the parent\n   *   element (typically an `md-avatar` or a list-item) can carry the\n   *   spoken status without doubling.\n   * - When **set** and `live` is **off**, the dot becomes `role=\"img\"` with\n   *   the value as its `aria-label` — a static, labelled status image.\n   * - When **set** and `live` is **on**, the dot becomes a `role=\"status\"`\n   *   live region so presence *changes* are announced as they occur. Use this\n   *   for standalone dots that aren't paired with another labelled element.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  render() {\n    const labelled = !!this.label.trim();\n    // Decorative → presentation; labelled+static → img; labelled+live → status\n    // (a live region that announces presence changes). role=\"status\" implies\n    // aria-live=\"polite\", so static labels deliberately avoid it to prevent\n    // spurious announcements when the dot merely renders.\n    const role = labelled ? (this.live ? 'status' : 'img') : 'presentation';\n\n    return (\n      <Host\n        class={{\n          'md-status-dot': true,\n          [`md-status-dot--${this.state}`]: true,\n          [`md-status-dot--${this.size}`]: true,\n          'md-status-dot--live': this.live,\n          'md-status-dot--labelled': labelled,\n        }}\n        role={role}\n        aria-label={labelled ? this.label : null}\n        aria-hidden={labelled ? null : 'true'}\n      />\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,IAAM,wsG,MCmEhBC,EAAW,MALxB,WAAAC,CAAAC,G,UAY2BC,KAAAC,MAA0B,UAW1BD,KAAAE,KAAwB,SAOxBF,KAAAG,KAAgB,MAejCH,KAAAI,MAAgB,GAOCJ,KAAAK,QAAiC,CAyB3D,CAvBC,MAAAC,GACE,MAAMC,IAAaP,KAAKI,MAAMI,OAK9B,MAAMC,EAAOF,EAAYP,KAAKG,KAAO,SAAW,MAAS,eAEzD,OACEO,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,gBAAiB,KACjB,CAAC,kBAAkBb,KAAKC,SAAU,KAClC,CAAC,kBAAkBD,KAAKE,QAAS,KACjC,sBAAuBF,KAAKG,KAC5B,0BAA2BI,GAE7BE,KAAMA,EAAI,aACEF,EAAWP,KAAKI,MAAQ,KAAI,cAC3BG,EAAW,KAAO,Q","ignoreList":[]}

package/dist/md3/p-830724e4.entry.js

@@ -0,0 +1,2 @@
+export{MdLoadingIndicator as md_loading_indicator}from"./p-D17cVKxS.js";import"./p-WmvQpZnM.js";
+//# sourceMappingURL=p-830724e4.entry.js.map

package/dist/md3/p-830724e4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}