@sandlada/mdc 0.1.0-20250907.a

package/build/components/ripple/ripple.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2025 Sandlada & Kai Orion
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { type IAttachable } from '../../utils/controller/attachable-controller';
+import { type IRipple } from './ripple-action';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mdc-ripple": MDCRipple;
+    }
+}
+/**
+ * Ripple is not a concept that is explicitly categorized as a component.
+ *
+ * The parent element of the focus ring used to provide perspective focus
+ * must be set to relative.
+ *
+ * Ripple is often used for interactive buttons.
+ * It provides a `hovered-state-layer`, a `focused-state-layer` and a `pressed-state-layer` when the user interacts.
+ *
+ * @version
+ * Material Design 3
+ */
+export declare class MDCRipple extends LitElement implements IAttachable, IRipple {
+    static styles: import("lit").CSSResult;
+    protected readonly rippleElement: HTMLElement | null;
+    protected readonly _hoverStateLayerElement: HTMLElement;
+    protected readonly _focusStateLayerElement: HTMLElement;
+    protected readonly _pressStateLayerElement: HTMLElement;
+    disableHoverStateLayer: boolean;
+    disableFocusStateLayer: boolean;
+    disablePressStateLayer: boolean;
+    disabled: boolean;
+    private readonly action;
+    private readonly attachableController;
+    protected render(): import("lit-html").TemplateResult<1>;
+    get hoverStateLayerElement(): HTMLElement;
+    get focusStateLayerElement(): HTMLElement;
+    get pressStateLayerElement(): HTMLElement;
+    get hovered(): boolean;
+    set hovered(hovered: boolean);
+    get focused(): boolean;
+    set focused(focused: boolean);
+    get pressed(): boolean;
+    set pressed(pressed: boolean);
+    get htmlFor(): string | null;
+    set htmlFor(htmlFor: string | null);
+    get control(): HTMLElement | null;
+    set control(control: HTMLElement | null);
+    attach(control: HTMLElement): void;
+    detach(): void;
+}
+//# sourceMappingURL=ripple.d.ts.map

package/build/components/ripple/ripple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../../src/components/ripple/ripple.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,8CAA8C,CAAA;AACrG,OAAO,EAAgB,KAAK,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAG5D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,SAAS,CAAA;KAC1B;CACJ;AAED;;;;;;;;;;;GAWG;AACH,qBACa,SAAU,SAAQ,UAAW,YAAW,WAAW,EAAE,OAAO;IAErE,OAAgB,MAAM,0BAAS;IAG/B,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAG,WAAW,GAAG,IAAI,CAAA;IAErD,SAAS,CAAC,QAAQ,CAAC,uBAAuB,EAAG,WAAW,CAAA;IAExD,SAAS,CAAC,QAAQ,CAAC,uBAAuB,EAAG,WAAW,CAAA;IAExD,SAAS,CAAC,QAAQ,CAAC,uBAAuB,EAAG,WAAW,CAAA;IAGjD,sBAAsB,EAAE,OAAO,CAAQ;IAGvC,sBAAsB,EAAE,OAAO,CAAQ;IAGvC,sBAAsB,EAAE,OAAO,CAAQ;IAGvC,QAAQ,EAAE,OAAO,CAAQ;IAEhC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAyB;IAChD,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAgF;cAElG,MAAM;IAUzB,IAAW,sBAAsB,gBAEhC;IACD,IAAW,sBAAsB,gBAEhC;IACD,IAAW,sBAAsB,gBAEhC;IAED,IAAW,OAAO,IAGU,OAAO,CADlC;IACD,IAAW,OAAO,CAAC,OAAO,EAAE,OAAO,EAElC;IACD,IAAW,OAAO,IAGU,OAAO,CADlC;IACD,IAAW,OAAO,CAAC,OAAO,EAAE,OAAO,EAElC;IACD,IAAW,OAAO,IAGU,OAAO,CADlC;IACD,IAAW,OAAO,CAAC,OAAO,EAAE,OAAO,EAElC;IAED,IAAW,OAAO,IAGU,MAAM,GAAG,IAAI,CADxC;IACD,IAAW,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,EAExC;IAED,IAAW,OAAO,IAGU,WAAW,GAAG,IAAI,CAD7C;IACD,IAAW,OAAO,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,EAE7C;IAEM,MAAM,CAAC,OAAO,EAAE,WAAW;IAG3B,MAAM;CAGhB"}

package/build/components/ripple/ripple.js

