npm - @awc-ui/core - Versions diffs - 1.0.0-beta.2 → 1.0.0-beta.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (698) hide show

package/dist/components/p-D8oM1Kr3.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["mdMenuItemCss","MdMenuItem","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","headline","supportingText","trailingText","disabled","selected","indeterminate","keepOpen","divider","gap","badge","type","checkPosition","presentation","roleOverride","density","hasLeadingIcon","hasTrailingIcon","handleClick","e","preventDefault","stopPropagation","deselectSiblingRadios","mdClick","emit","menu","el","closest","root","parent","parentElement","rootMenu","anchor","document","getElementById","focus","setTimeout","close","handleKeyDown","key","triggerRipple","click","componentWillLoad","querySelector","group","siblings","Array","from","querySelectorAll","sibling","role","render","h","Host","class","String","undefined","tabindex","onClick","onKeyDown","part","name"],"sources":["src/components/md-menu-item/md-menu-item.css?tag=md-menu-item&encapsulation=shadow","src/components/md-menu-item/md-menu-item.tsx"],"sourcesContent":["/* ═══════════════════════════════════════════════════════════\n md-menu-item\n Material Design 3 — Menus\n https://m3.material.io/components/menus/specs\n\n CSS custom properties:\n --md-menu-item-height Item height (default 48px)\n --md-menu-item-padding-inline Horizontal padding (default 12px)\n --md-menu-item-gap Gap between elements (default 12px)\n --md-menu-item-icon-size Leading/trailing icon (default 24px,\n 20px in the standard/vibrant variants)\n --md-menu-item-check-size Selection check/radio glyph (default 20px)\n\n Heights and all three icon sizes taper with the global `data-density`\n scale; the custom properties above opt out of that curve entirely.\n\n Parts:\n state-layer, leading-icon, content, headline,\n supporting-text, badge, trailing\n\n Slots:\n leading-icon, trailing-icon, (default)\n ═══════════════════════════════════════════════════════════ */\n\n/* ==========================================================\n 1. HOST\n ========================================================== */\n:host {\n display: flex;\n align-items: center;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n user-select: none;\n /* Global density: each `data-density` rung (0…-4) trims 4px off the row.\n density-scale is 0 by default, so the 48px default is unchanged.\n See packages/tokens/src/tokens.css §10-12. */\n min-height: var(--md-menu-item-height, calc(48px + var(--md-sys-density-scale, 0) * 4px));\n /* Leading/trailing icon size — one lever for the wrapper box AND the slotted\n glyph so they can never drift apart. Tapers 1px per rung (24 → 20px at -4)\n with an 18px floor, matching md-list-item's icon convention. */\n --_icon-size: var(--md-menu-item-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n /* Selection check/radio glyph — 20dp per M3, same 1px/rung taper, 16px floor. */\n --_check-size: var(--md-menu-item-check-size, max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px)));\n padding: 0 var(--md-menu-item-padding-inline, var(--md-sys-spacing-inset-md, 12px));\n gap: var(--md-menu-item-gap, var(--md-sys-spacing-gap-md, 12px));\n color: var(--md-sys-color-on-surface, #1C1B1F);\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n outline: none;\n /* M3 motion — quick tonal/selection fades plus an expressive shape morph\n so the corner radii ease (rather than snap) on hover / active / select. */\n transition:\n background-color var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n color var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n border-radius var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host {\n transition: none;\n }\n}\n\n/* ==========================================================\n 2. STATES\n ========================================================== */\n.md-menu-item__state-layer {\n position: absolute;\n inset: 0;\n background-color: var(--md-sys-color-on-surface, #1C1B1F);\n opacity: 0;\n pointer-events: none;\n /* No transition by default: only pointer hover/active eases in (rule below).\n Keyboard focus (data-md-focused / focus-visible) is deliberately left\n transition-less so the tint snaps fully on and off. During fast ArrowUp/Down\n the focused row is a freshly-windowed node that starts at opacity 0, so a\n fade-in would restart every press and PULSE the focused element; and a\n fade-out would TRAIL lit rows behind the moving focus. Both are flicker. */\n}\n\n/* Inside a gapped group card the state layer sits `padding` in from a ROUNDED\n edge, so square corners left a wider band at the card's corners than along\n its sides. Concentric radius = card radius − that inset. */\n:host-context(md-menu-item-group[data-use-gap]) .md-menu-item__state-layer {\n border-radius: calc(var(--md-menu-group-shape, 12px) - var(--md-sys-spacing-inset-xs, 4px));\n}\n\n:host(:hover) .md-menu-item__state-layer { opacity: 0.08; }\n:host(:active) .md-menu-item__state-layer { opacity: 0.12; }\n:host(:focus-visible) .md-menu-item__state-layer,\n:host([data-md-focused]) .md-menu-item__state-layer { opacity: 0.12; }\n\n/* Soft ease-in for pointer hover/active only — keyboard focus stays instant. */\n:host(:hover) .md-menu-item__state-layer,\n:host(:active) .md-menu-item__state-layer {\n transition: opacity var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n:host(:focus-visible),\n:host([data-md-focused]) {\n outline: 3px solid var(--md-sys-color-secondary, #625B71);\n outline-offset: -3px;\n}\n\n/* ==========================================================\n 3. SELECTED STATE\n ========================================================== */\n\n/* Baseline */\n:host(.md-menu-item--selected) {\n background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n}\n\n/* Vertical Standard */\n:host([data-variant=\"standard\"].md-menu-item--selected) {\n background-color: var(--md-sys-color-tertiary-container, #FFD8E4);\n color: var(--md-sys-color-on-tertiary-container, #31111D);\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ee)));\n}\n\n:host([data-variant=\"standard\"]:hover) {\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)));\n}\n\n:host([data-variant=\"standard\"]:active) {\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ee)));\n}\n\n:host([data-variant=\"standard\"]:first-child:hover) {\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)));\n}\n\n:host([data-variant=\"standard\"]:last-child:hover) {\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)));\n}\n\n:host([data-variant=\"standard\"][data-after-gap]:hover) {\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)));\n}\n\n:host([data-variant=\"standard\"][gap]:hover) {\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)));\n}\n\n:host([data-variant=\"standard\"][data-after-gap][gap]:hover) {\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)));\n}\n\n/* Vertical Vibrant */\n:host([data-variant=\"vibrant\"].md-menu-item--selected) {\n background-color: var(--md-sys-color-tertiary, #7D5260);\n color: var(--md-sys-color-on-tertiary, #FFFFFF);\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ee)));\n}\n\n:host([data-variant=\"vibrant\"]:hover) {\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)));\n}\n\n:host([data-variant=\"vibrant\"]:active) {\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ee)));\n}\n\n:host([data-variant=\"vibrant\"]:first-child:hover) {\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)));\n}\n\n:host([data-variant=\"vibrant\"]:last-child:hover) {\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)));\n}\n\n:host([data-variant=\"vibrant\"][data-after-gap]:hover) {\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)));\n}\n\n:host([data-variant=\"vibrant\"][gap]:hover) {\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)));\n}\n\n:host([data-variant=\"vibrant\"][data-after-gap][gap]:hover) {\n border-start-start-radius: calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));\n border-start-end-radius: calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));\n border-end-start-radius: calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));\n border-end-end-radius: calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)));\n}\n\n/* ==========================================================\n 4. DISABLED STATE\n ========================================================== */\n:host(.md-menu-item--disabled) {\n cursor: default;\n opacity: 0.38;\n pointer-events: none;\n}\n\n/* ==========================================================\n 5. LEADING ICON\n ========================================================== */\n.md-menu-item__leading {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--_icon-size);\n height: var(--_icon-size);\n color: var(--md-sys-color-on-surface-variant, #49454F);\n}\n\n.md-menu-item__leading ::slotted(*) {\n /* `!important` here is load-bearing, not a specificity hack. Icon glyphs are\n slotted light-DOM nodes carrying a DOCUMENT-tree class — Material Symbols\n ships `.material-symbols-outlined { font-size: 24px }`. Per CSS Scoping\n §3.3 the OUTER tree wins normal declarations against `::slotted()` no\n matter the specificity, and only `!important` flips that (important\n declarations resolve the other way, inner tree first). Without the flag the\n glyph stays welded at 24px while this wrapper tapers to 20px, so the icon\n overflows its box at every density rung. Width/height are uncontested by\n that stylesheet and stay normal, so authors can still override them. */\n font-size: var(--_icon-size) !important;\n width: var(--_icon-size);\n height: var(--_icon-size);\n color: inherit;\n}\n\n:host(.md-menu-item--selected) .md-menu-item__leading {\n color: inherit;\n}\n\n/* ==========================================================\n 6. CONTENT\n ========================================================== */\n.md-menu-item__content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-width: 0;\n}\n\n.md-menu-item__headline {\n font-family: var(--md-sys-typescale-body-large-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-body-large-weight, 400);\n line-height: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.md-menu-item__supporting {\n font-family: var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);\n font-size: max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n color: var(--md-sys-color-on-surface-variant, #49454F);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* ==========================================================\n 7. BADGE\n ========================================================== */\n.md-menu-item__badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n height: 20px;\n margin-inline-start: 12px;\n padding: 0 8px;\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n background-color: var(--md-sys-color-tertiary-container, #FFD8E4);\n color: var(--md-sys-color-on-tertiary-container, #31111D);\n font-family: var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);\n font-size: var(--md-sys-typescale-label-small-size, 11px);\n font-weight: var(--md-sys-typescale-label-small-weight, 500);\n line-height: var(--md-sys-typescale-label-small-line-height, 16px);\n letter-spacing: var(--md-sys-typescale-label-small-tracking, 0.5px);\n white-space: nowrap;\n}\n\n/* ==========================================================\n 8. TRAILING\n ========================================================== */\n.md-menu-item__trailing {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n margin-inline-start: 8px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n}\n\n.md-menu-item__trailing /* 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::slotted(*:not(md-badge)) {\n /* `!important` for the same document-tree reason as the leading glyph above. */\n font-size: var(--_icon-size) !important;\n width: var(--_icon-size);\n height: var(--_icon-size);\n color: inherit;\n}\n\n.md-menu-item__trailing-text {\n font-family: var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);\n font-size: var(--md-sys-typescale-label-small-size, 11px);\n color: var(--md-sys-color-on-surface-variant, #49454F);\n}\n\n/* Hide trailing when nothing is slotted and no trailing text */\n.md-menu-item__trailing:not(:has(::slotted(*), .md-menu-item__trailing-text)) {\n display: none;\n}\n\n:host(.md-menu-item--selected) .md-menu-item__trailing {\n color: inherit;\n}\n\n/* ==========================================================\n 9. CHECK INDICATOR (checkbox/radio)\n ========================================================== */\n.md-menu-item__check {\n display: flex;\n align-items: center;\n justify-content: center;\n /* Shadow-internal glyph, so no document-tree rule competes and no\n `!important` is needed — but it still has to taper with its row. */\n width: var(--_check-size);\n height: var(--_check-size);\n flex-shrink: 0;\n margin-inline-start: 8px;\n color: inherit;\n}\n\n.md-menu-item__check .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(--_check-size);\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 10. DIVIDER\n ========================================================== */\n/* The line is flush: it separates two rows without displacing either.\n\n The previous `padding-bottom: 8px` came out of the item's OWN height —\n `min-block-size` is a border-box measurement, so a divider row rendered 40px\n of content where every other row got 48px, sitting 4px high against the\n list's rhythm with a correspondingly shorter hit area. The matching\n `margin-bottom: 8px` then left dead menu background under the line, which\n the row's hover surface could not reach.\n\n Rows that want breathing room use the separate `gap` prop, which the menu\n applies as a margin from the outside (md-menu.css, `::slotted([gap])`). */\n:host(.md-menu-item--divider) {\n padding-bottom: 0;\n margin-bottom: 0;\n}\n\n:host(.md-menu-item--divider)::after {\n content: '';\n position: absolute;\n bottom: 0;\n inset-inline: 0;\n height: 1px;\n background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n}\n\n/* ==========================================================\n 11. VERTICAL MENU (STANDARD) VARIANT OVERRIDES\n ========================================================== */\n:host([data-variant=\"standard\"]) {\n /* Resting corners, named so the hover/press/selected rules below can blend\n BACK to them. Freezing is per-corner because an item's resting shape\n depends on its position: first/last child carry large outer corners while\n the rest are small, so a single blanket rest value would round the wrong\n corners when shape morph is switched off. See §13 in tokens.css. */\n --_rest-ss: var(--md-sys-shape-corner-small, 8px);\n --_rest-se: var(--md-sys-shape-corner-small, 8px);\n --_rest-es: var(--md-sys-shape-corner-small, 8px);\n --_rest-ee: var(--md-sys-shape-corner-small, 8px);\n color: var(--md-sys-color-on-surface, #1C1B1F);\n gap: 8px;\n border-radius: var(--md-sys-shape-corner-small, 8px);\n /* The vertical variants tighten icons to 20dp; retargeting the same lever\n keeps them on the density curve instead of freezing at 20px. */\n --_icon-size: var(--md-menu-item-icon-size, max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px)));\n}\n\n:host([data-variant=\"standard\"]:first-child) {\n --_rest-ss: var(--md-sys-shape-corner-large, 16px);\n --_rest-se: var(--md-sys-shape-corner-large, 16px);\n border-start-start-radius: var(--md-sys-shape-corner-large, 16px);\n border-start-end-radius: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host([data-variant=\"standard\"]:last-child) {\n --_rest-es: var(--md-sys-shape-corner-large, 16px);\n --_rest-ee: var(--md-sys-shape-corner-large, 16px);\n border-end-start-radius: var(--md-sys-shape-corner-large, 16px);\n border-end-end-radius: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host([data-variant=\"standard\"]) .md-menu-item__leading {\n color: var(--md-sys-color-on-surface-variant, #49454F);\n}\n\n:host([data-variant=\"standard\"]) .md-menu-item__trailing,\n:host([data-variant=\"standard\"]) .md-menu-item__supporting,\n:host([data-variant=\"standard\"]) .md-menu-item__trailing-text {\n color: var(--md-sys-color-on-surface-variant, #49454F);\n}\n\n:host([data-variant=\"standard\"].md-menu-item--selected) .md-menu-item__leading,\n:host([data-variant=\"standard\"].md-menu-item--selected) .md-menu-item__trailing {\n color: inherit;\n}\n\n/* ==========================================================\n 12. VERTICAL MENU (VIBRANT) VARIANT OVERRIDES\n ========================================================== */\n:host([data-variant=\"vibrant\"]) {\n /* Resting corners, named so the hover/press/selected rules below can blend\n BACK to them. Freezing is per-corner because an item's resting shape\n depends on its position: first/last child carry large outer corners while\n the rest are small, so a single blanket rest value would round the wrong\n corners when shape morph is switched off. See §13 in tokens.css. */\n --_rest-ss: var(--md-sys-shape-corner-small, 8px);\n --_rest-se: var(--md-sys-shape-corner-small, 8px);\n --_rest-es: var(--md-sys-shape-corner-small, 8px);\n --_rest-ee: var(--md-sys-shape-corner-small, 8px);\n color: var(--md-sys-color-on-tertiary-container, #31111D);\n gap: 8px;\n border-radius: var(--md-sys-shape-corner-small, 8px);\n --_icon-size: var(--md-menu-item-icon-size, max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px)));\n}\n\n:host([data-variant=\"vibrant\"]:first-child) {\n --_rest-ss: var(--md-sys-shape-corner-large, 16px);\n --_rest-se: var(--md-sys-shape-corner-large, 16px);\n border-start-start-radius: var(--md-sys-shape-corner-large, 16px);\n border-start-end-radius: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host([data-variant=\"vibrant\"]:last-child) {\n --_rest-es: var(--md-sys-shape-corner-large, 16px);\n --_rest-ee: var(--md-sys-shape-corner-large, 16px);\n border-end-start-radius: var(--md-sys-shape-corner-large, 16px);\n border-end-end-radius: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host([data-variant=\"vibrant\"]) .md-menu-item__leading {\n color: var(--md-sys-color-on-tertiary-container, #31111D);\n}\n\n:host([data-variant=\"vibrant\"]) .md-menu-item__trailing,\n:host([data-variant=\"vibrant\"]) .md-menu-item__supporting,\n:host([data-variant=\"vibrant\"]) .md-menu-item__trailing-text {\n color: var(--md-sys-color-on-tertiary-container, #31111D);\n}\n\n:host([data-variant=\"vibrant\"].md-menu-item--selected) .md-menu-item__leading,\n:host([data-variant=\"vibrant\"].md-menu-item--selected) .md-menu-item__trailing {\n color: inherit;\n}\n\n:host([data-variant=\"vibrant\"]) .md-menu-item__state-layer {\n background-color: var(--md-sys-color-on-tertiary-container, #31111D);\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, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { MenuElement, SelectableElement } from '../../utils/types';\nimport { triggerRipple } from '../../utils/ripple';\n\n@Component({ tag: 'md-menu-item', styleUrl: 'md-menu-item.css', shadow: true })\nexport class MdMenuItem {\n @Element() el!: HTMLElement;\n\n /** Primary label text. */\n @Prop() headline: string = '';\n /** Secondary descriptive text below the headline. */\n @Prop({ attribute: 'supporting-text' }) supportingText: string = '';\n /** Trailing text (e.g. keyboard shortcut). */\n @Prop({ attribute: 'trailing-text' }) trailingText: string = '';\n /** Whether the item is disabled. */\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Whether the item is currently selected. */\n @Prop({ mutable: true, reflect: true }) selected: boolean = false;\n /** Mixed/partial state for a `checkbox` item — renders a dash in the check\n * slot instead of a tick and exposes `aria-checked=\"mixed\"`. Used for a\n * \"select all\" affordance where only some children are selected. Ignored for\n * `button`/`radio` types and when `selected` is true. */\n @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n /** Prevent the parent menu from closing when this item is clicked. */\n @Prop({ attribute: 'keep-open' }) keepOpen: boolean = false;\n /** Render a divider line below this item. */\n @Prop({ reflect: true }) divider: boolean = false;\n /** Render a gap (extra space) below this item — an alternative separator to divider. */\n @Prop({ reflect: true }) gap: boolean = false;\n /** Small badge label (e.g. \"New\") displayed before the trailing area. */\n @Prop() badge: string = '';\n /** Type of item: 'button' (default action), 'checkbox' (toggle), or 'radio' (single-select within group). */\n @Prop() type: 'button' | 'checkbox' | 'radio' = 'button';\n /** Position of the selection checkmark indicator. */\n @Prop({ attribute: 'check-position', reflect: true }) checkPosition: 'start' | 'end' = 'end';\n /**\n * ARIA presentation. `'menuitem'` (default) exposes the item with the menu\n * role family (`menuitem` / `menuitemradio` / `menuitemcheckbox`, state via\n * `aria-checked`). `'option'` exposes it as a listbox option (`role=\"option\"`,\n * state via `aria-selected`) — used by `md-select` so the popup is a proper\n * WAI-ARIA combobox/listbox rather than a menu.\n */\n @Prop({ reflect: true }) presentation: 'menuitem' | 'option' = 'menuitem';\n\n /**\n * Override the computed ARIA role. Used when a checkbox/radio item is NOT inside\n * a menu — e.g. a \"select all\" toggle in a listbox popup, which is semantically a\n * `checkbox` (keeps `aria-checked`, drops the menu-only required-parent). Empty =\n * the default menuitem/option role family.\n */\n @Prop({ attribute: 'role-override' }) roleOverride: string = '';\n\n /**\n * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n * global `data-density` ancestor sets, so a local value simply overrides the\n * inherited one. 0 = default, -4 = ultra-compact.\n */\n @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n /** Fires when the item is activated. */\n @Event() mdClick: EventEmitter<void>;\n\n @State() private hasLeadingIcon = false;\n @State() private hasTrailingIcon = false;\n\n componentWillLoad() {\n this.hasLeadingIcon = !!this.el.querySelector('[slot=\"leading-icon\"]');\n this.hasTrailingIcon = !!this.el.querySelector('[slot=\"trailing-icon\"]');\n }\n\n private handleClick = (e: MouseEvent) => {\n if (this.disabled) { e.preventDefault(); e.stopPropagation(); return; }\n\n if (this.type === 'checkbox') {\n this.selected = !this.selected;\n } else if (this.type === 'radio') {\n this.selected = true;\n this.deselectSiblingRadios();\n }\n\n this.mdClick.emit();\n\n if (!this.keepOpen) {\n let menu = this.el.closest('md-menu') as HTMLElement | null;\n let root = menu;\n while (menu) {\n const parent = menu.parentElement?.closest('md-menu') as HTMLElement | null;\n if (parent) { root = parent; menu = parent; } else { break; }\n }\n if (root) {\n const rootMenu = root as MenuElement;\n if (rootMenu.anchor) {\n document.getElementById(rootMenu.anchor)?.focus();\n }\n setTimeout(() => rootMenu.close?.(), 150);\n }\n }\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (!this.disabled) triggerRipple(this.el);\n this.el.click();\n } else if (e.key === ' ') {\n e.preventDefault();\n if (this.disabled) return;\n\n triggerRipple(this.el);\n\n if (this.type === 'checkbox') {\n this.selected = !this.selected;\n this.mdClick.emit();\n } else if (this.type === 'radio') {\n this.selected = true;\n this.deselectSiblingRadios();\n this.mdClick.emit();\n } else {\n this.el.click();\n }\n }\n };\n\n private deselectSiblingRadios() {\n if (this.type !== 'radio') return;\n const group = this.el.closest('md-menu-item-group') || this.el.closest('md-menu');\n if (!group) return;\n const siblings = Array.from(group.querySelectorAll('md-menu-item')) as unknown as SelectableElement[];\n for (const sibling of siblings) {\n if (sibling !== this.el && sibling.type === 'radio' && sibling.selected) {\n sibling.selected = false;\n }\n }\n }\n\n private get role(): string {\n if (this.roleOverride) return this.roleOverride;\n if (this.presentation === 'option') return 'option';\n if (this.type === 'checkbox') return 'menuitemcheckbox';\n if (this.type === 'radio') return 'menuitemradio';\n return 'menuitem';\n }\n\n render() {\n return (\n <Host\n class={{\n 'md-menu-item': true,\n 'md-menu-item--selected': this.selected,\n 'md-menu-item--disabled': this.disabled,\n 'md-menu-item--divider': this.divider,\n 'md-menu-item--gap': this.gap,\n }}\n role={this.role}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.presentation === 'option' ? String(this.selected) : undefined}\n aria-checked={\n this.presentation !== 'option' && this.type !== 'button'\n ? this.indeterminate && !this.selected\n ? 'mixed'\n : String(this.selected)\n : undefined\n }\n tabindex=\"-1\"\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <md-ripple disabled={this.disabled}></md-ripple>\n <span class=\"md-menu-item__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n\n {this.type !== 'button' && this.checkPosition === 'start' && (\n <span class=\"md-menu-item__check\" aria-hidden=\"true\">\n <span class=\"material-symbols-outlined\">\n {this.selected ? 'check' : this.indeterminate ? 'remove' : ''}\n </span>\n </span>\n )}\n\n {this.hasLeadingIcon && (\n <span class=\"md-menu-item__leading\" part=\"leading-icon\" aria-hidden=\"true\">\n <slot name=\"leading-icon\"></slot>\n </span>\n )}\n\n <span class=\"md-menu-item__content\" part=\"content\">\n <span class=\"md-menu-item__headline\" part=\"headline\">{this.headline}</span>\n {this.supportingText && (\n <span class=\"md-menu-item__supporting\" part=\"supporting-text\">{this.supportingText}</span>\n )}\n </span>\n\n {this.badge && (\n <span class=\"md-menu-item__badge\" part=\"badge\">{this.badge}</span>\n )}\n\n {(this.hasTrailingIcon || this.trailingText) && (\n <span class=\"md-menu-item__trailing\" part=\"trailing\">\n <slot name=\"trailing-icon\">\n {this.trailingText && (\n <span class=\"md-menu-item__trailing-text\">{this.trailingText}</span>\n )}\n </slot>\n </span>\n )}\n\n {this.type !== 'button' && this.checkPosition === 'end' && (\n <span class=\"md-menu-item__check\" aria-hidden=\"true\">\n <span class=\"material-symbols-outlined\">\n {this.selected ? 'check' : this.indeterminate ? 'remove' : ''}\n </span>\n </span>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/{p-Ddiw2Kjw.js → p-DEzb9xsY.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{p as t,H as i,c as s,h as e,d as r,t as a}from"./p-MWBNn6Lj.js";import{s as n}from"./p-DWxN44zD.js";const l=()=>`:host{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;cursor:pointer;user-select:none;inline-size:100%;min-block-size:var(--_surface-min-block);overflow:visible;--md-slider-track-length:200px;--md-slider-active-color:var(--md-sys-color-primary);--md-slider-inactive-color:var(--md-sys-color-secondary-container);--md-slider-tick-active-color:var(--md-sys-color-primary);--md-slider-tick-filled-color:var(--md-sys-color-on-primary);--md-slider-tick-inactive-color:var(--md-sys-color-on-secondary-container);--md-slider-thumb-color:var(--md-sys-color-primary);--md-slider-value-bg:var(--md-sys-color-inverse-surface);--md-slider-value-color:var(--md-sys-color-inverse-on-surface);--md-slider-inset-icon-color:var(--md-slider-tick-inactive-color);--md-slider-inset-icon-active-color:var(--md-slider-tick-filled-color);--_value-pct:50%;--_center-pct:50%;--_active-start-pct:0%;--_active-width-pct:50%;--_start-pct:0%;--_end-pct:100%;--_center-gap:4px;--_active-track:var(--md-slider-active-color);--_inactive-track:var(--md-slider-inactive-color);--_thumb-fill:var(--md-slider-thumb-color);--_tick-active:var(--md-slider-tick-active-color);--_tick-filled:var(--md-slider-tick-filled-color);--_tick-inactive:var(--md-slider-tick-inactive-color)}:host(.md-slider--vertical){flex-direction:column;align-items:stretch;inline-size:auto;min-inline-size:var(--_vertical-min-inline);min-block-size:var(--md-slider-track-length)}:host([full-height].md-slider--vertical){block-size:100%;min-block-size:var(--md-slider-min-track-length, 88px)}:host(.md-slider--size-xs){--_track-thickness-default:16px;--_thumb-block-default:max(24px, calc(44px + var(--md-sys-density-scale, 0) * 4px));--_thumb-inline-default:4px;--_track-radius-default:8px;--_track-thumb-gap:6px;--_track-inside-corner:2px;--_inset-icon-size:0px}:host(.md-slider--size-sm){--_track-thickness-default:24px;--_thumb-block-default:max(24px, calc(44px + var(--md-sys-density-scale, 0) * 4px));--_thumb-inline-default:4px;--_track-radius-default:8px;--_track-thumb-gap:6px;--_track-inside-corner:2px;--_inset-icon-size:0px}:host(.md-slider--size-md){--_track-thickness-default:40px;--_thumb-block-default:max(24px, calc(52px + var(--md-sys-density-scale, 0) * 4px));--_thumb-inline-default:4px;--_track-radius-default:12px;--_track-thumb-gap:6px;--_track-inside-corner:2px;--_inset-icon-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px))}:host(.md-slider--size-lg){--_track-thickness-default:56px;--_thumb-block-default:max(24px, calc(68px + var(--md-sys-density-scale, 0) * 4px));--_thumb-inline-default:4px;--_track-radius-default:16px;--_track-thumb-gap:6px;--_track-inside-corner:2px;--_inset-icon-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px))}:host(.md-slider--size-xl){--_track-thickness-default:96px;--_thumb-block-default:max(24px, calc(108px + var(--md-sys-density-scale, 0) * 4px));--_thumb-inline-default:4px;--_track-radius-default:28px;--_track-thumb-gap:6px;--_track-inside-corner:2px;--_inset-icon-size:32px}:host{--_track-thickness:var(--md-slider-track-height, max(8px, calc(var(--_track-thickness-default) + var(--md-sys-density-scale, 0) * 4px)));--_track-radius:var(--md-slider-track-shape, var(--_track-radius-default));--_thumb-block:var(--md-slider-thumb-height, var(--_thumb-block-default));--_thumb-inline:var(--md-slider-thumb-width, var(--_thumb-inline-default));--_tick-size:max(4px, calc(var(--_track-thickness) * 0.12));--_tick-pad:calc(4px + var(--_tick-size) / 2)}:host(.md-slider--horizontal){--_surface-min-block:var(--_thumb-block)}:host(.md-slider--vertical){--_surface-min-block:var(--md-slider-track-length);--_vertical-min-inline:max(var(--_track-thickness), var(--_thumb-block))}.md-slider__inset{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--md-slider-inset-icon-color);inline-size:var(--_inset-icon-size, 24px);block-size:var(--_inset-icon-size, 24px)}:host(.md-slider--horizontal) .md-slider__inset{inset-inline-start:8px;inset-block-start:50%;transform:translateY(-50%)}:host(.md-slider--vertical) .md-slider__inset{inset-block-end:8px;inset-inline-start:50%;margin-inline-start:calc(-0.5 * var(--_inset-icon-size, 24px))}.md-slider__inset--on-active{color:var(--md-slider-inset-icon-active-color)}.md-slider__inset-font{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons'), sans-serif;font-size:var(--_inset-icon-size, 24px);font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;overflow-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;pointer-events:none}::slotted([slot='inset-icon']){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_inset-icon-size, 24px);block-size:var(--_inset-icon-size, 24px);font-size:var(--_inset-icon-size, 24px);color:inherit;fill:currentColor;pointer-events:none}.md-slider__surface{position:relative;display:flex;flex:1;flex-direction:row;align-items:center;min-inline-size:0;min-block-size:var(--_surface-min-block);overflow:visible}:host(.md-slider--vertical) .md-slider__surface{flex-direction:column;flex:1;align-items:center;justify-content:center;min-block-size:var(--md-slider-track-length)}.md-slider__rail{position:relative;flex:1;min-inline-size:0;min-block-size:var(--_surface-min-block);overflow:visible}:host(.md-slider--range) .md-slider__rail,:host(.md-slider--vertical) .md-slider__rail{touch-action:none;cursor:pointer}:host(.md-slider--range) .md-slider__input,:host(.md-slider--vertical) .md-slider__input{pointer-events:none}:host(.md-slider--vertical) .md-slider__rail{inline-size:max(var(--_track-thickness), var(--_thumb-block));block-size:var(--md-slider-track-length);flex:none}:host([full-height].md-slider--vertical) .md-slider__surface{min-block-size:0}:host([full-height].md-slider--vertical) .md-slider__rail{block-size:auto;flex:1 1 auto;min-block-size:0}:host([full-height].md-slider--vertical) .md-slider__input{position:absolute;inset:0;inline-size:100%;block-size:100%;transform:none}.md-slider__track{position:absolute;pointer-events:none;border-radius:var(--_track-radius);overflow:hidden}:host(.md-slider--horizontal) .md-slider__track{inset-inline:0;inset-block-start:50%;transform:translateY(-50%);block-size:var(--_track-thickness);inline-size:100%}:host(.md-slider--vertical) .md-slider__track{inset-block:0;inset-inline-start:50%;margin-inline-start:calc(-0.5 * var(--_track-thickness));inline-size:var(--_track-thickness);block-size:100%}.md-slider__track-inactive{position:absolute;background-color:var(--_inactive-track)}.md-slider__track-active{position:absolute;background-color:var(--_active-track)}:host(.md-slider--horizontal:not(.md-slider--centered):not(.md-slider--range)) .md-slider__track-active{inset-inline-start:0;inset-block:0;inline-size:max(0px, calc(var(--_value-pct) - var(--_track-thumb-gap)));block-size:100%;border-start-end-radius:var(--_track-inside-corner);border-end-end-radius:var(--_track-inside-corner)}:host(.md-slider--horizontal:not(.md-slider--centered):not(.md-slider--range)) .md-slider__track-inactive{inset-block:0;inset-inline-start:calc(var(--_value-pct) + var(--_track-thumb-gap));inset-inline-end:0;border-start-start-radius:var(--_track-inside-corner);border-end-start-radius:var(--_track-inside-corner)}:host(.md-slider--vertical:not(.md-slider--centered):not(.md-slider--range)) .md-slider__track-active{inset-inline:0;inset-block-end:0;block-size:max(0px, calc(var(--_value-pct) - var(--_track-thumb-gap)));inline-size:100%;border-start-start-radius:var(--_track-inside-corner);border-start-end-radius:var(--_track-inside-corner)}:host(.md-slider--vertical:not(.md-slider--centered):not(.md-slider--range)) .md-slider__track-inactive{inset-inline:0;inset-block-start:0;block-size:max(0px, calc(100% - var(--_value-pct) - var(--_track-thumb-gap)));border-end-start-radius:var(--_track-inside-corner);border-end-end-radius:var(--_track-inside-corner)}:host(.md-slider--horizontal.md-slider--centered) .md-slider__track-inactive{inset-block:0;inset-inline-start:0;inline-size:max(0px, calc(var(--_active-start-pct) - var(--_centered-start-gap)));border-start-end-radius:var(--_track-inside-corner);border-end-end-radius:var(--_track-inside-corner)}:host(.md-slider--horizontal.md-slider--centered) .md-slider__track::after{content:'';position:absolute;inset-block:0;inset-inline-start:calc(var(--_active-start-pct) + var(--_active-width-pct) + var(--_centered-end-gap));inset-inline-end:0;background-color:var(--_inactive-track);border-start-start-radius:var(--_track-inside-corner);border-end-start-radius:var(--_track-inside-corner)}:host(.md-slider--horizontal.md-slider--centered) .md-slider__track-active{inset-inline-start:calc(var(--_active-start-pct) + var(--_centered-start-gap));inset-block:0;inline-size:max(0px, calc(var(--_active-width-pct) - var(--_centered-start-gap) - var(--_centered-end-gap)));block-size:100%;border-radius:var(--_track-inside-corner)}:host(.md-slider--vertical.md-slider--centered) .md-slider__track-inactive{inset-inline:0;inset-block-end:0;block-size:max(0px, calc(var(--_active-start-pct) - var(--_centered-start-gap)));border-start-start-radius:var(--_track-inside-corner);border-start-end-radius:var(--_track-inside-corner)}:host(.md-slider--vertical.md-slider--centered) .md-slider__track::after{content:'';position:absolute;inset-inline:0;inset-block-start:0;block-size:max(0px, calc(100% - var(--_active-start-pct) - var(--_active-width-pct) - var(--_centered-end-gap)));background-color:var(--_inactive-track);border-end-start-radius:var(--_track-inside-corner);border-end-end-radius:var(--_track-inside-corner)}:host(.md-slider--vertical.md-slider--centered) .md-slider__track-active{inset-inline:0;inset-block-end:calc(var(--_active-start-pct) + var(--_centered-start-gap));block-size:max(0px, calc(var(--_active-width-pct) - var(--_centered-start-gap) - var(--_centered-end-gap)));inline-size:100%;border-radius:var(--_track-inside-corner)}:host(.md-slider--horizontal.md-slider--range) .md-slider__track-inactive{inset-block:0;inset-inline-start:0;inline-size:max(0px, calc(var(--_start-pct) - var(--_track-thumb-gap)));border-start-end-radius:var(--_track-inside-corner);border-end-end-radius:var(--_track-inside-corner)}:host(.md-slider--horizontal.md-slider--range) .md-slider__track::after{content:'';position:absolute;inset-block:0;inset-inline-start:calc(var(--_end-pct) + var(--_track-thumb-gap));inset-inline-end:0;background-color:var(--_inactive-track);border-start-start-radius:var(--_track-inside-corner);border-end-start-radius:var(--_track-inside-corner)}:host(.md-slider--horizontal.md-slider--range) .md-slider__track-active{inset-inline-start:calc(var(--_start-pct) + var(--_track-thumb-gap));inset-block:0;inline-size:max(0px, calc(var(--_end-pct) - var(--_start-pct) - 2 * var(--_track-thumb-gap)));block-size:100%;border-radius:var(--_track-inside-corner)}:host(.md-slider--vertical.md-slider--range) .md-slider__track-inactive{inset-inline:0;inset-block-end:0;block-size:max(0px, calc(var(--_start-pct) - var(--_track-thumb-gap)));border-start-start-radius:var(--_track-inside-corner);border-start-end-radius:var(--_track-inside-corner)}:host(.md-slider--vertical.md-slider--range) .md-slider__track::after{content:'';position:absolute;inset-inline:0;inset-block-start:0;block-size:max(0px, calc(100% - var(--_end-pct) - var(--_track-thumb-gap)));background-color:var(--_inactive-track);border-end-start-radius:var(--_track-inside-corner);border-end-end-radius:var(--_track-inside-corner)}:host(.md-slider--vertical.md-slider--range) .md-slider__track-active{inset-inline:0;inset-block-end:calc(var(--_start-pct) + var(--_track-thumb-gap));block-size:max(0px, calc(var(--_end-pct) - var(--_start-pct) - 2 * var(--_track-thumb-gap)));inline-size:100%;border-radius:var(--_track-inside-corner)}.md-slider__ticks{position:absolute;inset:0;pointer-events:none;z-index:1}:host(.md-slider--horizontal) .md-slider__tick{position:absolute;inset-block-start:50%;margin-inline-start:calc(-0.5 * var(--_tick-size));margin-block-start:calc(-0.5 * var(--_tick-size));inset-inline-start:0}:host(.md-slider--vertical) .md-slider__tick{position:absolute;inset-inline-start:50%;margin-inline-start:calc(-0.5 * var(--_tick-size));margin-block-end:calc(-0.5 * var(--_tick-size))}.md-slider__tick{inline-size:var(--_tick-size);block-size:var(--_tick-size);border-radius:50%}.md-slider__tick--on-active{background-color:var(--_tick-active);opacity:0}.md-slider__tick--on-filled{background-color:var(--_tick-filled)}.md-slider__tick--on-inactive{background-color:var(--_tick-inactive)}.md-slider__thumb{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;inline-size:var(--_thumb-inline);block-size:var(--_thumb-block);overflow:visible}:host(.md-slider--horizontal) .md-slider__thumb{inset-block-start:50%;transform:translateY(-50%);margin-inline-start:calc(-0.5 * var(--_thumb-inline));inset-inline-start:var(--_value-pct)}:host(.md-slider--horizontal) .md-slider__thumb--start{inset-inline-start:var(--_start-pct)}:host(.md-slider--horizontal) .md-slider__thumb--end{inset-inline-start:var(--_end-pct)}:host(.md-slider--vertical) .md-slider__thumb{inline-size:var(--_thumb-block);block-size:var(--_thumb-inline);inset-inline-start:50%;inset-block-end:calc(var(--_value-pct) - var(--_thumb-inline) / 2);inset-block-start:auto;margin-inline-start:calc(-0.5 * var(--_thumb-block))}:host(.md-slider--vertical) .md-slider__thumb--start{inset-block-end:calc(var(--_start-pct) - var(--_thumb-inline) / 2)}:host(.md-slider--vertical) .md-slider__thumb--end{inset-block-end:calc(var(--_end-pct) - var(--_thumb-inline) / 2)}.md-slider__thumb-knob{display:block;inline-size:var(--_thumb-inline);block-size:var(--_thumb-block);border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--_thumb-fill);box-shadow:none;flex-shrink:0;transition:inline-size var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),     block-size var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard)}:host(.md-slider--vertical) .md-slider__thumb-knob{inline-size:var(--_thumb-block);block-size:var(--_thumb-inline)}:host(:not(.md-slider--disabled)) .md-slider__thumb--pressing>.md-slider__thumb-knob{inline-size:2px;block-size:calc(var(--_thumb-block) * 1.05)}:host(.md-slider--vertical:not(.md-slider--disabled)) .md-slider__thumb--pressing>.md-slider__thumb-knob{inline-size:calc(var(--_thumb-block) * 1.05);block-size:2px}.md-slider__state-layer{display:none}.md-slider__thumb--focus-visible>.md-slider__thumb-knob{outline:3px solid var(--md-sys-color-secondary);outline-offset:2px}.md-slider__value-indicator{position:absolute;z-index:3;min-inline-size:max(28px, calc(48px + var(--md-sys-density-scale, 0) * 4px));min-block-size:max(24px, calc(44px + var(--md-sys-density-scale, 0) * 4px));display:inline-flex;align-items:center;justify-content:center;padding-block:var(--md-slider-value-padding-block, var(--md-sys-spacing-inset-md, 12px));padding-inline:var(--md-slider-value-padding-inline, var(--md-sys-spacing-inset-lg, 16px));box-sizing:border-box;background-color:var(--md-slider-value-bg);color:var(--md-slider-value-color);border-radius:var(--md-slider-value-shape, var(--md-sys-shape-corner-full, 9999px));font-family:var(--md-slider-value-font-family, var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif));font-size:var(--md-slider-value-font-size, var(--md-sys-typescale-label-medium-size, 12px));font-weight:var(--md-slider-value-font-weight, var(--md-sys-typescale-label-medium-weight, 500));line-height:var(--md-slider-value-line-height, var(--md-sys-typescale-label-medium-line-height, 16px));letter-spacing:var(--md-sys-typescale-label-medium-letter-spacing, 0.5px);white-space:nowrap;pointer-events:none}:host(.md-slider--horizontal) .md-slider__value-indicator{inset-block-end:calc(100% + 4px);left:50%;transform:translateX(-50%)}:host(.md-slider--vertical) .md-slider__value-indicator{inset-inline-start:calc(100% + 4px);inset-block-end:50%;transform:translateY(50%)}.md-slider__input-shell{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.md-slider__input{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;padding:0;opacity:0;cursor:pointer;pointer-events:auto;box-sizing:border-box}:host(.md-slider--vertical) .md-slider__input-shell{align-items:center;justify-content:center}:host(.md-slider--vertical) .md-slider__input{position:relative;inset:auto;inline-size:var(--md-slider-track-length);block-size:max(44px, var(--_state-layer-size));transform:rotate(-90deg);transform-origin:center center}.md-slider__input--start,.md-slider__input--end{inline-size:100%;block-size:100%}:host(.md-slider--disabled){cursor:not-allowed;pointer-events:none;opacity:var(--md-sys-state-disabled-content-opacity)}:host(.md-slider--disabled) .md-slider__track-inactive{background-color:color-mix(     in srgb,     var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%),     var(--md-sys-color-surface)   )}:host(.md-slider--disabled) .md-slider__track-active,:host(.md-slider--disabled) .md-slider__thumb-knob{background-color:color-mix(     in srgb,     var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%),     transparent   );box-shadow:none}:host(:focus-visible){outline:none}:host(.md-slider--stops) .md-slider__track-active{transition:inline-size var(--md-sys-motion-spring-spatial-fast-duration, 350ms) var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90)),     block-size var(--md-sys-motion-spring-spatial-fast-duration, 350ms) var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90)),     inset-inline-start var(--md-sys-motion-spring-spatial-fast-duration, 350ms) var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90)),     inset-block-end var(--md-sys-motion-spring-spatial-fast-duration, 350ms) var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90))}:host(.md-slider--stops) .md-slider__tick{transition:opacity var(--md-sys-motion-spring-effects-default-duration, 200ms) var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00)),     background-color var(--md-sys-motion-spring-effects-default-duration, 200ms) var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00))}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const d=t(class t extends i{constructor(i){super();if(i!==false){this.__registerHost()}this.__attachShadow();this.mdInput=s(this,"mdInput",7);this.mdChange=s(this,"mdChange",7);this.mdFocus=s(this,"mdFocus",7);this.mdBlur=s(this,"mdBlur",7);this.mdDragStart=s(this,"mdDragStart",7);this.mdDragEnd=s(this,"mdDragEnd",7);this.internals=this.attachInternals();this.min=0;this.max=100;this.value=50;this.step=1;this.disabled=false;this.name="";this.nameStart="";this.nameEnd="";this.variant="standard";this.range=false;this.stops=false;this.valueStart=0;this.valueEnd=100;this.size="xs";this.orientation="horizontal";this.fullHeight=false;this.valueIndicator=false;this.labeled=false;this.insetIcon=false;this.icon="";this.sliderAriaLabel="";this.ariaLabelStart="";this.ariaLabelEnd="";this.valueText="";this.valueStartText="";this.valueEndText="";this.controlled=false;this.density=0;this.keyFocusedThumb=null;this.pressingThumb=null;this._liveValue=null;this._liveStart=null;this._liveEnd=null;this.rangeDragThumb=null;this.verticalDragging=false;this.initialValue=0;this.initialStart=0;this.initialEnd=0;this.handleInput=(t,i)=>{const s=t.target;const e=Number(s.value);if(this.range){if(i){if(e>this.displayEnd){this.setEnd(e);this.setStart(e)}else{this.setStart(e)}}else{if(e<this.displayStart){this.setStart(e);this.setEnd(e)}else{this.setEnd(e)}}this.syncCssVars();this.mdInput.emit(this.rangeDetail())}else{this.setSingle(e);this.syncCssVars();this.mdInput.emit(this.singleDetail())}};this.handleChange=(t,i)=>{const s=t.target;const e=Number(s.value);if(this.range){if(i){if(e>this.displayEnd){this.setEnd(e);this.setStart(e)}else{this.setStart(e)}}else{if(e<this.displayStart){this.setStart(e);this.setEnd(e)}else{this.setEnd(e)}}this.syncCssVars();this.mdChange.emit(this.rangeDetail())}else{this.setSingle(e);this.syncCssVars();this.mdChange.emit(this.singleDetail())}this.commit()};this.onRangeRailPointerDown=t=>{if(!this.range||this.disabled)return;const i=t.currentTarget;const s=this.pointerToValue(t.clientX,t.clientY);const e=Math.abs(s-this.displayStart);const r=Math.abs(s-this.displayEnd);if(e===r){this.rangeDragThumb=s>=this.displayEnd?"end":"start"}else{this.rangeDragThumb=e<r?"start":"end"}this.pressingThumb=this.rangeDragThumb;this.mdDragStart.emit({thumb:this.rangeDragThumb,value:this.rangeDragThumb==="start"?this.displayStart:this.displayEnd,valueStart:this.displayStart,valueEnd:this.displayEnd});this.applyRangePointerValue(s);try{i.setPointerCapture(t.pointerId)}catch{}t.preventDefault()};this.onRangeRailPointerMove=t=>{if(!this.range||this.disabled||!this.rangeDragThumb)return;this.applyRangePointerValue(this.pointerToValue(t.clientX,t.clientY));t.preventDefault()};this.onRangeRailPointerUp=t=>{if(!this.range)return;this.endRangePointerGesture(t)};this.onRangeRailLostPointerCapture=()=>{if(!this.rangeDragThumb)return;const t=this.rangeDragThumb;const i=this.rangeDetail();this.rangeDragThumb=null;this.pressingThumb=null;this.mdChange.emit(i);this.mdDragEnd.emit({thumb:t,...i});this.commit();this.syncCssVars()};this.onVerticalRailPointerDown=t=>{if(this.range||this.disabled||this.orientation!=="vertical")return;const i=t.currentTarget;this.verticalDragging=true;this.pressingThumb="single";const s=this.pointerToValue(t.clientX,t.clientY);this.setSingle(s);this.syncCssVars();this.mdDragStart.emit({thumb:"single",value:this.displayValue});this.mdInput.emit(this.singleDetail());try{i.setPointerCapture(t.pointerId)}catch{}t.preventDefault()};this.onVerticalRailPointerMove=t=>{if(!this.verticalDragging)return;const i=this.pointerToValue(t.clientX,t.clientY);this.setSingle(i);this.syncCssVars();this.mdInput.emit(this.singleDetail());t.preventDefault()};this.onVerticalRailPointerUp=t=>{if(!this.verticalDragging)return;this.verticalDragging=false;this.pressingThumb=null;try{t.currentTarget.releasePointerCapture(t.pointerId)}catch{}const i=this.singleDetail();this.mdChange.emit(i);this.mdDragEnd.emit({thumb:"single",...i});this.commit();this.syncCssVars()};this.onVerticalRailLostPointerCapture=()=>{if(!this.verticalDragging)return;this.verticalDragging=false;this.pressingThumb=null;const t=this.singleDetail();this.mdChange.emit(t);this.mdDragEnd.emit({thumb:"single",...t});this.commit();this.syncCssVars()};this.onInputFocus=t=>i=>{const s=i.target;try{if(s.matches(":focus-visible")){this.keyFocusedThumb=t}}catch{this.keyFocusedThumb=t}this.mdFocus.emit({thumb:t})};this.onInputBlur=t=>()=>{this.keyFocusedThumb=null;this.mdBlur.emit({thumb:t})};this.onInputKeyDown=i=>s=>{if(!t.SLIDER_KEYS.has(s.key))return;if(!this.pressingThumb){this.pressingThumb=i;const t=this.range?{thumb:i,value:i==="start"?this.displayStart:this.displayEnd,valueStart:this.displayStart,valueEnd:this.displayEnd}:{thumb:"single",value:this.displayValue};this.mdDragStart.emit(t)}};this.onInputKeyUp=i=>s=>{if(!t.SLIDER_KEYS.has(s.key))return;this.pressingThumb=null;const e=this.range?{thumb:i,value:i==="start"?this.displayStart:this.displayEnd,valueStart:this.displayStart,valueEnd:this.displayEnd}:{thumb:"single",value:this.displayValue};this.mdDragEnd.emit(e)};this.onInputPointerDown=t=>()=>{this.pressingThumb=t;const i=this.range?{thumb:t,value:t==="start"?this.displayStart:this.displayEnd,valueStart:this.displayStart,valueEnd:this.displayEnd}:{thumb:"single",value:this.displayValue};this.mdDragStart.emit(i)};this.onInputPointerUp=t=>()=>{this.pressingThumb=null;const i=this.range?{thumb:t,value:t==="start"?this.displayStart:this.displayEnd,valueStart:this.displayStart,valueEnd:this.displayEnd}:{thumb:"single",value:this.displayValue};this.mdDragEnd.emit(i)}}get displayValue(){return this._liveValue??this.value}get displayStart(){return this._liveStart??this.valueStart}get displayEnd(){return this._liveEnd??this.valueEnd}setSingle(t){if(this.controlled){this._liveValue=t}else{this.value=t}}setStart(t){if(this.controlled){this._liveStart=t}else{this.valueStart=t}}setEnd(t){if(this.controlled){this._liveEnd=t}else{this.valueEnd=t}}commit(){if(this.controlled){this._liveValue=null;this._liveStart=null;this._liveEnd=null}else{if(this._liveValue!==null){this.value=this._liveValue;this._liveValue=null}if(this._liveStart!==null){this.valueStart=this._liveStart;this._liveStart=null}if(this._liveEnd!==null){this.valueEnd=this._liveEnd;this._liveEnd=null}}}connectedCallback(){this.initialValue=this.value;this.initialStart=this.valueStart;this.initialEnd=this.valueEnd}componentDidLoad(){this.clampValues();this.syncCssVars();this.syncFormValue()}syncFormValue(){if(!this.name&&!this.nameStart&&!this.nameEnd){n(this.internals,null);return}if(!this.range){n(this.internals,String(this.value));return}const t=new FormData;t.append(this.nameStart||this.name,String(this.valueStart));t.append(this.nameEnd||this.name,String(this.valueEnd));n(this.internals,t)}formResetCallback(){this.value=this.initialValue;this.valueStart=this.initialStart;this.valueEnd=this.initialEnd;this.syncFormValue()}formStateRestoreCallback(t){if(t==null)return;if(typeof t==="string"){const i=Number(t);if(Number.isFinite(i))this.value=i;return}const i=[...t.values()].map(Number).filter((t=>Number.isFinite(t)));if(i.length===2){this.valueStart=i[0];this.valueEnd=i[1]}}clampValues(){this.value=Math.min(this.max,Math.max(this.min,this.value));if(this.range){this.valueStart=Math.min(this.max,Math.max(this.min,this.valueStart));this.valueEnd=Math.min(this.max,Math.max(this.min,this.valueEnd))}}pct(t){if(this.max===this.min)return 0;return(t-this.min)/(this.max-this.min)*100}syncCssVars(){const t=this.el;const i=this.displayValue;const s=this.displayStart;const e=this.displayEnd;const r=t=>`${this.pct(t)}%`;t.style.setProperty("--_value-pct",r(i));const a=(this.min+this.max)/2;const n=this.pct(a);const l=this.pct(i);const d=Math.min(n,l);const o=Math.max(n,l);t.style.setProperty("--_center-pct",`${n}%`);t.style.setProperty("--_active-start-pct",`${d}%`);t.style.setProperty("--_active-width-pct",`${o-d}%`);const c=l<=n;t.style.setProperty("--_centered-start-gap",c?"var(--_track-thumb-gap)":"var(--_center-gap)");t.style.setProperty("--_centered-end-gap",c?"var(--_center-gap)":"var(--_track-thumb-gap)");if(this.range){t.style.setProperty("--_start-pct",r(s));t.style.setProperty("--_end-pct",r(e))}}onValuePropChange(){this._liveValue=null;this.syncCssVars();this.syncFormValue()}onValueStartPropChange(){this._liveStart=null;this.syncCssVars();this.syncFormValue()}onValueEndPropChange(){this._liveEnd=null;this.syncCssVars();this.syncFormValue()}onFormIdentityChange(){this.syncFormValue()}onLayoutDeps(){this.syncCssVars()}onBoundsChange(){this.clampValues();this.syncCssVars()}get showStops(){return this.stops}get isCentered(){return!this.range&&this.variant==="centered"}get showBubble(){return this.valueIndicator||this.labeled}formatValue(t){if(this.step>0){const i=(`${this.step}`.split(".")[1]||"").length;return t.toFixed(i)}return String(Math.round(t))}get insetArea(){return this.insetIcon&&!this.range&&this.size!=="xs"&&this.size!=="sm"}get insetOnActive(){if(!this.insetArea)return false;if(this.isCentered){const t=(this.min+this.max)/2;return this.displayValue<t}return this.displayValue>this.min}singleDetail(){return{value:this.displayValue}}rangeDetail(){return{value:this.rangeDragThumb==="start"?this.displayStart:this.displayEnd,valueStart:this.displayStart,valueEnd:this.displayEnd}}snapToStep(t){const i=this.step;if(i<=0)return Math.min(this.max,Math.max(this.min,t));const s=Math.round((t-this.min)/i);return Math.min(this.max,Math.max(this.min,this.min+s*i))}pointerToValue(t,i){const s=this.el.shadowRoot?.querySelector(".md-slider__rail");if(!s)return this.min;const e=s.getBoundingClientRect();const r=this.orientation==="vertical";let a;if(r){a=e.height>0?(e.bottom-i)/e.height:0}else{const i=getComputedStyle(this.el).direction==="rtl";a=e.width>0?i?(e.right-t)/e.width:(t-e.left)/e.width:0}a=Math.min(1,Math.max(0,a));const n=this.min+a*(this.max-this.min);return this.snapToStep(n)}applyRangePointerValue(t){if(this.rangeDragThumb==="start"){if(t>this.displayEnd){this.rangeDragThumb="end";this.pressingThumb="end";this.setEnd(t)}else{this.setStart(t)}}else if(this.rangeDragThumb==="end"){if(t<this.displayStart){this.rangeDragThumb="start";this.pressingThumb="start";this.setStart(t)}else{this.setEnd(t)}}this.syncCssVars();this.mdInput.emit(this.rangeDetail())}endRangePointerGesture(t){if(!this.rangeDragThumb)return;const i=this.rangeDragThumb;const s=this.rangeDetail();this.rangeDragThumb=null;this.pressingThumb=null;if(t){try{t.currentTarget.releasePointerCapture(t.pointerId)}catch{}}this.mdChange.emit(s);this.mdDragEnd.emit({thumb:i,...s});this.commit();this.syncCssVars()}getTickMarks(){if(!this.showStops||this.step<=0)return null;const t=this.max-this.min;const i=Math.floor(t/this.step)+1;if(i<2)return null;const s=this.orientation==="vertical";const r=this.step*.001;const a=(t,i)=>Math.abs(t-i)<r;const n=t=>{const s=t/(i-1);return`calc(var(--_tick-pad) + (100% - 2 * var(--_tick-pad)) * ${s})`};const l=(this.min+this.max)/2;const d=this.displayValue;const o=this.displayStart;const c=this.displayEnd;const h=t=>{if(this.range)return t>=o&&t<=c;if(this.isCentered){const i=Math.min(l,d);const s=Math.max(l,d);return t>=i&&t<=s}return t<=d};return Array.from({length:i},((t,i)=>{const r=this.min+i*this.step;const l=this.range?a(r,o)||a(r,c):a(r,d);const m=h(r);const u={"md-slider__tick":true,"md-slider__tick--on-active":l,"md-slider__tick--on-filled":m&&!l,"md-slider__tick--on-inactive":!m&&!l};return s?e("span",{class:u,style:{bottom:n(i)}}):e("span",{class:u,style:{insetInlineStart:n(i)}})}))}inputAriaLabel(t,i){if(t)return this.sliderAriaLabel||"slider";if(i==="start")return this.ariaLabelStart||this.sliderAriaLabel||"range start";return this.ariaLabelEnd||this.sliderAriaLabel||"range end"}wrapInputShell(t,i){return t?e("div",{class:"md-slider__input-shell"},i):i}render(){const t=this.orientation==="vertical";const i=this.showBubble;const s=this.insetArea;const a=t?{orient:"vertical"}:{};const n=this.displayValue;const l=this.displayStart;const d=this.displayEnd;return e(r,{key:"f38f7f4981a3204a40330e737263edfe2cf6f948",class:{"md-slider":true,[`md-slider--size-${this.size}`]:true,"md-slider--vertical":t,"md-slider--horizontal":!t,"md-slider--centered":this.isCentered,"md-slider--range":this.range,"md-slider--stops":this.showStops,"md-slider--inset":s,"md-slider--disabled":this.disabled},"aria-orientation":t?"vertical":"horizontal"},e("div",{key:"f40ed52fd1e840350c3cd737089efe50590a21e9",class:"md-slider__surface",part:"surface"},e("div",{key:"d53d5a9e829355365d3c549543e5c6de357c7b82",class:"md-slider__rail",onPointerDown:this.range?this.onRangeRailPointerDown:t?this.onVerticalRailPointerDown:undefined,onPointerMove:this.range?this.onRangeRailPointerMove:t?this.onVerticalRailPointerMove:undefined,onPointerUp:this.range?this.onRangeRailPointerUp:t?this.onVerticalRailPointerUp:undefined,onPointerCancel:this.range?this.onRangeRailPointerUp:t?this.onVerticalRailPointerUp:undefined,onLostPointerCapture:this.range?this.onRangeRailLostPointerCapture:t?this.onVerticalRailLostPointerCapture:undefined},e("div",{key:"09105e18b2f2ca3cafb720f85f3a274fa80474ab",class:"md-slider__track",part:"track"},e("div",{key:"3b4c474185357f9213066764add562647de56fe3",class:"md-slider__track-inactive",part:"track-inactive"}),e("div",{key:"1f0dd86eff947adeb2fb54f59a404f1903829b2d",class:"md-slider__track-active",part:"track-active"}),this.showStops&&e("div",{key:"7d7c4ac145cee460b182cde9c9dea7082ee13898",class:"md-slider__ticks"},this.getTickMarks()),s&&e("span",{key:"f1f78c02e2a28cf689b6dbfe7c1bb329cfafd8c4",class:{"md-slider__inset":true,"md-slider__inset--on-active":this.insetOnActive},part:"inset","aria-hidden":"true"},e("slot",{key:"f279cfc182914ddeb057d628416d73006286b09c",name:"inset-icon"},this.icon?e("span",{class:"md-slider__inset-font material-symbols-outlined"},this.icon):null))),this.range?[e("div",{class:{"md-slider__thumb":true,"md-slider__thumb--start":true,"md-slider__thumb--focus-visible":this.keyFocusedThumb==="start","md-slider__thumb--pressing":this.pressingThumb==="start"},style:{...!t?{insetInlineStart:"var(--_start-pct)"}:{}}},e("span",{class:"md-slider__thumb-knob",part:"thumb-knob"}),e("span",{class:"md-slider__state-layer",part:"state-layer","aria-hidden":"true"}),i&&e("span",{class:"md-slider__value-indicator",part:"value-indicator"},this.formatValue(l))),e("div",{class:{"md-slider__thumb":true,"md-slider__thumb--end":true,"md-slider__thumb--focus-visible":this.keyFocusedThumb==="end","md-slider__thumb--pressing":this.pressingThumb==="end"},style:{...!t?{insetInlineStart:"var(--_end-pct)"}:{}}},e("span",{class:"md-slider__thumb-knob",part:"thumb-knob"}),e("span",{class:"md-slider__state-layer",part:"state-layer","aria-hidden":"true"}),i&&e("span",{class:"md-slider__value-indicator",part:"value-indicator"},this.formatValue(d))),this.wrapInputShell(t,e("input",{type:"range",class:"md-slider__input md-slider__input--start",min:this.min,max:this.max,step:this.step,value:l,disabled:this.disabled,"aria-label":this.inputAriaLabel(false,"start"),"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":l,"aria-valuetext":this.valueStartText||undefined,"aria-orientation":t?"vertical":"horizontal",...a,onInput:t=>this.handleInput(t,true),onChange:t=>this.handleChange(t,true),onFocus:this.onInputFocus("start"),onBlur:this.onInputBlur("start"),onKeyDown:this.onInputKeyDown("start"),onKeyUp:this.onInputKeyUp("start"),onPointerDown:this.onInputPointerDown("start"),onPointerUp:this.onInputPointerUp("start")})),this.wrapInputShell(t,e("input",{type:"range",class:"md-slider__input md-slider__input--end",min:this.min,max:this.max,step:this.step,value:d,disabled:this.disabled,"aria-label":this.inputAriaLabel(false,"end"),"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":d,"aria-valuetext":this.valueEndText||undefined,"aria-orientation":t?"vertical":"horizontal",...a,onInput:t=>this.handleInput(t,false),onChange:t=>this.handleChange(t,false),onFocus:this.onInputFocus("end"),onBlur:this.onInputBlur("end"),onKeyDown:this.onInputKeyDown("end"),onKeyUp:this.onInputKeyUp("end"),onPointerDown:this.onInputPointerDown("end"),onPointerUp:this.onInputPointerUp("end")}))]:[e("div",{class:{"md-slider__thumb":true,"md-slider__thumb--focus-visible":this.keyFocusedThumb==="single","md-slider__thumb--pressing":this.pressingThumb==="single"},style:{...!t?{insetInlineStart:"var(--_value-pct)"}:{}}},e("span",{class:"md-slider__thumb-knob",part:"thumb-knob"}),e("span",{class:"md-slider__state-layer",part:"state-layer","aria-hidden":"true"}),i&&e("span",{class:"md-slider__value-indicator",part:"value-indicator"},this.formatValue(n))),this.wrapInputShell(t,e("input",{type:"range",class:"md-slider__input",min:this.min,max:this.max,step:this.step,value:n,disabled:this.disabled,"aria-label":this.inputAriaLabel(true),"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":n,"aria-valuetext":this.valueText||undefined,"aria-orientation":t?"vertical":"horizontal",...a,onInput:t=>this.handleInput(t),onChange:t=>this.handleChange(t),onFocus:this.onInputFocus("single"),onBlur:this.onInputBlur("single"),onKeyDown:this.onInputKeyDown("single"),onKeyUp:this.onInputKeyUp("single"),onPointerDown:this.onInputPointerDown("single"),onPointerUp:this.onInputPointerUp("single")}))])))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{onValuePropChange:0}],valueStart:[{onValueStartPropChange:0}],valueEnd:[{onValueEndPropChange:0}],name:[{onFormIdentityChange:0}],nameStart:[{onFormIdentityChange:0}],nameEnd:[{onFormIdentityChange:0}],range:[{onFormIdentityChange:0},{onLayoutDeps:0}],variant:[{onLayoutDeps:0}],min:[{onBoundsChange:0}],max:[{onBoundsChange:0}]}}static get style(){return l()}},[321,"md-slider",{min:[2],max:[2],value:[1026],step:[2],disabled:[516],name:[513],nameStart:[1,"name-start"],nameEnd:[1,"name-end"],variant:[513],range:[516],stops:[516],valueStart:[1026,"value-start"],valueEnd:[1026,"value-end"],size:[513],orientation:[513],fullHeight:[516,"full-height"],valueIndicator:[516,"value-indicator"],labeled:[516],insetIcon:[516,"inset-icon"],icon:[1],sliderAriaLabel:[1,"aria-label"],ariaLabelStart:[1,"label-start"],ariaLabelEnd:[1,"label-end"],valueText:[1,"value-text"],valueStartText:[1,"value-start-text"],valueEndText:[1,"value-end-text"],controlled:[516],density:[514],keyFocusedThumb:[32],pressingThumb:[32],_liveValue:[32],_liveStart:[32],_liveEnd:[32]},undefined,{value:[{onValuePropChange:0}],valueStart:[{onValueStartPropChange:0}],valueEnd:[{onValueEndPropChange:0}],name:[{onFormIdentityChange:0}],nameStart:[{onFormIdentityChange:0}],nameEnd:[{onFormIdentityChange:0}],range:[{onFormIdentityChange:0},{onLayoutDeps:0}],variant:[{onLayoutDeps:0}],min:[{onBoundsChange:0}],max:[{onBoundsChange:0}]}]);d.SLIDER_KEYS=new Set(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"]);function o(){if(typeof customElements==="undefined"){return}const t=["md-slider"];t.forEach((t=>{switch(t){case"md-slider":if(!customElements.get(a(t))){customElements.define(a(t),d)}break}}))}o();export{d as M,o as d};
-//# sourceMappingURL=p-Ddiw2Kjw.js.map
+import{p as t,H as i,c as s,h as e,d as r,t as a}from"./p-BR6gfOQH.js";import{s as n}from"./p-DWxN44zD.js";const l=()=>`:host{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;cursor:pointer;user-select:none;inline-size:100%;min-block-size:var(--_surface-min-block);overflow:visible;--md-slider-track-length:200px;--md-slider-active-color:var(--md-sys-color-primary);--md-slider-inactive-color:var(--md-sys-color-secondary-container);--md-slider-tick-active-color:var(--md-sys-color-primary);--md-slider-tick-filled-color:var(--md-sys-color-on-primary);--md-slider-tick-inactive-color:var(--md-sys-color-on-secondary-container);--md-slider-thumb-color:var(--md-sys-color-primary);--md-slider-value-bg:var(--md-sys-color-inverse-surface);--md-slider-value-color:var(--md-sys-color-inverse-on-surface);--md-slider-inset-icon-color:var(--md-slider-tick-inactive-color);--md-slider-inset-icon-active-color:var(--md-slider-tick-filled-color);--_value-pct:50%;--_center-pct:50%;--_active-start-pct:0%;--_active-width-pct:50%;--_start-pct:0%;--_end-pct:100%;--_center-gap:4px;--_active-track:var(--md-slider-active-color);--_inactive-track:var(--md-slider-inactive-color);--_thumb-fill:var(--md-slider-thumb-color);--_tick-active:var(--md-slider-tick-active-color);--_tick-filled:var(--md-slider-tick-filled-color);--_tick-inactive:var(--md-slider-tick-inactive-color)}:host(.md-slider--vertical){flex-direction:column;align-items:stretch;inline-size:auto;min-inline-size:var(--_vertical-min-inline);min-block-size:var(--md-slider-track-length)}:host([full-height].md-slider--vertical){block-size:100%;min-block-size:var(--md-slider-min-track-length, 88px)}:host(.md-slider--size-xs){--_track-thickness-default:16px;--_thumb-block-default:max(24px, calc(44px + var(--md-sys-density-scale, 0) * 4px));--_thumb-inline-default:4px;--_track-radius-default:8px;--_track-thumb-gap:6px;--_track-inside-corner:2px;--_inset-icon-size:0px}:host(.md-slider--size-sm){--_track-thickness-default:24px;--_thumb-block-default:max(24px, calc(44px + var(--md-sys-density-scale, 0) * 4px));--_thumb-inline-default:4px;--_track-radius-default:8px;--_track-thumb-gap:6px;--_track-inside-corner:2px;--_inset-icon-size:0px}:host(.md-slider--size-md){--_track-thickness-default:40px;--_thumb-block-default:max(24px, calc(52px + var(--md-sys-density-scale, 0) * 4px));--_thumb-inline-default:4px;--_track-radius-default:12px;--_track-thumb-gap:6px;--_track-inside-corner:2px;--_inset-icon-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px))}:host(.md-slider--size-lg){--_track-thickness-default:56px;--_thumb-block-default:max(24px, calc(68px + var(--md-sys-density-scale, 0) * 4px));--_thumb-inline-default:4px;--_track-radius-default:16px;--_track-thumb-gap:6px;--_track-inside-corner:2px;--_inset-icon-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px))}:host(.md-slider--size-xl){--_track-thickness-default:96px;--_thumb-block-default:max(24px, calc(108px + var(--md-sys-density-scale, 0) * 4px));--_thumb-inline-default:4px;--_track-radius-default:28px;--_track-thumb-gap:6px;--_track-inside-corner:2px;--_inset-icon-size:32px}:host{--_track-thickness:var(--md-slider-track-height, max(8px, calc(var(--_track-thickness-default) + var(--md-sys-density-scale, 0) * 4px)));--_track-radius:var(--md-slider-track-shape, var(--_track-radius-default));--_thumb-block:var(--md-slider-thumb-height, var(--_thumb-block-default));--_thumb-inline:var(--md-slider-thumb-width, var(--_thumb-inline-default));--_tick-size:max(4px, calc(var(--_track-thickness) * 0.12));--_tick-pad:calc(4px + var(--_tick-size) / 2)}:host(.md-slider--horizontal){--_surface-min-block:var(--_thumb-block)}:host(.md-slider--vertical){--_surface-min-block:var(--md-slider-track-length);--_vertical-min-inline:max(var(--_track-thickness), var(--_thumb-block))}.md-slider__inset{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--md-slider-inset-icon-color);inline-size:var(--_inset-icon-size, 24px);block-size:var(--_inset-icon-size, 24px)}:host(.md-slider--horizontal) .md-slider__inset{inset-inline-start:8px;inset-block-start:50%;transform:translateY(-50%)}:host(.md-slider--vertical) .md-slider__inset{inset-block-end:8px;inset-inline-start:50%;margin-inline-start:calc(-0.5 * var(--_inset-icon-size, 24px))}.md-slider__inset--on-active{color:var(--md-slider-inset-icon-active-color)}.md-slider__inset-font{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons'), sans-serif;font-size:var(--_inset-icon-size, 24px);font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;overflow-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;pointer-events:none}::slotted([slot='inset-icon']){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_inset-icon-size, 24px);block-size:var(--_inset-icon-size, 24px);font-size:var(--_inset-icon-size, 24px);color:inherit;fill:currentColor;pointer-events:none}.md-slider__surface{position:relative;display:flex;flex:1;flex-direction:row;align-items:center;min-inline-size:0;min-block-size:var(--_surface-min-block);overflow:visible}:host(.md-slider--vertical) .md-slider__surface{flex-direction:column;flex:1;align-items:center;justify-content:center;min-block-size:var(--md-slider-track-length)}.md-slider__rail{position:relative;flex:1;min-inline-size:0;min-block-size:var(--_surface-min-block);overflow:visible}:host(.md-slider--range) .md-slider__rail,:host(.md-slider--vertical) .md-slider__rail{touch-action:none;cursor:pointer}:host(.md-slider--range) .md-slider__input,:host(.md-slider--vertical) .md-slider__input{pointer-events:none}:host(.md-slider--vertical) .md-slider__rail{inline-size:max(var(--_track-thickness), var(--_thumb-block));block-size:var(--md-slider-track-length);flex:none}:host([full-height].md-slider--vertical) .md-slider__surface{min-block-size:0}:host([full-height].md-slider--vertical) .md-slider__rail{block-size:auto;flex:1 1 auto;min-block-size:0}:host([full-height].md-slider--vertical) .md-slider__input{position:absolute;inset:0;inline-size:100%;block-size:100%;transform:none}.md-slider__track{position:absolute;pointer-events:none;border-radius:var(--_track-radius);overflow:hidden}:host(.md-slider--horizontal) .md-slider__track{inset-inline:0;inset-block-start:50%;transform:translateY(-50%);block-size:var(--_track-thickness);inline-size:100%}:host(.md-slider--vertical) .md-slider__track{inset-block:0;inset-inline-start:50%;margin-inline-start:calc(-0.5 * var(--_track-thickness));inline-size:var(--_track-thickness);block-size:100%}.md-slider__track-inactive{position:absolute;background-color:var(--_inactive-track)}.md-slider__track-active{position:absolute;background-color:var(--_active-track)}:host(.md-slider--horizontal:not(.md-slider--centered):not(.md-slider--range)) .md-slider__track-active{inset-inline-start:0;inset-block:0;inline-size:max(0px, calc(var(--_value-pct) - var(--_track-thumb-gap)));block-size:100%;border-start-end-radius:var(--_track-inside-corner);border-end-end-radius:var(--_track-inside-corner)}:host(.md-slider--horizontal:not(.md-slider--centered):not(.md-slider--range)) .md-slider__track-inactive{inset-block:0;inset-inline-start:calc(var(--_value-pct) + var(--_track-thumb-gap));inset-inline-end:0;border-start-start-radius:var(--_track-inside-corner);border-end-start-radius:var(--_track-inside-corner)}:host(.md-slider--vertical:not(.md-slider--centered):not(.md-slider--range)) .md-slider__track-active{inset-inline:0;inset-block-end:0;block-size:max(0px, calc(var(--_value-pct) - var(--_track-thumb-gap)));inline-size:100%;border-start-start-radius:var(--_track-inside-corner);border-start-end-radius:var(--_track-inside-corner)}:host(.md-slider--vertical:not(.md-slider--centered):not(.md-slider--range)) .md-slider__track-inactive{inset-inline:0;inset-block-start:0;block-size:max(0px, calc(100% - var(--_value-pct) - var(--_track-thumb-gap)));border-end-start-radius:var(--_track-inside-corner);border-end-end-radius:var(--_track-inside-corner)}:host(.md-slider--horizontal.md-slider--centered) .md-slider__track-inactive{inset-block:0;inset-inline-start:0;inline-size:max(0px, calc(var(--_active-start-pct) - var(--_centered-start-gap)));border-start-end-radius:var(--_track-inside-corner);border-end-end-radius:var(--_track-inside-corner)}:host(.md-slider--horizontal.md-slider--centered) .md-slider__track::after{content:'';position:absolute;inset-block:0;inset-inline-start:calc(var(--_active-start-pct) + var(--_active-width-pct) + var(--_centered-end-gap));inset-inline-end:0;background-color:var(--_inactive-track);border-start-start-radius:var(--_track-inside-corner);border-end-start-radius:var(--_track-inside-corner)}:host(.md-slider--horizontal.md-slider--centered) .md-slider__track-active{inset-inline-start:calc(var(--_active-start-pct) + var(--_centered-start-gap));inset-block:0;inline-size:max(0px, calc(var(--_active-width-pct) - var(--_centered-start-gap) - var(--_centered-end-gap)));block-size:100%;border-radius:var(--_track-inside-corner)}:host(.md-slider--vertical.md-slider--centered) .md-slider__track-inactive{inset-inline:0;inset-block-end:0;block-size:max(0px, calc(var(--_active-start-pct) - var(--_centered-start-gap)));border-start-start-radius:var(--_track-inside-corner);border-start-end-radius:var(--_track-inside-corner)}:host(.md-slider--vertical.md-slider--centered) .md-slider__track::after{content:'';position:absolute;inset-inline:0;inset-block-start:0;block-size:max(0px, calc(100% - var(--_active-start-pct) - var(--_active-width-pct) - var(--_centered-end-gap)));background-color:var(--_inactive-track);border-end-start-radius:var(--_track-inside-corner);border-end-end-radius:var(--_track-inside-corner)}:host(.md-slider--vertical.md-slider--centered) .md-slider__track-active{inset-inline:0;inset-block-end:calc(var(--_active-start-pct) + var(--_centered-start-gap));block-size:max(0px, calc(var(--_active-width-pct) - var(--_centered-start-gap) - var(--_centered-end-gap)));inline-size:100%;border-radius:var(--_track-inside-corner)}:host(.md-slider--horizontal.md-slider--range) .md-slider__track-inactive{inset-block:0;inset-inline-start:0;inline-size:max(0px, calc(var(--_start-pct) - var(--_track-thumb-gap)));border-start-end-radius:var(--_track-inside-corner);border-end-end-radius:var(--_track-inside-corner)}:host(.md-slider--horizontal.md-slider--range) .md-slider__track::after{content:'';position:absolute;inset-block:0;inset-inline-start:calc(var(--_end-pct) + var(--_track-thumb-gap));inset-inline-end:0;background-color:var(--_inactive-track);border-start-start-radius:var(--_track-inside-corner);border-end-start-radius:var(--_track-inside-corner)}:host(.md-slider--horizontal.md-slider--range) .md-slider__track-active{inset-inline-start:calc(var(--_start-pct) + var(--_track-thumb-gap));inset-block:0;inline-size:max(0px, calc(var(--_end-pct) - var(--_start-pct) - 2 * var(--_track-thumb-gap)));block-size:100%;border-radius:var(--_track-inside-corner)}:host(.md-slider--vertical.md-slider--range) .md-slider__track-inactive{inset-inline:0;inset-block-end:0;block-size:max(0px, calc(var(--_start-pct) - var(--_track-thumb-gap)));border-start-start-radius:var(--_track-inside-corner);border-start-end-radius:var(--_track-inside-corner)}:host(.md-slider--vertical.md-slider--range) .md-slider__track::after{content:'';position:absolute;inset-inline:0;inset-block-start:0;block-size:max(0px, calc(100% - var(--_end-pct) - var(--_track-thumb-gap)));background-color:var(--_inactive-track);border-end-start-radius:var(--_track-inside-corner);border-end-end-radius:var(--_track-inside-corner)}:host(.md-slider--vertical.md-slider--range) .md-slider__track-active{inset-inline:0;inset-block-end:calc(var(--_start-pct) + var(--_track-thumb-gap));block-size:max(0px, calc(var(--_end-pct) - var(--_start-pct) - 2 * var(--_track-thumb-gap)));inline-size:100%;border-radius:var(--_track-inside-corner)}.md-slider__ticks{position:absolute;inset:0;pointer-events:none;z-index:1}:host(.md-slider--horizontal) .md-slider__tick{position:absolute;inset-block-start:50%;margin-inline-start:calc(-0.5 * var(--_tick-size));margin-block-start:calc(-0.5 * var(--_tick-size));inset-inline-start:0}:host(.md-slider--vertical) .md-slider__tick{position:absolute;inset-inline-start:50%;margin-inline-start:calc(-0.5 * var(--_tick-size));margin-block-end:calc(-0.5 * var(--_tick-size))}.md-slider__tick{inline-size:var(--_tick-size);block-size:var(--_tick-size);border-radius:50%}.md-slider__tick--on-active{background-color:var(--_tick-active);opacity:0}.md-slider__tick--on-filled{background-color:var(--_tick-filled)}.md-slider__tick--on-inactive{background-color:var(--_tick-inactive)}.md-slider__thumb{position:absolute;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;inline-size:var(--_thumb-inline);block-size:var(--_thumb-block);overflow:visible}:host(.md-slider--horizontal) .md-slider__thumb{inset-block-start:50%;transform:translateY(-50%);margin-inline-start:calc(-0.5 * var(--_thumb-inline));inset-inline-start:var(--_value-pct)}:host(.md-slider--horizontal) .md-slider__thumb--start{inset-inline-start:var(--_start-pct)}:host(.md-slider--horizontal) .md-slider__thumb--end{inset-inline-start:var(--_end-pct)}:host(.md-slider--vertical) .md-slider__thumb{inline-size:var(--_thumb-block);block-size:var(--_thumb-inline);inset-inline-start:50%;inset-block-end:calc(var(--_value-pct) - var(--_thumb-inline) / 2);inset-block-start:auto;margin-inline-start:calc(-0.5 * var(--_thumb-block))}:host(.md-slider--vertical) .md-slider__thumb--start{inset-block-end:calc(var(--_start-pct) - var(--_thumb-inline) / 2)}:host(.md-slider--vertical) .md-slider__thumb--end{inset-block-end:calc(var(--_end-pct) - var(--_thumb-inline) / 2)}.md-slider__thumb-knob{display:block;inline-size:var(--_thumb-inline);block-size:var(--_thumb-block);border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--_thumb-fill);box-shadow:none;flex-shrink:0;transition:inline-size var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),     block-size var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard)}:host(.md-slider--vertical) .md-slider__thumb-knob{inline-size:var(--_thumb-block);block-size:var(--_thumb-inline)}:host(:not(.md-slider--disabled)) .md-slider__thumb--pressing>.md-slider__thumb-knob{inline-size:2px;block-size:calc(var(--_thumb-block) * 1.05)}:host(.md-slider--vertical:not(.md-slider--disabled)) .md-slider__thumb--pressing>.md-slider__thumb-knob{inline-size:calc(var(--_thumb-block) * 1.05);block-size:2px}.md-slider__state-layer{display:none}.md-slider__thumb--focus-visible>.md-slider__thumb-knob{outline:3px solid var(--md-sys-color-secondary);outline-offset:2px}.md-slider__value-indicator{position:absolute;z-index:3;min-inline-size:max(28px, calc(48px + var(--md-sys-density-scale, 0) * 4px));min-block-size:max(24px, calc(44px + var(--md-sys-density-scale, 0) * 4px));display:inline-flex;align-items:center;justify-content:center;padding-block:var(--md-slider-value-padding-block, var(--md-sys-spacing-inset-md, 12px));padding-inline:var(--md-slider-value-padding-inline, var(--md-sys-spacing-inset-lg, 16px));box-sizing:border-box;background-color:var(--md-slider-value-bg);color:var(--md-slider-value-color);border-radius:var(--md-slider-value-shape, var(--md-sys-shape-corner-full, 9999px));font-family:var(--md-slider-value-font-family, var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif));font-size:var(--md-slider-value-font-size, var(--md-sys-typescale-label-medium-size, 12px));font-weight:var(--md-slider-value-font-weight, var(--md-sys-typescale-label-medium-weight, 500));line-height:var(--md-slider-value-line-height, var(--md-sys-typescale-label-medium-line-height, 16px));letter-spacing:var(--md-sys-typescale-label-medium-letter-spacing, 0.5px);white-space:nowrap;pointer-events:none}:host(.md-slider--horizontal) .md-slider__value-indicator{inset-block-end:calc(100% + 4px);left:50%;transform:translateX(-50%)}:host(.md-slider--vertical) .md-slider__value-indicator{inset-inline-start:calc(100% + 4px);inset-block-end:50%;transform:translateY(50%)}.md-slider__input-shell{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.md-slider__input{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;padding:0;opacity:0;cursor:pointer;pointer-events:auto;box-sizing:border-box}:host(.md-slider--vertical) .md-slider__input-shell{align-items:center;justify-content:center}:host(.md-slider--vertical) .md-slider__input{position:relative;inset:auto;inline-size:var(--md-slider-track-length);block-size:max(44px, var(--_state-layer-size));transform:rotate(-90deg);transform-origin:center center}.md-slider__input--start,.md-slider__input--end{inline-size:100%;block-size:100%}:host(.md-slider--disabled){cursor:not-allowed;pointer-events:none;opacity:var(--md-sys-state-disabled-content-opacity)}:host(.md-slider--disabled) .md-slider__track-inactive{background-color:color-mix(     in srgb,     var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%),     var(--md-sys-color-surface)   )}:host(.md-slider--disabled) .md-slider__track-active,:host(.md-slider--disabled) .md-slider__thumb-knob{background-color:color-mix(     in srgb,     var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%),     transparent   );box-shadow:none}:host(:focus-visible){outline:none}:host(.md-slider--stops) .md-slider__track-active{transition:inline-size var(--md-sys-motion-spring-spatial-fast-duration, 350ms) var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90)),     block-size var(--md-sys-motion-spring-spatial-fast-duration, 350ms) var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90)),     inset-inline-start var(--md-sys-motion-spring-spatial-fast-duration, 350ms) var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90)),     inset-block-end var(--md-sys-motion-spring-spatial-fast-duration, 350ms) var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90))}:host(.md-slider--stops) .md-slider__tick{transition:opacity var(--md-sys-motion-spring-effects-default-duration, 200ms) var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00)),     background-color var(--md-sys-motion-spring-effects-default-duration, 200ms) var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00))}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const d=t(class t extends i{constructor(i){super();if(i!==false){this.__registerHost()}this.__attachShadow();this.mdInput=s(this,"mdInput",7);this.mdChange=s(this,"mdChange",7);this.mdFocus=s(this,"mdFocus",7);this.mdBlur=s(this,"mdBlur",7);this.mdDragStart=s(this,"mdDragStart",7);this.mdDragEnd=s(this,"mdDragEnd",7);this.internals=this.attachInternals();this.min=0;this.max=100;this.value=50;this.step=1;this.disabled=false;this.name="";this.nameStart="";this.nameEnd="";this.variant="standard";this.range=false;this.stops=false;this.valueStart=0;this.valueEnd=100;this.size="xs";this.orientation="horizontal";this.fullHeight=false;this.valueIndicator=false;this.labeled=false;this.insetIcon=false;this.icon="";this.sliderAriaLabel="";this.ariaLabelStart="";this.ariaLabelEnd="";this.valueText="";this.valueStartText="";this.valueEndText="";this.controlled=false;this.density=0;this.keyFocusedThumb=null;this.pressingThumb=null;this._liveValue=null;this._liveStart=null;this._liveEnd=null;this.rangeDragThumb=null;this.verticalDragging=false;this.initialValue=0;this.initialStart=0;this.initialEnd=0;this.handleInput=(t,i)=>{const s=t.target;const e=Number(s.value);if(this.range){if(i){if(e>this.displayEnd){this.setEnd(e);this.setStart(e)}else{this.setStart(e)}}else{if(e<this.displayStart){this.setStart(e);this.setEnd(e)}else{this.setEnd(e)}}this.syncCssVars();this.mdInput.emit(this.rangeDetail())}else{this.setSingle(e);this.syncCssVars();this.mdInput.emit(this.singleDetail())}};this.handleChange=(t,i)=>{const s=t.target;const e=Number(s.value);if(this.range){if(i){if(e>this.displayEnd){this.setEnd(e);this.setStart(e)}else{this.setStart(e)}}else{if(e<this.displayStart){this.setStart(e);this.setEnd(e)}else{this.setEnd(e)}}this.syncCssVars();this.mdChange.emit(this.rangeDetail())}else{this.setSingle(e);this.syncCssVars();this.mdChange.emit(this.singleDetail())}this.commit()};this.onRangeRailPointerDown=t=>{if(!this.range||this.disabled)return;const i=t.currentTarget;const s=this.pointerToValue(t.clientX,t.clientY);const e=Math.abs(s-this.displayStart);const r=Math.abs(s-this.displayEnd);if(e===r){this.rangeDragThumb=s>=this.displayEnd?"end":"start"}else{this.rangeDragThumb=e<r?"start":"end"}this.pressingThumb=this.rangeDragThumb;this.mdDragStart.emit({thumb:this.rangeDragThumb,value:this.rangeDragThumb==="start"?this.displayStart:this.displayEnd,valueStart:this.displayStart,valueEnd:this.displayEnd});this.applyRangePointerValue(s);try{i.setPointerCapture(t.pointerId)}catch{}t.preventDefault()};this.onRangeRailPointerMove=t=>{if(!this.range||this.disabled||!this.rangeDragThumb)return;this.applyRangePointerValue(this.pointerToValue(t.clientX,t.clientY));t.preventDefault()};this.onRangeRailPointerUp=t=>{if(!this.range)return;this.endRangePointerGesture(t)};this.onRangeRailLostPointerCapture=()=>{if(!this.rangeDragThumb)return;const t=this.rangeDragThumb;const i=this.rangeDetail();this.rangeDragThumb=null;this.pressingThumb=null;this.mdChange.emit(i);this.mdDragEnd.emit({thumb:t,...i});this.commit();this.syncCssVars()};this.onVerticalRailPointerDown=t=>{if(this.range||this.disabled||this.orientation!=="vertical")return;const i=t.currentTarget;this.verticalDragging=true;this.pressingThumb="single";const s=this.pointerToValue(t.clientX,t.clientY);this.setSingle(s);this.syncCssVars();this.mdDragStart.emit({thumb:"single",value:this.displayValue});this.mdInput.emit(this.singleDetail());try{i.setPointerCapture(t.pointerId)}catch{}t.preventDefault()};this.onVerticalRailPointerMove=t=>{if(!this.verticalDragging)return;const i=this.pointerToValue(t.clientX,t.clientY);this.setSingle(i);this.syncCssVars();this.mdInput.emit(this.singleDetail());t.preventDefault()};this.onVerticalRailPointerUp=t=>{if(!this.verticalDragging)return;this.verticalDragging=false;this.pressingThumb=null;try{t.currentTarget.releasePointerCapture(t.pointerId)}catch{}const i=this.singleDetail();this.mdChange.emit(i);this.mdDragEnd.emit({thumb:"single",...i});this.commit();this.syncCssVars()};this.onVerticalRailLostPointerCapture=()=>{if(!this.verticalDragging)return;this.verticalDragging=false;this.pressingThumb=null;const t=this.singleDetail();this.mdChange.emit(t);this.mdDragEnd.emit({thumb:"single",...t});this.commit();this.syncCssVars()};this.onInputFocus=t=>i=>{const s=i.target;try{if(s.matches(":focus-visible")){this.keyFocusedThumb=t}}catch{this.keyFocusedThumb=t}this.mdFocus.emit({thumb:t})};this.onInputBlur=t=>()=>{this.keyFocusedThumb=null;this.mdBlur.emit({thumb:t})};this.onInputKeyDown=i=>s=>{if(!t.SLIDER_KEYS.has(s.key))return;if(!this.pressingThumb){this.pressingThumb=i;const t=this.range?{thumb:i,value:i==="start"?this.displayStart:this.displayEnd,valueStart:this.displayStart,valueEnd:this.displayEnd}:{thumb:"single",value:this.displayValue};this.mdDragStart.emit(t)}};this.onInputKeyUp=i=>s=>{if(!t.SLIDER_KEYS.has(s.key))return;this.pressingThumb=null;const e=this.range?{thumb:i,value:i==="start"?this.displayStart:this.displayEnd,valueStart:this.displayStart,valueEnd:this.displayEnd}:{thumb:"single",value:this.displayValue};this.mdDragEnd.emit(e)};this.onInputPointerDown=t=>()=>{this.pressingThumb=t;const i=this.range?{thumb:t,value:t==="start"?this.displayStart:this.displayEnd,valueStart:this.displayStart,valueEnd:this.displayEnd}:{thumb:"single",value:this.displayValue};this.mdDragStart.emit(i)};this.onInputPointerUp=t=>()=>{this.pressingThumb=null;const i=this.range?{thumb:t,value:t==="start"?this.displayStart:this.displayEnd,valueStart:this.displayStart,valueEnd:this.displayEnd}:{thumb:"single",value:this.displayValue};this.mdDragEnd.emit(i)}}get displayValue(){return this._liveValue??this.value}get displayStart(){return this._liveStart??this.valueStart}get displayEnd(){return this._liveEnd??this.valueEnd}setSingle(t){if(this.controlled){this._liveValue=t}else{this.value=t}}setStart(t){if(this.controlled){this._liveStart=t}else{this.valueStart=t}}setEnd(t){if(this.controlled){this._liveEnd=t}else{this.valueEnd=t}}commit(){if(this.controlled){this._liveValue=null;this._liveStart=null;this._liveEnd=null}else{if(this._liveValue!==null){this.value=this._liveValue;this._liveValue=null}if(this._liveStart!==null){this.valueStart=this._liveStart;this._liveStart=null}if(this._liveEnd!==null){this.valueEnd=this._liveEnd;this._liveEnd=null}}}connectedCallback(){this.initialValue=this.value;this.initialStart=this.valueStart;this.initialEnd=this.valueEnd}componentDidLoad(){this.clampValues();this.syncCssVars();this.syncFormValue()}syncFormValue(){if(!this.name&&!this.nameStart&&!this.nameEnd){n(this.internals,null);return}if(!this.range){n(this.internals,String(this.value));return}const t=new FormData;t.append(this.nameStart||this.name,String(this.valueStart));t.append(this.nameEnd||this.name,String(this.valueEnd));n(this.internals,t)}formResetCallback(){this.value=this.initialValue;this.valueStart=this.initialStart;this.valueEnd=this.initialEnd;this.syncFormValue()}formStateRestoreCallback(t){if(t==null)return;if(typeof t==="string"){const i=Number(t);if(Number.isFinite(i))this.value=i;return}const i=[...t.values()].map(Number).filter((t=>Number.isFinite(t)));if(i.length===2){this.valueStart=i[0];this.valueEnd=i[1]}}clampValues(){this.value=Math.min(this.max,Math.max(this.min,this.value));if(this.range){this.valueStart=Math.min(this.max,Math.max(this.min,this.valueStart));this.valueEnd=Math.min(this.max,Math.max(this.min,this.valueEnd))}}pct(t){if(this.max===this.min)return 0;return(t-this.min)/(this.max-this.min)*100}syncCssVars(){const t=this.el;const i=this.displayValue;const s=this.displayStart;const e=this.displayEnd;const r=t=>`${this.pct(t)}%`;t.style.setProperty("--_value-pct",r(i));const a=(this.min+this.max)/2;const n=this.pct(a);const l=this.pct(i);const d=Math.min(n,l);const o=Math.max(n,l);t.style.setProperty("--_center-pct",`${n}%`);t.style.setProperty("--_active-start-pct",`${d}%`);t.style.setProperty("--_active-width-pct",`${o-d}%`);const c=l<=n;t.style.setProperty("--_centered-start-gap",c?"var(--_track-thumb-gap)":"var(--_center-gap)");t.style.setProperty("--_centered-end-gap",c?"var(--_center-gap)":"var(--_track-thumb-gap)");if(this.range){t.style.setProperty("--_start-pct",r(s));t.style.setProperty("--_end-pct",r(e))}}onValuePropChange(){this._liveValue=null;this.syncCssVars();this.syncFormValue()}onValueStartPropChange(){this._liveStart=null;this.syncCssVars();this.syncFormValue()}onValueEndPropChange(){this._liveEnd=null;this.syncCssVars();this.syncFormValue()}onFormIdentityChange(){this.syncFormValue()}onLayoutDeps(){this.syncCssVars()}onBoundsChange(){this.clampValues();this.syncCssVars()}get showStops(){return this.stops}get isCentered(){return!this.range&&this.variant==="centered"}get showBubble(){return this.valueIndicator||this.labeled}formatValue(t){if(this.step>0){const i=(`${this.step}`.split(".")[1]||"").length;return t.toFixed(i)}return String(Math.round(t))}get insetArea(){return this.insetIcon&&!this.range&&this.size!=="xs"&&this.size!=="sm"}get insetOnActive(){if(!this.insetArea)return false;if(this.isCentered){const t=(this.min+this.max)/2;return this.displayValue<t}return this.displayValue>this.min}singleDetail(){return{value:this.displayValue}}rangeDetail(){return{value:this.rangeDragThumb==="start"?this.displayStart:this.displayEnd,valueStart:this.displayStart,valueEnd:this.displayEnd}}snapToStep(t){const i=this.step;if(i<=0)return Math.min(this.max,Math.max(this.min,t));const s=Math.round((t-this.min)/i);return Math.min(this.max,Math.max(this.min,this.min+s*i))}pointerToValue(t,i){const s=this.el.shadowRoot?.querySelector(".md-slider__rail");if(!s)return this.min;const e=s.getBoundingClientRect();const r=this.orientation==="vertical";let a;if(r){a=e.height>0?(e.bottom-i)/e.height:0}else{const i=getComputedStyle(this.el).direction==="rtl";a=e.width>0?i?(e.right-t)/e.width:(t-e.left)/e.width:0}a=Math.min(1,Math.max(0,a));const n=this.min+a*(this.max-this.min);return this.snapToStep(n)}applyRangePointerValue(t){if(this.rangeDragThumb==="start"){if(t>this.displayEnd){this.rangeDragThumb="end";this.pressingThumb="end";this.setEnd(t)}else{this.setStart(t)}}else if(this.rangeDragThumb==="end"){if(t<this.displayStart){this.rangeDragThumb="start";this.pressingThumb="start";this.setStart(t)}else{this.setEnd(t)}}this.syncCssVars();this.mdInput.emit(this.rangeDetail())}endRangePointerGesture(t){if(!this.rangeDragThumb)return;const i=this.rangeDragThumb;const s=this.rangeDetail();this.rangeDragThumb=null;this.pressingThumb=null;if(t){try{t.currentTarget.releasePointerCapture(t.pointerId)}catch{}}this.mdChange.emit(s);this.mdDragEnd.emit({thumb:i,...s});this.commit();this.syncCssVars()}getTickMarks(){if(!this.showStops||this.step<=0)return null;const t=this.max-this.min;const i=Math.floor(t/this.step)+1;if(i<2)return null;const s=this.orientation==="vertical";const r=this.step*.001;const a=(t,i)=>Math.abs(t-i)<r;const n=t=>{const s=t/(i-1);return`calc(var(--_tick-pad) + (100% - 2 * var(--_tick-pad)) * ${s})`};const l=(this.min+this.max)/2;const d=this.displayValue;const o=this.displayStart;const c=this.displayEnd;const h=t=>{if(this.range)return t>=o&&t<=c;if(this.isCentered){const i=Math.min(l,d);const s=Math.max(l,d);return t>=i&&t<=s}return t<=d};return Array.from({length:i},((t,i)=>{const r=this.min+i*this.step;const l=this.range?a(r,o)||a(r,c):a(r,d);const m=h(r);const u={"md-slider__tick":true,"md-slider__tick--on-active":l,"md-slider__tick--on-filled":m&&!l,"md-slider__tick--on-inactive":!m&&!l};return s?e("span",{class:u,style:{bottom:n(i)}}):e("span",{class:u,style:{insetInlineStart:n(i)}})}))}inputAriaLabel(t,i){if(t)return this.sliderAriaLabel||"slider";if(i==="start")return this.ariaLabelStart||this.sliderAriaLabel||"range start";return this.ariaLabelEnd||this.sliderAriaLabel||"range end"}wrapInputShell(t,i){return t?e("div",{class:"md-slider__input-shell"},i):i}render(){const t=this.orientation==="vertical";const i=this.showBubble;const s=this.insetArea;const a=t?{orient:"vertical"}:{};const n=this.displayValue;const l=this.displayStart;const d=this.displayEnd;return e(r,{key:"f38f7f4981a3204a40330e737263edfe2cf6f948",class:{"md-slider":true,[`md-slider--size-${this.size}`]:true,"md-slider--vertical":t,"md-slider--horizontal":!t,"md-slider--centered":this.isCentered,"md-slider--range":this.range,"md-slider--stops":this.showStops,"md-slider--inset":s,"md-slider--disabled":this.disabled},"aria-orientation":t?"vertical":"horizontal"},e("div",{key:"f40ed52fd1e840350c3cd737089efe50590a21e9",class:"md-slider__surface",part:"surface"},e("div",{key:"d53d5a9e829355365d3c549543e5c6de357c7b82",class:"md-slider__rail",onPointerDown:this.range?this.onRangeRailPointerDown:t?this.onVerticalRailPointerDown:undefined,onPointerMove:this.range?this.onRangeRailPointerMove:t?this.onVerticalRailPointerMove:undefined,onPointerUp:this.range?this.onRangeRailPointerUp:t?this.onVerticalRailPointerUp:undefined,onPointerCancel:this.range?this.onRangeRailPointerUp:t?this.onVerticalRailPointerUp:undefined,onLostPointerCapture:this.range?this.onRangeRailLostPointerCapture:t?this.onVerticalRailLostPointerCapture:undefined},e("div",{key:"09105e18b2f2ca3cafb720f85f3a274fa80474ab",class:"md-slider__track",part:"track"},e("div",{key:"3b4c474185357f9213066764add562647de56fe3",class:"md-slider__track-inactive",part:"track-inactive"}),e("div",{key:"1f0dd86eff947adeb2fb54f59a404f1903829b2d",class:"md-slider__track-active",part:"track-active"}),this.showStops&&e("div",{key:"7d7c4ac145cee460b182cde9c9dea7082ee13898",class:"md-slider__ticks"},this.getTickMarks()),s&&e("span",{key:"f1f78c02e2a28cf689b6dbfe7c1bb329cfafd8c4",class:{"md-slider__inset":true,"md-slider__inset--on-active":this.insetOnActive},part:"inset","aria-hidden":"true"},e("slot",{key:"f279cfc182914ddeb057d628416d73006286b09c",name:"inset-icon"},this.icon?e("span",{class:"md-slider__inset-font material-symbols-outlined"},this.icon):null))),this.range?[e("div",{class:{"md-slider__thumb":true,"md-slider__thumb--start":true,"md-slider__thumb--focus-visible":this.keyFocusedThumb==="start","md-slider__thumb--pressing":this.pressingThumb==="start"},style:{...!t?{insetInlineStart:"var(--_start-pct)"}:{}}},e("span",{class:"md-slider__thumb-knob",part:"thumb-knob"}),e("span",{class:"md-slider__state-layer",part:"state-layer","aria-hidden":"true"}),i&&e("span",{class:"md-slider__value-indicator",part:"value-indicator"},this.formatValue(l))),e("div",{class:{"md-slider__thumb":true,"md-slider__thumb--end":true,"md-slider__thumb--focus-visible":this.keyFocusedThumb==="end","md-slider__thumb--pressing":this.pressingThumb==="end"},style:{...!t?{insetInlineStart:"var(--_end-pct)"}:{}}},e("span",{class:"md-slider__thumb-knob",part:"thumb-knob"}),e("span",{class:"md-slider__state-layer",part:"state-layer","aria-hidden":"true"}),i&&e("span",{class:"md-slider__value-indicator",part:"value-indicator"},this.formatValue(d))),this.wrapInputShell(t,e("input",{type:"range",class:"md-slider__input md-slider__input--start",min:this.min,max:this.max,step:this.step,value:l,disabled:this.disabled,"aria-label":this.inputAriaLabel(false,"start"),"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":l,"aria-valuetext":this.valueStartText||undefined,"aria-orientation":t?"vertical":"horizontal",...a,onInput:t=>this.handleInput(t,true),onChange:t=>this.handleChange(t,true),onFocus:this.onInputFocus("start"),onBlur:this.onInputBlur("start"),onKeyDown:this.onInputKeyDown("start"),onKeyUp:this.onInputKeyUp("start"),onPointerDown:this.onInputPointerDown("start"),onPointerUp:this.onInputPointerUp("start")})),this.wrapInputShell(t,e("input",{type:"range",class:"md-slider__input md-slider__input--end",min:this.min,max:this.max,step:this.step,value:d,disabled:this.disabled,"aria-label":this.inputAriaLabel(false,"end"),"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":d,"aria-valuetext":this.valueEndText||undefined,"aria-orientation":t?"vertical":"horizontal",...a,onInput:t=>this.handleInput(t,false),onChange:t=>this.handleChange(t,false),onFocus:this.onInputFocus("end"),onBlur:this.onInputBlur("end"),onKeyDown:this.onInputKeyDown("end"),onKeyUp:this.onInputKeyUp("end"),onPointerDown:this.onInputPointerDown("end"),onPointerUp:this.onInputPointerUp("end")}))]:[e("div",{class:{"md-slider__thumb":true,"md-slider__thumb--focus-visible":this.keyFocusedThumb==="single","md-slider__thumb--pressing":this.pressingThumb==="single"},style:{...!t?{insetInlineStart:"var(--_value-pct)"}:{}}},e("span",{class:"md-slider__thumb-knob",part:"thumb-knob"}),e("span",{class:"md-slider__state-layer",part:"state-layer","aria-hidden":"true"}),i&&e("span",{class:"md-slider__value-indicator",part:"value-indicator"},this.formatValue(n))),this.wrapInputShell(t,e("input",{type:"range",class:"md-slider__input",min:this.min,max:this.max,step:this.step,value:n,disabled:this.disabled,"aria-label":this.inputAriaLabel(true),"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":n,"aria-valuetext":this.valueText||undefined,"aria-orientation":t?"vertical":"horizontal",...a,onInput:t=>this.handleInput(t),onChange:t=>this.handleChange(t),onFocus:this.onInputFocus("single"),onBlur:this.onInputBlur("single"),onKeyDown:this.onInputKeyDown("single"),onKeyUp:this.onInputKeyUp("single"),onPointerDown:this.onInputPointerDown("single"),onPointerUp:this.onInputPointerUp("single")}))])))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{onValuePropChange:0}],valueStart:[{onValueStartPropChange:0}],valueEnd:[{onValueEndPropChange:0}],name:[{onFormIdentityChange:0}],nameStart:[{onFormIdentityChange:0}],nameEnd:[{onFormIdentityChange:0}],range:[{onFormIdentityChange:0},{onLayoutDeps:0}],variant:[{onLayoutDeps:0}],min:[{onBoundsChange:0}],max:[{onBoundsChange:0}]}}static get style(){return l()}},[321,"md-slider",{min:[2],max:[2],value:[1026],step:[2],disabled:[516],name:[513],nameStart:[1,"name-start"],nameEnd:[1,"name-end"],variant:[513],range:[516],stops:[516],valueStart:[1026,"value-start"],valueEnd:[1026,"value-end"],size:[513],orientation:[513],fullHeight:[516,"full-height"],valueIndicator:[516,"value-indicator"],labeled:[516],insetIcon:[516,"inset-icon"],icon:[1],sliderAriaLabel:[1,"aria-label"],ariaLabelStart:[1,"label-start"],ariaLabelEnd:[1,"label-end"],valueText:[1,"value-text"],valueStartText:[1,"value-start-text"],valueEndText:[1,"value-end-text"],controlled:[516],density:[514],keyFocusedThumb:[32],pressingThumb:[32],_liveValue:[32],_liveStart:[32],_liveEnd:[32]},undefined,{value:[{onValuePropChange:0}],valueStart:[{onValueStartPropChange:0}],valueEnd:[{onValueEndPropChange:0}],name:[{onFormIdentityChange:0}],nameStart:[{onFormIdentityChange:0}],nameEnd:[{onFormIdentityChange:0}],range:[{onFormIdentityChange:0},{onLayoutDeps:0}],variant:[{onLayoutDeps:0}],min:[{onBoundsChange:0}],max:[{onBoundsChange:0}]}]);d.SLIDER_KEYS=new Set(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"]);function o(){if(typeof customElements==="undefined"){return}const t=["md-slider"];t.forEach((t=>{switch(t){case"md-slider":if(!customElements.get(a(t))){customElements.define(a(t),d)}break}}))}o();export{d as M,o as d};
+//# sourceMappingURL=p-DEzb9xsY.js.map

package/dist/components/p-DEzb9xsY.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["mdSliderCss","MdSlider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","min","max","value","step","disabled","name","nameStart","nameEnd","variant","range","stops","valueStart","valueEnd","size","orientation","fullHeight","valueIndicator","labeled","insetIcon","icon","sliderAriaLabel","ariaLabelStart","ariaLabelEnd","valueText","valueStartText","valueEndText","controlled","density","keyFocusedThumb","pressingThumb","_liveValue","_liveStart","_liveEnd","rangeDragThumb","verticalDragging","initialValue","initialStart","initialEnd","handleInput","e","isStart","input","target","val","Number","displayEnd","setEnd","setStart","displayStart","syncCssVars","mdInput","emit","rangeDetail","setSingle","singleDetail","handleChange","mdChange","commit","onRangeRailPointerDown","rail","currentTarget","v","pointerToValue","clientX","clientY","dStart","Math","abs","dEnd","mdDragStart","thumb","applyRangePointerValue","setPointerCapture","pointerId","preventDefault","onRangeRailPointerMove","onRangeRailPointerUp","endRangePointerGesture","onRangeRailLostPointerCapture","detail","mdDragEnd","onVerticalRailPointerDown","displayValue","onVerticalRailPointerMove","onVerticalRailPointerUp","releasePointerCapture","onVerticalRailLostPointerCapture","onInputFocus","which","matches","mdFocus","onInputBlur","mdBlur","onInputKeyDown","SLIDER_KEYS","has","key","onInputKeyUp","onInputPointerDown","onInputPointerUp","connectedCallback","componentDidLoad","clampValues","syncFormValue","setFormValue","internals","String","data","FormData","append","formResetCallback","formStateRestoreCallback","state","n","isFinite","values","map","filter","length","pct","el","vs","ve","p","style","setProperty","mid","c","vp","lo","hi","thumbBelow","onValuePropChange","onValueStartPropChange","onValueEndPropChange","onFormIdentityChange","onLayoutDeps","onBoundsChange","showStops","isCentered","showBubble","formatValue","decimals","split","toFixed","round","insetArea","insetOnActive","snapToStep","raw","s","q","shadowRoot","querySelector","rect","getBoundingClientRect","vertical","ratio","height","bottom","rtl","getComputedStyle","direction","width","right","left","getTickMarks","span","count","floor","isVertical","eps","near","a","b","pos","i","frac","isOnActive","Array","from","_","tickVal","hidden","onFilled","cls","h","class","insetInlineStart","inputAriaLabel","single","wrapInputShell","node","render","bubble","orientVertical","orient","Host","part","onPointerDown","undefined","onPointerMove","onPointerUp","onPointerCancel","onLostPointerCapture","type","onInput","onChange","onFocus","onBlur","onKeyDown","onKeyUp","Set"],"sources":["src/components/md-slider/md-slider.css?tag=md-slider&encapsulation=shadow","src/components/md-slider/md-slider.tsx"],"sourcesContent":["/* ==========================================================\n md-slider — Material Design 3 Expressive Slider\n Spec: https://m3.material.io/components/sliders/specs\n\n PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n --md-slider-track-length Vertical track length (block axis)\n --md-slider-active-color Active track fill\n --md-slider-inactive-color Inactive track fill\n --md-slider-track-shape Track border-radius\n --md-slider-track-height Track cross-axis thickness\n --md-slider-tick-active-color Stop dot under thumb (hidden)\n --md-slider-tick-filled-color Stop dots on filled (active) track\n --md-slider-tick-inactive-color Stop dots on empty (inactive) track\n --md-slider-thumb-color Thumb knob fill\n --md-slider-thumb-width Thumb inline size\n --md-slider-thumb-height Thumb block size\n --md-slider-value-bg Value indicator background\n --md-slider-value-color Value indicator text\n --md-slider-value-shape Value indicator border-radius\n --md-slider-value-font-family Value indicator font family\n --md-slider-value-font-size Value indicator font size\n --md-slider-value-font-weight Value indicator font weight\n --md-slider-value-line-height Value indicator line height\n --md-slider-value-padding-inline Value indicator horizontal padding\n --md-slider-value-padding-block Value indicator vertical padding\n --md-slider-inset-icon-color Inset icon color (defaults to tick-inactive-color)\n --md-slider-inset-icon-active-color Inset icon color when over the active track segment\n\n CSS PARTS:\n surface Outer container\n track Track container (clips corners)\n track-inactive Inactive track segment\n track-active Active (filled) track segment\n thumb-knob Thumb knob element\n state-layer State layer overlay\n value-indicator Value label bubble\n inset Inset icon area\n\n SLOTS:\n inset-icon — Custom icon (standard slider only; use with inset-icon)\n ========================================================== */\n\n:host {\n display: flex;\n flex-direction: row;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n cursor: pointer;\n user-select: none;\n inline-size: 100%;\n min-block-size: var(--_surface-min-block);\n overflow: visible;\n\n --md-slider-track-length: 200px;\n --md-slider-active-color: var(--md-sys-color-primary);\n --md-slider-inactive-color: var(--md-sys-color-secondary-container);\n --md-slider-tick-active-color: var(--md-sys-color-primary);\n --md-slider-tick-filled-color: var(--md-sys-color-on-primary);\n --md-slider-tick-inactive-color: var(--md-sys-color-on-secondary-container);\n --md-slider-thumb-color: var(--md-sys-color-primary);\n --md-slider-value-bg: var(--md-sys-color-inverse-surface);\n --md-slider-value-color: var(--md-sys-color-inverse-on-surface);\n --md-slider-inset-icon-color: var(--md-slider-tick-inactive-color);\n --md-slider-inset-icon-active-color: var(--md-slider-tick-filled-color);\n\n --_value-pct: 50%;\n --_center-pct: 50%;\n --_active-start-pct: 0%;\n --_active-width-pct: 50%;\n --_start-pct: 0%;\n --_end-pct: 100%;\n\n --_center-gap: 4px;\n\n --_active-track: var(--md-slider-active-color);\n --_inactive-track: var(--md-slider-inactive-color);\n --_thumb-fill: var(--md-slider-thumb-color);\n --_tick-active: var(--md-slider-tick-active-color);\n --_tick-filled: var(--md-slider-tick-filled-color);\n --_tick-inactive: var(--md-slider-tick-inactive-color);\n}\n\n:host(.md-slider--vertical) {\n flex-direction: column;\n align-items: stretch;\n inline-size: auto;\n min-inline-size: var(--_vertical-min-inline);\n min-block-size: var(--md-slider-track-length);\n}\n\n/* Responsive height: a vertical slider fills its parent's block size and, unlike\n the fixed-length default, SHRINKS to fit a small container instead of\n overflowing (which previously clipped the thumb at the bottom). A small floor\n keeps it usable / prevents collapse in an unsized parent. */\n:host([full-height].md-slider--vertical) {\n block-size: 100%;\n min-block-size: var(--md-slider-min-track-length, 88px);\n}\n\n/* ----- Size tokens (track thickness, thumb, shape, gap) ----- */\n:host(.md-slider--size-xs) {\n --_track-thickness-default: 16px;\n --_thumb-block-default: max(24px, calc(44px + var(--md-sys-density-scale, 0) * 4px));\n --_thumb-inline-default: 4px;\n --_track-radius-default: 8px;\n --_track-thumb-gap: 6px;\n --_track-inside-corner: 2px;\n --_inset-icon-size: 0px;\n}\n\n:host(.md-slider--size-sm) {\n --_track-thickness-default: 24px;\n --_thumb-block-default: max(24px, calc(44px + var(--md-sys-density-scale, 0) * 4px));\n --_thumb-inline-default: 4px;\n --_track-radius-default: 8px;\n --_track-thumb-gap: 6px;\n --_track-inside-corner: 2px;\n --_inset-icon-size: 0px;\n}\n\n:host(.md-slider--size-md) {\n --_track-thickness-default: 40px;\n --_thumb-block-default: max(24px, calc(52px + var(--md-sys-density-scale, 0) * 4px));\n --_thumb-inline-default: 4px;\n --_track-radius-default: 12px;\n --_track-thumb-gap: 6px;\n --_track-inside-corner: 2px;\n --_inset-icon-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n}\n\n:host(.md-slider--size-lg) {\n --_track-thickness-default: 56px;\n --_thumb-block-default: max(24px, calc(68px + var(--md-sys-density-scale, 0) * 4px));\n --_thumb-inline-default: 4px;\n --_track-radius-default: 16px;\n --_track-thumb-gap: 6px;\n --_track-inside-corner: 2px;\n --_inset-icon-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n}\n\n:host(.md-slider--size-xl) {\n --_track-thickness-default: 96px;\n --_thumb-block-default: max(24px, calc(108px + var(--md-sys-density-scale, 0) * 4px));\n --_thumb-inline-default: 4px;\n --_track-radius-default: 28px;\n --_track-thumb-gap: 6px;\n --_track-inside-corner: 2px;\n --_inset-icon-size: 32px;\n}\n\n/* Public overrides → resolved internal vars */\n:host {\n --_track-thickness: var(--md-slider-track-height, max(8px, calc(var(--_track-thickness-default) + var(--md-sys-density-scale, 0) * 4px)));\n --_track-radius: var(--md-slider-track-shape, var(--_track-radius-default));\n --_thumb-block: var(--md-slider-thumb-height, var(--_thumb-block-default));\n --_thumb-inline: var(--md-slider-thumb-width, var(--_thumb-inline-default));\n --_tick-size: max(4px, calc(var(--_track-thickness) * 0.12));\n --_tick-pad: calc(4px + var(--_tick-size) / 2);\n}\n\n:host(.md-slider--horizontal) {\n --_surface-min-block: var(--_thumb-block);\n}\n\n:host(.md-slider--vertical) {\n --_surface-min-block: var(--md-slider-track-length);\n --_vertical-min-inline: max(var(--_track-thickness), var(--_thumb-block));\n}\n\n/* ----- Inset icon (inside track, standard only; md/lg 24px, xl 32px) ----- */\n.md-slider__inset {\n position: absolute;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n color: var(--md-slider-inset-icon-color);\n inline-size: var(--_inset-icon-size, 24px);\n block-size: var(--_inset-icon-size, 24px);\n}\n\n:host(.md-slider--horizontal) .md-slider__inset {\n inset-inline-start: 8px;\n inset-block-start: 50%;\n transform: translateY(-50%);\n}\n\n:host(.md-slider--vertical) .md-slider__inset {\n inset-block-end: 8px;\n inset-inline-start: 50%;\n margin-inline-start: calc(-0.5 * var(--_inset-icon-size, 24px));\n}\n\n.md-slider__inset--on-active {\n color: var(--md-slider-inset-icon-active-color);\n}\n\n.md-slider__inset-font {\n font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons'), sans-serif;\n font-size: var(--_inset-icon-size, 24px);\n font-weight: normal;\n font-style: normal;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n white-space: nowrap;\n overflow-wrap: normal;\n direction: ltr;\n -webkit-font-smoothing: antialiased;\n pointer-events: none;\n}\n\n::slotted([slot='inset-icon']) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--_inset-icon-size, 24px);\n block-size: var(--_inset-icon-size, 24px);\n font-size: var(--_inset-icon-size, 24px);\n color: inherit;\n fill: currentColor;\n pointer-events: none;\n}\n\n/* ----- Surface & rail ----- */\n.md-slider__surface {\n position: relative;\n display: flex;\n flex: 1;\n flex-direction: row;\n align-items: center;\n min-inline-size: 0;\n min-block-size: var(--_surface-min-block);\n overflow: visible;\n}\n\n:host(.md-slider--vertical) .md-slider__surface {\n flex-direction: column;\n flex: 1;\n align-items: center;\n justify-content: center;\n min-block-size: var(--md-slider-track-length);\n}\n\n.md-slider__rail {\n position: relative;\n flex: 1;\n min-inline-size: 0;\n min-block-size: var(--_surface-min-block);\n overflow: visible;\n}\n\n/* Range & vertical: native input can't track correctly; rail handles pointer instead. */\n:host(.md-slider--range) .md-slider__rail,\n:host(.md-slider--vertical) .md-slider__rail {\n touch-action: none;\n cursor: pointer;\n}\n\n:host(.md-slider--range) .md-slider__input,\n:host(.md-slider--vertical) .md-slider__input {\n pointer-events: none;\n}\n\n:host(.md-slider--vertical) .md-slider__rail {\n inline-size: max(var(--_track-thickness), var(--_thumb-block));\n block-size: var(--md-slider-track-length);\n flex: none;\n}\n\n/* Responsive vertical: the surface + rail drop the fixed track-length floor so\n they shrink with the container (no overflow/clipping); the rail flexes to fill\n the surface, so the visible track grows and shrinks with the box. */\n:host([full-height].md-slider--vertical) .md-slider__surface {\n min-block-size: 0;\n}\n:host([full-height].md-slider--vertical) .md-slider__rail {\n block-size: auto;\n flex: 1 1 auto;\n min-block-size: 0;\n}\n\n/* The vertical native input is fixed at the (200px) track length and rotated,\n which — even though it's invisible (opacity:0) and pointer-events:none here —\n keeps a 200px box that drives scroll overflow and clips the thumb in a smaller\n responsive container. Let it fill the rail instead (the rail owns pointer +\n visuals in vertical, so dropping the rotation is purely a box-size change). */\n:host([full-height].md-slider--vertical) .md-slider__input {\n position: absolute;\n inset: 0;\n inline-size: 100%;\n block-size: 100%;\n transform: none;\n}\n\n/* ----- Track (container clips outer corners; segments handle gap + inside corners) ----- */\n.md-slider__track {\n position: absolute;\n pointer-events: none;\n border-radius: var(--_track-radius);\n overflow: hidden;\n}\n\n:host(.md-slider--horizontal) .md-slider__track {\n inset-inline: 0;\n inset-block-start: 50%;\n transform: translateY(-50%);\n block-size: var(--_track-thickness);\n inline-size: 100%;\n}\n\n:host(.md-slider--vertical) .md-slider__track {\n inset-block: 0;\n inset-inline-start: 50%;\n margin-inline-start: calc(-0.5 * var(--_track-thickness));\n inline-size: var(--_track-thickness);\n block-size: 100%;\n}\n\n.md-slider__track-inactive {\n position: absolute;\n background-color: var(--_inactive-track);\n}\n\n.md-slider__track-active {\n position: absolute;\n background-color: var(--_active-track);\n}\n\n/* ===== STANDARD HORIZONTAL ===== */\n:host(.md-slider--horizontal:not(.md-slider--centered):not(.md-slider--range)) .md-slider__track-active {\n inset-inline-start: 0;\n inset-block: 0;\n inline-size: max(0px, calc(var(--_value-pct) - var(--_track-thumb-gap)));\n block-size: 100%;\n border-start-end-radius: var(--_track-inside-corner);\n border-end-end-radius: var(--_track-inside-corner);\n}\n\n:host(.md-slider--horizontal:not(.md-slider--centered):not(.md-slider--range)) .md-slider__track-inactive {\n inset-block: 0;\n inset-inline-start: calc(var(--_value-pct) + var(--_track-thumb-gap));\n inset-inline-end: 0;\n border-start-start-radius: var(--_track-inside-corner);\n border-end-start-radius: var(--_track-inside-corner);\n}\n\n/* ===== STANDARD VERTICAL ===== */\n:host(.md-slider--vertical:not(.md-slider--centered):not(.md-slider--range)) .md-slider__track-active {\n inset-inline: 0;\n inset-block-end: 0;\n block-size: max(0px, calc(var(--_value-pct) - var(--_track-thumb-gap)));\n inline-size: 100%;\n border-start-start-radius: var(--_track-inside-corner);\n border-start-end-radius: var(--_track-inside-corner);\n}\n\n:host(.md-slider--vertical:not(.md-slider--centered):not(.md-slider--range)) .md-slider__track-inactive {\n inset-inline: 0;\n inset-block-start: 0;\n block-size: max(0px, calc(100% - var(--_value-pct) - var(--_track-thumb-gap)));\n border-end-start-radius: var(--_track-inside-corner);\n border-end-end-radius: var(--_track-inside-corner);\n}\n\n/* ===== CENTERED HORIZONTAL ===== */\n/* Left inactive */\n:host(.md-slider--horizontal.md-slider--centered) .md-slider__track-inactive {\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: max(0px, calc(var(--_active-start-pct) - var(--_centered-start-gap)));\n border-start-end-radius: var(--_track-inside-corner);\n border-end-end-radius: var(--_track-inside-corner);\n}\n\n/* Right inactive (pseudo) */\n:host(.md-slider--horizontal.md-slider--centered) .md-slider__track::after {\n content: '';\n position: absolute;\n inset-block: 0;\n inset-inline-start: calc(var(--_active-start-pct) + var(--_active-width-pct) + var(--_centered-end-gap));\n inset-inline-end: 0;\n background-color: var(--_inactive-track);\n border-start-start-radius: var(--_track-inside-corner);\n border-end-start-radius: var(--_track-inside-corner);\n}\n\n/* Active */\n:host(.md-slider--horizontal.md-slider--centered) .md-slider__track-active {\n inset-inline-start: calc(var(--_active-start-pct) + var(--_centered-start-gap));\n inset-block: 0;\n inline-size: max(0px, calc(var(--_active-width-pct) - var(--_centered-start-gap) - var(--_centered-end-gap)));\n block-size: 100%;\n border-radius: var(--_track-inside-corner);\n}\n\n/* ===== CENTERED VERTICAL ===== */\n/* Bottom inactive */\n:host(.md-slider--vertical.md-slider--centered) .md-slider__track-inactive {\n inset-inline: 0;\n inset-block-end: 0;\n block-size: max(0px, calc(var(--_active-start-pct) - var(--_centered-start-gap)));\n border-start-start-radius: var(--_track-inside-corner);\n border-start-end-radius: var(--_track-inside-corner);\n}\n\n/* Top inactive (pseudo) */\n:host(.md-slider--vertical.md-slider--centered) .md-slider__track::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-start: 0;\n block-size: max(0px, calc(100% - var(--_active-start-pct) - var(--_active-width-pct) - var(--_centered-end-gap)));\n background-color: var(--_inactive-track);\n border-end-start-radius: var(--_track-inside-corner);\n border-end-end-radius: var(--_track-inside-corner);\n}\n\n/* Active */\n:host(.md-slider--vertical.md-slider--centered) .md-slider__track-active {\n inset-inline: 0;\n inset-block-end: calc(var(--_active-start-pct) + var(--_centered-start-gap));\n block-size: max(0px, calc(var(--_active-width-pct) - var(--_centered-start-gap) - var(--_centered-end-gap)));\n inline-size: 100%;\n border-radius: var(--_track-inside-corner);\n}\n\n/* ===== RANGE HORIZONTAL ===== */\n/* Left inactive */\n:host(.md-slider--horizontal.md-slider--range) .md-slider__track-inactive {\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: max(0px, calc(var(--_start-pct) - var(--_track-thumb-gap)));\n border-start-end-radius: var(--_track-inside-corner);\n border-end-end-radius: var(--_track-inside-corner);\n}\n\n/* Right inactive (pseudo) */\n:host(.md-slider--horizontal.md-slider--range) .md-slider__track::after {\n content: '';\n position: absolute;\n inset-block: 0;\n inset-inline-start: calc(var(--_end-pct) + var(--_track-thumb-gap));\n inset-inline-end: 0;\n background-color: var(--_inactive-track);\n border-start-start-radius: var(--_track-inside-corner);\n border-end-start-radius: var(--_track-inside-corner);\n}\n\n/* Active */\n:host(.md-slider--horizontal.md-slider--range) .md-slider__track-active {\n inset-inline-start: calc(var(--_start-pct) + var(--_track-thumb-gap));\n inset-block: 0;\n inline-size: max(0px, calc(var(--_end-pct) - var(--_start-pct) - 2 * var(--_track-thumb-gap)));\n block-size: 100%;\n border-radius: var(--_track-inside-corner);\n}\n\n/* ===== RANGE VERTICAL ===== */\n/* Bottom inactive */\n:host(.md-slider--vertical.md-slider--range) .md-slider__track-inactive {\n inset-inline: 0;\n inset-block-end: 0;\n block-size: max(0px, calc(var(--_start-pct) - var(--_track-thumb-gap)));\n border-start-start-radius: var(--_track-inside-corner);\n border-start-end-radius: var(--_track-inside-corner);\n}\n\n/* Top inactive (pseudo) */\n:host(.md-slider--vertical.md-slider--range) .md-slider__track::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-start: 0;\n block-size: max(0px, calc(100% - var(--_end-pct) - var(--_track-thumb-gap)));\n background-color: var(--_inactive-track);\n border-end-start-radius: var(--_track-inside-corner);\n border-end-end-radius: var(--_track-inside-corner);\n}\n\n/* Active */\n:host(.md-slider--vertical.md-slider--range) .md-slider__track-active {\n inset-inline: 0;\n inset-block-end: calc(var(--_start-pct) + var(--_track-thumb-gap));\n block-size: max(0px, calc(var(--_end-pct) - var(--_start-pct) - 2 * var(--_track-thumb-gap)));\n inline-size: 100%;\n border-radius: var(--_track-inside-corner);\n}\n\n/* ----- Ticks ----- */\n.md-slider__ticks {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 1;\n}\n\n:host(.md-slider--horizontal) .md-slider__tick {\n position: absolute;\n inset-block-start: 50%;\n margin-inline-start: calc(-0.5 * var(--_tick-size));\n margin-block-start: calc(-0.5 * var(--_tick-size));\n inset-inline-start: 0;\n}\n\n:host(.md-slider--vertical) .md-slider__tick {\n position: absolute;\n inset-inline-start: 50%;\n margin-inline-start: calc(-0.5 * var(--_tick-size));\n margin-block-end: calc(-0.5 * var(--_tick-size));\n}\n\n.md-slider__tick {\n inline-size: var(--_tick-size);\n block-size: var(--_tick-size);\n border-radius: 50%;\n}\n\n.md-slider__tick--on-active {\n background-color: var(--_tick-active);\n opacity: 0;\n}\n\n.md-slider__tick--on-filled {\n background-color: var(--_tick-filled);\n}\n\n.md-slider__tick--on-inactive {\n background-color: var(--_tick-inactive);\n}\n\n/* ----- Thumb ----- */\n.md-slider__thumb {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n pointer-events: none;\n inline-size: var(--_thumb-inline);\n block-size: var(--_thumb-block);\n overflow: visible;\n}\n\n:host(.md-slider--horizontal) .md-slider__thumb {\n inset-block-start: 50%;\n transform: translateY(-50%);\n margin-inline-start: calc(-0.5 * var(--_thumb-inline));\n inset-inline-start: var(--_value-pct);\n}\n\n:host(.md-slider--horizontal) .md-slider__thumb--start {\n inset-inline-start: var(--_start-pct);\n}\n\n:host(.md-slider--horizontal) .md-slider__thumb--end {\n inset-inline-start: var(--_end-pct);\n}\n\n:host(.md-slider--vertical) .md-slider__thumb {\n inline-size: var(--_thumb-block);\n block-size: var(--_thumb-inline);\n inset-inline-start: 50%;\n inset-block-end: calc(var(--_value-pct) - var(--_thumb-inline) / 2);\n inset-block-start: auto;\n margin-inline-start: calc(-0.5 * var(--_thumb-block));\n}\n\n:host(.md-slider--vertical) .md-slider__thumb--start {\n inset-block-end: calc(var(--_start-pct) - var(--_thumb-inline) / 2);\n}\n\n:host(.md-slider--vertical) .md-slider__thumb--end {\n inset-block-end: calc(var(--_end-pct) - var(--_thumb-inline) / 2);\n}\n\n.md-slider__thumb-knob {\n display: block;\n inline-size: var(--_thumb-inline);\n block-size: var(--_thumb-block);\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n background-color: var(--_thumb-fill);\n box-shadow: none;\n flex-shrink: 0;\n transition:\n inline-size var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),\n block-size var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);\n}\n\n:host(.md-slider--vertical) .md-slider__thumb-knob {\n inline-size: var(--_thumb-block);\n block-size: var(--_thumb-inline);\n}\n\n:host(:not(.md-slider--disabled)) .md-slider__thumb--pressing > .md-slider__thumb-knob {\n inline-size: 2px;\n block-size: calc(var(--_thumb-block) * 1.05);\n}\n\n:host(.md-slider--vertical:not(.md-slider--disabled)) .md-slider__thumb--pressing > .md-slider__thumb-knob {\n inline-size: calc(var(--_thumb-block) * 1.05);\n block-size: 2px;\n}\n\n.md-slider__state-layer {\n display: none;\n}\n\n.md-slider__thumb--focus-visible > .md-slider__thumb-knob {\n outline: 3px solid var(--md-sys-color-secondary);\n outline-offset: 2px;\n}\n\n/* ----- Value indicator ----- */\n.md-slider__value-indicator {\n position: absolute;\n z-index: 3;\n /* The value bubble shrinks with density (48x44 at 0 -> 32x28 at -4). */\n min-inline-size: max(28px, calc(48px + var(--md-sys-density-scale, 0) * 4px));\n min-block-size: max(24px, calc(44px + var(--md-sys-density-scale, 0) * 4px));\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding-block: var(--md-slider-value-padding-block, var(--md-sys-spacing-inset-md, 12px));\n padding-inline: var(--md-slider-value-padding-inline, var(--md-sys-spacing-inset-lg, 16px));\n box-sizing: border-box;\n background-color: var(--md-slider-value-bg);\n color: var(--md-slider-value-color);\n border-radius: var(--md-slider-value-shape, var(--md-sys-shape-corner-full, 9999px));\n font-family: var(--md-slider-value-font-family, var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif));\n font-size: var(--md-slider-value-font-size, var(--md-sys-typescale-label-medium-size, 12px));\n font-weight: var(--md-slider-value-font-weight, var(--md-sys-typescale-label-medium-weight, 500));\n line-height: var(--md-slider-value-line-height, var(--md-sys-typescale-label-medium-line-height, 16px));\n letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing, 0.5px);\n white-space: nowrap;\n pointer-events: none;\n}\n\n:host(.md-slider--horizontal) .md-slider__value-indicator {\n inset-block-end: calc(100% + 4px);\n /* Physical left + translateX intentional: centering within the thumb box\n is direction-independent (the thumb is already positioned logically). */\n left: 50%;\n transform: translateX(-50%);\n}\n\n:host(.md-slider--vertical) .md-slider__value-indicator {\n inset-inline-start: calc(100% + 4px);\n inset-block-end: 50%;\n transform: translateY(50%);\n}\n\n/* ----- Native inputs ----- */\n.md-slider__input-shell {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n}\n\n.md-slider__input {\n position: absolute;\n inset: 0;\n inline-size: 100%;\n block-size: 100%;\n margin: 0;\n padding: 0;\n opacity: 0;\n cursor: pointer;\n pointer-events: auto;\n box-sizing: border-box;\n}\n\n:host(.md-slider--vertical) .md-slider__input-shell {\n align-items: center;\n justify-content: center;\n}\n\n:host(.md-slider--vertical) .md-slider__input {\n position: relative;\n inset: auto;\n inline-size: var(--md-slider-track-length);\n block-size: max(44px, var(--_state-layer-size));\n transform: rotate(-90deg);\n transform-origin: center center;\n}\n\n.md-slider__input--start,\n.md-slider__input--end {\n inline-size: 100%;\n block-size: 100%;\n}\n\n:host(.md-slider--disabled) {\n cursor: not-allowed;\n pointer-events: none;\n opacity: var(--md-sys-state-disabled-content-opacity);\n}\n\n:host(.md-slider--disabled) .md-slider__track-inactive {\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%),\n var(--md-sys-color-surface)\n );\n}\n\n:host(.md-slider--disabled) .md-slider__track-active,\n:host(.md-slider--disabled) .md-slider__thumb-knob {\n background-color: color-mix(\n in srgb,\n var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%),\n transparent\n );\n box-shadow: none;\n}\n\n:host(:focus-visible) {\n outline: none;\n}\n\n/* ----- Expressive spring animation on the active track fill -----\n Only for stepped (`stops`) sliders, where the value snaps between ticks and\n the spring makes the snap feel intentional. A continuous slider must track the\n thumb 1:1 — the thumb position isn't transitioned, so animating the fill would\n make it lag behind the thumb while dragging. */\n:host(.md-slider--stops) .md-slider__track-active {\n transition:\n inline-size var(--md-sys-motion-spring-spatial-fast-duration, 350ms) var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90)),\n block-size var(--md-sys-motion-spring-spatial-fast-duration, 350ms) var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90)),\n inset-inline-start var(--md-sys-motion-spring-spatial-fast-duration, 350ms) var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90)),\n inset-block-end var(--md-sys-motion-spring-spatial-fast-duration, 350ms) var(--md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.90));\n}\n\n:host(.md-slider--stops) .md-slider__tick {\n transition:\n opacity var(--md-sys-motion-spring-effects-default-duration, 200ms) var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00)),\n background-color var(--md-sys-motion-spring-effects-default-duration, 200ms) var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00));\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 Event,\n EventEmitter,\n Element,\n Watch,\n AttachInternals,\n} from '@stencil/core';\nimport type { VNode } from '@stencil/core';\nimport { setFormValue } from '../../utils/form';\n\nexport interface MdSliderValueDetail {\n value: number;\n valueStart?: number;\n valueEnd?: number;\n}\n\nexport interface MdSliderThumbDetail {\n thumb: 'single' | 'start' | 'end';\n}\n\nexport interface MdSliderDragDetail {\n thumb: 'single' | 'start' | 'end';\n value: number;\n valueStart?: number;\n valueEnd?: number;\n}\n\n/**\n * MD3 Expressive slider: standard (from edge), centered (from midpoint), or range (dual thumb).\n *\n * **Uncontrolled (default)** — the slider manages its own value. Listen to `mdChange` to observe commits.\n *\n * **Controlled** (`controlled`) — the slider never mutates `value`/`valueStart`/`valueEnd`.\n * Listen to events and set the props yourself. During drag the slider uses internal live\n * state for smooth visuals; on commit it snaps to the prop values.\n *\n * @slot inset-icon - Custom icon inside track (standard only; use with `inset-icon`)\n */\n@Component({\n tag: 'md-slider',\n styleUrl: 'md-slider.css',\n shadow: true,\n formAssociated: true,\n})\nexport class MdSlider {\n @Element() el!: HTMLElement;\n\n // ── Public API ──────────────────────────────────────────\n\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop({ mutable: true }) value: number = 50;\n @Prop() step: number = 1;\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Form-association handle. The slider submits its value under `name` via\n * `setFormValue`, exactly as a native `<input type=\"range\">` does — a hidden\n * input in the shadow root would be invisible to `FormData`.\n */\n @AttachInternals() internals!: ElementInternals;\n\n /**\n * Form field name. Without it the slider still works, it just submits\n * nothing — same as a native input with no `name`.\n */\n @Prop({ reflect: true }) name: string = '';\n\n /**\n * Range mode submits TWO values, which one name cannot express. By default\n * both go under `name` (read them with `formData.getAll(name)`); set these to\n * give each end its own key. Ignored outside `range`.\n */\n @Prop({ attribute: 'name-start' }) nameStart: string = '';\n\n /** See `nameStart`. */\n @Prop({ attribute: 'name-end' }) nameEnd: string = '';\n\n /** Single-thumb layout: `standard` fills from min; `centered` fills from range midpoint to value. */\n @Prop({ reflect: true }) variant: 'standard' | 'centered' = 'standard';\n\n /** Dual-thumb range */\n @Prop({ reflect: true }) range: boolean = false;\n\n /** Stop / tick marks at each step. */\n @Prop({ reflect: true }) stops: boolean = false;\n\n @Prop({ mutable: true }) valueStart: number = 0;\n @Prop({ mutable: true }) valueEnd: number = 100;\n\n /** Expressive size (default XS per MD3 spec) */\n @Prop({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'xs';\n\n @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Make a **vertical** slider fill its parent's block size (responsive height)\n * instead of the fixed `--md-slider-track-length`. The parent needs a definite\n * height; otherwise it falls back to the track-length floor so it never\n * collapses. (Horizontal sliders are already full-width by default.)\n */\n @Prop({ attribute: 'full-height', reflect: true }) fullHeight: boolean = false;\n\n /** Show value label at thumb(s) */\n @Prop({ reflect: true, attribute: 'value-indicator' }) valueIndicator: boolean = false;\n\n /** @deprecated Use `value-indicator` */\n @Prop({ reflect: true }) labeled: boolean = false;\n\n /** Standard slider only: inset icon area (use `icon` or `inset-icon` slot) */\n @Prop({ reflect: true, attribute: 'inset-icon' }) insetIcon: boolean = false;\n\n /** Material Symbols name when `inset-icon` and no slotted icon */\n @Prop() icon: string = '';\n\n @Prop({ attribute: 'aria-label' }) sliderAriaLabel: string = '';\n\n /**\n * Accessible label for the range-start thumb (becomes the thumb input's\n * `aria-label`; overrides `aria-label`). NB: a plain (non-`aria-`) attribute\n * name — `aria-label-start` is not a valid ARIA attribute and would just\n * pollute the host with an invalid `aria-*`.\n */\n @Prop({ attribute: 'label-start' }) ariaLabelStart: string = '';\n\n /** Accessible label for the range-end thumb (becomes the thumb input's `aria-label`). */\n @Prop({ attribute: 'label-end' }) ariaLabelEnd: string = '';\n\n /** Human-readable text alternative for the current value (single slider). Mapped to `aria-valuetext`. */\n @Prop({ attribute: 'value-text' }) valueText: string = '';\n\n /** Human-readable text for the range-start value. Mapped to `aria-valuetext` on the start thumb. */\n @Prop({ attribute: 'value-start-text' }) valueStartText: string = '';\n\n /** Human-readable text for the range-end value. Mapped to `aria-valuetext` on the end thumb. */\n @Prop({ attribute: 'value-end-text' }) valueEndText: string = '';\n\n /**\n * When `true`, the slider never mutates `value` / `valueStart` / `valueEnd` on user interaction.\n * Listen to `mdInput` (continuous) and `mdChange` (committed) events and write the props back yourself.\n * During a drag gesture the slider uses internal live state for smooth visuals.\n */\n @Prop({ reflect: true }) controlled: boolean = false;\n\n /**\n * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n * global `data-density` ancestor sets, so a local value simply overrides the\n * inherited one. 0 = default, -4 = ultra-compact.\n */\n @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n // ── Events ──────────────────────────────────────────────\n\n /** Fires continuously while the user drags or presses arrow keys. */\n @Event() mdInput: EventEmitter<MdSliderValueDetail>;\n\n /** Fires once when the user commits a value (pointer up, keyboard release, change event). */\n @Event() mdChange: EventEmitter<MdSliderValueDetail>;\n\n /** Fires when a slider thumb receives focus. */\n @Event() mdFocus: EventEmitter<MdSliderThumbDetail>;\n\n /** Fires when a slider thumb loses focus. */\n @Event() mdBlur: EventEmitter<MdSliderThumbDetail>;\n\n /** Fires when a drag/keyboard interaction begins. */\n @Event() mdDragStart: EventEmitter<MdSliderDragDetail>;\n\n /** Fires when a drag/keyboard interaction ends. */\n @Event() mdDragEnd: EventEmitter<MdSliderDragDetail>;\n\n // ── Internal state ──────────────────────────────────────\n\n @State() private keyFocusedThumb: 'single' | 'start' | 'end' | null = null;\n @State() private pressingThumb: 'single' | 'start' | 'end' | null = null;\n\n /** Live value during active interaction (controlled mode visual feedback). */\n @State() private _liveValue: number | null = null;\n @State() private _liveStart: number | null = null;\n @State() private _liveEnd: number | null = null;\n\n private rangeDragThumb: 'start' | 'end' | null = null;\n private verticalDragging = false;\n\n // ── Display getters (live state during drag, prop otherwise) ──\n\n private get displayValue(): number { return this._liveValue ?? this.value; }\n private get displayStart(): number { return this._liveStart ?? this.valueStart; }\n private get displayEnd(): number { return this._liveEnd ?? this.valueEnd; }\n\n // ── Value update helpers ────────────────────────────────\n\n private setSingle(v: number) {\n if (this.controlled) {\n this._liveValue = v;\n } else {\n this.value = v;\n }\n }\n\n private setStart(v: number) {\n if (this.controlled) {\n this._liveStart = v;\n } else {\n this.valueStart = v;\n }\n }\n\n private setEnd(v: number) {\n if (this.controlled) {\n this._liveEnd = v;\n } else {\n this.valueEnd = v;\n }\n }\n\n /** Commit live values to props (uncontrolled) or clear live state (controlled). */\n private commit() {\n if (this.controlled) {\n this._liveValue = null;\n this._liveStart = null;\n this._liveEnd = null;\n } else {\n if (this._liveValue !== null) { this.value = this._liveValue; this._liveValue = null; }\n if (this._liveStart !== null) { this.valueStart = this._liveStart; this._liveStart = null; }\n if (this._liveEnd !== null) { this.valueEnd = this._liveEnd; this._liveEnd = null; }\n }\n }\n\n // ── Lifecycle ───────────────────────────────────────────\n\n /** Baseline for `formResetCallback` — the values the markup was authored with. */\n private initialValue = 0;\n private initialStart = 0;\n private initialEnd = 0;\n\n connectedCallback() {\n this.initialValue = this.value;\n this.initialStart = this.valueStart;\n this.initialEnd = this.valueEnd;\n }\n\n componentDidLoad() {\n this.clampValues();\n this.syncCssVars();\n this.syncFormValue();\n }\n\n /**\n * Publish the current reading to the owning form.\n *\n * A range slider carries two numbers, which a single name/value pair cannot\n * express, so it submits a `FormData` instead: one entry per thumb, under\n * `name-start`/`name-end` when given and both under `name` otherwise (read\n * them back with `formData.getAll(name)`).\n *\n * With no `name` there is nothing to submit under — the same no-op a native\n * input without a name performs.\n */\n private syncFormValue() {\n if (!this.name && !this.nameStart && !this.nameEnd) {\n setFormValue(this.internals, null);\n return;\n }\n\n if (!this.range) {\n setFormValue(this.internals, String(this.value));\n return;\n }\n\n const data = new FormData();\n data.append(this.nameStart || this.name, String(this.valueStart));\n data.append(this.nameEnd || this.name, String(this.valueEnd));\n setFormValue(this.internals, data);\n }\n\n /** Restore the authored values when the owning form is reset. */\n formResetCallback() {\n this.value = this.initialValue;\n this.valueStart = this.initialStart;\n this.valueEnd = this.initialEnd;\n this.syncFormValue();\n }\n\n /**\n * Re-apply a value the browser restored (back/forward navigation, session\n * restore). Range state arrives as the FormData entries we submitted.\n */\n formStateRestoreCallback(state: string | FormData | null) {\n if (state == null) return;\n if (typeof state === 'string') {\n const n = Number(state);\n if (Number.isFinite(n)) this.value = n;\n return;\n }\n const values = [...state.values()].map(Number).filter((n) => Number.isFinite(n));\n if (values.length === 2) {\n this.valueStart = values[0];\n this.valueEnd = values[1];\n }\n }\n\n private clampValues() {\n this.value = Math.min(this.max, Math.max(this.min, this.value));\n if (this.range) {\n this.valueStart = Math.min(this.max, Math.max(this.min, this.valueStart));\n this.valueEnd = Math.min(this.max, Math.max(this.min, this.valueEnd));\n }\n }\n\n // ── CSS variable sync ───────────────────────────────────\n\n private pct(v: number): number {\n if (this.max === this.min) return 0;\n return ((v - this.min) / (this.max - this.min)) * 100;\n }\n\n private syncCssVars() {\n const el = this.el;\n const val = this.displayValue;\n const vs = this.displayStart;\n const ve = this.displayEnd;\n const p = (v: number) => `${this.pct(v)}%`;\n\n el.style.setProperty('--_value-pct', p(val));\n\n const mid = (this.min + this.max) / 2;\n const c = this.pct(mid);\n const vp = this.pct(val);\n const lo = Math.min(c, vp);\n const hi = Math.max(c, vp);\n el.style.setProperty('--_center-pct', `${c}%`);\n el.style.setProperty('--_active-start-pct', `${lo}%`);\n el.style.setProperty('--_active-width-pct', `${hi - lo}%`);\n\n const thumbBelow = vp <= c;\n el.style.setProperty('--_centered-start-gap', thumbBelow ? 'var(--_track-thumb-gap)' : 'var(--_center-gap)');\n el.style.setProperty('--_centered-end-gap', thumbBelow ? 'var(--_center-gap)' : 'var(--_track-thumb-gap)');\n\n if (this.range) {\n el.style.setProperty('--_start-pct', p(vs));\n el.style.setProperty('--_end-pct', p(ve));\n }\n }\n\n // ── Watchers ────────────────────────────────────────────\n\n @Watch('value')\n onValuePropChange() {\n this._liveValue = null;\n this.syncCssVars();\n this.syncFormValue();\n }\n\n @Watch('valueStart')\n onValueStartPropChange() {\n this._liveStart = null;\n this.syncCssVars();\n this.syncFormValue();\n }\n\n @Watch('valueEnd')\n onValueEndPropChange() {\n this._liveEnd = null;\n this.syncCssVars();\n this.syncFormValue();\n }\n\n @Watch('name')\n @Watch('nameStart')\n @Watch('nameEnd')\n @Watch('range')\n onFormIdentityChange() {\n this.syncFormValue();\n }\n\n @Watch('variant')\n @Watch('range')\n onLayoutDeps() {\n this.syncCssVars();\n }\n\n @Watch('min')\n @Watch('max')\n onBoundsChange() {\n this.clampValues();\n this.syncCssVars();\n }\n\n // ── Derived getters ─────────────────────────────────────\n\n private get showStops(): boolean {\n return this.stops;\n }\n\n private get isCentered(): boolean {\n return !this.range && this.variant === 'centered';\n }\n\n private get showBubble(): boolean {\n return this.valueIndicator || this.labeled;\n }\n\n private formatValue(v: number): string {\n if (this.step > 0) {\n const decimals = (`${this.step}`.split('.')[1] || '').length;\n return v.toFixed(decimals);\n }\n return String(Math.round(v));\n }\n\n private get insetArea(): boolean {\n return this.insetIcon && !this.range && this.size !== 'xs' && this.size !== 'sm';\n }\n\n private get insetOnActive(): boolean {\n if (!this.insetArea) return false;\n if (this.isCentered) {\n const mid = (this.min + this.max) / 2;\n return this.displayValue < mid;\n }\n return this.displayValue > this.min;\n }\n\n // ── Event detail builders ───────────────────────────────\n\n private singleDetail(): MdSliderValueDetail {\n return { value: this.displayValue };\n }\n\n private rangeDetail(): MdSliderValueDetail {\n return {\n value: this.rangeDragThumb === 'start' ? this.displayStart : this.displayEnd,\n valueStart: this.displayStart,\n valueEnd: this.displayEnd,\n };\n }\n\n // ── Native input handlers ───────────────────────────────\n\n private handleInput = (e: Event, isStart?: boolean) => {\n const input = e.target as HTMLInputElement;\n const val = Number(input.value);\n if (this.range) {\n if (isStart) {\n if (val > this.displayEnd) {\n this.setEnd(val);\n this.setStart(val);\n } else {\n this.setStart(val);\n }\n } else {\n if (val < this.displayStart) {\n this.setStart(val);\n this.setEnd(val);\n } else {\n this.setEnd(val);\n }\n }\n this.syncCssVars();\n this.mdInput.emit(this.rangeDetail());\n } else {\n this.setSingle(val);\n this.syncCssVars();\n this.mdInput.emit(this.singleDetail());\n }\n };\n\n private handleChange = (e: Event, isStart?: boolean) => {\n const input = e.target as HTMLInputElement;\n const val = Number(input.value);\n if (this.range) {\n if (isStart) {\n if (val > this.displayEnd) {\n this.setEnd(val);\n this.setStart(val);\n } else {\n this.setStart(val);\n }\n } else {\n if (val < this.displayStart) {\n this.setStart(val);\n this.setEnd(val);\n } else {\n this.setEnd(val);\n }\n }\n this.syncCssVars();\n this.mdChange.emit(this.rangeDetail());\n } else {\n this.setSingle(val);\n this.syncCssVars();\n this.mdChange.emit(this.singleDetail());\n }\n this.commit();\n };\n\n // ── Pointer helpers ─────────────────────────────────────\n\n private snapToStep(raw: number): number {\n const s = this.step;\n if (s <= 0) return Math.min(this.max, Math.max(this.min, raw));\n const q = Math.round((raw - this.min) / s);\n return Math.min(this.max, Math.max(this.min, this.min + q * s));\n }\n\n private pointerToValue(clientX: number, clientY: number): number {\n const rail = this.el.shadowRoot?.querySelector('.md-slider__rail') as HTMLElement | null;\n if (!rail) return this.min;\n const rect = rail.getBoundingClientRect();\n const vertical = this.orientation === 'vertical';\n let ratio: number;\n if (vertical) {\n ratio = rect.height > 0 ? (rect.bottom - clientY) / rect.height : 0;\n } else {\n const rtl = getComputedStyle(this.el).direction === 'rtl';\n ratio =\n rect.width > 0\n ? rtl\n ? (rect.right - clientX) / rect.width\n : (clientX - rect.left) / rect.width\n : 0;\n }\n ratio = Math.min(1, Math.max(0, ratio));\n const raw = this.min + ratio * (this.max - this.min);\n return this.snapToStep(raw);\n }\n\n // ── Range pointer interaction ───────────────────────────\n\n private applyRangePointerValue(v: number) {\n if (this.rangeDragThumb === 'start') {\n if (v > this.displayEnd) {\n this.rangeDragThumb = 'end';\n this.pressingThumb = 'end';\n this.setEnd(v);\n } else {\n this.setStart(v);\n }\n } else if (this.rangeDragThumb === 'end') {\n if (v < this.displayStart) {\n this.rangeDragThumb = 'start';\n this.pressingThumb = 'start';\n this.setStart(v);\n } else {\n this.setEnd(v);\n }\n }\n this.syncCssVars();\n this.mdInput.emit(this.rangeDetail());\n }\n\n private onRangeRailPointerDown = (e: PointerEvent) => {\n if (!this.range || this.disabled) return;\n const rail = e.currentTarget as HTMLElement;\n const v = this.pointerToValue(e.clientX, e.clientY);\n const dStart = Math.abs(v - this.displayStart);\n const dEnd = Math.abs(v - this.displayEnd);\n if (dStart === dEnd) {\n this.rangeDragThumb = v >= this.displayEnd ? 'end' : 'start';\n } else {\n this.rangeDragThumb = dStart < dEnd ? 'start' : 'end';\n }\n this.pressingThumb = this.rangeDragThumb;\n this.mdDragStart.emit({\n thumb: this.rangeDragThumb,\n value: this.rangeDragThumb === 'start' ? this.displayStart : this.displayEnd,\n valueStart: this.displayStart,\n valueEnd: this.displayEnd,\n });\n this.applyRangePointerValue(v);\n try { rail.setPointerCapture(e.pointerId); } catch { /* noop */ }\n e.preventDefault();\n };\n\n private onRangeRailPointerMove = (e: PointerEvent) => {\n if (!this.range || this.disabled || !this.rangeDragThumb) return;\n this.applyRangePointerValue(this.pointerToValue(e.clientX, e.clientY));\n e.preventDefault();\n };\n\n private endRangePointerGesture(e: PointerEvent | null) {\n if (!this.rangeDragThumb) return;\n const thumb = this.rangeDragThumb;\n const detail = this.rangeDetail();\n this.rangeDragThumb = null;\n this.pressingThumb = null;\n if (e) {\n try { (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId); } catch { /* noop */ }\n }\n this.mdChange.emit(detail);\n this.mdDragEnd.emit({ thumb, ...detail });\n this.commit();\n this.syncCssVars();\n }\n\n private onRangeRailPointerUp = (e: PointerEvent) => {\n if (!this.range) return;\n this.endRangePointerGesture(e);\n };\n\n private onRangeRailLostPointerCapture = () => {\n if (!this.rangeDragThumb) return;\n const thumb = this.rangeDragThumb;\n const detail = this.rangeDetail();\n this.rangeDragThumb = null;\n this.pressingThumb = null;\n this.mdChange.emit(detail);\n this.mdDragEnd.emit({ thumb, ...detail });\n this.commit();\n this.syncCssVars();\n };\n\n // ── Vertical pointer interaction ────────────────────────\n\n private onVerticalRailPointerDown = (e: PointerEvent) => {\n if (this.range || this.disabled || this.orientation !== 'vertical') return;\n const rail = e.currentTarget as HTMLElement;\n this.verticalDragging = true;\n this.pressingThumb = 'single';\n const v = this.pointerToValue(e.clientX, e.clientY);\n this.setSingle(v);\n this.syncCssVars();\n this.mdDragStart.emit({ thumb: 'single', value: this.displayValue });\n this.mdInput.emit(this.singleDetail());\n try { rail.setPointerCapture(e.pointerId); } catch { /* noop */ }\n e.preventDefault();\n };\n\n private onVerticalRailPointerMove = (e: PointerEvent) => {\n if (!this.verticalDragging) return;\n const v = this.pointerToValue(e.clientX, e.clientY);\n this.setSingle(v);\n this.syncCssVars();\n this.mdInput.emit(this.singleDetail());\n e.preventDefault();\n };\n\n private onVerticalRailPointerUp = (e: PointerEvent) => {\n if (!this.verticalDragging) return;\n this.verticalDragging = false;\n this.pressingThumb = null;\n try { (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId); } catch { /* noop */ }\n const detail = this.singleDetail();\n this.mdChange.emit(detail);\n this.mdDragEnd.emit({ thumb: 'single', ...detail });\n this.commit();\n this.syncCssVars();\n };\n\n private onVerticalRailLostPointerCapture = () => {\n if (!this.verticalDragging) return;\n this.verticalDragging = false;\n this.pressingThumb = null;\n const detail = this.singleDetail();\n this.mdChange.emit(detail);\n this.mdDragEnd.emit({ thumb: 'single', ...detail });\n this.commit();\n this.syncCssVars();\n };\n\n // ── Tick marks ──────────────────────────────────────────\n\n private getTickMarks() {\n if (!this.showStops || this.step <= 0) return null;\n const span = this.max - this.min;\n const count = Math.floor(span / this.step) + 1;\n if (count < 2) return null;\n const isVertical = this.orientation === 'vertical';\n const eps = this.step * 0.001;\n const near = (a: number, b: number) => Math.abs(a - b) < eps;\n const pos = (i: number) => {\n const frac = i / (count - 1);\n return `calc(var(--_tick-pad) + (100% - 2 * var(--_tick-pad)) * ${frac})`;\n };\n const mid = (this.min + this.max) / 2;\n const val = this.displayValue;\n const vs = this.displayStart;\n const ve = this.displayEnd;\n const isOnActive = (v: number): boolean => {\n if (this.range) return v >= vs && v <= ve;\n if (this.isCentered) {\n const lo = Math.min(mid, val);\n const hi = Math.max(mid, val);\n return v >= lo && v <= hi;\n }\n return v <= val;\n };\n\n return Array.from({ length: count }, (_, i) => {\n const tickVal = this.min + i * this.step;\n const hidden = this.range\n ? near(tickVal, vs) || near(tickVal, ve)\n : near(tickVal, val);\n const onFilled = isOnActive(tickVal);\n const cls = {\n 'md-slider__tick': true,\n 'md-slider__tick--on-active': hidden,\n 'md-slider__tick--on-filled': onFilled && !hidden,\n 'md-slider__tick--on-inactive': !onFilled && !hidden,\n };\n return isVertical ? (\n <span class={cls} style={{ bottom: pos(i) }} />\n ) : (\n <span class={cls} style={{ insetInlineStart: pos(i) }} />\n );\n });\n }\n\n // ── Focus / keyboard handlers ───────────────────────────\n\n private onInputFocus = (which: 'single' | 'start' | 'end') => (e: FocusEvent) => {\n const input = e.target as HTMLElement;\n try {\n if (input.matches(':focus-visible')) {\n this.keyFocusedThumb = which;\n }\n } catch {\n this.keyFocusedThumb = which;\n }\n this.mdFocus.emit({ thumb: which });\n };\n\n private onInputBlur = (which: 'single' | 'start' | 'end') => () => {\n this.keyFocusedThumb = null;\n this.mdBlur.emit({ thumb: which });\n };\n\n private static SLIDER_KEYS = new Set([\n 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',\n 'Home', 'End', 'PageUp', 'PageDown',\n ]);\n\n private onInputKeyDown = (which: 'single' | 'start' | 'end') => (e: KeyboardEvent) => {\n if (!MdSlider.SLIDER_KEYS.has(e.key)) return;\n if (!this.pressingThumb) {\n this.pressingThumb = which;\n const detail: MdSliderDragDetail = this.range\n ? { thumb: which, value: which === 'start' ? this.displayStart : this.displayEnd, valueStart: this.displayStart, valueEnd: this.displayEnd }\n : { thumb: 'single', value: this.displayValue };\n this.mdDragStart.emit(detail);\n }\n };\n\n private onInputKeyUp = (which: 'single' | 'start' | 'end') => (e: KeyboardEvent) => {\n if (!MdSlider.SLIDER_KEYS.has(e.key)) return;\n this.pressingThumb = null;\n const detail: MdSliderDragDetail = this.range\n ? { thumb: which, value: which === 'start' ? this.displayStart : this.displayEnd, valueStart: this.displayStart, valueEnd: this.displayEnd }\n : { thumb: 'single', value: this.displayValue };\n this.mdDragEnd.emit(detail);\n };\n\n private onInputPointerDown = (which: 'single' | 'start' | 'end') => () => {\n this.pressingThumb = which;\n const detail: MdSliderDragDetail = this.range\n ? { thumb: which, value: which === 'start' ? this.displayStart : this.displayEnd, valueStart: this.displayStart, valueEnd: this.displayEnd }\n : { thumb: 'single', value: this.displayValue };\n this.mdDragStart.emit(detail);\n };\n\n private onInputPointerUp = (which: 'single' | 'start' | 'end') => () => {\n this.pressingThumb = null;\n const detail: MdSliderDragDetail = this.range\n ? { thumb: which, value: which === 'start' ? this.displayStart : this.displayEnd, valueStart: this.displayStart, valueEnd: this.displayEnd }\n : { thumb: 'single', value: this.displayValue };\n this.mdDragEnd.emit(detail);\n };\n\n // ── Helpers ─────────────────────────────────────────────\n\n private inputAriaLabel(single: boolean, which?: 'start' | 'end'): string {\n if (single) return this.sliderAriaLabel || 'slider';\n if (which === 'start') return this.ariaLabelStart || this.sliderAriaLabel || 'range start';\n return this.ariaLabelEnd || this.sliderAriaLabel || 'range end';\n }\n\n private wrapInputShell(vertical: boolean, node: VNode) {\n return vertical ? <div class=\"md-slider__input-shell\">{node}</div> : node;\n }\n\n // ── Render ──────────────────────────────────────────────\n\n render() {\n const vertical = this.orientation === 'vertical';\n const bubble = this.showBubble;\n const insetArea = this.insetArea;\n const orientVertical = vertical ? { orient: 'vertical' as const } : {};\n\n const val = this.displayValue;\n const vs = this.displayStart;\n const ve = this.displayEnd;\n\n return (\n <Host\n class={{\n 'md-slider': true,\n [`md-slider--size-${this.size}`]: true,\n 'md-slider--vertical': vertical,\n 'md-slider--horizontal': !vertical,\n 'md-slider--centered': this.isCentered,\n 'md-slider--range': this.range,\n 'md-slider--stops': this.showStops,\n 'md-slider--inset': insetArea,\n 'md-slider--disabled': this.disabled,\n }}\n aria-orientation={vertical ? 'vertical' : 'horizontal'}\n >\n <div class=\"md-slider__surface\" part=\"surface\">\n <div\n class=\"md-slider__rail\"\n onPointerDown={this.range ? this.onRangeRailPointerDown : vertical ? this.onVerticalRailPointerDown : undefined}\n onPointerMove={this.range ? this.onRangeRailPointerMove : vertical ? this.onVerticalRailPointerMove : undefined}\n onPointerUp={this.range ? this.onRangeRailPointerUp : vertical ? this.onVerticalRailPointerUp : undefined}\n onPointerCancel={this.range ? this.onRangeRailPointerUp : vertical ? this.onVerticalRailPointerUp : undefined}\n onLostPointerCapture={this.range ? this.onRangeRailLostPointerCapture : vertical ? this.onVerticalRailLostPointerCapture : undefined}\n >\n <div class=\"md-slider__track\" part=\"track\">\n <div class=\"md-slider__track-inactive\" part=\"track-inactive\"></div>\n <div class=\"md-slider__track-active\" part=\"track-active\"></div>\n {this.showStops && <div class=\"md-slider__ticks\">{this.getTickMarks()}</div>}\n {insetArea && (\n <span\n class={{ 'md-slider__inset': true, 'md-slider__inset--on-active': this.insetOnActive }}\n part=\"inset\"\n aria-hidden=\"true\"\n >\n <slot name=\"inset-icon\">\n {this.icon ? (\n <span class=\"md-slider__inset-font material-symbols-outlined\">{this.icon}</span>\n ) : null}\n </slot>\n </span>\n )}\n </div>\n\n {this.range\n ? [\n <div\n class={{\n 'md-slider__thumb': true,\n 'md-slider__thumb--start': true,\n 'md-slider__thumb--focus-visible': this.keyFocusedThumb === 'start',\n 'md-slider__thumb--pressing': this.pressingThumb === 'start',\n }}\n style={{\n ...(!vertical ? { insetInlineStart: 'var(--_start-pct)' } : {}),\n }}\n >\n <span class=\"md-slider__thumb-knob\" part=\"thumb-knob\"></span>\n <span class=\"md-slider__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n {bubble && (\n <span class=\"md-slider__value-indicator\" part=\"value-indicator\">\n {this.formatValue(vs)}\n </span>\n )}\n </div>,\n <div\n class={{\n 'md-slider__thumb': true,\n 'md-slider__thumb--end': true,\n 'md-slider__thumb--focus-visible': this.keyFocusedThumb === 'end',\n 'md-slider__thumb--pressing': this.pressingThumb === 'end',\n }}\n style={{\n ...(!vertical ? { insetInlineStart: 'var(--_end-pct)' } : {}),\n }}\n >\n <span class=\"md-slider__thumb-knob\" part=\"thumb-knob\"></span>\n <span class=\"md-slider__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n {bubble && (\n <span class=\"md-slider__value-indicator\" part=\"value-indicator\">\n {this.formatValue(ve)}\n </span>\n )}\n </div>,\n this.wrapInputShell(\n vertical,\n <input\n type=\"range\"\n class=\"md-slider__input md-slider__input--start\"\n min={this.min}\n max={this.max}\n step={this.step}\n value={vs}\n disabled={this.disabled}\n aria-label={this.inputAriaLabel(false, 'start')}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n aria-valuenow={vs}\n aria-valuetext={this.valueStartText || undefined}\n aria-orientation={vertical ? 'vertical' : 'horizontal'}\n {...orientVertical}\n onInput={(e) => this.handleInput(e, true)}\n onChange={(e) => this.handleChange(e, true)}\n onFocus={this.onInputFocus('start')}\n onBlur={this.onInputBlur('start')}\n onKeyDown={this.onInputKeyDown('start')}\n onKeyUp={this.onInputKeyUp('start')}\n onPointerDown={this.onInputPointerDown('start')}\n onPointerUp={this.onInputPointerUp('start')}\n />,\n ),\n this.wrapInputShell(\n vertical,\n <input\n type=\"range\"\n class=\"md-slider__input md-slider__input--end\"\n min={this.min}\n max={this.max}\n step={this.step}\n value={ve}\n disabled={this.disabled}\n aria-label={this.inputAriaLabel(false, 'end')}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n aria-valuenow={ve}\n aria-valuetext={this.valueEndText || undefined}\n aria-orientation={vertical ? 'vertical' : 'horizontal'}\n {...orientVertical}\n onInput={(e) => this.handleInput(e, false)}\n onChange={(e) => this.handleChange(e, false)}\n onFocus={this.onInputFocus('end')}\n onBlur={this.onInputBlur('end')}\n onKeyDown={this.onInputKeyDown('end')}\n onKeyUp={this.onInputKeyUp('end')}\n onPointerDown={this.onInputPointerDown('end')}\n onPointerUp={this.onInputPointerUp('end')}\n />,\n ),\n ]\n : [\n <div\n class={{\n 'md-slider__thumb': true,\n 'md-slider__thumb--focus-visible': this.keyFocusedThumb === 'single',\n 'md-slider__thumb--pressing': this.pressingThumb === 'single',\n }}\n style={{\n ...(!vertical ? { insetInlineStart: 'var(--_value-pct)' } : {}),\n }}\n >\n <span class=\"md-slider__thumb-knob\" part=\"thumb-knob\"></span>\n <span class=\"md-slider__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n {bubble && (\n <span class=\"md-slider__value-indicator\" part=\"value-indicator\">\n {this.formatValue(val)}\n </span>\n )}\n </div>,\n this.wrapInputShell(\n vertical,\n <input\n type=\"range\"\n class=\"md-slider__input\"\n min={this.min}\n max={this.max}\n step={this.step}\n value={val}\n disabled={this.disabled}\n aria-label={this.inputAriaLabel(true)}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n aria-valuenow={val}\n aria-valuetext={this.valueText || undefined}\n aria-orientation={vertical ? 'vertical' : 'horizontal'}\n {...orientVertical}\n onInput={(e) => this.handleInput(e)}\n onChange={(e) => this.handleChange(e)}\n onFocus={this.onInputFocus('single')}\n onBlur={this.onInputBlur('single')}\n onKeyDown={this.onInputKeyDown('single')}\n onKeyUp={this.onInputKeyUp('single')}\n onPointerDown={this.onInputPointerDown('single')}\n onPointerUp={this.onInputPointerUp('single')}\n />,\n ),\n ]}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-DYL-8C5C.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{p as t,H as o,c as n,h as i,d as e,t as s}from"./p-BR6gfOQH.js";import{t as r}from"./p-DYBUr7K_.js";import{s as a,a as c}from"./p-BdEoSBtL.js";import{d}from"./p-CTC8XAB6.js";const m=()=>`:host{--_container-color:var(--md-icon-button-container-color, transparent);--_icon-color:var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454F));--_state-layer-color:var(--md-icon-button-state-layer-color, var(--md-sys-color-on-surface-variant, #49454F));--_icon-size:var(--md-icon-button-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));--_container-width:var(--md-icon-button-container-width, max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px)));--_container-height:var(--md-icon-button-container-height, max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px)));--_shape-round:20px;--_border-radius:var(--md-icon-button-container-shape, var(--_shape-round));display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--_container-width);height:var(--_container-height);border-radius:calc(var(--_border-radius) + var(--md-sys-shape-morph-enabled, 1) * (var(--_morph-to, var(--_border-radius)) - var(--_border-radius)));cursor:pointer;user-select:none;border:none;outline:none;overflow:hidden;box-sizing:border-box;background-color:var(--_container-color);color:var(--_icon-color);-webkit-tap-highlight-color:transparent;transition:background-color var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)), color var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)), 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));flex-shrink:0;vertical-align:middle}:host(.md-icon-button--xs){--_container-width:var(--md-icon-button-container-width, max(32px, calc(32px + var(--md-sys-density-scale, 0) * 4px)));--_container-height:var(--md-icon-button-container-height, max(32px, calc(32px + var(--md-sys-density-scale, 0) * 4px)));--_icon-size:var(--md-icon-button-icon-size, max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px)));--_shape-round:16px}:host(.md-icon-button--sm){--_container-width:var(--md-icon-button-container-width, max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px)));--_container-height:var(--md-icon-button-container-height, max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px)));--_icon-size:var(--md-icon-button-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));--_shape-round:20px}:host(.md-icon-button--md){--_container-width:var(--md-icon-button-container-width, max(32px, calc(56px + var(--md-sys-density-scale, 0) * 4px)));--_container-height:var(--md-icon-button-container-height, max(32px, calc(56px + var(--md-sys-density-scale, 0) * 4px)));--_icon-size:var(--md-icon-button-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));--_shape-round:28px}:host(.md-icon-button--lg){--_container-width:var(--md-icon-button-container-width, max(32px, calc(96px + var(--md-sys-density-scale, 0) * 4px)));--_container-height:var(--md-icon-button-container-height, max(32px, calc(96px + var(--md-sys-density-scale, 0) * 4px)));--_icon-size:var(--md-icon-button-icon-size, max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));--_shape-round:48px}:host(.md-icon-button--xl){--_container-width:var(--md-icon-button-container-width, max(32px, calc(136px + var(--md-sys-density-scale, 0) * 4px)));--_container-height:var(--md-icon-button-container-height, max(32px, calc(136px + var(--md-sys-density-scale, 0) * 4px)));--_icon-size:var(--md-icon-button-icon-size, max(28px, calc(40px + var(--md-sys-density-scale, 0) * 3px)));--_shape-round:68px}: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)))}: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)))}: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)))}: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)))}: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)))}: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)))}: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)))}: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)))}: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)))}: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)))}:host(.md-icon-button--round){--_border-radius:var(--md-icon-button-container-shape, var(--_shape-round))}:host(.md-icon-button--square.md-icon-button--xs){--_border-radius:var(--md-icon-button-container-shape, var(--md-sys-shape-corner-medium, 12px))}:host(.md-icon-button--square.md-icon-button--sm){--_border-radius:var(--md-icon-button-container-shape, var(--md-sys-shape-corner-medium, 12px))}:host(.md-icon-button--square.md-icon-button--md){--_border-radius:var(--md-icon-button-container-shape, var(--md-sys-shape-corner-large, 16px))}: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))}: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))}: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)}: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)}: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)}: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)}: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)}:host(.md-icon-button--shape-morph.md-icon-button--square.md-icon-button--selected){--_morph-to:var(--_shape-round)}:host(.md-icon-button--pressed.md-icon-button--xs){--_morph-to:var(--md-sys-shape-corner-small, 8px);transition-duration:var(--md-sys-motion-duration-short4, 200ms);transition-timing-function:var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-icon-button--pressed.md-icon-button--sm){--_morph-to:var(--md-sys-shape-corner-small, 8px);transition-duration:var(--md-sys-motion-duration-short4, 200ms);transition-timing-function:var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-icon-button--pressed.md-icon-button--md){--_morph-to:var(--md-sys-shape-corner-medium, 12px);transition-duration:var(--md-sys-motion-duration-short4, 200ms);transition-timing-function:var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-icon-button--pressed.md-icon-button--lg){--_morph-to:var(--md-sys-shape-corner-large, 16px);transition-duration:var(--md-sys-motion-duration-short4, 200ms);transition-timing-function:var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-icon-button--pressed.md-icon-button--xl){--_morph-to:var(--md-sys-shape-corner-large, 16px);transition-duration:var(--md-sys-motion-duration-short4, 200ms);transition-timing-function:var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-icon-button--width-narrow.md-icon-button--pressed){transition-duration:var(--md-sys-motion-duration-medium1, 250ms)}:host(.md-icon-button--connected-left.md-icon-button--xs),:host(.md-icon-button--connected-right.md-icon-button--xs){--_c-inner:4px}:host(.md-icon-button--connected-left.md-icon-button--sm),:host(.md-icon-button--connected-right.md-icon-button--sm){--_c-inner:8px}:host(.md-icon-button--connected-left.md-icon-button--md),:host(.md-icon-button--connected-right.md-icon-button--md){--_c-inner:8px}:host(.md-icon-button--connected-left.md-icon-button--lg),:host(.md-icon-button--connected-right.md-icon-button--lg){--_c-inner:16px}:host(.md-icon-button--connected-left.md-icon-button--xl),:host(.md-icon-button--connected-right.md-icon-button--xl){--_c-inner:20px}:host(.md-icon-button--connected-left.md-icon-button--connected-right){border-radius:var(--_c-inner)}:host(.md-icon-button--round.md-icon-button--connected-right:not(.md-icon-button--connected-left)){border-start-start-radius:var(--_shape-round);border-end-start-radius:var(--_shape-round);border-start-end-radius:var(--_c-inner);border-end-end-radius:var(--_c-inner)}:host(.md-icon-button--round.md-icon-button--connected-left:not(.md-icon-button--connected-right)){border-start-start-radius:var(--_c-inner);border-end-start-radius:var(--_c-inner);border-start-end-radius:var(--_shape-round);border-end-end-radius:var(--_shape-round)}:host(.md-icon-button--square.md-icon-button--connected-right:not(.md-icon-button--connected-left)),:host(.md-icon-button--square.md-icon-button--connected-left:not(.md-icon-button--connected-right)){border-radius:var(--_c-inner)}:host(.md-icon-button--standard){--_container-color:var(--md-icon-button-container-color, transparent);--_icon-color:var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454F));--_state-layer-color:var(--md-icon-button-state-layer-color, var(--md-sys-color-on-surface-variant, #49454F))}:host(.md-icon-button--standard.md-icon-button--selected:not(.md-icon-button--disabled)){--_icon-color:var(--md-icon-button-icon-color, var(--md-sys-color-primary, #6750A4));--_state-layer-color:var(--md-icon-button-state-layer-color, var(--md-sys-color-primary, #6750A4))}:host(.md-icon-button--filled){--_container-color:var(--md-icon-button-container-color, var(--md-sys-color-primary, #6750A4));--_icon-color:var(--md-icon-button-icon-color, var(--md-sys-color-on-primary, #FFFFFF));--_state-layer-color:var(--md-icon-button-state-layer-color, var(--md-sys-color-on-primary, #FFFFFF))}:host(.md-icon-button--filled.md-icon-button--toggle:not(.md-icon-button--selected):not(.md-icon-button--disabled)){--_container-color:var(--md-icon-button-container-color, var(--md-sys-color-surface-container-highest, #E6E0E9));--_icon-color:var(--md-icon-button-icon-color, var(--md-sys-color-primary, #6750A4));--_state-layer-color:var(--md-icon-button-state-layer-color, var(--md-sys-color-primary, #6750A4))}:host(.md-icon-button--filled.md-icon-button--selected:not(.md-icon-button--disabled)){--_container-color:var(--md-icon-button-container-color, var(--md-sys-color-primary, #6750A4));--_icon-color:var(--md-icon-button-icon-color, var(--md-sys-color-on-primary, #FFFFFF));--_state-layer-color:var(--md-icon-button-state-layer-color, var(--md-sys-color-on-primary, #FFFFFF))}:host(.md-icon-button--tonal){--_container-color:var(--md-icon-button-container-color, var(--md-sys-color-secondary-container, #E8DEF8));--_icon-color:var(--md-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1E192B));--_state-layer-color:var(--md-icon-button-state-layer-color, var(--md-sys-color-on-secondary-container, #1E192B))}:host(.md-icon-button--tonal.md-icon-button--toggle:not(.md-icon-button--selected):not(.md-icon-button--disabled)){--_container-color:var(--md-icon-button-container-color, var(--md-sys-color-surface-container-highest, #E6E0E9));--_icon-color:var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454F));--_state-layer-color:var(--md-icon-button-state-layer-color, var(--md-sys-color-on-surface-variant, #49454F))}:host(.md-icon-button--tonal.md-icon-button--selected:not(.md-icon-button--disabled)){--_container-color:var(--md-icon-button-container-color, var(--md-sys-color-secondary-container, #E8DEF8));--_icon-color:var(--md-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1E192B));--_state-layer-color:var(--md-icon-button-state-layer-color, var(--md-sys-color-on-secondary-container, #1E192B))}:host(.md-icon-button--outlined){--_container-color:var(--md-icon-button-container-color, transparent);--_icon-color:var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454F));--_state-layer-color:var(--md-icon-button-state-layer-color, var(--md-sys-color-on-surface-variant, #49454F));border:var(--md-icon-button-outline-width, 1px) solid var(--md-icon-button-outline-color, var(--md-sys-color-outline, #79747E))}:host(.md-icon-button--outlined.md-icon-button--selected:not(.md-icon-button--disabled)){--_container-color:var(--md-icon-button-container-color, var(--md-sys-color-inverse-surface, #313033));--_icon-color:var(--md-icon-button-icon-color, var(--md-sys-color-inverse-on-surface, #F4EFF4));--_state-layer-color:var(--md-icon-button-state-layer-color, var(--md-sys-color-inverse-on-surface, #F4EFF4));border-color:transparent}.md-icon-button__state-layer{position:absolute;inset:0;border-radius:inherit;background-color:var(--_state-layer-color);opacity:0;transition:opacity var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));pointer-events:none}:host(:hover) .md-icon-button__state-layer{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}:host(:active) .md-icon-button__state-layer{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}:host(:focus-visible) .md-icon-button__state-layer{opacity:var(--md-sys-state-focus-state-layer-opacity, 0.12)}:host(:focus-visible){outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:2px;z-index:1}:host(.md-icon-button--disabled){cursor:default;pointer-events:none}:host([soft-disabled]){cursor:default;pointer-events:auto}:host([soft-disabled]) .md-icon-button__state-layer{display:none}:host(.md-icon-button--standard.md-icon-button--disabled),:host(.md-icon-button--outlined.md-icon-button--disabled){--_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)}:host(.md-icon-button--outlined.md-icon-button--disabled){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)}:host(.md-icon-button--filled.md-icon-button--disabled),:host(.md-icon-button--tonal.md-icon-button--disabled){--_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);--_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)}:host(.md-icon-button--disabled:hover) .md-icon-button__state-layer,:host(.md-icon-button--disabled:active) .md-icon-button__state-layer,:host(.md-icon-button--disabled:focus-visible) .md-icon-button__state-layer{opacity:0}.md-icon-button__icon{display:none;align-items:center;justify-content:center;position:relative;z-index:1;color:inherit;width:var(--_icon-size);height:var(--_icon-size);font-size:0;line-height:0}.md-icon-button__icon slot{font-size:var(--_icon-size);line-height:1}.md-icon-button__icon--on{display:inline-flex}.md-icon-button__icon-font{font-size:var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size);display:flex;align-items:center;justify-content:center;line-height:1}:host(.md-icon-button--has-badge){overflow:visible}:host(.md-icon-button--has-badge) .md-icon-button__state-layer{overflow:hidden}::slotted(*:not(md-badge):not(md-avatar)){width:var(--_icon-size) !important;height:var(--_icon-size) !important;font-size:var(--_icon-size) !important;color:inherit !important;fill:currentColor !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;line-height:1 !important}.material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-weight:normal;font-style:normal;font-size:var(--_icon-size, 24px);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;overflow-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}@media (forced-colors: active){:host{forced-color-adjust:none}:host(.md-icon-button--outlined){border-color:ButtonText}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const l=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdClick=n(this,"mdClick",7);this.variant="standard";this.size="sm";this.shape="round";this.buttonWidth="default";this.disabled=false;this.softDisabled=false;this.toggle=false;this.selected=false;this.shapeMorph=true;this.ripple=true;this.icon="";this.selectedIcon="";this.href="";this.target="_self";this.connectedLeft=false;this.connectedRight=false;this.value="";this.groupTabindex=null;this.density=0;this.hasSlottedIcon=false;this.hasSlottedBadge=false;this.hasSlottedSelected=false;this.pressed=false;this.handleClick=t=>{if(this.isDisabled){t.preventDefault();return}const o=a(this.href);if(o){window.open(o,this.target,c)}if(this.toggle)this.selected=!this.selected;this.mdClick.emit({selected:this.selected})};this.handleKeyDown=t=>{if(t.key==="Enter"\|\|t.key===" "){t.preventDefault();if(!this.isDisabled){this.pressed=true;r(this.el);this.el.click();setTimeout((()=>{this.pressed=false}),150)}}};this.handlePointerDown=()=>{if(!this.isDisabled)this.pressed=true};this.handlePointerUp=()=>{this.pressed=false}}get isDisabled(){return this.disabled\|\|this.softDisabled}componentWillLoad(){this.syncSlottedIcons()}componentDidLoad(){const t=this.el.shadowRoot;if(!t)return;const o=t.querySelector("slot:not([name])");const n=t.querySelector('slot[name="selected"]');this.syncSlottedIcons();o?.addEventListener("slotchange",(()=>this.syncSlottedIcons()));n?.addEventListener("slotchange",(()=>this.syncSlottedIcons()))}hasMeaningfulSlotContent(t){if(!t)return false;return t.assignedNodes().some((t=>{if(t.nodeType===Node.ELEMENT_NODE){if(t.tagName.toLowerCase()==="md-badge")return false;return true}if(t.nodeType===Node.TEXT_NODE)return(t.textContent?.trim().length??0)>0;return false}))}syncSlottedIcons(){const t=this.el.shadowRoot;const o=t?.querySelector("slot:not([name])");const n=t?.querySelector('slot[name="selected"]');this.hasSlottedIcon=this.hasMeaningfulSlotContent(o);this.hasSlottedBadge=!!o?.assignedElements().some((t=>t.tagName.toLowerCase()==="md-badge"));this.hasSlottedSelected=this.hasMeaningfulSlotContent(n)}render(){const t=this.isDisabled;const o=this.toggle&&this.selected;const n=!!this.icon\|\|this.hasSlottedIcon;const s=!o\|\|!this.selectedIcon&&!this.hasSlottedSelected;return i(e,{key:"c8ba395e0f0eaa47019a6ec74ddb76135018d63a",class:{"md-icon-button":true,[`md-icon-button--${this.variant}`]:true,[`md-icon-button--${this.size}`]:true,[`md-icon-button--${this.shape}`]:true,[`md-icon-button--width-${this.buttonWidth}`]:this.buttonWidth!=="default","md-icon-button--selected":this.selected,"md-icon-button--toggle":this.toggle,"md-icon-button--disabled":this.disabled\|\|this.softDisabled,"md-icon-button--shape-morph":this.shapeMorph,"md-icon-button--has-badge":this.hasSlottedBadge,"md-icon-button--pressed":this.shapeMorph&&this.pressed,"md-icon-button--connected-left":this.connectedLeft,"md-icon-button--connected-right":this.connectedRight},role:"button","aria-disabled":t?"true":"false","aria-pressed":this.toggle?String(this.selected):undefined,tabindex:this.disabled?"-1":this.groupTabindex!==null?String(this.groupTabindex):"0",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onPointerDown:this.handlePointerDown,onPointerUp:this.handlePointerUp,onPointerLeave:this.handlePointerUp,onPointerCancel:this.handlePointerUp},this.ripple&&i("md-ripple",{key:"38a31f8be791e2441c128668d12cffc8d2883863",disabled:t}),i("span",{key:"3e36940f6038c69663ae28330827edb68158e78e",class:"md-icon-button__state-layer",part:"state-layer","aria-hidden":"true"}),i("span",{key:"ee34874988c22da61d85a98db6e2f636c43b1bdb",class:{"md-icon-button__icon":true,"md-icon-button__icon--on":s},part:"icon"},i("slot",{key:"25fe46290a2d8793c7f72ee623fafcfeaf01d015"}),s&&n&&!this.hasSlottedIcon&&i("span",{key:"9da0f58088f30f43b37d14f93f1f2406454f493d",class:"md-icon-button__icon-font material-symbols-outlined","aria-hidden":"true"},o&&this.selectedIcon?this.selectedIcon:this.icon)),this.toggle&&(this.selectedIcon\|\|this.hasSlottedSelected)&&i("span",{key:"366c07e84c1aa12ca7259983518ecb6e6e909852",class:{"md-icon-button__icon":true,"md-icon-button__icon--on":o},part:"selected-icon"},i("slot",{key:"7b346adf89aca1c953618e2b2654df70ed2c2320",name:"selected"}),!this.hasSlottedSelected&&this.selectedIcon&&i("span",{key:"f61d47d93eb24d4e95a5704dfc14bf59f3a3f9e0",class:"md-icon-button__icon-font material-symbols-outlined","aria-hidden":"true"},this.selectedIcon)))}get el(){return this}static get style(){return m()}},[257,"md-icon-button",{variant:[1],size:[1],shape:[1],buttonWidth:[1,"button-width"],disabled:[516],softDisabled:[516,"soft-disabled"],toggle:[4],selected:[1028],shapeMorph:[4,"shape-morph"],ripple:[4],icon:[1],selectedIcon:[1,"selected-icon"],href:[1],target:[1],connectedLeft:[516,"connected-left"],connectedRight:[516,"connected-right"],value:[1],groupTabindex:[1026,"group-tabindex"],density:[514],hasSlottedIcon:[32],hasSlottedBadge:[32],hasSlottedSelected:[32],pressed:[32]}]);function u(){if(typeof customElements==="undefined"){return}const t=["md-icon-button","md-ripple"];t.forEach((t=>{switch(t){case"md-icon-button":if(!customElements.get(s(t))){customElements.define(s(t),l)}break;case"md-ripple":if(!customElements.get(s(t))){d()}break}}))}u();export{l as M,u as d};
2	+ //# sourceMappingURL=p-DYL-8C5C.js.map