tinkiet 0.9.12 → 0.10.0

package/select/select.js

@@ -1,132 +0,0 @@
-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

@@ -1,4 +0,0 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;outline:none;transform:translateZ(0)}:host #container{align-items:center;background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface-variant));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));display:flex;font-size:var(--input-font-size,1rem);height:56px;overflow:hidden;padding:8px 16px;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))}:host #wrapper{flex-grow:1;position:relative}:host #label{color:hsl(var(--on-surface-variant));font-size:inherit;font-weight:400;line-height:64px;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([disabled]){opacity:.38;pointer-events:none}:host(:hover) #container{background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));font-size:var(--input-font-size,1rem)}:host(:focus-within) #container{background-color:hsla(var(--on-surface),.3);border-bottom:2px solid hsl(var(--primary));padding:8px 16px 7px}:host([outlined]) #container{background-color:initial;border:1px solid hsl(var(--outline));border-radius:4px}:host([outlined]:focus-within) #container{border:2px solid hsl(var(--primary));padding:7px 15px}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{color:hsl(var(--primary));font-size:var(--input-label-font-size,.75rem);top:0;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:hsl(var(--primary));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:16px}:host([invalid]){color:hsl(var(--error))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,hsl(var(--shadow)))}: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{display:block;outline:none;transform:translateZ(0)}:host #container{align-items:center;background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface-variant));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));display:flex;font-size:var(--input-font-size,1rem);height:56px;overflow:hidden;padding:8px 16px;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))}:host #wrapper{flex-grow:1;position:relative}:host #label{color:hsl(var(--on-surface-variant));font-size:inherit;font-weight:400;line-height:64px;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([disabled]){opacity:.38;pointer-events:none}:host(:hover) #container{background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));font-size:var(--input-font-size,1rem)}:host(:focus-within) #container{background-color:hsla(var(--on-surface),.3);border-bottom:2px solid hsl(var(--primary));padding:8px 16px 7px}:host([outlined]) #container{background-color:initial;border:1px solid hsl(var(--outline));border-radius:4px}:host([outlined]:focus-within) #container{border:2px solid hsl(var(--primary));padding:7px 15px}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{color:hsl(var(--primary));font-size:var(--input-label-font-size,.75rem);top:0;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:hsl(var(--primary));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:16px}:host([invalid]){color:hsl(var(--error))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,hsl(var(--shadow)))}: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/slider.js

@@ -1,135 +0,0 @@
-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

