@sandlada/mdc 0.1.0-20250907.a

package/build/components/icon-button/icon-button.style.js

@@ -0,0 +1,357 @@
+import{a as e,r as a}from"../../lit-element-Ho-VPzO1.js";import{FilledIconButtonDefinition as n,FilledTonalIconButtonDefinition as r,OutlinedIconButtonDefinition as i,StandardIconButtonDefinition as t}from"../../component-definitions/icon-button.definition.js";import{createWrappedTokens as o}from"../../utils/tokens/create-wrapped-tokens.js";import{overrideComponentTokens as l}from"../../utils/tokens/override-component-tokens.js";import{stringTokens as d}from"../../utils/tokens/string-tokens.js";import"../../color-CigMJnjV.js";import"../../shape-CrZ0CLVJ.js";import"../../state-C-haZXan.js";import"../../utils/tokens/create-logic-shape-tokens.js";
+/**
+ * @license
+ * Copyright 2025 Kai-Orion & Sandlada
+ * SPDX-License-Identifier: MIT
+ */const c=o("--mdc-icon-button",n),s=o("--mdc-icon-button",r),g=o("--mdc-icon-button",i),u=o("--mdc-icon-button",t),m=d(c),p=d(s),v=d(g),b=d(u),h=e`
+    .container {
+        &.extra-small {
+            height: var(--_extra-small-container-height);
+        }
+        &.small {
+            height: var(--_small-container-height);
+        }
+        &.medium {
+            height: var(--_medium-container-height);
+        }
+        &.large {
+            height: var(--_large-container-height);
+        }
+        &.extra-large {
+            height: var(--_extra-large-container-height);
+        }
+    }
+    .container.narrow {
+        &.extra-small {
+            padding-inline-start: var(--_extra-small-narrow-leading-space);
+            padding-inline-end: var(--_extra-small-narrow-trailing-space);
+        }
+        &.small {
+            padding-inline-start: var(--_small-narrow-leading-space);
+            padding-inline-end: var(--_small-narrow-trailing-space);
+        }
+        &.medium {
+            padding-inline-start: var(--_medium-narrow-leading-space);
+            padding-inline-end: var(--_medium-narrow-trailing-space);
+        }
+        &.large {
+            padding-inline-start: var(--_large-narrow-leading-space);
+            padding-inline-end: var(--_large-narrow-trailing-space);
+        }
+        &.extra-large {
+            padding-inline-start: var(--_extra-large-narrow-leading-space);
+            padding-inline-end: var(--_extra-large-narrow-trailing-space);
+        }
+    }
+    .container.default {
+        &.extra-small {
+            padding-inline-start: var(--_extra-small-default-leading-space);
+            padding-inline-end: var(--_extra-small-default-trailing-space);
+        }
+        &.small {
+            padding-inline-start: var(--_small-default-leading-space);
+            padding-inline-end: var(--_small-default-trailing-space);
+        }
+        &.medium {
+            padding-inline-start: var(--_medium-default-leading-space);
+            padding-inline-end: var(--_medium-default-trailing-space);
+        }
+        &.large {
+            padding-inline-start: var(--_large-default-leading-space);
+            padding-inline-end: var(--_large-default-trailing-space);
+        }
+        &.extra-large {
+            padding-inline-start: var(--_extra-large-default-leading-space);
+            padding-inline-end: var(--_extra-large-default-trailing-space);
+        }
+    }
+    .container.wide {
+        &.extra-small {
+            padding-inline-start: var(--_extra-small-wide-leading-space);
+            padding-inline-end: var(--_extra-small-wide-trailing-space);
+        }
+        &.small {
+            padding-inline-start: var(--_small-wide-leading-space);
+            padding-inline-end: var(--_small-wide-trailing-space);
+        }
+        &.medium {
+            padding-inline-start: var(--_medium-wide-leading-space);
+            padding-inline-end: var(--_medium-wide-trailing-space);
+        }
+        &.large {
+            padding-inline-start: var(--_large-wide-leading-space);
+            padding-inline-end: var(--_large-wide-trailing-space);
+        }
+        &.extra-large {
+            padding-inline-start: var(--_extra-large-wide-leading-space);
+            padding-inline-end: var(--_extra-large-wide-trailing-space);
+        }
+    }
+`,_=e`
+    .container:is(.filled, .filled-tonal):not(.disabled) .background {
+        background: var(--_container-color);
+    }
+    .container:is(.filled, .filled-tonal):not(.disabled).togglable.unselected .background {
+        background: var(--_container-color-toggle-unselected);
+    }
+    .container:is(.filled, .filled-tonal):not(.disabled).togglable.selected .background {
+        background: var(--_container-color-toggle-selected);
+    }
+    .container:is(.filled, .filled-tonal).disabled .background {
+        background: var(--_disabled-container-color);
+        opacity: var(--_disabled-container-opacity);
+    }
+ 
+    .container.outlined:not(.disabled) .background {
+        background: var(--_container-color);
+    }
+    .container.outlined.togglable.unselected .background {
+        background: var(--_container-color-toggle-unselected);
+    }
+    .container.outlined.togglable.selected .background {
+        background: var(--_container-color-toggle-selected);
+    }
+    .container.outlined:not(.togglable).disabled .background {
+        background: var(--_disabled-container-color);
+    }
+    .container.outlined.togglable.disabled {
+        &.unselected .background {
+            background: var(--_disabled-container-color-toggle-unselected);
+        }
+        &.selected .background {
+            background: var(--_disabled-container-color-toggle-selected);
+        }
+    }
+`,$=e`
+    .outline {
+        all: unset;
+        border-radius: inherit;
+        position: absolute;
+        inset: 0;
+        height: 100%;
+        width: 100%;
+        z-index: -1;
+        box-sizing: border-box;
+        border-style: solid;
+        background: transparent;
+    }
+    .container:not(.outlined) .outline {
+        display: none;
+    }
+
+    .container.outlined.extra-small .outline {
+        border-width: var(--_extra-small-outline-width);
+    }
+    .container.outlined.small .outline {
+        border-width: var(--_small-outline-width);
+    }
+    .container.outlined.medium .outline {
+        border-width: var(--_medium-outline-width);
+    }
+    .container.outlined.large .outline {
+        border-width: var(--_large-outline-width);
+    }
+    .container.outlined.extra-large .outline {
+        border-width: var(--_extra-large-outline-width);
+    }
+
+    .container.outlined:not(.disabled) .outline {
+        border-color: var(--_outline-color);
+    }
+    .container.outlined:not(.disabled).togglable.unselected .outline {
+        border-color: var(--_outline-color-toggle-unselected);
+    }
+    .container.outlined:not(.disabled).togglable.selected .outline {
+        border-color: var(--_outline-color-toggle-selected);
+    }
+
+    .container.outlined.disabled .outline {
+        outline-color: var(--_disabled-outline-color);
+    }
+    .container.outlined.disabled.togglable.unselected .outline {
+        outline-color: var(--_disabled-outline-color-toggle-unselected);
+    }
+    .container.outlined.disabled.togglable.selected .outline {
+        outline-color: var(--_disabled-outline-color-toggle-selected);
+    }
+`,f=e`
+    :host {
+        display: inline-flex;
+        vertical-align: top;
+        border: none;
+        outline: none;
+        justify-content: center;
+        user-select: none;
+    }
+
+    :host([disabled]),
+    :host([disabled]) button,
+    :host([disabled]) input,
+    .container.disabled,
+    .container.disabled button,
+    .container.disabled input {
+        cursor: default;
+        pointer-events: none;
+    }
+
+    ::slotted(*) {
+        font-weight: inherit;
+        fill: currentColor;
+        user-select: none;
+    }
+
+    input {
+        all: unset;
+        position: absolute;
+        inset: 0px;
+        border: none;
+        outline: none;
+        padding: 0;
+        margin: 0;
+        z-index: 1;
+        user-select: none;
+    }
+
+    .container {
+        padding: 0;
+        margin: 0;
+        cursor: pointer;
+        position: relative;
+        display: grid;
+        place-content: center;
+        flex-grow: 0;
+        flex-shrink: 0;
+        border: none;
+        text-decoration: none;
+        user-select: none;
+        outline: none;
+        appearance: none;
+        background: transparent;
+        user-select: none;
+    }
+
+    .background {
+        user-select: none;
+        border-radius: inherit;
+        height: 100%;
+        width: 100%;
+        z-index: -1;
+        position: absolute;
+        inset: 0px;
+    }
+
+    .container,
+    mdc-focus-ring {
+        transition-property: border-radius;
+        transition-duration: 350ms;
+        transition-timing-function: cubic-bezier(0.42, 1.67, 0.21, 0.9);
+    }
+`,x=e`
+    .container:not(.disabled) {
+        color: var(--_icon-color);
+    }
+    .container:not(.disabled).togglable.unselected {
+        color: var(--_icon-color-toggle-unselected);
+    }
+    .container:not(.disabled).togglable.selected {
+        color: var(--_icon-color-toggle-selected);
+    }
+
+    .container:not(.disabled):hover {
+        color: var(--_hovered-icon-color);
+    }
+    .container:not(.disabled).togglable.unselected:hover {
+        color: var(--_hovered-icon-color-toggle-unselected);
+    }
+    .container:not(.disabled).togglable.selected:hover {
+        color: var(--_hovered-icon-color-toggle-selected);
+    }
+
+    .container:not(.disabled):focus-within {
+        color: var(--_focused-icon-color);
+    }
+    .container:not(.disabled).togglable.unselected:focus-within {
+        color: var(--_focused-icon-color-toggle-unselected);
+    }
+    .container:not(.disabled).togglable.selected:focus-within {
+        color: var(--_focused-icon-color-toggle-selected);
+    }
+
+    .container:not(.disabled):active {
+        color: var(--_pressed-icon-color);
+    }
+    .container:not(.disabled).togglable.unselected:active {
+        color: var(--_pressed-icon-color-toggle-unselected);
+    }
+    .container:not(.disabled).togglable.selected:active {
+        color: var(--_pressed-icon-color-toggle-selected);
+    }
+
+    .container.disabled {
+        color: var(--_disabled-icon-color);
+        opacity: var(--_disabled-icon-opacity);
+    }
+`,w=e`
+    .container.extra-small ::slotted(*) {
+        font-size: var(--_extra-small-icon-size);
+        height: var(--_extra-small-icon-size);
+        width: var(--_extra-small-icon-size);
+    }
+    .container.small ::slotted(*) {
+        font-size: var(--_small-icon-size);
+        height: var(--_small-icon-size);
+        width: var(--_small-icon-size);
+    }
+    .container.medium ::slotted(*) {
+        font-size: var(--_medium-icon-size);
+        height: var(--_medium-icon-size);
+        width: var(--_medium-icon-size);
+    }
+    .container.large ::slotted(*) {
+        font-size: var(--_large-icon-size);
+        height: var(--_large-icon-size);
+        width: var(--_large-icon-size);
+    }
+    .container.extra-large ::slotted(*) {
+        font-size: var(--_extra-large-icon-size);
+        height: var(--_extra-large-icon-size);
+        width: var(--_extra-large-icon-size);
+    }
+
+    .container.extra-small mdc-icon {${a(d(l("--mdc-icon",{size:"var(--_extra-small-icon-size)"})))};}
+    .container.small mdc-icon {${a(d(l("--mdc-icon",{size:"var(: var(--_small-icon-size)"})))};}
+    .container.medium mdc-icon {${a(d(l("--mdc-icon",{size:"var(: var(--_medium-icon-size)"})))};}
+    .container.large mdc-icon {${a(d(l("--mdc-icon",{size:"var(: var(--_large-icon-size)"})))};}
+    .container.extra-large mdc-icon {${a(d(l("--mdc-icon",{size:"var(--_extra-large-icon-size)"})))};}
+`,z=e`
+    :host:has(.container.filled) {${m};}
+    :host:has(.container.filled-tonal) {${p};}
+    :host:has(.container.outlined) {${v};}
+    :host:has(.container.standard) {${b};}
+`,k=[(()=>{const n=(e,n)=>a(`\n        border-end-start-radius: min(var(--_${e}-${n}-end-start), calc(var(--_${e}-container-height) / 2));\n        border-end-end-radius: min(var(--_${e}-${n}-end-end), calc(var(--_${e}-container-height) / 2));\n        border-start-end-radius: min(var(--_${e}-${n}-start-end), calc(var(--_${e}-container-height) / 2));\n        border-start-start-radius: min(var(--_${e}-${n}-start-start), calc(var(--_${e}-container-height) / 2));\n    `),r=a=>e`
+        &.extra-small {${n("extra-small",a)};}
+        &.small {${n("small",a)};}
+        &.medium {${n("medium",a)};}
+        &.large {${n("large",a)};}
+        &.extra-large {${n("extra-large",a)};}
+    `;return e`
+        .container.round {${r("container-shape-round")};}
+        .container.square {${r("container-shape-square")};}
+        .container.togglable.selected {
+            &.round {${r("selected-container-shape-round")};}
+            &.square {${r("selected-container-shape-square")};}
+        }
+        .container:not(.disable-morph, .togglable):is(.round, .square):active {${r("shape-pressed-morph")};}
+        .container:not(.disable-morph).togglable:has(input:active) {${r("shape-pressed-morph")};}
+    `})(),(()=>{const n=(e,n)=>a(d(l("--mdc-ripple",{"hovered-color":e?`var(--_hovered-state-layer-color-toggle-${n?"selected":"unselected"})`:"var(--_hovered-state-layer-color)","focused-color":e?`var(--_focused-state-layer-color-toggle-${n?"selected":"unselected"})`:"var(--_focused-state-layer-color)","pressed-color":e?`var(--_pressed-state-layer-color-toggle-${n?"selected":"unselected"})`:"var(--_pressed-state-layer-color)","hovered-opacity":"var(--_hovered-state-layer-opacity)","focused-opacity":"var(--_focused-state-layer-opacity)","pressed-opacity":"var(--_pressed-state-layer-opacity)"})));return e`
+        mdc-ripple { ${n(!1,!1)}; }
+        .togglable.selected mdc-ripple { ${n(!0,!0)}; }
+        .togglable.unselected mdc-ripple { ${n(!0,!1)}; }
+    `})(),(()=>{const n=(e,a)=>d(l("--mdc-focus-ring",{"shape-start-start":`min(var(--_${e}-${a}-start-start), calc(var(--_${e}-container-height) / 2))`,"shape-start-end":`min(var(--_${e}-${a}-start-end), calc(var(--_${e}-container-height) / 2))`,"shape-end-end":`min(var(--_${e}-${a}-end-end), calc(var(--_${e}-container-height) / 2))`,"shape-end-start":`min(var(--_${e}-${a}-end-start), calc(var(--_${e}-container-height) / 2))`})),r=e=>a(`\n        &.extra-small mdc-focus-ring {${n("extra-small",e)};}\n        &.small mdc-focus-ring {${n("small",e)};}\n        &.medium mdc-focus-ring {${n("medium",e)};}\n        &.large mdc-focus-ring {${n("large",e)};}\n        &.extra-large mdc-focus-ring {${n("extra-large",e)};}\n    `);return e`
+        .container.round {${r("container-shape-round")};}
+        .container.square {${r("container-shape-square")};}
+        .container.togglable.selected.round {${r("selected-container-shape-round")};}
+        .container.togglable.selected.square {${r("selected-container-shape-square")};}
+        .container:not(.disable-morph, .togglable):is(.round, .square):active,
+        .container:not(.disable-morph).togglable:has(input:active) {${r("shape-pressed-morph")};}
+    `})(),h,_,$,f,x,w,z];export{k as iconButtonStyles};

