tinkiet 0.7.6 → 0.8.2

package/pages/pages.js

@@ -0,0 +1,75 @@
+import { __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import css_248z from './pages.scss.js';
+
+let TkPages = class TkPages extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._page = "";
+        this.selected = "";
+        this.handleScroll = false;
+        this.scrollHistory = {};
+    }
+    set page(val) {
+        let oldVal = this._page;
+        this._page = val;
+        if (oldVal && this.handleScroll) {
+            const el = this.querySelector(`[page=${oldVal}]`);
+            if (el) {
+                const scrollElement = document.scrollingElement || document.documentElement;
+                this.scrollHistory[oldVal] = scrollElement.scrollTop;
+            }
+        }
+        this.requestUpdate("page", oldVal);
+    }
+    get page() {
+        return this._page;
+    }
+    render() {
+        return html `
+			<slot></slot>
+		`;
+    }
+    updated(props) {
+        if (props.has("page")) {
+            this.querySelectorAll(":scope > *").forEach(el => {
+                var _a;
+                const elPageAttribute = (_a = el.getAttribute("page")) !== null && _a !== void 0 ? _a : "default";
+                const scrollElement = document.scrollingElement || document.documentElement;
+                if (elPageAttribute == this.page) {
+                    el.removeAttribute("hidden");
+                    if (this.selected != "") {
+                        el.setAttribute(this.selected, "");
+                    }
+                    if (this.handleScroll && !el.hasAttribute("no-scroll")) {
+                        scrollElement.scrollTop = this.scrollHistory[elPageAttribute] ? this.scrollHistory[elPageAttribute] : 0;
+                    }
+                }
+                else {
+                    el.setAttribute("hidden", "");
+                    if (this.selected != "") {
+                        el.removeAttribute(this.selected);
+                    }
+                }
+            });
+        }
+    }
+};
+TkPages.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+__decorate([
+    property({ attribute: "page", type: String })
+], TkPages.prototype, "page", null);
+__decorate([
+    property({ attribute: true, type: String })
+], TkPages.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: "handle-scroll", type: Boolean })
+], TkPages.prototype, "handleScroll", void 0);
+TkPages = __decorate([
+    customElement("tk-pages")
+], TkPages);
+
+export { TkPages };

package/pages/pages.scss.js

@@ -0,0 +1,4 @@
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}";
+
+export { css_248z as default, stylesheet };

package/radio/index.d.ts

@@ -0,0 +1 @@
+export * from "./radio";

package/radio/index.js

@@ -0,0 +1 @@
+export { TkRadio } from './radio.js';

package/radio/radio.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from "lit";
+declare class TkRadio extends LitElement {
+    static styles: import("lit").CSSResult;
+    private _id;
+    name: string;
+    checked: boolean;
+    required: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    value: string;
+    private $input;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    protected onKeyDown(e: KeyboardEvent): void;
+    protected handleClick(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-radio": TkRadio;
+    }
+}
+export { TkRadio };

package/radio/radio.js

@@ -0,0 +1,98 @@
+import { __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { property, query, customElement } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../box/index.js';
+import { uniqueID } from '../utils/unique.js';
+import css_248z from './radio.scss.js';
+
+let TkRadio = class TkRadio extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._id = uniqueID();
+        this.checked = false;
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+    }
+    render() {
+        return html `
+			<tk-box direction="row" align-items="center">
+				<div tabindex="0" class="radio">
+					<div id="dot"></div>
+				</div>
+				<span class="label"><slot></slot></span>
+			</tk-box>
+			<input
+				id=${this._id}
+				type="radio"
+				style="position: absolute;left: 0;z-index: -1;"
+				?checked="${this.checked}"
+				.checked=${this.checked}
+				?required="${this.required}"
+				?disabled="${this.disabled}"
+				?readonly="${this.readonly}"
+				value="${ifDefined(this.value)}"
+				name="${ifDefined(this.name)}"
+				tabindex="-1"
+			/>
+		`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this.handleClick.bind(this));
+        this.addEventListener("keydown", this.onKeyDown.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("click", this.handleClick);
+        this.removeEventListener("keydown", this.onKeyDown);
+    }
+    firstUpdated() {
+        this.appendChild(this.$input);
+    }
+    onKeyDown(e) {
+        if (e.code === "Space" || e.code === "Enter") {
+            e.preventDefault();
+            e.stopPropagation();
+            this.click();
+        }
+    }
+    handleClick() {
+        this.checked = !this.checked;
+        if (this.checked && this.name)
+            this.getRootNode()
+                .querySelectorAll(`tk-radio[name="${this.name}"]`)
+                .forEach(el => (el != this ? (el.checked = false) : null));
+        setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
+    }
+};
+TkRadio.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+__decorate([
+    property({ attribute: true, type: String })
+], TkRadio.prototype, "name", void 0);
+__decorate([
+    property({ attribute: true, type: Boolean, reflect: true })
+], TkRadio.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkRadio.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkRadio.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkRadio.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TkRadio.prototype, "value", void 0);
+__decorate([
+    query("input")
+], TkRadio.prototype, "$input", void 0);
+TkRadio = __decorate([
+    customElement("tk-radio")
+], TkRadio);
+
+export { TkRadio };

