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

package/dist/md3/p-3508d0e0.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as s,H as t,g as a}from"./p-WmvQpZnM.js";const n=()=>`:host{--_color:var(--md-skeleton-color,     var(--md-sys-color-surface-container-highest,       color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) 11%, transparent)));--_highlight:var(--md-skeleton-highlight,     var(--md-sys-color-surface-bright,       color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) 5%, transparent)));--_radius:var(--md-skeleton-radius, var(--md-sys-shape-corner-extra-small, 4px));--_rounded-radius:var(--md-skeleton-rounded-radius, max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px)));--_w:var(--md-skeleton-width, 100%);--_h:var(--md-skeleton-height, max(0.75em, calc(1em + var(--md-sys-density-scale, 0) * 0.05em)));--_size:var(--md-skeleton-size, max(28px, calc(40px + var(--md-sys-density-scale, 0) * 3px)));--_line-gap:var(--md-skeleton-line-gap, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));--_pulse-duration:var(--md-skeleton-pulse-duration, var(--md-sys-motion-duration-extra-long2, 1800ms));--_wave-duration:var(--md-skeleton-wave-duration, var(--md-sys-motion-duration-extra-long2, 1800ms));--_bloom-duration:var(--md-skeleton-bloom-duration, var(--md-sys-motion-spring-spatial-default-duration, 500ms));--_wave-easing:var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));--_pulse-easing:var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));--_bloom-easing:var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));display:block;box-sizing:border-box;inline-size:var(--_w);animation:md-skeleton-bloom var(--_bloom-duration) var(--_bloom-easing) both}@keyframes md-skeleton-bloom{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}.md-skeleton__shape{display:block;background-color:var(--_color);inline-size:100%;block-size:var(--_h)}:host(.md-skeleton--rectangular){--_h:var(--md-skeleton-height, max(80px, calc(120px + var(--md-sys-density-scale, 0) * 8px)))}:host(.md-skeleton--rectangular) .md-skeleton__shape{border-radius:var(--_radius)}:host(.md-skeleton--rounded){--_h:var(--md-skeleton-height, max(80px, calc(120px + var(--md-sys-density-scale, 0) * 8px)))}:host(.md-skeleton--rounded) .md-skeleton__shape{border-radius:var(--_rounded-radius)}:host(.md-skeleton--circular){--_w:var(--md-skeleton-width, var(--_size));--_h:var(--md-skeleton-height, var(--_size));inline-size:var(--_w)}:host(.md-skeleton--circular) .md-skeleton__shape{border-radius:50%;aspect-ratio:1 / 1}:host([full-width]){inline-size:100%}:host([full-height]){block-size:100%;min-block-size:var(--_h)}:host([full-height]) .md-skeleton__shape{block-size:100%}:host([full-height].md-skeleton--circular){inline-size:auto;aspect-ratio:1 / 1}:host([full-height].md-skeleton--circular) .md-skeleton__shape{block-size:100%;inline-size:100%}:host(.md-skeleton--text){display:flex;flex-direction:column;gap:var(--_line-gap)}.md-skeleton__line{display:block;background-color:var(--_color);block-size:var(--_h);inline-size:100%;border-radius:var(--_radius)}.md-skeleton__line--tapered{inline-size:60%}:host([dir="rtl"]) .md-skeleton__line--tapered,:host-context([dir="rtl"]) .md-skeleton__line--tapered{margin-inline-end:auto}@keyframes md-skeleton-pulse{0%{opacity:1}50%{opacity:0.55}100%{opacity:1}}@keyframes md-skeleton-wave{0%{transform:translateX(-100%) skewX(-12deg)}100%{transform:translateX(200%) skewX(-12deg)}}:host(.md-skeleton--anim-pulse) .md-skeleton__shape,:host(.md-skeleton--anim-pulse) .md-skeleton__line{animation:md-skeleton-pulse var(--_pulse-duration) var(--_pulse-easing) infinite}:host(.md-skeleton--anim-wave) .md-skeleton__shape,:host(.md-skeleton--anim-wave) .md-skeleton__line{position:relative;overflow:hidden;isolation:isolate}:host(.md-skeleton--anim-wave) .md-skeleton__shape::after,:host(.md-skeleton--anim-wave) .md-skeleton__line::after{content:'';position:absolute;inset-block:-10%;inset-inline-start:-100%;inline-size:200%;background-image:linear-gradient(     90deg,     transparent 0%,     transparent 35%,     var(--_highlight) 50%,     transparent 65%,     transparent 100%   );transform:translateX(-100%) skewX(-12deg);animation:md-skeleton-wave var(--_wave-duration) var(--_wave-easing) infinite}:host([dir="rtl"].md-skeleton--anim-wave) .md-skeleton__shape::after,:host([dir="rtl"].md-skeleton--anim-wave) .md-skeleton__line::after,:host-context([dir="rtl"]).md-skeleton--anim-wave .md-skeleton__shape::after,:host-context([dir="rtl"]).md-skeleton--anim-wave .md-skeleton__line::after{animation-direction:reverse}@media (prefers-reduced-motion: reduce){:host{animation:none !important}:host(.md-skeleton--anim-pulse) .md-skeleton__shape,:host(.md-skeleton--anim-pulse) .md-skeleton__line{animation-duration:calc(var(--_pulse-duration) * 2)}.md-skeleton__shape::after,.md-skeleton__line::after{animation:none !important;display:none}}@media (forced-colors: active){.md-skeleton__shape,.md-skeleton__line{background-color:GrayText;forced-color-adjust:none}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const i=class{constructor(s){e(this,s);this.variant="text";this.animation="pulse";this.lines=1;this.width="";this.height="";this.fullWidth=false;this.fullHeight=false;this.ariaLabelProp="Loading";this.announce=true;this.density=0;this.prefersReducedMotion=false}componentWillLoad(){if(typeof window!=="undefined"&&window.matchMedia){this.motionQuery=window.matchMedia("(prefers-reduced-motion: reduce)");this.prefersReducedMotion=this.motionQuery.matches}}componentDidLoad(){if(!this.motionQuery)return;this.motionListener=()=>{this.prefersReducedMotion=this.motionQuery.matches};this.motionQuery.addEventListener("change",this.motionListener)}disconnectedCallback(){if(this.motionQuery&&this.motionListener){this.motionQuery.removeEventListener("change",this.motionListener)}}renderTextLines(){const e=Math.max(1,this.lines|0);const t=[];for(let s=0;s<e;s++){t.push({key:s,tapered:e>1&&s===e-1})}return t.map((({key:e,tapered:t})=>s("span",{key:e,part:t?"line line-last":"line",class:{"md-skeleton__line":true,"md-skeleton__line--tapered":t}})))}render(){const e=this.prefersReducedMotion?"none":this.animation;const a={};if(this.width)a["--_w"]=this.width;if(this.height)a["--_h"]=this.height;return s(t,{key:"1ea0f17c9356eee5f371f5f49f420942faeaab2c",class:{"md-skeleton":true,[`md-skeleton--${this.variant}`]:true,[`md-skeleton--anim-${e}`]:true},role:this.announce?"status":undefined,"aria-busy":this.announce?"true":undefined,"aria-live":this.announce?"polite":undefined,"aria-label":this.announce?this.ariaLabelProp:undefined,"aria-hidden":this.announce?undefined:"true",style:a},this.variant==="text"?this.renderTextLines():s("span",{class:"md-skeleton__shape",part:"shape","aria-hidden":"true"}))}get el(){return a(this)}};i.style=n();export{i as md_skeleton};
+//# sourceMappingURL=p-3508d0e0.entry.js.map

package/dist/md3/{p-f31ab454.entry.js.map → p-3508d0e0.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["mdSkeletonCss","MdSkeleton","constructor","hostRef","this","variant","animation","lines","width","height","fullWidth","fullHeight","ariaLabelProp","announce","density","prefersReducedMotion","componentWillLoad","window","matchMedia","motionQuery","matches","componentDidLoad","motionListener","addEventListener","disconnectedCallback","removeEventListener","renderTextLines","count","Math","max","items","i","push","key","tapered","map","h","part","class","render","effectiveAnimation","inlineStyle","Host","role","undefined","style"],"sources":["src/components/md-skeleton/md-skeleton.css?tag=md-skeleton&encapsulation=shadow","src/components/md-skeleton/md-skeleton.tsx"],"sourcesContent":["/* ==========================================================\n   md-skeleton — AWC UI loading placeholder\n   Designed in the MD3 Expressive vocabulary: tonal surface\n   tokens, spring-driven motion, and asymmetric reveal curves.\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-skeleton-color           Base placeholder colour\n     --md-skeleton-highlight       Wave-shimmer highlight colour\n     --md-skeleton-radius          Border-radius for rectangular variant\n     --md-skeleton-rounded-radius  Radius for `variant=\"rounded\"`\n     --md-skeleton-width           Default inline-size (text/rect)\n     --md-skeleton-height          Default block-size (text/rect)\n     --md-skeleton-size            Default size for circular variant\n     --md-skeleton-line-gap        Gap between text rows (lines > 1)\n     --md-skeleton-pulse-duration  Pulse animation duration\n     --md-skeleton-wave-duration   Wave animation duration\n     --md-skeleton-bloom-duration  Initial mount \"bloom\" duration\n\n   CSS PARTS:\n     shape       The rectangular / rounded / circular block.\n     line        Every text line.\n     line-last   The final tapered line in a multi-line block.\n\n   SLOTS:\n     (none)\n   ========================================================== */\n\n:host {\n  /* Use the canonical MD3 surface-container-highest as the\n     placeholder colour. Falls back to a tonal mix of on-surface\n     when the token isn't loaded. */\n  --_color: var(--md-skeleton-color,\n    var(--md-sys-color-surface-container-highest,\n      color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) 11%, transparent)));\n  /* Highlight uses surface-bright (lifted tone) so the wave reads\n     as light passing across a tactile surface. */\n  --_highlight: var(--md-skeleton-highlight,\n    var(--md-sys-color-surface-bright,\n      color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) 5%, transparent)));\n  --_radius: var(--md-skeleton-radius, var(--md-sys-shape-corner-extra-small, 4px));\n  --_rounded-radius: var(--md-skeleton-rounded-radius, max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px)));\n  --_w: var(--md-skeleton-width, 100%);\n  --_h: var(--md-skeleton-height, max(0.75em, calc(1em + var(--md-sys-density-scale, 0) * 0.05em)));\n  --_size: var(--md-skeleton-size, max(28px, calc(40px + var(--md-sys-density-scale, 0) * 3px)));\n  --_line-gap: var(--md-skeleton-line-gap, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));\n  /* MD3 motion tokens — slightly slower than the previous defaults\n     so the rhythm matches expressive components like md-fab and\n     md-slider. */\n  --_pulse-duration: var(--md-skeleton-pulse-duration, var(--md-sys-motion-duration-extra-long2, 1800ms));\n  --_wave-duration: var(--md-skeleton-wave-duration, var(--md-sys-motion-duration-extra-long2, 1800ms));\n  --_bloom-duration: var(--md-skeleton-bloom-duration, var(--md-sys-motion-spring-spatial-default-duration, 500ms));\n  /* Emphasized easing is asymmetric (slow→fast) and reads as\n     \"anticipation\". We use it for the wave because the gradient\n     should accelerate through the middle. */\n  --_wave-easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n  --_pulse-easing: var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  --_bloom-easing: var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));\n\n  display: block;\n  box-sizing: border-box;\n  inline-size: var(--_w);\n\n  /* Bloom entrance — every skeleton mounts with a soft scale-in.\n     The spring easing gives it the M3 Expressive \"settle\" feel. */\n  animation: md-skeleton-bloom var(--_bloom-duration) var(--_bloom-easing) both;\n}\n\n@keyframes md-skeleton-bloom {\n  from {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* ==========================================================\n   1. SHAPE (rectangular / rounded / circular)\n   ========================================================== */\n\n.md-skeleton__shape {\n  display: block;\n  background-color: var(--_color);\n  inline-size: 100%;\n  block-size: var(--_h);\n}\n\n:host(.md-skeleton--rectangular) {\n  --_h: var(--md-skeleton-height, max(80px, calc(120px + var(--md-sys-density-scale, 0) * 8px)));\n}\n:host(.md-skeleton--rectangular) .md-skeleton__shape {\n  border-radius: var(--_radius);\n}\n\n:host(.md-skeleton--rounded) {\n  --_h: var(--md-skeleton-height, max(80px, calc(120px + var(--md-sys-density-scale, 0) * 8px)));\n}\n:host(.md-skeleton--rounded) .md-skeleton__shape {\n  border-radius: var(--_rounded-radius);\n}\n\n:host(.md-skeleton--circular) {\n  --_w: var(--md-skeleton-width, var(--_size));\n  --_h: var(--md-skeleton-height, var(--_size));\n  inline-size: var(--_w);\n}\n:host(.md-skeleton--circular) .md-skeleton__shape {\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n}\n\n/* ==========================================================\n   1b. RESPONSIVE SIZING (full-width / full-height)\n   The skeleton is already 100%-wide by default; these flags make the\n   intent explicit and let it fill its container both ways so it tracks a\n   responsive parent (grid/flex cell, resizable panel, etc.).\n   ========================================================== */\n\n:host([full-width]) {\n  inline-size: 100%;\n}\n\n:host([full-height]) {\n  block-size: 100%;\n  /* Fallback so the skeleton never collapses to 0 (invisible) when the parent\n     has no definite height — `100%` resolves to `auto` there. Keeps the\n     variant's default height as a floor. */\n  min-block-size: var(--_h);\n}\n:host([full-height]) .md-skeleton__shape {\n  block-size: 100%;\n}\n/* A full-height circular: the HOST becomes a square sized off the row height\n   (aspect-ratio derives the width), and the shape fills it as a circle — so it\n   never overflows its inline box and overlaps a sibling. */\n:host([full-height].md-skeleton--circular) {\n  inline-size: auto;\n  aspect-ratio: 1 / 1;\n}\n:host([full-height].md-skeleton--circular) .md-skeleton__shape {\n  block-size: 100%;\n  inline-size: 100%;\n}\n\n/* ==========================================================\n   2. TEXT\n   ========================================================== */\n\n:host(.md-skeleton--text) {\n  display: flex;\n  flex-direction: column;\n  gap: var(--_line-gap);\n}\n\n.md-skeleton__line {\n  display: block;\n  background-color: var(--_color);\n  block-size: var(--_h);\n  inline-size: 100%;\n  border-radius: var(--_radius);\n}\n\n.md-skeleton__line--tapered {\n  inline-size: 60%;\n}\n\n/* RTL: taper the OPPOSITE end so the truncation visually anchors\n   to the start of the paragraph regardless of direction. */\n:host([dir=\"rtl\"]) .md-skeleton__line--tapered,\n:host-context([dir=\"rtl\"]) .md-skeleton__line--tapered {\n  margin-inline-end: auto;\n}\n\n/* ==========================================================\n   3. ANIMATIONS\n   Pulse uses a gentle three-stop curve so the dwell at peak\n   opacity is shorter than the dip — readers shouldn't feel like\n   the content \"disappeared\". Wave skews the gradient ~10deg for\n   the M3 Expressive \"swept light\" feel.\n   ========================================================== */\n\n@keyframes md-skeleton-pulse {\n  0%   { opacity: 1; }\n  50%  { opacity: 0.55; }\n  100% { opacity: 1; }\n}\n\n@keyframes md-skeleton-wave {\n  0%   { transform: translateX(-100%) skewX(-12deg); }\n  100% { transform: translateX(200%) skewX(-12deg); }\n}\n\n:host(.md-skeleton--anim-pulse) .md-skeleton__shape,\n:host(.md-skeleton--anim-pulse) .md-skeleton__line {\n  animation: md-skeleton-pulse var(--_pulse-duration) var(--_pulse-easing) infinite;\n}\n\n:host(.md-skeleton--anim-wave) .md-skeleton__shape,\n:host(.md-skeleton--anim-wave) .md-skeleton__line {\n  position: relative;\n  overflow: hidden;\n  isolation: isolate;\n}\n\n:host(.md-skeleton--anim-wave) .md-skeleton__shape::after,\n:host(.md-skeleton--anim-wave) .md-skeleton__line::after {\n  content: '';\n  position: absolute;\n  /* Inflate the gradient strip so the skew never leaves a visible\n     seam on the block edges. */\n  inset-block: -10%;\n  inset-inline-start: -100%;\n  inline-size: 200%;\n  background-image: linear-gradient(\n    90deg,\n    transparent 0%,\n    transparent 35%,\n    var(--_highlight) 50%,\n    transparent 65%,\n    transparent 100%\n  );\n  transform: translateX(-100%) skewX(-12deg);\n  animation: md-skeleton-wave var(--_wave-duration) var(--_wave-easing) infinite;\n}\n\n/* RTL: flip the wave so it sweeps in the reading direction. */\n:host([dir=\"rtl\"].md-skeleton--anim-wave) .md-skeleton__shape::after,\n:host([dir=\"rtl\"].md-skeleton--anim-wave) .md-skeleton__line::after,\n:host-context([dir=\"rtl\"]).md-skeleton--anim-wave .md-skeleton__shape::after,\n:host-context([dir=\"rtl\"]).md-skeleton--anim-wave .md-skeleton__line::after {\n  animation-direction: reverse;\n}\n\n/* ==========================================================\n   4. REDUCED MOTION\n   We still convey \"loading\" — a single dim → bright cycle at\n   1/3 amplitude, paced 2× slower so it's a clear cue without\n   strobing.\n   ========================================================== */\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    animation: none !important;\n  }\n  :host(.md-skeleton--anim-pulse) .md-skeleton__shape,\n  :host(.md-skeleton--anim-pulse) .md-skeleton__line {\n    animation-duration: calc(var(--_pulse-duration) * 2);\n  }\n  .md-skeleton__shape::after,\n  .md-skeleton__line::after {\n    animation: none !important;\n    display: none;\n  }\n}\n\n/* ==========================================================\n   5. FORCED COLORS\n   ========================================================== */\n@media (forced-colors: active) {\n  .md-skeleton__shape,\n  .md-skeleton__line {\n    background-color: GrayText;\n    forced-color-adjust: none;\n  }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import { Component, Host, h, Prop, State, Element } from '@stencil/core';\n\n@Component({\n  tag: 'md-skeleton',\n  styleUrl: 'md-skeleton.css',\n  shadow: true,\n})\nexport class MdSkeleton {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Shape of the skeleton placeholder.\n   * - `text` — single short rectangle the height of a body line. With\n   *   `lines > 1` the last line gets a tapered width so it reads as a\n   *   \"last line of a paragraph\".\n   * - `rectangular` — fills the inline + block sizes you give it; no\n   *   border-radius unless you set `--md-skeleton-radius`.\n   * - `rounded` — same as `rectangular` but with the MD3 medium corner\n   *   radius (or your override). Good for cards / images.\n   * - `circular` — perfect circle (1:1 aspect). Use for avatar / icon\n   *   placeholders; set `--md-skeleton-size` or `width`+`height`.\n   */\n  @Prop({ reflect: true }) variant: 'text' | 'rectangular' | 'rounded' | 'circular' = 'text';\n\n  /**\n   * Animation style:\n   * - `pulse` (default) — gentle opacity fade in and out.\n   * - `wave` — shimmer gradient sweeps across the surface.\n   * - `none` — static block; useful in `prefers-reduced-motion` opt-outs\n   *   or when the skeleton is purely decorative.\n   */\n  @Prop({ reflect: true }) animation: 'pulse' | 'wave' | 'none' = 'pulse';\n\n  /**\n   * Number of text rows to render. Only meaningful for `variant=\"text\"`.\n   * The last row is tapered to ~60 % width so it reads as the final\n   * line of a paragraph.\n   */\n  @Prop({ reflect: true }) lines: number = 1;\n\n  /**\n   * Inline size (CSS length). Overrides any `--md-skeleton-width`.\n   * Examples: `\"100%\"`, `\"240px\"`, `\"60ch\"`.\n   */\n  @Prop() width: string = '';\n\n  /**\n   * Block size (CSS length). Defaults are `1em` for text, `120px` for\n   * rectangular/rounded, and `40px` for circular.\n   */\n  @Prop() height: string = '';\n\n  /**\n   * Stretch to fill the parent's inline size, overriding `width` /\n   * `--md-skeleton-width`. (The skeleton is already 100%-wide by default; this\n   * makes it explicit and wins over a fixed width — handy in responsive grids.)\n   */\n  @Prop({ attribute: 'full-width', reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Stretch to fill the parent's block size — the placeholder fills its\n   * container's height (which must be definite, e.g. a flex/grid cell). Best\n   * with the shape variants (`rectangular` / `rounded` / `circular`); pairs with\n   * `full-width` for a fully responsive block.\n   */\n  @Prop({ attribute: 'full-height', reflect: true }) fullHeight: boolean = false;\n\n  /**\n   * Accessible label. Defaults to \"Loading…\". Pass a more specific\n   * label when the skeleton represents a recognisable region\n   * (\"Loading article\") for better screen-reader context.\n   */\n  @Prop({ attribute: 'aria-label' }) ariaLabelProp: string = 'Loading';\n\n  /**\n   * Whether to expose the skeleton to assistive tech at all. Set to\n   * `false` when the surrounding region already announces its own\n   * busy state — duplicate announcements get noisy.\n   */\n  @Prop() announce: boolean = true;\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  @State() private prefersReducedMotion: boolean = false;\n\n  private motionQuery?: MediaQueryList;\n  private motionListener?: () => void;\n\n  componentWillLoad() {\n    if (typeof window !== 'undefined' && window.matchMedia) {\n      this.motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n      this.prefersReducedMotion = this.motionQuery.matches;\n    }\n  }\n\n  componentDidLoad() {\n    if (!this.motionQuery) return;\n    this.motionListener = () => {\n      this.prefersReducedMotion = this.motionQuery!.matches;\n    };\n    this.motionQuery.addEventListener('change', this.motionListener);\n  }\n\n  disconnectedCallback() {\n    if (this.motionQuery && this.motionListener) {\n      this.motionQuery.removeEventListener('change', this.motionListener);\n    }\n  }\n\n  private renderTextLines() {\n    const count = Math.max(1, this.lines | 0);\n    const items: Array<{ key: number; tapered: boolean }> = [];\n    for (let i = 0; i < count; i++) {\n      items.push({ key: i, tapered: count > 1 && i === count - 1 });\n    }\n    return items.map(({ key, tapered }) => (\n      <span\n        key={key}\n        part={tapered ? 'line line-last' : 'line'}\n        class={{\n          'md-skeleton__line': true,\n          'md-skeleton__line--tapered': tapered,\n        }}\n      ></span>\n    ));\n  }\n\n  render() {\n    const effectiveAnimation = this.prefersReducedMotion ? 'none' : this.animation;\n\n    const inlineStyle: { [key: string]: string } = {};\n    if (this.width) inlineStyle['--_w'] = this.width;\n    if (this.height) inlineStyle['--_h'] = this.height;\n\n    return (\n      <Host\n        class={{\n          'md-skeleton': true,\n          [`md-skeleton--${this.variant}`]: true,\n          [`md-skeleton--anim-${effectiveAnimation}`]: true,\n        }}\n        role={this.announce ? 'status' : undefined}\n        aria-busy={this.announce ? 'true' : undefined}\n        aria-live={this.announce ? 'polite' : undefined}\n        aria-label={this.announce ? this.ariaLabelProp : undefined}\n        // Decorative skeletons are removed from the a11y tree entirely (and any\n        // stray author-set aria-label with them), so they don't add noise.\n        aria-hidden={this.announce ? undefined : 'true'}\n        style={inlineStyle}\n      >\n        {this.variant === 'text' ? (\n          this.renderTextLines()\n        ) : (\n          <span\n            class=\"md-skeleton__shape\"\n            part=\"shape\"\n            aria-hidden=\"true\"\n          ></span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"oDAAA,MAAMA,EAAgB,IAAM,u/J,MCOfC,EAAU,MALvB,WAAAC,CAAAC,G,UAoB2BC,KAAAC,QAA2D,OAS3DD,KAAAE,UAAuC,QAOvCF,KAAAG,MAAgB,EAMjCH,KAAAI,MAAgB,GAMhBJ,KAAAK,OAAiB,GAOyBL,KAAAM,UAAqB,MAQpBN,KAAAO,WAAsB,MAOtCP,KAAAQ,cAAwB,UAOnDR,KAAAS,SAAoB,KAOHT,KAAAU,QAAiC,EAEzCV,KAAAW,qBAAgC,KA+ElD,CA1EC,iBAAAC,GACE,UAAWC,SAAW,aAAeA,OAAOC,WAAY,CACtDd,KAAKe,YAAcF,OAAOC,WAAW,oCACrCd,KAAKW,qBAAuBX,KAAKe,YAAYC,O,EAIjD,gBAAAC,GACE,IAAKjB,KAAKe,YAAa,OACvBf,KAAKkB,eAAiB,KACpBlB,KAAKW,qBAAuBX,KAAKe,YAAaC,OAAO,EAEvDhB,KAAKe,YAAYI,iBAAiB,SAAUnB,KAAKkB,e,CAGnD,oBAAAE,GACE,GAAIpB,KAAKe,aAAef,KAAKkB,eAAgB,CAC3ClB,KAAKe,YAAYM,oBAAoB,SAAUrB,KAAKkB,e,EAIhD,eAAAI,GACN,MAAMC,EAAQC,KAAKC,IAAI,EAAGzB,KAAKG,MAAQ,GACvC,MAAMuB,EAAkD,GACxD,IAAK,IAAIC,EAAI,EAAGA,EAAIJ,EAAOI,IAAK,CAC9BD,EAAME,KAAK,CAAEC,IAAKF,EAAGG,QAASP,EAAQ,GAAKI,IAAMJ,EAAQ,G,CAE3D,OAAOG,EAAMK,KAAI,EAAGF,MAAKC,aACvBE,EAAA,QACEH,IAAKA,EACLI,KAAMH,EAAU,iBAAmB,OACnCI,MAAO,CACL,oBAAqB,KACrB,6BAA8BJ,M,CAMtC,MAAAK,GACE,MAAMC,EAAqBpC,KAAKW,qBAAuB,OAASX,KAAKE,UAErE,MAAMmC,EAAyC,GAC/C,GAAIrC,KAAKI,MAAOiC,EAAY,QAAUrC,KAAKI,MAC3C,GAAIJ,KAAKK,OAAQgC,EAAY,QAAUrC,KAAKK,OAE5C,OACE2B,EAACM,EAAI,CAAAT,IAAA,2CACHK,MAAO,CACL,cAAe,KACf,CAAC,gBAAgBlC,KAAKC,WAAY,KAClC,CAAC,qBAAqBmC,KAAuB,MAE/CG,KAAMvC,KAAKS,SAAW,SAAW+B,UAAS,YAC/BxC,KAAKS,SAAW,OAAS+B,UAAS,YAClCxC,KAAKS,SAAW,SAAW+B,UAAS,aACnCxC,KAAKS,SAAWT,KAAKQ,cAAgBgC,UAAS,cAG7CxC,KAAKS,SAAW+B,UAAY,OACzCC,MAAOJ,GAENrC,KAAKC,UAAY,OAChBD,KAAKsB,kBAELU,EAAA,QACEE,MAAM,qBACND,KAAK,QAAO,cACA,S","ignoreList":[]}
+{"version":3,"names":["mdSkeletonCss","MdSkeleton","constructor","hostRef","this","variant","animation","lines","width","height","fullWidth","fullHeight","ariaLabelProp","announce","density","prefersReducedMotion","componentWillLoad","window","matchMedia","motionQuery","matches","componentDidLoad","motionListener","addEventListener","disconnectedCallback","removeEventListener","renderTextLines","count","Math","max","items","i","push","key","tapered","map","h","part","class","render","effectiveAnimation","inlineStyle","Host","role","undefined","style"],"sources":["src/components/md-skeleton/md-skeleton.css?tag=md-skeleton&encapsulation=shadow","src/components/md-skeleton/md-skeleton.tsx"],"sourcesContent":["/* ==========================================================\n   md-skeleton — AWC UI loading placeholder\n   Designed in the MD3 Expressive vocabulary: tonal surface\n   tokens, spring-driven motion, and asymmetric reveal curves.\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-skeleton-color           Base placeholder colour\n     --md-skeleton-highlight       Wave-shimmer highlight colour\n     --md-skeleton-radius          Border-radius for rectangular variant\n     --md-skeleton-rounded-radius  Radius for `variant=\"rounded\"`\n     --md-skeleton-width           Default inline-size (text/rect)\n     --md-skeleton-height          Default block-size (text/rect)\n     --md-skeleton-size            Default size for circular variant\n     --md-skeleton-line-gap        Gap between text rows (lines > 1)\n     --md-skeleton-pulse-duration  Pulse animation duration\n     --md-skeleton-wave-duration   Wave animation duration\n     --md-skeleton-bloom-duration  Initial mount \"bloom\" duration\n\n   CSS PARTS:\n     shape       The rectangular / rounded / circular block.\n     line        Every text line.\n     line-last   The final tapered line in a multi-line block.\n\n   SLOTS:\n     (none)\n   ========================================================== */\n\n:host {\n  /* Use the canonical MD3 surface-container-highest as the\n     placeholder colour. Falls back to a tonal mix of on-surface\n     when the token isn't loaded. */\n  --_color: var(--md-skeleton-color,\n    var(--md-sys-color-surface-container-highest,\n      color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) 11%, transparent)));\n  /* Highlight uses surface-bright (lifted tone) so the wave reads\n     as light passing across a tactile surface. */\n  --_highlight: var(--md-skeleton-highlight,\n    var(--md-sys-color-surface-bright,\n      color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) 5%, transparent)));\n  --_radius: var(--md-skeleton-radius, var(--md-sys-shape-corner-extra-small, 4px));\n  --_rounded-radius: var(--md-skeleton-rounded-radius, max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px)));\n  --_w: var(--md-skeleton-width, 100%);\n  --_h: var(--md-skeleton-height, max(0.75em, calc(1em + var(--md-sys-density-scale, 0) * 0.05em)));\n  --_size: var(--md-skeleton-size, max(28px, calc(40px + var(--md-sys-density-scale, 0) * 3px)));\n  --_line-gap: var(--md-skeleton-line-gap, max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px)));\n  /* MD3 motion tokens — slightly slower than the previous defaults\n     so the rhythm matches expressive components like md-fab and\n     md-slider. */\n  --_pulse-duration: var(--md-skeleton-pulse-duration, var(--md-sys-motion-duration-extra-long2, 1800ms));\n  --_wave-duration: var(--md-skeleton-wave-duration, var(--md-sys-motion-duration-extra-long2, 1800ms));\n  --_bloom-duration: var(--md-skeleton-bloom-duration, var(--md-sys-motion-spring-spatial-default-duration, 500ms));\n  /* Emphasized easing is asymmetric (slow→fast) and reads as\n     \"anticipation\". We use it for the wave because the gradient\n     should accelerate through the middle. */\n  --_wave-easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n  --_pulse-easing: var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  --_bloom-easing: var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));\n\n  display: block;\n  box-sizing: border-box;\n  inline-size: var(--_w);\n\n  /* Bloom entrance — every skeleton mounts with a soft scale-in.\n     The spring easing gives it the M3 Expressive \"settle\" feel. */\n  animation: md-skeleton-bloom var(--_bloom-duration) var(--_bloom-easing) both;\n}\n\n@keyframes md-skeleton-bloom {\n  from {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* ==========================================================\n   1. SHAPE (rectangular / rounded / circular)\n   ========================================================== */\n\n.md-skeleton__shape {\n  display: block;\n  background-color: var(--_color);\n  inline-size: 100%;\n  block-size: var(--_h);\n}\n\n:host(.md-skeleton--rectangular) {\n  --_h: var(--md-skeleton-height, max(80px, calc(120px + var(--md-sys-density-scale, 0) * 8px)));\n}\n:host(.md-skeleton--rectangular) .md-skeleton__shape {\n  border-radius: var(--_radius);\n}\n\n:host(.md-skeleton--rounded) {\n  --_h: var(--md-skeleton-height, max(80px, calc(120px + var(--md-sys-density-scale, 0) * 8px)));\n}\n:host(.md-skeleton--rounded) .md-skeleton__shape {\n  border-radius: var(--_rounded-radius);\n}\n\n:host(.md-skeleton--circular) {\n  --_w: var(--md-skeleton-width, var(--_size));\n  --_h: var(--md-skeleton-height, var(--_size));\n  inline-size: var(--_w);\n}\n:host(.md-skeleton--circular) .md-skeleton__shape {\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n}\n\n/* ==========================================================\n   1b. RESPONSIVE SIZING (full-width / full-height)\n   The skeleton is already 100%-wide by default; these flags make the\n   intent explicit and let it fill its container both ways so it tracks a\n   responsive parent (grid/flex cell, resizable panel, etc.).\n   ========================================================== */\n\n:host([full-width]) {\n  inline-size: 100%;\n}\n\n:host([full-height]) {\n  block-size: 100%;\n  /* Fallback so the skeleton never collapses to 0 (invisible) when the parent\n     has no definite height — `100%` resolves to `auto` there. Keeps the\n     variant's default height as a floor. */\n  min-block-size: var(--_h);\n}\n:host([full-height]) .md-skeleton__shape {\n  block-size: 100%;\n}\n/* A full-height circular: the HOST becomes a square sized off the row height\n   (aspect-ratio derives the width), and the shape fills it as a circle — so it\n   never overflows its inline box and overlaps a sibling. */\n:host([full-height].md-skeleton--circular) {\n  inline-size: auto;\n  aspect-ratio: 1 / 1;\n}\n:host([full-height].md-skeleton--circular) .md-skeleton__shape {\n  block-size: 100%;\n  inline-size: 100%;\n}\n\n/* ==========================================================\n   2. TEXT\n   ========================================================== */\n\n:host(.md-skeleton--text) {\n  display: flex;\n  flex-direction: column;\n  gap: var(--_line-gap);\n}\n\n.md-skeleton__line {\n  display: block;\n  background-color: var(--_color);\n  block-size: var(--_h);\n  inline-size: 100%;\n  border-radius: var(--_radius);\n}\n\n.md-skeleton__line--tapered {\n  inline-size: 60%;\n}\n\n/* RTL: taper the OPPOSITE end so the truncation visually anchors\n   to the start of the paragraph regardless of direction. */\n:host([dir=\"rtl\"]) .md-skeleton__line--tapered,\n:host-context([dir=\"rtl\"]) .md-skeleton__line--tapered {\n  margin-inline-end: auto;\n}\n\n/* ==========================================================\n   3. ANIMATIONS\n   Pulse uses a gentle three-stop curve so the dwell at peak\n   opacity is shorter than the dip — readers shouldn't feel like\n   the content \"disappeared\". Wave skews the gradient ~10deg for\n   the M3 Expressive \"swept light\" feel.\n   ========================================================== */\n\n@keyframes md-skeleton-pulse {\n  0%   { opacity: 1; }\n  50%  { opacity: 0.55; }\n  100% { opacity: 1; }\n}\n\n@keyframes md-skeleton-wave {\n  0%   { transform: translateX(-100%) skewX(-12deg); }\n  100% { transform: translateX(200%) skewX(-12deg); }\n}\n\n:host(.md-skeleton--anim-pulse) .md-skeleton__shape,\n:host(.md-skeleton--anim-pulse) .md-skeleton__line {\n  animation: md-skeleton-pulse var(--_pulse-duration) var(--_pulse-easing) infinite;\n}\n\n:host(.md-skeleton--anim-wave) .md-skeleton__shape,\n:host(.md-skeleton--anim-wave) .md-skeleton__line {\n  position: relative;\n  overflow: hidden;\n  isolation: isolate;\n}\n\n:host(.md-skeleton--anim-wave) .md-skeleton__shape::after,\n:host(.md-skeleton--anim-wave) .md-skeleton__line::after {\n  content: '';\n  position: absolute;\n  /* Inflate the gradient strip so the skew never leaves a visible\n     seam on the block edges. */\n  inset-block: -10%;\n  inset-inline-start: -100%;\n  inline-size: 200%;\n  background-image: linear-gradient(\n    90deg,\n    transparent 0%,\n    transparent 35%,\n    var(--_highlight) 50%,\n    transparent 65%,\n    transparent 100%\n  );\n  transform: translateX(-100%) skewX(-12deg);\n  animation: md-skeleton-wave var(--_wave-duration) var(--_wave-easing) infinite;\n}\n\n/* RTL: flip the wave so it sweeps in the reading direction. */\n:host([dir=\"rtl\"].md-skeleton--anim-wave) .md-skeleton__shape::after,\n:host([dir=\"rtl\"].md-skeleton--anim-wave) .md-skeleton__line::after,\n:host-context([dir=\"rtl\"]).md-skeleton--anim-wave .md-skeleton__shape::after,\n:host-context([dir=\"rtl\"]).md-skeleton--anim-wave .md-skeleton__line::after {\n  animation-direction: reverse;\n}\n\n/* ==========================================================\n   4. REDUCED MOTION\n   We still convey \"loading\" — a single dim → bright cycle at\n   1/3 amplitude, paced 2× slower so it's a clear cue without\n   strobing.\n   ========================================================== */\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    animation: none !important;\n  }\n  :host(.md-skeleton--anim-pulse) .md-skeleton__shape,\n  :host(.md-skeleton--anim-pulse) .md-skeleton__line {\n    animation-duration: calc(var(--_pulse-duration) * 2);\n  }\n  .md-skeleton__shape::after,\n  .md-skeleton__line::after {\n    animation: none !important;\n    display: none;\n  }\n}\n\n/* ==========================================================\n   5. FORCED COLORS\n   ========================================================== */\n@media (forced-colors: active) {\n  .md-skeleton__shape,\n  .md-skeleton__line {\n    background-color: GrayText;\n    forced-color-adjust: none;\n  }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import { Component, Host, h, Prop, State, Element } from '@stencil/core';\n\n@Component({\n  tag: 'md-skeleton',\n  styleUrl: 'md-skeleton.css',\n  shadow: true,\n})\nexport class MdSkeleton {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Shape of the skeleton placeholder.\n   * - `text` — single short rectangle the height of a body line. With\n   *   `lines > 1` the last line gets a tapered width so it reads as a\n   *   \"last line of a paragraph\".\n   * - `rectangular` — fills the inline + block sizes you give it; no\n   *   border-radius unless you set `--md-skeleton-radius`.\n   * - `rounded` — same as `rectangular` but with the MD3 medium corner\n   *   radius (or your override). Good for cards / images.\n   * - `circular` — perfect circle (1:1 aspect). Use for avatar / icon\n   *   placeholders; set `--md-skeleton-size` or `width`+`height`.\n   */\n  @Prop({ reflect: true }) variant: 'text' | 'rectangular' | 'rounded' | 'circular' = 'text';\n\n  /**\n   * Animation style:\n   * - `pulse` (default) — gentle opacity fade in and out.\n   * - `wave` — shimmer gradient sweeps across the surface.\n   * - `none` — static block; useful in `prefers-reduced-motion` opt-outs\n   *   or when the skeleton is purely decorative.\n   */\n  @Prop({ reflect: true }) animation: 'pulse' | 'wave' | 'none' = 'pulse';\n\n  /**\n   * Number of text rows to render. Only meaningful for `variant=\"text\"`.\n   * The last row is tapered to ~60 % width so it reads as the final\n   * line of a paragraph.\n   */\n  @Prop({ reflect: true }) lines: number = 1;\n\n  /**\n   * Inline size (CSS length). Overrides any `--md-skeleton-width`.\n   * Examples: `\"100%\"`, `\"240px\"`, `\"60ch\"`.\n   */\n  @Prop() width: string = '';\n\n  /**\n   * Block size (CSS length). Defaults are `1em` for text, `120px` for\n   * rectangular/rounded, and `40px` for circular.\n   */\n  @Prop() height: string = '';\n\n  /**\n   * Stretch to fill the parent's inline size, overriding `width` /\n   * `--md-skeleton-width`. (The skeleton is already 100%-wide by default; this\n   * makes it explicit and wins over a fixed width — handy in responsive grids.)\n   */\n  @Prop({ attribute: 'full-width', reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Stretch to fill the parent's block size — the placeholder fills its\n   * container's height (which must be definite, e.g. a flex/grid cell). Best\n   * with the shape variants (`rectangular` / `rounded` / `circular`); pairs with\n   * `full-width` for a fully responsive block.\n   */\n  @Prop({ attribute: 'full-height', reflect: true }) fullHeight: boolean = false;\n\n  /**\n   * Accessible label. Defaults to \"Loading…\". Pass a more specific\n   * label when the skeleton represents a recognisable region\n   * (\"Loading article\") for better screen-reader context.\n   */\n  @Prop({ attribute: 'aria-label' }) ariaLabelProp: string = 'Loading';\n\n  /**\n   * Whether to expose the skeleton to assistive tech at all. Set to\n   * `false` when the surrounding region already announces its own\n   * busy state — duplicate announcements get noisy.\n   */\n  @Prop() announce: boolean = true;\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  @State() private prefersReducedMotion: boolean = false;\n\n  private motionQuery?: MediaQueryList;\n  private motionListener?: () => void;\n\n  componentWillLoad() {\n    if (typeof window !== 'undefined' && window.matchMedia) {\n      this.motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n      this.prefersReducedMotion = this.motionQuery.matches;\n    }\n  }\n\n  componentDidLoad() {\n    if (!this.motionQuery) return;\n    this.motionListener = () => {\n      this.prefersReducedMotion = this.motionQuery!.matches;\n    };\n    this.motionQuery.addEventListener('change', this.motionListener);\n  }\n\n  disconnectedCallback() {\n    if (this.motionQuery && this.motionListener) {\n      this.motionQuery.removeEventListener('change', this.motionListener);\n    }\n  }\n\n  private renderTextLines() {\n    const count = Math.max(1, this.lines | 0);\n    const items: Array<{ key: number; tapered: boolean }> = [];\n    for (let i = 0; i < count; i++) {\n      items.push({ key: i, tapered: count > 1 && i === count - 1 });\n    }\n    return items.map(({ key, tapered }) => (\n      <span\n        key={key}\n        part={tapered ? 'line line-last' : 'line'}\n        class={{\n          'md-skeleton__line': true,\n          'md-skeleton__line--tapered': tapered,\n        }}\n      ></span>\n    ));\n  }\n\n  render() {\n    const effectiveAnimation = this.prefersReducedMotion ? 'none' : this.animation;\n\n    const inlineStyle: { [key: string]: string } = {};\n    if (this.width) inlineStyle['--_w'] = this.width;\n    if (this.height) inlineStyle['--_h'] = this.height;\n\n    return (\n      <Host\n        class={{\n          'md-skeleton': true,\n          [`md-skeleton--${this.variant}`]: true,\n          [`md-skeleton--anim-${effectiveAnimation}`]: true,\n        }}\n        role={this.announce ? 'status' : undefined}\n        aria-busy={this.announce ? 'true' : undefined}\n        aria-live={this.announce ? 'polite' : undefined}\n        aria-label={this.announce ? this.ariaLabelProp : undefined}\n        // Decorative skeletons are removed from the a11y tree entirely (and any\n        // stray author-set aria-label with them), so they don't add noise.\n        aria-hidden={this.announce ? undefined : 'true'}\n        style={inlineStyle}\n      >\n        {this.variant === 'text' ? (\n          this.renderTextLines()\n        ) : (\n          <span\n            class=\"md-skeleton__shape\"\n            part=\"shape\"\n            aria-hidden=\"true\"\n          ></span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,IAAM,u/J,MCOfC,EAAU,MALvB,WAAAC,CAAAC,G,UAoB2BC,KAAAC,QAA2D,OAS3DD,KAAAE,UAAuC,QAOvCF,KAAAG,MAAgB,EAMjCH,KAAAI,MAAgB,GAMhBJ,KAAAK,OAAiB,GAOyBL,KAAAM,UAAqB,MAQpBN,KAAAO,WAAsB,MAOtCP,KAAAQ,cAAwB,UAOnDR,KAAAS,SAAoB,KAOHT,KAAAU,QAAiC,EAEzCV,KAAAW,qBAAgC,KA+ElD,CA1EC,iBAAAC,GACE,UAAWC,SAAW,aAAeA,OAAOC,WAAY,CACtDd,KAAKe,YAAcF,OAAOC,WAAW,oCACrCd,KAAKW,qBAAuBX,KAAKe,YAAYC,O,EAIjD,gBAAAC,GACE,IAAKjB,KAAKe,YAAa,OACvBf,KAAKkB,eAAiB,KACpBlB,KAAKW,qBAAuBX,KAAKe,YAAaC,OAAO,EAEvDhB,KAAKe,YAAYI,iBAAiB,SAAUnB,KAAKkB,e,CAGnD,oBAAAE,GACE,GAAIpB,KAAKe,aAAef,KAAKkB,eAAgB,CAC3ClB,KAAKe,YAAYM,oBAAoB,SAAUrB,KAAKkB,e,EAIhD,eAAAI,GACN,MAAMC,EAAQC,KAAKC,IAAI,EAAGzB,KAAKG,MAAQ,GACvC,MAAMuB,EAAkD,GACxD,IAAK,IAAIC,EAAI,EAAGA,EAAIJ,EAAOI,IAAK,CAC9BD,EAAME,KAAK,CAAEC,IAAKF,EAAGG,QAASP,EAAQ,GAAKI,IAAMJ,EAAQ,G,CAE3D,OAAOG,EAAMK,KAAI,EAAGF,MAAKC,aACvBE,EAAA,QACEH,IAAKA,EACLI,KAAMH,EAAU,iBAAmB,OACnCI,MAAO,CACL,oBAAqB,KACrB,6BAA8BJ,M,CAMtC,MAAAK,GACE,MAAMC,EAAqBpC,KAAKW,qBAAuB,OAASX,KAAKE,UAErE,MAAMmC,EAAyC,GAC/C,GAAIrC,KAAKI,MAAOiC,EAAY,QAAUrC,KAAKI,MAC3C,GAAIJ,KAAKK,OAAQgC,EAAY,QAAUrC,KAAKK,OAE5C,OACE2B,EAACM,EAAI,CAAAT,IAAA,2CACHK,MAAO,CACL,cAAe,KACf,CAAC,gBAAgBlC,KAAKC,WAAY,KAClC,CAAC,qBAAqBmC,KAAuB,MAE/CG,KAAMvC,KAAKS,SAAW,SAAW+B,UAAS,YAC/BxC,KAAKS,SAAW,OAAS+B,UAAS,YAClCxC,KAAKS,SAAW,SAAW+B,UAAS,aACnCxC,KAAKS,SAAWT,KAAKQ,cAAgBgC,UAAS,cAG7CxC,KAAKS,SAAW+B,UAAY,OACzCC,MAAOJ,GAENrC,KAAKC,UAAY,OAChBD,KAAKsB,kBAELU,EAAA,QACEE,MAAM,qBACND,KAAK,QAAO,cACA,S","ignoreList":[]}

package/dist/md3/{p-b34d385b.entry.js → p-35b05b45.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as a,H as s}from"./p-DTaX19_O.js";const i=()=>`:host{display:block;min-inline-size:0}.md-tab-panel__body{min-inline-size:0}:host(:not([active])) .md-tab-panel__body{visibility:hidden}:host(:focus-visible){outline:3px solid var(--md-sys-color-primary, #6750A4);outline-offset:2px;border-radius:4px}`;const t=class{constructor(a){e(this,a);this.active=false}render(){return a(s,{key:"b42e5a3e5514eb1b6832aa5c52fbf59d85f434de",role:"tabpanel",tabindex:this.active?"0":"-1"},a("div",{key:"ba25423707fad30b1c1a73223cc8632f2fb1f8a9",class:"md-tab-panel__body"},a("slot",{key:"de8288a5547d7d9e545996edb4350763d5fbe9ea"})))}};t.style=i();export{t as md_tab_panel};
-//# sourceMappingURL=p-b34d385b.entry.js.map
+import{r as e,h as a,H as s}from"./p-WmvQpZnM.js";const i=()=>`:host{display:block;min-inline-size:0}.md-tab-panel__body{min-inline-size:0}:host(:not([active])) .md-tab-panel__body{visibility:hidden}:host(:focus-visible){outline:3px solid var(--md-sys-color-primary, #6750A4);outline-offset:2px;border-radius:4px}`;const t=class{constructor(a){e(this,a);this.active=false}render(){return a(s,{key:"b42e5a3e5514eb1b6832aa5c52fbf59d85f434de",role:"tabpanel",tabindex:this.active?"0":"-1"},a("div",{key:"ba25423707fad30b1c1a73223cc8632f2fb1f8a9",class:"md-tab-panel__body"},a("slot",{key:"de8288a5547d7d9e545996edb4350763d5fbe9ea"})))}};t.style=i();export{t as md_tab_panel};
+//# sourceMappingURL=p-35b05b45.entry.js.map

package/dist/md3/{p-c2dd8c8c.entry.js → p-38e9a583.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as s,H as i,a as e}from"./p-DTaX19_O.js";const n=()=>`:host{display:grid;min-inline-size:0}::slotted(md-tab-panel){grid-area:1 / 1}:host([sizing='active']) ::slotted(md-tab-panel:not([active])){display:none}`;const a=class{constructor(s){t(this,s);this.for="";this.sizing="stable";this.tabsEl=null;this.hasLoaded=false;this.uid=`md-tab-panels-${Math.random().toString(36).slice(2,7)}`;this.onTabChange=t=>{const s=t.detail;if(s&&typeof s.index==="number")this.show(s.index)}}onForChange(){this.unwire();this.wire()}componentDidLoad(){this.hasLoaded=true;const t=this.el.shadowRoot?.querySelector("slot");t?.addEventListener("slotchange",(()=>this.sync()));this.wire()}connectedCallback(){if(this.hasLoaded)queueMicrotask((()=>this.wire()))}disconnectedCallback(){this.unwire()}findTabs(){if(this.for){return this.el.getRootNode().getElementById?.(this.for)??document.getElementById(this.for)}let t=this.el.previousElementSibling;while(t){if(t.tagName==="MD-TABS")return t;t=t.previousElementSibling}return null}wire(){const t=this.findTabs();if(this.tabsEl&&this.tabsEl!==t)this.unwire();this.tabsEl=t;t?.addEventListener("mdTabChange",this.onTabChange);this.sync()}unwire(){this.tabsEl?.removeEventListener("mdTabChange",this.onTabChange);this.tabsEl=null}panels(){const t=this.el.shadowRoot?.querySelector("slot");return(t?.assignedElements({flatten:true})??[]).filter((t=>t.tagName==="MD-TAB-PANEL"))}sync(){const t=this.tabsEl;const s=t?Array.from(t.querySelectorAll("md-tab")):[];this.panels().forEach(((t,i)=>{if(!t.id)t.id=`${this.uid}-panel-${i}`;const e=s[i];if(e){if(!e.id)e.id=`${this.uid}-tab-${i}`;t.setAttribute("aria-labelledby",e.id);if(!e.hasAttribute("controls")&&!e.hasAttribute("aria-controls")){e.setAttribute("controls",t.id)}}}));const i=typeof t?.activeTabIndex==="number"?t.activeTabIndex:parseInt(t?.getAttribute("active-tab-index")??"0",10)||0;this.show(i)}show(t){this.panels().forEach(((s,i)=>{const e=i===t;if(e){s.setAttribute("active","");s.removeAttribute("inert")}else{s.removeAttribute("active");s.setAttribute("inert","")}}))}render(){return s(i,{key:"176366b596e7c98b35d37a6f2b315107b24eb408"},s("slot",{key:"919afd6c35c53aeabe49d8f9879fb9042c5de19e"}))}get el(){return e(this)}static get watchers(){return{for:[{onForChange:0}]}}};a.style=n();export{a as md_tab_panels};
-//# sourceMappingURL=p-c2dd8c8c.entry.js.map
+import{r as t,h as s,H as i,g as e}from"./p-WmvQpZnM.js";const n=()=>`:host{display:grid;min-inline-size:0}::slotted(md-tab-panel){grid-area:1 / 1}:host([sizing='active']) ::slotted(md-tab-panel:not([active])){display:none}`;const a=class{constructor(s){t(this,s);this.for="";this.sizing="stable";this.tabsEl=null;this.hasLoaded=false;this.uid=`md-tab-panels-${Math.random().toString(36).slice(2,7)}`;this.onTabChange=t=>{const s=t.detail;if(s&&typeof s.index==="number")this.show(s.index)}}onForChange(){this.unwire();this.wire()}componentDidLoad(){this.hasLoaded=true;const t=this.el.shadowRoot?.querySelector("slot");t?.addEventListener("slotchange",(()=>this.sync()));this.wire()}connectedCallback(){if(this.hasLoaded)queueMicrotask((()=>this.wire()))}disconnectedCallback(){this.unwire()}findTabs(){if(this.for){return this.el.getRootNode().getElementById?.(this.for)??document.getElementById(this.for)}let t=this.el.previousElementSibling;while(t){if(t.tagName==="MD-TABS")return t;t=t.previousElementSibling}return null}wire(){const t=this.findTabs();if(this.tabsEl&&this.tabsEl!==t)this.unwire();this.tabsEl=t;t?.addEventListener("mdTabChange",this.onTabChange);this.sync()}unwire(){this.tabsEl?.removeEventListener("mdTabChange",this.onTabChange);this.tabsEl=null}panels(){const t=this.el.shadowRoot?.querySelector("slot");return(t?.assignedElements({flatten:true})??[]).filter((t=>t.tagName==="MD-TAB-PANEL"))}sync(){const t=this.tabsEl;const s=t?Array.from(t.querySelectorAll("md-tab")):[];this.panels().forEach(((t,i)=>{if(!t.id)t.id=`${this.uid}-panel-${i}`;const e=s[i];if(e){if(!e.id)e.id=`${this.uid}-tab-${i}`;t.setAttribute("aria-labelledby",e.id);if(!e.hasAttribute("controls")&&!e.hasAttribute("aria-controls")){e.setAttribute("controls",t.id)}}}));const i=typeof t?.activeTabIndex==="number"?t.activeTabIndex:parseInt(t?.getAttribute("active-tab-index")??"0",10)||0;this.show(i)}show(t){this.panels().forEach(((s,i)=>{const e=i===t;if(e){s.setAttribute("active","");s.removeAttribute("inert")}else{s.removeAttribute("active");s.setAttribute("inert","")}}))}render(){return s(i,{key:"176366b596e7c98b35d37a6f2b315107b24eb408"},s("slot",{key:"919afd6c35c53aeabe49d8f9879fb9042c5de19e"}))}get el(){return e(this)}static get watchers(){return{for:[{onForChange:0}]}}};a.style=n();export{a as md_tab_panels};
+//# sourceMappingURL=p-38e9a583.entry.js.map

package/dist/md3/{p-3cce1de3.entry.js → p-38f82d34.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as i,h as t,H as s,a as n}from"./p-DTaX19_O.js";import{B as r}from"./p-Bx6--dQF.js";import{L as a}from"./p-RLxbNqRv.js";import{b as o,a as h,p as l}from"./p-DvOKnoqK.js";import"./p-DzPKu-Ma.js";const c=()=>`:host{--_block-size:var(--md-sparkline-block-size, 28px);--_inline-size:var(--md-sparkline-inline-size, 100%);--_min-inline-size:var(--md-sparkline-min-inline-size, 32px);display:inline-block;vertical-align:middle;inline-size:var(--_inline-size);block-size:var(--_block-size);min-inline-size:var(--_min-inline-size);line-height:1}.md-sparkline__canvas{inline-size:100%;block-size:100%}@media (forced-colors: active){:host{forced-color-adjust:auto}}`;const d=class{constructor(t){e(this,t);this.mdSparkClick=i(this,"mdSparkClick",7);this.mdReady=i(this,"mdReady",7);this.data=[];this.variant="line";this.color="primary";this.curve="smooth";this.showTooltip=true;this.showMarks="extremes";this.noAnimation=false;this.cornerRadius=2;this.mounted=false;this.engine=null;this.engineKind=null;this.ro=null;this.bindChartHost=e=>{this.chartHost=e}}componentDidLoad(){this.initChart();if(typeof window!=="undefined"&&window.matchMedia){this.themeMql=window.matchMedia("(prefers-color-scheme: dark)");this.themeListener=()=>this.applyEngine();this.themeMql.addEventListener?.("change",this.themeListener)}}disconnectedCallback(){this.ro?.disconnect();this.ro=null;this.engine?.dispose();this.engine=null;if(this.themeMql&&this.themeListener){this.themeMql.removeEventListener?.("change",this.themeListener);this.themeListener=undefined;this.themeMql=undefined}}onAnyPropChange(){this.applyEngine()}async resize(){this.engine?.resize()}async getInstance(){return this.engine}initChart(){if(!this.chartHost)return;this.applyEngine();if(this.engine&&!this.ro&&typeof ResizeObserver!=="undefined"){this.ro=new ResizeObserver((()=>this.engine?.resize()));this.ro.observe(this.chartHost)}this.mounted=true;this.mdReady.emit()}ensureEngine(){if(!this.chartHost)return false;const e=this.variant==="bar"?"bar":"line";if(this.engine&&this.engineKind===e)return true;try{this.engine?.dispose();this.engine=e==="bar"?new r(this.chartHost):new a(this.chartHost);this.engineKind=e}catch{this.engine=null;this.engineKind=null;return false}return true}markIndices(){const e=[];this.data.forEach(((i,t)=>{if(typeof i==="number")e.push({d:i,i:t})}));if(!e.length||this.showMarks==="none")return[];if(this.showMarks==="all")return e.map((e=>e.i));const i=new Set;if(this.showMarks==="extremes"){let t=e[0];let s=e[0];for(const i of e){if(i.d>t.d)t=i;if(i.d<s.d)s=i}i.add(t.i);i.add(s.i)}if(this.showMarks==="edges"){i.add(e[0].i);i.add(e[e.length-1].i)}return[...i]}buildEngineTheme(e){return{background:"transparent",textColor:e.textColor,textColorMuted:e.textColorMuted,axisLineColor:e.axisLineColor,gridLineColor:e.gridColor,surface:e.surface,fontFamily:e.fontFamily,labelSize:e.labelSize,titleSize:e.titleSize}}buildLineSpec(e){const i=e=>this.valueFormatter?this.valueFormatter(e):e.toLocaleString();const t=this.referenceAreas?.map((i=>({from:i.from,to:i.to,color:u(i.color??e,i.color?.18:.12)})));return{series:[{label:"",color:e,data:this.data,curve:this.curve,connectNulls:true,showMarks:false,hidden:false,markIndices:this.markIndices(),lineWidth:this.lineWidth,markSize:this.markSize}],xValues:this.labels??this.data.map(((e,i)=>i)),xScale:"category",xFormatter:e=>String(e),xHidden:true,yScale:"value",yMin:this.min,yMax:this.max,yFormatter:i,yHidden:true,stack:"none",area:this.variant==="area",fillOpacity:.45,legend:"none",compact:true,refBands:t,animate:!this.noAnimation}}buildBarSpec(e){const i=e=>this.valueFormatter?this.valueFormatter(e):e.toLocaleString();return{series:[{label:"",color:e,data:this.data,hidden:false}],categories:this.labels??this.data.map(((e,i)=>i)),categoryFormatter:e=>String(e),categoryHidden:true,valueScale:"value",valueMin:this.min,valueMax:this.max,valueFormatter:i,valueHidden:true,stack:"none",horizontal:false,categoryGapRatio:.2,barGapRatio:0,barWidth:this.barWidth,cornerRadius:this.cornerRadius,showLabels:false,legend:"none",compact:true,animate:!this.noAnimation}}applyEngine(){if(!this.ensureEngine()||!this.engine)return;const e=o(this.el);const i=h(this.el,this.color,l(e.palette,0));const t=this.buildEngineTheme(e);const s=(e,i)=>{const t=this.data[i];this.mdSparkClick.emit({dataIndex:i,value:typeof t==="number"?t:null})};if(this.engine instanceof r){this.engine.setSpec(this.buildBarSpec(i),t,{onPointClick:s})}else{this.engine.setSpec(this.buildLineSpec(i),t,{onPointClick:s})}this.engine.setHoverEnabled(this.showTooltip)}render(){const e=this.data.filter((e=>typeof e==="number"));const i=e.length?e[e.length-1]:null;const n=e.length?Math.max(...e):null;const r=e.length?Math.min(...e):null;const a=this.valueFormatter??(e=>e==null?"—":e.toLocaleString());const o=(this.referenceAreas??[]).map((e=>e.label)).filter((e=>!!e));const h=o.length?` Highlighted: ${o.join(", ")}.`:"";const l=e.length?`Sparkline, latest ${a(i)}, range ${a(r)} to ${a(n)}.${h}`:`Sparkline, no data.${h}`;return t(s,{key:"2d582e0046776ed48114cf0f5e9e1a49cf8c5f78",class:{"md-sparkline":true,"md-sparkline--mounted":this.mounted,[`md-sparkline--${this.variant}`]:true},role:"img","aria-label":l,style:this.heightProp?{blockSize:this.heightProp}:undefined},t("div",{key:"921430a9cb40fd37d2bb7c4595668f607bc0eed4",class:"md-sparkline__canvas",part:"canvas",ref:e=>this.bindChartHost(e)}))}get el(){return n(this)}static get watchers(){return{data:[{onAnyPropChange:0}],labels:[{onAnyPropChange:0}],variant:[{onAnyPropChange:0}],color:[{onAnyPropChange:0}],curve:[{onAnyPropChange:0}],showTooltip:[{onAnyPropChange:0}],showMarks:[{onAnyPropChange:0}],referenceAreas:[{onAnyPropChange:0}],cornerRadius:[{onAnyPropChange:0}],min:[{onAnyPropChange:0}],max:[{onAnyPropChange:0}],lineWidth:[{onAnyPropChange:0}],markSize:[{onAnyPropChange:0}],barWidth:[{onAnyPropChange:0}]}}};function u(e,i){if(e.startsWith("#")){let t=e.slice(1);if(t.length===3)t=t.split("").map((e=>e+e)).join("");const s=parseInt(t.slice(0,2),16);const n=parseInt(t.slice(2,4),16);const r=parseInt(t.slice(4,6),16);return`rgba(${s}, ${n}, ${r}, ${i})`}if(e.startsWith("rgb("))return e.replace(/^rgb\(/,"rgba(").replace(/\)$/,`, ${i})`);return e}d.style=c();export{d as md_sparkline};
-//# sourceMappingURL=p-3cce1de3.entry.js.map
+import{r as e,c as i,h as t,H as s,g as n}from"./p-WmvQpZnM.js";import{B as r}from"./p-Bx6--dQF.js";import{L as a}from"./p-RLxbNqRv.js";import{b as o,a as h,p as l}from"./p-DvOKnoqK.js";import"./p-DzPKu-Ma.js";const c=()=>`:host{--_block-size:var(--md-sparkline-block-size, 28px);--_inline-size:var(--md-sparkline-inline-size, 100%);--_min-inline-size:var(--md-sparkline-min-inline-size, 32px);display:inline-block;vertical-align:middle;inline-size:var(--_inline-size);block-size:var(--_block-size);min-inline-size:var(--_min-inline-size);line-height:1}.md-sparkline__canvas{inline-size:100%;block-size:100%}@media (forced-colors: active){:host{forced-color-adjust:auto}}`;const d=class{constructor(t){e(this,t);this.mdSparkClick=i(this,"mdSparkClick",7);this.mdReady=i(this,"mdReady",7);this.data=[];this.variant="line";this.color="primary";this.curve="smooth";this.showTooltip=true;this.showMarks="extremes";this.noAnimation=false;this.cornerRadius=2;this.mounted=false;this.engine=null;this.engineKind=null;this.ro=null;this.bindChartHost=e=>{this.chartHost=e}}componentDidLoad(){this.initChart();if(typeof window!=="undefined"&&window.matchMedia){this.themeMql=window.matchMedia("(prefers-color-scheme: dark)");this.themeListener=()=>this.applyEngine();this.themeMql.addEventListener?.("change",this.themeListener)}}disconnectedCallback(){this.ro?.disconnect();this.ro=null;this.engine?.dispose();this.engine=null;if(this.themeMql&&this.themeListener){this.themeMql.removeEventListener?.("change",this.themeListener);this.themeListener=undefined;this.themeMql=undefined}}onAnyPropChange(){this.applyEngine()}async resize(){this.engine?.resize()}async getInstance(){return this.engine}initChart(){if(!this.chartHost)return;this.applyEngine();if(this.engine&&!this.ro&&typeof ResizeObserver!=="undefined"){this.ro=new ResizeObserver((()=>this.engine?.resize()));this.ro.observe(this.chartHost)}this.mounted=true;this.mdReady.emit()}ensureEngine(){if(!this.chartHost)return false;const e=this.variant==="bar"?"bar":"line";if(this.engine&&this.engineKind===e)return true;try{this.engine?.dispose();this.engine=e==="bar"?new r(this.chartHost):new a(this.chartHost);this.engineKind=e}catch{this.engine=null;this.engineKind=null;return false}return true}markIndices(){const e=[];this.data.forEach(((i,t)=>{if(typeof i==="number")e.push({d:i,i:t})}));if(!e.length||this.showMarks==="none")return[];if(this.showMarks==="all")return e.map((e=>e.i));const i=new Set;if(this.showMarks==="extremes"){let t=e[0];let s=e[0];for(const i of e){if(i.d>t.d)t=i;if(i.d<s.d)s=i}i.add(t.i);i.add(s.i)}if(this.showMarks==="edges"){i.add(e[0].i);i.add(e[e.length-1].i)}return[...i]}buildEngineTheme(e){return{background:"transparent",textColor:e.textColor,textColorMuted:e.textColorMuted,axisLineColor:e.axisLineColor,gridLineColor:e.gridColor,surface:e.surface,fontFamily:e.fontFamily,labelSize:e.labelSize,titleSize:e.titleSize}}buildLineSpec(e){const i=e=>this.valueFormatter?this.valueFormatter(e):e.toLocaleString();const t=this.referenceAreas?.map((i=>({from:i.from,to:i.to,color:u(i.color??e,i.color?.18:.12)})));return{series:[{label:"",color:e,data:this.data,curve:this.curve,connectNulls:true,showMarks:false,hidden:false,markIndices:this.markIndices(),lineWidth:this.lineWidth,markSize:this.markSize}],xValues:this.labels??this.data.map(((e,i)=>i)),xScale:"category",xFormatter:e=>String(e),xHidden:true,yScale:"value",yMin:this.min,yMax:this.max,yFormatter:i,yHidden:true,stack:"none",area:this.variant==="area",fillOpacity:.45,legend:"none",compact:true,refBands:t,animate:!this.noAnimation}}buildBarSpec(e){const i=e=>this.valueFormatter?this.valueFormatter(e):e.toLocaleString();return{series:[{label:"",color:e,data:this.data,hidden:false}],categories:this.labels??this.data.map(((e,i)=>i)),categoryFormatter:e=>String(e),categoryHidden:true,valueScale:"value",valueMin:this.min,valueMax:this.max,valueFormatter:i,valueHidden:true,stack:"none",horizontal:false,categoryGapRatio:.2,barGapRatio:0,barWidth:this.barWidth,cornerRadius:this.cornerRadius,showLabels:false,legend:"none",compact:true,animate:!this.noAnimation}}applyEngine(){if(!this.ensureEngine()||!this.engine)return;const e=o(this.el);const i=h(this.el,this.color,l(e.palette,0));const t=this.buildEngineTheme(e);const s=(e,i)=>{const t=this.data[i];this.mdSparkClick.emit({dataIndex:i,value:typeof t==="number"?t:null})};if(this.engine instanceof r){this.engine.setSpec(this.buildBarSpec(i),t,{onPointClick:s})}else{this.engine.setSpec(this.buildLineSpec(i),t,{onPointClick:s})}this.engine.setHoverEnabled(this.showTooltip)}render(){const e=this.data.filter((e=>typeof e==="number"));const i=e.length?e[e.length-1]:null;const n=e.length?Math.max(...e):null;const r=e.length?Math.min(...e):null;const a=this.valueFormatter??(e=>e==null?"—":e.toLocaleString());const o=(this.referenceAreas??[]).map((e=>e.label)).filter((e=>!!e));const h=o.length?` Highlighted: ${o.join(", ")}.`:"";const l=e.length?`Sparkline, latest ${a(i)}, range ${a(r)} to ${a(n)}.${h}`:`Sparkline, no data.${h}`;return t(s,{key:"2d582e0046776ed48114cf0f5e9e1a49cf8c5f78",class:{"md-sparkline":true,"md-sparkline--mounted":this.mounted,[`md-sparkline--${this.variant}`]:true},role:"img","aria-label":l,style:this.heightProp?{blockSize:this.heightProp}:undefined},t("div",{key:"921430a9cb40fd37d2bb7c4595668f607bc0eed4",class:"md-sparkline__canvas",part:"canvas",ref:e=>this.bindChartHost(e)}))}get el(){return n(this)}static get watchers(){return{data:[{onAnyPropChange:0}],labels:[{onAnyPropChange:0}],variant:[{onAnyPropChange:0}],color:[{onAnyPropChange:0}],curve:[{onAnyPropChange:0}],showTooltip:[{onAnyPropChange:0}],showMarks:[{onAnyPropChange:0}],referenceAreas:[{onAnyPropChange:0}],cornerRadius:[{onAnyPropChange:0}],min:[{onAnyPropChange:0}],max:[{onAnyPropChange:0}],lineWidth:[{onAnyPropChange:0}],markSize:[{onAnyPropChange:0}],barWidth:[{onAnyPropChange:0}]}}};function u(e,i){if(e.startsWith("#")){let t=e.slice(1);if(t.length===3)t=t.split("").map((e=>e+e)).join("");const s=parseInt(t.slice(0,2),16);const n=parseInt(t.slice(2,4),16);const r=parseInt(t.slice(4,6),16);return`rgba(${s}, ${n}, ${r}, ${i})`}if(e.startsWith("rgb("))return e.replace(/^rgb\(/,"rgba(").replace(/\)$/,`, ${i})`);return e}d.style=c();export{d as md_sparkline};
+//# sourceMappingURL=p-38f82d34.entry.js.map

package/dist/md3/p-3a4bd4eb.entry.js

@@ -0,0 +1,2 @@
+import{r,c as t,h as e,H as o,g as a}from"./p-WmvQpZnM.js";const i=()=>`:host{--_connector-color:var(--md-org-chart-connector-color, var(--md-sys-color-outline-variant, #c4c7c5));--_connector-width:var(--md-org-chart-connector-width, 1.5px);--_node-color:var(--md-org-chart-node-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_node-outline:var(--md-org-chart-node-outline-color, var(--md-sys-color-outline-variant, #c4c7c5));--_node-outline-width:var(--md-org-chart-node-outline-width, 1px);--_node-shape:var(--md-org-chart-node-shape, var(--md-sys-shape-corner-medium, 12px));--_node-min-width:var(--md-org-chart-node-min-width, 176px);--_node-max-width:var(--md-org-chart-node-max-width, 260px);--_selected-color:var(--md-org-chart-selected-color, var(--md-sys-color-primary, #6750a4));--_focus-ring-color:var(--md-org-chart-focus-ring-color, var(--md-sys-color-secondary, #625b71));--_toggle-size:var(--md-org-chart-toggle-size, max(20px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));--_state-layer-color:var(--md-org-chart-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_accent:var(--md-sys-color-primary, #6750a4);--_level-gap:var(--md-org-chart-level-gap, max(24px, calc(28px + var(--md-sys-density-scale, 0) * 1px)));--_sibling-gap:var(--md-org-chart-sibling-gap, max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px)));--_duration:var(--md-org-chart-duration, var(--md-sys-motion-duration-medium2, 300ms));--_easing:var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));--_line:var(--_connector-width) solid var(--_connector-color);--_elbow:12px;display:block;box-sizing:border-box;color:var(--md-sys-color-on-surface, #1d1b20);font-family:var(--md-sys-typescale-body-medium-font-family, Roboto, system-ui, sans-serif)}.md-org-chart__viewport{overflow:auto;padding:8px 8px calc(var(--_toggle-size) / 2 + 10px);box-sizing:border-box}.md-org-chart__tree,.md-org-chart__group{display:flex;justify-content:center;align-items:flex-start;list-style:none;margin:0;padding:0;position:relative}.md-org-chart__tree{inline-size:max-content;margin-inline:auto}.md-org-chart__group{padding-block-start:var(--_level-gap)}.md-org-chart__branch{position:relative;display:flex;flex-direction:column;align-items:center;padding-block-start:var(--_level-gap);padding-inline:calc(var(--_sibling-gap) / 2);outline:none}.md-org-chart__branch::before,.md-org-chart__branch::after{content:'';position:absolute;inset-block-start:0;inset-inline-end:50%;inline-size:50%;block-size:var(--_level-gap);border-block-start:var(--_line)}.md-org-chart__branch::after{inset-inline-end:auto;inset-inline-start:50%;border-inline-start:var(--_line)}.md-org-chart__branch:only-child::before,.md-org-chart__branch:only-child::after{display:none}.md-org-chart__branch:only-child{padding-block-start:0}.md-org-chart__branch:first-child::before,.md-org-chart__branch:last-child::after{border:0}.md-org-chart__branch:last-child::before{border-inline-end:var(--_line);border-start-end-radius:var(--_elbow)}.md-org-chart__branch:first-child::after{border-start-start-radius:var(--_elbow)}.md-org-chart__group::before{content:'';position:absolute;inset-block-start:0;inset-inline-start:50%;inline-size:0;block-size:var(--_level-gap);border-inline-start:var(--_line)}.md-org-chart__tree>.md-org-chart__branch{padding-block-start:0}.md-org-chart__tree>.md-org-chart__branch::before,.md-org-chart__tree>.md-org-chart__branch::after{display:none}.md-org-chart__node{position:relative;z-index:2;display:inline-flex;align-items:center;gap:max(6px, calc(12px + var(--md-sys-density-scale, 0) * 1.5px));padding-block:max(6px, calc(10px + var(--md-sys-density-scale, 0) * 1px));padding-inline:max(8px, calc(14px + var(--md-sys-density-scale, 0) * 1.5px));min-inline-size:var(--_node-min-width);max-inline-size:var(--_node-max-width);box-sizing:border-box;border-radius:var(--_node-shape);background:var(--_node-color);border:var(--_node-outline-width) solid var(--_node-outline);color:var(--md-sys-color-on-surface, #1d1b20);transition:border-color var(--_duration) var(--_easing),     box-shadow var(--_duration) var(--_easing);}.md-org-chart__node--selectable{cursor:pointer}.md-org-chart__node--selectable:hover{box-shadow:var(--md-sys-elevation-1, 0 1px 3px 1px rgba(0, 0, 0, 0.15))}.md-org-chart__node--selected{border-color:var(--_selected-color);box-shadow:0 0 0 1px var(--_selected-color)}.md-org-chart__node--selected.md-org-chart__node--selectable:hover{box-shadow:0 0 0 1px var(--_selected-color),     var(--md-sys-elevation-1, 0 1px 3px 1px rgba(0, 0, 0, 0.15))}.md-org-chart__branch:focus-visible>.md-org-chart__node{outline:3px solid var(--_focus-ring-color);outline-offset:2px}.md-org-chart__ripple{--md-ripple-color:var(--_selected-color);border-radius:inherit}.md-org-chart__state-layer{position:absolute;inset:0;border-radius:inherit;background:var(--_state-layer-color);opacity:0;pointer-events:none;transition:opacity var(--_duration) var(--_easing)}.md-org-chart__node--selectable:hover>.md-org-chart__state-layer{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}.md-org-chart__node--selectable:active>.md-org-chart__state-layer{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}.md-org-chart__node--selected>.md-org-chart__state-layer{opacity:0.08;background:var(--_selected-color)}.md-org-chart__avatar{flex:0 0 auto;--md-avatar-container-color:var(--md-sys-color-primary-container, #eaddff);--md-avatar-label-color:var(--md-sys-color-on-primary-container, #21005d)}.md-org-chart__text{display:flex;flex-direction:column;min-inline-size:0;gap:2px}.md-org-chart__name{font-family:var(--md-sys-typescale-title-small-font-family, Roboto, system-ui, sans-serif);font-size:max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:600;line-height:max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));color:var(--md-sys-color-on-surface, #1d1b20);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.md-org-chart__title{font-size:max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));line-height:max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));color:var(--md-sys-color-on-surface-variant, #49454f);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.md-org-chart__toggle-tip{position:absolute;inset-block-end:calc(-1 * var(--_toggle-size) / 2);inset-inline-start:calc(50% - var(--_toggle-size) / 2);z-index:3;line-height:0}.md-org-chart__toggle{--md-icon-button-container-color:var(--md-sys-color-surface-container-high, #ece6f0);--md-icon-button-container-width:var(--_toggle-size);--md-icon-button-container-height:var(--_toggle-size);--md-icon-button-icon-size:calc(var(--_toggle-size) * 0.66)}@keyframes md-org-chart-grow{from{opacity:0;transform:translateY(-8px) scale(0.96)}to{opacity:1;transform:none}}.md-org-chart__group{animation:md-org-chart-grow var(--_duration) var(--_easing);transform-origin:top center}.md-org-chart__empty{padding:32px 16px;text-align:center;color:var(--md-sys-color-on-surface-variant, #49454f);font-size:var(--md-sys-typescale-body-medium-size, 14px)}:host([orientation='horizontal']) .md-org-chart__tree,:host([orientation='horizontal']) .md-org-chart__group{flex-direction:column}:host([orientation='horizontal']) .md-org-chart__group{padding-block-start:0;padding-inline-start:var(--_level-gap)}:host([orientation='horizontal']) .md-org-chart__branch{flex-direction:row;padding-block:calc(var(--_sibling-gap) / 2);padding-inline:var(--_level-gap) 0;}:host([orientation='horizontal']) .md-org-chart__branch:only-child,:host([orientation='horizontal']) .md-org-chart__tree>.md-org-chart__branch{padding-inline-start:0}:host([orientation='horizontal']) .md-org-chart__branch::before,:host([orientation='horizontal']) .md-org-chart__branch::after{inset-block-start:0;inset-inline-start:0;inset-inline-end:auto;inline-size:var(--_level-gap);block-size:50%;border-block-start:0;border-inline-start:var(--_line);}:host([orientation='horizontal']) .md-org-chart__branch::after{inset-block-start:50%;border-block-start:var(--_line);}:host([orientation='horizontal']) .md-org-chart__branch:first-child::before,:host([orientation='horizontal']) .md-org-chart__branch:last-child::after{border:0}:host([orientation='horizontal']) .md-org-chart__branch:last-child::before{border-inline-end:0;border-start-end-radius:0;border-block-end:var(--_line);border-end-start-radius:var(--_elbow)}:host([orientation='horizontal']) .md-org-chart__branch:first-child::after{border-start-start-radius:var(--_elbow)}:host([orientation='horizontal']) .md-org-chart__group::before{inset-block-start:50%;inset-inline-start:0;inline-size:var(--_level-gap);block-size:0;border-inline-start:0;border-block-start:var(--_line)}:host([orientation='horizontal']) .md-org-chart__toggle-tip{inset-block-end:auto;inset-block-start:calc(50% - var(--_toggle-size) / 2);inset-inline-start:auto;inset-inline-end:calc(-1 * var(--_toggle-size) / 2)}:host([orientation='horizontal']) .md-org-chart__viewport{padding:8px calc(var(--_toggle-size) / 2 + 10px) 8px 8px}@keyframes md-org-chart-grow-h{from{opacity:0;transform:translateX(-8px) scale(0.96)}to{opacity:1;transform:none}}:host([orientation='horizontal']) .md-org-chart__group{animation-name:md-org-chart-grow-h;transform-origin:left center}@media (prefers-reduced-motion: reduce){.md-org-chart__node,.md-org-chart__toggle-icon,.md-org-chart__state-layer{transition:none}.md-org-chart__group{animation:none}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const n=class{constructor(e){r(this,e);this.mdSelectionChange=t(this,"mdSelectionChange",7);this.mdNodeToggle=t(this,"mdNodeToggle",7);this.nodes=[];this.selectionMode="none";this.selectedIds=[];this.collapsible=true;this.orientation="vertical";this.label="Organization chart";this.expandLabel="Expand";this.collapseLabel="Collapse";this.density=0;this.collapsed=new Set;this.selection=new Set;this.activeId="";this.nodeMap=new Map;this.roots=[];this.handleKeyDown=r=>{const t=r.target;if(!t||t.getAttribute?.("role")!=="treeitem")return;const e=this.nodeMap.get(t.getAttribute("data-id")??"");if(!e)return;const o=getComputedStyle(this.el).direction==="rtl";const a=o?"ArrowLeft":"ArrowRight";const i=o?"ArrowRight":"ArrowLeft";const n=this.visibleItems();const s=n.indexOf(t);switch(r.key){case"ArrowDown":this.focusItem(n[s+1]);break;case"ArrowUp":this.focusItem(n[s-1]);break;case a:if(this.hasChildren(e)){if(!this.isExpanded(e))this.toggle(e);else this.focusItem(this.firstChildItem(t))}break;case i:if(this.hasChildren(e)&&this.isExpanded(e))this.toggle(e);else this.focusItem(this.parentItem(t));break;case"Home":this.focusItem(n[0]);break;case"End":this.focusItem(n[n.length-1]);break;case"Enter":case" ":case"Spacebar":if(this.isSelectable(e))this.select(e);else if(this.hasChildren(e))this.toggle(e);break;default:return}r.preventDefault();r.stopPropagation()};this.handleNodeClick=r=>t=>{if(t.target?.closest(".md-org-chart__toggle"))return;this.activeId=r.id;if(this.isSelectable(r))this.select(r)};this.handleTogglerClick=r=>t=>{t.stopPropagation();this.toggle(r)}}componentWillLoad(){this.syncFromNodes(this.nodes);this.selection=new Set(this.selectedIds??[])}onNodesChange(r){this.syncFromNodes(r)}onSelectedIdsChange(r){this.selection=new Set(r??[])}syncFromNodes(r){const t=this.parseNodes(r);this.nodeMap=new Map;const e=new Set;const o=r=>{for(const t of r){if(!t||t.id==null)continue;this.nodeMap.set(t.id,t);if(t.expanded===false&&t.children?.length)e.add(t.id);if(t.children?.length)o(t.children)}};o(t);this.collapsed=e;if(!this.activeId||!this.nodeMap.has(this.activeId)){this.activeId=t[0]?.id??""}this.roots=t}parseNodes(r){if(Array.isArray(r))return r;if(typeof r==="string"&&r.trim()){try{const t=JSON.parse(r);return Array.isArray(t)?t:[t]}catch{return[]}}return[]}isExpanded(r){return!this.collapsed.has(r.id)}hasChildren(r){return!!r.children&&r.children.length>0}isSelectable(r){return this.selectionMode!=="none"&&r.selectable!==false}toggle(r){if(!this.hasChildren(r))return;const t=new Set(this.collapsed);const e=t.has(r.id);if(e)t.delete(r.id);else t.add(r.id);this.collapsed=t;this.mdNodeToggle.emit({node:r,expanded:e})}select(r){if(!this.isSelectable(r))return;const t=new Set(this.selection);if(this.selectionMode==="single"){const e=t.has(r.id)&&t.size===1;t.clear();if(!e)t.add(r.id)}else{if(t.has(r.id))t.delete(r.id);else t.add(r.id)}this.selection=t;this.selectedIds=Array.from(t);this.mdSelectionChange.emit({node:r,selectedIds:this.selectedIds})}visibleItems(){return Array.from(this.el.shadowRoot?.querySelectorAll('li[role="treeitem"]')??[])}itemFor(r){return this.el.shadowRoot?.querySelector(`li[role="treeitem"][data-id="${s(r.id)}"]`)??null}focusItem(r){if(!r)return;const t=r.getAttribute("data-id");if(t)this.activeId=t;r.focus()}firstChildItem(r){const t=Array.from(r.children).find((r=>r.getAttribute?.("role")==="group"));if(!t)return null;return Array.from(t.children).find((r=>r.getAttribute?.("role")==="treeitem"))??null}parentItem(r){const t=r.parentElement;if(!t||t.getAttribute("role")!=="group")return null;const e=t.parentElement;return e&&e.getAttribute("role")==="treeitem"?e:null}renderNode(r,t,o,a){const i=this.hasChildren(r);const n=this.isExpanded(r);const s=this.isSelectable(r);const c=s&&this.selection.has(r.id);const d=r.id===this.activeId;const l=this.collapsible&&i;return e("li",{role:"treeitem","data-id":r.id,"aria-level":t,"aria-setsize":a,"aria-posinset":o,"aria-expanded":i?String(n):undefined,"aria-selected":s?String(c):undefined,tabindex:d?"0":"-1",class:{"md-org-chart__branch":true,"md-org-chart__branch--collapsed":i&&!n},onKeyDown:this.handleKeyDown,onFocus:()=>this.activeId=r.id},e("div",{class:{"md-org-chart__node":true,"md-org-chart__node--selectable":s,"md-org-chart__node--selected":c},part:`node${c?" node-selected":""}`,style:r.accent?{"--_accent":r.accent}:undefined,onClick:this.handleNodeClick(r)},e("span",{class:"md-org-chart__state-layer",part:"state-layer","aria-hidden":"true"}),s&&e("md-ripple",{class:"md-org-chart__ripple"}),e("md-avatar",{class:"md-org-chart__avatar",part:"avatar",exportparts:"image: avatar-image","aria-hidden":"true",colorFromName:false,src:r.avatar,initials:r.avatarInitials,name:r.name,size:"medium",shape:"circle"}),e("span",{class:"md-org-chart__text"},e("span",{class:"md-org-chart__name",part:"name"},r.name),r.title&&e("span",{class:"md-org-chart__title",part:"title"},r.title)),l&&e("md-tooltip",{class:"md-org-chart__toggle-tip",text:n?this.collapseLabel:this.expandLabel,position:"bottom"},e("md-icon-button",{class:"md-org-chart__toggle",part:"toggle",icon:n?"expand_less":"expand_more",size:"xs",variant:"tonal",shape:"round","aria-hidden":"true","group-tabindex":-1,onPointerDown:r=>r.stopPropagation(),onClick:this.handleTogglerClick(r)}))),i&&n&&e("ul",{role:"group",class:"md-org-chart__group",part:"group"},r.children.map(((e,o)=>this.renderNode(e,t+1,o+1,r.children.length)))))}render(){const r=this.roots;const t=r.length===0;return e(o,{key:"26bfcbc5b511f6d4a3fff05f01b7c5a17c76d799",class:{"md-org-chart":true,"md-org-chart--empty":t}},e("div",{key:"341c78bd4de81514d001fe4df0b9065edc19f8fc",class:"md-org-chart__viewport",part:"viewport"},t?e("div",{class:"md-org-chart__empty",part:"empty",role:"status"},e("slot",{name:"empty"},"No data")):e("ul",{role:"tree",class:"md-org-chart__tree",part:"tree","aria-label":this.label,"aria-multiselectable":this.selectionMode==="multiple"?"true":undefined},r.map(((t,e)=>this.renderNode(t,1,e+1,r.length))))))}get el(){return a(this)}static get watchers(){return{nodes:[{onNodesChange:0}],selectedIds:[{onSelectedIdsChange:0}]}}};function s(r){return String(r).replace(/["\\\]]/g,"\\$&")}n.style=i();export{n as md_organization_chart};
+//# sourceMappingURL=p-3a4bd4eb.entry.js.map

package/dist/md3/{p-72457a85.entry.js.map → p-3a4bd4eb.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["mdOrganizationChartCss","MdOrganizationChart","constructor","hostRef","this","nodes","selectionMode","selectedIds","collapsible","orientation","label","expandLabel","collapseLabel","density","collapsed","Set","selection","activeId","nodeMap","Map","roots","handleKeyDown","e","current","target","getAttribute","node","get","rtl","getComputedStyle","el","direction","forwardKey","backwardKey","items","visibleItems","idx","indexOf","key","focusItem","hasChildren","isExpanded","toggle","firstChildItem","parentItem","length","isSelectable","select","preventDefault","stopPropagation","handleNodeClick","closest","id","handleTogglerClick","componentWillLoad","syncFromNodes","onNodesChange","next","onSelectedIdsChange","input","parseNodes","walk","list","n","set","expanded","children","add","has","Array","isArray","trim","parsed","JSON","parse","selectable","willExpand","delete","mdNodeToggle","emit","wasOnlySelected","size","clear","from","mdSelectionChange","shadowRoot","querySelectorAll","itemFor","querySelector","cssEscape","focus","li","group","find","c","parentElement","parent","renderNode","level","posInSet","setSize","selected","tabbable","showToggle","h","role","String","undefined","tabindex","class","onKeyDown","onFocus","part","style","accent","onClick","exportparts","colorFromName","src","avatar","initials","avatarInitials","name","shape","title","text","position","icon","variant","onPointerDown","map","child","i","render","empty","Host","root","value","replace"],"sources":["src/components/md-organization-chart/md-organization-chart.css?tag=md-organization-chart&encapsulation=shadow","src/components/md-organization-chart/md-organization-chart.tsx"],"sourcesContent":["/* ==========================================================\n   md-organization-chart — Material Design 3 Expressive\n   Hierarchical org tree of avatar cards joined by connectors.\n\n   Layout: the classic pure-CSS connector technique (::before/::after\n   elbows on each branch + a vertical drop on each group), authored with\n   LOGICAL properties so RTL mirrors without extra rules. The viewport\n   pans horizontally when the tree outgrows its container.\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-org-chart-connector-color     Connector line colour\n     --md-org-chart-connector-width     Connector line thickness\n     --md-org-chart-node-color          Node card background\n     --md-org-chart-node-outline-color  Node card border colour\n     --md-org-chart-node-outline-width  Node card border width\n     --md-org-chart-node-shape          Node card corner radius\n     --md-org-chart-node-min-width      Node card min inline-size\n     --md-org-chart-node-max-width      Node card max inline-size\n     --md-org-chart-selected-color      Selected node accent (border + tint)\n     --md-org-chart-focus-ring-color    Focus outline colour (default: buttons')\n     --md-org-chart-state-layer-color   Hover / selected overlay colour\n     --md-org-chart-toggle-size         Expand/collapse toggler diameter\n     --md-org-chart-level-gap           Vertical gap between levels\n     --md-org-chart-sibling-gap         Horizontal gap between siblings\n     --md-org-chart-duration            Motion duration\n\n   CSS PARTS:\n     viewport      Scroll/pan container\n     tree          The role=\"tree\" root list\n     group         A role=\"group\" child list\n     node          A node card\n     node-selected A selected node card\n     state-layer   Hover / selected overlay\n     avatar        The md-avatar\n     avatar-image  The avatar's <img> (exported)\n     name          Primary label\n     title         Secondary label\n     toggle        Expand / collapse affordance\n     empty         Empty-state container\n\n   SLOTS:\n     empty         Custom empty-state content\n   ========================================================== */\n\n:host {\n  --_connector-color: var(--md-org-chart-connector-color, var(--md-sys-color-outline-variant, #c4c7c5));\n  --_connector-width: var(--md-org-chart-connector-width, 1.5px);\n  --_node-color: var(--md-org-chart-node-color, var(--md-sys-color-surface-container-low, #f7f2fa));\n  --_node-outline: var(--md-org-chart-node-outline-color, var(--md-sys-color-outline-variant, #c4c7c5));\n  --_node-outline-width: var(--md-org-chart-node-outline-width, 1px);\n  --_node-shape: var(--md-org-chart-node-shape, var(--md-sys-shape-corner-medium, 12px));\n  --_node-min-width: var(--md-org-chart-node-min-width, 176px);\n  --_node-max-width: var(--md-org-chart-node-max-width, 260px);\n  --_selected-color: var(--md-org-chart-selected-color, var(--md-sys-color-primary, #6750a4));\n  /* Match the focus ring the buttons use (md-sys-color-secondary). */\n  --_focus-ring-color: var(--md-org-chart-focus-ring-color, var(--md-sys-color-secondary, #625b71));\n  --_toggle-size: var(--md-org-chart-toggle-size, max(20px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  --_state-layer-color: var(--md-org-chart-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));\n  --_accent: var(--md-sys-color-primary, #6750a4);\n  --_level-gap: var(--md-org-chart-level-gap, max(24px, calc(28px + var(--md-sys-density-scale, 0) * 1px)));\n  --_sibling-gap: var(--md-org-chart-sibling-gap, max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px)));\n  --_duration: var(--md-org-chart-duration, var(--md-sys-motion-duration-medium2, 300ms));\n  --_easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n  --_line: var(--_connector-width) solid var(--_connector-color);\n  --_elbow: 12px;\n\n  display: block;\n  box-sizing: border-box;\n  color: var(--md-sys-color-on-surface, #1d1b20);\n  font-family: var(--md-sys-typescale-body-medium-font-family, Roboto, system-ui, sans-serif);\n}\n\n.md-org-chart__viewport {\n  overflow: auto;\n  /* Extra block-end room so a collapsed node's edge-hung toggler (which\n     overhangs the tree by half its size) isn't clipped by `overflow`. */\n  padding: 8px 8px calc(var(--_toggle-size) / 2 + 10px);\n  box-sizing: border-box;\n}\n\n/* ── Lists / connectors ───────────────────────────────────────── */\n\n.md-org-chart__tree,\n.md-org-chart__group {\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n}\n\n/* The tree shrink-wraps and self-centres; when wider than the viewport it\n   left-aligns (margin collapses to 0) and the viewport scrolls. */\n.md-org-chart__tree {\n  inline-size: max-content;\n  margin-inline: auto;\n}\n\n.md-org-chart__group {\n  padding-block-start: var(--_level-gap);\n}\n\n.md-org-chart__branch {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-block-start: var(--_level-gap);\n  padding-inline: calc(var(--_sibling-gap) / 2);\n  outline: none;\n}\n\n/* Horizontal bus halves (top border) meeting at the branch centre, plus the\n   short vertical riser up into the bus (border-inline-start on ::after). */\n.md-org-chart__branch::before,\n.md-org-chart__branch::after {\n  content: '';\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 50%;\n  inline-size: 50%;\n  block-size: var(--_level-gap);\n  border-block-start: var(--_line);\n}\n\n.md-org-chart__branch::after {\n  inset-inline-end: auto;\n  inset-inline-start: 50%;\n  border-inline-start: var(--_line);\n}\n\n/* Only child: no horizontal bus/riser — just the group's vertical drop. Drop\n   its own block-start padding too, otherwise that padding (with no riser line)\n   leaves a gap between the drop and the child. */\n.md-org-chart__branch:only-child::before,\n.md-org-chart__branch:only-child::after {\n  display: none;\n}\n\n.md-org-chart__branch:only-child {\n  padding-block-start: 0;\n}\n\n/* Trim the outermost overhang and round the two elbows. */\n.md-org-chart__branch:first-child::before,\n.md-org-chart__branch:last-child::after {\n  border: 0;\n}\n\n.md-org-chart__branch:last-child::before {\n  border-inline-end: var(--_line);\n  border-start-end-radius: var(--_elbow);\n}\n\n.md-org-chart__branch:first-child::after {\n  border-start-start-radius: var(--_elbow);\n}\n\n/* Vertical drop from a parent node down to its children's bus. */\n.md-org-chart__group::before {\n  content: '';\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 50%;\n  inline-size: 0;\n  block-size: var(--_level-gap);\n  border-inline-start: var(--_line);\n}\n\n/* Roots have no incoming connector. */\n.md-org-chart__tree > .md-org-chart__branch {\n  padding-block-start: 0;\n}\n.md-org-chart__tree > .md-org-chart__branch::before,\n.md-org-chart__tree > .md-org-chart__branch::after {\n  display: none;\n}\n\n/* ── Node card ────────────────────────────────────────────────── */\n\n.md-org-chart__node {\n  position: relative;\n  /* Above the sibling group's connector lines (painted later in DOM) so the\n     node and its toggler sit on top of the drop/bus rather than under them. */\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  gap: max(6px, calc(12px + var(--md-sys-density-scale, 0) * 1.5px));\n  padding-block: max(6px, calc(10px + var(--md-sys-density-scale, 0) * 1px));\n  padding-inline: max(8px, calc(14px + var(--md-sys-density-scale, 0) * 1.5px));\n  min-inline-size: var(--_node-min-width);\n  max-inline-size: var(--_node-max-width);\n  box-sizing: border-box;\n  border-radius: var(--_node-shape);\n  background: var(--_node-color);\n  border: var(--_node-outline-width) solid var(--_node-outline);\n  color: var(--md-sys-color-on-surface, #1d1b20);\n  transition:\n    border-color var(--_duration) var(--_easing),\n    box-shadow var(--_duration) var(--_easing);\n  /* No transform / will-change here: either would make the node a containing\n     block for the toggler tooltip's position:fixed popup, cutting it off. */\n}\n\n.md-org-chart__node--selectable {\n  cursor: pointer;\n}\n\n.md-org-chart__node--selectable:hover {\n  box-shadow: var(--md-sys-elevation-1, 0 1px 3px 1px rgba(0, 0, 0, 0.15));\n}\n\n/* Selection ring via border-colour + an outset box-shadow — NOT a wider border.\n   Growing the border would move the padding box and shift the edge-hung toggler,\n   so width + padding stay constant and nothing in the card moves on select. */\n.md-org-chart__node--selected {\n  border-color: var(--_selected-color);\n  box-shadow: 0 0 0 1px var(--_selected-color);\n}\n\n.md-org-chart__node--selected.md-org-chart__node--selectable:hover {\n  box-shadow:\n    0 0 0 1px var(--_selected-color),\n    var(--md-sys-elevation-1, 0 1px 3px 1px rgba(0, 0, 0, 0.15));\n}\n\n/* Focus ring on the focusable treeitem — same colour as the buttons. */\n.md-org-chart__branch:focus-visible > .md-org-chart__node {\n  outline: 3px solid var(--_focus-ring-color);\n  outline-offset: 2px;\n}\n\n/* Selection ripple (auto-attaches to the node card; self-clips to the radius,\n   so the edge-hung toggler is unaffected). */\n.md-org-chart__ripple {\n  --md-ripple-color: var(--_selected-color);\n  border-radius: inherit;\n}\n\n.md-org-chart__state-layer {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: var(--_state-layer-color);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--_duration) var(--_easing);\n}\n\n.md-org-chart__node--selectable:hover > .md-org-chart__state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n\n.md-org-chart__node--selectable:active > .md-org-chart__state-layer {\n  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);\n}\n\n.md-org-chart__node--selected > .md-org-chart__state-layer {\n  opacity: 0.08;\n  background: var(--_selected-color);\n}\n\n.md-org-chart__avatar {\n  flex: 0 0 auto;\n  --md-avatar-container-color: var(--md-sys-color-primary-container, #eaddff);\n  --md-avatar-label-color: var(--md-sys-color-on-primary-container, #21005d);\n}\n\n.md-org-chart__text {\n  display: flex;\n  flex-direction: column;\n  min-inline-size: 0;\n  gap: 2px;\n}\n\n.md-org-chart__name {\n  font-family: var(--md-sys-typescale-title-small-font-family, Roboto, system-ui, sans-serif);\n  font-size: max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: 600;\n  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n  color: var(--md-sys-color-on-surface, #1d1b20);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.md-org-chart__title {\n  font-size: max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));\n  line-height: max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n  color: var(--md-sys-color-on-surface-variant, #49454f);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ── Toggler ──────────────────────────────────────────────────── */\n\n/* The toggler is an md-icon-button hung on the node's bottom edge, over the\n   connector drop. z-index keeps it above the lines; its opaque tonal fill\n   masks the line where they meet. */\n/* The md-tooltip wrapper carries the positioning (centred on the node's bottom\n   edge, half in / half out) and stacks above the connector lines. Centred with\n   calc() (NOT transform): a transform on the tooltip host would make it the\n   containing block for its own position:fixed popup, cutting it off / mis-placing\n   it. inset-inline-start keeps this direction-aware for RTL. */\n.md-org-chart__toggle-tip {\n  position: absolute;\n  inset-block-end: calc(-1 * var(--_toggle-size) / 2);\n  inset-inline-start: calc(50% - var(--_toggle-size) / 2);\n  z-index: 3;\n  line-height: 0;\n}\n\n.md-org-chart__toggle {\n  --md-icon-button-container-color: var(--md-sys-color-surface-container-high, #ece6f0);\n  --md-icon-button-container-width: var(--_toggle-size);\n  --md-icon-button-container-height: var(--_toggle-size);\n  --md-icon-button-icon-size: calc(var(--_toggle-size) * 0.66);\n}\n\n/* ── Group enter animation (expressive) ───────────────────────── */\n\n@keyframes md-org-chart-grow {\n  from {\n    opacity: 0;\n    transform: translateY(-8px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n.md-org-chart__group {\n  animation: md-org-chart-grow var(--_duration) var(--_easing);\n  transform-origin: top center;\n}\n\n/* ── Empty state ──────────────────────────────────────────────── */\n\n.md-org-chart__empty {\n  padding: 32px 16px;\n  text-align: center;\n  color: var(--md-sys-color-on-surface-variant, #49454f);\n  font-size: var(--md-sys-typescale-body-medium-size, 14px);\n}\n\n/* ── Horizontal orientation ───────────────────────────────────────\n   Left→right tree — the block↔inline mirror of the default (vertical)\n   connector geometry above. Still authored in LOGICAL properties, so RTL\n   flips it to right→left with no extra rules. Levels now advance on the\n   inline axis; siblings stack on the block axis. */\n\n:host([orientation='horizontal']) .md-org-chart__tree,\n:host([orientation='horizontal']) .md-org-chart__group {\n  flex-direction: column;\n}\n\n/* Level gap runs inline (parent → child) instead of block. */\n:host([orientation='horizontal']) .md-org-chart__group {\n  padding-block-start: 0;\n  padding-inline-start: var(--_level-gap);\n}\n\n:host([orientation='horizontal']) .md-org-chart__branch {\n  flex-direction: row;\n  /* Node beside its child group (was column: node above group). */\n  padding-block: calc(var(--_sibling-gap) / 2); /* siblings spread on block now */\n  padding-inline: var(--_level-gap) 0;           /* incoming-connector strip on inline-start */\n}\n\n/* Roots and only-children take no incoming inline gap. */\n:host([orientation='horizontal']) .md-org-chart__branch:only-child,\n:host([orientation='horizontal']) .md-org-chart__tree > .md-org-chart__branch {\n  padding-inline-start: 0;\n}\n\n/* Sibling bus (now vertical, on the inline-start edge) + a short horizontal\n   riser into the node. Mirrors the vertical ::before/::after exactly. */\n:host([orientation='horizontal']) .md-org-chart__branch::before,\n:host([orientation='horizontal']) .md-org-chart__branch::after {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  inset-inline-end: auto;\n  inline-size: var(--_level-gap);\n  block-size: 50%;\n  border-block-start: 0;           /* clear the vertical-mode horizontal bus */\n  border-inline-start: var(--_line); /* vertical bus */\n}\n\n:host([orientation='horizontal']) .md-org-chart__branch::after {\n  inset-block-start: 50%;\n  border-block-start: var(--_line); /* the single horizontal riser */\n}\n\n/* Trim the outermost overhang. The :host-scoped bus rules above out-specify the\n   axis-agnostic `border:0` trims (0-3-1 vs 0-2-1), so re-assert them here at\n   matching specificity — otherwise the vertical bus overshoots the first/last\n   sibling. */\n:host([orientation='horizontal']) .md-org-chart__branch:first-child::before,\n:host([orientation='horizontal']) .md-org-chart__branch:last-child::after {\n  border: 0;\n}\n\n/* Round the two outermost elbows where the bus turns into the end risers.\n   The last child's riser is reconstructed on ::before since its ::after is\n   trimmed. */\n:host([orientation='horizontal']) .md-org-chart__branch:last-child::before {\n  border-inline-end: 0;             /* undo the vertical-mode riser rebuild */\n  border-start-end-radius: 0;       /* undo the vertical-mode elbow */\n  border-block-end: var(--_line);\n  border-end-start-radius: var(--_elbow);\n}\n:host([orientation='horizontal']) .md-org-chart__branch:first-child::after {\n  border-start-start-radius: var(--_elbow);\n}\n\n/* Parent → children drop is now a horizontal line. */\n:host([orientation='horizontal']) .md-org-chart__group::before {\n  inset-block-start: 50%;\n  inset-inline-start: 0;\n  inline-size: var(--_level-gap);\n  block-size: 0;\n  border-inline-start: 0;\n  border-block-start: var(--_line);\n}\n\n/* Toggler hangs on the node's inline-end edge (over the outgoing drop),\n   vertically centred — instead of the bottom edge in vertical mode. */\n:host([orientation='horizontal']) .md-org-chart__toggle-tip {\n  inset-block-end: auto;\n  inset-block-start: calc(50% - var(--_toggle-size) / 2);\n  inset-inline-start: auto;\n  inset-inline-end: calc(-1 * var(--_toggle-size) / 2);\n}\n\n/* Give the overhanging inline-end toggler room instead of the block-end room. */\n:host([orientation='horizontal']) .md-org-chart__viewport {\n  padding: 8px calc(var(--_toggle-size) / 2 + 10px) 8px 8px;\n}\n\n/* Enter animation grows from the inline-start (parent) side. */\n@keyframes md-org-chart-grow-h {\n  from {\n    opacity: 0;\n    transform: translateX(-8px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n:host([orientation='horizontal']) .md-org-chart__group {\n  animation-name: md-org-chart-grow-h;\n  transform-origin: left center;\n}\n\n/* ── Reduced motion ───────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .md-org-chart__node,\n  .md-org-chart__toggle-icon,\n  .md-org-chart__state-layer {\n    transition: none;\n  }\n  .md-org-chart__group {\n    animation: none;\n  }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A single node in the organization tree. Only `id` and `name` are required;\n * everything else is optional so the model stays terse.\n */\nexport interface OrgChartNode {\n  /** Stable identifier — used for selection, expansion, and eventing. */\n  id: string;\n  /** Primary label (person / unit name), rendered in the emphasis weight. */\n  name: string;\n  /** Secondary label (role / department), rendered muted under the name. */\n  title?: string;\n  /** Avatar image URL. Falls back to initials → name-derived initials. */\n  avatar?: string;\n  /** Explicit avatar initials (overrides name-derived ones). */\n  avatarInitials?: string;\n  /** Optional accent colour for the node's avatar ring + selected tint. */\n  accent?: string;\n  /** Initial expanded state for this node's subtree (default: expanded). */\n  expanded?: boolean;\n  /** When false the node cannot be selected (default: selectable). */\n  selectable?: boolean;\n  /** Child nodes. */\n  children?: OrgChartNode[];\n}\n\ntype NodeInput = OrgChartNode[] | string | null | undefined;\n\n/** Detail for the `mdSelectionChange` event. */\nexport interface OrgChartSelectionChangeDetail {\n  /** The node that was clicked / toggled. */\n  node: OrgChartNode;\n  /** The full set of selected ids after the change. */\n  selectedIds: string[];\n}\n\n/** Detail for the `mdNodeToggle` event. */\nexport interface OrgChartToggleDetail {\n  /** The node whose subtree was expanded / collapsed. */\n  node: OrgChartNode;\n  /** Whether the node is now expanded. */\n  expanded: boolean;\n}\n\n/**\n * `md-organization-chart` — Material Design 3 Expressive organization chart.\n *\n * Visualises hierarchical org data as a top-down tree of avatar cards joined\n * by connector lines. Data-driven (`nodes`), with collapsible subtrees,\n * optional single/multiple selection, and the full WAI-ARIA **tree** pattern\n * (roving tabindex, Arrow/Home/End navigation, Enter/Space to select).\n *\n * The surface pans horizontally when it outgrows its container, so a wide org\n * stays usable on small screens. Direction-aware (RTL mirrors the layout and\n * swaps the horizontal arrow keys); every affordance label is a prop for\n * localisation.\n *\n * ```html\n * <md-organization-chart selection-mode=\"single\"></md-organization-chart>\n * <script>\n *   document.querySelector('md-organization-chart').nodes = [{\n *     id: 'ceo', name: 'Amy Elsner', title: 'Founder & CEO',\n *     children: [{ id: 'prod', name: 'Asiya Javayant', title: 'Product Lead' }],\n *   }];\n * </script>\n * ```\n */\n@Component({\n  tag: 'md-organization-chart',\n  styleUrl: 'md-organization-chart.css',\n  shadow: true,\n})\nexport class MdOrganizationChart {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The organization tree. Accepts an `OrgChartNode[]` (property) or a JSON\n   * string (attribute). Multiple roots are supported (rendered side by side).\n   */\n  @Prop() nodes: NodeInput = [];\n\n  /**\n   * Selection behaviour:\n   *   - `'none'`     — nodes are not selectable (default).\n   *   - `'single'`   — one node at a time.\n   *   - `'multiple'` — any number of nodes.\n   */\n  @Prop({ reflect: true }) selectionMode: 'none' | 'single' | 'multiple' = 'none';\n\n  /** Selected node ids (controlled + initial). Kept in sync as the user selects. */\n  @Prop({ mutable: true }) selectedIds: string[] = [];\n\n  /** Show expand/collapse togglers on nodes that have children. */\n  @Prop() collapsible: boolean = true;\n\n  /**\n   * Layout direction of the tree:\n   *   - `'vertical'`   — top-down (default).\n   *   - `'horizontal'` — left-to-right; RTL mirrors it right-to-left.\n   *\n   * Only the visual layout changes — the tree's ARIA semantics and keyboard\n   * model (Arrow Left/Right = collapse/expand, Up/Down = move) are unchanged.\n   */\n  @Prop({ reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /** Accessible name for the tree (localisable). */\n  @Prop({ attribute: 'label' }) label: string = 'Organization chart';\n\n  /** Toggler accessible label when a node is collapsed (localisable). */\n  @Prop({ attribute: 'expand-label' }) expandLabel: string = 'Expand';\n\n  /** Toggler accessible label when a node is expanded (localisable). */\n  @Prop({ attribute: 'collapse-label' }) collapseLabel: string = 'Collapse';\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  /** Fired when the selection changes. */\n  @Event() mdSelectionChange!: EventEmitter<OrgChartSelectionChangeDetail>;\n\n  /** Fired when a node is expanded or collapsed. */\n  @Event() mdNodeToggle!: EventEmitter<OrgChartToggleDetail>;\n\n  /** Ids whose subtree is collapsed (default: everything expanded). */\n  @State() private collapsed = new Set<string>();\n  /** Working selection set (mirrors `selectedIds`). */\n  @State() private selection = new Set<string>();\n  /** Roving-tabindex owner — the one node reachable with Tab. */\n  @State() private activeId = '';\n\n  private nodeMap = new Map<string, OrgChartNode>();\n\n  componentWillLoad() {\n    this.syncFromNodes(this.nodes);\n    this.selection = new Set(this.selectedIds ?? []);\n  }\n\n  @Watch('nodes')\n  onNodesChange(next: NodeInput) {\n    this.syncFromNodes(next);\n  }\n\n  @Watch('selectedIds')\n  onSelectedIdsChange(next: string[]) {\n    this.selection = new Set(next ?? []);\n  }\n\n  /** Parse the incoming nodes, (re)build the id map, seed collapse + active. */\n  private syncFromNodes(input: NodeInput) {\n    const roots = this.parseNodes(input);\n    this.nodeMap = new Map();\n    const collapsed = new Set<string>();\n    const walk = (list: OrgChartNode[]) => {\n      for (const n of list) {\n        if (!n || n.id == null) continue;\n        this.nodeMap.set(n.id, n);\n        if (n.expanded === false && n.children?.length) collapsed.add(n.id);\n        if (n.children?.length) walk(n.children);\n      }\n    };\n    walk(roots);\n    this.collapsed = collapsed;\n    // Keep the roving owner valid; default to the first root.\n    if (!this.activeId || !this.nodeMap.has(this.activeId)) {\n      this.activeId = roots[0]?.id ?? '';\n    }\n    this.roots = roots;\n  }\n\n  private roots: OrgChartNode[] = [];\n\n  private parseNodes(input: NodeInput): OrgChartNode[] {\n    if (Array.isArray(input)) return input;\n    if (typeof input === 'string' && input.trim()) {\n      try {\n        const parsed = JSON.parse(input);\n        return Array.isArray(parsed) ? parsed : [parsed];\n      } catch {\n        return [];\n      }\n    }\n    return [];\n  }\n\n  private isExpanded(node: OrgChartNode): boolean {\n    return !this.collapsed.has(node.id);\n  }\n\n  private hasChildren(node: OrgChartNode): boolean {\n    return !!node.children && node.children.length > 0;\n  }\n\n  private isSelectable(node: OrgChartNode): boolean {\n    return this.selectionMode !== 'none' && node.selectable !== false;\n  }\n\n  private toggle(node: OrgChartNode) {\n    if (!this.hasChildren(node)) return;\n    const next = new Set(this.collapsed);\n    const willExpand = next.has(node.id);\n    if (willExpand) next.delete(node.id);\n    else next.add(node.id);\n    this.collapsed = next;\n    this.mdNodeToggle.emit({ node, expanded: willExpand });\n  }\n\n  private select(node: OrgChartNode) {\n    if (!this.isSelectable(node)) return;\n    const next = new Set(this.selection);\n    if (this.selectionMode === 'single') {\n      const wasOnlySelected = next.has(node.id) && next.size === 1;\n      next.clear();\n      if (!wasOnlySelected) next.add(node.id);\n    } else {\n      if (next.has(node.id)) next.delete(node.id);\n      else next.add(node.id);\n    }\n    this.selection = next;\n    this.selectedIds = Array.from(next);\n    this.mdSelectionChange.emit({ node, selectedIds: this.selectedIds });\n  }\n\n  // ── Keyboard: WAI-ARIA tree pattern ──────────────────────────────────────\n  private visibleItems(): HTMLElement[] {\n    return Array.from(\n      this.el.shadowRoot?.querySelectorAll('li[role=\"treeitem\"]') ?? [],\n    ) as HTMLElement[];\n  }\n\n  private itemFor(node: OrgChartNode): HTMLElement | null {\n    return (\n      (this.el.shadowRoot?.querySelector(\n        `li[role=\"treeitem\"][data-id=\"${cssEscape(node.id)}\"]`,\n      ) as HTMLElement | null) ?? null\n    );\n  }\n\n  private focusItem(el: HTMLElement | null | undefined) {\n    if (!el) return;\n    const id = el.getAttribute('data-id');\n    if (id) this.activeId = id;\n    el.focus();\n  }\n\n  private firstChildItem(li: HTMLElement): HTMLElement | null {\n    const group = Array.from(li.children).find(\n      (c) => (c as HTMLElement).getAttribute?.('role') === 'group',\n    ) as HTMLElement | undefined;\n    if (!group) return null;\n    return (\n      (Array.from(group.children).find(\n        (c) => (c as HTMLElement).getAttribute?.('role') === 'treeitem',\n      ) as HTMLElement | undefined) ?? null\n    );\n  }\n\n  private parentItem(li: HTMLElement): HTMLElement | null {\n    const group = li.parentElement;\n    if (!group || group.getAttribute('role') !== 'group') return null;\n    const parent = group.parentElement;\n    return parent && parent.getAttribute('role') === 'treeitem'\n      ? (parent as HTMLElement)\n      : null;\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    const current = e.target as HTMLElement;\n    if (!current || current.getAttribute?.('role') !== 'treeitem') return;\n    const node = this.nodeMap.get(current.getAttribute('data-id') ?? '');\n    if (!node) return;\n\n    const rtl = getComputedStyle(this.el).direction === 'rtl';\n    const forwardKey = rtl ? 'ArrowLeft' : 'ArrowRight';\n    const backwardKey = rtl ? 'ArrowRight' : 'ArrowLeft';\n    const items = this.visibleItems();\n    const idx = items.indexOf(current);\n\n    switch (e.key) {\n      case 'ArrowDown':\n        this.focusItem(items[idx + 1]);\n        break;\n      case 'ArrowUp':\n        this.focusItem(items[idx - 1]);\n        break;\n      case forwardKey:\n        if (this.hasChildren(node)) {\n          if (!this.isExpanded(node)) this.toggle(node);\n          else this.focusItem(this.firstChildItem(current));\n        }\n        break;\n      case backwardKey:\n        if (this.hasChildren(node) && this.isExpanded(node)) this.toggle(node);\n        else this.focusItem(this.parentItem(current));\n        break;\n      case 'Home':\n        this.focusItem(items[0]);\n        break;\n      case 'End':\n        this.focusItem(items[items.length - 1]);\n        break;\n      case 'Enter':\n      case ' ':\n      case 'Spacebar':\n        if (this.isSelectable(node)) this.select(node);\n        else if (this.hasChildren(node)) this.toggle(node);\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  private handleNodeClick = (node: OrgChartNode) => (e: MouseEvent) => {\n    // Toggler clicks are handled on the toggler itself.\n    if ((e.target as HTMLElement)?.closest('.md-org-chart__toggle')) return;\n    this.activeId = node.id;\n    if (this.isSelectable(node)) this.select(node);\n  };\n\n  private handleTogglerClick = (node: OrgChartNode) => (e: MouseEvent) => {\n    e.stopPropagation();\n    this.toggle(node);\n  };\n\n  private renderNode(node: OrgChartNode, level: number, posInSet: number, setSize: number) {\n    const has = this.hasChildren(node);\n    const expanded = this.isExpanded(node);\n    const selectable = this.isSelectable(node);\n    const selected = selectable && this.selection.has(node.id);\n    const tabbable = node.id === this.activeId;\n    const showToggle = this.collapsible && has;\n\n    return (\n      <li\n        role=\"treeitem\"\n        data-id={node.id}\n        aria-level={level}\n        aria-setsize={setSize}\n        aria-posinset={posInSet}\n        aria-expanded={has ? String(expanded) : undefined}\n        aria-selected={selectable ? String(selected) : undefined}\n        tabindex={tabbable ? '0' : '-1'}\n        class={{\n          'md-org-chart__branch': true,\n          'md-org-chart__branch--collapsed': has && !expanded,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onFocus={() => (this.activeId = node.id)}\n      >\n        <div\n          class={{\n            'md-org-chart__node': true,\n            'md-org-chart__node--selectable': selectable,\n            'md-org-chart__node--selected': selected,\n          }}\n          part={`node${selected ? ' node-selected' : ''}`}\n          style={node.accent ? { '--_accent': node.accent } : undefined}\n          onClick={this.handleNodeClick(node)}\n        >\n          <span class=\"md-org-chart__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n          {selectable && <md-ripple class=\"md-org-chart__ripple\"></md-ripple>}\n          <md-avatar\n            class=\"md-org-chart__avatar\"\n            part=\"avatar\"\n            exportparts=\"image: avatar-image\"\n            // Decorative: the node's name is already announced as the treeitem's\n            // text, so exposing the avatar's label would double-speak it. The\n            // auto per-name palette is disabled in favour of a fixed AA-contrast\n            // pair (see CSS) — initials here are a photo fallback, not identity.\n            aria-hidden=\"true\"\n            colorFromName={false}\n            src={node.avatar}\n            initials={node.avatarInitials}\n            name={node.name}\n            size=\"medium\"\n            shape=\"circle\"\n          ></md-avatar>\n          <span class=\"md-org-chart__text\">\n            <span class=\"md-org-chart__name\" part=\"name\">{node.name}</span>\n            {node.title && (\n              <span class=\"md-org-chart__title\" part=\"title\">{node.title}</span>\n            )}\n          </span>\n          {showToggle && (\n            // Decorative pointer affordance: expand/collapse is exposed to AT via\n            // the treeitem's aria-expanded + Arrow keys, so the button is\n            // aria-hidden and taken out of the tab order (group-tabindex=-1) to\n            // avoid a nested interactive control inside the treeitem. The label\n            // rides in the library md-tooltip rather than a native `title`.\n            <md-tooltip\n              class=\"md-org-chart__toggle-tip\"\n              text={expanded ? this.collapseLabel : this.expandLabel}\n              position=\"bottom\"\n            >\n              <md-icon-button\n                class=\"md-org-chart__toggle\"\n                part=\"toggle\"\n                icon={expanded ? 'expand_less' : 'expand_more'}\n                size=\"xs\"\n                variant=\"tonal\"\n                shape=\"round\"\n                aria-hidden=\"true\"\n                group-tabindex={-1}\n                onPointerDown={(e: PointerEvent) => e.stopPropagation()}\n                onClick={this.handleTogglerClick(node)}\n              ></md-icon-button>\n            </md-tooltip>\n          )}\n        </div>\n\n        {has && expanded && (\n          <ul role=\"group\" class=\"md-org-chart__group\" part=\"group\">\n            {node.children!.map((child, i) =>\n              this.renderNode(child, level + 1, i + 1, node.children!.length),\n            )}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  render() {\n    const roots = this.roots;\n    const empty = roots.length === 0;\n\n    return (\n      <Host\n        class={{\n          'md-org-chart': true,\n          'md-org-chart--empty': empty,\n        }}\n      >\n        <div class=\"md-org-chart__viewport\" part=\"viewport\">\n          {empty ? (\n            <div class=\"md-org-chart__empty\" part=\"empty\" role=\"status\">\n              <slot name=\"empty\">No data</slot>\n            </div>\n          ) : (\n            <ul\n              role=\"tree\"\n              class=\"md-org-chart__tree\"\n              part=\"tree\"\n              aria-label={this.label}\n              aria-multiselectable={\n                this.selectionMode === 'multiple' ? 'true' : undefined\n              }\n            >\n              {roots.map((root, i) => this.renderNode(root, 1, i + 1, roots.length))}\n            </ul>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n/** Minimal CSS.escape shim (attribute-selector safe) for id values. */\nfunction cssEscape(value: string): string {\n  return String(value).replace(/[\"\\\\\\]]/g, '\\\\$&');\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["mdOrganizationChartCss","MdOrganizationChart","constructor","hostRef","this","nodes","selectionMode","selectedIds","collapsible","orientation","label","expandLabel","collapseLabel","density","collapsed","Set","selection","activeId","nodeMap","Map","roots","handleKeyDown","e","current","target","getAttribute","node","get","rtl","getComputedStyle","el","direction","forwardKey","backwardKey","items","visibleItems","idx","indexOf","key","focusItem","hasChildren","isExpanded","toggle","firstChildItem","parentItem","length","isSelectable","select","preventDefault","stopPropagation","handleNodeClick","closest","id","handleTogglerClick","componentWillLoad","syncFromNodes","onNodesChange","next","onSelectedIdsChange","input","parseNodes","walk","list","n","set","expanded","children","add","has","Array","isArray","trim","parsed","JSON","parse","selectable","willExpand","delete","mdNodeToggle","emit","wasOnlySelected","size","clear","from","mdSelectionChange","shadowRoot","querySelectorAll","itemFor","querySelector","cssEscape","focus","li","group","find","c","parentElement","parent","renderNode","level","posInSet","setSize","selected","tabbable","showToggle","h","role","String","undefined","tabindex","class","onKeyDown","onFocus","part","style","accent","onClick","exportparts","colorFromName","src","avatar","initials","avatarInitials","name","shape","title","text","position","icon","variant","onPointerDown","map","child","i","render","empty","Host","root","value","replace"],"sources":["src/components/md-organization-chart/md-organization-chart.css?tag=md-organization-chart&encapsulation=shadow","src/components/md-organization-chart/md-organization-chart.tsx"],"sourcesContent":["/* ==========================================================\n   md-organization-chart — Material Design 3 Expressive\n   Hierarchical org tree of avatar cards joined by connectors.\n\n   Layout: the classic pure-CSS connector technique (::before/::after\n   elbows on each branch + a vertical drop on each group), authored with\n   LOGICAL properties so RTL mirrors without extra rules. The viewport\n   pans horizontally when the tree outgrows its container.\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-org-chart-connector-color     Connector line colour\n     --md-org-chart-connector-width     Connector line thickness\n     --md-org-chart-node-color          Node card background\n     --md-org-chart-node-outline-color  Node card border colour\n     --md-org-chart-node-outline-width  Node card border width\n     --md-org-chart-node-shape          Node card corner radius\n     --md-org-chart-node-min-width      Node card min inline-size\n     --md-org-chart-node-max-width      Node card max inline-size\n     --md-org-chart-selected-color      Selected node accent (border + tint)\n     --md-org-chart-focus-ring-color    Focus outline colour (default: buttons')\n     --md-org-chart-state-layer-color   Hover / selected overlay colour\n     --md-org-chart-toggle-size         Expand/collapse toggler diameter\n     --md-org-chart-level-gap           Vertical gap between levels\n     --md-org-chart-sibling-gap         Horizontal gap between siblings\n     --md-org-chart-duration            Motion duration\n\n   CSS PARTS:\n     viewport      Scroll/pan container\n     tree          The role=\"tree\" root list\n     group         A role=\"group\" child list\n     node          A node card\n     node-selected A selected node card\n     state-layer   Hover / selected overlay\n     avatar        The md-avatar\n     avatar-image  The avatar's <img> (exported)\n     name          Primary label\n     title         Secondary label\n     toggle        Expand / collapse affordance\n     empty         Empty-state container\n\n   SLOTS:\n     empty         Custom empty-state content\n   ========================================================== */\n\n:host {\n  --_connector-color: var(--md-org-chart-connector-color, var(--md-sys-color-outline-variant, #c4c7c5));\n  --_connector-width: var(--md-org-chart-connector-width, 1.5px);\n  --_node-color: var(--md-org-chart-node-color, var(--md-sys-color-surface-container-low, #f7f2fa));\n  --_node-outline: var(--md-org-chart-node-outline-color, var(--md-sys-color-outline-variant, #c4c7c5));\n  --_node-outline-width: var(--md-org-chart-node-outline-width, 1px);\n  --_node-shape: var(--md-org-chart-node-shape, var(--md-sys-shape-corner-medium, 12px));\n  --_node-min-width: var(--md-org-chart-node-min-width, 176px);\n  --_node-max-width: var(--md-org-chart-node-max-width, 260px);\n  --_selected-color: var(--md-org-chart-selected-color, var(--md-sys-color-primary, #6750a4));\n  /* Match the focus ring the buttons use (md-sys-color-secondary). */\n  --_focus-ring-color: var(--md-org-chart-focus-ring-color, var(--md-sys-color-secondary, #625b71));\n  --_toggle-size: var(--md-org-chart-toggle-size, max(20px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  --_state-layer-color: var(--md-org-chart-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));\n  --_accent: var(--md-sys-color-primary, #6750a4);\n  --_level-gap: var(--md-org-chart-level-gap, max(24px, calc(28px + var(--md-sys-density-scale, 0) * 1px)));\n  --_sibling-gap: var(--md-org-chart-sibling-gap, max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px)));\n  --_duration: var(--md-org-chart-duration, var(--md-sys-motion-duration-medium2, 300ms));\n  --_easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n  --_line: var(--_connector-width) solid var(--_connector-color);\n  --_elbow: 12px;\n\n  display: block;\n  box-sizing: border-box;\n  color: var(--md-sys-color-on-surface, #1d1b20);\n  font-family: var(--md-sys-typescale-body-medium-font-family, Roboto, system-ui, sans-serif);\n}\n\n.md-org-chart__viewport {\n  overflow: auto;\n  /* Extra block-end room so a collapsed node's edge-hung toggler (which\n     overhangs the tree by half its size) isn't clipped by `overflow`. */\n  padding: 8px 8px calc(var(--_toggle-size) / 2 + 10px);\n  box-sizing: border-box;\n}\n\n/* ── Lists / connectors ───────────────────────────────────────── */\n\n.md-org-chart__tree,\n.md-org-chart__group {\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n}\n\n/* The tree shrink-wraps and self-centres; when wider than the viewport it\n   left-aligns (margin collapses to 0) and the viewport scrolls. */\n.md-org-chart__tree {\n  inline-size: max-content;\n  margin-inline: auto;\n}\n\n.md-org-chart__group {\n  padding-block-start: var(--_level-gap);\n}\n\n.md-org-chart__branch {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-block-start: var(--_level-gap);\n  padding-inline: calc(var(--_sibling-gap) / 2);\n  outline: none;\n}\n\n/* Horizontal bus halves (top border) meeting at the branch centre, plus the\n   short vertical riser up into the bus (border-inline-start on ::after). */\n.md-org-chart__branch::before,\n.md-org-chart__branch::after {\n  content: '';\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 50%;\n  inline-size: 50%;\n  block-size: var(--_level-gap);\n  border-block-start: var(--_line);\n}\n\n.md-org-chart__branch::after {\n  inset-inline-end: auto;\n  inset-inline-start: 50%;\n  border-inline-start: var(--_line);\n}\n\n/* Only child: no horizontal bus/riser — just the group's vertical drop. Drop\n   its own block-start padding too, otherwise that padding (with no riser line)\n   leaves a gap between the drop and the child. */\n.md-org-chart__branch:only-child::before,\n.md-org-chart__branch:only-child::after {\n  display: none;\n}\n\n.md-org-chart__branch:only-child {\n  padding-block-start: 0;\n}\n\n/* Trim the outermost overhang and round the two elbows. */\n.md-org-chart__branch:first-child::before,\n.md-org-chart__branch:last-child::after {\n  border: 0;\n}\n\n.md-org-chart__branch:last-child::before {\n  border-inline-end: var(--_line);\n  border-start-end-radius: var(--_elbow);\n}\n\n.md-org-chart__branch:first-child::after {\n  border-start-start-radius: var(--_elbow);\n}\n\n/* Vertical drop from a parent node down to its children's bus. */\n.md-org-chart__group::before {\n  content: '';\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 50%;\n  inline-size: 0;\n  block-size: var(--_level-gap);\n  border-inline-start: var(--_line);\n}\n\n/* Roots have no incoming connector. */\n.md-org-chart__tree > .md-org-chart__branch {\n  padding-block-start: 0;\n}\n.md-org-chart__tree > .md-org-chart__branch::before,\n.md-org-chart__tree > .md-org-chart__branch::after {\n  display: none;\n}\n\n/* ── Node card ────────────────────────────────────────────────── */\n\n.md-org-chart__node {\n  position: relative;\n  /* Above the sibling group's connector lines (painted later in DOM) so the\n     node and its toggler sit on top of the drop/bus rather than under them. */\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  gap: max(6px, calc(12px + var(--md-sys-density-scale, 0) * 1.5px));\n  padding-block: max(6px, calc(10px + var(--md-sys-density-scale, 0) * 1px));\n  padding-inline: max(8px, calc(14px + var(--md-sys-density-scale, 0) * 1.5px));\n  min-inline-size: var(--_node-min-width);\n  max-inline-size: var(--_node-max-width);\n  box-sizing: border-box;\n  border-radius: var(--_node-shape);\n  background: var(--_node-color);\n  border: var(--_node-outline-width) solid var(--_node-outline);\n  color: var(--md-sys-color-on-surface, #1d1b20);\n  transition:\n    border-color var(--_duration) var(--_easing),\n    box-shadow var(--_duration) var(--_easing);\n  /* No transform / will-change here: either would make the node a containing\n     block for the toggler tooltip's position:fixed popup, cutting it off. */\n}\n\n.md-org-chart__node--selectable {\n  cursor: pointer;\n}\n\n.md-org-chart__node--selectable:hover {\n  box-shadow: var(--md-sys-elevation-1, 0 1px 3px 1px rgba(0, 0, 0, 0.15));\n}\n\n/* Selection ring via border-colour + an outset box-shadow — NOT a wider border.\n   Growing the border would move the padding box and shift the edge-hung toggler,\n   so width + padding stay constant and nothing in the card moves on select. */\n.md-org-chart__node--selected {\n  border-color: var(--_selected-color);\n  box-shadow: 0 0 0 1px var(--_selected-color);\n}\n\n.md-org-chart__node--selected.md-org-chart__node--selectable:hover {\n  box-shadow:\n    0 0 0 1px var(--_selected-color),\n    var(--md-sys-elevation-1, 0 1px 3px 1px rgba(0, 0, 0, 0.15));\n}\n\n/* Focus ring on the focusable treeitem — same colour as the buttons. */\n.md-org-chart__branch:focus-visible > .md-org-chart__node {\n  outline: 3px solid var(--_focus-ring-color);\n  outline-offset: 2px;\n}\n\n/* Selection ripple (auto-attaches to the node card; self-clips to the radius,\n   so the edge-hung toggler is unaffected). */\n.md-org-chart__ripple {\n  --md-ripple-color: var(--_selected-color);\n  border-radius: inherit;\n}\n\n.md-org-chart__state-layer {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: var(--_state-layer-color);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--_duration) var(--_easing);\n}\n\n.md-org-chart__node--selectable:hover > .md-org-chart__state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n\n.md-org-chart__node--selectable:active > .md-org-chart__state-layer {\n  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);\n}\n\n.md-org-chart__node--selected > .md-org-chart__state-layer {\n  opacity: 0.08;\n  background: var(--_selected-color);\n}\n\n.md-org-chart__avatar {\n  flex: 0 0 auto;\n  --md-avatar-container-color: var(--md-sys-color-primary-container, #eaddff);\n  --md-avatar-label-color: var(--md-sys-color-on-primary-container, #21005d);\n}\n\n.md-org-chart__text {\n  display: flex;\n  flex-direction: column;\n  min-inline-size: 0;\n  gap: 2px;\n}\n\n.md-org-chart__name {\n  font-family: var(--md-sys-typescale-title-small-font-family, Roboto, system-ui, sans-serif);\n  font-size: max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: 600;\n  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n  color: var(--md-sys-color-on-surface, #1d1b20);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.md-org-chart__title {\n  font-size: max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));\n  line-height: max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n  color: var(--md-sys-color-on-surface-variant, #49454f);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ── Toggler ──────────────────────────────────────────────────── */\n\n/* The toggler is an md-icon-button hung on the node's bottom edge, over the\n   connector drop. z-index keeps it above the lines; its opaque tonal fill\n   masks the line where they meet. */\n/* The md-tooltip wrapper carries the positioning (centred on the node's bottom\n   edge, half in / half out) and stacks above the connector lines. Centred with\n   calc() (NOT transform): a transform on the tooltip host would make it the\n   containing block for its own position:fixed popup, cutting it off / mis-placing\n   it. inset-inline-start keeps this direction-aware for RTL. */\n.md-org-chart__toggle-tip {\n  position: absolute;\n  inset-block-end: calc(-1 * var(--_toggle-size) / 2);\n  inset-inline-start: calc(50% - var(--_toggle-size) / 2);\n  z-index: 3;\n  line-height: 0;\n}\n\n.md-org-chart__toggle {\n  --md-icon-button-container-color: var(--md-sys-color-surface-container-high, #ece6f0);\n  --md-icon-button-container-width: var(--_toggle-size);\n  --md-icon-button-container-height: var(--_toggle-size);\n  --md-icon-button-icon-size: calc(var(--_toggle-size) * 0.66);\n}\n\n/* ── Group enter animation (expressive) ───────────────────────── */\n\n@keyframes md-org-chart-grow {\n  from {\n    opacity: 0;\n    transform: translateY(-8px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n.md-org-chart__group {\n  animation: md-org-chart-grow var(--_duration) var(--_easing);\n  transform-origin: top center;\n}\n\n/* ── Empty state ──────────────────────────────────────────────── */\n\n.md-org-chart__empty {\n  padding: 32px 16px;\n  text-align: center;\n  color: var(--md-sys-color-on-surface-variant, #49454f);\n  font-size: var(--md-sys-typescale-body-medium-size, 14px);\n}\n\n/* ── Horizontal orientation ───────────────────────────────────────\n   Left→right tree — the block↔inline mirror of the default (vertical)\n   connector geometry above. Still authored in LOGICAL properties, so RTL\n   flips it to right→left with no extra rules. Levels now advance on the\n   inline axis; siblings stack on the block axis. */\n\n:host([orientation='horizontal']) .md-org-chart__tree,\n:host([orientation='horizontal']) .md-org-chart__group {\n  flex-direction: column;\n}\n\n/* Level gap runs inline (parent → child) instead of block. */\n:host([orientation='horizontal']) .md-org-chart__group {\n  padding-block-start: 0;\n  padding-inline-start: var(--_level-gap);\n}\n\n:host([orientation='horizontal']) .md-org-chart__branch {\n  flex-direction: row;\n  /* Node beside its child group (was column: node above group). */\n  padding-block: calc(var(--_sibling-gap) / 2); /* siblings spread on block now */\n  padding-inline: var(--_level-gap) 0;           /* incoming-connector strip on inline-start */\n}\n\n/* Roots and only-children take no incoming inline gap. */\n:host([orientation='horizontal']) .md-org-chart__branch:only-child,\n:host([orientation='horizontal']) .md-org-chart__tree > .md-org-chart__branch {\n  padding-inline-start: 0;\n}\n\n/* Sibling bus (now vertical, on the inline-start edge) + a short horizontal\n   riser into the node. Mirrors the vertical ::before/::after exactly. */\n:host([orientation='horizontal']) .md-org-chart__branch::before,\n:host([orientation='horizontal']) .md-org-chart__branch::after {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  inset-inline-end: auto;\n  inline-size: var(--_level-gap);\n  block-size: 50%;\n  border-block-start: 0;           /* clear the vertical-mode horizontal bus */\n  border-inline-start: var(--_line); /* vertical bus */\n}\n\n:host([orientation='horizontal']) .md-org-chart__branch::after {\n  inset-block-start: 50%;\n  border-block-start: var(--_line); /* the single horizontal riser */\n}\n\n/* Trim the outermost overhang. The :host-scoped bus rules above out-specify the\n   axis-agnostic `border:0` trims (0-3-1 vs 0-2-1), so re-assert them here at\n   matching specificity — otherwise the vertical bus overshoots the first/last\n   sibling. */\n:host([orientation='horizontal']) .md-org-chart__branch:first-child::before,\n:host([orientation='horizontal']) .md-org-chart__branch:last-child::after {\n  border: 0;\n}\n\n/* Round the two outermost elbows where the bus turns into the end risers.\n   The last child's riser is reconstructed on ::before since its ::after is\n   trimmed. */\n:host([orientation='horizontal']) .md-org-chart__branch:last-child::before {\n  border-inline-end: 0;             /* undo the vertical-mode riser rebuild */\n  border-start-end-radius: 0;       /* undo the vertical-mode elbow */\n  border-block-end: var(--_line);\n  border-end-start-radius: var(--_elbow);\n}\n:host([orientation='horizontal']) .md-org-chart__branch:first-child::after {\n  border-start-start-radius: var(--_elbow);\n}\n\n/* Parent → children drop is now a horizontal line. */\n:host([orientation='horizontal']) .md-org-chart__group::before {\n  inset-block-start: 50%;\n  inset-inline-start: 0;\n  inline-size: var(--_level-gap);\n  block-size: 0;\n  border-inline-start: 0;\n  border-block-start: var(--_line);\n}\n\n/* Toggler hangs on the node's inline-end edge (over the outgoing drop),\n   vertically centred — instead of the bottom edge in vertical mode. */\n:host([orientation='horizontal']) .md-org-chart__toggle-tip {\n  inset-block-end: auto;\n  inset-block-start: calc(50% - var(--_toggle-size) / 2);\n  inset-inline-start: auto;\n  inset-inline-end: calc(-1 * var(--_toggle-size) / 2);\n}\n\n/* Give the overhanging inline-end toggler room instead of the block-end room. */\n:host([orientation='horizontal']) .md-org-chart__viewport {\n  padding: 8px calc(var(--_toggle-size) / 2 + 10px) 8px 8px;\n}\n\n/* Enter animation grows from the inline-start (parent) side. */\n@keyframes md-org-chart-grow-h {\n  from {\n    opacity: 0;\n    transform: translateX(-8px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n:host([orientation='horizontal']) .md-org-chart__group {\n  animation-name: md-org-chart-grow-h;\n  transform-origin: left center;\n}\n\n/* ── Reduced motion ───────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .md-org-chart__node,\n  .md-org-chart__toggle-icon,\n  .md-org-chart__state-layer {\n    transition: none;\n  }\n  .md-org-chart__group {\n    animation: none;\n  }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A single node in the organization tree. Only `id` and `name` are required;\n * everything else is optional so the model stays terse.\n */\nexport interface OrgChartNode {\n  /** Stable identifier — used for selection, expansion, and eventing. */\n  id: string;\n  /** Primary label (person / unit name), rendered in the emphasis weight. */\n  name: string;\n  /** Secondary label (role / department), rendered muted under the name. */\n  title?: string;\n  /** Avatar image URL. Falls back to initials → name-derived initials. */\n  avatar?: string;\n  /** Explicit avatar initials (overrides name-derived ones). */\n  avatarInitials?: string;\n  /** Optional accent colour for the node's avatar ring + selected tint. */\n  accent?: string;\n  /** Initial expanded state for this node's subtree (default: expanded). */\n  expanded?: boolean;\n  /** When false the node cannot be selected (default: selectable). */\n  selectable?: boolean;\n  /** Child nodes. */\n  children?: OrgChartNode[];\n}\n\ntype NodeInput = OrgChartNode[] | string | null | undefined;\n\n/** Detail for the `mdSelectionChange` event. */\nexport interface OrgChartSelectionChangeDetail {\n  /** The node that was clicked / toggled. */\n  node: OrgChartNode;\n  /** The full set of selected ids after the change. */\n  selectedIds: string[];\n}\n\n/** Detail for the `mdNodeToggle` event. */\nexport interface OrgChartToggleDetail {\n  /** The node whose subtree was expanded / collapsed. */\n  node: OrgChartNode;\n  /** Whether the node is now expanded. */\n  expanded: boolean;\n}\n\n/**\n * `md-organization-chart` — Material Design 3 Expressive organization chart.\n *\n * Visualises hierarchical org data as a top-down tree of avatar cards joined\n * by connector lines. Data-driven (`nodes`), with collapsible subtrees,\n * optional single/multiple selection, and the full WAI-ARIA **tree** pattern\n * (roving tabindex, Arrow/Home/End navigation, Enter/Space to select).\n *\n * The surface pans horizontally when it outgrows its container, so a wide org\n * stays usable on small screens. Direction-aware (RTL mirrors the layout and\n * swaps the horizontal arrow keys); every affordance label is a prop for\n * localisation.\n *\n * ```html\n * <md-organization-chart selection-mode=\"single\"></md-organization-chart>\n * <script>\n *   document.querySelector('md-organization-chart').nodes = [{\n *     id: 'ceo', name: 'Amy Elsner', title: 'Founder & CEO',\n *     children: [{ id: 'prod', name: 'Asiya Javayant', title: 'Product Lead' }],\n *   }];\n * </script>\n * ```\n */\n@Component({\n  tag: 'md-organization-chart',\n  styleUrl: 'md-organization-chart.css',\n  shadow: true,\n})\nexport class MdOrganizationChart {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The organization tree. Accepts an `OrgChartNode[]` (property) or a JSON\n   * string (attribute). Multiple roots are supported (rendered side by side).\n   */\n  @Prop() nodes: NodeInput = [];\n\n  /**\n   * Selection behaviour:\n   *   - `'none'`     — nodes are not selectable (default).\n   *   - `'single'`   — one node at a time.\n   *   - `'multiple'` — any number of nodes.\n   */\n  @Prop({ reflect: true }) selectionMode: 'none' | 'single' | 'multiple' = 'none';\n\n  /** Selected node ids (controlled + initial). Kept in sync as the user selects. */\n  @Prop({ mutable: true }) selectedIds: string[] = [];\n\n  /** Show expand/collapse togglers on nodes that have children. */\n  @Prop() collapsible: boolean = true;\n\n  /**\n   * Layout direction of the tree:\n   *   - `'vertical'`   — top-down (default).\n   *   - `'horizontal'` — left-to-right; RTL mirrors it right-to-left.\n   *\n   * Only the visual layout changes — the tree's ARIA semantics and keyboard\n   * model (Arrow Left/Right = collapse/expand, Up/Down = move) are unchanged.\n   */\n  @Prop({ reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /** Accessible name for the tree (localisable). */\n  @Prop({ attribute: 'label' }) label: string = 'Organization chart';\n\n  /** Toggler accessible label when a node is collapsed (localisable). */\n  @Prop({ attribute: 'expand-label' }) expandLabel: string = 'Expand';\n\n  /** Toggler accessible label when a node is expanded (localisable). */\n  @Prop({ attribute: 'collapse-label' }) collapseLabel: string = 'Collapse';\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  /** Fired when the selection changes. */\n  @Event() mdSelectionChange!: EventEmitter<OrgChartSelectionChangeDetail>;\n\n  /** Fired when a node is expanded or collapsed. */\n  @Event() mdNodeToggle!: EventEmitter<OrgChartToggleDetail>;\n\n  /** Ids whose subtree is collapsed (default: everything expanded). */\n  @State() private collapsed = new Set<string>();\n  /** Working selection set (mirrors `selectedIds`). */\n  @State() private selection = new Set<string>();\n  /** Roving-tabindex owner — the one node reachable with Tab. */\n  @State() private activeId = '';\n\n  private nodeMap = new Map<string, OrgChartNode>();\n\n  componentWillLoad() {\n    this.syncFromNodes(this.nodes);\n    this.selection = new Set(this.selectedIds ?? []);\n  }\n\n  @Watch('nodes')\n  onNodesChange(next: NodeInput) {\n    this.syncFromNodes(next);\n  }\n\n  @Watch('selectedIds')\n  onSelectedIdsChange(next: string[]) {\n    this.selection = new Set(next ?? []);\n  }\n\n  /** Parse the incoming nodes, (re)build the id map, seed collapse + active. */\n  private syncFromNodes(input: NodeInput) {\n    const roots = this.parseNodes(input);\n    this.nodeMap = new Map();\n    const collapsed = new Set<string>();\n    const walk = (list: OrgChartNode[]) => {\n      for (const n of list) {\n        if (!n || n.id == null) continue;\n        this.nodeMap.set(n.id, n);\n        if (n.expanded === false && n.children?.length) collapsed.add(n.id);\n        if (n.children?.length) walk(n.children);\n      }\n    };\n    walk(roots);\n    this.collapsed = collapsed;\n    // Keep the roving owner valid; default to the first root.\n    if (!this.activeId || !this.nodeMap.has(this.activeId)) {\n      this.activeId = roots[0]?.id ?? '';\n    }\n    this.roots = roots;\n  }\n\n  private roots: OrgChartNode[] = [];\n\n  private parseNodes(input: NodeInput): OrgChartNode[] {\n    if (Array.isArray(input)) return input;\n    if (typeof input === 'string' && input.trim()) {\n      try {\n        const parsed = JSON.parse(input);\n        return Array.isArray(parsed) ? parsed : [parsed];\n      } catch {\n        return [];\n      }\n    }\n    return [];\n  }\n\n  private isExpanded(node: OrgChartNode): boolean {\n    return !this.collapsed.has(node.id);\n  }\n\n  private hasChildren(node: OrgChartNode): boolean {\n    return !!node.children && node.children.length > 0;\n  }\n\n  private isSelectable(node: OrgChartNode): boolean {\n    return this.selectionMode !== 'none' && node.selectable !== false;\n  }\n\n  private toggle(node: OrgChartNode) {\n    if (!this.hasChildren(node)) return;\n    const next = new Set(this.collapsed);\n    const willExpand = next.has(node.id);\n    if (willExpand) next.delete(node.id);\n    else next.add(node.id);\n    this.collapsed = next;\n    this.mdNodeToggle.emit({ node, expanded: willExpand });\n  }\n\n  private select(node: OrgChartNode) {\n    if (!this.isSelectable(node)) return;\n    const next = new Set(this.selection);\n    if (this.selectionMode === 'single') {\n      const wasOnlySelected = next.has(node.id) && next.size === 1;\n      next.clear();\n      if (!wasOnlySelected) next.add(node.id);\n    } else {\n      if (next.has(node.id)) next.delete(node.id);\n      else next.add(node.id);\n    }\n    this.selection = next;\n    this.selectedIds = Array.from(next);\n    this.mdSelectionChange.emit({ node, selectedIds: this.selectedIds });\n  }\n\n  // ── Keyboard: WAI-ARIA tree pattern ──────────────────────────────────────\n  private visibleItems(): HTMLElement[] {\n    return Array.from(\n      this.el.shadowRoot?.querySelectorAll('li[role=\"treeitem\"]') ?? [],\n    ) as HTMLElement[];\n  }\n\n  private itemFor(node: OrgChartNode): HTMLElement | null {\n    return (\n      (this.el.shadowRoot?.querySelector(\n        `li[role=\"treeitem\"][data-id=\"${cssEscape(node.id)}\"]`,\n      ) as HTMLElement | null) ?? null\n    );\n  }\n\n  private focusItem(el: HTMLElement | null | undefined) {\n    if (!el) return;\n    const id = el.getAttribute('data-id');\n    if (id) this.activeId = id;\n    el.focus();\n  }\n\n  private firstChildItem(li: HTMLElement): HTMLElement | null {\n    const group = Array.from(li.children).find(\n      (c) => (c as HTMLElement).getAttribute?.('role') === 'group',\n    ) as HTMLElement | undefined;\n    if (!group) return null;\n    return (\n      (Array.from(group.children).find(\n        (c) => (c as HTMLElement).getAttribute?.('role') === 'treeitem',\n      ) as HTMLElement | undefined) ?? null\n    );\n  }\n\n  private parentItem(li: HTMLElement): HTMLElement | null {\n    const group = li.parentElement;\n    if (!group || group.getAttribute('role') !== 'group') return null;\n    const parent = group.parentElement;\n    return parent && parent.getAttribute('role') === 'treeitem'\n      ? (parent as HTMLElement)\n      : null;\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    const current = e.target as HTMLElement;\n    if (!current || current.getAttribute?.('role') !== 'treeitem') return;\n    const node = this.nodeMap.get(current.getAttribute('data-id') ?? '');\n    if (!node) return;\n\n    const rtl = getComputedStyle(this.el).direction === 'rtl';\n    const forwardKey = rtl ? 'ArrowLeft' : 'ArrowRight';\n    const backwardKey = rtl ? 'ArrowRight' : 'ArrowLeft';\n    const items = this.visibleItems();\n    const idx = items.indexOf(current);\n\n    switch (e.key) {\n      case 'ArrowDown':\n        this.focusItem(items[idx + 1]);\n        break;\n      case 'ArrowUp':\n        this.focusItem(items[idx - 1]);\n        break;\n      case forwardKey:\n        if (this.hasChildren(node)) {\n          if (!this.isExpanded(node)) this.toggle(node);\n          else this.focusItem(this.firstChildItem(current));\n        }\n        break;\n      case backwardKey:\n        if (this.hasChildren(node) && this.isExpanded(node)) this.toggle(node);\n        else this.focusItem(this.parentItem(current));\n        break;\n      case 'Home':\n        this.focusItem(items[0]);\n        break;\n      case 'End':\n        this.focusItem(items[items.length - 1]);\n        break;\n      case 'Enter':\n      case ' ':\n      case 'Spacebar':\n        if (this.isSelectable(node)) this.select(node);\n        else if (this.hasChildren(node)) this.toggle(node);\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  private handleNodeClick = (node: OrgChartNode) => (e: MouseEvent) => {\n    // Toggler clicks are handled on the toggler itself.\n    if ((e.target as HTMLElement)?.closest('.md-org-chart__toggle')) return;\n    this.activeId = node.id;\n    if (this.isSelectable(node)) this.select(node);\n  };\n\n  private handleTogglerClick = (node: OrgChartNode) => (e: MouseEvent) => {\n    e.stopPropagation();\n    this.toggle(node);\n  };\n\n  private renderNode(node: OrgChartNode, level: number, posInSet: number, setSize: number) {\n    const has = this.hasChildren(node);\n    const expanded = this.isExpanded(node);\n    const selectable = this.isSelectable(node);\n    const selected = selectable && this.selection.has(node.id);\n    const tabbable = node.id === this.activeId;\n    const showToggle = this.collapsible && has;\n\n    return (\n      <li\n        role=\"treeitem\"\n        data-id={node.id}\n        aria-level={level}\n        aria-setsize={setSize}\n        aria-posinset={posInSet}\n        aria-expanded={has ? String(expanded) : undefined}\n        aria-selected={selectable ? String(selected) : undefined}\n        tabindex={tabbable ? '0' : '-1'}\n        class={{\n          'md-org-chart__branch': true,\n          'md-org-chart__branch--collapsed': has && !expanded,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onFocus={() => (this.activeId = node.id)}\n      >\n        <div\n          class={{\n            'md-org-chart__node': true,\n            'md-org-chart__node--selectable': selectable,\n            'md-org-chart__node--selected': selected,\n          }}\n          part={`node${selected ? ' node-selected' : ''}`}\n          style={node.accent ? { '--_accent': node.accent } : undefined}\n          onClick={this.handleNodeClick(node)}\n        >\n          <span class=\"md-org-chart__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n          {selectable && <md-ripple class=\"md-org-chart__ripple\"></md-ripple>}\n          <md-avatar\n            class=\"md-org-chart__avatar\"\n            part=\"avatar\"\n            exportparts=\"image: avatar-image\"\n            // Decorative: the node's name is already announced as the treeitem's\n            // text, so exposing the avatar's label would double-speak it. The\n            // auto per-name palette is disabled in favour of a fixed AA-contrast\n            // pair (see CSS) — initials here are a photo fallback, not identity.\n            aria-hidden=\"true\"\n            colorFromName={false}\n            src={node.avatar}\n            initials={node.avatarInitials}\n            name={node.name}\n            size=\"medium\"\n            shape=\"circle\"\n          ></md-avatar>\n          <span class=\"md-org-chart__text\">\n            <span class=\"md-org-chart__name\" part=\"name\">{node.name}</span>\n            {node.title && (\n              <span class=\"md-org-chart__title\" part=\"title\">{node.title}</span>\n            )}\n          </span>\n          {showToggle && (\n            // Decorative pointer affordance: expand/collapse is exposed to AT via\n            // the treeitem's aria-expanded + Arrow keys, so the button is\n            // aria-hidden and taken out of the tab order (group-tabindex=-1) to\n            // avoid a nested interactive control inside the treeitem. The label\n            // rides in the library md-tooltip rather than a native `title`.\n            <md-tooltip\n              class=\"md-org-chart__toggle-tip\"\n              text={expanded ? this.collapseLabel : this.expandLabel}\n              position=\"bottom\"\n            >\n              <md-icon-button\n                class=\"md-org-chart__toggle\"\n                part=\"toggle\"\n                icon={expanded ? 'expand_less' : 'expand_more'}\n                size=\"xs\"\n                variant=\"tonal\"\n                shape=\"round\"\n                aria-hidden=\"true\"\n                group-tabindex={-1}\n                onPointerDown={(e: PointerEvent) => e.stopPropagation()}\n                onClick={this.handleTogglerClick(node)}\n              ></md-icon-button>\n            </md-tooltip>\n          )}\n        </div>\n\n        {has && expanded && (\n          <ul role=\"group\" class=\"md-org-chart__group\" part=\"group\">\n            {node.children!.map((child, i) =>\n              this.renderNode(child, level + 1, i + 1, node.children!.length),\n            )}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  render() {\n    const roots = this.roots;\n    const empty = roots.length === 0;\n\n    return (\n      <Host\n        class={{\n          'md-org-chart': true,\n          'md-org-chart--empty': empty,\n        }}\n      >\n        <div class=\"md-org-chart__viewport\" part=\"viewport\">\n          {empty ? (\n            <div class=\"md-org-chart__empty\" part=\"empty\" role=\"status\">\n              <slot name=\"empty\">No data</slot>\n            </div>\n          ) : (\n            <ul\n              role=\"tree\"\n              class=\"md-org-chart__tree\"\n              part=\"tree\"\n              aria-label={this.label}\n              aria-multiselectable={\n                this.selectionMode === 'multiple' ? 'true' : undefined\n              }\n            >\n              {roots.map((root, i) => this.renderNode(root, 1, i + 1, roots.length))}\n            </ul>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n/** Minimal CSS.escape shim (attribute-selector safe) for id values. */\nfunction cssEscape(value: string): string {\n  return String(value).replace(/[\"\\\\\\]]/g, '\\\\$&');\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/md3/{p-be02624e.entry.js → p-3c0469aa.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,h as e,H as a}from"./p-DTaX19_O.js";const d=()=>`:host{display:flex;flex-direction:column}.md-menu-item-group__label{font-family:var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-medium-size, 12px);font-weight:var(--md-sys-typescale-label-medium-weight, 500);line-height:var(--md-sys-typescale-label-medium-line-height, 16px);color:var(--md-sys-color-on-surface-variant, #49454F);padding:var(--md-sys-spacing-inset-sm, 8px) var(--md-sys-spacing-inset-md, 12px) var(--md-sys-spacing-inset-xs, 4px);user-select:none}.md-menu-item-group__items{display:flex;flex-direction:column}:host(:not(:last-child))::after{content:'';height:1px;background-color:var(--md-sys-color-outline-variant, #CAC4D0);margin:var(--md-sys-spacing-gap-xs, 4px) 0}:host([data-use-gap]:not(:last-child))::after{display:none}:host([data-variant="standard"][data-use-gap]){background-color:var(--md-sys-color-surface-container-low, #F7F2FA);--md-menu-group-shape:var(--md-menu-group-container-shape, 12px);border-radius:var(--md-menu-group-shape);padding:var(--md-sys-spacing-inset-xs, 4px);overflow:hidden}:host([data-variant="vibrant"][data-use-gap]){background-color:var(--md-sys-color-tertiary-container, #FFD8E4);--md-menu-group-shape:var(--md-menu-group-container-shape, 12px);border-radius:var(--md-menu-group-shape);padding:var(--md-sys-spacing-inset-xs, 4px);overflow:hidden}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const t=class{constructor(e){s(this,e);this.label="";this.density=0}render(){return e(a,{key:"c2b4aa6dd57a904a490d51d6093fe8ed51749213",class:"md-menu-item-group",role:"group","aria-label":this.label||undefined},this.label&&e("span",{key:"78268edea8eb9925c8532022e0ed67dda5244205",class:"md-menu-item-group__label"},this.label),e("div",{key:"1a501e7ffda6e9ca6e462fa7b165bc84dc0c7cf1",class:"md-menu-item-group__items",role:"presentation"},e("slot",{key:"b219c7c41d3dd1cabed40159bf1fd341bb4cf19f"})))}};t.style=d();export{t as md_menu_item_group};
-//# sourceMappingURL=p-be02624e.entry.js.map
+import{r as s,h as e,H as a}from"./p-WmvQpZnM.js";const d=()=>`:host{display:flex;flex-direction:column}.md-menu-item-group__label{font-family:var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-medium-size, 12px);font-weight:var(--md-sys-typescale-label-medium-weight, 500);line-height:var(--md-sys-typescale-label-medium-line-height, 16px);color:var(--md-sys-color-on-surface-variant, #49454F);padding:var(--md-sys-spacing-inset-sm, 8px) var(--md-sys-spacing-inset-md, 12px) var(--md-sys-spacing-inset-xs, 4px);user-select:none}.md-menu-item-group__items{display:flex;flex-direction:column}:host(:not(:last-child))::after{content:'';height:1px;background-color:var(--md-sys-color-outline-variant, #CAC4D0);margin:var(--md-sys-spacing-gap-xs, 4px) 0}:host([data-use-gap]:not(:last-child))::after{display:none}:host([data-variant="standard"][data-use-gap]){background-color:var(--md-sys-color-surface-container-low, #F7F2FA);--md-menu-group-shape:var(--md-menu-group-container-shape, 12px);border-radius:var(--md-menu-group-shape);padding:var(--md-sys-spacing-inset-xs, 4px);overflow:hidden}:host([data-variant="vibrant"][data-use-gap]){background-color:var(--md-sys-color-tertiary-container, #FFD8E4);--md-menu-group-shape:var(--md-menu-group-container-shape, 12px);border-radius:var(--md-menu-group-shape);padding:var(--md-sys-spacing-inset-xs, 4px);overflow:hidden}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const t=class{constructor(e){s(this,e);this.label="";this.density=0}render(){return e(a,{key:"c2b4aa6dd57a904a490d51d6093fe8ed51749213",class:"md-menu-item-group",role:"group","aria-label":this.label||undefined},this.label&&e("span",{key:"78268edea8eb9925c8532022e0ed67dda5244205",class:"md-menu-item-group__label"},this.label),e("div",{key:"1a501e7ffda6e9ca6e462fa7b165bc84dc0c7cf1",class:"md-menu-item-group__items",role:"presentation"},e("slot",{key:"b219c7c41d3dd1cabed40159bf1fd341bb4cf19f"})))}};t.style=d();export{t as md_menu_item_group};
+//# sourceMappingURL=p-3c0469aa.entry.js.map

package/dist/md3/{p-63b8c8d1.entry.js → p-408ee4be.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,H as o,a as s}from"./p-DTaX19_O.js";const r=()=>`:host{display:contents}`;const a=class{constructor(t){e(this,t);this.presentational=false}render(){return t(o,{key:"d8dea27919051883672566941ed9b97e02b8a2ec",class:"md-table-body",role:this.presentational?"presentation":"rowgroup","data-md-rowgroup":"body"},t("slot",{key:"59b46094354fd65be1e9d58d74fb5eb71d6759de",onSlotchange:()=>this.el.dispatchEvent(new CustomEvent("mdRowgroupSlotChange",{bubbles:true}))}))}get el(){return s(this)}};a.style=r();export{a as md_table_body};
-//# sourceMappingURL=p-63b8c8d1.entry.js.map
+import{r as e,h as t,H as o,g as s}from"./p-WmvQpZnM.js";const r=()=>`:host{display:contents}`;const d=class{constructor(t){e(this,t);this.presentational=false}render(){return t(o,{key:"d8dea27919051883672566941ed9b97e02b8a2ec",class:"md-table-body",role:this.presentational?"presentation":"rowgroup","data-md-rowgroup":"body"},t("slot",{key:"59b46094354fd65be1e9d58d74fb5eb71d6759de",onSlotchange:()=>this.el.dispatchEvent(new CustomEvent("mdRowgroupSlotChange",{bubbles:true}))}))}get el(){return s(this)}};d.style=r();export{d as md_table_body};
+//# sourceMappingURL=p-408ee4be.entry.js.map

package/dist/md3/{p-3015c7e3.entry.js → p-4770b534.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,f as a,h as o,H as r,a as t}from"./p-DTaX19_O.js";const s=()=>`:host{--_color:var(--md-table-container-color, var(--md-sys-color-surface-container-low, #F7F2FA));--_shape:var(--md-table-container-shape, var(--md-sys-shape-corner-extra-large, 24px));--_elevation:var(--md-table-container-elevation, var(--md-sys-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.08)));--_outline-color:var(--md-table-container-outline-color, var(--md-sys-color-outline-variant, #CAC4D0));--_outline-width:var(--md-table-container-outline-width, 1px);--_max-h:none;--_min-h:0;display:flex;flex-direction:column;background-color:var(--_color);border-radius:var(--_shape);position:relative;overflow:hidden;isolation:isolate;inline-size:100%;box-sizing:border-box;transition:box-shadow var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),     background-color var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-table-container--shape-extra-large){--_shape:var(--md-sys-shape-corner-extra-large, 28px)}:host(.md-table-container--shape-large){--_shape:var(--md-sys-shape-corner-large, 16px)}:host(.md-table-container--shape-medium){--_shape:var(--md-sys-shape-corner-medium, 12px)}:host(.md-table-container--shape-small){--_shape:var(--md-sys-shape-corner-small, 8px)}:host(.md-table-container--shape-none){--_shape:0}:host(.md-table-container--elevated){--md-table-surface:var(--md-sys-color-surface-container-low, #F7F2FA);background-color:var(--md-table-surface);box-shadow:var(--_elevation)}:host(.md-table-container--outlined){--md-table-surface:var(--md-sys-color-surface, #FFFBFE);background-color:var(--md-table-surface);box-shadow:none;border:var(--_outline-width) solid var(--_outline-color)}:host(.md-table-container--filled){--md-table-surface:var(--md-sys-color-surface-container-low, #F7F2FA);background-color:var(--md-table-surface);box-shadow:none}:host(.md-table-container--flat){--md-table-surface:var(--md-sys-color-surface, #FEF7FF);background-color:transparent;box-shadow:none}:host([elevation='0']){box-shadow:none}:host([elevation='1']){box-shadow:var(--md-sys-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15))}:host([elevation='2']){box-shadow:var(--md-sys-elevation-2, 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15))}:host([elevation='3']){box-shadow:var(--md-sys-elevation-3, 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3))}:host([elevation='4']){box-shadow:var(--md-sys-elevation-4, 0 6px 10px 4px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.3))}:host([elevation='5']){box-shadow:var(--md-sys-elevation-5, 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.3))}:host(.md-table-container--vibrant){background-color:color-mix(in srgb, var(--md-sys-color-primary, #6750A4) 6%, var(--md-sys-color-surface, #FEF7FF));--md-table-head-bg:var(--md-sys-color-primary-container, #EADDFF);--md-table-head-color:var(--md-sys-color-on-primary-container, #21005D);--md-table-sort-label-color:var(--md-sys-color-on-primary-container, #21005D);--md-table-sort-label-active-color:var(--md-sys-color-primary, #6750A4);--md-table-row-hover-color:var(--md-sys-color-primary, #6750A4);--md-table-row-selected-bg:var(--md-sys-color-tertiary-container, #FFD8E4);--md-table-row-selected-color:var(--md-sys-color-on-tertiary-container, #31111D);--md-table-divider-color:color-mix(in srgb, var(--md-sys-color-primary, #6750A4) 22%, transparent);--md-table-stripe-color:color-mix(in srgb, var(--md-sys-color-primary, #6750A4) 7%, transparent)}.md-table-container__top:empty,.md-table-container__bottom:empty{display:none}.md-table-container__top,.md-table-container__bottom{display:flex;flex-direction:column;flex:0 0 auto}.md-table-container__scroll{flex:1 1 auto;min-block-size:var(--_min-h);overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;position:relative}:host(.md-table-container--scrollable) .md-table-container__scroll{max-block-size:var(--_max-h);overflow-y:auto}:host(.md-table-container--frozen-header) .md-table-container__scroll{overflow:visible;max-block-size:none}.md-table-container__scroll::-webkit-scrollbar{width:10px;height:10px}.md-table-container__scroll::-webkit-scrollbar-thumb{background:var(--md-sys-color-surface-container-highest, #E6E0E9);border-radius:999px;border:2px solid transparent;background-clip:content-box}.md-table-container__scroll::-webkit-scrollbar-thumb:hover{background:var(--md-sys-color-outline-variant, #CAC4D0);background-clip:content-box}.md-table-container__scroll::-webkit-scrollbar-corner{background:transparent}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;const n=class{constructor(a){e(this,a);this.variant="elevated";this.shape="large";this.maxHeight="";this.minHeight="";this.vibrant=false}connectedCallback(){if(typeof MutationObserver==="undefined")return;this.frozenMirror=new MutationObserver((()=>a(this)));this.frozenMirror.observe(this.el,{subtree:true,attributes:true,attributeFilter:["frozen-header"]});this.childMirror=new MutationObserver((e=>{for(const o of e){for(const e of[...o.addedNodes,...o.removedNodes]){if(e.tagName==="MD-TABLE"){a(this);return}}}}));this.childMirror.observe(this.el,{childList:true})}disconnectedCallback(){this.frozenMirror?.disconnect();this.frozenMirror=undefined;this.childMirror?.disconnect();this.childMirror=undefined}handlePaginationChange(e){if(e.target?.tagName!=="MD-TABLE-PAGINATION")return;const a=this.el.querySelector("md-table");a?.dispatchEvent(new CustomEvent("mdMotionArm"))}render(){const e={};if(this.maxHeight){e["--_max-h"]=this.maxHeight;e["--md-table-body-max-h"]=this.maxHeight}if(this.minHeight)e["--_min-h"]=this.minHeight;const a=!!this.el.querySelector("md-table[frozen-header]");return o(r,{key:"3ad67d59fd5a07811127cbe176dcd9ce883a3bc0",class:{"md-table-container":true,[`md-table-container--${this.variant}`]:true,[`md-table-container--shape-${this.shape}`]:true,"md-table-container--scrollable":!!this.maxHeight,"md-table-container--frozen-header":a,"md-table-container--vibrant":this.vibrant},style:e},o("div",{key:"8bd0ad9d9b2aa2c09da06e21d184bfc287d582ee",class:"md-table-container__top",part:"top"},o("slot",{key:"f2fccf15e3426f69f9a865b8130db1f8369e3c99",name:"top"})),o("div",{key:"12e240cc907c0cb2812eb1852758d53c6a13ed99",class:"md-table-container__scroll",part:"scroll"},o("slot",{key:"8c70dba498541b018ad4c2678dc7b4f5b89ef953"})),o("div",{key:"15eebc6d105517b22b718fe3792721fb9ebd65fb",class:"md-table-container__bottom",part:"bottom"},o("slot",{key:"b5d777b38163ce20cbad2caf4196f6d08fa3b740",name:"bottom"})))}get el(){return t(this)}};n.style=s();export{n as md_table_container};
-//# sourceMappingURL=p-3015c7e3.entry.js.map
+import{r as e,f as a,h as o,H as r,g as t}from"./p-WmvQpZnM.js";const s=()=>`:host{--_color:var(--md-table-container-color, var(--md-sys-color-surface-container-low, #F7F2FA));--_shape:var(--md-table-container-shape, var(--md-sys-shape-corner-extra-large, 24px));--_elevation:var(--md-table-container-elevation, var(--md-sys-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.08)));--_outline-color:var(--md-table-container-outline-color, var(--md-sys-color-outline-variant, #CAC4D0));--_outline-width:var(--md-table-container-outline-width, 1px);--_max-h:none;--_min-h:0;display:flex;flex-direction:column;background-color:var(--_color);border-radius:var(--_shape);position:relative;overflow:hidden;isolation:isolate;inline-size:100%;box-sizing:border-box;transition:box-shadow var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),     background-color var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-table-container--shape-extra-large){--_shape:var(--md-sys-shape-corner-extra-large, 28px)}:host(.md-table-container--shape-large){--_shape:var(--md-sys-shape-corner-large, 16px)}:host(.md-table-container--shape-medium){--_shape:var(--md-sys-shape-corner-medium, 12px)}:host(.md-table-container--shape-small){--_shape:var(--md-sys-shape-corner-small, 8px)}:host(.md-table-container--shape-none){--_shape:0}:host(.md-table-container--elevated){--md-table-surface:var(--md-sys-color-surface-container-low, #F7F2FA);background-color:var(--md-table-surface);box-shadow:var(--_elevation)}:host(.md-table-container--outlined){--md-table-surface:var(--md-sys-color-surface, #FFFBFE);background-color:var(--md-table-surface);box-shadow:none;border:var(--_outline-width) solid var(--_outline-color)}:host(.md-table-container--filled){--md-table-surface:var(--md-sys-color-surface-container-low, #F7F2FA);background-color:var(--md-table-surface);box-shadow:none}:host(.md-table-container--flat){--md-table-surface:var(--md-sys-color-surface, #FEF7FF);background-color:transparent;box-shadow:none}:host([elevation='0']){box-shadow:none}:host([elevation='1']){box-shadow:var(--md-sys-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15))}:host([elevation='2']){box-shadow:var(--md-sys-elevation-2, 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15))}:host([elevation='3']){box-shadow:var(--md-sys-elevation-3, 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3))}:host([elevation='4']){box-shadow:var(--md-sys-elevation-4, 0 6px 10px 4px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.3))}:host([elevation='5']){box-shadow:var(--md-sys-elevation-5, 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.3))}:host(.md-table-container--vibrant){background-color:color-mix(in srgb, var(--md-sys-color-primary, #6750A4) 6%, var(--md-sys-color-surface, #FEF7FF));--md-table-head-bg:var(--md-sys-color-primary-container, #EADDFF);--md-table-head-color:var(--md-sys-color-on-primary-container, #21005D);--md-table-sort-label-color:var(--md-sys-color-on-primary-container, #21005D);--md-table-sort-label-active-color:var(--md-sys-color-primary, #6750A4);--md-table-row-hover-color:var(--md-sys-color-primary, #6750A4);--md-table-row-selected-bg:var(--md-sys-color-tertiary-container, #FFD8E4);--md-table-row-selected-color:var(--md-sys-color-on-tertiary-container, #31111D);--md-table-divider-color:color-mix(in srgb, var(--md-sys-color-primary, #6750A4) 22%, transparent);--md-table-stripe-color:color-mix(in srgb, var(--md-sys-color-primary, #6750A4) 7%, transparent)}.md-table-container__top:empty,.md-table-container__bottom:empty{display:none}.md-table-container__top,.md-table-container__bottom{display:flex;flex-direction:column;flex:0 0 auto}.md-table-container__scroll{flex:1 1 auto;min-block-size:var(--_min-h);overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;position:relative}:host(.md-table-container--scrollable) .md-table-container__scroll{max-block-size:var(--_max-h);overflow-y:auto}:host(.md-table-container--frozen-header) .md-table-container__scroll{overflow:visible;max-block-size:none}.md-table-container__scroll::-webkit-scrollbar{width:10px;height:10px}.md-table-container__scroll::-webkit-scrollbar-thumb{background:var(--md-sys-color-surface-container-highest, #E6E0E9);border-radius:999px;border:2px solid transparent;background-clip:content-box}.md-table-container__scroll::-webkit-scrollbar-thumb:hover{background:var(--md-sys-color-outline-variant, #CAC4D0);background-clip:content-box}.md-table-container__scroll::-webkit-scrollbar-corner{background:transparent}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;const n=class{constructor(a){e(this,a);this.variant="elevated";this.shape="large";this.maxHeight="";this.minHeight="";this.vibrant=false}connectedCallback(){if(typeof MutationObserver==="undefined")return;this.frozenMirror=new MutationObserver((()=>a(this)));this.frozenMirror.observe(this.el,{subtree:true,attributes:true,attributeFilter:["frozen-header"]});this.childMirror=new MutationObserver((e=>{for(const o of e){for(const e of[...o.addedNodes,...o.removedNodes]){if(e.tagName==="MD-TABLE"){a(this);return}}}}));this.childMirror.observe(this.el,{childList:true})}disconnectedCallback(){this.frozenMirror?.disconnect();this.frozenMirror=undefined;this.childMirror?.disconnect();this.childMirror=undefined}handlePaginationChange(e){if(e.target?.tagName!=="MD-TABLE-PAGINATION")return;const a=this.el.querySelector("md-table");a?.dispatchEvent(new CustomEvent("mdMotionArm"))}render(){const e={};if(this.maxHeight){e["--_max-h"]=this.maxHeight;e["--md-table-body-max-h"]=this.maxHeight}if(this.minHeight)e["--_min-h"]=this.minHeight;const a=!!this.el.querySelector("md-table[frozen-header]");return o(r,{key:"3ad67d59fd5a07811127cbe176dcd9ce883a3bc0",class:{"md-table-container":true,[`md-table-container--${this.variant}`]:true,[`md-table-container--shape-${this.shape}`]:true,"md-table-container--scrollable":!!this.maxHeight,"md-table-container--frozen-header":a,"md-table-container--vibrant":this.vibrant},style:e},o("div",{key:"8bd0ad9d9b2aa2c09da06e21d184bfc287d582ee",class:"md-table-container__top",part:"top"},o("slot",{key:"f2fccf15e3426f69f9a865b8130db1f8369e3c99",name:"top"})),o("div",{key:"12e240cc907c0cb2812eb1852758d53c6a13ed99",class:"md-table-container__scroll",part:"scroll"},o("slot",{key:"8c70dba498541b018ad4c2678dc7b4f5b89ef953"})),o("div",{key:"15eebc6d105517b22b718fe3792721fb9ebd65fb",class:"md-table-container__bottom",part:"bottom"},o("slot",{key:"b5d777b38163ce20cbad2caf4196f6d08fa3b740",name:"bottom"})))}get el(){return t(this)}};n.style=s();export{n as md_table_container};
+//# sourceMappingURL=p-4770b534.entry.js.map

package/dist/md3/p-4aed552f.entry.js

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