package/build/components/icon-button/toggle-icon-button.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2025 Kai-Orion & Sandlada
+ * SPDX-License-Identifier: MIT
+ */
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { createValidator, getValidityAnchor } from '../../utils/behaviors/constraint-validation';
+import { CheckboxValidator } from '../../utils/behaviors/validators/checkbox-validator';
+import { RadioValidator } from '../../utils/behaviors/validators/radio-validator';
+import { getFormState, getFormValue } from '../../utils/form/form-associated';
+import { BaseIconButton } from './base-icon-button';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mdc-toggle-icon-button": MDCToggleIconButton;
+    }
+}
+declare const SChecked: unique symbol;
+declare const MDCToggleIconButton_base: import("../../utils/behaviors/mixin").MixinReturn<import("../../utils/behaviors/mixin").MixinReturn<typeof BaseIconButton & import("../../utils/form/form-associated").FormAssociatedConstructor, import("../../utils/form/form-associated").FormAssociated>, import("../../utils/behaviors/constraint-validation").ConstraintValidation>;
+/**
+ * The toggle-icon-button component is a split of the icon-button component,
+ * which can toggle whether an item is selected or not. It can be used as a form element.
+ *
+ * @version
+ * Material Design 3 - Expressive
+ *
+ * @link
+ * https://m3.material.io/components/icon-buttons/specs
+ */
+export declare class MDCToggleIconButton extends MDCToggleIconButton_base {
+    static shadowRootOptions: ShadowRootInit;
+    disabled: boolean;
+    name: string;
+    get checked(): boolean;
+    set checked(value: boolean);
+    required: boolean;
+    value: string;
+    type: 'checkbox' | 'radio';
+    /**
+     * We use the <input /> element as a replacement for the button element.
+     * The state is managed by the input element.
+     */
+    protected readonly buttonElement: HTMLInputElement | null;
+    [SChecked]: boolean;
+    private selectionController;
+    constructor();
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected getRenderClasses(): {
+        togglable: boolean;
+        selected: boolean;
+        unselected: boolean;
+        container: boolean;
+        disabled: boolean;
+        'disable-morph': boolean;
+    };
+    protected render(): TemplateResult;
+    protected renderTouchTarget(): TemplateResult<1>;
+    private handleInput;
+    private handleChange;
+    [getFormValue](): string | null;
+    [getFormState](): string;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    [createValidator](): CheckboxValidator | RadioValidator;
+    [getValidityAnchor](): HTMLInputElement | null;
+}
+export {};
+//# sourceMappingURL=toggle-icon-button.d.ts.map

