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

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

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

package/dist/components-csr/md-side-sheet.js

@@ -0,0 +1,2 @@
+import{p as e,H as s,c as t,h as i,d,t as a}from"./p-bSpXNc5J.js";import{d as n}from"./p-IWA0yIjJ.js";import{d as o}from"./p-Hm3X1iai.js";const r=()=>`:host{--_container-color:var(--md-side-sheet-container-color, var(--md-sys-color-surface, #FFFBFE));--_container-shape:var(--md-side-sheet-container-shape, 0px);--_headline-color:var(--md-side-sheet-headline-color, var(--md-sys-color-on-surface-variant, #49454F));--_content-color:var(--md-side-sheet-content-color, var(--md-sys-color-on-surface, #1C1B1F));--_scrim-color:var(--md-side-sheet-scrim-color, rgba(0, 0, 0, 0.32));--_divider-color:var(--md-side-sheet-divider-color, var(--md-sys-color-outline-variant, #CAC4D0));--_width:var(--md-side-sheet-width, max(280px, calc(360px + var(--md-sys-density-scale, 0) * 16px)));--_max-width:var(--md-side-sheet-max-width, max(320px, calc(400px + var(--md-sys-density-scale, 0) * 16px)));--_icon-color:var(--md-side-sheet-icon-color, var(--md-sys-color-on-surface-variant, #49454F));display:block;position:relative;box-sizing:border-box}:host(.md-side-sheet--standard){inline-size:min(var(--_width), 100%);max-inline-size:min(var(--_max-width), 100%);block-size:100%}:host(.md-side-sheet--standard:not(.md-side-sheet--open)){display:none}:host(.md-side-sheet--standard) .md-side-sheet__container{position:relative;inline-size:100%;block-size:100%;background-color:var(--_container-color);color:var(--_content-color);display:flex;flex-direction:column;overflow:hidden}:host(.md-side-sheet--standard.md-side-sheet--end) .md-side-sheet__container{border-inline-start:1px solid var(--_divider-color)}:host(.md-side-sheet--standard.md-side-sheet--start) .md-side-sheet__container{border-inline-end:1px solid var(--_divider-color)}:host(.md-side-sheet--modal){display:contents}:host(.md-side-sheet--modal:not(.md-side-sheet--open)){display:contents;pointer-events:none}.md-side-sheet__scrim{position:fixed;inset:0;background-color:var(--_scrim-color);z-index:var(--md-sys-z-index-popup, 1000);opacity:0;pointer-events:none;transition:opacity var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-side-sheet--modal.md-side-sheet--open) .md-side-sheet__scrim{opacity:1;pointer-events:auto}:host(.md-side-sheet--modal) .md-side-sheet__container{position:fixed;inset-block:0;z-index:var(--md-sys-z-index-dialog-scrim, 1001);inline-size:min(var(--_width), 100%);max-inline-size:min(var(--_max-width), 100%);background-color:var(--md-sys-color-surface-container-low, #F7F2FA);color:var(--_content-color);display:flex;flex-direction:column;overflow:hidden;pointer-events:none;opacity:0;box-shadow:var(--md-sys-elevation-1);transition:transform var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),     opacity var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-side-sheet--modal.md-side-sheet--end) .md-side-sheet__container{inset-inline-end:0;inset-inline-start:auto;transform:translateX(100%)}:host(.md-side-sheet--modal.md-side-sheet--start) .md-side-sheet__container{inset-inline-start:0;inset-inline-end:auto;transform:translateX(-100%)}:host(.md-side-sheet--modal.md-side-sheet--open) .md-side-sheet__container{pointer-events:auto;transform:translateX(0);opacity:1}:host-context([dir="rtl"]):host(.md-side-sheet--modal.md-side-sheet--end) .md-side-sheet__container,:host([dir="rtl"].md-side-sheet--modal.md-side-sheet--end) .md-side-sheet__container{transform:translateX(-100%)}:host-context([dir="rtl"]):host(.md-side-sheet--modal.md-side-sheet--start) .md-side-sheet__container,:host([dir="rtl"].md-side-sheet--modal.md-side-sheet--start) .md-side-sheet__container{transform:translateX(100%)}:host-context([dir="rtl"]):host(.md-side-sheet--modal.md-side-sheet--open) .md-side-sheet__container,:host([dir="rtl"].md-side-sheet--modal.md-side-sheet--open) .md-side-sheet__container{transform:translateX(0)}:host(.md-side-sheet--detached) .md-side-sheet__container{--_container-shape:var(--md-side-sheet-container-shape, var(--md-sys-shape-corner-large, 16px));border-radius:var(--_container-shape)}:host(.md-side-sheet--modal.md-side-sheet--detached) .md-side-sheet__container{inset-block:max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px));block-size:calc(100% - max(16px, calc(32px + var(--md-sys-density-scale, 0) * 4px)));box-shadow:var(--md-sys-elevation-3)}:host(.md-side-sheet--modal.md-side-sheet--detached.md-side-sheet--end) .md-side-sheet__container{inset-inline-end:16px}:host(.md-side-sheet--modal.md-side-sheet--detached.md-side-sheet--start) .md-side-sheet__container{inset-inline-start:16px}:host(.md-side-sheet--standard.md-side-sheet--detached) .md-side-sheet__container{border:none;margin:16px;block-size:calc(100% - 32px);box-shadow:var(--md-sys-elevation-1)}.md-side-sheet__header{display:flex;align-items:center;gap:max(4px, calc(12px + var(--md-sys-density-scale, 0) * 2px));padding-inline:max(12px, calc(24px + var(--md-sys-density-scale, 0) * 2px));padding-block:max(12px, calc(24px + var(--md-sys-density-scale, 0) * 2px)) max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px));flex-shrink:0}.md-side-sheet__back{flex-shrink:0;margin-inline-start:calc(-12px - var(--md-sys-density-scale, 0) * 1px)}.md-side-sheet__headline{flex:1;font-family:var(--md-sys-typescale-title-large-font-family, Roboto, sans-serif);font-size:max(16px, calc(22px + var(--md-sys-density-scale, 0) * 1px));font-weight:var(--md-sys-typescale-title-large-font-weight, 400);line-height:max(22px, calc(28px + var(--md-sys-density-scale, 0) * 1px));letter-spacing:var(--md-sys-typescale-title-large-letter-spacing, 0px);color:var(--_headline-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.md-side-sheet__close{flex-shrink:0;margin-inline-end:calc(-12px - var(--md-sys-density-scale, 0) * 1px)}.md-side-sheet__close md-icon-button,.md-side-sheet__back md-icon-button{--md-icon-button-icon-color:var(--_icon-color);--md-icon-button-container-width:max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));--md-icon-button-container-height:max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));--md-icon-button-icon-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px))}.md-side-sheet__divider{block-size:1px;background-color:var(--_divider-color);flex-shrink:0}.md-side-sheet__content{flex:1;min-block-size:0;overflow-y:scroll;padding-inline:max(12px, calc(24px + var(--md-sys-density-scale, 0) * 2px));padding-block:max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px));font-family:var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);font-size:max(12px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-body-medium-font-weight, 400);line-height:max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));letter-spacing:var(--md-sys-typescale-body-medium-letter-spacing, 0.25px);color:var(--_content-color);scrollbar-width:thin;scrollbar-color:var(--md-sys-color-outline-variant, #CAC4D0) transparent}.md-side-sheet__content::-webkit-scrollbar{inline-size:8px}.md-side-sheet__content::-webkit-scrollbar-thumb{background-color:var(--md-sys-color-outline-variant, #CAC4D0);border-radius:4px}.md-side-sheet__content::-webkit-scrollbar-track{background-color:transparent}.md-side-sheet__actions{display:flex;align-items:center;justify-content:flex-start;gap:max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px));min-block-size:max(40px, calc(72px + var(--md-sys-density-scale, 0) * 4px));box-sizing:border-box;padding-inline:max(12px, calc(24px + var(--md-sys-density-scale, 0) * 2px));padding-block:max(6px, calc(12px + var(--md-sys-density-scale, 0) * 1px));flex-shrink:0;margin-block-start:auto}::slotted([slot="back"]){color:var(--_icon-color);--md-icon-button-container-width:max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));--md-icon-button-container-height:max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));--md-icon-button-icon-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px))}::slotted([slot="close"]){color:var(--_icon-color);--md-icon-button-container-width:max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));--md-icon-button-container-height:max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));--md-icon-button-icon-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px))}.md-side-sheet__focus-guard{position:fixed;overflow:hidden;clip-path:inset(50%);inline-size:1px;block-size:1px;padding:0;border:0;margin:-1px;white-space:nowrap}@media (prefers-reduced-motion: reduce){.md-side-sheet__scrim,:host(.md-side-sheet--modal) .md-side-sheet__container{transition:none}}@media (forced-colors: active){.md-side-sheet__container{border:2px solid CanvasText}.md-side-sheet__divider{background-color:CanvasText}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const c=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.mdOpen=t(this,"mdOpen",7);this.mdClose=t(this,"mdClose",7);this.mdCancel=t(this,"mdCancel",7);this.mdBack=t(this,"mdBack",7);this.open=false;this.variant="standard";this.side="end";this.headline="";this.closeable=true;this.showBack=false;this.scrimDismissible=true;this.topDivider=false;this.bottomDivider=false;this.detached=false;this.sheetAriaLabel="";this.density=0;this.hasSlottedClose=false;this.hasSlottedBack=false;this.hasActions=false;this.previousFocus=null;this.headlineId=`md-side-sheet-headline-${Math.random().toString(36).slice(2)}`;this.handleDocKeyDown=e=>{if(!this.open||this.variant!=="modal")return;if(e.key==="Escape"){e.preventDefault();e.stopPropagation();if(!this.scrimDismissible)return;this.mdCancel.emit();this.open=false}};this.handleDocFocusIn=()=>{if(!this.open||this.variant!=="modal")return;const e=document.activeElement;if(!e)return;if(e===this.el||this.el.contains(e))return;const s=this.containerEl?.contains(e);if(s)return;this.focusFirst()};this.handleStartGuardFocus=()=>{const e=this.getFocusableElements();if(e.length>0){e[e.length-1].focus()}else{this.containerEl?.focus()}};this.handleEndGuardFocus=()=>{const e=this.getFocusableElements();if(e.length>0){e[0].focus()}else{this.containerEl?.focus()}};this.handleScrimClick=()=>{if(!this.scrimDismissible)return;this.mdCancel.emit();this.open=false};this.handleCloseClick=()=>{this.mdCancel.emit();this.open=false};this.handleBackClick=()=>{this.mdBack.emit()}}connectedCallback(){this.hasActions=!!this.el.querySelector('[slot="actions"]')}componentDidLoad(){const e=this.el.shadowRoot;if(!e)return;const s=e.querySelector('slot[name="close"]');const t=e.querySelector('slot[name="back"]');const i=e.querySelector('slot[name="actions"]');s?.addEventListener("slotchange",(()=>{this.hasSlottedClose=s.assignedElements().length>0}));t?.addEventListener("slotchange",(()=>{this.hasSlottedBack=t.assignedElements().length>0}));i?.addEventListener("slotchange",(()=>{this.hasActions=i.assignedElements().length>0}));if(this.open){this.onOpenChange(true)}}disconnectedCallback(){this.removeGlobalListeners();document.body.style.overflow=""}onOpenChange(e){if(e){this.addGlobalListeners();if(this.variant==="modal"){this.previousFocus=document.activeElement;document.body.style.overflow="hidden";requestAnimationFrame((()=>{this.containerEl?.removeAttribute("inert");this.focusFirst()}))}this.mdOpen.emit()}else{this.removeGlobalListeners();if(this.variant==="modal"){document.body.style.overflow="";this.previousFocus?.focus?.({preventScroll:true});this.previousFocus=null}this.mdClose.emit()}}async show(){this.open=true}async close(){this.open=false}addGlobalListeners(){if(this.variant!=="modal")return;document.addEventListener("keydown",this.handleDocKeyDown,true);document.addEventListener("focusin",this.handleDocFocusIn)}removeGlobalListeners(){document.removeEventListener("keydown",this.handleDocKeyDown,true);document.removeEventListener("focusin",this.handleDocFocusIn)}focusFirst(){if(!this.containerEl)return;const e=this.getFocusableElements();if(e.length>0){e[0].focus()}else{this.containerEl.focus()}}getFocusableElements(){const e='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), md-icon-button:not([disabled]), md-button:not([disabled]), md-text-field:not([disabled]), md-checkbox:not([disabled]), md-switch:not([disabled]), md-radio:not([disabled]), md-slider:not([disabled])';const s=Array.from(this.containerEl?.querySelectorAll(e)??[]);const t=this.containerEl?.querySelectorAll("slot")??[];const i=[];t.forEach((s=>{const t=s.assignedElements({flatten:true});t.forEach((s=>{if(s.matches?.(e)){i.push(s)}const t=s.querySelectorAll?.(e);if(t)i.push(...Array.from(t))}))}));return[...s,...i]}render(){const e=this.variant==="modal";const s=!!this.headline;const t=e&&this.showBack;return i(d,{key:"0d6549e4f1f62be50e3907cfb4f6758a9013d718",class:{"md-side-sheet":true,[`md-side-sheet--${this.variant}`]:true,[`md-side-sheet--${this.side}`]:true,"md-side-sheet--open":this.open,"md-side-sheet--detached":this.detached}},e&&i("div",{key:"4a2beb6ed0b3005a4b83560f1a9cf02e8d2390a9",class:"md-side-sheet__scrim",part:"scrim","aria-hidden":"true",onClick:this.handleScrimClick}),i("div",{key:"90918a183d8be5fa19f360a6546d6a97b7e1a519",class:"md-side-sheet__container",part:"container",role:e?"dialog":"region","aria-modal":e?"true":undefined,"aria-labelledby":s?this.headlineId:undefined,"aria-label":this.sheetAriaLabel||(!s?"Side sheet":undefined),"aria-hidden":!this.open?"true":undefined,inert:!this.open,tabindex:-1,ref:e=>this.containerEl=e},e&&i("span",{key:"53fd02f82a4ebc464fefd0bc2336c6b1bbd6af4a",class:"md-side-sheet__focus-guard",tabindex:0,"aria-hidden":"true",onFocus:this.handleEndGuardFocus}),i("div",{key:"6af5c6e6155dd081663dc620d5a9657c10e375d9",class:"md-side-sheet__header",part:"header"},t&&i("div",{key:"b73407538462b111215191c1a1a02a0ee41158ef",class:"md-side-sheet__back"},i("slot",{key:"f718a04469fb9388800230fef2776f316cf27d83",name:"back"},i("md-icon-button",{key:"58359a2e694a98642cec44d1c86390356692de4b",variant:"standard",icon:"arrow_back","aria-label":"Back",onClick:this.handleBackClick}))),i("span",{key:"4b9cffb75729b3d62bce148bfcabfe41bfed47c6",id:this.headlineId,class:"md-side-sheet__headline",part:"headline"},i("slot",{key:"f869a19f38e59d39b30666b63449df7ac7746b92",name:"headline"},this.headline)),this.closeable&&i("div",{key:"08a697ecd140662748310f41332919d4da5ec076",class:"md-side-sheet__close",part:"close"},i("slot",{key:"f5ca65931d3baac5d70a27a70702338187e39445",name:"close"},i("md-icon-button",{key:"61114ca7e484651711ef8899a74c52b6e934bd22",variant:"standard",icon:"close","aria-label":"Close side sheet",onClick:this.handleCloseClick})))),this.topDivider&&i("div",{key:"6ce2d0e7de5e3e5a3f6e738e5ad444fda9f1b773",class:"md-side-sheet__divider",part:"divider-top","aria-hidden":"true"}),i("div",{key:"4c0475c3ded3abd2687c069b129f0028143a23a2",class:"md-side-sheet__content",part:"content"},i("slot",{key:"87b6af3a5a53dda956643f94868bbba2a1106064"})),this.hasActions&&this.bottomDivider&&i("div",{key:"66310f2bd364a6716188ee52b37f6f71b3363625",class:"md-side-sheet__divider md-side-sheet__divider--bottom",part:"divider-bottom","aria-hidden":"true"}),this.hasActions&&i("div",{key:"17086a116a77c9e6bf0aab69f05522bbb43741d1",class:"md-side-sheet__actions",part:"actions"},i("slot",{key:"a78f795463ff743d54b816a37e38a0d726c55f92",name:"actions"})),e&&i("span",{key:"9cd3e21f0ea363036a6d584f22c067d155c8a22c",class:"md-side-sheet__focus-guard",tabindex:0,"aria-hidden":"true",onFocus:this.handleStartGuardFocus})))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return r()}},[257,"md-side-sheet",{open:[1540],variant:[513],side:[513],headline:[1],closeable:[516],showBack:[516,"show-back"],scrimDismissible:[4,"scrim-dismissible"],topDivider:[516,"top-divider"],bottomDivider:[516,"bottom-divider"],detached:[516],sheetAriaLabel:[1,"aria-label"],density:[514],hasSlottedClose:[32],hasSlottedBack:[32],hasActions:[32],show:[64],close:[64]},undefined,{open:[{onOpenChange:0}]}]);function l(){if(typeof customElements==="undefined"){return}const e=["md-side-sheet","md-icon-button","md-ripple"];e.forEach((e=>{switch(e){case"md-side-sheet":if(!customElements.get(a(e))){customElements.define(a(e),c)}break;case"md-icon-button":if(!customElements.get(a(e))){n()}break;case"md-ripple":if(!customElements.get(a(e))){o()}break}}))}l();const m=c;const h=l;export{m as MdSideSheet,h as defineCustomElement};
+//# sourceMappingURL=md-side-sheet.js.map

package/dist/components-csr/md-side-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdSideSheetCss","MdSideSheet","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","variant","side","headline","closeable","showBack","scrimDismissible","topDivider","bottomDivider","detached","sheetAriaLabel","density","hasSlottedClose","hasSlottedBack","hasActions","previousFocus","headlineId","Math","random","toString","slice","handleDocKeyDown","e","key","preventDefault","stopPropagation","mdCancel","emit","handleDocFocusIn","active","document","activeElement","el","contains","isShadowEl","containerEl","focusFirst","handleStartGuardFocus","focusable","getFocusableElements","length","focus","handleEndGuardFocus","handleScrimClick","handleCloseClick","handleBackClick","mdBack","connectedCallback","querySelector","componentDidLoad","shadow","shadowRoot","closeSlot","backSlot","actionsSlot","addEventListener","assignedElements","onOpenChange","disconnectedCallback","removeGlobalListeners","body","style","overflow","newVal","addGlobalListeners","requestAnimationFrame","removeAttribute","mdOpen","preventScroll","mdClose","show","close","removeEventListener","selector","shadowEls","Array","from","querySelectorAll","slots","slottedEls","forEach","slot","assigned","flatten","matches","push","nested","render","isModal","hasHeadline","showBackBtn","h","Host","class","part","onClick","role","undefined","inert","tabindex","ref","onFocus","name","icon","id"],"sources":["src/components/md-side-sheet/md-side-sheet.css?tag=md-side-sheet&encapsulation=shadow","src/components/md-side-sheet/md-side-sheet.tsx"],"sourcesContent":["/* ==========================================================\n   md-side-sheet — Material Design 3 Side Sheet\n   Spec: https://m3.material.io/components/side-sheets/specs\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-side-sheet-container-color       Container background\n     --md-side-sheet-container-shape       Container corner radius (detached)\n     --md-side-sheet-headline-color        Headline text color\n     --md-side-sheet-content-color         Content text color\n     --md-side-sheet-scrim-color           Modal scrim overlay color\n     --md-side-sheet-divider-color         Divider color\n     --md-side-sheet-width                 Sheet inline size\n     --md-side-sheet-max-width             Maximum inline size\n     --md-side-sheet-icon-color            Close / back icon color\n\n   CSS PARTS:\n     scrim            Modal scrim overlay\n     container        Sheet surface\n     header           Header row\n     headline         Headline text\n     close            Close button wrapper\n     divider-top      Divider between header and content\n     divider-bottom   Divider between content and actions\n     content          Scrollable content area\n     actions          Bottom action bar\n\n   SLOTS:\n     (default)    Main content\n     headline     Custom headline content\n     back         Custom back icon element (modal only)\n     actions      Bottom action buttons\n     close        Custom close element\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST\n   ========================================================== */\n\n:host {\n  --_container-color: var(--md-side-sheet-container-color, var(--md-sys-color-surface, #FFFBFE));\n  --_container-shape: var(--md-side-sheet-container-shape, 0px);\n  --_headline-color: var(--md-side-sheet-headline-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_content-color: var(--md-side-sheet-content-color, var(--md-sys-color-on-surface, #1C1B1F));\n  --_scrim-color: var(--md-side-sheet-scrim-color, rgba(0, 0, 0, 0.32));\n  --_divider-color: var(--md-side-sheet-divider-color, var(--md-sys-color-outline-variant, #CAC4D0));\n  --_width: var(--md-side-sheet-width, max(280px, calc(360px + var(--md-sys-density-scale, 0) * 16px)));\n  --_max-width: var(--md-side-sheet-max-width, max(320px, calc(400px + var(--md-sys-density-scale, 0) * 16px)));\n  --_icon-color: var(--md-side-sheet-icon-color, var(--md-sys-color-on-surface-variant, #49454F));\n\n  display: block;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* ==========================================================\n   2. STANDARD VARIANT — inline, coexists with page content\n   ========================================================== */\n\n:host(.md-side-sheet--standard) {\n  /* Cap to the parent so a narrow layout never forces overflow. */\n  inline-size: min(var(--_width), 100%);\n  max-inline-size: min(var(--_max-width), 100%);\n  block-size: 100%;\n}\n\n:host(.md-side-sheet--standard:not(.md-side-sheet--open)) {\n  display: none;\n}\n\n:host(.md-side-sheet--standard) .md-side-sheet__container {\n  position: relative;\n  inline-size: 100%;\n  block-size: 100%;\n  background-color: var(--_container-color);\n  color: var(--_content-color);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Standard: optional outline divider on the adjacent edge */\n:host(.md-side-sheet--standard.md-side-sheet--end) .md-side-sheet__container {\n  border-inline-start: 1px solid var(--_divider-color);\n}\n\n:host(.md-side-sheet--standard.md-side-sheet--start) .md-side-sheet__container {\n  border-inline-end: 1px solid var(--_divider-color);\n}\n\n/* ==========================================================\n   3. MODAL VARIANT — fixed overlay with scrim\n   ========================================================== */\n\n:host(.md-side-sheet--modal) {\n  display: contents;\n}\n\n:host(.md-side-sheet--modal:not(.md-side-sheet--open)) {\n  display: contents;\n  pointer-events: none;\n}\n\n/* ─── Scrim ────────────────────────────────────────────── */\n\n.md-side-sheet__scrim {\n  position: fixed;\n  inset: 0;\n  background-color: var(--_scrim-color);\n  z-index: var(--md-sys-z-index-popup, 1000);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n:host(.md-side-sheet--modal.md-side-sheet--open) .md-side-sheet__scrim {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ─── Modal container (base) ───────────────────────────── */\n\n:host(.md-side-sheet--modal) .md-side-sheet__container {\n  position: fixed;\n  inset-block: 0;\n  z-index: var(--md-sys-z-index-dialog-scrim, 1001);\n  /* Responsive width: never wider than the viewport. On screens narrower than\n     the configured width the sheet becomes full-width (flush to the anchored\n     edge) instead of overflowing off-screen and clipping its content. */\n  inline-size: min(var(--_width), 100%);\n  max-inline-size: min(var(--_max-width), 100%);\n  background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n  color: var(--_content-color);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  pointer-events: none;\n  opacity: 0;\n  box-shadow: var(--md-sys-elevation-1);\n  transition:\n    transform var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n    opacity var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* ─── End edge (default) — closed: off-screen right ────── */\n\n:host(.md-side-sheet--modal.md-side-sheet--end) .md-side-sheet__container {\n  inset-inline-end: 0;\n  inset-inline-start: auto;\n  transform: translateX(100%);\n}\n\n/* ─── Start edge — closed: off-screen left ─────────────── */\n\n:host(.md-side-sheet--modal.md-side-sheet--start) .md-side-sheet__container {\n  inset-inline-start: 0;\n  inset-inline-end: auto;\n  transform: translateX(-100%);\n}\n\n/* ─── Open state (must come after position rules) ──────── */\n\n:host(.md-side-sheet--modal.md-side-sheet--open) .md-side-sheet__container {\n  pointer-events: auto;\n  transform: translateX(0);\n  opacity: 1;\n}\n\n/* ─── RTL overrides for closed state ───────────────────── */\n\n:host-context([dir=\"rtl\"]):host(.md-side-sheet--modal.md-side-sheet--end) .md-side-sheet__container,\n:host([dir=\"rtl\"].md-side-sheet--modal.md-side-sheet--end) .md-side-sheet__container {\n  transform: translateX(-100%);\n}\n\n:host-context([dir=\"rtl\"]):host(.md-side-sheet--modal.md-side-sheet--start) .md-side-sheet__container,\n:host([dir=\"rtl\"].md-side-sheet--modal.md-side-sheet--start) .md-side-sheet__container {\n  transform: translateX(100%);\n}\n\n/* RTL open state — same translateX(0) but needs higher specificity */\n:host-context([dir=\"rtl\"]):host(.md-side-sheet--modal.md-side-sheet--open) .md-side-sheet__container,\n:host([dir=\"rtl\"].md-side-sheet--modal.md-side-sheet--open) .md-side-sheet__container {\n  transform: translateX(0);\n}\n\n/* ==========================================================\n   4. DETACHED — rounded corners + margin\n   ========================================================== */\n\n:host(.md-side-sheet--detached) .md-side-sheet__container {\n  --_container-shape: var(--md-side-sheet-container-shape, var(--md-sys-shape-corner-large, 16px));\n  border-radius: var(--_container-shape);\n}\n\n:host(.md-side-sheet--modal.md-side-sheet--detached) .md-side-sheet__container {\n  inset-block: max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px));\n  block-size: calc(100% - max(16px, calc(32px + var(--md-sys-density-scale, 0) * 4px)));\n  box-shadow: var(--md-sys-elevation-3);\n}\n\n:host(.md-side-sheet--modal.md-side-sheet--detached.md-side-sheet--end) .md-side-sheet__container {\n  inset-inline-end: 16px;\n}\n\n:host(.md-side-sheet--modal.md-side-sheet--detached.md-side-sheet--start) .md-side-sheet__container {\n  inset-inline-start: 16px;\n}\n\n:host(.md-side-sheet--standard.md-side-sheet--detached) .md-side-sheet__container {\n  border: none;\n  margin: 16px;\n  block-size: calc(100% - 32px);\n  box-shadow: var(--md-sys-elevation-1);\n}\n\n/* ==========================================================\n   5. HEADER — headline + close/back icons\n   ========================================================== */\n\n.md-side-sheet__header {\n  display: flex;\n  align-items: center;\n  gap: max(4px, calc(12px + var(--md-sys-density-scale, 0) * 2px));\n  padding-inline: max(12px, calc(24px + var(--md-sys-density-scale, 0) * 2px));\n  padding-block: max(12px, calc(24px + var(--md-sys-density-scale, 0) * 2px)) max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px));\n  flex-shrink: 0;\n}\n\n.md-side-sheet__back {\n  flex-shrink: 0;\n  margin-inline-start: calc(-12px - var(--md-sys-density-scale, 0) * 1px);\n}\n\n.md-side-sheet__headline {\n  flex: 1;\n  font-family: var(--md-sys-typescale-title-large-font-family, Roboto, sans-serif);\n  font-size: max(16px, calc(22px + var(--md-sys-density-scale, 0) * 1px));\n  font-weight: var(--md-sys-typescale-title-large-font-weight, 400);\n  line-height: max(22px, calc(28px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-title-large-letter-spacing, 0px);\n  color: var(--_headline-color);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.md-side-sheet__close {\n  flex-shrink: 0;\n  margin-inline-end: calc(-12px - var(--md-sys-density-scale, 0) * 1px);\n}\n\n.md-side-sheet__close md-icon-button,\n.md-side-sheet__back md-icon-button {\n  --md-icon-button-icon-color: var(--_icon-color);\n  --md-icon-button-container-width: max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));\n  --md-icon-button-container-height: max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));\n  --md-icon-button-icon-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n}\n\n/* ==========================================================\n   6. DIVIDER\n   ========================================================== */\n\n.md-side-sheet__divider {\n  block-size: 1px;\n  background-color: var(--_divider-color);\n  flex-shrink: 0;\n}\n\n/* ==========================================================\n   7. CONTENT — scrollable body\n   ========================================================== */\n\n.md-side-sheet__content {\n  flex: 1;\n  min-block-size: 0;\n  overflow-y: scroll;\n  padding-inline: max(12px, calc(24px + var(--md-sys-density-scale, 0) * 2px));\n  padding-block: max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px));\n  font-family: var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);\n  font-size: max(12px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-body-medium-font-weight, 400);\n  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing, 0.25px);\n  color: var(--_content-color);\n  scrollbar-width: thin;\n  scrollbar-color: var(--md-sys-color-outline-variant, #CAC4D0) transparent;\n}\n\n.md-side-sheet__content::-webkit-scrollbar {\n  inline-size: 8px;\n}\n\n.md-side-sheet__content::-webkit-scrollbar-thumb {\n  background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n  border-radius: 4px;\n}\n\n.md-side-sheet__content::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n\n/* ==========================================================\n   8. ACTIONS — bottom button bar\n   ========================================================== */\n\n.md-side-sheet__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px));\n  min-block-size: max(40px, calc(72px + var(--md-sys-density-scale, 0) * 4px));\n  box-sizing: border-box;\n  padding-inline: max(12px, calc(24px + var(--md-sys-density-scale, 0) * 2px));\n  padding-block: max(6px, calc(12px + var(--md-sys-density-scale, 0) * 1px));\n  flex-shrink: 0;\n  margin-block-start: auto;\n}\n\n\n/* ==========================================================\n   9. SLOTTED CONTENT\n   ========================================================== */\n\n::slotted([slot=\"back\"]) {\n  color: var(--_icon-color);\n  --md-icon-button-container-width: max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));\n  --md-icon-button-container-height: max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));\n  --md-icon-button-icon-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n}\n\n::slotted([slot=\"close\"]) {\n  color: var(--_icon-color);\n  --md-icon-button-container-width: max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));\n  --md-icon-button-container-height: max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));\n  --md-icon-button-icon-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n}\n\n/* ==========================================================\n   10. FOCUS GUARDS (sentinel elements for focus trap)\n   ========================================================== */\n\n.md-side-sheet__focus-guard {\n  position: fixed;\n  overflow: hidden;\n  clip-path: inset(50%);\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  border: 0;\n  margin: -1px;\n  white-space: nowrap;\n}\n\n/* ==========================================================\n   11. REDUCED MOTION\n   ========================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  .md-side-sheet__scrim,\n  :host(.md-side-sheet--modal) .md-side-sheet__container {\n    transition: none;\n  }\n}\n\n/* ==========================================================\n   11. FORCED COLORS (Windows High Contrast)\n   ========================================================== */\n\n@media (forced-colors: active) {\n  .md-side-sheet__container {\n    border: 2px solid CanvasText;\n  }\n\n  .md-side-sheet__divider {\n    background-color: CanvasText;\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, Event, EventEmitter, Method, Watch, State, Element } from '@stencil/core';\n\n/**\n * MD3 Side sheet — anchored panel for secondary content and actions.\n *\n * @slot - Main content\n * @slot headline - Custom headline content\n * @slot back - Custom back icon element (modal only)\n * @slot actions - Bottom action buttons (optional)\n * @slot close - Custom close element (replaces default close icon button)\n *\n * @part scrim - Modal scrim overlay\n * @part container - Sheet surface\n * @part header - Header row (headline + close)\n * @part headline - Headline text\n * @part close - Close button wrapper\n * @part divider-top - Top divider (between header and content)\n * @part divider-bottom - Bottom divider (between content and actions)\n * @part content - Scrollable content area\n * @part actions - Bottom action bar\n */\n@Component({\n  tag: 'md-side-sheet',\n  styleUrl: 'md-side-sheet.css',\n  shadow: true,\n})\nexport class MdSideSheet {\n  @Element() el!: HTMLElement;\n\n  /** Whether the sheet is visible */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** `standard` coexists with page content; `modal` overlays with scrim */\n  @Prop({ reflect: true }) variant: 'standard' | 'modal' = 'standard';\n\n  /** Which edge the sheet is anchored to */\n  @Prop({ reflect: true }) side: 'start' | 'end' = 'end';\n\n  /** Headline text (or use the headline slot) */\n  @Prop() headline: string = '';\n\n  /** Show close icon button */\n  @Prop({ reflect: true }) closeable: boolean = true;\n\n  /** Show optional back navigation icon (modal only) */\n  @Prop({ reflect: true, attribute: 'show-back' }) showBack: boolean = false;\n\n  /** Whether clicking the scrim closes the sheet (modal only) */\n  @Prop({ attribute: 'scrim-dismissible' }) scrimDismissible: boolean = true;\n\n  /** Show divider between header and content */\n  @Prop({ reflect: true, attribute: 'top-divider' }) topDivider: boolean = false;\n\n  /** Show divider between content and actions */\n  @Prop({ reflect: true, attribute: 'bottom-divider' }) bottomDivider: boolean = false;\n\n  /** Detached style with rounded corners and margin */\n  @Prop({ reflect: true }) detached: boolean = false;\n\n  /** Custom aria-label for the container */\n  @Prop({ attribute: 'aria-label' }) sheetAriaLabel: string = '';\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  // ── Events ──────────────────────────────────────────────\n\n  /** Emits when the sheet opens */\n  @Event() mdOpen: EventEmitter<void>;\n\n  /** Emits when the sheet closes */\n  @Event() mdClose: EventEmitter<void>;\n\n  /** Emits when dismissed via scrim click or Escape */\n  @Event() mdCancel: EventEmitter<void>;\n\n  /** Emits when the back button is pressed (modal only) */\n  @Event() mdBack: EventEmitter<void>;\n\n  // ── Internal state ──────────────────────────────────────\n\n  @State() private hasSlottedClose = false;\n  @State() private hasSlottedBack = false;\n  @State() private hasActions = false;\n\n  private containerEl!: HTMLElement;\n  private previousFocus: HTMLElement | null = null;\n  private headlineId = `md-side-sheet-headline-${Math.random().toString(36).slice(2)}`;\n\n  // ── Lifecycle ───────────────────────────────────────────\n\n  connectedCallback() {\n    this.hasActions = !!this.el.querySelector('[slot=\"actions\"]');\n  }\n\n  componentDidLoad() {\n    const shadow = this.el.shadowRoot;\n    if (!shadow) return;\n\n    const closeSlot = shadow.querySelector('slot[name=\"close\"]') as HTMLSlotElement | null;\n    const backSlot = shadow.querySelector('slot[name=\"back\"]') as HTMLSlotElement | null;\n    const actionsSlot = shadow.querySelector('slot[name=\"actions\"]') as HTMLSlotElement | null;\n\n    closeSlot?.addEventListener('slotchange', () => {\n      this.hasSlottedClose = closeSlot.assignedElements().length > 0;\n    });\n    backSlot?.addEventListener('slotchange', () => {\n      this.hasSlottedBack = backSlot.assignedElements().length > 0;\n    });\n    actionsSlot?.addEventListener('slotchange', () => {\n      this.hasActions = actionsSlot.assignedElements().length > 0;\n    });\n\n    if (this.open) {\n      this.onOpenChange(true);\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeGlobalListeners();\n    document.body.style.overflow = '';\n  }\n\n  // ── Watchers ────────────────────────────────────────────\n\n  @Watch('open')\n  onOpenChange(newVal: boolean) {\n    if (newVal) {\n      this.addGlobalListeners();\n      if (this.variant === 'modal') {\n        this.previousFocus = document.activeElement as HTMLElement;\n        document.body.style.overflow = 'hidden';\n        requestAnimationFrame(() => {\n          // The re-render that clears `inert` is scheduled *after* this watcher\n          // (Stencil runs @Watch before scheduleUpdate), so it may not have\n          // committed yet. Unlike aria-hidden, `inert` blocks .focus(); drop it\n          // imperatively — matching the declarative open state — so focus can\n          // enter the panel this frame instead of bouncing off an inert subtree.\n          this.containerEl?.removeAttribute('inert');\n          this.focusFirst();\n        });\n      }\n      this.mdOpen.emit();\n    } else {\n      this.removeGlobalListeners();\n      if (this.variant === 'modal') {\n        document.body.style.overflow = '';\n        // `preventScroll` because a bare focus() scrolls its target into view: an\n      // overlay opened programmatically (or whose opener has since scrolled out\n      // of sight) would yank the page on close.\n      this.previousFocus?.focus?.({ preventScroll: true });\n        this.previousFocus = null;\n      }\n      this.mdClose.emit();\n    }\n  }\n\n  // ── Public methods ──────────────────────────────────────\n\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  @Method()\n  async close() {\n    this.open = false;\n  }\n\n  // ── Global listeners ──────────────────────────────────────\n\n  private addGlobalListeners() {\n    // ONLY a modal sheet listens on the document. A `standard` sheet is a\n    // non-modal inline region — it has no scrim and does not trap focus, so it\n    // must not answer a document-level Escape either. It used to: every open\n    // sheet on the page registered this listener, so one Escape (aimed at a\n    // modal, or at nothing) collapsed every inline sheet on the page at once.\n    if (this.variant !== 'modal') return;\n    document.addEventListener('keydown', this.handleDocKeyDown, true);\n    document.addEventListener('focusin', this.handleDocFocusIn);\n  }\n\n  private removeGlobalListeners() {\n    document.removeEventListener('keydown', this.handleDocKeyDown, true);\n    document.removeEventListener('focusin', this.handleDocFocusIn);\n  }\n\n  // ── Keyboard ────────────────────────────────────────────\n\n  private handleDocKeyDown = (e: KeyboardEvent) => {\n    if (!this.open || this.variant !== 'modal') return;\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      e.stopPropagation();\n      if (!this.scrimDismissible) return;\n      this.mdCancel.emit();\n      this.open = false;\n    }\n  };\n\n  // ── Focus trap via focusin ──────────────────────────────\n\n  private handleDocFocusIn = () => {\n    if (!this.open || this.variant !== 'modal') return;\n\n    const active = document.activeElement;\n    if (!active) return;\n\n    if (active === this.el || this.el.contains(active)) return;\n\n    const isShadowEl = this.containerEl?.contains(active);\n    if (isShadowEl) return;\n\n    this.focusFirst();\n  };\n\n  // ── Focus guard handlers (sentinel elements) ────────────\n\n  private handleStartGuardFocus = () => {\n    const focusable = this.getFocusableElements();\n    if (focusable.length > 0) {\n      focusable[focusable.length - 1].focus();\n    } else {\n      this.containerEl?.focus();\n    }\n  };\n\n  private handleEndGuardFocus = () => {\n    const focusable = this.getFocusableElements();\n    if (focusable.length > 0) {\n      focusable[0].focus();\n    } else {\n      this.containerEl?.focus();\n    }\n  };\n\n  // ── Private handlers ────────────────────────────────────\n\n  private handleScrimClick = () => {\n    if (!this.scrimDismissible) return;\n    this.mdCancel.emit();\n    this.open = false;\n  };\n\n  private handleCloseClick = () => {\n    this.mdCancel.emit();\n    this.open = false;\n  };\n\n  private handleBackClick = () => {\n    this.mdBack.emit();\n  };\n\n  // ── Focus management (modal) ────────────────────────────\n\n  private focusFirst() {\n    if (!this.containerEl) return;\n    const focusable = this.getFocusableElements();\n    if (focusable.length > 0) {\n      focusable[0].focus();\n    } else {\n      this.containerEl.focus();\n    }\n  }\n\n  private getFocusableElements(): HTMLElement[] {\n    const selector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), md-icon-button:not([disabled]), md-button:not([disabled]), md-text-field:not([disabled]), md-checkbox:not([disabled]), md-switch:not([disabled]), md-radio:not([disabled]), md-slider:not([disabled])';\n\n    const shadowEls = Array.from(\n      this.containerEl?.querySelectorAll(selector) ?? [],\n    ) as HTMLElement[];\n\n    const slots = this.containerEl?.querySelectorAll('slot') ?? [];\n    const slottedEls: HTMLElement[] = [];\n    slots.forEach((slot) => {\n      const assigned = (slot as HTMLSlotElement).assignedElements({ flatten: true });\n      assigned.forEach((el) => {\n        if ((el as HTMLElement).matches?.(selector)) {\n          slottedEls.push(el as HTMLElement);\n        }\n        const nested = (el as HTMLElement).querySelectorAll?.(selector);\n        if (nested) slottedEls.push(...(Array.from(nested) as HTMLElement[]));\n      });\n    });\n\n    return [...shadowEls, ...slottedEls];\n  }\n\n  // ── Render ──────────────────────────────────────────────\n\n  render() {\n    const isModal = this.variant === 'modal';\n    const hasHeadline = !!this.headline;\n    const showBackBtn = isModal && this.showBack;\n\n    return (\n      <Host\n        class={{\n          'md-side-sheet': true,\n          [`md-side-sheet--${this.variant}`]: true,\n          [`md-side-sheet--${this.side}`]: true,\n          'md-side-sheet--open': this.open,\n          'md-side-sheet--detached': this.detached,\n        }}\n      >\n        {isModal && (\n          <div\n            class=\"md-side-sheet__scrim\"\n            part=\"scrim\"\n            aria-hidden=\"true\"\n            onClick={this.handleScrimClick}\n          ></div>\n        )}\n\n        <div\n          class=\"md-side-sheet__container\"\n          part=\"container\"\n          role={isModal ? 'dialog' : 'region'}\n          aria-modal={isModal ? 'true' : undefined}\n          aria-labelledby={hasHeadline ? this.headlineId : undefined}\n          aria-label={this.sheetAriaLabel || (!hasHeadline ? 'Side sheet' : undefined)}\n          aria-hidden={!this.open ? 'true' : undefined}\n          // A closed sheet stays in the DOM (slid off-screen for the\n          // enter/exit motion, never display:none), so its focus guards,\n          // close/back buttons, and slotted controls remain tab-reachable\n          // inside an aria-hidden subtree — that fails axe `aria-hidden-focus`.\n          // `inert` drops the whole panel from focus order and the a11y tree\n          // while hidden; it flips off in the same render that clears\n          // aria-hidden, before the modal focusFirst() runs. When open, the\n          // standard variant stays non-inert so its content joins the page\n          // tab order normally.\n          inert={!this.open}\n          tabindex={-1}\n          ref={(el) => (this.containerEl = el!)}\n        >\n          {isModal && (\n            <span\n              class=\"md-side-sheet__focus-guard\"\n              tabindex={0}\n              aria-hidden=\"true\"\n              onFocus={this.handleEndGuardFocus}\n            ></span>\n          )}\n\n          <div class=\"md-side-sheet__header\" part=\"header\">\n            {showBackBtn && (\n              <div class=\"md-side-sheet__back\">\n                <slot name=\"back\">\n                  <md-icon-button\n                    variant=\"standard\"\n                    icon=\"arrow_back\"\n                    aria-label=\"Back\"\n                    onClick={this.handleBackClick}\n                  ></md-icon-button>\n                </slot>\n              </div>\n            )}\n\n            <span\n              id={this.headlineId}\n              class=\"md-side-sheet__headline\"\n              part=\"headline\"\n            >\n              <slot name=\"headline\">{this.headline}</slot>\n            </span>\n\n            {this.closeable && (\n              <div class=\"md-side-sheet__close\" part=\"close\">\n                <slot name=\"close\">\n                  <md-icon-button\n                    variant=\"standard\"\n                    icon=\"close\"\n                    aria-label=\"Close side sheet\"\n                    onClick={this.handleCloseClick}\n                  ></md-icon-button>\n                </slot>\n              </div>\n            )}\n          </div>\n\n          {this.topDivider && (\n            <div class=\"md-side-sheet__divider\" part=\"divider-top\" aria-hidden=\"true\"></div>\n          )}\n\n          <div class=\"md-side-sheet__content\" part=\"content\">\n            <slot></slot>\n          </div>\n\n          {this.hasActions && this.bottomDivider && (\n            <div class=\"md-side-sheet__divider md-side-sheet__divider--bottom\" part=\"divider-bottom\" aria-hidden=\"true\"></div>\n          )}\n\n          {this.hasActions && (\n            <div class=\"md-side-sheet__actions\" part=\"actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          )}\n\n          {isModal && (\n            <span\n              class=\"md-side-sheet__focus-guard\"\n              tabindex={0}\n              aria-hidden=\"true\"\n              onFocus={this.handleStartGuardFocus}\n            ></span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAiB,IAAM,8tR,MC0BhBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,oMAS0CC,KAAAC,KAAgB,MAG/BD,KAAAE,QAAgC,WAGhCF,KAAAG,KAAwB,MAGzCH,KAAAI,SAAmB,GAGFJ,KAAAK,UAAqB,KAGGL,KAAAM,SAAoB,MAG3BN,KAAAO,iBAA4B,KAGnBP,KAAAQ,WAAsB,MAGnBR,KAAAS,cAAyB,MAGtDT,KAAAU,SAAoB,MAGVV,KAAAW,eAAyB,GAOnCX,KAAAY,QAAiC,EAkBzCZ,KAAAa,gBAAkB,MAClBb,KAAAc,eAAiB,MACjBd,KAAAe,WAAa,MAGtBf,KAAAgB,cAAoC,KACpChB,KAAAiB,WAAa,0BAA0BC,KAAKC,SAASC,SAAS,IAAIC,MAAM,KAsGxErB,KAAAsB,iBAAoBC,IAC1B,IAAKvB,KAAKC,MAAQD,KAAKE,UAAY,QAAS,OAE5C,GAAIqB,EAAEC,MAAQ,SAAU,CACtBD,EAAEE,iBACFF,EAAEG,kBACF,IAAK1B,KAAKO,iBAAkB,OAC5BP,KAAK2B,SAASC,OACd5B,KAAKC,KAAO,K,GAMRD,KAAA6B,iBAAmB,KACzB,IAAK7B,KAAKC,MAAQD,KAAKE,UAAY,QAAS,OAE5C,MAAM4B,EAASC,SAASC,cACxB,IAAKF,EAAQ,OAEb,GAAIA,IAAW9B,KAAKiC,IAAMjC,KAAKiC,GAAGC,SAASJ,GAAS,OAEpD,MAAMK,EAAanC,KAAKoC,aAAaF,SAASJ,GAC9C,GAAIK,EAAY,OAEhBnC,KAAKqC,YAAY,EAKXrC,KAAAsC,sBAAwB,KAC9B,MAAMC,EAAYvC,KAAKwC,uBACvB,GAAID,EAAUE,OAAS,EAAG,CACxBF,EAAUA,EAAUE,OAAS,GAAGC,O,KAC3B,CACL1C,KAAKoC,aAAaM,O,GAId1C,KAAA2C,oBAAsB,KAC5B,MAAMJ,EAAYvC,KAAKwC,uBACvB,GAAID,EAAUE,OAAS,EAAG,CACxBF,EAAU,GAAGG,O,KACR,CACL1C,KAAKoC,aAAaM,O,GAMd1C,KAAA4C,iBAAmB,KACzB,IAAK5C,KAAKO,iBAAkB,OAC5BP,KAAK2B,SAASC,OACd5B,KAAKC,KAAO,KAAK,EAGXD,KAAA6C,iBAAmB,KACzB7C,KAAK2B,SAASC,OACd5B,KAAKC,KAAO,KAAK,EAGXD,KAAA8C,gBAAkB,KACxB9C,KAAK+C,OAAOnB,MAAM,CAgKrB,CAhUC,iBAAAoB,GACEhD,KAAKe,aAAef,KAAKiC,GAAGgB,cAAc,mB,CAG5C,gBAAAC,GACE,MAAMC,EAASnD,KAAKiC,GAAGmB,WACvB,IAAKD,EAAQ,OAEb,MAAME,EAAYF,EAAOF,cAAc,sBACvC,MAAMK,EAAWH,EAAOF,cAAc,qBACtC,MAAMM,EAAcJ,EAAOF,cAAc,wBAEzCI,GAAWG,iBAAiB,cAAc,KACxCxD,KAAKa,gBAAkBwC,EAAUI,mBAAmBhB,OAAS,CAAC,IAEhEa,GAAUE,iBAAiB,cAAc,KACvCxD,KAAKc,eAAiBwC,EAASG,mBAAmBhB,OAAS,CAAC,IAE9Dc,GAAaC,iBAAiB,cAAc,KAC1CxD,KAAKe,WAAawC,EAAYE,mBAAmBhB,OAAS,CAAC,IAG7D,GAAIzC,KAAKC,KAAM,CACbD,KAAK0D,aAAa,K,EAItB,oBAAAC,GACE3D,KAAK4D,wBACL7B,SAAS8B,KAAKC,MAAMC,SAAW,E,CAMjC,YAAAL,CAAaM,GACX,GAAIA,EAAQ,CACVhE,KAAKiE,qBACL,GAAIjE,KAAKE,UAAY,QAAS,CAC5BF,KAAKgB,cAAgBe,SAASC,cAC9BD,SAAS8B,KAAKC,MAAMC,SAAW,SAC/BG,uBAAsB,KAMpBlE,KAAKoC,aAAa+B,gBAAgB,SAClCnE,KAAKqC,YAAY,G,CAGrBrC,KAAKoE,OAAOxC,M,KACP,CACL5B,KAAK4D,wBACL,GAAI5D,KAAKE,UAAY,QAAS,CAC5B6B,SAAS8B,KAAKC,MAAMC,SAAW,GAIjC/D,KAAKgB,eAAe0B,QAAQ,CAAE2B,cAAe,OAC3CrE,KAAKgB,cAAgB,I,CAEvBhB,KAAKsE,QAAQ1C,M,EAOjB,UAAM2C,GACJvE,KAAKC,KAAO,I,CAId,WAAMuE,GACJxE,KAAKC,KAAO,K,CAKN,kBAAAgE,GAMN,GAAIjE,KAAKE,UAAY,QAAS,OAC9B6B,SAASyB,iBAAiB,UAAWxD,KAAKsB,iBAAkB,MAC5DS,SAASyB,iBAAiB,UAAWxD,KAAK6B,iB,CAGpC,qBAAA+B,GACN7B,SAAS0C,oBAAoB,UAAWzE,KAAKsB,iBAAkB,MAC/DS,SAAS0C,oBAAoB,UAAWzE,KAAK6B,iB,CAwEvC,UAAAQ,GACN,IAAKrC,KAAKoC,YAAa,OACvB,MAAMG,EAAYvC,KAAKwC,uBACvB,GAAID,EAAUE,OAAS,EAAG,CACxBF,EAAU,GAAGG,O,KACR,CACL1C,KAAKoC,YAAYM,O,EAIb,oBAAAF,GACN,MAAMkC,EAAW,mVAEjB,MAAMC,EAAYC,MAAMC,KACtB7E,KAAKoC,aAAa0C,iBAAiBJ,IAAa,IAGlD,MAAMK,EAAQ/E,KAAKoC,aAAa0C,iBAAiB,SAAW,GAC5D,MAAME,EAA4B,GAClCD,EAAME,SAASC,IACb,MAAMC,EAAYD,EAAyBzB,iBAAiB,CAAE2B,QAAS,OACvED,EAASF,SAAShD,IAChB,GAAKA,EAAmBoD,UAAUX,GAAW,CAC3CM,EAAWM,KAAKrD,E,CAElB,MAAMsD,EAAUtD,EAAmB6C,mBAAmBJ,GACtD,GAAIa,EAAQP,EAAWM,QAASV,MAAMC,KAAKU,GAA0B,GACrE,IAGJ,MAAO,IAAIZ,KAAcK,E,CAK3B,MAAAQ,GACE,MAAMC,EAAUzF,KAAKE,UAAY,QACjC,MAAMwF,IAAgB1F,KAAKI,SAC3B,MAAMuF,EAAcF,GAAWzF,KAAKM,SAEpC,OACEsF,EAACC,EAAI,CAAArE,IAAA,2CACHsE,MAAO,CACL,gBAAiB,KACjB,CAAC,kBAAkB9F,KAAKE,WAAY,KACpC,CAAC,kBAAkBF,KAAKG,QAAS,KACjC,sBAAuBH,KAAKC,KAC5B,0BAA2BD,KAAKU,WAGjC+E,GACCG,EAAA,OAAApE,IAAA,2CACEsE,MAAM,uBACNC,KAAK,QAAO,cACA,OACZC,QAAShG,KAAK4C,mBAIlBgD,EAAA,OAAApE,IAAA,2CACEsE,MAAM,2BACNC,KAAK,YACLE,KAAMR,EAAU,SAAW,SAAQ,aACvBA,EAAU,OAASS,UAAS,kBACvBR,EAAc1F,KAAKiB,WAAaiF,UAAS,aAC9ClG,KAAKW,kBAAoB+E,EAAc,aAAeQ,WAAU,eAC9DlG,KAAKC,KAAO,OAASiG,UAUnCC,OAAQnG,KAAKC,KACbmG,UAAU,EACVC,IAAMpE,GAAQjC,KAAKoC,YAAcH,GAEhCwD,GACCG,EAAA,QAAApE,IAAA,2CACEsE,MAAM,6BACNM,SAAU,EAAC,cACC,OACZE,QAAStG,KAAK2C,sBAIlBiD,EAAA,OAAApE,IAAA,2CAAKsE,MAAM,wBAAwBC,KAAK,UACrCJ,GACCC,EAAA,OAAApE,IAAA,2CAAKsE,MAAM,uBACTF,EAAA,QAAApE,IAAA,2CAAM+E,KAAK,QACTX,EAAA,kBAAApE,IAAA,2CACEtB,QAAQ,WACRsG,KAAK,aAAY,aACN,OACXR,QAAShG,KAAK8C,oBAMtB8C,EAAA,QAAApE,IAAA,2CACEiF,GAAIzG,KAAKiB,WACT6E,MAAM,0BACNC,KAAK,YAELH,EAAA,QAAApE,IAAA,2CAAM+E,KAAK,YAAYvG,KAAKI,WAG7BJ,KAAKK,WACJuF,EAAA,OAAApE,IAAA,2CAAKsE,MAAM,uBAAuBC,KAAK,SACrCH,EAAA,QAAApE,IAAA,2CAAM+E,KAAK,SACTX,EAAA,kBAAApE,IAAA,2CACEtB,QAAQ,WACRsG,KAAK,QAAO,aACD,mBACXR,QAAShG,KAAK6C,sBAOvB7C,KAAKQ,YACJoF,EAAA,OAAApE,IAAA,2CAAKsE,MAAM,yBAAyBC,KAAK,cAAa,cAAa,SAGrEH,EAAA,OAAApE,IAAA,2CAAKsE,MAAM,yBAAyBC,KAAK,WACvCH,EAAA,QAAApE,IAAA,8CAGDxB,KAAKe,YAAcf,KAAKS,eACvBmF,EAAA,OAAApE,IAAA,2CAAKsE,MAAM,wDAAwDC,KAAK,iBAAgB,cAAa,SAGtG/F,KAAKe,YACJ6E,EAAA,OAAApE,IAAA,2CAAKsE,MAAM,yBAAyBC,KAAK,WACvCH,EAAA,QAAApE,IAAA,2CAAM+E,KAAK,aAIdd,GACCG,EAAA,QAAApE,IAAA,2CACEsE,MAAM,6BACNM,SAAU,EAAC,cACC,OACZE,QAAStG,KAAKsC,yB","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{p as e,H as s,h as t,d as n,t as a}from"./p-bSpXNc5J.js";const i=()=>`: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 o=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();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 s=[];for(let t=0;t<e;t++){s.push({key:t,tapered:e>1&&t===e-1})}return s.map((({key:e,tapered:s})=>t("span",{key:e,part:s?"line line-last":"line",class:{"md-skeleton__line":true,"md-skeleton__line--tapered":s}})))}render(){const e=this.prefersReducedMotion?"none":this.animation;const s={};if(this.width)s["--_w"]=this.width;if(this.height)s["--_h"]=this.height;return t(n,{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:s},this.variant==="text"?this.renderTextLines():t("span",{class:"md-skeleton__shape",part:"shape","aria-hidden":"true"}))}get el(){return this}static get style(){return i()}},[1,"md-skeleton",{variant:[513],animation:[513],lines:[514],width:[1],height:[1],fullWidth:[516,"full-width"],fullHeight:[516,"full-height"],ariaLabelProp:[1,"aria-label"],announce:[4],density:[514],prefersReducedMotion:[32]}]);function r(){if(typeof customElements==="undefined"){return}const e=["md-skeleton"];e.forEach((e=>{switch(e){case"md-skeleton":if(!customElements.get(a(e))){customElements.define(a(e),o)}break}}))}r();const l=o;const d=r;export{l as MdSkeleton,d as defineCustomElement};
+//# sourceMappingURL=md-skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["mdSkeletonCss","MdSkeleton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","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":"gEAAA,MAAMA,EAAgB,IAAM,u/J,MCOfC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,kEAoB2BC,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/components-csr/md-slider.js

