tinkiet 0.7.6 → 0.8.2

package/switch/switch.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from "lit";
+declare class TkSwitch 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-switch": TkSwitch;
+    }
+}
+export { TkSwitch };

package/switch/switch.js

@@ -0,0 +1,99 @@
+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 './switch.scss.js';
+
+let TkSwitch = class TkSwitch 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">
+				<span class="switch">
+					<span id="knob"></span>
+				</span>
+				<span class="label"><slot></slot></span>
+			</tk-box>
+			<input
+				id=${this._id}
+				slot="none"
+				style="display: none;"
+				type="radio"
+				?checked="${this.checked}"
+				?required="${this.required}"
+				?disabled="${this.disabled}"
+				?readonly="${this.readonly}"
+				value="${ifDefined(this.value)}"
+				name="${ifDefined(this.name)}"
+				aria-hidden="true"
+				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 })));
+    }
+};
+TkSwitch.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+__decorate([
+    property({ attribute: true, type: String })
+], TkSwitch.prototype, "name", void 0);
+__decorate([
+    property({ attribute: true, type: Boolean, reflect: true })
+], TkSwitch.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkSwitch.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkSwitch.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkSwitch.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TkSwitch.prototype, "value", void 0);
+__decorate([
+    query("input")
+], TkSwitch.prototype, "$input", void 0);
+TkSwitch = __decorate([
+    customElement("tk-switch")
+], TkSwitch);
+
+export { TkSwitch };