package/build/components/icon-button/toggle-icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/toggle-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAA2B,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAIvF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAA6B,MAAM,6CAA6C,CAAA;AAE3H,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAA;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAA;AAGjF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAuB,MAAM,kCAAkC,CAAA;AAClG,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAEnD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,wBAAwB,EAAE,mBAAmB,CAAA;KAChD;CACJ;AAED,QAAA,MAAM,QAAQ,eAAoB,CAAA;;AAElC;;;;;;;;;GASG;AACH,qBACa,mBAAoB,SAAQ,wBAA8D;IAEnG,OAAgB,iBAAiB,EAAE,cAAc,CAGhD;IAEO,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IAEpB,IACW,OAAO,IAGQ,OAAO,CADhC;IACD,IAAW,OAAO,CAAC,KAAK,EAAE,OAAO,EAQhC;IAGM,QAAQ,EAAE,OAAO,CAAQ;IAGzB,KAAK,EAAE,MAAM,CAAO;IAGpB,IAAI,EAAE,UAAU,GAAG,OAAO,CAAa;IAE9C;;;OAGG;IACH,mBAC4B,aAAa,EAAG,gBAAgB,GAAG,IAAI,CAAA;IAEnE,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAQ;IAC3B,OAAO,CAAC,mBAAmB,CAAsB;;IASxC,iBAAiB,IAAI,IAAI;cAQf,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAWzD,gBAAgB;;;;;;;;cAShB,MAAM,IAAI,cAAc;cAuBxB,iBAAiB;IAmBpC,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAIZ,CAAC,YAAY,CAAC;IAId,CAAC,YAAY,CAAC;IAIb,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAIvC,CAAC,eAAe,CAAC;IAiBjB,CAAC,iBAAiB,CAAC;CAG9B"}

