@sandlada/mdc 0.1.0-20250907.a

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

@@ -0,0 +1,468 @@
+import{r as e,a as o}from"../../lit-element-Ho-VPzO1.js";import{ElevatedButtonDefinition as l,FilledButtonDefinition as a,FilledTonalButtonDefinition as t,OutlinedButtonDefinition as r,TextButtonDefinition as i}from"../../component-definitions/button.definition.js";import{createWrappedTokens as n}from"../../utils/tokens/create-wrapped-tokens.js";import{overrideComponentTokens as c}from"../../utils/tokens/override-component-tokens.js";import{stringTokens as s}from"../../utils/tokens/string-tokens.js";import"../../color-CigMJnjV.js";import"../../elevation-dUQez_WX.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 d=n("--mdc-elevated-button",l),g=e(s(d)),b=n("--mdc-filled-button",a),v=e(s(b)),u=n("--mdc-filled-tonal-button",t),m=e(s(u)),h=n("--mdc-outlined-button",r),p=e(s(h)),_=n("--mdc-text-button",i),f=e(s(_)),x=o`
+    .container mdc-ripple {${s(c("--mdc-ripple",{"hovered-color":"var(--_hovered-state-layer-color)","focused-color":"var(--_focused-state-layer-color)","pressed-color":"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)"}))};}
+    .container.togglable.selected mdc-ripple {${s(c("--mdc-ripple",{"hovered-color":"var(--_hovered-state-layer-color-toggle-selected)","focused-color":"var(--_focused-state-layer-color-toggle-selected)","pressed-color":"var(--_pressed-state-layer-color-toggle-selected)"}))};}
+    .container.togglable.unselected mdc-ripple {${s(c("--mdc-ripple",{"hovered-color":"var(--_hovered-state-layer-color-toggle-unselected)","focused-color":"var(--_focused-state-layer-color-toggle-unselected)","pressed-color":"var(--_pressed-state-layer-color-toggle-unselected)"}))};}
+`,z=o`
+    .container mdc-elevation {transition-duration: 0ms;${s(c("--mdc-elevation",{level:"var(--_container-elevation)","shadow-color":"var(--_container-shadow-color)"}))};}
+    .container.disabled mdc-elevation {transition: none;${s(c("--mdc-elevation",{level:"var(--_disabled-container-elevation)"}))};}
+    .container:focus-within mdc-elevation {${s(c("--mdc-elevation",{level:"var(--_focused-container-elevation)"}))};}
+    .container:active mdc-elevation {${s(c("--mdc-elevation",{level:"var(--_pressed-container-elevation)"}))};}
+`,$=o`
+    :host {
+        display: inline-flex;
+        outline: none;
+        vertical-align: top;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    .container {
+        all: unset;
+        position: absolute;
+        inset: 0;
+        box-sizing: border-box;
+        cursor: pointer;
+        display: flex;
+        outline: none;
+        place-content: center;
+        place-items: center;
+        position: relative;
+        z-index: 0;
+        text-overflow: ellipsis;
+        text-wrap: nowrap;
+        user-select: none;
+        -webkit-tap-highlight-color: transparent;
+        vertical-align: top;
+        transition-property: border-radius;
+        transition-duration: 350ms;
+        transition-timing-function: cubic-bezier(0.42, 1.67, 0.21, 0.9);
+    }
+
+    :host([disabled]),
+    .container.disabled {
+        cursor: default;
+        pointer-events: none;
+    }
+
+    /* Root Width & Height */
+
+    .container {
+        &.extra-small {
+            height: var(--_extra-small-container-height);
+            min-width: calc(64px - var(--_extra-small-leading-space) - var(--_extra-small-trailing-space));
+        }
+        &.small {
+            height: var(--_small-container-height);
+            min-width: calc(64px - var(--_small-leading-space) - var(--_small-trailing-space));
+        }
+        &.medium {
+            height: var(--_medium-container-height);
+            min-width: calc(64px - var(--_medium-leading-space) - var(--_medium-trailing-space));
+        }
+        &.large {
+            height: var(--_large-container-height);
+            min-width: calc(64px - var(--_large-leading-space) - var(--_large-trailing-space));
+        }
+        &.extra-large {
+            height: var(--_extra-large-container-height);
+            min-width: calc(64px - var(--_extra-large-leading-space) - var(--_extra-large-trailing-space));
+        }
+    }
+
+    /* Button Size */
+
+    .container.extra-small {
+        padding-inline-start: var(--_extra-small-leading-space);
+        padding-inline-end: var(--_extra-small-trailing-space);
+        gap: var(--_extra-small-between-icon-label-space);
+    }
+    .container.small{
+        padding-inline-start: var(--_small-leading-space);
+        padding-inline-end: var(--_small-trailing-space);
+        gap: var(--_small-between-icon-label-space);
+    }
+    .container.medium{
+        padding-inline-start: var(--_medium-leading-space);
+        padding-inline-end: var(--_medium-trailing-space);
+        gap: var(--_medium-between-icon-label-space);
+    }
+    .container.large{
+        padding-inline-start: var(--_large-leading-space);
+        padding-inline-end: var(--_large-trailing-space);
+        gap: var(--_large-between-icon-label-space);
+    }
+    .container.extra-large{
+        padding-inline-start: var(--_extra-large-leading-space);
+        padding-inline-end: var(--_extra-large-trailing-space);
+        gap: var(--_extra-large-between-icon-label-space);
+    }
+
+    .container:not(.has-label) .label {
+        display: none;
+    }
+
+    /* Label Size */
+
+    .container.extra-small .label {
+        font-family: var(--_extra-small-label-font);
+        font-weight: var(--_extra-small-label-weight);
+        line-height: var(--_extra-small-label-line-height);
+        letter-spacing: var(--_extra-small-label-tracking);
+        font-size: var(--_extra-small-label-size);
+    }
+    .container.small .label {
+        font-family: var(--_small-label-font);
+        font-weight: var(--_small-label-weight);
+        line-height: var(--_small-label-line-height);
+        letter-spacing: var(--_small-label-tracking);
+        font-size: var(--_small-label-size);
+    }
+    .container.medium .label {
+        font-family: var(--_medium-label-font);
+        font-weight: var(--_medium-label-weight);
+        line-height: var(--_medium-label-line-height);
+        letter-spacing: var(--_medium-label-tracking);
+        font-size: var(--_medium-label-size);
+    }
+    .container.large .label {
+        font-family: var(--_large-label-font);
+        font-weight: var(--_large-label-weight);
+        line-height: var(--_large-label-line-height);
+        letter-spacing: var(--_large-label-tracking);
+        font-size: var(--_large-label-size);
+    }
+    .container.extra-large .label {
+        font-family: var(--_extra-large-label-font);
+        font-weight: var(--_extra-large-label-weight);
+        line-height: var(--_extra-large-label-line-height);
+        letter-spacing: var(--_extra-large-label-tracking);
+        font-size: var(--_extra-large-label-size);
+    }
+
+    .toggle-input {
+        all: unset;
+        appearance: none;
+        position: absolute;
+        inset: 0;
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        opacity: 0;
+        outline: none;
+        border: none;
+        z-index: 1;
+        cursor: inherit;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    /* Label Color */
+
+    .container .label {
+        overflow: hidden;
+        color: var(--_label-color);
+    }
+    .container.disabled .label,
+    .container.disabled.togglable:is(.selected, .unselected) .label {
+        color: var(--_disabled-label-color);
+        opacity: var(--_disabled-label-opacity);
+    }
+    .container:hover .label {
+        color: var(--_hovered-label-color);
+    }
+    .container:focus-within .label {
+        color: var(--_focused-label-color);
+    }
+    .container:active .label {
+        color: var(--_pressed-label-color);
+    }
+
+    .container.togglable.selected .label {
+        color: var(--_label-color-toggle-selected);
+    }
+    .container.togglable.selected:hover .label {
+        color: var(--_hovered-label-color-toggle-selected);
+    }
+
+    .container.togglable.selected:focus-within .label {
+        color: var(--_focused-label-color-toggle-selected);
+    }
+
+    .container.togglable.selected:active .label {
+        color: var(--_pressed-label-color-toggle-selected);
+    }
+
+    .container.togglable.unselected .label {
+        color: var(--_label-color-toggle-unselected);
+    }
+    .container.togglable.unselected:hover .label {
+        color: var(--_hovered-label-color-toggle-unselected);
+    }
+
+    .container.togglable.unselected:focus-within .label {
+        color: var(--_focused-label-color-toggle-unselected);
+    }
+
+    .container.togglable.unselected:active .label {
+        color: var(--_pressed-label-color-toggle-unselected);
+    }
+
+    .container .background {
+        border-radius: inherit;
+        inset: 0;
+        position: absolute;
+        z-index: -1;
+    }
+    .container:not(.disabled) .background {
+        background-color: var(--_container-color);
+    }
+    .container.togglable.selected:not(.disabled) .background {
+        background-color: var(--_container-color-toggle-selected);
+    }
+    .container.togglable.unselected:not(.disabled) .background {
+        background-color: var(--_container-color-toggle-unselected);
+    }
+    .container.disabled .background {
+        background-color: var(--_disabled-container-color);
+        opacity: var(--_disabled-container-opacity);
+    }
+
+    :is(.container .label, .label *) {
+        text-overflow: inherit;
+    }
+
+    @media (forced-colors: active) {
+        .background {
+            border: 1px solid CanvasText;
+        }
+
+        :host:is([disabled], .disabled) {
+            --_disabled-icon-color: GrayText;
+            --_disabled-icon-opacity: 1;
+            --_disabled-container-opacity: 1;
+            --_disabled-label-color: GrayText;
+            --_disabled-label-opacity: 1;
+        }
+    }
+
+    .touch-target {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        height: 100%;
+        transform: translate(-50%, -50%);
+        z-index: 1;
+    }
+
+    [touch-target='wrapper'] {
+        margin: max(0px, (48px - var(--_container-height)) / 2) 0;
+    }
+
+    [touch-target='none'] .touch-target {
+        display: none;
+    }
+
+`,w=o`
+    .container :is(::slotted([slot="icon"]), .icon) {
+        display: inline-flex;
+        position: relative;
+        writing-mode: horizontal-tb;
+        fill: currentColor;
+        flex-shrink: 0;
+        color: var(--_icon-color);
+    }
+
+    .container:not(.has-icon) .icon {
+        display: none;
+    }
+
+    .container:not(.disabled):hover :is(::slotted([slot="icon"]), .icon) {
+        color: var(--_hovered-icon-color);
+    }
+    .container:not(.disabled):focus-within :is(::slotted([slot="icon"]), .icon) {
+        color: var(--_focused-icon-color);
+    }
+    .container:not(.disabled):active :is(::slotted([slot="icon"]), .icon) {
+        color: var(--_pressed-icon-color);
+    }
+    /* Selected */
+    .container:not(.disabled).togglable.selected :is(::slotted([slot="icon"]), .icon) {
+        color: var(--_icon-color-toggle-selected);
+    }
+    .container:not(.disabled).togglable.selected:hover :is(::slotted([slot="icon"]), .icon) {
+        color: var(--_hovered-icon-color-toggle-selected);
+    }
+    .container:not(.disabled).togglable.selected:focus-within :is(::slotted([slot="icon"]), .icon) {
+        color: var(--_focused-icon-color-toggle-selected);
+    }
+    .container:not(.disabled).togglable.selected:active :is(::slotted([slot="icon"]), .icon) {
+        color: var(--_pressed-icon-color-toggle-selected);
+    }
+    /* Unselected */
+    .container:not(.disabled).togglable.unselected :is(::slotted([slot="icon"]), .icon) {
+        color: var(--_icon-color-toggle-unselected);
+    }
+    .container:not(.disabled).togglable.unselected:hover :is(::slotted([slot="icon"]), .icon) {
+        color: var(--_hovered-icon-color-toggle-unselected);
+    }
+    .container:not(.disabled).togglable.unselected:focus-within :is(::slotted([slot="icon"]), .icon) {
+        color: var(--_focused-icon-color-toggle-unselected);
+    }
+    .container:not(.disabled).togglable.unselected:active :is(::slotted([slot="icon"]), .icon) {
+        color: var(--_pressed-icon-color-toggle-unselected);
+    }
+    /* Icon Size */
+    .container.extra-small :is(::slotted([slot="icon"]), .icon) {
+        font-size: var(--_extra-small-icon-size);
+        inline-size: var(--_extra-small-icon-size);
+        block-size: var(--_extra-small-icon-size);
+    }
+    .container.small :is(::slotted([slot="icon"]), .icon) {
+        font-size: var(--_small-icon-size);
+        inline-size: var(--_small-icon-size);
+        block-size: var(--_small-icon-size);
+    }
+    .container.medium :is(::slotted([slot="icon"]), .icon) {
+        font-size: var(--_medium-icon-size);
+        inline-size: var(--_medium-icon-size);
+        block-size: var(--_medium-icon-size);
+    }
+    .container.large :is(::slotted([slot="icon"]), .icon) {
+        font-size: var(--_large-icon-size);
+        inline-size: var(--_large-icon-size);
+        block-size: var(--_large-icon-size);
+    }
+    .container.extra-large :is(::slotted([slot="icon"]), .icon) {
+        font-size: var(--_extra-large-icon-size);
+        inline-size: var(--_extra-large-icon-size);
+        block-size: var(--_extra-large-icon-size);
+    }
+    /* Disabled */
+    .container.disabled :is(::slotted([slot="icon"]), .icon) {
+        color: var(--_disabled-icon-color);
+        opacity: var(--_disabled-icon-opacity);
+    }
+`,y=o`
+    .container.extra-small .outline {
+        border-width: var(--_extra-small-outline-width);
+    }
+    .container.small .outline {
+        border-width: var(--_small-outline-width);
+    }
+    .container.medium .outline {
+        border-width: var(--_medium-outline-width);
+    }
+    .container.large .outline {
+        border-width: var(--_large-outline-width);
+    }
+    .container.extra-large .outline {
+        border-width: var(--_extra-large-outline-width);
+    }
+
+    .outline {
+        inset: 0;
+        border-style: solid;
+        position: absolute;
+        box-sizing: border-box;
+        border-color: var(--_outline-color);
+        border-start-start-radius: inherit;
+        border-start-end-radius: inherit;
+        border-end-start-radius: inherit;
+        border-end-end-radius: inherit;
+        z-index: -1;
+    }
+
+    .container.togglable.selected .outline {
+        border-color: var(--_outline-color-toggle-selected);
+    }
+    .container.togglable.unselected .outline {
+        border-color: var(--_outline-color-toggle-unselected);
+    }
+    .container.disabled .outline {
+        border-color: var(--_disabled-outline-color);
+        opacity: var(--_disabled-outline-opacity);
+    }
+    .container.disabled.togglable.selected .outline {
+        border-color: var(--_disabled-outline-color-toggle-selected);
+    }
+    .container.disabled.togglable.unselected .outline {
+        border-color: var(--_disabled-outline-color-toggle-unselected);
+    }
+
+    .container:hover .outline {
+        border-color: var(--_hovered-outline-color);
+    }
+    .container.togglable.selected:hover .outline {
+        border-color: var(--_hovered-outline-color-toggle-selected);
+    }
+    .container.togglable.unselected:hover .outline {
+        border-color: var(--_hovered-outline-color-toggle-unselected);
+    }
+
+    .container:focus-within .outline {
+        border-color: var(--_focused-outline-color);
+    }
+    .container.togglable.selected:focus-within .outline {
+        border-color: var(--_focused-outline-color-toggle-selected);
+    }
+    .container.togglable.unselected:focus-within .outline {
+        border-color: var(--_focused-outline-color-toggle-unselected);
+    }
+
+    .container:active .outline {
+        border-color: var(--_pressed-outline-color);
+    }
+    .container.togglable.selected:active .outline {
+        border-color: var(--_pressed-outline-color-toggle-selected);
+    }
+    .container.togglable.unselected:active .outline {
+        border-color: var(--_pressed-outline-color-toggle-unselected);
+    }
+
+    @media (forced-colors: active) {
+        .container.disabled .background {
+            border-color: GrayText;
+        }
+        .container.disabled .outline {
+            opacity: 1;
+        }
+    }
+`,k=o`
+    :host:has(.container.elevated) {${g};}
+    :host:has(.filled) {${v};}
+    :host:has(.container.filled-tonal) {${m};}
+    :host:has(.container.outlined) {${p};}
+    :host:has(.container.text) {${f};}
+`,j=[(()=>{const l=(o,l)=>e(`\n        border-start-start-radius: min(var(--_${o}-${l}-start-start), calc(var(--_${o}-container-height) / 2));\n        border-start-end-radius: min(var(--_${o}-${l}-start-end), calc(var(--_${o}-container-height) / 2));\n        border-end-start-radius: min(var(--_${o}-${l}-end-start), calc(var(--_${o}-container-height) / 2));\n        border-end-end-radius: min(var(--_${o}-${l}-end-end), calc(var(--_${o}-container-height) / 2));\n    `),a=e=>o`
+        &.extra-small { ${l("extra-small",e)}; }
+        &.small { ${l("small",e)}; }
+        &.medium { ${l("medium",e)}; }
+        &.large { ${l("large",e)}; }
+        &.extra-large { ${l("extra-large",e)}; }
+    `;return o`
+        .container.round  {${a("container-shape-round")};}
+        .container.square {${a("container-shape-square")};}
+        .container.round.togglable.selected {${a("container-shape-round-toggle-selected")};}
+        .container.square.togglable.selected {${a("container-shape-square-toggle-selected")};}
+        .container:not(.disable-morph, .togglable):is(.round, .square):active,
+        .container:not(.disable-morph).togglable:is(.selected, .unselected):has(.toggle-input:active) {${a("container-shape-pressed-morph")};}
+    `})(),(()=>{const l=(e,o)=>s(c("--mdc-focus-ring",{"shape-start-start":`min(var(--_${e}-${o}-start-start), calc(var(--_${e}-container-height) / 2))`,"shape-start-end":`min(var(--_${e}-${o}-start-end), calc(var(--_${e}-container-height) / 2))`,"shape-end-end":`min(var(--_${e}-${o}-end-end), calc(var(--_${e}-container-height) / 2))`,"shape-end-start":`min(var(--_${e}-${o}-end-start), calc(var(--_${e}-container-height) / 2))`})),a=o=>e(`\n        &.extra-small mdc-focus-ring {${l("extra-small",o)};}\n        &.small mdc-focus-ring {${l("small",o)};}\n        &.medium mdc-focus-ring {${l("medium",o)};}\n        &.large mdc-focus-ring {${l("large",o)};}\n        &.extra-large mdc-focus-ring {${l("extra-large",o)};}\n    `);return o`
+        .container.round {${a("container-shape-round")};}
+        .container.square {${a("container-shape-square")};}
+        .container.togglable.selected.round {${a("container-shape-round-toggle-selected")};}
+        .container.togglable.selected.square {${a("container-shape-square-toggle-selected")};}
+        .container:not(.disable-morph, .togglable):is(.round, .square):active,
+        .container:not(.disable-morph).togglable:is(.selected, .unselected):has(.toggle-input:active) {${a("container-shape-pressed-morph")};}
+    `})(),o`
+        .container.extra-small :is(::slotted([slot="icon"]), .icon) {${s(c("--mdc-icon",{size:"var(--_extra-small-icon-size)"}))};}
+        .container.small :is(::slotted([slot="icon"]), .icon) {${s(c("--mdc-icon",{size:"var(--_small-icon-size)"}))};}
+        .container.medium :is(::slotted([slot="icon"]), .icon) {${s(c("--mdc-icon",{size:"var(--_medium-icon-size)"}))};}
+        .container.large :is(::slotted([slot="icon"]), .icon) {${s(c("--mdc-icon",{size:"var(--_large-icon-size)"}))};}
+        .container.extra-large :is(::slotted([slot="icon"]), .icon) {${s(c("--mdc-icon",{size:"var(--_extra-large-icon-size)"}))};}
+    `,x,z,$,w,y,k];export{j as buttonStyles};

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

@@ -0,0 +1,71 @@
+/**
+ * @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 { BaseButton } from './base-button';
+declare const SChecked: unique symbol;
+declare const MDCTogglableButton_base: import("../../utils/behaviors/mixin").MixinReturn<import("../../utils/behaviors/mixin").MixinReturn<typeof BaseButton & import("../../utils/form/form-associated").FormAssociatedConstructor, import("../../utils/form/form-associated").FormAssociated>, import("../../utils/behaviors/constraint-validation").ConstraintValidation>;
+/**
+ * `mdc-toggle-button variant="text"` is not supported by M3 Expressive.
+ *
+ * @version
+ * Material Design 3 - Expressive
+ *
+ * @link
+ * https://m3.material.io/components/buttons/overview
+ * https://www.figma.com/design/4GM7ohCF2Qtjzs7Fra6jlp/Material-3-Design-Kit--Community-?node-id=57994-2328&t=kLfic7eA8vKtkiiO-0
+ */
+export declare class MDCTogglableButton extends MDCTogglableButton_base {
+    disabled: boolean;
+    name: string;
+    variant: 'filled' | 'filled-tonal' | 'elevated' | 'outlined';
+    value: string;
+    get checked(): boolean;
+    set checked(value: boolean);
+    /**
+     * When true, require the toggle-button to be selected when participating in
+     * form submission.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
+     */
+    required: boolean;
+    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;
+        'has-icon': boolean;
+        'has-label': boolean;
+        'disable-morph': boolean;
+        disabled: boolean;
+    };
+    protected render(): TemplateResult;
+    protected renderTouchTarget(): TemplateResult<1>;
+    protected handleInput(_: InputEvent): void;
+    protected handleChange(e: Event): void;
+    [getFormValue](): string | null;
+    [getFormState](): string;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    [createValidator](): CheckboxValidator | RadioValidator;
+    [getValidityAnchor](): HTMLInputElement | null;
+}
+export {};
+//# sourceMappingURL=toggle-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/toggle-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,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,QAAA,MAAM,QAAQ,eAAoB,CAAA;;AAElC;;;;;;;;;GASG;AACH,qBACa,kBAAmB,SAAQ,uBAA0D;IAEtF,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IAGJ,OAAO,EAAE,QAAQ,GAAG,cAAc,GAAG,UAAU,GAAG,UAAU,CAAW;IAGhF,KAAK,EAAE,MAAM,CAAO;IAE3B,IACW,OAAO,IAGQ,OAAO,CADhC;IACD,IAAW,OAAO,CAAC,KAAK,EAAE,OAAO,EAQhC;IAED;;;;;OAKG;IAEI,QAAQ,EAAE,OAAO,CAAQ;IAGzB,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;IAoBpC,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,UAAU;IAInC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK;IAIvB,CAAC,YAAY,CAAC;IAId,CAAC,YAAY,CAAC;IAIb,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAIvC,CAAC,eAAe,CAAC;IAiBjB,CAAC,iBAAiB,CAAC;CAI9B"}

package/build/components/button/toggle-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 r}from"../../custom-element-Dz3n6kSt.js";import{n as s}from"../../property-Ck1wIidx.js";import{e as o}from"../../query-DifSdHBD.js";import{e as a}from"../../class-map-DlMb2KKL.js";import{mixinConstraintValidation as l,createValidator as n,getValidityAnchor as c}from"../../utils/behaviors/constraint-validation.js";import{internals as h}from"../../utils/behaviors/element-internals.js";import{CheckboxValidator as d}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 f}from"../../utils/form/form-associated.js";import{BaseButton as g}from"./base-button.js";import"../../utils/behaviors/validators/validator.js";import"../../state--U2hSgGK.js";import"../../utils/aria/delegate.js";import"../../utils/aria/aria.js";import"../../utils/event/form-label-activation.js";import"./button.style.js";import"../../component-definitions/button.definition.js";import"../../color-CigMJnjV.js";import"../../elevation-dUQez_WX.js";import"../../shape-CrZ0CLVJ.js";import"../../state-C-haZXan.js";import"../../typescale-Bh1NLwSE.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 v;const j=Symbol("checked");let y=class extends(l(b(g))){get checked(){return this[j]}set checked(e){if(e===this[j])return;const t=this[j];this[j]=e,this.selectionController.handleCheckedChange(),this.requestUpdate("checked",t)}constructor(){super(),this.variant="filled",this.value="on",this.required=!1,this.type="checkbox",this[v]=!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[h].role=this.type,this.selectionController.multiple="checkbox"===this.type),e.has("checked")&&(this[h].ariaChecked=String(this.checked))}getRenderClasses(){return{...super.getRenderClasses(),togglable:!0,selected:this.checked,unselected:!this.checked}}render(){const{ariaHasPopup:e,ariaExpanded:r,ariaLabel:s}=this;return i`<button class="${a(this.getRenderClasses())}" ?disabled="${this.disabled}" aria-disabled="${this.disabled}" aria-label="${s||t}" aria-haspopup="${e||t}" aria-expanded="${r||t}" tabindex="-1">${"outlined"===this.variant?this.renderOutline():t} ${["elevated","filled","filled-tonal"].includes(this.variant)?this.renderElevation():t} ${this.renderContent()} ${this.renderTouchTarget()} ${this.renderBackground()}<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"></mdc-focus-ring></button>`}renderTouchTarget(){return i`<input type="${this.type}" role="button" id="input-as-touch-target" class="toggle-input touch-target" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-checked="${this.checked}" aria-disabled="${this.disabled}" aria-required="${this.required}" tabindex="0" @input="${this.handleInput}" @change="${this.handleChange}">`}handleInput(e){this.checked=this.buttonElement.checked}handleChange(e){m(this,e)}[(v=j,k)](){return this.checked?this.value:null}[f](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("default-checked")}formStateRestoreCallback(e){this.checked="true"===e}[n](){return"checkbox"===this.type?new d(()=>({checked:this.checked,required:this.required})):new p(()=>this.selectionController?this.selectionController.controls:[this])}[c](){return this.buttonElement}};e([s({type:String,reflect:!0})],y.prototype,"value",void 0),e([s({type:Boolean,reflect:!0,noAccessor:!0})],y.prototype,"checked",null),e([s({type:Boolean})],y.prototype,"required",void 0),e([s({type:String,reflect:!0})],y.prototype,"type",void 0),e([o("#input-as-touch-target")],y.prototype,"buttonElement",void 0),y=e([r("mdc-toggle-button")],y);export{y as MDCTogglableButton};

package/build/components/button-group/base-button-group.d.ts

@@ -0,0 +1,6 @@
+import { LitElement, type TemplateResult } from 'lit';
+export declare abstract class BaseButtonGroup extends LitElement {
+    protected render(): TemplateResult;
+    protected renderButtons(): TemplateResult<1>;
+}
+//# sourceMappingURL=base-button-group.d.ts.map

package/build/components/button-group/base-button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/base-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAE3D,8BAAsB,eAAgB,SAAQ,UAAU;cAIjC,MAAM,IAAI,cAAc;IAQ3C,SAAS,CAAC,aAAa;CAK1B"}

package/build/components/button-group/base-button-group.js

@@ -0,0 +1 @@
+import{i as e,x as t}from"../../lit-element-Ho-VPzO1.js";class r extends e{render(){return t`<div class="container">${this.renderButtons()}</div>`}renderButtons(){return t`<slot></slot>`}}export{r as BaseButtonGroup};

package/build/components/button-group/connected-button-group.d.ts

@@ -0,0 +1,8 @@
+import { BaseButtonGroup } from './base-button-group';
+/**
+ * @experimental
+ */
+export declare class MDCConnectedButtonGroup extends BaseButtonGroup {
+    static styles: import("lit").CSSResult;
+}
+//# sourceMappingURL=connected-button-group.d.ts.map

package/build/components/button-group/connected-button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connected-button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/connected-button-group.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAmGrD;;GAEG;AACH,qBACa,uBAAwB,SAAQ,eAAe;IAExD,OAAgB,MAAM,0BAwBrB;CACJ"}

package/build/components/button-group/connected-button-group.js

@@ -0,0 +1 @@
+import{_ as e}from"../../tslib.es6-CmLYFWVC.js";import{a}from"../../lit-element-Ho-VPzO1.js";import{t}from"../../custom-element-Dz3n6kSt.js";import"../../component-definitions/button.definition.js";import"../../component-definitions/checkbox.definition.js";import"../../component-definitions/dialog.definition.js";import"../../component-definitions/fab.definition.js";import"../../component-definitions/focus-ring.definition.js";import"../../component-definitions/icon-button.definition.js";import"../../component-definitions/navigation-bar.definition.js";import"../../component-definitions/navigation-rail.definition.js";import"../../component-definitions/navigation-tab.definition.js";import"../../component-definitions/progress-indicator.definition.js";import"../../component-definitions/switch.definition.js";import"../../utils/controller/attachable-controller.js";import{createLogicShapeTokens as n}from"../../utils/tokens/create-logic-shape-tokens.js";import{overrideComponentTokens as r}from"../../utils/tokens/override-component-tokens.js";import{stringTokens as o}from"../../utils/tokens/string-tokens.js";import{BaseButtonGroup as i}from"./base-button-group.js";import"../../color-CigMJnjV.js";import"../../elevation-dUQez_WX.js";import"../../shape-CrZ0CLVJ.js";import"../../state-C-haZXan.js";import"../../typescale-Bh1NLwSE.js";import"../../duration-CDKuKTyT.js";const s=o(r("--mdc-icon-button",{"extra-large-container-shape-round-start-start":"calc(var(--mdc-icon-button-extra-large-container-height) / 2)","extra-large-container-shape-round-end-start":"calc(var(--mdc-icon-button-extra-large-container-height) / 2)","extra-large-container-shape-round-start-end":"20px","extra-large-container-shape-round-end-end":"20px","large-container-shape-round-start-start":"calc(var(--mdc-icon-button-large-container-height) / 2)","large-container-shape-round-end-start":"calc(var(--mdc-icon-button-large-container-height) / 2)","large-container-shape-round-start-end":"16px","large-container-shape-round-end-end":"16px","medium-container-shape-round-start-start":"calc(var(--mdc-icon-button-medium-container-height) / 2)","medium-container-shape-round-end-start":"calc(var(--mdc-icon-button-medium-container-height) / 2)","medium-container-shape-round-start-end":"8px","medium-container-shape-round-end-end":"8px","small-container-shape-round-start-start":"calc(var(--mdc-icon-button-small-container-height) / 2)","small-container-shape-round-end-start":"calc(var(--mdc-icon-button-small-container-height) / 2)","small-container-shape-round-start-end":"8px","small-container-shape-round-end-end":"8px","extra-small-container-shape-round-start-start":"calc(var(--mdc-icon-button-extra-small-container-height) / 2)","extra-small-container-shape-round-end-start":"calc(var(--mdc-icon-button-extra-small-container-height) / 2)","extra-small-container-shape-round-start-end":"4px","extra-small-container-shape-round-end-end":"4px","extra-large-container-shape-square-start-start":"calc(var(--mdc-icon-button-extra-large-container-height) / 2)","extra-large-container-shape-square-end-start":"calc(var(--mdc-icon-button-extra-large-container-height) / 2)","extra-large-container-shape-square-start-end":"20px","extra-large-container-shape-square-end-end":"20px","large-container-shape-square-start-start":"calc(var(--mdc-icon-button-large-container-height) / 2)","large-container-shape-square-end-start":"calc(var(--mdc-icon-button-large-container-height) / 2)","large-container-shape-square-start-end":"16px","large-container-shape-square-end-end":"16px","medium-container-shape-square-start-start":"calc(var(--mdc-icon-button-medium-container-height) / 2)","medium-container-shape-square-end-start":"calc(var(--mdc-icon-button-medium-container-height) / 2)","medium-container-shape-square-start-end":"8px","medium-container-shape-square-end-end":"8px","small-container-shape-square-start-start":"calc(var(--mdc-icon-button-small-container-height) / 2)","small-container-shape-square-end-start":"calc(var(--mdc-icon-button-small-container-height) / 2)","small-container-shape-square-start-end":"8px","small-container-shape-square-end-end":"8px","extra-small-container-shape-square-start-start":"calc(var(--mdc-icon-button-extra-small-container-height) / 2)","extra-small-container-shape-square-end-start":"calc(var(--mdc-icon-button-extra-small-container-height) / 2)","extra-small-container-shape-square-start-end":"4px","extra-small-container-shape-square-end-end":"4px"})),c=o(r("--mdc-icon-button",{"extra-large-container-shape-round-start-end":"calc(var(--_extra-large-container-height) / 2)","extra-large-container-shape-round-end-end":"calc(var(--_extra-large-container-height) / 2)","extra-large-container-shape-round-start-start":"20px","extra-large-container-shape-round-end-start":"20px","large-container-shape-round-start-end":"calc(var(--_large-container-height) / 2)","large-container-shape-round-end-end":"calc(var(--_large-container-height) / 2)","large-container-shape-round-start-start":"16px","large-container-shape-round-end-start":"16px","medium-container-shape-round-start-end":"calc(var(--_medium-container-height) / 2)","medium-container-shape-round-end-end":"calc(var(--_medium-container-height) / 2)","medium-container-shape-round-start-start":"8px","medium-container-shape-round-end-start":"8px","small-container-shape-round-start-end":"calc(var(--_small-container-height) / 2)","small-container-shape-round-end-end":"calc(var(--_small-container-height) / 2)","small-container-shape-round-start-start":"8px","small-container-shape-round-end-start":"8px","extra-small-container-shape-round-start-end":"calc(var(--_extra-small-container-height) / 2)","extra-small-container-shape-round-end-end":"calc(var(--_extra-small-container-height) / 2)","extra-small-container-shape-round-start-start":"4px","extra-small-container-shape-round-end-start":"4px"})),l=o(r("--mdc-icon-button",{...n("--mdc-icon-button",{"extra-large-container-shape-round":"20px","large-container-shape-round":"16px","medium-container-shape-round":"8px","small-container-shape-round":"8px","extra-small-container-shape-round":"4px","extra-large-container-shape-square":"20px","large-container-shape-square":"16px","medium-container-shape-square":"8px","small-container-shape-square":"8px","extra-small-container-shape-square":"4px"},"all",!1)})),d=o(r("--mdc-icon-button",{...n("--_",{"extra-large-selected-container-shape-round":"calc(var(--_extra-large-container-height) / 2)","large-selected-container-shape-round":"calc(var(--_large-container-height) / 2)","medium-selected-container-shape-round":"calc(var(--_medium-container-height) / 2)","small-selected-container-shape-round":"calc(var(--_small-container-height) / 2)","extra-small-selected-container-shape-round":"calc(var(--_extra-small-container-height) / 2)","extra-large-selected-container-shape-square":"calc(var(--_extra-large-container-height) / 2)","large-selected-container-shape-square":"calc(var(--_large-container-height) / 2)","medium-selected-container-shape-square":"calc(var(--_medium-container-height) / 2)","small-selected-container-shape-square":"calc(var(--_small-container-height) / 2)","extra-small-selected-container-shape-square":"calc(var(--_extra-small-container-height) / 2)"},"all",!1)}));let m=class extends i{static{this.styles=a`:host{vertical-align:top}.container{display:inline-flex;gap:2px}::slotted(*){${d}}::slotted(:not(.side)){${l}}::slotted(.start-side){${s}}::slotted(.end-side){${c}}`}};m=e([t("mdc-connected-button-group")],m);export{m as MDCConnectedButtonGroup};

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

@@ -0,0 +1,4 @@
+import { LitElement } from 'lit';
+export declare class MDCStandardButtonGroup extends LitElement {
+}
+//# sourceMappingURL=standard-button-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"standard-button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/standard-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAIhC,qBACa,sBAAuB,SAAQ,UAAU;CAErD"}

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

@@ -0,0 +1 @@
+import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{i as e}from"../../lit-element-Ho-VPzO1.js";import{t as s}from"../../custom-element-Dz3n6kSt.js";let m=class extends e{};m=t([s("mdc-standard-button-group")],m);export{m as MDCStandardButtonGroup};

package/build/components/dialog/base-dialog.d.ts

@@ -0,0 +1,42 @@
+import { DialogAction } from './dialog-action';
+/**
+ *
+ * @version
+ * Material Design 3
+ *
+ * @link
+ * https://m3.material.io/components/dialogs/specs
+ */
+export declare abstract class BaseDialog extends DialogAction {
+    quick: boolean;
+    returnValue: string;
+    type: 'alert' | '';
+    private readonly treewalker;
+    protected readonly dialog: HTMLDialogElement | null;
+    protected readonly scrim: HTMLDialogElement | null;
+    protected readonly container: HTMLDialogElement | null;
+    protected readonly headline: HTMLDialogElement | null;
+    protected readonly content: HTMLDialogElement | null;
+    protected readonly actions: HTMLDialogElement | null;
+    protected readonly scroller: HTMLElement | null;
+    protected readonly topAnchor: HTMLElement | null;
+    protected readonly bottomAnchor: HTMLElement | null;
+    protected readonly firstFocusTrap: HTMLElement | null;
+    private hasHeadline;
+    private hasActions;
+    private hasIcon;
+    constructor();
+    protected render(): unknown;
+    protected renderScrim(): import("lit-html").TemplateResult<1>;
+    protected renderDialog(): import("lit-html").TemplateResult<1>;
+    protected renderHeadlineLabel(): import("lit-html").TemplateResult<1>;
+    protected renderHeadlineIcon(): import("lit-html").TemplateResult<1>;
+    protected renderActions(): import("lit-html").TemplateResult<1>;
+    protected renderContent(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleHeadlineChange;
+    private handleActionsChange;
+    private handleIconChange;
+}
+//# sourceMappingURL=base-dialog.d.ts.map