package/radio/radio.scss.js

@@ -0,0 +1,4 @@
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_radio-bg:var(--radio-bg,#0000);--_radio-color:var(--radio-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));display:inline-flex}:host .radio{align-items:center;background:var(--_radio-bg);border:var(--radio-border-config,.125rem solid) currentColor;border-radius:var(--radio-border-radius,100%);color:var(--_radio-color);display:inline-flex;height:var(--radio-size,1.25rem);justify-content:center;outline:none;position:relative;transition:var(--radio-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),border-color var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));-webkit-user-select:none;user-select:none;width:var(--radio-size,1.25rem)}:host .label{font-size:1.1em;margin-left:10px}:host(:not([disabled])){cursor:pointer}:host([checked]){--_radio-bg:var(--radio-bg-checked,#0000);--_radio-color:var(--radio-color-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([checked]) #dot{transform:scale(1)}:host(:focus),:host(:hover){will-change:border,background}:host(:focus) #dot,:host(:hover) #dot{will-change:transform,background}:host([disabled]){--_radio-bg:var(--radio-bg-disabled,#0000);--_radio-color:var(--radio-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));pointer-events:none}:host([disabled][checked]){--_radio-bg:var(--radio-bg-disabled-checked,#0000);--_radio-color:var(--radio-color-disabled-checked,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}#dot{background:currentColor;border-radius:var(--radio-dot-border-radius,100%);height:var(--radio-dot-size,.625rem);transform:scale(0);transition:var(--radio-dot-transition,transform var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--radio-dot-size,.625rem)}#ripple{transform:var(--radio-ripple-transform,translate(-50%,-50%) scale(1.8))}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_radio-bg:var(--radio-bg,#0000);--_radio-color:var(--radio-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));display:inline-flex}:host .radio{align-items:center;background:var(--_radio-bg);border:var(--radio-border-config,.125rem solid) currentColor;border-radius:var(--radio-border-radius,100%);color:var(--_radio-color);display:inline-flex;height:var(--radio-size,1.25rem);justify-content:center;outline:none;position:relative;transition:var(--radio-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),border-color var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));-webkit-user-select:none;user-select:none;width:var(--radio-size,1.25rem)}:host .label{font-size:1.1em;margin-left:10px}:host(:not([disabled])){cursor:pointer}:host([checked]){--_radio-bg:var(--radio-bg-checked,#0000);--_radio-color:var(--radio-color-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([checked]) #dot{transform:scale(1)}:host(:focus),:host(:hover){will-change:border,background}:host(:focus) #dot,:host(:hover) #dot{will-change:transform,background}:host([disabled]){--_radio-bg:var(--radio-bg-disabled,#0000);--_radio-color:var(--radio-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));pointer-events:none}:host([disabled][checked]){--_radio-bg:var(--radio-bg-disabled-checked,#0000);--_radio-color:var(--radio-color-disabled-checked,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}#dot{background:currentColor;border-radius:var(--radio-dot-border-radius,100%);height:var(--radio-dot-size,.625rem);transform:scale(0);transition:var(--radio-dot-transition,transform var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--radio-dot-size,.625rem)}#ripple{transform:var(--radio-ripple-transform,translate(-50%,-50%) scale(1.8))}";
+
+export { css_248z as default, stylesheet };

package/select/index.d.ts

@@ -0,0 +1 @@
+export * from "./select";

package/select/index.js

@@ -0,0 +1 @@
+export { TkSelect } from './select.js';

package/select/select.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+declare class TkSelect extends LitElement {
+    static styles: import("lit").CSSResult;
+    private _id;
+    set value(value: string);
+    get value(): string;
+    name: string;
+    list: string;
+    type: "email" | "number" | "password" | "text" | "search";
+    required: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    autocomplete: "on" | "off";
+    pattern: string;
+    initialValue: string;
+    label: string;
+    min: number;
+    max: number;
+    minLength: number;
+    maxLength: number;
+    private $select;
+    render(): import("lit-html").TemplateResult<1>;
+    private handleChange;
+    firstUpdated(): void;
+    private refreshAttributes;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-select": TkSelect;
+    }
+}
+export { TkSelect };