package/build/components/icon-button/toggle-icon-button.js

@@ -0,0 +1 @@
+import{_ as e}from"../../tslib.es6-CmLYFWVC.js";import{E as t,x as i}from"../../lit-element-Ho-VPzO1.js";import{t as s}from"../../custom-element-Dz3n6kSt.js";import{n as r}from"../../property-Ck1wIidx.js";import{e as o}from"../../query-DifSdHBD.js";import{e as a}from"../../class-map-DlMb2KKL.js";import{mixinConstraintValidation as n,createValidator as l,getValidityAnchor as c}from"../../utils/behaviors/constraint-validation.js";import{internals as d}from"../../utils/behaviors/element-internals.js";import{CheckboxValidator as h}from"../../utils/behaviors/validators/checkbox-validator.js";import{RadioValidator as p}from"../../utils/behaviors/validators/radio-validator.js";import{SelectionController as u}from"../../utils/controller/selection-controller.js";import{redispatchEvent as m}from"../../utils/event/redispatch-event.js";import{mixinFormAssociated as b,getFormValue as k,getFormState as g}from"../../utils/form/form-associated.js";import{BaseIconButton as f}from"./base-icon-button.js";import"../../utils/behaviors/validators/validator.js";import"../../utils/aria/delegate.js";import"../../utils/aria/aria.js";import"../../utils/event/form-label-activation.js";import"./icon-button.style.js";import"../../component-definitions/icon-button.definition.js";import"../../color-CigMJnjV.js";import"../../shape-CrZ0CLVJ.js";import"../../state-C-haZXan.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";var j;const v=Symbol("checked");let y=class extends(n(b(f))){static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}get checked(){return this[v]}set checked(e){if(e===this[v])return;const t=this[v];this[v]=e,this.selectionController.handleCheckedChange(),this.requestUpdate("checked",t)}constructor(){super(),this.required=!1,this.value="on",this.type="checkbox",this[j]=!1}connectedCallback(){super.connectedCallback(),this.selectionController||(this.selectionController=new u(this,{multiple:"checkbox"===this.type}),this.addController(this.selectionController))}willUpdate(e){super.willUpdate(e),e.has("type")&&(this[d].role=this.type,this.selectionController.multiple="checkbox"===this.type),e.has("checked")&&(this[d].ariaChecked=String(this.checked))}getRenderClasses(){return{...super.getRenderClasses(),togglable:!0,selected:this.checked,unselected:!this.checked}}render(){const{ariaHasPopup:e,ariaExpanded:s,ariaLabel:r}=this;return i`<button class="${a(this.getRenderClasses())}" id="button" ?disabled="${this.disabled}" aria-disabled="${this.disabled}" aria-label="${r||t}" aria-haspopup="${e||t}" aria-expanded="${s||t}" tabindex="-1">${"outlined"===this.variant?this.renderOutline():t} ${this.renderIcon()} ${this.renderBackground()} ${this.renderTouchTarget()}<mdc-ripple for="input-as-touch-target" part="ripple" .disabled="${this.disabled}"></mdc-ripple><mdc-focus-ring for="input-as-touch-target" part="focus-ring" .disabled="${this.disabled}"></mdc-focus-ring></button>`}renderTouchTarget(){return i`<input id="input-as-touch-target" class="touch-target" type="${this.type}" .checked="${this.checked}" ?required="${this.required}" ?disabled="${this.disabled}" aria-checked="${this.checked}" aria-required="${this.required}" aria-disabled="${this.disabled}" tabindex="0" @input="${this.handleInput}" @change="${this.handleChange}">`}handleInput(e){this.checked=this.buttonElement.checked}handleChange(e){m(this,e)}[(j=v,k)](){return this.checked?this.value:null}[g](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("default-checked")}formStateRestoreCallback(e){this.checked="true"===e}[l](){return"checkbox"===this.type?new h(()=>({checked:this.checked,required:this.required})):new p(()=>this.selectionController?this.selectionController.controls:[this])}[c](){return this.buttonElement}};e([r({type:Boolean,reflect:!0,noAccessor:!0})],y.prototype,"checked",null),e([r({type:Boolean})],y.prototype,"required",void 0),e([r({type:String})],y.prototype,"value",void 0),e([r({type:String,reflect:!0})],y.prototype,"type",void 0),e([o("#input-as-touch-target")],y.prototype,"buttonElement",void 0),y=e([s("mdc-toggle-icon-button")],y);export{y as MDCToggleIconButton};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar-animations.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-bar/navigation-bar-animations.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,2BAA2B,GAAG,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAA;AAExE,MAAM,MAAM,uBAAuB,GAAG;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,2BAA2B,EAAE,CAAA;IAEtC;;OAEG;IACH,SAAS,CAAC,EAAE,2BAA2B,EAAE,CAAA;IAEzC;;OAEG;IACH,OAAO,CAAC,EAAE,2BAA2B,EAAE,CAAA;CAC1C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,iCAAiC,EAAE,uBAsB/C,CAAA;AAED,eAAO,MAAM,kCAAkC,EAAE,uBA+BhD,CAAA"}

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

