@sandlada/mdc 0.1.0-nightly.14072025

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

@@ -0,0 +1,411 @@
+import{i as e,r as a}from"../../lit-element-Bf8D1KRw.js";import{FilledIconButtonDefinition as t,FilledTonalIconButtonDefinition as r,OutlinedIconButtonDefinition as n,StandardIconButtonDefinition as i}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 s=o("--mdc-filled-icon-button",t),c=o("--mdc-filled-tonal-icon-button",r),g=o("--mdc-outlined-icon-button",n),u=o("--mdc-standard-icon-button",i),b=d(s),m=d(c),v=d(g),p=d(u),_=e=>a(`\n        &.extra-small {\n            border-end-start-radius: min(var(--_extra-small-${e}-end-start), calc(var(--_extra-small-container-height) / 2));\n            border-end-end-radius: min(var(--_extra-small-${e}-end-end), calc(var(--_extra-small-container-height) / 2));\n            border-start-end-radius: min(var(--_extra-small-${e}-start-end), calc(var(--_extra-small-container-height) / 2));\n            border-start-start-radius: min(var(--_extra-small-${e}-start-start), calc(var(--_extra-small-container-height) / 2));\n        }\n        &.small {\n            border-end-start-radius: min(var(--_small-${e}-end-start), calc(var(--_small-container-height) / 2));\n            border-end-end-radius: min(var(--_small-${e}-end-end), calc(var(--_small-container-height) / 2));\n            border-start-end-radius: min(var(--_small-${e}-start-end), calc(var(--_small-container-height) / 2));\n            border-start-start-radius: min(var(--_small-${e}-start-start), calc(var(--_small-container-height) / 2));\n        }\n        &.medium {\n            border-end-start-radius: min(var(--_medium-${e}-end-start), calc(var(--_medium-container-height) / 2));\n            border-end-end-radius: min(var(--_medium-${e}-end-end), calc(var(--_medium-container-height) / 2));\n            border-start-end-radius: min(var(--_medium-${e}-start-end), calc(var(--_medium-container-height) / 2));\n            border-start-start-radius: min(var(--_medium-${e}-start-start), calc(var(--_medium-container-height) / 2));\n        }\n        &.large {\n            border-end-start-radius: min(var(--_large-${e}-end-start), calc(var(--_large-container-height) / 2));\n            border-end-end-radius: min(var(--_large-${e}-end-end), calc(var(--_large-container-height) / 2));\n            border-start-end-radius: min(var(--_large-${e}-start-end), calc(var(--_large-container-height) / 2));\n            border-start-start-radius: min(var(--_large-${e}-start-start), calc(var(--_large-container-height) / 2));\n        }\n        &.extra-large {\n            border-end-start-radius: min(var(--_extra-large-${e}-end-start), calc(var(--_extra-large-container-height) / 2));\n            border-end-end-radius: min(var(--_extra-large-${e}-end-end), calc(var(--_extra-large-container-height) / 2));\n            border-start-end-radius: min(var(--_extra-large-${e}-start-end), calc(var(--_extra-large-container-height) / 2));\n            border-start-start-radius: min(var(--_extra-large-${e}-start-start), calc(var(--_extra-large-container-height) / 2));\n        }\n    `),h=e`
+    @layer mdc.icon-button.base {
+        .button.round {
+            ${_("container-shape-round")}
+        }
+
+        .button.square {
+            ${_("container-shape-square")}
+        }
+
+        .button.togglable.selected {
+            &.round {
+                ${_("selected-container-shape-round")}
+            }
+
+            &.square {
+                ${_("selected-container-shape-square")}
+            }
+        }
+
+        .button:is(.round, .square, .togglable.selected):active {
+            ${_("shape-pressed-morph")}
+        }
+    }
+`,x=e`
+    @layer mdc.icon-button.base {
+        .button {
+            &.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);
+            }
+        }
+
+        .button.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);
+            }
+        }
+        .button.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);
+            }
+        }
+        .button.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);
+            }
+        }
+    }
+`,w=e`
+    @layer mdc.icon-button.base {
+        .button:not(.disabled) .background {
+            background: var(--_container-color);
+        }
+
+        .button:not(.disabled).togglable.unselected .background {
+            background: var(--_container-color-toggle-unselected);
+        }
+
+        .button:not(.disabled).togglable.selected .background {
+            background: var(--_container-color-toggle-selected);
+        }
+
+        .button.disabled .background {
+            background: var(--_disabled-container-color);
+            opacity: var(--_disabled-container-opacity);
+        }
+    }
+`,f=e`
+    @layer mdc.icon-button.base {
+        .button .background {
+            background: transparent;
+        }
+    }
+`,$=e`
+    @layer mdc.icon-button.base {
+        .button:not(.disabled) .background {
+            background: var(--_container-color);
+        }
+
+        .button.togglable.unselected .background {
+            background: var(--_container-color-toggle-unselected);
+        }
+
+        .button.togglable.selected .background {
+            background: var(--_container-color-toggle-selected);
+        }
+
+        .button:not(.togglable).disabled .background {
+            background: var(--_disabled-container-color);
+        }
+        .button.togglable.disabled {
+            &.unselected .background {
+                background: var(--_disabled-container-color-toggle-unselected);
+                opacity: var(--_disabled-container-opacity-toggle-unselected);
+            }
+            &.selected .background {
+                background: var(--_disabled-container-color-toggle-selected);
+                opacity: var(--_disabled-container-opacity-toggle-selected);
+            }
+        }
+    }
+`,y=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;
+    }
+
+    .button.extra-small .outline {
+        border-width: var(--_extra-small-outline-width);
+    }
+    .button.small .outline {
+        border-width: var(--_small-outline-width);
+    }
+    .button.medium .outline {
+        border-width: var(--_medium-outline-width);
+    }
+    .button.large .outline {
+        border-width: var(--_large-outline-width);
+    }
+    .button.extra-large .outline {
+        border-width: var(--_extra-large-outline-width);
+    }
+
+    .outline:not(.disabled) {
+        border-color: var(--_outline-color);
+    }
+    .outline:not(.disabled).togglable.unselected {
+        border-color: var(--_outline-color-togglable-unselected);
+    }
+    .outline:not(.disabled).togglable.selected {
+        border-color: var(--_outline-color-togglable-selected);
+    }
+
+    .outline.disabled {
+        outline-color: var(--_disabled-outline-color);
+        opacity: var(--_disabled-outline-opacity);
+    }
+`,z=e`
+    @layer mdc.icon-button.base {
+        :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,
+        .button.disabled,
+        .button.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;
+        }
+
+        .button {
+            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;
+
+            transition-property: border-radius;
+            transition-duration: 350ms;
+            transition-timing-function: cubic-bezier(0.42, 1.67, 0.21, 0.9);
+        }
+        .button:not(.togglable) {
+            z-index: 1;
+        }
+
+        .background {
+            user-select: none;
+            border-radius: inherit;
+            height: 100%;
+            width: 100%;
+            z-index: -1;
+            position: absolute;
+            inset: 0px;
+        }
+    }
+`,k=e`
+    @layer mdc.icon-button.base {
+        .button:not(.disabled) {
+            color: var(--_icon-color);
+        }
+        .button:not(.disabled).togglable.unselected {
+            color: var(--_icon-color-toggle-unselected);
+        }
+        .button:not(.disabled).togglable.selected {
+            color: var(--_icon-color-toggle-selected);
+        }
+
+        .button:not(.disabled):hover {
+            color: var(--_hovered-icon-color);
+        }
+        .button:not(.disabled).togglable.unselected:hover {
+            color: var(--_hovered-icon-color-toggle-unselected);
+        }
+        .button:not(.disabled).togglable.selected:hover {
+            color: var(--_hovered-icon-color-toggle-selected);
+        }
+
+        .button:not(.disabled):focus-within {
+            color: var(--_focused-icon-color);
+        }
+        .button:not(.disabled).togglable.unselected:focus-within {
+            color: var(--_focused-icon-color-toggle-unselected);
+        }
+        .button:not(.disabled).togglable.selected:focus-within {
+            color: var(--_focused-icon-color-toggle-selected);
+        }
+
+        .button:not(.disabled):active {
+            color: var(--_pressed-icon-color);
+        }
+        .button:not(.disabled).togglable.unselected:active {
+            color: var(--_pressed-icon-color-toggle-unselected);
+        }
+        .button:not(.disabled).togglable.selected:active {
+            color: var(--_pressed-icon-color-toggle-selected);
+        }
+
+        .button.disabled {
+            color: var(--_disabled-icon-color);
+            opacity: var(--_disabled-icon-opacity);
+        }
+    }
+`,j=e`
+    @layer mdc.icon-button.composite.icon {
+        .button.extra-small ::slotted(*) {
+            font-size: var(--_extra-small-icon-size);
+            height: var(--_extra-small-icon-size);
+            width: var(--_extra-small-icon-size);
+        }
+        .button.small ::slotted(*) {
+            font-size: var(--_small-icon-size);
+            height: var(--_small-icon-size);
+            width: var(--_small-icon-size);
+        }
+        .button.medium ::slotted(*) {
+            font-size: var(--_medium-icon-size);
+            height: var(--_medium-icon-size);
+            width: var(--_medium-icon-size);
+        }
+        .button.large ::slotted(*) {
+            font-size: var(--_large-icon-size);
+            height: var(--_large-icon-size);
+            width: var(--_large-icon-size);
+        }
+        .button.extra-large ::slotted(*) {
+            font-size: var(--_extra-large-icon-size);
+            height: var(--_extra-large-icon-size);
+            width: var(--_extra-large-icon-size);
+        }
+
+        .button.extra-small mdc-icon {
+            ${a(d(l("--mdc-icon",{size:"var(--_extra-small-icon-size)"})))}
+        }
+        .button.small mdc-icon {
+            ${a(d(l("--mdc-icon",{size:"var(: var(--_small-icon-size)"})))}
+        }
+        .button.medium mdc-icon {
+            ${a(d(l("--mdc-icon",{size:"var(: var(--_medium-icon-size)"})))}
+        }
+        .button.large mdc-icon {
+            ${a(d(l("--mdc-icon",{size:"var(: var(--_large-icon-size)"})))}
+        }
+        .button.extra-large mdc-icon {
+            ${a(d(l("--mdc-icon",{size:"var(--_extra-large-icon-size)"})))}
+        }
+    }
+`,q=e`
+    @layer mdc.icon-button.composite.ripple {
+        ${(()=>{const t=(e,t)=>a(d(l("--mdc-ripple",{"hovered-color":e?`var(--_hovered-state-layer-color-toggle-${t?"selected":"unselected"})`:"var(--_hovered-state-layer-color)","pressed-color":e?`var(--_pressed-state-layer-color-toggle-${t?"selected":"unselected"})`:"var(--_pressed-state-layer-color)","hovered-opacity":"var(--_hovered-state-layer-opacity)","pressed-opacity":"var(--_pressed-state-layer-opacity)"})));return e`
+        mdc-ripple { ${t(!1,!1)}; }
+        .togglable.selected mdc-ripple { ${t(!0,!0)}; }
+        .togglable.unselected mdc-ripple { ${t(!0,!1)}; }
+
+    `})()}
+    }
+`,C=[h,w,z,x,k,q,j,e`
+        @layer mdc.icon-button.filled.variable {
+            :host {
+                ${b}
+            }
+        }
+    `],A=[h,w,z,x,k,q,j,e`
+        @layer mdc.icon-button.filled-tonal.variable {
+            :host {
+                ${m}
+            }
+        }
+    `],B=[h,$,z,x,k,q,j,y,e`
+        @layer mdc.icon-button.outlined.variable {
+            :host {
+                ${v}
+            }
+        }
+    `],D=[h,f,z,x,k,q,j,e`
+        @layer mdc.icon-button.standard.variable {
+            :host {
+                ${p}
+            }
+        }
+    `];export{C as filledIconButtonStyle,A as filledTonalIconButtonStyle,B as outlinedIconButtonStyle,D as standardIconButtonStyle};

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

@@ -0,0 +1,11 @@
+import { IconButton } from './icon-button';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mdc-outlined-icon-button": OutlinedIconButton;
+    }
+}
+export declare class OutlinedIconButton extends IconButton {
+    static styles: import("lit").CSSResult[];
+    protected renderOutline(): unknown;
+}
+//# sourceMappingURL=outlined-icon-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/outlined-icon-button.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,0BAA0B,EAAE,kBAAkB,CAAA;KACjD;CACJ;AAED,qBACa,kBAAmB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAA0B;cAE7B,aAAa,IAAI,OAAO;CAK9C"}

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

@@ -0,0 +1 @@
+import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{x as i}from"../../lit-element-Bf8D1KRw.js";import{t as o}from"../../custom-element-Dz3n6kSt.js";import{IconButton as s}from"./icon-button.js";import{outlinedIconButtonStyle as r}from"./icon-button.style.js";import"../../property-CHB_6zYv.js";import"../../query-DifSdHBD.js";import"../../class-map-DQX-4Y_I.js";import"../../utils/behaviors/element-internals.js";import"../../utils/controller/form-submitter.js";import"./base-icon-button.js";import"../../utils/aria/delegate.js";import"../../utils/aria/aria.js";import"../../utils/event/form-label-activation.js";import"../focus-ring/focus-ring.js";import"../../utils/controller/attachable-controller.js";import"../focus-ring/focus-ring.style.js";import"../../easing-5hHInU7b.js";import"../../component-definitions/focus-ring.definition.js";import"../../color-CigMJnjV.js";import"../../shape-CrZ0CLVJ.js";import"../../utils/tokens/create-logic-shape-tokens.js";import"../../utils/tokens/create-wrapped-tokens.js";import"../../utils/tokens/string-tokens.js";import"../ripple/ripple.js";import"../ripple/ripple-action.js";import"../ripple/ripple.style.js";import"../../component-definitions/ripple.definition.js";import"../../state-C-haZXan.js";import"../../component-definitions/icon-button.definition.js";import"../../utils/tokens/override-component-tokens.js";let e=class extends s{static{this.styles=r}renderOutline(){return i`<span aria-hidden="true" class="outline"></span>`}};e=t([o("mdc-outlined-icon-button")],e);export{e as OutlinedIconButton};

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

@@ -0,0 +1,10 @@
+import { IconButton } from './icon-button';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mdc-standard-icon-button": StandardIconButton;
+    }
+}
+export declare class StandardIconButton extends IconButton {
+    static styles: import("lit").CSSResult[];
+}
+//# sourceMappingURL=standard-icon-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"standard-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/standard-icon-button.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,0BAA0B,EAAE,kBAAkB,CAAA;KACjD;CACJ;AAED,qBACa,kBAAmB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAA0B;CACnD"}

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

@@ -0,0 +1 @@
+import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{t as i}from"../../custom-element-Dz3n6kSt.js";import"../../lit-element-Bf8D1KRw.js";import{IconButton as o}from"./icon-button.js";import{standardIconButtonStyle as s}from"./icon-button.style.js";import"../../property-CHB_6zYv.js";import"../../query-DifSdHBD.js";import"../../class-map-DQX-4Y_I.js";import"../../utils/behaviors/element-internals.js";import"../../utils/controller/form-submitter.js";import"./base-icon-button.js";import"../../utils/aria/delegate.js";import"../../utils/aria/aria.js";import"../../utils/event/form-label-activation.js";import"../focus-ring/focus-ring.js";import"../../utils/controller/attachable-controller.js";import"../focus-ring/focus-ring.style.js";import"../../easing-5hHInU7b.js";import"../../component-definitions/focus-ring.definition.js";import"../../color-CigMJnjV.js";import"../../shape-CrZ0CLVJ.js";import"../../utils/tokens/create-logic-shape-tokens.js";import"../../utils/tokens/create-wrapped-tokens.js";import"../../utils/tokens/string-tokens.js";import"../ripple/ripple.js";import"../ripple/ripple-action.js";import"../ripple/ripple.style.js";import"../../component-definitions/ripple.definition.js";import"../../state-C-haZXan.js";import"../../component-definitions/icon-button.definition.js";import"../../utils/tokens/override-component-tokens.js";let r=class extends o{static{this.styles=s}};r=t([i("mdc-standard-icon-button")],r);export{r as StandardIconButton};

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

@@ -0,0 +1,39 @@
+import { createValidator, getValidityAnchor } from '../../utils/behaviors/constraint-validation';
+import { CheckboxValidator } from '../../utils/behaviors/validators/checkbox-validator';
+import { getFormState, getFormValue } from '../../utils/form/form-associated';
+import { BaseIconButton } from './base-icon-button';
+declare const TogglableIconButton_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 abstract class TogglableIconButton extends TogglableIconButton_base {
+    disabled: boolean;
+    name: string;
+    selected: boolean;
+    required: boolean;
+    value: string;
+    protected readonly buttonElement: HTMLElement | null;
+    focus(): void;
+    blur(): void;
+    constructor();
+    protected render(): unknown;
+    protected renderButton(): unknown;
+    protected renderIcon(): unknown;
+    private handleInput;
+    private handleChange;
+    [getFormValue](): string | null;
+    [getFormState](): string;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    [createValidator](): CheckboxValidator;
+    [getValidityAnchor](): HTMLElement | null;
+}
+export {};
+//# sourceMappingURL=togglable-icon-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"togglable-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/togglable-icon-button.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAA6B,MAAM,6CAA6C,CAAA;AAC3H,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAA;AAEvF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAuB,MAAM,kCAAkC,CAAA;AAClG,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;;AAEnD;;;;;;;;;GASG;AACH,8BAAsB,mBAAoB,SAAQ,wBAA8D;IAEpG,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IAGb,QAAQ,EAAE,OAAO,CAAQ;IAGzB,QAAQ,EAAE,OAAO,CAAQ;IAGzB,KAAK,EAAE,MAAM,CAAO;IAE3B,mBAC4B,aAAa,EAAG,WAAW,GAAG,IAAI,CAAA;IAE9C,KAAK;IAIL,IAAI;;cAYD,MAAM,IAAI,OAAO;cAMjB,YAAY,IAAI,OAAO;cAmCvB,UAAU,IAAI,OAAO;IAMxC,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAIZ,CAAC,YAAY,CAAC;IAId,CAAC,YAAY,CAAC;IAIb,iBAAiB;IAMjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAIvC,CAAC,eAAe,CAAC;IAOjB,CAAC,iBAAiB,CAAC;CAG9B"}

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

@@ -0,0 +1 @@
+import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{x as e}from"../../lit-element-Bf8D1KRw.js";import{n as i}from"../../property-CHB_6zYv.js";import{e as s}from"../../query-DifSdHBD.js";import{e as r}from"../../class-map-DQX-4Y_I.js";import{mixinConstraintValidation as o,createValidator as n,getValidityAnchor as l}from"../../utils/behaviors/constraint-validation.js";import{CheckboxValidator as a}from"../../utils/behaviors/validators/checkbox-validator.js";import{redispatchEvent as p}from"../../utils/event/redispatch-event.js";import{mixinFormAssociated as d,getFormValue as c,getFormState as u}from"../../utils/form/form-associated.js";import{BaseIconButton as h}from"./base-icon-button.js";import"../../utils/behaviors/element-internals.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"../focus-ring/focus-ring.js";import"../../custom-element-Dz3n6kSt.js";import"../../utils/controller/attachable-controller.js";import"../focus-ring/focus-ring.style.js";import"../../easing-5hHInU7b.js";import"../../component-definitions/focus-ring.definition.js";import"../../color-CigMJnjV.js";import"../../shape-CrZ0CLVJ.js";import"../../utils/tokens/create-logic-shape-tokens.js";import"../../utils/tokens/create-wrapped-tokens.js";import"../../utils/tokens/string-tokens.js";import"../ripple/ripple.js";import"../ripple/ripple-action.js";import"../ripple/ripple.style.js";import"../../component-definitions/ripple.definition.js";import"../../state-C-haZXan.js";class m extends(o(d(h))){focus(){this.buttonElement?.focus()}blur(){this.buttonElement?.blur()}constructor(){super(),this.selected=!1,this.required=!1,this.value="on",this.addEventListener("click",this.handleClick.bind(this))}render(){return e`${this.renderButton()}`}renderButton(){const t=r({[this.size]:!0,[this.width]:!0,round:"round"===this.shape,square:"square"===this.shape,disabled:this.disabled,selected:this.selected,unselected:!this.selected});return e`<span class="button togglable ${t}"><input type="checkbox" role="switch" id="button" class="input" .checked="${this.selected}" .disabled="${this.disabled}" .required="${this.required}" aria-disabled="${this.disabled}" aria-required="${this.required}" tabindex="0" @input="${this.handleInput}" @change="${this.handleChange}"> ${this.renderIcon()} ${this.renderOutline?.()} ${this.renderBackground()}<mdc-ripple for="button" part="ripple"></mdc-ripple><mdc-focus-ring for="button" part="focus-ring"></mdc-focus-ring></span>`}renderIcon(){return e`<slot></slot>`}handleInput(t){this.selected=t.target.checked}handleChange(t){p(this,t)}[c](){return this.selected?this.value:null}[u](){return String(this.selected)}formResetCallback(){this.selected=this.hasAttribute("selected")}formStateRestoreCallback(t){this.selected="true"===t}[n](){return new a(()=>({checked:this.selected,required:this.required}))}[l](){return this.buttonElement}}t([i({type:Boolean,reflect:!1})],m.prototype,"selected",void 0),t([i({type:Boolean,reflect:!0})],m.prototype,"required",void 0),t([i({type:String,reflect:!1})],m.prototype,"value",void 0),t([s(".input")],m.prototype,"buttonElement",void 0);export{m as TogglableIconButton};

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

@@ -0,0 +1,10 @@
+import { TogglableIconButton } from './togglable-icon-button';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mdc-toggle-filled-icon-button": ToggleFilledIconButton;
+    }
+}
+export declare class ToggleFilledIconButton extends TogglableIconButton {
+    static styles: import("lit").CSSResult[];
+}
+//# sourceMappingURL=toggle-filled-icon-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-filled-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/toggle-filled-icon-button.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAE7D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,+BAA+B,EAAE,sBAAsB,CAAA;KAC1D;CACJ;AAED,qBACa,sBAAuB,SAAQ,mBAAmB;IAC3D,OAAgB,MAAM,4BAAwB;CACjD"}

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

@@ -0,0 +1 @@
+import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{t as i}from"../../custom-element-Dz3n6kSt.js";import"../../lit-element-Bf8D1KRw.js";import{filledIconButtonStyle as o}from"./icon-button.style.js";import{TogglableIconButton as s}from"./togglable-icon-button.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";import"../../property-CHB_6zYv.js";import"../../query-DifSdHBD.js";import"../../class-map-DQX-4Y_I.js";import"../../utils/behaviors/constraint-validation.js";import"../../utils/behaviors/element-internals.js";import"../../utils/behaviors/validators/checkbox-validator.js";import"../../utils/behaviors/validators/validator.js";import"../../utils/event/redispatch-event.js";import"../../utils/form/form-associated.js";import"./base-icon-button.js";import"../../utils/aria/delegate.js";import"../../utils/aria/aria.js";import"../../utils/event/form-label-activation.js";import"../focus-ring/focus-ring.js";import"../../utils/controller/attachable-controller.js";import"../focus-ring/focus-ring.style.js";import"../../easing-5hHInU7b.js";import"../../component-definitions/focus-ring.definition.js";import"../ripple/ripple.js";import"../ripple/ripple-action.js";import"../ripple/ripple.style.js";import"../../component-definitions/ripple.definition.js";let r=class extends s{static{this.styles=o}};r=t([i("mdc-toggle-filled-icon-button")],r);export{r as ToggleFilledIconButton};

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

@@ -0,0 +1,10 @@
+import { TogglableIconButton } from './togglable-icon-button';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mdc-toggle-filled-tonal-icon-button": ToggleFilledTonalIconButton;
+    }
+}
+export declare class ToggleFilledTonalIconButton extends TogglableIconButton {
+    static styles: import("lit").CSSResult[];
+}
+//# sourceMappingURL=toggle-filled-tonal-icon-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-filled-tonal-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/toggle-filled-tonal-icon-button.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAE7D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,qCAAqC,EAAE,2BAA2B,CAAA;KACrE;CACJ;AAED,qBACa,2BAA4B,SAAQ,mBAAmB;IAChE,OAAgB,MAAM,4BAA6B;CACtD"}

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

@@ -0,0 +1 @@
+import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{t as i}from"../../custom-element-Dz3n6kSt.js";import"../../lit-element-Bf8D1KRw.js";import{filledTonalIconButtonStyle as o}from"./icon-button.style.js";import{TogglableIconButton as s}from"./togglable-icon-button.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";import"../../property-CHB_6zYv.js";import"../../query-DifSdHBD.js";import"../../class-map-DQX-4Y_I.js";import"../../utils/behaviors/constraint-validation.js";import"../../utils/behaviors/element-internals.js";import"../../utils/behaviors/validators/checkbox-validator.js";import"../../utils/behaviors/validators/validator.js";import"../../utils/event/redispatch-event.js";import"../../utils/form/form-associated.js";import"./base-icon-button.js";import"../../utils/aria/delegate.js";import"../../utils/aria/aria.js";import"../../utils/event/form-label-activation.js";import"../focus-ring/focus-ring.js";import"../../utils/controller/attachable-controller.js";import"../focus-ring/focus-ring.style.js";import"../../easing-5hHInU7b.js";import"../../component-definitions/focus-ring.definition.js";import"../ripple/ripple.js";import"../ripple/ripple-action.js";import"../ripple/ripple.style.js";import"../../component-definitions/ripple.definition.js";let r=class extends s{static{this.styles=o}};r=t([i("mdc-toggle-filled-tonal-icon-button")],r);export{r as ToggleFilledTonalIconButton};

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

@@ -0,0 +1,11 @@
+import { TogglableIconButton } from './togglable-icon-button';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mdc-toggle-outlined-icon-button": ToggleOutlinedIconButton;
+    }
+}
+export declare class ToggleOutlinedIconButton extends TogglableIconButton {
+    static styles: import("lit").CSSResult[];
+    protected renderOutline(): unknown;
+}
+//# sourceMappingURL=toggle-outlined-icon-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-outlined-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/toggle-outlined-icon-button.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAE7D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,iCAAiC,EAAE,wBAAwB,CAAA;KAC9D;CACJ;AAED,qBACa,wBAAyB,SAAQ,mBAAmB;IAC7D,OAAgB,MAAM,4BAA0B;cAE7B,aAAa,IAAI,OAAO;CAK9C"}

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

@@ -0,0 +1 @@
+import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{x as i}from"../../lit-element-Bf8D1KRw.js";import{t as o}from"../../custom-element-Dz3n6kSt.js";import{outlinedIconButtonStyle as s}from"./icon-button.style.js";import{TogglableIconButton as r}from"./togglable-icon-button.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";import"../../property-CHB_6zYv.js";import"../../query-DifSdHBD.js";import"../../class-map-DQX-4Y_I.js";import"../../utils/behaviors/constraint-validation.js";import"../../utils/behaviors/element-internals.js";import"../../utils/behaviors/validators/checkbox-validator.js";import"../../utils/behaviors/validators/validator.js";import"../../utils/event/redispatch-event.js";import"../../utils/form/form-associated.js";import"./base-icon-button.js";import"../../utils/aria/delegate.js";import"../../utils/aria/aria.js";import"../../utils/event/form-label-activation.js";import"../focus-ring/focus-ring.js";import"../../utils/controller/attachable-controller.js";import"../focus-ring/focus-ring.style.js";import"../../easing-5hHInU7b.js";import"../../component-definitions/focus-ring.definition.js";import"../ripple/ripple.js";import"../ripple/ripple-action.js";import"../ripple/ripple.style.js";import"../../component-definitions/ripple.definition.js";let e=class extends r{static{this.styles=s}renderOutline(){return i`<span aria-hidden="true" class="outline"></span>`}};e=t([o("mdc-toggle-outlined-icon-button")],e);export{e as ToggleOutlinedIconButton};

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

@@ -0,0 +1,10 @@
+import { TogglableIconButton } from './togglable-icon-button';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mdc-toggle-standard-icon-button": ToggleStandardIconButton;
+    }
+}
+export declare class ToggleStandardIconButton extends TogglableIconButton {
+    static styles: import("lit").CSSResult[];
+}
+//# sourceMappingURL=toggle-standard-icon-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-standard-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/toggle-standard-icon-button.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAE7D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,iCAAiC,EAAE,wBAAwB,CAAA;KAC9D;CACJ;AAED,qBACa,wBAAyB,SAAQ,mBAAmB;IAC7D,OAAgB,MAAM,4BAA0B;CACnD"}

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

@@ -0,0 +1 @@
+import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{t as i}from"../../custom-element-Dz3n6kSt.js";import"../../lit-element-Bf8D1KRw.js";import{standardIconButtonStyle as o}from"./icon-button.style.js";import{TogglableIconButton as s}from"./togglable-icon-button.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";import"../../property-CHB_6zYv.js";import"../../query-DifSdHBD.js";import"../../class-map-DQX-4Y_I.js";import"../../utils/behaviors/constraint-validation.js";import"../../utils/behaviors/element-internals.js";import"../../utils/behaviors/validators/checkbox-validator.js";import"../../utils/behaviors/validators/validator.js";import"../../utils/event/redispatch-event.js";import"../../utils/form/form-associated.js";import"./base-icon-button.js";import"../../utils/aria/delegate.js";import"../../utils/aria/aria.js";import"../../utils/event/form-label-activation.js";import"../focus-ring/focus-ring.js";import"../../utils/controller/attachable-controller.js";import"../focus-ring/focus-ring.style.js";import"../../easing-5hHInU7b.js";import"../../component-definitions/focus-ring.definition.js";import"../ripple/ripple.js";import"../ripple/ripple-action.js";import"../ripple/ripple.style.js";import"../../component-definitions/ripple.definition.js";let r=class extends s{static{this.styles=o}};r=t([i("mdc-toggle-standard-icon-button")],r);export{r as ToggleStandardIconButton};

package/build/components/progress-indicator/base-progress-indicator.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2025 Sandlada & Kai Orion
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, type TemplateResult } from 'lit';
+declare const BaseProgressIndicator_base: import("../../utils/behaviors/mixin").MixinReturn<typeof LitElement>;
+/**
+ * A progress component.
+ *
+ * @version
+ * Material Design 3 - Expressive
+ *
+ * @link
+ * https://m3.material.io/components/progress-indicators/specs
+ */
+export declare abstract class BaseProgressIndicator extends BaseProgressIndicator_base {
+    value: number;
+    max: number;
+    indeterminate: boolean;
+    protected render(): TemplateResult<1>;
+    protected getRenderClasses(): {
+        indeterminate: boolean;
+    };
+    protected abstract renderIndicator(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=base-progress-indicator.d.ts.map

package/build/components/progress-indicator/base-progress-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-progress-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/progress-indicator/base-progress-indicator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,UAAU,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;;AAMpE;;;;;;;;GAQG;AACH,8BAAsB,qBAAsB,SAAQ,0BAA8B;IAGvE,KAAK,EAAE,MAAM,CAAI;IAGjB,GAAG,EAAE,MAAM,CAAI;IAGf,aAAa,EAAE,OAAO,CAAQ;cAElB,MAAM;IAgBzB,SAAS,CAAC,gBAAgB;;;IAM1B,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,cAAc;CACvD"}

package/build/components/progress-indicator/base-progress-indicator.js

@@ -0,0 +1 @@
+import{_ as e}from"../../tslib.es6-CmLYFWVC.js";import{a as r,E as t,x as a}from"../../lit-element-Bf8D1KRw.js";import{n as i}from"../../property-CHB_6zYv.js";import{e as s}from"../../class-map-DQX-4Y_I.js";import{mixinDelegatesAria as o}from"../../utils/aria/delegate.js";import"../../utils/aria/aria.js";class m extends(o(r)){constructor(){super(...arguments),this.value=0,this.max=1,this.indeterminate=!1}render(){const{ariaLabel:e}=this;return a`<div class="progress ${s(this.getRenderClasses())}" role="progressbar" aria-label="${e||t}" aria-valuemin="0" aria-valuemax="${this.max}" aria-valuenow="${this.indeterminate?t:this.value}">${this.renderIndicator()}</div>`}getRenderClasses(){return{indeterminate:this.indeterminate}}}e([i({type:Number})],m.prototype,"value",void 0),e([i({type:Number})],m.prototype,"max",void 0),e([i({type:Boolean})],m.prototype,"indeterminate",void 0);export{m as BaseProgressIndicator};