package/select/select.js

@@ -0,0 +1,132 @@
+import { __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { property, state, eventOptions, customElement } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../box/index.js';
+import { uniqueID } from '../utils/unique.js';
+import css_248z from './select.scss.js';
+
+let TkSelect = class TkSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._id = uniqueID();
+        this.type = "text";
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+    }
+    set value(value) {
+        if (!this.$select) {
+            this.initialValue = value;
+        }
+        else {
+            this.$select.value = value;
+            this.refreshAttributes();
+        }
+    }
+    get value() {
+        return this.$select != null ? this.$select.value : this.initialValue || "";
+    }
+    render() {
+        return html `
+			<div id="container">
+				<slot id="before" name="before"></slot>
+				<div id="wrapper">
+					<div id="label">${this.label}</div>
+					<slot id="slot"></slot>
+					<select
+						id="${this._id}"
+						@keydown=${this.handleChange.bind(this)}
+						@input=${this.handleChange.bind(this)}
+						@focusout=${this.handleChange.bind(this)}
+						@change=${this.handleChange.bind(this)}
+						.value="${this.initialValue}"
+						?required="${this.required}"
+						?disabled="${this.disabled}"
+						?readonly="${this.readonly}"
+						name="${ifDefined(this.name)}"
+						autocomplete="${ifDefined(this.autocomplete)}"
+						tabindex="${this.disabled ? -1 : 0}"
+					></select>
+					<svg id="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 25" preserveAspectRatio="none">
+						<polygon points="0,0 50,0 25,25" />
+					</svg>
+				</div>
+				<slot id="after" name="after"></slot>
+			</div>
+		`;
+    }
+    handleChange() {
+        this.refreshAttributes();
+    }
+    firstUpdated() {
+        var _a;
+        this.$select = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("select");
+        this.appendChild(this.$select);
+        const options = this.querySelectorAll("option");
+        options.forEach(option => this.$select.appendChild(option));
+        if (this.initialValue)
+            this.value = this.initialValue;
+    }
+    refreshAttributes() {
+        this.$select.value ? this.setAttribute("dirty", "") : this.removeAttribute("dirty");
+        this.$select.checkValidity() ? this.removeAttribute("invalid") : this.setAttribute("invalid", "");
+        setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
+    }
+};
+TkSelect.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+__decorate([
+    property({ type: String })
+], TkSelect.prototype, "value", null);
+__decorate([
+    property({ attribute: true, type: String })
+], TkSelect.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], TkSelect.prototype, "list", void 0);
+__decorate([
+    property({ type: String })
+], TkSelect.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkSelect.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkSelect.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String })
+], TkSelect.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: String })
+], TkSelect.prototype, "pattern", void 0);
+__decorate([
+    state()
+], TkSelect.prototype, "initialValue", void 0);
+__decorate([
+    property({ type: String })
+], TkSelect.prototype, "label", void 0);
+__decorate([
+    property({ type: Number })
+], TkSelect.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], TkSelect.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], TkSelect.prototype, "minLength", void 0);
+__decorate([
+    property({ type: Number })
+], TkSelect.prototype, "maxLength", void 0);
+__decorate([
+    eventOptions({ passive: true })
+], TkSelect.prototype, "handleChange", null);
+TkSelect = __decorate([
+    customElement("tk-select")
+], TkSelect);
+
+export { TkSelect };

package/select/select.scss.js

@@ -0,0 +1,4 @@
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}#arrow{fill:var(--_input-state-color);height:8px;position:absolute;right:0;top:50%;transform:translate(-100%,-50%);z-index:-1}::slotted(option){display:none}:host(:not([dirty])) ::slotted(select){opacity:0}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}#arrow{fill:var(--_input-state-color);height:8px;position:absolute;right:0;top:50%;transform:translate(-100%,-50%);z-index:-1}::slotted(option){display:none}:host(:not([dirty])) ::slotted(select){opacity:0}";
+
+export { css_248z as default, stylesheet };

package/slider/index.d.ts

@@ -0,0 +1 @@
+export * from "./slider";

package/slider/index.js

@@ -0,0 +1 @@
+export { TkSlider } from './slider.js';

