@sandlada/mdc 0.1.0-20250907.a

package/build/components/navigation-item/base-navigation-tab.js

@@ -0,0 +1 @@
+import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{i as e,x as s}from"../../lit-element-Ho-VPzO1.js";import{n}from"../../property-Ck1wIidx.js";import{r as a}from"../../state--U2hSgGK.js";import{e as i}from"../../query-DifSdHBD.js";import{e as o}from"../../class-map-DlMb2KKL.js";import{mixinElementInternals as r,internals as l}from"../../utils/behaviors/element-internals.js";import{isActivationClick as h}from"../../utils/event/form-label-activation.js";import{NavigationTabSingleSelectionController as c}from"./navigation-tab-sigle-selection-controller.js";var d;const p=Symbol("active");class g extends(r(e)){static{d=p}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}get name(){return this.getAttribute("name")??""}set name(t){this.setAttribute("name",t)}get active(){return this[p]}set active(t){if(t===this[p])return;const e=this[p];this[p]=t,this.requestUpdate("checked",e),this.selectionController.handleCheckedChange()}constructor(){super(),this.hasLabel=!1,this.hasActiveIcon=!1,this.hasInactiveIcon=!1,this.hasBadge=!1,this[d]=!1,this.selectionController=new c(this),this.addController(this.selectionController),this[l].role="tab",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this))}render(){return s`<button id="button" class="${o(this.getRenderClasses())}">${this.renderLabel()} ${this.renderIcon()} ${this.renderIndicator()}<mdc-focus-ring inward for="button" part="focus-ring"></mdc-focus-ring></button>`}renderIndicator(){return s`<span class="indicator"><span class="background"></span><mdc-ripple for="button" part="ripple"></mdc-ripple></span>`}renderLabel(){return s`<span class="label"><slot @slotchange="${this.handleLabelSlotChange}"></slot></span>`}renderIcon(){return s`<span class="icon active-icon"><slot name="active-icon" @slotchange="${this.handleActiveIconSlotChange}"></slot></span><span class="icon inactive-icon"><slot name="inactive-icon" @slotchange="${this.handleInactiveIconSlotChange}"></slot></span>`}renderBadge(){return s`<span class="badge"><slot name="badge" @slotchange="${this.handleBadgeSlotChange}"></slot></span>`}getRenderClasses(){return{"has-label":this.hasLabel,"has-active-icon":this.hasActiveIcon,"has-inactive-icon":this.hasInactiveIcon,"has-badge":this.hasBadge,active:this.active,inactive:!this.active}}async handleClick(t){this.buttonElement&&(await 0,t.defaultPrevented||(h(t)&&this.focus(),this.active=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))))}async handleKeydown(t){await 0}handleLabelSlotChange(t){this.hasLabel=t.target.assignedElements().length>0}handleActiveIconSlotChange(t){this.hasLabel=t.target.assignedElements().length>0}handleInactiveIconSlotChange(t){this.hasInactiveIcon=t.target.assignedElements().length>0}handleBadgeSlotChange(t){this.hasBadge=t.target.assignedElements().length>0}}t([n({type:String,noAccessor:!0})],g.prototype,"name",null),t([n({type:Boolean,attribute:"active",noAccessor:!0})],g.prototype,"active",null),t([a()],g.prototype,"hasLabel",void 0),t([a()],g.prototype,"hasActiveIcon",void 0),t([a()],g.prototype,"hasInactiveIcon",void 0),t([a()],g.prototype,"hasBadge",void 0),t([i("button")],g.prototype,"buttonElement",void 0);export{g as BaseNavigationTab};

package/build/components/navigation-item/navigation-bar-tab.d.ts

@@ -0,0 +1,30 @@
+import { BaseNavigationTab, type TNavigationTabDirection } from './base-navigation-tab';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mdc-navigation-bar-tab": NavigationBarTab;
+    }
+}
+/**
+ *
+ * @version
+ * Material Design 3 - Expressive
+ *
+ * @link
+ * https://www.figma.com/design/4GM7ohCF2Qtjzs7Fra6jlp/Material-3-Design-Kit--Community-?node-id=58016-36959&t=Lo93bap9LHFqZ0Q1-0
+ */
+export declare class NavigationBarTab extends BaseNavigationTab {
+    static styles: import("lit").CSSResult[];
+    direction: TNavigationTabDirection;
+    xr: boolean;
+    protected getRenderClasses(): {
+        'has-label': boolean;
+        'has-active-icon': boolean;
+        'has-inactive-icon': boolean;
+        'has-badge': boolean;
+        active: boolean;
+        inactive: boolean;
+        vertical: boolean;
+        horizonal: boolean;
+    };
+}
+//# sourceMappingURL=navigation-bar-tab.d.ts.map