package/switch/switch.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{--_switch-bg:var(--switch-bg,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_switch-color:var(--switch-color,var(--background,#f7f7f7))}:host .switch{align-items:center;background:var(--_switch-bg);border-radius:var(--switch-border-radius,.75rem);color:var(--_switch-color);display:inline-flex;height:var(--switch-height,.875rem);outline:none;position:relative;transition:var(--switch-transition,background 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(--switch-width,2.125rem)}:host .switch #knob{background:currentColor;border-radius:var(--switch-knob-border-radius,100%);box-shadow:var(--switch-knob-elevation,var(--elevation-3,0 4px 8px var(--shadow)));height:var(--switch-knob-size,1.25rem);position:absolute;transition:var(--switch-knob-transition,background 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(--switch-knob-size,1.25rem)}:host .label{font-size:1.1em;margin-left:10px}:host(:not([disabled])){cursor:pointer}:host([checked]){--_switch-bg:var(--switch-bg-checked,var(--primary-lighter,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*1.3))));--_switch-color:var(--switch-color-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([checked]) .switch #knob{transform:translateX(calc(var(--switch-width, 2.125rem) - 100%))}:host(:focus),:host(:hover){will-change:background-color}:host([disabled]){--_switch-bg:var(--switch-bg-disabled,hsl(var(--shade-200,var(--shade-hue,200),var(--shade-saturation,4%),var(--shade-lightness,85%))));--_switch-color:var(\n  \t--switch-color-disabled,hsl(var(--shade-300,var(--shade-hue,200),var(--shade-saturation,4%),var(--shade-lightness,75%)))\n  );pointer-events:none}:host([disabled][checked]){--_switch-bg:var(\n  \t--switch-bg-disabled-checked,hsla(var(--primary-400,var(--primary-hue,224),var(--primary-saturation,42%),var(--primary-lightness,52%)),0.1)\n  );--_switch-color:var(\n  \t--switch-color-disabled-checked,hsla(var(--primary-400,var(--primary-hue,224),var(--primary-saturation,42%),var(--primary-lightness,52%)),0.4)\n  )}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_switch-bg:var(--switch-bg,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_switch-color:var(--switch-color,var(--background,#f7f7f7))}:host .switch{align-items:center;background:var(--_switch-bg);border-radius:var(--switch-border-radius,.75rem);color:var(--_switch-color);display:inline-flex;height:var(--switch-height,.875rem);outline:none;position:relative;transition:var(--switch-transition,background 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(--switch-width,2.125rem)}:host .switch #knob{background:currentColor;border-radius:var(--switch-knob-border-radius,100%);box-shadow:var(--switch-knob-elevation,var(--elevation-3,0 4px 8px var(--shadow)));height:var(--switch-knob-size,1.25rem);position:absolute;transition:var(--switch-knob-transition,background 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(--switch-knob-size,1.25rem)}:host .label{font-size:1.1em;margin-left:10px}:host(:not([disabled])){cursor:pointer}:host([checked]){--_switch-bg:var(--switch-bg-checked,var(--primary-lighter,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*1.3))));--_switch-color:var(--switch-color-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([checked]) .switch #knob{transform:translateX(calc(var(--switch-width, 2.125rem) - 100%))}:host(:focus),:host(:hover){will-change:background-color}:host([disabled]){--_switch-bg:var(--switch-bg-disabled,hsl(var(--shade-200,var(--shade-hue,200),var(--shade-saturation,4%),var(--shade-lightness,85%))));--_switch-color:var(\n  \t--switch-color-disabled,hsl(var(--shade-300,var(--shade-hue,200),var(--shade-saturation,4%),var(--shade-lightness,75%)))\n  );pointer-events:none}:host([disabled][checked]){--_switch-bg:var(\n  \t--switch-bg-disabled-checked,hsla(var(--primary-400,var(--primary-hue,224),var(--primary-saturation,42%),var(--primary-lightness,52%)),0.1)\n  );--_switch-color:var(\n  \t--switch-color-disabled-checked,hsla(var(--primary-400,var(--primary-hue,224),var(--primary-saturation,42%),var(--primary-lightness,52%)),0.4)\n  )}";
+
+export { css_248z as default, stylesheet };

package/tab-group/index.d.ts

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

package/tab-group/index.js

@@ -0,0 +1 @@
+export { TkTabGroup } from './tab-group.js';

package/tab-group/tab-group.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from "lit";
+declare class TkTabGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    circle: boolean;
+    observe: string;
+    selected: string;
+    private $underline;
+    private $circle;
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
+    firstUpdated(): void;
+    updated(props: any): void;
+    protected clickOnTab(tab: HTMLElement): void;
+    protected updateUnderline(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-tab-group": TkTabGroup;
+    }
+}
+export { TkTabGroup };

package/tab-group/tab-group.js

@@ -0,0 +1,97 @@
+import { __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { property, query, customElement } from 'lit/decorators.js';
+import css_248z from './tab-group.scss.js';
+
+let TkTabGroup = class TkTabGroup extends LitElement {
+    render() {
+        return html `
+			<div class="tabs">
+				<slot @click=${(e) => this.clickOnTab(e.target)} @slotchange=${() => this.updateUnderline()}></slot>
+			</div>
+			${this.circle
+            ? html `
+						<div class="circle"></div>
+				  `
+            : html `
+						<div class="underline"></div>
+				  `}
+		`;
+    }
+    constructor() {
+        super();
+        this.circle = false;
+        this.observe = "";
+        this.selected = "";
+    }
+    firstUpdated() {
+        if (IntersectionObserver) {
+            const observer = new IntersectionObserver(this.updateUnderline.bind(this));
+            observer.observe(this);
+        }
+        else {
+            this.updateUnderline.bind(this);
+        }
+    }
+    updated(props) {
+        var _a, _b;
+        if (props.has("selected")) {
+            this.querySelectorAll("*").forEach(node => node.removeAttribute("selected"));
+            (_a = this.querySelector(`[tab="${this.selected}"]`)) === null || _a === void 0 ? void 0 : _a.setAttribute("selected", "");
+        }
+        if (props.has("observe")) {
+            (_b = this.querySelector(`[tab="${this.selected}"]`)) === null || _b === void 0 ? void 0 : _b.focus();
+            this.updateUnderline();
+        }
+    }
+    clickOnTab(tab) {
+        this.querySelectorAll("*").forEach(node => node.removeAttribute("selected"));
+        tab.setAttribute("selected", "");
+        this.updateUnderline();
+        this.dispatchEvent(new CustomEvent("change", { detail: tab.getAttribute("tab"), composed: true, bubbles: true }));
+    }
+    updateUnderline() {
+        const selected = this.querySelector("[selected]");
+        if (selected) {
+            setTimeout(() => {
+                if (this.circle) {
+                    this.$circle.style.transform = `translate(${selected.offsetLeft + selected.clientWidth / 2 - this.$circle.clientWidth / 2}px, -${this.$circle.clientWidth / 2}px)`;
+                }
+                else {
+                    this.$underline.style.width = selected.clientWidth + "px";
+                    this.$underline.style.transform = `translateX(${selected.offsetLeft}px)`;
+                }
+            });
+        }
+        // else {
+        // 	if (this.circle) {
+        // 		this.$circle.style.transform = `translate(-100px, -${this.$circle.clientWidth / 2}px)`;
+        // 	} else {
+        // 		this.$underline.style.width = "0";
+        // 	}
+        // }
+    }
+};
+TkTabGroup.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+__decorate([
+    property({ attribute: true, type: Boolean })
+], TkTabGroup.prototype, "circle", void 0);
+__decorate([
+    property({ attribute: true, type: String })
+], TkTabGroup.prototype, "observe", void 0);
+__decorate([
+    property({ attribute: true, type: String })
+], TkTabGroup.prototype, "selected", void 0);
+__decorate([
+    query(".underline")
+], TkTabGroup.prototype, "$underline", void 0);
+__decorate([
+    query(".circle")
+], TkTabGroup.prototype, "$circle", void 0);
+TkTabGroup = __decorate([
+    customElement("tk-tab-group")
+], TkTabGroup);
+
+export { TkTabGroup };

package/tab-group/tab-group.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(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));display:inline-block;overflow:hidden;overflow-x:scroll;position:relative}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}.tabs{display:flex}:host(:not([circle])) .tabs{border-bottom:2px solid var(--shade-lighter)}.underline{height:2px;margin-top:-2px;transition:transform .2s ease;width:0}.circle,.underline{background-color:var(--color)}.circle{border-radius:var(--border-radius-circle,50%);height:8px;transition:transform .3s ease;width:8px}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));display:inline-block;overflow:hidden;overflow-x:scroll;position:relative}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}.tabs{display:flex}:host(:not([circle])) .tabs{border-bottom:2px solid var(--shade-lighter)}.underline{height:2px;margin-top:-2px;transition:transform .2s ease;width:0}.circle,.underline{background-color:var(--color)}.circle{border-radius:var(--border-radius-circle,50%);height:8px;transition:transform .3s ease;width:8px}";
+
+export { css_248z as default, stylesheet };

