tinkiet 0.9.14 → 0.10.0

package/checkbox/index.js

@@ -1 +1,450 @@
-export { TkCheckbox } from './checkbox.js';
+import * as __WEBPACK_EXTERNAL_MODULE_lit__ from "lit";
+import * as __WEBPACK_EXTERNAL_MODULE_lit_directives_if_defined_js_76c6050d__ from "lit/directives/if-defined.js";
+import * as __WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__ from "lit/decorators.js";
+/******/ var __webpack_modules__ = ({
+
+/***/ 1702:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  T: () => (/* binding */ TkCheckbox)
+});
+
+// EXTERNAL MODULE: external "lit"
+var external_lit_ = __webpack_require__(2927);
+// EXTERNAL MODULE: external "lit/decorators.js"
+var decorators_js_ = __webpack_require__(8899);
+// EXTERNAL MODULE: external "lit/directives/if-defined.js"
+var if_defined_js_ = __webpack_require__(3517);
+// EXTERNAL MODULE: ./tinkiet/box/index.ts
+var box = __webpack_require__(3433);
+// EXTERNAL MODULE: ./tinkiet/utils/unique.ts
+var unique = __webpack_require__(3770);
+;// ./tinkiet/checkbox/checkbox.scss
+/* harmony default export */ const checkbox_checkbox = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{display:inline-flex}:host .state{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:100%;outline:none;overflow:hidden}:host .checkbox{width:18px;height:18px;border:solid 2px hsl(var(--primary));transition:var(--checkbox-transition, background var(--transition-duration-fast, 0.12s) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)), border-color var(--transition-duration-fast, 0.12s) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)));position:relative;display:inline-flex;align-items:center;justify-content:center;outline:none;-webkit-user-select:none;user-select:none;margin:0 5px}:host .label{user-select:none}:host([checked]) .checkbox{background-color:hsl(var(--primary))}:host([checked]:not([indeterminate])) #checkmark-path,:host([indeterminate]) #indeterminate-path{stroke-dashoffset:0}:host(:focus) #checkmark-path,:host(:hover) #checkmark-path{will-change:stroke-dashoffset}#checkmark{padding:1px}#checkmark-path,#indeterminate-path{stroke-width:5px;stroke:hsl(var(--on-primary));stroke-dasharray:30;stroke-dashoffset:30;transition:var(--checkbox-checkmark-transition, stroke-dashoffset var(--transition-duration-medium, 0.18s) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)))}#checkmark-path{transition-delay:var(--checkbox-checkmark-path-delay, 50ms)}:host(:not([disabled])){cursor:pointer}:host(:focus) .state,:host(:hover) .state{background:hsla(var(--on-surface), 0.3)}:host([checked]:focus) .state,:host([checked]:hover) .state{background:hsla(var(--primary), 0.3)}:host([checked]:focus) .checked,:host([checked]:hover) .checked{background-color:hsl(var(--primary))}:host([disabled]){pointer-events:none}:host([disabled]) .checkbox{border-color:hsla(var(--on-surface), 0);background-color:hsla(var(--on-surface), 0.3)}:host([disabled]) #checkmark-path,:host([disabled]) #indeterminate-path{stroke:hsla(var(--on-surface-variant, 0.3))}:host([disabled]) .label{opacity:.6}");
+;// ./tinkiet/checkbox/checkbox.ts
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+
+
+
+
+
+let TkCheckbox = class TkCheckbox extends external_lit_.LitElement {
+    constructor() {
+        super(...arguments);
+        this._id = (0,unique/* uniqueID */.z)();
+        this.checked = false;
+        this.disabled = false;
+    }
+    render() {
+        return (0,external_lit_.html) `
+			<tk-box direction="row" align-items="center">
+				<tk-box ripple tabindex="${this.disabled ? -1 : 0}" class="state">
+					<div class="checkbox">
+						<svg id="checkmark" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 24 24">
+							<path id="checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
+							<line id="indeterminate-path" fill="none" x1="0" y1="12.5" x2="24" y2="12.5" />
+						</svg>
+					</div>
+				</tk-box>
+				<span class="label"><slot></slot></span>
+			</tk-box>
+			<input
+				id=${this._id}
+				slot="none"
+				style="display: none;"
+				?checked=${this.checked}
+				type="checkbox"
+				name="${(0,if_defined_js_.ifDefined)(this.name)}"
+				value="${(0,if_defined_js_.ifDefined)(this.value)}"
+				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;
+        setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
+    }
+};
+TkCheckbox.styles = (0,external_lit_.css) `
+		${(0,external_lit_.unsafeCSS)(checkbox_checkbox)}
+	`;
+__decorate([
+    (0,decorators_js_.property)({ attribute: true, type: String })
+], TkCheckbox.prototype, "name", void 0);
+__decorate([
+    (0,decorators_js_.property)({ attribute: true, type: String, reflect: true })
+], TkCheckbox.prototype, "value", void 0);
+__decorate([
+    (0,decorators_js_.property)({ attribute: true, type: Boolean, reflect: true })
+], TkCheckbox.prototype, "checked", void 0);
+__decorate([
+    (0,decorators_js_.property)({ type: Boolean })
+], TkCheckbox.prototype, "disabled", void 0);
+__decorate([
+    (0,decorators_js_.query)("input")
+], TkCheckbox.prototype, "$input", void 0);
+TkCheckbox = __decorate([
+    (0,decorators_js_.customElement)("tk-checkbox")
+], TkCheckbox);
+
+
+
+/***/ }),
+
+/***/ 2788:
+/***/ ((__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) => {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  P: () => (/* binding */ TkBox)
+});
+
+// UNUSED EXPORTS: TkBox
+
+// EXTERNAL MODULE: external "lit"
+var external_lit_ = __webpack_require__(2927);
+// EXTERNAL MODULE: external "lit/decorators.js"
+var decorators_js_ = __webpack_require__(8899);
+;// ./tinkiet/box/box.scss
+/* harmony default export */ const box = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{display:flex;position:relative;flex-direction:column;box-sizing:border-box}:host([hidden]){display:none}.ripple{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none}.ripple span{position:absolute;border-radius:50%;background-color:hsla(var(--on-primary), 0.5)}: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]){background-color:hsl(var(--primary))}:host([color=primary]){color:hsl(var(--primary))}:host([background=on-primary]){background-color:hsl(var(--on-primary))}:host([color=on-primary]){color:hsl(var(--on-primary))}:host([background=secondary]){background-color:hsl(var(--secondary))}:host([color=secondary]){color:hsl(var(--secondary))}:host([background=on-secondary]){background-color:hsl(var(--on-secondary))}:host([color=on-secondary]){color:hsl(var(--on-secondary))}:host([background=tertiary]){background-color:hsl(var(--tertiary))}:host([color=tertiary]){color:hsl(var(--tertiary))}:host([background=on-tertiary]){background-color:hsl(var(--on-tertiary))}:host([color=on-tertiary]){color:hsl(var(--on-tertiary))}:host([background=neutral]){background-color:hsl(var(--neutral))}:host([color=neutral]){color:hsl(var(--neutral))}:host([background=on-neutral]){background-color:hsl(var(--on-neutral))}:host([color=on-neutral]){color:hsl(var(--on-neutral))}:host([background=neutral-variant]){background-color:hsl(var(--neutral-variant))}:host([color=neutral-variant]){color:hsl(var(--neutral-variant))}:host([background=on-neutral-variant]){background-color:hsl(var(--on-neutral-variant))}:host([color=on-neutral-variant]){color:hsl(var(--on-neutral-variant))}:host([background=error]){background-color:hsl(var(--error))}:host([color=error]){color:hsl(var(--error))}:host([background=on-error]){background-color:hsl(var(--on-error))}:host([color=on-error]){color:hsl(var(--on-error))}:host([background=primary-container]){background-color:hsl(var(--primary-container))}:host([color=primary-container]){color:hsl(var(--primary-container))}:host([background=on-primary-container]){background-color:hsl(var(--on-primary-container))}:host([color=on-primary-container]){color:hsl(var(--on-primary-container))}:host([background=secondary-container]){background-color:hsl(var(--secondary-container))}:host([color=secondary-container]){color:hsl(var(--secondary-container))}:host([background=on-secondary-container]){background-color:hsl(var(--on-secondary-container))}:host([color=on-secondary-container]){color:hsl(var(--on-secondary-container))}:host([background=tertiary-container]){background-color:hsl(var(--tertiary-container))}:host([color=tertiary-container]){color:hsl(var(--tertiary-container))}:host([background=on-tertiary-container]){background-color:hsl(var(--on-tertiary-container))}:host([color=on-tertiary-container]){color:hsl(var(--on-tertiary-container))}:host([background=neutral-container]){background-color:hsl(var(--neutral-container))}:host([color=neutral-container]){color:hsl(var(--neutral-container))}:host([background=on-neutral-container]){background-color:hsl(var(--on-neutral-container))}:host([color=on-neutral-container]){color:hsl(var(--on-neutral-container))}:host([background=neutral-variant-container]){background-color:hsl(var(--neutral-variant-container))}:host([color=neutral-variant-container]){color:hsl(var(--neutral-variant-container))}:host([background=on-neutral-variant-container]){background-color:hsl(var(--on-neutral-variant-container))}:host([color=on-neutral-variant-container]){color:hsl(var(--on-neutral-variant-container))}:host([background=error-container]){background-color:hsl(var(--error-container))}:host([color=error-container]){color:hsl(var(--error-container))}:host([background=on-error-container]){background-color:hsl(var(--on-error-container))}:host([color=on-error-container]){color:hsl(var(--on-error-container))}:host([background=primary-0]){background-color:hsl(var(--primary-0))}:host([color=primary-0]){color:hsl(var(--primary-0))}:host([background=surface]){background-color:hsl(var(--surface))}:host([color=surface]){color:hsl(var(--surface))}:host([background=on-surface]){background-color:hsl(var(--on-surface))}:host([color=on-surface]){color:hsl(var(--on-surface))}:host([background=surface-dim]){background-color:hsl(var(--surface-dim))}:host([color=surface-dim]){color:hsl(var(--surface-dim))}:host([background=surface-bright]){background-color:hsl(var(--surface-bright))}:host([color=surface-bright]){color:hsl(var(--surface-bright))}:host([background=surface-container-lowest]){background-color:hsl(var(--surface-container-lowest))}:host([color=surface-container-lowest]){color:hsl(var(--surface-container-lowest))}:host([background=surface-container-low]){background-color:hsl(var(--surface-container-low))}:host([color=surface-container-low]){color:hsl(var(--surface-container-low))}:host([background=surface-container]){background-color:hsl(var(--surface-container))}:host([color=surface-container]){color:hsl(var(--surface-container))}:host([background=surface-container-high]){background-color:hsl(var(--surface-container-high))}:host([color=surface-container-high]){color:hsl(var(--surface-container-high))}:host([background=surface-container-highest]){background-color:hsl(var(--surface-container-highest))}:host([color=surface-container-highest]){color:hsl(var(--surface-container-highest))}:host([background=surface-variant]){background-color:hsl(var(--surface-variant))}:host([color=surface-variant]){color:hsl(var(--surface-variant))}:host([background=on-surface-variant]){background-color:hsl(var(--on-surface-variant))}:host([color=on-surface-variant]){color:hsl(var(--on-surface-variant))}:host([background=outline]){background-color:hsl(var(--outline))}:host([color=outline]){color:hsl(var(--outline))}:host([background=outline-variant]){background-color:hsl(var(--outline-variant))}:host([color=outline-variant]){color:hsl(var(--outline-variant))}:host([background=inverse-surface]){background-color:hsl(var(--inverse-surface))}:host([color=inverse-surface]){color:hsl(var(--inverse-surface))}:host([background=inverse-on-surface]){background-color:hsl(var(--inverse-on-surface))}:host([color=inverse-on-surface]){color:hsl(var(--inverse-on-surface))}:host([background=background]){background-color:hsl(var(--background))}:host([color=background]){color:hsl(var(--background))}:host([background=on-background]){background-color:hsl(var(--on-background))}:host([color=on-background]){color:hsl(var(--on-background))}:host([background=shadow]){background-color:hsl(var(--shadow))}:host([color=shadow]){color:hsl(var(--shadow))}:host([background=primary-10]){background-color:hsl(var(--primary-10))}:host([color=primary-10]){color:hsl(var(--primary-10))}:host([background=primary-20]){background-color:hsl(var(--primary-20))}:host([color=primary-20]){color:hsl(var(--primary-20))}:host([background=primary-30]){background-color:hsl(var(--primary-30))}:host([color=primary-30]){color:hsl(var(--primary-30))}:host([background=primary-40]){background-color:hsl(var(--primary-40))}:host([color=primary-40]){color:hsl(var(--primary-40))}:host([background=primary-50]){background-color:hsl(var(--primary-50))}:host([color=primary-50]){color:hsl(var(--primary-50))}:host([background=primary-60]){background-color:hsl(var(--primary-60))}:host([color=primary-60]){color:hsl(var(--primary-60))}:host([background=primary-70]){background-color:hsl(var(--primary-70))}:host([color=primary-70]){color:hsl(var(--primary-70))}:host([background=primary-80]){background-color:hsl(var(--primary-80))}:host([color=primary-80]){color:hsl(var(--primary-80))}:host([background=primary-90]){background-color:hsl(var(--primary-90))}:host([color=primary-90]){color:hsl(var(--primary-90))}:host([background=primary-95]){background-color:hsl(var(--primary-95))}:host([color=primary-95]){color:hsl(var(--primary-95))}:host([background=primary-99]){background-color:hsl(var(--primary-99))}:host([color=primary-99]){color:hsl(var(--primary-99))}:host([background=primary-100]){background-color:hsl(var(--primary-100))}:host([color=primary-100]){color:hsl(var(--primary-100))}:host([background=secondary-0]){background-color:hsl(var(--secondary-0))}:host([color=secondary-0]){color:hsl(var(--secondary-0))}:host([background=secondary-10]){background-color:hsl(var(--secondary-10))}:host([color=secondary-10]){color:hsl(var(--secondary-10))}:host([background=secondary-20]){background-color:hsl(var(--secondary-20))}:host([color=secondary-20]){color:hsl(var(--secondary-20))}:host([background=secondary-30]){background-color:hsl(var(--secondary-30))}:host([color=secondary-30]){color:hsl(var(--secondary-30))}:host([background=secondary-40]){background-color:hsl(var(--secondary-40))}:host([color=secondary-40]){color:hsl(var(--secondary-40))}:host([background=secondary-50]){background-color:hsl(var(--secondary-50))}:host([color=secondary-50]){color:hsl(var(--secondary-50))}:host([background=secondary-60]){background-color:hsl(var(--secondary-60))}:host([color=secondary-60]){color:hsl(var(--secondary-60))}:host([background=secondary-70]){background-color:hsl(var(--secondary-70))}:host([color=secondary-70]){color:hsl(var(--secondary-70))}:host([background=secondary-80]){background-color:hsl(var(--secondary-80))}:host([color=secondary-80]){color:hsl(var(--secondary-80))}:host([background=secondary-90]){background-color:hsl(var(--secondary-90))}:host([color=secondary-90]){color:hsl(var(--secondary-90))}:host([background=secondary-100]){background-color:hsl(var(--secondary-100))}:host([color=secondary-100]){color:hsl(var(--secondary-100))}:host([background=tertiary-0]){background-color:hsl(var(--tertiary-0))}:host([color=tertiary-0]){color:hsl(var(--tertiary-0))}:host([background=tertiary-10]){background-color:hsl(var(--tertiary-10))}:host([color=tertiary-10]){color:hsl(var(--tertiary-10))}:host([background=tertiary-20]){background-color:hsl(var(--tertiary-20))}:host([color=tertiary-20]){color:hsl(var(--tertiary-20))}:host([background=tertiary-30]){background-color:hsl(var(--tertiary-30))}:host([color=tertiary-30]){color:hsl(var(--tertiary-30))}:host([background=tertiary-40]){background-color:hsl(var(--tertiary-40))}:host([color=tertiary-40]){color:hsl(var(--tertiary-40))}:host([background=tertiary-50]){background-color:hsl(var(--tertiary-50))}:host([color=tertiary-50]){color:hsl(var(--tertiary-50))}:host([background=tertiary-60]){background-color:hsl(var(--tertiary-60))}:host([color=tertiary-60]){color:hsl(var(--tertiary-60))}:host([background=tertiary-70]){background-color:hsl(var(--tertiary-70))}:host([color=tertiary-70]){color:hsl(var(--tertiary-70))}:host([background=tertiary-80]){background-color:hsl(var(--tertiary-80))}:host([color=tertiary-80]){color:hsl(var(--tertiary-80))}:host([background=tertiary-90]){background-color:hsl(var(--tertiary-90))}:host([color=tertiary-90]){color:hsl(var(--tertiary-90))}:host([background=tertiary-100]){background-color:hsl(var(--tertiary-100))}:host([color=tertiary-100]){color:hsl(var(--tertiary-100))}:host([background=neutral-0]){background-color:hsl(var(--neutral-0))}:host([color=neutral-0]){color:hsl(var(--neutral-0))}:host([background=neutral-10]){background-color:hsl(var(--neutral-10))}:host([color=neutral-10]){color:hsl(var(--neutral-10))}:host([background=neutral-20]){background-color:hsl(var(--neutral-20))}:host([color=neutral-20]){color:hsl(var(--neutral-20))}:host([background=neutral-30]){background-color:hsl(var(--neutral-30))}:host([color=neutral-30]){color:hsl(var(--neutral-30))}:host([background=neutral-40]){background-color:hsl(var(--neutral-40))}:host([color=neutral-40]){color:hsl(var(--neutral-40))}:host([background=neutral-50]){background-color:hsl(var(--neutral-50))}:host([color=neutral-50]){color:hsl(var(--neutral-50))}:host([background=neutral-60]){background-color:hsl(var(--neutral-60))}:host([color=neutral-60]){color:hsl(var(--neutral-60))}:host([background=neutral-70]){background-color:hsl(var(--neutral-70))}:host([color=neutral-70]){color:hsl(var(--neutral-70))}:host([background=neutral-80]){background-color:hsl(var(--neutral-80))}:host([color=neutral-80]){color:hsl(var(--neutral-80))}:host([background=neutral-90]){background-color:hsl(var(--neutral-90))}:host([color=neutral-90]){color:hsl(var(--neutral-90))}:host([background=neutral-100]){background-color:hsl(var(--neutral-100))}:host([color=neutral-100]){color:hsl(var(--neutral-100))}:host([background=error-0]){background-color:hsl(var(--error-0))}:host([color=error-0]){color:hsl(var(--error-0))}:host([background=error-10]){background-color:hsl(var(--error-10))}:host([color=error-10]){color:hsl(var(--error-10))}:host([background=error-20]){background-color:hsl(var(--error-20))}:host([color=error-20]){color:hsl(var(--error-20))}:host([background=error-30]){background-color:hsl(var(--error-30))}:host([color=error-30]){color:hsl(var(--error-30))}:host([background=error-40]){background-color:hsl(var(--error-40))}:host([color=error-40]){color:hsl(var(--error-40))}:host([background=error-50]){background-color:hsl(var(--error-50))}:host([color=error-50]){color:hsl(var(--error-50))}:host([background=error-60]){background-color:hsl(var(--error-60))}:host([color=error-60]){color:hsl(var(--error-60))}:host([background=error-70]){background-color:hsl(var(--error-70))}:host([color=error-70]){color:hsl(var(--error-70))}:host([background=error-80]){background-color:hsl(var(--error-80))}:host([color=error-80]){color:hsl(var(--error-80))}:host([background=error-90]){background-color:hsl(var(--error-90))}:host([color=error-90]){color:hsl(var(--error-90))}:host([background=error-100]){background-color:hsl(var(--error-100))}:host([color=error-100]){color:hsl(var(--error-100))}:host([direction=column]){flex-direction:column}:host([direction=row]){flex-direction:row}: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:bold}:host([weight=bolder]){font-weight:bolder}:host([direction=row]){flex-direction:row}:host([direction=row-reverse]){flex-direction:row}:host([elevation=\"1\"]){box-shadow:var(--box-elevation, 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15))}:host([elevation=\"2\"]){box-shadow:var(--box-elevation, 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15))}:host([elevation=\"3\"]){box-shadow:var(--box-elevation, 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15))}:host([fill=horizontal]){width:100%}:host([fill=vertical]){height:100%}:host([fill=true]){width:100%;height: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, 0.25rem) 0}:host([gap=xsmall][direction=row]) ::slotted(*){margin:0 var(--spacing-xs, 0.25rem)}:host([margin=xsmall]){margin:var(--box-margin, var(--spacing-xs, 0.25rem))}:host([vmargin=xsmall]){margin-top:var(--box-margin, var(--spacing-xs, 0.25rem));margin-bottom:var(--box-margin, var(--spacing-xs, 0.25rem))}:host([hmargin=xsmall]){margin-left:var(--box-margin, var(--spacing-xs, 0.25rem));margin-right:var(--box-margin, var(--spacing-xs, 0.25rem))}:host([margin=\"xsmall auto\"]){margin:var(--box-margin, var(--spacing-xs, 0.25rem)) auto}:host([margin=\"auto xsmall\"]){margin:auto var(--box-margin, var(--spacing-xs, 0.25rem))}:host([padding=xsmall]){padding:var(--box-padding, var(--spacing-xs, 0.25rem))}:host([vpadding=xsmall]){padding-top:var(--box-padding, var(--spacing-xs, 0.25rem));padding-bottom:var(--box-padding, var(--spacing-xs, 0.25rem))}:host([hpadding=xsmall]){padding-left:var(--box-padding, var(--spacing-xs, 0.25rem));padding-right:var(--box-padding, var(--spacing-xs, 0.25rem))}:host([gap=small]) ::slotted(*),:host([gap=small][direction=column]) ::slotted(*){margin:var(--spacing-s, 0.5rem) 0}:host([gap=small][direction=row]) ::slotted(*){margin:0 var(--spacing-s, 0.5rem)}:host([margin=small]){margin:var(--box-margin, var(--spacing-s, 0.5rem))}:host([vmargin=small]){margin-top:var(--box-margin, var(--spacing-s, 0.5rem));margin-bottom:var(--box-margin, var(--spacing-s, 0.5rem))}:host([hmargin=small]){margin-left:var(--box-margin, var(--spacing-s, 0.5rem));margin-right:var(--box-margin, var(--spacing-s, 0.5rem))}:host([margin=\"small auto\"]){margin:var(--box-margin, var(--spacing-s, 0.5rem)) auto}:host([margin=\"auto small\"]){margin:auto var(--box-margin, var(--spacing-s, 0.5rem))}:host([padding=small]){padding:var(--box-padding, var(--spacing-s, 0.5rem))}:host([vpadding=small]){padding-top:var(--box-padding, var(--spacing-s, 0.5rem));padding-bottom:var(--box-padding, var(--spacing-s, 0.5rem))}:host([hpadding=small]){padding-left:var(--box-padding, var(--spacing-s, 0.5rem));padding-right:var(--box-padding, var(--spacing-s, 0.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([vmargin=medium]){margin-top:var(--box-margin, var(--spacing-m, 1rem));margin-bottom:var(--box-margin, var(--spacing-m, 1rem))}:host([hmargin=medium]){margin-left:var(--box-margin, var(--spacing-m, 1rem));margin-right: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([vpadding=medium]){padding-top:var(--box-padding, var(--spacing-m, 1rem));padding-bottom:var(--box-padding, var(--spacing-m, 1rem))}:host([hpadding=medium]){padding-left:var(--box-padding, var(--spacing-m, 1rem));padding-right: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([vmargin=large]){margin-top:var(--box-margin, var(--spacing-l, 1.25rem));margin-bottom:var(--box-margin, var(--spacing-l, 1.25rem))}:host([hmargin=large]){margin-left:var(--box-margin, var(--spacing-l, 1.25rem));margin-right: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([vpadding=large]){padding-top:var(--box-padding, var(--spacing-l, 1.25rem));padding-bottom:var(--box-padding, var(--spacing-l, 1.25rem))}:host([hpadding=large]){padding-left:var(--box-padding, var(--spacing-l, 1.25rem));padding-right: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([vmargin=xlarge]){margin-top:var(--box-margin, var(--spacing-xl, 2rem));margin-bottom:var(--box-margin, var(--spacing-xl, 2rem))}:host([hmargin=xlarge]){margin-left:var(--box-margin, var(--spacing-xl, 2rem));margin-right: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([vpadding=xlarge]){padding-top:var(--box-padding, var(--spacing-xl, 2rem));padding-bottom:var(--box-padding, var(--spacing-xl, 2rem))}:host([hpadding=xlarge]){padding-left:var(--box-padding, var(--spacing-xl, 2rem));padding-right:var(--box-padding, var(--spacing-xl, 2rem))}:host([font=xsmall]),:host([size=xsmall]){font-size:var(--box-font-size, var(--font-size-xs, 0.625rem))}:host([font=small]),:host([size=small]){font-size:var(--box-font-size, var(--font-size-s, 0.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, 0.125rem))}:host([radius=medium]){border-radius:var(--box-border-radius, var(--border-radius-medium, 0.25rem))}:host([radius=large]){border-radius:var(--box-border-radius, var(--border-radius-large, 0.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}");
+;// ./tinkiet/box/box.ts
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+
+
+const colors = (/* unused pure expression or super */ null && ([
+    "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 {1|2|3} 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"} vmargin - The amount of vertical 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"} hmargin - The amount of horizontal 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 {"xsmall" | "small" | "medium" | "large" | "xlarge"} vpadding - The amount of vertical 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 {"xsmall" | "small" | "medium" | "large" | "xlarge"} hpadding - The amount of horizontal 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 external_lit_.LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Activate ripple
+         */
+        this.ripple = false;
+    }
+    static get styles() {
+        return [
+            (0,external_lit_.css) `
+				${(0,external_lit_.unsafeCSS)(box)}
+			`
+        ];
+    }
+    render() {
+        return (0,external_lit_.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 as string))
+        // 	this.style.setProperty("background-color", this.background.toString());
+        // if (props.has("color") && ![...colors, "background", "foreground"].includes(this.color as string))
+        // 	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([
+    (0,decorators_js_.property)({ type: Boolean })
+], TkBox.prototype, "ripple", void 0);
+__decorate([
+    (0,decorators_js_.property)()
+], TkBox.prototype, "background", void 0);
+__decorate([
+    (0,decorators_js_.property)()
+], TkBox.prototype, "color", void 0);
+TkBox = __decorate([
+    (0,decorators_js_.customElement)("tk-box")
+], TkBox);
+
+
+
+/***/ }),
+
+/***/ 2927:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitElement), ["css"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.css), ["html"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.html), ["unsafeCSS"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.unsafeCSS) });
+
+/***/ }),
+
+/***/ 3433:
+/***/ ((__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) => {
+
+/* harmony import */ var _box__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2788);
+
+
+
+/***/ }),
+
+/***/ 3517:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["ifDefined"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_directives_if_defined_js_76c6050d__.ifDefined) });
+
+/***/ }),
+
+/***/ 3770:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   z: () => (/* binding */ uniqueID)
+/* harmony export */ });
+/**
+ * Returns a unique ID.
+ * @param {number} length
+ * @returns {string}
+ */
+function uniqueID(length = 10) {
+    return `_${Math.random()
+        .toString(36)
+        .substr(2, length)}`;
+}
+
+
+/***/ }),
+
+/***/ 8899:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property), ["query"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.query) });
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/ 
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ 	// Check if module is in cache
+/******/ 	var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 	if (cachedModule !== undefined) {
+/******/ 		return cachedModule.exports;
+/******/ 	}
+/******/ 	// Create a new module (and put it into the cache)
+/******/ 	var module = __webpack_module_cache__[moduleId] = {
+/******/ 		// no module.id needed
+/******/ 		// no module.loaded needed
+/******/ 		exports: {}
+/******/ 	};
+/******/ 
+/******/ 	// Execute the module function
+/******/ 	__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 
+/******/ 	// Return the exports of the module
+/******/ 	return module.exports;
+/******/ }
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__webpack_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/************************************************************************/
+var __webpack_exports__ = {};
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   T: () => (/* reexport safe */ _checkbox__WEBPACK_IMPORTED_MODULE_0__.T)
+/* harmony export */ });
+/* harmony import */ var _checkbox__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1702);
+
+
+const __webpack_exports__TkCheckbox = __webpack_exports__.T;
+export { __webpack_exports__TkCheckbox as TkCheckbox };

package/chip/chip.d.ts

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

package/chip/index.d.ts

@@ -1 +1 @@
-export * from "./chip.js";
+export * from "./chip";

package/chip/index.js

@@ -1 +1,123 @@
-export { TkChip } from './chip.js';
+import * as __WEBPACK_EXTERNAL_MODULE_lit__ from "lit";
+import * as __WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__ from "lit/decorators.js";
+/******/ var __webpack_modules__ = ({
+
+/***/ 2927:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitElement), ["css"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.css), ["html"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.html), ["unsafeCSS"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.unsafeCSS) });
+
+/***/ }),
+
+/***/ 3309:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  i: () => (/* binding */ TkChip)
+});
+
+// EXTERNAL MODULE: external "lit"
+var external_lit_ = __webpack_require__(2927);
+// EXTERNAL MODULE: external "lit/decorators.js"
+var decorators_js_ = __webpack_require__(8899);
+;// ./tinkiet/chip/chip.scss
+/* harmony default export */ const chip = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{z-index:var(--navbar-z-index, 100);--color: var(--primary);--text: var(--on-primary);position:relative;color:var(--text);transition:var(--nav-transition, background var(--transition-duration-fast, 120ms) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)), transform var(--transition-duration-medium, 180ms) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)), box-shadow var(--transition-duration-medium, 180ms) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)));height:var(--navbar-height, 48px);padding:var(--navbar-padding, var(--spacing-s, 0.5rem));background:var(--color);display:flex;justify-content:space-between;box-sizing:border-box;flex-grow:1}:host([inverted]){--color: var(--on-primary);--text: var(--primary)}:host([fixed]){position:fixed;top:0;left:0;width:100%}:host([shadow]){box-shadow:var(--nav-elevation, 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15))}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){display:flex;align-items:center;height:100%}#title,::slotted([slot=title]){margin:var(--nav-title-margin, 0 0 0 var(--spacing-l, 1.25rem));font-size:var(--nav-title-font-size, var(--font-size-l, 1.25rem))}");
+;// ./tinkiet/chip/chip.ts
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+
+
+let TkChip = class TkChip extends external_lit_.LitElement {
+    render() {
+        return (0,external_lit_.html) `
+			<div class="chip"><slot></slot></div>
+		`;
+    }
+};
+TkChip.styles = (0,external_lit_.css) `
+		${(0,external_lit_.unsafeCSS)(chip)}
+	`;
+TkChip = __decorate([
+    (0,decorators_js_.customElement)("tk-chip")
+], TkChip);
+
+
+
+/***/ }),
+
+/***/ 8899:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement) });
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/ 
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ 	// Check if module is in cache
+/******/ 	var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 	if (cachedModule !== undefined) {
+/******/ 		return cachedModule.exports;
+/******/ 	}
+/******/ 	// Create a new module (and put it into the cache)
+/******/ 	var module = __webpack_module_cache__[moduleId] = {
+/******/ 		// no module.id needed
+/******/ 		// no module.loaded needed
+/******/ 		exports: {}
+/******/ 	};
+/******/ 
+/******/ 	// Execute the module function
+/******/ 	__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 
+/******/ 	// Return the exports of the module
+/******/ 	return module.exports;
+/******/ }
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__webpack_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/************************************************************************/
+var __webpack_exports__ = {};
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   i: () => (/* reexport safe */ _chip__WEBPACK_IMPORTED_MODULE_0__.i)
+/* harmony export */ });
+/* harmony import */ var _chip__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3309);
+
+
+const __webpack_exports__TkChip = __webpack_exports__.i;
+export { __webpack_exports__TkChip as TkChip };