@@ -0,0 +1 @@
+import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{i as e,x as r}from"../../lit-element-Ho-VPzO1.js";import{t as s}from"../../custom-element-Dz3n6kSt.js";import{n as a}from"../../property-Ck1wIidx.js";import{e as o}from"../../query-DifSdHBD.js";import{AttachableController as i}from"../../utils/controller/attachable-controller.js";import{RippleAction as l}from"./ripple-action.js";import{styles as n}from"./ripple.style.js";import"../../easing-5hHInU7b.js";import"../../component-definitions/ripple.definition.js";import"../../color-CigMJnjV.js";import"../../state-C-haZXan.js";import"../../utils/tokens/create-wrapped-tokens.js";import"../../utils/tokens/string-tokens.js";let p=class extends e{constructor(){super(...arguments),this.disableHoverStateLayer=!1,this.disableFocusStateLayer=!1,this.disablePressStateLayer=!1,this.disabled=!1,this.action=new l(this),this.attachableController=new i(this,this.action.onControlChange.bind(this.action))}static{this.styles=n}render(){return r`<span aria-hidden="true" aria-disabled="${this.disabled}" class="ripple"><span class="hover-state-layer" aria-hidden="true"></span> <span class="focus-state-layer" aria-hidden="true"></span> <span class="press-state-layer" aria-hidden="true"></span></span>`}get hoverStateLayerElement(){return this._hoverStateLayerElement}get focusStateLayerElement(){return this._focusStateLayerElement}get pressStateLayerElement(){return this._pressStateLayerElement}get hovered(){return this.hasAttribute("hovered")}set hovered(t){this.toggleAttribute("hovered",t)}get focused(){return this.hasAttribute("focused")}set focused(t){this.toggleAttribute("focused",t)}get pressed(){return this.hasAttribute("pressed")}set pressed(t){this.toggleAttribute("pressed",t)}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}};t([o(".ripple")],p.prototype,"rippleElement",void 0),t([o(".hover-state-layer")],p.prototype,"_hoverStateLayerElement",void 0),t([o(".focus-state-layer")],p.prototype,"_focusStateLayerElement",void 0),t([o(".press-state-layer")],p.prototype,"_pressStateLayerElement",void 0),t([a({type:Boolean,attribute:"disable-hover-state-layer",reflect:!0})],p.prototype,"disableHoverStateLayer",void 0),t([a({type:Boolean,attribute:"disable-focus-state-layer",reflect:!0})],p.prototype,"disableFocusStateLayer",void 0),t([a({type:Boolean,attribute:"disable-press-state-layer",reflect:!0})],p.prototype,"disablePressStateLayer",void 0),t([a({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),p=t([s("mdc-ripple")],p);export{p as MDCRipple};

package/build/components/ripple/ripple.style.d.ts

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

package/build/components/ripple/ripple.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.style.d.ts","sourceRoot":"","sources":["../../../src/components/ripple/ripple.style.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,MAAM,yBAmFlB,CAAA"}

package/build/components/ripple/ripple.style.js

@@ -0,0 +1,6 @@
+import{a as e}from"../../lit-element-Ho-VPzO1.js";import{RippleDefinition as o}from"../../component-definitions/ripple.definition.js";import{createWrappedTokens as t}from"../../utils/tokens/create-wrapped-tokens.js";import{stringTokens as s}from"../../utils/tokens/string-tokens.js";import"../../color-CigMJnjV.js";import"../../state-C-haZXan.js";
+/**
+ * @license
+ * Copyright 2025 Kai-Orion & Sandlada
+ * SPDX-License-Identifier: MIT
+ */const r=t("--mdc-ripple",o),a=e`:host{${s(r)}}@media (forced-colors:active){.ripple,:host{display:none}}:host{display:flex;margin:auto;pointer-events:none;border-radius:inherit;position:absolute;inset:0;overflow:hidden}:host([disabled]){display:none}.ripple{border-radius:inherit;position:absolute;inset:0;overflow:hidden;-webkit-tap-highlight-color:transparent}:host([disable-hover-state-layer]) .hover-state-layer{display:none}:host([disable-focus-state-layer]) .focus-state-layer{display:none}:host([disable-press-state-layer]) .press-state-layer{display:none}.focus-state-layer,.hover-state-layer,.press-state-layer{position:absolute;opacity:0;border-radius:inherit;pointer-events:none;overflow:hidden;-webkit-tap-highlight-color:transparent}.hover-state-layer{inset:0;background-color:${r["--_hovered-color"]};transition:opacity 15ms linear,background-color 15ms linear}.focus-state-layer{inset:0;background-color:${r["--_focused-color"]};transition:opacity 50ms linear,background-color 15ms linear}.press-state-layer{inset:0;background:radial-gradient(closest-side,${r["--_pressed-color"]} max(calc(100% - 70px),65%),transparent 100%);transform-origin:center center;transition:opacity 375ms linear}:host([hovered]:not([disable-hover-state-layer])) .hover-state-layer{background-color:${r["--_hovered-color"]};opacity:${r["--_hovered-opacity"]}}:host([focused]:not([disable-focus-state-layer])) .focus-state-layer{background-color:${r["--_focused-color"]};opacity:${r["--_focused-opacity"]}}:host([pressed]:not([disable-press-state-layer])) .press-state-layer{opacity:${r["--_pressed-opacity"]};transition-duration:105ms}`;export{a as styles};

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

@@ -0,0 +1,30 @@
+import { LitElement, type TemplateResult } from 'lit';
+export declare class MDCSearchBar extends LitElement {
+    static styles: import("lit").CSSResult;
+    supportingText: string;
+    hideAvatar: boolean;
+    protected hasLeadingIcon: boolean;
+    protected hasTrailingIcon: boolean;
+    protected hasAvatar: boolean;
+    private avatarElement;
+    protected render(): TemplateResult;
+    protected renderLeadingIcon(): TemplateResult<1>;
+    protected renderTrailingIcon(): TemplateResult<1>;
+    protected renderInput(): TemplateResult<1>;
+    protected renderTouchTarget(): TemplateResult<1>;
+    protected renderAvatar(): TemplateResult<1>;
+    protected renderAvatarIcon(): TemplateResult<1>;
+    protected getRenderClasses(): {
+        'has-leading-icon': boolean;
+        'has-trailing-icon': boolean;
+        'has-avatar': boolean;
+        'hide-avatar': boolean;
+    };
+    private handleAvatarClick;
+    private handleInput;
+    private handleChange;
+    private handleLeadingIconSlotChange;
+    private handleTrailingIconSlotChange;
+    private handleAvatarSlotChange;
+}
+//# sourceMappingURL=search-bar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-bar.d.ts","sourceRoot":"","sources":["../../../src/components/search/search-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAM3D,qBACa,YAAa,SAAQ,UAAU;IAExC,OAAgB,MAAM,0BAAiB;IAGhC,cAAc,EAAE,MAAM,CAAwB;IAG9C,UAAU,EAAE,OAAO,CAAQ;IAGlC,SAAS,CAAC,cAAc,EAAE,OAAO,CAAQ;IAEzC,SAAS,CAAC,eAAe,EAAE,OAAO,CAAQ;IAE1C,SAAS,CAAC,SAAS,EAAE,OAAO,CAAQ;IAGpC,OAAO,CAAC,aAAa,CAA2B;cAE7B,MAAM,IAAI,cAAc;IAa3C,SAAS,CAAC,iBAAiB;IAQ3B,SAAS,CAAC,kBAAkB;IAQ5B,SAAS,CAAC,WAAW;IAarB,SAAS,CAAC,iBAAiB;IAM3B,SAAS,CAAC,YAAY;IAYtB,SAAS,CAAC,gBAAgB;IAM1B,SAAS,CAAC,gBAAgB;;;;;;IAS1B,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,WAAW;IAGnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,2BAA2B;IAGnC,OAAO,CAAC,4BAA4B;IAGpC,OAAO,CAAC,sBAAsB;CAGjC"}

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

@@ -0,0 +1 @@
+import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{i as e,x as a}from"../../lit-element-Ho-VPzO1.js";import{t as r}from"../../custom-element-Dz3n6kSt.js";import{n as s}from"../../property-Ck1wIidx.js";import{r as n}from"../../state--U2hSgGK.js";import{e as i}from"../../query-DifSdHBD.js";import{e as o}from"../../class-map-DlMb2KKL.js";import{redispatchEvent as h}from"../../utils/event/redispatch-event.js";import{searchBarStyle as l}from"./search-bar.style.js";import"../../component-definitions/search.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/controller/attachable-controller.js";import"../../utils/tokens/create-logic-shape-tokens.js";import"../../utils/tokens/create-wrapped-tokens.js";import"../../utils/tokens/string-tokens.js";let c=class extends e{constructor(){super(...arguments),this.supportingText="Type here to search",this.hideAvatar=!1,this.hasLeadingIcon=!1,this.hasTrailingIcon=!1,this.hasAvatar=!1}static{this.styles=l}render(){return a`<div role="search" class="search ${o(this.getRenderClasses())}"><span class="background" aria-hidden="true"></span> ${this.renderLeadingIcon()} ${this.renderInput()} ${this.renderTrailingIcon()} ${this.renderAvatar()} ${this.renderTouchTarget()}</div>`}renderLeadingIcon(){return a`<span class="leading-icon icon" @slotchange="${this.handleLeadingIconSlotChange}"><slot name="leading-icon"></slot></span>`}renderTrailingIcon(){return a`<span class="trailing-icon icon" @slotchange="${this.handleTrailingIconSlotChange}"><slot name="trailing-icon"></slot></span>`}renderInput(){return a`<input class="input" id="input" placeholder="${this.supportingText}" aria-placeholder="${this.supportingText}" @input="${this.handleInput}" @change="${this.handleChange}">`}renderTouchTarget(){return a`<span class="touch-target" aria-hidden="true"></span>`}renderAvatar(){return a`<button class="avatar" @click="${this.handleAvatarClick}"><slot name="avatar" @slotchange="${this.handleAvatarSlotChange}">${this.renderAvatarIcon()}</slot><mdc-ripple></mdc-ripple><mdc-focus-ring></mdc-focus-ring></button>`}renderAvatarIcon(){return a`<svg class="avatar-icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>`}getRenderClasses(){return{"has-leading-icon":this.hasLeadingIcon,"has-trailing-icon":this.hasTrailingIcon,"has-avatar":this.hasAvatar,"hide-avatar":this.hideAvatar}}handleAvatarClick(t){t.stopPropagation();const e=new CustomEvent("avatar-click",{bubbles:!0,cancelable:!1,detail:{target:this.avatarElement,currentTarget:this}});h(this,e)}handleInput(t){h(this,t)}handleChange(t){h(this,t)}handleLeadingIconSlotChange(t){this.hasLeadingIcon=t.target.assignedElements().length>0}handleTrailingIconSlotChange(t){this.hasTrailingIcon=t.target.assignedElements().length>0}handleAvatarSlotChange(t){this.hasAvatar=t.target.assignedElements().length>0}};t([s({type:String,attribute:"supporting-text"})],c.prototype,"supportingText",void 0),t([s({type:Boolean,attribute:"hide-avatar"})],c.prototype,"hideAvatar",void 0),t([n()],c.prototype,"hasLeadingIcon",void 0),t([n()],c.prototype,"hasTrailingIcon",void 0),t([n()],c.prototype,"hasAvatar",void 0),t([i(".avatar")],c.prototype,"avatarElement",void 0),c=t([r("mdc-search-bar")],c);export{c as MDCSearchBar};

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

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

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

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

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

@@ -0,0 +1 @@
+import{a as t}from"../../lit-element-Ho-VPzO1.js";import{SearchBarDefinition as a}from"../../component-definitions/search.definition.js";import"../../utils/controller/attachable-controller.js";import{createWrappedTokens as i}from"../../utils/tokens/create-wrapped-tokens.js";import{stringTokens as r}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";const e=t`    :host { ${r(i("--mdc-search-bar",a))}; }    :host {        display: contents;        vertical-align: top;        -webkit-tap-highlight-color: transparent;        background: transparent;    }    .search {        position: relative;        z-index: 0;        display: flex;        align-items: center;        min-width: var(--_container-width-minimum);        max-width: var(--_container-width-maximum);        height: var(--_container-height);        padding-inline-start: var(--_container-inline-leading-space);        padding-inline-end: var(--_container-inline-trailing-space);        padding-block-start: var(--_container-block-leading-space);        padding-block-end: var(--_container-block-trailing-space);        border-start-start-radius: var(--_container-shape-start-start);        border-start-end-radius: var(--_container-shape-start-end);        border-end-start-radius: var(--_container-shape-end-start);        border-end-end-radius: var(--_container-shape-end-end);        background: transparent;    }    .background {        position: absolute;        border-radius: inherit;        inset: 0;        z-index: -1;        background: var(--_container-color);    }    .icon {        fill: currentColor;    }    .leading-icon {        color: var(--_leading-icon-color);    }    .trailing-icon {        color: var(--_trailing-icon-color);    }    .search:not(.has-avatar) .avatar {        color: var(--_trailing-icon-color);    }    .search.has-leading-icon .input {        margin-inline-start: var(--_leading-icon-and-label-between-space);    }    .search.has-trailing-icon .input {        margin-inline-end: var(--_trailing-icon-and-label-between-space);    }    .search:not(.has-leading-icon) .leading-icon {        display: none;    }    .search:not(.has-trailing-icon) .trailing-icon {        display: none;    }    .search.hide-avatar .avatar {        display: none;    }    .search:not(.hide-avatar) .trailing-icon {        margin-inline-end: var(--_trailing-icon-and-label-between-space);    }    .trailing-icon {        display: flex;        gap: var(--_trailing-icons-between-space);        align-items: center;    }    .input {        all: unset;        height: 100%;        width: 100%;        color: var(--_input-text-color);        font-family: var(--_input-text-font);        line-height: var(--_input-text-line-height);        font-size: var(--_input-text-size);        font-weight: var(--_input-text-weight);        letter-spacing: var(--_input-text-tracking);    }    .input:placeholder-shown {        color: var(--_supporting-text-color);        font-family: var(--_supporting-text-font);        line-height: var(--_supporting-text-line-height);        font-size: var(--_supporting-text-size);        font-weight: var(--_supporting-text-weight);        letter-spacing: var(--_supporting-text-tracking);    }    .input:placeholder-shown,    .input:-webkit-autofill,    .input:-webkit-autofill:focus {        background: transparent;    }    .input:-webkit-autofill {        -webkit-box-shadow: 0 0 0px var(--_container-height) var(--_container-color) inset !important;        -webkit-text-fill-color: var(--_input-text-color);    }    .touch-target {        position: absolute;        top: 50%;        left: 50%;        transform: translate(-50%, -50%);        z-index: 1;    }    .avatar {        all: unset;        cursor: pointer;        position: relative;        /* height: max(48px, var(--_avatar-size));        width: max(48px, var(--_avatar-size)); */        display: flex;        align-items: center;        justify-content: center;        border-start-start-radius: var(--_avatar-shape-start-start);        border-start-end-radius: var(--_avatar-shape-start-end);        border-end-start-radius: var(--_avatar-shape-end-start);        border-end-end-radius: var(--_avatar-shape-end-end);        &>mdc-ripple {            border-radius: 50%;            inset: unset;            height: max(40px, var(--_avatar-size));            width: max(40px, var(--_avatar-size));            z-index: -1;        }    }    .avatar-icon {        fill: currentColor;        inline-size: var(--_avatar-size);        block-size: var(--_avatar-size);    }`;export{e as searchBarStyle};

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

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+declare const BaseSlider_base: import("../../utils/behaviors/mixin").MixinReturn<import("../../utils/behaviors/mixin").MixinReturn<(abstract new (...args: any[]) => import("../../utils/behaviors/element-internals").WithElementInternals) & typeof LitElement & import("../../utils/form/form-associated").FormAssociatedConstructor, import("../../utils/form/form-associated").FormAssociated>, import("../../utils/behaviors/constraint-validation").ConstraintValidation>;
+export declare class BaseSlider extends BaseSlider_base {
+    /**
+     * The slider minimum value
+     */
+    min: number;
+    /**
+     * The slider maximum value
+     */
+    max: number;
+    /**
+     * The slider value displayed when range is false.
+     */
+    value?: number;
+    /**
+     * The slider start value displayed when range is true.
+     */
+    valueStart?: number;
+    /**
+     * The slider end value displayed when range is true.
+     */
+    valueEnd?: number;
+    /**
+     * The step between values.
+     */
+    step: number;
+    /**
+     * Whether or not to show tick marks.
+     */
+    ticks: boolean;
+    /**
+     * Whether or not to show a value label when activated.
+     */
+    labeled: boolean;
+    /**
+     * Whether or not to show a value range. When false, the slider displays
+     * a slideable handle for the value property; when true, it displays
+     * slideable handles for the valueStart and valueEnd properties.
+     */
+    range: boolean;
+    /**
+     * The HTML name to use in form submission for a range slider's starting
+     * value. Use `name` instead if both the start and end values should use the
+     * same name.
+     */
+    get nameStart(): string;
+    set nameStart(name: string);
+    /**
+     * The HTML name to use in form submission for a range slider's ending value.
+     * Use `name` instead if both the start and end values should use the same
+     * name.
+     */
+    get nameEnd(): string;
+    set nameEnd(name: string);
+}
+export {};
+//# sourceMappingURL=base-slider.d.ts.map

package/build/components/slider/base-slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/base-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;;AAMhC,qBAAa,UAAW,SAAQ,eAAiF;IAC7G;;OAEG;IAEI,GAAG,SAAI;IAEd;;OAEG;IAEI,GAAG,SAAM;IAEhB;;OAEG;IAEI,KAAK,CAAC,EAAE,MAAM,CAAA;IAErB;;OAEG;IAEI,UAAU,CAAC,EAAE,MAAM,CAAA;IAE1B;;OAEG;IAEI,QAAQ,CAAC,EAAE,MAAM,CAAA;IAExB;;OAEG;IAEI,IAAI,SAAI;IAEf;;OAEG;IAEI,KAAK,UAAQ;IAEpB;;OAEG;IAEI,OAAO,UAAQ;IAEtB;;;;OAIG;IAEI,KAAK,UAAQ;IAEpB;;;;OAIG;IACH,IAAW,SAAS,IAGO,MAAM,CADhC;IACD,IAAW,SAAS,CAAC,IAAI,EAAE,MAAM,EAEhC;IAED;;;;OAIG;IACH,IAAW,OAAO,IAGO,MAAM,CAD9B;IACD,IAAW,OAAO,CAAC,IAAI,EAAE,MAAM,EAE9B;CACJ"}

package/build/components/slider/base-slider.js

@@ -0,0 +1 @@
+import{_ as t}from"../../tslib.es6-CmLYFWVC.js";import{i as e}from"../../lit-element-Ho-VPzO1.js";import{n as r}from"../../property-Ck1wIidx.js";import{mixinConstraintValidation as o}from"../../utils/behaviors/constraint-validation.js";import{mixinElementInternals as i}from"../../utils/behaviors/element-internals.js";import{mixinFormAssociated as s}from"../../utils/form/form-associated.js";class a extends(o(s(i(e)))){constructor(){super(...arguments),this.min=0,this.max=100,this.step=1,this.ticks=!1,this.labeled=!1,this.range=!1}get nameStart(){return this.getAttribute("name-start")??this.name}set nameStart(t){this.setAttribute("name-start",t)}get nameEnd(){return this.getAttribute("name-end")??this.nameStart}set nameEnd(t){this.setAttribute("name-end",t)}}t([r({type:Number})],a.prototype,"min",void 0),t([r({type:Number})],a.prototype,"max",void 0),t([r({type:Number})],a.prototype,"value",void 0),t([r({type:Number,attribute:"value-start"})],a.prototype,"valueStart",void 0),t([r({type:Number,attribute:"value-end"})],a.prototype,"valueEnd",void 0),t([r({type:Number})],a.prototype,"step",void 0),t([r({type:Boolean})],a.prototype,"ticks",void 0),t([r({type:Boolean})],a.prototype,"labeled",void 0),t([r({type:Boolean})],a.prototype,"range",void 0);export{a as BaseSlider};

package/build/components/slider/slider.d.ts

@@ -0,0 +1,3 @@
+export declare class MDCSlider {
+}
+//# sourceMappingURL=slider.d.ts.map

package/build/components/slider/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.ts"],"names":[],"mappings":"AACA,qBAAa,SAAS;CAErB"}

package/build/components/slider/slider.js

@@ -0,0 +1 @@
+class s{}export{s as MDCSlider};

package/build/components/switch/switch.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2025 Kai-Orion & Sandlada
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { createValidator, getValidityAnchor } from '../../utils/behaviors/constraint-validation';
+import { CheckboxValidator } from '../../utils/behaviors/validators/checkbox-validator';
+import { getFormState, getFormValue } from '../../utils/form/form-associated';
+declare global {
+    interface HTMLElementTagNameMap {
+        "mdc-switch": Switch;
+    }
+}
+declare const Switch_base: import("../../utils/behaviors/mixin").MixinReturn<import("../../utils/behaviors/mixin").MixinReturn<import("../../utils/behaviors/mixin").MixinReturn<(abstract new (...args: any[]) => import("../../utils/behaviors/element-internals").WithElementInternals) & typeof LitElement & import("../../utils/form/form-associated").FormAssociatedConstructor, import("../../utils/form/form-associated").FormAssociated>, import("../../utils/behaviors/constraint-validation").ConstraintValidation>>;
+export declare class Switch extends Switch_base {
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: ShadowRootInit;
+    disabled: boolean;
+    name: string;
+    selected: boolean;
+    required: boolean;
+    value: string;
+    hideSelectedIcon: boolean;
+    showUnselectedIcon: boolean;
+    private readonly inputElement;
+    focus(): void;
+    blur(): void;
+    constructor();
+    protected render(): unknown;
+    protected renderInput(): import("lit-html").TemplateResult<1>;
+    private renderSelectedIcon;
+    private renderUnselectedIcon;
+    private handleInput;
+    private handleChange;
+    private handleClick;
+    [getFormValue](): string | null;
+    [getFormState](): string;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    [createValidator](): CheckboxValidator;
+    [getValidityAnchor](): HTMLInputElement;
+}
+export {};
+//# sourceMappingURL=switch.d.ts.map

package/build/components/switch/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/switch.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAkB,UAAU,EAAW,MAAM,KAAK,CAAA;AAIzD,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAA6B,MAAM,6CAA6C,CAAA;AAE3H,OAAO,EAAE,iBAAiB,EAAE,MAAM,qDAAqD,CAAA;AAGvF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAuB,MAAM,kCAAkC,CAAA;AAGlG,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,MAAM,CAAA;KACvB;CACJ;;AAED,qBACa,MAAO,SAAQ,WAAqG;IAE7H,OAAgB,MAAM,0BAAe;IAErC,OAAgB,iBAAiB,EAAE,cAAc,CAGhD;IAEO,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IAGb,QAAQ,EAAE,OAAO,CAAQ;IAGzB,QAAQ,EAAE,OAAO,CAAQ;IAGzB,KAAK,EAAE,MAAM,CAAO;IAGpB,gBAAgB,EAAE,OAAO,CAAQ;IAGjC,kBAAkB,EAAE,OAAO,CAAQ;IAG1C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAmB;IAEvC,KAAK;IAGL,IAAI;;cAYM,MAAM,IAAI,OAAO;IA6BpC,SAAS,CAAC,WAAW;IAmBrB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAQX,CAAC,YAAY,CAAC;IAId,CAAC,YAAY,CAAC;IAIb,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAIvC,CAAC,eAAe,CAAC;IAOjB,CAAC,iBAAiB,CAAC;CAG9B"}

package/build/components/switch/switch.js

@@ -0,0 +1 @@
+import{_ as e}from"../../tslib.es6-CmLYFWVC.js";import{i as t,E as s,x as i}from"../../lit-element-Ho-VPzO1.js";import{t as o}from"../../custom-element-Dz3n6kSt.js";import{n as r}from"../../property-Ck1wIidx.js";import{e as n}from"../../query-DifSdHBD.js";import{e as d}from"../../class-map-DlMb2KKL.js";import{mixinDelegatesAria as l}from"../../utils/aria/delegate.js";import{mixinConstraintValidation as a,createValidator as c,getValidityAnchor as h}from"../../utils/behaviors/constraint-validation.js";import{mixinElementInternals as p}from"../../utils/behaviors/element-internals.js";import{CheckboxValidator as u}from"../../utils/behaviors/validators/checkbox-validator.js";import{isActivationClick as m,dispatchActivationClick as v}from"../../utils/event/form-label-activation.js";import{redispatchEvent as f}from"../../utils/event/redispatch-event.js";import{mixinFormAssociated as b,getFormValue as j,getFormState as k}from"../../utils/form/form-associated.js";import{SwitchStyles as g}from"./switch.style.js";import"../../utils/aria/aria.js";import"../../utils/behaviors/validators/validator.js";import"../../easing-5hHInU7b.js";import"../../component-definitions/switch.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";let w=class extends(l(a(b(p(t))))){static{this.styles=g}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}focus(){this.inputElement?.focus()}blur(){this.inputElement?.blur()}constructor(){super(),this.selected=!1,this.required=!1,this.value="on",this.hideSelectedIcon=!1,this.showUnselectedIcon=!1,this.addEventListener("click",this.handleClick.bind(this))}render(){const e=d({selected:this.selected,unselected:!this.selected,disabled:this.disabled,"show-unselected-icon":this.showUnselectedIcon});return i`<div class="${e} switch">${this.renderInput()} <span class="outline" aria-hidden="true"></span> <span class="handle-container"><mdc-ripple for="input" ?disabled="${this.disabled}"></mdc-ripple><span class="handle">${this.hideSelectedIcon?s:this.renderSelectedIcon()} ${this.showUnselectedIcon?this.renderUnselectedIcon():s} </span></span><span class="track" aria-hidden="true"></span><mdc-focus-ring for="input" part="focus-ring"></mdc-focus-ring></div>`}renderInput(){return i`<input id="input" class="touch input" .checked="${this.selected}" type="checkbox" role="switch" .disabled="${this.disabled}" aria-disabled="${this.disabled}" .required="${this.required}" aria-required="${this.required}" tabindex="0" @input="${this.handleInput}" @change="${this.handleChange}">`}renderSelectedIcon(){return i`<slot class="icon icon-selected" name="icon-selected"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z"/></svg></slot>`}renderUnselectedIcon(){return i`<slot class="icon icon-unselected" name="icon-unselected"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z"/></svg></slot>`}handleInput(e){const t=e.target;this.selected=t.checked}handleChange(e){f(this,e)}handleClick(e){m(e)&&this.inputElement&&(this.focus(),v(this.inputElement))}[j](){return this.selected?this.value:null}[k](){return String(this.selected)}formResetCallback(){this.selected=this.hasAttribute("selected")}formStateRestoreCallback(e){this.selected="true"===e}[c](){return new u(()=>({checked:this.selected,required:this.required}))}[h](){return this.inputElement}};e([r({type:Boolean})],w.prototype,"selected",void 0),e([r({type:Boolean})],w.prototype,"required",void 0),e([r({type:String})],w.prototype,"value",void 0),e([r({type:Boolean,attribute:"hide-selected-icon"})],w.prototype,"hideSelectedIcon",void 0),e([r({type:Boolean,attribute:"show-unselected-icon"})],w.prototype,"showUnselectedIcon",void 0),e([n("#input")],w.prototype,"inputElement",void 0),w=e([o("mdc-switch")],w);export{w as Switch};

package/build/components/switch/switch.style.d.ts

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

package/build/components/switch/switch.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.style.d.ts","sourceRoot":"","sources":["../../../src/components/switch/switch.style.ts"],"names":[],"mappings":"AAiCA,eAAO,MAAM,YAAY,yBAmUxB,CAAA"}

package/build/components/switch/switch.style.js

@@ -0,0 +1,329 @@
+import{E as e}from"../../easing-5hHInU7b.js";import{r as t,a as r}from"../../lit-element-Ho-VPzO1.js";import{SwitchDefinition as a}from"../../component-definitions/switch.definition.js";import{createWrappedTokens as d}from"../../utils/tokens/create-wrapped-tokens.js";import{overrideComponentTokens as o}from"../../utils/tokens/override-component-tokens.js";import{stringTokens as s}from"../../utils/tokens/string-tokens.js";import"../../color-CigMJnjV.js";import"../../shape-CrZ0CLVJ.js";import"../../state-C-haZXan.js";import"../../utils/tokens/create-logic-shape-tokens.js";
+/**
+ * @license
+ * Copyright 2025 Kai-Orion & Sandlada
+ * SPDX-License-Identifier: MIT
+ */const n=d("--mdc-switch",a),c=s(n),i=s(o("--mdc-focus-ring",{"shape-end-end":"var(--_track-shape-end-end)","shape-end-start":"var(--_track-shape-end-start)","shape-start-end":"var(--_track-shape-start-end)","shape-start-start":"var(--_track-shape-start-start)"})),l=e=>s(o("--mdc-ripple",{"hovered-color":`var(--_hovered-state-layer-color-${e})`,"hovered-opacity":`var(--_hovered-state-layer-opacity-${e})`,"pressed-color":`var(--_pressed-state-layer-color-${e})`,"pressed-opacity":`var(--_pressed-state-layer-opacity-${e})`})),h=t(e.ExpressiveFastSpatial),u=t(e.Standard),v=r`
+    @layer mdc.switch.variable {
+        :host { ${c}; }
+    }
+
+    @layer mdc.switch.composite.focus-ring {
+        mdc-focus-ring { ${i}; }
+    }
+
+    @layer mdc.switch.composite.ripple {
+        mdc-ripple {
+            inset: unset;
+            height: var(--_state-layer-size);
+            width: var(--_state-layer-size);
+            border-end-end-radius: var(--_state-layer-shape-end-end);
+            border-end-start-radius: var(--_state-layer-shape-end-start);
+            border-start-end-radius: var(--_state-layer-shape-start-end);
+            border-start-start-radius: var(--_state-layer-shape-start-start);
+        }
+
+        .selected mdc-ripple {
+            ${l("selected")};
+        }
+        .unselected mdc-ripple {
+            ${l("unselected")};
+        }
+    }
+
+    @layer mdc.switch.base {
+        :host {
+            display: inline-flex;
+            vertical-align: top;
+            outline: none;
+            border: none;
+            cursor: pointer;
+            box-sizing: border-box;
+            -webkit-tap-highlight-color: transparent;
+        }
+        :host([disabled]) {
+            cursor: default;
+        }
+
+
+        .switch {
+            all: unset;
+            display: inline-flex;
+            align-items: center;
+            flex-shrink: 0;
+            flex-grow: 0;
+            position: relative;
+            height: var(--_track-height);
+            width: var(--_track-width);
+            border-end-end-radius: var(--_track-shape-end-end);
+            border-end-start-radius: var(--_track-shape-end-start);
+            border-start-end-radius: var(--_track-shape-start-end);
+            border-start-start-radius: var(--_track-shape-start-start);
+        }
+
+        .input {
+            all: unset;
+            appearance: none;
+            outline: none;
+            border: none;
+            margin: 0;
+            padding: 0;
+            cursor: inherit;
+            height: max(100%, var(--_state-layer-size));
+            width: max(100%, var(--_state-layer-size));
+            z-index: 1;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        ::slotted([slot="icon-selected"]),
+        ::slotted([slot="icon-unselected"]) {
+            display: inline-flex;
+            position: relative;
+            writing-mode: horizontal-tb;
+            fill: currentColor;
+            flex-shrink: 0;
+        }
+
+        .icon,
+        ::slotted([slot="icon-selected"]),
+        ::slotted([slot="icon-unselected"]) {
+            fill: currentColor;
+        }
+    }
+
+    @layer mdc.switch.composite.icon {
+        .selected .icon.icon-unselected {
+            display: none;
+        }
+        .unselected .icon.icon-selected {
+            display: none;
+        }
+
+        .icon.icon-selected {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: var(--_icon-size-selected);
+            inline-size: var(--_icon-size-selected);
+            block-size: var(--_icon-size-selected);
+            ${t(s(o("--mdc-icon",{size:"var(--_icon-size-selected)"})))}
+        }
+        .icon.icon-unselected {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: var(--_icon-size-unselected);
+            inline-size: var(--_icon-size-unselected);
+            block-size: var(--_icon-size-unselected);
+            ${t(s(o("--mdc-icon",{size:"var(--_icon-size-unselected)"})))}
+        }
+
+        .disabled .icon.icon-selected {
+            color: var(--_icon-color-selected);
+            opacity: var(--_icon-opacity-selected);
+        }
+        .disabled .icon.icon-unselected {
+            color: var(--_icon-color-unselected);
+            opacity: var(--_icon-opacity-unselected);
+        }
+
+        .switch:not(.disabled) .icon.icon-selected {
+            color: var(--_icon-color-selected);
+        }
+        .switch:not(.disabled):hover .icon.icon-selected {
+            color: var(--_hovered-icon-color-selected);
+        }
+        .switch:not(.disabled):focus-within .icon.icon-selected {
+            color: var(--_focused-icon-color-selected);
+        }
+        .switch:not(.disabled):active .icon.icon-selected {
+            color: var(--_pressed-icon-color-selected);
+        }
+        .switch:not(.disabled) .icon.icon-unselected {
+            color: var(--_icon-color-unselected);
+        }
+        .switch:not(.disabled):hover .icon.icon-unselected {
+            color: var(--_hovered-icon-color-unselected);
+        }
+        .switch:not(.disabled):focus-within .icon.icon-unselected {
+            color: var(--_focused-icon-color-unselected);
+        }
+        .switch:not(.disabled):active .icon.icon-unselected {
+            color: var(--_pressed-icon-color-unselected);
+        }
+    }
+
+    @layer mdc.switch.base.track {
+        .track {
+            position: absolute;
+            inset: 0px;
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            border-radius: inherit;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: -1;
+        }
+
+        .disabled .track {
+            opacity: var(--_disabled-track-opacity)
+        }
+
+        .selected:not(.disabled) .track {
+            background: var(--_track-color-selected);
+        }
+        .selected.disabled .track {
+            background: var(--_disabled-track-color-selected);
+        }
+        .selected:not(.disabled):hover .track {
+            background: var(--_hovered-track-color-selected);
+        }
+        .selected:not(.disabled):focus-within .track {
+            background: var(--_focused-track-color-selected);
+        }
+        .selected:not(.disabled):active .track {
+            background: var(--_pressed-track-color-selected);
+        }
+        .unselected:not(.disabled) .track {
+            background: var(--_track-color-unselected);
+        }
+        .unselected.disabled .track {
+            background: var(--_disabled-track-color-unselected);
+        }
+        .unselected:not(.disabled):hover .track {
+            background: var(--_hovered-track-color-unselected);
+        }
+        .unselected:not(.disabled):focus-within .track {
+            background: var(--_focused-track-color-unselected);
+        }
+        .unselected:not(.disabled):active .track {
+            background: var(--_pressed-track-color-unselected);
+        }
+
+    }
+
+    @layer mdc.switch.base.outline {
+        .outline {
+            position: absolute;
+            inset: 0px;
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            border-radius: inherit;
+            display: flex;
+            border-width: var(--_track-outline-width);
+            border-style: solid;
+            z-index: 0;
+            pointer-events: none;
+        }
+        .unselected.disabled .outline {
+            border-color: var(--_disabled-track-outline-color-unselected);
+            opacity: var(--_disabled-track-opacity);
+        }
+        .selected .outline {
+            border-color: transparent;
+        }
+        .unselected:not(.disabled) .outline {
+            border-color: var(--_track-outline-color);
+        }
+        .unselected:not(.disabled):hover .outline {
+            border-color: var(--_hovered-track-outline-color-unselected);
+        }
+        .unselected:not(.disabled):focus-within .outline {
+            border-color: var(--_focused-track-outline-color-unselected);
+        }
+        .unselected:not(.disabled):active .outline {
+            border-color: var(--_pressed-track-outline-color-unselected);
+        }
+    }
+
+    @layer mdc.switch.base.handle {
+        .handle-container {
+            display: flex;
+            place-content: center;
+            place-items: center;
+            position: relative;
+            height: 100%;
+            width: 100%;
+            transition: margin 350ms ${h};
+        }
+        .disabled .handle-container {
+            transition: none;
+        }
+
+        .selected .handle-container {
+            margin-inline-start: calc(var(--_track-width) - var(--_track-height));
+        }
+        .unselected .handle-container {
+            margin-inline-end: calc(var(--_track-width) - var(--_track-height));
+        }
+
+        .handle {
+            border-start-start-radius: var(--_handle-shape-start-start);
+            border-start-end-radius: var(--_handle-shape-start-end);
+            border-end-end-radius: var(--_handle-shape-end-end);
+            border-end-start-radius: var(--_handle-shape-end-start);
+            transform-origin: center;
+            transition-property: height, width;
+            transition-duration: 250ms, 250ms;
+            transition-timing-function: ${u};
+            z-index: 0;
+            display: grid;
+            place-content: center;
+        }
+
+        .unselected.show-unselected-icon .handle,
+        .selected .handle {
+            height: var(--_handle-height-selected);
+            width: var(--_handle-width-selected);
+        }
+        .unselected:not(.show-unselected-icon) .handle {
+            height: var(--_handle-height-unselected);
+            width: var(--_handle-width-unselected);
+        }
+        :is(.selected, .unselected):not(.disabled):active .handle {
+            height: var(--_pressed-handle-height);
+            width: var(--_pressed-handle-width);
+        }
+
+        .selected:not(.disabled) .handle {
+            background: var(--_handle-color-selected)
+        }
+        .selected.disabled .handle {
+            background: var(--_disabled-handle-color-selected);
+            opacity: var(--_disabled-handle-opacity-selected);
+        }
+        .selected:not(.disabled):hover .handle {
+            background: var(--_hovered-handle-color-selected);
+        }
+        .selected:not(.disabled):focus-within .handle {
+            background: var(--_focused-handle-color-selected);
+        }
+        .selected:not(.disabled):active .handle {
+            background: var(--_pressed-handle-color-selected);
+        }
+        .unselected:not(.disabled) .handle {
+            background: var(--_handle-color-unselected);
+        }
+        .unselected.disabled .handle {
+            background: var(--_disabled-handle-color-unselected);
+            opacity: var(--_disabled-handle-opacity-unselected);
+        }
+        .unselected:not(.disabled):hover .handle {
+            background: var(--_hovered-handle-color-unselected);
+        }
+        .unselected:not(.disabled):focus-within .handle {
+            background: var(--_focused-handle-color-unselected);
+        }
+        .unselected:not(.disabled):active .handle {
+            background: var(--_pressed-handle-color-unselected);
+        }
+    }
+
+
+`;export{v as SwitchStyles};