package/tag/index.d.ts

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

package/tag/index.js

@@ -0,0 +1 @@
+export { TkTag } from './tag.js';

package/tag/tag.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from "lit";
+declare class TkTag extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-tag": TkTag;
+    }
+}
+export { TkTag };

package/tag/tag.js

@@ -0,0 +1,20 @@
+import { __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import css_248z from './tag.scss.js';
+
+let TkTag = class TkTag extends LitElement {
+    render() {
+        return html `
+			<div class="tag"><slot></slot></div>
+		`;
+    }
+};
+TkTag.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+TkTag = __decorate([
+    customElement("tk-tag")
+], TkTag);
+
+export { TkTag };

package/tag/tag.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(--primary);--text:var(--on-primary);background:var(--color);box-sizing:border-box;color:var(--text);display:flex;flex-grow:1;height:var(--navbar-height,48px);justify-content:space-between;padding:var(--navbar-padding,var(--spacing-s,.5rem));position:relative;transition:var(--nav-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));z-index:var(--navbar-z-index,100)}:host([inverted]){--color:var(--on-primary);--text:var(--primary)}:host([fixed]){left:0;position:fixed;top:0;width:100%}:host([shadow]){box-shadow:var(--nav-elevation,var(--elevation-5,0 12px 24px var(--shadow)))}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){align-items:center;display:flex;height:100%}#title,::slotted([slot=title]){font-size:var(--nav-title-font-size,var(--font-size-l,1.25rem));font-weight:var(--nav-title-font-weight,var(--font-weight-regular,500));margin:var(--nav-title-margin,0 0 0 var(--spacing-l,1.25rem))}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary);--text:var(--on-primary);background:var(--color);box-sizing:border-box;color:var(--text);display:flex;flex-grow:1;height:var(--navbar-height,48px);justify-content:space-between;padding:var(--navbar-padding,var(--spacing-s,.5rem));position:relative;transition:var(--nav-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));z-index:var(--navbar-z-index,100)}:host([inverted]){--color:var(--on-primary);--text:var(--primary)}:host([fixed]){left:0;position:fixed;top:0;width:100%}:host([shadow]){box-shadow:var(--nav-elevation,var(--elevation-5,0 12px 24px var(--shadow)))}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){align-items:center;display:flex;height:100%}#title,::slotted([slot=title]){font-size:var(--nav-title-font-size,var(--font-size-l,1.25rem));font-weight:var(--nav-title-font-weight,var(--font-weight-regular,500));margin:var(--nav-title-margin,0 0 0 var(--spacing-l,1.25rem))}";
+
+export { css_248z as default, stylesheet };

package/textarea/index.d.ts

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

package/textarea/index.js

@@ -0,0 +1 @@
+export { TkTextarea } from './textarea.js';

package/textarea/textarea.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from "lit";
+declare class TkTextarea 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";
+    required: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    autocomplete: "on" | "off";
+    autocapitalize: "off" | "none" | "on" | "sentences" | "words" | "characters";
+    pattern: string;
+    initialValue: string;
+    label: string;
+    minLength: number;
+    maxLength: number;
+    rows: number;
+    private $input;
+    render(): import("lit-html").TemplateResult<1>;
+    private handleChange;
+    firstUpdated(): void;
+    private refreshAttributes;
+    focus(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-textarea": TkTextarea;
+    }
+}
+export { TkTextarea };

package/textarea/textarea.js