package/slider/slider.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from "lit";
+declare class TkSlider extends LitElement {
+    static styles: import("lit").CSSResult;
+    private _id;
+    name: string;
+    list: string;
+    required: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    autocomplete: "on" | "off";
+    thumbLabel: boolean;
+    thumbLabelPersist: boolean;
+    label: string;
+    min: number;
+    value: number;
+    max: number;
+    step: number;
+    private $slider;
+    private $input;
+    render(): import("lit-html").TemplateResult<1>;
+    private handleChange;
+    firstUpdated(): void;
+    updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-slider": TkSlider;
+    }
+}
+export { TkSlider };

package/slider/slider.js

@@ -0,0 +1,135 @@
+import { __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { property, query, customElement } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { uniqueID } from '../utils/unique.js';
+import css_248z from './slider.scss.js';
+
+let TkSlider = class TkSlider extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._id = uniqueID();
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.thumbLabel = false;
+        this.thumbLabelPersist = false;
+        this.min = 0;
+        this.value = this.min;
+        this.max = 100;
+    }
+    render() {
+        return html `
+			<div id="container">
+				<slot id="before" name="before"></slot>
+				<div id="wrapper">
+					<div id="label">${this.label}</div>
+					<div id="slot-wrapper">
+						<input
+							@input="${this.handleChange.bind(this)}"
+							id="slider"
+							type="range"
+							.value="${this.value.toString()}"
+							?required="${this.required}"
+							?disabled="${this.disabled}"
+							?readonly="${this.readonly}"
+							aria-label="${ifDefined(this.label)}"
+							name="${ifDefined(this.name)}"
+							autocomplete="${ifDefined(this.autocomplete)}"
+							min="${ifDefined(this.min)}"
+							max="${ifDefined(this.max)}"
+							step="${ifDefined(this.step)}"
+							tabindex="0"
+						/>
+						${this.thumbLabel || this.thumbLabelPersist
+            ? html `
+									<div id="thumb-container">
+										<div id="thumb-label"><slot name="thumb-label">${this.value}</slot></div>
+									</div>
+							  `
+            : ''}
+					</div>
+					<input
+						id=${this._id}
+						class="hidden-input"
+						type="hidden"
+						value="${this.value.toString()}"
+						?required="${this.required}"
+						?disabled="${this.disabled}"
+						?readonly="${this.readonly}"
+						aria-label="${ifDefined(this.label)}"
+						name="${ifDefined(this.name)}"
+					/>
+				</div>
+				<slot id="after" name="after"></slot>
+			</div>
+		`;
+    }
+    handleChange(e) {
+        e.target.checkValidity() ? this.removeAttribute("invalid") : this.setAttribute("invalid", "");
+        this.value = e.target.value.toString();
+        setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
+    }
+    firstUpdated() {
+        this.appendChild(this.$input);
+        this.setAttribute("dirty", "");
+    }
+    updated() {
+        requestAnimationFrame(() => {
+            this.style.setProperty("--_perc", ((Number(this.value) - this.min) / (this.max - this.min)).toString());
+        });
+    }
+};
+TkSlider.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+__decorate([
+    property({ attribute: true, type: String })
+], TkSlider.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], TkSlider.prototype, "list", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkSlider.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkSlider.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkSlider.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String })
+], TkSlider.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "thumblabel" })
+], TkSlider.prototype, "thumbLabel", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "thumblabel-persist" })
+], TkSlider.prototype, "thumbLabelPersist", void 0);
+__decorate([
+    property({ type: String })
+], TkSlider.prototype, "label", void 0);
+__decorate([
+    property({ type: Number })
+], TkSlider.prototype, "min", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], TkSlider.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], TkSlider.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], TkSlider.prototype, "step", void 0);
+__decorate([
+    query("#slider")
+], TkSlider.prototype, "$slider", void 0);
+__decorate([
+    query(".hidden-input")
+], TkSlider.prototype, "$input", void 0);
+TkSlider = __decorate([
+    customElement("tk-slider")
+], TkSlider);
+
+export { TkSlider };

package/slider/slider.scss.js