package/build/components/navigation-item/navigation-bar-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar-tab.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-bar-tab.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,KAAK,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAGvF,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,wBAAwB,EAAE,gBAAgB,CAAA;KAC7C;CACJ;AAED;;;;;;;GAOG;AACH,qBACa,gBAAiB,SAAQ,iBAAiB;IAEnD,OAAgB,MAAM,4BAAwB;IAGvC,SAAS,EAAE,uBAAuB,CAAa;IAG/C,EAAE,EAAE,OAAO,CAAQ;cAEP,gBAAgB;;;;;;;;;;CAatC"}

package/build/components/navigation-item/navigation-bar-tab.js

@@ -0,0 +1 @@
+import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{t as i}from"../../custom-element-Dz3n6kSt.js";import{n as e}from"../../property-Ck1wIidx.js";import{BaseNavigationTab as s}from"./base-navigation-tab.js";import{navigationBarTabStyle as o}from"./navigation-tab.style.js";import"../../lit-element-Ho-VPzO1.js";import"../../state--U2hSgGK.js";import"../../query-DifSdHBD.js";import"../../class-map-DlMb2KKL.js";import"../../utils/behaviors/element-internals.js";import"../../utils/event/form-label-activation.js";import"./navigation-tab-sigle-selection-controller.js";import"../../duration-CDKuKTyT.js";import"../../easing-5hHInU7b.js";import"../../component-definitions/navigation-tab.definition.js";import"../../color-CigMJnjV.js";import"../../shape-CrZ0CLVJ.js";import"../../state-C-haZXan.js";import"../../typescale-Bh1NLwSE.js";import"../../utils/controller/attachable-controller.js";import"../../utils/tokens/create-logic-shape-tokens.js";import"../../utils/tokens/create-wrapped-tokens.js";import"../../utils/tokens/override-component-tokens.js";import"../../utils/tokens/string-tokens.js";let r=class extends s{constructor(){super(...arguments),this.direction="vertical",this.xr=!1}static{this.styles=o}getRenderClasses(){return{"has-label":this.hasLabel,"has-active-icon":this.hasActiveIcon,"has-inactive-icon":this.hasInactiveIcon,"has-badge":this.hasBadge,active:this.active,inactive:!this.active,vertical:"vertical"===this.direction,horizonal:"vertical"!==this.direction}}};t([e({type:String})],r.prototype,"direction",void 0),t([e({type:Boolean,reflect:!0})],r.prototype,"xr",void 0),r=t([i("mdc-navigation-bar-tab")],r);export{r as NavigationBarTab};

package/build/components/navigation-item/navigation-rail-tab.d.ts

@@ -0,0 +1,32 @@
+import { BaseNavigationTab, type TNavigationTabDirection } from './base-navigation-tab';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mdc-navigation-rail-tab": NavigationRailTab;
+    }
+}
+/**
+ *
+ * @version
+ * Material Design 3 - Expressive
+ *
+ * @link
+ * https://www.figma.com/design/4GM7ohCF2Qtjzs7Fra6jlp/Material-3-Design-Kit--Community-?node-id=58016-36303&t=R7G4qUAXpMs1bFlk-0
+ */
+export declare class NavigationRailTab extends BaseNavigationTab {
+    static styles: import("lit").CSSResult[];
+    direction: TNavigationTabDirection;
+    round: boolean;
+    xr: boolean;
+    protected getRenderClasses(): {
+        'has-label': boolean;
+        'has-active-icon': boolean;
+        'has-inactive-icon': boolean;
+        'has-badge': boolean;
+        active: boolean;
+        inactive: boolean;
+        vertical: boolean;
+        horizonal: boolean;
+        round: boolean;
+    };
+}
+//# sourceMappingURL=navigation-rail-tab.d.ts.map

package/build/components/navigation-item/navigation-rail-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail-tab.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-rail-tab.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,KAAK,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAGvF,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,yBAAyB,EAAE,iBAAiB,CAAA;KAC/C;CACJ;AAED;;;;;;;GAOG;AACH,qBACa,iBAAkB,SAAQ,iBAAiB;IAEpD,OAAgB,MAAM,4BAAyB;IAGxC,SAAS,EAAE,uBAAuB,CAAa;IAG/C,KAAK,EAAE,OAAO,CAAQ;IAGtB,EAAE,EAAE,OAAO,CAAQ;cAEP,gBAAgB;;;;;;;;;;;CActC"}

package/build/components/navigation-item/navigation-rail-tab.js

