@m3e/web 2.5.5 → 2.5.6

package/dist/tabs.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__decorate as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as a,html as o,css as s,nothing as r,unsafeCSS as l}from"lit";import{query as n,state as c,property as d}from"lit/decorators.js";import{Selected as h,HtmlFor as b,KeyboardClick as p,Focusable as v,Disabled as m,AttachInternals as u,Role as f,DesignToken as g,customElement as y,ResizeController as x,addCustomState as _,hasCustomState as $,deleteCustomState as w}from"@m3e/web/core";import{addAriaReferencedId as k,removeAriaReferencedId as I,selectionManager as P,SelectionManager as S}from"@m3e/web/core/a11y";import{ifDefined as C}from"lit/directives/if-defined.js";import{M3eDirectionality as z}from"@m3e/web/core/bidi";import"@m3e/web/slide-group";var L,T,B,E;let W=E=class extends(h(b(p(v(m(u(f(a,"tab"),!0))))))){constructor(){super(...arguments),L.add(this),T.set(this,t=>e(this,L,"m",B).call(this,t))}attach(e){super.attach(e),e.id=e.id||"m3e-tab-panel-"+E.__nextId++,k(this,"aria-controls",e.id)}detach(){this.control&&this.control.id&&I(this,"aria-controls",this.control.id),super.detach()}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,T,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,T,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){super.update(e),e.has("selected")&&this.closest("m3e-tabs")?.[P].notifySelectionChange(this)}render(){return o`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><slot name="icon" aria-hidden="true"></slot><span class="label"><slot></slot></span></div></div>`}};T=new WeakMap,L=new WeakSet,B=function(e){this.disabled&&(e.preventDefault(),e.stopImmediatePropagation()),e.defaultPrevented||this.selected||(this.selected=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-tabs")?.[P].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=!1)},W.styles=s`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${g.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${g.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${g.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${g.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${g.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-inline-start: var(--m3e-tab-padding-start, 1.5rem); padding-inline-end: var(--m3e-tab-padding-end, 1.5rem); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .focus-ring { border-radius: var(--m3e-tab-focus-ring-shape, ${g.shape.corner.large}); } :host([selected]:focus-within) .focus-ring { top: var(--_tab-focus-ring-top-offset, 0); bottom: var(--_tab-focus-ring-bottom-offset, 0); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${g.color.primary})); --m3e-state-layer-hover-color: var( --m3e-tab-selected-container-hover-color, var(--_tab-selected-container-hover-color, ${g.color.primary}) ); --m3e-state-layer-focus-color: var( --_tab-selected-container-focus-color, var(--m3e-tab-selected-container-focus-color, ${g.color.primary}) ); --m3e-ripple-color: var( --_tab-selected-ripple-color, var(--m3e-tab-selected-ripple-color, ${g.color.primary}) ); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${g.color.onSurfaceVariant}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${g.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${g.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${g.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${g.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%), transparent ); } .wrapper { display: inline-flex; align-items: center; white-space: nowrap; flex-direction: var(--_tab-direction); justify-content: center; column-gap: var(--m3e-tab-spacing, 0.5rem); } ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-tab-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .base { color: ButtonText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host(:disabled) .base { color: GrayText; } }`,W.__nextId=0,t([n(".focus-ring")],W.prototype,"_focusRing",void 0),t([n(".state-layer")],W.prototype,"_stateLayer",void 0),t([n(".ripple")],W.prototype,"_ripple",void 0),t([n(".label")],W.prototype,"label",void 0),W=E=t([y("m3e-tab")],W);let j=class extends(f(a,"tabpanel")){connectedCallback(){super.connectedCallback(),this.slot="panel"}render(){return o`<slot></slot>`}};var M,Z,q,A,D,U,V,G,H;j.styles=s`:host { display: block; overflow-y: auto; scrollbar-width: ${g.scrollbar.width}; scrollbar-color: ${g.scrollbar.color}; }`,j=t([y("m3e-tab-panel")],j);let O=class extends(u(a)){constructor(){super(),M.add(this),Z.set(this,void 0),this._selectedIndex=null,this[H]=(new S).onSelectedItemsChange(()=>e(this,M,"m",V).call(this)).withHomeAndEnd().withWrap().withDirectionality(z.current),this.disablePagination=!1,this.headerPosition="before",this.variant="secondary",this.stretch=!1,this.previousPageLabel="Previous page",this.nextPageLabel="Next page",new x(this,{skipInitial:!0,callback:()=>{_(this,"--no-animate"),e(this,M,"m",G).call(this)}})}get tabs(){return this[P]?.items??[]}get selectedTab(){return null!==this._selectedIndex?this.tabs[this._selectedIndex]??null:null}get selectedIndex(){return this._selectedIndex??-1}set selectedIndex(e){if(e>=0&&e<this.tabs.length)this.tabs[e].selected=!0;else{const e=this.selectedTab;e&&(e.selected=!1)}}connectedCallback(){super.connectedCallback(),_(this,"--no-animate"),i(this,Z,z.observe(()=>{this.requestUpdate(),this[P].directionality=z.current}),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,Z,"f")?.call(this)}updated(t){super.updated(t),(t.has("variant")||t.has("stretch"))&&null!==this._selectedIndex&&e(this,M,"m",G).call(this)}render(){let t;return this.selectedTab?.control&&(t=[...this.querySelectorAll("[slot='panel']")].indexOf(this.selectedTab.control),-1===t&&(t=void 0)),o`${"before"===this.headerPosition?e(this,M,"m",q).call(this):r}<m3e-slide class="tabs" selected-index="${C(t)}"><slot name="panel"></slot></m3e-slide>${"after"===this.headerPosition?e(this,M,"m",q).call(this):r}`}};Z=new WeakMap,M=new WeakSet,H=P,q=function(){return o`<m3e-slide-group class="tablist" threshold="8" previous-page-label="${this.previousPageLabel}" next-page-label="${this.nextPageLabel}" ?disabled="${this.disablePagination}"><slot name="prev-icon" slot="prev-icon">${"ltr"===z.current?o`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`:o`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`}</slot><slot name="next-icon" slot="next-icon">${"ltr"===z.current?o`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`:o`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`}</slot><div class="header" role="tablist"><div class="tabs"><slot @slotchange="${e(this,M,"m",A)}" @keydown="${e(this,M,"m",D)}" @change="${e(this,M,"m",U)}"></slot></div><div class="ink-bar" aria-hidden="true"><div class="active-indicator"></div></div></div></m3e-slide-group>`},A=function(){this[P].setItems([...this.querySelectorAll("m3e-tab")])},D=function(e){this[P].onKeyDown(e)},U=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},V=function(){const t=this[P].selectedItems[0];let i=t?this.tabs.indexOf(t):null;-1===i&&(i=null),this._selectedIndex=i,e(this,M,"m",G).call(this)},G=function(){if(!this._tablist)return;const e=this[P].selectedItems[0];let t=0,i=0;if(e&&null!==this._selectedIndex){for(let e=0;e<this._selectedIndex;e++)t+=this.tabs[e].clientWidth;i=e.clientWidth,"primary"===this.variant&&e.label&&(t+=e.label.offsetLeft,i=e.label.clientWidth,i<24&&(t-=(24-i)/2,i=24))}this._tablist.style.setProperty("--_tabs-active-tab-position",`${t}px`),this._tablist.style.setProperty("--_tabs-active-tab-size",`${i}px`),i>0&&$(this,"--no-animate")&&setTimeout(()=>w(this,"--no-animate"))},O.styles=s`:host { display: flex; flex-direction: column; position: relative; } .tablist { position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${g.color.primary}); transition: ${l(`left var(--m3e-slide-animation-duration, ${g.motion.duration.long2}) ${g.motion.easing.standard},\n        width var(--m3e-slide-animation-duration, ${g.motion.duration.long2}) ${g.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${g.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${g.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${g.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${g.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${g.color.onSurface}; --_tab-selected-container-hover-color: ${g.color.onSurface}; --_tab-selected-container-focus-color: ${g.color.onSurface}; --_tab-selected-ripple-color: ${g.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`,t([n(".tablist")],O.prototype,"_tablist",void 0),t([c()],O.prototype,"_selectedIndex",void 0),t([d({attribute:"disable-pagination",type:Boolean})],O.prototype,"disablePagination",void 0),t([d({attribute:"header-position",reflect:!0})],O.prototype,"headerPosition",void 0),t([d({reflect:!0})],O.prototype,"variant",void 0),t([d({type:Boolean,reflect:!0})],O.prototype,"stretch",void 0),t([d({attribute:"previous-page-label"})],O.prototype,"previousPageLabel",void 0),t([d({attribute:"next-page-label"})],O.prototype,"nextPageLabel",void 0),O=t([y("m3e-tabs")],O);export{W as M3eTabElement,j as M3eTabPanelElement,O as M3eTabsElement};
+import{__classPrivateFieldGet as e,__decorate as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as a,html as o,css as s,nothing as r,unsafeCSS as l}from"lit";import{query as n,state as c,property as d}from"lit/decorators.js";import{Selected as h,HtmlFor as b,KeyboardClick as p,Focusable as v,Disabled as m,AttachInternals as u,Role as f,DesignToken as g,customElement as y,ResizeController as x,addCustomState as _,hasCustomState as $,deleteCustomState as w}from"@m3e/web/core";import{addAriaReferencedId as k,removeAriaReferencedId as I,selectionManager as P,SelectionManager as S}from"@m3e/web/core/a11y";import{ifDefined as C}from"lit/directives/if-defined.js";import{M3eDirectionality as z}from"@m3e/web/core/bidi";import"@m3e/web/slide-group";var L,E,T,B;let W=B=class extends(h(b(p(v(m(u(f(a,"tab"),!0))))))){constructor(){super(...arguments),L.add(this),E.set(this,t=>e(this,L,"m",T).call(this,t))}attach(e){super.attach(e),e.id=e.id||"m3e-tab-panel-"+B.__nextId++,k(this,"aria-controls",e.id)}detach(){this.control&&this.control.id&&I(this,"aria-controls",this.control.id),super.detach()}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,E,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,E,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){super.update(e),e.has("selected")&&this.closest("m3e-tabs")?.[P].notifySelectionChange(this)}render(){return o`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><slot name="icon" aria-hidden="true"></slot><span class="label"><slot></slot></span></div></div>`}};E=new WeakMap,L=new WeakSet,T=function(e){this.disabled&&(e.preventDefault(),e.stopImmediatePropagation()),e.defaultPrevented||this.selected||this.dispatchEvent(new Event("beforeinput",{bubbles:!0,cancelable:!0}))&&(this.selected=!0,this.closest("m3e-tabs")?.[P].notifySelectionChange(this),this.dispatchEvent(new Event("input",{bubbles:!0})),this.dispatchEvent(new Event("change",{bubbles:!0})))},W.styles=s`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${g.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${g.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${g.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${g.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${g.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding-inline-start: var(--m3e-tab-padding-start, 1.5rem); padding-inline-end: var(--m3e-tab-padding-end, 1.5rem); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .focus-ring { border-radius: var(--m3e-tab-focus-ring-shape, ${g.shape.corner.large}); } :host([selected]:focus-within) .focus-ring { top: var(--_tab-focus-ring-top-offset, 0); bottom: var(--_tab-focus-ring-bottom-offset, 0); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${g.color.primary})); --m3e-state-layer-hover-color: var( --m3e-tab-selected-container-hover-color, var(--_tab-selected-container-hover-color, ${g.color.primary}) ); --m3e-state-layer-focus-color: var( --_tab-selected-container-focus-color, var(--m3e-tab-selected-container-focus-color, ${g.color.primary}) ); --m3e-ripple-color: var( --_tab-selected-ripple-color, var(--m3e-tab-selected-ripple-color, ${g.color.primary}) ); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${g.color.onSurfaceVariant}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${g.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${g.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${g.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${g.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%), transparent ); } .wrapper { display: inline-flex; align-items: center; white-space: nowrap; flex-direction: var(--_tab-direction); justify-content: center; column-gap: var(--m3e-tab-spacing, 0.5rem); } ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-tab-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .base { color: ButtonText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host(:disabled) .base { color: GrayText; } }`,W.__nextId=0,t([n(".focus-ring")],W.prototype,"_focusRing",void 0),t([n(".state-layer")],W.prototype,"_stateLayer",void 0),t([n(".ripple")],W.prototype,"_ripple",void 0),t([n(".label")],W.prototype,"label",void 0),W=B=t([y("m3e-tab")],W);let j=class extends(f(a,"tabpanel")){connectedCallback(){super.connectedCallback(),this.slot="panel"}render(){return o`<slot></slot>`}};var M,Z,q,A,D,U,V,G,H;j.styles=s`:host { display: block; overflow-y: auto; scrollbar-width: ${g.scrollbar.width}; scrollbar-color: ${g.scrollbar.color}; }`,j=t([y("m3e-tab-panel")],j);let O=class extends(u(a)){constructor(){super(),M.add(this),Z.set(this,void 0),this._selectedIndex=null,this[H]=(new S).onSelectedItemsChange(()=>e(this,M,"m",V).call(this)).withHomeAndEnd().withWrap().withDirectionality(z.current),this.disablePagination=!1,this.headerPosition="before",this.variant="secondary",this.stretch=!1,this.previousPageLabel="Previous page",this.nextPageLabel="Next page",new x(this,{skipInitial:!0,callback:()=>{_(this,"--no-animate"),e(this,M,"m",G).call(this)}})}get tabs(){return this[P]?.items??[]}get selectedTab(){return null!==this._selectedIndex?this.tabs[this._selectedIndex]??null:null}get selectedIndex(){return this._selectedIndex??-1}set selectedIndex(e){if(e>=0&&e<this.tabs.length)this.tabs[e].selected=!0;else{const e=this.selectedTab;e&&(e.selected=!1)}}connectedCallback(){super.connectedCallback(),_(this,"--no-animate"),i(this,Z,z.observe(()=>{this.requestUpdate(),this[P].directionality=z.current}),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,Z,"f")?.call(this)}updated(t){super.updated(t),(t.has("variant")||t.has("stretch"))&&null!==this._selectedIndex&&e(this,M,"m",G).call(this)}render(){let t;return this.selectedTab?.control&&(t=[...this.querySelectorAll("[slot='panel']")].indexOf(this.selectedTab.control),-1===t&&(t=void 0)),o`${"before"===this.headerPosition?e(this,M,"m",q).call(this):r}<m3e-slide class="tabs" selected-index="${C(t)}"><slot name="panel"></slot></m3e-slide>${"after"===this.headerPosition?e(this,M,"m",q).call(this):r}`}};Z=new WeakMap,M=new WeakSet,H=P,q=function(){return o`<m3e-slide-group class="tablist" threshold="8" previous-page-label="${this.previousPageLabel}" next-page-label="${this.nextPageLabel}" ?disabled="${this.disablePagination}"><slot name="prev-icon" slot="prev-icon">${"ltr"===z.current?o`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`:o`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`}</slot><slot name="next-icon" slot="next-icon">${"ltr"===z.current?o`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`:o`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`}</slot><div class="header" role="tablist"><div class="tabs"><slot @slotchange="${e(this,M,"m",A)}" @keydown="${e(this,M,"m",D)}" @change="${e(this,M,"m",U)}"></slot></div><div class="ink-bar" aria-hidden="true"><div class="active-indicator"></div></div></div></m3e-slide-group>`},A=function(){this[P].setItems([...this.querySelectorAll("m3e-tab")])},D=function(e){this[P].onKeyDown(e)},U=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},V=function(){const t=this[P].selectedItems[0];let i=t?this.tabs.indexOf(t):null;-1===i&&(i=null),this._selectedIndex=i,e(this,M,"m",G).call(this)},G=function(){if(!this._tablist)return;const e=this[P].selectedItems[0];let t=0,i=0;if(e&&null!==this._selectedIndex){for(let e=0;e<this._selectedIndex;e++)t+=this.tabs[e].clientWidth;i=e.clientWidth,"primary"===this.variant&&e.label&&(t+=e.label.offsetLeft,i=e.label.clientWidth,i<24&&(t-=(24-i)/2,i=24))}this._tablist.style.setProperty("--_tabs-active-tab-position",`${t}px`),this._tablist.style.setProperty("--_tabs-active-tab-size",`${i}px`),i>0&&$(this,"--no-animate")&&setTimeout(()=>w(this,"--no-animate"))},O.styles=s`:host { display: flex; flex-direction: column; position: relative; } .tablist { position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${g.color.primary}); transition: ${l(`left var(--m3e-slide-animation-duration, ${g.motion.duration.long2}) ${g.motion.easing.standard},\n        width var(--m3e-slide-animation-duration, ${g.motion.duration.long2}) ${g.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${g.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${g.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${g.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${g.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${g.color.onSurface}; --_tab-selected-container-hover-color: ${g.color.onSurface}; --_tab-selected-container-focus-color: ${g.color.onSurface}; --_tab-selected-ripple-color: ${g.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`,t([n(".tablist")],O.prototype,"_tablist",void 0),t([c()],O.prototype,"_selectedIndex",void 0),t([d({attribute:"disable-pagination",type:Boolean})],O.prototype,"disablePagination",void 0),t([d({attribute:"header-position",reflect:!0})],O.prototype,"headerPosition",void 0),t([d({reflect:!0})],O.prototype,"variant",void 0),t([d({type:Boolean,reflect:!0})],O.prototype,"stretch",void 0),t([d({attribute:"previous-page-label"})],O.prototype,"previousPageLabel",void 0),t([d({attribute:"next-page-label"})],O.prototype,"nextPageLabel",void 0),O=t([y("m3e-tabs")],O);export{W as M3eTabElement,j as M3eTabPanelElement,O as M3eTabsElement};
 //# sourceMappingURL=tabs.min.js.map

package/dist/tabs.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.min.js","sources":["../../src/tabs/TabElement.ts","../../src/tabs/TabPanelElement.ts","../../src/tabs/TabsElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  Focusable,\r\n  HtmlFor,\r\n  KeyboardClick,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { addAriaReferencedId, removeAriaReferencedId, selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * An interactive element that, when activated, presents an associated tab panel.\r\n *\r\n * @description\r\n * The `m3e-tab` component is an interactive control used within a tabbed interface to activate and\r\n * reveal an associated tab panel. It supports accessible labeling, optional iconography, and selection\r\n * state styling consistent with Material 3 guidance. Tabs may be disabled, selected, or linked to a\r\n * specific panel via the `for` attribute, enabling declarative control and semantic clarity.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tab\r\n *\r\n * @slot - Renders the label of the tab.\r\n * @slot icon - Renders an icon before the tab's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr selected - Whether the element is selected.\r\n *\r\n * @fires input - Emitted when the selected state changes.\r\n * @fires change - Emitted when the selected state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-tab-font-size - Font size for tab label.\r\n * @cssprop --m3e-tab-font-weight - Font weight for tab label.\r\n * @cssprop --m3e-tab-line-height - Line height for tab label.\r\n * @cssprop --m3e-tab-tracking - Letter spacing for tab label.\r\n * @cssprop --m3e-tab-padding-start - Padding on the inline start of the tab.\r\n * @cssprop --m3e-tab-padding-end - Padding on the inline end of the tab.\r\n * @cssprop --m3e-tab-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-tab-selected-color - Text color for selected tab.\r\n * @cssprop --m3e-tab-selected-container-hover-color - Hover state-layer color for selected tab.\r\n * @cssprop --m3e-tab-selected-container-focus-color - Focus state-layer color for selected tab.\r\n * @cssprop --m3e-tab-selected-ripple-color - Ripple color for selected tab.\r\n * @cssprop --m3e-tab-unselected-color - Text color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-container-hover-color - Hover state-layer color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-container-focus-color - Focus state-layer color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-ripple-color - Ripple color for unselected tab.\r\n * @cssprop --m3e-tab-disabled-color - Text color for disabled tab.\r\n * @cssprop --m3e-tab-disabled-opacity - Text opacity for disabled tab.\r\n * @cssprop --m3e-tab-spacing - Column gap between icon and label.\r\n * @cssprop --m3e-tab-icon-size - Font size for slotted icon.\r\n */\r\n@customElement(\"m3e-tab\")\r\nexport class M3eTabElement extends Selected(\r\n  HtmlFor(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"tab\"), true))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      height: calc(var(--_tab-height) + ${DesignToken.density.calc(-3)});\r\n      font-size: var(--m3e-tab-font-size, ${DesignToken.typescale.standard.title.small.fontSize});\r\n      font-weight: var(--m3e-tab-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight});\r\n      line-height: var(--m3e-tab-line-height, ${DesignToken.typescale.standard.title.small.lineHeight});\r\n      letter-spacing: var(--m3e-tab-tracking, ${DesignToken.typescale.standard.title.small.tracking});\r\n      flex-grow: var(--_tab-grow);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      padding-inline-start: var(--m3e-tab-padding-start, 1.5rem);\r\n      padding-inline-end: var(--m3e-tab-padding-end, 1.5rem);\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .focus-ring {\r\n      border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken.shape.corner.large});\r\n    }\r\n    :host([selected]:focus-within) .focus-ring {\r\n      top: var(--_tab-focus-ring-top-offset, 0);\r\n      bottom: var(--_tab-focus-ring-bottom-offset, 0);\r\n    }\r\n    :host([selected]:not(:disabled)) .base {\r\n      color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${DesignToken.color.primary}));\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-tab-selected-container-hover-color,\r\n        var(--_tab-selected-container-hover-color, ${DesignToken.color.primary})\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --_tab-selected-container-focus-color,\r\n        var(--m3e-tab-selected-container-focus-color, ${DesignToken.color.primary})\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --_tab-selected-ripple-color,\r\n        var(--m3e-tab-selected-ripple-color, ${DesignToken.color.primary})\r\n      );\r\n    }\r\n    :host(:not([selected]):not(:disabled)) .base {\r\n      color: var(--m3e-tab-unselected-color, ${DesignToken.color.onSurfaceVariant});\r\n      --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:disabled) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-tab-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .wrapper {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      white-space: nowrap;\r\n      flex-direction: var(--_tab-direction);\r\n      justify-content: center;\r\n      column-gap: var(--m3e-tab-spacing, 0.5rem);\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-tab-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([selected]:not(:disabled)) .base {\r\n        color: ButtonText;\r\n      }\r\n      :host(:not([selected]):not(:disabled)) .base {\r\n        color: ButtonText;\r\n      }\r\n      :host(:disabled) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @internal A reference to the element that wraps the label of the tab. */\r\n  @query(\".label\") readonly label!: HTMLElement;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    control.id = control.id || `m3e-tab-panel-${M3eTabElement.__nextId++}`;\r\n    addAriaReferencedId(this, \"aria-controls\", control.id);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control && this.control.id) {\r\n      removeAriaReferencedId(this, \"aria-controls\", this.control.id);\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.closest(\"m3e-tabs\")?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" inward ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <slot name=\"icon\" aria-hidden=\"true\"></slot><span class=\"label\"><slot></slot></span>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (this.disabled) {\r\n      e.preventDefault();\r\n      e.stopImmediatePropagation();\r\n    }\r\n\r\n    if (e.defaultPrevented || this.selected) return;\r\n\r\n    this.selected = true;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.closest(\"m3e-tabs\")?.[selectionManager].notifySelectionChange(this);\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.selected = false;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tab\": M3eTabElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A panel presented for a tab.\r\n *\r\n * @description\r\n * The `m3e-tab-panel` component represents the content region associated with a selected tab.\r\n * It is conditionally rendered based on tab selection and provides a structured surface for\r\n * displaying contextual information, media, or interactive elements. Panels are linked to their\r\n * corresponding tabs via the `for` attribute on `m3e-tab`, enabling declarative control and\r\n * accessible navigation consistent with Material 3 guidance.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tab-panel\r\n *\r\n * @slot - Renders the content of the panel.\r\n */\r\n@customElement(\"m3e-tab-panel\")\r\nexport class M3eTabPanelElement extends Role(LitElement, \"tabpanel\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      overflow-y: auto;\r\n      scrollbar-width: ${DesignToken.scrollbar.width};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.slot = \"panel\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot></slot>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tab-panel\": M3eTabPanelElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  AttachInternals,\r\n  customElement,\r\n  deleteCustomState,\r\n  DesignToken,\r\n  hasCustomState,\r\n  ResizeController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport \"@m3e/web/slide-group\";\r\n\r\nimport { TabVariant } from \"./TabVariant\";\r\nimport { M3eTabElement } from \"./TabElement\";\r\nimport { TabHeaderPosition } from \"./TabHeaderPosition\";\r\n\r\nconst MIN_PRIMARY_TAB_WIDTH = 24;\r\n\r\n/**\r\n * Organizes content into separate views where only one view can be visible at a time.\r\n *\r\n * @description\r\n * The `m3e-tabs` component provides a structured navigation surface for organizing content into distinct views,\r\n * where only one view is visible at a time. It supports scrollable tab headers with optional pagination,\r\n * accessible labeling for navigation controls, and configurable header positioning to suit various layout\r\n * contexts. Two visual variants are available: `primary`, which emphasizes active indicators and shape styling\r\n * for prominent navigation, and `secondary`, which offers a more subtle presentation with reduced indicator\r\n * thickness. Stretch behavior allows tabs to expand and align rhythmically within their container, consistent\r\n * with Material 3 guidance.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tabs\r\n *\r\n * @slot - Renders the tabs.\r\n * @slot panel - Renders the panels of the tabs.\r\n * @slot next-icon - Renders the icon to present for the next button used to paginate.\r\n * @slot prev-icon - Renders the icon to present for the previous button used to paginate.\r\n *\r\n * @attr disable-pagination - Whether scroll buttons are disabled.\r\n * @attr header-position - The position of the tab headers.\r\n * @attr next-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr stretch - Whether tabs are stretched to fill the header.\r\n * @attr variant - The appearance variant of the tabs.\r\n *\r\n * @fires change - Emitted when the selected tab changes.\r\n *\r\n * @cssprop --m3e-tabs-paginator-button-icon-size - Overrides the icon size for paginator buttons.\r\n * @cssprop --m3e-tabs-active-indicator-color - Color of the active tab indicator.\r\n * @cssprop --m3e-tabs-primary-before-active-indicator-shape - Border radius for active indicator when header is before and variant is primary.\r\n * @cssprop --m3e-tabs-primary-after-active-indicator-shape - Border radius for active indicator when header is after and variant is primary.\r\n * @cssprop --m3e-tabs-primary-active-indicator-inset - Inset for primary variant's active indicator.\r\n * @cssprop --m3e-tabs-primary-active-indicator-thickness - Thickness for primary variant's active indicator.\r\n * @cssprop --m3e-tabs-secondary-active-indicator-thickness - Thickness for secondary variant's active indicator.\r\n */\r\n@customElement(\"m3e-tabs\")\r\nexport class M3eTabsElement extends AttachInternals(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: relative;\r\n    }\r\n    .tablist {\r\n      position: relative;\r\n      box-sizing: border-box;\r\n      flex: none;\r\n    }\r\n    ::slotted(prev-icon),\r\n    ::slotted(next-icon),\r\n    .icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important;\r\n    }\r\n    .header {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n    .tabs {\r\n      display: flex;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    .ink-bar {\r\n      box-sizing: border-box;\r\n      height: var(--_tabs-active-indicator-thickness);\r\n    }\r\n    .active-indicator {\r\n      position: relative;\r\n      height: var(--_tabs-active-indicator-thickness);\r\n      left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px));\r\n      width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2));\r\n      background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken.color.primary});\r\n      transition: ${unsafeCSS(\r\n        `left var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},\r\n        width var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    :host([header-position=\"after\"]) .header {\r\n      flex-direction: column-reverse;\r\n    }\r\n    :host([header-position=\"before\"]) .ink-bar {\r\n      margin-top: calc(0px - var(--_tabs-active-indicator-thickness));\r\n    }\r\n    :host([header-position=\"before\"]) .tablist {\r\n      --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n    }\r\n    :host([header-position=\"after\"]) .ink-bar {\r\n      margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness));\r\n    }\r\n    :host([header-position=\"after\"]) .tablist {\r\n      --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n    }\r\n    :host([header-position=\"before\"][variant=\"primary\"]) .active-indicator {\r\n      border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken.shape.corner.extraSmallTop});\r\n    }\r\n    :host([header-position=\"after\"][variant=\"primary\"]) .active-indicator {\r\n      border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken.shape.corner.extraSmallBottom});\r\n    }\r\n    .tabs {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([variant=\"primary\"]) .tablist {\r\n      --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem);\r\n      --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px);\r\n      --_tab-height: 4rem;\r\n    }\r\n    :host([header-position=\"before\"]) .tablist {\r\n      --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px);\r\n    }\r\n    :host([header-position=\"after\"]) .tablist {\r\n      --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px);\r\n    }\r\n    :host([header-position=\"before\"][variant=\"primary\"]) .tablist {\r\n      --_tab-direction: column;\r\n    }\r\n    :host([header-position=\"after\"][variant=\"primary\"]) .tablist {\r\n      --_tab-direction: column-reverse;\r\n    }\r\n    :host([variant=\"secondary\"]) .tablist {\r\n      --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px);\r\n      --_tab-height: 3rem;\r\n      --_tab-selected-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-container-hover-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-container-focus-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-ripple-color: ${DesignToken.color.onSurface};\r\n    }\r\n    :host([stretch]) .header {\r\n      width: 100%;\r\n      --_tab-grow: 1;\r\n    }\r\n    :host(:is(:state(--no-animate), :--no-animate)) .active-indicator {\r\n      transition: none;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .active-indicator {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .active-indicator {\r\n        background-color: ButtonText;\r\n        --m3e-divider-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ @query(\".tablist\") private readonly _tablist!: HTMLElement;\r\n  /** @private */ @state() _selectedIndex: number | null = null;\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eTabElement>()\r\n    .onSelectedItemsChange(() => this.#handleSelectedChange())\r\n    .withHomeAndEnd()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current);\r\n\r\n  constructor() {\r\n    super();\r\n    new ResizeController(this, {\r\n      skipInitial: true,\r\n      callback: () => {\r\n        addCustomState(this, \"--no-animate\");\r\n        this.#updateInkBar();\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Whether scroll buttons are disabled.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-pagination\", type: Boolean }) disablePagination = false;\r\n\r\n  /**\r\n   * The position of the tab headers.\r\n   * @default \"before\"\r\n   */\r\n  @property({ attribute: \"header-position\", reflect: true }) headerPosition: TabHeaderPosition = \"before\";\r\n\r\n  /**\r\n   * The appearance variant of the tabs.\r\n   * @default \"secondary\"\r\n   */\r\n  @property({ reflect: true }) variant: TabVariant = \"secondary\";\r\n\r\n  /**\r\n   * Whether tabs are stretched to fill the header.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) stretch = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous page.\r\n   * @default \"Previous page\"\r\n   */\r\n  @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next page.\r\n   * @default \"Next page\"\r\n   */\r\n  @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n  /** The tabs. */\r\n  get tabs(): readonly M3eTabElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected tab. */\r\n  get selectedTab(): M3eTabElement | null {\r\n    return this._selectedIndex !== null ? (this.tabs[this._selectedIndex] ?? null) : null;\r\n  }\r\n\r\n  /** The zero-based index of the selected tab. */\r\n  get selectedIndex(): number {\r\n    return this._selectedIndex ?? -1;\r\n  }\r\n  set selectedIndex(value: number) {\r\n    if (value >= 0 && value < this.tabs.length) {\r\n      this.tabs[value].selected = true;\r\n    } else {\r\n      const selectedTab = this.selectedTab;\r\n      if (selectedTab) {\r\n        selectedTab.selected = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    addCustomState(this, \"--no-animate\");\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => {\r\n      this.requestUpdate();\r\n      this[selectionManager].directionality = M3eDirectionality.current;\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if ((_changedProperties.has(\"variant\") || _changedProperties.has(\"stretch\")) && this._selectedIndex !== null) {\r\n      this.#updateInkBar();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    let panelIndex: number | undefined;\r\n    if (this.selectedTab?.control) {\r\n      panelIndex = [...this.querySelectorAll(\"[slot='panel']\")].indexOf(this.selectedTab.control);\r\n      if (panelIndex === -1) {\r\n        panelIndex = undefined;\r\n      }\r\n    }\r\n\r\n    return html` ${this.headerPosition === \"before\" ? this.#renderHeader() : nothing}\r\n      <m3e-slide class=\"tabs\" selected-index=\"${ifDefined(panelIndex)}\">\r\n        <slot name=\"panel\"></slot>\r\n      </m3e-slide>\r\n      ${this.headerPosition === \"after\" ? this.#renderHeader() : nothing}`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderHeader(): unknown {\r\n    return html`<m3e-slide-group\r\n      class=\"tablist\"\r\n      threshold=\"8\"\r\n      previous-page-label=\"${this.previousPageLabel}\"\r\n      next-page-label=\"${this.nextPageLabel}\"\r\n      ?disabled=\"${this.disablePagination}\"\r\n    >\r\n      <slot name=\"prev-icon\" slot=\"prev-icon\">\r\n        ${M3eDirectionality.current === \"ltr\"\r\n          ? html`<svg class=\"prev icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"next icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`}\r\n      </slot>\r\n      <slot name=\"next-icon\" slot=\"next-icon\">\r\n        ${M3eDirectionality.current === \"ltr\"\r\n          ? html`<svg class=\"next icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"prev icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`}\r\n      </slot>\r\n      <div class=\"header\" role=\"tablist\">\r\n        <div class=\"tabs\">\r\n          <slot\r\n            @slotchange=\"${this.#handleSlotChange}\"\r\n            @keydown=\"${this.#handleKeyDown}\"\r\n            @change=\"${this.#handleChange}\"\r\n          ></slot>\r\n        </div>\r\n        <div class=\"ink-bar\" aria-hidden=\"true\">\r\n          <div class=\"active-indicator\"></div>\r\n        </div>\r\n      </div>\r\n    </m3e-slide-group>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    this[selectionManager].setItems([...this.querySelectorAll(\"m3e-tab\")]);\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this[selectionManager].onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleSelectedChange(): void {\r\n    const selected = this[selectionManager].selectedItems[0];\r\n    let selectedIndex = selected ? this.tabs.indexOf(selected) : null;\r\n    if (selectedIndex === -1) {\r\n      selectedIndex = null;\r\n    }\r\n    this._selectedIndex = selectedIndex;\r\n    this.#updateInkBar();\r\n  }\r\n\r\n  /** @private */\r\n  #updateInkBar(): void {\r\n    if (!this._tablist) return;\r\n    const selected = this[selectionManager].selectedItems[0];\r\n    let left = 0;\r\n    let width = 0;\r\n\r\n    if (selected && this._selectedIndex !== null) {\r\n      for (let i = 0; i < this._selectedIndex; i++) {\r\n        left += this.tabs[i].clientWidth;\r\n      }\r\n\r\n      width = selected.clientWidth;\r\n      if (this.variant === \"primary\" && selected.label) {\r\n        left += selected.label.offsetLeft;\r\n        width = selected.label.clientWidth;\r\n        if (width < MIN_PRIMARY_TAB_WIDTH) {\r\n          left -= (MIN_PRIMARY_TAB_WIDTH - width) / 2;\r\n          width = MIN_PRIMARY_TAB_WIDTH;\r\n        }\r\n      }\r\n    }\r\n\r\n    this._tablist.style.setProperty(\"--_tabs-active-tab-position\", `${left}px`);\r\n    this._tablist.style.setProperty(\"--_tabs-active-tab-size\", `${width}px`);\r\n\r\n    if (width > 0 && hasCustomState(this, \"--no-animate\")) {\r\n      setTimeout(() => deleteCustomState(this, \"--no-animate\"));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tabs\": M3eTabsElement;\r\n  }\r\n}\r\n"],"names":["M3eTabElement","M3eTabElement_1","Selected","HtmlFor","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","_M3eTabElement_clickHandler","set","this","e","__classPrivateFieldGet","call","attach","control","super","id","__nextId","addAriaReferencedId","detach","removeAriaReferencedId","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","update","changedProperties","has","closest","selectionManager","notifySelectionChange","render","html","disabled","preventDefault","stopImmediatePropagation","defaultPrevented","selected","dispatchEvent","Event","bubbles","composed","cancelable","styles","css","DesignToken","density","calc","typescale","standard","title","small","fontSize","fontWeight","lineHeight","tracking","shape","corner","large","color","primary","onSurfaceVariant","onSurface","__decorate","query","prototype","customElement","M3eTabPanelElement","slot","scrollbar","width","M3eTabsElement","_M3eTabsElement_directionalitySubscription","_selectedIndex","_a","SelectionManager","onSelectedItemsChange","_M3eTabsElement_instances","_M3eTabsElement_handleSelectedChange","withHomeAndEnd","withWrap","withDirectionality","M3eDirectionality","current","disablePagination","headerPosition","variant","stretch","previousPageLabel","nextPageLabel","ResizeController","skipInitial","callback","addCustomState","_M3eTabsElement_updateInkBar","tabs","items","selectedTab","selectedIndex","value","length","__classPrivateFieldSet","observe","requestUpdate","directionality","updated","panelIndex","querySelectorAll","indexOf","undefined","nothing","ifDefined","_M3eTabsElement_renderHeader","_M3eTabsElement_handleSlotChange","_M3eTabsElement_handleKeyDown","_M3eTabsElement_handleChange","setItems","onKeyDown","stopPropagation","selectedItems","_tablist","left","i","clientWidth","label","offsetLeft","style","setProperty","hasCustomState","setTimeout","deleteCustomState","unsafeCSS","motion","duration","long2","easing","outlineVariant","extraSmallTop","extraSmallBottom","state","property","attribute","type","Boolean","reflect"],"mappings":";;;;;swBA6EO,IAAMA,EAAaC,EAAnB,cAA4BC,EACjCC,EAAQC,EAAcC,EAAUC,EAASC,EAAgBC,EAAKC,EAAY,QAAQ,SAD7EC,WAAAA,mCAuGoBC,EAAAC,IAAAC,KAAiBC,GAAaC,EAAAF,cAAiBG,KAAjBH,KAAkBC,GA+E3E,CAzEWG,MAAAA,CAAOC,GACdC,MAAMF,OAAOC,GAEbA,EAAQE,GAAKF,EAAQE,IAAM,iBAAiBnB,EAAcoB,WAC1DC,EAAoBT,KAAM,gBAAiBK,EAAQE,GACrD,CAGSG,MAAAA,GACHV,KAAKK,SAAWL,KAAKK,QAAQE,IAC/BI,EAAuBX,KAAM,gBAAiBA,KAAKK,QAAQE,IAG7DD,MAAMI,QACR,CAGSE,iBAAAA,GACPN,MAAMM,oBACNZ,KAAKa,iBAAiB,QAASX,EAAAF,KAAIF,EAAA,KACrC,CAGSgB,oBAAAA,GACPR,MAAMQ,uBACNd,KAAKe,oBAAoB,QAASb,EAAAF,KAAIF,EAAA,KACxC,CAGmBkB,YAAAA,CAAaC,GAC9BX,MAAMU,aAAaC,GACnB,CAACjB,KAAKkB,WAAYlB,KAAKmB,YAAanB,KAAKoB,SAASC,QAASC,GAAMA,GAAGlB,OAAOJ,MAC7E,CAGmBuB,MAAAA,CAAOC,GACxBlB,MAAMiB,OAAOC,GAETA,EAAkBC,IAAI,aACxBzB,KAAK0B,QAAQ,cAAcC,GAAkBC,sBAAsB5B,KAEvE,CAGmB6B,MAAAA,GACjB,OAAOC,CAAI,qEACyC9B,KAAK+B,oFACA/B,KAAK+B,oEACpB/B,KAAK+B,0LAMjD,0CAGa9B,GACPD,KAAK+B,WACP9B,EAAE+B,iBACF/B,EAAEgC,4BAGAhC,EAAEiC,kBAAoBlC,KAAKmC,WAE/BnC,KAAKmC,UAAW,EACZnC,KAAKoC,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAMC,UAAU,EAAMC,YAAY,MACrFxC,KAAK0B,QAAQ,cAAcC,GAAkBC,sBAAsB5B,MACnEA,KAAKoC,cAAc,IAAIC,MAAM,SAAU,CAAEC,SAAS,MAElDtC,KAAKmC,UAAW,EAEpB,EAjLgBhD,EAAAsD,OAAyBC,CAAG,sGAKJC,EAAYC,QAAQC,MAAK,4CACvBF,EAAYG,UAAUC,SAASC,MAAMC,MAAMC,sDACvCP,EAAYG,UAAUC,SAASC,MAAMC,MAAME,wDAC3CR,EAAYG,UAAUC,SAASC,MAAMC,MAAMG,wDAC3CT,EAAYG,UAAUC,SAASC,MAAMC,MAAMI,siBA0BpCV,EAAYW,MAAMC,OAAOC,iQAORb,EAAYc,MAAMC,uIAGrCf,EAAYc,MAAMC,wIAIff,EAAYc,MAAMC,2GAI3Bf,EAAYc,MAAMC,uGAIlBf,EAAYc,MAAME,qGACsBhB,EAAYc,MAAMG,8FAClBjB,EAAYc,MAAMG,0EACtCjB,EAAYc,MAAMG,mGAK7CjB,EAAYc,MAAMG,+iBA6BzBzE,EAAAqB,SAAW,EAEaqD,EAAA,CAAtCC,EAAM,gBAAiE3E,EAAA4E,UAAA,qBAChCF,EAAA,CAAvCC,EAAM,iBAAoE3E,EAAA4E,UAAA,sBACxCF,EAAA,CAAlCC,EAAM,YAAuD3E,EAAA4E,UAAA,kBAIpDF,EAAA,CAAzBC,EAAM,WAAuC3E,EAAA4E,UAAA,gBA1GnC5E,EAAaC,EAAAyE,EAAA,CADzBG,EAAc,YACF7E,GC5CN,IAAM8E,EAAN,cAAiCtE,EAAKC,EAAY,aAY9CgB,iBAAAA,GACPN,MAAMM,oBACNZ,KAAKkE,KAAO,OACd,CAGmBrC,MAAAA,GACjB,OAAOC,CAAI,eACb,yBAlBgBmC,EAAAxB,OAAyBC,CAAG,8DAIrBC,EAAYwB,UAAUC,2BACtBzB,EAAYwB,UAAUV,WAPlCQ,EAAkBJ,EAAA,CAD9BG,EAAc,kBACFC,GC2CN,IAAMI,EAAN,cAA6B3E,EAAgBE,IA6HlDC,WAAAA,GACES,oBAZcgE,EAAAvE,IAAAC,aAESA,KAAAuE,eAAgC,KAGhDvE,KAAAwE,IAAqB,IAAIC,GAC/BC,sBAAsB,IAAMxE,EAAAF,KAAI2E,EAAA,IAAAC,GAAsBzE,KAA1BH,OAC5B6E,iBACAC,WACAC,mBAAmBC,EAAkBC,SAiBsBjF,KAAAkF,mBAAoB,EAMvBlF,KAAAmF,eAAoC,SAMlEnF,KAAAoF,QAAsB,YAMPpF,KAAAqF,SAAU,EAMNrF,KAAAsF,kBAAoB,gBAMxBtF,KAAAuF,cAAgB,YA3C1D,IAAIC,EAAiBxF,KAAM,CACzByF,aAAa,EACbC,SAAUA,KACRC,EAAe3F,KAAM,gBACrBE,EAAAF,KAAI2E,EAAA,IAAAiB,GAAczF,KAAlBH,QAGN,CAuCA,QAAI6F,GACF,OAAO7F,KAAK2B,IAAmBmE,OAAS,EAC1C,CAGA,eAAIC,GACF,OAA+B,OAAxB/F,KAAKuE,eAA2BvE,KAAK6F,KAAK7F,KAAKuE,iBAAmB,KAAQ,IACnF,CAGA,iBAAIyB,GACF,OAAOhG,KAAKuE,iBAAkB,CAChC,CACA,iBAAIyB,CAAcC,GAChB,GAAIA,GAAS,GAAKA,EAAQjG,KAAK6F,KAAKK,OAClClG,KAAK6F,KAAKI,GAAO9D,UAAW,MACvB,CACL,MAAM4D,EAAc/F,KAAK+F,YACrBA,IACFA,EAAY5D,UAAW,EAE3B,CACF,CAGSvB,iBAAAA,GACPN,MAAMM,oBAEN+E,EAAe3F,KAAM,gBACrBmG,EAAAnG,KAAIsE,EAA+BU,EAAkBoB,QAAQ,KAC3DpG,KAAKqG,gBACLrG,KAAK2B,GAAkB2E,eAAiBtB,EAAkBC,cAE9D,CAGSnE,oBAAAA,GACPR,MAAMQ,uBAENZ,EAAAF,KAAIsE,EAAA,MAA8BnE,KAAlCH,KACF,CAGmBuG,OAAAA,CAAQtF,GACzBX,MAAMiG,QAAQtF,IAETA,EAAmBQ,IAAI,YAAcR,EAAmBQ,IAAI,aAAuC,OAAxBzB,KAAKuE,gBACnFrE,EAAAF,KAAI2E,EAAA,IAAAiB,GAAczF,KAAlBH,KAEJ,CAGmB6B,MAAAA,GACjB,IAAI2E,EAQJ,OAPIxG,KAAK+F,aAAa1F,UACpBmG,EAAa,IAAIxG,KAAKyG,iBAAiB,mBAAmBC,QAAQ1G,KAAK+F,YAAY1F,UAChE,IAAfmG,IACFA,OAAaG,IAIV7E,CAAI,GAA4B,WAAxB9B,KAAKmF,eAA8BjF,EAAAF,cAAkBG,KAAlBH,MAAuB4G,4CAC7BC,EAAUL,6CAG1B,UAAxBxG,KAAKmF,eAA6BjF,EAAAF,KAAI2E,EAAA,IAAAmC,GAAc3G,KAAlBH,MAAuB4G,GAC/D,iCAxHUjF,eA4HR,OAAOG,CAAI,uEAGc9B,KAAKsF,uCACTtF,KAAKuF,6BACXvF,KAAKkF,8DAGgB,QAA9BF,EAAkBC,QAChBnD,CAAI,6IAGJA,CAAI,6LAKwB,QAA9BkD,EAAkBC,QAChBnD,CAAI,4IAGJA,CAAI,8NAOW5B,EAAAF,KAAI2E,EAAA,IAAAoC,iBACP7G,EAAAF,KAAI2E,EAAA,IAAAqC,gBACL9G,EAAAF,KAAI2E,EAAA,IAAAsC,6HAQzB,eAIEjH,KAAK2B,GAAkBuF,SAAS,IAAIlH,KAAKyG,iBAAiB,YAC5D,aAGexG,GACbD,KAAK2B,GAAkBwF,UAAUlH,EACnC,aAGcA,GACZA,EAAEmH,kBACFpH,KAAKoC,cAAc,IAAIC,MAAM,SAAU,CAAEC,SAAS,IACpD,eAIE,MAAMH,EAAWnC,KAAK2B,GAAkB0F,cAAc,GACtD,IAAIrB,EAAgB7D,EAAWnC,KAAK6F,KAAKa,QAAQvE,GAAY,MACvC,IAAlB6D,IACFA,EAAgB,MAElBhG,KAAKuE,eAAiByB,EACtB9F,EAAAF,KAAI2E,EAAA,IAAAiB,GAAczF,KAAlBH,KACF,eAIE,IAAKA,KAAKsH,SAAU,OACpB,MAAMnF,EAAWnC,KAAK2B,GAAkB0F,cAAc,GACtD,IAAIE,EAAO,EACPnD,EAAQ,EAEZ,GAAIjC,GAAoC,OAAxBnC,KAAKuE,eAAyB,CAC5C,IAAK,IAAIiD,EAAI,EAAGA,EAAIxH,KAAKuE,eAAgBiD,IACvCD,GAAQvH,KAAK6F,KAAK2B,GAAGC,YAGvBrD,EAAQjC,EAASsF,YACI,YAAjBzH,KAAKoF,SAAyBjD,EAASuF,QACzCH,GAAQpF,EAASuF,MAAMC,WACvBvD,EAAQjC,EAASuF,MAAMD,YACnBrD,EA3XkB,KA4XpBmD,IA5XoB,GA4XanD,GAAS,EAC1CA,EA7XoB,IAgY1B,CAEApE,KAAKsH,SAASM,MAAMC,YAAY,8BAA+B,GAAGN,OAClEvH,KAAKsH,SAASM,MAAMC,YAAY,0BAA2B,GAAGzD,OAE1DA,EAAQ,GAAK0D,EAAe9H,KAAM,iBACpC+H,WAAW,IAAMC,EAAkBhI,KAAM,gBAE7C,EAjVgBqE,EAAA5B,OAAyBC,CAAG,o1BAmCmBC,EAAYc,MAAMC,yBAC/DuE,EACZ,4CAA4CtF,EAAYuF,OAAOC,SAASC,UAAUzF,EAAYuF,OAAOG,OAAOtF,gEAChEJ,EAAYuF,OAAOC,SAASC,UAAUzF,EAAYuF,OAAOG,OAAOtF,+VAWjFJ,EAAYc,MAAM6E,oRAOlB3F,EAAYc,MAAM6E,oKAGwB3F,EAAYW,MAAMC,OAAOgF,iKAG1B5F,EAAYW,MAAMC,OAAOiF,g6BAyBtE7F,EAAYc,MAAMG,qDACFjB,EAAYc,MAAMG,qDAClBjB,EAAYc,MAAMG,4CAC3BjB,EAAYc,MAAMG,mWAuBFC,EAAA,CAAnCC,EAAM,aAAoDO,EAAAN,UAAA,mBAClDF,EAAA,CAAR4E,KAA6CpE,EAAAN,UAAA,yBAwBAF,EAAA,CAA7D6E,EAAS,CAAEC,UAAW,qBAAsBC,KAAMC,WAAqCxE,EAAAN,UAAA,yBAAA,GAM7BF,EAAA,CAA1D6E,EAAS,CAAEC,UAAW,kBAAmBG,SAAS,KAAqDzE,EAAAN,UAAA,sBAAA,GAM3EF,EAAA,CAA5B6E,EAAS,CAAEI,SAAS,KAA0CzE,EAAAN,UAAA,eAAA,GAMnBF,EAAA,CAA3C6E,EAAS,CAAEE,KAAMC,QAASC,SAAS,KAAwBzE,EAAAN,UAAA,eAAA,GAMZF,EAAA,CAA/C6E,EAAS,CAAEC,UAAW,yBAA6DtE,EAAAN,UAAA,yBAAA,GAMxCF,EAAA,CAA3C6E,EAAS,CAAEC,UAAW,qBAAiDtE,EAAAN,UAAA,qBAAA,GA1K7DM,EAAcR,EAAA,CAD1BG,EAAc,aACFK"}
+{"version":3,"file":"tabs.min.js","sources":["../../src/tabs/TabElement.ts","../../src/tabs/TabPanelElement.ts","../../src/tabs/TabsElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  Focusable,\r\n  HtmlFor,\r\n  KeyboardClick,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { addAriaReferencedId, removeAriaReferencedId, selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * An interactive element that, when activated, presents an associated tab panel.\r\n *\r\n * @description\r\n * The `m3e-tab` component is an interactive control used within a tabbed interface to activate and\r\n * reveal an associated tab panel. It supports accessible labeling, optional iconography, and selection\r\n * state styling consistent with Material 3 guidance. Tabs may be disabled, selected, or linked to a\r\n * specific panel via the `for` attribute, enabling declarative control and semantic clarity.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tab\r\n *\r\n * @slot - Renders the label of the tab.\r\n * @slot icon - Renders an icon before the tab's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr selected - Whether the element is selected.\r\n *\r\n * @fires beforeinput - Dispatched before the selected state changes.\r\n * @fires input - Dispatched when the selected state changes.\r\n * @fires change - Dispatched when the selected state changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-tab-font-size - Font size for tab label.\r\n * @cssprop --m3e-tab-font-weight - Font weight for tab label.\r\n * @cssprop --m3e-tab-line-height - Line height for tab label.\r\n * @cssprop --m3e-tab-tracking - Letter spacing for tab label.\r\n * @cssprop --m3e-tab-padding-start - Padding on the inline start of the tab.\r\n * @cssprop --m3e-tab-padding-end - Padding on the inline end of the tab.\r\n * @cssprop --m3e-tab-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-tab-selected-color - Text color for selected tab.\r\n * @cssprop --m3e-tab-selected-container-hover-color - Hover state-layer color for selected tab.\r\n * @cssprop --m3e-tab-selected-container-focus-color - Focus state-layer color for selected tab.\r\n * @cssprop --m3e-tab-selected-ripple-color - Ripple color for selected tab.\r\n * @cssprop --m3e-tab-unselected-color - Text color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-container-hover-color - Hover state-layer color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-container-focus-color - Focus state-layer color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-ripple-color - Ripple color for unselected tab.\r\n * @cssprop --m3e-tab-disabled-color - Text color for disabled tab.\r\n * @cssprop --m3e-tab-disabled-opacity - Text opacity for disabled tab.\r\n * @cssprop --m3e-tab-spacing - Column gap between icon and label.\r\n * @cssprop --m3e-tab-icon-size - Font size for slotted icon.\r\n */\r\n@customElement(\"m3e-tab\")\r\nexport class M3eTabElement extends Selected(\r\n  HtmlFor(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"tab\"), true))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      height: calc(var(--_tab-height) + ${DesignToken.density.calc(-3)});\r\n      font-size: var(--m3e-tab-font-size, ${DesignToken.typescale.standard.title.small.fontSize});\r\n      font-weight: var(--m3e-tab-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight});\r\n      line-height: var(--m3e-tab-line-height, ${DesignToken.typescale.standard.title.small.lineHeight});\r\n      letter-spacing: var(--m3e-tab-tracking, ${DesignToken.typescale.standard.title.small.tracking});\r\n      flex-grow: var(--_tab-grow);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      padding-inline-start: var(--m3e-tab-padding-start, 1.5rem);\r\n      padding-inline-end: var(--m3e-tab-padding-end, 1.5rem);\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .focus-ring {\r\n      border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken.shape.corner.large});\r\n    }\r\n    :host([selected]:focus-within) .focus-ring {\r\n      top: var(--_tab-focus-ring-top-offset, 0);\r\n      bottom: var(--_tab-focus-ring-bottom-offset, 0);\r\n    }\r\n    :host([selected]:not(:disabled)) .base {\r\n      color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${DesignToken.color.primary}));\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-tab-selected-container-hover-color,\r\n        var(--_tab-selected-container-hover-color, ${DesignToken.color.primary})\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --_tab-selected-container-focus-color,\r\n        var(--m3e-tab-selected-container-focus-color, ${DesignToken.color.primary})\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --_tab-selected-ripple-color,\r\n        var(--m3e-tab-selected-ripple-color, ${DesignToken.color.primary})\r\n      );\r\n    }\r\n    :host(:not([selected]):not(:disabled)) .base {\r\n      color: var(--m3e-tab-unselected-color, ${DesignToken.color.onSurfaceVariant});\r\n      --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:disabled) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-tab-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .wrapper {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      white-space: nowrap;\r\n      flex-direction: var(--_tab-direction);\r\n      justify-content: center;\r\n      column-gap: var(--m3e-tab-spacing, 0.5rem);\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-tab-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([selected]:not(:disabled)) .base {\r\n        color: ButtonText;\r\n      }\r\n      :host(:not([selected]):not(:disabled)) .base {\r\n        color: ButtonText;\r\n      }\r\n      :host(:disabled) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @internal A reference to the element that wraps the label of the tab. */\r\n  @query(\".label\") readonly label!: HTMLElement;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    control.id = control.id || `m3e-tab-panel-${M3eTabElement.__nextId++}`;\r\n    addAriaReferencedId(this, \"aria-controls\", control.id);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control && this.control.id) {\r\n      removeAriaReferencedId(this, \"aria-controls\", this.control.id);\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.closest(\"m3e-tabs\")?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" inward ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <slot name=\"icon\" aria-hidden=\"true\"></slot><span class=\"label\"><slot></slot></span>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (this.disabled) {\r\n      e.preventDefault();\r\n      e.stopImmediatePropagation();\r\n    }\r\n\r\n    if (e.defaultPrevented || this.selected) return;\r\n\r\n    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.selected = true;\r\n      this.closest(\"m3e-tabs\")?.[selectionManager].notifySelectionChange(this);\r\n      this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tab\": M3eTabElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A panel presented for a tab.\r\n *\r\n * @description\r\n * The `m3e-tab-panel` component represents the content region associated with a selected tab.\r\n * It is conditionally rendered based on tab selection and provides a structured surface for\r\n * displaying contextual information, media, or interactive elements. Panels are linked to their\r\n * corresponding tabs via the `for` attribute on `m3e-tab`, enabling declarative control and\r\n * accessible navigation consistent with Material 3 guidance.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tab-panel\r\n *\r\n * @slot - Renders the content of the panel.\r\n */\r\n@customElement(\"m3e-tab-panel\")\r\nexport class M3eTabPanelElement extends Role(LitElement, \"tabpanel\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      overflow-y: auto;\r\n      scrollbar-width: ${DesignToken.scrollbar.width};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.slot = \"panel\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot></slot>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tab-panel\": M3eTabPanelElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  AttachInternals,\r\n  customElement,\r\n  deleteCustomState,\r\n  DesignToken,\r\n  hasCustomState,\r\n  ResizeController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport \"@m3e/web/slide-group\";\r\n\r\nimport { TabVariant } from \"./TabVariant\";\r\nimport { M3eTabElement } from \"./TabElement\";\r\nimport { TabHeaderPosition } from \"./TabHeaderPosition\";\r\n\r\nconst MIN_PRIMARY_TAB_WIDTH = 24;\r\n\r\n/**\r\n * Organizes content into separate views where only one view can be visible at a time.\r\n *\r\n * @description\r\n * The `m3e-tabs` component provides a structured navigation surface for organizing content into distinct views,\r\n * where only one view is visible at a time. It supports scrollable tab headers with optional pagination,\r\n * accessible labeling for navigation controls, and configurable header positioning to suit various layout\r\n * contexts. Two visual variants are available: `primary`, which emphasizes active indicators and shape styling\r\n * for prominent navigation, and `secondary`, which offers a more subtle presentation with reduced indicator\r\n * thickness. Stretch behavior allows tabs to expand and align rhythmically within their container, consistent\r\n * with Material 3 guidance.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tabs\r\n *\r\n * @slot - Renders the tabs.\r\n * @slot panel - Renders the panels of the tabs.\r\n * @slot next-icon - Renders the icon to present for the next button used to paginate.\r\n * @slot prev-icon - Renders the icon to present for the previous button used to paginate.\r\n *\r\n * @attr disable-pagination - Whether scroll buttons are disabled.\r\n * @attr header-position - The position of the tab headers.\r\n * @attr next-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr stretch - Whether tabs are stretched to fill the header.\r\n * @attr variant - The appearance variant of the tabs.\r\n *\r\n * @fires beforeinput - Dispatched before the selected state of a tab changes.\r\n * @fires input - Dispatched when the selected state of a tab changes.\r\n * @fires change - Dispatched when the selected tab changes.\r\n *\r\n * @cssprop --m3e-tabs-paginator-button-icon-size - Overrides the icon size for paginator buttons.\r\n * @cssprop --m3e-tabs-active-indicator-color - Color of the active tab indicator.\r\n * @cssprop --m3e-tabs-primary-before-active-indicator-shape - Border radius for active indicator when header is before and variant is primary.\r\n * @cssprop --m3e-tabs-primary-after-active-indicator-shape - Border radius for active indicator when header is after and variant is primary.\r\n * @cssprop --m3e-tabs-primary-active-indicator-inset - Inset for primary variant's active indicator.\r\n * @cssprop --m3e-tabs-primary-active-indicator-thickness - Thickness for primary variant's active indicator.\r\n * @cssprop --m3e-tabs-secondary-active-indicator-thickness - Thickness for secondary variant's active indicator.\r\n */\r\n@customElement(\"m3e-tabs\")\r\nexport class M3eTabsElement extends AttachInternals(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: relative;\r\n    }\r\n    .tablist {\r\n      position: relative;\r\n      box-sizing: border-box;\r\n      flex: none;\r\n    }\r\n    ::slotted(prev-icon),\r\n    ::slotted(next-icon),\r\n    .icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important;\r\n    }\r\n    .header {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n    .tabs {\r\n      display: flex;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    .ink-bar {\r\n      box-sizing: border-box;\r\n      height: var(--_tabs-active-indicator-thickness);\r\n    }\r\n    .active-indicator {\r\n      position: relative;\r\n      height: var(--_tabs-active-indicator-thickness);\r\n      left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px));\r\n      width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2));\r\n      background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken.color.primary});\r\n      transition: ${unsafeCSS(\r\n        `left var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},\r\n        width var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    :host([header-position=\"after\"]) .header {\r\n      flex-direction: column-reverse;\r\n    }\r\n    :host([header-position=\"before\"]) .ink-bar {\r\n      margin-top: calc(0px - var(--_tabs-active-indicator-thickness));\r\n    }\r\n    :host([header-position=\"before\"]) .tablist {\r\n      --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n    }\r\n    :host([header-position=\"after\"]) .ink-bar {\r\n      margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness));\r\n    }\r\n    :host([header-position=\"after\"]) .tablist {\r\n      --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n    }\r\n    :host([header-position=\"before\"][variant=\"primary\"]) .active-indicator {\r\n      border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken.shape.corner.extraSmallTop});\r\n    }\r\n    :host([header-position=\"after\"][variant=\"primary\"]) .active-indicator {\r\n      border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken.shape.corner.extraSmallBottom});\r\n    }\r\n    .tabs {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([variant=\"primary\"]) .tablist {\r\n      --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem);\r\n      --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px);\r\n      --_tab-height: 4rem;\r\n    }\r\n    :host([header-position=\"before\"]) .tablist {\r\n      --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px);\r\n    }\r\n    :host([header-position=\"after\"]) .tablist {\r\n      --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px);\r\n    }\r\n    :host([header-position=\"before\"][variant=\"primary\"]) .tablist {\r\n      --_tab-direction: column;\r\n    }\r\n    :host([header-position=\"after\"][variant=\"primary\"]) .tablist {\r\n      --_tab-direction: column-reverse;\r\n    }\r\n    :host([variant=\"secondary\"]) .tablist {\r\n      --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px);\r\n      --_tab-height: 3rem;\r\n      --_tab-selected-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-container-hover-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-container-focus-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-ripple-color: ${DesignToken.color.onSurface};\r\n    }\r\n    :host([stretch]) .header {\r\n      width: 100%;\r\n      --_tab-grow: 1;\r\n    }\r\n    :host(:is(:state(--no-animate), :--no-animate)) .active-indicator {\r\n      transition: none;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .active-indicator {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .active-indicator {\r\n        background-color: ButtonText;\r\n        --m3e-divider-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ @query(\".tablist\") private readonly _tablist!: HTMLElement;\r\n  /** @private */ @state() _selectedIndex: number | null = null;\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eTabElement>()\r\n    .onSelectedItemsChange(() => this.#handleSelectedChange())\r\n    .withHomeAndEnd()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current);\r\n\r\n  constructor() {\r\n    super();\r\n    new ResizeController(this, {\r\n      skipInitial: true,\r\n      callback: () => {\r\n        addCustomState(this, \"--no-animate\");\r\n        this.#updateInkBar();\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Whether scroll buttons are disabled.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-pagination\", type: Boolean }) disablePagination = false;\r\n\r\n  /**\r\n   * The position of the tab headers.\r\n   * @default \"before\"\r\n   */\r\n  @property({ attribute: \"header-position\", reflect: true }) headerPosition: TabHeaderPosition = \"before\";\r\n\r\n  /**\r\n   * The appearance variant of the tabs.\r\n   * @default \"secondary\"\r\n   */\r\n  @property({ reflect: true }) variant: TabVariant = \"secondary\";\r\n\r\n  /**\r\n   * Whether tabs are stretched to fill the header.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) stretch = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous page.\r\n   * @default \"Previous page\"\r\n   */\r\n  @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next page.\r\n   * @default \"Next page\"\r\n   */\r\n  @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n  /** The tabs. */\r\n  get tabs(): readonly M3eTabElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected tab. */\r\n  get selectedTab(): M3eTabElement | null {\r\n    return this._selectedIndex !== null ? (this.tabs[this._selectedIndex] ?? null) : null;\r\n  }\r\n\r\n  /** The zero-based index of the selected tab. */\r\n  get selectedIndex(): number {\r\n    return this._selectedIndex ?? -1;\r\n  }\r\n  set selectedIndex(value: number) {\r\n    if (value >= 0 && value < this.tabs.length) {\r\n      this.tabs[value].selected = true;\r\n    } else {\r\n      const selectedTab = this.selectedTab;\r\n      if (selectedTab) {\r\n        selectedTab.selected = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    addCustomState(this, \"--no-animate\");\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => {\r\n      this.requestUpdate();\r\n      this[selectionManager].directionality = M3eDirectionality.current;\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if ((_changedProperties.has(\"variant\") || _changedProperties.has(\"stretch\")) && this._selectedIndex !== null) {\r\n      this.#updateInkBar();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    let panelIndex: number | undefined;\r\n    if (this.selectedTab?.control) {\r\n      panelIndex = [...this.querySelectorAll(\"[slot='panel']\")].indexOf(this.selectedTab.control);\r\n      if (panelIndex === -1) {\r\n        panelIndex = undefined;\r\n      }\r\n    }\r\n\r\n    return html` ${this.headerPosition === \"before\" ? this.#renderHeader() : nothing}\r\n      <m3e-slide class=\"tabs\" selected-index=\"${ifDefined(panelIndex)}\">\r\n        <slot name=\"panel\"></slot>\r\n      </m3e-slide>\r\n      ${this.headerPosition === \"after\" ? this.#renderHeader() : nothing}`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderHeader(): unknown {\r\n    return html`<m3e-slide-group\r\n      class=\"tablist\"\r\n      threshold=\"8\"\r\n      previous-page-label=\"${this.previousPageLabel}\"\r\n      next-page-label=\"${this.nextPageLabel}\"\r\n      ?disabled=\"${this.disablePagination}\"\r\n    >\r\n      <slot name=\"prev-icon\" slot=\"prev-icon\">\r\n        ${M3eDirectionality.current === \"ltr\"\r\n          ? html`<svg class=\"prev icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"next icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`}\r\n      </slot>\r\n      <slot name=\"next-icon\" slot=\"next-icon\">\r\n        ${M3eDirectionality.current === \"ltr\"\r\n          ? html`<svg class=\"next icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"prev icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`}\r\n      </slot>\r\n      <div class=\"header\" role=\"tablist\">\r\n        <div class=\"tabs\">\r\n          <slot\r\n            @slotchange=\"${this.#handleSlotChange}\"\r\n            @keydown=\"${this.#handleKeyDown}\"\r\n            @change=\"${this.#handleChange}\"\r\n          ></slot>\r\n        </div>\r\n        <div class=\"ink-bar\" aria-hidden=\"true\">\r\n          <div class=\"active-indicator\"></div>\r\n        </div>\r\n      </div>\r\n    </m3e-slide-group>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    this[selectionManager].setItems([...this.querySelectorAll(\"m3e-tab\")]);\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this[selectionManager].onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleSelectedChange(): void {\r\n    const selected = this[selectionManager].selectedItems[0];\r\n    let selectedIndex = selected ? this.tabs.indexOf(selected) : null;\r\n    if (selectedIndex === -1) {\r\n      selectedIndex = null;\r\n    }\r\n    this._selectedIndex = selectedIndex;\r\n    this.#updateInkBar();\r\n  }\r\n\r\n  /** @private */\r\n  #updateInkBar(): void {\r\n    if (!this._tablist) return;\r\n    const selected = this[selectionManager].selectedItems[0];\r\n    let left = 0;\r\n    let width = 0;\r\n\r\n    if (selected && this._selectedIndex !== null) {\r\n      for (let i = 0; i < this._selectedIndex; i++) {\r\n        left += this.tabs[i].clientWidth;\r\n      }\r\n\r\n      width = selected.clientWidth;\r\n      if (this.variant === \"primary\" && selected.label) {\r\n        left += selected.label.offsetLeft;\r\n        width = selected.label.clientWidth;\r\n        if (width < MIN_PRIMARY_TAB_WIDTH) {\r\n          left -= (MIN_PRIMARY_TAB_WIDTH - width) / 2;\r\n          width = MIN_PRIMARY_TAB_WIDTH;\r\n        }\r\n      }\r\n    }\r\n\r\n    this._tablist.style.setProperty(\"--_tabs-active-tab-position\", `${left}px`);\r\n    this._tablist.style.setProperty(\"--_tabs-active-tab-size\", `${width}px`);\r\n\r\n    if (width > 0 && hasCustomState(this, \"--no-animate\")) {\r\n      setTimeout(() => deleteCustomState(this, \"--no-animate\"));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tabs\": M3eTabsElement;\r\n  }\r\n}\r\n"],"names":["M3eTabElement","M3eTabElement_1","Selected","HtmlFor","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","_M3eTabElement_clickHandler","set","this","e","__classPrivateFieldGet","call","attach","control","super","id","__nextId","addAriaReferencedId","detach","removeAriaReferencedId","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","update","changedProperties","has","closest","selectionManager","notifySelectionChange","render","html","disabled","preventDefault","stopImmediatePropagation","defaultPrevented","selected","dispatchEvent","Event","bubbles","cancelable","styles","css","DesignToken","density","calc","typescale","standard","title","small","fontSize","fontWeight","lineHeight","tracking","shape","corner","large","color","primary","onSurfaceVariant","onSurface","__decorate","query","prototype","customElement","M3eTabPanelElement","slot","scrollbar","width","M3eTabsElement","_M3eTabsElement_directionalitySubscription","_selectedIndex","_a","SelectionManager","onSelectedItemsChange","_M3eTabsElement_instances","_M3eTabsElement_handleSelectedChange","withHomeAndEnd","withWrap","withDirectionality","M3eDirectionality","current","disablePagination","headerPosition","variant","stretch","previousPageLabel","nextPageLabel","ResizeController","skipInitial","callback","addCustomState","_M3eTabsElement_updateInkBar","tabs","items","selectedTab","selectedIndex","value","length","__classPrivateFieldSet","observe","requestUpdate","directionality","updated","panelIndex","querySelectorAll","indexOf","undefined","nothing","ifDefined","_M3eTabsElement_renderHeader","_M3eTabsElement_handleSlotChange","_M3eTabsElement_handleKeyDown","_M3eTabsElement_handleChange","setItems","onKeyDown","stopPropagation","selectedItems","_tablist","left","i","clientWidth","label","offsetLeft","style","setProperty","hasCustomState","setTimeout","deleteCustomState","unsafeCSS","motion","duration","long2","easing","outlineVariant","extraSmallTop","extraSmallBottom","state","property","attribute","type","Boolean","reflect"],"mappings":"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"}

package/dist/toc.js

@@ -17,7 +17,7 @@ import { SelectionManager } from '@m3e/web/core/a11y';
  *
  * @attr disabled - A value indicating whether the element is disabled.
  *
- * @fires click - Emitted when the element is clicked.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-toc-item-shape - Border radius of the TOC item.
  * @cssprop --m3e-toc-item-padding-block - Block padding for the TOC item.

package/dist/toc.js.map

@@ -1 +1 @@
-{"version":3,"file":"toc.js","sources":["../../src/toc/TocItemElement.ts","../../src/toc/TocGenerator.ts","../../src/toc/TocElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { TocNode } from \"./TocGenerator\";\r\n\r\n/**\r\n * An item in a table of contents.\r\n * @tag m3e-toc-item\r\n *\r\n * @slot - Renders the label of the item.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n *\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-toc-item-shape - Border radius of the TOC item.\r\n * @cssprop --m3e-toc-item-padding-block - Block padding for the TOC item.\r\n * @cssprop --m3e-toc-item-padding - Inline padding for the TOC item.\r\n * @cssprop --m3e-toc-item-inset - Indentation per level for the TOC item.\r\n * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.\r\n * @cssprop --m3e-toc-item-font-size - Font size for unselected items.\r\n * @cssprop --m3e-toc-item-font-weight - Font weight for unselected items.\r\n * @cssprop --m3e-toc-item-line-height - Line height for unselected items.\r\n * @cssprop --m3e-toc-item-tracking - Letter spacing for unselected items.\r\n * @cssprop --m3e-toc-item-color - Text color for unselected items.\r\n * @cssprop --m3e-toc-item-selected-font-size - Font size for selected items.\r\n * @cssprop --m3e-toc-item-selected-font-weight - Font weight for selected items.\r\n * @cssprop --m3e-toc-item-selected-line-height - Line height for selected items.\r\n * @cssprop --m3e-toc-item-selected-tracking - Letter spacing for selected items.\r\n * @cssprop --m3e-toc-item-selected-color - Text color for selected items.\r\n */\r\n@customElement(\"m3e-toc-item\")\r\nexport class M3eTocItemElement extends Selected(Disabled(AttachInternals(Role(LitElement, \"link\")))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      user-select: none;\r\n      outline: none;\r\n      border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased});\r\n      padding-block: var(--m3e-toc-item-padding-block, 0.5rem);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    .base {\r\n      padding-inline-start: calc(\r\n        var(--m3e-toc-item-padding, 1rem) + calc(var(--m3e-toc-item-inset, 0.75rem) * var(--_level, 0))\r\n      );\r\n      padding-inline-end: var(--m3e-toc-item-padding, 1rem);\r\n      transition: ${unsafeCSS(\r\n        `color var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1}) ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    :host(:not([selected])) {\r\n      font-size: var(--m3e-toc-item-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n      font-weight: var(--m3e-toc-item-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n      line-height: var(--m3e-toc-item-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-toc-item-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n      color: var(--m3e-toc-item-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host([selected]) {\r\n      font-size: var(--m3e-toc-item-selected-font-size, ${DesignToken.typescale.emphasized.body.large.fontSize});\r\n      font-weight: var(--m3e-toc-item-selected-font-weight, ${DesignToken.typescale.emphasized.body.large.fontWeight});\r\n      line-height: var(--m3e-toc-item-selected-line-height, ${DesignToken.typescale.emphasized.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-toc-item-selected-tracking, ${DesignToken.typescale.emphasized.body.large.tracking});\r\n      color: var(--m3e-toc-item-selected-color, ${DesignToken.color.onSurface});\r\n    }\r\n    .base {\r\n      justify-content: unset;\r\n    }\r\n    .state-layer {\r\n      --m3e-state-layer-focus-opacity: 0;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @internal */ @state() node?: TocNode;\r\n\r\n  /** @internal */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.ariaSelected = null;\r\n      this.ariaCurrent = this.selected ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"node\")) {\r\n      if (this.node) {\r\n        this._base?.style.setProperty(\"--_level\", `${this.node.level - 1}`);\r\n      } else {\r\n        this._base?.style.removeProperty(\"--_level\");\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this._stateLayer?.attach(this);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<m3e-state-layer class=\"state-layer\"></m3e-state-layer>\r\n      <div class=\"base\"><slot></slot></div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toc-item\": M3eTocItemElement;\r\n  }\r\n}\r\n","import { getTextContent, guid } from \"@m3e/web/core\";\r\n\r\n/** A node in a table of contents. */\r\nexport interface TocNode {\r\n  /** An opaque identifier that uniquely identifies the node. */\r\n  id: string;\r\n\r\n  /** The level of the node. */\r\n  level: number;\r\n\r\n  /** The text to display for the node. */\r\n  label: string;\r\n\r\n  /** The element of the node. */\r\n  element: HTMLElement;\r\n\r\n  /** The child nodes. */\r\n  nodes: TocNode[];\r\n}\r\n\r\n/** Provides functionality used to generate a table of contents used for in-page navigation. */\r\nexport class TocGenerator {\r\n  /**\r\n   * Generates nodes from which to construct a table of contents for in-page navigation.\r\n   * @param {HTMLElement} element The element for which to generate a table of contents.\r\n   * @param {number} [maxDepth=6] The maximum depth of the table of contents.\r\n   * @returns {Array<TocNode>} The top-level nodes of the table of contents.\r\n   */\r\n  static generate(element: HTMLElement, maxDepth: number = 6): Array<TocNode> {\r\n    const maxLevel = 6;\r\n    let topLevel = maxLevel;\r\n    const nodes = new Array<TocNode>();\r\n    element\r\n      .querySelectorAll<HTMLElement>(\r\n        \"h1:not([m3e-toc-ignore]),h2:not([m3e-toc-ignore]),h3:not([m3e-toc-ignore]),h4:not([m3e-toc-ignore]),h5:not([m3e-toc-ignore]),h6:not([m3e-toc-ignore]),m3e-heading[level]:not([m3e-toc-ignore])\",\r\n      )\r\n      .forEach((element) => {\r\n        const level = TocGenerator.#getHeaderLevel(element);\r\n        topLevel = Math.min(level, topLevel);\r\n        nodes.push({\r\n          id: element.id || guid(),\r\n          element,\r\n          level,\r\n          label: getTextContent(element, true),\r\n          nodes: new Array<TocNode>(),\r\n        });\r\n      });\r\n\r\n    for (let level = topLevel + maxDepth - 1; level > topLevel; level--) {\r\n      for (let i = 0; i < nodes.length; i++) {\r\n        const node = nodes[i];\r\n        if (node.level === level) {\r\n          for (let j = i; j >= 0; j--) {\r\n            const prev = nodes[j];\r\n            if (prev.level < level) {\r\n              prev.nodes.push(node);\r\n              break;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    nodes.forEach((x) => (x.level -= topLevel - 1));\r\n    return nodes.filter((x) => x.level === 1);\r\n  }\r\n\r\n  /** @internal */\r\n  static #getHeaderLevel(element: HTMLElement): number {\r\n    return element.tagName.startsWith(\"H\")\r\n      ? parseInt(element.tagName.substring(1))\r\n      : parseInt(element.getAttribute(\"level\") ?? \"0\");\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  debounce,\r\n  DesignToken,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  HtmlFor,\r\n  IntersectionController,\r\n  MutationController,\r\n  Role,\r\n  ScrollController,\r\n  scrollIntoViewIfNeeded,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eTocItemElement } from \"./TocItemElement\";\r\nimport { TocGenerator, TocNode } from \"./TocGenerator\";\r\n\r\n/**\r\n * A table of contents that provides in-page scroll navigation.\r\n *\r\n * @description\r\n * The `m3e-toc` component generates a hierarchical table of contents for in-page navigation.\r\n * It automatically detects headings or sections in a target element, builds a navigable list,\r\n * and highlights the active section as the user scrolls. The component supports custom header\r\n * slots, depth limiting, smooth scrolling, and extensive theming via CSS custom properties.\r\n *\r\n * To exclude a heading from the generated table of contents, add the `m3e-toc-ignore` attribute\r\n * to that heading element.\r\n *\r\n * @example\r\n * ```html\r\n * <m3e-toc for=\"content\" max-depth=\"3\">\r\n *   <span slot=\"overline\">Contents</span>\r\n *   <span slot=\"title\">Documentation</span>\r\n * </m3e-toc>\r\n * <div id=\"content\">\r\n *   <h2>Introduction</h2>\r\n *   <h2>Getting Started</h2>\r\n *   <h3>Installation</h3>\r\n *   <h3>Usage</h3>\r\n *   <h2>API Reference</h2>\r\n * </div>\r\n * ```\r\n *\r\n * @tag m3e-toc\r\n *\r\n * @slot - Renders content between the header and items.\r\n * @slot overline - Renders the overline of the table of contents.\r\n * @slot title - Renders the title of the table of contents.\r\n *\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr max-depth - The maximum depth of the table of contents.\r\n *\r\n * @cssprop --m3e-toc-width - Width of the table of contents.\r\n * @cssprop --m3e-toc-item-shape - Border radius of TOC items and active indicator.\r\n * @cssprop --m3e-toc-active-indicator-color - Border color of the active indicator.\r\n * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.\r\n * @cssprop --m3e-toc-item-padding - Inline padding for TOC items and header.\r\n * @cssprop --m3e-toc-header-space - Block space below and between header elements.\r\n * @cssprop --m3e-toc-overline-font-size - Font size for the overline slot.\r\n * @cssprop --m3e-toc-overline-font-weight - Font weight for the overline slot.\r\n * @cssprop --m3e-toc-overline-line-height - Line height for the overline slot.\r\n * @cssprop --m3e-toc-overline-tracking - Letter spacing for the overline slot.\r\n * @cssprop --m3e-toc-overline-color - Text color for the overline slot.\r\n * @cssprop --m3e-toc-title-font-size - Font size for the title slot.\r\n * @cssprop --m3e-toc-title-font-weight - Font weight for the title slot.\r\n * @cssprop --m3e-toc-title-line-height - Line height for the title slot.\r\n * @cssprop --m3e-toc-title-tracking - Letter spacing for the title slot.\r\n * @cssprop --m3e-toc-title-color - Text color for the title slot.\r\n */\r\n@customElement(\"m3e-toc\")\r\nexport class M3eTocElement extends HtmlFor(AttachInternals(Role(LitElement, \"navigation\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      overflow-y: auto;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      width: var(--m3e-toc-width, 9.75rem);\r\n    }\r\n    ul {\r\n      list-style: none;\r\n      padding-inline-start: unset;\r\n      margin-block-start: unset;\r\n      margin-block-end: unset;\r\n    }\r\n    ul,\r\n    li {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n    }\r\n    m3e-toc-item {\r\n      flex: none;\r\n    }\r\n    .active-indicator {\r\n      position: absolute;\r\n      pointer-events: none;\r\n      box-sizing: border-box;\r\n      left: 0;\r\n      right: 0;\r\n\r\n      border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased});\r\n      border: 1px solid var(--m3e-toc-active-indicator-color, ${DesignToken.color.outline});\r\n      transition: ${unsafeCSS(`visibility var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard},\r\n        height var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard},\r\n        top var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .header {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n      padding-inline-start: var(--m3e-toc-item-padding, 1rem);\r\n      padding-block-end: var(--m3e-toc-header-space, 0.5rem);\r\n      row-gap: var(--m3e-toc-header-space, 0.5rem);\r\n    }\r\n    .overline {\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n    .title {\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n    }\r\n    :host(:not(:is(:state(--with-overline), :--with-overline))) .overline,\r\n    :host(:not(:is(:state(--with-title), :--with-title))) .title,\r\n    :host(:not(:is(:state(--with-overline), :--with-overline)):not(:is(:state(--with-title), :--with-title))) .header {\r\n      display: none;\r\n    }\r\n    ::slotted([slot=\"overline\"]) {\r\n      font-size: var(--m3e-toc-overline-font-size, ${DesignToken.typescale.standard.label.small.fontSize});\r\n      font-weight: var(--m3e-toc-overline-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight});\r\n      line-height: var(--m3e-toc-overline-line-height, ${DesignToken.typescale.standard.label.small.lineHeight});\r\n      letter-spacing: var(--m3e-toc-overline-tracking, ${DesignToken.typescale.standard.label.small.tracking});\r\n      color: var(--m3e-toc-overline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    ::slotted([slot=\"title\"]) {\r\n      font-size: var(--m3e-toc-title-font-size, ${DesignToken.typescale.standard.headline.small.fontSize});\r\n      font-weight: var(--m3e-toc-title-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight});\r\n      line-height: var(--m3e-toc-title-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight});\r\n      letter-spacing: var(--m3e-toc-title-tracking, ${DesignToken.typescale.standard.headline.small.tracking});\r\n      color: var(--m3e-toc-title-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:is(:state(--no-animate), :--no-animate)) .active-indicator {\r\n      transition: none;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .active-indicator {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @state() private _toc: Array<TocNode> = [];\r\n  /** @private */ @query(\".active-indicator\") private readonly _activeIndicator!: HTMLElement;\r\n  /** @private */ #ignoreScroll = false;\r\n\r\n  /** @private */ readonly #selectionManager = new SelectionManager<M3eTocItemElement>()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation()\r\n    .disableRovingTabIndex()\r\n    .onSelectedItemsChange(() => {\r\n      if (this._activeIndicator) {\r\n        const item = this.#selectionManager.selectedItems[0];\r\n        if (!item) {\r\n          setCustomState(this, \"--no-animate\", true);\r\n          this._activeIndicator.style.top = `0px`;\r\n          this._activeIndicator.style.height = `0px`;\r\n          this._activeIndicator.style.visibility = \"hidden\";\r\n        } else {\r\n          scrollIntoViewIfNeeded(item, this, { block: \"nearest\", behavior: \"smooth\" });\r\n          this._activeIndicator.style.top = `${item.offsetTop}px`;\r\n          this._activeIndicator.style.height = `${item.clientHeight}px`;\r\n          this._activeIndicator.style.visibility = item.clientHeight == 0 ? \"hidden\" : \"\";\r\n\r\n          if (hasCustomState(this, \"--no-animate\")) {\r\n            setTimeout(() => setCustomState(this, \"--no-animate\", false), 40);\r\n          }\r\n        }\r\n      }\r\n    });\r\n\r\n  /** @private */\r\n  readonly #intersectionController = new IntersectionController(this, {\r\n    target: null,\r\n    callback: (entries) => {\r\n      if (!this.control || this.#ignoreScroll) return;\r\n\r\n      const targetOffset = this.control.scrollTop;\r\n      let closestElement: HTMLElement | null = null;\r\n      let closestDistance = Number.POSITIVE_INFINITY;\r\n\r\n      entries\r\n        .filter((x) => x.isIntersecting)\r\n        .map((x) => <HTMLElement>x.target)\r\n        .forEach((item) => {\r\n          const offsetTop = item.offsetTop;\r\n          const distance = Math.abs(offsetTop - targetOffset);\r\n          if (distance < closestDistance) {\r\n            closestDistance = distance;\r\n            closestElement = item;\r\n          }\r\n        });\r\n\r\n      if (closestElement) {\r\n        const item = this.#selectionManager.items.find((x) => x.node?.element === closestElement);\r\n        if (item) {\r\n          this.#selectionManager.select(item);\r\n        }\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */\r\n  readonly #scrollController = new ScrollController(this, {\r\n    target: null,\r\n    callback: () => (this.#ignoreScroll = false),\r\n    debounce: true,\r\n  });\r\n\r\n  /** @private */\r\n  readonly #mutationController = new MutationController(this, {\r\n    target: null,\r\n    config: {\r\n      childList: true,\r\n      subtree: true,\r\n    },\r\n    callback: () => this._updateToc(),\r\n  });\r\n\r\n  /**\r\n   * The maximum depth of the table of contents.\r\n   * @default 2\r\n   */\r\n  @property({ attribute: \"max-depth\", type: Number }) maxDepth = 2;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n    this.#mutationController.observe(control);\r\n    this.#scrollController.observe(control);\r\n    this.#generateToc();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control) {\r\n      this.#mutationController.unobserve(this.control);\r\n      this.#scrollController.unobserve(this.control);\r\n    }\r\n    super.detach();\r\n    this.#generateToc();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"maxDepth\")) {\r\n      this.#generateToc();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"_toc\")) {\r\n      const { added, removed } = this.#selectionManager.setItems([\r\n        ...(this.shadowRoot?.querySelectorAll(\"m3e-toc-item\") ?? []),\r\n      ]);\r\n\r\n      if (!this.#selectionManager.activeItem) {\r\n        setCustomState(this, \"--no-animate\", true);\r\n        this.#selectionManager.updateActiveItem(added.find((x) => !x.disabled));\r\n      }\r\n\r\n      for (const item of added) {\r\n        if (item.node) {\r\n          this.#intersectionController.observe(item.node.element);\r\n        }\r\n      }\r\n\r\n      for (const item of removed) {\r\n        if (item.node) {\r\n          this.#intersectionController.unobserve(item.node.element);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"header\">\r\n        <div class=\"overline\">\r\n          <slot name=\"overline\" @slotchange=\"${this.#handleOverlineSlotChange}\"></slot>\r\n        </div>\r\n        <div class=\"title\">\r\n          <slot name=\"title\" @slotchange=\"${this.#handleTitleSlotChange}\"></slot>\r\n        </div>\r\n      </div>\r\n      <slot></slot>\r\n      <ul class=\"list\">\r\n        ${this._toc.map((x) => this.#renderNode(x))}\r\n      </ul>\r\n      <div class=\"active-indicator\" aria-hidden=\"true\"></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderNode(node: TocNode): unknown {\r\n    return html`<li>\r\n      <m3e-toc-item tabindex=\"-1\" .node=\"${node}\" @click=\"${this.#handleClick}\">${node.label}</m3e-toc-item>\r\n      ${node.nodes.length == 0\r\n        ? nothing\r\n        : html`<ul>\r\n            ${node.nodes.map((x) => this.#renderNode(x))}\r\n          </ul>`}\r\n    </li>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleOverlineSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-overline\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleTitleSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-title\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.target instanceof M3eTocItemElement && !e.target.disabled && e.target.node?.element) {\r\n      this.#ignoreScroll = true;\r\n      e.target.node.element.scrollIntoView({ block: \"start\", behavior: \"smooth\" });\r\n      this.#selectionManager.updateActiveItem(e.target);\r\n      this.#selectionManager.select(e.target);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #generateToc(): void {\r\n    this._toc = this.control ? TocGenerator.generate(this.control, Math.max(1, Math.min(this.maxDepth, 6))) : [];\r\n  }\r\n\r\n  /** @private */\r\n  @debounce(40)\r\n  private _updateToc(): void {\r\n    this.#generateToc();\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toc\": M3eTocElement;\r\n  }\r\n}\r\n"],"names":["M3eTocItemElement","Selected","Disabled","AttachInternals","Role","LitElement","update","changedProperties","has","ariaSelected","ariaCurrent","selected","node","_base","style","setProperty","level","removeProperty","firstUpdated","_changedProperties","_stateLayer","attach","render","html","styles","css","DesignToken","shape","corner","largeIncreased","unsafeCSS","motion","duration","long1","easing","standard","typescale","body","large","fontSize","fontWeight","lineHeight","tracking","color","onSurfaceVariant","emphasized","onSurface","__decorate","query","prototype","state","customElement","TocGenerator","generate","element","maxDepth","maxLevel","topLevel","nodes","Array","querySelectorAll","forEach","__classPrivateFieldGet","_a","_TocGenerator_getHeaderLevel","Math","min","push","id","guid","label","getTextContent","i","length","j","prev","x","filter","tagName","startsWith","parseInt","substring","getAttribute","M3eTocElement","HtmlFor","constructor","_toc","_M3eTocElement_ignoreScroll","set","_M3eTocElement_selectionManager","SelectionManager","withHomeAndEnd","withVerticalOrientation","disableRovingTabIndex","onSelectedItemsChange","_activeIndicator","item","selectedItems","setCustomState","top","height","visibility","scrollIntoViewIfNeeded","block","behavior","offsetTop","clientHeight","hasCustomState","setTimeout","_M3eTocElement_intersectionController","IntersectionController","target","callback","entries","control","targetOffset","scrollTop","closestElement","closestDistance","Number","POSITIVE_INFINITY","isIntersecting","map","distance","abs","items","find","select","_M3eTocElement_scrollController","ScrollController","__classPrivateFieldSet","debounce","_M3eTocElement_mutationController","MutationController","config","childList","subtree","_updateToc","observe","_M3eTocElement_instances","_M3eTocElement_generateToc","call","detach","unobserve","willUpdate","updated","added","removed","setItems","shadowRoot","activeItem","updateActiveItem","disabled","_M3eTocElement_handleOverlineSlotChange","_M3eTocElement_handleTitleSlotChange","_M3eTocElement_renderNode","nothing","e","hasAssignedNodes","scrollIntoView","max","scrollbar","thinWidth","outline","small","headline","property","attribute","type"],"mappings":"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"}
+{"version":3,"file":"toc.js","sources":["../../src/toc/TocItemElement.ts","../../src/toc/TocGenerator.ts","../../src/toc/TocElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { TocNode } from \"./TocGenerator\";\r\n\r\n/**\r\n * An item in a table of contents.\r\n * @tag m3e-toc-item\r\n *\r\n * @slot - Renders the label of the item.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n *\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-toc-item-shape - Border radius of the TOC item.\r\n * @cssprop --m3e-toc-item-padding-block - Block padding for the TOC item.\r\n * @cssprop --m3e-toc-item-padding - Inline padding for the TOC item.\r\n * @cssprop --m3e-toc-item-inset - Indentation per level for the TOC item.\r\n * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.\r\n * @cssprop --m3e-toc-item-font-size - Font size for unselected items.\r\n * @cssprop --m3e-toc-item-font-weight - Font weight for unselected items.\r\n * @cssprop --m3e-toc-item-line-height - Line height for unselected items.\r\n * @cssprop --m3e-toc-item-tracking - Letter spacing for unselected items.\r\n * @cssprop --m3e-toc-item-color - Text color for unselected items.\r\n * @cssprop --m3e-toc-item-selected-font-size - Font size for selected items.\r\n * @cssprop --m3e-toc-item-selected-font-weight - Font weight for selected items.\r\n * @cssprop --m3e-toc-item-selected-line-height - Line height for selected items.\r\n * @cssprop --m3e-toc-item-selected-tracking - Letter spacing for selected items.\r\n * @cssprop --m3e-toc-item-selected-color - Text color for selected items.\r\n */\r\n@customElement(\"m3e-toc-item\")\r\nexport class M3eTocItemElement extends Selected(Disabled(AttachInternals(Role(LitElement, \"link\")))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      user-select: none;\r\n      outline: none;\r\n      border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased});\r\n      padding-block: var(--m3e-toc-item-padding-block, 0.5rem);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    .base {\r\n      padding-inline-start: calc(\r\n        var(--m3e-toc-item-padding, 1rem) + calc(var(--m3e-toc-item-inset, 0.75rem) * var(--_level, 0))\r\n      );\r\n      padding-inline-end: var(--m3e-toc-item-padding, 1rem);\r\n      transition: ${unsafeCSS(\r\n        `color var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1}) ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    :host(:not([selected])) {\r\n      font-size: var(--m3e-toc-item-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n      font-weight: var(--m3e-toc-item-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n      line-height: var(--m3e-toc-item-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-toc-item-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n      color: var(--m3e-toc-item-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host([selected]) {\r\n      font-size: var(--m3e-toc-item-selected-font-size, ${DesignToken.typescale.emphasized.body.large.fontSize});\r\n      font-weight: var(--m3e-toc-item-selected-font-weight, ${DesignToken.typescale.emphasized.body.large.fontWeight});\r\n      line-height: var(--m3e-toc-item-selected-line-height, ${DesignToken.typescale.emphasized.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-toc-item-selected-tracking, ${DesignToken.typescale.emphasized.body.large.tracking});\r\n      color: var(--m3e-toc-item-selected-color, ${DesignToken.color.onSurface});\r\n    }\r\n    .base {\r\n      justify-content: unset;\r\n    }\r\n    .state-layer {\r\n      --m3e-state-layer-focus-opacity: 0;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @internal */ @state() node?: TocNode;\r\n\r\n  /** @internal */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.ariaSelected = null;\r\n      this.ariaCurrent = this.selected ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"node\")) {\r\n      if (this.node) {\r\n        this._base?.style.setProperty(\"--_level\", `${this.node.level - 1}`);\r\n      } else {\r\n        this._base?.style.removeProperty(\"--_level\");\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this._stateLayer?.attach(this);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<m3e-state-layer class=\"state-layer\"></m3e-state-layer>\r\n      <div class=\"base\"><slot></slot></div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toc-item\": M3eTocItemElement;\r\n  }\r\n}\r\n","import { getTextContent, guid } from \"@m3e/web/core\";\r\n\r\n/** A node in a table of contents. */\r\nexport interface TocNode {\r\n  /** An opaque identifier that uniquely identifies the node. */\r\n  id: string;\r\n\r\n  /** The level of the node. */\r\n  level: number;\r\n\r\n  /** The text to display for the node. */\r\n  label: string;\r\n\r\n  /** The element of the node. */\r\n  element: HTMLElement;\r\n\r\n  /** The child nodes. */\r\n  nodes: TocNode[];\r\n}\r\n\r\n/** Provides functionality used to generate a table of contents used for in-page navigation. */\r\nexport class TocGenerator {\r\n  /**\r\n   * Generates nodes from which to construct a table of contents for in-page navigation.\r\n   * @param {HTMLElement} element The element for which to generate a table of contents.\r\n   * @param {number} [maxDepth=6] The maximum depth of the table of contents.\r\n   * @returns {Array<TocNode>} The top-level nodes of the table of contents.\r\n   */\r\n  static generate(element: HTMLElement, maxDepth: number = 6): Array<TocNode> {\r\n    const maxLevel = 6;\r\n    let topLevel = maxLevel;\r\n    const nodes = new Array<TocNode>();\r\n    element\r\n      .querySelectorAll<HTMLElement>(\r\n        \"h1:not([m3e-toc-ignore]),h2:not([m3e-toc-ignore]),h3:not([m3e-toc-ignore]),h4:not([m3e-toc-ignore]),h5:not([m3e-toc-ignore]),h6:not([m3e-toc-ignore]),m3e-heading[level]:not([m3e-toc-ignore])\",\r\n      )\r\n      .forEach((element) => {\r\n        const level = TocGenerator.#getHeaderLevel(element);\r\n        topLevel = Math.min(level, topLevel);\r\n        nodes.push({\r\n          id: element.id || guid(),\r\n          element,\r\n          level,\r\n          label: getTextContent(element, true),\r\n          nodes: new Array<TocNode>(),\r\n        });\r\n      });\r\n\r\n    for (let level = topLevel + maxDepth - 1; level > topLevel; level--) {\r\n      for (let i = 0; i < nodes.length; i++) {\r\n        const node = nodes[i];\r\n        if (node.level === level) {\r\n          for (let j = i; j >= 0; j--) {\r\n            const prev = nodes[j];\r\n            if (prev.level < level) {\r\n              prev.nodes.push(node);\r\n              break;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    nodes.forEach((x) => (x.level -= topLevel - 1));\r\n    return nodes.filter((x) => x.level === 1);\r\n  }\r\n\r\n  /** @internal */\r\n  static #getHeaderLevel(element: HTMLElement): number {\r\n    return element.tagName.startsWith(\"H\")\r\n      ? parseInt(element.tagName.substring(1))\r\n      : parseInt(element.getAttribute(\"level\") ?? \"0\");\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  debounce,\r\n  DesignToken,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  HtmlFor,\r\n  IntersectionController,\r\n  MutationController,\r\n  Role,\r\n  ScrollController,\r\n  scrollIntoViewIfNeeded,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport { M3eTocItemElement } from \"./TocItemElement\";\r\nimport { TocGenerator, TocNode } from \"./TocGenerator\";\r\n\r\n/**\r\n * A table of contents that provides in-page scroll navigation.\r\n *\r\n * @description\r\n * The `m3e-toc` component generates a hierarchical table of contents for in-page navigation.\r\n * It automatically detects headings or sections in a target element, builds a navigable list,\r\n * and highlights the active section as the user scrolls. The component supports custom header\r\n * slots, depth limiting, smooth scrolling, and extensive theming via CSS custom properties.\r\n *\r\n * To exclude a heading from the generated table of contents, add the `m3e-toc-ignore` attribute\r\n * to that heading element.\r\n *\r\n * @example\r\n * ```html\r\n * <m3e-toc for=\"content\" max-depth=\"3\">\r\n *   <span slot=\"overline\">Contents</span>\r\n *   <span slot=\"title\">Documentation</span>\r\n * </m3e-toc>\r\n * <div id=\"content\">\r\n *   <h2>Introduction</h2>\r\n *   <h2>Getting Started</h2>\r\n *   <h3>Installation</h3>\r\n *   <h3>Usage</h3>\r\n *   <h2>API Reference</h2>\r\n * </div>\r\n * ```\r\n *\r\n * @tag m3e-toc\r\n *\r\n * @slot - Renders content between the header and items.\r\n * @slot overline - Renders the overline of the table of contents.\r\n * @slot title - Renders the title of the table of contents.\r\n *\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr max-depth - The maximum depth of the table of contents.\r\n *\r\n * @cssprop --m3e-toc-width - Width of the table of contents.\r\n * @cssprop --m3e-toc-item-shape - Border radius of TOC items and active indicator.\r\n * @cssprop --m3e-toc-active-indicator-color - Border color of the active indicator.\r\n * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.\r\n * @cssprop --m3e-toc-item-padding - Inline padding for TOC items and header.\r\n * @cssprop --m3e-toc-header-space - Block space below and between header elements.\r\n * @cssprop --m3e-toc-overline-font-size - Font size for the overline slot.\r\n * @cssprop --m3e-toc-overline-font-weight - Font weight for the overline slot.\r\n * @cssprop --m3e-toc-overline-line-height - Line height for the overline slot.\r\n * @cssprop --m3e-toc-overline-tracking - Letter spacing for the overline slot.\r\n * @cssprop --m3e-toc-overline-color - Text color for the overline slot.\r\n * @cssprop --m3e-toc-title-font-size - Font size for the title slot.\r\n * @cssprop --m3e-toc-title-font-weight - Font weight for the title slot.\r\n * @cssprop --m3e-toc-title-line-height - Line height for the title slot.\r\n * @cssprop --m3e-toc-title-tracking - Letter spacing for the title slot.\r\n * @cssprop --m3e-toc-title-color - Text color for the title slot.\r\n */\r\n@customElement(\"m3e-toc\")\r\nexport class M3eTocElement extends HtmlFor(AttachInternals(Role(LitElement, \"navigation\"))) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      overflow-y: auto;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      width: var(--m3e-toc-width, 9.75rem);\r\n    }\r\n    ul {\r\n      list-style: none;\r\n      padding-inline-start: unset;\r\n      margin-block-start: unset;\r\n      margin-block-end: unset;\r\n    }\r\n    ul,\r\n    li {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n    }\r\n    m3e-toc-item {\r\n      flex: none;\r\n    }\r\n    .active-indicator {\r\n      position: absolute;\r\n      pointer-events: none;\r\n      box-sizing: border-box;\r\n      left: 0;\r\n      right: 0;\r\n\r\n      border-radius: var(--m3e-toc-item-shape, ${DesignToken.shape.corner.largeIncreased});\r\n      border: 1px solid var(--m3e-toc-active-indicator-color, ${DesignToken.color.outline});\r\n      transition: ${unsafeCSS(`visibility var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard},\r\n        height var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard},\r\n        top var(--m3e-toc-active-indicator-animation-duration, ${DesignToken.motion.duration.long1})\r\n          ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .header {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n      padding-inline-start: var(--m3e-toc-item-padding, 1rem);\r\n      padding-block-end: var(--m3e-toc-header-space, 0.5rem);\r\n      row-gap: var(--m3e-toc-header-space, 0.5rem);\r\n    }\r\n    .overline {\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n    .title {\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n    }\r\n    :host(:not(:is(:state(--with-overline), :--with-overline))) .overline,\r\n    :host(:not(:is(:state(--with-title), :--with-title))) .title,\r\n    :host(:not(:is(:state(--with-overline), :--with-overline)):not(:is(:state(--with-title), :--with-title))) .header {\r\n      display: none;\r\n    }\r\n    ::slotted([slot=\"overline\"]) {\r\n      font-size: var(--m3e-toc-overline-font-size, ${DesignToken.typescale.standard.label.small.fontSize});\r\n      font-weight: var(--m3e-toc-overline-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight});\r\n      line-height: var(--m3e-toc-overline-line-height, ${DesignToken.typescale.standard.label.small.lineHeight});\r\n      letter-spacing: var(--m3e-toc-overline-tracking, ${DesignToken.typescale.standard.label.small.tracking});\r\n      color: var(--m3e-toc-overline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    ::slotted([slot=\"title\"]) {\r\n      font-size: var(--m3e-toc-title-font-size, ${DesignToken.typescale.standard.headline.small.fontSize});\r\n      font-weight: var(--m3e-toc-title-font-weight, ${DesignToken.typescale.standard.headline.small.fontWeight});\r\n      line-height: var(--m3e-toc-title-line-height, ${DesignToken.typescale.standard.headline.small.lineHeight});\r\n      letter-spacing: var(--m3e-toc-title-tracking, ${DesignToken.typescale.standard.headline.small.tracking});\r\n      color: var(--m3e-toc-title-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:is(:state(--no-animate), :--no-animate)) .active-indicator {\r\n      transition: none;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .active-indicator {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @state() private _toc: Array<TocNode> = [];\r\n  /** @private */ @query(\".active-indicator\") private readonly _activeIndicator!: HTMLElement;\r\n  /** @private */ #ignoreScroll = false;\r\n\r\n  /** @private */ readonly #selectionManager = new SelectionManager<M3eTocItemElement>()\r\n    .withHomeAndEnd()\r\n    .withVerticalOrientation()\r\n    .disableRovingTabIndex()\r\n    .onSelectedItemsChange(() => {\r\n      if (this._activeIndicator) {\r\n        const item = this.#selectionManager.selectedItems[0];\r\n        if (!item) {\r\n          setCustomState(this, \"--no-animate\", true);\r\n          this._activeIndicator.style.top = `0px`;\r\n          this._activeIndicator.style.height = `0px`;\r\n          this._activeIndicator.style.visibility = \"hidden\";\r\n        } else {\r\n          scrollIntoViewIfNeeded(item, this, { block: \"nearest\", behavior: \"smooth\" });\r\n          this._activeIndicator.style.top = `${item.offsetTop}px`;\r\n          this._activeIndicator.style.height = `${item.clientHeight}px`;\r\n          this._activeIndicator.style.visibility = item.clientHeight == 0 ? \"hidden\" : \"\";\r\n\r\n          if (hasCustomState(this, \"--no-animate\")) {\r\n            setTimeout(() => setCustomState(this, \"--no-animate\", false), 40);\r\n          }\r\n        }\r\n      }\r\n    });\r\n\r\n  /** @private */\r\n  readonly #intersectionController = new IntersectionController(this, {\r\n    target: null,\r\n    callback: (entries) => {\r\n      if (!this.control || this.#ignoreScroll) return;\r\n\r\n      const targetOffset = this.control.scrollTop;\r\n      let closestElement: HTMLElement | null = null;\r\n      let closestDistance = Number.POSITIVE_INFINITY;\r\n\r\n      entries\r\n        .filter((x) => x.isIntersecting)\r\n        .map((x) => <HTMLElement>x.target)\r\n        .forEach((item) => {\r\n          const offsetTop = item.offsetTop;\r\n          const distance = Math.abs(offsetTop - targetOffset);\r\n          if (distance < closestDistance) {\r\n            closestDistance = distance;\r\n            closestElement = item;\r\n          }\r\n        });\r\n\r\n      if (closestElement) {\r\n        const item = this.#selectionManager.items.find((x) => x.node?.element === closestElement);\r\n        if (item) {\r\n          this.#selectionManager.select(item);\r\n        }\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */\r\n  readonly #scrollController = new ScrollController(this, {\r\n    target: null,\r\n    callback: () => (this.#ignoreScroll = false),\r\n    debounce: true,\r\n  });\r\n\r\n  /** @private */\r\n  readonly #mutationController = new MutationController(this, {\r\n    target: null,\r\n    config: {\r\n      childList: true,\r\n      subtree: true,\r\n    },\r\n    callback: () => this._updateToc(),\r\n  });\r\n\r\n  /**\r\n   * The maximum depth of the table of contents.\r\n   * @default 2\r\n   */\r\n  @property({ attribute: \"max-depth\", type: Number }) maxDepth = 2;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n    this.#mutationController.observe(control);\r\n    this.#scrollController.observe(control);\r\n    this.#generateToc();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control) {\r\n      this.#mutationController.unobserve(this.control);\r\n      this.#scrollController.unobserve(this.control);\r\n    }\r\n    super.detach();\r\n    this.#generateToc();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has(\"maxDepth\")) {\r\n      this.#generateToc();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"_toc\")) {\r\n      const { added, removed } = this.#selectionManager.setItems([\r\n        ...(this.shadowRoot?.querySelectorAll(\"m3e-toc-item\") ?? []),\r\n      ]);\r\n\r\n      if (!this.#selectionManager.activeItem) {\r\n        setCustomState(this, \"--no-animate\", true);\r\n        this.#selectionManager.updateActiveItem(added.find((x) => !x.disabled));\r\n      }\r\n\r\n      for (const item of added) {\r\n        if (item.node) {\r\n          this.#intersectionController.observe(item.node.element);\r\n        }\r\n      }\r\n\r\n      for (const item of removed) {\r\n        if (item.node) {\r\n          this.#intersectionController.unobserve(item.node.element);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"header\">\r\n        <div class=\"overline\">\r\n          <slot name=\"overline\" @slotchange=\"${this.#handleOverlineSlotChange}\"></slot>\r\n        </div>\r\n        <div class=\"title\">\r\n          <slot name=\"title\" @slotchange=\"${this.#handleTitleSlotChange}\"></slot>\r\n        </div>\r\n      </div>\r\n      <slot></slot>\r\n      <ul class=\"list\">\r\n        ${this._toc.map((x) => this.#renderNode(x))}\r\n      </ul>\r\n      <div class=\"active-indicator\" aria-hidden=\"true\"></div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderNode(node: TocNode): unknown {\r\n    return html`<li>\r\n      <m3e-toc-item tabindex=\"-1\" .node=\"${node}\" @click=\"${this.#handleClick}\">${node.label}</m3e-toc-item>\r\n      ${node.nodes.length == 0\r\n        ? nothing\r\n        : html`<ul>\r\n            ${node.nodes.map((x) => this.#renderNode(x))}\r\n          </ul>`}\r\n    </li>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleOverlineSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-overline\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleTitleSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-title\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.target instanceof M3eTocItemElement && !e.target.disabled && e.target.node?.element) {\r\n      this.#ignoreScroll = true;\r\n      e.target.node.element.scrollIntoView({ block: \"start\", behavior: \"smooth\" });\r\n      this.#selectionManager.updateActiveItem(e.target);\r\n      this.#selectionManager.select(e.target);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #generateToc(): void {\r\n    this._toc = this.control ? TocGenerator.generate(this.control, Math.max(1, Math.min(this.maxDepth, 6))) : [];\r\n  }\r\n\r\n  /** @private */\r\n  @debounce(40)\r\n  private _updateToc(): void {\r\n    this.#generateToc();\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-toc\": M3eTocElement;\r\n  }\r\n}\r\n"],"names":["M3eTocItemElement","Selected","Disabled","AttachInternals","Role","LitElement","update","changedProperties","has","ariaSelected","ariaCurrent","selected","node","_base","style","setProperty","level","removeProperty","firstUpdated","_changedProperties","_stateLayer","attach","render","html","styles","css","DesignToken","shape","corner","largeIncreased","unsafeCSS","motion","duration","long1","easing","standard","typescale","body","large","fontSize","fontWeight","lineHeight","tracking","color","onSurfaceVariant","emphasized","onSurface","__decorate","query","prototype","state","customElement","TocGenerator","generate","element","maxDepth","maxLevel","topLevel","nodes","Array","querySelectorAll","forEach","__classPrivateFieldGet","_a","_TocGenerator_getHeaderLevel","Math","min","push","id","guid","label","getTextContent","i","length","j","prev","x","filter","tagName","startsWith","parseInt","substring","getAttribute","M3eTocElement","HtmlFor","constructor","_toc","_M3eTocElement_ignoreScroll","set","_M3eTocElement_selectionManager","SelectionManager","withHomeAndEnd","withVerticalOrientation","disableRovingTabIndex","onSelectedItemsChange","_activeIndicator","item","selectedItems","setCustomState","top","height","visibility","scrollIntoViewIfNeeded","block","behavior","offsetTop","clientHeight","hasCustomState","setTimeout","_M3eTocElement_intersectionController","IntersectionController","target","callback","entries","control","targetOffset","scrollTop","closestElement","closestDistance","Number","POSITIVE_INFINITY","isIntersecting","map","distance","abs","items","find","select","_M3eTocElement_scrollController","ScrollController","__classPrivateFieldSet","debounce","_M3eTocElement_mutationController","MutationController","config","childList","subtree","_updateToc","observe","_M3eTocElement_instances","_M3eTocElement_generateToc","call","detach","unobserve","willUpdate","updated","added","removed","setItems","shadowRoot","activeItem","updateActiveItem","disabled","_M3eTocElement_handleOverlineSlotChange","_M3eTocElement_handleTitleSlotChange","_M3eTocElement_renderNode","nothing","e","hasAssignedNodes","scrollIntoView","max","scrollbar","thinWidth","outline","small","headline","property","attribute","type"],"mappings":"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"}