@@ -1,4 +0,0 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;outline:none;transform:translateZ(0)}:host #container{align-items:center;background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface-variant));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));display:flex;font-size:var(--input-font-size,1rem);height:56px;overflow:hidden;padding:8px 16px;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))}:host #wrapper{flex-grow:1;position:relative}:host #label{color:hsl(var(--on-surface-variant));font-size:inherit;font-weight:400;line-height:64px;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([disabled]){opacity:.38;pointer-events:none}:host(:hover) #container{background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));font-size:var(--input-font-size,1rem)}:host(:focus-within) #container{background-color:hsla(var(--on-surface),.3);border-bottom:2px solid hsl(var(--primary));padding:8px 16px 7px}:host([outlined]) #container{background-color:initial;border:1px solid hsl(var(--outline));border-radius:4px}:host([outlined]:focus-within) #container{border:2px solid hsl(var(--primary));padding:7px 15px}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{color:hsl(var(--primary));font-size:var(--input-label-font-size,.75rem);top:0;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:hsl(var(--primary));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:16px}:host([invalid]){color:hsl(var(--error))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,hsl(var(--shadow)))}: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,hsl(var(--shadow)));--_slider-track-bg-active:var(--slider-bg-active,hsl(var(--primary)));--_slider-thumb-bg:var(--slider-thumb-bg,hsl(var(--on-primary)));--_slider-thumb-border:var(--slider-thumb-bg,hsl(var(--primary)))}:host([disabled]){--_slider-track-bg:var(--slider-bg-disabled,hsl(var(--shadow)));--_slider-track-bg-active:var(--slider-bg-active-disabled,hsl(var(--shadow)));--_slider-thumb-bg:var(--slider-thumb-bg-disabled,hsl(var(--shadow)));--_slider-thumb-border:var(--slider-thumb-bg,hsl(var(--shadow)))}: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,hsl(var(--on-primary)));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,hsl(var(--on-primary)));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,hsl(var(--primary)));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{display:block;outline:none;transform:translateZ(0)}:host #container{align-items:center;background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface-variant));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));display:flex;font-size:var(--input-font-size,1rem);height:56px;overflow:hidden;padding:8px 16px;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))}:host #wrapper{flex-grow:1;position:relative}:host #label{color:hsl(var(--on-surface-variant));font-size:inherit;font-weight:400;line-height:64px;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([disabled]){opacity:.38;pointer-events:none}:host(:hover) #container{background-color:hsla(var(--surface-container-highest),.5);border-bottom:1px solid hsl(var(--on-surface));border-radius:4px 4px 0 0;color:hsl(var(--on-surface));font-size:var(--input-font-size,1rem)}:host(:focus-within) #container{background-color:hsla(var(--on-surface),.3);border-bottom:2px solid hsl(var(--primary));padding:8px 16px 7px}:host([outlined]) #container{background-color:initial;border:1px solid hsl(var(--outline));border-radius:4px}:host([outlined]:focus-within) #container{border:2px solid hsl(var(--primary));padding:7px 15px}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{color:hsl(var(--primary));font-size:var(--input-label-font-size,.75rem);top:0;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:hsl(var(--primary));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:16px}:host([invalid]){color:hsl(var(--error))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,hsl(var(--shadow)))}: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,hsl(var(--shadow)));--_slider-track-bg-active:var(--slider-bg-active,hsl(var(--primary)));--_slider-thumb-bg:var(--slider-thumb-bg,hsl(var(--on-primary)));--_slider-thumb-border:var(--slider-thumb-bg,hsl(var(--primary)))}:host([disabled]){--_slider-track-bg:var(--slider-bg-disabled,hsl(var(--shadow)));--_slider-track-bg-active:var(--slider-bg-active-disabled,hsl(var(--shadow)));--_slider-thumb-bg:var(--slider-thumb-bg-disabled,hsl(var(--shadow)));--_slider-thumb-border:var(--slider-thumb-bg,hsl(var(--shadow)))}: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,hsl(var(--on-primary)));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,hsl(var(--on-primary)));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,hsl(var(--primary)));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/switch.js

@@ -1,101 +0,0 @@
-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">
-					<tk-box ripple tabindex="${this.disabled ? -1 : 0}" class="state">
-						<span id="knob"></span>
-					</tk-box>
-				</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

