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

@awc-ui/core 1.0.0-beta → 1.0.0-beta.1

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

Files changed (79) hide show

package/dist/components/p-6wZSqm_2.js ADDED Viewed

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

package/dist/components/{p-Bx5sxRqa.js.map → p-6wZSqm_2.js.map} RENAMED Viewed

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

package/dist/components/p-7fN_yCXW.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{p as e,H as s,c as a,h as r,d as t,t as d}from"./p-MWBNn6Lj.js";import{t as i}from"./p-DYBUr7K_.js";import{d as n}from"./p-stybaFzj.js";const o=()=>`:host{display:flex;align-items:center;position:relative;overflow:hidden;cursor:pointer;user-select:none;min-height:var(--md-menu-item-height, calc(48px + var(--md-sys-density-scale, 0) * 4px));--_icon-size:var(--md-menu-item-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));--_check-size:var(--md-menu-item-check-size, max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px)));padding:0 var(--md-menu-item-padding-inline, var(--md-sys-spacing-inset-md, 12px));gap:var(--md-menu-item-gap, var(--md-sys-spacing-gap-md, 12px));color:var(--md-sys-color-on-surface, #1C1B1F);box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;transition:background-color var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)), color var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)), border-radius var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1))}@media (prefers-reduced-motion: reduce){:host{transition:none}}.md-menu-item__state-layer{position:absolute;inset:0;background-color:var(--md-sys-color-on-surface, #1C1B1F);opacity:0;pointer-events:none;}:host-context(md-menu-item-group[data-use-gap]) .md-menu-item__state-layer{border-radius:calc(var(--md-menu-group-shape, 12px) - var(--md-sys-spacing-inset-xs, 4px))}:host(:hover) .md-menu-item__state-layer{opacity:0.08}:host(:active) .md-menu-item__state-layer{opacity:0.12}:host(:focus-visible) .md-menu-item__state-layer,:host([data-md-focused]) .md-menu-item__state-layer{opacity:0.12}:host(:hover) .md-menu-item__state-layer,:host(:active) .md-menu-item__state-layer{transition:opacity var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(:focus-visible),:host([data-md-focused]){outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:-3px}:host(.md-menu-item--selected){background-color:var(--md-sys-color-secondary-container, #E8DEF8)}:host([data-variant="standard"].md-menu-item--selected){background-color:var(--md-sys-color-tertiary-container, #FFD8E4);color:var(--md-sys-color-on-tertiary-container, #31111D);border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ee)))}:host([data-variant="standard"]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="standard"]:active){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ee)))}:host([data-variant="standard"]:first-child:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="standard"]:last-child:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="standard"][data-after-gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="standard"][gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="standard"][data-after-gap][gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="vibrant"].md-menu-item--selected){background-color:var(--md-sys-color-tertiary, #7D5260);color:var(--md-sys-color-on-tertiary, #FFFFFF);border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ee)))}:host([data-variant="vibrant"]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="vibrant"]:active){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-medium, 12px) - var(--_rest-ee)))}:host([data-variant="vibrant"]:first-child:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="vibrant"]:last-child:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="vibrant"][data-after-gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ee)))}:host([data-variant="vibrant"][gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-extra-small, 4px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host([data-variant="vibrant"][data-after-gap][gap]:hover){border-start-start-radius:calc(var(--_rest-ss) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ss)));border-start-end-radius:calc(var(--_rest-se) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-se)));border-end-start-radius:calc(var(--_rest-es) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-es)));border-end-end-radius:calc(var(--_rest-ee) + var(--md-sys-shape-morph-enabled, 1) * (var(--md-sys-shape-corner-large, 16px) - var(--_rest-ee)))}:host(.md-menu-item--disabled){cursor:default;opacity:0.38;pointer-events:none}.md-menu-item__leading{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--_icon-size);height:var(--_icon-size);color:var(--md-sys-color-on-surface-variant, #49454F)}.md-menu-item__leading ::slotted(){font-size:var(--_icon-size) !important;width:var(--_icon-size);height:var(--_icon-size);color:inherit}:host(.md-menu-item--selected) .md-menu-item__leading{color:inherit}.md-menu-item__content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.md-menu-item__headline{font-family:var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);font-size:max(13px, calc(16px + var(--md-sys-density-scale, 0) 0.5px));font-weight:var(--md-sys-typescale-body-large-weight, 400);line-height:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.md-menu-item__supporting{font-family:var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);font-size:max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));line-height:max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));color:var(--md-sys-color-on-surface-variant, #49454F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.md-menu-item__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:20px;margin-inline-start:12px;padding:0 8px;border-radius:var(--md-sys-shape-corner-full, 9999px);background-color:var(--md-sys-color-tertiary-container, #FFD8E4);color:var(--md-sys-color-on-tertiary-container, #31111D);font-family:var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-small-size, 11px);font-weight:var(--md-sys-typescale-label-small-weight, 500);line-height:var(--md-sys-typescale-label-small-line-height, 16px);letter-spacing:var(--md-sys-typescale-label-small-tracking, 0.5px);white-space:nowrap}.md-menu-item__trailing{display:flex;align-items:center;flex-shrink:0;margin-inline-start:8px;color:var(--md-sys-color-on-surface-variant, #49454F)}.md-menu-item__trailing ::slotted(:not(md-badge)){font-size:var(--_icon-size) !important;width:var(--_icon-size);height:var(--_icon-size);color:inherit}.md-menu-item__trailing-text{font-family:var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-small-size, 11px);color:var(--md-sys-color-on-surface-variant, #49454F)}.md-menu-item__trailing:not(:has(::slotted(),.md-menu-item__trailing-text)){display:none}:host(.md-menu-item--selected) .md-menu-item__trailing{color:inherit}.md-menu-item__check{display:flex;align-items:center;justify-content:center;width:var(--_check-size);height:var(--_check-size);flex-shrink:0;margin-inline-start:8px;color:inherit}.md-menu-item__check .material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-weight:normal;font-style:normal;font-size:var(--_check-size);line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;overflow-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host(.md-menu-item--divider){padding-bottom:0;margin-bottom:0}:host(.md-menu-item--divider)::after{content:'';position:absolute;bottom:0;inset-inline:0;height:1px;background-color:var(--md-sys-color-outline-variant, #CAC4D0)}:host([data-variant="standard"]){--_rest-ss:var(--md-sys-shape-corner-small, 8px);--_rest-se:var(--md-sys-shape-corner-small, 8px);--_rest-es:var(--md-sys-shape-corner-small, 8px);--_rest-ee:var(--md-sys-shape-corner-small, 8px);color:var(--md-sys-color-on-surface, #1C1B1F);gap:8px;border-radius:var(--md-sys-shape-corner-small, 8px);--_icon-size:var(--md-menu-item-icon-size, max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px)))}:host([data-variant="standard"]:first-child){--_rest-ss:var(--md-sys-shape-corner-large, 16px);--_rest-se:var(--md-sys-shape-corner-large, 16px);border-start-start-radius:var(--md-sys-shape-corner-large, 16px);border-start-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="standard"]:last-child){--_rest-es:var(--md-sys-shape-corner-large, 16px);--_rest-ee:var(--md-sys-shape-corner-large, 16px);border-end-start-radius:var(--md-sys-shape-corner-large, 16px);border-end-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="standard"]) .md-menu-item__leading{color:var(--md-sys-color-on-surface-variant, #49454F)}:host([data-variant="standard"]) .md-menu-item__trailing,:host([data-variant="standard"]) .md-menu-item__supporting,:host([data-variant="standard"]) .md-menu-item__trailing-text{color:var(--md-sys-color-on-surface-variant, #49454F)}:host([data-variant="standard"].md-menu-item--selected) .md-menu-item__leading,:host([data-variant="standard"].md-menu-item--selected) .md-menu-item__trailing{color:inherit}:host([data-variant="vibrant"]){--_rest-ss:var(--md-sys-shape-corner-small, 8px);--_rest-se:var(--md-sys-shape-corner-small, 8px);--_rest-es:var(--md-sys-shape-corner-small, 8px);--_rest-ee:var(--md-sys-shape-corner-small, 8px);color:var(--md-sys-color-on-tertiary-container, #31111D);gap:8px;border-radius:var(--md-sys-shape-corner-small, 8px);--_icon-size:var(--md-menu-item-icon-size, max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px)))}:host([data-variant="vibrant"]:first-child){--_rest-ss:var(--md-sys-shape-corner-large, 16px);--_rest-se:var(--md-sys-shape-corner-large, 16px);border-start-start-radius:var(--md-sys-shape-corner-large, 16px);border-start-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="vibrant"]:last-child){--_rest-es:var(--md-sys-shape-corner-large, 16px);--_rest-ee:var(--md-sys-shape-corner-large, 16px);border-end-start-radius:var(--md-sys-shape-corner-large, 16px);border-end-end-radius:var(--md-sys-shape-corner-large, 16px)}:host([data-variant="vibrant"]) .md-menu-item__leading{color:var(--md-sys-color-on-tertiary-container, #31111D)}:host([data-variant="vibrant"]) .md-menu-item__trailing,:host([data-variant="vibrant"]) .md-menu-item__supporting,:host([data-variant="vibrant"]) .md-menu-item__trailing-text{color:var(--md-sys-color-on-tertiary-container, #31111D)}:host([data-variant="vibrant"].md-menu-item--selected) .md-menu-item__leading,:host([data-variant="vibrant"].md-menu-item--selected) .md-menu-item__trailing{color:inherit}:host([data-variant="vibrant"]) .md-menu-item__state-layer{background-color:var(--md-sys-color-on-tertiary-container, #31111D)}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const m=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.mdClick=a(this,"mdClick",7);this.headline="";this.supportingText="";this.trailingText="";this.disabled=false;this.selected=false;this.indeterminate=false;this.keepOpen=false;this.divider=false;this.gap=false;this.badge="";this.type="button";this.checkPosition="end";this.presentation="menuitem";this.roleOverride="";this.density=0;this.hasLeadingIcon=false;this.hasTrailingIcon=false;this.handleClick=e=>{if(this.disabled){e.preventDefault();e.stopPropagation();return}if(this.type==="checkbox"){this.selected=!this.selected}else if(this.type==="radio"){this.selected=true;this.deselectSiblingRadios()}this.mdClick.emit();if(!this.keepOpen){let e=this.el.closest("md-menu");let s=e;while(e){const a=e.parentElement?.closest("md-menu");if(a){s=a;e=a}else{break}}if(s){const e=s;if(e.anchor){document.getElementById(e.anchor)?.focus()}setTimeout((()=>e.close?.()),150)}}};this.handleKeyDown=e=>{if(e.key==="Enter"){e.preventDefault();if(!this.disabled)i(this.el);this.el.click()}else if(e.key===" "){e.preventDefault();if(this.disabled)return;i(this.el);if(this.type==="checkbox"){this.selected=!this.selected;this.mdClick.emit()}else if(this.type==="radio"){this.selected=true;this.deselectSiblingRadios();this.mdClick.emit()}else{this.el.click()}}}}componentWillLoad(){this.hasLeadingIcon=!!this.el.querySelector('[slot="leading-icon"]');this.hasTrailingIcon=!!this.el.querySelector('[slot="trailing-icon"]')}deselectSiblingRadios(){if(this.type!=="radio")return;const e=this.el.closest("md-menu-item-group")\|\|this.el.closest("md-menu");if(!e)return;const s=Array.from(e.querySelectorAll("md-menu-item"));for(const e of s){if(e!==this.el&&e.type==="radio"&&e.selected){e.selected=false}}}get role(){if(this.roleOverride)return this.roleOverride;if(this.presentation==="option")return"option";if(this.type==="checkbox")return"menuitemcheckbox";if(this.type==="radio")return"menuitemradio";return"menuitem"}render(){return r(t,{key:"b25da4876896e5eaf656f6e2139c09553454eec8",class:{"md-menu-item":true,"md-menu-item--selected":this.selected,"md-menu-item--disabled":this.disabled,"md-menu-item--divider":this.divider,"md-menu-item--gap":this.gap},role:this.role,"aria-disabled":this.disabled?"true":"false","aria-selected":this.presentation==="option"?String(this.selected):undefined,"aria-checked":this.presentation!=="option"&&this.type!=="button"?this.indeterminate&&!this.selected?"mixed":String(this.selected):undefined,tabindex:"-1",onClick:this.handleClick,onKeyDown:this.handleKeyDown},r("md-ripple",{key:"f68ad95aae97cc8ab0ca9af2050c29f723408e52",disabled:this.disabled}),r("span",{key:"0fd37b9aa2303309350d7a449a0981a00a75be12",class:"md-menu-item__state-layer",part:"state-layer","aria-hidden":"true"}),this.type!=="button"&&this.checkPosition==="start"&&r("span",{key:"5549c5da78c3593035184d324411fcba8651fb3e",class:"md-menu-item__check","aria-hidden":"true"},r("span",{key:"f36546592022ccc977d158ab5b3ed00b126e6f8b",class:"material-symbols-outlined"},this.selected?"check":this.indeterminate?"remove":"")),this.hasLeadingIcon&&r("span",{key:"0903854ac07ee37da7bd2157a760f448646f450a",class:"md-menu-item__leading",part:"leading-icon","aria-hidden":"true"},r("slot",{key:"af7ada80ec2c6b394fae8472a1df7089e0ba4094",name:"leading-icon"})),r("span",{key:"6254c0d2f1af7fb704bc67997aa72f3a1b16331d",class:"md-menu-item__content",part:"content"},r("span",{key:"ce241acc497161cd00d353aa7e31c2aaac88f888",class:"md-menu-item__headline",part:"headline"},this.headline),this.supportingText&&r("span",{key:"d0516abae552af8d01636efd29d9cbda0779a82b",class:"md-menu-item__supporting",part:"supporting-text"},this.supportingText)),this.badge&&r("span",{key:"d37b17f80d96a51cd0eaf8949bc545e768d1f80a",class:"md-menu-item__badge",part:"badge"},this.badge),(this.hasTrailingIcon\|\|this.trailingText)&&r("span",{key:"a9bd6510bc0cd58514413c60aa32c67b483e1827",class:"md-menu-item__trailing",part:"trailing"},r("slot",{key:"0cde3d7bde1836d4c9b8235dda7591ceb57dfac8",name:"trailing-icon"},this.trailingText&&r("span",{key:"6b26d3a72ccae3495cb1f23a757d328400fe658e",class:"md-menu-item__trailing-text"},this.trailingText))),this.type!=="button"&&this.checkPosition==="end"&&r("span",{key:"05c12792d280f770aad8fc64bfbab7833bb2aa91",class:"md-menu-item__check","aria-hidden":"true"},r("span",{key:"fb0edd0eb26708672ac89f5ffcf3ddf1164cfe75",class:"material-symbols-outlined"},this.selected?"check":this.indeterminate?"remove":"")))}get el(){return this}static get style(){return o()}},[257,"md-menu-item",{headline:[1],supportingText:[1,"supporting-text"],trailingText:[1,"trailing-text"],disabled:[516],selected:[1540],indeterminate:[1540],keepOpen:[4,"keep-open"],divider:[516],gap:[516],badge:[1],type:[1],checkPosition:[513,"check-position"],presentation:[513],roleOverride:[1,"role-override"],density:[514],hasLeadingIcon:[32],hasTrailingIcon:[32]}]);function l(){if(typeof customElements==="undefined"){return}const e=["md-menu-item","md-ripple"];e.forEach((e=>{switch(e){case"md-menu-item":if(!customElements.get(d(e))){customElements.define(d(e),m)}break;case"md-ripple":if(!customElements.get(d(e))){n()}break}}))}l();export{m as M,l as d};
2	+ //# sourceMappingURL=p-7fN_yCXW.js.map

package/dist/components/{p-CJdqKSuf.js.map → p-7fN_yCXW.js.map} RENAMED Viewed

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