@@ -0,0 +1,4 @@
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host{--_perc:0;--_slider-track-bg:var(--slider-bg,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-track-bg-active:var(--slider-bg-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_slider-thumb-bg:var(--slider-thumb-bg,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));--_slider-thumb-border:var(--slider-thumb-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([disabled]){--_slider-track-bg:var(--slider-bg-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_slider-track-bg-active:var(--slider-bg-active-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_slider-thumb-bg:var(--slider-thumb-bg-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-thumb-border:var(--slider-thumb-bg,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host([thumblabel-persist]) #container,:host([thumblabel]) #container{padding-top:33px}#container{border:none;overflow:visible}#slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(90deg,var(--_slider-track-bg-active) 0,var(--_slider-track-bg-active) calc(var(--_perc)*100%),var(--_slider-track-bg) calc(var(--_perc)*100%),var(--_slider-track-bg));border:none;border-radius:0;box-sizing:border-box;cursor:grab;height:var(--slider-height,.3125rem);margin:0;outline:none;top:calc(var(--slider-height, .3125rem)*-1/2)}#slider,#thumb-container{position:relative;width:100%}#thumb-label{--_thumb-label-transform-y:0.625rem;-webkit-text-fill-color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));align-items:center;border-radius:var(--slider-thumb-label-border-radius,100%);bottom:calc(100% + var(--slider-thumb-size, .75rem) + var(--slider-height, .3125rem) + var(--slider-thumb-space, .75rem));color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));display:flex;font-size:var(--slider-thumb-label-font-size,.75rem);height:var(--slider-thumb-label-size,1.875rem);justify-content:center;left:calc(var(--_perc)*100% - var(--slider-thumb-size, 1.2rem)*var(--_perc));opacity:0;pointer-events:none;text-overflow:ellipsis;transform:translate(calc(-50% + var(--slider-thumb-size, 1.2rem)/2),var(--_thumb-label-transform-y));transition:var(--slider-thumb-label-transition,opacity var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-label-size,1.875rem)}#thumb-label,#thumb-label:before{background:var(--slider-thumb-label-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));position:absolute}#thumb-label:before{border-radius:0 50% 50% 50%;content:\"\";height:100%;left:0;top:0;transform:rotate(225deg);width:100%;z-index:-1}#slider:focus+#thumb-container #thumb-label,:host([thumblabel-persist]) #thumb-label,:host:focus #thumb-label{--_thumb-label-transform-y:0;opacity:1}#slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:4px solid var(--_slider-thumb-border);border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-webkit-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:none;border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-moz-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}#slider:focus::-moz-range-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host{--_perc:0;--_slider-track-bg:var(--slider-bg,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-track-bg-active:var(--slider-bg-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_slider-thumb-bg:var(--slider-thumb-bg,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));--_slider-thumb-border:var(--slider-thumb-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([disabled]){--_slider-track-bg:var(--slider-bg-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_slider-track-bg-active:var(--slider-bg-active-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_slider-thumb-bg:var(--slider-thumb-bg-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-thumb-border:var(--slider-thumb-bg,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host([thumblabel-persist]) #container,:host([thumblabel]) #container{padding-top:33px}#container{border:none;overflow:visible}#slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(90deg,var(--_slider-track-bg-active) 0,var(--_slider-track-bg-active) calc(var(--_perc)*100%),var(--_slider-track-bg) calc(var(--_perc)*100%),var(--_slider-track-bg));border:none;border-radius:0;box-sizing:border-box;cursor:grab;height:var(--slider-height,.3125rem);margin:0;outline:none;top:calc(var(--slider-height, .3125rem)*-1/2)}#slider,#thumb-container{position:relative;width:100%}#thumb-label{--_thumb-label-transform-y:0.625rem;-webkit-text-fill-color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));align-items:center;border-radius:var(--slider-thumb-label-border-radius,100%);bottom:calc(100% + var(--slider-thumb-size, .75rem) + var(--slider-height, .3125rem) + var(--slider-thumb-space, .75rem));color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));display:flex;font-size:var(--slider-thumb-label-font-size,.75rem);height:var(--slider-thumb-label-size,1.875rem);justify-content:center;left:calc(var(--_perc)*100% - var(--slider-thumb-size, 1.2rem)*var(--_perc));opacity:0;pointer-events:none;text-overflow:ellipsis;transform:translate(calc(-50% + var(--slider-thumb-size, 1.2rem)/2),var(--_thumb-label-transform-y));transition:var(--slider-thumb-label-transition,opacity var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-label-size,1.875rem)}#thumb-label,#thumb-label:before{background:var(--slider-thumb-label-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));position:absolute}#thumb-label:before{border-radius:0 50% 50% 50%;content:\"\";height:100%;left:0;top:0;transform:rotate(225deg);width:100%;z-index:-1}#slider:focus+#thumb-container #thumb-label,:host([thumblabel-persist]) #thumb-label,:host:focus #thumb-label{--_thumb-label-transform-y:0;opacity:1}#slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:4px solid var(--_slider-thumb-border);border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-webkit-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:none;border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-moz-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}#slider:focus::-moz-range-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}";
+
+export { css_248z as default, stylesheet };

package/switch/index.d.ts

@@ -0,0 +1 @@
+export * from "./switch";

package/switch/index.js

@@ -0,0 +1 @@
+export { TkSwitch } from './switch.js';