@@ -1,4 +0,0 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host .switch{align-items:center;background:hsl(var(--surface-container-highest));border:2px solid hsl(var(--outline));border-radius:9999px;display:inline-flex;flex-shrink:0;height:32px;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:52px;will-change:background-color}:host .switch .state{align-items:center;border-radius:100%;display:flex;height:40px;justify-content:center;margin-left:-5px;outline:none;overflow:hidden;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:40px;will-change:background-color,transform}:host .switch .state #knob{background:hsl(var(--outline));border-radius:100%;height:16px;position:absolute;width:16px;will-change:background-color}:host .label{margin-left:10px}:host(:not([disabled])){cursor:pointer}:host([checked]) .switch{background:hsl(var(--primary));border:none}:host([checked]) .switch .state{transform:translateX(18px)}:host([checked]) .switch .state #knob{background:hsl(var(--on-primary));height:24px;width:24px}:host(:focus) .switch .state,:host(:hover) .switch .state{background:hsla(var(--surface-container-highest),.8)}:host([checked]:focus) .switch .state,:host([checked]:hover) .switch .state{background:hsla(var(--primary),.3)}:host([disabled]){pointer-events:none}:host([disabled]) .switch{background:hsla(var(--surface-container-highest),.12);border-color:hsla(var(--on-surface),.12)}:host([disabled]) .switch .state #knob{background:hsla(var(--on-surface),.38)}:host([disabled]) .label{opacity:.6}:host([disabled][checked]) .switch{background:hsla(var(--on-surface),.12);border:none}:host([disabled][checked]) .switch .state #knob{background:hsla(var(--surface),1)}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host .switch{align-items:center;background:hsl(var(--surface-container-highest));border:2px solid hsl(var(--outline));border-radius:9999px;display:inline-flex;flex-shrink:0;height:32px;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:52px;will-change:background-color}:host .switch .state{align-items:center;border-radius:100%;display:flex;height:40px;justify-content:center;margin-left:-5px;outline:none;overflow:hidden;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:40px;will-change:background-color,transform}:host .switch .state #knob{background:hsl(var(--outline));border-radius:100%;height:16px;position:absolute;width:16px;will-change:background-color}:host .label{margin-left:10px}:host(:not([disabled])){cursor:pointer}:host([checked]) .switch{background:hsl(var(--primary));border:none}:host([checked]) .switch .state{transform:translateX(18px)}:host([checked]) .switch .state #knob{background:hsl(var(--on-primary));height:24px;width:24px}:host(:focus) .switch .state,:host(:hover) .switch .state{background:hsla(var(--surface-container-highest),.8)}:host([checked]:focus) .switch .state,:host([checked]:hover) .switch .state{background:hsla(var(--primary),.3)}:host([disabled]){pointer-events:none}:host([disabled]) .switch{background:hsla(var(--surface-container-highest),.12);border-color:hsla(var(--on-surface),.12)}:host([disabled]) .switch .state #knob{background:hsla(var(--on-surface),.38)}:host([disabled]) .label{opacity:.6}:host([disabled][checked]) .switch{background:hsla(var(--on-surface),.12);border:none}:host([disabled][checked]) .switch .state #knob{background:hsla(var(--surface),1)}";
-
-export { css_248z as default, stylesheet };

package/tab-group/tab-group.js

@@ -1,79 +0,0 @@
-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>
-			<div class="underline"></div>
-		`;
-    }
-    constructor() {
-        super();
-        this.secondary = 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.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(() => {
-                this.$underline.style.width = selected.clientWidth + "px";
-                this.$underline.style.transform = `translateX(${selected.offsetLeft}px)`;
-            });
-        }
-    }
-};
-TkTabGroup.styles = css `
-		${unsafeCSS(css_248z)}
-	`;
-__decorate([
-    property({ attribute: true, type: Boolean })
-], TkTabGroup.prototype, "secondary", 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

@@ -1,4 +0,0 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:inline-block;overflow-x:hidden;position:relative}:host([overflow]){overflow-x:auto}.tabs{display:flex}:host(:not([circle])) .tabs{border-bottom:2px solid hsl(var(--primary-container))}.underline{height:2px;margin-top:-2px;transition:transform .2s ease;width:0;will-change:transform}.circle,.underline{background-color:hsl(var(--primary))}.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{display:inline-block;overflow-x:hidden;position:relative}:host([overflow]){overflow-x:auto}.tabs{display:flex}:host(:not([circle])) .tabs{border-bottom:2px solid hsl(var(--primary-container))}.underline{height:2px;margin-top:-2px;transition:transform .2s ease;width:0;will-change:transform}.circle,.underline{background-color:hsl(var(--primary))}.circle{border-radius:var(--border-radius-circle,50%);height:8px;transition:transform .3s ease;width:8px}";
-
-export { css_248z as default, stylesheet };

package/textarea/textarea.js

@@ -1,133 +0,0 @@
-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, reflect: true })
-], 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 };