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

package/dist/components-csr/md-status-dot.js.map

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

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

@@ -0,0 +1,2 @@
+import{p as t,H as e,c as s,h as a,d as i,t as r}from"./p-bSpXNc5J.js";import{t as o}from"./p-DYBUr7K_.js";import{d as n}from"./p-BZakoRau.js";import{d}from"./p-C3vB0Hd9.js";const l=()=>`:host{--_size:var(--md-step-indicator-size, max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));--_indicator-h:var(--_size);--_indicator-ring:var(--md-step-indicator-ring, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));--_color:var(--md-step-indicator-color, var(--md-sys-color-surface-container-highest, #E6E0E9));--_text:var(--md-step-indicator-text, var(--md-sys-color-on-surface-variant, #49454F));--_active-color:var(--md-step-active-color, var(--md-sys-color-primary, #6750A4));--_active-text:var(--md-step-active-text, var(--md-sys-color-on-primary, #FFFFFF));--_active-halo:var(--md-step-active-halo-color, var(--md-sys-color-primary, #6750A4));--_completed-color:var(--md-step-completed-color, var(--md-sys-color-primary, #6750A4));--_completed-text:var(--md-step-completed-text, var(--md-sys-color-on-primary, #FFFFFF));--_error-color:var(--md-step-error-color, var(--md-sys-color-error, #B3261E));--_error-text:var(--md-step-error-text, var(--md-sys-color-on-error, #FFFFFF));--_connector:var(--md-step-connector-color, var(--md-sys-color-outline-variant, #CAC4D0));--_connector-filled:var(--md-step-connector-filled-color, var(--md-sys-color-primary, #6750A4));--_connector-thickness:var(--md-step-connector-thickness, max(2px, calc(4px + var(--md-sys-density-scale, 0) * 0.5px)));--_label-color:var(--md-step-label-color, var(--md-sys-color-on-surface-variant, #49454F));--_label-active-color:var(--md-step-label-active-color, var(--md-sys-color-on-surface, #1C1B1F));--_description-color:var(--md-step-description-color, var(--md-sys-color-on-surface-variant, #49454F));--_state-layer-color:var(--md-step-state-layer-color, var(--md-sys-color-on-surface, #1C1B1F));--_spring-duration:var(--md-sys-motion-spring-spatial-default-duration, 500ms);--_spring-easing:var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));--_state-duration:var(--md-sys-motion-spring-effects-default-duration, 200ms);--_state-easing:var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00));--_expand-duration:var(--md-step-expand-duration, var(--md-sys-motion-spring-spatial-default-duration, 500ms));--_expand-easing:var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));--_collapse-duration:var(--md-step-collapse-duration, var(--md-sys-motion-duration-short4, 200ms));--_collapse-easing:var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15));--_connector-duration:var(--md-step-connector-duration, var(--md-sys-motion-duration-medium3, 350ms));--_connector-easing:linear;--_active-halo-size:3px;display:flex;box-sizing:border-box;position:relative;font-family:var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);animation:md-step-enter var(--md-sys-motion-spring-effects-slow-duration, 300ms) var(--_state-easing) backwards;animation-delay:calc(var(--md-step-idx, 0) * 40ms)}@keyframes md-step-enter{from{opacity:0}}:host(.md-step--indicator-dot){--_indicator-h:10px;--_color:var(--md-step-indicator-color, var(--md-sys-color-outline, #79747E))}:host(.md-step--horizontal){--_indicator-pad:max(0px, calc(4px + var(--md-sys-density-scale, 0) * 1px));--_connector-gap:max(4px, calc(10px + var(--md-sys-density-scale, 0) * 1px));flex:1 1 0;min-inline-size:0;justify-content:center;align-items:flex-start}:host(.md-step--horizontal.md-step--panel-step){display:contents}:host(.md-step--horizontal.md-step--panel-step) .md-step__header{grid-row:1;display:flex;flex:1 1 0;min-inline-size:0;justify-content:center;align-items:flex-start;position:relative}:host(.md-step--horizontal.md-step--panel-step) .md-step__content{grid-row:2;grid-column:1 / -1}:host(.md-step--vertical){flex:initial;flex-direction:row;align-items:flex-start;flex-wrap:wrap;--_connector-gap:6px;padding-block-end:var(--md-sys-spacing-inset-lg, 16px)}:host(.md-step--vertical.md-step--last){padding-block-end:0}.md-step__inner{position:relative;display:inline-flex;align-items:center;gap:var(--md-sys-spacing-gap-md, 12px);padding:0;background:transparent;border:none;cursor:pointer;text-align:start;color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}:host(.md-step--horizontal) .md-step__inner{flex-direction:column;align-items:center;gap:max(2px, calc(6px + var(--md-sys-density-scale, 0) * 1px));padding-block-start:var(--_indicator-pad);padding-inline:var(--md-sys-spacing-inset-sm, 8px);max-inline-size:100%;min-inline-size:0;z-index:1}:host(.md-step--vertical) .md-step__inner{padding-inline-start:8px;z-index:1}.md-step__indicator{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:calc(var(--_indicator-h) + 2 * var(--_indicator-ring));block-size:calc(var(--_indicator-h) + 2 * var(--_indicator-ring));border-radius:50%;flex-shrink:0;color:var(--_state-layer-color)}.md-step__indicator md-ripple{border-radius:50%}.md-step__state-layer{position:absolute;inset:0;border-radius:50%;background-color:var(--_state-layer-color);opacity:0;pointer-events:none;transition:opacity var(--_state-duration) var(--_state-easing)}.md-step__inner:hover:not([aria-disabled="true"]) .md-step__state-layer{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}.md-step__inner:focus-visible .md-step__state-layer{opacity:var(--md-sys-state-focus-state-layer-opacity, 0.12)}.md-step__inner:active:not([aria-disabled="true"]) .md-step__state-layer{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}.md-step__inner:focus-visible{outline:none}.md-step__inner:focus-visible .md-step__indicator{box-shadow:0 0 0 2px var(--md-sys-color-surface, #FEF7FF),     0 0 0 5px var(--md-sys-color-secondary, #625B71)}:host(.md-step--disabled) .md-step__inner{cursor:not-allowed}:host(.md-step--disabled) .md-step__indicator{opacity:0.38}:host(.md-step--disabled) md-ripple,:host(.md-step--disabled) .md-step__state-layer{display:none}.md-step__bubble{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_size);block-size:var(--_size);border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--_color);color:var(--_text);font-family:var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-large-font-size, 14px);font-weight:var(--md-sys-typescale-label-large-font-weight, 500);line-height:var(--md-sys-typescale-label-large-line-height, 20px);flex-shrink:0;transition:background-color var(--_state-duration) var(--_state-easing),     color var(--_state-duration) var(--_state-easing),     transform var(--_spring-duration) var(--_spring-easing),     box-shadow var(--_spring-duration) var(--_spring-easing)}.md-step__bubble .material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:calc(var(--_size) * 0.56);line-height:1;font-weight:normal;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24}:host(.md-step--active) .md-step__bubble .material-symbols-outlined,:host(.md-step--completed) .md-step__bubble .material-symbols-outlined,:host(.md-step--error) .md-step__bubble .material-symbols-outlined{font-variation-settings:'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24}@keyframes md-step-glyph-in{0%{transform:scale(0);opacity:0}60%{transform:scale(1.18);opacity:1}100%{transform:scale(1);opacity:1}}:host(.md-step--completed) .md-step__bubble .material-symbols-outlined,:host(.md-step--error) .md-step__bubble .material-symbols-outlined{animation:md-step-glyph-in var(--_spring-duration) var(--_spring-easing) both}:host(.md-step--active) .md-step__bubble{background-color:var(--_active-color);color:var(--_active-text);transform:scale(1.12);box-shadow:0 0 0 var(--_active-halo-size) color-mix(in srgb, var(--_active-halo) 14%, transparent)}:host(.md-step--completed) .md-step__bubble{background-color:var(--_completed-color);color:var(--_completed-text)}:host(.md-step--error) .md-step__bubble{background-color:var(--_error-color);color:var(--_error-text);animation:md-step-error-pulse var(--md-sys-motion-duration-medium2, 300ms) var(--_state-easing) both}@keyframes md-step-error-pulse{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}.md-step__dot{display:inline-block;inline-size:var(--_indicator-h);block-size:var(--_indicator-h);border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--_color);flex-shrink:0;transition:background-color var(--_state-duration) var(--_state-easing),     box-shadow var(--_spring-duration) var(--_spring-easing),     transform var(--_spring-duration) var(--_spring-easing)}:host(.md-step--active) .md-step__dot{background-color:var(--_active-color);transform:scale(1.4);box-shadow:0 0 0 var(--_active-halo-size) color-mix(in srgb, var(--_active-halo) 18%, transparent)}:host(.md-step--completed) .md-step__dot{background-color:var(--_completed-color)}:host(.md-step--error) .md-step__dot{background-color:var(--_error-color)}.md-step__text{display:flex;flex-direction:column;gap:2px;min-inline-size:0}:host(.md-step--horizontal) .md-step__text{align-items:center;text-align:center;max-inline-size:100%}.md-step__label{color:var(--_label-color);font-family:var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);font-size:max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-label-large-font-weight, 500);line-height:max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));transition:color var(--_state-duration) var(--_state-easing),     font-variation-settings var(--_state-duration) var(--_state-easing)}:host(.md-step--horizontal) .md-step__label{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}:host(.md-step--active) .md-step__label{color:var(--_label-active-color);font-weight:600;font-variation-settings:'wght' 600}:host(.md-step--error) .md-step__label{color:var(--_error-color)}:host(.md-step--disabled) .md-step__text{opacity:0.38}.md-step__optional,.md-step__description{color:var(--_description-color);font-family:var(--md-sys-typescale-body-small-font-family, Roboto, sans-serif);font-size:max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-body-small-font-weight, 400);line-height:max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px))}.md-step__optional{font-style:italic}:host(.md-step--error) .md-step__description{color:var(--_error-color)}.md-step__connector{position:relative;flex:1;align-self:center;background-color:var(--_connector);overflow:hidden;border-radius:var(--md-sys-shape-corner-full, 9999px)}.md-step__connector::after{content:'';position:absolute;inset:0;background-color:var(--_connector-filled);border-radius:inherit;transform-origin:left center;transform:scaleX(0);transition:transform var(--_connector-duration) var(--_connector-easing)}.md-step__connector--filled::after{transform:scaleX(1)}:host([dir="rtl"]) .md-step__connector::after,:host-context([dir="rtl"]) .md-step__connector::after{transform-origin:right center}:host(.md-step--horizontal) .md-step__connector--trailing{position:absolute;inset-block-start:calc(var(--_indicator-pad) + var(--_indicator-ring) + var(--_indicator-h) / 2);transform:translateY(-50%);block-size:var(--_connector-thickness);inset-inline-start:calc(50% + var(--_indicator-h) / 2 + var(--_connector-gap));inline-size:calc(100% - var(--_indicator-h) - 2 * var(--_connector-gap));flex:none;align-self:auto;z-index:0}:host(.md-step--vertical) .md-step__connector{position:absolute;flex:none;align-self:auto;z-index:0;inline-size:var(--_connector-thickness);inset-inline-start:calc(8px + var(--_indicator-ring) + (var(--_indicator-h) - var(--_connector-thickness)) / 2)}:host(.md-step--vertical) .md-step__connector--leading{display:none}:host(.md-step--vertical) .md-step__connector--trailing{inset-block-start:calc(var(--_indicator-ring) + var(--_indicator-h) + var(--_connector-gap));inset-block-end:calc(var(--_connector-gap) - var(--_indicator-ring))}:host(.md-step--vertical) .md-step__connector::after{transform-origin:center top;transform:scaleY(0)}:host(.md-step--vertical) .md-step__connector--filled::after{transform:scaleY(1)}.md-step__content{flex:1 1 100%;display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;margin-inline-start:calc(8px + var(--_indicator-h) + 2 * var(--_indicator-ring) + var(--md-sys-spacing-gap-md, 12px));color:var(--md-sys-color-on-surface, #1C1B1F);transition:grid-template-rows var(--_collapse-duration) var(--_collapse-easing),     opacity var(--_collapse-duration) var(--_collapse-easing),     visibility 0s linear var(--_collapse-duration)}.md-step__content--open{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows var(--_expand-duration) var(--_expand-easing),     opacity var(--_state-duration) var(--_state-easing),     visibility 0s}.md-step__content-sizer{min-block-size:0;overflow:hidden}.md-step__content-inner{padding-block-start:var(--md-sys-spacing-inset-xs, 4px);padding-block-end:var(--md-sys-spacing-inset-lg, 16px)}.md-step__content--lazy{display:block;grid-template-rows:none;opacity:1;visibility:visible;transition:none;animation:md-step-content-enter var(--_expand-duration) var(--_expand-easing) both}.md-step__content--lazy .md-step__content-sizer{overflow:visible}@keyframes md-step-content-enter{from{opacity:0;transform:translateY(-6px)}}.md-step__actions{display:flex;gap:var(--md-sys-spacing-gap-sm, 8px);margin-block-start:var(--md-sys-spacing-gap-lg, 16px)}@media (max-width: 599px){:host(.md-step--horizontal){--_size:var(--md-step-indicator-size, 28px);--_connector-gap:8px}:host(.md-step--horizontal) .md-step__inner{gap:var(--md-sys-spacing-gap-xs, 4px);padding-inline:var(--md-sys-spacing-inset-xs, 4px)}:host(.md-step--horizontal) .md-step__label{font-size:var(--md-sys-typescale-label-medium-font-size, 12px);line-height:var(--md-sys-typescale-label-medium-line-height, 16px)}:host(.md-step--horizontal) .md-step__optional,:host(.md-step--horizontal) .md-step__description{display:none}}@media (prefers-reduced-motion: reduce){:host{animation:none !important}.md-step__bubble,.md-step__dot,.md-step__connector,.md-step__connector::after,.md-step__state-layer,.md-step__label,.md-step__content,.md-step__bubble .material-symbols-outlined{transition-duration:0.01ms !important;transition-delay:0s !important;animation:none !important}:host(.md-step--active) .md-step__bubble,:host(.md-step--active) .md-step__dot{transform:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--_active-halo) 25%, transparent)}}@media (forced-colors: active){.md-step__bubble,.md-step__dot{background-color:Canvas;border:2px solid CanvasText;forced-color-adjust:none}:host(.md-step--active) .md-step__bubble,:host(.md-step--completed) .md-step__bubble{background-color:Highlight;color:HighlightText}.md-step__connector{background-color:GrayText;forced-color-adjust:none}.md-step__connector::after{background-color:Highlight}.md-step__state-layer{display:none}.md-step__inner:focus-visible .md-step__indicator{box-shadow:0 0 0 3px Highlight}}: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 c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdStepClick=s(this,"mdStepClick",5);this.mdStepNext=s(this,"mdStepNext",5);this.mdStepBack=s(this,"mdStepBack",5);this.label="";this.description="";this.completed=false;this.active=false;this.error=false;this.errorText="";this.disabled=false;this.optional=false;this.editable=false;this.icon="";this.completedIcon="check";this.errorIcon="priority_high";this.hideActions=false;this.density=0;this.hasSlottedContent=false;this.handleClick=t=>{if(this.effectivelyDisabled)return;t.preventDefault();this.mdStepClick.emit({index:this.index})};this.handleKeyDown=t=>{if(this.effectivelyDisabled)return;if(t.key==="Enter"||t.key===" "){t.preventDefault();o(this.el);this.mdStepClick.emit({index:this.index})}};this.emitNext=()=>this.mdStepNext.emit({index:this.index});this.emitBack=()=>this.mdStepBack.emit({index:this.index})}attr(t,e=""){const s=this.el.getAttribute(t);return s!=null&&s!==""?s:e}get index(){return Number(this.attr("data-index","0"))}get total(){return Number(this.attr("data-total","0"))}get activeIndex(){return Number(this.attr("data-active","0"))}get position(){return this.el.getAttribute("data-position")??"first"}get orientation(){return this.el.getAttribute("data-orientation")??"horizontal"}get indicatorKind(){return this.el.getAttribute("data-indicator")??"numbered"}get linearMode(){return this.el.getAttribute("data-mode")==="linear"}connectedCallback(){this.computeSlottedContent();if(typeof MutationObserver!=="undefined"){this.contentObserver=new MutationObserver((()=>this.computeSlottedContent()));this.contentObserver.observe(this.el,{childList:true})}}disconnectedCallback(){this.contentObserver?.disconnect();this.contentObserver=undefined}computeSlottedContent(){this.hasSlottedContent=Array.from(this.el.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&(t.textContent??"").trim()!==""))}stepSiblings(){const t=this.el.parentElement;if(!t)return[];return Array.from(t.children).filter((t=>t.tagName.toLowerCase()==="md-step"))}allPriorPassable(){const t=this.stepSiblings();for(let e=0;e<this.index;e++){const s=t[e];if(!s?.completed&&!s?.optional)return false}return true}get reachable(){if(!this.linearMode)return true;return this.index<=this.activeIndex||this.completed||this.allPriorPassable()}get effectivelyDisabled(){return this.disabled||!this.reachable}onInternalMdClick(t){if(t.target===this.el)t.stopPropagation()}glyph(t){return a("span",{class:"md-step__bubble",part:"bubble","aria-hidden":"true"},a("span",{class:"material-symbols-outlined"},t))}renderIndicator(){if(this.indicatorKind==="dot"){return a("span",{class:"md-step__dot",part:"dot","aria-hidden":"true"})}if(this.error)return this.glyph(this.errorIcon);if(this.icon)return this.glyph(this.icon);if(this.completed)return this.glyph(this.editable?"edit":this.completedIcon);return a("span",{class:"md-step__bubble",part:"bubble","aria-hidden":"true"},this.index+1)}composeA11yLabel(){if(this.accessibleName?.trim())return this.accessibleName;const t=(t,e)=>this.attr(t,e);let e=`${t("data-step-word","Step")} ${this.index+1} ${t("data-of-word","of")} ${this.total}`;if(this.label)e+=`: ${this.label}`;if(this.optional)e+=`, ${t("data-optional-word","optional")}`;if(this.completed)e+=`, ${t("data-completed-word","completed")}`;if(this.active)e+=`, ${t("data-current-word","current")}`;if(this.error)e+=`, ${t("data-error-word","error")}${this.errorText?`: ${this.errorText}`:""}`;return e}render(){const t=this.position==="first";const e=this.position==="last";const s=this.orientation==="vertical";const r=this.effectivelyDisabled;const o=this.error&&this.errorText?this.errorText:this.description;const n=this.optional?this.attr("data-optional-word","Optional"):"";const d=this.attr("data-nav","true")!=="false"&&!this.hideActions;const l=this.attr("data-loading","false")==="true";const c=this.attr("data-next-disabled","false")==="true";const p=this.attr("data-lazy","false")==="true";const m=this.attr("data-panel-mode","shared");const _=s?this.hasSlottedContent||d:m==="step"&&this.hasSlottedContent;const h=_&&(!p||this.active);const b=[!t&&s&&a("span",{key:"b9c426379a0b93f5e11228abcf7e20b4e7747b55",class:{"md-step__connector":true,"md-step__connector--leading":true,"md-step__connector--filled":this.index<=this.activeIndex},part:"connector connector-leading","aria-hidden":"true"}),a("div",{key:"a1781fd31e21f529e0ae2fc2c89fb2d316ee4e95",class:"md-step__inner",part:"inner",tabindex:r?-1:0,role:"button","aria-label":this.composeA11yLabel(),"aria-disabled":r?"true":undefined,"aria-current":this.active?"step":undefined,"aria-expanded":_?this.active?"true":"false":undefined,"aria-controls":h?"md-step-panel":undefined,onClick:this.handleClick,onKeyDown:this.handleKeyDown},a("span",{key:"68e747e207d64017daf2f5a663a82f1313989ce7",class:"md-step__indicator",part:"indicator"},a("md-ripple",{key:"410fae4067b4580e504213a3c9ba55f0b7b426ef",disabled:r}),a("span",{key:"d9bc7670f045f59349ba02875da18207fb82960c",class:"md-step__state-layer",part:"state-layer","aria-hidden":"true"}),this.renderIndicator()),(this.label||o||n)&&a("span",{key:"cd9a62c315c5d9f52b004997c4c43cdbdcf91153",class:"md-step__text",part:"text"},this.label&&a("span",{key:"c9dbe5b735dca4223e7767552450032ed7ae3e25",class:"md-step__label",part:"label"},this.label),n&&a("span",{key:"cc8b6e152d85e5f89cff9fd50c13c46b8240e298",class:"md-step__optional",part:"optional"},n),o&&a("span",{key:"487a0ab33b8cb7d7460a90862bb28189d968d90d",class:"md-step__description",part:"description"},o))),!e&&a("span",{key:"a83514bed44e127955c50fb60e85806fa1f7f625",class:{"md-step__connector":true,"md-step__connector--trailing":true,"md-step__connector--filled":this.index<this.activeIndex},part:"connector connector-trailing","aria-hidden":"true"})];const v=!s&&_;return a(i,{key:"ca97c2c2fc69d2133107e123bd711c630b7defa3",class:{"md-step":true,[`md-step--${this.orientation}`]:true,[`md-step--indicator-${this.indicatorKind}`]:true,"md-step--active":this.active,"md-step--completed":this.completed,"md-step--error":this.error,"md-step--optional":this.optional,"md-step--editable":this.editable,"md-step--disabled":r,"md-step--first":t,"md-step--last":e,"md-step--panel-step":!s&&_},role:"listitem","aria-current":this.active?"step":undefined,"aria-disabled":r?"true":undefined},v?a("div",{class:"md-step__header"},b):b,h&&a("div",{key:"c426594775bec461d2c8625405bc499b9cc57e1c",id:"md-step-panel",class:{"md-step__content":true,"md-step__content--open":this.active,"md-step__content--lazy":p},part:"content",role:"region","aria-label":this.label||this.composeA11yLabel()},a("div",{key:"0824ab55aa7df5de067d243d56b8ab5dc650c845",class:"md-step__content-sizer"},a("div",{key:"4b8dd2c44d3a5ef871310745bdf3494636a444b6",class:"md-step__content-inner"},a("slot",{key:"24ac93aef3dd171fc921762535ac8c7ccde9e7f6"}),d&&s&&a("div",{key:"9e2e763ee01da8b936102dbd028c538dca347370",class:"md-step__actions",part:"actions"},a("md-button",{key:"808cfb7c0307404baa4714ad7a0968ea023ace21",variant:"text",size:"sm",disabled:t||l,onClick:this.emitBack},this.attr("data-back-label","Back")),a("md-button",{key:"66b958c5174cf1044a0b0e174146918cb061a675",variant:"filled",size:"sm",loading:l,disabled:c||l,onClick:this.emitNext},e?this.attr("data-finish-label","Finish"):this.attr("data-next-label","Continue")))))))}get el(){return this}static get style(){return l()}},[257,"md-step",{label:[1],description:[1],completed:[516],active:[1540],error:[516],errorText:[1,"error-text"],disabled:[516],optional:[516],editable:[516],icon:[1],completedIcon:[1,"completed-icon"],errorIcon:[1,"error-icon"],accessibleName:[1,"accessible-name"],hideActions:[516,"hide-actions"],density:[514],hasSlottedContent:[32]},[[0,"mdClick","onInternalMdClick"]]]);function p(){if(typeof customElements==="undefined"){return}const t=["md-step","md-button","md-ripple"];t.forEach((t=>{switch(t){case"md-step":if(!customElements.get(r(t))){customElements.define(r(t),c)}break;case"md-button":if(!customElements.get(r(t))){n()}break;case"md-ripple":if(!customElements.get(r(t))){d()}break}}))}p();const m=c;const _=p;export{m as MdStep,_ as defineCustomElement};
+//# sourceMappingURL=md-step.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["mdStepCss","MdStep","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","label","description","completed","active","error","errorText","disabled","optional","editable","icon","completedIcon","errorIcon","hideActions","density","hasSlottedContent","handleClick","e","effectivelyDisabled","preventDefault","mdStepClick","emit","index","handleKeyDown","key","triggerRipple","el","emitNext","mdStepNext","emitBack","mdStepBack","attr","name","fallback","v","getAttribute","Number","total","activeIndex","position","orientation","indicatorKind","linearMode","connectedCallback","computeSlottedContent","MutationObserver","contentObserver","observe","childList","disconnectedCallback","disconnect","undefined","Array","from","childNodes","some","n","nodeType","Node","ELEMENT_NODE","TEXT_NODE","textContent","trim","stepSiblings","parent","parentElement","children","filter","c","tagName","toLowerCase","allPriorPassable","siblings","i","s","reachable","onInternalMdClick","target","stopPropagation","glyph","h","class","part","renderIndicator","composeA11yLabel","accessibleName","w","f","render","isFirst","isLast","isVertical","supporting","optionalCaption","navActions","loading","nextDisabled","lazy","panelMode","hasPanel","renderPanel","headerNodes","tabindex","role","onClick","onKeyDown","panelStep","Host","id","variant","size"],"sources":["src/components/md-step/md-step.css?tag=md-step&encapsulation=shadow","src/components/md-step/md-step.tsx"],"sourcesContent":["/* ==========================================================\n   md-step — one step inside <md-stepper>\n   MD3 Expressive: spring bubble on the active step, a rounded expressive\n   progress connector, spring-animated (grid-rows 0fr↔1fr) vertical content\n   panels, staggered entrance, a hover/ripple disc kept proportional to each\n   indicator variant, and a fixed indicator baseline so connectors stay\n   aligned regardless of label/description height.\n\n   Motion vocabulary (house idiom — see md-fab / md-accordion-item):\n     spatial springs  → transform, box-shadow, border-radius, sizes (overshoot ok)\n     effects springs  → background-color, color, opacity (never overshoot)\n\n   PUBLIC CSS CUSTOM PROPERTIES:\n     --md-step-indicator-size           Bubble diameter (32px; 28px compact)\n     --md-step-indicator-ring           Hover / ripple ring thickness around the\n                                        indicator (8px).\n     --md-step-indicator-color          Pending bubble background\n     --md-step-indicator-text           Pending bubble text\n     --md-step-active-color             Active bubble background\n     --md-step-active-text              Active bubble text\n     --md-step-active-halo-color        Soft halo around the active bubble\n     --md-step-completed-color          Completed bubble background\n     --md-step-completed-text           Completed bubble text\n     --md-step-error-color              Error bubble background\n     --md-step-error-text               Error bubble text\n     --md-step-connector-color          Inactive connector track\n     --md-step-connector-filled-color   Filled connector\n     --md-step-connector-thickness      Connector thickness (4px)\n     --md-step-connector-duration       Connector fill duration\n     --md-step-label-color              Resting label colour\n     --md-step-label-active-color       Active label colour\n     --md-step-description-color        Supporting / optional caption colour\n     --md-step-state-layer-color        Hover / focus / press overlay\n     --md-step-expand-duration          Vertical panel expand duration\n     --md-step-collapse-duration        Vertical panel collapse duration\n\n   PARTS: inner · indicator · bubble · dot · state-layer · text · label ·\n          optional · description · connector · connector-leading ·\n          connector-trailing · content · actions\n   ========================================================== */\n\n:host {\n  --_size: var(--md-step-indicator-size, max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));\n  --_indicator-h: var(--_size);\n  --_indicator-ring: var(--md-step-indicator-ring, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));\n  --_color: var(--md-step-indicator-color, var(--md-sys-color-surface-container-highest, #E6E0E9));\n  --_text: var(--md-step-indicator-text, var(--md-sys-color-on-surface-variant, #49454F));\n  --_active-color: var(--md-step-active-color, var(--md-sys-color-primary, #6750A4));\n  --_active-text: var(--md-step-active-text, var(--md-sys-color-on-primary, #FFFFFF));\n  --_active-halo: var(--md-step-active-halo-color, var(--md-sys-color-primary, #6750A4));\n  --_completed-color: var(--md-step-completed-color, var(--md-sys-color-primary, #6750A4));\n  --_completed-text: var(--md-step-completed-text, var(--md-sys-color-on-primary, #FFFFFF));\n  --_error-color: var(--md-step-error-color, var(--md-sys-color-error, #B3261E));\n  --_error-text: var(--md-step-error-text, var(--md-sys-color-on-error, #FFFFFF));\n  --_connector: var(--md-step-connector-color, var(--md-sys-color-outline-variant, #CAC4D0));\n  --_connector-filled: var(--md-step-connector-filled-color, var(--md-sys-color-primary, #6750A4));\n  --_connector-thickness: var(--md-step-connector-thickness, max(2px, calc(4px + var(--md-sys-density-scale, 0) * 0.5px)));\n  --_label-color: var(--md-step-label-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_label-active-color: var(--md-step-label-active-color, var(--md-sys-color-on-surface, #1C1B1F));\n  --_description-color: var(--md-step-description-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_state-layer-color: var(--md-step-state-layer-color, var(--md-sys-color-on-surface, #1C1B1F));\n\n  /* Motion: spatial spring for movement/shape; effects spring for color;\n     LINEAR for the connector so it visibly \"progresses\" toward the next step\n     like a determinate indicator. Panel expand rides the spatial spring,\n     collapse accelerates out (asymmetric, like md-accordion-item). */\n  --_spring-duration: var(--md-sys-motion-spring-spatial-default-duration, 500ms);\n  --_spring-easing: var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));\n  --_state-duration: var(--md-sys-motion-spring-effects-default-duration, 200ms);\n  --_state-easing: var(--md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.80, 0.34, 1.00));\n  --_expand-duration: var(--md-step-expand-duration, var(--md-sys-motion-spring-spatial-default-duration, 500ms));\n  --_expand-easing: var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));\n  --_collapse-duration: var(--md-step-collapse-duration, var(--md-sys-motion-duration-short4, 200ms));\n  --_collapse-easing: var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15));\n  --_connector-duration: var(--md-step-connector-duration, var(--md-sys-motion-duration-medium3, 350ms));\n  --_connector-easing: linear;\n  /* Halo ring around the active indicator. Kept modest so the connector fill /\n     rail can clear it with a small --_connector-gap on every side (letting the\n     rail reach close enough to read as connected). */\n  --_active-halo-size: 3px;\n\n  display: flex;\n  box-sizing: border-box;\n  position: relative;\n  font-family: var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);\n  animation: md-step-enter var(--md-sys-motion-spring-effects-slow-duration, 300ms) var(--_state-easing) backwards;\n  animation-delay: calc(var(--md-step-idx, 0) * 40ms);\n}\n\n/* Staggered entrance — opacity only, so measured geometry is stable from the\n   first frame. --md-step-idx is stamped by the parent stepper. */\n@keyframes md-step-enter {\n  from { opacity: 0; }\n}\n\n/* ── Orientation / indicator variants ─────────────────────── */\n:host(.md-step--indicator-dot) {\n  --_indicator-h: 10px;\n  /* Dots carry no glyph: the pending fill alone must clear 3:1 against\n     surface, so default to outline instead of surface-container-highest. */\n  --_color: var(--md-step-indicator-color, var(--md-sys-color-outline, #79747E));\n}\n\n:host(.md-step--horizontal) {\n  --_indicator-pad: max(0px, calc(4px + var(--md-sys-density-scale, 0) * 1px));\n  --_connector-gap: max(4px, calc(10px + var(--md-sys-density-scale, 0) * 1px));\n  flex: 1 1 0;\n  min-inline-size: 0;\n  justify-content: center;\n  align-items: flex-start;\n}\n\n/* ── Horizontal panel mode (opt-in) ──────────────────────────────────────────\n   The host dissolves so its two boxes become grid items of the stepper's row:\n   the header keeps every flex property the host used to carry (so the\n   indicator, labels and connectors lay out exactly as before), and the panel\n   spans the full row underneath. Only reached via .md-step--panel-step, which\n   md-step sets solely in this mode — the plain horizontal step is untouched. */\n:host(.md-step--horizontal.md-step--panel-step) {\n  display: contents;\n}\n\n:host(.md-step--horizontal.md-step--panel-step) .md-step__header {\n  grid-row: 1;\n  display: flex;\n  flex: 1 1 0;\n  min-inline-size: 0;\n  justify-content: center;\n  align-items: flex-start;\n  position: relative;\n}\n\n:host(.md-step--horizontal.md-step--panel-step) .md-step__content {\n  grid-row: 2;\n  grid-column: 1 / -1;\n}\n\n:host(.md-step--vertical) {\n  flex: initial;\n  flex-direction: row;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  /* Small gap around the indicator (rounded caps like the horizontal\n     connector) — kept tight so the rail reaches close to both bubbles and\n     reads as connected, not a floating pill, even between adjacent steps. */\n  --_connector-gap: 6px;\n  /* Rhythm between stacked headers — gives the rail real length between\n     collapsed steps so it connects rather than showing a stub. On-grid 16px\n     tracks global density via --md-sys-spacing-inset-lg (byte-for-byte at 0). */\n  padding-block-end: var(--md-sys-spacing-inset-lg, 16px);\n}\n:host(.md-step--vertical.md-step--last) { padding-block-end: 0; }\n\n/* ==========================================================\n   1. INNER (clickable header — layout only; affordance lives on the indicator)\n   ========================================================== */\n.md-step__inner {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  /* Global density: indicator↔label gap tracks --md-sys-spacing-gap-md. The\n     vertical content panel's margin-inline-start mirrors this same token so the\n     panel stays aligned under the label at every density rung. */\n  gap: var(--md-sys-spacing-gap-md, 12px);\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  text-align: start;\n  color: inherit;\n  font: inherit;\n  -webkit-tap-highlight-color: transparent;\n}\n\n:host(.md-step--horizontal) .md-step__inner {\n  flex-direction: column;\n  align-items: center;\n  gap: max(2px, calc(6px + var(--md-sys-density-scale, 0) * 1px));\n  padding-block-start: var(--_indicator-pad);\n  padding-inline: var(--md-sys-spacing-inset-sm, 8px);\n  max-inline-size: 100%;\n  min-inline-size: 0;\n  z-index: 1;\n}\n\n:host(.md-step--vertical) .md-step__inner {\n  padding-inline-start: 8px;\n  z-index: 1;\n}\n\n/* ==========================================================\n   2. INDICATOR — circular affordance wrapper (hover / focus / ripple)\n   ========================================================== */\n.md-step__indicator {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: calc(var(--_indicator-h) + 2 * var(--_indicator-ring));\n  block-size: calc(var(--_indicator-h) + 2 * var(--_indicator-ring));\n  border-radius: 50%;\n  flex-shrink: 0;\n  /* md-ripple's wave uses currentColor (library convention — see md-radio):\n     this `color` is inherited into the ripple only, since the bubble/number\n     and dot set their own colours. */\n  color: var(--_state-layer-color);\n}\n\n/* md-ripple is display:contents; its clip uses border-radius: inherit which\n   resolves against the ripple HOST — give it the round shape so the wave is a\n   disc, not a square. */\n.md-step__indicator md-ripple {\n  border-radius: 50%;\n}\n\n.md-step__state-layer {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background-color: var(--_state-layer-color);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--_state-duration) var(--_state-easing);\n}\n.md-step__inner:hover:not([aria-disabled=\"true\"]) .md-step__state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n.md-step__inner:focus-visible .md-step__state-layer {\n  opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);\n}\n.md-step__inner:active:not([aria-disabled=\"true\"]) .md-step__state-layer {\n  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);\n}\n\n/* Circular focus ring on the indicator (box-shadow follows the 50% radius on\n   every engine — unlike outline). */\n.md-step__inner:focus-visible { outline: none; }\n.md-step__inner:focus-visible .md-step__indicator {\n  box-shadow:\n    0 0 0 2px var(--md-sys-color-surface, #FEF7FF),\n    0 0 0 5px var(--md-sys-color-secondary, #625B71);\n}\n\n:host(.md-step--disabled) .md-step__inner { cursor: not-allowed; }\n:host(.md-step--disabled) .md-step__indicator { opacity: 0.38; }\n:host(.md-step--disabled) md-ripple,\n:host(.md-step--disabled) .md-step__state-layer { display: none; }\n\n/* ==========================================================\n   3. BUBBLE + DOT\n   ========================================================== */\n.md-step__bubble {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--_size);\n  block-size: var(--_size);\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  background-color: var(--_color);\n  color: var(--_text);\n  font-family: var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);\n  font-size: var(--md-sys-typescale-label-large-font-size, 14px);\n  font-weight: var(--md-sys-typescale-label-large-font-weight, 500);\n  line-height: var(--md-sys-typescale-label-large-line-height, 20px);\n  flex-shrink: 0;\n  /* Spatial spring for movement; effects spring for paint. */\n  transition:\n    background-color var(--_state-duration) var(--_state-easing),\n    color var(--_state-duration) var(--_state-easing),\n    transform var(--_spring-duration) var(--_spring-easing),\n    box-shadow var(--_spring-duration) var(--_spring-easing);\n}\n\n.md-step__bubble .material-symbols-outlined {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-size: calc(var(--_size) * 0.56);\n  line-height: 1;\n  font-weight: normal;\n  font-style: normal;\n  letter-spacing: normal;\n  text-transform: none;\n  white-space: nowrap;\n  direction: ltr;\n  -webkit-font-smoothing: antialiased;\n  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;\n}\n:host(.md-step--active) .md-step__bubble .material-symbols-outlined,\n:host(.md-step--completed) .md-step__bubble .material-symbols-outlined,\n:host(.md-step--error) .md-step__bubble .material-symbols-outlined {\n  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;\n}\n\n/* Scale-in the glyph when it appears (check / edit / error). */\n@keyframes md-step-glyph-in {\n  0% { transform: scale(0); opacity: 0; }\n  60% { transform: scale(1.18); opacity: 1; }\n  100% { transform: scale(1); opacity: 1; }\n}\n:host(.md-step--completed) .md-step__bubble .material-symbols-outlined,\n:host(.md-step--error) .md-step__bubble .material-symbols-outlined {\n  animation: md-step-glyph-in var(--_spring-duration) var(--_spring-easing) both;\n}\n\n/* Active: spring up (stays circular) + a single soft halo. No elevation drop\n   shadow — its grey key/ambient layers stacked with the halo read as several\n   concentric grey rings around the bubble. */\n:host(.md-step--active) .md-step__bubble {\n  background-color: var(--_active-color);\n  color: var(--_active-text);\n  transform: scale(1.12);\n  box-shadow: 0 0 0 var(--_active-halo-size) color-mix(in srgb, var(--_active-halo) 14%, transparent);\n}\n:host(.md-step--completed) .md-step__bubble {\n  background-color: var(--_completed-color);\n  color: var(--_completed-text);\n}\n:host(.md-step--error) .md-step__bubble {\n  background-color: var(--_error-color);\n  color: var(--_error-text);\n  animation: md-step-error-pulse var(--md-sys-motion-duration-medium2, 300ms) var(--_state-easing) both;\n}\n@keyframes md-step-error-pulse {\n  0% { transform: scale(1); }\n  40% { transform: scale(1.08); }\n  100% { transform: scale(1); }\n}\n\n.md-step__dot {\n  display: inline-block;\n  inline-size: var(--_indicator-h);\n  block-size: var(--_indicator-h);\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  background-color: var(--_color);\n  flex-shrink: 0;\n  transition:\n    background-color var(--_state-duration) var(--_state-easing),\n    box-shadow var(--_spring-duration) var(--_spring-easing),\n    transform var(--_spring-duration) var(--_spring-easing);\n}\n/* Active dot springs up but stays a circle — same pattern as the numbered\n   bubble (scale, not shape-morph). */\n:host(.md-step--active) .md-step__dot {\n  background-color: var(--_active-color);\n  transform: scale(1.4);\n  box-shadow: 0 0 0 var(--_active-halo-size) color-mix(in srgb, var(--_active-halo) 18%, transparent);\n}\n:host(.md-step--completed) .md-step__dot { background-color: var(--_completed-color); }\n:host(.md-step--error) .md-step__dot { background-color: var(--_error-color); }\n\n/* ==========================================================\n   4. TEXT — label, optional caption, supporting / error text\n   ========================================================== */\n.md-step__text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-inline-size: 0;\n}\n:host(.md-step--horizontal) .md-step__text {\n  align-items: center;\n  text-align: center;\n  max-inline-size: 100%;\n}\n\n.md-step__label {\n  color: var(--_label-color);\n  font-family: var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);\n  font-size: max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-label-large-font-weight, 500);\n  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n  transition:\n    color var(--_state-duration) var(--_state-easing),\n    font-variation-settings var(--_state-duration) var(--_state-easing);\n}\n:host(.md-step--horizontal) .md-step__label {\n  white-space: normal;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n:host(.md-step--active) .md-step__label {\n  color: var(--_label-active-color);\n  font-weight: 600;\n  font-variation-settings: 'wght' 600;\n}\n:host(.md-step--error) .md-step__label { color: var(--_error-color); }\n:host(.md-step--disabled) .md-step__text { opacity: 0.38; }\n\n.md-step__optional,\n.md-step__description {\n  color: var(--_description-color);\n  font-family: var(--md-sys-typescale-body-small-font-family, Roboto, sans-serif);\n  font-size: max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-body-small-font-weight, 400);\n  line-height: max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n}\n.md-step__optional { font-style: italic; }\n:host(.md-step--error) .md-step__description { color: var(--_error-color); }\n\n/* ==========================================================\n   5. CONNECTORS — expressive determinate-progress styling: a rounded 4px\n   track whose fill sweeps linearly toward the next step.\n   ========================================================== */\n.md-step__connector {\n  position: relative;\n  flex: 1;\n  align-self: center;\n  background-color: var(--_connector);\n  overflow: hidden;\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n}\n.md-step__connector::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background-color: var(--_connector-filled);\n  border-radius: inherit;\n  transform-origin: left center;\n  transform: scaleX(0);\n  transition: transform var(--_connector-duration) var(--_connector-easing);\n}\n.md-step__connector--filled::after { transform: scaleX(1); }\n\n:host([dir=\"rtl\"]) .md-step__connector::after,\n:host-context([dir=\"rtl\"]) .md-step__connector::after { transform-origin: right center; }\n\n/* Horizontal: ONE connector per gap, spanning from this indicator's edge to\n   the NEXT indicator's edge (overflowing into the next step's box). A single\n   element means the fill sweeps continuously across the whole gap — not two\n   half segments meeting at the midpoint. Pinned to the indicator's fixed\n   centre line (sized off --_indicator-h so the dot variant aligns too), so it\n   stays put regardless of label height. */\n:host(.md-step--horizontal) .md-step__connector--trailing {\n  position: absolute;\n  inset-block-start: calc(var(--_indicator-pad) + var(--_indicator-ring) + var(--_indicator-h) / 2);\n  transform: translateY(-50%);\n  block-size: var(--_connector-thickness);\n  inset-inline-start: calc(50% + var(--_indicator-h) / 2 + var(--_connector-gap));\n  inline-size: calc(100% - var(--_indicator-h) - 2 * var(--_connector-gap));\n  flex: none;\n  align-self: auto;\n  z-index: 0;\n}\n\n/* Vertical rail — ONE rounded connector per gap, exactly like the horizontal\n   connector: same rounded caps and same --_connector-gap clearance around the\n   indicators. A single element per gap (no leading/trailing halves) means no\n   mid-gap junction and no stray cap nub, and the uniform gap clears the active\n   bubble's scaled halo on both sides regardless of which step is active. The\n   span is pinned to the bubble centre (a FIXED `ring + h/2` from the box top),\n   never a percentage of the box, so a tall (active) content step doesn't\n   stretch the line through its content: the trailing runs from `gap` below THIS\n   bubble to `gap` above the NEXT one (crossing the box boundary via the\n   negative block-end). The half-thickness offset centres the rail without\n   transforms, so RTL mirrors purely via the logical inset. */\n:host(.md-step--vertical) .md-step__connector {\n  position: absolute;\n  flex: none;\n  align-self: auto;\n  z-index: 0; /* stays behind the bubble (the inner is z-index: 1) */\n  inline-size: var(--_connector-thickness);\n  inset-inline-start: calc(8px + var(--_indicator-ring) + (var(--_indicator-h) - var(--_connector-thickness)) / 2);\n}\n:host(.md-step--vertical) .md-step__connector--leading { display: none; }\n:host(.md-step--vertical) .md-step__connector--trailing {\n  inset-block-start: calc(var(--_indicator-ring) + var(--_indicator-h) + var(--_connector-gap));\n  inset-block-end: calc(var(--_connector-gap) - var(--_indicator-ring));\n}\n:host(.md-step--vertical) .md-step__connector::after {\n  transform-origin: center top;\n  transform: scaleY(0);\n}\n:host(.md-step--vertical) .md-step__connector--filled::after { transform: scaleY(1); }\n\n/* ==========================================================\n   6. VERTICAL CONTENT PANEL + ACTIONS — spring expand / accelerate collapse\n   via the modern grid-rows 0fr↔1fr height trick (same pattern as\n   md-accordion-item): no measurement JS, RTL-safe, reduced-motion safe.\n   Closed panels stay in the tree (so closing animates too) but flip to\n   visibility:hidden after the collapse, leaving the a11y tree + tab order.\n   ========================================================== */\n.md-step__content {\n  flex: 1 1 100%;\n  display: grid;\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n  /* Aligns the panel under the label: the leading 8px matches the vertical\n     inner's padding-inline-start (positional — kept literal in lockstep with the\n     connector inset), and the trailing gap mirrors the inner's gap token so the\n     indent follows global density. */\n  margin-inline-start: calc(8px + var(--_indicator-h) + 2 * var(--_indicator-ring) + var(--md-sys-spacing-gap-md, 12px));\n  color: var(--md-sys-color-on-surface, #1C1B1F);\n  transition:\n    grid-template-rows var(--_collapse-duration) var(--_collapse-easing),\n    opacity var(--_collapse-duration) var(--_collapse-easing),\n    visibility 0s linear var(--_collapse-duration);\n}\n.md-step__content--open {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n  transition:\n    grid-template-rows var(--_expand-duration) var(--_expand-easing),\n    opacity var(--_state-duration) var(--_state-easing),\n    visibility 0s;\n}\n.md-step__content-sizer {\n  /* The grid item must have NO block padding/border, or its intrinsic\n     min-size defeats the 0fr collapse — spacing lives on the inner wrapper. */\n  min-block-size: 0;\n  overflow: hidden;\n}\n.md-step__content-inner {\n  /* On-grid panel padding tracks global density (4/16 = inset-xs/lg). */\n  padding-block-start: var(--md-sys-spacing-inset-xs, 4px);\n  padding-block-end: var(--md-sys-spacing-inset-lg, 16px);\n}\n\n/* Lazy panel — only the active step's panel is mounted, so there is no collapse\n   to animate: drop the grid-rows trick and just fade+slide it in on mount. */\n.md-step__content--lazy {\n  display: block;\n  grid-template-rows: none;\n  opacity: 1;\n  visibility: visible;\n  transition: none;\n  animation: md-step-content-enter var(--_expand-duration) var(--_expand-easing) both;\n}\n.md-step__content--lazy .md-step__content-sizer { overflow: visible; }\n@keyframes md-step-content-enter {\n  from { opacity: 0; transform: translateY(-6px); }\n}\n.md-step__actions {\n  display: flex;\n  gap: var(--md-sys-spacing-gap-sm, 8px);\n  margin-block-start: var(--md-sys-spacing-gap-lg, 16px);\n}\n\n/* ==========================================================\n   7. COMPACT / RESPONSIVE (horizontal)\n   ========================================================== */\n@media (max-width: 599px) {\n  :host(.md-step--horizontal) {\n    --_size: var(--md-step-indicator-size, 28px);\n    --_connector-gap: 8px;\n  }\n  :host(.md-step--horizontal) .md-step__inner { gap: var(--md-sys-spacing-gap-xs, 4px); padding-inline: var(--md-sys-spacing-inset-xs, 4px); }\n  :host(.md-step--horizontal) .md-step__label {\n    font-size: var(--md-sys-typescale-label-medium-font-size, 12px);\n    line-height: var(--md-sys-typescale-label-medium-line-height, 16px);\n  }\n  :host(.md-step--horizontal) .md-step__optional,\n  :host(.md-step--horizontal) .md-step__description { display: none; }\n}\n\n/* ==========================================================\n   8. REDUCED MOTION\n   ========================================================== */\n@media (prefers-reduced-motion: reduce) {\n  :host { animation: none !important; }\n  .md-step__bubble,\n  .md-step__dot,\n  .md-step__connector,\n  .md-step__connector::after,\n  .md-step__state-layer,\n  .md-step__label,\n  .md-step__content,\n  .md-step__bubble .material-symbols-outlined {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0s !important;\n    animation: none !important;\n  }\n  :host(.md-step--active) .md-step__bubble,\n  :host(.md-step--active) .md-step__dot {\n    transform: none;\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--_active-halo) 25%, transparent);\n  }\n}\n\n/* ==========================================================\n   9. FORCED COLORS\n   ========================================================== */\n@media (forced-colors: active) {\n  .md-step__bubble,\n  .md-step__dot {\n    background-color: Canvas;\n    border: 2px solid CanvasText;\n    forced-color-adjust: none;\n  }\n  :host(.md-step--active) .md-step__bubble,\n  :host(.md-step--completed) .md-step__bubble { background-color: Highlight; color: HighlightText; }\n  /* The rail is pure background paint — without this it vanishes in WHC. */\n  .md-step__connector {\n    background-color: GrayText;\n    forced-color-adjust: none;\n  }\n  .md-step__connector::after { background-color: Highlight; }\n  .md-step__state-layer { display: none; }\n  .md-step__inner:focus-visible .md-step__indicator { box-shadow: 0 0 0 3px Highlight; }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n} from '@stencil/core';\nimport { triggerRipple } from '../../utils/ripple';\n\n/**\n * `md-step` — one step inside an `<md-stepper>`.\n *\n * Layout, position and i18n are pushed down from the parent stepper via\n * `data-*` attributes, so a step is almost always authored declaratively:\n *\n * ```html\n * <md-stepper active=\"1\">\n *   <md-step label=\"Account\" completed></md-step>\n *   <md-step label=\"Shipping\" description=\"Address & method\"></md-step>\n *   <md-step label=\"Payment\" optional></md-step>\n * </md-stepper>\n * ```\n *\n * @slot - Step content. Rendered as an expanding panel in **vertical**\n * orientation, and — since the horizontal per-step panel mode — as a\n * full-width panel under the step row in **horizontal** orientation too. The\n * parent opts the row in automatically the moment any step has content; a\n * horizontal stepper whose steps are all empty is unaffected and keeps taking\n * one shared panel through `md-stepper`'s own `content` slot.\n *\n * @part inner             - The clickable step header (indicator + text).\n * @part indicator         - Circular wrapper around the bubble/dot (hover/ripple).\n * @part bubble            - Numbered / icon indicator.\n * @part dot               - Dot indicator (dot variant).\n * @part state-layer       - Hover / focus / press overlay inside the indicator.\n * @part text              - Label + supporting text wrapper.\n * @part label             - Step label.\n * @part optional          - The \"Optional\" caption.\n * @part description       - Supporting / helper text (or error / optional caption).\n * @part connector         - Connector line (leading or trailing).\n * @part connector-leading - The rail segment above the bubble (vertical).\n * @part connector-trailing- The rail/line segment after the bubble.\n * @part content           - Vertical content panel.\n * @part actions           - Back / Continue action row in the content panel.\n */\n@Component({\n  tag: 'md-step',\n  styleUrl: 'md-step.css',\n  shadow: true,\n})\nexport class MdStep {\n  @Element() el!: HTMLElement;\n\n  /** Step caption (\"Account info\", \"Shipping\", …). */\n  @Prop() label: string = '';\n\n  /** Supporting text beneath the label. */\n  @Prop() description: string = '';\n\n  /** Whether this step is completed (shows a check / fills its connector). */\n  @Prop({ reflect: true }) completed: boolean = false;\n\n  /** Whether this step is the active one. Usually managed by the parent. */\n  @Prop({ mutable: true, reflect: true }) active: boolean = false;\n\n  /** Whether this step is in an error state. */\n  @Prop({ reflect: true }) error: boolean = false;\n\n  /** Error message shown beneath the label (overrides `description` on error). */\n  @Prop({ attribute: 'error-text' }) errorText: string = '';\n\n  /** Manually disable the step (parent's `mode=\"linear\"` also gates reachability). */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Mark the step optional — shows an \"Optional\" caption and may be skipped. */\n  @Prop({ reflect: true }) optional: boolean = false;\n\n  /**\n   * Editable: a completed step shows an edit (pencil) affordance, and — with\n   * `auto-complete` on — revisiting it preserves downstream completion\n   * (review/edit in place). Revisiting a non-editable step restarts progress\n   * from there.\n   */\n  @Prop({ reflect: true }) editable: boolean = false;\n\n  /** Override the indicator glyph (Material Symbols name), e.g. \"lock\". */\n  @Prop() icon: string = '';\n\n  /** Glyph shown when completed (Material Symbols name). */\n  @Prop({ attribute: 'completed-icon' }) completedIcon: string = 'check';\n\n  /** Glyph shown when in error (Material Symbols name). */\n  @Prop({ attribute: 'error-icon' }) errorIcon: string = 'priority_high';\n\n  /** Full override for the announced accessible name (i18n escape hatch). */\n  @Prop({ attribute: 'accessible-name' }) accessibleName?: string;\n\n  /** Hide the built-in Back / Continue actions in the vertical content panel. */\n  @Prop({ attribute: 'hide-actions', reflect: true }) hideActions: 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  /** Bubbled to the parent stepper, which decides whether the move is allowed.\n   *  Internal coordination event — consumed (and stopped) by `md-stepper`. */\n  @Event({ bubbles: true, composed: false }) mdStepClick: EventEmitter<{ index: number }>;\n\n  /** Continue pressed in this step's content panel. Consumed by `md-stepper`. */\n  @Event({ bubbles: true, composed: false }) mdStepNext: EventEmitter<{ index: number }>;\n\n  /** Back pressed in this step's content panel. Consumed by `md-stepper`. */\n  @Event({ bubbles: true, composed: false }) mdStepBack: EventEmitter<{ index: number }>;\n\n  @State() private hasSlottedContent = false;\n\n  private contentObserver?: MutationObserver;\n\n  // ─── Parent-pushed layout / i18n (read from data-* attributes) ────────────\n  private attr(name: string, fallback = ''): string {\n    const v = this.el.getAttribute(name);\n    return v != null && v !== '' ? v : fallback;\n  }\n  private get index(): number { return Number(this.attr('data-index', '0')); }\n  private get total(): number { return Number(this.attr('data-total', '0')); }\n  private get activeIndex(): number { return Number(this.attr('data-active', '0')); }\n  private get position(): 'first' | 'middle' | 'last' {\n    return (this.el.getAttribute('data-position') as 'first' | 'middle' | 'last') ?? 'first';\n  }\n  private get orientation(): 'horizontal' | 'vertical' {\n    return (this.el.getAttribute('data-orientation') as 'horizontal' | 'vertical') ?? 'horizontal';\n  }\n  private get indicatorKind(): 'numbered' | 'dot' {\n    return (this.el.getAttribute('data-indicator') as 'numbered' | 'dot') ?? 'numbered';\n  }\n  private get linearMode(): boolean { return this.el.getAttribute('data-mode') === 'linear'; }\n\n  connectedCallback() {\n    this.computeSlottedContent();\n    // Slot-based `slotchange` can't be used here: the default slot is only\n    // rendered while the panel exists, so content appended when there is no\n    // panel would never re-trigger it. Watch the light DOM instead.\n    if (typeof MutationObserver !== 'undefined') {\n      this.contentObserver = new MutationObserver(() => this.computeSlottedContent());\n      this.contentObserver.observe(this.el, { childList: true });\n    }\n  }\n\n  disconnectedCallback() {\n    this.contentObserver?.disconnect();\n    this.contentObserver = undefined;\n  }\n\n  private computeSlottedContent() {\n    // Whitespace-only text nodes (pretty-printed markup) are not content.\n    this.hasSlottedContent = Array.from(this.el.childNodes).some(\n      (n) =>\n        n.nodeType === Node.ELEMENT_NODE ||\n        (n.nodeType === Node.TEXT_NODE && (n.textContent ?? '').trim() !== ''),\n    );\n  }\n\n  // ─── Reachability (linear gating) ─────────────────────────────────────────\n  private stepSiblings(): HTMLMdStepElement[] {\n    const parent = this.el.parentElement;\n    if (!parent) return [];\n    return (Array.from(parent.children) as HTMLElement[]).filter(\n      (c) => c.tagName.toLowerCase() === 'md-step',\n    ) as HTMLMdStepElement[];\n  }\n\n  /** Every prior step completed — or optional, which may be skipped. Mirrors\n   *  the parent stepper's `canNavigateTo` so header affordance and actual\n   *  navigability never disagree. */\n  private allPriorPassable(): boolean {\n    const siblings = this.stepSiblings();\n    for (let i = 0; i < this.index; i++) {\n      const s = siblings[i];\n      if (!s?.completed && !s?.optional) return false;\n    }\n    return true;\n  }\n\n  /** Can the user navigate to this step right now? */\n  private get reachable(): boolean {\n    if (!this.linearMode) return true;\n    return this.index <= this.activeIndex || this.completed || this.allPriorPassable();\n  }\n\n  private get effectivelyDisabled(): boolean {\n    return this.disabled || !this.reachable;\n  }\n\n  // ─── Handlers ─────────────────────────────────────────────────────────────\n  private handleClick = (e: Event) => {\n    if (this.effectivelyDisabled) return;\n    e.preventDefault();\n    this.mdStepClick.emit({ index: this.index });\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.effectivelyDisabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      // Shared library helper — md-ripple only listens to pointerdown, so\n      // keyboard activations trigger a centered wave the same way every other\n      // interactive component does (radio, checkbox, icon-button, …).\n      triggerRipple(this.el);\n      this.mdStepClick.emit({ index: this.index });\n    }\n  };\n\n  private emitNext = () => this.mdStepNext.emit({ index: this.index });\n  private emitBack = () => this.mdStepBack.emit({ index: this.index });\n\n  /** The built-in action buttons are internal chrome — their composed\n   *  `mdClick` retargets to this host; stop it there so it never masquerades\n   *  as an app-level button event. Slotted user buttons (target ≠ host) are\n   *  left alone. */\n  @Listen('mdClick')\n  onInternalMdClick(e: Event) {\n    if (e.target === this.el) e.stopPropagation();\n  }\n\n  // ─── Render helpers ───────────────────────────────────────────────────────\n  private glyph(name: string) {\n    return (\n      <span class=\"md-step__bubble\" part=\"bubble\" aria-hidden=\"true\">\n        <span class=\"material-symbols-outlined\">{name}</span>\n      </span>\n    );\n  }\n\n  private renderIndicator() {\n    if (this.indicatorKind === 'dot') {\n      return <span class=\"md-step__dot\" part=\"dot\" aria-hidden=\"true\"></span>;\n    }\n    if (this.error) return this.glyph(this.errorIcon);\n    if (this.icon) return this.glyph(this.icon);\n    if (this.completed) return this.glyph(this.editable ? 'edit' : this.completedIcon);\n    return (\n      <span class=\"md-step__bubble\" part=\"bubble\" aria-hidden=\"true\">\n        {this.index + 1}\n      </span>\n    );\n  }\n\n  private composeA11yLabel(): string {\n    if (this.accessibleName?.trim()) return this.accessibleName;\n    const w = (n: string, f: string) => this.attr(n, f);\n    let s = `${w('data-step-word', 'Step')} ${this.index + 1} ${w('data-of-word', 'of')} ${this.total}`;\n    if (this.label) s += `: ${this.label}`;\n    if (this.optional) s += `, ${w('data-optional-word', 'optional')}`;\n    if (this.completed) s += `, ${w('data-completed-word', 'completed')}`;\n    if (this.active) s += `, ${w('data-current-word', 'current')}`;\n    if (this.error) s += `, ${w('data-error-word', 'error')}${this.errorText ? `: ${this.errorText}` : ''}`;\n    return s;\n  }\n\n  render() {\n    const isFirst = this.position === 'first';\n    const isLast = this.position === 'last';\n    const isVertical = this.orientation === 'vertical';\n    const disabled = this.effectivelyDisabled;\n    const supporting = this.error && this.errorText ? this.errorText : this.description;\n    const optionalCaption = this.optional ? this.attr('data-optional-word', 'Optional') : '';\n    // Built-in Back/Continue: on unless the stepper disabled nav (data-nav)\n    // or this step opted out (hide-actions).\n    const navActions = this.attr('data-nav', 'true') !== 'false' && !this.hideActions;\n    // Loading / continue-gating pushed down from the parent stepper.\n    const loading = this.attr('data-loading', 'false') === 'true';\n    const nextDisabled = this.attr('data-next-disabled', 'false') === 'true';\n    // Lazy: only the active step's panel is mounted (no collapse animation).\n    const lazy = this.attr('data-lazy', 'false') === 'true';\n    // Vertical always panels (built-in Back/Continue live there too). Horizontal\n    // panels only when the parent opted the row into the grid AND this step has\n    // its own content — the horizontal nav bar is the stepper's, not the step's,\n    // so navActions alone must never conjure a panel here.\n    const panelMode = this.attr('data-panel-mode', 'shared');\n    const hasPanel = isVertical\n      ? this.hasSlottedContent || navActions\n      : panelMode === 'step' && this.hasSlottedContent;\n    const renderPanel = hasPanel && (!lazy || this.active);\n\n    // Header = [leading connector?, inner, trailing connector?]. In the\n    // horizontal panel mode the host goes `display: contents`, so these three\n    // must be wrapped in ONE box to stay a single grid item (the wrapper\n    // inherits the flex properties the host used to carry). Every other mode\n    // renders them bare, exactly as before — no extra box, no layout change.\n    const headerNodes = [\n      !isFirst && isVertical && (\n        <span\n          class={{\n            'md-step__connector': true,\n            'md-step__connector--leading': true,\n            'md-step__connector--filled': this.index <= this.activeIndex,\n          }}\n          part=\"connector connector-leading\"\n          aria-hidden=\"true\"\n        ></span>\n      ),\n      <div\n        class=\"md-step__inner\"\n        part=\"inner\"\n        tabindex={disabled ? -1 : 0}\n        role=\"button\"\n        aria-label={this.composeA11yLabel()}\n        aria-disabled={disabled ? 'true' : undefined}\n        aria-current={this.active ? 'step' : undefined}\n        aria-expanded={hasPanel ? (this.active ? 'true' : 'false') : undefined}\n        aria-controls={renderPanel ? 'md-step-panel' : undefined}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        <span class=\"md-step__indicator\" part=\"indicator\">\n          <md-ripple disabled={disabled}></md-ripple>\n          <span class=\"md-step__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n          {this.renderIndicator()}\n        </span>\n\n        {(this.label || supporting || optionalCaption) && (\n          <span class=\"md-step__text\" part=\"text\">\n            {this.label && <span class=\"md-step__label\" part=\"label\">{this.label}</span>}\n            {optionalCaption && (\n              <span class=\"md-step__optional\" part=\"optional\">{optionalCaption}</span>\n            )}\n            {supporting && (\n              <span class=\"md-step__description\" part=\"description\">{supporting}</span>\n            )}\n          </span>\n        )}\n      </div>,\n      !isLast && (\n        <span\n          class={{\n            'md-step__connector': true,\n            'md-step__connector--trailing': true,\n            'md-step__connector--filled': this.index < this.activeIndex,\n          }}\n          part=\"connector connector-trailing\"\n          aria-hidden=\"true\"\n        ></span>\n      ),\n    ];\n    const panelStep = !isVertical && hasPanel;\n\n    return (\n      <Host\n        class={{\n          'md-step': true,\n          [`md-step--${this.orientation}`]: true,\n          [`md-step--indicator-${this.indicatorKind}`]: true,\n          'md-step--active': this.active,\n          'md-step--completed': this.completed,\n          'md-step--error': this.error,\n          'md-step--optional': this.optional,\n          'md-step--editable': this.editable,\n          'md-step--disabled': disabled,\n          'md-step--first': isFirst,\n          'md-step--last': isLast,\n          'md-step--panel-step': !isVertical && hasPanel,\n        }}\n        role=\"listitem\"\n        aria-current={this.active ? 'step' : undefined}\n        aria-disabled={disabled ? 'true' : undefined}\n      >\n        {panelStep ? <div class=\"md-step__header\">{headerNodes}</div> : headerNodes}\n\n        {/* Vertical content panel — always in the tree so both expand AND\n            collapse animate (grid-rows 0fr↔1fr spring); closed panels are\n            visibility:hidden, keeping them out of the a11y tree + tab order. */}\n        {renderPanel && (\n          <div\n            id=\"md-step-panel\"\n            class={{\n              'md-step__content': true,\n              'md-step__content--open': this.active,\n              'md-step__content--lazy': lazy,\n            }}\n            part=\"content\"\n            role=\"region\"\n            aria-label={this.label || this.composeA11yLabel()}\n          >\n            <div class=\"md-step__content-sizer\">\n              <div class=\"md-step__content-inner\">\n                <slot></slot>\n                {navActions && isVertical && (\n                  <div class=\"md-step__actions\" part=\"actions\">\n                    <md-button variant=\"text\" size=\"sm\" disabled={isFirst || loading} onClick={this.emitBack}>\n                      {this.attr('data-back-label', 'Back')}\n                    </md-button>\n                    <md-button\n                      variant=\"filled\"\n                      size=\"sm\"\n                      loading={loading}\n                      disabled={nextDisabled || loading}\n                      onClick={this.emitNext}\n                    >\n                      {isLast ? this.attr('data-finish-label', 'Finish') : this.attr('data-next-label', 'Continue')}\n                    </md-button>\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{p as t,H as e,c as i,f as s,h as a,d as n,t as o}from"./p-bSpXNc5J.js";import{d as r}from"./p-BZakoRau.js";import{d}from"./p-C3vB0Hd9.js";const h=()=>`:host{display:block;inline-size:100%;box-sizing:border-box;font-family:var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);color:var(--md-sys-color-on-surface, #1C1B1F)}.md-stepper__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.md-stepper__list{list-style:none;margin:0;padding:0;display:flex}:host(.md-stepper--horizontal[data-panel-mode='step']) .md-stepper__list{display:grid;grid-template-columns:repeat(var(--md-stepper-step-count, 1), 1fr);align-items:start}:host(.md-stepper--horizontal) .md-stepper__list{flex-direction:row;align-items:flex-start}:host(.md-stepper--vertical) .md-stepper__list{flex-direction:column;gap:var(--md-stepper-gap, 0)}.md-stepper__content ::slotted(*){display:block;margin-block-start:var(--md-sys-spacing-inset-xl, 24px)}.md-stepper__nav{display:flex;gap:var(--md-sys-spacing-gap-sm, 8px);justify-content:flex-end;margin-block-start:max(4px, calc(20px + var(--md-sys-density-scale, 0) * 2px))}:host(.md-stepper--mobile) .md-stepper__list{display:none}.md-stepper__mobile{display:flex;align-items:center;gap:var(--md-sys-spacing-gap-sm, 8px);margin-block-start:var(--md-sys-spacing-gap-lg, 16px)}.md-stepper__mobile-progress{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--md-sys-spacing-gap-sm, 8px);min-inline-size:0}.md-stepper__mobile-text{font-family:var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-large-font-size, 14px);font-weight:var(--md-sys-typescale-label-large-font-weight, 500);line-height:var(--md-sys-typescale-label-large-line-height, 20px);color:var(--md-sys-color-on-surface-variant, #49454F)}.md-stepper__mobile-dot{inline-size:8px;block-size:8px;border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--md-step-connector-color, var(--md-sys-color-outline, #79747E));transition: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)),     transform var(--md-sys-motion-spring-spatial-default-duration, 500ms) var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00))}.md-stepper__mobile-dot.is-done{background-color:var(--md-step-active-color, var(--md-sys-color-primary, #6750A4))}.md-stepper__mobile-dot.is-active{background-color:var(--md-step-active-color, var(--md-sys-color-primary, #6750A4));transform:scale(1.5)}@media (prefers-reduced-motion: reduce){.md-stepper__mobile-dot{transition-duration:0.01ms}.md-stepper__mobile-dot.is-active{transform:none}}@media (forced-colors: active){.md-stepper__mobile-dot{background-color:GrayText;forced-color-adjust:none}.md-stepper__mobile-dot.is-done,.md-stepper__mobile-dot.is-active{background-color:Highlight}}: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 e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdBeforeChange=i(this,"mdBeforeChange",7);this.mdStepChange=i(this,"mdStepChange",7);this.mdComplete=i(this,"mdComplete",7);this.orientation="horizontal";this.indicator="numbered";this.variant="default";this.mode="linear";this.active=0;this.autoComplete=true;this.nav=true;this.nextDisabled=false;this.loading=false;this.lazy=false;this.label="Progress";this.stepWord="Step";this.ofWord="of";this.completedWord="completed";this.currentWord="current";this.errorWord="error";this.optionalWord="Optional";this.nextLabel="Continue";this.backLabel="Back";this.finishLabel="Finish";this.density=0;this.stepCount=0;this.liveMessage="";this.errorMessage="";this.steps=[];this.lastActive=0;this.handleSlotChange=()=>{this.collectSteps();const t=this.clampToValidStep(this.active);if(t!==this.active){this.active=t}else{this.syncSteps()}};this.handleFooterBack=async()=>{await this.prev();if(this.active===0)this.focusActiveStep()}}componentWillLoad(){this.collectSteps();this.active=this.clampToValidStep(this.active);this.lastActive=this.active;this.syncSteps()}componentDidLoad(){this.syncSteps();this.observeStepState()}disconnectedCallback(){this.stepObserver?.disconnect();this.stepObserver=undefined}onActiveChange(t){this.collectSteps();const e=this.clampToValidStep(t);if(e!==t){this.active=e;return}const i=this.lastActive;if(e===i)return;this.lastActive=e;if(this.autoComplete){this.mutatingSelf((()=>{if(e>i){this.steps.forEach(((t,s)=>{if(s>=i&&s<e&&!t.disabled){t.completed=true;t.error=false}}))}else{const t=this.steps[e];if(!(t?.editable&&t?.completed)){this.steps.forEach(((t,i)=>{if(i>=e)t.completed=false}))}}}))}this.syncSteps();this.mdStepChange.emit({index:e,previous:i});this.announceStep(e)}onConfigChange(){this.syncSteps()}ownsStepEvent(t){const e=t.target;return!!e&&e.parentElement===this.el&&e.tagName.toLowerCase()==="md-step"}onStepClick(t){if(!this.ownsStepEvent(t))return;t.stopPropagation();const e=t.detail.index;if(e===this.active)return;if(this.canNavigateTo(e))this.commitChange(e)}async onStepNext(t){if(!this.ownsStepEvent(t))return;t.stopPropagation();const e=this.active;await this.next();if(this.active!==e)this.focusActiveStep()}async onStepBack(t){if(!this.ownsStepEvent(t))return;t.stopPropagation();const e=this.active;await this.prev();if(this.active!==e)this.focusActiveStep()}onInternalMdClick(t){if(t.target===this.el)t.stopPropagation()}async next(){this.collectSteps();if(this.steps.length===0)return;let t=this.active+1;while(t<this.steps.length&&this.steps[t].disabled)t++;if(t>=this.steps.length){const t=this.steps[this.active];if(this.autoComplete&&t&&!t.disabled){this.mutatingSelf((()=>{t.completed=true;t.error=false}))}this.syncSteps();this.mdComplete.emit();return}this.commitChange(t)}async prev(){this.collectSteps();let t=this.active-1;while(t>=0&&this.steps[t]?.disabled)t--;if(t<0)return;this.commitChange(t)}async goTo(t){this.collectSteps();const e=this.clampToValidStep(t);if(this.canNavigateTo(e))this.commitChange(e)}async reset(){this.collectSteps();this.mutatingSelf((()=>{this.steps.forEach((t=>{t.completed=false;t.error=false}))}));this.active=0;this.syncSteps()}commitChange(t){if(t===this.active)return false;const e=this.mdBeforeChange.emit({index:t,previous:this.active});if(e.defaultPrevented)return false;this.active=t;return true}observeStepState(){if(typeof MutationObserver==="undefined")return;this.stepObserver=new MutationObserver((t=>{let e=null;for(const i of t){if(i.attributeName==="error"){const t=i.target;if(t.error&&t.tagName.toLowerCase()==="md-step")e=t}}this.syncSteps();if(e)this.announceError(e)}));this.attachObserver()}attachObserver(){this.stepObserver?.observe(this.el,{subtree:true,attributes:true,attributeFilter:["completed","error","optional","disabled"]})}mutatingSelf(t){this.stepObserver?.disconnect();try{t()}finally{this.attachObserver()}}announceStep(t){const e=this.steps[t];if(!e)return;let i=`${this.stepWord} ${t+1} ${this.ofWord} ${this.stepCount}`;if(e.label)i+=`: ${e.label}`;if(e.optional)i+=`, ${this.optionalWord}`;if(e.completed)i+=`, ${this.completedWord}`;i+=`, ${this.currentWord}`;this.liveMessage=i}announceError(t){const e=this.steps.indexOf(t);let i=`${this.stepWord} ${e+1} ${this.ofWord} ${this.stepCount}`;if(t.label)i+=`: ${t.label}`;i+=`, ${this.errorWord}`;if(t.errorText)i+=`: ${t.errorText}`;this.errorMessage=i}canNavigateTo(t){this.collectSteps();const e=this.steps[t];if(!e||e.disabled)return false;if(this.mode!=="linear")return true;if(t<=this.active)return true;if(e.completed)return true;return this.steps.slice(0,t).every((t=>t.completed||t.optional))}clampToValidStep(t){if(this.steps.length===0)return 0;return Math.max(0,Math.min(this.steps.length-1,t|0))}collectSteps(){this.steps=Array.from(this.el.children).filter((t=>t.tagName.toLowerCase()==="md-step"))}focusActiveStep(){const t=this.steps[this.active];t?.shadowRoot?.querySelector(".md-step__inner")?.focus()}static hasOwnContent(t){return Array.from(t.childNodes).some((t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&(t.textContent??"").trim()!==""))}syncSteps(){this.collectSteps();const e=this.steps.length;this.stepCount=e;const i=this.orientation==="horizontal"&&this.steps.some((e=>t.hasOwnContent(e)))?"step":"shared";if(this.el.getAttribute("data-panel-mode")!==i){this.el.setAttribute("data-panel-mode",i)}this.el.style.setProperty("--md-stepper-step-count",String(e));this.steps.forEach(((t,a)=>{const n=(e,i)=>{if(t.getAttribute(e)!==i)t.setAttribute(e,i)};n("data-index",String(a));n("data-total",String(e));n("data-active",String(this.active));n("data-orientation",this.orientation);n("data-indicator",this.indicator);n("data-mode",this.mode);n("data-position",a===0?"first":a===e-1?"last":"middle");n("data-step-word",this.stepWord);n("data-of-word",this.ofWord);n("data-completed-word",this.completedWord);n("data-current-word",this.currentWord);n("data-error-word",this.errorWord);n("data-optional-word",this.optionalWord);n("data-next-label",this.nextLabel);n("data-back-label",this.backLabel);n("data-finish-label",this.finishLabel);n("data-nav",String(this.nav));n("data-loading",String(this.loading));n("data-next-disabled",String(this.nextDisabled));n("data-lazy",String(this.lazy));n("data-panel-mode",i);t.style.setProperty("--md-step-idx",String(a));const o=a===this.active;if(t.active!==o)t.active=o;s(t)}))}render(){const t=this.variant==="mobile";return a(n,{key:"f262d0d6456f196ef4939993ea94c145d25f709f",class:{"md-stepper":true,[`md-stepper--${this.orientation}`]:true,[`md-stepper--indicator-${this.indicator}`]:true,[`md-stepper--mode-${this.mode}`]:true,"md-stepper--mobile":t},role:"navigation","aria-label":this.label},a("div",{key:"1b5ac3b5db4bc01994fc90089527dada88dda4fc",class:"md-stepper__live","aria-live":"polite",role:"status"},this.liveMessage),a("div",{key:"51033869784248679172b2539f13d19de6d05e30",class:"md-stepper__live","aria-live":"assertive",role:"alert"},this.errorMessage),a("ol",{key:"534ad2c08f8b1be04cac9f25ba0dcbf0b0ac1003",class:"md-stepper__list",part:"list"},a("slot",{key:"3147ff529153becb54dc100e0e056fd7fbeda21e",onSlotchange:this.handleSlotChange})),a("div",{key:"9c24bf8efb543ba374cb5c2f288494adb96cf5ac",class:"md-stepper__content",part:"content"},a("slot",{key:"f7c966282165179aff377306a3de5f26c872f8ba",name:"content"})),this.nav&&!t&&this.orientation==="horizontal"&&this.stepCount>0&&a("div",{key:"db1e1f2b08f9814c3736a8a47b3d7b2858013e20",class:"md-stepper__nav",part:"nav"},a("md-button",{key:"c1fa1eff5aa71903f658a9e562dce6131629c266",variant:"text",size:"sm",disabled:this.active<=0||this.loading,onClick:this.handleFooterBack},this.backLabel),a("md-button",{key:"8ccf92329a8bf33bee88c41962ba126d11ff2ba7",variant:"filled",size:"sm",loading:this.loading,disabled:this.nextDisabled||this.loading,onClick:()=>this.next()},this.active>=this.stepCount-1?this.finishLabel:this.nextLabel)),this.nav&&t&&this.stepCount>0&&a("div",{key:"5c4680d09916f63df029de1578174ebddaeeb6f1",class:"md-stepper__mobile",part:"mobile-nav"},a("md-button",{key:"315e488fb091d6e44e6b15a7535c0005e77916fd",variant:"text",size:"sm",disabled:this.active<=0||this.loading,onClick:this.handleFooterBack},this.backLabel),a("div",{key:"9074d0df2e5144056403f2bc0d5ae8efab7c838e",class:"md-stepper__mobile-progress",part:"mobile-progress","aria-hidden":this.indicator==="dot"?"true":undefined},this.indicator==="dot"?this.steps.map(((t,e)=>a("span",{class:{"md-stepper__mobile-dot":true,"is-active":e===this.active,"is-done":e<this.active||!!t.completed}}))):a("span",{class:"md-stepper__mobile-text"},`${this.stepWord} ${this.active+1} ${this.ofWord} ${this.stepCount}`)),a("md-button",{key:"098af16e63e402e038201daf3e9448e9291d3dce",variant:"filled",size:"sm",loading:this.loading,disabled:this.nextDisabled||this.loading,onClick:()=>this.next()},this.active>=this.stepCount-1?this.finishLabel:this.nextLabel)))}get el(){return this}static get watchers(){return{active:[{onActiveChange:0}],orientation:[{onConfigChange:0}],indicator:[{onConfigChange:0}],mode:[{onConfigChange:0}],nav:[{onConfigChange:0}],variant:[{onConfigChange:0}],lazy:[{onConfigChange:0}],loading:[{onConfigChange:0}],nextDisabled:[{onConfigChange:0}],stepWord:[{onConfigChange:0}],ofWord:[{onConfigChange:0}],completedWord:[{onConfigChange:0}],currentWord:[{onConfigChange:0}],errorWord:[{onConfigChange:0}],optionalWord:[{onConfigChange:0}],nextLabel:[{onConfigChange:0}],backLabel:[{onConfigChange:0}],finishLabel:[{onConfigChange:0}]}}static get style(){return h()}},[257,"md-stepper",{orientation:[513],indicator:[513],variant:[513],mode:[513],active:[1538],autoComplete:[4,"auto-complete"],nav:[4],nextDisabled:[4,"next-disabled"],loading:[4],lazy:[4],label:[1],stepWord:[1,"step-word"],ofWord:[1,"of-word"],completedWord:[1,"completed-word"],currentWord:[1,"current-word"],errorWord:[1,"error-word"],optionalWord:[1,"optional-word"],nextLabel:[1,"next-label"],backLabel:[1,"back-label"],finishLabel:[1,"finish-label"],density:[514],stepCount:[32],liveMessage:[32],errorMessage:[32],next:[64],prev:[64],goTo:[64],reset:[64]},[[0,"mdStepClick","onStepClick"],[0,"mdStepNext","onStepNext"],[0,"mdStepBack","onStepBack"],[0,"mdClick","onInternalMdClick"]],{active:[{onActiveChange:0}],orientation:[{onConfigChange:0}],indicator:[{onConfigChange:0}],mode:[{onConfigChange:0}],nav:[{onConfigChange:0}],variant:[{onConfigChange:0}],lazy:[{onConfigChange:0}],loading:[{onConfigChange:0}],nextDisabled:[{onConfigChange:0}],stepWord:[{onConfigChange:0}],ofWord:[{onConfigChange:0}],completedWord:[{onConfigChange:0}],currentWord:[{onConfigChange:0}],errorWord:[{onConfigChange:0}],optionalWord:[{onConfigChange:0}],nextLabel:[{onConfigChange:0}],backLabel:[{onConfigChange:0}],finishLabel:[{onConfigChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const t=["md-stepper","md-button","md-ripple"];t.forEach((t=>{switch(t){case"md-stepper":if(!customElements.get(o(t))){customElements.define(o(t),l)}break;case"md-button":if(!customElements.get(o(t))){r()}break;case"md-ripple":if(!customElements.get(o(t))){d()}break}}))}c();const p=l;const f=c;export{p as MdStepper,f as defineCustomElement};
+//# sourceMappingURL=md-stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["mdStepperCss","MdStepper","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","orientation","indicator","variant","mode","active","autoComplete","nav","nextDisabled","loading","lazy","label","stepWord","ofWord","completedWord","currentWord","errorWord","optionalWord","nextLabel","backLabel","finishLabel","density","stepCount","liveMessage","errorMessage","steps","lastActive","handleSlotChange","collectSteps","clamped","clampToValidStep","syncSteps","handleFooterBack","async","prev","focusActiveStep","componentWillLoad","componentDidLoad","observeStepState","disconnectedCallback","stepObserver","disconnect","undefined","onActiveChange","newVal","previous","mutatingSelf","forEach","s","i","disabled","completed","error","target","editable","mdStepChange","emit","index","announceStep","onConfigChange","ownsStepEvent","e","t","parentElement","el","tagName","toLowerCase","onStepClick","stopPropagation","detail","canNavigateTo","commitChange","onStepNext","before","next","onStepBack","onInternalMdClick","length","current","mdComplete","goTo","reset","ev","mdBeforeChange","defaultPrevented","MutationObserver","records","entered","r","attributeName","announceError","attachObserver","observe","subtree","attributes","attributeFilter","fn","step","msg","optional","indexOf","errorText","slice","every","Math","max","min","Array","from","children","filter","c","shadowRoot","querySelector","focus","hasOwnContent","childNodes","some","n","nodeType","Node","ELEMENT_NODE","TEXT_NODE","textContent","trim","total","panelMode","getAttribute","setAttribute","style","setProperty","String","set","k","v","shouldBeActive","forceUpdate","render","mobile","h","Host","key","class","role","part","onSlotchange","name","size","onClick","map"],"sources":["src/components/md-stepper/md-stepper.css?tag=md-stepper&encapsulation=shadow","src/components/md-stepper/md-stepper.tsx"],"sourcesContent":["/* ==========================================================\n   md-stepper — Material Design 3 stepper container\n\n   PUBLIC CSS CUSTOM PROPERTIES:\n     --md-stepper-gap   Spacing between steps (vertical orientation only).\n                        Defaults to 0 — any other value opens gaps in the\n                        connector rail, which relies on adjacent step boxes\n                        touching. Prefer padding inside step content.\n\n   PARTS:\n     list             The <ol> wrapping the steps.\n     content          Wrapper around the `content` slot (horizontal content area).\n     nav              The horizontal Back / Continue button bar.\n     mobile-nav       The compact variant=\"mobile\" bar.\n     mobile-progress  The centered progress (dots / caption) in the mobile bar.\n\n   SLOTS:\n     (default)   md-step children\n     content     Active-step panel for horizontal / mobile steppers — rendered\n                 between the step row and the nav bar (swap it on mdStepChange).\n   ========================================================== */\n\n:host {\n  display: block;\n  inline-size: 100%;\n  box-sizing: border-box;\n  font-family: var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);\n  color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n/* Visually-hidden live regions — announce step changes / errors to AT without\n   affecting layout (the standard sr-only recipe). */\n.md-stepper__live {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.md-stepper__list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n}\n\n/* Horizontal: steps share the row equally; connectors live on a fixed baseline\n   inside each step (see md-step), so the row stays clean at any label height. */\n\n/* ── Horizontal panel mode (opt-in) ──────────────────────────────────────────\n   A slot cannot reach a grandchild, so `md-stepper` can never project a step's\n   children into its own `content` region — only `md-step` can render them, in\n   place. To let a step's panel span the full width UNDER the row anyway, the\n   row becomes a grid and each step goes `display: contents`, promoting its\n   header and its panel to grid items: headers share row 1 (one column each),\n   panels span every column in row 2.\n\n   Gated on [data-panel-mode=\"step\"], which the stepper only sets when a step\n   actually has content — a horizontal stepper without per-step panels keeps\n   the original flex row byte-for-byte. */\n:host(.md-stepper--horizontal[data-panel-mode='step']) .md-stepper__list {\n  display: grid;\n  grid-template-columns: repeat(var(--md-stepper-step-count, 1), 1fr);\n  align-items: start;\n}\n\n:host(.md-stepper--horizontal) .md-stepper__list {\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n/* Vertical: stacked with NO inter-step gap so the connector rail is continuous\n   (each step's down-connector meets the next step's up-connector at the box\n   boundary). Breathing room comes from the bubble wrapper + content padding. */\n:host(.md-stepper--vertical) .md-stepper__list {\n  flex-direction: column;\n  gap: var(--md-stepper-gap, 0);\n}\n\n/* Horizontal content area — only takes space when something is slotted. */\n.md-stepper__content ::slotted(*) {\n  display: block;\n  /* Global density: on-grid 24px separation tracks --md-sys-spacing-inset-xl;\n     byte-for-byte at density 0. */\n  margin-block-start: var(--md-sys-spacing-inset-xl, 24px);\n}\n\n/* Horizontal nav bar — built-in Back / Continue below the steps (and below\n   the content slot), end-aligned like M3 wizard actions. Vertical steppers\n   carry their nav inside each step's content panel instead. */\n.md-stepper__nav {\n  display: flex;\n  gap: var(--md-sys-spacing-gap-sm, 8px);\n  justify-content: flex-end;\n  /* Off-grid (20px) separation tightens with global density (2px/rung),\n     floored at 4px; density 0 resolves to 20px. */\n  margin-block-start: max(4px, calc(20px + var(--md-sys-density-scale, 0) * 2px));\n}\n\n/* ── Mobile variant — compact Back · progress · Continue bar ──────────────\n   The step-header row is hidden; the active step's panel lives in the content\n   slot. Matches the MUI MobileStepper idiom for narrow checkout/onboarding. */\n:host(.md-stepper--mobile) .md-stepper__list { display: none; }\n\n.md-stepper__mobile {\n  display: flex;\n  align-items: center;\n  gap: var(--md-sys-spacing-gap-sm, 8px);\n  margin-block-start: var(--md-sys-spacing-gap-lg, 16px);\n}\n\n.md-stepper__mobile-progress {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--md-sys-spacing-gap-sm, 8px);\n  min-inline-size: 0;\n}\n\n.md-stepper__mobile-text {\n  font-family: var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);\n  font-size: var(--md-sys-typescale-label-large-font-size, 14px);\n  font-weight: var(--md-sys-typescale-label-large-font-weight, 500);\n  line-height: var(--md-sys-typescale-label-large-line-height, 20px);\n  color: var(--md-sys-color-on-surface-variant, #49454F);\n}\n\n.md-stepper__mobile-dot {\n  inline-size: 8px;\n  block-size: 8px;\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  /* Pending dots use outline (not the 1.2:1 surface tint) for a visible 3:1. */\n  background-color: var(--md-step-connector-color, var(--md-sys-color-outline, #79747E));\n  transition:\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    transform var(--md-sys-motion-spring-spatial-default-duration, 500ms) var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));\n}\n.md-stepper__mobile-dot.is-done { background-color: var(--md-step-active-color, var(--md-sys-color-primary, #6750A4)); }\n.md-stepper__mobile-dot.is-active {\n  background-color: var(--md-step-active-color, var(--md-sys-color-primary, #6750A4));\n  transform: scale(1.5);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .md-stepper__mobile-dot { transition-duration: 0.01ms; }\n  .md-stepper__mobile-dot.is-active { transform: none; }\n}\n\n@media (forced-colors: active) {\n  .md-stepper__mobile-dot { background-color: GrayText; forced-color-adjust: none; }\n  .md-stepper__mobile-dot.is-done,\n  .md-stepper__mobile-dot.is-active { background-color: Highlight; }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Watch,\n  Listen,\n  Event,\n  EventEmitter,\n  Method,\n  forceUpdate,\n} from '@stencil/core';\n\n/**\n * `md-stepper` — Material Design 3 stepper. Orchestrates a set of slotted\n * `md-step` children: it owns the active index and navigation, and pushes\n * layout / i18n down to each step.\n *\n * **Controlled, with optional auto-progress.** The stepper owns `active`\n * (updated on click / `next` / `prev` / `goTo`, emitting `mdStepChange`). With\n * `auto-complete` (default), advancing marks the step you leave as `completed`,\n * so the progress line + checks \"just work\" — no manual wiring. Set\n * `auto-complete=\"false\"` to own `completed` yourself.\n *\n * ```html\n * <md-stepper active=\"0\">\n *   <md-step label=\"Account\"><p>…</p></md-step>\n *   <md-step label=\"Shipping\" optional><p>…</p></md-step>\n *   <md-step label=\"Payment\" editable><p>…</p></md-step>\n * </md-stepper>\n * ```\n *\n * @slot - `md-step` children.\n * @slot content - Content area for **horizontal** steppers, rendered between\n *                 the step row and the built-in nav bar. Put the active step's\n *                 panel here and swap it on `mdStepChange` (vertical steppers\n *                 render content inside each step instead).\n * @part list - The ordered list wrapping the steps.\n * @part content - Wrapper around the `content` slot.\n * @part nav - The horizontal Back / Continue button bar.\n * @part mobile-nav - The compact `variant=\"mobile\"` bar.\n * @part mobile-progress - The centered progress (dots / caption) in the mobile bar.\n */\n@Component({\n  tag: 'md-stepper',\n  styleUrl: 'md-stepper.css',\n  shadow: true,\n})\nexport class MdStepper {\n  @Element() el!: HTMLElement;\n\n  /** Layout orientation. */\n  @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Indicator style: `numbered` circles or minimal `dot`s. */\n  @Prop({ reflect: true }) indicator: 'numbered' | 'dot' = 'numbered';\n\n  /**\n   * Layout variant:\n   * - `default` — the full step row (headers + connectors).\n   * - `mobile` — a compact MUI-style bar for narrow screens: **Back**, a centered\n   *   progress (dots for `indicator=\"dot\"`, else a \"Step N of M\" caption), and\n   *   **Continue / Finish**. The step headers are hidden; put the active step's\n   *   panel in the `content` slot and swap it on `mdStepChange`.\n   */\n  @Prop({ reflect: true }) variant: 'default' | 'mobile' = 'default';\n\n  /**\n   * - `linear` (default) — steps must be completed in order; future steps are\n   *   not reachable until the prior ones are done or optional (an `editable`\n   *   completed step can always be revisited).\n   * - `non-linear` — any step can be selected.\n   */\n  @Prop({ reflect: true }) mode: 'linear' | 'non-linear' = 'linear';\n\n  /** Index of the active step. Two-way bindable. Out-of-range values clamp. */\n  @Prop({ mutable: true, reflect: true }) active: number = 0;\n\n  /**\n   * When advancing (via `next()` or a step's built-in Continue button), mark the\n   * step being left as `completed`. Default `true`. Turn off to fully control\n   * completion yourself.\n   */\n  @Prop({ attribute: 'auto-complete' }) autoComplete: boolean = true;\n\n  /**\n   * Show the built-in **Back / Continue** navigation (default `true`) so users\n   * always have a clear way to move through the flow:\n   * - vertical → the buttons sit under each active step (Material wizard style),\n   * - horizontal → a single button bar below the stepper.\n   * Set `nav=\"false\"` to drive navigation entirely yourself (clicking steps,\n   * `next()` / `prev()`, or your own controls).\n   */\n  @Prop() nav: boolean = true;\n\n  /**\n   * Disable the built-in **Continue / Finish** button without disabling Back or\n   * the whole step. Bind this to your current step's form validity to gate\n   * advancement declaratively (the most common wizard need). Step clicks and the\n   * `next()`/`goTo()` methods are unaffected — use `mode=\"linear\"` and/or\n   * `mdBeforeChange` for those.\n   */\n  @Prop({ attribute: 'next-disabled' }) nextDisabled: boolean = false;\n\n  /**\n   * Put the built-in **Continue / Finish** button into a loading state (spinner +\n   * interactive-disabled) and disable **Back**, for async submit-on-Continue\n   * (prevents double-submit). Toggle it around your `await` — typically inside an\n   * `mdBeforeChange` handler that `preventDefault()`s, does async work, then\n   * commits by setting `active`.\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Only mount the **active** vertical step's content panel; inactive panels are\n   * removed from layout and the a11y tree (no collapse animation). Use for\n   * wizards with heavy per-step content. Note: slotted custom elements stay\n   * *connected* in the light DOM — for full teardown, conditionally render the\n   * content in your framework.\n   */\n  @Prop() lazy: boolean = false;\n\n  // ─── i18n ──────────────────────────────────────────────────\n  /** Accessible name for the navigation landmark. */\n  @Prop() label: string = 'Progress';\n  /** Localized word for \"Step\" in each step's announced name (\"Step 2 of 4\"). */\n  @Prop({ attribute: 'step-word' }) stepWord: string = 'Step';\n  /** Localized word for \"of\" in each step's announced name (\"Step 2 of 4\"). */\n  @Prop({ attribute: 'of-word' }) ofWord: string = 'of';\n  /** Localized word announced for a completed step (\"…, completed\"). */\n  @Prop({ attribute: 'completed-word' }) completedWord: string = 'completed';\n  /** Localized word announced for the current step (\"…, current\"). */\n  @Prop({ attribute: 'current-word' }) currentWord: string = 'current';\n  /** Localized word announced for a step in error (\"…, error: message\"). */\n  @Prop({ attribute: 'error-word' }) errorWord: string = 'error';\n  /** Caption + announced word for optional steps. */\n  @Prop({ attribute: 'optional-word' }) optionalWord: string = 'Optional';\n  /** Label for the built-in Continue button. */\n  @Prop({ attribute: 'next-label' }) nextLabel: string = 'Continue';\n  /** Label for the built-in Back button. */\n  @Prop({ attribute: 'back-label' }) backLabel: string = 'Back';\n  /** Label for the built-in Continue button on the last step. */\n  @Prop({ attribute: 'finish-label' }) finishLabel: string = 'Finish';\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  /**\n   * Fires BEFORE a user-driven step change commits (step click, built-in nav, or\n   * `next()`/`prev()`/`goTo()`). Cancelable: call `event.preventDefault()` to\n   * veto the transition (e.g. block Continue until the current step validates).\n   * `detail.index` is the requested step, `detail.previous` the current one.\n   * Does not fire for a direct `active` property assignment — set `active`\n   * yourself to commit authoritatively (e.g. after async validation).\n   */\n  @Event({ cancelable: true }) mdBeforeChange: EventEmitter<{ index: number; previous: number }>;\n\n  /** Active step changed (after it commits). */\n  @Event() mdStepChange: EventEmitter<{ index: number; previous: number }>;\n\n  /** Continue pressed on the last step (the flow is finished). */\n  @Event() mdComplete: EventEmitter<void>;\n\n  /** Step count — drives the horizontal nav bar's Continue↔Finish label. */\n  @State() private stepCount = 0;\n\n  /** Visually-hidden polite announcement of the active step (a11y). */\n  @State() private liveMessage = '';\n\n  /** Visually-hidden assertive announcement when a step enters error (a11y). */\n  @State() private errorMessage = '';\n\n  private steps: HTMLMdStepElement[] = [];\n\n  /** Last known-valid active index — the true `previous` for mdStepChange even\n   *  when the watch re-enters through clamping (where Stencil's `oldVal` is the\n   *  bogus out-of-range value). */\n  private lastActive = 0;\n\n  componentWillLoad() {\n    // Sync before first render: steps get correct data-* immediately (no\n    // \"every bubble is 1\" flash), stepCount is set outside didLoad (no Stencil\n    // re-render warning), and an out-of-range initial `active` clamps.\n    this.collectSteps();\n    this.active = this.clampToValidStep(this.active);\n    this.lastActive = this.active;\n    this.syncSteps();\n  }\n\n  componentDidLoad() {\n    this.syncSteps();\n    this.observeStepState();\n  }\n\n  disconnectedCallback() {\n    this.stepObserver?.disconnect();\n    this.stepObserver = undefined;\n  }\n\n  @Watch('active')\n  onActiveChange(newVal: number) {\n    this.collectSteps();\n    const clamped = this.clampToValidStep(newVal);\n    if (clamped !== newVal) {\n      this.active = clamped; // re-enters this watch with the clamped value\n      return;\n    }\n    const previous = this.lastActive;\n    if (clamped === previous) return; // clamp round-trip — nothing changed\n    this.lastActive = clamped;\n    // Auto-complete treats completion as strict progress. This lives in the WATCH\n    // (not next()) so EVERY commit path is consistent — the built-in nav, the\n    // methods, AND a direct `active = n` assignment (the async-veto bypass):\n    //  • FORWARD → mark every non-disabled step you passed over as completed;\n    //  • BACKWARD → un-complete the target step and everything after it, so a\n    //    later step can never stay checked while an earlier one isn't (e.g.\n    //    finishing then stepping back mustn't orphan the last step as completed).\n    //    Exception: revisiting an `editable` completed step is review-in-place,\n    //    so downstream completion survives.\n    // (In controlled mode, `auto-complete=\"false\"`, completion is always yours.)\n    if (this.autoComplete) {\n      this.mutatingSelf(() => {\n        if (clamped > previous) {\n          this.steps.forEach((s, i) => {\n            if (i >= previous && i < clamped && !s.disabled) {\n              s.completed = true;\n              s.error = false;\n            }\n          });\n        } else {\n          const target = this.steps[clamped];\n          if (!(target?.editable && target?.completed)) {\n            this.steps.forEach((s, i) => {\n              if (i >= clamped) s.completed = false;\n            });\n          }\n        }\n      });\n    }\n    this.syncSteps();\n    this.mdStepChange.emit({ index: clamped, previous });\n    this.announceStep(clamped);\n  }\n\n  @Watch('orientation')\n  @Watch('indicator')\n  @Watch('mode')\n  @Watch('nav')\n  @Watch('variant')\n  @Watch('lazy')\n  @Watch('loading')\n  @Watch('nextDisabled')\n  @Watch('stepWord')\n  @Watch('ofWord')\n  @Watch('completedWord')\n  @Watch('currentWord')\n  @Watch('errorWord')\n  @Watch('optionalWord')\n  @Watch('nextLabel')\n  @Watch('backLabel')\n  @Watch('finishLabel')\n  onConfigChange() {\n    this.syncSteps();\n  }\n\n  // ─── Navigation from children ──────────────────────────────\n  /** Step events are internal coordination between a step and ITS stepper —\n   *  only honor events from direct children (a nested stepper's steps must not\n   *  drive this one) and stop them there. */\n  private ownsStepEvent(e: globalThis.Event): boolean {\n    const t = e.target as HTMLElement | null;\n    return !!t && t.parentElement === this.el && t.tagName.toLowerCase() === 'md-step';\n  }\n\n  @Listen('mdStepClick')\n  onStepClick(e: CustomEvent<{ index: number }>) {\n    if (!this.ownsStepEvent(e)) return;\n    e.stopPropagation();\n    const target = e.detail.index;\n    if (target === this.active) return;\n    if (this.canNavigateTo(target)) this.commitChange(target);\n  }\n\n  @Listen('mdStepNext')\n  async onStepNext(e: CustomEvent<{ index: number }>) {\n    if (!this.ownsStepEvent(e)) return;\n    e.stopPropagation();\n    const before = this.active;\n    await this.next();\n    // The button that was pressed collapses with its panel — move focus to the\n    // new active header so keyboard users aren't dropped to <body>.\n    if (this.active !== before) this.focusActiveStep();\n  }\n\n  @Listen('mdStepBack')\n  async onStepBack(e: CustomEvent<{ index: number }>) {\n    if (!this.ownsStepEvent(e)) return;\n    e.stopPropagation();\n    const before = this.active;\n    await this.prev();\n    if (this.active !== before) this.focusActiveStep();\n  }\n\n  /** The footer bar's own md-buttons emit composed `mdClick` that retargets to\n   *  this host — internal chrome, don't leak it to app-level delegation. */\n  @Listen('mdClick')\n  onInternalMdClick(e: globalThis.Event) {\n    if (e.target === this.el) e.stopPropagation();\n  }\n\n  // ─── Public methods ────────────────────────────────────────\n  /** Advance to the next non-disabled step (emitting a cancelable\n   *  `mdBeforeChange`). When `auto-complete` is on, the step you leave is marked\n   *  completed; past the last reachable step it emits `mdComplete`. */\n  @Method()\n  async next(): Promise<void> {\n    this.collectSteps();\n    if (this.steps.length === 0) return;\n    let target = this.active + 1;\n    while (target < this.steps.length && this.steps[target].disabled) target++;\n    if (target >= this.steps.length) {\n      // Finishing on the last step: complete it (auto-complete) and emit\n      // mdComplete. Async submit-on-finish is done by the consumer via `loading`\n      // + the `mdComplete` handler.\n      const current = this.steps[this.active];\n      if (this.autoComplete && current && !current.disabled) {\n        this.mutatingSelf(() => {\n          current.completed = true;\n          current.error = false;\n        });\n      }\n      this.syncSteps();\n      this.mdComplete.emit();\n      return;\n    }\n    this.commitChange(target);\n  }\n\n  /** Step backward to the previous non-disabled step (emitting `mdBeforeChange`). */\n  @Method()\n  async prev(): Promise<void> {\n    this.collectSteps();\n    let target = this.active - 1;\n    while (target >= 0 && this.steps[target]?.disabled) target--;\n    if (target < 0) return;\n    this.commitChange(target);\n  }\n\n  /** Jump to a step (out-of-range clamps; honors `linear` reachability; emits\n   *  `mdBeforeChange`). */\n  @Method()\n  async goTo(index: number): Promise<void> {\n    this.collectSteps();\n    const clamped = this.clampToValidStep(index);\n    if (this.canNavigateTo(clamped)) this.commitChange(clamped);\n  }\n\n  /** Reset to the first step and clear completed / error state. */\n  @Method()\n  async reset(): Promise<void> {\n    this.collectSteps();\n    this.mutatingSelf(() => {\n      this.steps.forEach((s) => {\n        s.completed = false;\n        s.error = false;\n      });\n    });\n    this.active = 0;\n    this.syncSteps();\n  }\n\n  // ─── Internals ─────────────────────────────────────────────\n  /** Commit a user-driven step change, first giving the app a chance to veto via\n   *  the cancelable `mdBeforeChange` event. Returns whether the change committed. */\n  private commitChange(target: number): boolean {\n    if (target === this.active) return false;\n    const ev = this.mdBeforeChange.emit({ index: target, previous: this.active });\n    if (ev.defaultPrevented) return false;\n    this.active = target;\n    return true;\n  }\n\n  /** Watch the light-DOM children's reflected state attributes so the stepper\n   *  re-gates reachability when a controlled host mutates completed/optional/\n   *  disabled without a navigation, and announces a step that enters error. */\n  private stepObserver?: MutationObserver;\n  private observeStepState() {\n    if (typeof MutationObserver === 'undefined') return;\n    this.stepObserver = new MutationObserver((records) => {\n      let entered: HTMLMdStepElement | null = null;\n      for (const r of records) {\n        if (r.attributeName === 'error') {\n          const el = r.target as HTMLMdStepElement;\n          if (el.error && el.tagName.toLowerCase() === 'md-step') entered = el;\n        }\n      }\n      // Re-gate the affordance against the new state (idempotent — settles).\n      this.syncSteps();\n      if (entered) this.announceError(entered);\n    });\n    this.attachObserver();\n  }\n\n  private attachObserver() {\n    // `active` is stamped by the stepper itself; excluding it avoids a feedback\n    // loop. The remaining attrs are watched only for APP-driven changes — the\n    // stepper's own completion writes run inside `mutatingSelf` (observer off).\n    this.stepObserver?.observe(this.el, {\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['completed', 'error', 'optional', 'disabled'],\n    });\n  }\n\n  /** Run a block that mutates the steps' own completed/error state without the\n   *  observer reacting — those writes are already reconciled by syncSteps, so\n   *  self-triggering it again is redundant work (and perturbs fill animations).\n   *  External writes, made while the observer is attached, still re-gate. */\n  private mutatingSelf(fn: () => void) {\n    this.stepObserver?.disconnect();\n    try {\n      fn();\n    } finally {\n      this.attachObserver();\n    }\n  }\n\n  private announceStep(index: number) {\n    const step = this.steps[index];\n    if (!step) return;\n    let msg = `${this.stepWord} ${index + 1} ${this.ofWord} ${this.stepCount}`;\n    if (step.label) msg += `: ${step.label}`;\n    if (step.optional) msg += `, ${this.optionalWord}`;\n    if (step.completed) msg += `, ${this.completedWord}`;\n    msg += `, ${this.currentWord}`;\n    this.liveMessage = msg;\n  }\n\n  private announceError(step: HTMLMdStepElement) {\n    const index = this.steps.indexOf(step);\n    let msg = `${this.stepWord} ${index + 1} ${this.ofWord} ${this.stepCount}`;\n    if (step.label) msg += `: ${step.label}`;\n    msg += `, ${this.errorWord}`;\n    if (step.errorText) msg += `: ${step.errorText}`;\n    this.errorMessage = msg;\n  }\n\n  private canNavigateTo(target: number): boolean {\n    this.collectSteps();\n    const step = this.steps[target];\n    if (!step || step.disabled) return false;\n    if (this.mode !== 'linear') return true;\n    if (target <= this.active) return true; // back is always allowed\n    if (step.completed) return true; // revisit a completed (e.g. editable) step\n    // forward only when every prior step is completed or skippable\n    return this.steps.slice(0, target).every((s) => s.completed || s.optional);\n  }\n\n  private clampToValidStep(index: number): number {\n    if (this.steps.length === 0) return 0;\n    return Math.max(0, Math.min(this.steps.length - 1, index | 0));\n  }\n\n  private collectSteps() {\n    this.steps = (Array.from(this.el.children) as HTMLElement[]).filter(\n      (c) => c.tagName.toLowerCase() === 'md-step',\n    ) as HTMLMdStepElement[];\n  }\n\n  private focusActiveStep() {\n    const step = this.steps[this.active];\n    (step?.shadowRoot?.querySelector('.md-step__inner') as HTMLElement | null)?.focus();\n  }\n\n  /** Whitespace-only text (pretty-printed markup) is not content. Mirrors\n   *  md-step's own computeSlottedContent so the two agree on \"has a panel\". */\n  private static hasOwnContent(step: Element): boolean {\n    return Array.from(step.childNodes).some(\n      (n) =>\n        n.nodeType === Node.ELEMENT_NODE ||\n        (n.nodeType === Node.TEXT_NODE && (n.textContent ?? '').trim() !== ''),\n    );\n  }\n\n  private syncSteps() {\n    this.collectSteps();\n    const total = this.steps.length;\n    this.stepCount = total;\n    // Per-step panels are opt-in and detected, not configured: if any step has\n    // light-DOM content of its own, the horizontal row switches to the grid\n    // layout. A stepper whose steps are all empty renders byte-identically to\n    // before this existed.\n    const panelMode =\n      this.orientation === 'horizontal' && this.steps.some((s) => MdStepper.hasOwnContent(s))\n        ? 'step'\n        : 'shared';\n    if (this.el.getAttribute('data-panel-mode') !== panelMode) {\n      this.el.setAttribute('data-panel-mode', panelMode);\n    }\n    this.el.style.setProperty('--md-stepper-step-count', String(total));\n\n    this.steps.forEach((step, index) => {\n      const set = (k: string, v: string) => {\n        if (step.getAttribute(k) !== v) step.setAttribute(k, v);\n      };\n      set('data-index', String(index));\n      set('data-total', String(total));\n      set('data-active', String(this.active));\n      set('data-orientation', this.orientation);\n      set('data-indicator', this.indicator);\n      set('data-mode', this.mode);\n      set('data-position', index === 0 ? 'first' : index === total - 1 ? 'last' : 'middle');\n      set('data-step-word', this.stepWord);\n      set('data-of-word', this.ofWord);\n      set('data-completed-word', this.completedWord);\n      set('data-current-word', this.currentWord);\n      set('data-error-word', this.errorWord);\n      set('data-optional-word', this.optionalWord);\n      set('data-next-label', this.nextLabel);\n      set('data-back-label', this.backLabel);\n      set('data-finish-label', this.finishLabel);\n      set('data-nav', String(this.nav));\n      set('data-loading', String(this.loading));\n      set('data-next-disabled', String(this.nextDisabled));\n      set('data-lazy', String(this.lazy));\n      // Horizontal panel placement. A horizontal stepper normally takes ONE\n      // shared panel in its own `content` slot, because a slot cannot reach a\n      // grandchild — `md-step`'s children can only ever be rendered by\n      // `md-step` itself. When steps carry their own content we opt the row\n      // into a grid instead, so each step's panel can span the full width\n      // under the row (see md-step.css §\"horizontal panel\").\n      set('data-panel-mode', panelMode);\n      // Drives the staggered entrance animation delay in CSS.\n      step.style.setProperty('--md-step-idx', String(index));\n      const shouldBeActive = index === this.active;\n      if (step.active !== shouldBeActive) step.active = shouldBeActive;\n      // The connector fill is position-driven (index vs active), read from the\n      // `data-active` attribute — which isn't a reactive prop. Steps whose own\n      // `active` flag didn't change (e.g. those between the old and new active\n      // on a multi-step jump) wouldn't otherwise re-render, leaving their\n      // connectors stale. Force each step to re-render so the fill stays exact.\n      forceUpdate(step);\n    });\n  }\n\n  private handleSlotChange = () => {\n    this.collectSteps();\n    const clamped = this.clampToValidStep(this.active);\n    if (clamped !== this.active) {\n      // Steps were removed out from under the active index — re-clamp (the\n      // watch syncs + emits with the true previous).\n      this.active = clamped;\n    } else {\n      this.syncSteps();\n    }\n  };\n\n  private handleFooterBack = async () => {\n    await this.prev();\n    // Back disables itself on the first step while focused — rescue focus.\n    if (this.active === 0) this.focusActiveStep();\n  };\n\n  render() {\n    const mobile = this.variant === 'mobile';\n    return (\n      <Host\n        class={{\n          'md-stepper': true,\n          [`md-stepper--${this.orientation}`]: true,\n          [`md-stepper--indicator-${this.indicator}`]: true,\n          [`md-stepper--mode-${this.mode}`]: true,\n          'md-stepper--mobile': mobile,\n        }}\n        role=\"navigation\"\n        aria-label={this.label}\n      >\n        {/* Visually-hidden announcers: the horizontal footer nav keeps focus on\n            its buttons (so Continue can be pressed repeatedly), so step changes\n            and freshly-set errors are surfaced to assistive tech here instead. */}\n        <div class=\"md-stepper__live\" aria-live=\"polite\" role=\"status\">{this.liveMessage}</div>\n        <div class=\"md-stepper__live\" aria-live=\"assertive\" role=\"alert\">{this.errorMessage}</div>\n\n        <ol class=\"md-stepper__list\" part=\"list\">\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </ol>\n\n        {/* Horizontal content area — the app renders the active step's panel\n            here (see the `content` slot docs). Sits between the step row and\n            the nav bar, matching the M3 wizard order: steps → content → actions. */}\n        <div class=\"md-stepper__content\" part=\"content\">\n          <slot name=\"content\"></slot>\n        </div>\n\n        {/* Horizontal nav lives in a footer bar (vertical steps carry their own\n            Back/Continue in each content panel). Back stays mounted (disabled\n            on the first step) so the bar never reflows underfoot. */}\n        {this.nav && !mobile && this.orientation === 'horizontal' && this.stepCount > 0 && (\n          <div class=\"md-stepper__nav\" part=\"nav\">\n            <md-button\n              variant=\"text\"\n              size=\"sm\"\n              disabled={this.active <= 0 || this.loading}\n              onClick={this.handleFooterBack}\n            >\n              {this.backLabel}\n            </md-button>\n            <md-button\n              variant=\"filled\"\n              size=\"sm\"\n              loading={this.loading}\n              disabled={this.nextDisabled || this.loading}\n              onClick={() => this.next()}\n            >\n              {this.active >= this.stepCount - 1 ? this.finishLabel : this.nextLabel}\n            </md-button>\n          </div>\n        )}\n\n        {/* Compact mobile bar: Back · centered progress (dots or \"N of M\") ·\n            Continue/Finish. Replaces the step-header row + footer nav. */}\n        {this.nav && mobile && this.stepCount > 0 && (\n          <div class=\"md-stepper__mobile\" part=\"mobile-nav\">\n            <md-button\n              variant=\"text\"\n              size=\"sm\"\n              disabled={this.active <= 0 || this.loading}\n              onClick={this.handleFooterBack}\n            >\n              {this.backLabel}\n            </md-button>\n            <div\n              class=\"md-stepper__mobile-progress\"\n              part=\"mobile-progress\"\n              aria-hidden={this.indicator === 'dot' ? 'true' : undefined}\n            >\n              {this.indicator === 'dot'\n                ? this.steps.map((s, i) => (\n                    <span\n                      class={{\n                        'md-stepper__mobile-dot': true,\n                        'is-active': i === this.active,\n                        'is-done': i < this.active || !!s.completed,\n                      }}\n                    ></span>\n                  ))\n                : <span class=\"md-stepper__mobile-text\">{`${this.stepWord} ${this.active + 1} ${this.ofWord} ${this.stepCount}`}</span>}\n            </div>\n            <md-button\n              variant=\"filled\"\n              size=\"sm\"\n              loading={this.loading}\n              disabled={this.nextDisabled || this.loading}\n              onClick={() => this.next()}\n            >\n              {this.active >= this.stepCount - 1 ? this.finishLabel : this.nextLabel}\n            </md-button>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{p as s,H as e,c as r,h as a,d as t,t as d}from"./p-bSpXNc5J.js";import{t as n}from"./p-DYBUr7K_.js";import{d as o}from"./p-C3vB0Hd9.js";const i=()=>`:host{display:flex;align-items:center;position:relative;overflow:visible;cursor:pointer;user-select:none;min-height:calc(48px + var(--md-sys-density-scale, 0) * 4px);--_icon-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));padding:0 var(--md-sys-spacing-inset-md, 12px);gap:var(--md-sys-spacing-gap-sm, 8px);color:var(--md-sys-color-on-surface, #1C1B1F);box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;transition:background-color var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),     color var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),     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))}@media (prefers-reduced-motion: reduce){:host{transition:none}}.md-sub-menu-item__state-layer{position:absolute;inset:0;border-radius:inherit;background-color:var(--md-sys-color-on-surface, #1C1B1F);opacity:0;pointer-events:none;transition:opacity var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(:hover) .md-sub-menu-item__state-layer{opacity:0.08}:host(:active) .md-sub-menu-item__state-layer{opacity:0.12}:host(:focus-visible) .md-sub-menu-item__state-layer,:host([data-md-focused]) .md-sub-menu-item__state-layer{opacity:0.12}:host(:focus-visible),:host([data-md-focused]){outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:-3px}:host(.md-sub-menu-item--open) .md-sub-menu-item__state-layer{opacity:0.08}:host(.md-sub-menu-item--disabled){cursor:default;opacity:0.38;pointer-events:none}.md-sub-menu-item__leading{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--_icon-size);height:var(--_icon-size);color:var(--md-sys-color-on-surface-variant, #49454F)}.md-sub-menu-item__leading ::slotted(*:not(md-badge)){font-size:var(--_icon-size) !important;width:var(--_icon-size);height:var(--_icon-size);color:inherit}.md-sub-menu-item__content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.md-sub-menu-item__headline{font-family:var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-body-large-size, 16px);font-weight:var(--md-sys-typescale-body-large-weight, 400);line-height:var(--md-sys-typescale-body-large-line-height, 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.md-sub-menu-item__supporting{font-family:var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-body-medium-size, 14px);line-height:var(--md-sys-typescale-body-medium-line-height, 20px);color:var(--md-sys-color-on-surface-variant, #49454F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.md-sub-menu-item__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:20px;padding:0 8px;border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--md-sys-color-tertiary-container, #FFD8E4);color:var(--md-sys-color-on-tertiary-container, #31111D);font-family:var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-small-size, 11px);font-weight:var(--md-sys-typescale-label-small-weight, 500);line-height:var(--md-sys-typescale-label-small-line-height, 16px);letter-spacing:var(--md-sys-typescale-label-small-tracking, 0.5px);white-space:nowrap}.md-sub-menu-item__arrow{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-weight:normal;font-style:normal;font-size:var(--_icon-size);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;flex-shrink:0;color:var(--md-sys-color-on-surface-variant, #49454F);transition:transform var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host([dir="rtl"]) .md-sub-menu-item__arrow,:host-context([dir="rtl"]) .md-sub-menu-item__arrow{--_arrow-flip:-1}.md-sub-menu-item__arrow{transform:scaleX(var(--_arrow-flip, 1))}:host(.md-sub-menu-item--open) .md-sub-menu-item__arrow{transform:scaleX(var(--_arrow-flip, 1)) rotate(90deg)}.md-sub-menu-item__submenu{position:absolute;inset-inline-start:100%;inset-inline-end:auto;top:0;z-index:1001;display:none}:host(.md-sub-menu-item--open) .md-sub-menu-item__submenu{display:block}:host(.md-sub-menu-item--divider){padding-bottom:8px;margin-bottom:8px}:host(.md-sub-menu-item--divider)::after{content:'';position:absolute;bottom:0;inset-inline:0;height:1px;background-color:var(--md-sys-color-outline-variant, #CAC4D0)}:host([data-variant="standard"]){--_rest-ss:var(--md-sys-shape-corner-small, 8px);--_rest-se:var(--md-sys-shape-corner-small, 8px);--_rest-es:var(--md-sys-shape-corner-small, 8px);--_rest-ee:var(--md-sys-shape-corner-small, 8px);color:var(--md-sys-color-on-surface, #1C1B1F);border-radius:var(--md-sys-shape-corner-small, 8px)}:host([data-variant="standard"]:first-child){--_rest-ss:var(--md-sys-shape-corner-large, 16px);--_rest-se:var(--md-sys-shape-corner-large, 16px);border-start-start-radius:var(--md-sys-shape-corner-large, 16px);border-start-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="standard"]:last-child){--_rest-es:var(--md-sys-shape-corner-large, 16px);--_rest-ee:var(--md-sys-shape-corner-large, 16px);border-end-start-radius:var(--md-sys-shape-corner-large, 16px);border-end-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="standard"]:hover){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)));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)));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)));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)))}:host([data-variant="standard"]:active){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)));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)));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)));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)))}:host([data-variant="standard"]:first-child:hover){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)));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)));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)));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)))}:host([data-variant="standard"]:last-child:hover){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)));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)));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)));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)))}:host([data-variant="standard"][data-after-gap]:hover){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)));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)));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)));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)))}:host([data-variant="standard"][gap]:hover){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)));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)));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)));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)))}:host([data-variant="standard"][data-after-gap][gap]:hover){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)));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)));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)));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)))}:host([data-variant="vibrant"]){--_rest-ss:var(--md-sys-shape-corner-small, 8px);--_rest-se:var(--md-sys-shape-corner-small, 8px);--_rest-es:var(--md-sys-shape-corner-small, 8px);--_rest-ee:var(--md-sys-shape-corner-small, 8px);color:var(--md-sys-color-on-tertiary-container, #31111D);border-radius:var(--md-sys-shape-corner-small, 8px)}:host([data-variant="vibrant"]:first-child){--_rest-ss:var(--md-sys-shape-corner-large, 16px);--_rest-se:var(--md-sys-shape-corner-large, 16px);border-start-start-radius:var(--md-sys-shape-corner-large, 16px);border-start-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="vibrant"]:last-child){--_rest-es:var(--md-sys-shape-corner-large, 16px);--_rest-ee:var(--md-sys-shape-corner-large, 16px);border-end-start-radius:var(--md-sys-shape-corner-large, 16px);border-end-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="vibrant"]:hover){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)));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)));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)));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)))}:host([data-variant="vibrant"]:active){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)));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)));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)));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)))}:host([data-variant="vibrant"]:first-child:hover){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)));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)));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)));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)))}:host([data-variant="vibrant"]:last-child:hover){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)));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)));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)));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)))}:host([data-variant="vibrant"][data-after-gap]:hover){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)));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)));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)));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)))}:host([data-variant="vibrant"][gap]:hover){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)));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)));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)));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)))}:host([data-variant="vibrant"][data-after-gap][gap]:hover){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)));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)));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)));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)))}:host([data-variant="vibrant"]) .md-sub-menu-item__leading,:host([data-variant="vibrant"]) .md-sub-menu-item__supporting,:host([data-variant="vibrant"]) .md-sub-menu-item__arrow{color:var(--md-sys-color-on-tertiary-container, #31111D)}:host([data-variant="vibrant"]) .md-sub-menu-item__state-layer{background-color:var(--md-sys-color-on-tertiary-container, #31111D)}: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 m=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.mdClick=r(this,"mdClick",7);this.headline="";this.supportingText="";this.disabled=false;this.divider=false;this.gap=false;this.badge="";this.density=0;this.submenuOpen=false;this.hasLeadingIcon=false;this.handleMouseEnter=()=>{this.openSubmenu(false)};this.handleMouseLeave=()=>{this.closeSubmenu()};this.handleKeyDown=s=>{if(this.disabled)return;if(s.key==="ArrowRight"||s.key==="Enter"||s.key===" "){s.preventDefault();s.stopPropagation();n(this.el);this.openSubmenu(true)}if((s.key==="ArrowLeft"||s.key==="Escape")&&this.submenuOpen){s.preventDefault();s.stopPropagation();const e=this.getNestedMenu();if(e?.close)e.close();setTimeout((()=>{this.submenuOpen=false;this.resetSubmenuStyles()}),100);this.el.focus();this.el.setAttribute("data-md-focused","")}};this.handleClick=s=>{if(this.disabled){s.preventDefault();s.stopPropagation();return}this.mdClick.emit()}}componentWillLoad(){this.hasLeadingIcon=!!this.el.querySelector('[slot="leading-icon"]')}componentDidLoad(){const s=this.getNestedMenu();if(s?.open){this.submenuOpen=true;if(s){s.style.position="relative"}}}getNestedMenu(){return this.el.querySelector('[slot="submenu"]')}async collapse(){clearTimeout(this.closeTimer);const s=this.getNestedMenu();if(s?.open)s.open=false;this.submenuOpen=false;this.resetSubmenuStyles();this.el.removeAttribute("data-md-focused")}openSubmenu(s=false){if(this.disabled)return;clearTimeout(this.closeTimer);this.submenuOpen=true;if(s){this.el.removeAttribute("data-md-focused")}const e=this.getNestedMenu();if(e){e.style.position="relative";if(e.show)e.show({autoFocus:s})}requestAnimationFrame((()=>{requestAnimationFrame((()=>this.autoPositionSubmenu()))}))}autoPositionSubmenu(){const s=this.el.shadowRoot?.querySelector(".md-sub-menu-item__submenu");if(!s)return;s.style.insetInlineStart="";s.style.insetInlineEnd="";s.style.top="";s.style.bottom="";const e=this.el.getBoundingClientRect();const r=s.getBoundingClientRect();const a=r.width>0?r.width:200;const t=r.height>0?r.height:200;const d=this.resolveDirection()==="rtl";const n=d?e.left-a<0:e.right+a>window.innerWidth;if(n){s.style.insetInlineStart="auto";s.style.insetInlineEnd="100%"}const o=r.width>0&&(d?r.right>window.innerWidth:r.left<0);if(o){s.style.insetInlineStart="100%";s.style.insetInlineEnd="auto"}if(e.top+t>window.innerHeight){s.style.top="auto";s.style.bottom="0"}}resolveDirection(){let s=this.el;while(s){const e=s.getAttribute?.("dir");if(e==="rtl"||e==="ltr")return e;s=s.parentElement}return"ltr"}closeSubmenu(){const s=this.getNestedMenu();if(s?.close)s.close();this.closeTimer=setTimeout((()=>{this.submenuOpen=false;this.resetSubmenuStyles()}),100)}resetSubmenuStyles(){const s=this.el.querySelector('[slot="submenu"]');if(s){s.style.position=""}const e=this.el.shadowRoot?.querySelector(".md-sub-menu-item__submenu");if(e){e.style.insetInlineStart="";e.style.insetInlineEnd="";e.style.top="";e.style.bottom=""}}disconnectedCallback(){clearTimeout(this.closeTimer)}render(){return a(t,{key:"329e6ba98df9f496d2c147296a6ea46f870af0ab",class:{"md-sub-menu-item":true,"md-sub-menu-item--disabled":this.disabled,"md-sub-menu-item--open":this.submenuOpen,"md-sub-menu-item--divider":this.divider,"md-sub-menu-item--gap":this.gap},role:"menuitem","aria-haspopup":"menu","aria-expanded":String(this.submenuOpen),"aria-disabled":this.disabled?"true":"false",tabindex:"-1",onClick:this.handleClick,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onKeyDown:this.handleKeyDown},a("md-ripple",{key:"9a5911ae293ec369cd58c5e1f312249049fd45c3",disabled:this.disabled}),a("span",{key:"64fcee34cca73f86e050bd88bce4333243746a64",class:"md-sub-menu-item__state-layer",part:"state-layer","aria-hidden":"true"}),this.hasLeadingIcon&&a("span",{key:"3252b107b872171d237f80517dead6d178def951",class:"md-sub-menu-item__leading",part:"leading-icon","aria-hidden":"true"},a("slot",{key:"55dd8915410eb1223e3fd3af4c89f5c3bc84a0dc",name:"leading-icon"})),a("span",{key:"c890f7649a39ee1c66f4b38af84b12d439b30c30",class:"md-sub-menu-item__content",part:"content"},a("span",{key:"4b3b1820819786e80ec9d818cfe19d13ba49968b",class:"md-sub-menu-item__headline",part:"headline"},this.headline),this.supportingText&&a("span",{key:"c2656cc25bb70f7ba056cb7a92d31b5e03cd2131",class:"md-sub-menu-item__supporting",part:"supporting-text"},this.supportingText)),this.badge&&a("span",{key:"141edb788ebbe07fef25d17994a104e376f473db",class:"md-sub-menu-item__badge",part:"badge"},this.badge),a("span",{key:"13537dc9b7eb2ea452bfa2b32c31b4c6ebb3c9ba",class:"md-sub-menu-item__arrow material-symbols-outlined","aria-hidden":"true"},"arrow_right"),a("div",{key:"577fe59c9008baf1da574063b188a300bb52b719",class:"md-sub-menu-item__submenu",onMouseEnter:()=>this.openSubmenu(),onMouseLeave:()=>this.closeSubmenu()},a("slot",{key:"c6a2697f9ec32f89d11828e11d1173addbc20d10",name:"submenu"})))}get el(){return this}static get style(){return i()}},[257,"md-sub-menu-item",{headline:[1],supportingText:[1,"supporting-text"],disabled:[516],divider:[516],gap:[516],badge:[1],density:[514],submenuOpen:[32],hasLeadingIcon:[32],collapse:[64]}]);function l(){if(typeof customElements==="undefined"){return}const s=["md-sub-menu-item","md-ripple"];s.forEach((s=>{switch(s){case"md-sub-menu-item":if(!customElements.get(d(s))){customElements.define(d(s),m)}break;case"md-ripple":if(!customElements.get(d(s))){o()}break}}))}l();const c=m;const p=l;export{c as MdSubMenuItem,p as defineCustomElement};
+//# sourceMappingURL=md-sub-menu-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["mdSubMenuItemCss","MdSubMenuItem","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","headline","supportingText","disabled","divider","gap","badge","density","submenuOpen","hasLeadingIcon","handleMouseEnter","openSubmenu","handleMouseLeave","closeSubmenu","handleKeyDown","e","key","preventDefault","stopPropagation","triggerRipple","el","nestedMenu","getNestedMenu","close","setTimeout","resetSubmenuStyles","focus","setAttribute","handleClick","mdClick","emit","componentWillLoad","querySelector","componentDidLoad","open","style","position","collapse","clearTimeout","closeTimer","removeAttribute","autoFocus","show","requestAnimationFrame","autoPositionSubmenu","container","shadowRoot","insetInlineStart","insetInlineEnd","top","bottom","hostRect","getBoundingClientRect","containerRect","submenuWidth","width","submenuHeight","height","rtl","resolveDirection","overflowsInlineEnd","left","right","window","innerWidth","flippedOverflows","innerHeight","node","dir","getAttribute","parentElement","disconnectedCallback","render","h","Host","class","role","String","tabindex","onClick","onMouseEnter","onMouseLeave","onKeyDown","part","name"],"sources":["src/components/md-sub-menu-item/md-sub-menu-item.css?tag=md-sub-menu-item&encapsulation=shadow","src/components/md-sub-menu-item/md-sub-menu-item.tsx"],"sourcesContent":["/* ═══════════════════════════════════════════════════════════\n   md-sub-menu-item\n   Material Design 3 — Menus (Submenu Item)\n   https://m3.material.io/components/menus/specs\n\n   Parts: state-layer, leading-icon, content, headline, supporting-text, badge\n   Slots: leading-icon, submenu\n   ═══════════════════════════════════════════════════════════ */\n\n/* ==========================================================\n   1. HOST\n   ========================================================== */\n:host {\n  display: flex;\n  align-items: center;\n  position: relative;\n  overflow: visible;\n  cursor: pointer;\n  user-select: none;\n  /* Global density: mirrors md-menu-item — each `data-density` rung (0…-4)\n     trims 4px off the row. density-scale is 0 by default, so the 48px default is\n     unchanged; padding/gap fall back to the same literals via the spacing tokens.\n     See packages/tokens/src/tokens.css §10-12. */\n  min-height: calc(48px + var(--md-sys-density-scale, 0) * 4px);\n  /* Icon lever, mirroring md-menu-item so a submenu row and its siblings taper\n     in lockstep — 1px per rung off 24dp, floored at 18px. */\n  --_icon-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n  padding: 0 var(--md-sys-spacing-inset-md, 12px);\n  gap: var(--md-sys-spacing-gap-sm, 8px);\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 — match md-menu-item: quick tonal fades + expressive shape morph. */\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-sub-menu-item__state-layer {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--md-sys-color-on-surface, #1C1B1F);\n  opacity: 0;\n  pointer-events: none;\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(:hover) .md-sub-menu-item__state-layer { opacity: 0.08; }\n:host(:active) .md-sub-menu-item__state-layer { opacity: 0.12; }\n:host(:focus-visible) .md-sub-menu-item__state-layer,\n:host([data-md-focused]) .md-sub-menu-item__state-layer { opacity: 0.12; }\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/* Active state when submenu is showing */\n:host(.md-sub-menu-item--open) .md-sub-menu-item__state-layer { opacity: 0.08; }\n\n/* ==========================================================\n   3. DISABLED STATE\n   ========================================================== */\n:host(.md-sub-menu-item--disabled) {\n  cursor: default;\n  opacity: 0.38;\n  pointer-events: none;\n}\n\n/* ==========================================================\n   4. LEADING ICON\n   ========================================================== */\n.md-sub-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-sub-menu-item__leading /* 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` beats the document-tree `.material-symbols-outlined` rule —\n     see the long note in md-menu-item.css §5 for why specificity can't. */\n  font-size: var(--_icon-size) !important;\n  width: var(--_icon-size);\n  height: var(--_icon-size);\n  color: inherit;\n}\n\n/* ==========================================================\n   5. CONTENT\n   ========================================================== */\n.md-sub-menu-item__content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-width: 0;\n}\n\n.md-sub-menu-item__headline {\n  font-family: var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);\n  font-size: var(--md-sys-typescale-body-large-size, 16px);\n  font-weight: var(--md-sys-typescale-body-large-weight, 400);\n  line-height: var(--md-sys-typescale-body-large-line-height, 24px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.md-sub-menu-item__supporting {\n  font-family: var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);\n  font-size: var(--md-sys-typescale-body-medium-size, 14px);\n  line-height: var(--md-sys-typescale-body-medium-line-height, 20px);\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   6. BADGE\n   ========================================================== */\n.md-sub-menu-item__badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  height: 20px;\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   7. TRAILING ARROW\n   ========================================================== */\n.md-sub-menu-item__arrow {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-weight: normal;\n  font-style: normal;\n  font-size: var(--_icon-size);\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  flex-shrink: 0;\n  color: var(--md-sys-color-on-surface-variant, #49454F);\n  transition: transform var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* The glyph is `arrow_right`, which Material Symbols does NOT auto-mirror — in\n   RTL the flyout opens leftward, so the caret has to point that way too. */\n:host([dir=\"rtl\"]) .md-sub-menu-item__arrow,\n:host-context([dir=\"rtl\"]) .md-sub-menu-item__arrow {\n  --_arrow-flip: -1;\n}\n\n.md-sub-menu-item__arrow {\n  transform: scaleX(var(--_arrow-flip, 1));\n}\n\n:host(.md-sub-menu-item--open) .md-sub-menu-item__arrow {\n  transform: scaleX(var(--_arrow-flip, 1)) rotate(90deg);\n}\n\n/* ==========================================================\n   8. SUBMENU CONTAINER\n   ========================================================== */\n.md-sub-menu-item__submenu {\n  position: absolute;\n  /* LOGICAL, not `left: 100%`: a physical offset opened the flyout to the right\n     even under dir=\"rtl\", where it must open toward the inline start (the left).\n     autoPositionSubmenu() flips these same logical properties on overflow. */\n  inset-inline-start: 100%;\n  inset-inline-end: auto;\n  top: 0;\n  z-index: 1001;\n  display: none;\n}\n\n:host(.md-sub-menu-item--open) .md-sub-menu-item__submenu {\n  display: block;\n}\n\n/* ==========================================================\n   9. DIVIDER\n   ========================================================== */\n:host(.md-sub-menu-item--divider) {\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n}\n\n:host(.md-sub-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   10. VERTICAL 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  border-radius: var(--md-sys-shape-corner-small, 8px);\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\"]: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: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  border-radius: var(--md-sys-shape-corner-small, 8px);\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\"]: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:host([data-variant=\"vibrant\"]) .md-sub-menu-item__leading,\n:host([data-variant=\"vibrant\"]) .md-sub-menu-item__supporting,\n:host([data-variant=\"vibrant\"]) .md-sub-menu-item__arrow {\n  color: var(--md-sys-color-on-tertiary-container, #31111D);\n}\n\n:host([data-variant=\"vibrant\"]) .md-sub-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, Method } from '@stencil/core';\nimport { MenuElement } from '../../utils/types';\nimport { triggerRipple } from '../../utils/ripple';\n\n@Component({ tag: 'md-sub-menu-item', styleUrl: 'md-sub-menu-item.css', shadow: true })\nexport class MdSubMenuItem {\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  /** Whether the item is disabled. */\n  @Prop({ reflect: true }) disabled: 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 arrow. */\n  @Prop() badge: 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 row itself is clicked (not the submenu). */\n  @Event() mdClick: EventEmitter<void>;\n\n  @State() private submenuOpen: boolean = false;\n  @State() private hasLeadingIcon = false;\n\n  private closeTimer?: ReturnType<typeof setTimeout>;\n\n  componentWillLoad() {\n    this.hasLeadingIcon = !!this.el.querySelector('[slot=\"leading-icon\"]');\n  }\n\n  componentDidLoad() {\n    const nestedMenu = this.getNestedMenu() as MenuElement | null;\n    if (nestedMenu?.open) {\n      this.submenuOpen = true;\n      if (nestedMenu) {\n        nestedMenu.style.position = 'relative';\n      }\n    }\n  }\n\n  private getNestedMenu(): HTMLElement | null {\n    return this.el.querySelector('[slot=\"submenu\"]');\n  }\n\n  /**\n   * Collapse this row's submenu and reset its visual state. Called by an\n   * ancestor menu when it closes, so reopening the menu tree always starts\n   * fresh instead of restoring the previously-open submenu and focus ring.\n   */\n  @Method()\n  async collapse() {\n    clearTimeout(this.closeTimer);\n    const nestedMenu = this.getNestedMenu() as MenuElement | null;\n    if (nestedMenu?.open) nestedMenu.open = false;\n    this.submenuOpen = false;\n    this.resetSubmenuStyles();\n    this.el.removeAttribute('data-md-focused');\n  }\n\n  private openSubmenu(autoFocus = false) {\n    if (this.disabled) return;\n    clearTimeout(this.closeTimer);\n    this.submenuOpen = true;\n\n    if (autoFocus) {\n      // Keyboard descent into the submenu: DOM focus is leaving this row,\n      // so drop the roving focus-ring marker. Otherwise the parent keeps\n      // its ring lit while the focused child submenu item also shows one.\n      this.el.removeAttribute('data-md-focused');\n    }\n\n    const nestedMenu = this.getNestedMenu() as MenuElement | null;\n    if (nestedMenu) {\n      nestedMenu.style.position = 'relative';\n      if (nestedMenu.show) nestedMenu.show({ autoFocus });\n    }\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => this.autoPositionSubmenu());\n    });\n  }\n\n  private autoPositionSubmenu() {\n    const container = this.el.shadowRoot?.querySelector('.md-sub-menu-item__submenu') as HTMLElement;\n    if (!container) return;\n\n    container.style.insetInlineStart = '';\n    container.style.insetInlineEnd = '';\n    container.style.top = '';\n    container.style.bottom = '';\n\n    const hostRect = this.el.getBoundingClientRect();\n    const containerRect = container.getBoundingClientRect();\n\n    const submenuWidth = containerRect.width > 0 ? containerRect.width : 200;\n    const submenuHeight = containerRect.height > 0 ? containerRect.height : 200;\n\n    // Flipping is expressed in LOGICAL terms so RTL mirrors for free: the\n    // flyout normally opens toward the inline end, and flips to the inline\n    // start only when that would leave the viewport.\n    const rtl = this.resolveDirection() === 'rtl';\n    const overflowsInlineEnd = rtl\n      ? hostRect.left - submenuWidth < 0\n      : hostRect.right + submenuWidth > window.innerWidth;\n\n    if (overflowsInlineEnd) {\n      container.style.insetInlineStart = 'auto';\n      container.style.insetInlineEnd = '100%';\n    }\n\n    // …and back again if the flipped side is the one that overflows.\n    const flippedOverflows = containerRect.width > 0 && (rtl\n      ? containerRect.right > window.innerWidth\n      : containerRect.left < 0);\n    if (flippedOverflows) {\n      container.style.insetInlineStart = '100%';\n      container.style.insetInlineEnd = 'auto';\n    }\n\n    if (hostRect.top + submenuHeight > window.innerHeight) {\n      container.style.top = 'auto';\n      container.style.bottom = '0';\n    }\n  }\n\n  /** Nearest explicit `dir`, matching md-button-group's resolution. */\n  private resolveDirection(): 'ltr' | 'rtl' {\n    let node: HTMLElement | null = this.el;\n    while (node) {\n      const dir = node.getAttribute?.('dir');\n      if (dir === 'rtl' || dir === 'ltr') return dir;\n      node = node.parentElement;\n    }\n    return 'ltr';\n  }\n\n  private closeSubmenu() {\n    const nestedMenu = this.getNestedMenu() as MenuElement | null;\n    if (nestedMenu?.close) nestedMenu.close();\n\n    this.closeTimer = setTimeout(() => {\n      this.submenuOpen = false;\n      this.resetSubmenuStyles();\n    }, 100);\n  }\n\n  private resetSubmenuStyles() {\n    const nestedMenu = this.el.querySelector('[slot=\"submenu\"]') as HTMLElement;\n    if (nestedMenu) {\n      nestedMenu.style.position = '';\n    }\n    const container = this.el.shadowRoot?.querySelector('.md-sub-menu-item__submenu') as HTMLElement;\n    if (container) {\n      container.style.insetInlineStart = '';\n      container.style.insetInlineEnd = '';\n      container.style.top = '';\n      container.style.bottom = '';\n    }\n  }\n\n  private handleMouseEnter = () => { this.openSubmenu(false); };\n  private handleMouseLeave = () => { this.closeSubmenu(); };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (e.key === 'ArrowRight' || e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      e.stopPropagation();\n      triggerRipple(this.el);\n      this.openSubmenu(true);\n    }\n\n    if ((e.key === 'ArrowLeft' || e.key === 'Escape') && this.submenuOpen) {\n      e.preventDefault();\n      e.stopPropagation();\n      const nestedMenu = this.getNestedMenu() as MenuElement | null;\n      if (nestedMenu?.close) nestedMenu.close();\n      setTimeout(() => {\n        this.submenuOpen = false;\n        this.resetSubmenuStyles();\n      }, 100);\n      this.el.focus();\n      // Focus is returning to this row — restore the roving focus-ring\n      // marker so the ring reappears on the parent item.\n      this.el.setAttribute('data-md-focused', '');\n    }\n  };\n\n  private handleClick = (e: MouseEvent) => {\n    if (this.disabled) { e.preventDefault(); e.stopPropagation(); return; }\n    this.mdClick.emit();\n  };\n\n  disconnectedCallback() {\n    clearTimeout(this.closeTimer);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'md-sub-menu-item': true,\n          'md-sub-menu-item--disabled': this.disabled,\n          'md-sub-menu-item--open': this.submenuOpen,\n          'md-sub-menu-item--divider': this.divider,\n          'md-sub-menu-item--gap': this.gap,\n        }}\n        role=\"menuitem\"\n        aria-haspopup=\"menu\"\n        aria-expanded={String(this.submenuOpen)}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        tabindex=\"-1\"\n        onClick={this.handleClick}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onKeyDown={this.handleKeyDown}\n      >\n        <md-ripple disabled={this.disabled}></md-ripple>\n        <span class=\"md-sub-menu-item__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n\n        {this.hasLeadingIcon && (\n          <span class=\"md-sub-menu-item__leading\" part=\"leading-icon\" aria-hidden=\"true\">\n            <slot name=\"leading-icon\"></slot>\n          </span>\n        )}\n\n        <span class=\"md-sub-menu-item__content\" part=\"content\">\n          <span class=\"md-sub-menu-item__headline\" part=\"headline\">{this.headline}</span>\n          {this.supportingText && (\n            <span class=\"md-sub-menu-item__supporting\" part=\"supporting-text\">{this.supportingText}</span>\n          )}\n        </span>\n\n        {this.badge && (\n          <span class=\"md-sub-menu-item__badge\" part=\"badge\">{this.badge}</span>\n        )}\n\n        <span class=\"md-sub-menu-item__arrow material-symbols-outlined\" aria-hidden=\"true\">\n          arrow_right\n        </span>\n\n        <div\n          class=\"md-sub-menu-item__submenu\"\n          onMouseEnter={() => this.openSubmenu()}\n          onMouseLeave={() => this.closeSubmenu()}\n        >\n          <slot name=\"submenu\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{p as s,H as t,c as e,h as i,d as a,t as r}from"./p-bSpXNc5J.js";import{s as o,a as c,g as n,c as l,r as d}from"./p-DWxN44zD.js";const h=()=>`:host{--_track-w:var(--md-switch-track-width, max(28px, calc(52px + var(--md-sys-density-scale, 0) * 6px)));--_track-h:max(16px, calc(var(--md-switch-track-height, 32px) + var(--md-sys-density-scale, 0) * 4px));--_track-border:2px;--_sl:calc(var(--_track-h) + 8px);--_handle-sel:var(--md-switch-handle-size, calc(var(--_track-h) * 0.75));--_handle-unsel:calc(var(--_handle-sel) * 2 / 3);--_handle-press:calc(var(--_handle-sel) * 7 / 6);--_offset-unsel:calc(var(--_track-h) / 2 - var(--_sl) / 2 - var(--_track-border));--_offset-sel:calc(var(--_track-w) - var(--_track-h) / 2 - var(--_sl) / 2 - var(--_track-border));--_spring-spatial: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));--_spring-effects:var(--md-sys-motion-spring-effects-fast-duration, 150ms)     var(--md-sys-motion-spring-effects-fast-easing, cubic-bezier(0.31, 0.94, 0.34, 1.00));--_track-color:var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #E6E0E9));--_track-outline-color:var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747E));--_handle-color:var(--md-switch-handle-color, var(--md-sys-color-outline, #79747E));--_state-layer-color:var(--md-switch-state-layer-color, var(--md-sys-color-on-surface, #1C1B1F));--_icon-color:var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #E6E0E9));display:inline-flex;align-items:center;justify-content:center;min-block-size:max(48px, var(--_track-h));inline-size:var(--_track-w);cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;user-select:none;vertical-align:middle;flex-shrink:0}:host(.md-switch--selected){--_track-color:var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750A4));--_track-outline-color:var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750A4));--_handle-color:var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #FFFFFF));--_state-layer-color:var(--md-switch-state-layer-color, var(--md-sys-color-primary, #6750A4));--_icon-color:var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005D))}:host(:not(.md-switch--selected):hover:not(.md-switch--disabled)){--_handle-color:var(--md-sys-color-on-surface-variant, #49454F);--_track-outline-color:var(--md-sys-color-on-surface, #1C1B1F)}:host(:not(.md-switch--selected):focus-visible:not(.md-switch--disabled)){--_handle-color:var(--md-sys-color-on-surface-variant, #49454F);--_track-outline-color:var(--md-sys-color-on-surface, #1C1B1F)}:host(:not(.md-switch--selected).md-switch--pressed:not(.md-switch--disabled)){--_handle-color:var(--md-sys-color-on-surface-variant, #49454F);--_track-outline-color:var(--md-sys-color-on-surface, #1C1B1F)}:host(.md-switch--selected:hover:not(.md-switch--disabled)){--_handle-color:var(--md-sys-color-primary-container, #EADDFF)}:host(.md-switch--selected:focus-visible:not(.md-switch--disabled)){--_handle-color:var(--md-sys-color-primary-container, #EADDFF)}:host(.md-switch--selected.md-switch--pressed:not(.md-switch--disabled)){--_handle-color:var(--md-sys-color-primary-container, #EADDFF)}.md-switch__track{position:relative;inline-size:var(--_track-w);block-size:var(--_track-h);border-radius:var(--md-sys-shape-corner-full, 9999px);border:var(--_track-border) solid var(--_track-outline-color);background-color:var(--_track-color);box-sizing:border-box;transition:background-color var(--_spring-effects),     border-color var(--_spring-effects)}.md-switch__handle-container{position:absolute;inset-block-start:50%;inset-inline-start:var(--_offset-unsel);inline-size:var(--_sl);block-size:var(--_sl);transform:translateY(-50%);display:flex;align-items:center;justify-content:center;transition:inset-inline-start var(--_spring-spatial);pointer-events:none}:host(.md-switch--selected) .md-switch__handle-container{inset-inline-start:var(--_offset-sel)}.md-switch__state-layer{position:absolute;inset:0;border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--_state-layer-color);opacity:0;transition:opacity var(--_spring-effects);pointer-events:none}:host(:hover:not(.md-switch--disabled)) .md-switch__state-layer{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}:host(:focus-visible:not(.md-switch--disabled)) .md-switch__state-layer{opacity:var(--md-sys-state-focus-state-layer-opacity, 0.12)}:host(:active:not(.md-switch--disabled)) .md-switch__state-layer,:host(.md-switch--pressed:not(.md-switch--disabled)) .md-switch__state-layer{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}.md-switch__handle{position:relative;z-index:1;inline-size:var(--_handle-unsel);block-size:var(--_handle-unsel);border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--_handle-color);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:inline-size var(--_spring-spatial),     block-size var(--_spring-spatial),     background-color var(--_spring-effects)}:host(.md-switch--selected) .md-switch__handle{inline-size:var(--_handle-sel);block-size:var(--_handle-sel)}:host(.md-switch--with-icon:not(.md-switch--selected)) .md-switch__handle{inline-size:var(--_handle-sel);block-size:var(--_handle-sel)}:host(.md-switch--pressed:not(.md-switch--disabled)) .md-switch__handle{inline-size:var(--_handle-press);block-size:var(--_handle-press)}.md-switch__icon{font-size:16px;inline-size:16px;block-size:16px;color:var(--_icon-color);pointer-events:none;line-height:1}.md-switch__handle ::slotted(*){inline-size:16px;block-size:16px;font-size:16px;color:var(--_icon-color);pointer-events:none}.material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;overflow-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host(:focus-visible:not([disabled])) .md-switch__track,:host(.md-switch--focus-ring:not([disabled])) .md-switch__track{outline:3px solid var(--md-switch-focus-ring-color, var(--md-sys-color-secondary, #625B71));outline-offset:2px}:host(.md-switch--disabled){cursor:default;pointer-events:none}:host([soft-disabled]){cursor:default;pointer-events:auto}:host([soft-disabled]) .md-switch__state-layer{display:none}:host(.md-switch--disabled:not(.md-switch--selected)){--_track-color:color-mix(in srgb, var(--md-sys-color-surface-container-highest, #E6E0E9) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);--_track-outline-color:color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);--_handle-color:color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);--_icon-color:color-mix(in srgb, var(--md-sys-color-surface-container-highest, #E6E0E9) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent)}:host(.md-switch--disabled.md-switch--selected){--_track-color:color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);--_track-outline-color:color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);--_handle-color:var(--md-sys-color-surface, #FEF7FF);--_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-switch--disabled) .md-switch__state-layer{display:none}@media (prefers-reduced-motion: reduce){.md-switch__handle,.md-switch__handle-container,.md-switch__track,.md-switch__state-layer{transition-duration:0.01ms !important}}@media (forced-colors: active){.md-switch__track{border-color:CanvasText}.md-switch__handle{background-color:CanvasText}.md-switch__icon{color:Canvas}:host(.md-switch--selected) .md-switch__track{background-color:Highlight;border-color:Highlight}:host(.md-switch--selected) .md-switch__handle{background-color:HighlightText}:host(.md-switch--selected) .md-switch__icon{color:Highlight}:host(:focus-visible:not([disabled])) .md-switch__track,:host(.md-switch--focus-ring:not([disabled])) .md-switch__track{outline-color:Highlight}:host(.md-switch--disabled){opacity:0.5}}: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 m=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.mdInput=e(this,"mdInput",7);this.mdChange=e(this,"mdChange",6);this.mdValidityChange=e(this,"mdValidityChange",5);this.internals=this.attachInternals();this.valueMissingLabel="Please turn this on if you want to proceed.";this.customValidityMessage="";this.selected=false;this.disabled=false;this.softDisabled=false;this.required=false;this.name="";this.value="on";this.icons=false;this.showOnlySelectedIcon=false;this.selectedIcon="check";this.unselectedIcon="close";this.density=0;this.pressed=false;this.programmaticFocus=false;this.initialSelected=false;this.lastValidityKey=null;this.toggle=()=>{if(this.isDisabled)return;const s=!this.selected;const t=this.mdInput.emit({selected:s});if(t.defaultPrevented)return;this.selected=s;this.mdChange.emit({selected:this.selected})};this.handleKeyDown=s=>{if(this.isDisabled)return;if(s.key===" "){s.preventDefault();if(s.repeat)return;this.pressed=true;this.toggle();setTimeout((()=>{this.pressed=false}),150)}};this.handlePointerDown=()=>{if(!this.isDisabled)this.pressed=true};this.handlePointerUp=()=>{this.pressed=false};this.handleBlur=()=>{this.programmaticFocus=false}}get isDisabled(){return this.disabled||this.softDisabled}componentWillLoad(){this.initialSelected=this.selected;this.syncFormValue()}onValueChange(){this.syncFormValue()}formResetCallback(){this.selected=this.initialSelected}async setFocus(){this.programmaticFocus=true;this.el.focus()}syncFormValue(){o(this.internals,this.selected?this.value:null);this.syncValidity()}syncValidity(){c(this.internals,{missing:this.required&&!this.selected,missingMessage:this.valueMissingLabel,customMessage:this.customValidityMessage});this.emitValidityChange()}async getValidity(){return n(this.internals)}emitValidityChange(){const s=n(this.internals);const t=`${s.valid}|${s.validationMessage}`;if(this.lastValidityKey===t)return;const e=this.lastValidityKey!==null;this.lastValidityKey=t;if(e)this.mdValidityChange.emit(s)}async checkValidity(){return l(this.internals)}async reportValidity(){return d(this.internals)}async setCustomValidity(s){this.customValidityMessage=s;this.syncValidity()}render(){const s=this.icons||this.showOnlySelectedIcon;const t=this.icons;const e=this.selected?s:t;return i(a,{key:"59294a5eac12dba6ae727560c8c97c64d86597a8",role:"switch","aria-checked":String(this.selected),"aria-disabled":this.isDisabled?"true":null,"aria-required":this.required?"true":null,tabindex:this.disabled?"-1":"0",class:{"md-switch":true,"md-switch--selected":this.selected,"md-switch--disabled":this.disabled||this.softDisabled,"md-switch--pressed":this.pressed,"md-switch--with-icon":e,"md-switch--focus-ring":this.programmaticFocus},onClick:this.toggle,onKeyDown:this.handleKeyDown,onPointerDown:this.handlePointerDown,onPointerUp:this.handlePointerUp,onPointerLeave:this.handlePointerUp,onPointerCancel:this.handlePointerUp,onBlur:this.handleBlur},i("div",{key:"09a7214653ee84ff186937bde848aa62068739dc",class:"md-switch__track",part:"track"},i("div",{key:"6c64617cc7eb635e09304416403af1d7c616d2c6",class:"md-switch__handle-container"},i("span",{key:"dac2824318a1e395dea6b8f36d5ae75fe302fc7e",class:"md-switch__state-layer",part:"state-layer","aria-hidden":"true"}),i("span",{key:"bb9625af63450459b2914419fc202e587a4a76a9",class:"md-switch__handle",part:"handle"},e&&(this.selected?i("slot",{name:"selected-icon"},i("span",{class:"md-switch__icon material-symbols-outlined",part:"icon","aria-hidden":"true"},this.selectedIcon)):i("slot",{name:"unselected-icon"},i("span",{class:"md-switch__icon material-symbols-outlined",part:"icon","aria-hidden":"true"},this.unselectedIcon)))))))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{selected:[{onValueChange:0}],value:[{onValueChange:0}],required:[{syncValidity:0}],valueMissingLabel:[{syncValidity:0}]}}static get style(){return h()}},[321,"md-switch",{valueMissingLabel:[1,"value-missing-label"],selected:[1540],disabled:[516],softDisabled:[516,"soft-disabled"],required:[516],name:[513],value:[1],icons:[4],showOnlySelectedIcon:[4,"show-only-selected-icon"],selectedIcon:[1,"selected-icon"],unselectedIcon:[1,"unselected-icon"],density:[514],pressed:[32],programmaticFocus:[32],setFocus:[64],getValidity:[64],checkValidity:[64],reportValidity:[64],setCustomValidity:[64]},undefined,{selected:[{onValueChange:0}],value:[{onValueChange:0}],required:[{syncValidity:0}],valueMissingLabel:[{syncValidity:0}]}]);function y(){if(typeof customElements==="undefined"){return}const s=["md-switch"];s.forEach((s=>{switch(s){case"md-switch":if(!customElements.get(r(s))){customElements.define(r(s),m)}break}}))}y();const u=m;const _=y;export{u as MdSwitch,_ as defineCustomElement};
+//# sourceMappingURL=md-switch.js.map