@@ -0,0 +1 @@
+import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{t as i}from"../../custom-element-Dz3n6kSt.js";import{n as o}from"../../property-Ck1wIidx.js";import{BaseNavigationTab as e}from"./base-navigation-tab.js";import{navigationRailTabStyle as s}from"./navigation-tab.style.js";import"../../lit-element-Ho-VPzO1.js";import"../../state--U2hSgGK.js";import"../../query-DifSdHBD.js";import"../../class-map-DlMb2KKL.js";import"../../utils/behaviors/element-internals.js";import"../../utils/event/form-label-activation.js";import"./navigation-tab-sigle-selection-controller.js";import"../../duration-CDKuKTyT.js";import"../../easing-5hHInU7b.js";import"../../component-definitions/navigation-tab.definition.js";import"../../color-CigMJnjV.js";import"../../shape-CrZ0CLVJ.js";import"../../state-C-haZXan.js";import"../../typescale-Bh1NLwSE.js";import"../../utils/controller/attachable-controller.js";import"../../utils/tokens/create-logic-shape-tokens.js";import"../../utils/tokens/create-wrapped-tokens.js";import"../../utils/tokens/override-component-tokens.js";import"../../utils/tokens/string-tokens.js";let r=class extends e{constructor(){super(...arguments),this.direction="vertical",this.round=!1,this.xr=!1}static{this.styles=s}getRenderClasses(){return{"has-label":this.hasLabel,"has-active-icon":this.hasActiveIcon,"has-inactive-icon":this.hasInactiveIcon,"has-badge":this.hasBadge,active:this.active,inactive:!this.active,vertical:"vertical"===this.direction,horizonal:"vertical"!==this.direction,round:this.round}}};t([o({type:String})],r.prototype,"direction",void 0),t([o({type:Boolean})],r.prototype,"round",void 0),t([o({type:Boolean,reflect:!0})],r.prototype,"xr",void 0),r=t([i("mdc-navigation-rail-tab")],r);export{r as NavigationRailTab};