@@ -0,0 +1 @@
+import{E as a}from"../../easing-5hHInU7b.js";const e={dialog:[[[{transform:"translateY(100%)"},{transform:"translateY(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:"translateY(0)"},{transform:"translateY(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 NavigationBarDefaultCloseAnimation,e as NavigationBarDefaultOpenAnimation};

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

@@ -0,0 +1,75 @@
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import type { TNavigationTabDirection } from '../navigation-item/base-navigation-tab';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mdc-navigation-bar": NavigationBar;
+    }
+}
+declare const NavigationBar_base: import("../../utils/behaviors/mixin").MixinReturn<typeof LitElement, import("../../utils/behaviors/connected-promise-resolve").IConnectedPromiseResolve>;
+/**
+ * direction:
+ * - direction="vertical" (default)
+ * - direction="horizonal"
+ *
+ * position:
+ * - left
+ * - middle
+ * - between (default)
+ * - right
+ *
+ * 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-36958&t=gL02aeIXWQsJdOqN-0
+ */
+export declare class NavigationBar extends NavigationBar_base {
+    static styles: import("lit").CSSResult;
+    direction: TNavigationTabDirection;
+    position: 'start' | 'middle' | 'between' | 'end';
+    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 isOpen: boolean;
+    protected isOpening: boolean;
+    protected getRenderClasses(): {
+        vertical: boolean;
+        horizonal: boolean;
+        xr: boolean;
+        start: boolean;
+        middle: boolean;
+        between: boolean;
+        end: boolean;
+    };
+    protected render(): TemplateResult;
+    protected cancelAnimations: AbortController | null;
+    show(): Promise<void>;
+    close(): Promise<void>;
+    private animateDialog;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private updateSlottedChild;
+}
+export {};
+//# sourceMappingURL=navigation-bar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-bar/navigation-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAKhF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAA;AAKrF,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,aAAa,CAAA;KACtC;CACJ;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,aAAc,SAAQ,kBAAwC;IAEvE,OAAgB,MAAM,0BAAqB;IAGpC,SAAS,EAAE,uBAAuB,CAAa;IAG/C,QAAQ,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAY;IAG5D,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,MAAM,UAAQ;IACxB,SAAS,CAAC,SAAS,UAAQ;IAE3B,SAAS,CAAC,gBAAgB;;;;;;;;;cAYP,MAAM,IAAI,cAAc;IAa3C,SAAS,CAAC,gBAAgB,EAAE,eAAe,GAAG,IAAI,CAAO;IAG5C,IAAI;IAgCJ,KAAK;YA6BJ,aAAa;cAoDR,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;cAMtD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAUpF,OAAO,CAAC,kBAAkB;CAqB7B"}

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

@@ -0,0 +1 @@
+import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{x as i,i as e}from"../../lit-element-Ho-VPzO1.js";import{t as o}from"../../custom-element-Dz3n6kSt.js";import{n as s}from"../../property-Ck1wIidx.js";import{e as n}from"../../query-DifSdHBD.js";import{o as a}from"../../query-assigned-elements-CAhlPqtD.js";import{e as r}from"../../class-map-DlMb2KKL.js";import{mixinConnectedPromiseResolve as p}from"../../utils/behaviors/connected-promise-resolve.js";import"../navigation-item/navigation-bar-tab.js";import{NavigationBarDefaultOpenAnimation as l,NavigationBarDefaultCloseAnimation as c}from"./navigation-bar-animations.js";import{navigationBarStyle as d}from"./navigation-bar.style.js";import"../navigation-item/base-navigation-tab.js";import"../../state--U2hSgGK.js";import"../../utils/behaviors/element-internals.js";import"../../utils/event/form-label-activation.js";import"../navigation-item/navigation-tab-sigle-selection-controller.js";import"../navigation-item/navigation-tab.style.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";import"../../component-definitions/navigation-bar.definition.js";let h=class extends(p(e)){constructor(){super(...arguments),this.direction="vertical",this.position="between",this.xr=!1,this.quick=!1,this.isOpen=!1,this.isOpening=!1,this.cancelAnimations=null}static{this.styles=d}get open(){return this.isOpen}set open(t){t!==this.isOpen&&(this.isOpen=t,t?(this.setAttribute("open",""),this.show()):(this.removeAttribute("open"),this.close()))}getRenderClasses(){return{vertical:"vertical"===this.direction,horizonal:"vertical"!==this.direction,xr:this.xr,start:"start"===this.position,middle:"middle"===this.position,between:"between"===this.position,end:"end"===this.position}}render(){return i`<dialog class="${r(this.getRenderClasses())}"><span class="background" aria-hidden="true"></span><div class="container"><div class="content"><slot></slot></div></div></dialog>`}async show(){this.isOpening=!0,await this.isConnectedPromise,await this.updateComplete;const t=this.dialog;if(t.open||!this.isOpening)return void(this.isOpening=!1);if(!this.dispatchEvent(new Event("open",{cancelable:!0})))return this.open=!1,void(this.isOpening=!1);t.show(),this.open=!0,this.querySelector("[autofocus]")?.focus(),await this.animateDialog(l),this.dispatchEvent(new Event("opened")),this.isOpening=!1}async close(){if(this.isOpening=!1,!this.isConnected)return void(this.open=!1);await this.updateComplete;const t=this.dialog;if(!t.open||this.isOpening)return void(this.open=!1);!this.dispatchEvent(new Event("close",{cancelable:!0}))||(await this.animateDialog(c),t.close(),this.open=!1,this.dispatchEvent(new Event("closed")))}async animateDialog(t){if(this.cancelAnimations?.abort(),this.cancelAnimations=new AbortController,this.quick)return;const{dialog:i,container:e,content:o}=this;if(!i||!e||!o)return;const{container:s,dialog:n,content:a}=t,r=[[i,n??[]],[e,s??[]],[o,a??[]]],p=[];for(const[t,i]of r)for(const e of i){const i=t.animate(...e);this.cancelAnimations.signal.addEventListener("abort",()=>{i.cancel()}),p.push(i)}await Promise.all(p.map(t=>t.finished.catch(()=>{})))}firstUpdated(t){super.firstUpdated(t)}updated(t){t.has("xr")&&this.updateSlottedChild("xr",this.xr),t.has("direction")&&this.updateSlottedChild("direction",this.direction),super.updated(t)}updateSlottedChild(t,i){const e=this.tabs.filter(t=>"mdc-navigation-bar-tab"!==t.nodeName);if(0!==e.length)if("xr"===t&&i)for(const i of e)i.setAttribute(t,"");else if("xr"===t)for(const i of e)i.removeAttribute(t);else for(const o of e)o.setAttribute(t,i)}};t([s({type:String})],h.prototype,"direction",void 0),t([s({type:String})],h.prototype,"position",void 0),t([s({type:Boolean})],h.prototype,"xr",void 0),t([s({type:Boolean})],h.prototype,"quick",void 0),t([s({type:Boolean,noAccessor:!0})],h.prototype,"open",null),t([n("dialog")],h.prototype,"dialog",void 0),t([n(".container")],h.prototype,"container",void 0),t([n(".content")],h.prototype,"content",void 0),t([a()],h.prototype,"tabs",void 0),h=t([o("mdc-navigation-bar")],h);export{h as NavigationBar};

package/build/components/navigation-bar/navigation-bar.style.d.ts

@@ -0,0 +1,2 @@
+export declare const navigationBarStyle: import("lit").CSSResult;
+//# sourceMappingURL=navigation-bar.style.d.ts.map

package/build/components/navigation-bar/navigation-bar.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar.style.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-bar/navigation-bar.style.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,kBAAkB,yBA8G9B,CAAA"}

package/build/components/navigation-bar/navigation-bar.style.js

@@ -0,0 +1 @@
+import{a}from"../../lit-element-Ho-VPzO1.js";import{NavigationBarDefinition as r}from"../../component-definitions/navigation-bar.definition.js";import"../../utils/controller/attachable-controller.js";import{createWrappedTokens as n}from"../../utils/tokens/create-wrapped-tokens.js";import{stringTokens as i}from"../../utils/tokens/string-tokens.js";import"../../color-CigMJnjV.js";import"../../shape-CrZ0CLVJ.js";import"../../utils/tokens/create-logic-shape-tokens.js";const e=a`:host{${i(n("--mdc-navigation-bar",r))}}:host{display:contents;cursor:default;-webkit-tap-highlight-color:transparent;width:fit-content;position:relative}dialog{position:relative;background:0 0;border:none;flex-direction:column;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:0;overflow:hidden;padding:0;width:inherit;box-sizing:border-box}dialog[open]{display:flex}dialog.vertical{height:var(--_vertical-container-height);border-start-start-radius:min(var(--_vertical-container-shape-start-start),calc(var(--_vertical-container-height)/ 2));border-start-end-radius:min(var(--_vertical-container-shape-start-end),calc(var(--_vertical-container-height)/ 2));border-end-start-radius:min(var(--_vertical-container-shape-end-start),calc(var(--_vertical-container-height)/ 2));border-end-end-radius:min(var(--_vertical-container-shape-end-end),calc(var(--_vertical-container-height)/ 2));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)}dialog.xr{height:var(--_vertical-xr-container-height);border-start-start-radius:min(var(--_vertical-xr-container-shape-start-start),calc(var(--_vertical-xr-container-height)/ 2));border-start-end-radius:min(var(--_vertical-xr-container-shape-start-end),calc(var(--_vertical-xr-container-height)/ 2));border-end-start-radius:min(var(--_vertical-xr-container-shape-end-start),calc(var(--_vertical-xr-container-height)/ 2));border-end-end-radius:min(var(--_vertical-xr-container-shape-end-end),calc(var(--_vertical-xr-container-height)/ 2));padding-inline-start:var(--_vertical-xr-container-inline-leading-space);padding-inline-end:var(--_vertical-xr-container-inline-trailing-space);padding-block-start:var(--_vertical-xr-container-block-leading-space);padding-block-end:var(--_vertical-xr-container-block-trailing-space)}dialog.horizonal{height:var(--_horizonal-container-height);border-start-start-radius:min(var(--_horizonal-container-shape-start-start),calc(var(--_horizonal-container-height)/ 2));border-start-end-radius:min(var(--_horizonal-container-shape-start-end),calc(var(--_horizonal-container-height)/ 2));border-end-start-radius:min(var(--_horizonal-container-shape-end-start),calc(var(--_horizonal-container-height)/ 2));border-end-end-radius:min(var(--_horizonal-container-shape-end-end),calc(var(--_horizonal-container-height)/ 2));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)}.container{display:flex;flex-grow:1;overflow:hidden}.content{display:flex;flex-grow:0;width:100%;overflow:auto}dialog.start .container .content{justify-content:start}dialog.middle .container .content{justify-content:center}dialog.between .container .content{justify-content:space-evenly}dialog.end .container .content{justify-content:end}.background{position:absolute;inset:0;z-index:-1}dialog.vertical .background{background:var(--_vertical-container-color)}dialog.xr .background{background:var(--_vertical-xr-container-color)}dialog.horizonal .background{background:var(--_horizonal-container-color)}::backdrop{background:0 0}`;export{e as navigationBarStyle};

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

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2025 Kai-Orion & Sandlada
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, type TemplateResult } from 'lit';
+declare const SActive: unique symbol;
+export type TNavigationTabDirection = 'vertical' | 'horizonal';
+declare const BaseNavigationTab_base: import("../../utils/behaviors/mixin").MixinReturn<typeof LitElement, import("../../utils/behaviors/element-internals").WithElementInternals>;
+/**
+ *
+ * Our design wish is: through this navigation-tab component, it can be used in bar, rail, and xr style bar and rail.
+ *
+ * @version
+ * Material Design 3 - Expressive
+ *
+ * @link
+ * https://www.figma.com/design/4GM7ohCF2Qtjzs7Fra6jlp/Material-3-Design-Kit--Community-?node-id=55141-14251&p=f&t=Lo93bap9LHFqZ0Q1-0
+ *
+ * @todo
+ * XR
+ */
+export declare abstract class BaseNavigationTab extends BaseNavigationTab_base {
+    static shadowRootOptions: ShadowRootInit;
+    /**
+     * In XR mode, only 'vertical' is valid.
+     */
+    /**
+     * In design principle, only vertical navigation-rail tabs are allowed to hide the label.
+     */
+    /**
+     * To distinguish between tabs of different navigations. Should be managed by navigation components.
+     */
+    get name(): string;
+    set name(name: string);
+    get active(): boolean;
+    set active(value: boolean);
+    protected hasLabel: boolean;
+    protected hasActiveIcon: boolean;
+    protected hasInactiveIcon: boolean;
+    protected hasBadge: boolean;
+    private buttonElement;
+    private [SActive];
+    private readonly selectionController;
+    constructor();
+    protected render(): TemplateResult;
+    protected renderIndicator(): TemplateResult<1>;
+    protected renderLabel(): TemplateResult<1>;
+    protected renderIcon(): TemplateResult<1>;
+    protected renderBadge(): TemplateResult<1>;
+    protected getRenderClasses(): {
+        'has-label': boolean;
+        'has-active-icon': boolean;
+        'has-inactive-icon': boolean;
+        'has-badge': boolean;
+        active: boolean;
+        inactive: boolean;
+    };
+    private handleClick;
+    private handleKeydown;
+    private handleLabelSlotChange;
+    private handleActiveIconSlotChange;
+    private handleInactiveIconSlotChange;
+    private handleBadgeSlotChange;
+}
+export {};
+//# sourceMappingURL=base-navigation-tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-navigation-tab.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item/base-navigation-tab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAkB,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAOrE,QAAA,MAAM,OAAO,eAAmB,CAAA;AAEhC,MAAM,MAAM,uBAAuB,GAAG,UAAU,GAAG,WAAW,CAAA;;AAE9D;;;;;;;;;;;;GAYG;AACH,8BAAsB,iBAAkB,SAAQ,sBAAiC;IAE7E,OAAgB,iBAAiB,EAAE,cAAc,CAGhD;IAED;;OAEG;IAIH;;OAEG;IAIH;;OAEG;IACH,IACW,IAAI,IAGO,MAAM,CAD3B;IACD,IAAW,IAAI,CAAC,IAAI,EAAE,MAAM,EAE3B;IAED,IACW,MAAM,IAGQ,OAAO,CAD/B;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,OAAO,EAQ/B;IAGD,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAQ;IAEnC,SAAS,CAAC,aAAa,EAAE,OAAO,CAAQ;IAExC,SAAS,CAAC,eAAe,EAAE,OAAO,CAAQ;IAE1C,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAQ;IAGnC,OAAO,CAAC,aAAa,CAA2B;IAEhD,OAAO,CAAC,CAAC,OAAO,CAAC,CAAiB;IAClC,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAmD;;cAapE,MAAM,IAAI,cAAc;IAY3C,SAAS,CAAC,eAAe;IASzB,SAAS,CAAC,WAAW;IAQrB,SAAS,CAAC,UAAU;IAWpB,SAAS,CAAC,WAAW;IAQrB,SAAS,CAAC,gBAAgB;;;;;;;;YAWZ,WAAW;YAkBX,aAAa;IAS3B,OAAO,CAAC,qBAAqB;IAG7B,OAAO,CAAC,0BAA0B;IAGlC,OAAO,CAAC,4BAA4B;IAGpC,OAAO,CAAC,qBAAqB;CAGhC"}