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

package/dist/components/p-zMR3UIR_.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdIconButtonCss","MdIconButton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","shape","buttonWidth","disabled","softDisabled","toggle","selected","shapeMorph","ripple","icon","selectedIcon","href","target","connectedLeft","connectedRight","value","groupTabindex","density","hasSlottedIcon","hasSlottedBadge","hasSlottedSelected","pressed","handleClick","e","isDisabled","preventDefault","sanitizeHref","window","open","SAFE_WINDOW_FEATURES","mdClick","emit","handleKeyDown","key","triggerRipple","el","click","setTimeout","handlePointerDown","handlePointerUp","componentWillLoad","syncSlottedIcons","componentDidLoad","shadow","shadowRoot","iconSlot","querySelector","selectedSlot","addEventListener","hasMeaningfulSlotContent","slot","assignedNodes","some","node","nodeType","Node","ELEMENT_NODE","tagName","toLowerCase","TEXT_NODE","textContent","trim","length","assignedElements","render","isEffectivelyDisabled","showSelected","hasIcon","showDefaultIconLayer","h","Host","class","role","String","undefined","tabindex","onClick","onKeyDown","onPointerDown","onPointerUp","onPointerLeave","onPointerCancel","part","name"],"sources":["src/components/md-icon-button/md-icon-button.css?tag=md-icon-button&encapsulation=shadow","src/components/md-icon-button/md-icon-button.tsx"],"sourcesContent":["/* ==========================================================\n   md-icon-button — Material Design 3 Icon Button\n   Spec: https://m3.material.io/components/icon-buttons/specs\n   Supports M3 + M3 Expressive (size, shape, width)\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-icon-button-container-color    Container background\n     --md-icon-button-icon-color         Icon color\n     --md-icon-button-state-layer-color  State-layer ink (hover / focus / press)\n     --md-icon-button-icon-size          Icon dimensions\n     --md-icon-button-container-shape    Border-radius override\n     --md-icon-button-outline-color      Outlined border color\n     --md-icon-button-outline-width      Outlined border width\n     --md-icon-button-container-width    Container width override\n     --md-icon-button-container-height   Container height override\n\n   CSS PARTS:\n     state-layer     State-layer overlay\n     icon            Default icon wrapper\n     selected-icon   Selected icon wrapper (toggle)\n\n   SLOTS:\n     (default)       Custom icon content\n     selected        Custom selected icon (toggle)\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST — shared base\n   ========================================================== */\n:host {\n  --_container-color: var(--md-icon-button-container-color, transparent);\n  --_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_state-layer-color: var(--md-icon-button-state-layer-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_icon-size: var(--md-icon-button-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  --_container-width: var(--md-icon-button-container-width, max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px)));\n  --_container-height: var(--md-icon-button-container-height, max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px)));\n  --_shape-round: 20px;\n  --_border-radius: var(--md-icon-button-container-shape, var(--_shape-round));\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--_container-width);\n  height: var(--_container-height);\n  /* Resting radius is --_border-radius; --_morph-to carries the morphed target\n     and defaults to the resting value. calc(REST + FLAG * (MORPH - REST)) is\n     MORPH at flag 1 and REST at flag 0, so `data-shape-morph=\"off\"` /\n     `shape-morph=\"off\"` (§13 tokens.css) freezes the shape with no re-render. */\n  border-radius: calc(var(--_border-radius) + var(--md-sys-shape-morph-enabled, 1) * (var(--_morph-to, var(--_border-radius)) - var(--_border-radius)));\n  cursor: pointer;\n  user-select: none;\n  border: none;\n  outline: none;\n  overflow: hidden;\n  box-sizing: border-box;\n  background-color: var(--_container-color);\n  color: var(--_icon-color);\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    background-color var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    color var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n/* ==========================================================\n   2. SIZE — M3 Expressive\n   XS (32px) · SM (40px, default) · MD (56px) · LG (96px) · XL (136px)\n   ========================================================== */\n:host(.md-icon-button--xs) {\n  --_container-width: var(--md-icon-button-container-width, max(32px, calc(32px + var(--md-sys-density-scale, 0) * 4px)));\n  --_container-height: var(--md-icon-button-container-height, max(32px, calc(32px + var(--md-sys-density-scale, 0) * 4px)));\n  --_icon-size: var(--md-icon-button-icon-size, max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px)));\n  --_shape-round: 16px;\n}\n:host(.md-icon-button--sm) {\n  --_container-width: var(--md-icon-button-container-width, max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px)));\n  --_container-height: var(--md-icon-button-container-height, max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px)));\n  --_icon-size: var(--md-icon-button-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  --_shape-round: 20px;\n}\n:host(.md-icon-button--md) {\n  --_container-width: var(--md-icon-button-container-width, max(32px, calc(56px + var(--md-sys-density-scale, 0) * 4px)));\n  --_container-height: var(--md-icon-button-container-height, max(32px, calc(56px + var(--md-sys-density-scale, 0) * 4px)));\n  --_icon-size: var(--md-icon-button-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  --_shape-round: 28px;\n}\n:host(.md-icon-button--lg) {\n  --_container-width: var(--md-icon-button-container-width, max(32px, calc(96px + var(--md-sys-density-scale, 0) * 4px)));\n  --_container-height: var(--md-icon-button-container-height, max(32px, calc(96px + var(--md-sys-density-scale, 0) * 4px)));\n  --_icon-size: var(--md-icon-button-icon-size, max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));\n  --_shape-round: 48px;\n}\n:host(.md-icon-button--xl) {\n  --_container-width: var(--md-icon-button-container-width, max(32px, calc(136px + var(--md-sys-density-scale, 0) * 4px)));\n  --_container-height: var(--md-icon-button-container-height, max(32px, calc(136px + var(--md-sys-density-scale, 0) * 4px)));\n  --_icon-size: var(--md-icon-button-icon-size, max(28px, calc(40px + var(--md-sys-density-scale, 0) * 3px)));\n  --_shape-round: 68px;\n}\n\n/* ==========================================================\n   3. WIDTH — M3 Expressive\n   Narrow (less horizontal padding) · Default (square) · Wide (more horizontal padding)\n   Width = iconSize + leadingSpace + trailingSpace; height stays unchanged.\n   ========================================================== */\n:host(.md-icon-button--width-narrow.md-icon-button--xs) { --_container-width: var(--md-icon-button-container-width, max(32px, calc(28px + var(--md-sys-density-scale, 0) * 4px))); }\n:host(.md-icon-button--width-narrow.md-icon-button--sm) { --_container-width: var(--md-icon-button-container-width, max(32px, calc(32px + var(--md-sys-density-scale, 0) * 4px))); }\n:host(.md-icon-button--width-narrow.md-icon-button--md) { --_container-width: var(--md-icon-button-container-width, max(32px, calc(48px + var(--md-sys-density-scale, 0) * 4px))); }\n:host(.md-icon-button--width-narrow.md-icon-button--lg) { --_container-width: var(--md-icon-button-container-width, max(32px, calc(64px + var(--md-sys-density-scale, 0) * 4px))); }\n:host(.md-icon-button--width-narrow.md-icon-button--xl) { --_container-width: var(--md-icon-button-container-width, max(32px, calc(104px + var(--md-sys-density-scale, 0) * 4px))); }\n\n:host(.md-icon-button--width-wide.md-icon-button--xs) { --_container-width: var(--md-icon-button-container-width, max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px))); }\n:host(.md-icon-button--width-wide.md-icon-button--sm) { --_container-width: var(--md-icon-button-container-width, max(32px, calc(52px + var(--md-sys-density-scale, 0) * 4px))); }\n:host(.md-icon-button--width-wide.md-icon-button--md) { --_container-width: var(--md-icon-button-container-width, max(32px, calc(72px + var(--md-sys-density-scale, 0) * 4px))); }\n:host(.md-icon-button--width-wide.md-icon-button--lg) { --_container-width: var(--md-icon-button-container-width, max(32px, calc(128px + var(--md-sys-density-scale, 0) * 4px))); }\n:host(.md-icon-button--width-wide.md-icon-button--xl) { --_container-width: var(--md-icon-button-container-width, max(32px, calc(184px + var(--md-sys-density-scale, 0) * 4px))); }\n\n/* ==========================================================\n   4. SHAPE — Round (default) · Square (scaled corner radius)\n   Round uses --_shape-round (height/2 per size) instead of\n   corner-full (9999px) so the browser can smoothly interpolate\n   border-radius transitions between resting and morphed states.\n   ========================================================== */\n:host(.md-icon-button--round) {\n  --_border-radius: var(--md-icon-button-container-shape, var(--_shape-round));\n}\n:host(.md-icon-button--square.md-icon-button--xs) { --_border-radius: var(--md-icon-button-container-shape, var(--md-sys-shape-corner-medium, 12px)); }\n:host(.md-icon-button--square.md-icon-button--sm) { --_border-radius: var(--md-icon-button-container-shape, var(--md-sys-shape-corner-medium, 12px)); }\n:host(.md-icon-button--square.md-icon-button--md) { --_border-radius: var(--md-icon-button-container-shape, var(--md-sys-shape-corner-large, 16px)); }\n:host(.md-icon-button--square.md-icon-button--lg) { --_border-radius: var(--md-icon-button-container-shape, var(--md-sys-shape-corner-extra-large, 28px)); }\n:host(.md-icon-button--square.md-icon-button--xl) { --_border-radius: var(--md-icon-button-container-shape, var(--md-sys-shape-corner-extra-large, 28px)); }\n\n/* ==========================================================\n   5. SHAPE MORPHING — M3 Expressive\n   Uses direct border-radius overrides (not CSS variable changes)\n   for reliable browser-animated transitions.\n\n   Order matters: selected rules FIRST, pressed rules LAST so\n   pressed always wins while the pointer is down.\n\n   Asymmetric timing (both via M3 motion tokens):\n     Release / selected : medium4 (400ms) + emphasized-decelerate\n     Press-in           : short4  (200ms) + standard\n   ========================================================== */\n\n/* ── Selected shape — round resting → square tokens when selected ── */\n:host(.md-icon-button--shape-morph.md-icon-button--round.md-icon-button--selected.md-icon-button--xs) { --_morph-to: var(--md-sys-shape-corner-medium, 12px); }\n:host(.md-icon-button--shape-morph.md-icon-button--round.md-icon-button--selected.md-icon-button--sm) { --_morph-to: var(--md-sys-shape-corner-medium, 12px); }\n:host(.md-icon-button--shape-morph.md-icon-button--round.md-icon-button--selected.md-icon-button--md) { --_morph-to: var(--md-sys-shape-corner-large, 16px); }\n:host(.md-icon-button--shape-morph.md-icon-button--round.md-icon-button--selected.md-icon-button--lg) { --_morph-to: var(--md-sys-shape-corner-extra-large, 28px); }\n:host(.md-icon-button--shape-morph.md-icon-button--round.md-icon-button--selected.md-icon-button--xl) { --_morph-to: var(--md-sys-shape-corner-extra-large, 28px); }\n\n/* ── Selected shape — square resting → round when selected ── */\n:host(.md-icon-button--shape-morph.md-icon-button--square.md-icon-button--selected) { --_morph-to: var(--_shape-round); }\n\n/* ── Pressed shape — same for both round & square, overrides selected ── */\n:host(.md-icon-button--pressed.md-icon-button--xs) {\n  --_morph-to: var(--md-sys-shape-corner-small, 8px);\n  transition-duration: var(--md-sys-motion-duration-short4, 200ms);\n  transition-timing-function: var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n:host(.md-icon-button--pressed.md-icon-button--sm) {\n  --_morph-to: var(--md-sys-shape-corner-small, 8px);\n  transition-duration: var(--md-sys-motion-duration-short4, 200ms);\n  transition-timing-function: var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n:host(.md-icon-button--pressed.md-icon-button--md) {\n  --_morph-to: var(--md-sys-shape-corner-medium, 12px);\n  transition-duration: var(--md-sys-motion-duration-short4, 200ms);\n  transition-timing-function: var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n:host(.md-icon-button--pressed.md-icon-button--lg) {\n  --_morph-to: var(--md-sys-shape-corner-large, 16px);\n  transition-duration: var(--md-sys-motion-duration-short4, 200ms);\n  transition-timing-function: var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n:host(.md-icon-button--pressed.md-icon-button--xl) {\n  --_morph-to: var(--md-sys-shape-corner-large, 16px);\n  transition-duration: var(--md-sys-motion-duration-short4, 200ms);\n  transition-timing-function: var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* ── Narrow pressed — slightly longer duration for smaller surface area ── */\n:host(.md-icon-button--width-narrow.md-icon-button--pressed) {\n  transition-duration: var(--md-sys-motion-duration-medium1, 250ms);\n}\n\n/* ==========================================================\n   5b. CONNECTED GROUP — per-corner border-radius\n   Set by md-button-group when variant=\"connected\".\n   shapeMorph is disabled for connected children so these rules\n   only need to beat the base shape rules (section 4, specificity 0-1-0).\n   ========================================================== */\n\n:host(.md-icon-button--connected-left.md-icon-button--xs),\n:host(.md-icon-button--connected-right.md-icon-button--xs) { --_c-inner: 4px; }\n:host(.md-icon-button--connected-left.md-icon-button--sm),\n:host(.md-icon-button--connected-right.md-icon-button--sm) { --_c-inner: 8px; }\n:host(.md-icon-button--connected-left.md-icon-button--md),\n:host(.md-icon-button--connected-right.md-icon-button--md) { --_c-inner: 8px; }\n:host(.md-icon-button--connected-left.md-icon-button--lg),\n:host(.md-icon-button--connected-right.md-icon-button--lg) { --_c-inner: 16px; }\n:host(.md-icon-button--connected-left.md-icon-button--xl),\n:host(.md-icon-button--connected-right.md-icon-button--xl) { --_c-inner: 20px; }\n\n/* Middle button — all corners inner */\n:host(.md-icon-button--connected-left.md-icon-button--connected-right) {\n  border-radius: var(--_c-inner);\n}\n\n/* `connected-left` / `connected-right` reflect DOM-order siblings (set by\n   md-button-group when a previous / next sibling exists), so the radii\n   here must use logical corner properties to flip correctly under\n   `dir=\"rtl\"`. The outer pill always lives on the free inline-start\n   (first child) or inline-end (last child) edge. */\n\n/* First button (round) — pill on inline-start edge, inner on inline-end edge */\n:host(.md-icon-button--round.md-icon-button--connected-right:not(.md-icon-button--connected-left)) {\n  border-start-start-radius: var(--_shape-round);\n  border-end-start-radius: var(--_shape-round);\n  border-start-end-radius: var(--_c-inner);\n  border-end-end-radius: var(--_c-inner);\n}\n\n/* Last button (round) — inner on inline-start edge, pill on inline-end edge */\n:host(.md-icon-button--round.md-icon-button--connected-left:not(.md-icon-button--connected-right)) {\n  border-start-start-radius: var(--_c-inner);\n  border-end-start-radius: var(--_c-inner);\n  border-start-end-radius: var(--_shape-round);\n  border-end-end-radius: var(--_shape-round);\n}\n\n/* Square first / last — outer equals inner */\n:host(.md-icon-button--square.md-icon-button--connected-right:not(.md-icon-button--connected-left)),\n:host(.md-icon-button--square.md-icon-button--connected-left:not(.md-icon-button--connected-right)) {\n  border-radius: var(--_c-inner);\n}\n\n/* ==========================================================\n   6. COLOR VARIANTS\n   ========================================================== */\n\n/* ── Standard ── */\n:host(.md-icon-button--standard) {\n  --_container-color: var(--md-icon-button-container-color, transparent);\n  --_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_state-layer-color: var(--md-icon-button-state-layer-color, var(--md-sys-color-on-surface-variant, #49454F));\n}\n:host(.md-icon-button--standard.md-icon-button--selected:not(.md-icon-button--disabled)) {\n  --_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-primary, #6750A4));\n  --_state-layer-color: var(--md-icon-button-state-layer-color, var(--md-sys-color-primary, #6750A4));\n}\n\n/* The toggle / selected rules below all carry `:not(.md-icon-button--disabled)`\n   so they drop out when the host becomes disabled. Without it, their higher\n   specificity (3+ classes vs the disabled rules' 2) would override the muted\n   disabled palette and the button would still look enabled. */\n\n/* ── Filled (non-toggle) ── */\n:host(.md-icon-button--filled) {\n  --_container-color: var(--md-icon-button-container-color, var(--md-sys-color-primary, #6750A4));\n  --_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-primary, #FFFFFF));\n  --_state-layer-color: var(--md-icon-button-state-layer-color, var(--md-sys-color-on-primary, #FFFFFF));\n}\n/* Filled toggle unselected */\n:host(.md-icon-button--filled.md-icon-button--toggle:not(.md-icon-button--selected):not(.md-icon-button--disabled)) {\n  --_container-color: var(--md-icon-button-container-color, var(--md-sys-color-surface-container-highest, #E6E0E9));\n  --_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-primary, #6750A4));\n  --_state-layer-color: var(--md-icon-button-state-layer-color, var(--md-sys-color-primary, #6750A4));\n}\n/* Filled toggle selected */\n:host(.md-icon-button--filled.md-icon-button--selected:not(.md-icon-button--disabled)) {\n  --_container-color: var(--md-icon-button-container-color, var(--md-sys-color-primary, #6750A4));\n  --_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-primary, #FFFFFF));\n  --_state-layer-color: var(--md-icon-button-state-layer-color, var(--md-sys-color-on-primary, #FFFFFF));\n}\n\n/* ── Tonal (non-toggle) ── */\n:host(.md-icon-button--tonal) {\n  --_container-color: var(--md-icon-button-container-color, var(--md-sys-color-secondary-container, #E8DEF8));\n  --_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1E192B));\n  --_state-layer-color: var(--md-icon-button-state-layer-color, var(--md-sys-color-on-secondary-container, #1E192B));\n}\n/* Tonal toggle unselected */\n:host(.md-icon-button--tonal.md-icon-button--toggle:not(.md-icon-button--selected):not(.md-icon-button--disabled)) {\n  --_container-color: var(--md-icon-button-container-color, var(--md-sys-color-surface-container-highest, #E6E0E9));\n  --_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_state-layer-color: var(--md-icon-button-state-layer-color, var(--md-sys-color-on-surface-variant, #49454F));\n}\n/* Tonal toggle selected */\n:host(.md-icon-button--tonal.md-icon-button--selected:not(.md-icon-button--disabled)) {\n  --_container-color: var(--md-icon-button-container-color, var(--md-sys-color-secondary-container, #E8DEF8));\n  --_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1E192B));\n  --_state-layer-color: var(--md-icon-button-state-layer-color, var(--md-sys-color-on-secondary-container, #1E192B));\n}\n\n/* ── Outlined ── */\n:host(.md-icon-button--outlined) {\n  --_container-color: var(--md-icon-button-container-color, transparent);\n  --_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_state-layer-color: var(--md-icon-button-state-layer-color, var(--md-sys-color-on-surface-variant, #49454F));\n  border: var(--md-icon-button-outline-width, 1px) solid var(--md-icon-button-outline-color, var(--md-sys-color-outline, #79747E));\n}\n:host(.md-icon-button--outlined.md-icon-button--selected:not(.md-icon-button--disabled)) {\n  --_container-color: var(--md-icon-button-container-color, var(--md-sys-color-inverse-surface, #313033));\n  --_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-inverse-on-surface, #F4EFF4));\n  --_state-layer-color: var(--md-icon-button-state-layer-color, var(--md-sys-color-inverse-on-surface, #F4EFF4));\n  border-color: transparent;\n}\n\n/* ==========================================================\n   7. STATE LAYER\n   ========================================================== */\n.md-icon-button__state-layer {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--_state-layer-color);\n  opacity: 0;\n  transition: opacity var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  pointer-events: none;\n}\n:host(:hover) .md-icon-button__state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n:host(:active) .md-icon-button__state-layer {\n  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);\n}\n:host(:focus-visible) .md-icon-button__state-layer {\n  opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);\n}\n\n/* ==========================================================\n   8. FOCUS RING\n   `z-index: 1` raises the focused button above its siblings so the\n   outline draws on top of any neighbor instead of being clipped —\n   important inside md-button-group, where connected groups have\n   only 2px between buttons and standard groups animate neighbor\n   width on press. The 2px outline-offset is preserved so the ring\n   gets the same breathing room it has on a stand-alone button.\n   ========================================================== */\n:host(:focus-visible) {\n  outline: 3px solid var(--md-sys-color-secondary, #625B71);\n  outline-offset: 2px;\n  z-index: 1;\n}\n\n/* ==========================================================\n   9. DISABLED\n   ========================================================== */\n:host(.md-icon-button--disabled) {\n  cursor: default;\n  pointer-events: none;\n}\n:host([soft-disabled]) {\n  cursor: default;\n  pointer-events: auto;\n}\n:host([soft-disabled]) .md-icon-button__state-layer { display: none; }\n\n/* Disabled colors — standard & outlined */\n:host(.md-icon-button--standard.md-icon-button--disabled),\n:host(.md-icon-button--outlined.md-icon-button--disabled) {\n  --_icon-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n}\n:host(.md-icon-button--outlined.md-icon-button--disabled) {\n  border-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n}\n\n/* Disabled colors — filled & tonal */\n:host(.md-icon-button--filled.md-icon-button--disabled),\n:host(.md-icon-button--tonal.md-icon-button--disabled) {\n  --_container-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n  --_icon-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n}\n\n/* Kill state layers when disabled */\n:host(.md-icon-button--disabled:hover) .md-icon-button__state-layer,\n:host(.md-icon-button--disabled:active) .md-icon-button__state-layer,\n:host(.md-icon-button--disabled:focus-visible) .md-icon-button__state-layer {\n  opacity: 0;\n}\n\n/* ==========================================================\n   10. ICON WRAPPER\n   ========================================================== */\n.md-icon-button__icon {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 1;\n  color: inherit;\n  width: var(--_icon-size);\n  height: var(--_icon-size);\n  /* Collapse whitespace text nodes assigned to the default slot (Lit indentation). */\n  font-size: 0;\n  line-height: 0;\n}\n/* Restore a real glyph size on slotted content so a bare emoji/text node in the\n   default slot renders at icon size (the wrapper's font-size:0 above would\n   otherwise collapse it to invisible). Slotted md-icon elements set their own\n   size, so this only takes effect for text-node content. */\n.md-icon-button__icon slot {\n  font-size: var(--_icon-size);\n  line-height: 1;\n}\n.md-icon-button__icon--on {\n  display: inline-flex;\n}\n\n/* ==========================================================\n   11. ICON FONT (inside shadow)\n   ========================================================== */\n.md-icon-button__icon-font {\n  font-size: var(--_icon-size);\n  width: var(--_icon-size);\n  height: var(--_icon-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n/* A slotted badge anchors OUTSIDE the button's box — it is translated by\n   (50%, -50%) so it straddles the corner. The host's `overflow: hidden` above\n   exists to keep the ripple and state layer inside the rounded shape, but it\n   also clipped the badge into a blob with a bite out of it.\n   Both overlays clip themselves instead (inset: 0 + border-radius: inherit —\n   md-ripple's own host inherits the radius too), so the host can let the badge\n   escape without either leaking past the corners. */\n:host(.md-icon-button--has-badge) {\n  overflow: visible;\n}\n\n:host(.md-icon-button--has-badge) .md-icon-button__state-layer {\n  overflow: hidden;\n}\n\n/* ==========================================================\n   12. SLOTTED ICONS\n   ========================================================== */\n/* NOT badges. A custom property inside ::slotted() resolves in the SLOTTED\n   element's own scope, and md-badge defines its own `--_icon-size` (10px, for\n   its glyph). So `height: var(--_icon-size) !important` here picked up the\n   BADGE's 10px instead of this component's icon size and, being !important,\n   beat the badge's own 16px — squashing every badge slotted onto an icon\n   button / avatar / menu item into a 10px blob. A badge is not an icon; it\n   sizes itself.\n\n   NOT avatars either, for the same reason: an account button is an avatar\n   inside a button, and the avatar's own `size` (or --md-avatar-size) is the\n   whole point. Forcing it to --_icon-size shrank a 32px avatar to the ~19px\n   glyph box. */\n::slotted(*:not(md-badge):not(md-avatar)) {\n  width: var(--_icon-size) !important;\n  height: var(--_icon-size) !important;\n  font-size: var(--_icon-size) !important;\n  color: inherit !important;\n  fill: currentColor !important;\n  /* Center the glyph inside the slot's sized box. Without these four\n     declarations, an inline-text glyph (emoji, icon-font character) sits at\n     the box's text baseline — producing a visible bottom-left offset that\n     gets worse at larger sizes (md / lg / xl). The prop-based\n     `.md-icon-button__icon-font` already centers via the same flex triple +\n     line-height reset; keep them in lockstep so slotted and prop-based icons\n     render identically. */\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  line-height: 1 !important;\n}\n\n/* ==========================================================\n   13. MATERIAL SYMBOLS (icon font inside shadow root)\n   ========================================================== */\n.material-symbols-outlined {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-weight: normal;\n  font-style: normal;\n  font-size: var(--_icon-size, 24px);\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  overflow-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n}\n\n/* ==========================================================\n   14. FORCED COLORS — Windows High Contrast\n   ========================================================== */\n@media (forced-colors: active) {\n  :host {\n    forced-color-adjust: none;\n  }\n  :host(.md-icon-button--outlined) {\n    border-color: ButtonText;\n  }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { triggerRipple } from '../../utils/ripple';\nimport { sanitizeHref, SAFE_WINDOW_FEATURES } from '../../utils/url';\n\n@Component({\n  tag: 'md-icon-button',\n  styleUrl: 'md-icon-button.css',\n  shadow: true,\n})\nexport class MdIconButton {\n  @Element() el!: HTMLElement;\n\n  /** Visual style variant */\n  @Prop() variant: 'standard' | 'filled' | 'outlined' | 'tonal' = 'standard';\n\n  /** M3 Expressive size */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /** Container shape */\n  @Prop() shape: 'round' | 'square' = 'round';\n\n  /** M3 Expressive width (narrow, default, wide) */\n  @Prop() buttonWidth: 'narrow' | 'default' | 'wide' = 'default';\n\n  /** Prevents interaction and removes from tab order */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Visually disabled but remains focusable for discoverability */\n  @Prop({ reflect: true, attribute: 'soft-disabled' }) softDisabled: boolean = false;\n\n  /** Enable toggle behavior (selected/unselected) */\n  @Prop() toggle: boolean = false;\n\n  /** Current selected state (toggle mode) */\n  @Prop({ mutable: true }) selected: boolean = false;\n\n  /** Enable M3 Expressive shape morphing on press and toggle */\n  @Prop() shapeMorph: boolean = true;\n\n  /** Whether to show the ripple effect */\n  @Prop() ripple: boolean = true;\n\n  /** Material Symbols icon name */\n  @Prop() icon: string = '';\n\n  /** Icon shown when selected in toggle mode */\n  @Prop() selectedIcon: string = '';\n\n  /** Turns the button into a link */\n  @Prop() href: string = '';\n\n  /** Link target attribute */\n  @Prop() target: string = '_self';\n\n  /** @internal Set by md-button-group — left side is connected to a neighbor */\n  @Prop({ reflect: true }) connectedLeft: boolean = false;\n\n  /** @internal Set by md-button-group — right side is connected to a neighbor */\n  @Prop({ reflect: true }) connectedRight: boolean = false;\n\n  /** @internal Value for button-group form association */\n  @Prop() value: string = '';\n\n  /**\n   * @internal Roving-tabindex override set by `md-button-group`. When the\n   * button is a child of a group, the group sets this to `0` on the\n   * currently-active button and `-1` on the rest.\n   */\n  @Prop({ mutable: true, reflect: false }) groupTabindex: number | null = null;\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  /** Fires on pointer or keyboard activation. Detail includes toggle `selected` state. */\n  @Event({ bubbles: true, composed: true })\n  mdClick!: EventEmitter<{ selected: boolean }>;\n\n  @State() private hasSlottedIcon = false;\n  /** A badge is slotted in — the host must stop clipping so it can straddle\n   *  the corner. `:host(:has(md-badge))` does not match light-DOM children, so\n   *  the presence is tracked here and expressed as a host class. */\n  @State() private hasSlottedBadge = false;\n  @State() private hasSlottedSelected = false;\n  @State() private pressed = false;\n\n  private get isDisabled() {\n    return this.disabled || this.softDisabled;\n  }\n\n  componentWillLoad() {\n    this.syncSlottedIcons();\n  }\n\n  componentDidLoad() {\n    const shadow = this.el.shadowRoot;\n    if (!shadow) return;\n\n    const iconSlot = shadow.querySelector('slot:not([name])') as HTMLSlotElement | null;\n    const selectedSlot = shadow.querySelector('slot[name=\"selected\"]') as HTMLSlotElement | null;\n\n    this.syncSlottedIcons();\n    iconSlot?.addEventListener('slotchange', () => this.syncSlottedIcons());\n    selectedSlot?.addEventListener('slotchange', () => this.syncSlottedIcons());\n  }\n\n  /** Ignore whitespace-only text nodes (e.g. Lit template indentation) when detecting slots. */\n  private hasMeaningfulSlotContent(slot: HTMLSlotElement | null): boolean {\n    if (!slot) return false;\n    return slot.assignedNodes().some((node) => {\n      if (node.nodeType === Node.ELEMENT_NODE) {\n        // A badge is an ADORNMENT anchored to the button, not the button's\n        // icon. Counting it here made `hasSlottedIcon` true, which suppresses\n        // the `icon` prop's glyph — so the documented pattern (an icon button\n        // with a count badge) rendered the badge and NO icon at all.\n        if ((node as Element).tagName.toLowerCase() === 'md-badge') return false;\n        return true;\n      }\n      if (node.nodeType === Node.TEXT_NODE) return (node.textContent?.trim().length ?? 0) > 0;\n      return false;\n    });\n  }\n\n  /** Sync default/selected slot presence (initial + slotchange). */\n  private syncSlottedIcons() {\n    const shadow = this.el.shadowRoot;\n    const iconSlot = shadow?.querySelector('slot:not([name])') as HTMLSlotElement | null;\n    const selectedSlot = shadow?.querySelector('slot[name=\"selected\"]') as HTMLSlotElement | null;\n\n    this.hasSlottedIcon = this.hasMeaningfulSlotContent(iconSlot);\n    this.hasSlottedBadge = !!iconSlot\n      ?.assignedElements()\n      .some((el) => el.tagName.toLowerCase() === 'md-badge');\n    this.hasSlottedSelected = this.hasMeaningfulSlotContent(selectedSlot);\n  }\n\n  private handleClick = (e: MouseEvent) => {\n    if (this.isDisabled) { e.preventDefault(); return; }\n    const href = sanitizeHref(this.href);\n    if (href) { window.open(href, this.target, SAFE_WINDOW_FEATURES); }\n    if (this.toggle) this.selected = !this.selected;\n    this.mdClick.emit({ selected: this.selected });\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (!this.isDisabled) {\n        this.pressed = true;\n        triggerRipple(this.el);\n        this.el.click();\n        setTimeout(() => { this.pressed = false; }, 150);\n      }\n    }\n  };\n\n  private handlePointerDown = () => {\n    if (!this.isDisabled) this.pressed = true;\n  };\n\n  private handlePointerUp = () => {\n    this.pressed = false;\n  };\n\n  render() {\n    const isEffectivelyDisabled = this.isDisabled;\n    const showSelected = this.toggle && this.selected;\n    const hasIcon = !!this.icon || this.hasSlottedIcon;\n    // Do not gate visibility on `hasIcon` — slotted glyphs must paint before sync.\n    const showDefaultIconLayer =\n      !showSelected || (!this.selectedIcon && !this.hasSlottedSelected);\n\n    return (\n      <Host\n        class={{\n          'md-icon-button': true,\n          [`md-icon-button--${this.variant}`]: true,\n          [`md-icon-button--${this.size}`]: true,\n          [`md-icon-button--${this.shape}`]: true,\n          [`md-icon-button--width-${this.buttonWidth}`]: this.buttonWidth !== 'default',\n          'md-icon-button--selected': this.selected,\n          'md-icon-button--toggle': this.toggle,\n          'md-icon-button--disabled': this.disabled || this.softDisabled,\n          'md-icon-button--shape-morph': this.shapeMorph,\n          'md-icon-button--has-badge': this.hasSlottedBadge,\n          'md-icon-button--pressed': this.shapeMorph && this.pressed,\n          'md-icon-button--connected-left': this.connectedLeft,\n          'md-icon-button--connected-right': this.connectedRight,\n        }}\n        role=\"button\"\n        aria-disabled={isEffectivelyDisabled ? 'true' : 'false'}\n        aria-pressed={this.toggle ? String(this.selected) : undefined}\n        tabindex={\n          this.disabled\n            ? '-1'\n            : (this.groupTabindex !== null ? String(this.groupTabindex) : '0')\n        }\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        onPointerDown={this.handlePointerDown}\n        onPointerUp={this.handlePointerUp}\n        onPointerLeave={this.handlePointerUp}\n        onPointerCancel={this.handlePointerUp}\n      >\n        {this.ripple && <md-ripple disabled={isEffectivelyDisabled}></md-ripple>}\n        <span class=\"md-icon-button__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n\n        {/* Default icon (shown when not toggle-selected, or no selected slot/icon) */}\n        <span\n          class={{\n            'md-icon-button__icon': true,\n            'md-icon-button__icon--on': showDefaultIconLayer,\n          }}\n          part=\"icon\"\n        >\n          <slot />\n          {showDefaultIconLayer && hasIcon && !this.hasSlottedIcon && (\n            <span class=\"md-icon-button__icon-font material-symbols-outlined\" aria-hidden=\"true\">\n              {showSelected && this.selectedIcon ? this.selectedIcon : this.icon}\n            </span>\n          )}\n        </span>\n\n        {/* Selected icon (toggle mode only) */}\n        {this.toggle && (this.selectedIcon || this.hasSlottedSelected) && (\n          <span\n            class={{\n              'md-icon-button__icon': true,\n              'md-icon-button__icon--on': showSelected,\n            }}\n            part=\"selected-icon\"\n          >\n            <slot name=\"selected\" />\n            {!this.hasSlottedSelected && this.selectedIcon && (\n              <span class=\"md-icon-button__icon-font material-symbols-outlined\" aria-hidden=\"true\">\n                {this.selectedIcon}\n              </span>\n            )}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components-csr/index.js

@@ -0,0 +1,2 @@
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-bSpXNc5J.js";export{c as captureFlip,f as flipRows}from"./p-Cch_V1vi.js";const t="[name]";class i{constructor(t,s={}){this.form=t;this.config=s;this.listeners=[];this.debounceTimers=new Map;this.asyncSeq=new Map;this.destroyed=false;this.touched=new Set;if(s.liveValidate!==false)this.attachLiveValidation();if(s.showErrors!==false)this.reserveMessageSpace()}reserveMessageSpace(){for(const t of this.fields()){const s=t;if("reserveSupportingSpace"in s)s.reserveSupportingSpace=true}}fields(){return Array.from(this.form.querySelectorAll(t)).filter((t=>!!t.name&&!t.disabled))}values(){const t={};for(const s of this.fields()){const i=s.name;const e=s.tagName.toLowerCase();if(e==="md-switch"){t[i]=!!s.selected}else if(e==="md-checkbox"){t[i]=!!s.checked}else if(e==="md-radio"){if(s.checked)t[i]=s.value;else if(!(i in t))t[i]=null}else{t[i]=s.value}}return t}fieldsByName(t){return this.fields().filter((s=>s.name===t))}async applyRule(t,s){const i=this.config.rules?.[t];const e=this.fieldsByName(t);if(!i||e.length===0)return"";const n=e[0];let o="";if(i.requiredWhen){const e=s[t];const n=e===undefined||e===null||e===""||e===false||Array.isArray(e)&&e.length===0;if(i.requiredWhen(s)&&n){o=i.requiredMessage||"This field is required."}}if(!o&&i.validate){const e=(this.asyncSeq.get(t)||0)+1;this.asyncSeq.set(t,e);const n=await i.validate(s);if(e!==this.asyncSeq.get(t))return"";if(n!==true)o=typeof n==="string"?n:"Invalid value."}if(this.destroyed)return"";await(n.setCustomValidity?.(o));return o}display(t,s){if(this.config.showErrors===false)return;const i=this.touched.has(t)&&!!s;for(const e of this.fieldsByName(t)){const t=e;if(!("errorText"in t))continue;t.error=i;t.errorText=i?s:""}}markTouched(t){this.touched.add(t)}async validateField(t){const s=this.values();await this.applyRule(t,s);const i=Object.entries(this.config.rules||{}).filter((([,s])=>s.dependsOn?.includes(t))).map((([t])=>t));const e=this.values();await Promise.all(i.map((t=>this.applyRule(t,e))));const n=await this.snapshot();for(const s of[t,...i])this.display(s,n.errors[s]||"");this.config.onValidate?.(n)}async validate(){const t=this.values();await Promise.all(Object.keys(this.config.rules||{}).map((s=>this.applyRule(s,t))));const s=await this.collect(t);for(const t of this.fields())this.touched.add(t.name);for(const t of this.fields())this.display(t.name,s.errors[t.name]||"");if(this.config.focusInvalid!==false&&s.firstInvalid){this.focusElement(s.firstInvalid)}this.config.onValidate?.(s);return s}async snapshot(){return this.collect(this.values())}async collect(t){const s={};let i=null;for(const t of this.fields()){const e=t.name;if(e in s)continue;let n=true;let o="";if(t.getValidity){const s=await t.getValidity();n=s.valid;o=s.validationMessage}else if(t.checkValidity){n=await t.checkValidity();o=n?"":t.validationMessage||"Invalid value."}if(!n){s[e]=o||"Invalid value.";if(!i)i=t}}return{valid:Object.keys(s).length===0,values:t,errors:s,firstInvalid:i}}focusElement(t){const s=t;try{t.scrollIntoView({block:"center",behavior:"smooth"})}catch{}if(typeof s.setFocus==="function")void s.setFocus();else t.focus?.()}async focusFirstInvalid(){const{firstInvalid:t}=await this.snapshot();if(t)this.focusElement(t);return t}report(){if(!this.config.onValidate)return;void this.snapshot().then((t=>this.config.onValidate(t)))}attachLiveValidation(){const t=t=>t.target?.name;const s=s=>{const i=t(s);if(!i)return;const e=this.config.rules?.[i]?.debounce??0;const n=this.debounceTimers.get(i);if(n)clearTimeout(n);this.debounceTimers.set(i,setTimeout((()=>{this.debounceTimers.delete(i);void this.validateField(i)}),e))};const i=s=>{const i=t(s);if(!i)return;this.markTouched(i);void this.validateField(i)};const e=t=>{const s=t.target;if(!s?.closest?.('[type="submit"]'))return;void this.validate()};for(const t of["mdChange","mdInput","change","input"]){this.form.addEventListener(t,s);this.listeners.push((()=>this.form.removeEventListener(t,s)))}this.form.addEventListener("focusout",i);this.listeners.push((()=>this.form.removeEventListener("focusout",i)));this.form.addEventListener("click",e,true);this.listeners.push((()=>this.form.removeEventListener("click",e,true)));this.form.addEventListener("submit",e);this.listeners.push((()=>this.form.removeEventListener("submit",e)));const n=t=>{if(this.config.showErrors!==false)t.preventDefault()};const o=()=>setTimeout((()=>void this.reset()),0);this.form.addEventListener("reset",o);this.listeners.push((()=>this.form.removeEventListener("reset",o)));this.form.addEventListener("invalid",n,true);this.listeners.push((()=>this.form.removeEventListener("invalid",n,true)))}async reset(){this.touched.clear();for(const t of this.fields()){const s=t;await(s.setCustomValidity?.(""));if("errorText"in s){s.error=false;s.errorText=""}}this.config.onValidate?.(await this.snapshot())}destroy(){this.destroyed=true;this.listeners.forEach((t=>t()));this.listeners=[];this.debounceTimers.forEach((t=>clearTimeout(t)));this.debounceTimers.clear()}}function e(t,s={}){return new i(t,s)}export{i as FormController,e as createFormController};
+//# sourceMappingURL=index.js.map

package/dist/components-csr/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FIELD_SELECTOR","FormController","constructor","form","config","this","listeners","debounceTimers","Map","asyncSeq","destroyed","touched","Set","liveValidate","attachLiveValidation","showErrors","reserveMessageSpace","el","fields","target","reserveSupportingSpace","Array","from","querySelectorAll","filter","name","disabled","values","out","tag","tagName","toLowerCase","selected","checked","value","fieldsByName","applyRule","rule","rules","els","length","message","requiredWhen","v","isEmpty","undefined","isArray","requiredMessage","validate","seq","get","set","res","setCustomValidity","display","show","has","error","errorText","markTouched","add","validateField","dependents","Object","entries","r","dependsOn","includes","map","n","fresh","Promise","all","d","snap","snapshot","errors","onValidate","keys","result","collect","focusInvalid","firstInvalid","focusElement","valid","getValidity","validationMessage","checkValidity","scrollIntoView","block","behavior","setFocus","focus","focusFirstInvalid","report","then","nameOf","e","onEdit","delay","debounce","existing","clearTimeout","setTimeout","delete","onBlur","onSubmitAttempt","closest","evt","addEventListener","push","removeEventListener","onInvalid","preventDefault","onReset","reset","clear","destroy","forEach","off","t","createFormController"],"sources":["src/utils/form-controller.ts"],"sourcesContent":["/**\n * Form controller — conditional, cross-field, chained and async validation on\n * top of the native constraint-validation API.\n *\n * WHY THIS EXISTS. `required` covers \"this field must have a value\". It cannot\n * express \"required only when the reason is Other\", \"must match the password\n * field\", \"must be after the start date\" or \"must not already exist on the\n * server\". Those are the rules real forms are made of.\n *\n * WHY IT IS NOT A PARALLEL ERROR SYSTEM. Every rule result is pushed into the\n * control's OWN validity via `setCustomValidity()`. That keeps exactly one\n * source of truth: `form.checkValidity()` stays authoritative, the browser\n * still blocks submission, the native message still appears, and an error\n * summary built from this controller can never disagree with the form. A\n * library that tracked its own error map alongside the platform would drift the\n * moment anything else touched validity.\n */\n\n/** Values keyed by control `name`. */\nexport type FormValues = Record<string, unknown>;\n\n/** Return `true` when valid, or a message string when not. */\nexport type ValidateResult = true | string;\n\nexport interface FieldRule<V extends FormValues = FormValues> {\n  /**\n   * Conditional required. Runs before `validate`, so a field that is not\n   * currently required is not also failed by its other rules while empty.\n   */\n  requiredWhen?: (values: V) => boolean;\n\n  /** Message for a failed `requiredWhen`. */\n  requiredMessage?: string;\n\n  /**\n   * Cross-field / chained rule. Receives ALL current values, so\n   * \"confirm matches password\" or \"end after start\" are ordinary comparisons.\n   * May be async — return a promise for server checks.\n   */\n  validate?: (values: V) => ValidateResult | Promise<ValidateResult>;\n\n  /**\n   * Other field names this rule reads. When any of them changes, this field is\n   * re-validated.\n   *\n   * Without it a chained rule goes stale in the most confusing way possible:\n   * the user fixes `password`, but `confirm` — which was marked invalid by\n   * comparing against the OLD password — keeps its error until it is edited\n   * again, so the form looks broken while every visible value is correct.\n   */\n  dependsOn?: string[];\n\n  /** Debounce in ms for live validation. Use for async/server rules. */\n  debounce?: number;\n}\n\nexport interface FormControllerConfig<V extends FormValues = FormValues> {\n  rules?: Record<string, FieldRule<V>>;\n  /** Re-validate a field as the user edits it. Default true. */\n  liveValidate?: boolean;\n  /**\n   * Mirror each message onto the control's own `error` / `error-text`, so the\n   * failure is visible ON THE FIELD and not only in the native bubble. Default\n   * true. Controls without those props (checkbox, radio, switch) are skipped —\n   * they still expose `aria-invalid`.\n   */\n  showErrors?: boolean;\n  /** Focus (and scroll to) the first invalid control on `validate()`. Default true. */\n  focusInvalid?: boolean;\n  /** Called after any validation pass — drive an error summary from this. */\n  onValidate?: (result: FormValidationResult<V>) => void;\n}\n\nexport interface FormValidationResult<V extends FormValues = FormValues> {\n  valid: boolean;\n  values: V;\n  /** Control `name` → message, for fields that are currently invalid. */\n  errors: Record<string, string>;\n  /** First invalid control in DOM order, for focus and summary links. */\n  firstInvalid: HTMLElement | null;\n}\n\ninterface ValidatableElement extends HTMLElement {\n  name?: string;\n  value?: unknown;\n  checked?: boolean;\n  selected?: boolean;\n  disabled?: boolean;\n  type?: string;\n  setCustomValidity?: (m: string) => Promise<void> | void;\n  checkValidity?: () => Promise<boolean> | boolean;\n  getValidity?: () => Promise<{ valid: boolean; validationMessage: string }>;\n  setFocus?: () => Promise<void> | void;\n  validationMessage?: string;\n}\n\nconst FIELD_SELECTOR = '[name]';\n\nexport class FormController<V extends FormValues = FormValues> {\n  private listeners: Array<() => void> = [];\n  private debounceTimers = new Map<string, ReturnType<typeof setTimeout>>();\n  /** Monotonic token per field so a slow async rule cannot overwrite a newer result. */\n  private asyncSeq = new Map<string, number>();\n  private destroyed = false;\n  /**\n   * Fields the user has finished with (blurred), plus everything once submit is\n   * attempted. Errors are only DISPLAYED for these.\n   *\n   * Without it the form paints red the instant it renders, or while someone is\n   * still typing the first character of an email — technically accurate and\n   * hostile. Validation runs continuously; only the display waits.\n   */\n  private touched = new Set<string>();\n\n  constructor(\n    private form: HTMLFormElement,\n    private config: FormControllerConfig<V> = {},\n  ) {\n    if (config.liveValidate !== false) this.attachLiveValidation();\n    if (config.showErrors !== false) this.reserveMessageSpace();\n  }\n\n  /**\n   * Ask every managed field to hold its supporting-text line open.\n   *\n   * Messages here appear and disappear as the user tabs through the form, and\n   * the row is otherwise created on demand — so without this the first error on\n   * a field shoves everything below it down, and the form jumps around while\n   * being filled in. Done from the controller rather than by default on the\n   * component so that fields outside a validated form keep their current\n   * height.\n   */\n  private reserveMessageSpace() {\n    for (const el of this.fields()) {\n      const target = el as ValidatableElement & { reserveSupportingSpace?: boolean };\n      if ('reserveSupportingSpace' in target) target.reserveSupportingSpace = true;\n    }\n  }\n\n  /** Every named, enabled control inside the form, in DOM order. */\n  private fields(): ValidatableElement[] {\n    return Array.from(this.form.querySelectorAll<ValidatableElement>(FIELD_SELECTOR)).filter(\n      (el) => !!el.name && !el.disabled,\n    );\n  }\n\n  /**\n   * Current values keyed by name.\n   *\n   * Read from the ELEMENTS rather than FormData: FormData omits unchecked\n   * boxes and radios entirely, so a rule like `requiredWhen: v => !v.subscribed`\n   * would see `undefined` and could not distinguish \"unchecked\" from \"no such\n   * field\". Rules need the full shape, so booleans are reported as booleans.\n   */\n  values(): V {\n    const out: FormValues = {};\n    for (const el of this.fields()) {\n      const name = el.name!;\n      const tag = el.tagName.toLowerCase();\n      if (tag === 'md-switch') {\n        out[name] = !!el.selected;\n      } else if (tag === 'md-checkbox') {\n        out[name] = !!el.checked;\n      } else if (tag === 'md-radio') {\n        // A radio group reports the CHECKED member's value, matching FormData.\n        if (el.checked) out[name] = el.value;\n        else if (!(name in out)) out[name] = null;\n      } else {\n        out[name] = el.value;\n      }\n    }\n    return out as V;\n  }\n\n  private fieldsByName(name: string): ValidatableElement[] {\n    return this.fields().filter((el) => el.name === name);\n  }\n\n  /**\n   * Apply a field's rules and push the outcome into its own validity.\n   * Returns the message, or '' when the field passes.\n   */\n  private async applyRule(name: string, values: V): Promise<string> {\n    const rule = this.config.rules?.[name];\n    const els = this.fieldsByName(name);\n    if (!rule || els.length === 0) return '';\n\n    // For a radio group the rule belongs to the group; anchor it on the first\n    // member so the message is set once rather than once per radio.\n    const el = els[0];\n\n    let message = '';\n    if (rule.requiredWhen) {\n      const v = values[name];\n      const isEmpty = v === undefined || v === null || v === '' || v === false ||\n        (Array.isArray(v) && v.length === 0);\n      if (rule.requiredWhen(values) && isEmpty) {\n        message = rule.requiredMessage || 'This field is required.';\n      }\n    }\n\n    if (!message && rule.validate) {\n      const seq = (this.asyncSeq.get(name) || 0) + 1;\n      this.asyncSeq.set(name, seq);\n      const res = await rule.validate(values);\n      // A slower earlier call must not overwrite a newer result — the classic\n      // async-validation race that makes an error flash back after it was fixed.\n      if (seq !== this.asyncSeq.get(name)) return '';\n      if (res !== true) message = typeof res === 'string' ? res : 'Invalid value.';\n    }\n\n    if (this.destroyed) return '';\n    await el.setCustomValidity?.(message);\n    return message;\n  }\n\n  /**\n   * Push a message onto the control's inline error slot.\n   *\n   * Capability-checked rather than tag-listed: md-checkbox / md-radio /\n   * md-switch have no `error` prop, and assigning one would silently create an\n   * expando that renders nothing.\n   */\n  private display(name: string, message: string) {\n    if (this.config.showErrors === false) return;\n    const show = this.touched.has(name) && !!message;\n    for (const el of this.fieldsByName(name)) {\n      const target = el as ValidatableElement & { error?: boolean; errorText?: string };\n      if (!('errorText' in target)) continue;\n      target.error = show;\n      target.errorText = show ? message : '';\n    }\n  }\n\n  /** Mark a field as interacted-with, so its errors may now be shown. */\n  markTouched(name: string) {\n    this.touched.add(name);\n  }\n\n  /** Validate one field and anything that declares a dependency on it. */\n  async validateField(name: string): Promise<void> {\n    const values = this.values();\n    await this.applyRule(name, values);\n\n    const dependents = Object.entries(this.config.rules || {})\n      .filter(([, r]) => r.dependsOn?.includes(name))\n      .map(([n]) => n);\n    // Re-read values so dependents see the value just committed above.\n    const fresh = this.values();\n    await Promise.all(dependents.map((d) => this.applyRule(d, fresh)));\n\n    // Refresh the inline text for this field AND its dependents: fixing the\n    // dependency has to clear the message on the field that showed it.\n    const snap = await this.snapshot();\n    for (const n of [name, ...dependents]) this.display(n, snap.errors[n] || '');\n    this.config.onValidate?.(snap);\n  }\n\n  /**\n   * Validate the whole form: every rule, then the native validity of every\n   * control. Focuses the first invalid control unless disabled.\n   */\n  async validate(): Promise<FormValidationResult<V>> {\n    const values = this.values();\n    await Promise.all(Object.keys(this.config.rules || {}).map((n) => this.applyRule(n, values)));\n    const result = await this.collect(values);\n    // A validate() pass is the submit moment: every field has now been \"seen\",\n    // so every message becomes displayable.\n    for (const el of this.fields()) this.touched.add(el.name!);\n    for (const el of this.fields()) this.display(el.name!, result.errors[el.name!] || '');\n    if (this.config.focusInvalid !== false && result.firstInvalid) {\n      this.focusElement(result.firstInvalid);\n    }\n    this.config.onValidate?.(result);\n    return result;\n  }\n\n  /** Read current validity without running rules or moving focus. */\n  async snapshot(): Promise<FormValidationResult<V>> {\n    return this.collect(this.values());\n  }\n\n  private async collect(values: V): Promise<FormValidationResult<V>> {\n    const errors: Record<string, string> = {};\n    let firstInvalid: HTMLElement | null = null;\n\n    for (const el of this.fields()) {\n      const name = el.name!;\n      // A radio group is one logical field — only report it once.\n      if (name in errors) continue;\n      let valid = true;\n      let message = '';\n      if (el.getValidity) {\n        const v = await el.getValidity();\n        valid = v.valid;\n        message = v.validationMessage;\n      } else if (el.checkValidity) {\n        valid = await el.checkValidity();\n        message = valid ? '' : el.validationMessage || 'Invalid value.';\n      }\n      if (!valid) {\n        errors[name] = message || 'Invalid value.';\n        if (!firstInvalid) firstInvalid = el;\n      }\n    }\n\n    return { valid: Object.keys(errors).length === 0, values, errors, firstInvalid };\n  }\n\n  /** Focus and scroll to a control, preferring its own focus method. */\n  focusElement(el: HTMLElement) {\n    const target = el as ValidatableElement;\n    try {\n      el.scrollIntoView({ block: 'center', behavior: 'smooth' });\n    } catch {\n      /* jsdom / mock-doc has no scrollIntoView */\n    }\n    if (typeof target.setFocus === 'function') void target.setFocus();\n    else el.focus?.();\n  }\n\n  /** Focus the first currently-invalid control. */\n  async focusFirstInvalid(): Promise<HTMLElement | null> {\n    const { firstInvalid } = await this.snapshot();\n    if (firstInvalid) this.focusElement(firstInvalid);\n    return firstInvalid;\n  }\n\n  private report() {\n    if (!this.config.onValidate) return;\n    void this.snapshot().then((r) => this.config.onValidate!(r));\n  }\n\n  private attachLiveValidation() {\n    const nameOf = (e: Event) => (e.target as ValidatableElement)?.name;\n\n    // ── ON EDIT ─────────────────────────────────────────────────────────────\n    // Re-validate as the user types/selects, but display only for fields they\n    // have already finished with. This is what clears an error the instant it\n    // is fixed without shouting at someone mid-keystroke.\n    const onEdit = (e: Event) => {\n      const name = nameOf(e);\n      if (!name) return;\n      const delay = this.config.rules?.[name]?.debounce ?? 0;\n      const existing = this.debounceTimers.get(name);\n      if (existing) clearTimeout(existing);\n      this.debounceTimers.set(\n        name,\n        setTimeout(() => {\n          this.debounceTimers.delete(name);\n          void this.validateField(name);\n        }, delay),\n      );\n    };\n\n    // ── ON BLUR ─────────────────────────────────────────────────────────────\n    // The moment a field is \"done\": mark it touched, then validate so any\n    // message becomes visible.\n    //\n    // `focusout`, not `blur`: blur does not bubble, so a listener on the form\n    // would never hear it. focusout is its bubbling counterpart.\n    const onBlur = (e: Event) => {\n      const name = nameOf(e);\n      if (!name) return;\n      this.markTouched(name);\n      void this.validateField(name);\n    };\n\n    // ── ON SUBMIT ───────────────────────────────────────────────────────────\n    // A submit ATTEMPT must reveal everything, not just the fields visited.\n    //\n    // Listening for the form's `submit` event is not enough: the browser blocks\n    // it while any control is invalid, so the one moment the user most needs to\n    // see the errors is the one moment the event does not fire. Hooking the\n    // submit control's click (capture, so it runs before activation) catches\n    // the attempt either way.\n    const onSubmitAttempt = (e: Event) => {\n      const el = e.target as HTMLElement;\n      if (!el?.closest?.('[type=\"submit\"]')) return;\n      void this.validate();\n    };\n\n    for (const evt of ['mdChange', 'mdInput', 'change', 'input']) {\n      this.form.addEventListener(evt, onEdit);\n      this.listeners.push(() => this.form.removeEventListener(evt, onEdit));\n    }\n    this.form.addEventListener('focusout', onBlur);\n    this.listeners.push(() => this.form.removeEventListener('focusout', onBlur));\n    this.form.addEventListener('click', onSubmitAttempt, true);\n    this.listeners.push(() => this.form.removeEventListener('click', onSubmitAttempt, true));\n    this.form.addEventListener('submit', onSubmitAttempt);\n    this.listeners.push(() => this.form.removeEventListener('submit', onSubmitAttempt));\n\n    // ── SUPPRESS THE NATIVE BUBBLE ──────────────────────────────────────────\n    // The browser pops its own validation balloon on submit. When this\n    // controller is showing messages inline, that balloon is a SECOND, uglier\n    // copy of the same information, anchored to the control rather than to the\n    // field's supporting line. preventDefault() on `invalid` suppresses the\n    // browser UI without affecting validity itself — submission stays blocked.\n    //\n    // Capture phase: `invalid` does not bubble, so a listener on the form only\n    // sees it on the way down.\n    const onInvalid = (e: Event) => {\n      if (this.config.showErrors !== false) e.preventDefault();\n    };\n\n    // Native reset clears the VALUES; the error display has to go with them.\n    const onReset = () => setTimeout(() => void this.reset(), 0);\n    this.form.addEventListener('reset', onReset);\n    this.listeners.push(() => this.form.removeEventListener('reset', onReset));\n    this.form.addEventListener('invalid', onInvalid, true);\n    this.listeners.push(() => this.form.removeEventListener('invalid', onInvalid, true));\n  }\n\n  /**\n   * Forget every field's touched state and clear all displayed errors.\n   *\n   * Wired to the form's native `reset` as well: a reset form that keeps its\n   * error text is claiming problems about values the user can no longer see.\n   * Custom validity is cleared too, so a rule-driven message does not outlive\n   * the value that caused it.\n   */\n  async reset() {\n    this.touched.clear();\n    for (const el of this.fields()) {\n      const target = el as ValidatableElement & { error?: boolean; errorText?: string };\n      await target.setCustomValidity?.('');\n      if ('errorText' in target) {\n        target.error = false;\n        target.errorText = '';\n      }\n    }\n    this.config.onValidate?.(await this.snapshot());\n  }\n\n  /** Remove listeners and cancel pending debounces. */\n  destroy() {\n    this.destroyed = true;\n    this.listeners.forEach((off) => off());\n    this.listeners = [];\n    this.debounceTimers.forEach((t) => clearTimeout(t));\n    this.debounceTimers.clear();\n  }\n}\n\n/**\n * Create a form controller.\n *\n * @example\n * const controller = createFormController(formEl, {\n *   rules: {\n *     otherReason: {\n *       requiredWhen: (v) => v.reason === 'other',\n *       requiredMessage: 'Please tell us more',\n *     },\n *     confirm: {\n *       dependsOn: ['password'],\n *       validate: (v) => v.password === v.confirm || 'Passwords do not match',\n *     },\n *     email: {\n *       debounce: 300,\n *       validate: async (v) => (await isFree(v.email)) || 'Already registered',\n *     },\n *   },\n *   onValidate: ({ errors }) => renderSummary(errors),\n * });\n *\n * form.addEventListener('submit', async (e) => {\n *   e.preventDefault();\n *   const { valid, values } = await controller.validate();\n *   if (valid) send(values);\n * });\n */\nexport function createFormController<V extends FormValues = FormValues>(\n  form: HTMLFormElement,\n  config: FormControllerConfig<V> = {},\n): FormController<V> {\n  return new FormController<V>(form, config);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{p as a,H as e,c as i,h as o,d as n,t as r}from"./p-bSpXNc5J.js";import{d as t}from"./p-C3vB0Hd9.js";const d=()=>`:host{--_container-color:var(--md-accordion-item-container-color, var(--md-sys-color-surface-container-low, #F7F2FA));--_container-shape:var(--md-accordion-item-container-shape, var(--md-sys-shape-corner-medium, 12px));--_container-shape-expanded:var(--md-accordion-item-container-shape-expanded, var(--md-sys-shape-corner-large, 16px));--_header-color:var(--md-accordion-item-header-color, transparent);--_header-color-expanded:var(--md-accordion-item-header-color-expanded, var(--md-sys-color-secondary-container, #E8DEF8));--_headline-color:var(--md-accordion-item-headline-color, var(--md-sys-color-on-surface, #1C1B1F));--_headline-color-expanded:var(--md-accordion-item-headline-color-expanded, var(--md-sys-color-on-secondary-container, #1D192B));--_supporting-color:var(--md-accordion-item-supporting-color, var(--md-sys-color-on-surface-variant, #49454F));--_icon-color:var(--md-accordion-item-icon-color, var(--md-sys-color-on-surface-variant, #49454F));--_icon-color-expanded:var(--md-accordion-item-icon-color-expanded, var(--md-sys-color-on-secondary-container, #1D192B));--_state-layer-color:var(--md-accordion-item-state-layer-color, var(--md-sys-color-on-surface, #1C1B1F));--_state-layer-color-expanded:var(--md-accordion-item-state-layer-color-expanded, var(--md-sys-color-on-secondary-container, #1D192B));--_header-padding:var(--md-accordion-item-header-padding, max(4px, calc(16px + var(--md-sys-density-scale, 0) * 2px)) max(12px, calc(24px + var(--md-sys-density-scale, 0) * 2px)));--_content-padding:var(--md-accordion-item-content-padding, max(8px, calc(20px + var(--md-sys-density-scale, 0) * 2px)) max(12px, calc(24px + var(--md-sys-density-scale, 0) * 2px)));--_header-min-height:var(--md-accordion-item-header-min-height, max(40px, calc(64px + var(--md-sys-density-scale, 0) * 4px)));--_expand-duration:var(--md-accordion-item-expand-duration, var(--md-sys-motion-duration-medium3, 350ms));--_collapse-duration:var(--md-accordion-item-collapse-duration, var(--md-sys-motion-duration-short4, 200ms));--_expand-easing:var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));--_collapse-easing:var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15));--_state-easing:var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));--_spring-easing:var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));--_spring-duration:var(--md-sys-motion-spring-spatial-default-duration, 500ms);--_elevation:var(--md-accordion-item-elevation, var(--md-sys-elevation-0, none));--_elevation-expanded:var(--md-accordion-item-elevation-expanded, var(--_elevation));display:block;position:relative;background-color:var(--_container-color);border-radius:var(--_container-shape);box-sizing:border-box;font-family:var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);box-shadow:var(--_elevation);transition:border-radius var(--_expand-duration) var(--_expand-easing),     background-color var(--_expand-duration) var(--_expand-easing),     box-shadow var(--_expand-duration) var(--_expand-easing);will-change:border-radius}:host-context(md-accordion.md-accordion--filled.md-accordion--elevation-1){--_elevation:var(--md-accordion-item-elevation, var(--md-sys-elevation-1));--_elevation-expanded:var(--md-accordion-item-elevation-expanded, var(--md-sys-elevation-2))}:host-context(md-accordion.md-accordion--filled.md-accordion--elevation-2){--_elevation:var(--md-accordion-item-elevation, var(--md-sys-elevation-2));--_elevation-expanded:var(--md-accordion-item-elevation-expanded, var(--md-sys-elevation-3))}:host-context(md-accordion.md-accordion--filled.md-accordion--elevation-3){--_elevation:var(--md-accordion-item-elevation, var(--md-sys-elevation-3));--_elevation-expanded:var(--md-accordion-item-elevation-expanded, var(--md-sys-elevation-4))}:host-context(md-accordion.md-accordion--filled.md-accordion--elevation-4){--_elevation:var(--md-accordion-item-elevation, var(--md-sys-elevation-4));--_elevation-expanded:var(--md-accordion-item-elevation-expanded, var(--md-sys-elevation-5))}:host-context(md-accordion.md-accordion--filled.md-accordion--elevation-5){--_elevation:var(--md-accordion-item-elevation, var(--md-sys-elevation-5));--_elevation-expanded:var(--md-accordion-item-elevation-expanded, var(--md-sys-elevation-5))}:host-context(md-accordion.md-accordion--outlined){--_elevation:none;--_elevation-expanded:none}:host(.md-accordion-item--expanded){border-radius:calc(var(--_container-shape) + var(--md-sys-shape-morph-enabled, 1) * (var(--_container-shape-expanded) - var(--_container-shape)));background-color:var(--md-accordion-item-container-color-expanded,     var(--md-sys-color-surface-container, #F3EDF7));box-shadow:var(--_elevation-expanded)}:host-context(md-accordion.md-accordion--outlined){--_container-shape:0;--_container-shape-expanded:0;border-radius:0;background-color:var(--md-accordion-item-container-color, transparent)}.md-accordion-item__heading{margin:0;font:inherit}.md-accordion-item__header{position:relative;display:flex;align-items:center;gap:max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px));inline-size:100%;min-block-size:var(--_header-min-height);padding:var(--_header-padding);border:none;background-color:var(--_header-color);color:var(--_headline-color);font-family:var(--md-sys-typescale-title-medium-font-family, Roboto, sans-serif);font-size:max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-title-medium-font-weight, 500);line-height:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));letter-spacing:var(--md-sys-typescale-title-medium-letter-spacing, 0.15px);text-align:start;cursor:pointer;box-sizing:border-box;overflow:hidden;border-radius:var(--_container-shape);transition:background-color var(--_expand-duration) var(--_expand-easing),     color var(--_spring-duration) var(--_spring-easing),     border-radius var(--_expand-duration) var(--_expand-easing)}.md-accordion-item__state-layer{position:absolute;inset:0;background-color:var(--_state-layer-color);opacity:0;pointer-events:none;transition:opacity var(--md-sys-motion-spring-effects-default-duration, 200ms) var(--_state-easing)}.md-accordion-item__header:hover .md-accordion-item__state-layer{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}.md-accordion-item__header:focus-visible .md-accordion-item__state-layer{opacity:var(--md-sys-state-focus-state-layer-opacity, 0.12)}.md-accordion-item__header:active .md-accordion-item__state-layer{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}:host(.md-accordion-item--expanded) .md-accordion-item__header{background-color:var(--_header-color-expanded);color:var(--_headline-color-expanded);border-start-start-radius:var(--_container-shape-expanded);border-start-end-radius:var(--_container-shape-expanded);border-end-start-radius:0;border-end-end-radius:0}:host(.md-accordion-item--expanded) .md-accordion-item__state-layer{background-color:var(--_state-layer-color-expanded)}.md-accordion-item__header:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:-3px}.md-accordion-item__header:disabled,:host(.md-accordion-item--disabled) .md-accordion-item__header{cursor:not-allowed;color:color-mix(in srgb, var(--_headline-color) 38%, transparent)}:host(.md-accordion-item--disabled) .md-accordion-item__state-layer,:host(.md-accordion-item--disabled) md-ripple{display:none}:host(.md-accordion-item--disabled.md-accordion-item--expanded) .md-accordion-item__header{background-color:color-mix(     in srgb,     var(--_header-color-expanded) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%),     transparent   )}.md-accordion-item__drag-handle{display:none;position:relative;align-items:center;justify-content:center;inline-size:24px;block-size:24px;flex-shrink:0;margin-inline-end:-4px;color:var(--_icon-color);cursor:grab;touch-action:none;opacity:0.55;transition:opacity var(--_spring-duration) var(--_spring-easing),     transform var(--_spring-duration) var(--_spring-easing),     color var(--_spring-duration) var(--_spring-easing)}.md-accordion-item__drag-handle:hover{opacity:1;color:var(--_headline-color-expanded);transform:scale(1.08)}.md-accordion-item__drag-handle:active{cursor:grabbing}.md-accordion-item__drag-handle-icon{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:max(16px, calc(22px + var(--md-sys-density-scale, 0) * 1px));line-height:1;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;-webkit-font-smoothing:antialiased;pointer-events:none}:host-context(md-accordion[reorderable]) .md-accordion-item__drag-handle{display:inline-flex}:host(.md-accordion-item--disabled) .md-accordion-item__drag-handle{display:none !important}.md-accordion-item__chassis-handle{display:none;position:absolute;inset-block-start:4px;inset-inline:0;margin-inline:auto;z-index:3;inline-size:52px;block-size:16px;align-items:center;justify-content:center;border-radius:999px;background-color:transparent;cursor:grab;touch-action:none;user-select:none;transition:background-color var(--_spring-duration) var(--_spring-easing)}:host([data-chassis-handle]) .md-accordion-item__chassis-handle{display:inline-flex}.md-accordion-item__chassis-handle:hover{background-color:var(     --md-accordion-item-chassis-handle-bg-hover,     color-mix(in srgb, var(--_state-layer-color) 10%, transparent)   )}.md-accordion-item__chassis-handle:active{cursor:grabbing;background-color:var(     --md-accordion-item-chassis-handle-bg-hover,     color-mix(in srgb, var(--_state-layer-color) 16%, transparent)   )}.md-accordion-item__chassis-handle-bar{display:block;inline-size:32px;block-size:4px;border-radius:999px;background-color:var(     --md-accordion-item-chassis-handle-color,     var(--md-sys-color-on-surface-variant, #49454F)   );opacity:0.45;pointer-events:none;transition:inline-size var(--_spring-duration) var(--_spring-easing),     opacity var(--_spring-duration) var(--_spring-easing),     background-color var(--_expand-duration) var(--_expand-easing)}.md-accordion-item__chassis-handle:hover .md-accordion-item__chassis-handle-bar{opacity:0.9;inline-size:38px}.md-accordion-item__chassis-handle:active .md-accordion-item__chassis-handle-bar{opacity:1;inline-size:40px}:host-context(md-accordion.md-accordion--floating-dragging) .md-accordion-item__chassis-handle-bar{opacity:1;inline-size:40px;background-color:var(     --md-accordion-item-chassis-handle-color,     var(--md-sys-color-primary, #6750A4)   )}:host(.md-accordion-item--expanded) .md-accordion-item__chassis-handle-bar{background-color:var(     --md-accordion-item-chassis-handle-color,     var(--md-sys-color-on-secondary-container, #1D192B)   )}@media (forced-colors: active){.md-accordion-item__chassis-handle-bar{background-color:CanvasText;opacity:1}}:host(.md-accordion-item--dragging){z-index:10;cursor:grabbing;background-color:var(     --md-accordion-item-container-color-dragging,     var(--md-sys-color-surface-container-low, #F7F2F9)   );border-radius:var(     --md-accordion-item-container-shape-dragging,     var(--md-sys-shape-corner-medium, 12px)   );overflow:hidden;box-shadow:var(--md-sys-elevation-4,       0px 6px 10px 4px rgba(0, 0, 0, 0.15),       0px 2px 3px rgba(0, 0, 0, 0.3)) !important;transition:none !important}:host(.md-accordion-item--dragging) .md-accordion-item__header{pointer-events:none}:host(.md-accordion-item--dragging) .md-accordion-item__drag-handle{opacity:1;color:var(--_icon-color-expanded)}:host(.md-accordion-item--shifting){transition:transform var(--md-sys-motion-duration-short3, 200ms) var(--_state-easing);will-change:transform}.md-accordion-item__leading{display:inline-flex;align-items:center;justify-content:center;inline-size:24px;block-size:24px;flex-shrink:0;color:var(--_icon-color);transition:color var(--_spring-duration) var(--_spring-easing),     transform var(--_spring-duration) var(--_spring-easing)}:host(.md-accordion-item--expanded) .md-accordion-item__leading{color:var(--_icon-color-expanded);transform:scale(1.05)}.md-accordion-item__icon{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));line-height:1;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;transition:font-variation-settings var(--_spring-duration) var(--_spring-easing)}:host(.md-accordion-item--expanded) .md-accordion-item__icon{font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24}.md-accordion-item__text{flex:1;display:flex;flex-direction:column;min-inline-size:0;gap:2px}.md-accordion-item__headline{display:block;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.md-accordion-item__supporting{display:block;color:var(--_supporting-color);font-family:var(--md-sys-typescale-body-small-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-body-small-font-weight, 400);line-height:max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));letter-spacing:var(--md-sys-typescale-body-small-letter-spacing, 0.4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.md-accordion-item__trailing{display:inline-flex;align-items:center;justify-content:center;inline-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));block-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));flex-shrink:0;color:var(--_icon-color);transition:transform var(--_spring-duration) var(--_spring-easing),     color var(--_spring-duration) var(--_spring-easing)}:host(.md-accordion-item--expanded) .md-accordion-item__trailing{transform:rotate(180deg);color:var(--_icon-color-expanded)}:host([dir="rtl"]) .md-accordion-item__trailing,:host-context([dir="rtl"]) .md-accordion-item__trailing{transform:none}:host([dir="rtl"].md-accordion-item--expanded) .md-accordion-item__trailing,:host-context([dir="rtl"]).md-accordion-item--expanded .md-accordion-item__trailing{transform:rotate(180deg)}.md-accordion-item__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--_collapse-duration) var(--_collapse-easing),     opacity var(--_collapse-duration) var(--_collapse-easing);opacity:0}:host(.md-accordion-item--expanded) .md-accordion-item__panel{grid-template-rows:1fr;opacity:1;transition:grid-template-rows var(--_expand-duration) var(--_expand-easing),     opacity var(--_expand-duration) var(--_expand-easing)}.md-accordion-item__content{min-block-size:0;overflow:hidden}.md-accordion-item__content-inner{padding:var(--_content-padding);color:var(--_supporting-color);font-family:var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);font-size:max(12px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-body-medium-font-weight, 400);line-height:max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));transform:translateY(-4px);transition:transform var(--_expand-duration) var(--_expand-easing)}:host(.md-accordion-item--expanded) .md-accordion-item__content-inner{transform:translateY(0)}.md-accordion-item__content-inner--scroll{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.md-accordion-item__content-inner--scroll:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:-3px}:host-context(md-accordion[transition='standard']){--_expand-easing:var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));--_collapse-easing:var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));--_spring-easing:var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));--_state-easing:var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));--_spring-duration:var(--md-sys-motion-duration-medium2, 300ms);--_expand-duration:var(--md-accordion-item-expand-duration, var(--md-sys-motion-duration-medium2, 300ms));--_collapse-duration:var(--md-accordion-item-collapse-duration, var(--md-sys-motion-duration-medium2, 300ms))}:host-context(md-accordion[transition='fade']){--_expand-easing:var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));--_collapse-easing:var(--md-sys-motion-easing-standard, cubic-bezier(0.4, 0, 1, 1));--_spring-easing:var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));--_state-easing:var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));--_spring-duration:var(--md-sys-motion-duration-short3, 175ms);--_expand-duration:var(--md-accordion-item-expand-duration, var(--md-sys-motion-duration-medium2, 300ms));--_collapse-duration:var(--md-accordion-item-collapse-duration, var(--md-sys-motion-duration-short4, 200ms))}:host-context(md-accordion[transition='fade']) .md-accordion-item__content-inner{transform:none}:host-context(md-accordion[transition='collapse']){--_expand-easing:cubic-bezier(0, 0, 0.2, 1);--_collapse-easing:cubic-bezier(0.4, 0, 1, 1);--_spring-easing:cubic-bezier(0, 0, 0.2, 1);--_state-easing:cubic-bezier(0.4, 0, 0.2, 1);--_spring-duration:var(--md-sys-motion-duration-medium2, 300ms);--_expand-duration:var(--md-accordion-item-expand-duration, var(--md-sys-motion-duration-medium2, 300ms));--_collapse-duration:var(--md-accordion-item-collapse-duration, var(--md-sys-motion-duration-medium2, 300ms))}:host-context(md-accordion[transition='collapse']) .md-accordion-item__panel,:host-context(md-accordion[transition='collapse'].md-accordion-item--expanded) .md-accordion-item__panel{opacity:1}:host-context(md-accordion[transition='collapse']) .md-accordion-item__content-inner{transform:none}:host-context(md-accordion[transition='none']),:host-context(md-accordion[transition='none']) *,:host-context(md-accordion[transition='none']) *::before,:host-context(md-accordion[transition='none']) *::after{transition:none !important;animation-duration:0.001ms !important;animation-iteration-count:1 !important}@media (prefers-reduced-motion: reduce){:host,.md-accordion-item__header,.md-accordion-item__state-layer,.md-accordion-item__leading,.md-accordion-item__icon,.md-accordion-item__trailing,.md-accordion-item__panel,.md-accordion-item__content{transition-duration:0.01ms !important;animation:none !important}:host(.md-accordion-item--expanded) .md-accordion-item__leading{transform:none}}@media (forced-colors: active){:host{border:1px solid CanvasText}.md-accordion-item__header:focus-visible{outline-color:Highlight}.md-accordion-item__state-layer{display: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 s=0;const c=()=>`md-acc-item-${++s}`;const m=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.__attachShadow();this.mdItemToggle=i(this,"mdItemToggle",7);this.mdItemRequestFocus=i(this,"mdItemRequestFocus",7);this.mdItemRequestReorder=i(this,"mdItemRequestReorder",7);this.headline="";this.supportingText="";this.icon="";this.expanded=false;this.disabled=false;this.headingLevel=3;this.collapsible=true;this.regionRole="region";this.contentMaxHeight="";this.density=0;this.hasSlottedHeadline=false;this.hasSlottedTrailingIcon=false;this.hasSlottedLeadingIcon=false;this.contentId=c();this.headerId=`${this.contentId}-header`;this.handleHeaderClick=()=>{if(this.toggleBlocked())return;this.expanded=!this.expanded};this.handleHeaderKeyDown=a=>{if(this.disabled)return;if(a.altKey&&(a.key==="ArrowUp"||a.key==="ArrowDown")){a.preventDefault();this.mdItemRequestReorder.emit({direction:a.key==="ArrowUp"?"up":"down",from:this.index});return}switch(a.key){case"Enter":case" ":a.preventDefault();if(this.toggleBlocked())return;this.expanded=!this.expanded;break;case"ArrowDown":a.preventDefault();this.mdItemRequestFocus.emit({direction:"next",from:this.index});break;case"ArrowUp":a.preventDefault();this.mdItemRequestFocus.emit({direction:"prev",from:this.index});break;case"Home":a.preventDefault();this.mdItemRequestFocus.emit({direction:"first",from:this.index});break;case"End":a.preventDefault();this.mdItemRequestFocus.emit({direction:"last",from:this.index});break}};this.handleDragHandleClick=a=>{a.stopPropagation()};this.handleDragHandleKeyDown=a=>{a.stopPropagation()}}get index(){const a=this.el.getAttribute("data-index");return a==null?-1:Number(a)}componentWillLoad(){this.hasSlottedHeadline=this.hasDirectSlottedChild("headline");this.hasSlottedLeadingIcon=this.hasDirectSlottedChild("leading-icon");this.hasSlottedTrailingIcon=this.hasDirectSlottedChild("trailing-icon")}componentDidLoad(){this.bindSlotListener("headline",(a=>this.hasSlottedHeadline=a));this.bindSlotListener("leading-icon",(a=>this.hasSlottedLeadingIcon=a));this.bindSlotListener("trailing-icon",(a=>this.hasSlottedTrailingIcon=a))}hasDirectSlottedChild(a){const e=this.el.children;for(let i=0;i<e.length;i+=1){if(e[i].getAttribute("slot")===a)return true}return false}bindSlotListener(a,e){const i=this.el.shadowRoot?.querySelector(`slot[name="${a}"]`);if(!i)return;i.addEventListener("slotchange",(()=>{e(i.assignedElements().length>0)}))}onExpandedChange(a){this.mdItemToggle.emit({expanded:a,index:this.index})}async toggle(){if(this.disabled)return;this.expanded=!this.expanded}async focusHeader(){this.headerEl?.focus({focusVisible:true})}get ariaDisabledHeader(){return this.disabled||this.expanded&&!this.collapsible}toggleBlocked(){if(this.disabled)return true;if(this.expanded&&!this.collapsible)return true;return false}render(){const a=!!this.icon||this.hasSlottedLeadingIcon;const e=Math.min(6,Math.max(1,this.headingLevel|0));const i=`h${e}`;const r=this.contentMaxHeight.trim().length>0;return o(n,{key:"7e0d130275287d00316cc915664a9a3c2bc6af29",class:{"md-accordion-item":true,"md-accordion-item--expanded":this.expanded,"md-accordion-item--disabled":this.disabled}},o("span",{key:"f68872307e464bf1014abd1095c7bb6225325e4c",class:"md-accordion-item__chassis-handle",part:"chassis-handle","data-accordion-chassis-drag":"true",role:"presentation","aria-hidden":"true",onClick:this.handleDragHandleClick,onKeyDown:this.handleDragHandleKeyDown},o("span",{key:"80f529008e9c2dd85b7cfa46cbdfc69c105cab42",class:"md-accordion-item__chassis-handle-bar",part:"chassis-handle-bar"})),o(i,{key:"9fd3ff2d9e1a16461fc0db764146401a220c3f64",class:"md-accordion-item__heading",part:"heading"},o("button",{key:"56b3b1a088d0bad367ee9167ea6d6a306b59dc6e",id:this.headerId,class:"md-accordion-item__header",part:"header",type:"button","aria-expanded":String(this.expanded),"aria-controls":this.contentId,"aria-disabled":this.ariaDisabledHeader?"true":undefined,disabled:this.disabled,onClick:this.handleHeaderClick,onKeyDown:this.handleHeaderKeyDown,ref:a=>this.headerEl=a},o("md-ripple",{key:"97f20418eaddc07501a8651182be141c4f20badf",disabled:this.disabled}),o("span",{key:"1bcb8aa3fa536774651a0a8b65f06d1a93f3f46f",class:"md-accordion-item__state-layer",part:"state-layer","aria-hidden":"true"}),o("span",{key:"325ca53f39efab3af2b06acbb386f311c89ea86c",class:"md-accordion-item__drag-handle",part:"drag-handle","data-accordion-drag-handle":"true","aria-hidden":"true",onClick:this.handleDragHandleClick,onKeyDown:this.handleDragHandleKeyDown},o("span",{key:"adf26283784849a9c2de5b59c0445ca802641cb5",class:"material-symbols-outlined md-accordion-item__drag-handle-icon"},"drag_indicator")),a&&o("span",{key:"f4fe7d16b3040d02a154a3426186610505a9cf60",class:"md-accordion-item__leading",part:"leading-icon","aria-hidden":"true"},o("slot",{key:"3cc1f0838a2ba7e0d949aa71803fec6b8d75e4df",name:"leading-icon"},this.icon&&o("span",{key:"5f671046393a2e181234fd8ea8a1f97c710aa276",class:"material-symbols-outlined md-accordion-item__icon"},this.icon))),o("span",{key:"830e7cf3fd8f09ed0f8d0d16db19406912f6a147",class:"md-accordion-item__text"},o("span",{key:"a0fe23593d164997d1e12d6c2eae03bbb1e49827",class:"md-accordion-item__headline",part:"headline"},o("slot",{key:"6577f0f727032f3aceb863411aeb18e9e8fc364f",name:"headline"},this.headline)),(this.supportingText||this.hasSlottedHeadline)&&this.supportingText&&o("span",{key:"b92b3d81df310e18d1e55e602544401b7d8f41fb",class:"md-accordion-item__supporting",part:"supporting-text"},this.supportingText)),o("span",{key:"8c232a8ae8047865e72adbdd8170837106cb14e6",class:"md-accordion-item__trailing",part:"trailing-icon","aria-hidden":"true"},o("slot",{key:"be0a56b7f2e170b84a8854919c6f7e3d7d8d3f55",name:"trailing-icon"},o("svg",{key:"884836d66c65d1b044c0eec819151b7ae7def035",class:"md-accordion-item__chevron",viewBox:"0 0 24 24",width:"24",height:"24",fill:"currentColor","aria-hidden":"true"},o("path",{key:"a4efb141425c414c5b9d20b4e7188cd027d87ca7",d:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"})))))),o("div",{key:"a583ecf306d26550eed28ea577e4e53923d0802a",id:this.contentId,class:"md-accordion-item__panel",part:"panel",role:this.regionRole==="none"?undefined:this.regionRole,"aria-labelledby":this.headerId,"aria-hidden":this.expanded?"false":"true",inert:!this.expanded},o("div",{key:"a475f8b98e22c21a5bdc41ed2d898ab7b3df7eb7",class:"md-accordion-item__content",part:"content"},o("div",{key:"fba1a524a1afd9a7d92ad905324eeaefa1242288",class:{"md-accordion-item__content-inner":true,"md-accordion-item__content-inner--scroll":r},part:"content-inner",tabindex:r?"0":undefined,style:r?{maxBlockSize:this.contentMaxHeight}:undefined},o("slot",{key:"b65e04d26ebcd5cf67450d03211ee25100fa85da"})))))}get el(){return this}static get watchers(){return{expanded:[{onExpandedChange:0}]}}static get style(){return d()}},[257,"md-accordion-item",{headline:[1],supportingText:[1,"supporting-text"],icon:[1],expanded:[1540],disabled:[516],headingLevel:[2,"heading-level"],collapsible:[4],regionRole:[1025,"region-role"],contentMaxHeight:[1,"content-max-height"],density:[514],hasSlottedHeadline:[32],hasSlottedTrailingIcon:[32],hasSlottedLeadingIcon:[32],toggle:[64],focusHeader:[64]},undefined,{expanded:[{onExpandedChange:0}]}]);function l(){if(typeof customElements==="undefined"){return}const a=["md-accordion-item","md-ripple"];a.forEach((a=>{switch(a){case"md-accordion-item":if(!customElements.get(r(a))){customElements.define(r(a),m)}break;case"md-ripple":if(!customElements.get(r(a))){t()}break}}))}l();const p=m;const h=l;export{p as MdAccordionItem,h as defineCustomElement};
+//# sourceMappingURL=md-accordion-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["mdAccordionItemCss","_uid","nextUid","MdAccordionItem","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","headline","supportingText","icon","expanded","disabled","headingLevel","collapsible","regionRole","contentMaxHeight","density","hasSlottedHeadline","hasSlottedTrailingIcon","hasSlottedLeadingIcon","contentId","headerId","handleHeaderClick","toggleBlocked","handleHeaderKeyDown","e","altKey","key","preventDefault","mdItemRequestReorder","emit","direction","from","index","mdItemRequestFocus","handleDragHandleClick","stopPropagation","handleDragHandleKeyDown","v","el","getAttribute","Number","componentWillLoad","hasDirectSlottedChild","componentDidLoad","bindSlotListener","slotName","children","i","length","name","setter","slot","shadowRoot","querySelector","addEventListener","assignedElements","onExpandedChange","value","mdItemToggle","toggle","focusHeader","headerEl","focus","focusVisible","ariaDisabledHeader","render","hasLeading","level","Math","min","max","HeadingTag","scrollable","trim","h","Host","class","part","role","onClick","onKeyDown","id","type","String","undefined","ref","viewBox","width","height","fill","d","inert","tabindex","style","maxBlockSize"],"sources":["src/components/md-accordion-item/md-accordion-item.css?tag=md-accordion-item&encapsulation=shadow","src/components/md-accordion-item/md-accordion-item.tsx"],"sourcesContent":["/* ==========================================================\n   md-accordion-item — single expansible row inside <md-accordion>\n   Built around the MD3 Expressive motion vocabulary: the panel\n   uses the modern `grid-template-rows: 0fr ↔ 1fr` height trick\n   driven by asymmetric emphasized easing (decelerate-on-enter,\n   accelerate-on-exit), the chevron rotates on a spring, and the\n   leading icon swaps to Material Symbols' FILL axis when active.\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-accordion-item-container-color           Item background\n     --md-accordion-item-container-shape           Border-radius (filled variant)\n     --md-accordion-item-header-color              Header bg in resting state\n     --md-accordion-item-header-color-expanded     Header bg when expanded.\n                                                    Defaults to MD3\n                                                    `secondary-container` so the\n                                                    active trigger reads as\n                                                    \"selected\" (same token used\n                                                    by nav drawer, list, etc).\n     --md-accordion-item-headline-color            Headline text colour\n     --md-accordion-item-headline-color-expanded   Color when expanded\n     --md-accordion-item-supporting-color          Supporting-text colour\n     --md-accordion-item-icon-color                Leading & trailing icon colour\n     --md-accordion-item-icon-color-expanded       Icon color when expanded\n     --md-accordion-item-state-layer-color         Hover/focus/press overlay\n     --md-accordion-item-state-layer-color-expanded\n                                                    State-layer colour while\n                                                    expanded — paired with the\n                                                    secondary-container tint\n                                                    so hover/press still reads.\n     --md-accordion-item-header-padding            Inline padding for header\n     --md-accordion-item-content-padding           Inline padding for content area\n     --md-accordion-item-header-min-height         Minimum block-size of header\n     --md-accordion-item-expand-duration           Open animation duration\n     --md-accordion-item-collapse-duration         Close animation duration\n     --md-accordion-item-elevation                 Box-shadow override.\n                                                    Inherits the parent\n                                                    accordion's elevation when\n                                                    in a filled chassis.\n     --md-accordion-item-elevation-expanded        Shadow when the item is\n                                                    expanded (defaults to next\n                                                    M3 level).\n     --md-accordion-item-chassis-handle-color      Glyph colour of the small\n                                                    \"move panel\" grip on the\n                                                    first item of a floating\n                                                    accordion.\n     --md-accordion-item-chassis-handle-bg-hover   Tint shown behind the grip\n                                                    while it is hovered /\n                                                    pressed.\n     --md-accordion-item-container-color-dragging  Opaque fill applied to a\n                                                    tile while it is being\n                                                    drag-reordered. Defaults\n                                                    to surface-container-low\n                                                    so the lifted tile\n                                                    occludes siblings inside\n                                                    floating / outlined\n                                                    chassis (which otherwise\n                                                    make resting items\n                                                    transparent).\n     --md-accordion-item-container-shape-dragging  Border-radius applied to a\n                                                    tile while it is being\n                                                    drag-reordered. Defaults\n                                                    to shape-corner-medium so\n                                                    the lifted tile reads as\n                                                    a card even inside an\n                                                    outlined chassis that\n                                                    flattens resting tiles.\n\n   CSS PARTS:\n     heading          The h3 that wraps the header button.\n     header           The clickable header button.\n     state-layer      Hover/focus/press overlay.\n     drag-handle      Drag grip shown only when the parent\n                      accordion is `reorderable`.\n     chassis-handle   Hit area for the chassis-drag affordance on the\n                      first item of a `floating` accordion. Centered on\n                      the panel's top edge. Press / drag to move the\n                      whole panel around the page.\n     chassis-handle-bar\n                      The slim horizontal grip pill that lives inside\n                      the chassis-handle. Style this part to recolor /\n                      resize the visible affordance — the hit area\n                      stays untouched.\n     leading-icon     Leading icon container.\n     trailing-icon    Trailing chevron container.\n     headline         Headline text.\n     supporting-text  Supporting caption.\n     panel            The region containing the content.\n     content          Inner content wrapper (padding lives here).\n\n   SLOTS:\n     (default)        Expanded content.\n     headline         Replace the headline text with custom markup.\n     leading-icon     Custom leading icon.\n     trailing-icon    Custom trailing icon (chevron).\n   ========================================================== */\n\n:host {\n  --_container-color: var(--md-accordion-item-container-color, var(--md-sys-color-surface-container-low, #F7F2FA));\n  --_container-shape: var(--md-accordion-item-container-shape, var(--md-sys-shape-corner-medium, 12px));\n  --_container-shape-expanded: var(--md-accordion-item-container-shape-expanded, var(--md-sys-shape-corner-large, 16px));\n\n  /* Header tint — transparent at rest (so the host bg shows through),\n     MD3 `secondary-container` when expanded. `secondary-container` is\n     the canonical \"this surface is active/selected\" tone in MD3 — it\n     is the same token used by the nav-drawer active item, list-item\n     selection indicator, segmented-button selected segment, etc.\n     The on-secondary-container pairing guarantees proper text /\n     icon contrast in both light and dark themes. */\n  --_header-color: var(--md-accordion-item-header-color, transparent);\n  --_header-color-expanded: var(--md-accordion-item-header-color-expanded, var(--md-sys-color-secondary-container, #E8DEF8));\n\n  --_headline-color: var(--md-accordion-item-headline-color, var(--md-sys-color-on-surface, #1C1B1F));\n  --_headline-color-expanded: var(--md-accordion-item-headline-color-expanded, var(--md-sys-color-on-secondary-container, #1D192B));\n  --_supporting-color: var(--md-accordion-item-supporting-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_icon-color: var(--md-accordion-item-icon-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_icon-color-expanded: var(--md-accordion-item-icon-color-expanded, var(--md-sys-color-on-secondary-container, #1D192B));\n  --_state-layer-color: var(--md-accordion-item-state-layer-color, var(--md-sys-color-on-surface, #1C1B1F));\n  --_state-layer-color-expanded: var(--md-accordion-item-state-layer-color-expanded, var(--md-sys-color-on-secondary-container, #1D192B));\n  /* Follow a global `data-density` ancestor. The header height is content-\n     floored by its block padding, so BOTH the min-height and the block padding\n     ride density-scale (2px/rung on each padding edge); unchanged at density 0.\n     The parent md-accordion `density` prop (0|-1|-2) overrides via the\n     :host-context blocks below. */\n  --_header-padding: var(--md-accordion-item-header-padding, max(4px, calc(16px + var(--md-sys-density-scale, 0) * 2px)) max(12px, calc(24px + var(--md-sys-density-scale, 0) * 2px)));\n  --_content-padding: var(--md-accordion-item-content-padding, max(8px, calc(20px + var(--md-sys-density-scale, 0) * 2px)) max(12px, calc(24px + var(--md-sys-density-scale, 0) * 2px)));\n  --_header-min-height: var(--md-accordion-item-header-min-height, max(40px, calc(64px + var(--md-sys-density-scale, 0) * 4px)));\n\n  /* MD3 asymmetric motion — open with emphasized-decelerate (the\n     content \"settles into place\"), close with emphasized-accelerate\n     (the content gets out of the way). This is a direct mapping of\n     the Material 3 Expressive Motion guidance. */\n  --_expand-duration: var(--md-accordion-item-expand-duration, var(--md-sys-motion-duration-medium3, 350ms));\n  --_collapse-duration: var(--md-accordion-item-collapse-duration, var(--md-sys-motion-duration-short4, 200ms));\n  --_expand-easing: var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));\n  --_collapse-easing: var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15));\n  --_state-easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n  --_spring-easing: var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));\n  --_spring-duration: var(--md-sys-motion-spring-spatial-default-duration, 500ms);\n\n  /* Elevation — default to flat. The parent accordion's elevation\n     classes (.md-accordion--elevation-N) override these via\n     :host-context further down, so an `md-accordion[elevation=\"3\"]`\n     wrapper propagates the shadow to every filled tile without any\n     extra wiring at the call-site. */\n  --_elevation: var(--md-accordion-item-elevation, var(--md-sys-elevation-0, none));\n  --_elevation-expanded: var(--md-accordion-item-elevation-expanded, var(--_elevation));\n\n  display: block;\n  /* Containing block for the absolutely-positioned chassis-drag\n     handle that floats over the top-leading corner of the first item. */\n  position: relative;\n  background-color: var(--_container-color);\n  border-radius: var(--_container-shape);\n  box-sizing: border-box;\n  font-family: var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);\n  box-shadow: var(--_elevation);\n\n  /* The container itself morphs on expand: subtle radius lift +\n     elevation change → \"lifting off the page\" affordance. */\n  transition:\n    border-radius var(--_expand-duration) var(--_expand-easing),\n    background-color var(--_expand-duration) var(--_expand-easing),\n    box-shadow var(--_expand-duration) var(--_expand-easing);\n  will-change: border-radius;\n}\n\n/* ── Inherit elevation from a filled parent accordion. Outlined parents\n   draw the shadow on their own chassis instead. The expanded shadow is\n   the next M3 elevation level for the classic \"tile lifts when active\"\n   affordance. */\n:host-context(md-accordion.md-accordion--filled.md-accordion--elevation-1) {\n  --_elevation: var(--md-accordion-item-elevation, var(--md-sys-elevation-1));\n  --_elevation-expanded: var(--md-accordion-item-elevation-expanded, var(--md-sys-elevation-2));\n}\n:host-context(md-accordion.md-accordion--filled.md-accordion--elevation-2) {\n  --_elevation: var(--md-accordion-item-elevation, var(--md-sys-elevation-2));\n  --_elevation-expanded: var(--md-accordion-item-elevation-expanded, var(--md-sys-elevation-3));\n}\n:host-context(md-accordion.md-accordion--filled.md-accordion--elevation-3) {\n  --_elevation: var(--md-accordion-item-elevation, var(--md-sys-elevation-3));\n  --_elevation-expanded: var(--md-accordion-item-elevation-expanded, var(--md-sys-elevation-4));\n}\n:host-context(md-accordion.md-accordion--filled.md-accordion--elevation-4) {\n  --_elevation: var(--md-accordion-item-elevation, var(--md-sys-elevation-4));\n  --_elevation-expanded: var(--md-accordion-item-elevation-expanded, var(--md-sys-elevation-5));\n}\n:host-context(md-accordion.md-accordion--filled.md-accordion--elevation-5) {\n  --_elevation: var(--md-accordion-item-elevation, var(--md-sys-elevation-5));\n  --_elevation-expanded: var(--md-accordion-item-elevation-expanded, var(--md-sys-elevation-5));\n}\n\n/* Inside an outlined chassis, items are flush — strip any item-level shadow\n   so we don't double up with the chassis shadow. */\n:host-context(md-accordion.md-accordion--outlined) {\n  --_elevation: none;\n  --_elevation-expanded: none;\n}\n\n:host(.md-accordion-item--expanded) {\n  /* Blend the expanded radius back toward the resting one so\n     `data-shape-morph=\"off\"` / `shape-morph=\"off\"` (§13 tokens.css) holds the\n     tile at its resting corner instead of morphing on expand. Written at the\n     USE site, not on --_container-shape-expanded itself, because the outlined\n     variant legitimately sets both shapes to 0 and must stay square. */\n  border-radius: calc(var(--_container-shape) + var(--md-sys-shape-morph-enabled, 1) * (var(--_container-shape-expanded) - var(--_container-shape)));\n  background-color: var(--md-accordion-item-container-color-expanded,\n    var(--md-sys-color-surface-container, #F3EDF7));\n  box-shadow: var(--_elevation-expanded);\n}\n\n/* When inside an outlined accordion the parent strips the radius\n   so the chassis can read as a single rounded rectangle. We override the\n   internal radius custom props too so the header (and its state-layer) go\n   square along with the host. */\n:host-context(md-accordion.md-accordion--outlined) {\n  --_container-shape: 0;\n  --_container-shape-expanded: 0;\n\n  border-radius: 0;\n  background-color: var(--md-accordion-item-container-color, transparent);\n}\n\n/* Density needs NO per-rung block here. The parent md-accordion maps both its\n   `density` prop and any inherited global `data-density` onto\n   `--md-sys-density-scale`, which crosses the shadow boundary by normal custom-\n   property inheritance — so --_header-min-height / --_header-padding /\n   --_content-padding (§0) already track it by calc.\n\n   A `:host-context(md-accordion.md-accordion--density-N)` ladder used to sit\n   here setting 56/48/44/40 against the formula's 60/56/52/48 — it disagreed at\n   EVERY rung (it dropped 8px on the first step where the library standard is\n   4px), so the prop and a global ancestor rendered different heights. It also\n   relied on :host-context, which Firefox does not implement, so the ladder was\n   silently inert there while the formula worked everywhere. */\n\n/* ==========================================================\n   1. HEADER\n   ========================================================== */\n\n.md-accordion-item__heading {\n  margin: 0;\n  font: inherit;\n}\n\n.md-accordion-item__header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px));\n  inline-size: 100%;\n  min-block-size: var(--_header-min-height);\n  padding: var(--_header-padding);\n  border: none;\n  background-color: var(--_header-color);\n  color: var(--_headline-color);\n  font-family: var(--md-sys-typescale-title-medium-font-family, Roboto, sans-serif);\n  font-size: max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-title-medium-font-weight, 500);\n  line-height: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing, 0.15px);\n  text-align: start;\n  cursor: pointer;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  /* `border-radius: inherit` does NOT walk up to :host through the h3 —\n     `inherit` resolves to the cascade parent's computed value (the h3 has\n     no border-radius set, so it resolves to 0). Use the custom-prop chain\n     directly instead. */\n  border-radius: var(--_container-shape);\n\n  transition:\n    background-color var(--_expand-duration) var(--_expand-easing),\n    color var(--_spring-duration) var(--_spring-easing),\n    border-radius var(--_expand-duration) var(--_expand-easing);\n}\n\n/* State layer — separate element so we can animate opacity\n   independently of the content. */\n.md-accordion-item__state-layer {\n  position: absolute;\n  inset: 0;\n  background-color: var(--_state-layer-color);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--md-sys-motion-spring-effects-default-duration, 200ms) var(--_state-easing);\n}\n\n.md-accordion-item__header:hover .md-accordion-item__state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n.md-accordion-item__header:focus-visible .md-accordion-item__state-layer {\n  opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);\n}\n.md-accordion-item__header:active .md-accordion-item__state-layer {\n  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);\n}\n\n:host(.md-accordion-item--expanded) .md-accordion-item__header {\n  /* MD3 \"selected surface\" treatment — secondary-container tint\n     makes the active trigger row read distinctly from both the\n     collapsed siblings (surface-container-low) and the expanded\n     panel body (surface-container). */\n  background-color: var(--_header-color-expanded);\n  color: var(--_headline-color-expanded);\n  /* When expanded, only round the TOP corners — the bottom edge meets the\n     panel inside the host, so curved bottom corners would leave visible\n     notches showing the host's container colour. */\n  border-start-start-radius: var(--_container-shape-expanded);\n  border-start-end-radius: var(--_container-shape-expanded);\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n}\n\n/* Hover / focus / press state-layer must contrast with the tinted\n   header surface — use on-secondary-container while expanded so the\n   overlay reads correctly. */\n:host(.md-accordion-item--expanded) .md-accordion-item__state-layer {\n  background-color: var(--_state-layer-color-expanded);\n}\n\n.md-accordion-item__header:focus-visible {\n  outline: 3px solid var(--md-sys-color-secondary, #625B71);\n  outline-offset: -3px;\n}\n\n.md-accordion-item__header:disabled,\n:host(.md-accordion-item--disabled) .md-accordion-item__header {\n  cursor: not-allowed;\n  color: color-mix(in srgb, var(--_headline-color) 38%, transparent);\n}\n:host(.md-accordion-item--disabled) .md-accordion-item__state-layer,\n:host(.md-accordion-item--disabled) md-ripple {\n  display: none;\n}\n\n/* Disabled + expanded → fade the highlight to the MD3\n   disabled-container opacity (12%) so the tint reads as\n   \"non-interactive but currently open\" rather than \"active\". */\n:host(.md-accordion-item--disabled.md-accordion-item--expanded) .md-accordion-item__header {\n  background-color: color-mix(\n    in srgb,\n    var(--_header-color-expanded) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%),\n    transparent\n  );\n}\n\n/* ==========================================================\n   1b. DRAG HANDLE — only visible when parent accordion is\n       `reorderable`. Lives inside the header `<button>`, so we\n       neutralise its `click` & `keydown` from bubbling (the TSX\n       does this). Actual drag is managed by the parent via\n       pointerdown on `[data-accordion-drag-handle]`.\n   ========================================================== */\n\n.md-accordion-item__drag-handle {\n  display: none;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  inline-size: 24px;\n  block-size: 24px;\n  flex-shrink: 0;\n  margin-inline-end: -4px;\n  color: var(--_icon-color);\n  cursor: grab;\n  /* Stops touch-drag from scrolling the page on mobile while the\n     user grabs an item. */\n  touch-action: none;\n  opacity: 0.55;\n  transition:\n    opacity var(--_spring-duration) var(--_spring-easing),\n    transform var(--_spring-duration) var(--_spring-easing),\n    color var(--_spring-duration) var(--_spring-easing);\n}\n.md-accordion-item__drag-handle:hover {\n  opacity: 1;\n  color: var(--_headline-color-expanded);\n  transform: scale(1.08);\n}\n.md-accordion-item__drag-handle:active {\n  cursor: grabbing;\n}\n\n.md-accordion-item__drag-handle-icon {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-size: max(16px, calc(22px + var(--md-sys-density-scale, 0) * 1px));\n  line-height: 1;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  -webkit-font-smoothing: antialiased;\n  pointer-events: none;\n}\n\n/* Reveal only when the parent accordion has `reorderable`. The\n   prop is reflected so the attribute is reliably present. */\n:host-context(md-accordion[reorderable]) .md-accordion-item__drag-handle {\n  display: inline-flex;\n}\n\n/* Disabled items can't be moved, so hide the handle.\n   `!important` is used to override the `:host-context(...)` rule\n   above — its `[reorderable]` attribute selector raises its\n   specificity above plain `:host(.class)` in some engines, so\n   without `!important` the handle would still appear on disabled\n   items inside reorderable accordions. */\n:host(.md-accordion-item--disabled) .md-accordion-item__drag-handle {\n  display: none !important;\n}\n\n/* ----------------------------------------------------------\n   Chassis-drag handle\n   ----------------------------------------------------------\n   A slim horizontal grip pill at the TOP-CENTER of the FIRST\n   item of a `floating` accordion — the affordance iOS sheets,\n   macOS Stage Manager, and Android bottom-sheets use. The\n   parent reveals it by setting `data-chassis-handle` only on\n   item 0, so the rest of the accordion keeps its silhouette.\n\n   Two layered elements:\n   - `.md-accordion-item__chassis-handle` is the (deliberately\n      larger) hit area. ~52×16 by default — comfortable touch\n      target without bleeding into the headline.\n   - `.md-accordion-item__chassis-handle-bar` is the visible\n      pill itself: 32×4 at rest, fades / widens on hover &\n      drag. Always centered inside the hit area.\n\n   Public CSS custom properties:\n     --md-accordion-item-chassis-handle-color       Pill colour\n     --md-accordion-item-chassis-handle-bg-hover    Tint behind\n                                                    the bar on\n                                                    hover/press.\n*/\n.md-accordion-item__chassis-handle {\n  /* Hidden by default — the parent reveals it on the first\n     item of a floating accordion. */\n  display: none;\n  position: absolute;\n  inset-block-start: 4px;\n  /*\n    Centre the handle along the inline axis using the modern\n    auto-margin pattern. Anchoring with `inset-inline: 0` and\n    letting `margin-inline: auto` do the work mirrors correctly\n    in RTL — unlike `inset-inline-start: 50% + translateX(-50%)`,\n    where the physical transform doesn't flip with the writing\n    direction and pushes the handle off-centre.\n  */\n  inset-inline: 0;\n  margin-inline: auto;\n  z-index: 3;\n  inline-size: 52px;\n  block-size: 16px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 999px;\n  background-color: transparent;\n  cursor: grab;\n  touch-action: none;\n  user-select: none;\n  transition:\n    background-color var(--_spring-duration) var(--_spring-easing);\n}\n\n:host([data-chassis-handle]) .md-accordion-item__chassis-handle {\n  display: inline-flex;\n}\n\n/* Subtle hover tint behind the bar so the hit area becomes\n   discoverable without ever competing with the headline. */\n.md-accordion-item__chassis-handle:hover {\n  background-color: var(\n    --md-accordion-item-chassis-handle-bg-hover,\n    color-mix(in srgb, var(--_state-layer-color) 10%, transparent)\n  );\n}\n\n.md-accordion-item__chassis-handle:active {\n  cursor: grabbing;\n  background-color: var(\n    --md-accordion-item-chassis-handle-bg-hover,\n    color-mix(in srgb, var(--_state-layer-color) 16%, transparent)\n  );\n}\n\n/* The visible pill */\n.md-accordion-item__chassis-handle-bar {\n  display: block;\n  inline-size: 32px;\n  block-size: 4px;\n  border-radius: 999px;\n  background-color: var(\n    --md-accordion-item-chassis-handle-color,\n    var(--md-sys-color-on-surface-variant, #49454F)\n  );\n  opacity: 0.45;\n  pointer-events: none;\n  transition:\n    inline-size var(--_spring-duration) var(--_spring-easing),\n    opacity var(--_spring-duration) var(--_spring-easing),\n    background-color var(--_expand-duration) var(--_expand-easing);\n}\n\n/* Hover widens & brightens the pill for a tactile \"you can grab\n   this\" hint. Active state pushes it a touch wider still. */\n.md-accordion-item__chassis-handle:hover .md-accordion-item__chassis-handle-bar {\n  opacity: 0.9;\n  inline-size: 38px;\n}\n\n.md-accordion-item__chassis-handle:active .md-accordion-item__chassis-handle-bar {\n  opacity: 1;\n  inline-size: 40px;\n}\n\n/* While the panel is actually being dragged, lock the bar to its\n   fullest state so the user sees the affordance they grabbed.\n   Chassis-drag state lives on the parent <md-accordion>, hence\n   `:host-context`. */\n:host-context(md-accordion.md-accordion--floating-dragging)\n  .md-accordion-item__chassis-handle-bar {\n  opacity: 1;\n  inline-size: 40px;\n  background-color: var(\n    --md-accordion-item-chassis-handle-color,\n    var(--md-sys-color-primary, #6750A4)\n  );\n}\n\n/* When the expanded header switches to secondary-container, adopt\n   the on-secondary-container tone for the bar so it stays legible\n   against the active surface. */\n:host(.md-accordion-item--expanded) .md-accordion-item__chassis-handle-bar {\n  background-color: var(\n    --md-accordion-item-chassis-handle-color,\n    var(--md-sys-color-on-secondary-container, #1D192B)\n  );\n}\n\n/* Forced-colors fallback so the pill remains visible against\n   custom system contrast palettes. */\n@media (forced-colors: active) {\n  .md-accordion-item__chassis-handle-bar {\n    background-color: CanvasText;\n    opacity: 1;\n  }\n}\n\n/* ==========================================================\n   1c. DRAG / REORDER STATES\n   ========================================================== */\n\n/* The currently-grabbed item — lifted with M3 elevation-4, slight\n   tilt for that \"picked up\" feel. The parent applies a live\n   `transform: translateY(...)` inline; we layer `rotate` on top by\n   *not* setting transform here, instead using a child transform-\n   layer would be ideal — but Stencil's shadow root gives us a\n   clean canvas, so we accept that the rotate is omitted while the\n   inline translate is applied. The elevation + colour shift give\n   enough affordance on their own.\n\n   IMPORTANT — opaque fill while dragging:\n     The floating-filled and outlined chassis zero out each item's\n     container-color so the panel reads as one card. That works for\n     resting layout, but during a drag the lifted tile physically\n     overlaps siblings, and a transparent fill lets their text bleed\n     through. We restore an opaque surface fill (and a card radius)\n     here so the dragged tile cleanly occludes whatever it passes\n     over. Specificity (.class on :host) outranks the parent's\n     ::slotted variable override on `--md-accordion-item-container-color`\n     because `background-color` is set as a direct declaration — not\n     via the custom property — at this level. */\n:host(.md-accordion-item--dragging) {\n  z-index: 10;\n  cursor: grabbing;\n  background-color: var(\n    --md-accordion-item-container-color-dragging,\n    var(--md-sys-color-surface-container-low, #F7F2F9)\n  );\n  border-radius: var(\n    --md-accordion-item-container-shape-dragging,\n    var(--md-sys-shape-corner-medium, 12px)\n  );\n  /* Clip inner surfaces to the dragging radius. Without this, an\n     EXPANDED item being dragged paints its secondary-container header\n     tint (and the panel body underneath) as rectangles that bleed past\n     the host's rounded corners — visible as a square halo behind the\n     lifted card. `overflow: hidden` on the host forces the header\n     state-layer, panel body, and any other shadow-tree surface to\n     respect the dragging radius. The inner chassis-handle pill of a\n     floating accordion's first item is clipped during the drag itself,\n     which is acceptable: the user has another grip in hand and the\n     pill snaps back the moment the drag ends. */\n  overflow: hidden;\n  box-shadow:\n    var(--md-sys-elevation-4,\n      0px 6px 10px 4px rgba(0, 0, 0, 0.15),\n      0px 2px 3px rgba(0, 0, 0, 0.3)) !important;\n  /* Suppress the host's normal box-shadow transition so the lift\n     reads as instantaneous. */\n  transition: none !important;\n}\n:host(.md-accordion-item--dragging) .md-accordion-item__header {\n  /* Stop hover / press state-layer from flickering while we drag. */\n  pointer-events: none;\n}\n:host(.md-accordion-item--dragging) .md-accordion-item__drag-handle {\n  opacity: 1;\n  color: var(--_icon-color-expanded);\n}\n\n/* Sibling items shifting to make room — smooth M3 emphasized\n   easing so the items glide rather than jump. */\n:host(.md-accordion-item--shifting) {\n  transition: transform var(--md-sys-motion-duration-short3, 200ms) var(--_state-easing);\n  will-change: transform;\n}\n\n/* ==========================================================\n   2. LEADING & TRAILING SLOTS\n   ========================================================== */\n\n.md-accordion-item__leading {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 24px;\n  block-size: 24px;\n  flex-shrink: 0;\n  color: var(--_icon-color);\n  transition:\n    color var(--_spring-duration) var(--_spring-easing),\n    transform var(--_spring-duration) var(--_spring-easing);\n}\n\n:host(.md-accordion-item--expanded) .md-accordion-item__leading {\n  color: var(--_icon-color-expanded);\n  transform: scale(1.05);\n}\n\n.md-accordion-item__icon {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n  line-height: 1;\n  /* MD3 Expressive trick: when the item is expanded, fade the\n     Material Symbols FILL axis from 0 to 1 — the icon literally\n     \"comes alive\". */\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  transition: font-variation-settings var(--_spring-duration) var(--_spring-easing);\n}\n\n:host(.md-accordion-item--expanded) .md-accordion-item__icon {\n  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;\n}\n\n.md-accordion-item__text {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-inline-size: 0;\n  gap: 2px;\n}\n\n.md-accordion-item__headline {\n  display: block;\n  color: inherit;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.md-accordion-item__supporting {\n  display: block;\n  color: var(--_supporting-color);\n  font-family: var(--md-sys-typescale-body-small-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-body-small-font-weight, 400);\n  line-height: max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n  letter-spacing: var(--md-sys-typescale-body-small-letter-spacing, 0.4px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.md-accordion-item__trailing {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n  block-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n  flex-shrink: 0;\n  color: var(--_icon-color);\n  /* Spring-spatial easing gives the chevron a touch of \"overshoot\"\n     when it rotates — true MD3 Expressive motion. */\n  transition:\n    transform var(--_spring-duration) var(--_spring-easing),\n    color var(--_spring-duration) var(--_spring-easing);\n}\n\n:host(.md-accordion-item--expanded) .md-accordion-item__trailing {\n  transform: rotate(180deg);\n  color: var(--_icon-color-expanded);\n}\n\n/* RTL: chevron mirror so the rotated chevron still points \"down\"\n   when collapsed and \"up\" when expanded. */\n:host([dir=\"rtl\"]) .md-accordion-item__trailing,\n:host-context([dir=\"rtl\"]) .md-accordion-item__trailing {\n  transform: none;\n}\n:host([dir=\"rtl\"].md-accordion-item--expanded) .md-accordion-item__trailing,\n:host-context([dir=\"rtl\"]).md-accordion-item--expanded .md-accordion-item__trailing {\n  transform: rotate(180deg);\n}\n\n/* ==========================================================\n   3. PANEL — grid-rows height animation\n   This is the modern MD3 height-animation pattern: a grid with\n   one row that animates `fr` between 0 and 1, plus an inner\n   `min-height: 0` child so the grid can collapse below intrinsic\n   size. The result is a smooth height transition with NO\n   measurement JS — pure CSS, RTL-safe, and reduced-motion safe.\n   ========================================================== */\n\n.md-accordion-item__panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition:\n    grid-template-rows var(--_collapse-duration) var(--_collapse-easing),\n    opacity var(--_collapse-duration) var(--_collapse-easing);\n  opacity: 0;\n}\n\n:host(.md-accordion-item--expanded) .md-accordion-item__panel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  transition:\n    grid-template-rows var(--_expand-duration) var(--_expand-easing),\n    opacity var(--_expand-duration) var(--_expand-easing);\n}\n\n.md-accordion-item__content {\n  /* This is the grid item — it must have NO padding or border in the\n     block axis, otherwise its intrinsic min-size dominates the `0fr`\n     track and leaves a visible gap below the header when collapsed.\n     All visual padding lives on the inner wrapper one level deeper. */\n  min-block-size: 0;\n  overflow: hidden;\n}\n\n.md-accordion-item__content-inner {\n  padding: var(--_content-padding);\n  color: var(--_supporting-color);\n  font-family: var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);\n  font-size: max(12px, 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(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n\n  /* The inner content also slides down a few pixels — child motion\n     coordinated with parent motion (\"staggered choreography\" per\n     M3 Motion guidance). */\n  transform: translateY(-4px);\n  transition: transform var(--_expand-duration) var(--_expand-easing);\n}\n\n:host(.md-accordion-item--expanded) .md-accordion-item__content-inner {\n  transform: translateY(0);\n}\n\n/* Capped, keyboard-accessible scroll region. When the `content-max-height`\n   prop is set, the panel body scrolls within that block-size (the\n   `max-block-size` is applied inline from the prop) instead of growing to\n   fit. The element also carries `tabindex=\"0\"` (set in the .tsx) so\n   keyboard-only users can scroll it — WCAG 2.1.1 / axe\n   `scrollable-region-focusable`. Only the BLOCK axis scrolls; the inline\n   axis stays clipped so a stray wide child can't spawn a second scrollbar. */\n.md-accordion-item__content-inner--scroll {\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n.md-accordion-item__content-inner--scroll:focus-visible {\n  outline: 3px solid var(--md-sys-color-secondary, #625B71);\n  outline-offset: -3px;\n}\n\n/* ==========================================================\n   3b. TRANSITION PRESETS\n   ----------------------------------------------------------\n   The parent <md-accordion> reflects a `transition` attribute\n   that selects one of five motion presets:\n\n     expressive (default)  full MD3 expressive choreography\n     standard              symmetric `emphasized` easing, no spring\n     fade                  content fades, no spatial morph\n     collapse              pure height collapse, no fade, no spring\n     none                  instant snap (no transitions / animations)\n\n   We implement the variants by re-binding the existing internal\n   timing variables — every place in this file that animates\n   already consumes `--_expand-*`, `--_collapse-*`, and\n   `--_spring-*`, so the presets propagate everywhere without\n   touching individual rules. A small handful of structural\n   tweaks (suppress the inner translateY for `fade`, lock panel\n   opacity at 1 for `collapse`, hard-disable transitions for\n   `none`) finish the picture.\n   ========================================================== */\n\n/* ── Standard — MD3 symmetric `emphasized`, no spring overshoot ── */\n:host-context(md-accordion[transition='standard']) {\n  --_expand-easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n  --_collapse-easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n  --_spring-easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n  --_state-easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n  --_spring-duration: var(--md-sys-motion-duration-medium2, 300ms);\n  --_expand-duration: var(--md-accordion-item-expand-duration, var(--md-sys-motion-duration-medium2, 300ms));\n  --_collapse-duration: var(--md-accordion-item-collapse-duration, var(--md-sys-motion-duration-medium2, 300ms));\n}\n\n/* ── Fade — opacity-led, suppress the inner translateY so the\n       motion reads as a clean cross-fade. Shorter, \"standard\"\n       easing keeps the height movement quiet. ── */\n:host-context(md-accordion[transition='fade']) {\n  --_expand-easing: var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  --_collapse-easing: var(--md-sys-motion-easing-standard, cubic-bezier(0.4, 0, 1, 1));\n  --_spring-easing: var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  --_state-easing: var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  --_spring-duration: var(--md-sys-motion-duration-short3, 175ms);\n  --_expand-duration: var(--md-accordion-item-expand-duration, var(--md-sys-motion-duration-medium2, 300ms));\n  --_collapse-duration: var(--md-accordion-item-collapse-duration, var(--md-sys-motion-duration-short4, 200ms));\n}\n:host-context(md-accordion[transition='fade']) .md-accordion-item__content-inner {\n  /* Drop the staggered translate so only opacity reads */\n  transform: none;\n}\n\n/* ── Collapse — pure height collapse with neutral easing. Lock the\n       panel opacity at 1 so there is no fade, only height. The\n       chevron and leading icon still rotate, but with the same\n       neutral easing — no spring overshoot. ── */\n:host-context(md-accordion[transition='collapse']) {\n  --_expand-easing: cubic-bezier(0, 0, 0.2, 1); /* ease-out */\n  --_collapse-easing: cubic-bezier(0.4, 0, 1, 1); /* ease-in */\n  --_spring-easing: cubic-bezier(0, 0, 0.2, 1);\n  --_state-easing: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */\n  --_spring-duration: var(--md-sys-motion-duration-medium2, 300ms);\n  --_expand-duration: var(--md-accordion-item-expand-duration, var(--md-sys-motion-duration-medium2, 300ms));\n  --_collapse-duration: var(--md-accordion-item-collapse-duration, var(--md-sys-motion-duration-medium2, 300ms));\n}\n:host-context(md-accordion[transition='collapse']) .md-accordion-item__panel,\n:host-context(md-accordion[transition='collapse'].md-accordion-item--expanded)\n  .md-accordion-item__panel {\n  opacity: 1;\n}\n:host-context(md-accordion[transition='collapse']) .md-accordion-item__content-inner {\n  transform: none;\n}\n\n/* ── None — instant. Hard-disable transitions and animations on\n       both the host and every internal element. The panel still\n       expands/collapses (the `grid-template-rows` value flips),\n       but it flips without animation. ── */\n:host-context(md-accordion[transition='none']),\n:host-context(md-accordion[transition='none']) *,\n:host-context(md-accordion[transition='none']) *::before,\n:host-context(md-accordion[transition='none']) *::after {\n  transition: none !important;\n  animation-duration: 0.001ms !important;\n  animation-iteration-count: 1 !important;\n}\n\n/* ==========================================================\n   4. REDUCED MOTION\n   ========================================================== */\n@media (prefers-reduced-motion: reduce) {\n  :host,\n  .md-accordion-item__header,\n  .md-accordion-item__state-layer,\n  .md-accordion-item__leading,\n  .md-accordion-item__icon,\n  .md-accordion-item__trailing,\n  .md-accordion-item__panel,\n  .md-accordion-item__content {\n    transition-duration: 0.01ms !important;\n    animation: none !important;\n  }\n  :host(.md-accordion-item--expanded) .md-accordion-item__leading {\n    transform: none;\n  }\n}\n\n/* ==========================================================\n   5. FORCED COLORS\n   ========================================================== */\n@media (forced-colors: active) {\n  :host {\n    border: 1px solid CanvasText;\n  }\n  .md-accordion-item__header:focus-visible {\n    outline-color: Highlight;\n  }\n  .md-accordion-item__state-layer {\n    display: 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  State,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n} from '@stencil/core';\n\nlet _uid = 0;\nconst nextUid = () => `md-acc-item-${++_uid}`;\n\n@Component({\n  tag: 'md-accordion-item',\n  styleUrl: 'md-accordion-item.css',\n  shadow: true,\n})\nexport class MdAccordionItem {\n  @Element() el!: HTMLElement;\n\n  /** Header text (or use the `headline` slot). */\n  @Prop() headline: string = '';\n\n  /** Optional small caption below the headline. */\n  @Prop({ attribute: 'supporting-text' }) supportingText: string = '';\n\n  /** Optional leading-icon (Material Symbols shorthand). */\n  @Prop() icon: string = '';\n\n  /** Whether the item is expanded. Two-way bindable. */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Disable interaction. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * ARIA heading level (`aria-level`) for the item's heading wrapper.\n   * Renders a native `<h1>`–`<h6>` so the implicit semantics match the\n   * page's information architecture. Per WAI-ARIA APG: \"an element with\n   * role heading that has a value set for aria-level that is\n   * appropriate for the information architecture of the page\".\n   *\n   * Set per-item, or let the parent `<md-accordion heading-level>`\n   * propagate the same value to every item.\n   */\n  @Prop({ attribute: 'heading-level' }) headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n  /**\n   * Whether the item can be collapsed when it is expanded. Set to\n   * `false` to implement the APG variant where the accordion does not\n   * permit a panel to be collapsed — the open button then advertises\n   * `aria-disabled=\"true\"`, and Enter / Space / click no longer toggle\n   * it. Typically managed by the parent's `keep-one-expanded` mode.\n   */\n  @Prop() collapsible: boolean = true;\n\n  /**\n   * Role applied to the accordion panel. APG recommends `region` for\n   * structural clarity, but warns against using it when more than ~6\n   * panels can be open at once (landmark proliferation). The parent\n   * `<md-accordion region>` orchestrates this automatically.\n   *\n   * - `region` (default) — full landmark semantics.\n   * - `group` — semantically a group but not a landmark.\n   * - `none` — drop the role entirely (still labelled via aria-labelledby).\n   */\n  @Prop({ mutable: true, attribute: 'region-role' }) regionRole:\n    | 'region'\n    | 'group'\n    | 'none' = 'region';\n\n  /**\n   * Cap the panel body's block-size (e.g. `\"220px\"`, `\"40vh\"`). When set,\n   * the content region becomes a scroll container instead of growing to\n   * fit — and, crucially, it is made keyboard-focusable (`tabindex=\"0\"`)\n   * so keyboard-only users can scroll it. A scrollable region whose\n   * content isn't itself focusable is otherwise unreachable without a\n   * pointer (WCAG 2.1.1 — axe `scrollable-region-focusable`). Its\n   * accessible name comes from the enclosing labelled panel region.\n   *\n   * Prefer this over hand-rolling a slotted `overflow:auto` wrapper: an\n   * authored scroll `<div>` lives in light DOM the component can't make\n   * focusable, so it would trip the same axe rule. Leave empty (default)\n   * for a panel that grows to fit its content.\n   */\n  @Prop({ attribute: 'content-max-height' }) contentMaxHeight: 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  /**\n   * Emitted whenever the item toggles. The parent `md-accordion` uses\n   * this to coordinate exclusive mode.\n   */\n  @Event() mdItemToggle: EventEmitter<{ expanded: boolean; index: number }>;\n\n  /**\n   * Internal event the parent listens to for arrow-key roving focus.\n   * Bubbles + composed so the parent receives it through the shadow.\n   */\n  @Event({ bubbles: true, composed: true })\n  mdItemRequestFocus: EventEmitter<{\n    direction: 'next' | 'prev' | 'first' | 'last';\n    from: number;\n  }>;\n\n  /**\n   * Internal event the parent listens to for Alt+Arrow keyboard\n   * reordering. Bubbles + composed so the parent receives it\n   * through the shadow.\n   */\n  @Event({ bubbles: true, composed: true })\n  mdItemRequestReorder: EventEmitter<{\n    direction: 'up' | 'down';\n    from: number;\n  }>;\n\n  @State() private hasSlottedHeadline = false;\n  @State() private hasSlottedTrailingIcon = false;\n  @State() private hasSlottedLeadingIcon = false;\n\n  private readonly contentId = nextUid();\n  private readonly headerId = `${this.contentId}-header`;\n  private headerEl?: HTMLButtonElement;\n\n  private get index(): number {\n    const v = this.el.getAttribute('data-index');\n    return v == null ? -1 : Number(v);\n  }\n\n  componentWillLoad() {\n    this.hasSlottedHeadline = this.hasDirectSlottedChild('headline');\n    this.hasSlottedLeadingIcon = this.hasDirectSlottedChild('leading-icon');\n    this.hasSlottedTrailingIcon = this.hasDirectSlottedChild('trailing-icon');\n  }\n\n  componentDidLoad() {\n    this.bindSlotListener('headline', (v) => (this.hasSlottedHeadline = v));\n    this.bindSlotListener('leading-icon', (v) => (this.hasSlottedLeadingIcon = v));\n    this.bindSlotListener('trailing-icon', (v) => (this.hasSlottedTrailingIcon = v));\n  }\n\n  private hasDirectSlottedChild(slotName: string): boolean {\n    const children = this.el.children;\n    for (let i = 0; i < children.length; i += 1) {\n      if (children[i].getAttribute('slot') === slotName) return true;\n    }\n    return false;\n  }\n\n  private bindSlotListener(name: string, setter: (b: boolean) => void) {\n    const slot = this.el.shadowRoot?.querySelector(\n      `slot[name=\"${name}\"]`,\n    ) as HTMLSlotElement | null;\n    if (!slot) return;\n    slot.addEventListener('slotchange', () => {\n      setter(slot.assignedElements().length > 0);\n    });\n  }\n\n  @Watch('expanded')\n  onExpandedChange(value: boolean) {\n    this.mdItemToggle.emit({ expanded: value, index: this.index });\n  }\n\n  /** Programmatically toggle the item. */\n  @Method()\n  async toggle(): Promise<void> {\n    if (this.disabled) return;\n    this.expanded = !this.expanded;\n  }\n\n  /**\n   * Move keyboard focus to the item's header.\n   *\n   * Uses `{ focusVisible: true }` so the focus ring is painted even when\n   * the call originates from a mouse-driven action (e.g. another button\n   * in the page calling `await item.focusHeader()`). Without it, browsers\n   * inherit the last input modality and skip the focus-visible ring on\n   * mouse-initiated programmatic focus, leaving the user wondering whether\n   * the call did anything. The option is supported in evergreen Chromium\n   * (137+), Firefox (134+) and Safari (17.4+); older runtimes ignore it\n   * harmlessly and fall back to the prior behaviour.\n   */\n  @Method()\n  async focusHeader(): Promise<void> {\n    this.headerEl?.focus({ focusVisible: true } as FocusOptions);\n  }\n\n  /**\n   * `true` when the button must advertise itself as un-actionable even\n   * though it still receives focus (so screen readers can announce\n   * state). Native `disabled` is reserved for the developer-set\n   * `disabled` prop, because a natively-disabled button is unreachable\n   * by keyboard — APG wants the locked-open button to still be focusable\n   * so users can hear that it is the open panel.\n   */\n  private get ariaDisabledHeader(): boolean {\n    return this.disabled || (this.expanded && !this.collapsible);\n  }\n\n  /**\n   * Whether the next toggle attempt would be rejected. Used to guard\n   * click / Enter / Space so the implementation matches the ARIA\n   * advertisement of \"can't be collapsed\".\n   */\n  private toggleBlocked(): boolean {\n    if (this.disabled) return true;\n    if (this.expanded && !this.collapsible) return true;\n    return false;\n  }\n\n  private handleHeaderClick = () => {\n    if (this.toggleBlocked()) return;\n    this.expanded = !this.expanded;\n  };\n\n  private handleHeaderKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n    // Alt+ArrowUp/Down → ask the parent to reorder this item.\n    // Only meaningful when the parent has `reorderable` set; the parent\n    // ignores the event otherwise.\n    if (e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {\n      e.preventDefault();\n      this.mdItemRequestReorder.emit({\n        direction: e.key === 'ArrowUp' ? 'up' : 'down',\n        from: this.index,\n      });\n      return;\n    }\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        if (this.toggleBlocked()) return;\n        this.expanded = !this.expanded;\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        this.mdItemRequestFocus.emit({ direction: 'next', from: this.index });\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        this.mdItemRequestFocus.emit({ direction: 'prev', from: this.index });\n        break;\n      case 'Home':\n        e.preventDefault();\n        this.mdItemRequestFocus.emit({ direction: 'first', from: this.index });\n        break;\n      case 'End':\n        e.preventDefault();\n        this.mdItemRequestFocus.emit({ direction: 'last', from: this.index });\n        break;\n    }\n  };\n\n  /**\n   * Drag handles live INSIDE the header `<button>`, so a tap on the\n   * handle would normally also fire the button click and toggle the\n   * panel. We block click + keydown from bubbling out of the handle\n   * — the actual drag is managed by the parent accordion via\n   * pointerdown on the bubbling event path.\n   */\n  private handleDragHandleClick = (e: MouseEvent) => {\n    e.stopPropagation();\n  };\n  private handleDragHandleKeyDown = (e: KeyboardEvent) => {\n    e.stopPropagation();\n  };\n\n  render() {\n    const hasLeading = !!this.icon || this.hasSlottedLeadingIcon;\n    // Clamp heading-level to a valid 1..6 range; render the matching\n    // native heading element so the implicit `aria-level` is correct\n    // without us having to emit an explicit `aria-level` attribute.\n    const level = Math.min(6, Math.max(1, this.headingLevel | 0));\n    const HeadingTag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n    // A capped panel body scrolls; it must be keyboard-reachable so\n    // arrow keys can scroll it (WCAG 2.1.1 / axe scrollable-region-focusable).\n    const scrollable = this.contentMaxHeight.trim().length > 0;\n    return (\n      <Host\n        class={{\n          'md-accordion-item': true,\n          'md-accordion-item--expanded': this.expanded,\n          'md-accordion-item--disabled': this.disabled,\n        }}\n      >\n        {/*\n          Chassis-drag handle — a slim horizontal grip pill, centered at the\n          top edge of the first item (the parent reveals it via\n          `data-chassis-handle`). Same affordance iOS / macOS / Android use\n          for \"drag this sheet\". Lives OUTSIDE the heading button so pressing\n          it doesn't also fire the expand toggle. `data-accordion-chassis-drag`\n          is the convention the parent looks for in `composedPath`.\n\n          Two parts ship: the outer span is the (intentionally larger) hit\n          area, the inner span is the visible pill. Consumers can restyle\n          either via `::part(chassis-handle)` / `::part(chassis-handle-bar)`.\n        */}\n        <span\n          class=\"md-accordion-item__chassis-handle\"\n          part=\"chassis-handle\"\n          data-accordion-chassis-drag=\"true\"\n          role=\"presentation\"\n          aria-hidden=\"true\"\n          onClick={this.handleDragHandleClick}\n          onKeyDown={this.handleDragHandleKeyDown}\n        >\n          <span class=\"md-accordion-item__chassis-handle-bar\" part=\"chassis-handle-bar\"></span>\n        </span>\n        <HeadingTag class=\"md-accordion-item__heading\" part=\"heading\">\n          <button\n            id={this.headerId}\n            class=\"md-accordion-item__header\"\n            part=\"header\"\n            type=\"button\"\n            aria-expanded={String(this.expanded)}\n            aria-controls={this.contentId}\n            aria-disabled={this.ariaDisabledHeader ? 'true' : undefined}\n            disabled={this.disabled}\n            onClick={this.handleHeaderClick}\n            onKeyDown={this.handleHeaderKeyDown}\n            ref={(el) => (this.headerEl = el)}\n          >\n            <md-ripple disabled={this.disabled}></md-ripple>\n            <span class=\"md-accordion-item__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n            <span\n              class=\"md-accordion-item__drag-handle\"\n              part=\"drag-handle\"\n              data-accordion-drag-handle=\"true\"\n              aria-hidden=\"true\"\n              onClick={this.handleDragHandleClick}\n              onKeyDown={this.handleDragHandleKeyDown}\n            >\n              <span class=\"material-symbols-outlined md-accordion-item__drag-handle-icon\">\n                drag_indicator\n              </span>\n            </span>\n            {hasLeading && (\n              <span class=\"md-accordion-item__leading\" part=\"leading-icon\" aria-hidden=\"true\">\n                <slot name=\"leading-icon\">\n                  {this.icon && (\n                    <span class=\"material-symbols-outlined md-accordion-item__icon\">\n                      {this.icon}\n                    </span>\n                  )}\n                </slot>\n              </span>\n            )}\n            <span class=\"md-accordion-item__text\">\n              <span class=\"md-accordion-item__headline\" part=\"headline\">\n                <slot name=\"headline\">{this.headline}</slot>\n              </span>\n              {(this.supportingText || this.hasSlottedHeadline) && this.supportingText && (\n                <span class=\"md-accordion-item__supporting\" part=\"supporting-text\">\n                  {this.supportingText}\n                </span>\n              )}\n            </span>\n            <span class=\"md-accordion-item__trailing\" part=\"trailing-icon\" aria-hidden=\"true\">\n              <slot name=\"trailing-icon\">\n                <svg\n                  class=\"md-accordion-item__chevron\"\n                  viewBox=\"0 0 24 24\"\n                  width=\"24\"\n                  height=\"24\"\n                  fill=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\" />\n                </svg>\n              </slot>\n            </span>\n          </button>\n        </HeadingTag>\n        <div\n          id={this.contentId}\n          class=\"md-accordion-item__panel\"\n          part=\"panel\"\n          role={this.regionRole === 'none' ? undefined : this.regionRole}\n          aria-labelledby={this.headerId}\n          aria-hidden={this.expanded ? 'false' : 'true'}\n          inert={!this.expanded}\n        >\n          <div class=\"md-accordion-item__content\" part=\"content\">\n            <div\n              class={{\n                'md-accordion-item__content-inner': true,\n                'md-accordion-item__content-inner--scroll': scrollable,\n              }}\n              part=\"content-inner\"\n              // When the panel body is capped it becomes a scroll\n              // container; `tabindex=\"0\"` makes it keyboard-scrollable\n              // (axe scrollable-region-focusable). Its accessible name is\n              // provided by the enclosing labelled panel region, so no\n              // extra role/label is needed here.\n              tabindex={scrollable ? '0' : undefined}\n              style={scrollable ? { maxBlockSize: this.contentMaxHeight } : undefined}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{p as i,t,H as e,c as o,h as s,d as n}from"./p-bSpXNc5J.js";const a=()=>`:host{--_gap:var(--md-accordion-gap, var(--md-sys-spacing-gap-sm, 8px));--_outline-color:var(--md-accordion-outline-color, var(--md-sys-color-outline-variant, #CAC4D0));--_container-shape:var(--md-accordion-container-shape, max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px)));--_elevation:var(--md-accordion-elevation, var(--md-sys-elevation-0, none));--_elevation-easing:var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));--_drop-placeholder-color:var(--md-accordion-drop-placeholder-color, color-mix(in srgb, var(--md-sys-color-primary-container, #eaddff) 45%, transparent));--_drop-placeholder-outline-color:var(--md-accordion-drop-placeholder-outline-color, color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 55%, transparent));--_drop-placeholder-outline-width:var(--md-accordion-drop-placeholder-outline-width, 2px);--_drop-placeholder-shape:var(--md-accordion-drop-placeholder-shape, var(--_container-shape));--_drop-placeholder-opacity:var(--md-accordion-drop-placeholder-opacity, 1);--_elevation-duration:var(--md-sys-motion-duration-medium2, 300ms);display:block;inline-size:100%}: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}:host{box-sizing:border-box;font-family:var(--md-sys-typescale-body-large-font, Roboto, sans-serif);color:var(--md-sys-color-on-surface, #1C1B1F);position:relative}.md-accordion__drop-placeholder{position:absolute;inset-inline:0;inset-block-start:0;z-index:0;box-sizing:border-box;pointer-events:none;border-radius:var(--_drop-placeholder-shape);background-color:var(--_drop-placeholder-color);border:var(--_drop-placeholder-outline-width) dashed var(--_drop-placeholder-outline-color);opacity:var(--_drop-placeholder-opacity);transition:transform var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@media (prefers-reduced-motion: reduce){.md-accordion__drop-placeholder{transition:none}}:host(.md-accordion--elevation-1){--_elevation:var(--md-accordion-elevation, var(--md-sys-elevation-1))}:host(.md-accordion--elevation-2){--_elevation:var(--md-accordion-elevation, var(--md-sys-elevation-2))}:host(.md-accordion--elevation-3){--_elevation:var(--md-accordion-elevation, var(--md-sys-elevation-3))}:host(.md-accordion--elevation-4){--_elevation:var(--md-accordion-elevation, var(--md-sys-elevation-4))}:host(.md-accordion--elevation-5){--_elevation:var(--md-accordion-elevation, var(--md-sys-elevation-5))}:host(.md-accordion--filled){display:flex;flex-direction:column;row-gap:var(--_gap)}:host(.md-accordion--filled) ::slotted(md-accordion-item){display:block}:host(.md-accordion--outlined){border:1px solid var(--_outline-color);border-radius:var(--_container-shape);overflow:hidden;box-shadow:var(--_elevation);transition:box-shadow var(--_elevation-duration) var(--_elevation-easing)}:host(.md-accordion--outlined) ::slotted(md-accordion-item){display:block;border-block-end:1px solid var(--_outline-color)}:host(.md-accordion--outlined) ::slotted(md-accordion-item:last-child){border-block-end:none}:host([transition='none']),:host([transition='none']) *{transition:none !important;animation-duration:0.001ms !important}:host(.md-accordion--floating){--_floating-bg:var(--md-accordion-floating-bg, var(--md-sys-color-surface-container-low, #F7F2F9));--_floating-elevation:var(--md-accordion-floating-elevation, var(--md-sys-elevation-3, 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.3)));--_floating-elevation-active:var(--md-accordion-floating-elevation-active, var(--md-sys-elevation-5, 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px 0 rgba(0, 0, 0, 0.3)));--_floating-width:var(--md-accordion-floating-width, 360px);--_floating-radius:var(--md-accordion-floating-radius, var(--md-sys-shape-corner-large, 16px));position:fixed;top:0;left:0;z-index:1000;inline-size:var(--_floating-width);max-inline-size:calc(100vw - 16px);background-color:var(--_floating-bg);border-radius:var(--_floating-radius);box-shadow:var(--_floating-elevation);overflow:hidden;will-change:transform;transition:box-shadow var(--_elevation-duration) var(--_elevation-easing),     border-radius var(--_elevation-duration) var(--_elevation-easing)}:host(.md-accordion--floating){inline-size:var(--_floating-width)}:host(.md-accordion--floating-dragging){box-shadow:var(--_floating-elevation-active);transform-origin:top left;cursor:grabbing}:host(.md-accordion--floating-dragging) ::slotted(*){user-select:none}:host(.md-accordion--floating.md-accordion--filled) ::slotted(md-accordion-item){margin-block-end:0;--md-accordion-item-container-shape:0;--md-accordion-item-container-shape-expanded:0;--md-accordion-item-container-color:transparent;--md-accordion-item-elevation:none;--md-accordion-item-elevation-expanded:none}:host(.md-accordion--floating.md-accordion--outlined){border:none}@media (prefers-reduced-motion: reduce){:host(.md-accordion--floating){transition:none}}@media (forced-colors: active){:host(.md-accordion--floating){border:1px solid CanvasText}}`;let r=1e3;const d=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.__attachShadow();this.mdToggle=o(this,"mdToggle",7);this.mdReorder=o(this,"mdReorder",7);this.mdDragStart=o(this,"mdDragStart",7);this.mdDragMove=o(this,"mdDragMove",7);this.mdDragEnd=o(this,"mdDragEnd",7);this.variant="filled";this.density=0;this.elevation=0;this.reorderable=false;this.floating=false;this.initialX=24;this.initialY=24;this.bringToFront=true;this.exclusive=false;this.keepOneExpanded=false;this.headingLevel=3;this.region="auto";this.regionThreshold=6;this.transition="expressive";this.defaultExpanded="";this.chassisX=0;this.chassisY=0;this.chassisDragging=false;this.dropPlaceholder=null;this.items=[];this.originalOrder=[];this.dragState=null;this.chassisDragState=null;this.onPointerDown=i=>{if(i.button!==0)return;const t=i.composedPath();if(this.reorderable){const e=t.find((i=>i?.dataset?.accordionDragHandle==="true"));if(e){this.startItemDrag(i,t);return}}if(this.floating){const e=t.find((i=>i?.dataset?.accordionChassisDrag==="true"));if(e){this.startChassisDrag(i);return}}};this.onChassisPointerMove=i=>{const t=this.chassisDragState;if(!t)return;const e=i.clientX-t.startClientX;const o=i.clientY-t.startClientY;this.chassisX=t.startX+e;this.chassisY=t.startY+o;this.mdDragMove.emit({clientX:i.clientX,clientY:i.clientY,x:this.chassisX,y:this.chassisY,dx:e,dy:o})};this.onChassisPointerUp=i=>{const t=this.chassisDragState;if(!t)return;this.el.removeEventListener("pointermove",this.onChassisPointerMove);this.el.removeEventListener("pointerup",this.onChassisPointerUp);this.el.removeEventListener("pointercancel",this.onChassisPointerUp);try{this.el.releasePointerCapture(t.pointerId)}catch{}const e=i.clientX-t.startClientX;const o=i.clientY-t.startClientY;this.chassisDragState=null;this.chassisDragging=false;this.mdDragEnd.emit({clientX:i.clientX,clientY:i.clientY,x:this.chassisX,y:this.chassisY,dx:e,dy:o})};this.onPointerMove=i=>{const t=this.dragState;if(!t)return;const e=i.clientY-t.startY;t.item.style.transform=`translateY(${e}px)`;const o=t.startRects[t.fromIndex];const s=o.top+o.height/2+e;let n=t.fromIndex;if(e>0){for(let i=t.fromIndex+1;i<this.items.length;i++){const e=t.startRects[i];if(s>e.top+e.height/2)n=i;else break}}else if(e<0){for(let i=t.fromIndex-1;i>=0;i--){const e=t.startRects[i];if(s<e.top+e.height/2)n=i;else break}}if(n!==t.currentTarget){t.currentTarget=n;this.applySiblingShifts();this.dropPlaceholder={top:t.startRects[n].top-t.hostTop,height:t.startRects[t.fromIndex].height}}};this.onPointerUp=i=>{const t=this.dragState;if(!t)return;this.el.removeEventListener("pointermove",this.onPointerMove);this.el.removeEventListener("pointerup",this.onPointerUp);this.el.removeEventListener("pointercancel",this.onPointerUp);try{this.el.releasePointerCapture(i.pointerId)}catch{}this.items.forEach((i=>{i.style.transform="";i.classList.remove("md-accordion-item--shifting")}));t.item.classList.remove("md-accordion-item--dragging");this.dropPlaceholder=null;if(t.currentTarget!==t.fromIndex){this.moveItem(t.fromIndex,t.currentTarget);this.emitReorder(t.fromIndex,t.currentTarget)}this.dragState=null};this.onKeyboardReorder=i=>{if(!this.reorderable)return;const{direction:t,from:e}=i.detail;const o=t==="up"?e-1:e+1;if(o<0||o>=this.items.length)return;this.moveItem(e,o);this.items[o]?.focusHeader();this.emitReorder(e,o)}}connectedCallback(){this.collectItems();this.el.addEventListener("pointerdown",this.onPointerDown);this.el.addEventListener("mdItemRequestReorder",this.onKeyboardReorder)}disconnectedCallback(){this.el.removeEventListener("pointerdown",this.onPointerDown);this.el.removeEventListener("mdItemRequestReorder",this.onKeyboardReorder);this.cancelDrag()}componentDidLoad(){this.collectItems();this.originalOrder=[...this.items];this.assignIndexes();this.applyInitialState();this.syncChildren();if(this.floating){this.chassisX=this.initialX;this.chassisY=this.initialY;if(this.bringToFront){this.el.style.zIndex=String(++r)}}}onFloatingChange(i){if(i){this.chassisX=this.initialX;this.chassisY=this.initialY}else{this.chassisX=0;this.chassisY=0;this.el.style.zIndex=""}this.applyChassisHandleMarker()}onExclusiveChange(i){if(!i)return;let t=false;this.items.forEach((i=>{if(i.expanded){if(t)i.expanded=false;else t=true}}))}onChildToggle(i){const{expanded:t,index:e}=i.detail;if(this.exclusive&&t){this.items.forEach(((i,t)=>{if(t!==e)i.expanded=false}))}this.syncCollapsible();const o=this.items.map(((i,t)=>i.expanded?t:-1)).filter((i=>i>=0));this.mdToggle.emit({index:e,expanded:t,expandedIndices:o})}onChildRequestFocus(i){const{direction:t,from:e}=i.detail;if(this.items.length===0)return;let o;if(t==="first")o=0;else if(t==="last")o=this.items.length-1;else if(t==="next")o=(e+1)%this.items.length;else o=(e-1+this.items.length)%this.items.length;this.items[o]?.focusHeader()}collectItems(){const i=[];const t=this.el.children;for(let e=0;e<t.length;e+=1){const o=t[e];if(o&&o.tagName==="MD-ACCORDION-ITEM"){i.push(o)}}this.items=i}assignIndexes(){this.items.forEach(((i,t)=>{i.setAttribute("data-index",String(t))}));this.applyChassisHandleMarker()}applyChassisHandleMarker(){this.items.forEach(((i,t)=>{if(this.floating&&t===0){i.setAttribute("data-chassis-handle","")}else{i.removeAttribute("data-chassis-handle")}}))}startItemDrag(i,t){const e=t.find((i=>i?.tagName==="MD-ACCORDION-ITEM"));if(!e||e.hasAttribute("disabled"))return;this.collectItems();const o=this.items.indexOf(e);if(o<0||this.items.length<2)return;i.preventDefault();const s=this.items.map((i=>i.getBoundingClientRect()));const n=s[o];const a=o<this.items.length-1?s[o+1]:s[o-1];const r=a&&o<this.items.length-1?a.top-n.top:n.top-(a?.top??n.top);const d=this.el.getBoundingClientRect().top;this.dragState={item:e,pointerId:i.pointerId,startY:i.clientY,startRects:s,shiftDistance:Math.abs(r)||n.height,fromIndex:o,currentTarget:o,hostTop:d};this.dropPlaceholder={top:n.top-d,height:n.height};try{this.el.setPointerCapture(i.pointerId)}catch{}this.el.addEventListener("pointermove",this.onPointerMove);this.el.addEventListener("pointerup",this.onPointerUp);this.el.addEventListener("pointercancel",this.onPointerUp);e.classList.add("md-accordion-item--dragging");this.items.forEach((i=>{if(i!==e)i.classList.add("md-accordion-item--shifting")}))}startChassisDrag(i){if(this.chassisDragState)return;i.preventDefault();this.chassisDragState={pointerId:i.pointerId,startClientX:i.clientX,startClientY:i.clientY,startX:this.chassisX,startY:this.chassisY};this.chassisDragging=true;if(this.bringToFront){this.el.style.zIndex=String(++r)}try{this.el.setPointerCapture(i.pointerId)}catch{}this.el.addEventListener("pointermove",this.onChassisPointerMove);this.el.addEventListener("pointerup",this.onChassisPointerUp);this.el.addEventListener("pointercancel",this.onChassisPointerUp);this.mdDragStart.emit({clientX:i.clientX,clientY:i.clientY,x:this.chassisX,y:this.chassisY,dx:0,dy:0})}applySiblingShifts(){const i=this.dragState;if(!i)return;this.items.forEach(((t,e)=>{if(t===i.item)return;let o=0;if(i.currentTarget>i.fromIndex&&e>i.fromIndex&&e<=i.currentTarget){o=-i.shiftDistance}else if(i.currentTarget<i.fromIndex&&e<i.fromIndex&&e>=i.currentTarget){o=i.shiftDistance}t.style.transform=o?`translateY(${o}px)`:""}))}cancelDrag(){const i=this.dragState;if(!i)return;this.el.removeEventListener("pointermove",this.onPointerMove);this.el.removeEventListener("pointerup",this.onPointerUp);this.el.removeEventListener("pointercancel",this.onPointerUp);this.items.forEach((i=>{i.style.transform="";i.classList.remove("md-accordion-item--shifting")}));i.item.classList.remove("md-accordion-item--dragging");this.dropPlaceholder=null;this.dragState=null}moveItem(i,t){if(i===t)return;const e=this.items[i];if(!e)return;const o=t>i?this.items[t].nextElementSibling:this.items[t];this.el.insertBefore(e,o);this.collectItems();this.assignIndexes()}emitReorder(i,t){const e=this.items.map((i=>this.originalOrder.indexOf(i)));this.mdReorder.emit({from:i,to:t,order:e})}applyInitialState(){const i=(this.defaultExpanded||"").split(",").map((i=>i.trim())).filter((i=>i.length>0)).map((i=>Number(i))).filter((i=>Number.isInteger(i)&&i>=0));const t=new Set;this.items.forEach(((e,o)=>{if(i.includes(o)||e.expanded)t.add(o)}));if(this.exclusive&&t.size>1){const i=Math.min(...t);t.clear();t.add(i)}if(this.keepOneExpanded&&t.size===0){const i=this.items.findIndex((i=>!i.disabled));if(i>=0)t.add(i)}this.items.forEach(((i,e)=>{const o=t.has(e);if(i.expanded!==o)i.expanded=o}))}computeRegionRole(){if(this.region==="always")return"region";if(this.region==="never")return"group";return this.items.length<=this.regionThreshold?"region":"group"}syncChildren(){const i=this.computeRegionRole();this.items.forEach((t=>{t.headingLevel=this.headingLevel;t.regionRole=i}));this.syncCollapsible()}syncCollapsible(){if(!this.keepOneExpanded){this.items.forEach((i=>i.collapsible=true));return}const i=this.items.filter((i=>i.expanded));if(i.length===1){this.items.forEach((t=>t.collapsible=t!==i[0]))}else{this.items.forEach((i=>i.collapsible=true))}}onHeadingLevelChange(){this.syncChildren()}onRegionChange(){this.syncChildren()}onRegionThresholdChange(){this.syncChildren()}onKeepOneExpandedChange(i){if(i&&!this.items.some((i=>i.expanded))){const i=this.items.find((i=>!i.disabled));if(i)i.expanded=true}this.syncCollapsible()}render(){const i=this.floating?{transform:`translate3d(${this.chassisX}px, ${this.chassisY}px, 0)`}:{};return s(n,{key:"342097108ef3bffebeffa47367efe80636615ee3",class:{"md-accordion":true,[`md-accordion--${this.variant}`]:true,[`md-accordion--density-${Math.abs(this.density)}`]:this.density!==0,[`md-accordion--elevation-${this.elevation}`]:this.elevation>0,"md-accordion--floating":this.floating,"md-accordion--floating-dragging":this.chassisDragging},role:"presentation",style:i},this.dropPlaceholder&&s("div",{key:"65e0fb6964c0805727b9f95e41292f143ebf9dd1",class:"md-accordion__drop-placeholder",part:"drop-placeholder","aria-hidden":"true",style:{transform:`translateY(${this.dropPlaceholder.top}px)`,blockSize:`${this.dropPlaceholder.height}px`}}),s("slot",{key:"3db7cab95c7a2ea79ec38b3172d0d0f10c993e8c"}))}get el(){return this}static get watchers(){return{floating:[{onFloatingChange:0}],exclusive:[{onExclusiveChange:0}],headingLevel:[{onHeadingLevelChange:0}],region:[{onRegionChange:0}],regionThreshold:[{onRegionThresholdChange:0}],keepOneExpanded:[{onKeepOneExpandedChange:0}]}}static get style(){return a()}},[257,"md-accordion",{variant:[513],density:[514],elevation:[514],reorderable:[516],floating:[516],initialX:[2,"initial-x"],initialY:[2,"initial-y"],bringToFront:[4,"bring-to-front"],exclusive:[516],keepOneExpanded:[516,"keep-one-expanded"],headingLevel:[2,"heading-level"],region:[513],regionThreshold:[2,"region-threshold"],transition:[513],defaultExpanded:[1,"default-expanded"],chassisX:[32],chassisY:[32],chassisDragging:[32],dropPlaceholder:[32]},[[0,"mdItemToggle","onChildToggle"],[0,"mdItemRequestFocus","onChildRequestFocus"]],{floating:[{onFloatingChange:0}],exclusive:[{onExclusiveChange:0}],headingLevel:[{onHeadingLevelChange:0}],region:[{onRegionChange:0}],regionThreshold:[{onRegionThresholdChange:0}],keepOneExpanded:[{onKeepOneExpandedChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const i=["md-accordion"];i.forEach((i=>{switch(i){case"md-accordion":if(!customElements.get(t(i))){customElements.define(t(i),d)}break}}))}h();const c=d;const l=h;export{c as MdAccordion,l as defineCustomElement};
+//# sourceMappingURL=md-accordion.js.map