package/build/components/navigation-item/navigation-tab-sigle-selection-controller.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2025 Kai-Orion & Sandlada
+ * SPDX-License-Identifier: MIT
+ */
+import { type ReactiveController } from 'lit';
+export interface ISingleSelectionElement extends HTMLElement {
+    active: boolean;
+}
+export declare class NavigationTabSingleSelectionController implements ReactiveController {
+    get controls(): [ISingleSelectionElement, ...ISingleSelectionElement[]];
+    private focused;
+    private root;
+    private readonly host;
+    constructor(host: ISingleSelectionElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+ * Should be called whenever the host's `checked` property changes
+ * synchronously.
+ */
+    handleCheckedChange(): void;
+    private readonly handleFocusIn;
+    private readonly handleFocusOut;
+    private uncheckSiblings;
+    /**
+     * Updates the `tabindex` of the host and its siblings.
+     */
+    private updateTabIndices;
+    /**
+     * Handles arrow key events from the host. Using the arrow keys will
+     * select and check the next or previous sibling with the host's
+     * `name` attribute.
+     */
+    private readonly handleKeyDown;
+}
+//# sourceMappingURL=navigation-tab-sigle-selection-controller.d.ts.map

package/build/components/navigation-item/navigation-tab-sigle-selection-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-tab-sigle-selection-controller.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-tab-sigle-selection-controller.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,KAAK,CAAA;AAG7C,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IACxD,MAAM,EAAE,OAAO,CAAA;CAClB;AAED,qBAAa,sCAAuC,YAAW,kBAAkB;IAC7E,IAAI,QAAQ,IAAI,CAAC,uBAAuB,EAAE,GAAG,uBAAuB,EAAE,CAAC,CAStE;IAED,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,IAAI,CAA0B;IACtC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAyB;gBAElC,IAAI,EAAE,uBAAuB;IAIzC,aAAa;IAeb,gBAAgB;IASZ;;;GAGD;IACH,mBAAmB;IASnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAG5B;IAEF,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG7B;IAEF,OAAO,CAAC,eAAe;IAQvB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAwBxB;;;;OAIG;IACH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAqE5B;CACL"}

package/build/components/navigation-item/navigation-tab-sigle-selection-controller.js

@@ -0,0 +1,6 @@
+import"../../lit-element-Ho-VPzO1.js";
+/**
+ * @license
+ * Copyright 2025 Kai-Orion & Sandlada
+ * SPDX-License-Identifier: MIT
+ */class t{get controls(){const t=this.host.getAttribute("name");return t&&this.root&&this.host.isConnected?Array.from(this.root.querySelectorAll(`[name="${t}"]`)):[this.host]}constructor(t){this.focused=!1,this.root=null,this.handleFocusIn=()=>{this.focused=!0,this.updateTabIndices()},this.handleFocusOut=()=>{this.focused=!1,this.updateTabIndices()},this.handleKeyDown=t=>{const s="ArrowDown"===t.key,e="ArrowUp"===t.key,o="ArrowLeft"===t.key,n="ArrowRight"===t.key;if(!(o||n||s||e))return;const i=this.controls;if(!i.length)return;t.preventDefault();const h="rtl"===getComputedStyle(this.host).direction?o||s:n||s,c=i.indexOf(this.host);let r=h?c+1:c-1;for(;r!==c;){r>=i.length?r=0:r<0&&(r=i.length-1);const t=i[r];if(!t.hasAttribute("disabled")){for(const s of i)s!==t&&(s.tabIndex=-1,s.blur());t.tabIndex=0,t.focus();break}h?r++:r--}},this.host=t}hostConnected(){this.root=this.host.getRootNode(),this.host.addEventListener("keydown",this.handleKeyDown),this.host.addEventListener("focusin",this.handleFocusIn),this.host.addEventListener("focusout",this.handleFocusOut),this.host.active&&this.uncheckSiblings(),this.updateTabIndices()}hostDisconnected(){this.host.removeEventListener("keydown",this.handleKeyDown),this.host.removeEventListener("focusin",this.handleFocusIn),this.host.removeEventListener("focusout",this.handleFocusOut),this.updateTabIndices(),this.root=null}handleCheckedChange(){this.host.active&&(this.uncheckSiblings(),this.updateTabIndices())}uncheckSiblings(){for(const t of this.controls)t!==this.host&&(t.active=!1)}updateTabIndices(){const t=this.controls,s=t.find(t=>t.active);if(s||this.focused){const e=s||this.host;e.tabIndex=0;for(const s of t)s!==e&&(s.tabIndex=-1);return}for(const s of t)s.tabIndex=0}}export{t as NavigationTabSingleSelectionController};

package/build/components/navigation-item/navigation-tab.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright 2025 Kai-Orion & Sandlada
+ * SPDX-License-Identifier: MIT
+ */
+//# sourceMappingURL=navigation-tab.d.ts.map

package/build/components/navigation-item/navigation-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-tab.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-tab.ts"],"names":[],"mappings":"AAAA;;;;GAIG"}

package/build/components/navigation-item/navigation-tab.js

@@ -0,0 +1 @@
+

package/build/components/navigation-item/navigation-tab.style.d.ts

@@ -0,0 +1,3 @@
+export declare const navigationBarTabStyle: import("lit").CSSResult[];
+export declare const navigationRailTabStyle: import("lit").CSSResult[];
+//# sourceMappingURL=navigation-tab.style.d.ts.map

package/build/components/navigation-item/navigation-tab.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-tab.style.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/navigation-tab.style.ts"],"names":[],"mappings":"AA0PA,eAAO,MAAM,qBAAqB,2BAiEhC,CAAA;AAEF,eAAO,MAAM,sBAAsB,2BA0ElC,CAAA"}

package/build/components/navigation-item/navigation-tab.style.js

@@ -0,0 +1,353 @@
+import{D as i}from"../../duration-CDKuKTyT.js";import{E as t}from"../../easing-5hHInU7b.js";import{r as a,a as r}from"../../lit-element-Ho-VPzO1.js";import{NavigationBarTabDefinition as e,NavigationBarXRTabDefinition as o,NavigationRailTabDefinition as n,NavigationRailXRTabDefinition as l}from"../../component-definitions/navigation-tab.definition.js";import"../../utils/controller/attachable-controller.js";import{createWrappedTokens as c}from"../../utils/tokens/create-wrapped-tokens.js";import{overrideComponentTokens as d}from"../../utils/tokens/override-component-tokens.js";import{stringTokens as s}from"../../utils/tokens/string-tokens.js";import"../../color-CigMJnjV.js";import"../../shape-CrZ0CLVJ.js";import"../../state-C-haZXan.js";import"../../typescale-Bh1NLwSE.js";import"../../utils/tokens/create-logic-shape-tokens.js";
+/**
+ * @license
+ * Copyright 2025 Kai-Orion & Sandlada
+ * SPDX-License-Identifier: MIT
+ */const v=s(c("--mdc-navigation-bar-tab",e)),b=s(c("--mdc-navigation-bar-xr-tab",o)),h=s(c("--mdc-navigation-rail-tab",n)),g=s(c("--mdc-navigation-rail-xr-tab",l)),p=a(t.ExpressiveFastSpatial),u=a(i.ExpressiveFastSpatial),f=r`
+    .label,
+    .icon {
+        z-index: 1;
+    }
+
+    .badge {
+        z-index: 1;
+    }
+    .icon {
+        display: none;
+        fill: currentColor;
+        block-size: var(--_icon-size);
+        inline-size: var(--_icon-size);
+        ${s(d("--mdc-icon",{size:"var(--_icon-size)"}))};
+    }
+
+    button.vertical.inactive .label {
+        font-size: var(--_inactive-vertical-label-size);
+        line-height: var(--_inactive-vertical-label-line-height);
+        font-family: var(--_inactive-vertical-label-font);
+        letter-spacing: var(--_inactive-vertical-label-trackig);
+        font-weight: var(--_inactive-vertical-label-font-weight);
+    }
+    button.vertical.active .label {
+        font-size: var(--_active-vertical-label-size);
+        line-height: var(--_active-vertical-label-line-height);
+        font-family: var(--_active-vertical-label-font);
+        letter-spacing: var(--_active-vertical-label-trackig);
+        font-weight: var(--_active-vertical-label-font-weight);
+    }
+    button.horizonal.inactive .label {
+        font-size: var(--_inactive-horizonal-label-size);
+        line-height: var(--_inactive-horizonal-label-line-height);
+        font-family: var(--_inactive-horizonal-label-font);
+        letter-spacing: var(--_inactive-horizonal-label-trackig);
+        font-weight: var(--_inactive-horizonal-label-font-weight);
+    }
+    button.horizonal.active .label {
+        font-size: var(--_active-horizonal-label-size);
+        line-height: var(--_active-horizonal-label-line-height);
+        font-family: var(--_active-horizonal-label-font);
+        letter-spacing: var(--_active-horizonal-label-trackig);
+        font-weight: var(--_active-horizonal-label-font-weight);
+    }
+
+    button.inactive .icon.inactive-icon {
+        display: block;
+    }
+    button.active .icon.active-icon {
+        display: block;
+    }
+
+    .icon.inactive-icon {
+        color: var(--_inactive-icon-color);
+    }
+    button:hover .icon.inactive-icon {
+        color: var(--_hovered-inactive-icon-color);
+    }
+    button:focus-within .icon.inactive-icon {
+        color: var(--_focused-inactive-icon-color);
+    }
+    button:active .icon.inactive-icon {
+        color: var(--_pressed-inactive-icon-color);
+    }
+    .icon.active-icon {
+        color: var(--_active-icon-color);
+    }
+    button:hover .icon.active-icon {
+        color: var(--_hovered-active-icon-color);
+    }
+    button:focus-within .icon.active-icon {
+        color: var(--_focused-active-icon-color);
+    }
+    button:active .icon.active-icon {
+        color: var(--_pressed-active-icon-color);
+    }
+
+    .inactive .label {
+        color: var(--_inactive-label-color);
+    }
+    button.inactive:hover .label {
+        color: var(--_hovered-inactive-label-color);
+    }
+    button.inactive:focus-within .label {
+        color: var(--_focused-inactive-label-color);
+    }
+    button.inactive:active .label {
+        color: var(--_pressed-inactive-label-color);
+    }
+    .active .label {
+        color: var(--_active-label-color);
+    }
+    button.active:hover .label {
+        color: var(--_hovered-active-label-color);
+    }
+    button.active:focus-within .label {
+        color: var(--_focused-active-label-color);
+    }
+    button.active:active .label {
+        color: var(--_pressed-active-label-color);
+    }
+`,_=r`
+    mdc-ripple {
+        z-index: -1;
+        transition-property: opacity;
+        transition-duration: 250ms;
+    }
+    button.active mdc-ripple {
+        opacity: 0;
+    }
+    button .indicator {
+        position: absolute;
+        display: flex;
+        inset: 0;
+        z-index: -1;
+    }
+    button .indicator .background {
+        position: absolute;
+        display: flex;
+        inset: 0;
+        z-index: -1;
+        transition-property: transform, background;
+        transition-duration: ${u}, 50ms;
+        transition-timing-function: ${p}, linear;
+    }
+
+    button.vertical :is(.indicator, .indicator .background) {
+        border-start-start-radius: var(--_vertical-indicator-shape-start-start);
+        border-start-end-radius: var(--_vertical-indicator-shape-start-end);
+        border-end-start-radius: var(--_vertical-indicator-shape-end-start);
+        border-end-end-radius: var(--_vertical-indicator-shape-end-end);
+    }
+    button.horizonal :is(.indicator, .indicator .background) {
+        border-start-start-radius: var(--_horizonal-indicator-shape-start-start);
+        border-start-end-radius: var(--_horizonal-indicator-shape-start-end);
+        border-end-start-radius: var(--_horizonal-indicator-shape-end-start);
+        border-end-end-radius: var(--_horizonal-indicator-shape-end-end);
+    }
+
+    button.vertical .indicator .background,
+    button.vertical .indicator {
+        height: var(--_vertical-indicator-height);
+        width: var(--_vertical-indicator-width);
+    }
+    button.horizonal .indicator .background,
+    button.horizonal .indicator {
+        height: var(--_horizonal-indicator-height);
+        width: var(--_horizonal-indicator-width);
+    }
+
+    button.round .indicator .background,
+    button.round .indicator {
+        height: var(--_vertical-round-indicator-height);
+        width: var(--_vertical-round-indicator-width);
+    }
+
+    button.inactive .indicator .background {
+        background: var(--_inactive-indicator-color);
+        transform: scaleX(0);
+    }
+    button.active .indicator .background {
+        background: var(--_active-indicator-color);
+        transform: scaleX(1);
+    }
+`,m=r`
+    :host {
+        display: inline-flex;
+        vertical-align: top;
+        outline: none;
+        border: none;
+        cursor: pointer;
+        box-sizing: border-box;
+        -webkit-tap-highlight-color: transparent;
+        width: fit-content;
+        height: fit-content;
+        background: transparent;
+    }
+
+    button {
+        all: unset;
+        position: relative;
+        background: transparent;
+        box-sizing: border-box;
+    }
+
+    button.vertical {
+        border-start-start-radius: var(--_vertical-container-shape-start-start);
+        border-start-end-radius: var(--_vertical-container-shape-start-end);
+        border-end-start-radius: var(--_vertical-container-shape-end-start);
+        border-end-end-radius: var(--_vertical-container-shape-end-end);
+    }
+    button.horizonal {
+        border-start-start-radius: var(--_horizonal-container-shape-start-start);
+        border-start-end-radius: var(--_horizonal-container-shape-start-end);
+        border-end-start-radius: var(--_horizonal-container-shape-end-start);
+        border-end-end-radius: var(--_horizonal-container-shape-end-end);
+    }
+
+    button.vertical {
+        height: var(--_vertical-container-height);
+        width: var(--_vertical-container-width);
+        padding-inline-start: var(--_vertical-container-inline-leading-space);
+        padding-inline-end: var(--_vertical-container-inline-trailing-space);
+        padding-block-start: var(--_vertical-container-block-leading-space);
+        padding-block-end: var(--_vertical-container-block-trailing-space);
+        gap: var(--_vertical-icon-label-between-space);
+    }
+    button.horizonal {
+        height: var(--_horizonal-container-height);
+        width: var(--_horizonal-container-width);
+        padding-inline-start: var(--_horizonal-container-inline-leading-space);
+        padding-inline-end: var(--_horizonal-container-inline-trailing-space);
+        padding-block-start: var(--_horizonal-container-block-leading-space);
+        padding-block-end: var(--_horizonal-container-block-trailing-space);
+        gap: var(--_horizonal-icon-label-between-space);
+    }
+`,z=[f,_,m,r`
+        :host(:not(xr)) { ${v}; }
+        :host([xr]) { ${b}; }
+
+    /* SPEC */
+    button.vertical {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: var(--_vertical-indicator-height) 1fr;
+        
+        .indicator {
+            grid-column: 1/3;
+            grid-row: 1/2;
+            justify-self: center;
+        }
+        .label {
+            grid-column: 1/2;
+            grid-row: 2/3;
+            justify-self: center;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+        }
+        .icon {
+            grid-column: 1/2;
+            grid-row: 1/2;
+            place-self: center;
+            align-self: center;
+        }
+    }
+    button.horizonal {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        grid-template-rows: 1fr;
+        justify-content: center;
+
+        box-sizing: border-box;
+        
+        .indicator {
+            grid-column: 1/-1;
+            grid-row: 1/2;
+        }
+        .label {
+            grid-column: 2/3;
+            grid-row: 1/2;
+            justify-self: center;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            place-self: center;
+            padding-inline-end: var(--_horizonal-indicator-inline-trailing-space);
+        }
+        .icon {
+            grid-column: 1/2;
+            grid-row: 1/2;
+            place-self: center;
+            padding-inline-start: var(--_horizonal-indicator-inline-leading-space);
+        }
+    }
+`],w=[f,_,m,r`
+        :host(:not(xr)) { ${h}; }
+        :host([xr]) { ${g}; }
+        button.round {
+            height: var(--_vertical-round-container-size);
+            width: var(--_vertical-round-container-size);
+            display: grid;
+            place-content: center;
+        }
+        button.round .label {
+            display: none;
+        }
+
+        button.vertical:not(.round) {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: var(--_vertical-indicator-height) 1fr;
+            
+            .indicator {
+                grid-column: 1/3;
+                grid-row: 1/2;
+                justify-self: center;
+            }
+            .label {
+                grid-column: 1/2;
+                grid-row: 2/3;
+                justify-self: center;
+                overflow: hidden;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+            }
+            .icon {
+                grid-column: 1/2;
+                grid-row: 1/2;
+                place-self: center;
+                align-self: center;
+            }
+        }
+        button.horizonal:not(.round) {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            grid-template-rows: 1fr;
+            justify-content: center;
+
+            box-sizing: border-box;
+            
+            .indicator {
+                grid-column: 1/-1;
+                grid-row: 1/2;
+            }
+            .label {
+                grid-column: 2/3;
+                grid-row: 1/2;
+                justify-self: center;
+                overflow: hidden;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+                place-self: center;
+                padding-inline-end: var(--_horizonal-indicator-inline-trailing-space);
+            }
+            .icon {
+                grid-column: 1/2;
+                grid-row: 1/2;
+                place-self: center;
+                padding-inline-start: var(--_horizonal-indicator-inline-leading-space);
+            }
+        }
+    `];export{z as navigationBarTabStyle,w as navigationRailTabStyle};

package/build/components/navigation-rail/navigation-rail-animations.d.ts

@@ -0,0 +1,21 @@
+export type TNavigationRailAnimationArgs = Parameters<Element['animate']>;
+export type TNavigationRailAnimation = {
+    /**
+     * Animations for the dialog itself.
+     */
+    dialog?: TNavigationRailAnimationArgs[];
+    /**
+     * Animations for the container of the dialog.
+     */
+    container?: TNavigationRailAnimationArgs[];
+    /**
+     * Animations for the contents section.
+     */
+    content?: TNavigationRailAnimationArgs[];
+};
+/**
+ * The default dialog open animation.
+ */
+export declare const NavigationRailDefaultOpenAnimation: TNavigationRailAnimation;
+export declare const NavigationRailDefaultCloseAnimation: TNavigationRailAnimation;
+//# sourceMappingURL=navigation-rail-animations.d.ts.map

package/build/components/navigation-rail/navigation-rail-animations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail-animations.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-rail/navigation-rail-animations.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,4BAA4B,GAAG,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAA;AAEzE,MAAM,MAAM,wBAAwB,GAAG;IACnC;;OAEG;IACH,MAAM,CAAC,EAAE,4BAA4B,EAAE,CAAA;IAEvC;;OAEG;IACH,SAAS,CAAC,EAAE,4BAA4B,EAAE,CAAA;IAE1C;;OAEG;IACH,OAAO,CAAC,EAAE,4BAA4B,EAAE,CAAA;CAC3C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,kCAAkC,EAAE,wBAsBhD,CAAA;AAED,eAAO,MAAM,mCAAmC,EAAE,wBA+BjD,CAAA"}

package/build/components/navigation-rail/navigation-rail-animations.js

@@ -0,0 +1 @@
+import{E as a}from"../../easing-5hHInU7b.js";const e={dialog:[[[{transform:"translateX(-100%)"},{transform:"translateX(0)"}],{duration:500,easing:a.Emphasized}]],container:[[[{opacity:0},{opacity:1}],{duration:50,easing:"linear",pseudoElement:"::before"}]],content:[[[{opacity:0},{opacity:0,offset:.2},{opacity:1}],{duration:250,easing:"linear",fill:"forwards"}]]},t={dialog:[[[{transform:"translateX(0)"},{transform:"translateX(-100%)"}],{duration:150,easing:a.EmphasizedAccelerate}]],container:[[[{height:"100%"},{height:"35%"}],{duration:150,easing:a.EmphasizedAccelerate,pseudoElement:"::before"}],[[{opacity:"1"},{opacity:"0"}],{delay:100,duration:50,easing:"linear",pseudoElement:"::before"}]],content:[[[{opacity:1},{opacity:0}],{duration:100,easing:"linear",fill:"forwards"}]]};export{t as NavigationRailDefaultCloseAnimation,e as NavigationRailDefaultOpenAnimation};

package/build/components/navigation-rail/navigation-rail.d.ts

@@ -0,0 +1,94 @@
+import { LitElement, type TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mdc-navigation-rail": NavigationRail;
+    }
+}
+declare const NavigationRail_base: import("../../utils/behaviors/mixin").MixinReturn<typeof LitElement, import("../../utils/behaviors/connected-promise-resolve").IConnectedPromiseResolve>;
+/**
+ * @todo
+ * - docked / floating
+ * - position
+ * - scrollable
+ *
+ * expanded
+ * - false (default)
+ * - true
+ *
+ * position:
+ * - top (default)
+ * - middle
+ *
+ * xr:
+ * - false (default)
+ * - true
+ *
+ * open:
+ * - false (default)
+ * - true
+ *
+ * When xr is enabled, only vertical is valid:
+ * <mdc-navigation-bar open xr direction="vertical"></mdc-navigation-bar>
+ *
+ * @version
+ * Material Design 3 - Expressive
+ *
+ * @link
+ * https://www.figma.com/design/4GM7ohCF2Qtjzs7Fra6jlp/Material-3-Design-Kit--Community-?node-id=58016-36879&t=KiHBf0L3gSBbEFIZ-0
+ */
+export declare class NavigationRail extends NavigationRail_base {
+    static styles: import("lit").CSSResult;
+    expanded: boolean;
+    position: 'top' | 'middle' | 'bottom';
+    xr: boolean;
+    quick: boolean;
+    get open(): boolean;
+    set open(value: boolean);
+    /**
+     * @todo
+     * - auto open/close
+     * - auto change direction
+     */
+    private readonly dialog;
+    private readonly container;
+    private readonly content;
+    private readonly tabs;
+    protected hasInactiveMenu: boolean;
+    protected hasActiveMenu: boolean;
+    protected hasFab: boolean;
+    protected hasContent: boolean;
+    protected isOpen: boolean;
+    protected isOpening: boolean;
+    protected getRenderClasses(): {
+        expanded: boolean;
+        collapsed: boolean;
+        xr: boolean;
+        top: boolean;
+        middle: boolean;
+        'has-menu': boolean;
+        'has-inactive-menu': boolean;
+        'has-active-menu': boolean;
+        'has-fab': boolean;
+        'has-content': boolean;
+    };
+    protected render(): TemplateResult;
+    protected renderContent(): TemplateResult<1>;
+    protected renderFab(): TemplateResult<1>;
+    protected renderMenu(): TemplateResult<1>;
+    protected renderMenuInactiveIcon(): TemplateResult<1>;
+    protected renderMenuActiveIcon(): TemplateResult<1>;
+    protected cancelAnimations: AbortController | null;
+    show(): Promise<void>;
+    close(): Promise<void>;
+    private animateDialog;
+    protected updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private updateSlottedChild;
+    private handleExpanded;
+    private handleCollapsed;
+    protected handleInactiveMenuSlotChange(e: Event): void;
+    protected handleActiveMenuSlotChange(e: Event): void;
+    protected handleFabSlotChange(e: Event): void;
+    protected handleContentSlotChange(e: Event): void;
+}
+export {};
+//# sourceMappingURL=navigation-rail.d.ts.map

