tinkiet 0.7.6 → 0.8.2

package/accordion/accordion.d.ts

@@ -0,0 +1,18 @@
+import { TkFocusableBox } from "../box/focusable-box";
+declare class TkAccordion extends TkFocusableBox {
+    static get styles(): import("lit").CSSResult[];
+    name: string;
+    checked: boolean;
+    rippleHeader: boolean;
+    protected $input: HTMLInputElement;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    protected onKeyDown(e: KeyboardEvent): void;
+    protected handleClick(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-accordion": TkAccordion;
+    }
+}
+export { TkAccordion };

package/accordion/accordion.js

@@ -0,0 +1,94 @@
+import { __decorate } from 'tslib';
+import { css, unsafeCSS, html } from 'lit';
+import { property, query, customElement } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../box/index.js';
+import { TkFocusableBox } from '../box/focusable-box.js';
+import css_248z from './accordion.scss.js';
+import { TkBox } from '../box/box.js';
+
+let TkAccordion = class TkAccordion extends TkFocusableBox {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+        this.rippleHeader = false;
+    }
+    static get styles() {
+        return [
+            ...TkBox.styles,
+            css `
+				${unsafeCSS(css_248z)}
+			`
+        ];
+    }
+    render() {
+        return html `
+			<tk-box margin="small">
+				<tk-box
+					@click=${this.handleClick.bind(this)}
+					?ripple=${this.rippleHeader}
+					class="header"
+					direction="row"
+					align-items="center"
+				>
+					<tk-box class="before">
+						<slot name="before"></slot>
+					</tk-box>
+					<tk-box class="header-content">
+						<h3 class="title"><slot name="title"></slot></h3>
+						<h5><slot name="description"></slot></h5>
+					</tk-box>
+				</tk-box>
+				<tk-box class="content">
+					<slot></slot>
+				</tk-box>
+			</tk-box>
+			<input
+				id=${this.id}
+				slot="none"
+				style="display: none;"
+				type="radio"
+				?checked="${this.checked}"
+				?disabled="${this.disabled}"
+				name="${ifDefined(this.name)}"
+				aria-hidden="true"
+				tabindex="-1"
+			/>
+		`;
+    }
+    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-accordion[name="${this.name}"]`)
+                .forEach(el => (el != this ? (el.checked = false) : null));
+        this.dispatchEvent(new Event("change"));
+    }
+};
+__decorate([
+    property({ attribute: true, type: String })
+], TkAccordion.prototype, "name", void 0);
+__decorate([
+    property({ attribute: true, type: Boolean, reflect: true })
+], TkAccordion.prototype, "checked", void 0);
+__decorate([
+    property({ attribute: "ripple-header", type: Boolean })
+], TkAccordion.prototype, "rippleHeader", void 0);
+__decorate([
+    query("input")
+], TkAccordion.prototype, "$input", void 0);
+TkAccordion = __decorate([
+    customElement("tk-accordion")
+], TkAccordion);
+
+export { TkAccordion };

package/accordion/accordion.scss.js

@@ -0,0 +1,4 @@
+var css_248z = "@charset \"UTF-8\";*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host .header{border:1px solid var(--shade-lighter);border-radius:10px;color:var(--primary);cursor:pointer;padding:.6em}:host .header>*{margin:0 10px}:host .header:after{content:\"▼\";display:inline-block;font-size:12px;transition:transform .3s}:host .header .before{width:fit-content}:host .header .header-content{flex:1}:host .content{height:0;margin:0 auto;opacity:0;transition:all .2s;visibility:hidden;width:95%}:host h3,:host h5{margin:0}:host([checked]) .header{background-color:var(--primary);color:var(--on-primary)}:host([checked]) .header:after{transform:rotate(180deg)}:host([checked]) .content{height:auto;opacity:1;transition:all .3s,opacity .7s;visibility:visible}:host([pill]) .header{border-radius:9999px}";
+var stylesheet="@charset \"UTF-8\";*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host .header{border:1px solid var(--shade-lighter);border-radius:10px;color:var(--primary);cursor:pointer;padding:.6em}:host .header>*{margin:0 10px}:host .header:after{content:\"▼\";display:inline-block;font-size:12px;transition:transform .3s}:host .header .before{width:fit-content}:host .header .header-content{flex:1}:host .content{height:0;margin:0 auto;opacity:0;transition:all .2s;visibility:hidden;width:95%}:host h3,:host h5{margin:0}:host([checked]) .header{background-color:var(--primary);color:var(--on-primary)}:host([checked]) .header:after{transform:rotate(180deg)}:host([checked]) .content{height:auto;opacity:1;transition:all .3s,opacity .7s;visibility:visible}:host([pill]) .header{border-radius:9999px}";
+
+export { css_248z as default, stylesheet };

package/accordion/index.d.ts

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

package/accordion/index.js

@@ -0,0 +1 @@
+export { TkAccordion } from './accordion.js';

package/badge/badge.d.ts

@@ -0,0 +1,15 @@
+import { TkBox } from "../box/index";
+/**
+ * A badge WebComponent
+ * @cssprop --tk-badge-color - Color of widget default to --primary
+ * @cssprop --tk-badge-text-color - Text color of widget to --on-primary
+ */
+declare class TkBadge extends TkBox {
+    static get styles(): import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-badge": TkBadge;
+    }
+}
+export { TkBadge };

package/badge/badge.js

@@ -0,0 +1,27 @@
+import { __decorate } from 'tslib';
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import '../box/index.js';
+import css_248z from './badge.scss.js';
+import { TkBox } from '../box/box.js';
+
+/**
+ * A badge WebComponent
+ * @cssprop --tk-badge-color - Color of widget default to --primary
+ * @cssprop --tk-badge-text-color - Text color of widget to --on-primary
+ */
+let TkBadge = class TkBadge extends TkBox {
+    static get styles() {
+        return [
+            ...TkBox.styles,
+            css `
+				${unsafeCSS(css_248z)}
+			`
+        ];
+    }
+};
+TkBadge = __decorate([
+    customElement("tk-badge")
+], TkBadge);
+
+export { TkBadge };

package/badge/badge.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{--color:var(--tk-badge-color,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--text:var(--tk-badge-text-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));align-items:center;background-color:var(--color);border-radius:9999px;color:var(--text);cursor:inherit;display:inline-flex;height:1.375em;justify-content:center;padding:0 .5em;user-select:none;white-space:nowrap}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)));--text:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)))}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--tk-badge-color,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--text:var(--tk-badge-text-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));align-items:center;background-color:var(--color);border-radius:9999px;color:var(--text);cursor:inherit;display:inline-flex;height:1.375em;justify-content:center;padding:0 .5em;user-select:none;white-space:nowrap}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)));--text:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)))}";
+
+export { css_248z as default, stylesheet };

package/badge/index.d.ts

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

package/badge/index.js

@@ -0,0 +1 @@
+export { TkBadge } from './badge.js';

package/box/box.d.ts

@@ -0,0 +1,56 @@
+import { LitElement } from "lit";
+declare const colors: readonly ["primary-lighter", "primary-light", "primary", "primary-dark", "primary-darker", "on-primary-lighter", "on-primary-light", "on-primary", "on-primary-dark", "on-primary-darker", "accent-lighter", "accent-light", "accent", "accent-dark", "accent-darker", "on-accent-lighter", "on-accent-light", "on-accent", "on-accent-dark", "on-accent-darker", "error-lighter", "error-light", "error", "error-dark", "error-darker", "on-error-lighter", "on-error-light", "on-error", "on-error-dark", "on-error-darker", "shade-lighter", "shade-light", "shade", "shade-dark", "shade-darker", "on-shade-lighter", "on-shade-light", "on-shade", "on-shade-dark", "on-shade-darker"];
+type Color = typeof colors;
+/**
+ * A container that lays out its contents in one direction
+ *
+ * @attr {"none" | "small" | "medium" | "large" | "xlarge" | "circle" | "pill" } radius - border radius
+ * @attr {"around" | "between" | "center" | "end" | "start" | "stretch"} align-content - How to align the contents when there is extra space in the cross axis.
+ * @attr [align-content="stretch"]
+ * @attr {"baseline" | "center" | "end" | "start" | "stretch"} align-items - How to align the contents along the cross axis.
+ * @attr {"center" | "end" | "start" | "stretch"} align-self - How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.
+ * @attr {"row" | "column"} direction - The orientation to layout the child components in.
+ * @attr [direction="column"]
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} elevation - Elevated height above the underlying context, indicated via a drop shadow.
+ * @attr {"horizontal" | "vertical" | "true" | "false"} fill - Whether the width and/or height should fill the container.
+ * @attr {"grow" | "shrink" | "true" | "false"} flex - flex-grow and/or flex-shrink
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} gap - The amount of spacing between child elements. This should not be used in conjunction with 'wrap' as the gap elements will not wrap gracefully. If a child is a Fragment, Box will not add a gap between the children of the Fragment.
+ * @attr {"around" | "between" | "center" | "end" | "evenly" | "start" | "stretch"} justify - How to align the contents along the main axis.
+ * @attr [justify="stretch"]
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} margin - The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} padding - The amount of padding around the box contents. An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side of the box.
+ * @attr {"center" | "justify" | "left" | "right"} text - Text align
+ * @attr {"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge"} width - A fixed width.
+ * @attr {"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge"} height - A fixed height.
+ * @attr {"auto" | "hidden" | "scroll" | "visible"} overflow - box overflow.
+ * @attr { "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "lighter" | "bold" | "bolder"} weight - Font weight.
+ * @attr {"true" | "false" | "reverse"} wrap - Whether children can wrap if they can't all fit.
+ * @attr [wrap="false"]
+ */
+declare class TkBox extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+    /**
+     * Activate ripple
+     */
+    ripple: boolean;
+    /**
+     * Set background color.
+     */
+    background: Color | string;
+    /**
+     * Set color.
+     */
+    color: Color | "foreground" | "background" | string;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(props: any): void;
+    private showRipple;
+    private hideRipple;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-box": TkBox;
+    }
+}
+export { TkBox };

package/box/box.js

@@ -0,0 +1,182 @@
+import { __decorate } from 'tslib';
+import { LitElement, css, unsafeCSS, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import css_248z from './box.scss.js';
+
+const colors = [
+    "primary-lighter",
+    "primary-light",
+    "primary",
+    "primary-dark",
+    "primary-darker",
+    "on-primary-lighter",
+    "on-primary-light",
+    "on-primary",
+    "on-primary-dark",
+    "on-primary-darker",
+    "accent-lighter",
+    "accent-light",
+    "accent",
+    "accent-dark",
+    "accent-darker",
+    "on-accent-lighter",
+    "on-accent-light",
+    "on-accent",
+    "on-accent-dark",
+    "on-accent-darker",
+    "error-lighter",
+    "error-light",
+    "error",
+    "error-dark",
+    "error-darker",
+    "on-error-lighter",
+    "on-error-light",
+    "on-error",
+    "on-error-dark",
+    "on-error-darker",
+    "shade-lighter",
+    "shade-light",
+    "shade",
+    "shade-dark",
+    "shade-darker",
+    "on-shade-lighter",
+    "on-shade-light",
+    "on-shade",
+    "on-shade-dark",
+    "on-shade-darker"
+];
+/**
+ * A container that lays out its contents in one direction
+ *
+ * @attr {"none" | "small" | "medium" | "large" | "xlarge" | "circle" | "pill" } radius - border radius
+ * @attr {"around" | "between" | "center" | "end" | "start" | "stretch"} align-content - How to align the contents when there is extra space in the cross axis.
+ * @attr [align-content="stretch"]
+ * @attr {"baseline" | "center" | "end" | "start" | "stretch"} align-items - How to align the contents along the cross axis.
+ * @attr {"center" | "end" | "start" | "stretch"} align-self - How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.
+ * @attr {"row" | "column"} direction - The orientation to layout the child components in.
+ * @attr [direction="column"]
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} elevation - Elevated height above the underlying context, indicated via a drop shadow.
+ * @attr {"horizontal" | "vertical" | "true" | "false"} fill - Whether the width and/or height should fill the container.
+ * @attr {"grow" | "shrink" | "true" | "false"} flex - flex-grow and/or flex-shrink
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} gap - The amount of spacing between child elements. This should not be used in conjunction with 'wrap' as the gap elements will not wrap gracefully. If a child is a Fragment, Box will not add a gap between the children of the Fragment.
+ * @attr {"around" | "between" | "center" | "end" | "evenly" | "start" | "stretch"} justify - How to align the contents along the main axis.
+ * @attr [justify="stretch"]
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} margin - The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.
+ * @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} padding - The amount of padding around the box contents. An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side of the box.
+ * @attr {"center" | "justify" | "left" | "right"} text - Text align
+ * @attr {"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge"} width - A fixed width.
+ * @attr {"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge"} height - A fixed height.
+ * @attr {"auto" | "hidden" | "scroll" | "visible"} overflow - box overflow.
+ * @attr { "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "lighter" | "bold" | "bolder"} weight - Font weight.
+ * @attr {"true" | "false" | "reverse"} wrap - Whether children can wrap if they can't all fit.
+ * @attr [wrap="false"]
+ */
+let TkBox = class TkBox extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Activate ripple
+         */
+        this.ripple = false;
+    }
+    static get styles() {
+        return [
+            css `
+				${unsafeCSS(css_248z)}
+			`
+        ];
+    }
+    render() {
+        return html `
+			<slot></slot>
+		`;
+    }
+    connectedCallback() {
+        if (this.ripple) {
+            this.addEventListener("mousedown", this.showRipple.bind(this), { passive: true });
+            this.addEventListener("mouseup", this.hideRipple.bind(this), { passive: true });
+        }
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        this.removeEventListener("mousedown", this.showRipple);
+        this.addEventListener("mouseup", this.hideRipple);
+        super.disconnectedCallback();
+    }
+    updated(props) {
+        if (props.has("background") && ![...colors, "background", "foreground"].includes(this.background))
+            this.style.setProperty("background-color", this.background.toString());
+        if (props.has("color") && ![...colors, "background", "foreground"].includes(this.color))
+            this.style.setProperty("color", this.color.toString());
+        super.updated(props);
+    }
+    showRipple(event) {
+        const x = event.clientX;
+        const y = event.clientY;
+        const { offsetWidth, offsetHeight } = this;
+        const container = document.createElement("span");
+        container.classList.add("ripple", "open");
+        const element = document.createElement("span");
+        container.appendChild(element);
+        this.shadowRoot.appendChild(container);
+        const rect = this.getBoundingClientRect();
+        const diameter = Math.max(offsetWidth, offsetWidth) * 2;
+        element.style.width = element.style.height = diameter + "px";
+        element.style.left = x - rect.left - diameter / 2 + "px";
+        element.style.top = y - rect.top - diameter / 2 + "px";
+        const inAnimation = element.animate({
+            transform: [`scale(0)`, `scale(1)`]
+        }, {
+            easing: "ease-out",
+            fill: "both",
+            duration: 500
+        });
+        inAnimation.onfinish = () => {
+            container.classList.remove("open");
+            const outAnimation = element.animate({
+                opacity: ["0.5", "0"]
+            }, {
+                easing: "ease-in",
+                fill: "both",
+                duration: 300
+            });
+            outAnimation.onfinish = () => {
+                requestAnimationFrame(() => {
+                    container.remove();
+                });
+            };
+        };
+    }
+    hideRipple(event) {
+        var _a;
+        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".ripple:not([open])").forEach(container => {
+            const element = container.querySelector("span");
+            const outAnimation = element.animate({
+                opacity: ["0.5", "0"]
+            }, {
+                easing: "ease-out",
+                fill: "both",
+                duration: 300
+            });
+            outAnimation.onfinish = () => {
+                requestAnimationFrame(() => {
+                    container.remove();
+                });
+            };
+        });
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], TkBox.prototype, "ripple", void 0);
+__decorate([
+    property()
+], TkBox.prototype, "background", void 0);
+__decorate([
+    property()
+], TkBox.prototype, "color", void 0);
+TkBox = __decorate([
+    customElement("tk-box")
+], TkBox);
+
+export { TkBox };

package/box/box.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{box-sizing:border-box;display:flex;flex-direction:column;position:relative;transition:background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease)}:host([hidden]){display:none}.ripple{bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0}.ripple span{background-color:currentColor;border-radius:50%;opacity:.5;position:absolute}:host([align-content=start]){align-content:flex-start}:host([align-content=end]){align-content:flex-end}:host([align-content=stretch]){align-content:stretch}:host([align-content=center]){align-content:center}:host([align-content=around]){align-content:space-around}:host([align-content=between]){align-content:space-between}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([align-items=stretch]){align-items:stretch}:host([align-items=center]){align-items:center}:host([align-items=baseline]){align-items:baseline}:host([align-self=start]){align-self:flex-start}:host([align-self=end]){align-self:flex-end}:host([align-self=stretch]){align-self:stretch}:host([align-self=center]){align-self:center}:host([background=primary-lighter]){background-color:var(--primary-lighter)}:host([color=primary-lighter]){color:var(--primary-lighter)}:host([background=primary-light]){background-color:var(--primary-light)}:host([color=primary-light]){color:var(--primary-light)}:host([background=primary]){background-color:var(--primary)}:host([color=primary]){color:var(--primary)}:host([background=primary-dark]){background-color:var(--primary-dark)}:host([color=primary-dark]){color:var(--primary-dark)}:host([background=primary-darker]){background-color:var(--primary-darker)}:host([color=primary-darker]){color:var(--primary-darker)}:host([background=on-primary-lighter]){background-color:var(--on-primary-lighter)}:host([color=on-primary-lighter]){color:var(--on-primary-lighter)}:host([background=on-primary-light]){background-color:var(--on-primary-light)}:host([color=on-primary-light]){color:var(--on-primary-light)}:host([background=on-primary]){background-color:var(--on-primary)}:host([color=on-primary]){color:var(--on-primary)}:host([background=on-primary-dark]){background-color:var(--on-primary-dark)}:host([color=on-primary-dark]){color:var(--on-primary-dark)}:host([background=on-primary-darker]){background-color:var(--on-primary-darker)}:host([color=on-primary-darker]){color:var(--on-primary-darker)}:host([background=accent-lighter]){background-color:var(--accent-lighter)}:host([color=accent-lighter]){color:var(--accent-lighter)}:host([background=accent-light]){background-color:var(--accent-light)}:host([color=accent-light]){color:var(--accent-light)}:host([background=accent]){background-color:var(--accent)}:host([color=accent]){color:var(--accent)}:host([background=accent-dark]){background-color:var(--accent-dark)}:host([color=accent-dark]){color:var(--accent-dark)}:host([background=accent-darker]){background-color:var(--accent-darker)}:host([color=accent-darker]){color:var(--accent-darker)}:host([background=on-accent-lighter]){background-color:var(--on-accent-lighter)}:host([color=on-accent-lighter]){color:var(--on-accent-lighter)}:host([background=on-accent-light]){background-color:var(--on-accent-light)}:host([color=on-accent-light]){color:var(--on-accent-light)}:host([background=on-accent]){background-color:var(--on-accent)}:host([color=on-accent]){color:var(--on-accent)}:host([background=on-accent-dark]){background-color:var(--on-accent-dark)}:host([color=on-accent-dark]){color:var(--on-accent-dark)}:host([background=on-accent-darker]){background-color:var(--on-accent-darker)}:host([color=on-accent-darker]){color:var(--on-accent-darker)}:host([background=error-lighter]){background-color:var(--error-lighter)}:host([color=error-lighter]){color:var(--error-lighter)}:host([background=error-light]){background-color:var(--error-light)}:host([color=error-light]){color:var(--error-light)}:host([background=error]){background-color:var(--error)}:host([color=error]){color:var(--error)}:host([background=error-dark]){background-color:var(--error-dark)}:host([color=error-dark]){color:var(--error-dark)}:host([background=error-darker]){background-color:var(--error-darker)}:host([color=error-darker]){color:var(--error-darker)}:host([background=on-error-lighter]){background-color:var(--on-error-lighter)}:host([color=on-error-lighter]){color:var(--on-error-lighter)}:host([background=on-error-light]){background-color:var(--on-error-light)}:host([color=on-error-light]){color:var(--on-error-light)}:host([background=on-error]){background-color:var(--on-error)}:host([color=on-error]){color:var(--on-error)}:host([background=on-error-dark]){background-color:var(--on-error-dark)}:host([color=on-error-dark]){color:var(--on-error-dark)}:host([background=on-error-darker]){background-color:var(--on-error-darker)}:host([color=on-error-darker]){color:var(--on-error-darker)}:host([background=shade-lighter]){background-color:var(--shade-lighter)}:host([color=shade-lighter]){color:var(--shade-lighter)}:host([background=shade-light]){background-color:var(--shade-light)}:host([color=shade-light]){color:var(--shade-light)}:host([background=shade]){background-color:var(--shade)}:host([color=shade]){color:var(--shade)}:host([background=shade-dark]){background-color:var(--shade-dark)}:host([color=shade-dark]){color:var(--shade-dark)}:host([background=shade-darker]){background-color:var(--shade-darker)}:host([color=shade-darker]){color:var(--shade-darker)}:host([background=on-shade-lighter]){background-color:var(--on-shade-lighter)}:host([color=on-shade-lighter]){color:var(--on-shade-lighter)}:host([background=on-shade-light]){background-color:var(--on-shade-light)}:host([color=on-shade-light]){color:var(--on-shade-light)}:host([background=on-shade]){background-color:var(--on-shade)}:host([color=on-shade]){color:var(--on-shade)}:host([background=on-shade-dark]){background-color:var(--on-shade-dark)}:host([color=on-shade-dark]){color:var(--on-shade-dark)}:host([background=on-shade-darker]){background-color:var(--on-shade-darker)}:host([color=on-shade-darker]){color:var(--on-shade-darker)}:host([background=foreground]){background-color:var(--foreground)}:host([color=foreground]){color:var(--foreground)}:host([background=background]){background-color:var(--background)}:host([color=background]){color:var(--background)}:host([direction=column]){flex-direction:column}:host([direction=row-reverse]){flex-direction:row-reverse}:host([direction=column-reverse]){flex-direction:column-reverse}:host([text=center]){text-align:center}:host([text=justify]){text-align:justify}:host([text=left]){text-align:left}:host([text=right]){text-align:right}:host([weight=\"100\"]){font-weight:100}:host([weight=\"200\"]){font-weight:200}:host([weight=\"300\"]){font-weight:300}:host([weight=\"400\"]){font-weight:400}:host([weight=\"500\"]){font-weight:500}:host([weight=\"600\"]){font-weight:600}:host([weight=\"700\"]){font-weight:700}:host([weight=\"800\"]){font-weight:800}:host([weight=\"900\"]){font-weight:900}:host([weight=lighter]){font-weight:lighter}:host([weight=bold]){font-weight:700}:host([weight=bolder]){font-weight:bolder}:host([direction=row]){flex-direction:row}:host([direction=row-reverse]){flex-direction:row}:host([elevation=xsmall]){box-shadow:var(--box-elevation,var(--elevation-1,0 1px 2px var(--shadow)))}:host([elevation=small]){box-shadow:var(--box-elevation,var(--elevation-2,0 2px 4px var(--shadow)))}:host([elevation=medium]){box-shadow:var(--box-elevation,var(--elevation-3,0 4px 8px var(--shadow)))}:host([elevation=large]){box-shadow:var(--box-elevation,var(--elevation-4,0 8px 16px var(--shadow)))}:host([elevation=xlarge]){box-shadow:var(--box-elevation,var(--elevation-5,0 12px 24px var(--shadow)))}:host([fill=horizontal]){width:100%}:host([fill=vertical]){height:100%}:host([fill=true]){height:100%;width:100%}:host([flex=grow]){flex:1 0}:host([flex=shrink]){flex:0 1}:host([flex=true]){flex:1 1}:host([flex=false]){flex:0 0}:host([gap=xsmall]) ::slotted(*),:host([gap=xsmall][direction=column]) ::slotted(*){margin:var(--spacing-xs,.25rem) 0}:host([gap=xsmall][direction=row]) ::slotted(*){margin:0 var(--spacing-xs,.25rem)}:host([margin=xsmall]){margin:var(--box-margin,var(--spacing-xs,.25rem))}:host([margin=\"xsmall auto\"]){margin:var(--box-margin,var(--spacing-xs,.25rem)) auto}:host([margin=\"auto xsmall\"]){margin:auto var(--box-margin,var(--spacing-xs,.25rem))}:host([padding=xsmall]){padding:var(--box-padding,var(--spacing-xs,.25rem))}:host([gap=small]) ::slotted(*),:host([gap=small][direction=column]) ::slotted(*){margin:var(--spacing-s,.5rem) 0}:host([gap=small][direction=row]) ::slotted(*){margin:0 var(--spacing-s,.5rem)}:host([margin=small]){margin:var(--box-margin,var(--spacing-s,.5rem))}:host([margin=\"small auto\"]){margin:var(--box-margin,var(--spacing-s,.5rem)) auto}:host([margin=\"auto small\"]){margin:auto var(--box-margin,var(--spacing-s,.5rem))}:host([padding=small]){padding:var(--box-padding,var(--spacing-s,.5rem))}:host([gap=medium]) ::slotted(*),:host([gap=medium][direction=column]) ::slotted(*){margin:var(--spacing-m,1rem) 0}:host([gap=medium][direction=row]) ::slotted(*){margin:0 var(--spacing-m,1rem)}:host([margin=medium]){margin:var(--box-margin,var(--spacing-m,1rem))}:host([margin=\"medium auto\"]){margin:var(--box-margin,var(--spacing-m,1rem)) auto}:host([margin=\"auto medium\"]){margin:auto var(--box-margin,var(--spacing-m,1rem))}:host([padding=medium]){padding:var(--box-padding,var(--spacing-m,1rem))}:host([gap=large]) ::slotted(*),:host([gap=large][direction=column]) ::slotted(*){margin:var(--spacing-l,1.25rem) 0}:host([gap=large][direction=row]) ::slotted(*){margin:0 var(--spacing-l,1.25rem)}:host([margin=large]){margin:var(--box-margin,var(--spacing-l,1.25rem))}:host([margin=\"large auto\"]){margin:var(--box-margin,var(--spacing-l,1.25rem)) auto}:host([margin=\"auto large\"]){margin:auto var(--box-margin,var(--spacing-l,1.25rem))}:host([padding=large]){padding:var(--box-padding,var(--spacing-l,1.25rem))}:host([gap=xlarge]) ::slotted(*),:host([gap=xlarge][direction=column]) ::slotted(*){margin:var(--spacing-xl,2rem) 0}:host([gap=xlarge][direction=row]) ::slotted(*){margin:0 var(--spacing-xl,2rem)}:host([margin=xlarge]){margin:var(--box-margin,var(--spacing-xl,2rem))}:host([margin=\"xlarge auto\"]){margin:var(--box-margin,var(--spacing-xl,2rem)) auto}:host([margin=\"auto xlarge\"]){margin:auto var(--box-margin,var(--spacing-xl,2rem))}:host([padding=xlarge]){padding:var(--box-padding,var(--spacing-xl,2rem))}:host([font=xsmall]),:host([size=xsmall]){font-size:var(--box-font-size,var(--font-size-xs,.625rem))}:host([font=small]),:host([size=small]){font-size:var(--box-font-size,var(--font-size-s,.875rem))}:host([font=medium]),:host([size=medium]){font-size:var(--box-font-size,var(--font-size-m,1rem))}:host([font=large]),:host([size=large]){font-size:var(--box-font-size,var(--font-size-l,1.25rem))}:host([font=xlarge]),:host([size=xlarge]){font-size:var(--box-font-size,var(--font-size-xl,1.5rem))}:host([font=xxlarge]),:host([size=xxlarge]){font-size:var(--box-font-size,var(--font-size-xxl,2.25rem))}:host([justify=start]){justify-content:flex-start}:host([justify=end]){justify-content:flex-end}:host([justify=stretch]){justify-content:stretch}:host([justify=baseline]){justify-content:baseline}:host([justify=center]){justify-content:center}:host([justify=around]){justify-content:space-around}:host([justify=between]){justify-content:space-between}:host([justify=evenly]){justify-content:space-evenly}:host([overflow=auto]){overflow:auto}:host([overflow=hidden]){overflow:hidden}:host([overflow=scroll]){overflow:scroll}:host([overflow=visible]){overflow:visible}:host([radius=none]){border-radius:var(--box-border-radius,0)}:host([radius=small]){border-radius:var(--box-border-radius,var(--border-radius-small,.125rem))}:host([radius=medium]){border-radius:var(--box-border-radius,var(--border-radius-medium,.25rem))}:host([radius=large]){border-radius:var(--box-border-radius,var(--border-radius-large,.5rem))}:host([radius=xlarge]){border-radius:var(--box-border-radius,var(--border-radius-x-large,1rem))}:host([radius=circle]){border-radius:var(--box-border-radius,var(--border-radius-circle,50%))}:host([radius=pill]){border-radius:var(--box-border-radius,var(--border-radius-pill,9999px))}:host([max-width=xxsmall]){max-width:var(--box-max-width,var(--size-xxs,2rem))}:host([width=xxsmall]){width:var(--box-width,var(--size-xxs,2rem))}:host([max-height=xxsmall]){max-height:var(--box-max-height,var(--size-xxs,2rem))}:host([height=xxsmall]){height:var(--box-height,var(--size-xxs,2rem))}:host([max-width=xsmall]){max-width:var(--box-max-width,var(--size-xs,4rem))}:host([width=xsmall]){width:var(--box-width,var(--size-xs,4rem))}:host([max-height=xsmall]){max-height:var(--box-max-height,var(--size-xs,4rem))}:host([height=xsmall]){height:var(--box-height,var(--size-xs,4rem))}:host([max-width=small]){max-width:var(--box-max-width,var(--size-s,8rem))}:host([width=small]){width:var(--box-width,var(--size-s,8rem))}:host([max-height=small]){max-height:var(--box-max-height,var(--size-s,8rem))}:host([height=small]){height:var(--box-height,var(--size-s,8rem))}:host([max-width=medium]){max-width:var(--box-max-width,var(--size-m,16rem))}:host([width=medium]){width:var(--box-width,var(--size-m,16rem))}:host([max-height=medium]){max-height:var(--box-max-height,var(--size-m,16rem))}:host([height=medium]){height:var(--box-height,var(--size-m,16rem))}:host([max-width=large]){max-width:var(--box-max-width,var(--size-l,32rem))}:host([width=large]){width:var(--box-width,var(--size-l,32rem))}:host([max-height=large]){max-height:var(--box-max-height,var(--size-l,32rem))}:host([height=large]){height:var(--box-height,var(--size-l,32rem))}:host([max-width=xlarge]){max-width:var(--box-max-width,var(--size-xl,48rem))}:host([width=xlarge]){width:var(--box-width,var(--size-xl,48rem))}:host([max-height=xlarge]){max-height:var(--box-max-height,var(--size-xl,48rem))}:host([height=xlarge]){height:var(--box-height,var(--size-xl,48rem))}:host([max-width=xxlarge]){max-width:var(--box-max-width,var(--size-xxl,64rem))}:host([width=xxlarge]){width:var(--box-width,var(--size-xxl,64rem))}:host([max-height=xxlarge]){max-height:var(--box-max-height,var(--size-xxl,64rem))}:host([height=xxlarge]){height:var(--box-height,var(--size-xxl,64rem))}:host([wrap=true]){flex-wrap:wrap}:host([wrap=reverse]){flex-wrap:wrap-reverse}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{box-sizing:border-box;display:flex;flex-direction:column;position:relative;transition:background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease)}:host([hidden]){display:none}.ripple{bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0}.ripple span{background-color:currentColor;border-radius:50%;opacity:.5;position:absolute}:host([align-content=start]){align-content:flex-start}:host([align-content=end]){align-content:flex-end}:host([align-content=stretch]){align-content:stretch}:host([align-content=center]){align-content:center}:host([align-content=around]){align-content:space-around}:host([align-content=between]){align-content:space-between}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([align-items=stretch]){align-items:stretch}:host([align-items=center]){align-items:center}:host([align-items=baseline]){align-items:baseline}:host([align-self=start]){align-self:flex-start}:host([align-self=end]){align-self:flex-end}:host([align-self=stretch]){align-self:stretch}:host([align-self=center]){align-self:center}:host([background=primary-lighter]){background-color:var(--primary-lighter)}:host([color=primary-lighter]){color:var(--primary-lighter)}:host([background=primary-light]){background-color:var(--primary-light)}:host([color=primary-light]){color:var(--primary-light)}:host([background=primary]){background-color:var(--primary)}:host([color=primary]){color:var(--primary)}:host([background=primary-dark]){background-color:var(--primary-dark)}:host([color=primary-dark]){color:var(--primary-dark)}:host([background=primary-darker]){background-color:var(--primary-darker)}:host([color=primary-darker]){color:var(--primary-darker)}:host([background=on-primary-lighter]){background-color:var(--on-primary-lighter)}:host([color=on-primary-lighter]){color:var(--on-primary-lighter)}:host([background=on-primary-light]){background-color:var(--on-primary-light)}:host([color=on-primary-light]){color:var(--on-primary-light)}:host([background=on-primary]){background-color:var(--on-primary)}:host([color=on-primary]){color:var(--on-primary)}:host([background=on-primary-dark]){background-color:var(--on-primary-dark)}:host([color=on-primary-dark]){color:var(--on-primary-dark)}:host([background=on-primary-darker]){background-color:var(--on-primary-darker)}:host([color=on-primary-darker]){color:var(--on-primary-darker)}:host([background=accent-lighter]){background-color:var(--accent-lighter)}:host([color=accent-lighter]){color:var(--accent-lighter)}:host([background=accent-light]){background-color:var(--accent-light)}:host([color=accent-light]){color:var(--accent-light)}:host([background=accent]){background-color:var(--accent)}:host([color=accent]){color:var(--accent)}:host([background=accent-dark]){background-color:var(--accent-dark)}:host([color=accent-dark]){color:var(--accent-dark)}:host([background=accent-darker]){background-color:var(--accent-darker)}:host([color=accent-darker]){color:var(--accent-darker)}:host([background=on-accent-lighter]){background-color:var(--on-accent-lighter)}:host([color=on-accent-lighter]){color:var(--on-accent-lighter)}:host([background=on-accent-light]){background-color:var(--on-accent-light)}:host([color=on-accent-light]){color:var(--on-accent-light)}:host([background=on-accent]){background-color:var(--on-accent)}:host([color=on-accent]){color:var(--on-accent)}:host([background=on-accent-dark]){background-color:var(--on-accent-dark)}:host([color=on-accent-dark]){color:var(--on-accent-dark)}:host([background=on-accent-darker]){background-color:var(--on-accent-darker)}:host([color=on-accent-darker]){color:var(--on-accent-darker)}:host([background=error-lighter]){background-color:var(--error-lighter)}:host([color=error-lighter]){color:var(--error-lighter)}:host([background=error-light]){background-color:var(--error-light)}:host([color=error-light]){color:var(--error-light)}:host([background=error]){background-color:var(--error)}:host([color=error]){color:var(--error)}:host([background=error-dark]){background-color:var(--error-dark)}:host([color=error-dark]){color:var(--error-dark)}:host([background=error-darker]){background-color:var(--error-darker)}:host([color=error-darker]){color:var(--error-darker)}:host([background=on-error-lighter]){background-color:var(--on-error-lighter)}:host([color=on-error-lighter]){color:var(--on-error-lighter)}:host([background=on-error-light]){background-color:var(--on-error-light)}:host([color=on-error-light]){color:var(--on-error-light)}:host([background=on-error]){background-color:var(--on-error)}:host([color=on-error]){color:var(--on-error)}:host([background=on-error-dark]){background-color:var(--on-error-dark)}:host([color=on-error-dark]){color:var(--on-error-dark)}:host([background=on-error-darker]){background-color:var(--on-error-darker)}:host([color=on-error-darker]){color:var(--on-error-darker)}:host([background=shade-lighter]){background-color:var(--shade-lighter)}:host([color=shade-lighter]){color:var(--shade-lighter)}:host([background=shade-light]){background-color:var(--shade-light)}:host([color=shade-light]){color:var(--shade-light)}:host([background=shade]){background-color:var(--shade)}:host([color=shade]){color:var(--shade)}:host([background=shade-dark]){background-color:var(--shade-dark)}:host([color=shade-dark]){color:var(--shade-dark)}:host([background=shade-darker]){background-color:var(--shade-darker)}:host([color=shade-darker]){color:var(--shade-darker)}:host([background=on-shade-lighter]){background-color:var(--on-shade-lighter)}:host([color=on-shade-lighter]){color:var(--on-shade-lighter)}:host([background=on-shade-light]){background-color:var(--on-shade-light)}:host([color=on-shade-light]){color:var(--on-shade-light)}:host([background=on-shade]){background-color:var(--on-shade)}:host([color=on-shade]){color:var(--on-shade)}:host([background=on-shade-dark]){background-color:var(--on-shade-dark)}:host([color=on-shade-dark]){color:var(--on-shade-dark)}:host([background=on-shade-darker]){background-color:var(--on-shade-darker)}:host([color=on-shade-darker]){color:var(--on-shade-darker)}:host([background=foreground]){background-color:var(--foreground)}:host([color=foreground]){color:var(--foreground)}:host([background=background]){background-color:var(--background)}:host([color=background]){color:var(--background)}:host([direction=column]){flex-direction:column}:host([direction=row-reverse]){flex-direction:row-reverse}:host([direction=column-reverse]){flex-direction:column-reverse}:host([text=center]){text-align:center}:host([text=justify]){text-align:justify}:host([text=left]){text-align:left}:host([text=right]){text-align:right}:host([weight=\"100\"]){font-weight:100}:host([weight=\"200\"]){font-weight:200}:host([weight=\"300\"]){font-weight:300}:host([weight=\"400\"]){font-weight:400}:host([weight=\"500\"]){font-weight:500}:host([weight=\"600\"]){font-weight:600}:host([weight=\"700\"]){font-weight:700}:host([weight=\"800\"]){font-weight:800}:host([weight=\"900\"]){font-weight:900}:host([weight=lighter]){font-weight:lighter}:host([weight=bold]){font-weight:700}:host([weight=bolder]){font-weight:bolder}:host([direction=row]){flex-direction:row}:host([direction=row-reverse]){flex-direction:row}:host([elevation=xsmall]){box-shadow:var(--box-elevation,var(--elevation-1,0 1px 2px var(--shadow)))}:host([elevation=small]){box-shadow:var(--box-elevation,var(--elevation-2,0 2px 4px var(--shadow)))}:host([elevation=medium]){box-shadow:var(--box-elevation,var(--elevation-3,0 4px 8px var(--shadow)))}:host([elevation=large]){box-shadow:var(--box-elevation,var(--elevation-4,0 8px 16px var(--shadow)))}:host([elevation=xlarge]){box-shadow:var(--box-elevation,var(--elevation-5,0 12px 24px var(--shadow)))}:host([fill=horizontal]){width:100%}:host([fill=vertical]){height:100%}:host([fill=true]){height:100%;width:100%}:host([flex=grow]){flex:1 0}:host([flex=shrink]){flex:0 1}:host([flex=true]){flex:1 1}:host([flex=false]){flex:0 0}:host([gap=xsmall]) ::slotted(*),:host([gap=xsmall][direction=column]) ::slotted(*){margin:var(--spacing-xs,.25rem) 0}:host([gap=xsmall][direction=row]) ::slotted(*){margin:0 var(--spacing-xs,.25rem)}:host([margin=xsmall]){margin:var(--box-margin,var(--spacing-xs,.25rem))}:host([margin=\"xsmall auto\"]){margin:var(--box-margin,var(--spacing-xs,.25rem)) auto}:host([margin=\"auto xsmall\"]){margin:auto var(--box-margin,var(--spacing-xs,.25rem))}:host([padding=xsmall]){padding:var(--box-padding,var(--spacing-xs,.25rem))}:host([gap=small]) ::slotted(*),:host([gap=small][direction=column]) ::slotted(*){margin:var(--spacing-s,.5rem) 0}:host([gap=small][direction=row]) ::slotted(*){margin:0 var(--spacing-s,.5rem)}:host([margin=small]){margin:var(--box-margin,var(--spacing-s,.5rem))}:host([margin=\"small auto\"]){margin:var(--box-margin,var(--spacing-s,.5rem)) auto}:host([margin=\"auto small\"]){margin:auto var(--box-margin,var(--spacing-s,.5rem))}:host([padding=small]){padding:var(--box-padding,var(--spacing-s,.5rem))}:host([gap=medium]) ::slotted(*),:host([gap=medium][direction=column]) ::slotted(*){margin:var(--spacing-m,1rem) 0}:host([gap=medium][direction=row]) ::slotted(*){margin:0 var(--spacing-m,1rem)}:host([margin=medium]){margin:var(--box-margin,var(--spacing-m,1rem))}:host([margin=\"medium auto\"]){margin:var(--box-margin,var(--spacing-m,1rem)) auto}:host([margin=\"auto medium\"]){margin:auto var(--box-margin,var(--spacing-m,1rem))}:host([padding=medium]){padding:var(--box-padding,var(--spacing-m,1rem))}:host([gap=large]) ::slotted(*),:host([gap=large][direction=column]) ::slotted(*){margin:var(--spacing-l,1.25rem) 0}:host([gap=large][direction=row]) ::slotted(*){margin:0 var(--spacing-l,1.25rem)}:host([margin=large]){margin:var(--box-margin,var(--spacing-l,1.25rem))}:host([margin=\"large auto\"]){margin:var(--box-margin,var(--spacing-l,1.25rem)) auto}:host([margin=\"auto large\"]){margin:auto var(--box-margin,var(--spacing-l,1.25rem))}:host([padding=large]){padding:var(--box-padding,var(--spacing-l,1.25rem))}:host([gap=xlarge]) ::slotted(*),:host([gap=xlarge][direction=column]) ::slotted(*){margin:var(--spacing-xl,2rem) 0}:host([gap=xlarge][direction=row]) ::slotted(*){margin:0 var(--spacing-xl,2rem)}:host([margin=xlarge]){margin:var(--box-margin,var(--spacing-xl,2rem))}:host([margin=\"xlarge auto\"]){margin:var(--box-margin,var(--spacing-xl,2rem)) auto}:host([margin=\"auto xlarge\"]){margin:auto var(--box-margin,var(--spacing-xl,2rem))}:host([padding=xlarge]){padding:var(--box-padding,var(--spacing-xl,2rem))}:host([font=xsmall]),:host([size=xsmall]){font-size:var(--box-font-size,var(--font-size-xs,.625rem))}:host([font=small]),:host([size=small]){font-size:var(--box-font-size,var(--font-size-s,.875rem))}:host([font=medium]),:host([size=medium]){font-size:var(--box-font-size,var(--font-size-m,1rem))}:host([font=large]),:host([size=large]){font-size:var(--box-font-size,var(--font-size-l,1.25rem))}:host([font=xlarge]),:host([size=xlarge]){font-size:var(--box-font-size,var(--font-size-xl,1.5rem))}:host([font=xxlarge]),:host([size=xxlarge]){font-size:var(--box-font-size,var(--font-size-xxl,2.25rem))}:host([justify=start]){justify-content:flex-start}:host([justify=end]){justify-content:flex-end}:host([justify=stretch]){justify-content:stretch}:host([justify=baseline]){justify-content:baseline}:host([justify=center]){justify-content:center}:host([justify=around]){justify-content:space-around}:host([justify=between]){justify-content:space-between}:host([justify=evenly]){justify-content:space-evenly}:host([overflow=auto]){overflow:auto}:host([overflow=hidden]){overflow:hidden}:host([overflow=scroll]){overflow:scroll}:host([overflow=visible]){overflow:visible}:host([radius=none]){border-radius:var(--box-border-radius,0)}:host([radius=small]){border-radius:var(--box-border-radius,var(--border-radius-small,.125rem))}:host([radius=medium]){border-radius:var(--box-border-radius,var(--border-radius-medium,.25rem))}:host([radius=large]){border-radius:var(--box-border-radius,var(--border-radius-large,.5rem))}:host([radius=xlarge]){border-radius:var(--box-border-radius,var(--border-radius-x-large,1rem))}:host([radius=circle]){border-radius:var(--box-border-radius,var(--border-radius-circle,50%))}:host([radius=pill]){border-radius:var(--box-border-radius,var(--border-radius-pill,9999px))}:host([max-width=xxsmall]){max-width:var(--box-max-width,var(--size-xxs,2rem))}:host([width=xxsmall]){width:var(--box-width,var(--size-xxs,2rem))}:host([max-height=xxsmall]){max-height:var(--box-max-height,var(--size-xxs,2rem))}:host([height=xxsmall]){height:var(--box-height,var(--size-xxs,2rem))}:host([max-width=xsmall]){max-width:var(--box-max-width,var(--size-xs,4rem))}:host([width=xsmall]){width:var(--box-width,var(--size-xs,4rem))}:host([max-height=xsmall]){max-height:var(--box-max-height,var(--size-xs,4rem))}:host([height=xsmall]){height:var(--box-height,var(--size-xs,4rem))}:host([max-width=small]){max-width:var(--box-max-width,var(--size-s,8rem))}:host([width=small]){width:var(--box-width,var(--size-s,8rem))}:host([max-height=small]){max-height:var(--box-max-height,var(--size-s,8rem))}:host([height=small]){height:var(--box-height,var(--size-s,8rem))}:host([max-width=medium]){max-width:var(--box-max-width,var(--size-m,16rem))}:host([width=medium]){width:var(--box-width,var(--size-m,16rem))}:host([max-height=medium]){max-height:var(--box-max-height,var(--size-m,16rem))}:host([height=medium]){height:var(--box-height,var(--size-m,16rem))}:host([max-width=large]){max-width:var(--box-max-width,var(--size-l,32rem))}:host([width=large]){width:var(--box-width,var(--size-l,32rem))}:host([max-height=large]){max-height:var(--box-max-height,var(--size-l,32rem))}:host([height=large]){height:var(--box-height,var(--size-l,32rem))}:host([max-width=xlarge]){max-width:var(--box-max-width,var(--size-xl,48rem))}:host([width=xlarge]){width:var(--box-width,var(--size-xl,48rem))}:host([max-height=xlarge]){max-height:var(--box-max-height,var(--size-xl,48rem))}:host([height=xlarge]){height:var(--box-height,var(--size-xl,48rem))}:host([max-width=xxlarge]){max-width:var(--box-max-width,var(--size-xxl,64rem))}:host([width=xxlarge]){width:var(--box-width,var(--size-xxl,64rem))}:host([max-height=xxlarge]){max-height:var(--box-max-height,var(--size-xxl,64rem))}:host([height=xxlarge]){height:var(--box-height,var(--size-xxl,64rem))}:host([wrap=true]){flex-wrap:wrap}:host([wrap=reverse]){flex-wrap:wrap-reverse}";
+
+export { css_248z as default, stylesheet };

package/box/focusable-box.d.ts

@@ -0,0 +1,13 @@
+import { TkBox } from "./box";
+declare class TkFocusableBox extends TkBox {
+    /**
+     * Element random id
+     */
+    protected _id: string;
+    /**
+     * disabled atribute
+     */
+    disabled: boolean;
+    updated(props: any): void;
+}
+export { TkFocusableBox };

package/box/focusable-box.js

@@ -0,0 +1,30 @@
+import { __decorate } from 'tslib';
+import { property } from 'lit/decorators.js';
+import { uniqueID } from '../utils/unique.js';
+import { TkBox } from './box.js';
+
+class TkFocusableBox extends TkBox {
+    constructor() {
+        super(...arguments);
+        /**
+         * Element random id
+         */
+        this._id = uniqueID();
+        /**
+         * disabled atribute
+         */
+        this.disabled = false;
+    }
+    updated(props) {
+        this.tabIndex = this.disabled ? -1 : 0;
+        super.updated(props);
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], TkFocusableBox.prototype, "_id", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkFocusableBox.prototype, "disabled", void 0);
+
+export { TkFocusableBox };

package/box/index.d.ts

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

package/box/index.js

@@ -0,0 +1 @@
+export { TkBox } from './box.js';

package/button/button.d.ts

@@ -0,0 +1,39 @@
+import { TkBox } from "../box/index";
+/**
+ * A button web component
+ *
+ * @cssprop --tk-badge-color - Color of widget
+ * @cssprop [--tk-badge-color=--primary]
+ * @cssprop --tk-badge-text-color - Text color of widget to --on-primary-color
+ *
+ * @attr {Boolean} accent - accent colors
+ * @attr {Boolean} disabled - Disable this element
+ * @attr {Boolean} inverted - color and text-color are inverted
+ * @attr {Boolean} outlined - outlined
+ * @attr {Boolean} pill - rounded corner
+ * @attr {Boolean} ripple - display ripple when active
+ * @attr {Boolean} small - mini button
+ */
+declare class TkButton extends TkBox {
+    static get styles(): import("lit").CSSResult[];
+    private _id;
+    href: string | null;
+    target: "_blank" | "_parent" | "_self" | "_top";
+    type: "submit" | "reset" | "button";
+    disabled: boolean;
+    protected $ahref: HTMLAnchorElement;
+    protected $button: HTMLButtonElement;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(props: any): void;
+    protected onKeyDown(e: KeyboardEvent): void;
+    firstUpdated(): void;
+    protected handleClick(e: Event): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-button": TkButton;
+    }
+}
+export { TkButton };