@@ -0,0 +1,2 @@
+import{M as o,d as s}from"./p-uZbtHo-A.js";const t=o;const p=s;export{t as MdSlider,p as defineCustomElement};
+//# sourceMappingURL=md-slider.js.map

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

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

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

@@ -0,0 +1,2 @@
+import{p as s,H as t,c as a,h as e,d as i,t as n}from"./p-bSpXNc5J.js";import{d as o}from"./p--OUYjgKN.js";import{d as r}from"./p-IWA0yIjJ.js";import{d as c}from"./p-CG6FaRlt.js";import{d}from"./p-Hm3X1iai.js";const m=()=>`:host{--_container-color:var(--md-snackbar-container-color, var(--md-sys-color-inverse-surface, #313033));--_message-color:var(--md-snackbar-message-color, var(--md-sys-color-inverse-on-surface, #F4EFF4));--_action-color:var(--md-snackbar-action-color, var(--md-sys-color-inverse-primary, #D0BCFF));--_close-color:var(--md-snackbar-close-color, var(--md-sys-color-inverse-on-surface, #F4EFF4));--_container-shape:var(--md-snackbar-container-shape, var(--md-sys-shape-corner-extra-small, 4px));--_min-width:var(--md-snackbar-min-width, 288px);--_max-width:var(--md-snackbar-max-width, 568px);--_slide-from:translateY(100%);display:flex;position:fixed;inset-block-start:0;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;padding:var(--md-sys-spacing-inset-xl, 24px);align-items:flex-end;justify-content:center;z-index:calc(var(--md-sys-z-index-snackbar, 2000) + var(--_stack-order, 0));pointer-events:none;visibility:hidden;opacity:0;transform:var(--_slide-from);transition:opacity var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)),     transform var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)),     visibility 0ms linear var(--md-sys-motion-duration-short4, 200ms)}:host(.md-snackbar--open){visibility:visible;opacity:1;transform:translate(0, 0);transition:opacity var(--md-sys-motion-duration-medium1, 250ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),     transform var(--md-sys-motion-duration-medium1, 250ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),     visibility 0ms linear 0ms}:host(.md-snackbar--open) .md-snackbar__surface{pointer-events:auto}:host(.md-snackbar--bottom){align-items:flex-end;justify-content:center}:host(.md-snackbar--bottom-start){align-items:flex-end;justify-content:flex-start}:host(.md-snackbar--bottom-end){align-items:flex-end;justify-content:flex-end}:host(.md-snackbar--top),:host(.md-snackbar--top-start),:host(.md-snackbar--top-end){--_slide-from:translateY(-100%)}:host(.md-snackbar--top){align-items:flex-start;justify-content:center}:host(.md-snackbar--top-start){align-items:flex-start;justify-content:flex-start}:host(.md-snackbar--top-end){align-items:flex-start;justify-content:flex-end}:host(.md-snackbar--start),:host(.md-snackbar--end),:host(.md-snackbar--center){--_slide-from:translate(0, 0)}:host(.md-snackbar--start){align-items:center;justify-content:flex-start}:host(.md-snackbar--end){align-items:center;justify-content:flex-end}:host(.md-snackbar--center){align-items:center;justify-content:center}.md-snackbar__surface{display:flex;align-items:center;min-inline-size:var(--_min-width);max-inline-size:var(--_max-width);min-block-size:max(36px, calc(48px + var(--md-sys-density-scale, 0) * 3px));padding-inline-start:max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px));padding-inline-end:max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px));background-color:var(--_container-color);color:var(--_message-color);border-radius:var(--_container-shape);box-shadow:var(--md-sys-elevation-3);box-sizing:border-box}:host(.md-snackbar--with-action:not(.md-snackbar--with-close)) .md-snackbar__surface{padding-inline-end:var(--md-sys-spacing-inset-sm, 8px)}:host(.md-snackbar--with-close) .md-snackbar__surface{padding-inline-end:var(--md-sys-spacing-inset-md, 12px)}@media (max-width: 599px){:host{padding:var(--md-sys-spacing-inset-lg, 16px)}.md-snackbar__surface{inline-size:100%;min-inline-size:0;max-inline-size:100%}}.md-snackbar__message{flex:1;padding-block:max(6px, calc(14px + var(--md-sys-density-scale, 0) * 2px));font-family:var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);font-size:max(12px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-body-medium-font-weight, 400);line-height:max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));letter-spacing:var(--md-sys-typescale-body-medium-letter-spacing, 0.25px);color:inherit}.md-snackbar__actions{display:flex;align-items:center;flex-shrink:0}.md-snackbar__action-btn{flex-shrink:0;--md-button-label-color:var(--_action-color);--md-button-icon-color:var(--_action-color);--md-ripple-color:var(--_action-color)}.md-snackbar__close{display:flex;align-items:center;flex-shrink:0;outline:none;-webkit-tap-highlight-color:transparent}.md-snackbar__close md-icon-button{--md-icon-button-icon-color:var(--_close-color);--md-icon-button-container-width:max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));--md-icon-button-container-height:max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));--md-icon-button-icon-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px))}:host(.md-snackbar--stacked) .md-snackbar__surface{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:start;column-gap:var(--md-sys-spacing-gap-md, 12px);row-gap:6px;min-block-size:68px;padding-block-start:var(--md-sys-spacing-inset-sm, 8px);padding-block-end:var(--md-sys-spacing-inset-sm, 8px)}:host(.md-snackbar--stacked) .md-snackbar__message{grid-column:1;grid-row:1;padding-block-end:var(--md-sys-spacing-inset-xs, 4px)}:host(.md-snackbar--stacked) .md-snackbar__close{grid-column:2;grid-row:1;align-self:start;margin-inline-start:0;margin-block-start:var(--md-sys-spacing-inset-xs, 4px);padding-block-start:0}:host(.md-snackbar--stacked) .md-snackbar__actions{grid-column:1 / -1;grid-row:2;justify-self:end}::slotted([slot="action"]){color:var(--_action-color)}::slotted([slot="close"]){color:var(--_close-color)}@media (prefers-reduced-motion: reduce){:host,:host(.md-snackbar--open){transition:none}}@media (forced-colors: active){.md-snackbar__surface{border:1px solid CanvasText}.md-snackbar__action-btn{color:LinkText}.md-snackbar__action-btn:focus-visible{outline-color:Highlight}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const l=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.mdOpen=a(this,"mdOpen",7);this.mdClose=a(this,"mdClose",7);this.mdAction=a(this,"mdAction",7);this.open=false;this.message="";this.action="";this.closeable=false;this.autoHide=true;this.autoHideDuration=4e3;this.position="bottom";this.stacked=false;this.politeness="polite";this.dismissLabel="Dismiss";this.density=0;this.hasSlottedAction=false;this.hasSlottedClose=false;this.hasSlottedDefault=false;this.timerPaused=false;this.handleActionClick=()=>{this.mdAction.emit();this.startAutoHide()};this.handleCloseClick=()=>{this.dismissAfterRipple("close")};this.handleEscape=s=>{if(s.key==="Escape"&&this.open&&this.closeable){s.preventDefault();this.handleCloseClick()}};this.pauseAutoHide=()=>{if(this.autoHideTimer!=null&&this.open){this.timerPaused=true;this.clearAutoHide()}};this.resumeAutoHide=()=>{if(this.timerPaused&&this.open){this.timerPaused=false;this.startAutoHide()}};this.handleSurfaceFocusOut=s=>{const t=s.currentTarget;if(s.relatedTarget&&t.contains(s.relatedTarget)){return}this.resumeAutoHide()}}get isAutoHide(){return this.autoHide!==false&&this.autoHide!=="false"}componentDidLoad(){const s=this.el.shadowRoot;if(!s)return;const t=s.querySelector("slot:not([name])");const a=s.querySelector('slot[name="action"]');const e=s.querySelector('slot[name="close"]');t?.addEventListener("slotchange",(()=>{this.hasSlottedDefault=t.assignedNodes().some((s=>s.nodeType===Node.ELEMENT_NODE||s.nodeType===Node.TEXT_NODE&&s.textContent?.trim()!==""))}));a?.addEventListener("slotchange",(()=>{this.hasSlottedAction=a.assignedElements().length>0}));e?.addEventListener("slotchange",(()=>{this.hasSlottedClose=e.assignedElements().length>0}));if(this.open){this.onOpenChange(true,false)}}disconnectedCallback(){this.clearAutoHide();if(this.rippleDismissTimer!=null){clearTimeout(this.rippleDismissTimer);this.rippleDismissTimer=undefined}window.removeEventListener("keydown",this.handleEscape)}raiseAboveOpenPeers(){const s=Array.from(document.querySelectorAll("md-snackbar")).filter((s=>s!==this.el&&s.open));const t=s.reduce(((s,t)=>Math.max(s,Number(t.style.getPropertyValue("--_stack-order"))||0)),0);this.el.style.setProperty("--_stack-order",String(t+1))}onOpenChange(s,t){if(s){this.raiseAboveOpenPeers();this.mdOpen.emit();if(this.isAutoHide){this.startAutoHide()}window.addEventListener("keydown",this.handleEscape)}else{this.clearAutoHide();this.timerPaused=false;window.removeEventListener("keydown",this.handleEscape)}}async show(){this.open=true}async hide(s="close"){if(!this.open)return;this.open=false;this.mdClose.emit({reason:s})}startAutoHide(){this.clearAutoHide();this.autoHideTimer=setTimeout((()=>{if(this.open){this.open=false;this.mdClose.emit({reason:"auto"})}}),this.autoHideDuration)}clearAutoHide(){if(this.autoHideTimer!=null){clearTimeout(this.autoHideTimer);this.autoHideTimer=undefined}}dismissAfterRipple(s){this.rippleDismissTimer=setTimeout((()=>{this.rippleDismissTimer=undefined;if(this.open){this.open=false;this.mdClose.emit({reason:s})}}),150)}render(){const s=!!this.action||this.hasSlottedAction;const t=this.closeable||this.hasSlottedClose;return e(i,{key:"5c115cee24a10c7b14de31937b5d37fb11a804e0",class:{"md-snackbar":true,"md-snackbar--open":this.open,"md-snackbar--stacked":this.stacked,[`md-snackbar--${this.position}`]:true,"md-snackbar--with-action":s,"md-snackbar--with-close":t},role:this.politeness==="assertive"?"alert":"status","aria-live":this.politeness,"aria-atomic":"true"},e("div",{key:"e4e569c8e4652986182f964ac69a0b4911e4dda1",class:"md-snackbar__surface",part:"surface",onMouseEnter:this.pauseAutoHide,onMouseLeave:this.resumeAutoHide,onFocusin:this.pauseAutoHide,onFocusout:this.handleSurfaceFocusOut},e("span",{key:"6d7f576f17a20a3bf0d96742aa83a7de998927bd",class:"md-snackbar__message",part:"message"},e("slot",{key:"3a6874ad6d4e6fa54a02a210dc266a4a5f3bb2f0"},this.message)),s&&e("div",{key:"36af7feb22dff43e7413dd3773eb24bbd08f1149",class:"md-snackbar__actions",part:"actions"},e("slot",{key:"ebca9cb6723664319590a1694bbe0f9d424b38ff",name:"action"},this.action&&e("md-button",{key:"77c5813c137217a0d205d5dafdb11ce00f338cb4",variant:"text",size:"sm",class:"md-snackbar__action-btn",onClick:this.handleActionClick},this.action))),t&&e("div",{key:"10a85a75331759d41e706894e674e3da63cccd92",class:"md-snackbar__close",part:"close"},e("slot",{key:"b283137afaba0d4df99f2d2c409044f77a8f5cd2",name:"close"},this.closeable&&e("md-icon-button",{key:"94672d3f27248020c7edda783c534a5791b6f400",variant:"standard",icon:"close","aria-label":this.dismissLabel,onClick:this.handleCloseClick,exportparts:"icon:close-icon"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return m()}},[257,"md-snackbar",{open:[1540],message:[1],action:[1],closeable:[516],autoHide:[4,"auto-hide"],autoHideDuration:[2,"auto-hide-duration"],position:[513],stacked:[516],politeness:[513],dismissLabel:[1,"dismiss-label"],density:[514],hasSlottedAction:[32],hasSlottedClose:[32],hasSlottedDefault:[32],show:[64],hide:[64]},undefined,{open:[{onOpenChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const s=["md-snackbar","md-button","md-icon-button","md-loading-indicator","md-ripple"];s.forEach((s=>{switch(s){case"md-snackbar":if(!customElements.get(n(s))){customElements.define(n(s),l)}break;case"md-button":if(!customElements.get(n(s))){o()}break;case"md-icon-button":if(!customElements.get(n(s))){r()}break;case"md-loading-indicator":if(!customElements.get(n(s))){c()}break;case"md-ripple":if(!customElements.get(n(s))){d()}break}}))}h();const b=l;const p=h;export{b as MdSnackbar,p as defineCustomElement};
+//# sourceMappingURL=md-snackbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["mdSnackbarCss","MdSnackbar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","message","action","closeable","autoHide","autoHideDuration","position","stacked","politeness","dismissLabel","density","hasSlottedAction","hasSlottedClose","hasSlottedDefault","timerPaused","handleActionClick","mdAction","emit","startAutoHide","handleCloseClick","dismissAfterRipple","handleEscape","e","key","preventDefault","pauseAutoHide","autoHideTimer","clearAutoHide","resumeAutoHide","handleSurfaceFocusOut","surface","currentTarget","relatedTarget","contains","isAutoHide","componentDidLoad","shadow","el","shadowRoot","defaultSlot","querySelector","actionSlot","closeSlot","addEventListener","assignedNodes","some","n","nodeType","Node","ELEMENT_NODE","TEXT_NODE","textContent","trim","assignedElements","length","onOpenChange","disconnectedCallback","rippleDismissTimer","clearTimeout","undefined","window","removeEventListener","raiseAboveOpenPeers","peers","Array","from","document","querySelectorAll","filter","s","highest","reduce","max","Math","Number","style","getPropertyValue","setProperty","String","newVal","_oldVal","mdOpen","show","hide","reason","mdClose","setTimeout","render","hasAction","hasClose","h","Host","class","role","part","onMouseEnter","onMouseLeave","onFocusin","onFocusout","name","variant","size","onClick","icon","exportparts"],"sources":["src/components/md-snackbar/md-snackbar.css?tag=md-snackbar&encapsulation=shadow","src/components/md-snackbar/md-snackbar.tsx"],"sourcesContent":["/* ==========================================================\n   md-snackbar — Material Design 3 Snackbar\n   Spec: https://m3.material.io/components/snackbar/specs\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-snackbar-container-color        Surface background\n     --md-snackbar-message-color          Supporting text color\n     --md-snackbar-action-color           Action button text color\n     --md-snackbar-close-color            Close icon color\n     --md-snackbar-container-shape        Border radius\n     --md-snackbar-min-width              Minimum inline size\n     --md-snackbar-max-width              Maximum inline size\n\n   CSS PARTS:\n     surface     Outer container\n     message     Supporting text wrapper\n     actions     Action button wrapper\n     close       Close button wrapper\n\n   SLOTS:\n     (default)   Supporting text\n     action      Custom action element\n     close       Custom close element\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST — positioning & visibility\n   ========================================================== */\n\n:host {\n  --_container-color: var(--md-snackbar-container-color, var(--md-sys-color-inverse-surface, #313033));\n  --_message-color: var(--md-snackbar-message-color, var(--md-sys-color-inverse-on-surface, #F4EFF4));\n  --_action-color: var(--md-snackbar-action-color, var(--md-sys-color-inverse-primary, #D0BCFF));\n  --_close-color: var(--md-snackbar-close-color, var(--md-sys-color-inverse-on-surface, #F4EFF4));\n  --_container-shape: var(--md-snackbar-container-shape, var(--md-sys-shape-corner-extra-small, 4px));\n  --_min-width: var(--md-snackbar-min-width, 288px);\n  --_max-width: var(--md-snackbar-max-width, 568px);\n  --_slide-from: translateY(100%);\n\n  display: flex;\n  position: fixed;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  inset-inline-end: 0;\n  padding: var(--md-sys-spacing-inset-xl, 24px);\n  align-items: flex-end;\n  justify-content: center;\n  /* Every snackbar shares one z-index, so with two of them up the DOM order —\n     not the order they opened in — decides which paints on top, and a newly\n     shown snackbar can appear BEHIND one already on screen. `--_stack-order`\n     is stamped on open (see md-snackbar.tsx) and lifts the newest above its\n     peers. It counts open snackbars, not opens, so it stays a small number and\n     can't creep up past dialogs or other overlays above this token. */\n  z-index: calc(var(--md-sys-z-index-snackbar, 2000) + var(--_stack-order, 0));\n  pointer-events: none;\n  visibility: hidden;\n  opacity: 0;\n  transform: var(--_slide-from);\n  transition:\n    opacity var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)),\n    transform var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)),\n    visibility 0ms linear var(--md-sys-motion-duration-short4, 200ms);\n}\n\n:host(.md-snackbar--open) {\n  visibility: visible;\n  opacity: 1;\n  transform: translate(0, 0);\n  transition:\n    opacity var(--md-sys-motion-duration-medium1, 250ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    transform var(--md-sys-motion-duration-medium1, 250ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    visibility 0ms linear 0ms;\n}\n\n:host(.md-snackbar--open) .md-snackbar__surface {\n  pointer-events: auto;\n}\n\n/* ─── Bottom positions (slide from bottom) ─────────────── */\n\n:host(.md-snackbar--bottom) {\n  align-items: flex-end;\n  justify-content: center;\n}\n\n:host(.md-snackbar--bottom-start) {\n  align-items: flex-end;\n  justify-content: flex-start;\n}\n\n:host(.md-snackbar--bottom-end) {\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n\n/* ─── Top positions (slide from top) ───────────────────── */\n\n:host(.md-snackbar--top),\n:host(.md-snackbar--top-start),\n:host(.md-snackbar--top-end) {\n  --_slide-from: translateY(-100%);\n}\n\n:host(.md-snackbar--top) {\n  align-items: flex-start;\n  justify-content: center;\n}\n\n:host(.md-snackbar--top-start) {\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n\n:host(.md-snackbar--top-end) {\n  align-items: flex-start;\n  justify-content: flex-end;\n}\n\n/* ─── Side & center positions (fade only) ──────────────── */\n\n:host(.md-snackbar--start),\n:host(.md-snackbar--end),\n:host(.md-snackbar--center) {\n  --_slide-from: translate(0, 0);\n}\n\n:host(.md-snackbar--start) {\n  align-items: center;\n  justify-content: flex-start;\n}\n\n:host(.md-snackbar--end) {\n  align-items: center;\n  justify-content: flex-end;\n}\n\n:host(.md-snackbar--center) {\n  align-items: center;\n  justify-content: center;\n}\n\n/* ==========================================================\n   2. SURFACE — container\n   ========================================================== */\n\n.md-snackbar__surface {\n  display: flex;\n  align-items: center;\n  min-inline-size: var(--_min-width);\n  max-inline-size: var(--_max-width);\n  min-block-size: max(36px, calc(48px + var(--md-sys-density-scale, 0) * 3px));\n  padding-inline-start: max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px));\n  padding-inline-end: max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px));\n  background-color: var(--_container-color);\n  color: var(--_message-color);\n  border-radius: var(--_container-shape);\n  box-shadow: var(--md-sys-elevation-3);\n  box-sizing: border-box;\n}\n\n:host(.md-snackbar--with-action:not(.md-snackbar--with-close)) .md-snackbar__surface {\n  padding-inline-end: var(--md-sys-spacing-inset-sm, 8px);\n}\n\n:host(.md-snackbar--with-close) .md-snackbar__surface {\n  padding-inline-end: var(--md-sys-spacing-inset-md, 12px);\n}\n\n/* ─── Compact viewports (MD3) ───────────────────────────────\n   Below 600px the snackbar spans the full available width (minus a smaller edge\n   margin) instead of its fixed min/max width — so it never overflows or clips\n   off-screen on a phone (the 288px min-width would otherwise exceed a narrow\n   viewport). */\n@media (max-width: 599px) {\n  :host {\n    padding: var(--md-sys-spacing-inset-lg, 16px);\n  }\n  .md-snackbar__surface {\n    inline-size: 100%;\n    min-inline-size: 0;\n    max-inline-size: 100%;\n  }\n}\n\n/* ==========================================================\n   3. MESSAGE — supporting text\n   ========================================================== */\n\n.md-snackbar__message {\n  flex: 1;\n  padding-block: max(6px, calc(14px + var(--md-sys-density-scale, 0) * 2px));\n  font-family: var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);\n  font-size: max(12px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-body-medium-font-weight, 400);\n  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing, 0.25px);\n  color: inherit;\n}\n\n/* ==========================================================\n   4. ACTIONS — action button + close icon\n   ========================================================== */\n\n.md-snackbar__actions {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Action button (md-button, text variant) ───────────── */\n\n/* The action is a real md-button (text variant). On the inverse (dark)\n   snackbar surface it takes the inverse-primary action color for its label,\n   icon, state layer and ripple — the button itself supplies the typescale,\n   shape, focus ring and ripple. */\n.md-snackbar__action-btn {\n  flex-shrink: 0;\n  --md-button-label-color: var(--_action-color);\n  --md-button-icon-color: var(--_action-color);\n  --md-ripple-color: var(--_action-color);\n}\n\n/* ─── Close wrapper & icon button ──────────────────────── */\n\n.md-snackbar__close {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.md-snackbar__close md-icon-button {\n  --md-icon-button-icon-color: var(--_close-color);\n  --md-icon-button-container-width: max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));\n  --md-icon-button-container-height: max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px));\n  --md-icon-button-icon-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n}\n\n/* ==========================================================\n   5. STACKED LAYOUT — action below text, close at top-right\n   ========================================================== */\n\n:host(.md-snackbar--stacked) .md-snackbar__surface {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto auto;\n  align-items: start;\n  /* Breathing room so the close isn't jammed against the message, and the action\n     row isn't stacked tight under the close. */\n  column-gap: var(--md-sys-spacing-gap-md, 12px);\n  row-gap: 6px;\n  min-block-size: 68px;\n  padding-block-start: var(--md-sys-spacing-inset-sm, 8px);\n  padding-block-end: var(--md-sys-spacing-inset-sm, 8px);\n}\n\n:host(.md-snackbar--stacked) .md-snackbar__message {\n  grid-column: 1;\n  grid-row: 1;\n  padding-block-end: var(--md-sys-spacing-inset-xs, 4px);\n}\n\n/* Centre the 24px close glyph on the message's first-line\n   centre. The message inherits `padding-block: 14px` from the\n   base rule (the stacked override only resets the end padding),\n   so its first line centre sits at row_top + 14 + 10 = row_top\n   + 24. The icon-button is 40×40 with 8px internal padding —\n   its glyph centre sits 20px below the button's top. We\n   therefore push the button DOWN by 4px so the glyph centre\n   lands at row_top + 24 = message line centre. Holds for\n   multi-line messages too — the glyph stays on the FIRST line. */\n:host(.md-snackbar--stacked) .md-snackbar__close {\n  grid-column: 2;\n  grid-row: 1;\n  align-self: start;\n  margin-inline-start: 0;\n  margin-block-start: var(--md-sys-spacing-inset-xs, 4px);\n  padding-block-start: 0;\n}\n\n:host(.md-snackbar--stacked) .md-snackbar__actions {\n  grid-column: 1 / -1;\n  grid-row: 2;\n  justify-self: end;\n}\n\n/* ==========================================================\n   6. SLOTTED CONTENT\n   ========================================================== */\n\n::slotted([slot=\"action\"]) {\n  color: var(--_action-color);\n}\n\n::slotted([slot=\"close\"]) {\n  color: var(--_close-color);\n}\n\n/* ==========================================================\n   7. REDUCED MOTION\n   ========================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  :host,\n  :host(.md-snackbar--open) {\n    transition: none;\n  }\n}\n\n/* ==========================================================\n   8. FORCED COLORS (Windows High Contrast)\n   ========================================================== */\n\n@media (forced-colors: active) {\n  .md-snackbar__surface {\n    border: 1px solid CanvasText;\n  }\n\n  .md-snackbar__action-btn {\n    color: LinkText;\n  }\n\n  .md-snackbar__action-btn:focus-visible {\n    outline-color: Highlight;\n  }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Method, Watch } from '@stencil/core';\n\n/**\n * @slot - Supporting text (overrides `message` prop)\n * @slot action - Custom action element (overrides `action` prop)\n * @slot close - Custom close element (overrides default X icon button)\n *\n * @part surface - Outer container surface\n * @part message - Supporting text wrapper\n * @part actions - Action button wrapper\n * @part close - Close button wrapper\n */\n@Component({\n  tag: 'md-snackbar',\n  styleUrl: 'md-snackbar.css',\n  shadow: true,\n})\nexport class MdSnackbar {\n  @Element() el!: HTMLElement;\n\n  // ─── Public Props ──────────────────────────────────────────\n\n  /** Whether the snackbar is visible */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Primary supporting text */\n  @Prop() message: string = '';\n\n  /** Action button label (leave empty for no action) */\n  @Prop() action: string = '';\n\n  /** Show a close (X) icon button */\n  @Prop({ reflect: true }) closeable: boolean = false;\n\n  /** Auto-dismiss after `autoHideDuration` ms (dismissive behavior) */\n  @Prop() autoHide: boolean = true;\n\n  /** Time in ms before auto-dismiss */\n  @Prop() autoHideDuration: number = 4000;\n\n  /** Screen position */\n  @Prop({ reflect: true }) position:\n    | 'bottom' | 'bottom-start' | 'bottom-end'\n    | 'top' | 'top-start' | 'top-end'\n    | 'start' | 'end' | 'center' = 'bottom';\n\n  /** Stack action below text (for longer action labels) */\n  @Prop({ reflect: true }) stacked: boolean = false;\n\n  /**\n   * Live-region politeness. `'polite'` (default) → `role=\"status\"` /\n   * `aria-live=\"polite\"` (announced when idle). `'assertive'` → `role=\"alert\"` /\n   * `aria-live=\"assertive\"` — interrupts the screen reader; use sparingly for\n   * important / error messages.\n   */\n  @Prop({ reflect: true }) politeness: 'polite' | 'assertive' = 'polite';\n\n  /** Accessible label for the close button. Localize per the page locale. */\n  @Prop({ attribute: 'dismiss-label' }) dismissLabel: string = 'Dismiss';\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  // ─── Events ────────────────────────────────────────────────\n\n  /** Emits when the snackbar becomes visible */\n  @Event() mdOpen: EventEmitter<void>;\n\n  /** Emits when the snackbar is dismissed, with reason */\n  @Event() mdClose: EventEmitter<{ reason: 'auto' | 'action' | 'close' }>;\n\n  /** Emits when the action button is clicked */\n  @Event() mdAction: EventEmitter<void>;\n\n  // ─── Internal State ────────────────────────────────────────\n\n  @State() private hasSlottedAction = false;\n  @State() private hasSlottedClose = false;\n  @State() private hasSlottedDefault = false;\n\n  private autoHideTimer?: ReturnType<typeof setTimeout>;\n  private rippleDismissTimer?: ReturnType<typeof setTimeout>;\n  private timerPaused = false;\n\n  /** Coerce autoHide — HTML attribute `auto-hide=\"false\"` arrives as string \"false\" */\n  private get isAutoHide(): boolean {\n    return this.autoHide !== false && (this.autoHide as unknown) !== 'false';\n  }\n\n  // ─── Lifecycle ─────────────────────────────────────────────\n\n  componentDidLoad() {\n    const shadow = this.el.shadowRoot;\n    if (!shadow) return;\n\n    const defaultSlot = shadow.querySelector('slot:not([name])') as HTMLSlotElement | null;\n    const actionSlot = shadow.querySelector('slot[name=\"action\"]') as HTMLSlotElement | null;\n    const closeSlot = shadow.querySelector('slot[name=\"close\"]') as HTMLSlotElement | null;\n\n    defaultSlot?.addEventListener('slotchange', () => {\n      this.hasSlottedDefault = defaultSlot.assignedNodes().some(n =>\n        n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && n.textContent?.trim() !== ''),\n      );\n    });\n    actionSlot?.addEventListener('slotchange', () => {\n      this.hasSlottedAction = actionSlot.assignedElements().length > 0;\n    });\n    closeSlot?.addEventListener('slotchange', () => {\n      this.hasSlottedClose = closeSlot.assignedElements().length > 0;\n    });\n\n    if (this.open) {\n      this.onOpenChange(true, false);\n    }\n  }\n\n  disconnectedCallback() {\n    this.clearAutoHide();\n    if (this.rippleDismissTimer != null) {\n      clearTimeout(this.rippleDismissTimer);\n      this.rippleDismissTimer = undefined;\n    }\n    window.removeEventListener('keydown', this.handleEscape);\n  }\n\n  // ─── Watchers ──────────────────────────────────────────────\n\n  /**\n   * Lift this snackbar above any that are already open.\n   *\n   * All snackbars share one z-index token, and equal z-index falls back to DOM\n   * order — so showing a snackbar declared earlier in the markup put it BEHIND\n   * one already on screen. Ranking against the currently-open peers (rather\n   * than counting every open ever) keeps the offset bounded by how many are up\n   * at once, so it never climbs into the range of dialogs above it.\n   */\n  private raiseAboveOpenPeers() {\n    const peers = Array.from(document.querySelectorAll('md-snackbar')).filter(\n      (s) => s !== this.el && (s as HTMLMdSnackbarElement).open,\n    );\n    const highest = peers.reduce(\n      (max, s) => Math.max(max, Number((s as HTMLElement).style.getPropertyValue('--_stack-order')) || 0),\n      0,\n    );\n    this.el.style.setProperty('--_stack-order', String(highest + 1));\n  }\n\n  @Watch('open')\n  onOpenChange(newVal: boolean, _oldVal?: boolean) {\n    if (newVal) {\n      this.raiseAboveOpenPeers();\n      this.mdOpen.emit();\n      if (this.isAutoHide) {\n        this.startAutoHide();\n      }\n      window.addEventListener('keydown', this.handleEscape);\n    } else {\n      this.clearAutoHide();\n      this.timerPaused = false;\n      window.removeEventListener('keydown', this.handleEscape);\n    }\n  }\n\n  // ─── Public Methods ────────────────────────────────────────\n\n  /** Show the snackbar */\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  /** Hide the snackbar with an optional reason */\n  @Method()\n  async hide(reason: 'auto' | 'action' | 'close' = 'close') {\n    if (!this.open) return;\n    this.open = false;\n    this.mdClose.emit({ reason });\n  }\n\n  // ─── Private ───────────────────────────────────────────────\n\n  private startAutoHide() {\n    this.clearAutoHide();\n    this.autoHideTimer = setTimeout(() => {\n      if (this.open) {\n        this.open = false;\n        this.mdClose.emit({ reason: 'auto' });\n      }\n    }, this.autoHideDuration);\n  }\n\n  private clearAutoHide() {\n    if (this.autoHideTimer != null) {\n      clearTimeout(this.autoHideTimer);\n      this.autoHideTimer = undefined;\n    }\n  }\n\n  private dismissAfterRipple(reason: 'action' | 'close') {\n    this.rippleDismissTimer = setTimeout(() => {\n      this.rippleDismissTimer = undefined;\n      if (this.open) {\n        this.open = false;\n        this.mdClose.emit({ reason });\n      }\n    }, 150);\n  }\n\n  private handleActionClick = () => {\n    this.mdAction.emit();\n    this.startAutoHide();\n  };\n\n  private handleCloseClick = () => {\n    this.dismissAfterRipple('close');\n  };\n\n  private handleEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape' && this.open && this.closeable) {\n      e.preventDefault();\n      this.handleCloseClick();\n    }\n  };\n\n  /** WCAG 2.2.1 — pause auto-hide while the user is interacting */\n  private pauseAutoHide = () => {\n    if (this.autoHideTimer != null && this.open) {\n      this.timerPaused = true;\n      this.clearAutoHide();\n    }\n  };\n\n  private resumeAutoHide = () => {\n    if (this.timerPaused && this.open) {\n      this.timerPaused = false;\n      this.startAutoHide();\n    }\n  };\n\n  private handleSurfaceFocusOut = (e: FocusEvent) => {\n    const surface = e.currentTarget as HTMLElement;\n    if (e.relatedTarget && surface.contains(e.relatedTarget as Node)) {\n      return;\n    }\n    this.resumeAutoHide();\n  };\n\n  // ─── Render ────────────────────────────────────────────────\n\n  render() {\n    const hasAction = !!this.action || this.hasSlottedAction;\n    const hasClose = this.closeable || this.hasSlottedClose;\n\n    return (\n      <Host\n        class={{\n          'md-snackbar': true,\n          'md-snackbar--open': this.open,\n          'md-snackbar--stacked': this.stacked,\n          [`md-snackbar--${this.position}`]: true,\n          'md-snackbar--with-action': hasAction,\n          'md-snackbar--with-close': hasClose,\n        }}\n        role={this.politeness === 'assertive' ? 'alert' : 'status'}\n        aria-live={this.politeness}\n        aria-atomic=\"true\"\n      >\n        <div\n          class=\"md-snackbar__surface\"\n          part=\"surface\"\n          onMouseEnter={this.pauseAutoHide}\n          onMouseLeave={this.resumeAutoHide}\n          onFocusin={this.pauseAutoHide}\n          onFocusout={this.handleSurfaceFocusOut}\n        >\n          <span class=\"md-snackbar__message\" part=\"message\">\n            <slot>{this.message}</slot>\n          </span>\n\n          {hasAction && (\n            <div class=\"md-snackbar__actions\" part=\"actions\">\n              <slot name=\"action\">\n                {this.action && (\n                  <md-button\n                    variant=\"text\"\n                    size=\"sm\"\n                    class=\"md-snackbar__action-btn\"\n                    onClick={this.handleActionClick}\n                  >\n                    {this.action}\n                  </md-button>\n                )}\n              </slot>\n            </div>\n          )}\n\n          {hasClose && (\n            <div class=\"md-snackbar__close\" part=\"close\">\n              <slot name=\"close\">\n                {this.closeable && (\n                  <md-icon-button\n                    variant=\"standard\"\n                    icon=\"close\"\n                    aria-label={this.dismissLabel}\n                    onClick={this.handleCloseClick}\n                    exportparts=\"icon:close-icon\"\n                  ></md-icon-button>\n                )}\n              </slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{p as e,H as n,c as t,h as i,d as s,t as r}from"./p-bSpXNc5J.js";import{B as a}from"./p-Bx6--dQF.js";import{L as o}from"./p-RLxbNqRv.js";import{b as h,a as l,p as c}from"./p-DvOKnoqK.js";const d=()=>`: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 u=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.mdSparkClick=t(this,"mdSparkClick",7);this.mdReady=t(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 a(this.chartHost):new o(this.chartHost);this.engineKind=e}catch{this.engine=null;this.engineKind=null;return false}return true}markIndices(){const e=[];this.data.forEach(((n,t)=>{if(typeof n==="number")e.push({d:n,i:t})}));if(!e.length||this.showMarks==="none")return[];if(this.showMarks==="all")return e.map((e=>e.i));const n=new Set;if(this.showMarks==="extremes"){let t=e[0];let i=e[0];for(const n of e){if(n.d>t.d)t=n;if(n.d<i.d)i=n}n.add(t.i);n.add(i.i)}if(this.showMarks==="edges"){n.add(e[0].i);n.add(e[e.length-1].i)}return[...n]}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 n=e=>this.valueFormatter?this.valueFormatter(e):e.toLocaleString();const t=this.referenceAreas?.map((n=>({from:n.from,to:n.to,color:p(n.color??e,n.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,n)=>n)),xScale:"category",xFormatter:e=>String(e),xHidden:true,yScale:"value",yMin:this.min,yMax:this.max,yFormatter:n,yHidden:true,stack:"none",area:this.variant==="area",fillOpacity:.45,legend:"none",compact:true,refBands:t,animate:!this.noAnimation}}buildBarSpec(e){const n=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,n)=>n)),categoryFormatter:e=>String(e),categoryHidden:true,valueScale:"value",valueMin:this.min,valueMax:this.max,valueFormatter:n,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=h(this.el);const n=l(this.el,this.color,c(e.palette,0));const t=this.buildEngineTheme(e);const i=(e,n)=>{const t=this.data[n];this.mdSparkClick.emit({dataIndex:n,value:typeof t==="number"?t:null})};if(this.engine instanceof a){this.engine.setSpec(this.buildBarSpec(n),t,{onPointClick:i})}else{this.engine.setSpec(this.buildLineSpec(n),t,{onPointClick:i})}this.engine.setHoverEnabled(this.showTooltip)}render(){const e=this.data.filter((e=>typeof e==="number"));const n=e.length?e[e.length-1]:null;const t=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(n)}, range ${a(r)} to ${a(t)}.${h}`:`Sparkline, no data.${h}`;return i(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},i("div",{key:"921430a9cb40fd37d2bb7c4595668f607bc0eed4",class:"md-sparkline__canvas",part:"canvas",ref:e=>this.bindChartHost(e)}))}get el(){return 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}]}}static get style(){return d()}},[1,"md-sparkline",{data:[16],labels:[16],variant:[513],color:[1],curve:[1],showTooltip:[4,"show-tooltip"],showMarks:[1,"show-marks"],referenceAreas:[16],valueFormatter:[16],heightProp:[1,"height"],noAnimation:[4,"no-animation"],cornerRadius:[2,"corner-radius"],min:[2],max:[2],lineWidth:[2,"line-width"],markSize:[2,"mark-size"],barWidth:[2,"bar-width"],mounted:[32],resize:[64],getInstance:[64]},undefined,{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 p(e,n){if(e.startsWith("#")){let t=e.slice(1);if(t.length===3)t=t.split("").map((e=>e+e)).join("");const i=parseInt(t.slice(0,2),16);const s=parseInt(t.slice(2,4),16);const r=parseInt(t.slice(4,6),16);return`rgba(${i}, ${s}, ${r}, ${n})`}if(e.startsWith("rgb("))return e.replace(/^rgb\(/,"rgba(").replace(/\)$/,`, ${n})`);return e}function m(){if(typeof customElements==="undefined"){return}const e=["md-sparkline"];e.forEach((e=>{switch(e){case"md-sparkline":if(!customElements.get(r(e))){customElements.define(r(e),u)}break}}))}m();const f=u;const g=m;export{f as MdSparkline,g as defineCustomElement};
+//# sourceMappingURL=md-sparkline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["mdSparklineCss","MdSparkline","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","data","variant","color","curve","showTooltip","showMarks","noAnimation","cornerRadius","mounted","engine","engineKind","ro","bindChartHost","el","chartHost","componentDidLoad","initChart","window","matchMedia","themeMql","themeListener","applyEngine","addEventListener","disconnectedCallback","disconnect","dispose","removeEventListener","undefined","onAnyPropChange","resize","getInstance","ResizeObserver","observe","mdReady","emit","ensureEngine","kind","BarChartEngine","LineChartEngine","markIndices","nums","forEach","d","i","push","length","map","n","set","Set","max","min","add","buildEngineTheme","t","background","textColor","textColorMuted","axisLineColor","gridLineColor","gridColor","surface","fontFamily","labelSize","titleSize","buildLineSpec","fmt","v","valueFormatter","toLocaleString","refBands","referenceAreas","r","from","to","toRgba","series","label","connectNulls","hidden","lineWidth","markSize","xValues","labels","_","xScale","xFormatter","String","xHidden","yScale","yMin","yMax","yFormatter","yHidden","stack","area","fillOpacity","legend","compact","animate","buildBarSpec","categories","categoryFormatter","categoryHidden","valueScale","valueMin","valueMax","valueHidden","horizontal","categoryGapRatio","barGapRatio","barWidth","showLabels","readMdChartTheme","resolveSeriesColor","pickPaletteColor","palette","theme","onPointClick","_si","di","mdSparkClick","dataIndex","value","setSpec","setHoverEnabled","render","finiteValues","filter","last","Math","refLabels","l","refNote","join","summary","h","Host","key","class","role","style","heightProp","blockSize","part","ref","alpha","startsWith","hex","slice","split","c","parseInt","g","b","replace"],"sources":["src/components/md-sparkline/md-sparkline.css?tag=md-sparkline&encapsulation=shadow","src/components/md-sparkline/md-sparkline.tsx"],"sourcesContent":["/* ==========================================================\n   md-sparkline — Material Design 3 compact inline chart\n\n   PUBLIC CSS CUSTOM PROPERTIES:\n     --md-sparkline-block-size           Default block-size (default: 28px)\n     --md-sparkline-inline-size          Default inline-size (default: 100%)\n     --md-sparkline-min-inline-size      Minimum inline-size before clipping (default: 32px)\n\n   CSS PARTS:\n     canvas                              ECharts SVG container\n   ========================================================== */\n\n:host {\n  --_block-size: var(--md-sparkline-block-size, 28px);\n  --_inline-size: var(--md-sparkline-inline-size, 100%);\n  --_min-inline-size: var(--md-sparkline-min-inline-size, 32px);\n\n  display: inline-block;\n  vertical-align: middle;\n  inline-size: var(--_inline-size);\n  block-size: var(--_block-size);\n  min-inline-size: var(--_min-inline-size);\n  /* Sparklines sit inline with text labels in tables and KPI\n     cards; line-height: 1 keeps the host the same height as\n     its declared block-size (avoids the inherited line-height\n     adding spurious vertical space). */\n  line-height: 1;\n}\n\n.md-sparkline__canvas {\n  inline-size: 100%;\n  block-size: 100%;\n}\n\n@media (forced-colors: active) { :host { forced-color-adjust: auto; } }\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  Watch,\n} from '@stencil/core';\nimport {\n  pickPaletteColor,\n  readMdChartTheme,\n  resolveSeriesColor,\n  BarChartEngine,\n  LineChartEngine,\n  type BarChartSpec,\n  type EngineTheme,\n  type LineChartSpec,\n  type RefBand,\n  type MdChartAxisValue,\n  type MdChartColorRole,\n  type MdChartCurve,\n  type MdChartDataPoint,\n} from '../../utils/charts';\n\nexport interface MdSparklineReferenceArea {\n  /** Range start (index into the data array). */\n  from: number;\n  /** Range end. */\n  to: number;\n  /** Highlight colour. Defaults to a tinted version of the line. */\n  color?: string;\n  /** Optional accessible label (announced in screen-reader summary). */\n  label?: string;\n}\n\n/**\n * md-sparkline — compact inline chart, rendered by the in-house\n * engine (Canvas2D). No ECharts.\n *\n * Sparklines are presentational: no axes, no legend, no title, no\n * tooltip by default (opt in with `show-tooltip`). Line / area drive\n * LineChartEngine in `compact` mode; the bar variant drives\n * BarChartEngine. `show-marks` maps to selective extremes/edges dots.\n */\n@Component({\n  tag: 'md-sparkline',\n  styleUrl: 'md-sparkline.css',\n  shadow: true,\n})\nexport class MdSparkline {\n  @Element() el!: HTMLElement;\n\n  /** Numeric data series. Pass `null` for gaps. */\n  @Prop() data: MdChartDataPoint[] = [];\n\n  /** Optional category labels for tooltips / a11y. */\n  @Prop() labels: (string | number | Date)[] | undefined;\n\n  /** Visual variant. */\n  @Prop({ reflect: true }) variant: 'line' | 'bar' | 'area' = 'line';\n\n  /** Sparkline tint (MD3 role or raw colour). */\n  @Prop() color: MdChartColorRole | string = 'primary';\n\n  /** Curve type — only meaningful for line / area variants. */\n  @Prop() curve: MdChartCurve = 'smooth';\n\n  /** Show tooltip + crosshair on hover. Defaults to true. */\n  @Prop({ attribute: 'show-tooltip' }) showTooltip: boolean = true;\n\n  /** Show min / max / first / last markers. */\n  @Prop({ attribute: 'show-marks' }) showMarks: 'none' | 'extremes' | 'edges' | 'all' = 'extremes';\n\n  /** Highlight a vertical range (e.g. weekend, anomaly window). */\n  @Prop() referenceAreas: MdSparklineReferenceArea[] | undefined;\n\n  /** Format raw values for tooltips / a11y. */\n  @Prop() valueFormatter?: (value: number | null) => string;\n\n  /** Block-size override (defaults to 28px — table-cell friendly). */\n  @Prop({ attribute: 'height' }) heightProp?: string;\n\n  /** Disable all animation. */\n  @Prop({ attribute: 'no-animation' }) noAnimation: boolean = false;\n\n  /** Bar corner radius (bar variant only). */\n  @Prop({ attribute: 'corner-radius' }) cornerRadius: number = 2;\n\n  /**\n   * Pin the value scale's LOWER bound instead of auto-scaling to the data. Give\n   * several sparklines the same `min` + `max` and they share a comparable scale —\n   * a 0–40% metric no longer fills the whole height and reads as maxed out.\n   */\n  @Prop() min?: number;\n  /** Pin the value scale's UPPER bound instead of auto-scaling to the data. */\n  @Prop() max?: number;\n\n  /** Line stroke width in px (line / area variants). Default 2.5. */\n  @Prop({ attribute: 'line-width' }) lineWidth?: number;\n  /** Marker RADIUS in px (line / area variants). Overrides the per-symbol default. */\n  @Prop({ attribute: 'mark-size' }) markSize?: number;\n\n  /** Fixed bar WIDTH in px (bar variant), centred in each slot. Default: auto. */\n  @Prop({ attribute: 'bar-width' }) barWidth?: number;\n\n  @Event() mdSparkClick!: EventEmitter<{ dataIndex: number; value: number | null }>;\n  @Event() mdReady!: EventEmitter<void>;\n\n  @State() private mounted = false;\n\n  private engine: LineChartEngine | BarChartEngine | null = null;\n  private engineKind: 'line' | 'bar' | null = null;\n  private ro: ResizeObserver | null = null;\n  private chartHost?: HTMLDivElement;\n  private themeMql?: MediaQueryList;\n  private themeListener?: () => void;\n\n  componentDidLoad() {\n    this.initChart();\n    if (typeof window !== 'undefined' && window.matchMedia) {\n      this.themeMql = window.matchMedia('(prefers-color-scheme: dark)');\n      this.themeListener = () => this.applyEngine();\n      this.themeMql.addEventListener?.('change', this.themeListener);\n    }\n  }\n  disconnectedCallback() {\n    this.ro?.disconnect();\n    this.ro = null;\n    this.engine?.dispose();\n    this.engine = null;\n    if (this.themeMql && this.themeListener) {\n      this.themeMql.removeEventListener?.('change', this.themeListener);\n      this.themeListener = undefined;\n      this.themeMql = undefined;\n    }\n  }\n\n  @Watch('data') @Watch('labels') @Watch('variant') @Watch('color')\n  @Watch('curve') @Watch('showTooltip') @Watch('showMarks')\n  @Watch('referenceAreas') @Watch('cornerRadius') @Watch('min') @Watch('max')\n  @Watch('lineWidth') @Watch('markSize') @Watch('barWidth')\n  onAnyPropChange() { this.applyEngine(); }\n\n  @Method()\n  async resize(): Promise<void> {\n    this.engine?.resize();\n  }\n\n  @Method()\n  async getInstance(): Promise<LineChartEngine | BarChartEngine | null> {\n    return this.engine;\n  }\n\n  private bindChartHost = (el?: HTMLDivElement) => { this.chartHost = el; };\n\n  private initChart() {\n    if (!this.chartHost) return;\n    this.applyEngine();\n    if (this.engine && !this.ro && typeof ResizeObserver !== 'undefined') {\n      this.ro = new ResizeObserver(() => this.engine?.resize());\n      this.ro.observe(this.chartHost);\n    }\n    this.mounted = true;\n    this.mdReady.emit();\n  }\n\n  /** Create/replace the engine so it matches the current variant. */\n  private ensureEngine(): boolean {\n    if (!this.chartHost) return false;\n    const kind: 'line' | 'bar' = this.variant === 'bar' ? 'bar' : 'line';\n    if (this.engine && this.engineKind === kind) return true;\n    try {\n      this.engine?.dispose();\n      this.engine = kind === 'bar' ? new BarChartEngine(this.chartHost) : new LineChartEngine(this.chartHost);\n      this.engineKind = kind;\n    } catch {\n      this.engine = null;\n      this.engineKind = null;\n      return false;\n    }\n    return true;\n  }\n\n  private markIndices(): number[] {\n    const nums: { d: number; i: number }[] = [];\n    this.data.forEach((d, i) => { if (typeof d === 'number') nums.push({ d, i }); });\n    if (!nums.length || this.showMarks === 'none') return [];\n    // `all` marks EVERY point (on a monotonic line the extremes ARE the edges, so\n    // `extremes`+`edges` collapsed to just the two ends — which read as \"nothing\").\n    if (this.showMarks === 'all') return nums.map((n) => n.i);\n    const set = new Set<number>();\n    if (this.showMarks === 'extremes') {\n      let max = nums[0]; let min = nums[0];\n      for (const n of nums) { if (n.d > max.d) max = n; if (n.d < min.d) min = n; }\n      set.add(max.i); set.add(min.i);\n    }\n    if (this.showMarks === 'edges') {\n      set.add(nums[0].i);\n      set.add(nums[nums.length - 1].i);\n    }\n    return [...set];\n  }\n\n  private buildEngineTheme(t: ReturnType<typeof readMdChartTheme>): EngineTheme {\n    return {\n      background: 'transparent',\n      textColor: t.textColor,\n      textColorMuted: t.textColorMuted,\n      axisLineColor: t.axisLineColor,\n      gridLineColor: t.gridColor,\n      surface: t.surface,\n      fontFamily: t.fontFamily,\n      labelSize: t.labelSize,\n      titleSize: t.titleSize,\n    };\n  }\n\n  private buildLineSpec(color: string): LineChartSpec {\n    const fmt = (v: number) => (this.valueFormatter ? this.valueFormatter(v) : v.toLocaleString());\n    const refBands: RefBand[] | undefined = this.referenceAreas?.map((r) => ({\n      from: r.from,\n      to: r.to,\n      color: toRgba(r.color ?? color, r.color ? 0.18 : 0.12),\n    }));\n    return {\n      series: [{\n        label: '',\n        color,\n        data: this.data,\n        curve: this.curve,\n        connectNulls: true,\n        showMarks: false,\n        hidden: false,\n        markIndices: this.markIndices(),\n        lineWidth: this.lineWidth,\n        markSize: this.markSize,\n      }],\n      xValues: this.labels ?? this.data.map((_, i) => i),\n      xScale: 'category',\n      xFormatter: (v) => String(v),\n      xHidden: true,\n      yScale: 'value',\n      yMin: this.min,\n      yMax: this.max,\n      yFormatter: fmt,\n      yHidden: true,\n      stack: 'none',\n      area: this.variant === 'area',\n      fillOpacity: 0.45,\n      legend: 'none',\n      compact: true,\n      refBands,\n      // Same grow-and-fade entrance as the full charts (once, on first mount);\n      // honours no-animation and prefers-reduced-motion.\n      animate: !this.noAnimation,\n    };\n  }\n\n  private buildBarSpec(color: string): BarChartSpec {\n    const fmt = (v: number) => (this.valueFormatter ? this.valueFormatter(v) : v.toLocaleString());\n    return {\n      series: [{ label: '', color, data: this.data, hidden: false }],\n      categories: (this.labels ?? this.data.map((_, i) => i)) as MdChartAxisValue[],\n      categoryFormatter: (v) => String(v),\n      categoryHidden: true,\n      valueScale: 'value',\n      valueMin: this.min,\n      valueMax: this.max,\n      valueFormatter: fmt,\n      valueHidden: true,\n      stack: 'none',\n      horizontal: false,\n      categoryGapRatio: 0.2,\n      barGapRatio: 0,\n      barWidth: this.barWidth,\n      cornerRadius: this.cornerRadius,\n      showLabels: false,\n      legend: 'none',\n      compact: true,\n      // Same grow-and-fade entrance as the full charts (once, on first mount);\n      // honours no-animation and prefers-reduced-motion.\n      animate: !this.noAnimation,\n    };\n  }\n\n  private applyEngine() {\n    if (!this.ensureEngine() || !this.engine) return;\n    const t = readMdChartTheme(this.el);\n    const color = resolveSeriesColor(this.el, this.color, pickPaletteColor(t.palette, 0));\n    const theme = this.buildEngineTheme(t);\n    const onPointClick = (_si: number, di: number) => {\n      const v = this.data[di];\n      this.mdSparkClick.emit({ dataIndex: di, value: typeof v === 'number' ? v : null });\n    };\n    if (this.engine instanceof BarChartEngine) {\n      this.engine.setSpec(this.buildBarSpec(color), theme, { onPointClick });\n    } else {\n      this.engine.setSpec(this.buildLineSpec(color), theme, { onPointClick });\n    }\n    this.engine.setHoverEnabled(this.showTooltip);\n  }\n\n  render() {\n    const finiteValues = this.data.filter((d): d is number => typeof d === 'number');\n    const last = finiteValues.length ? finiteValues[finiteValues.length - 1] : null;\n    const max = finiteValues.length ? Math.max(...finiteValues) : null;\n    const min = finiteValues.length ? Math.min(...finiteValues) : null;\n    const fmt = this.valueFormatter ?? ((v: number | null) => (v == null ? '—' : v.toLocaleString()));\n    // Announce any labelled reference windows — sparklines have no SR data table,\n    // so aria-label is the only surface a screen-reader user has for them.\n    const refLabels = (this.referenceAreas ?? []).map((r) => r.label).filter((l): l is string => !!l);\n    const refNote = refLabels.length ? ` Highlighted: ${refLabels.join(', ')}.` : '';\n    const summary = finiteValues.length\n      ? `Sparkline, latest ${fmt(last)}, range ${fmt(min)} to ${fmt(max)}.${refNote}`\n      : `Sparkline, no data.${refNote}`;\n\n    return (\n      <Host\n        class={{\n          'md-sparkline': true,\n          'md-sparkline--mounted': this.mounted,\n          [`md-sparkline--${this.variant}`]: true,\n        }}\n        role=\"img\"\n        aria-label={summary}\n        style={this.heightProp ? { blockSize: this.heightProp } : undefined}\n      >\n        <div class=\"md-sparkline__canvas\" part=\"canvas\" ref={el => this.bindChartHost(el as HTMLDivElement)}></div>\n      </Host>\n    );\n  }\n}\n\nfunction toRgba(color: string, alpha: number): string {\n  if (color.startsWith('#')) {\n    let hex = color.slice(1);\n    if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');\n    const r = parseInt(hex.slice(0, 2), 16);\n    const g = parseInt(hex.slice(2, 4), 16);\n    const b = parseInt(hex.slice(4, 6), 16);\n    return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n  }\n  if (color.startsWith('rgb(')) return color.replace(/^rgb\\(/, 'rgba(').replace(/\\)$/, `, ${alpha})`);\n  return color;\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components-csr/md-split-button.js

