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

package/dist/components-csr/md-list.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdListCss","containsFocus","el","node","getRootNode","activeElement","parentElement","host","MdList","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","listStyle","selectionMode","interactionMode","reorderable","label","labelledby","roleOverride","density","activeIndex","dropPlaceholder","typeaheadBuffer","typeaheadTimer","childObserver","originalOrder","dragState","handleMdItemSelect","event","onExpandedItemSelect","onDragMove","state","pointerId","delta","clientY","startClientY","item","style","transform","draggedRect","rects","fromIndex","draggedCenter","center","targetIndex","i","length","r","Math","min","max","applySiblingShifts","top","listTop","height","onDragEnd","removeEventListener","releasePointerCapture","forEach","classList","remove","moveItem","emitReorder","items","Array","from","children","filter","tagName","focusableItems","isItemFocusable","hasExpandableRows","some","expandable","hasAttribute","effectiveRole","childDividers","syncDividers","role","presentational","divider","setAttribute","removeAttribute","disabled","type","componentDidLoad","syncSelectionMode","syncInteractionMode","syncReorderable","syncContainerRole","refreshRovingTabindex","findInitialActiveIndex","addEventListener","MutationObserver","records","childListChanged","includes","push","observe","childList","disconnectedCallback","disconnect","window","clearTimeout","onSelectionModeChange","onInteractionModeChange","onReorderableChange","onRoleOverrideChange","on","containerRole","mode","applyMode","selected","child","getAttribute","findIndex","focusable","emit","showRovingFocus","tabbable","rovingFocusVisible","actual","indexOf","mdActivate","index","onItemClick","detail","clickedItem","activateItem","parentItem","findExpandableParentFromEvent","parentIndex","mdSelect","childIndex","expanded","value","onRequestActivation","target","composedPath","find","idx","onHostPointerDown","button","path","onHandle","n","dataset","listDragHandle","preventDefault","startDrag","map","it","getBoundingClientRect","rowGap","add","setPointerCapture","shift","onItemRequestReorder","stopPropagation","direction","to","moved","requestAnimationFrame","focusListItem","moving","reference","insertBefore","nextSibling","order","mdReorder","handleKeyDown","closest","altKey","key","activeEl","currentIdx","next","focusItem","prev","test","metaKey","ctrlKey","handleTypeahead","toLowerCase","char","setTimeout","buffer","match","headline","textContent","trim","startsWith","setFocus","focusVisible","preventScroll","onFocusOut","relatedTarget","contains","fromUserAction","getRovingFocusItem","activateNext","current","activatePrevious","selectItem","getSelectedIndices","render","ariaMulti","h","Host","class","part","blockSize"],"sources":["src/components/md-list/md-list.css?tag=md-list&encapsulation=shadow","src/components/md-list/md-list.tsx"],"sourcesContent":["/* ==========================================================\n   md-list — Material Design 3 List Container\n   Spec: https://m3.material.io/components/lists/specs\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-list-container-color       Container background\n     --md-list-container-shape       Border-radius override\n     --md-list-padding-block         Vertical padding inside the list\n     --md-list-padding-inline        Horizontal padding inside the list\n     --md-list-segmented-gap         Gap between rows in segmented mode (default 2px)\n     --md-list-drop-placeholder-color         Drop-target ghost fill (default primary-container @ ~45%, on-theme)\n     --md-list-drop-placeholder-outline-color Drop-target ghost outline (default primary @ ~55%, dashed, on-theme)\n     --md-list-drop-placeholder-outline-width Drop-target ghost outline width (default 2px)\n     --md-list-drop-placeholder-shape         Drop-target ghost corner radius (default corner-large / 16dp)\n     --md-list-drop-placeholder-opacity       Drop-target ghost opacity (default 1)\n\n   CSS PARTS:\n     drop-placeholder  Ghost slot shown in the lifted row's vacated position\n                       during a pointer reorder (tracks the live drop target)\n\n   SLOTS:\n     (default)   md-list-item children\n   ========================================================== */\n\n:host {\n  /* Defaults match the MD3 spec + material-web reference: standard lists\n     sit on the host's --md-sys-color-surface tone, flush to the parent's\n     edges (0px radius). Authors who want a grouped card-like chassis\n     opt in via --md-list-container-color / --md-list-container-shape. */\n  --_container-color: var(--md-list-container-color, var(--md-sys-color-surface, #fffbfe));\n  --_container-shape: var(--md-list-container-shape, 0px);\n  --_padding-block: var(--md-list-padding-block, var(--md-sys-spacing-inset-sm, 8px));\n  --_padding-inline: var(--md-list-padding-inline, 0px);\n  --_segmented-gap: var(--md-list-segmented-gap, 2px);\n\n  /* Drop-target placeholder (pointer reorder). Tinted toward the lifted row's\n     tone — a faint primary-container fill with a dashed primary outline — so\n     the ghost reads as a low-opacity version of the dragged card's color\n     rather than a neutral grey slot. Both are built from --md-sys-color-*\n     via color-mix, so the placeholder tracks the dynamic theme seed and\n     flips correctly between light and dark. Rounds to corner-large (16dp) to\n     match the dragged row's morphed shape. */\n  --_drop-placeholder-color: var(--md-list-drop-placeholder-color, color-mix(in srgb, var(--md-sys-color-primary-container, #eaddff) 45%, transparent));\n  --_drop-placeholder-outline-color: var(--md-list-drop-placeholder-outline-color, color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 55%, transparent));\n  --_drop-placeholder-outline-width: var(--md-list-drop-placeholder-outline-width, 2px);\n  --_drop-placeholder-shape: var(--md-list-drop-placeholder-shape, var(--md-sys-shape-corner-large, 16px));\n  --_drop-placeholder-opacity: var(--md-list-drop-placeholder-opacity, 1);\n\n  display: flex;\n  flex-direction: column;\n  /* Fill the available inline space by default. Without this the list — a\n     block-level flex column whose rows truncate (min-inline-size: 0) — would\n     resolve to its MIN-CONTENT width (just the avatars/icons) under any\n     shrink-to-fit parent (e.g. an inline-flex wrapper, or Storybook's\n     `layout: centered`), collapsing every row to icon width. `100%` is fully\n     overridable: an author `inline-size`/`width` or `max-inline-size` on the\n     element wins, so fixed-width and capped recipes still work. */\n  inline-size: 100%;\n  background-color: var(--_container-color);\n  color: var(--md-sys-color-on-surface, #1c1b1f);\n  border-radius: var(--_container-shape);\n  padding-block: var(--_padding-block);\n  padding-inline: var(--_padding-inline);\n  box-sizing: border-box;\n  /* Clip rows to the chassis when authors opt into a non-zero radius;\n     `clip` (not `hidden`) avoids creating a stacking context so popups\n     a row might project (sub-menu, tooltip) can still escape. */\n  overflow: clip;\n}\n\n/* ==========================================================\n   1. STANDARD STYLE (default, M3 Expressive — connected)\n   Rows share a single rounded chassis with NO gap. Items carry\n   the tint so the OUTER container stays transparent (no\n   secondary \"bay\" reads as a wrapper around the rows).\n\n   Each row's individual radius is zeroed; first/last rows get\n   per-corner rounding via CSS custom properties — these pierce\n   the shadow boundary cleanly without ::part() gymnastics.\n   A single-child list rounds all four corners. To separate\n   rows visually, interleave <md-divider> elements between the\n   children — the M3 spec models dividers as a standalone\n   component, not a list affordance.\n   ========================================================== */\n:host(.md-list--standard) {\n  --_container-color: var(--md-list-container-color, transparent);\n  --_container-shape: var(--md-list-container-shape, 0px);\n  gap: 0;\n  /* Row focus rings are inset on md-list-item :host (inside border-box);\n     visible overflow still helps dragged elevation / tooltips escape. */\n  overflow: visible;\n}\n\n:host(.md-list--standard) ::slotted(md-list-item) {\n  /* Resting shape is sharp on middle rows; unit-aware (`0px`, not `0`) so\n     downstream `max(<length>, <length>)` calls in md-list-item.css don't\n     end up with the invalid `max(<number>, <length>)` form, which would\n     silently drop the active-state corner morph. */\n  --md-list-item-container-shape: 0px;\n  /* Item container colour falls through to md-list-item's own default\n     (surface, per the M3 Lists token spec). Authors can re-tint via\n     --md-list-item-container-color on the list, e.g. surface-container\n     for cards on busy backgrounds. */\n}\n\n:host(.md-list--standard) ::slotted(md-list-item:first-of-type) {\n  --md-list-item-container-shape-start-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-start-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host(.md-list--standard) ::slotted(md-list-item:last-of-type) {\n  --md-list-item-container-shape-end-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host(.md-list--standard) ::slotted(md-list-item:only-of-type) {\n  --md-list-item-container-shape-start-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-start-end: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n/* ==========================================================\n   2. SEGMENTED STYLE (M3 Expressive — separated)\n   Each row is a rounded tile separated from its neighbours by\n   --md-list-segmented-gap (2px default). Middle tiles round all\n   four corners to corner-extra-small (4dp) at rest. The first\n   tile emphasises its top corners and the last tile emphasises\n   its bottom corners with corner-large (16dp) so the stack reads\n   as one grouped chassis; focus / press / selected morph to\n   corner-large on every tile. The container stays transparent\n   so the tiles float on the host surface; opt into a tinted bay\n   via --md-list-container-color.\n   ========================================================== */\n:host(.md-list--segmented) {\n  --_container-color: var(--md-list-container-color, transparent);\n  --_container-shape: var(--md-list-container-shape, 0px);\n  --_padding-inline: var(--md-list-padding-inline, 0px);\n  --_padding-block: var(--md-list-padding-block, 0px);\n  gap: var(--_segmented-gap);\n  overflow: visible;\n}\n\n:host(.md-list--segmented) ::slotted(md-list-item) {\n  --md-list-item-container-shape: var(--md-sys-shape-corner-extra-small, 4px);\n  /* Item container colour falls through to md-list-item's surface\n     default (M3 token: \"list-item-segmented-container-color\" = surface\n     = #FEF7FF light). Re-tint on the list element if you need a\n     different bay (e.g. surface-container on chrome backgrounds). */\n}\n\n:host(.md-list--segmented) ::slotted(md-list-item:first-of-type) {\n  --md-list-item-container-shape-start-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-start-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host(.md-list--segmented) ::slotted(md-list-item:last-of-type) {\n  --md-list-item-container-shape-end-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host(.md-list--segmented) ::slotted(md-list-item:only-of-type) {\n  --md-list-item-container-shape-start-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-start-end: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n/* ==========================================================\n   3. SELECTION MODE (listbox / multi-select) — no extra layout\n   ========================================================== */\n:host(.md-list--single-select),\n:host(.md-list--multi-select) {\n  /* role=listbox automatically; layout otherwise unchanged */\n}\n\n/* ==========================================================\n   4. FOCUS — the container itself never shows an outline\n   ========================================================== */\n:host(:focus) {\n  outline: none;\n}\n\n/* ==========================================================\n   5. DROP-TARGET PLACEHOLDER (pointer reorder)\n   While a row is dragged, md-list renders an absolutely\n   positioned ghost slot in the lifted row's vacated position.\n   It is anchored to the list's padding box and translated to\n   the live drop target (set from TSX as the drag crosses\n   sibling centers). `inset-inline` is logical so the ghost\n   spans the row's content width in both LTR and RTL; the JS\n   only drives the block offset + height. The host becomes a\n   positioning context only while reordering so the absolute\n   child never affects resting layout.\n   ========================================================== */\n:host(.md-list--reordering) {\n  position: relative;\n}\n\n.md-list__drop-placeholder {\n  position: absolute;\n  inset-inline-start: var(--_padding-inline);\n  inset-inline-end: var(--_padding-inline);\n  inset-block-start: 0;\n  box-sizing: border-box;\n  /* Behind the slotted rows (the lifted row carries z-index:1) so the ghost\n     reads as the empty slot the row will drop into, not an overlay. */\n  z-index: 0;\n  pointer-events: none;\n  border-radius: var(--_drop-placeholder-shape);\n  background-color: var(--_drop-placeholder-color);\n  border: var(--_drop-placeholder-outline-width) dashed var(--_drop-placeholder-outline-color);\n  opacity: var(--_drop-placeholder-opacity);\n  /* Glide to the new target slot in step with the sibling shift (short4). */\n  transition: transform var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .md-list__drop-placeholder {\n    transition: none;\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 {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  State,\n  Method,\n} from '@stencil/core';\n\nexport type MdListStyle = 'standard' | 'segmented';\nexport type MdListSelectionMode = 'none' | 'single-select' | 'multi-select';\nexport type MdListInteractionMode = 'single-action' | 'multi-action';\n\n/** Detail payload emitted by `md-list`'s `mdSelect` event. */\nexport type MdListSelectDetail = {\n  /** Top-level row index in the list (parent index for expanded-content children). */\n  index: number;\n  value: string;\n  selected: boolean;\n  item: HTMLMdListItemElement;\n  /** Index of the selected child within the parent's `expanded-content` slot. */\n  childIndex?: number;\n  /** Whether the expandable parent row is open when a child is selected. */\n  expanded?: boolean;\n};\n\n/**\n * Whether `el` holds focus, counting focus inside its shadow tree — the\n * portable equivalent of `:focus-within`.\n *\n * Focus is read from the element's own root (so a row inside a shadow tree is\n * resolved against that tree, not the document), then walked outward through\n * parents and shadow HOSTS until `el` is reached or the walk runs out.\n */\nfunction containsFocus(el: Element): boolean {\n  let node = (el.getRootNode() as Document | ShadowRoot).activeElement as Element | null;\n  while (node) {\n    if (node === el) return true;\n    // Step out of a shadow tree via its host, otherwise up the parent chain.\n    node = node.parentElement ?? ((node.getRootNode() as ShadowRoot).host ?? null);\n  }\n  return false;\n}\n\n@Component({ tag: 'md-list', styleUrl: 'md-list.css', shadow: true })\nexport class MdList {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Visual style of the list.\n   *\n   * - `standard` (default, M3 Expressive): rows share a single rounded\n   *   chassis with **no gap** between them. The first row rounds its\n   *   top corners, the last rounds its bottom corners, and middle rows\n   *   are square so the stack reads as one continuous shape — the M3\n   *   \"connected\" pattern. Best for settings panels, option groups,\n   *   and iOS-style sectioned tables. To add hairline separators\n   *   between rows, interleave `<md-divider>` elements.\n   * - `segmented` (M3 Expressive): rows are individually rounded \"tiles\"\n   *   separated by a small gap. Each tile rounds all four corners. Best\n   *   for action sets, quick-action menus, and card-like sections where\n   *   each row should read as its own affordance.\n   */\n  @Prop({ attribute: 'list-style' }) listStyle: MdListStyle = 'standard';\n\n  /**\n   * Selection coordination across child rows.\n   *\n   * - `none` (default): each row stands alone and the container is always\n   *   `role=\"list\"` (rows are `listitem`s). Interactive rows (`type=\"button\"` /\n   *   `type=\"link\"`) expose their widget role on an inner primary element, so\n   *   the list validly owns only `listitem`s while still providing the same\n   *   roving-tabindex + arrow-key navigation. `type=\"text\"` rows stay\n   *   non-focusable.\n   * - `single-select`: the container behaves as `role=\"listbox\"`, items\n   *   become `role=\"option\"`, and exactly one item carries `aria-selected`.\n   * - `multi-select`: same as above plus `aria-multiselectable=\"true\"`.\n   *\n   * Switching to a selection mode also auto-promotes plain `type=\"text\"`\n   * rows to focusable so users can pick from a list of label-only rows\n   * without authoring extra props.\n   */\n  @Prop({ attribute: 'selection-mode' }) selectionMode: MdListSelectionMode = 'none';\n\n  /**\n   * Row interaction pattern for the whole list. A list uses exactly one\n   * interaction mode at a time (per the M3 Lists spec).\n   *\n   * - `single-action` (default): each row is one tappable area — leading\n   *   icon + label activate together. Use `type=\"button\"` (or selection\n   *   mode) on items.\n   * - `multi-action`: rows expose a primary action (the row body) plus\n   *   optional secondary actions in `slot=\"trailing\"` (e.g. `md-icon-button`).\n   *   Clicks on trailing controls do not activate the primary row action;\n   *   each secondary control keeps its own focus stop and keyboard behavior.\n   */\n  @Prop({ attribute: 'interaction-mode' }) interactionMode: MdListInteractionMode = 'single-action';\n\n  /**\n   * Enable drag-to-reorder. Each row renders a trailing drag handle (grab it\n   * to drag the row to a new position); rows can also be moved with\n   * `Alt + ArrowUp / ArrowDown` while focused. On drop the list reorders its\n   * children in the DOM and emits {@link mdReorder}. Disabled rows can't be\n   * picked up. Works alongside `single-action` / `multi-action` and selection\n   * modes.\n   */\n  @Prop({ reflect: true }) reorderable: boolean = false;\n\n  /** Optional aria-label for the container. */\n  @Prop() label: string = '';\n\n  /** Optional aria-labelledby for the container. */\n  @Prop() labelledby: string = '';\n\n  /**\n   * Override the auto-computed ARIA role. Useful when wiring the list\n   * into a wider widget pattern (e.g. `role=\"menu\"` for a dropdown).\n   * Leave empty to use the role implied by `selectionMode`.\n   */\n  @Prop({ attribute: 'role-override' }) roleOverride: 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  /** Emitted when selection changes via user input (click / Enter / Space). */\n  @Event() mdSelect: EventEmitter<MdListSelectDetail>;\n\n  /** Emitted whenever roving focus lands on a different row. */\n  @Event() mdActivate: EventEmitter<{ index: number; item: HTMLMdListItemElement }>;\n\n  /**\n   * Emitted after a drag (or keyboard) reorder completes.\n   *\n   * - `from` / `to`: the moved row's old and new positions (item indices,\n   *   ignoring non-item children like dividers).\n   * - `order`: the new order expressed as the original (as-authored) indices,\n   *   so `order[newPosition] === originalPosition`. Use it to reorder a\n   *   backing data array in one pass.\n   */\n  @Event() mdReorder: EventEmitter<{ from: number; to: number; order: number[] }>;\n\n  @State() private activeIndex = 0;\n\n  /**\n   * Geometry of the drop-target placeholder shown in the dragged row's\n   * vacated slot during a pointer reorder. `null` when no drag is active.\n   * `top` is the placeholder's block-start offset from the list's padding\n   * box; `height` matches the lifted row. Tracking the live target index\n   * keeps the ghost slot under the insertion point as the user drags.\n   */\n  @State() private dropPlaceholder: { top: number; height: number } | null = null;\n\n  private typeaheadBuffer = '';\n  private typeaheadTimer: number | null = null;\n  private childObserver: MutationObserver | null = null;\n\n  /** As-authored item order, captured once at load, for `mdReorder.order`. */\n  private originalOrder: HTMLMdListItemElement[] = [];\n\n  /** Live pointer-drag bookkeeping; null when no drag is in progress. */\n  private dragState: {\n    item: HTMLMdListItemElement;\n    pointerId: number;\n    startClientY: number;\n    rects: { item: HTMLMdListItemElement; top: number; height: number; center: number }[];\n    fromIndex: number;\n    targetIndex: number;\n    rowGap: number;\n    /** List padding-box block-start in client coords, captured at drag start. */\n    listTop: number;\n  } | null = null;\n\n  private get items(): HTMLMdListItemElement[] {\n    return Array.from(this.el.children).filter(\n      el => el.tagName === 'MD-LIST-ITEM',\n    ) as HTMLMdListItemElement[];\n  }\n\n  private get focusableItems(): HTMLMdListItemElement[] {\n    return this.items.filter(i => this.isItemFocusable(i));\n  }\n\n  /**\n   * True when any direct row is an `expandable` disclosure. Such a row is a\n   * collapsible *group* whose selectable rows live in a per-row nested listbox\n   * (rendered by `md-list-item`), so it can't be a flat `option`/`group` child\n   * of a top-level listbox. When present in a selection mode the container\n   * therefore uses `role=\"list\"` (its rows are `listitem`s) and defers the\n   * option semantics to those nested listboxes — see {@link effectiveRole}.\n   */\n  private hasExpandableRows(): boolean {\n    return this.items.some(item => item.expandable || item.hasAttribute('expandable'));\n  }\n\n  /**\n   * ARIA container role implied by props + child composition, in priority order:\n   * - `role-override` wins outright (author is wiring a wider pattern, e.g.\n   *   `menu`; child rows adapt via {@link syncContainerRole}).\n   * - a selection mode → `listbox` (rows are `option`s) — UNLESS the list holds\n   *   expandable rows, in which case it degrades to `list` (see\n   *   {@link hasExpandableRows}).\n   * - otherwise → `list`.\n   *\n   * A non-selection list is ALWAYS `role=\"list\"`. Every row's host is a\n   * structural `listitem`; interactive rows (`type=\"button\"` / `type=\"link\"`)\n   * expose their widget role on an inner primary element inside the row (see\n   * `md-list-item`), so the container validly owns only `listitem`s regardless\n   * of interaction mode, and interleaved `md-divider`s are decorative\n   * (`aria-hidden`). This replaces the earlier `hasInteractiveRows() → toolbar`\n   * promotion, which made a `toolbar` illegally own the static rows' `listitem`s\n   * (axe `aria-required-parent`) and let a `role=\"button\"` host contain trailing\n   * focusables (axe `nested-interactive`).\n   */\n  private get effectiveRole(): string {\n    if (this.roleOverride) return this.roleOverride;\n    if (this.selectionMode !== 'none') {\n      return this.hasExpandableRows() ? 'list' : 'listbox';\n    }\n    return 'list';\n  }\n\n  /** Direct-child `md-divider` rows interleaved between items. */\n  private get childDividers(): HTMLElement[] {\n    return Array.from(this.el.children).filter(\n      el => el.tagName === 'MD-DIVIDER',\n    ) as HTMLElement[];\n  }\n\n  /**\n   * A `list` / `listbox` container may only own `listitem`s / `option`s (plus\n   * `group`s); a `separator` is not a permitted owned child, so interleaved\n   * `md-divider` rows are purely decorative there and must be removed from the\n   * accessibility tree. `aria-hidden` (rather than overriding `role`) is used so\n   * `md-divider`'s own shadow `role=\"separator\"` is never fought over on a\n   * re-render, and the hairline stays visually present. In separator-permitting\n   * containers (a `role-override` such as `menu` or `toolbar`) the dividers keep\n   * their native separator semantics.\n   */\n  private syncDividers() {\n    const role = this.effectiveRole;\n    const presentational = role === 'list' || role === 'listbox';\n    this.childDividers.forEach(divider => {\n      if (presentational) divider.setAttribute('aria-hidden', 'true');\n      else divider.removeAttribute('aria-hidden');\n    });\n  }\n\n  private isItemFocusable(item: HTMLMdListItemElement): boolean {\n    if (item.disabled) return false;\n    if (this.selectionMode !== 'none') return true;\n    if (this.reorderable) return true;\n    return item.type !== 'text';\n  }\n\n  componentDidLoad() {\n    this.syncSelectionMode();\n    this.syncInteractionMode();\n    this.syncReorderable();\n    this.syncContainerRole();\n    this.syncDividers();\n    this.originalOrder = [...this.items];\n    this.refreshRovingTabindex(this.findInitialActiveIndex(), false);\n    this.el.addEventListener('mdItemSelect', this.handleMdItemSelect);\n\n    if (typeof MutationObserver !== 'undefined') {\n      this.childObserver = new MutationObserver(records => {\n        const childListChanged = records.some(r => r.type === 'childList');\n        if (childListChanged) {\n          this.syncSelectionMode();\n          this.syncInteractionMode();\n          this.syncReorderable();\n          this.syncContainerRole();\n          this.syncDividers();\n          /* Adopt any newly-added rows into the as-authored baseline so their\n             `mdReorder.order` index isn't -1. Existing rows keep their slot. */\n          this.items.forEach(item => {\n            if (!this.originalOrder.includes(item)) this.originalOrder.push(item);\n          });\n          this.refreshRovingTabindex(this.activeIndex, false);\n        }\n      });\n      this.childObserver.observe(this.el, { childList: true });\n    }\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('mdItemSelect', this.handleMdItemSelect);\n    this.childObserver?.disconnect();\n    this.childObserver = null;\n    if (this.typeaheadTimer !== null) {\n      window.clearTimeout(this.typeaheadTimer);\n      this.typeaheadTimer = null;\n    }\n    if (this.dragState) {\n      this.el.removeEventListener('pointermove', this.onDragMove);\n      this.el.removeEventListener('pointerup', this.onDragEnd);\n      this.el.removeEventListener('pointercancel', this.onDragEnd);\n      this.dragState = null;\n      this.dropPlaceholder = null;\n    }\n  }\n\n  @Watch('selectionMode')\n  onSelectionModeChange() {\n    this.syncSelectionMode();\n    this.syncDividers();\n    this.refreshRovingTabindex(this.activeIndex, false);\n  }\n\n  @Watch('interactionMode')\n  onInteractionModeChange() {\n    this.syncInteractionMode();\n  }\n\n  @Watch('reorderable')\n  onReorderableChange() {\n    this.syncReorderable();\n    this.refreshRovingTabindex(this.activeIndex, false);\n  }\n\n  @Watch('roleOverride')\n  onRoleOverrideChange() {\n    this.syncContainerRole();\n    this.syncDividers();\n  }\n\n  private syncReorderable() {\n    const on = this.reorderable;\n    this.items.forEach(item => {\n      item.reorderable = on;\n    });\n  }\n\n  /**\n   * Propagate the resolved container role to each direct row so it can adapt.\n   * Only a `menu` / `menubar` container (via `role-override`) changes anything:\n   * interactive rows then render `role=\"menuitem\"` on their inner primary and\n   * `role=\"none\"` on the host, so the menu validly owns the menuitem (a\n   * `listitem` under a `menu` fails axe `aria-required-parent`; a `menu` needs\n   * `menuitem` children). For a plain `list` / `listbox` the default roles apply.\n   * Expanded-content children are intentionally NOT addressed here — they are\n   * owned by their per-row expanded panel (a `list`), not the top container.\n   */\n  private syncContainerRole() {\n    const role = this.effectiveRole;\n    this.items.forEach(item => {\n      item.containerRole = role;\n    });\n  }\n\n  private syncInteractionMode() {\n    const mode = this.interactionMode;\n    this.items.forEach(item => {\n      item.interactionMode = mode;\n      if (mode === 'single-action') {\n        item.removeAttribute('data-interaction-mode');\n      } else {\n        item.setAttribute('data-interaction-mode', mode);\n      }\n    });\n  }\n\n  private syncSelectionMode() {\n    const mode = this.selectionMode;\n    const applyMode = (item: HTMLMdListItemElement) => {\n      /* Property assignment is the primary path — it triggers Stencil\n         reactivity even when MutationObserver is unavailable (jsdom). */\n      item.selectionMode = mode;\n      /* The data-attribute is kept for legacy authoring scenarios where\n         someone hand-rolls the item outside of an `md-list`. */\n      if (mode === 'none') {\n        item.removeAttribute('data-selection-mode');\n      } else {\n        item.setAttribute('data-selection-mode', mode);\n      }\n      /* Expansion-list child rows live in `expanded-content`, not as direct\n         list children — thread selection mode through so they can highlight.\n         Disclosure triggers themselves never carry selection state. */\n      if (item.expandable) {\n        if (item.selected) item.selected = false;\n        Array.from(item.children).forEach(child => {\n          if (child.tagName === 'MD-LIST-ITEM' && child.getAttribute('slot') === 'expanded-content') {\n            applyMode(child as HTMLMdListItemElement);\n          }\n        });\n      }\n    };\n    this.items.forEach(applyMode);\n  }\n\n  private findInitialActiveIndex(): number {\n    const items = this.items;\n    if (items.length === 0) return 0;\n    const selected = items.findIndex(\n      i => i.selected && !i.expandable && this.isItemFocusable(i),\n    );\n    if (selected >= 0) return selected;\n    const focusable = items.findIndex(i => this.isItemFocusable(i));\n    return focusable >= 0 ? focusable : 0;\n  }\n\n  private refreshRovingTabindex(targetIndex: number, emit: boolean, showRovingFocus = false) {\n    const items = this.items;\n    const focusable = this.focusableItems;\n    if (items.length === 0) return;\n\n    if (focusable.length === 0) {\n      items.forEach(i => {\n        i.tabbable = false;\n        i.rovingFocusVisible = false;\n      });\n      return;\n    }\n\n    let actual = targetIndex;\n    if (!items[actual] || !this.isItemFocusable(items[actual])) {\n      actual = items.indexOf(focusable[0]);\n    }\n    this.activeIndex = actual;\n\n    items.forEach((item, i) => {\n      item.tabbable = i === actual;\n      item.rovingFocusVisible = showRovingFocus && i === actual;\n    });\n\n    if (emit) {\n      this.mdActivate.emit({ index: actual, item: items[actual] });\n    }\n  }\n\n  @Listen('mdItemClick')\n  onItemClick(event: CustomEvent<{ index: number; selected: boolean }>) {\n    const detail = event.detail;\n    const items = this.items;\n    const clickedItem = items[detail.index];\n    if (!clickedItem || clickedItem.expandable) return;\n    this.activateItem(detail.index, true);\n  }\n\n  /**\n   * Expanded-content child rows coordinate selection on the expandable parent;\n   * they bubble `mdItemSelect` so this list can emit `mdSelect`.\n   */\n  private handleMdItemSelect = (event: Event) => {\n    this.onExpandedItemSelect(\n      event as CustomEvent<{\n        index: number;\n        value: string;\n        selected: boolean;\n        item: HTMLMdListItemElement;\n      }>,\n    );\n  };\n\n  onExpandedItemSelect(\n    event: CustomEvent<{\n      index: number;\n      value: string;\n      selected: boolean;\n      item: HTMLMdListItemElement;\n    }>,\n  ) {\n    if (this.selectionMode === 'none') return;\n\n    const parentItem = this.findExpandableParentFromEvent(event);\n    if (!parentItem) return;\n\n    const parentIndex = this.items.indexOf(parentItem);\n    if (parentIndex < 0) return;\n\n    this.mdSelect.emit({\n      index: parentIndex,\n      childIndex: event.detail.index,\n      expanded: parentItem.expanded,\n      value: event.detail.value,\n      selected: event.detail.selected,\n      item: event.detail.item,\n    });\n  }\n\n  @Listen('mdRequestActivation')\n  onRequestActivation(event: Event) {\n    const target = event.composedPath().find(el => {\n      return (el as HTMLElement)?.tagName === 'MD-LIST-ITEM';\n    }) as HTMLMdListItemElement | undefined;\n    if (!target) return;\n    const idx = this.items.indexOf(target);\n    if (idx >= 0 && idx !== this.activeIndex) {\n      this.refreshRovingTabindex(idx, true);\n    }\n  }\n\n  /* ── Drag-to-reorder ──────────────────────────────────────────────────\n     Pointer-based, vertical-only reorder (the MD3 list pattern). The drag\n     starts from a row's trailing drag handle (`data-list-drag-handle`),\n     lifts that row with the `.md-list-item--dragged` affordance, follows the\n     pointer with a translateY transform (the row stays IN FLOW so it keeps\n     its full width / rounded shape), and shifts the rows it passes over.\n     On drop the row is moved in the DOM and `mdReorder` is emitted. */\n\n  @Listen('pointerdown')\n  onHostPointerDown(event: PointerEvent) {\n    if (!this.reorderable || event.button !== 0) return;\n\n    const path = event.composedPath() as Array<HTMLElement & { dataset?: DOMStringMap }>;\n    const onHandle = path.some(n => n?.dataset?.listDragHandle === 'true');\n    if (!onHandle) return;\n\n    const item = path.find(\n      n => (n as HTMLElement)?.tagName === 'MD-LIST-ITEM',\n    ) as HTMLMdListItemElement | undefined;\n    if (!item || item.disabled) return;\n\n    // Stop the press from turning into a click/activation or text selection.\n    event.preventDefault();\n    this.startDrag(item, event);\n  }\n\n  private startDrag(item: HTMLMdListItemElement, event: PointerEvent) {\n    const items = this.items;\n    const fromIndex = items.indexOf(item);\n    if (fromIndex < 0) return;\n\n    // Snapshot geometry up-front so reorder math is independent of the live\n    // (shifting) layout. `rowGap` is the visual distance between row tops.\n    const rects = items.map(it => {\n      const r = it.getBoundingClientRect();\n      return { item: it, top: r.top, height: r.height, center: r.top + r.height / 2 };\n    });\n    const rowGap =\n      rects.length > 1 ? rects[1].top - rects[0].top : rects[0]?.height ?? 0;\n\n    // Border box == padding box block-start (the list carries no border), so\n    // this is the reference for the placeholder's absolute block offset.\n    const listTop = this.el.getBoundingClientRect().top;\n\n    this.dragState = {\n      item,\n      pointerId: event.pointerId,\n      startClientY: event.clientY,\n      rects,\n      fromIndex,\n      targetIndex: fromIndex,\n      rowGap,\n      listTop,\n    };\n\n    // Open the ghost slot in the lifted row's original position. It tracks the\n    // live target as the drag crosses sibling centers (see onDragMove).\n    this.dropPlaceholder = {\n      top: rects[fromIndex].top - listTop,\n      height: rects[fromIndex].height,\n    };\n\n    item.classList.add('md-list-item--dragged');\n    try {\n      this.el.setPointerCapture(event.pointerId);\n    } catch {\n      /* setPointerCapture can throw if the pointer is already gone */\n    }\n    this.el.addEventListener('pointermove', this.onDragMove);\n    this.el.addEventListener('pointerup', this.onDragEnd);\n    this.el.addEventListener('pointercancel', this.onDragEnd);\n  }\n\n  private onDragMove = (event: PointerEvent) => {\n    const state = this.dragState;\n    if (!state || event.pointerId !== state.pointerId) return;\n\n    const delta = event.clientY - state.startClientY;\n    // The dragged row follows the pointer vertically (stays in flow, full width).\n    state.item.style.transform = `translateY(${delta}px)`;\n\n    // Where is the dragged row's center now?\n    const draggedRect = state.rects[state.fromIndex];\n    const draggedCenter = draggedRect.center + delta;\n\n    // Target = how many resting centers the dragged center has crossed.\n    let targetIndex = state.fromIndex;\n    for (let i = 0; i < state.rects.length; i++) {\n      if (i === state.fromIndex) continue;\n      const r = state.rects[i];\n      if (i < state.fromIndex && draggedCenter < r.center) targetIndex = Math.min(targetIndex, i);\n      if (i > state.fromIndex && draggedCenter > r.center) targetIndex = Math.max(targetIndex, i);\n    }\n\n    if (targetIndex !== state.targetIndex) {\n      state.targetIndex = targetIndex;\n      this.applySiblingShifts();\n      // The vacated slot opens at the resting top of the row originally at the\n      // target index (the siblings between have shifted one row-step to fill\n      // the old gap), so the placeholder follows the insertion point.\n      this.dropPlaceholder = {\n        top: state.rects[targetIndex].top - state.listTop,\n        height: state.rects[state.fromIndex].height,\n      };\n    }\n  };\n\n  private applySiblingShifts() {\n    const state = this.dragState;\n    if (!state) return;\n    const { fromIndex, targetIndex, rowGap, rects } = state;\n\n    rects.forEach((r, i) => {\n      if (r.item === state.item) return;\n      let shift = 0;\n      // Rows between the old and new slot slide one row-step to fill the gap.\n      if (fromIndex < targetIndex && i > fromIndex && i <= targetIndex) shift = -rowGap;\n      else if (fromIndex > targetIndex && i < fromIndex && i >= targetIndex) shift = rowGap;\n      r.item.classList.add('md-list-item--shifting');\n      r.item.style.transform = shift ? `translateY(${shift}px)` : '';\n    });\n  }\n\n  private onDragEnd = (event: PointerEvent) => {\n    const state = this.dragState;\n    if (!state || event.pointerId !== state.pointerId) return;\n\n    this.el.removeEventListener('pointermove', this.onDragMove);\n    this.el.removeEventListener('pointerup', this.onDragEnd);\n    this.el.removeEventListener('pointercancel', this.onDragEnd);\n    try {\n      this.el.releasePointerCapture(state.pointerId);\n    } catch {\n      /* already released */\n    }\n\n    // Clear all transient transforms / classes.\n    state.rects.forEach(r => {\n      r.item.classList.remove('md-list-item--shifting');\n      r.item.style.transform = '';\n    });\n    state.item.classList.remove('md-list-item--dragged');\n    // Drop the ghost slot in the same tick the row settles so there is no\n    // leftover placeholder and no flash between drop and re-layout.\n    this.dropPlaceholder = null;\n\n    const { fromIndex, targetIndex } = state;\n    this.dragState = null;\n\n    if (targetIndex !== fromIndex) {\n      this.moveItem(fromIndex, targetIndex);\n      this.emitReorder(fromIndex, targetIndex);\n    }\n  };\n\n  /** Keyboard reorder request bubbled from a row (Alt + ArrowUp/Down). */\n  @Listen('mdItemRequestReorder')\n  onItemRequestReorder(event: CustomEvent<{ direction: 'up' | 'down'; from: number }>) {\n    if (!this.reorderable) return;\n    event.stopPropagation();\n    const { direction, from } = event.detail;\n    const items = this.items;\n    const to = direction === 'up' ? from - 1 : from + 1;\n    if (from < 0 || to < 0 || to >= items.length) return;\n    if (items[from]?.disabled) return;\n\n    this.moveItem(from, to);\n    this.emitReorder(from, to);\n\n    // Keep focus on the moved row at its new position.\n    const moved = this.items[to];\n    if (moved) {\n      this.refreshRovingTabindex(to, false, true);\n      requestAnimationFrame(() => this.focusListItem(moved));\n    }\n  }\n\n  private moveItem(from: number, to: number) {\n    const items = this.items;\n    const moving = items[from];\n    const reference = items[to];\n    if (!moving || !reference) return;\n\n    /* Re-slot via insertBefore on the shared parent (works in jsdom/mock-doc\n       where Element.after/before are unavailable). Moving DOWN lands the row\n       just after the target item (before whatever follows it — typically a\n       divider); moving UP lands it just before the target. Interleaved\n       dividers stay put and keep separating positions. */\n    if (from < to) {\n      this.el.insertBefore(moving, reference.nextSibling);\n    } else {\n      this.el.insertBefore(moving, reference);\n    }\n  }\n\n  private emitReorder(from: number, to: number) {\n    const order = this.items.map(it => this.originalOrder.indexOf(it));\n    this.mdReorder.emit({ from, to, order });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    // md-search owns arrow navigation for slotted result lists (input ↔ rows,\n    // one step per key). Handling here as well would advance roving focus\n    // twice per keystroke (e.g. first → last with three items).\n    if (this.el.closest('md-search')) return;\n\n    // Alt+Arrow is reserved for keyboard reorder (the item emits\n    // mdItemRequestReorder, handled in onItemRequestReorder). Don't also\n    // advance roving focus on the same keystroke.\n    if (event.altKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) return;\n\n    const focusable = this.focusableItems;\n    if (focusable.length === 0) return;\n\n    const items = this.items;\n    /* Which row holds focus — on the host itself (option / reorderable rows) or\n       on the inner primary element inside its shadow tree (button / link /\n       menuitem rows), which is why a plain `:focus` will not do.\n\n       Computed by walking the active element out through its shadow hosts\n       rather than with `:focus-within`: that pseudo-class is not parseable by\n       every selector engine (mock-doc throws \"unsupported pseudo\" on it, which\n       made this handler die and took ALL keyboard navigation with it), and a\n       throw from a keydown handler is a bad failure mode for a nav path. */\n    const activeEl = items.find(i => containsFocus(i));\n    const currentIdx = activeEl ? focusable.indexOf(activeEl) : -1;\n\n    switch (event.key) {\n      case 'ArrowDown': {\n        event.preventDefault();\n        const next = currentIdx < focusable.length - 1 ? currentIdx + 1 : 0;\n        this.focusItem(focusable[next]);\n        return;\n      }\n      case 'ArrowUp': {\n        event.preventDefault();\n        const prev = currentIdx > 0 ? currentIdx - 1 : focusable.length - 1;\n        this.focusItem(focusable[prev]);\n        return;\n      }\n      case 'Home': {\n        event.preventDefault();\n        this.focusItem(focusable[0]);\n        return;\n      }\n      case 'End': {\n        event.preventDefault();\n        this.focusItem(focusable[focusable.length - 1]);\n        return;\n      }\n    }\n\n    // Typeahead: jump to the first focusable item whose headline / text\n    // starts with the typed buffer. Buffer clears after 500ms of inactivity.\n    if (event.key.length === 1 && /\\S/.test(event.key) && !event.metaKey && !event.ctrlKey && !event.altKey) {\n      this.handleTypeahead(event.key.toLowerCase());\n    }\n  }\n\n  private handleTypeahead(char: string) {\n    this.typeaheadBuffer += char;\n    if (this.typeaheadTimer !== null) {\n      window.clearTimeout(this.typeaheadTimer);\n    }\n    this.typeaheadTimer = window.setTimeout(() => {\n      this.typeaheadBuffer = '';\n      this.typeaheadTimer = null;\n    }, 500);\n\n    const focusable = this.focusableItems;\n    const buffer = this.typeaheadBuffer;\n    const match = focusable.find(item => {\n      const headline = (item.headline || item.textContent || '').trim().toLowerCase();\n      return headline.startsWith(buffer);\n    });\n    if (match) {\n      this.focusItem(match);\n    }\n  }\n\n  /**\n   * Programmatic focus with a visible ring. Routed through the row's\n   * `setFocus()` @Method (NOT native `.focus()`): setFocus targets the correct\n   * element — the inner primary for button/link/menuitem rows, the host for\n   * option/reorderable rows — AND ensures it is focusable *now*, so focus can't\n   * be dropped to `<body>` when the roving `tabindex` render hasn't flushed yet.\n   */\n  private focusListItem(item: HTMLMdListItemElement) {\n    void item.setFocus({ focusVisible: true, preventScroll: true } as FocusOptions);\n  }\n\n  private focusItem(item: HTMLMdListItemElement) {\n    if (!item) return;\n    const idx = this.items.indexOf(item);\n    if (idx < 0) return;\n    this.refreshRovingTabindex(idx, true, true);\n    /* Let md-list-item re-render tabbable → tabindex before focus so the\n       roving target is the page's next tab stop, not a stale tabindex=-1 row. */\n    requestAnimationFrame(() => this.focusListItem(item));\n  }\n\n  /** Clear programmatic roving-focus chrome when focus leaves the list. */\n  @Listen('focusout')\n  onFocusOut(event: FocusEvent) {\n    const next = event.relatedTarget as Node | null;\n    if (next && this.el.contains(next)) return;\n    this.items.forEach(item => {\n      item.rovingFocusVisible = false;\n    });\n  }\n\n  /** Resolve the expandable parent row that emitted `mdItemSelect`. */\n  private findExpandableParentFromEvent(event: Event): HTMLMdListItemElement | null {\n    const path = (\n      typeof event.composedPath === 'function' ? event.composedPath() : [event.target]\n    ) as EventTarget[];\n\n    for (const node of path) {\n      const item = node as HTMLMdListItemElement;\n      if (item?.tagName !== 'MD-LIST-ITEM' || !item.expandable) continue;\n      if (item.parentElement === this.el) return item;\n    }\n\n    return null;\n  }\n\n  private activateItem(index: number, fromUserAction: boolean) {\n    const items = this.items;\n    const item = items[index];\n    if (!item || item.expandable) return;\n\n    if (this.selectionMode === 'single-select') {\n      items.forEach((it, i) => {\n        if (i !== index && it.selected) it.selected = false;\n      });\n      item.selected = true;\n      if (fromUserAction) {\n        this.mdSelect.emit({\n          index,\n          value: item.headline || (item.textContent ?? '').trim(),\n          selected: true,\n          item,\n        });\n      }\n    } else if (this.selectionMode === 'multi-select') {\n      item.selected = !item.selected;\n      if (fromUserAction) {\n        this.mdSelect.emit({\n          index,\n          value: item.headline || (item.textContent ?? '').trim(),\n          selected: item.selected,\n          item,\n        });\n      }\n    }\n  }\n\n  /**\n   * Move roving focus to the next focusable item, wrapping at the end.\n   * Returns the newly active item, or `null` when no items are focusable.\n   */\n  /** Roving-focus anchor for programmatic navigation (not `:focus`, which drifts when toolbar buttons steal focus). */\n  private getRovingFocusItem(focusable: HTMLMdListItemElement[]): HTMLMdListItemElement | null {\n    if (focusable.length === 0) return null;\n    const tabbable = focusable.find(i => i.tabbable);\n    if (tabbable) return tabbable;\n    const fromIndex = this.items[this.activeIndex];\n    if (fromIndex && focusable.includes(fromIndex)) return fromIndex;\n    return focusable[0];\n  }\n\n  @Method()\n  async activateNext(): Promise<HTMLMdListItemElement | null> {\n    const focusable = this.focusableItems;\n    if (focusable.length === 0) return null;\n    const current = this.getRovingFocusItem(focusable);\n    const currentIdx = current ? focusable.indexOf(current) : -1;\n    const next = currentIdx < focusable.length - 1 ? currentIdx + 1 : 0;\n    this.focusItem(focusable[next]);\n    return focusable[next];\n  }\n\n  /**\n   * Move roving focus to the previous focusable item, wrapping at the start.\n   * Returns the newly active item, or `null` when no items are focusable.\n   */\n  @Method()\n  async activatePrevious(): Promise<HTMLMdListItemElement | null> {\n    const focusable = this.focusableItems;\n    if (focusable.length === 0) return null;\n    const current = this.getRovingFocusItem(focusable);\n    const currentIdx = current ? focusable.indexOf(current) : -1;\n    const prev = currentIdx > 0 ? currentIdx - 1 : focusable.length - 1;\n    this.focusItem(focusable[prev]);\n    return focusable[prev];\n  }\n\n  /**\n   * Programmatically toggle selection on the item at `index` according\n   * to the current `selection-mode`. Does not emit `mdSelect` (use it\n   * to sync external state without a user action).\n   */\n  @Method()\n  async selectItem(index: number): Promise<void> {\n    if (this.selectionMode === 'none') return;\n    this.activateItem(index, false);\n  }\n\n  /** Returns the indices of all currently selected items. */\n  @Method()\n  async getSelectedIndices(): Promise<number[]> {\n    return this.items\n      .map((it, i) => (it.selected ? i : -1))\n      .filter(i => i >= 0);\n  }\n\n  render() {\n    /* Container role — see {@link effectiveRole} for the full priority order. */\n    const role = this.effectiveRole;\n    /* `aria-multiselectable` is only a valid attribute on a `listbox`. An\n       expandable selection list degrades to `role=\"list\"` (its per-row nested\n       listboxes carry the option semantics), so gate the attribute on the role. */\n    const ariaMulti =\n      role === 'listbox' && this.selectionMode === 'multi-select' ? 'true' : null;\n\n    return (\n      <Host\n        class={{\n          'md-list': true,\n          [`md-list--${this.listStyle}`]: true,\n          [`md-list--${this.selectionMode}`]: this.selectionMode !== 'none',\n          [`md-list--${this.interactionMode}`]: true,\n          'md-list--reorderable': this.reorderable,\n          'md-list--reordering': !!this.dropPlaceholder,\n        }}\n        role={role}\n        aria-label={this.label || null}\n        aria-labelledby={this.labelledby || null}\n        aria-multiselectable={ariaMulti}\n      >\n        {this.dropPlaceholder && (\n          <div\n            class=\"md-list__drop-placeholder\"\n            part=\"drop-placeholder\"\n            aria-hidden=\"true\"\n            style={{\n              transform: `translateY(${this.dropPlaceholder.top}px)`,\n              blockSize: `${this.dropPlaceholder.height}px`,\n            }}\n          ></div>\n        )}\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components-csr/md-loading-indicator.js

@@ -0,0 +1,2 @@
+import{MdLoadingIndicator as o,defineCustomElement as t}from"./p-BWMwewtY.js";const e=o;const n=t;export{e as MdLoadingIndicator,n as defineCustomElement};
+//# sourceMappingURL=md-loading-indicator.js.map

package/dist/components-csr/md-loading-indicator.js.map

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

package/dist/components-csr/md-menu-item-group.js

@@ -0,0 +1,2 @@
+import{p as e,H as s,h as a,d as t,t as d}from"./p-bSpXNc5J.js";const n=()=>`:host{display:flex;flex-direction:column}.md-menu-item-group__label{font-family:var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-medium-size, 12px);font-weight:var(--md-sys-typescale-label-medium-weight, 500);line-height:var(--md-sys-typescale-label-medium-line-height, 16px);color:var(--md-sys-color-on-surface-variant, #49454F);padding:var(--md-sys-spacing-inset-sm, 8px) var(--md-sys-spacing-inset-md, 12px) var(--md-sys-spacing-inset-xs, 4px);user-select:none}.md-menu-item-group__items{display:flex;flex-direction:column}:host(:not(:last-child))::after{content:'';height:1px;background-color:var(--md-sys-color-outline-variant, #CAC4D0);margin:var(--md-sys-spacing-gap-xs, 4px) 0}:host([data-use-gap]:not(:last-child))::after{display:none}:host([data-variant="standard"][data-use-gap]){background-color:var(--md-sys-color-surface-container-low, #F7F2FA);--md-menu-group-shape:var(--md-menu-group-container-shape, 12px);border-radius:var(--md-menu-group-shape);padding:var(--md-sys-spacing-inset-xs, 4px);overflow:hidden}:host([data-variant="vibrant"][data-use-gap]){background-color:var(--md-sys-color-tertiary-container, #FFD8E4);--md-menu-group-shape:var(--md-menu-group-container-shape, 12px);border-radius:var(--md-menu-group-shape);padding:var(--md-sys-spacing-inset-xs, 4px);overflow:hidden}: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 i=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.label="";this.density=0}render(){return a(t,{key:"c2b4aa6dd57a904a490d51d6093fe8ed51749213",class:"md-menu-item-group",role:"group","aria-label":this.label||undefined},this.label&&a("span",{key:"78268edea8eb9925c8532022e0ed67dda5244205",class:"md-menu-item-group__label"},this.label),a("div",{key:"1a501e7ffda6e9ca6e462fa7b165bc84dc0c7cf1",class:"md-menu-item-group__items",role:"presentation"},a("slot",{key:"b219c7c41d3dd1cabed40159bf1fd341bb4cf19f"})))}static get style(){return n()}},[257,"md-menu-item-group",{label:[1],density:[514]}]);function r(){if(typeof customElements==="undefined"){return}const e=["md-menu-item-group"];e.forEach((e=>{switch(e){case"md-menu-item-group":if(!customElements.get(d(e))){customElements.define(d(e),i)}break}}))}r();const o=i;const m=r;export{o as MdMenuItemGroup,m as defineCustomElement};
+//# sourceMappingURL=md-menu-item-group.js.map

package/dist/components-csr/md-menu-item-group.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdMenuItemGroupCss","MdMenuItemGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","label","density","render","h","Host","key","class","role","undefined"],"sources":["src/components/md-menu-item-group/md-menu-item-group.css?tag=md-menu-item-group&encapsulation=shadow","src/components/md-menu-item-group/md-menu-item-group.tsx"],"sourcesContent":["/* ═══════════════════════════════════════════════════════════\n   md-menu-item-group\n   Visual grouping for vertical menu items (M3 Expressive)\n   ═══════════════════════════════════════════════════════════ */\n\n:host {\n  display: flex;\n  flex-direction: column;\n}\n\n.md-menu-item-group__label {\n  font-family: var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif);\n  font-size: var(--md-sys-typescale-label-medium-size, 12px);\n  font-weight: var(--md-sys-typescale-label-medium-weight, 500);\n  line-height: var(--md-sys-typescale-label-medium-line-height, 16px);\n  color: var(--md-sys-color-on-surface-variant, #49454F);\n  /* Global density: on-grid label padding tracks --md-sys-spacing-* tokens\n     (8/12/4 = inset-sm/md/xs). Defaults resolve byte-for-byte at density 0. */\n  padding: var(--md-sys-spacing-inset-sm, 8px) var(--md-sys-spacing-inset-md, 12px) var(--md-sys-spacing-inset-xs, 4px);\n  user-select: none;\n}\n\n.md-menu-item-group__items {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Divider between groups when not using gap */\n:host(:not(:last-child))::after {\n  content: '';\n  height: 1px;\n  background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n  margin: var(--md-sys-spacing-gap-xs, 4px) 0;\n}\n\n/* When the menu uses gap, drop the divider and separate the group cards with a\n   real gap. The gap lives on the card (not the surface's flex `gap`) because a\n   scroll-capped menu nests the groups inside the scroll viewport, where the\n   surface's flex gap can't reach them — so it must not depend on the groups\n   being direct flex children of the surface. */\n/* The separation between cards is a flex gap on the menu's container\n   (md-menu.css) — a margin here is declared on `:host`, which any document-level\n   `* { margin: 0 }` reset out-ranks. */\n:host([data-use-gap]:not(:last-child))::after {\n  display: none;\n}\n\n/* ==========================================================\n   CARD APPEARANCE — grouped + gap + standard/vibrant\n   Each group is its own rounded card, separated by a real gap. Two things have\n   to agree or the spacing reads as lopsided:\n     • the gap must be wide enough that adjacent rounded corners don't appear to\n       pinch (a 2px seam between 12px curves looked like a bulge), and\n     • a row's state layer is inset by the card's padding, so its radius must be\n       the card's radius MINUS that padding — concentric curves, uniform band.\n   `--md-menu-group-shape` is published for both: the rows derive their pill\n   radius from it.\n   ========================================================== */\n:host([data-variant=\"standard\"][data-use-gap]) {\n  background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n  --md-menu-group-shape: var(--md-menu-group-container-shape, 12px);\n  border-radius: var(--md-menu-group-shape);\n  /* Equal on all four sides: the first row's hover/state pill is inset by this\n     padding, so an asymmetric block value made it hug the card's top edge while\n     sitting 4px clear of the sides. */\n  padding: var(--md-sys-spacing-inset-xs, 4px);\n  overflow: hidden;\n}\n\n:host([data-variant=\"vibrant\"][data-use-gap]) {\n  background-color: var(--md-sys-color-tertiary-container, #FFD8E4);\n  --md-menu-group-shape: var(--md-menu-group-container-shape, 12px);\n  border-radius: var(--md-menu-group-shape);\n  /* Equal on all four sides: the first row's hover/state pill is inset by this\n     padding, so an asymmetric block value made it hug the card's top edge while\n     sitting 4px clear of the sides. */\n  padding: var(--md-sys-spacing-inset-xs, 4px);\n  overflow: hidden;\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 } from '@stencil/core';\n\n@Component({ tag: 'md-menu-item-group', styleUrl: 'md-menu-item-group.css', shadow: true })\nexport class MdMenuItemGroup {\n  /** Optional label shown above the group items. */\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    return (\n      <Host class=\"md-menu-item-group\" role=\"group\" aria-label={this.label || undefined}>\n        {this.label && (\n          <span class=\"md-menu-item-group__label\">{this.label}</span>\n        )}\n        <div class=\"md-menu-item-group__items\" role=\"presentation\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAqB,IAAM,ohD,MCGpBC,EAAeC,EAAA,MAAAD,UAAAE,EAD5B,WAAAC,CAAAC,G,kEAGUC,KAAAC,MAAgB,GAOCD,KAAAE,QAAiC,CAc3D,CAZC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,qBAAqBC,KAAK,QAAO,aAAaR,KAAKC,OAASQ,WACrET,KAAKC,OACJG,EAAA,QAAAE,IAAA,2CAAMC,MAAM,6BAA6BP,KAAKC,OAEhDG,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BAA4BC,KAAK,gBAC1CJ,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/components-csr/md-menu-item.js

@@ -0,0 +1,2 @@
+import{M as o,d as s}from"./p-CVMM-tdC.js";const t=o;const p=s;export{t as MdMenuItem,p as defineCustomElement};
+//# sourceMappingURL=md-menu-item.js.map

package/dist/components-csr/md-menu-item.js.map

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

package/dist/components-csr/md-menu.js

@@ -0,0 +1,2 @@
+import{M as o,d as s}from"./p-Bkt_X-6v.js";const t=o;const p=s;export{t as MdMenu,p as defineCustomElement};
+//# sourceMappingURL=md-menu.js.map

package/dist/components-csr/md-menu.js.map

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

package/dist/components-csr/md-meter.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,h as s,d as r,t as a}from"./p-bSpXNc5J.js";const i=()=>`:host{--_c-main:var(--md-sys-color-primary, #6750A4);--_c-container:var(--md-sys-color-secondary-container, #E8DEF8);--_indicator-color:var(--md-meter-indicator-color, var(--_c-main));--_track-color:var(--md-meter-track-color, var(--_c-container));--_track-shape:var(--md-meter-track-shape, var(--md-sys-shape-corner-full, 9999px));--_thickness:var(--md-meter-height, max(2px, calc(4px + var(--md-sys-density-scale, 0) * 0.5px)));--_size:var(--md-meter-size, max(24px, calc(48px + var(--md-sys-density-scale, 0) * 2px)));--_label-color:var(--md-meter-label-color, var(--md-sys-color-on-surface, #1C1B1F));--_value-color:var(--md-meter-value-color, var(--md-sys-color-on-surface-variant, #49454F));display:block;inline-size:100%;box-sizing:border-box}.md-meter__header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--md-sys-spacing-gap-sm, 8px);margin-block-end:max(2px, calc(4px + var(--md-sys-density-scale, 0) * 0.5px))}.md-meter__label{font-family:var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);font-size:max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-body-medium-font-weight, 400);line-height:max(14px, calc(20px + var(--md-sys-density-scale, 0) * 1px));letter-spacing:var(--md-sys-typescale-body-medium-letter-spacing, 0.25px);color:var(--_label-color);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.md-meter__value{font-family:var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif);font-size:max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-label-medium-font-weight, 500);line-height:max(12px, calc(16px + var(--md-sys-density-scale, 0) * 1px));letter-spacing:var(--md-sys-typescale-label-medium-letter-spacing, 0.5px);color:var(--_value-color);flex:none;font-variant-numeric:tabular-nums}.md-meter__track{position:relative;block-size:var(--_thickness);border-radius:var(--_track-shape);background-color:var(--_track-color);overflow:hidden}.md-meter__indicator{position:absolute;inset-inline-start:0;inset-block:0;inline-size:var(--_fill-pct, 0%);background-color:var(--_indicator-color);border-radius:inherit;transition:inline-size var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host([variant='circular']){inline-size:max-content;display:inline-flex;flex-direction:column;align-items:center;gap:max(2px, calc(4px + var(--md-sys-density-scale, 0) * 0.5px))}.md-meter__circular{position:relative;inline-size:var(--_size);block-size:var(--_size);flex:none}.md-meter__ring{inline-size:100%;block-size:100%;display:block;}.md-meter__ring-track{stroke:var(--_track-color)}.md-meter__ring-indicator{stroke:var(--_indicator-color);transition:stroke-dashoffset var(--md-sys-motion-duration-medium2, 300ms)       var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),     opacity var(--md-sys-motion-duration-short4, 200ms) linear}.md-meter__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif);font-size:calc(var(--_size) * 0.26);font-weight:var(--md-sys-typescale-label-medium-font-weight, 500);line-height:1;color:var(--_value-color);font-variant-numeric:tabular-nums;padding:calc(var(--_size) * 0.18);box-sizing:border-box;text-align:center}.md-meter__caption{font-family:var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);font-size:max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-body-medium-font-weight, 400);line-height:max(14px, calc(20px + var(--md-sys-density-scale, 0) * 1px));letter-spacing:var(--md-sys-typescale-body-medium-letter-spacing, 0.25px);color:var(--_label-color);max-inline-size:calc(var(--_size) * 2);text-align:center}@media (prefers-reduced-motion: reduce){.md-meter__indicator,.md-meter__ring-indicator{transition:none}}@media (forced-colors: active){.md-meter__indicator{background-color:CanvasText}.md-meter__track{background-color:GrayText}.md-meter__ring-indicator{stroke:CanvasText}.md-meter__ring-track{stroke:GrayText}}: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 n=24;const c=240;const o=48;const l=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.value=0;this.min=0;this.max=100;this.label="";this.showLabel=false;this.showValue=false;this.valueText="";this.locale="";this.color="primary";this.variant="linear";this.size=48;this.thickness=4;this.density=0}get saneMin(){return Number.isFinite(this.min)?this.min:0}get saneMax(){const e=Number.isFinite(this.max)?this.max:100;return Math.max(e,this.saneMin)}get clampedValue(){const e=Number.isFinite(this.value)?this.value:this.saneMin;return Math.min(this.saneMax,Math.max(this.saneMin,e))}get percentage(){const e=this.saneMin;const t=this.saneMax;if(t===e)return 0;return(this.clampedValue-e)/(t-e)*100}get formattedValue(){if(this.valueText)return this.valueText;const e=this.clampedValue;try{if(this.formatOptions){return new Intl.NumberFormat(this.locale||undefined,this.formatOptions).format(e)}return new Intl.NumberFormat(this.locale||undefined,{style:"percent"}).format(this.percentage/100)}catch{return`${e}`}}get colorVars(){const e=this.color;if(!e||e==="primary"||!/^[a-z][a-z0-9-]*$/i.test(e))return undefined;return{"--_c-main":`var(--md-sys-color-${e}, var(--md-sys-color-primary))`,"--_c-container":`var(--md-sys-color-${e}-container, var(--md-sys-color-secondary-container))`}}get thicknessVar(){const e=Number(this.thickness);if(!Number.isFinite(e)||e===4)return undefined;return{"--_thickness":`var(--md-meter-height, max(2px, calc(${e}px + var(--md-sys-density-scale, 0) * 0.5px)))`}}get resolvedSize(){const e=Number.isFinite(this.size)&&this.size>0?this.size:o;return Math.min(c,Math.max(n,e))}get ringThickness(){const e=Number(this.thickness);return Number.isFinite(e)&&e>0?e:4}get ringRadius(){return Math.max(.5,(this.resolvedSize-this.ringThickness)/2)}get sizeVar(){if(this.variant!=="circular")return undefined;const e=this.resolvedSize;if(e===o)return undefined;return{"--_size":`var(--md-meter-size, max(24px, calc(${e}px + var(--md-sys-density-scale, 0) * 2px)))`}}get hostStyle(){const e={...this.colorVars??{},...this.thicknessVar??{},...this.sizeVar??{}};return Object.keys(e).length?e:undefined}renderCircular(e){const t=this.resolvedSize;const r=this.ringThickness;const a=this.ringRadius;const i=t/2;const n=this.percentage/100;return[s("div",{class:"md-meter__circular",part:"circular"},s("svg",{class:"md-meter__ring",viewBox:`0 0 ${t} ${t}`,"aria-hidden":"true"},s("circle",{class:"md-meter__ring-track",part:"track",cx:i,cy:i,r:a,"stroke-width":r,fill:"none"}),s("circle",{class:"md-meter__ring-indicator",part:"indicator",cx:i,cy:i,r:a,"stroke-width":r,fill:"none",pathLength:1,"stroke-dasharray":"1 1","stroke-dashoffset":1-n,"stroke-linecap":"round",transform:`rotate(-90 ${i} ${i})`,style:{opacity:n>0?"1":"0"}})),this.showValue&&s("span",{class:"md-meter__center",part:"value","aria-hidden":"true"},e)),this.showLabel&&s("span",{class:"md-meter__caption",part:"label","aria-hidden":"true"},this.label)]}render(){const e=this.variant==="circular";const t=!e&&(this.showLabel||this.showValue);const a=this.formattedValue;return s(r,{key:"cf2f9f9a168138daae1efb9617a3fc585f7f6b88",class:{"md-meter":true,"md-meter--with-header":t,"md-meter--circular":e},role:"meter","aria-label":this.label||undefined,"aria-valuemin":String(this.saneMin),"aria-valuemax":String(this.saneMax),"aria-valuenow":String(this.clampedValue),"aria-valuetext":a,style:this.hostStyle},e&&this.renderCircular(a),t&&s("div",{key:"bf4bcc8d85eb41f11d8ac478680c7f45d3215f06",class:"md-meter__header","aria-hidden":"true"},this.showLabel&&s("span",{key:"1f6ec758a643a124f71dd97025b9414269138d5f",class:"md-meter__label",part:"label"},this.label),this.showValue&&s("span",{key:"2d5c8ceb7f6aa401c28dbbcf7542c6d9cec3a1b3",class:"md-meter__value",part:"value"},a)),!e&&s("div",{key:"f1c02c7ad24a0b2c1095ec0a18bfb3c1f00245e8",class:"md-meter__track",part:"track","aria-hidden":"true"},s("div",{key:"5c66b17dbdd5fba9c78e52d533cf38817f7b4a31",class:"md-meter__indicator",part:"indicator",style:{"--_fill-pct":`${this.percentage}%`}})))}get el(){return this}static get style(){return i()}},[1,"md-meter",{value:[2],min:[2],max:[2],label:[1],showLabel:[4,"show-label"],showValue:[4,"show-value"],valueText:[1,"value-text"],locale:[1],formatOptions:[16],color:[513],variant:[513],size:[2],thickness:[2],density:[514]}]);function d(){if(typeof customElements==="undefined"){return}const e=["md-meter"];e.forEach((e=>{switch(e){case"md-meter":if(!customElements.get(a(e))){customElements.define(a(e),l)}break}}))}d();const m=l;const h=d;export{m as MdMeter,h as defineCustomElement};
+//# sourceMappingURL=md-meter.js.map

package/dist/components-csr/md-meter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdMeterCss","CIRCULAR_SIZE_MIN","CIRCULAR_SIZE_MAX","CIRCULAR_SIZE_DEFAULT","MdMeter","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","min","max","label","showLabel","showValue","valueText","locale","color","variant","size","thickness","density","saneMin","Number","isFinite","saneMax","Math","clampedValue","v","percentage","lo","hi","formattedValue","clamped","formatOptions","Intl","NumberFormat","undefined","format","style","colorVars","c","test","thicknessVar","t","resolvedSize","s","ringThickness","ringRadius","sizeVar","hostStyle","Object","keys","length","renderCircular","text","sz","r","fraction","h","class","part","viewBox","cx","cy","fill","pathLength","transform","opacity","render","circular","withHeader","Host","key","role","String"],"sources":["src/components/md-meter/md-meter.css?tag=md-meter&encapsulation=shadow","src/components/md-meter/md-meter.tsx"],"sourcesContent":["/* ==========================================================\n   md-meter — Material Design 3 Meter\n   A read-only display of a numeric value within a known range\n   (storage used, quota, password strength), drawn on\n   md-progress-indicator's linear track geometry.\n\n   Deliberately a PLAIN track + fill: the M3-Expressive 4dp gap\n   and stop dot are md-progress-indicator's activity identity;\n   a meter shows a state, so it keeps the clean classic bar.\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-meter-indicator-color  Fill colour (defaults to the `color` role)\n     --md-meter-track-color      Track background (defaults to the role's container)\n     --md-meter-track-shape      Track + fill corner radius (default corner-full pill)\n     --md-meter-height           Track thickness (overrides the `thickness` prop)\n     --md-meter-label-color      Header label text colour\n     --md-meter-value-color      Header value text colour\n     --md-meter-size             Ring diameter (circular variant)\n\n   CSS PARTS:\n     track      Background track / ring (the full range)\n     indicator  Value fill inside the track / the value arc\n     label      Header label text (rendered when `show-label`)\n     value      Header value text (rendered when `show-value`)\n     circular   The ring's box (circular variant only)\n\n   RTL: geometry is 100% logical properties (inset-inline-start,\n   inline-size), so the fill anchors to the inline start and the\n   whole meter mirrors for free under dir=\"rtl\". No JS branch.\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST\n   ========================================================== */\n\n:host {\n  /* Colour-role slots. These two are the ONLY thing the `color` prop swaps\n     (md-chip pattern); the track/indicator rules below are written against\n     them, so a new theme role never touches these rules. The neutral defaults\n     reproduce md-progress-indicator's look exactly: primary fill on a\n     secondary-container track. */\n  --_c-main: var(--md-sys-color-primary, #6750A4);\n  --_c-container: var(--md-sys-color-secondary-container, #E8DEF8);\n\n  /* Public hooks resolve onto private slots; the hook must stay outermost so a\n     per-instance override always beats the `color` role. */\n  --_indicator-color: var(--md-meter-indicator-color, var(--_c-main));\n  --_track-color: var(--md-meter-track-color, var(--_c-container));\n  --_track-shape: var(--md-meter-track-shape, var(--md-sys-shape-corner-full, 9999px));\n\n  /* 4dp default bar, density-scaled at 0.5px per rung, floored at 2px.\n     A `thickness` prop ≠ 4 re-declares this inline on the host with the same\n     hook + taper + floor (see thicknessVar in md-meter.tsx). */\n  --_thickness: var(--md-meter-height, max(2px, calc(4px + var(--md-sys-density-scale, 0) * 0.5px)));\n  /* Ring diameter for the circular variant. Density tapers the whole ring\n     (2px per rung) rather than the stroke alone, so radius and stroke stay in\n     proportion; floored at the M3 24dp minimum. A `size` prop != 48\n     re-declares this inline on the host with the same hook + taper + floor\n     (see sizeVar in md-meter.tsx). */\n  --_size: var(--md-meter-size, max(24px, calc(48px + var(--md-sys-density-scale, 0) * 2px)));\n  --_label-color: var(--md-meter-label-color, var(--md-sys-color-on-surface, #1C1B1F));\n  --_value-color: var(--md-meter-value-color, var(--md-sys-color-on-surface-variant, #49454F));\n\n  display: block;\n  inline-size: 100%;\n  box-sizing: border-box;\n}\n\n/* ==========================================================\n   2. HEADER (optional label / value row)\n   ========================================================== */\n\n.md-meter__header {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--md-sys-spacing-gap-sm, 8px);\n  /* Label-to-track spacing tapers with density, floored at half base. */\n  margin-block-end: max(2px, calc(4px + var(--md-sys-density-scale, 0) * 0.5px));\n}\n\n/* MD3 body-medium, start-aligned. Density trims the type ~0.5px per rung with\n   a legibility floor — same taper the chip label uses. */\n.md-meter__label {\n  font-family: var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);\n  font-size: max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-body-medium-font-weight, 400);\n  line-height: max(14px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing, 0.25px);\n  color: var(--_label-color);\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* MD3 label-medium, end-aligned. tabular-nums so a live value doesn't wobble\n   as digits change (md-rating's value-label convention). */\n.md-meter__value {\n  font-family: var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif);\n  font-size: max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-label-medium-font-weight, 500);\n  line-height: max(12px, calc(16px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing, 0.5px);\n  color: var(--_value-color);\n  flex: none;\n  font-variant-numeric: tabular-nums;\n}\n\n/* ==========================================================\n   3. TRACK\n   ========================================================== */\n\n.md-meter__track {\n  position: relative;\n  block-size: var(--_thickness);\n  border-radius: var(--_track-shape);\n  background-color: var(--_track-color);\n  /* Clips the fill's square start edge to the pill shape at low values. */\n  overflow: hidden;\n}\n\n/* ==========================================================\n   4. INDICATOR (value fill)\n   ========================================================== */\n\n.md-meter__indicator {\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block: 0;\n  inline-size: var(--_fill-pct, 0%);\n  background-color: var(--_indicator-color);\n  /* Follows the track's radius so the trailing edge is rounded at mid values;\n     the container clip owns the leading edge. */\n  border-radius: inherit;\n  /* Value changes glide rather than jump. inline-size is what actually\n     changes when --_fill-pct is rewritten, so the transition applies. */\n  transition: inline-size var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* ==========================================================\n   5. CIRCULAR VARIANT (ring)\n   Same reading, same colour slots, same thickness — only the\n   geometry differs. The host stops being a full-width block and\n   becomes a shrink-to-fit column: ring, then optional caption.\n   ========================================================== */\n\n:host([variant='circular']) {\n  inline-size: max-content;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: max(2px, calc(4px + var(--md-sys-density-scale, 0) * 0.5px));\n}\n\n.md-meter__circular {\n  position: relative;\n  inline-size: var(--_size);\n  block-size: var(--_size);\n  flex: none;\n}\n\n.md-meter__ring {\n  inline-size: 100%;\n  block-size: 100%;\n  display: block;\n  /* The ring fills clockwise from 12 o'clock in every locale — Material's\n     circular progress does not mirror, and neither does a clock face. Nothing\n     here is direction-dependent, so RTL needs no branch. */\n}\n\n.md-meter__ring-track {\n  stroke: var(--_track-color);\n}\n\n.md-meter__ring-indicator {\n  stroke: var(--_indicator-color);\n  /* dashoffset is a single number, so it interpolates; a dasharray list does\n     not reliably. Same duration/easing as the bar's inline-size glide. */\n  transition:\n    stroke-dashoffset var(--md-sys-motion-duration-medium2, 300ms)\n      var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    opacity var(--md-sys-motion-duration-short4, 200ms) linear;\n}\n\n/* Value sits on the ring's centre. Sized off the ring so it scales with it\n   instead of needing a size-specific override at every diameter. */\n.md-meter__center {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif);\n  font-size: calc(var(--_size) * 0.26);\n  font-weight: var(--md-sys-typescale-label-medium-font-weight, 500);\n  line-height: 1;\n  color: var(--_value-color);\n  font-variant-numeric: tabular-nums;\n  /* The arc's round cap can reach the text at large thicknesses; keep clear. */\n  padding: calc(var(--_size) * 0.18);\n  box-sizing: border-box;\n  text-align: center;\n}\n\n/* Caption under the ring — the circular counterpart of the header label. */\n.md-meter__caption {\n  font-family: var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);\n  font-size: max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-body-medium-font-weight, 400);\n  line-height: max(14px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing, 0.25px);\n  color: var(--_label-color);\n  max-inline-size: calc(var(--_size) * 2);\n  text-align: center;\n}\n\n/* ==========================================================\n   6. REDUCED MOTION\n   ========================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  .md-meter__indicator,\n  .md-meter__ring-indicator {\n    transition: none;\n  }\n}\n\n/* ==========================================================\n   7. FORCED COLORS (high contrast)\n   ========================================================== */\n\n@media (forced-colors: active) {\n  .md-meter__indicator {\n    background-color: CanvasText;\n  }\n\n  .md-meter__track {\n    background-color: GrayText;\n  }\n\n  .md-meter__ring-indicator {\n    stroke: CanvasText;\n  }\n\n  .md-meter__ring-track {\n    stroke: GrayText;\n  }\n}\n\n/* ==========================================================\n   8. 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/** M3 circular size band (dp), shared with md-progress-indicator. */\nconst CIRCULAR_SIZE_MIN = 24;\nconst CIRCULAR_SIZE_MAX = 240;\nconst CIRCULAR_SIZE_DEFAULT = 48;\n\n/**\n * md-meter — a read-only graphical display of a numeric value within a known\n * range (storage used, quota, password strength, battery level).\n *\n * The semantics live on the HOST: `role=\"meter\"` with the full ARIA value\n * contract, a purely presentational track + indicator inside the shadow root\n * (all `aria-hidden`), value clamping into `[min, max]`, and Intl-driven value\n * formatting (locale-aware percent by default, any `Intl.NumberFormatOptions`\n * via `formatOptions`). Keeping the ARIA outside the shadow root is what lets\n * the visuals change shape without touching what is announced.\n *\n * Deliberately NOT a progress indicator: a meter shows a *state* (\"how full\"),\n * a progress indicator shows an *activity* (\"how far along\"). It is therefore\n * a plain track + fill — no 4dp gap, no stop dot, no indeterminate mode, no\n * completion animation. Nothing here is focusable or interactive and no events\n * are emitted.\n *\n * Two shapes, one contract: `variant=\"linear\"` (default) is the bar;\n * `variant=\"circular\"` is the same reading as a ring, with the value in the\n * middle and the label beneath. The ARIA lives on the host either way, so the\n * shape is presentational and swapping it changes nothing for a screen reader.\n */\n@Component({\n  tag: 'md-meter',\n  styleUrl: 'md-meter.css',\n  shadow: true,\n})\nexport class MdMeter {\n  @Element() el!: HTMLElement;\n\n  /** Current value. Clamped into `[min, max]` for ARIA, geometry and formatting. */\n  @Prop() value: number = 0;\n\n  /** Lower bound of the range. */\n  @Prop() min: number = 0;\n\n  /** Upper bound of the range. */\n  @Prop() max: number = 100;\n\n  /**\n   * Accessible name (`aria-label`) of the meter. Also the visible header label\n   * when `show-label` is set. Pass already-localized text.\n   */\n  @Prop() label: string = '';\n\n  /** Renders the `label` text in a header row above the track. */\n  @Prop({ attribute: 'show-label' }) showLabel: boolean = false;\n\n  /**\n   * Renders the formatted value in the header row above the track,\n   * end-aligned. The visible span is `aria-hidden` — screen readers announce\n   * the same string via `aria-valuetext` on the host instead.\n   */\n  @Prop({ attribute: 'show-value' }) showValue: boolean = false;\n\n  /**\n   * Overrides the formatted value text entirely — both `aria-valuetext` and\n   * the visible header value (when `show-value` is set). Use it when neither\n   * the default percent format nor `formatOptions` can express the reading\n   * (e.g. \"3 of 10 seats\").\n   */\n  @Prop({ attribute: 'value-text' }) valueText: string = '';\n\n  /**\n   * BCP-47 locale for `Intl.NumberFormat` output (the formatted value text).\n   * Empty string = the runtime's default locale. This prop exists ONLY for\n   * Intl-computed output; translatable copy (`label`) is a plain text prop.\n   */\n  @Prop() locale: string = '';\n\n  /**\n   * `Intl.NumberFormatOptions` for the value text (JS-only object prop — set\n   * it as a property, not an attribute). When provided, the CLAMPED value is\n   * formatted with it (`{ style: 'unit', unit: 'gigabyte' }`, currency, plain\n   * number…). When omitted, the value's position in the range is formatted as\n   * a locale-aware percentage — the default, because a meter answers \"how\n   * full\", which a bare number cannot say without its bounds alongside it.\n   */\n  @Prop() formatOptions?: Intl.NumberFormatOptions;\n\n  /**\n   * Colour role applied to the fill and track. Any role name the THEME defines\n   * is accepted, not just the listed ones — the meter resolves `<name>` to the\n   * `--md-sys-color-<name>` / `-<name>-container` pair at runtime, so\n   * `color=\"brand\"` works as soon as a theme ships those tokens.\n   *\n   * The default (`primary`) keeps md-progress-indicator's neutral look:\n   * primary fill on a secondary-container track. Every other role paints\n   * `<role>` fill on a `<role>-container` track.\n   */\n  @Prop({ reflect: true }) color:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'error'\n    | 'success'\n    | 'warning'\n    | 'info'\n    | (string & {}) = 'primary';\n\n  /**\n   * Shape of the reading.\n   *\n   * - `linear` (default) — a horizontal bar, full width of its container.\n   * - `circular` — a ring. `show-value` puts the value in the middle of it and\n   *   `show-label` captions it underneath, instead of the bar's header row.\n   *\n   * The ring does NOT mirror under `dir=\"rtl\"`: it fills clockwise in every\n   * locale, matching Material's circular progress (and a clock face).\n   */\n  @Prop({ reflect: true }) variant: 'linear' | 'circular' = 'linear';\n\n  /**\n   * Ring diameter in dp — circular only, ignored by the bar. Clamped to\n   * 24…240 like md-progress-indicator, and tapered by density through the\n   * `--md-meter-size` hook.\n   */\n  @Prop() size: number = 48;\n\n  /** Track thickness in dp. Density-scaled (0.5px per rung), floored at 2px. */\n  @Prop() thickness: number = 4;\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  // ── private getters ────────────────────────────────────────────────────────\n\n  /** Sanitized lower bound — always a finite number. */\n  private get saneMin(): number {\n    return Number.isFinite(this.min) ? this.min : 0;\n  }\n\n  /**\n   * Sanitized upper bound — finite, and never below `min` (an inverted range\n   * collapses to an empty one so clamping and percentage stay well-defined).\n   */\n  private get saneMax(): number {\n    const max = Number.isFinite(this.max) ? this.max : 100;\n    return Math.max(max, this.saneMin);\n  }\n\n  /**\n   * Value clamped into `[saneMin, saneMax]`. ARIA, geometry and formatting all\n   * read this, never the raw prop, so an out-of-range reading can neither emit\n   * invalid ARIA nor overflow the track.\n   */\n  private get clampedValue(): number {\n    const v = Number.isFinite(this.value) ? this.value : this.saneMin;\n    return Math.min(this.saneMax, Math.max(this.saneMin, v));\n  }\n\n  /** Position of the clamped value in the range, 0–100. Empty range → 0. */\n  private get percentage(): number {\n    const lo = this.saneMin;\n    const hi = this.saneMax;\n    if (hi === lo) return 0;\n    return ((this.clampedValue - lo) / (hi - lo)) * 100;\n  }\n\n  /**\n   * The one string that drives BOTH `aria-valuetext` and the visible header\n   * value, so what is seen and what is announced can never disagree.\n   * `valueText` overrides everything; otherwise Intl formats the clamped value\n   * (`formatOptions`) or the percentage (default). Intl throws on invalid\n   * option combinations, so exotic `formatOptions` degrade to the raw value\n   * rather than taking the whole render down.\n   */\n  private get formattedValue(): string {\n    if (this.valueText) return this.valueText;\n    const clamped = this.clampedValue;\n    try {\n      if (this.formatOptions) {\n        return new Intl.NumberFormat(this.locale || undefined, this.formatOptions).format(clamped);\n      }\n      return new Intl.NumberFormat(this.locale || undefined, { style: 'percent' }).format(\n        this.percentage / 100,\n      );\n    } catch {\n      return `${clamped}`;\n    }\n  }\n\n  /**\n   * Maps `color` onto the two slots the track/indicator rules are written\n   * against (md-chip's colorVars pattern). Done here rather than as one CSS\n   * block per role so ANY theme-defined role works, not just a fixed list.\n   *\n   * `primary` (the default) returns undefined so the CSS neutral defaults\n   * apply — primary fill on a secondary-container track, matching\n   * md-progress-indicator — instead of a primary-container track.\n   *\n   * The value becomes part of a custom-property NAME, so anything outside a\n   * plain CSS ident is rejected outright.\n   */\n  private get colorVars(): Record<string, string> | undefined {\n    const c = this.color;\n    if (!c || c === 'primary' || !/^[a-z][a-z0-9-]*$/i.test(c)) return undefined;\n    return {\n      '--_c-main': `var(--md-sys-color-${c}, var(--md-sys-color-primary))`,\n      '--_c-container': `var(--md-sys-color-${c}-container, var(--md-sys-color-secondary-container))`,\n    };\n  }\n\n  /**\n   * Inline `--_thickness` ONLY when the prop deviates from the 4dp default\n   * (md-text-field's focusBorderWidth precedent) — the resting look stays pure\n   * CSS. The public `--md-meter-height` hook is repeated inside the override\n   * so it still wins, and the density taper + 2px floor stay applied.\n   */\n  private get thicknessVar(): Record<string, string> | undefined {\n    const t = Number(this.thickness);\n    if (!Number.isFinite(t) || t === 4) return undefined;\n    return {\n      '--_thickness': `var(--md-meter-height, max(2px, calc(${t}px + var(--md-sys-density-scale, 0) * 0.5px)))`,\n    };\n  }\n\n  /**\n   * Ring diameter, clamped into the same 24…240dp band md-progress-indicator\n   * uses. This is the SVG's user-unit box; the rendered pixel size comes from\n   * `--_size` on the host, so density tapers the whole ring proportionally\n   * rather than desynchronising the stroke from the radius.\n   */\n  private get resolvedSize(): number {\n    const s = Number.isFinite(this.size) && this.size > 0 ? this.size : CIRCULAR_SIZE_DEFAULT;\n    return Math.min(CIRCULAR_SIZE_MAX, Math.max(CIRCULAR_SIZE_MIN, s));\n  }\n\n  /** Stroke width in the SVG's user units. Same dp number as the bar's height. */\n  private get ringThickness(): number {\n    const t = Number(this.thickness);\n    return Number.isFinite(t) && t > 0 ? t : 4;\n  }\n\n  /** Centre-line radius: the stroke straddles it, so inset by half the width. */\n  private get ringRadius(): number {\n    return Math.max(0.5, (this.resolvedSize - this.ringThickness) / 2);\n  }\n\n  /**\n   * Inline `--_size` only when `size` deviates from the 48dp default, matching\n   * how `thicknessVar` leaves the resting look to pure CSS. The public\n   * `--md-meter-size` hook is repeated inside so it still wins, and the density\n   * taper + 24px floor stay applied.\n   */\n  private get sizeVar(): Record<string, string> | undefined {\n    if (this.variant !== 'circular') return undefined;\n    const s = this.resolvedSize;\n    if (s === CIRCULAR_SIZE_DEFAULT) return undefined;\n    return {\n      '--_size': `var(--md-meter-size, max(24px, calc(${s}px + var(--md-sys-density-scale, 0) * 2px)))`,\n    };\n  }\n\n  private get hostStyle(): Record<string, string> | undefined {\n    const style = {\n      ...(this.colorVars ?? {}),\n      ...(this.thicknessVar ?? {}),\n      ...(this.sizeVar ?? {}),\n    };\n    return Object.keys(style).length ? style : undefined;\n  }\n\n  /**\n   * The ring. `pathLength={1}` normalises the circumference so the fill is the\n   * fraction itself — no 2πr arithmetic that would have to be redone whenever\n   * size or thickness changes. `stroke-dasharray=\"1 1\"` + a dashoffset of\n   * `1 − fraction` draws exactly that leading portion, and dashoffset is a\n   * single number so it transitions cleanly (a dasharray list does not).\n   */\n  private renderCircular(text: string) {\n    const sz = this.resolvedSize;\n    const t = this.ringThickness;\n    const r = this.ringRadius;\n    const c = sz / 2;\n    const fraction = this.percentage / 100;\n\n    return [\n      <div class=\"md-meter__circular\" part=\"circular\">\n        <svg class=\"md-meter__ring\" viewBox={`0 0 ${sz} ${sz}`} aria-hidden=\"true\">\n          <circle\n            class=\"md-meter__ring-track\"\n            part=\"track\"\n            cx={c}\n            cy={c}\n            r={r}\n            stroke-width={t}\n            fill=\"none\"\n          />\n          <circle\n            class=\"md-meter__ring-indicator\"\n            part=\"indicator\"\n            cx={c}\n            cy={c}\n            r={r}\n            stroke-width={t}\n            fill=\"none\"\n            pathLength={1}\n            stroke-dasharray=\"1 1\"\n            stroke-dashoffset={1 - fraction}\n            stroke-linecap=\"round\"\n            // 12 o'clock start. Without it the fill would begin at 3 o'clock.\n            transform={`rotate(-90 ${c} ${c})`}\n            style={{ opacity: fraction > 0 ? '1' : '0' }}\n          />\n        </svg>\n        {this.showValue && (\n          <span class=\"md-meter__center\" part=\"value\" aria-hidden=\"true\">\n            {text}\n          </span>\n        )}\n      </div>,\n      this.showLabel && (\n        <span class=\"md-meter__caption\" part=\"label\" aria-hidden=\"true\">\n          {this.label}\n        </span>\n      ),\n    ];\n  }\n\n  render() {\n    const circular = this.variant === 'circular';\n    const withHeader = !circular && (this.showLabel || this.showValue);\n    const text = this.formattedValue;\n    return (\n      <Host\n        class={{\n          'md-meter': true,\n          'md-meter--with-header': withHeader,\n          'md-meter--circular': circular,\n        }}\n        role=\"meter\"\n        aria-label={this.label || undefined}\n        aria-valuemin={String(this.saneMin)}\n        aria-valuemax={String(this.saneMax)}\n        aria-valuenow={String(this.clampedValue)}\n        aria-valuetext={text}\n        style={this.hostStyle}\n      >\n        {circular && this.renderCircular(text)}\n        {withHeader && (\n          <div class=\"md-meter__header\" aria-hidden=\"true\">\n            {this.showLabel && (\n              <span class=\"md-meter__label\" part=\"label\">\n                {this.label}\n              </span>\n            )}\n            {this.showValue && (\n              <span class=\"md-meter__value\" part=\"value\">\n                {text}\n              </span>\n            )}\n          </div>\n        )}\n        {!circular && (\n          <div class=\"md-meter__track\" part=\"track\" aria-hidden=\"true\">\n            <div\n              class=\"md-meter__indicator\"\n              part=\"indicator\"\n              style={{ '--_fill-pct': `${this.percentage}%` }}\n            />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAa,IAAM,4yICGzB,MAAMC,EAAoB,GAC1B,MAAMC,EAAoB,IAC1B,MAAMC,EAAwB,G,MA6BjBC,EAAOC,EAAA,MAAAD,UAAAE,EALpB,WAAAC,CAAAC,G,kEASUC,KAAAC,MAAgB,EAGhBD,KAAAE,IAAc,EAGdF,KAAAG,IAAc,IAMdH,KAAAI,MAAgB,GAGWJ,KAAAK,UAAqB,MAOrBL,KAAAM,UAAqB,MAQrBN,KAAAO,UAAoB,GAO/CP,KAAAQ,OAAiB,GAsBAR,KAAAS,MAQL,UAYKT,KAAAU,QAAiC,SAOlDV,KAAAW,KAAe,GAGfX,KAAAY,UAAoB,EAOHZ,KAAAa,QAAiC,CAmP3D,CA9OC,WAAYC,GACV,OAAOC,OAAOC,SAAShB,KAAKE,KAAOF,KAAKE,IAAM,C,CAOhD,WAAYe,GACV,MAAMd,EAAMY,OAAOC,SAAShB,KAAKG,KAAOH,KAAKG,IAAM,IACnD,OAAOe,KAAKf,IAAIA,EAAKH,KAAKc,Q,CAQ5B,gBAAYK,GACV,MAAMC,EAAIL,OAAOC,SAAShB,KAAKC,OAASD,KAAKC,MAAQD,KAAKc,QAC1D,OAAOI,KAAKhB,IAAIF,KAAKiB,QAASC,KAAKf,IAAIH,KAAKc,QAASM,G,CAIvD,cAAYC,GACV,MAAMC,EAAKtB,KAAKc,QAChB,MAAMS,EAAKvB,KAAKiB,QAChB,GAAIM,IAAOD,EAAI,OAAO,EACtB,OAAStB,KAAKmB,aAAeG,IAAOC,EAAKD,GAAO,G,CAWlD,kBAAYE,GACV,GAAIxB,KAAKO,UAAW,OAAOP,KAAKO,UAChC,MAAMkB,EAAUzB,KAAKmB,aACrB,IACE,GAAInB,KAAK0B,cAAe,CACtB,OAAO,IAAIC,KAAKC,aAAa5B,KAAKQ,QAAUqB,UAAW7B,KAAK0B,eAAeI,OAAOL,E,CAEpF,OAAO,IAAIE,KAAKC,aAAa5B,KAAKQ,QAAUqB,UAAW,CAAEE,MAAO,YAAaD,OAC3E9B,KAAKqB,WAAa,I,CAEpB,MACA,MAAO,GAAGI,G,EAgBd,aAAYO,GACV,MAAMC,EAAIjC,KAAKS,MACf,IAAKwB,GAAKA,IAAM,YAAc,qBAAqBC,KAAKD,GAAI,OAAOJ,UACnE,MAAO,CACL,YAAa,sBAAsBI,kCACnC,iBAAkB,sBAAsBA,wD,CAU5C,gBAAYE,GACV,MAAMC,EAAIrB,OAAOf,KAAKY,WACtB,IAAKG,OAAOC,SAASoB,IAAMA,IAAM,EAAG,OAAOP,UAC3C,MAAO,CACL,eAAgB,wCAAwCO,kD,CAU5D,gBAAYC,GACV,MAAMC,EAAIvB,OAAOC,SAAShB,KAAKW,OAASX,KAAKW,KAAO,EAAIX,KAAKW,KAAOjB,EACpE,OAAOwB,KAAKhB,IAAIT,EAAmByB,KAAKf,IAAIX,EAAmB8C,G,CAIjE,iBAAYC,GACV,MAAMH,EAAIrB,OAAOf,KAAKY,WACtB,OAAOG,OAAOC,SAASoB,IAAMA,EAAI,EAAIA,EAAI,C,CAI3C,cAAYI,GACV,OAAOtB,KAAKf,IAAI,IAAMH,KAAKqC,aAAerC,KAAKuC,eAAiB,E,CASlE,WAAYE,GACV,GAAIzC,KAAKU,UAAY,WAAY,OAAOmB,UACxC,MAAMS,EAAItC,KAAKqC,aACf,GAAIC,IAAM5C,EAAuB,OAAOmC,UACxC,MAAO,CACL,UAAW,uCAAuCS,gD,CAItD,aAAYI,GACV,MAAMX,EAAQ,IACR/B,KAAKgC,WAAa,MAClBhC,KAAKmC,cAAgB,MACrBnC,KAAKyC,SAAW,IAEtB,OAAOE,OAAOC,KAAKb,GAAOc,OAASd,EAAQF,S,CAUrC,cAAAiB,CAAeC,GACrB,MAAMC,EAAKhD,KAAKqC,aAChB,MAAMD,EAAIpC,KAAKuC,cACf,MAAMU,EAAIjD,KAAKwC,WACf,MAAMP,EAAIe,EAAK,EACf,MAAME,EAAWlD,KAAKqB,WAAa,IAEnC,MAAO,CACL8B,EAAA,OAAKC,MAAM,qBAAqBC,KAAK,YACnCF,EAAA,OAAKC,MAAM,iBAAiBE,QAAS,OAAON,KAAMA,IAAI,cAAc,QAClEG,EAAA,UACEC,MAAM,uBACNC,KAAK,QACLE,GAAItB,EACJuB,GAAIvB,EACJgB,EAAGA,EAAC,eACUb,EACdqB,KAAK,SAEPN,EAAA,UACEC,MAAM,2BACNC,KAAK,YACLE,GAAItB,EACJuB,GAAIvB,EACJgB,EAAGA,EAAC,eACUb,EACdqB,KAAK,OACLC,WAAY,EAAC,mBACI,MAAK,oBACH,EAAIR,EAAQ,iBAChB,QAEfS,UAAW,cAAc1B,KAAKA,KAC9BF,MAAO,CAAE6B,QAASV,EAAW,EAAI,IAAM,QAG1ClD,KAAKM,WACJ6C,EAAA,QAAMC,MAAM,mBAAmBC,KAAK,QAAO,cAAa,QACrDN,IAIP/C,KAAKK,WACH8C,EAAA,QAAMC,MAAM,oBAAoBC,KAAK,QAAO,cAAa,QACtDrD,KAAKI,O,CAMd,MAAAyD,GACE,MAAMC,EAAW9D,KAAKU,UAAY,WAClC,MAAMqD,GAAcD,IAAa9D,KAAKK,WAAaL,KAAKM,WACxD,MAAMyC,EAAO/C,KAAKwB,eAClB,OACE2B,EAACa,EAAI,CAAAC,IAAA,2CACHb,MAAO,CACL,WAAY,KACZ,wBAAyBW,EACzB,qBAAsBD,GAExBI,KAAK,QAAO,aACAlE,KAAKI,OAASyB,UAAS,gBACpBsC,OAAOnE,KAAKc,SAAQ,gBACpBqD,OAAOnE,KAAKiB,SAAQ,gBACpBkD,OAAOnE,KAAKmB,cAAa,iBACxB4B,EAChBhB,MAAO/B,KAAK0C,WAEXoB,GAAY9D,KAAK8C,eAAeC,GAChCgB,GACCZ,EAAA,OAAAc,IAAA,2CAAKb,MAAM,mBAAkB,cAAa,QACvCpD,KAAKK,WACJ8C,EAAA,QAAAc,IAAA,2CAAMb,MAAM,kBAAkBC,KAAK,SAChCrD,KAAKI,OAGTJ,KAAKM,WACJ6C,EAAA,QAAAc,IAAA,2CAAMb,MAAM,kBAAkBC,KAAK,SAChCN,KAKPe,GACAX,EAAA,OAAAc,IAAA,2CAAKb,MAAM,kBAAkBC,KAAK,QAAO,cAAa,QACpDF,EAAA,OAAAc,IAAA,2CACEb,MAAM,sBACNC,KAAK,YACLtB,MAAO,CAAE,cAAe,GAAG/B,KAAKqB,kB","ignoreList":[]}

package/dist/components-csr/md-multi-select.js

@@ -0,0 +1,2 @@
+import{p as t,H as i,c as e,f as s,h as l,d as r,t as a}from"./p-bSpXNc5J.js";import{L as n}from"./p-6WgHjhDg.js";import{V as o,i as c,n as h,r as d,c as m}from"./p-Bz-JaJcA.js";import{s as u,g as p,c as f,r as g}from"./p-DWxN44zD.js";import{p as b}from"./p-CxhZdOPw.js";import{d as v}from"./p-BZakoRau.js";import{d as _}from"./p-BEmwDSzw.js";import{d as y}from"./p-Bkt_X-6v.js";import{d as x}from"./p-CVMM-tdC.js";import{d as w}from"./p-DfcpeJAu.js";import{d as k}from"./p-C3vB0Hd9.js";import{d as z}from"./p-CF7mq5T7.js";const C=()=>`:host{--md-text-field-padding-inline-end:var(--md-sys-spacing-inset-lg, 16px);--_min-width:var(--md-multi-select-min-width, 200px);--_chip-gap:var(--md-multi-select-chip-gap, var(--md-sys-spacing-gap-xs, 4px));--_chip-radius:var(--md-multi-select-chip-radius, 8px);--_caret-color:var(--md-multi-select-caret-color, var(--md-sys-color-on-surface-variant));--_clear-color:var(--md-multi-select-clear-color, var(--md-sys-color-on-surface-variant));--_option-icon-size:var(--md-multi-select-option-icon-size, 20px);font-family:var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);display:inline-block;inline-size:var(--md-multi-select-width, 100%);min-inline-size:var(--_min-width);box-sizing:border-box;vertical-align:bottom;position:relative}.md-multi-select__field{display:block;inline-size:100%;cursor:pointer;--md-text-field-cursor:pointer}.md-multi-select__field::part(input){cursor:pointer}:host(.md-multi-select--display-text) .md-multi-select__field::part(input){text-overflow:ellipsis}:host(.md-multi-select--disabled) .md-multi-select__field,:host(.md-multi-select--soft-disabled) .md-multi-select__field{cursor:not-allowed;--md-text-field-cursor:not-allowed}:host(.md-multi-select--disabled) .md-multi-select__field::part(input),:host(.md-multi-select--soft-disabled) .md-multi-select__field::part(input){cursor:not-allowed}.md-multi-select__frame{display:flex;flex-direction:column;gap:var(--md-multi-select-frame-gap, max(6px, calc(8px + var(--md-sys-density-scale, 0) * 0.5px)))}:host(.md-multi-select--chips-top) .md-multi-select__frame{flex-direction:column-reverse;gap:var(--md-multi-select-frame-gap, max(6px, calc(16px + var(--md-sys-density-scale, 0) * 2.5px)))}:host(.md-multi-select--chips-left) .md-multi-select__frame,:host(.md-multi-select--chips-right) .md-multi-select__frame{flex-flow:row nowrap;align-items:center;justify-content:flex-start}:host(.md-multi-select--chips-left) .md-multi-select__chips{order:-1}:host(.md-multi-select--chips-left) .md-multi-select__field,:host(.md-multi-select--chips-right) .md-multi-select__field{inline-size:var(--md-multi-select-trigger-width, max-content);flex:0 0 auto}:host(.md-multi-select--chips-left) ::slotted([slot='trigger']),:host(.md-multi-select--chips-right) ::slotted([slot='trigger']){inline-size:var(--md-multi-select-trigger-width, max-content);flex:0 0 auto}:host(.md-multi-select--chips-left) .md-multi-select__chips,:host(.md-multi-select--chips-right) .md-multi-select__chips{flex:0 1 auto;min-inline-size:0}.md-multi-select__chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_chip-gap);max-inline-size:100%}:host(.md-multi-select--chips-bottom) .md-multi-select__chips,:host(.md-multi-select--chips-top) .md-multi-select__chips{contain:inline-size}.md-multi-select__chips md-chip{--md-chip-container-shape:var(--_chip-radius)}.md-multi-select__button{flex:0 0 auto}.md-multi-select__button-desc{padding-block-start:4px;padding-inline:16px;font:var(--md-sys-typescale-body-small, 400 12px/16px Roboto, sans-serif);color:var(--md-sys-color-on-surface-variant, #49454f)}.md-multi-select__button-desc--error{color:var(--md-sys-color-error, #b3261e)}.md-multi-select__sr-live{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.md-multi-select__inline-chips{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--_chip-gap);min-inline-size:0;max-inline-size:100%;flex:1 1 auto;position:relative;overflow:hidden;}.md-multi-select__inline-chips--wrap{flex-wrap:wrap;overflow:visible;padding-block-start:var(--md-multi-select-inline-chips-block-start, var(--md-sys-spacing-gap-xs, 4px));row-gap:var(--_chip-gap)}.md-multi-select__inline-chips md-chip,.md-multi-select__inline-measure md-chip{--md-chip-container-shape:var(--_chip-radius);flex-shrink:0}.md-multi-select__measure-clip{position:absolute;inline-size:0;block-size:0;overflow:hidden;pointer-events:none}.md-multi-select__inline-measure{position:absolute;inset-block-start:0;inset-inline-start:0;display:flex;flex-wrap:nowrap;align-items:center;gap:var(--_chip-gap);inline-size:max-content;visibility:hidden;pointer-events:none;white-space:nowrap}.md-multi-select__overflow-chip{flex-shrink:0;display:inline-flex;align-items:center;block-size:var(--md-multi-select-chip-height, 32px);padding-inline:12px;border:1px solid var(--md-multi-select-chip-outline, var(--md-sys-color-outline-variant, #CAC4D0));border-radius:var(--_chip-radius);background:transparent;color:var(--md-sys-color-on-surface-variant, #49454F);font:500 var(--md-sys-typescale-label-large-size, 14px) / var(--md-sys-typescale-label-large-line-height, 20px)     var(--md-sys-typescale-label-large-font, Roboto, sans-serif);white-space:nowrap;cursor:pointer}.md-multi-select__overflow-chip:hover:not(:disabled){background:color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) 8%, transparent)}.md-multi-select__overflow-chip:focus-visible{outline:2px solid var(--md-sys-color-primary, #6750A4);outline-offset:2px}.md-multi-select__clear{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--md-multi-select-clear-size, 28px);block-size:var(--md-multi-select-clear-size, 28px);padding:0;background:var(--md-multi-select-clear-bg, transparent);border:0;border-radius:var(--md-multi-select-clear-radius, 50%);color:var(--_clear-color);cursor:pointer;font-size:var(--md-multi-select-clear-icon-size, 18px);transition:background var(--md-sys-motion-duration-short2, 100ms) ease}.md-multi-select__clear:hover{background:var(--md-multi-select-clear-hover-bg,     color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent))}.md-multi-select__clear:focus-visible{outline-width:var(--md-multi-select-clear-focus-ring-width, 2px);outline-style:solid;outline-color:var(--md-multi-select-clear-focus-ring-color, var(--md-sys-color-primary));outline-offset:var(--md-multi-select-clear-focus-ring-offset, 1px)}.md-multi-select__clear .material-symbols-outlined{font-size:var(--md-multi-select-clear-icon-size, 18px)}.md-multi-select__field .md-multi-select__caret-box{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto}.md-multi-select__caret{color:var(--_caret-color);font-size:var(--md-multi-select-caret-size, 24px);line-height:1;transition:transform var(--md-sys-motion-duration-short4, 200ms)     var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));display:inline-flex;align-items:center;justify-content:center;inline-size:var(--md-multi-select-caret-box-size, 24px);block-size:var(--md-multi-select-caret-box-size, 24px)}:host(.md-multi-select--open) .md-multi-select__caret{transform:rotate(180deg)}.md-multi-select__loader{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--md-multi-select-loader-size, 24px);block-size:var(--md-multi-select-loader-size, 24px);--md-loading-indicator-size:var(--md-multi-select-spinner-size, 22px);--md-loading-indicator-shape-size:var(--md-multi-select-spinner-size, 22px)}.md-multi-select__loading{display:flex;align-items:center;padding-block:var(--md-multi-select-loading-padding, var(--md-sys-spacing-inset-lg, 16px));padding-inline:var(--md-multi-select-loading-padding, var(--md-sys-spacing-inset-lg, 16px))}.md-multi-select__loading md-progress-indicator{inline-size:100%}.md-multi-select__empty{display:flex;justify-content:center;padding:var(--md-multi-select-empty-padding, var(--md-sys-spacing-inset-md, 12px) var(--md-sys-spacing-inset-lg, 16px));color:var(--md-multi-select-empty-color, var(--md-sys-color-on-surface-variant, #49454f));text-align:center;font:var(--md-multi-select-empty-font, var(--md-sys-typescale-body-medium, 400 14px/20px Roboto, sans-serif))}.md-multi-select__select-all{display:block;border-block-end:var(--md-multi-select-select-all-divider-width, 1px) solid     var(--md-multi-select-select-all-divider-color, var(--md-sys-color-outline-variant, #cac4d0))}md-menu::part(empty-text){display:block;padding:var(--md-multi-select-empty-padding, var(--md-sys-spacing-inset-md, 12px) var(--md-sys-spacing-inset-lg, 16px));color:var(--md-multi-select-empty-color, var(--md-sys-color-on-surface-variant));text-align:center}.md-multi-select__option-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--md-multi-select-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);line-height:1}@media (prefers-reduced-motion: reduce){.md-multi-select__caret,.md-multi-select__clear{transition:none}}@media (forced-colors: active){.md-multi-select__caret{color:CanvasText}.md-multi-select__clear:focus-visible{outline-color:Highlight}}.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}.md-multi-select__vspacer{display:block;flex:none;pointer-events:none}.md-multi-select__search-wrap{position:relative;display:block}.md-multi-select__search{box-sizing:border-box;width:100%;border:none;outline:none;padding:var(--md-multi-select-search-padding, 12px 44px 12px 16px);font:inherit;color:var(--md-multi-select-search-color, var(--md-sys-color-on-surface, #1d1b20));background:var(--md-multi-select-search-bg, var(--md-sys-color-surface-container, #f3edf7));border-bottom:var(--md-multi-select-search-border-width, 1px) solid     var(--md-multi-select-search-border-color, var(--md-sys-color-outline-variant, #cac4d0))}.md-multi-select__search::placeholder{color:var(--md-multi-select-search-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f))}.md-multi-select__search-spinner{position:absolute;inset-block-start:50%;inset-inline-end:12px;margin-block-start:-12px;--md-loading-indicator-size:var(--md-multi-select-search-spinner-size, 24px);--md-loading-indicator-shape-size:18px;pointer-events:none}: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 M=0;const O=200;const S=180;const T=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdChange=e(this,"mdChange",7);this.mdOpen=e(this,"mdOpen",7);this.mdClose=e(this,"mdClose",7);this.mdRemove=e(this,"mdRemove",7);this.mdClear=e(this,"mdClear",7);this.mdValidityChange=e(this,"mdValidityChange",5);this.internals=this.attachInternals();this.valueMissingLabel="Please select at least one option";this.reserveSupportingSpace=false;this.customValidityMessage="";this.variant="outlined";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.virtualize="auto";this.filterable=false;this.filterMode="substring";this.value=[];this.maxSelected=0;this.showSelectAll=false;this.selectAllLabel="Select all";this.placement="bottom-start";this.matchTriggerWidth=true;this.displayMode="chips";this.chipOverflow="count";this.chipPosition="bottom";this.trigger="field";this.triggerIcon="add";this.triggerLabel="";this.searchPlaceholder="Search…";this.filterLabel="";this.noResultsText="No results";this.noOptionsText="No options";this.searchingLabel="Searching";this.loadingText="Loading…";this.loading=false;this.clearable=false;this.clearIcon="close";this.clearLabel="Clear selection";this.dropdownIcon="arrow_drop_down";this.name="";this.open=false;this.optionsData=[];this.triggerId=`md-multi-select-${++M}`;this.hasTriggerLeading=false;this.hasTriggerTrailing=false;this.liveMessage="";this.hasSlottedTrigger=false;this.query="";this.inlineVisibleCount=Number.POSITIVE_INFINITY;this.inlineOverflowCount=0;this.wiredTrigger=null;this._needsReposition=false;this._focusChipAfterRender=null;this.vc=new o({queryItem:t=>this.el.shadowRoot?.querySelector(`md-menu-item[data-vindex="${t}"]`)??null,requestRender:()=>s(this)});this.providerSet=false;this.selectedLabelMap=new Map;this.searching=false;this.queryText=null;this.defaultValue=[];this.onTriggerSlotChange=()=>{this.computeSlottedTrigger();this.wireSlottedTrigger()};this.lastValidityKey=null;this.loadSeq=0;this._syncGuard=false;this._lastEmit=null;this.toggleOpen=()=>{if(this.isDisabled)return;this.open=!this.open};this.isSelected=t=>this.value.includes(t);this.toggleValue=(t,i)=>{i?.stopPropagation();if(this.isDisabled)return;const e=this.isSelected(t);const s=!e&&this.maxSelected>0&&this.value.length>=this.maxSelected;if(s){const t=i?.target;if(t)t.selected=false;return}const l=e?this.value.filter((i=>i!==t)):[...this.value,t];this.value=l;this.mdChange.emit([...l])};this.removeValue=t=>i=>{i.stopPropagation();if("preventDefault"in i)i.preventDefault();if(this.isDisabled||!this.isSelected(t))return;const e=this.selectedOptions().findIndex((i=>i.value===t));this.value=this.value.filter((i=>i!==t));this.mdRemove.emit(t);this.mdChange.emit([...this.value]);const s=this.selectedOptions().length;this._focusChipAfterRender=s===0?"trigger":Math.min(e,s-1)};this.clearValue=t=>{t.stopPropagation();if(this.isDisabled||this.value.length===0)return;this.value=[];this.mdChange.emit([]);this.mdClear.emit();this.fieldEl?.focus?.()};this.toggleSelectAll=t=>{t?.stopPropagation();if(this.isDisabled)return;const i=this.optionsData.filter((t=>!t.disabled)).map((t=>t.value));const e=i.length>0&&i.every((t=>this.value.includes(t)));this.value=e?[]:i.slice(0,this.maxSelected>0?this.maxSelected:undefined);this.mdChange.emit([...this.value]);const s=t?.target;if(s){const t=i.length>0&&i.every((t=>this.value.includes(t)));s.selected=t;s.indeterminate=!t&&i.some((t=>this.value.includes(t)))}};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.wireViewport()}if(this.filterable){requestAnimationFrame((()=>{const t=this.el.shadowRoot?.querySelector(".md-multi-select__search");t?.focus();void this.menuEl?.setComboboxElement?.(t)}))}};this.handleMenuClose=()=>{this._syncGuard=true;this.open=false;this._syncGuard=false;if(this._lastEmit!=="close"){this._lastEmit="close";this.mdClose.emit()}void this.menuEl?.setComboboxElement?.(null);this.vc.detachViewport();this.vpWired=false;if(this.query){this.query="";const t=this.el.shadowRoot?.querySelector(".md-multi-select__search");if(t)t.value=""}};this.onSearchInput=t=>{const i=t.target.value;this.queryText=null;if(!this.vc.active){this.query=i;return}if(!this.searching){this.searching=true;s(this)}clearTimeout(this.searchDebounce);this.searchDebounce=setTimeout((()=>{this.vc.setQuery(i);this.searching=false;s(this)}),S)};this.renderValueChip=t=>l("md-chip",{key:t.value,part:"chip",exportparts:"remove:chip-remove,label:chip-label",variant:"input",selectable:false,label:t.label,disabled:this.isDisabled,removable:!this.isDisabled,onMdRemove:this.removeValue(t.value),onClick:t=>t.stopPropagation()});this.recomputeInlineOverflow=()=>{if(this.trigger!=="field"||this.displayMode!=="chips-inline"||this.chipOverflow!=="count")return;const t=this.inlineDisplayEl;const i=this.inlineMeasureEl;const e=this.selectedOptions().length;if(!t||!i||e===0)return;const s=t.clientWidth;if(s<=0)return;const l=getComputedStyle(i).columnGap||getComputedStyle(i).gap;const r=parseFloat(l)||4;const a=Array.from(i.querySelectorAll("md-chip"));const n=a.slice(0,e).map((t=>t.getBoundingClientRect().width));if(n.some((t=>t<=0)))return;const o=i.querySelector(".md-multi-select__overflow-chip");const c=o?o.getBoundingClientRect().width:44;let h=0;for(let t=0;t<e;t++)h+=n[t]+(t>0?r:0);let d;if(h<=s+.5){d=e}else{const t=s-c-r;let i=0;d=0;for(let s=0;s<e;s++){const e=n[s]+(s>0?r:0);if(i+e<=t){i+=e;d++}else break}}if(d!==this.inlineVisibleCount||e-d!==this.inlineOverflowCount){this.inlineVisibleCount=d;this.inlineOverflowCount=e-d}}}get optionList(){return b(this.options,"md-multi-select","options")}get isDisabled(){return this.disabled||this.softDisabled}async show(){if(this.isDisabled)return;this.open=true}async close(){this.open=false}async focusTrigger(){this.fieldEl?.focus?.()}async reset(){if(this.value.length===0)return;this.value=[];this.mdChange.emit([])}async loadOptions(t){if(this.virtualize==="never"||!c()){this.loadSeq++;this.vc.reset();this.optionsData=h(d(t));return}const i=++this.loadSeq;this.optionsData=[];this.vc.setFixedRowHeight(this.rowHeight);this.vc.setFilterMode(this.filterMode);const e=await this.vc.load(t);if(i!==this.loadSeq)return;if(!e){this.vc.reset();this.optionsData=h(d(t))}else{this.updateSelectedLabels()}s(this)}async setQuery(t){this.vc.setQuery(t);if(!this.vc.active)this.query=t;this.queryText=t;this.syncSearchField();s(this)}syncSearchField(){if(this.queryText===null)return;const t=this.el.shadowRoot?.querySelector(".md-multi-select__search");if(!t)return;t.value=this.queryText;this.queryText=null}async getLabels(t){return Object.fromEntries(this.vc.getLabels(t))}componentDidLoad(){this.wireSlottedTrigger();if(this.open&&!this.isDisabled){this.menuEl?.show?.({autoFocus:false})}if(typeof ResizeObserver!=="undefined"&&this.frameEl){this._frameRO=new ResizeObserver((()=>{if(this.open)void this.menuEl?.reposition?.()}));this._frameRO.observe(this.frameEl)}}componentWillLoad(){this.refreshOptions();if(this.value.length===0){const t=this.optionsData.filter((t=>t.selected&&!t.disabled)).map((t=>t.value));if(t.length)this.value=t}this.defaultValue=[...this.value];this.syncFormValue();this.hasTriggerLeading=!!this.el.querySelector('[slot="trigger-leading"]');this.hasTriggerTrailing=!!this.el.querySelector('[slot="trigger-trailing"]');this.computeSlottedTrigger()}computeSlottedTrigger(){this.hasSlottedTrigger=this.el.querySelector('[slot="trigger"]')!==null}wireSlottedTrigger(){const t=this.el.querySelector('[slot="trigger"]');if(!t){this.wiredTrigger?.removeEventListener("click",this.toggleOpen);this.wiredTrigger=null;return}if(t!==this.wiredTrigger){this.wiredTrigger?.removeEventListener("click",this.toggleOpen);t.addEventListener("click",this.toggleOpen);this.wiredTrigger=t}if(!t.id)t.id=this.triggerId;else if(t.id!==this.triggerId)this.triggerId=t.id;t.setAttribute("aria-haspopup","listbox");this.fieldEl=t}formResetCallback(){this.value=[...this.defaultValue]}syncFormValue(){this.updateSelectedLabels();this.updateValidity();this.liveMessage=this.value.length?`${this.value.length} selected`:"None selected";this._needsReposition=true;if(!this.value.length){u(this.internals,null);return}const t=new FormData;const i=this.name||"";for(const e of this.value)t.append(i,e);u(this.internals,t)}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.value.length===0){this.internals.setValidity({valueMissing:true},this.errorText||this.valueMissingLabel,this.fieldEl??this.el)}else{this.internals.setValidity({})}this.emitValidityChange()}async getValidity(){return p(this.internals)}emitValidityChange(){const t=p(this.internals);const i=`${t.valid}|${t.validationMessage}`;if(this.lastValidityKey===i)return;const e=this.lastValidityKey!==null;this.lastValidityKey=i;if(e)this.mdValidityChange.emit(t)}async checkValidity(){return f(this.internals)}async reportValidity(){return g(this.internals)}async setCustomValidity(t){this.customValidityMessage=t;this.updateValidity()}refreshOptions(){const t=m(this.el,this.optionList);const i=this.virtualize==="always"||this.virtualize==="auto"&&t.length>O;if(i&&c()&&t.length>0){const i=++this.loadSeq;this.optionsData=[];this.vc.setFixedRowHeight(this.rowHeight);this.vc.setFilterMode(this.filterMode);void this.vc.load(t).then((e=>{if(i!==this.loadSeq)return;if(!e){this.optionsData=t;s(this)}else{this.updateSelectedLabels()}}))}else{this.loadSeq++;this.vc.reset();this.optionsData=t}}updateSelectedLabels(){if(this.vc.active&&this.value.length){this.selectedLabelMap=this.vc.getLabels(this.value)}else{this.selectedLabelMap=new Map}s(this)}onOptionChange(t){t.stopPropagation();this.refreshOptions()}syncMenu(t){if(this._syncGuard||!this.menuEl)return;if(t)this.menuEl.show?.({autoFocus:!this.filterable});else this.menuEl.close?.()}handleKeyDown(t){if(this.isDisabled)return;if(!this.open&&(t.key==="ArrowDown"||t.key==="ArrowUp"||t.key==="Enter"||t.key===" ")){t.preventDefault();this.open=true}else if(this.open&&t.key==="Escape"){t.preventDefault();this.open=false;this.fieldEl?.focus?.()}}wireViewport(){void(async()=>{const t=await(this.menuEl?.getScrollViewport?.())??null;if(!t||this.vpWired)return;this.vpWired=true;await this.vc.attachViewport((async()=>t))})()}componentDidRender(){this.syncSearchField();if(!this.menuEl)return;if(this.vc.active&&!this.providerSet){void this.menuEl.setVirtualProvider?.(this.vc.provider);this.providerSet=true;if(this.open&&this.filterable){const t=this.el.shadowRoot?.querySelector(".md-multi-select__search");void this.menuEl?.setComboboxElement?.(t)}}else if(!this.vc.active&&this.providerSet){void this.menuEl.setVirtualProvider?.(null);this.providerSet=false}if(this.open&&this.vc.active&&!this.vpWired)this.wireViewport();if(this._needsReposition){this._needsReposition=false;if(this.open)requestAnimationFrame((()=>void this.menuEl?.reposition?.()))}if(this._focusChipAfterRender!==null){const t=this._focusChipAfterRender;this._focusChipAfterRender=null;requestAnimationFrame((()=>{if(t==="trigger"){this.fieldEl?.focus?.();return}const i=this.el.shadowRoot?.querySelectorAll(".md-multi-select__chips md-chip, .md-multi-select__inline-chips > md-chip");const e=i?.[t];const s=e?.shadowRoot?.querySelector('[part="remove"]');(s??e??this.fieldEl)?.focus?.()}))}if(this.trigger==="field"&&this.displayMode==="chips-inline"&&this.chipOverflow==="count"){if(typeof ResizeObserver!=="undefined"){if(!this._inlineRO)this._inlineRO=new ResizeObserver(this.recomputeInlineOverflow);this._inlineRO.disconnect();if(this.inlineDisplayEl)this._inlineRO.observe(this.inlineDisplayEl);if(this.inlineMeasureEl)this._inlineRO.observe(this.inlineMeasureEl)}requestAnimationFrame(this.recomputeInlineOverflow)}else{this._inlineRO?.disconnect()}}disconnectedCallback(){this.wiredTrigger?.removeEventListener("click",this.toggleOpen);this.wiredTrigger=null;clearTimeout(this.searchDebounce);this.vc.detachViewport();this._frameRO?.disconnect();this._frameRO=undefined;this._inlineRO?.disconnect();this._inlineRO=undefined}selectedOptions(){if(this.vc.active){return this.value.map((t=>({value:t,label:this.selectedLabelMap.get(t)??t,disabled:false})))}return this.value.map((t=>this.optionsData.find((i=>i.value===t)))).filter((t=>!!t))}countText(){const t=this.value.length;if(t===0)return"";return this.countFormatter?this.countFormatter(t):`${t} selected`}renderTrigger(){return[l("slot",{name:"trigger",onSlotchange:this.onTriggerSlotChange}),this.hasSlottedTrigger?this.renderTriggerMessage():this.trigger==="button"?this.renderButtonTrigger():this.renderFieldTrigger()]}renderFieldTrigger(){const t=this.selectedOptions();const i=t.length>0;const e=this.displayMode==="chips-inline";const s=e?"":this.displayMode==="text"&&i?t.map((t=>t.label)).join(", "):i?this.countText():"";return l("md-text-field",{ref:t=>this.fieldEl=t,id:this.triggerId,class:"md-multi-select__field",part:"field",exportparts:"container:field-container,input:field-input,label:field-label",variant:this.variant,label:this.label,placeholder:i?"":this.placeholder,value:s,readOnly:true,disabled:this.disabled,error:this.error,errorText:this.errorText,reserveSupportingSpace:this.reserveSupportingSpace,supportingText:this.supportingText,required:this.required,density:this.chipPosition==="left"||this.chipPosition==="right"?-3:this.density,appearFocused:this.open,chipsWrap:e&&this.chipOverflow==="wrap",onClick:this.toggleOpen},this.hasTriggerLeading&&l("slot",{name:"trigger-leading",slot:"leading-icon"}),e&&this.renderInlineChips(),this.hasTriggerTrailing&&l("slot",{name:"trigger-trailing",slot:"trailing-icon"}),this.loading?l("span",{slot:"trailing-icon",class:"md-multi-select__loader",part:"loading-spinner"},l("slot",{name:"loader"},l(n,{label:this.loadingText}))):[this.clearable&&i&&!this.isDisabled&&l("button",{type:"button",slot:"trailing-icon",class:"md-multi-select__clear",part:"clear","aria-label":this.clearLabel,onClick:this.clearValue},l("span",{class:"material-symbols-outlined","aria-hidden":"true"},this.clearIcon)),l("span",{slot:"trailing-icon",class:"md-multi-select__caret-box",part:"caret-box","aria-hidden":"true"},l("span",{class:"md-multi-select__caret material-symbols-outlined",part:"caret"},l("slot",{name:"dropdown-icon"},this.dropdownIcon)))])}renderButtonTrigger(){const t=this.error&&this.errorText?this.errorText:this.supportingText;const i=t?`${this.triggerId}-desc`:undefined;return[l("md-button",{ref:t=>this.fieldEl=t,id:this.triggerId,class:"md-multi-select__button",part:"field button",variant:"outlined",size:"xs",icon:this.triggerIcon,loading:this.loading,disabled:this.isDisabled,"aria-haspopup":"listbox","aria-expanded":String(this.open),"aria-controls":this.listboxRendered?`${this.triggerId}-listbox`:undefined,"aria-invalid":this.error?"true":undefined,"aria-describedby":i,onMdClick:this.toggleOpen},this.triggerLabel||this.label),this.renderTriggerMessage()]}renderTriggerMessage(){const t=this.error&&this.errorText?this.errorText:this.supportingText;if(!t)return null;return l("div",{id:this.hasSlottedTrigger?undefined:`${this.triggerId}-desc`,class:{"md-multi-select__button-desc":true,"md-multi-select__button-desc--error":this.error&&!!this.errorText},part:"button-desc",role:this.error?"alert":undefined},t)}get listboxRendered(){return this.open&&!this.loading&&(this.vc.active||this.optionsData.length>0)}renderInlineChips(){const t=this.selectedOptions();if(t.length===0)return null;const i=this.chipOverflow==="wrap";const e=i?t.length:Math.min(t.length,this.inlineVisibleCount);const s=i?0:t.length-e;return l("div",{slot:"chips",class:{"md-multi-select__inline-chips":true,"md-multi-select__inline-chips--wrap":i},part:"chips",role:"group","aria-label":this.label?`${this.label} — selected`:"Selected",ref:t=>this.inlineDisplayEl=t},t.slice(0,e).map(this.renderValueChip),s>0&&l("button",{type:"button",class:"md-multi-select__overflow-chip",part:"overflow-chip","aria-label":`${s} more selected — open to manage`,onClick:t=>{t.stopPropagation();this.toggleOpen()}},"+",s))}renderInlineMeasure(){if(this.trigger!=="field"||this.displayMode!=="chips-inline"||this.chipOverflow!=="count")return null;const t=this.selectedOptions();if(t.length===0)return null;return l("div",{class:"md-multi-select__measure-clip","aria-hidden":"true"},l("div",{class:"md-multi-select__inline-measure",ref:t=>this.inlineMeasureEl=t},t.map(this.renderValueChip),l("span",{class:"md-multi-select__overflow-chip"},"+",t.length)))}renderChips(){if(this.trigger!=="button"&&!this.hasSlottedTrigger&&this.displayMode!=="chips")return null;const t=this.selectedOptions();if(t.length===0)return null;return l("div",{class:"md-multi-select__chips",part:"chips",role:"group","aria-label":this.label?`${this.label} — selected`:"Selected"},t.map((t=>l("md-chip",{key:t.value,part:"chip",exportparts:"remove:chip-remove,label:chip-label",variant:"input",selectable:false,label:t.label,disabled:this.isDisabled,removable:!this.isDisabled,onMdRemove:this.removeValue(t.value),onClick:t=>t.stopPropagation()}))))}renderVirtualOptions(){return l("div",{class:"md-multi-select__listbox",part:"listbox",role:"listbox",id:`${this.triggerId}-listbox`,"aria-multiselectable":"true","aria-label":this.label||"Options"},l("div",{class:"md-multi-select__vspacer",style:{height:`${this.vc.topPad}px`},"aria-hidden":"true"}),this.vc.windowRows.map(((t,i)=>{const e=this.vc.windowStart+i;const s=this.isSelected(t.value);return l("md-menu-item",{key:t.index,id:`${this.triggerId}-opt-${e}`,"data-vindex":e,presentation:"option",type:"checkbox","check-position":"start","keep-open":true,part:s?"option option-selected":"option",disabled:t.disabled,selected:s,headline:t.label,"supporting-text":t.supportingText||"","aria-setsize":this.vc.filteredLength,"aria-posinset":e+1,onMdClick:i=>this.toggleValue(t.value,i)},t.icon?l("span",{slot:"leading-icon",part:"option-icon",class:"material-symbols-outlined md-multi-select__option-icon","aria-hidden":"true"},t.icon):null)})),l("div",{class:"md-multi-select__vspacer",style:{height:`${this.vc.bottomPad}px`},"aria-hidden":"true"}))}renderEmpty(t,i){return l("div",{class:"md-multi-select__empty",part:"empty",role:"status"},l("slot",{name:t},i))}renderMenu(){const t=this.vc.active;const i=this.optionsData.filter((t=>!t.disabled));const e=i.length>0&&i.every((t=>this.value.includes(t.value)));const s=!e&&i.some((t=>this.value.includes(t.value)));const r=this.filterable&&!t?this.query.trim().toLowerCase():"";const a=r?this.optionsData.filter((t=>t.label.toLowerCase().includes(r)||(t.supportingText||"").toLowerCase().includes(r))):this.optionsData;const o=!this.loading&&(t&&this.vc.filteredLength===0||!t&&!!r&&a.length===0);const c=!this.loading&&!t&&!r&&this.optionsData.length===0;const h=t?this.maxHeight??320:this.maxHeight;return l("md-menu",{ref:t=>this.menuEl=t,anchor:this.triggerId,placement:this.placement,"match-anchor-width":this.matchTriggerWidth,"max-height":h,"auto-focus":!this.filterable,"empty-text":"",listbox:true,"list-label":this.label||"Options",part:"menu",exportparts:"surface:menu-surface,empty-text",onMdOpen:this.handleMenuOpen,onMdClose:this.handleMenuClose},l("div",{slot:"header",part:"menu-header",class:"md-multi-select__menu-header"},l("slot",{name:"menu-header"})),this.filterable&&!this.loading&&l("div",{slot:"header",class:"md-multi-select__search-wrap",part:"search-wrap"},l("input",{class:"md-multi-select__search",part:"search",type:"text",role:"combobox","aria-haspopup":"listbox","aria-expanded":String(this.open),"aria-controls":`${this.triggerId}-listbox`,"aria-autocomplete":"list",autocomplete:"off",placeholder:this.searchPlaceholder,"aria-label":this.filterLabel||(this.label?`Filter ${this.label}`:"Filter options"),onInput:this.onSearchInput,onClick:t=>t.stopPropagation()}),this.searching&&l(n,{class:"md-multi-select__search-spinner",part:"search-spinner",label:this.searchingLabel,"aria-hidden":"true"})),this.showSelectAll&&!t&&!this.loading&&this.optionsData.length>0&&l("div",{slot:"header",class:"md-multi-select__select-all",part:"select-all"},l("md-menu-item",{type:"checkbox","check-position":"start",part:"select-all-item","role-override":"checkbox","keep-open":true,headline:this.selectAllLabel,selected:e,indeterminate:s,disabled:this.isDisabled,onMdClick:t=>this.toggleSelectAll(t)})),this.loading?l("div",{class:"md-multi-select__loading",part:"loading-bar",role:"status","aria-label":this.loadingText},l("slot",{name:"menu-loader"},l("md-progress-indicator",{variant:"linear",indeterminate:true,wave:true,part:"loading-progress",label:this.loadingText}))):t?[this.renderVirtualOptions(),o?this.renderEmpty("no-results",this.noResultsText):null]:c?this.renderEmpty("no-options",this.noOptionsText):[l("div",{class:"md-multi-select__listbox",part:"listbox",role:"listbox",id:`${this.triggerId}-listbox`,"aria-multiselectable":"true","aria-label":this.label||"Options"},a.map(((t,i)=>{const e=this.isSelected(t.value);return l("md-menu-item",{key:t.value,id:`${this.triggerId}-opt-${i}`,presentation:"option",type:"checkbox","check-position":"start","keep-open":true,part:e?"option option-selected":"option",disabled:t.disabled,selected:e,headline:t.label,"supporting-text":t.supportingText||"",onMdClick:i=>this.toggleValue(t.value,i)},t.icon?l("span",{slot:"leading-icon",part:"option-icon",class:"material-symbols-outlined md-multi-select__option-icon",style:t.iconColor?{color:t.iconColor}:undefined,"aria-hidden":"true"},t.icon):null)}))),o?this.renderEmpty("no-results",this.noResultsText):null])}render(){return l(r,{key:"9fe3cdfe669524760d977efe2714ebcf4f19a59c",class:{"md-multi-select":true,[`md-multi-select--${this.variant}`]:true,"md-multi-select--open":this.open,"md-multi-select--disabled":this.disabled,"md-multi-select--soft-disabled":this.softDisabled,"md-multi-select--loading":this.loading,[`md-multi-select--display-${this.displayMode}`]:true,"md-multi-select--button":this.trigger==="button"&&!this.hasSlottedTrigger,"md-multi-select--slotted-trigger":this.hasSlottedTrigger,[`md-multi-select--chips-${this.chipPosition}`]:this.trigger==="button"||this.hasSlottedTrigger||this.displayMode==="chips"},"aria-haspopup":"listbox","aria-busy":this.loading?"true":undefined},l("div",{key:"7b1b2aecd1ac12d5645e779daa2973d60c00d678",class:"md-multi-select__frame",part:"frame",ref:t=>this.frameEl=t},this.renderTrigger(),this.renderChips()),this.renderInlineMeasure(),this.renderMenu(),l("div",{key:"18d8e66db39168d0f4d336220c09dab3615460aa",class:"md-multi-select__sr-live",part:"live-region",role:"status","aria-live":"polite","aria-atomic":"true"},this.liveMessage),l("div",{key:"0b01ad6bdeb5d95c6d035bc739ac83094f0e6e57",class:"md-multi-select__options",hidden:true},l("slot",{key:"e4bbb120ffdaf6307976dffa41227e97a8b834d0",onSlotchange:()=>this.refreshOptions()})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],required:[{updateValidity:0}],valueMissingLabel:[{updateValidity:0}],options:[{refreshOptions:0}],open:[{syncMenu:0}]}}static get style(){return C()}},[321,"md-multi-select",{valueMissingLabel:[1,"value-missing-label"],reserveSupportingSpace:[4,"reserve-supporting-space"],variant:[513],label:[1],placeholder:[1],supportingText:[1,"supporting-text"],error:[516],errorText:[1,"error-text"],disabled:[516],softDisabled:[516,"soft-disabled"],required:[516],density:[514],options:[1],virtualize:[1],filterable:[4],filterMode:[1,"filter-mode"],rowHeight:[2,"row-height"],value:[1040],maxSelected:[2,"max-selected"],showSelectAll:[516,"show-select-all"],selectAllLabel:[1,"select-all-label"],placement:[1],maxHeight:[2,"max-height"],matchTriggerWidth:[516,"match-trigger-width"],displayMode:[513,"display-mode"],chipOverflow:[513,"chip-overflow"],chipPosition:[513,"chip-position"],trigger:[513],triggerIcon:[1,"trigger-icon"],triggerLabel:[1,"trigger-label"],countFormatter:[16],searchPlaceholder:[1,"search-placeholder"],filterLabel:[1,"filter-label"],noResultsText:[1,"no-results-text"],noOptionsText:[1,"no-options-text"],searchingLabel:[1,"searching-label"],loadingText:[1,"loading-text"],loading:[516],clearable:[516],clearIcon:[1,"clear-icon"],clearLabel:[1,"clear-label"],dropdownIcon:[1,"dropdown-icon"],name:[513],open:[1540],optionsData:[32],triggerId:[32],hasTriggerLeading:[32],hasTriggerTrailing:[32],liveMessage:[32],hasSlottedTrigger:[32],query:[32],inlineVisibleCount:[32],inlineOverflowCount:[32],show:[64],close:[64],focusTrigger:[64],reset:[64],loadOptions:[64],setQuery:[64],getLabels:[64],getValidity:[64],checkValidity:[64],reportValidity:[64],setCustomValidity:[64]},[[0,"mdSelectOptionChange","onOptionChange"],[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],required:[{updateValidity:0}],valueMissingLabel:[{updateValidity:0}],options:[{refreshOptions:0}],open:[{syncMenu:0}]}]);function $(){if(typeof customElements==="undefined"){return}const t=["md-multi-select","md-button","md-chip","md-menu","md-menu-item","md-progress-indicator","md-ripple","md-text-field"];t.forEach((t=>{switch(t){case"md-multi-select":if(!customElements.get(a(t))){customElements.define(a(t),T)}break;case"md-button":if(!customElements.get(a(t))){v()}break;case"md-chip":if(!customElements.get(a(t))){_()}break;case"md-menu":if(!customElements.get(a(t))){y()}break;case"md-menu-item":if(!customElements.get(a(t))){x()}break;case"md-progress-indicator":if(!customElements.get(a(t))){w()}break;case"md-ripple":if(!customElements.get(a(t))){k()}break;case"md-text-field":if(!customElements.get(a(t))){z()}break}}))}$();const V=T;const j=$;export{V as MdMultiSelect,j as defineCustomElement};
+//# sourceMappingURL=md-multi-select.js.map