package/build/components/navigation-rail/navigation-rail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-rail/navigation-rail.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAS3D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,qBAAqB,EAAE,cAAc,CAAA;KACxC;CACJ;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,cAAe,SAAQ,mBAAwC;IAExE,OAAgB,MAAM,0BAAsB;IAGrC,QAAQ,EAAE,OAAO,CAAQ;IAGzB,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAQ;IAG7C,EAAE,EAAE,OAAO,CAAQ;IAGnB,KAAK,EAAE,OAAO,CAAQ;IAE7B,IACW,IAAI,IAAI,OAAO,CAEzB;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,OAAO,EAY7B;IAED;;;;OAIG;IAOH,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA2B;IAElD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA2B;IAErD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IAGnD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAwC;IAG7D,SAAS,CAAC,eAAe,EAAE,OAAO,CAAQ;IAE1C,SAAS,CAAC,aAAa,EAAE,OAAO,CAAQ;IAExC,SAAS,CAAC,MAAM,EAAE,OAAO,CAAQ;IAEjC,SAAS,CAAC,UAAU,EAAE,OAAO,CAAQ;IAErC,SAAS,CAAC,MAAM,UAAQ;IACxB,SAAS,CAAC,SAAS,UAAQ;IAE3B,SAAS,CAAC,gBAAgB;;;;;;;;;;;;cAeP,MAAM,IAAI,cAAc;IAe3C,SAAS,CAAC,aAAa;IAOvB,SAAS,CAAC,SAAS;IAOnB,SAAS,CAAC,UAAU;IAkBpB,SAAS,CAAC,sBAAsB;IAKhC,SAAS,CAAC,oBAAoB;IAM9B,SAAS,CAAC,gBAAgB,EAAE,eAAe,GAAG,IAAI,CAAO;IAG5C,IAAI;IAgCJ,KAAK;YA6BJ,aAAa;cAkDR,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAUpF,OAAO,CAAC,kBAAkB;IAsB1B,OAAO,CAAC,cAAc;IAGtB,OAAO,CAAC,eAAe;IAIvB,SAAS,CAAC,4BAA4B,CAAC,CAAC,EAAE,KAAK;IAG/C,SAAS,CAAC,0BAA0B,CAAC,CAAC,EAAE,KAAK;IAG7C,SAAS,CAAC,mBAAmB,CAAC,CAAC,EAAE,KAAK;IAGtC,SAAS,CAAC,uBAAuB,CAAC,CAAC,EAAE,KAAK;CAG7C"}