@@ -0,0 +1,133 @@
+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 { uniqueID } from '../utils/unique.js';
+import css_248z from './textarea.scss.js';
+
+let TkTextarea = class TkTextarea extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._id = uniqueID();
+        this.type = "text";
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.rows = 1;
+    }
+    set value(value) {
+        if (!this.$input) {
+            this.initialValue = value;
+        }
+        else {
+            this.$input.value = value;
+            this.refreshAttributes();
+        }
+    }
+    get value() {
+        return this.$input != null ? this.$input.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>
+					<textarea
+						id=${this._id}
+						@keydown=${this.handleChange.bind(this)}
+						@input=${this.handleChange.bind(this)}
+						@focusout=${this.handleChange.bind(this)}
+						?required="${this.required}"
+						?disabled="${this.disabled}"
+						?readonly="${this.readonly}"
+						aria-label="${ifDefined(this.label)}"
+						name="${ifDefined(this.name)}"
+						pattern="${ifDefined(this.pattern)}"
+						autocomplete="${ifDefined(this.autocomplete)}"
+						autocapitalize="${ifDefined(this.autocapitalize)}"
+						minlength="${ifDefined(this.minLength)}"
+						maxlength="${ifDefined(this.maxLength)}"
+						rows="${this.rows}"
+						tabindex="${this.disabled ? -1 : 0}"
+					></textarea>
+				</div>
+				<slot id="after" name="after"></slot>
+			</div>
+		`;
+    }
+    handleChange() {
+        this.refreshAttributes();
+    }
+    firstUpdated() {
+        var _a;
+        this.$input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("textarea");
+        this.appendChild(this.$input);
+        if (this.initialValue)
+            this.value = this.initialValue;
+    }
+    refreshAttributes() {
+        this.$input.value ? this.setAttribute("dirty", "") : this.removeAttribute("dirty");
+        this.$input.checkValidity() ? this.removeAttribute("invalid") : this.setAttribute("invalid", "");
+    }
+    focus() {
+        this.$input.focus();
+    }
+};
+TkTextarea.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+__decorate([
+    property({ type: String })
+], TkTextarea.prototype, "value", null);
+__decorate([
+    property({ attribute: true, type: String })
+], TkTextarea.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], TkTextarea.prototype, "list", void 0);
+__decorate([
+    property({ type: String })
+], TkTextarea.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkTextarea.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkTextarea.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkTextarea.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String })
+], TkTextarea.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: String })
+], TkTextarea.prototype, "autocapitalize", void 0);
+__decorate([
+    property({ type: String })
+], TkTextarea.prototype, "pattern", void 0);
+__decorate([
+    state()
+], TkTextarea.prototype, "initialValue", void 0);
+__decorate([
+    property({ type: String })
+], TkTextarea.prototype, "label", void 0);
+__decorate([
+    property({ type: Number })
+], TkTextarea.prototype, "minLength", void 0);
+__decorate([
+    property({ type: Number })
+], TkTextarea.prototype, "maxLength", void 0);
+__decorate([
+    property({ type: Number })
+], TkTextarea.prototype, "rows", void 0);
+__decorate([
+    eventOptions({ passive: true })
+], TkTextarea.prototype, "handleChange", null);
+TkTextarea = __decorate([
+    customElement("tk-textarea")
+], TkTextarea);
+
+export { TkTextarea };

package/textarea/textarea.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)}#wrapper ::slotted(textarea){font-family:inherit;height:var(--textarea-height,var(--_textarea-height));max-height:var(--textarea-max-height);min-height:var(--textarea-min-height,var(--textarea-height,var(--_textarea-height)));resize:var(--textarea-resize,none)}:host(:focus) ::slotted(textarea),:host(:hover) ::slotted(textarea){will-change:height}";
+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)}#wrapper ::slotted(textarea){font-family:inherit;height:var(--textarea-height,var(--_textarea-height));max-height:var(--textarea-max-height);min-height:var(--textarea-min-height,var(--textarea-height,var(--_textarea-height)));resize:var(--textarea-resize,none)}:host(:focus) ::slotted(textarea),:host(:hover) ::slotted(textarea){will-change:height}";
+
+export { css_248z as default, stylesheet };

package/textfield/index.d.ts

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

package/textfield/index.js

@@ -0,0 +1 @@
+export { TkTextfield } from './textfield.js';

package/textfield/textfield.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from "lit";
+declare class TkTextfield 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";
+    autocapitalize: "off" | "none" | "on" | "sentences" | "words" | "characters";
+    pattern: string;
+    initialValue: string;
+    label: string;
+    min: number;
+    max: number;
+    minLength: number;
+    maxLength: number;
+    private $input;
+    render(): import("lit-html").TemplateResult<1>;
+    private handleChange;
+    firstUpdated(): void;
+    private refreshAttributes;
+    focus(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-textfield": TkTextfield;
+    }
+}
+export { TkTextfield };