@@ -0,0 +1,2 @@
+import{p as t,H as i,c as e,h as a,d as n,t as s}from"./p-bSpXNc5J.js";import{t as l}from"./p-DYBUr7K_.js";import{d as o}from"./p-Hm3X1iai.js";const r=()=>`:host{--_container-color:var(--md-split-button-container-color, var(--md-sys-color-primary));--_label-color:var(--md-split-button-label-color, var(--md-sys-color-on-primary));--_icon-color:var(--md-split-button-icon-color, var(--_label-color));--_outline-color:var(--md-split-button-outline-color, var(--md-sys-color-outline));--_state-layer-color:var(--md-sys-color-on-primary);--_container-elevation:var(--md-sys-elevation-0, none);--_outer-shape:var(--md-split-button-container-shape, calc(var(--_height) / 2));--_inner-shape:4px;--_inner-shape-hover:8px;--_between-space:2px;--_height:40px;--_pad-trim:calc(var(--md-sys-density-scale, 0) * 2px);--_icon-size:var(--md-split-button-icon-size, 18px);--_trailing-icon-size:22px;--_leading-padding-left:16px;--_leading-padding-right:14px;--_trailing-padding-left:12px;--_trailing-padding-right:14px;--_trailing-padding-center:13px;display:inline-flex;align-items:stretch;gap:var(--_between-space);vertical-align:middle;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:host(.md-split-button--xs){--_height:32px;--_icon-size:var(--md-split-button-icon-size, 16px);--_trailing-icon-size:22px;--_inner-shape:4px;--_inner-shape-hover:8px;--_leading-padding-left:12px;--_leading-padding-right:10px;--_trailing-padding-left:12px;--_trailing-padding-right:14px;--_trailing-padding-center:13px}:host(.md-split-button--sm){--_height:40px;--_icon-size:var(--md-split-button-icon-size, 18px);--_trailing-icon-size:22px;--_inner-shape:4px;--_inner-shape-hover:8px;--_leading-padding-left:16px;--_leading-padding-right:14px;--_trailing-padding-left:12px;--_trailing-padding-right:14px;--_trailing-padding-center:13px}:host(.md-split-button--md){--_height:56px;--_icon-size:var(--md-split-button-icon-size, 24px);--_trailing-icon-size:26px;--_inner-shape:8px;--_inner-shape-hover:12px;--_leading-padding-left:24px;--_leading-padding-right:20px;--_trailing-padding-left:13px;--_trailing-padding-right:17px;--_trailing-padding-center:15px}:host(.md-split-button--lg){--_height:96px;--_icon-size:var(--md-split-button-icon-size, 36px);--_trailing-icon-size:38px;--_inner-shape:12px;--_inner-shape-hover:20px;--_leading-padding-left:36px;--_leading-padding-right:28px;--_trailing-padding-left:26px;--_trailing-padding-right:32px;--_trailing-padding-center:29px}:host(.md-split-button--xl){--_height:136px;--_icon-size:var(--md-split-button-icon-size, 48px);--_trailing-icon-size:50px;--_inner-shape:16px;--_inner-shape-hover:28px;--_leading-padding-left:48px;--_leading-padding-right:36px;--_trailing-padding-left:37px;--_trailing-padding-right:49px;--_trailing-padding-center:43px}.md-split-button__leading,.md-split-button__trailing{position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;outline:none;cursor:pointer;user-select:none;box-sizing:border-box;height:max(24px, calc(var(--_height) + var(--md-sys-density-scale, 0) * 4px));background-color:var(--_container-color);color:var(--_label-color);box-shadow:var(--_container-elevation);overflow:hidden;-webkit-tap-highlight-color:transparent;transition:border-radius 200ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));font-family:var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);font-size:max(12px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-label-large-font-weight, 500);letter-spacing:var(--md-sys-typescale-label-large-letter-spacing, 0.1px);line-height:max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px))}:host(.md-split-button--xs) .md-split-button__leading{font-size:max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-label-medium-font-weight, 500)}:host(.md-split-button--md) .md-split-button__leading{font-size:max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-title-medium-font-weight, 500)}:host(.md-split-button--lg) .md-split-button__leading{font-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));font-weight:var(--md-sys-typescale-headline-small-font-weight, 400);line-height:max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px))}:host(.md-split-button--xl) .md-split-button__leading{font-size:max(22px, calc(28px + var(--md-sys-density-scale, 0) * 1px));font-weight:var(--md-sys-typescale-headline-medium-font-weight, 400);line-height:max(28px, calc(36px + var(--md-sys-density-scale, 0) * 2px))}.md-split-button__leading{border-start-start-radius:var(--_outer-shape);border-end-start-radius:var(--_outer-shape);border-start-end-radius:var(--_inner-shape);border-end-end-radius:var(--_inner-shape);padding-block:0;padding-inline-start:max(4px, calc(var(--_leading-padding-left) + var(--_pad-trim)));padding-inline-end:max(4px, calc(var(--_leading-padding-right) + var(--_pad-trim)));gap:max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px))}:host(.md-split-button--with-icon) .md-split-button__leading{padding-inline-start:max(4px, calc(var(--_leading-padding-left) - 4px + var(--_pad-trim)))}.md-split-button__leading:hover,.md-split-button__leading:focus-visible,.md-split-button__leading:active{border-start-end-radius:var(--_inner-shape-hover);border-end-end-radius:calc(var(--_inner-shape) + var(--md-sys-shape-morph-enabled, 1) * (var(--_inner-shape-hover) - var(--_inner-shape)))}.md-split-button__trailing{border-start-start-radius:var(--_inner-shape);border-end-start-radius:var(--_inner-shape);border-start-end-radius:var(--_outer-shape);border-end-end-radius:var(--_outer-shape);padding-block:0;padding-inline-start:max(4px, calc(var(--_trailing-padding-left) + var(--_pad-trim)));padding-inline-end:max(4px, calc(var(--_trailing-padding-right) + var(--_pad-trim)))}.md-split-button__trailing:hover,.md-split-button__trailing:focus-visible,.md-split-button__trailing:active{border-start-start-radius:calc(var(--_inner-shape) + var(--md-sys-shape-morph-enabled, 1) * (var(--_inner-shape-hover) - var(--_inner-shape)));border-end-start-radius:var(--_inner-shape-hover)}.md-split-button__trailing.md-split-button__trailing--checked{border-radius:var(--_outer-shape);padding-block:0;padding-inline:max(4px, calc(var(--_trailing-padding-center) + var(--_pad-trim)))}.md-split-button__leading-state-layer,.md-split-button__trailing-state-layer{position:absolute;inset:0;border-radius:inherit;background-color:var(--_state-layer-color);opacity:0;transition:opacity 100ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));pointer-events:none}.md-split-button__leading:hover .md-split-button__leading-state-layer{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}.md-split-button__leading:focus-visible .md-split-button__leading-state-layer{opacity:var(--md-sys-state-focus-state-layer-opacity, 0.10)}.md-split-button__leading:active .md-split-button__leading-state-layer{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.10)}.md-split-button__trailing:hover .md-split-button__trailing-state-layer{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}.md-split-button__trailing:focus-visible .md-split-button__trailing-state-layer{opacity:var(--md-sys-state-focus-state-layer-opacity, 0.10)}.md-split-button__trailing:active .md-split-button__trailing-state-layer{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.10)}.md-split-button__leading:focus-visible{outline:3px solid var(--md-sys-color-secondary);outline-offset:2px;z-index:1}.md-split-button__trailing:focus-visible{outline:3px solid var(--md-sys-color-secondary);outline-offset:2px;z-index:1}.md-split-button__icon{font-size:var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--_icon-color)}.md-split-button__trailing-icon{font-size:var(--_trailing-icon-size);width:var(--_trailing-icon-size);height:var(--_trailing-icon-size);line-height:var(--_trailing-icon-size);text-align:center;flex-shrink:0;transition:transform 200ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-split-button--trailing-checked) .md-split-button__trailing-icon{transform:rotate(180deg)}.material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;overflow-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}.md-split-button__label{display:flex;align-items:center;white-space:nowrap}:host(.md-split-button--filled){--_container-color:var(--md-split-button-container-color, var(--md-sys-color-primary));--_label-color:var(--md-split-button-label-color, var(--md-sys-color-on-primary));--_state-layer-color:var(--md-sys-color-on-primary);--_container-elevation:var(--md-sys-elevation-0, none)}:host(.md-split-button--elevated){--_container-color:var(--md-split-button-container-color, var(--md-sys-color-surface-container-low));--_label-color:var(--md-split-button-label-color, var(--md-sys-color-primary));--_state-layer-color:var(--md-sys-color-primary);--_container-elevation:var(--md-sys-elevation-1)}:host(.md-split-button--elevated) .md-split-button__leading{clip-path:inset(-6px -1px -6px -6px)}:host(.md-split-button--elevated) .md-split-button__trailing{clip-path:inset(-6px -6px -6px -1px)}:host([dir="rtl"].md-split-button--elevated) .md-split-button__leading,:host-context([dir="rtl"]):host(.md-split-button--elevated) .md-split-button__leading{clip-path:inset(-6px -6px -6px -1px)}:host([dir="rtl"].md-split-button--elevated) .md-split-button__trailing,:host-context([dir="rtl"]):host(.md-split-button--elevated) .md-split-button__trailing{clip-path:inset(-6px -1px -6px -6px)}:host(.md-split-button--elevated) .md-split-button__leading:hover,:host(.md-split-button--elevated) .md-split-button__trailing:hover{box-shadow:var(--md-sys-elevation-2)}:host(.md-split-button--elevated) .md-split-button__leading:active,:host(.md-split-button--elevated) .md-split-button__trailing:active,:host(.md-split-button--elevated) .md-split-button__leading:focus-visible,:host(.md-split-button--elevated) .md-split-button__trailing:focus-visible{box-shadow:var(--md-sys-elevation-1)}:host(.md-split-button--elevated) .md-split-button__leading:focus-visible,:host(.md-split-button--elevated) .md-split-button__trailing:focus-visible{clip-path:inset(-6px);z-index:1}:host(.md-split-button--tonal){--_container-color:var(--md-split-button-container-color, var(--md-sys-color-secondary-container));--_label-color:var(--md-split-button-label-color, var(--md-sys-color-on-secondary-container));--_state-layer-color:var(--md-sys-color-on-secondary-container);--_container-elevation:var(--md-sys-elevation-0, none)}:host(.md-split-button--tonal) .md-split-button__leading:hover,:host(.md-split-button--tonal) .md-split-button__trailing:hover{box-shadow:var(--md-sys-elevation-1)}:host(.md-split-button--outlined){--_container-color:transparent;--_label-color:var(--md-split-button-label-color, var(--md-sys-color-primary));--_state-layer-color:var(--md-sys-color-primary);--_container-elevation:var(--md-sys-elevation-0, none)}:host(.md-split-button--outlined) .md-split-button__leading,:host(.md-split-button--outlined) .md-split-button__trailing{border:1px solid var(--_outline-color)}:host(.md-split-button--outlined) .md-split-button__leading:focus-visible,:host(.md-split-button--outlined) .md-split-button__trailing:focus-visible{border-color:var(--md-split-button-outline-color, var(--md-sys-color-primary))}:host(.md-split-button--full-width){display:flex;inline-size:100%}:host(.md-split-button--full-width) .md-split-button__leading{flex:1 1 auto;min-inline-size:0}:host(.md-split-button--full-width) .md-split-button__trailing{flex:0 0 auto}:host(.md-split-button--full-width) .md-split-button__label{display:block;min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.md-split-button--disabled) .md-split-button__leading,:host(.md-split-button--disabled) .md-split-button__trailing{cursor:default;pointer-events:none;box-shadow:var(--md-sys-elevation-0, none) !important;background-color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent)}:host(.md-split-button--disabled) .md-split-button__leading-state-layer,:host(.md-split-button--disabled) .md-split-button__trailing-state-layer{display:none}:host(.md-split-button--disabled.md-split-button--outlined) .md-split-button__leading,:host(.md-split-button--disabled.md-split-button--outlined) .md-split-button__trailing{background-color:transparent;border-color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent)}:host(.md-split-button--disabled.md-split-button--elevated) .md-split-button__leading,:host(.md-split-button--disabled.md-split-button--elevated) .md-split-button__trailing{clip-path:none}:host([soft-disabled]) .md-split-button__leading,:host([soft-disabled]) .md-split-button__trailing{cursor:default;pointer-events:auto}:host([soft-disabled]) .md-split-button__leading-state-layer,:host([soft-disabled]) .md-split-button__trailing-state-layer{display:none}@media (prefers-reduced-motion: reduce){.md-split-button__leading,.md-split-button__trailing{transition:none}.md-split-button__leading-state-layer,.md-split-button__trailing-state-layer{transition:none}.md-split-button__trailing-icon{transition:none}}@media (forced-colors: active){:host{forced-color-adjust:none}.md-split-button__leading,.md-split-button__trailing{background-color:ButtonFace;color:ButtonText;border:1px solid ButtonText}.md-split-button__leading:focus-visible,.md-split-button__trailing:focus-visible{outline-color:Highlight}:host(.md-split-button--disabled) .md-split-button__leading,:host(.md-split-button--disabled) .md-split-button__trailing{color:GrayText;border-color:GrayText}.md-split-button__leading-state-layer,.md-split-button__trailing-state-layer{display:none}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const d=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdLeadingClick=e(this,"mdLeadingClick",7);this.mdTrailingClick=e(this,"mdTrailingClick",7);this.variant="filled";this.size="sm";this.disabled=false;this.softDisabled=false;this.icon="";this.label="";this.trailingIcon="keyboard_arrow_down";this.trailingChecked=false;this.menuLabel="Toggle menu";this.haspopup="menu";this.controls="";this.fullWidth=false;this.ripple=true;this.density=0;this.handleLeadingClick=t=>{t.stopPropagation();if(this.isDisabled){t.preventDefault();return}this.mdLeadingClick.emit()};this.handleLeadingKeyDown=t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();if(!this.isDisabled){l(this.el,".md-split-button__leading md-ripple");this.mdLeadingClick.emit()}}};this.handleTrailingClick=t=>{t.stopPropagation();if(this.isDisabled){t.preventDefault();return}this.trailingChecked=!this.trailingChecked;this.mdTrailingClick.emit({checked:this.trailingChecked})};this.handleTrailingKeyDown=t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();if(!this.isDisabled){l(this.el,".md-split-button__trailing md-ripple");this.trailingChecked=!this.trailingChecked;this.mdTrailingClick.emit({checked:this.trailingChecked})}}}}get isDisabled(){return this.disabled||this.softDisabled}componentDidLoad(){if(typeof window!=="undefined"&&window.__STENCIL_DEV_MODE__!==false){if(!this.label&&!this.el.hasAttribute("aria-label")){console.warn(`[md-split-button] WCAG 1.1.1: Leading button is missing an accessible name. `+`Provide a label prop or aria-label attribute.`,this.el)}}}render(){const t=!!this.icon;return a(n,{key:"ce8eea5e459e37eaa58f51ca406558e0103cfe6a",class:{"md-split-button":true,[`md-split-button--${this.variant}`]:true,[`md-split-button--${this.size}`]:true,"md-split-button--disabled":this.isDisabled,"md-split-button--trailing-checked":this.trailingChecked,"md-split-button--with-icon":t,"md-split-button--full-width":this.fullWidth}},a("button",{key:"a08ffe70d4483128705d4435949f5cf0497ce102",class:"md-split-button__leading",part:"leading",disabled:this.disabled,"aria-disabled":this.isDisabled?"true":undefined,"aria-label":!this.label?this.el.getAttribute("aria-label")??undefined:undefined,tabindex:this.disabled?-1:0,onClick:this.handleLeadingClick,onKeyDown:this.handleLeadingKeyDown},this.ripple&&a("md-ripple",{key:"630c7edee4601f139144b070ce8d73c3291e9b95",disabled:this.isDisabled}),a("span",{key:"99aa532c836006eead619176a5d5ba18dc079cd5",class:"md-split-button__leading-state-layer",part:"leading-state-layer","aria-hidden":"true"}),t&&a("span",{key:"2a0a9be157bafcaf8939ed8ced034b764da7a2a7",class:"md-split-button__icon material-symbols-outlined",part:"icon","aria-hidden":"true"},this.icon),this.label&&a("span",{key:"eae0845a2bd97cee6550cc87238cef81cd3c5cb4",class:"md-split-button__label",part:"label"},this.label),a("slot",{key:"8f6ed838f085f4d94729f6691b7734d94fc2b563"})),a("button",{key:"a54cc0117bfaf8fab20715c8f0f0379731a221f5",class:{"md-split-button__trailing":true,"md-split-button__trailing--checked":this.trailingChecked},part:"trailing",disabled:this.disabled,"aria-disabled":this.isDisabled?"true":undefined,"aria-haspopup":this.haspopup==="false"?undefined:this.haspopup,"aria-expanded":String(this.trailingChecked),"aria-controls":this.controls||undefined,"aria-label":this.menuLabel,tabindex:this.disabled?-1:0,onClick:this.handleTrailingClick,onKeyDown:this.handleTrailingKeyDown},this.ripple&&a("md-ripple",{key:"b3451fd48b06a9378d3103c41336d429882dece2",disabled:this.isDisabled}),a("span",{key:"ff1348daec651062b7d2ca018911fff9b109e3c2",class:"md-split-button__trailing-state-layer",part:"trailing-state-layer","aria-hidden":"true"}),a("span",{key:"0152a67f2b0a1a22724e510113ded9f977d786d2",class:"md-split-button__trailing-icon material-symbols-outlined",part:"trailing-icon","aria-hidden":"true"},this.trailingIcon)))}get el(){return this}static get style(){return r()}},[257,"md-split-button",{variant:[1],size:[1],disabled:[516],softDisabled:[516,"soft-disabled"],icon:[1],label:[1],trailingIcon:[1,"trailing-icon"],trailingChecked:[1540,"trailing-checked"],menuLabel:[1,"menu-label"],haspopup:[1],controls:[1],fullWidth:[516,"full-width"],ripple:[4],density:[514]}]);function p(){if(typeof customElements==="undefined"){return}const t=["md-split-button","md-ripple"];t.forEach((t=>{switch(t){case"md-split-button":if(!customElements.get(s(t))){customElements.define(s(t),d)}break;case"md-ripple":if(!customElements.get(s(t))){o()}break}}))}p();const c=d;const m=p;export{c as MdSplitButton,m as defineCustomElement};
+//# sourceMappingURL=md-split-button.js.map

package/dist/components-csr/md-split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdSplitButtonCss","MdSplitButton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","disabled","softDisabled","icon","label","trailingIcon","trailingChecked","menuLabel","haspopup","controls","fullWidth","ripple","density","handleLeadingClick","e","stopPropagation","isDisabled","preventDefault","mdLeadingClick","emit","handleLeadingKeyDown","key","triggerRipple","el","handleTrailingClick","mdTrailingClick","checked","handleTrailingKeyDown","componentDidLoad","window","__STENCIL_DEV_MODE__","hasAttribute","console","warn","render","hasIcon","h","Host","class","part","undefined","getAttribute","tabindex","onClick","onKeyDown","String"],"sources":["src/components/md-split-button/md-split-button.css?tag=md-split-button&encapsulation=shadow","src/components/md-split-button/md-split-button.tsx"],"sourcesContent":["/* ==========================================================\n   md-split-button — Material Design 3 Expressive Split Button\n   Spec: https://m3.material.io/components/split-button/specs\n\n   PUBLIC CSS CUSTOM PROPERTIES:\n     --md-split-button-container-color          Container background\n     --md-split-button-label-color              Label + icon color\n     --md-split-button-icon-color               Icon override\n     --md-split-button-outline-color            Outlined border\n     --md-split-button-container-shape          Outer corner override\n     --md-split-button-icon-size                Icon dimensions\n\n   CSS PARTS:\n     leading                Leading button\n     trailing               Trailing button\n     leading-state-layer    Leading state overlay\n     trailing-state-layer   Trailing state overlay\n     icon                   Leading icon\n     label                  Label text\n     trailing-icon          Trailing menu icon\n\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST — layout container\n   ========================================================== */\n\n:host {\n  --_container-color: var(--md-split-button-container-color, var(--md-sys-color-primary));\n  --_label-color: var(--md-split-button-label-color, var(--md-sys-color-on-primary));\n  --_icon-color: var(--md-split-button-icon-color, var(--_label-color));\n  --_outline-color: var(--md-split-button-outline-color, var(--md-sys-color-outline));\n  --_state-layer-color: var(--md-sys-color-on-primary);\n  --_container-elevation: var(--md-sys-elevation-0, none);\n  --_outer-shape: var(--md-split-button-container-shape, calc(var(--_height) / 2));\n  --_inner-shape: 4px;\n  --_inner-shape-hover: 8px;\n  --_between-space: 2px;\n  --_height: 40px;\n  /* Global-density inline-padding trim: 2px/rung each side (0 at density 0).\n     Each padding consumption below is `max(4px, calc(<pad> + this))`. */\n  --_pad-trim: calc(var(--md-sys-density-scale, 0) * 2px);\n  --_icon-size: var(--md-split-button-icon-size, 18px);\n  --_trailing-icon-size: 22px;\n  --_leading-padding-left: 16px;\n  --_leading-padding-right: 14px;\n  --_trailing-padding-left: 12px;\n  --_trailing-padding-right: 14px;\n  --_trailing-padding-center: 13px;\n\n  display: inline-flex;\n  align-items: stretch;\n  gap: var(--_between-space);\n  vertical-align: middle;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* ==========================================================\n   2. SIZES\n   ========================================================== */\n\n:host(.md-split-button--xs) {\n  --_height: 32px;\n  --_icon-size: var(--md-split-button-icon-size, 16px);\n  --_trailing-icon-size: 22px;\n  --_inner-shape: 4px;\n  --_inner-shape-hover: 8px;\n  --_leading-padding-left: 12px;\n  --_leading-padding-right: 10px;\n  --_trailing-padding-left: 12px;\n  --_trailing-padding-right: 14px;\n  --_trailing-padding-center: 13px;\n}\n\n:host(.md-split-button--sm) {\n  --_height: 40px;\n  --_icon-size: var(--md-split-button-icon-size, 18px);\n  --_trailing-icon-size: 22px;\n  --_inner-shape: 4px;\n  --_inner-shape-hover: 8px;\n  --_leading-padding-left: 16px;\n  --_leading-padding-right: 14px;\n  --_trailing-padding-left: 12px;\n  --_trailing-padding-right: 14px;\n  --_trailing-padding-center: 13px;\n}\n\n:host(.md-split-button--md) {\n  --_height: 56px;\n  --_icon-size: var(--md-split-button-icon-size, 24px);\n  --_trailing-icon-size: 26px;\n  --_inner-shape: 8px;\n  --_inner-shape-hover: 12px;\n  --_leading-padding-left: 24px;\n  --_leading-padding-right: 20px;\n  --_trailing-padding-left: 13px;\n  --_trailing-padding-right: 17px;\n  --_trailing-padding-center: 15px;\n}\n\n:host(.md-split-button--lg) {\n  --_height: 96px;\n  --_icon-size: var(--md-split-button-icon-size, 36px);\n  --_trailing-icon-size: 38px;\n  --_inner-shape: 12px;\n  --_inner-shape-hover: 20px;\n  --_leading-padding-left: 36px;\n  --_leading-padding-right: 28px;\n  --_trailing-padding-left: 26px;\n  --_trailing-padding-right: 32px;\n  --_trailing-padding-center: 29px;\n}\n\n:host(.md-split-button--xl) {\n  --_height: 136px;\n  --_icon-size: var(--md-split-button-icon-size, 48px);\n  --_trailing-icon-size: 50px;\n  --_inner-shape: 16px;\n  --_inner-shape-hover: 28px;\n  --_leading-padding-left: 48px;\n  --_leading-padding-right: 36px;\n  --_trailing-padding-left: 37px;\n  --_trailing-padding-right: 49px;\n  --_trailing-padding-center: 43px;\n}\n\n/* ==========================================================\n   3. SHARED BUTTON STYLES (leading + trailing)\n   ========================================================== */\n\n.md-split-button__leading,\n.md-split-button__trailing {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box;\n  /* Global density: each `data-density` rung (0…-4) trims 4px off the height,\n     floored at 24px. Unchanged at density 0. */\n  height: max(24px, calc(var(--_height) + var(--md-sys-density-scale, 0) * 4px));\n  background-color: var(--_container-color);\n  color: var(--_label-color);\n  box-shadow: var(--_container-elevation);\n  overflow: hidden;\n  -webkit-tap-highlight-color: transparent;\n  transition: border-radius 200ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n\n  font-family: var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);\n  font-size: max(12px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-label-large-font-weight, 500);\n  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing, 0.1px);\n  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n}\n\n/* Size-specific typography */\n:host(.md-split-button--xs) .md-split-button__leading {\n  font-size: max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-label-medium-font-weight, 500);\n}\n\n:host(.md-split-button--md) .md-split-button__leading {\n  font-size: max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-title-medium-font-weight, 500);\n}\n\n:host(.md-split-button--lg) .md-split-button__leading {\n  font-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n  font-weight: var(--md-sys-typescale-headline-small-font-weight, 400);\n  line-height: max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px));\n}\n\n:host(.md-split-button--xl) .md-split-button__leading {\n  font-size: max(22px, calc(28px + var(--md-sys-density-scale, 0) * 1px));\n  font-weight: var(--md-sys-typescale-headline-medium-font-weight, 400);\n  line-height: max(28px, calc(36px + var(--md-sys-density-scale, 0) * 2px));\n}\n\n/* ==========================================================\n   4. LEADING BUTTON — shape & padding\n\n   Uses logical corner-radius + logical padding so the outer pill\n   always lands on the inline-start (free) edge and the inner radius\n   on the inline-end (split) edge in both `dir=\"ltr\"` and `dir=\"rtl\"`.\n   ========================================================== */\n\n.md-split-button__leading {\n  border-start-start-radius: var(--_outer-shape);\n  border-end-start-radius: var(--_outer-shape);\n  border-start-end-radius: var(--_inner-shape);\n  border-end-end-radius: var(--_inner-shape);\n  padding-block: 0;\n  padding-inline-start: max(4px, calc(var(--_leading-padding-left) + var(--_pad-trim)));\n  padding-inline-end: max(4px, calc(var(--_leading-padding-right) + var(--_pad-trim)));\n  /* Icon<->label gap. Matches md-button's `sm`/`md` tier taper — the segment\n     height already shrinks 40 -> 24 across the range, so a frozen 8px gap left\n     compact split buttons looking loosely spaced. */\n  gap: max(4px, calc(8px + var(--md-sys-density-scale, 0) * 1px));\n}\n\n:host(.md-split-button--with-icon) .md-split-button__leading {\n  padding-inline-start: max(4px, calc(var(--_leading-padding-left) - 4px + var(--_pad-trim)));\n}\n\n.md-split-button__leading:hover,\n.md-split-button__leading:focus-visible,\n.md-split-button__leading:active {\n  border-start-end-radius: var(--_inner-shape-hover);\n  border-end-end-radius: calc(var(--_inner-shape) + var(--md-sys-shape-morph-enabled, 1) * (var(--_inner-shape-hover) - var(--_inner-shape)));\n}\n\n/* ==========================================================\n   5. TRAILING BUTTON — shape & padding\n   ========================================================== */\n\n.md-split-button__trailing {\n  border-start-start-radius: var(--_inner-shape);\n  border-end-start-radius: var(--_inner-shape);\n  border-start-end-radius: var(--_outer-shape);\n  border-end-end-radius: var(--_outer-shape);\n  padding-block: 0;\n  padding-inline-start: max(4px, calc(var(--_trailing-padding-left) + var(--_pad-trim)));\n  padding-inline-end: max(4px, calc(var(--_trailing-padding-right) + var(--_pad-trim)));\n}\n\n.md-split-button__trailing:hover,\n.md-split-button__trailing:focus-visible,\n.md-split-button__trailing:active {\n  border-start-start-radius: calc(var(--_inner-shape) + var(--md-sys-shape-morph-enabled, 1) * (var(--_inner-shape-hover) - var(--_inner-shape)));\n  border-end-start-radius: var(--_inner-shape-hover);\n}\n\n/* Trailing checked: inner corners become pill, padding becomes symmetric (center-aligned) */\n.md-split-button__trailing.md-split-button__trailing--checked {\n  border-radius: var(--_outer-shape);\n  padding-block: 0;\n  padding-inline: max(4px, calc(var(--_trailing-padding-center) + var(--_pad-trim)));\n}\n\n/* ==========================================================\n   6. STATE LAYERS\n   ========================================================== */\n\n.md-split-button__leading-state-layer,\n.md-split-button__trailing-state-layer {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--_state-layer-color);\n  opacity: 0;\n  transition: opacity 100ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  pointer-events: none;\n}\n\n.md-split-button__leading:hover .md-split-button__leading-state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n.md-split-button__leading:focus-visible .md-split-button__leading-state-layer {\n  opacity: var(--md-sys-state-focus-state-layer-opacity, 0.10);\n}\n.md-split-button__leading:active .md-split-button__leading-state-layer {\n  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.10);\n}\n\n.md-split-button__trailing:hover .md-split-button__trailing-state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n.md-split-button__trailing:focus-visible .md-split-button__trailing-state-layer {\n  opacity: var(--md-sys-state-focus-state-layer-opacity, 0.10);\n}\n.md-split-button__trailing:active .md-split-button__trailing-state-layer {\n  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.10);\n}\n\n/* ==========================================================\n   7. FOCUS RING\n   ========================================================== */\n\n.md-split-button__leading:focus-visible {\n  outline: 3px solid var(--md-sys-color-secondary);\n  outline-offset: 2px;\n  z-index: 1;\n}\n\n.md-split-button__trailing:focus-visible {\n  outline: 3px solid var(--md-sys-color-secondary);\n  outline-offset: 2px;\n  z-index: 1;\n}\n\n/* ==========================================================\n   8. ICONS\n   ========================================================== */\n\n.md-split-button__icon {\n  font-size: var(--_icon-size);\n  width: var(--_icon-size);\n  height: var(--_icon-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: var(--_icon-color);\n}\n\n.md-split-button__trailing-icon {\n  font-size: var(--_trailing-icon-size);\n  width: var(--_trailing-icon-size);\n  height: var(--_trailing-icon-size);\n  line-height: var(--_trailing-icon-size);\n  text-align: center;\n  flex-shrink: 0;\n  transition: transform 200ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n:host(.md-split-button--trailing-checked) .md-split-button__trailing-icon {\n  transform: rotate(180deg);\n}\n\n.material-symbols-outlined {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  overflow-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n}\n\n/* ==========================================================\n   9. LABEL\n   ========================================================== */\n\n.md-split-button__label {\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n}\n\n/* ==========================================================\n   10. COLOR VARIANTS\n   ========================================================== */\n\n/* Filled (default) */\n:host(.md-split-button--filled) {\n  --_container-color: var(--md-split-button-container-color, var(--md-sys-color-primary));\n  --_label-color: var(--md-split-button-label-color, var(--md-sys-color-on-primary));\n  --_state-layer-color: var(--md-sys-color-on-primary);\n  --_container-elevation: var(--md-sys-elevation-0, none);\n}\n\n/* Elevated — each button owns its shadow; clip prevents bleed into the gap */\n:host(.md-split-button--elevated) {\n  --_container-color: var(--md-split-button-container-color, var(--md-sys-color-surface-container-low));\n  --_label-color: var(--md-split-button-label-color, var(--md-sys-color-primary));\n  --_state-layer-color: var(--md-sys-color-primary);\n  --_container-elevation: var(--md-sys-elevation-1);\n}\n\n/* Elevated variant — let the elevation shadow bleed out on the free\n   (outer) edge while clipping it on the split (inner) edge so the two\n   segments don't shadow each other through the 2px gap.\n   `clip-path: inset(top right bottom left)` is physical, so we provide\n   an RTL override that swaps the right/left insets. */\n:host(.md-split-button--elevated) .md-split-button__leading {\n  clip-path: inset(-6px -1px -6px -6px);\n}\n\n:host(.md-split-button--elevated) .md-split-button__trailing {\n  clip-path: inset(-6px -6px -6px -1px);\n}\n\n:host([dir=\"rtl\"].md-split-button--elevated) .md-split-button__leading,\n:host-context([dir=\"rtl\"]):host(.md-split-button--elevated) .md-split-button__leading {\n  clip-path: inset(-6px -6px -6px -1px);\n}\n\n:host([dir=\"rtl\"].md-split-button--elevated) .md-split-button__trailing,\n:host-context([dir=\"rtl\"]):host(.md-split-button--elevated) .md-split-button__trailing {\n  clip-path: inset(-6px -1px -6px -6px);\n}\n\n:host(.md-split-button--elevated) .md-split-button__leading:hover,\n:host(.md-split-button--elevated) .md-split-button__trailing:hover {\n  box-shadow: var(--md-sys-elevation-2);\n}\n\n:host(.md-split-button--elevated) .md-split-button__leading:active,\n:host(.md-split-button--elevated) .md-split-button__trailing:active,\n:host(.md-split-button--elevated) .md-split-button__leading:focus-visible,\n:host(.md-split-button--elevated) .md-split-button__trailing:focus-visible {\n  box-shadow: var(--md-sys-elevation-1);\n}\n\n:host(.md-split-button--elevated) .md-split-button__leading:focus-visible,\n:host(.md-split-button--elevated) .md-split-button__trailing:focus-visible {\n  clip-path: inset(-6px);\n  z-index: 1;\n}\n\n/* Tonal */\n:host(.md-split-button--tonal) {\n  --_container-color: var(--md-split-button-container-color, var(--md-sys-color-secondary-container));\n  --_label-color: var(--md-split-button-label-color, var(--md-sys-color-on-secondary-container));\n  --_state-layer-color: var(--md-sys-color-on-secondary-container);\n  --_container-elevation: var(--md-sys-elevation-0, none);\n}\n\n:host(.md-split-button--tonal) .md-split-button__leading:hover,\n:host(.md-split-button--tonal) .md-split-button__trailing:hover {\n  box-shadow: var(--md-sys-elevation-1);\n}\n\n/* Outlined */\n:host(.md-split-button--outlined) {\n  --_container-color: transparent;\n  --_label-color: var(--md-split-button-label-color, var(--md-sys-color-primary));\n  --_state-layer-color: var(--md-sys-color-primary);\n  --_container-elevation: var(--md-sys-elevation-0, none);\n}\n\n:host(.md-split-button--outlined) .md-split-button__leading,\n:host(.md-split-button--outlined) .md-split-button__trailing {\n  border: 1px solid var(--_outline-color);\n}\n\n:host(.md-split-button--outlined) .md-split-button__leading:focus-visible,\n:host(.md-split-button--outlined) .md-split-button__trailing:focus-visible {\n  border-color: var(--md-split-button-outline-color, var(--md-sys-color-primary));\n}\n\n/* ==========================================================\n   10b. FULL WIDTH — stretch to fill the container\n\n   The leading segment grows to absorb the free space and its label truncates\n   with an ellipsis when the container is too narrow; the trailing toggle keeps\n   its intrinsic (icon) width. `min-inline-size: 0` is required so the flex item\n   may shrink below its content size — without it the label would force overflow\n   instead of truncating. */\n:host(.md-split-button--full-width) {\n  display: flex;\n  inline-size: 100%;\n}\n\n:host(.md-split-button--full-width) .md-split-button__leading {\n  flex: 1 1 auto;\n  min-inline-size: 0;\n}\n\n:host(.md-split-button--full-width) .md-split-button__trailing {\n  flex: 0 0 auto;\n}\n\n:host(.md-split-button--full-width) .md-split-button__label {\n  display: block;\n  min-inline-size: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/* ==========================================================\n   11. DISABLED\n   ========================================================== */\n\n:host(.md-split-button--disabled) .md-split-button__leading,\n:host(.md-split-button--disabled) .md-split-button__trailing {\n  cursor: default;\n  pointer-events: none;\n  box-shadow: var(--md-sys-elevation-0, none) !important;\n  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n  color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n}\n\n:host(.md-split-button--disabled) .md-split-button__leading-state-layer,\n:host(.md-split-button--disabled) .md-split-button__trailing-state-layer {\n  display: none;\n}\n\n:host(.md-split-button--disabled.md-split-button--outlined) .md-split-button__leading,\n:host(.md-split-button--disabled.md-split-button--outlined) .md-split-button__trailing {\n  background-color: transparent;\n  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n}\n\n:host(.md-split-button--disabled.md-split-button--elevated) .md-split-button__leading,\n:host(.md-split-button--disabled.md-split-button--elevated) .md-split-button__trailing {\n  clip-path: none;\n}\n\n/* Soft-disabled: looks disabled but stays focusable */\n:host([soft-disabled]) .md-split-button__leading,\n:host([soft-disabled]) .md-split-button__trailing {\n  cursor: default;\n  pointer-events: auto;\n}\n\n:host([soft-disabled]) .md-split-button__leading-state-layer,\n:host([soft-disabled]) .md-split-button__trailing-state-layer {\n  display: none;\n}\n\n/* ==========================================================\n   12. REDUCED MOTION\n   ========================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  .md-split-button__leading,\n  .md-split-button__trailing {\n    transition: none;\n  }\n\n  .md-split-button__leading-state-layer,\n  .md-split-button__trailing-state-layer {\n    transition: none;\n  }\n\n  .md-split-button__trailing-icon {\n    transition: none;\n  }\n}\n\n/* ==========================================================\n   13. FORCED COLORS — Windows High Contrast\n   ========================================================== */\n\n@media (forced-colors: active) {\n  :host {\n    forced-color-adjust: none;\n  }\n\n  .md-split-button__leading,\n  .md-split-button__trailing {\n    background-color: ButtonFace;\n    color: ButtonText;\n    border: 1px solid ButtonText;\n  }\n\n  .md-split-button__leading:focus-visible,\n  .md-split-button__trailing:focus-visible {\n    outline-color: Highlight;\n  }\n\n  :host(.md-split-button--disabled) .md-split-button__leading,\n  :host(.md-split-button--disabled) .md-split-button__trailing {\n    color: GrayText;\n    border-color: GrayText;\n  }\n\n  .md-split-button__leading-state-layer,\n  .md-split-button__trailing-state-layer {\n    display: none;\n  }\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import { Component, Host, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { triggerRipple } from '../../utils/ripple';\n\n@Component({\n  tag: 'md-split-button',\n  styleUrl: 'md-split-button.css',\n  shadow: true,\n})\nexport class MdSplitButton {\n  @Element() el!: HTMLElement;\n\n  /** Color variant */\n  @Prop() variant: 'elevated' | 'filled' | 'tonal' | 'outlined' = 'filled';\n\n  /** Size */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /** Disable the entire split button */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Visually disabled but remains focusable for screen readers */\n  @Prop({ reflect: true, attribute: 'soft-disabled' }) softDisabled: boolean = false;\n\n  /** Material Symbols icon name for the leading button */\n  @Prop() icon: string = '';\n\n  /** Leading button label text */\n  @Prop() label: string = '';\n\n  /** Trailing button icon (default: keyboard_arrow_down) */\n  @Prop() trailingIcon: string = 'keyboard_arrow_down';\n\n  /** Whether the trailing button is in \"open/checked\" state */\n  @Prop({ mutable: true, reflect: true, attribute: 'trailing-checked' }) trailingChecked: boolean = false;\n\n  /**\n   * Accessible label for the trailing (menu-toggle) button. Localize per the\n   * page locale. (WCAG 4.1.2 — the icon-only trailing button needs a name.)\n   */\n  @Prop({ attribute: 'menu-label' }) menuLabel: string = 'Toggle menu';\n\n  /**\n   * `aria-haspopup` value for the trailing button — the kind of popup it opens.\n   * Defaults to `'menu'` (the split-button menu-trigger pattern). Set to\n   * `'false'` when the trailing button toggles state rather than opening a popup.\n   */\n  @Prop({ attribute: 'haspopup' }) haspopup:\n    | 'menu' | 'listbox' | 'dialog' | 'grid' | 'tree' | 'true' | 'false' = 'menu';\n\n  /**\n   * `id` of the element the trailing button controls (the menu/listbox it\n   * opens). Wires `aria-controls` so assistive tech links trigger → popup.\n   */\n  @Prop() controls: string = '';\n\n  /**\n   * Stretch the split button to fill its container. The leading segment grows\n   * and its label truncates with an ellipsis when space is tight; the trailing\n   * toggle keeps its intrinsic width.\n   */\n  @Prop({ reflect: true, attribute: 'full-width' }) fullWidth: boolean = false;\n\n  /** Enable/disable ripple */\n  @Prop() ripple: 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  /** Fired when the leading button is activated */\n  @Event() mdLeadingClick: EventEmitter<void>;\n\n  /** Fired when the trailing button is toggled */\n  @Event() mdTrailingClick: EventEmitter<{ checked: boolean }>;\n\n  private get isDisabled() {\n    return this.disabled || this.softDisabled;\n  }\n\n  componentDidLoad() {\n    if (\n      typeof window !== 'undefined' &&\n      window.__STENCIL_DEV_MODE__ !== false\n    ) {\n      if (!this.label && !this.el.hasAttribute('aria-label')) {\n        console.warn(\n          `[md-split-button] WCAG 1.1.1: Leading button is missing an accessible name. ` +\n          `Provide a label prop or aria-label attribute.`,\n          this.el,\n        );\n      }\n    }\n  }\n\n  private handleLeadingClick = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (this.isDisabled) {\n      e.preventDefault();\n      return;\n    }\n    this.mdLeadingClick.emit();\n  };\n\n  private handleLeadingKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (!this.isDisabled) {\n        triggerRipple(this.el, '.md-split-button__leading md-ripple');\n        this.mdLeadingClick.emit();\n      }\n    }\n  };\n\n  private handleTrailingClick = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (this.isDisabled) {\n      e.preventDefault();\n      return;\n    }\n    this.trailingChecked = !this.trailingChecked;\n    this.mdTrailingClick.emit({ checked: this.trailingChecked });\n  };\n\n  private handleTrailingKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (!this.isDisabled) {\n        triggerRipple(this.el, '.md-split-button__trailing md-ripple');\n        this.trailingChecked = !this.trailingChecked;\n        this.mdTrailingClick.emit({ checked: this.trailingChecked });\n      }\n    }\n  };\n\n  render() {\n    const hasIcon = !!this.icon;\n\n    return (\n      <Host\n        class={{\n          'md-split-button': true,\n          [`md-split-button--${this.variant}`]: true,\n          [`md-split-button--${this.size}`]: true,\n          'md-split-button--disabled': this.isDisabled,\n          'md-split-button--trailing-checked': this.trailingChecked,\n          'md-split-button--with-icon': hasIcon,\n          'md-split-button--full-width': this.fullWidth,\n        }}\n      >\n        <button\n          class=\"md-split-button__leading\"\n          part=\"leading\"\n          disabled={this.disabled}\n          aria-disabled={this.isDisabled ? 'true' : undefined}\n          aria-label={!this.label ? this.el.getAttribute('aria-label') ?? undefined : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleLeadingClick}\n          onKeyDown={this.handleLeadingKeyDown}\n        >\n          {this.ripple && <md-ripple disabled={this.isDisabled}></md-ripple>}\n          <span class=\"md-split-button__leading-state-layer\" part=\"leading-state-layer\" aria-hidden=\"true\"></span>\n          {hasIcon && (\n            <span class=\"md-split-button__icon material-symbols-outlined\" part=\"icon\" aria-hidden=\"true\">\n              {this.icon}\n            </span>\n          )}\n          {this.label && <span class=\"md-split-button__label\" part=\"label\">{this.label}</span>}\n          <slot></slot>\n        </button>\n\n        <button\n          class={{\n            'md-split-button__trailing': true,\n            'md-split-button__trailing--checked': this.trailingChecked,\n          }}\n          part=\"trailing\"\n          disabled={this.disabled}\n          aria-disabled={this.isDisabled ? 'true' : undefined}\n          aria-haspopup={this.haspopup === 'false' ? undefined : this.haspopup}\n          aria-expanded={String(this.trailingChecked)}\n          aria-controls={this.controls || undefined}\n          aria-label={this.menuLabel}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleTrailingClick}\n          onKeyDown={this.handleTrailingKeyDown}\n        >\n          {this.ripple && <md-ripple disabled={this.isDisabled}></md-ripple>}\n          <span class=\"md-split-button__trailing-state-layer\" part=\"trailing-state-layer\" aria-hidden=\"true\"></span>\n          <span class=\"md-split-button__trailing-icon material-symbols-outlined\" part=\"trailing-icon\" aria-hidden=\"true\">\n            {this.trailingIcon}\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{p as s,H as t,h as o,t as e,d as a}from"./p-bSpXNc5J.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 r=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.state="neutral";this.size="medium";this.live=false;this.label="";this.density=0}render(){const s=!!this.label.trim();const t=s?this.live?"status":"img":"presentation";return o(a,{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:t,"aria-label":s?this.label:null,"aria-hidden":s?null:"true"})}get el(){return this}static get style(){return d()}},[1,"md-status-dot",{state:[513],size:[513],live:[516],label:[1],density:[514]}]);function i(){if(typeof customElements==="undefined"){return}const s=["md-status-dot"];s.forEach((s=>{switch(s){case"md-status-dot":if(!customElements.get(e(s))){customElements.define(e(s),r)}break}}))}i();const n=r;const l=i;export{n as MdStatusDot,l as defineCustomElement};
+//# sourceMappingURL=md-status-dot.js.map