tinkiet 0.10.0 → 0.11.0

package/index.js

@@ -1,6 +1,6 @@
 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 { classMap as __WEBPACK_EXTERNAL_MODULE_lit_directives_class_map_js_2f88e643_classMap__ } from "lit/directives/class-map.js";
+import * as __WEBPACK_EXTERNAL_MODULE_lit_directives_class_map_js_2f88e643__ from "lit/directives/class-map.js";
 import { unsafeHTML as __WEBPACK_EXTERNAL_MODULE_lit_directives_unsafe_html_js_56553e3e_unsafeHTML__ } from "lit/directives/unsafe-html.js";
 import * as __WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__ from "lit/decorators.js";
 /******/ var __webpack_modules__ = ({
@@ -514,8 +514,10 @@ __webpack_require__.d(__webpack_exports__, {
 var external_lit_ = __webpack_require__(2927);
 // EXTERNAL MODULE: external "lit/decorators.js"
 var decorators_js_ = __webpack_require__(8899);
+// EXTERNAL MODULE: external "lit/directives/class-map.js"
+var class_map_js_ = __webpack_require__(4955);
 ;// ./tinkiet/badge/badge.scss
-/* harmony default export */ const badge = ("*{-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 .badge{background-color:hsl(var(--error));font-family:\"Trebuchet MS\",\"Lucida Sans Unicode\",\"Lucida Grande\",\"Lucida Sans\",Arial,sans-serif;color:hsl(var(--on-error));height:16px;min-width:16px;max-width:34px;border-radius:8px;padding:4px;font-size:10px;line-height:8px;text-align:center;white-space:nowrap;user-select:none;cursor:inherit}:host .badge.empty{height:6px;width:6px;min-width:6px;border-radius:100%}");
+/* harmony default export */ const badge = ("*{-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 .badge{background-color:var(--tk-badge-color, hsl(var(--error)));font-family:\"Trebuchet MS\",\"Lucida Sans Unicode\",\"Lucida Grande\",\"Lucida Sans\",Arial,sans-serif;color:var(--tk-badge-text-color, hsl(var(--on-error)));height:16px;min-width:16px;max-width:34px;border-radius:8px;padding:4px;font-size:10px;line-height:8px;text-align:center;white-space:nowrap;user-select:none;cursor:inherit}:host .badge.empty{height:6px;width:6px;min-width:6px;border-radius:100%}");
 ;// ./tinkiet/badge/badge.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;
@@ -526,26 +528,32 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 /**
  * A badge WebComponent
- * @cssprop --tk-badge-color - Color of widget default to --primary
- * @cssprop --tk-badge-text-color - Text color of widget to --on-primary
+ * @cssprop --tk-badge-color - Badge background color (defaults to --primary)
+ * @cssprop --tk-badge-text-color - Badge text color (defaults to --on-primary)
  */
 let TkBadge = class TkBadge extends external_lit_.LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+    }
     static get styles() {
         return (0,external_lit_.css) `
 			${(0,external_lit_.unsafeCSS)(badge)}
 		`;
     }
     render() {
+        const isEmpty = this.label.trim().length === 0;
         return (0,external_lit_.html) `
 			<slot></slot>
-			<div class="badge ${this.label ? "" : "empty"}">${this.label}</div>
+			<div class=${(0,class_map_js_.classMap)({ badge: true, empty: isEmpty })}>${this.label}</div>
 		`;
     }
 };
 __decorate([
-    (0,decorators_js_.property)()
+    (0,decorators_js_.property)({ type: String })
 ], TkBadge.prototype, "label", void 0);
 TkBadge = __decorate([
     (0,decorators_js_.customElement)("tk-badge")
@@ -568,8 +576,8 @@ __webpack_require__.d(__webpack_exports__, {
 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: external "lit/directives/class-map.js"
+var class_map_js_ = __webpack_require__(4955);
 // EXTERNAL MODULE: ./tinkiet/box/index.ts
 var box = __webpack_require__(3433);
 // EXTERNAL MODULE: ./tinkiet/utils/unique.ts
@@ -591,15 +599,22 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 let TkCheckbox = class TkCheckbox extends external_lit_.LitElement {
     constructor() {
-        super(...arguments);
+        super();
         this._id = (0,unique/* uniqueID */.z)();
         this.checked = false;
         this.disabled = false;
+        this.indeterminate = false;
+        this.handleClick = this.handleClick.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
     }
     render() {
+        const containerClasses = {
+            state: true,
+            disabled: this.disabled
+        };
         return (0,external_lit_.html) `
-			<tk-box direction="row" align-items="center">
-				<tk-box ripple tabindex="${this.disabled ? -1 : 0}" class="state">
+			<tk-box direction="row" align-items="center" @click=${this.handleClick}>
+				<tk-box ripple tabindex="${this.disabled ? -1 : 0}" class=${(0,class_map_js_.classMap)(containerClasses)} @keydown=${this.onKeyDown}>
 					<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>
@@ -609,33 +624,24 @@ let TkCheckbox = class TkCheckbox extends external_lit_.LitElement {
 				</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.$input = document.createElement("input");
+        this.$input.type = "checkbox";
+        this.$input.slot = "none";
+        this.$input.style.display = "none";
+        this.$input.setAttribute("aria-hidden", "true");
+        this.$input.tabIndex = -1;
+        this.syncInput();
         this.appendChild(this.$input);
     }
+    updated() {
+        this.syncInput();
+    }
     onKeyDown(e) {
+        if (this.disabled)
+            return;
         if (e.code === "Space" || e.code === "Enter") {
             e.preventDefault();
             e.stopPropagation();
@@ -643,9 +649,24 @@ let TkCheckbox = class TkCheckbox extends external_lit_.LitElement {
         }
     }
     handleClick() {
+        if (this.disabled)
+            return;
         this.checked = !this.checked;
+        if (this.indeterminate)
+            this.indeterminate = false;
         setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
     }
+    syncInput() {
+        var _a, _b;
+        if (!this.$input)
+            return;
+        this.$input.id = this._id;
+        this.$input.name = (_a = this.name) !== null && _a !== void 0 ? _a : "";
+        this.$input.value = (_b = this.value) !== null && _b !== void 0 ? _b : "on";
+        this.$input.checked = this.checked;
+        this.$input.disabled = this.disabled;
+        this.$input.indeterminate = this.indeterminate;
+    }
 };
 TkCheckbox.styles = (0,external_lit_.css) `
 		${(0,external_lit_.unsafeCSS)(checkbox_checkbox)}
@@ -660,11 +681,11 @@ __decorate([
     (0,decorators_js_.property)({ attribute: true, type: Boolean, reflect: true })
 ], TkCheckbox.prototype, "checked", void 0);
 __decorate([
-    (0,decorators_js_.property)({ type: Boolean })
+    (0,decorators_js_.property)({ attribute: true, type: Boolean, reflect: true })
 ], TkCheckbox.prototype, "disabled", void 0);
 __decorate([
-    (0,decorators_js_.query)("input")
-], TkCheckbox.prototype, "$input", void 0);
+    (0,decorators_js_.property)({ attribute: true, type: Boolean, reflect: true })
+], TkCheckbox.prototype, "indeterminate", void 0);
 TkCheckbox = __decorate([
     (0,decorators_js_.customElement)("tk-checkbox")
 ], TkCheckbox);
@@ -686,8 +707,6 @@ __webpack_require__.d(__webpack_exports__, {
 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
@@ -729,7 +748,7 @@ __decorate([
 ], TkFocusableBox.prototype, "disabled", void 0);
 
 ;// ./tinkiet/accordion/accordion.scss
-/* harmony default export */ const accordion = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host .header{color:hsl(var(--on-surface));background-color:hsl(var(--surface-container-lowest));padding:16px;border:solid 2px hsl(var(--outline))}:host .header>*{margin:0 10px}:host .header{cursor:pointer}:host .header:after{transition:transform .3s;content:\"▼\";display:inline-block;font-size:12px}:host .header .before{width:fit-content}:host .header .header-content{flex:1}:host .content{width:95%;margin:0 auto;height:0;opacity:0;visibility:hidden;transition:all .2s}:host h3,:host h5{margin:0}:host([checked]) .header{background-color:hsl(var(--primary));color:hsl(var(--on-primary))}:host([checked]) .header:after{transform:rotate(180deg)}:host([checked]) .content{height:auto;opacity:1;visibility:visible;transition:all .3s,opacity .7s}:host([pill]) .header{border-radius:9999px}");
+/* harmony default export */ const accordion = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host .header{position:relative;overflow:hidden;color:hsl(var(--on-surface));background-color:hsl(var(--surface-container-low));padding:16px;border:1px solid hsl(var(--outline-variant));border-radius:12px;box-shadow:0px 1px 2px 0px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15);gap:12px;cursor:pointer;transition:background-color var(--transition-duration-medium, 180ms) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)),color 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)),border-color var(--transition-duration-medium, 180ms) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1))}:host .header:after{transition:transform .3s var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1));content:\"▼\";display:inline-block;font-size:12px;margin-inline-start:8px}:host .header:before{content:\"\";position:absolute;inset:0;background:hsl(var(--on-surface));opacity:0;transition:opacity var(--transition-duration-medium, 180ms) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1));pointer-events:none}:host .header .before{width:fit-content}:host .header .header-content{flex:1}:host .content{width:100%;margin:4px 0 0;padding:0 16px;opacity:0;visibility:hidden;max-height:0;overflow:hidden;transform:translateY(-8px);transition:max-height .28s var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)),opacity .28s var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)),transform .28s var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1));background:hsl(var(--surface-container-lowest));border-radius:0 0 12px 12px}:host h3,:host h5{margin:0}:host .header:hover:before{opacity:.08}:host .header:active:before{opacity:.12}:host .header:focus-visible{outline:none;border-color:hsl(var(--primary));box-shadow:0px 1px 2px 0px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15),0 0 0 3px hsl(var(--primary)/0.2)}:host([checked]) .header{background-color:hsl(var(--primary-container));color:hsl(var(--on-primary-container));border-color:hsl(var(--primary));box-shadow:0px 1px 2px 0px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}:host([checked]) .header:after{transform:rotate(180deg)}:host([checked]) .header:before{background:hsl(var(--on-primary-container))}:host([checked]) .content{opacity:1;visibility:visible;max-height:var(--tk-accordion-max-height, 1000px);padding:12px 16px;transform:translateY(0);transition:max-height .28s var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)),opacity .28s var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)),transform .28s var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1))}:host([pill]) .header{border-radius:9999px}@media(prefers-reduced-motion: reduce){:host .header:after{transition:none}:host .header:before{transition:none}:host .header{transition:none}:host .content{transition:none}}");
 ;// ./tinkiet/accordion/accordion.ts
 var accordion_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;
@@ -742,13 +761,7 @@ var accordion_decorate = (undefined && undefined.__decorate) || function (decora
 
 
 
-
 let TkAccordion = class TkAccordion extends TkFocusableBox {
-    constructor() {
-        super(...arguments);
-        this.checked = false;
-        this.rippleHeader = false;
-    }
     static get styles() {
         return [
             ...box/* TkBox */.P.styles,
@@ -757,11 +770,17 @@ let TkAccordion = class TkAccordion extends TkFocusableBox {
 			`
         ];
     }
+    constructor() {
+        super();
+        this.checked = false;
+        this.rippleHeader = false;
+        this.handleClick = this.handleClick.bind(this);
+    }
     render() {
         return (0,external_lit_.html) `
 			<tk-box margin="small">
 				<tk-box
-					@click=${this.handleClick.bind(this)}
+					@click=${this.handleClick}
 					?ripple=${this.rippleHeader}
 					class="header"
 					direction="row"
@@ -779,22 +798,22 @@ let TkAccordion = class TkAccordion extends TkFocusableBox {
 					<slot></slot>
 				</tk-box>
 			</tk-box>
-			<input
-				id=${this.id}
-				slot="none"
-				style="display: none;"
-				type="radio"
-				?checked="${this.checked}"
-				?disabled="${this.disabled}"
-				name="${(0,if_defined_js_.ifDefined)(this.name)}"
-				aria-hidden="true"
-				tabindex="-1"
-			/>
 		`;
     }
     firstUpdated() {
+        this.$input = document.createElement("input");
+        this.$input.type = "radio";
+        this.$input.slot = "none";
+        this.$input.style.display = "none";
+        this.$input.setAttribute("aria-hidden", "true");
+        this.$input.tabIndex = -1;
+        this.syncInput();
         this.appendChild(this.$input);
     }
+    updated(changed) {
+        super.updated(changed);
+        this.syncInput();
+    }
     onKeyDown(e) {
         if (e.code === "Space" || e.code === "Enter") {
             e.preventDefault();
@@ -808,7 +827,16 @@ let TkAccordion = class TkAccordion extends TkFocusableBox {
             this.getRootNode()
                 .querySelectorAll(`tk-accordion[name="${this.name}"]`)
                 .forEach(el => (el != this ? (el.checked = false) : null));
-        this.dispatchEvent(new Event("change"));
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+    syncInput() {
+        var _a;
+        if (!this.$input)
+            return;
+        this.$input.id = this.id;
+        this.$input.name = (_a = this.name) !== null && _a !== void 0 ? _a : "";
+        this.$input.checked = this.checked;
+        this.$input.disabled = this.disabled;
     }
 };
 accordion_decorate([
@@ -820,9 +848,6 @@ accordion_decorate([
 accordion_decorate([
     (0,decorators_js_.property)({ attribute: "ripple-header", type: Boolean })
 ], TkAccordion.prototype, "rippleHeader", void 0);
-accordion_decorate([
-    (0,decorators_js_.query)("input")
-], TkAccordion.prototype, "$input", void 0);
 TkAccordion = accordion_decorate([
     (0,decorators_js_.customElement)("tk-accordion")
 ], TkAccordion);
@@ -1099,7 +1124,7 @@ 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) });
+module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitElement), ["css"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.css), ["html"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.html), ["nothing"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.nothing), ["unsafeCSS"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.unsafeCSS) });
 
 /***/ }),
 
@@ -1135,7 +1160,7 @@ 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))}");
+/* 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}.chip{display:inline-flex;align-items:center;border-radius:10px;padding:3px 10px;background:hsl(var(--surface-container-highest));border:1px solid hsl(var(--outline-variant));font-size:13px;height:30px;gap:6px;line-height:1;cursor:pointer}.chip.disabled{opacity:.4;pointer-events:none}.chip .leading{display:inline-flex;align-items:center}.chip .leading slot::slotted(*){display:inline-flex;align-items:center}.chip .label{white-space:nowrap;display:inline-flex;align-items:center;line-height:1}.chip .trailing{display:inline-flex;align-items:center}.chip .trailing slot::slotted(*){display:inline-flex;align-items:center}.chip .trailing .remove{background:none;border:none;cursor:pointer;font-size:13px;line-height:1;opacity:.7}.chip .trailing .remove:hover{opacity:1}");
 ;// ./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;
@@ -1146,16 +1171,61 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+/**
+ * Material-style Chip component.
+ *
+ * Slots :
+ *   • default <slot> → label text
+ *   • <slot name="leading"> → leading icon / image
+ *   • <slot name="trailing"> → trailing icon (remove / action)
+ *
+ * Attributes :
+ *   • removable (boolean) → affiche un trailing icon automatique (ex: bouton X)
+ *   • disabled (boolean)
+ */
 let TkChip = class TkChip extends external_lit_.LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.removable = false;
+    }
+    onRemove() {
+        this.dispatchEvent(new CustomEvent("remove", { bubbles: true, composed: true }));
+    }
     render() {
         return (0,external_lit_.html) `
-			<div class="chip"><slot></slot></div>
-		`;
+      <div class="chip ${this.disabled ? "disabled" : ""}">
+        
+        <!-- 3. LEADING ICON (optional) -->
+        <span class="leading">
+          <slot name="leading"></slot>
+        </span>
+
+        <!-- 2. LABEL TEXT -->
+        <span class="label">
+          <slot></slot>
+        </span>
+
+        <!-- 4. TRAILING ICON -->
+        <span class="trailing">
+          <slot name="trailing">
+            ${this.removable
+            ? (0,external_lit_.html) `<button class="remove" @click=${this.onRemove}>✕</button>`
+            : ""}
+          </slot>
+        </span>
+
+      </div>
+    `;
     }
 };
-TkChip.styles = (0,external_lit_.css) `
-		${(0,external_lit_.unsafeCSS)(chip)}
-	`;
+TkChip.styles = (0,external_lit_.css) `${(0,external_lit_.unsafeCSS)(chip)}`;
+__decorate([
+    (0,decorators_js_.property)({ type: Boolean })
+], TkChip.prototype, "disabled", void 0);
+__decorate([
+    (0,decorators_js_.property)({ type: Boolean })
+], TkChip.prototype, "removable", void 0);
 TkChip = __decorate([
     (0,decorators_js_.customElement)("tk-chip")
 ], TkChip);
@@ -1409,7 +1479,7 @@ module.exports = x({ ["ifDefined"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_directi
 /***/ 3572:
 /***/ ((__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) => {
 
-/* harmony import */ var _loading__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4646);
+/* harmony import */ var _loading__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8895);
 
 
 
@@ -1442,93 +1512,6 @@ function uniqueID(length = 10) {
 }
 
 
-/***/ }),
-
-/***/ 4646:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  k: () => (/* binding */ TkLoading)
-});
-
-// EXTERNAL MODULE: external "lit"
-var external_lit_ = __webpack_require__(2927);
-// EXTERNAL MODULE: external "lit/decorators.js"
-var decorators_js_ = __webpack_require__(8899);
-;// external "lit/directives/class-map.js"
-
-// EXTERNAL MODULE: ./tinkiet/box/index.ts
-var box = __webpack_require__(3433);
-;// ./tinkiet/loading/loading.scss
-/* harmony default export */ const loading = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{--color: hsl(var(--primary));--background-color: var(--tk-loading-background-color, hsl(var(--surface-dim)))}:host([secondary]){--color: hsl(var(--secondary))}:host([error]){--color: hsl(var(--error))}.circle{display:inline-flex;animation:rotator 3s linear infinite;transform-origin:center;width:56px;height:56px}.circle .path{stroke-dasharray:265;stroke-dashoffset:0;transform-origin:center;stroke:var(--color);animation:dash 3s ease-in-out infinite}@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dashoffset:265}50%{stroke-dashoffset:65;transform:rotate(90deg)}100%{stroke-dashoffset:265;transform:rotate(360deg)}}:host([small]) .circle{width:20px;height:20px}:host([small]) .line{height:2px}:host([large]) .circle{width:96px;height:96px}:host([large]) .line{height:14px}.line{position:relative;background-color:var(--background-color);overflow:hidden;height:6px}.line .progress{background-color:var(--color);height:100%}.line .indeterminate{background-color:var(--color)}.line .indeterminate:before{content:\"\";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}.line .indeterminate:after{content:\"\";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation-delay:1.15s}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}");
-;// ./tinkiet/loading/loading.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 TkLoading = class TkLoading extends box/* TkBox */.P {
-    constructor() {
-        super(...arguments);
-        this.circle = false;
-        this.indeterminate = false;
-        this.percent = 0;
-    }
-    static get styles() {
-        return [
-            ...box/* TkBox */.P.styles,
-            (0,external_lit_.css) `
-				${(0,external_lit_.unsafeCSS)(loading)}
-			`
-        ];
-    }
-    render() {
-        return (0,external_lit_.html) `
-			${this.circle
-            ? (0,external_lit_.html) `
-						<svg class="circle" viewBox="0 0 100 100">
-							<circle
-								class=${__WEBPACK_EXTERNAL_MODULE_lit_directives_class_map_js_2f88e643_classMap__({ indeterminate: this.indeterminate, path: true })}
-								fill="none"
-								stroke-width="1em"
-								stroke-linecap="butt"
-								cx="50"
-								cy="50"
-								r="40"
-							></circle>
-						</svg>
-				  `
-            : (0,external_lit_.html) `
-						<div class="line">
-							<div class=${__WEBPACK_EXTERNAL_MODULE_lit_directives_class_map_js_2f88e643_classMap__({ progress: true, indeterminate: this.indeterminate })} style="${`width:${this.percent}%;`}"></div>
-						</div>
-				  `}
-		`;
-    }
-};
-__decorate([
-    (0,decorators_js_.property)({ attribute: true, type: Boolean })
-], TkLoading.prototype, "circle", void 0);
-__decorate([
-    (0,decorators_js_.property)({ attribute: true, type: Boolean })
-], TkLoading.prototype, "indeterminate", void 0);
-__decorate([
-    (0,decorators_js_.property)({ attribute: true, type: Number })
-], TkLoading.prototype, "percent", void 0);
-TkLoading = __decorate([
-    (0,decorators_js_.customElement)("tk-loading")
-], TkLoading);
-
-
-
 /***/ }),
 
 /***/ 4686:
@@ -1598,6 +1581,17 @@ TkForm = __decorate([
 
 
 
+/***/ }),
+
+/***/ 4955:
+/***/ ((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({ ["classMap"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_directives_class_map_js_2f88e643__.classMap) });
+
 /***/ }),
 
 /***/ 5302:
@@ -3239,7 +3233,7 @@ var external_lit_ = __webpack_require__(2927);
 // EXTERNAL MODULE: external "lit/decorators.js"
 var decorators_js_ = __webpack_require__(8899);
 ;// ./tinkiet/pages/pages.scss
-/* harmony default export */ const pages = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}");
+/* harmony default export */ const pages = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host ::slotted([hidden]){display:none !important}");
 ;// ./tinkiet/pages/pages.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;
@@ -3259,7 +3253,9 @@ let TkPages = class TkPages extends external_lit_.LitElement {
         this.scrollHistory = {};
     }
     set page(val) {
-        let oldVal = this._page;
+        const oldVal = this._page;
+        if (oldVal === val)
+            return;
         this._page = val;
         if (oldVal && this.handleScroll) {
             const el = this.querySelector(`[page=${oldVal}]`);
@@ -3273,6 +3269,17 @@ let TkPages = class TkPages extends external_lit_.LitElement {
     get page() {
         return this._page;
     }
+    firstUpdated() {
+        var _a, _b;
+        // If no page is set, pick the first child with a page attr or default to "default"
+        if (!this.page) {
+            const first = (_a = this.querySelector("[page]")) !== null && _a !== void 0 ? _a : this.querySelector(":scope > *");
+            if (first) {
+                this.page = (_b = first.getAttribute("page")) !== null && _b !== void 0 ? _b : "default";
+            }
+        }
+        this.updatePages();
+    }
     render() {
         return (0,external_lit_.html) `
 			<slot></slot>
@@ -3280,34 +3287,37 @@ let TkPages = class TkPages extends external_lit_.LitElement {
     }
     updated(props) {
         if (props.has("page")) {
-            this.querySelectorAll(":scope > *").forEach(el => {
-                var _a;
-                const elPageAttribute = (_a = el.getAttribute("page")) !== null && _a !== void 0 ? _a : "default";
-                const scrollElement = document.scrollingElement || document.documentElement;
-                if (elPageAttribute == this.page) {
-                    el.removeAttribute("hidden");
-                    if (this.selected != "") {
-                        el.setAttribute(this.selected, "");
-                    }
-                    if (this.handleScroll && !el.hasAttribute("no-scroll")) {
-                        scrollElement.scrollTop = this.scrollHistory[elPageAttribute] ? this.scrollHistory[elPageAttribute] : 0;
-                    }
+            this.updatePages();
+        }
+    }
+    updatePages() {
+        const scrollElement = document.scrollingElement || document.documentElement;
+        this.querySelectorAll(":scope > *").forEach(el => {
+            var _a, _b;
+            const elPageAttribute = (_a = el.getAttribute("page")) !== null && _a !== void 0 ? _a : "default";
+            if (elPageAttribute === this.page) {
+                el.removeAttribute("hidden");
+                if (this.selected) {
+                    el.setAttribute(this.selected, "");
                 }
-                else {
-                    el.setAttribute("hidden", "");
-                    if (this.selected != "") {
-                        el.removeAttribute(this.selected);
-                    }
+                if (this.handleScroll && !el.hasAttribute("no-scroll")) {
+                    scrollElement.scrollTop = (_b = this.scrollHistory[elPageAttribute]) !== null && _b !== void 0 ? _b : 0;
                 }
-            });
-        }
+            }
+            else {
+                el.setAttribute("hidden", "");
+                if (this.selected) {
+                    el.removeAttribute(this.selected);
+                }
+            }
+        });
     }
 };
 TkPages.styles = (0,external_lit_.css) `
 		${(0,external_lit_.unsafeCSS)(pages)}
 	`;
 __decorate([
-    (0,decorators_js_.property)({ attribute: "page", type: String })
+    (0,decorators_js_.property)({ attribute: "page", type: String, reflect: true })
 ], TkPages.prototype, "page", null);
 __decorate([
     (0,decorators_js_.property)({ attribute: true, type: String })
@@ -3330,6 +3340,165 @@ TkPages = __decorate([
 
 
 
+/***/ }),
+
+/***/ 8895:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  k: () => (/* binding */ TkLoading)
+});
+
+// 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/class-map.js"
+var class_map_js_ = __webpack_require__(4955);
+;// ./node_modules/lit-html/lit-html.js
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t=globalThis,i=t.trustedTypes,s=i?i.createPolicy("lit-html",{createHTML:t=>t}):void 0,e="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o="?"+h,n=`<${o}>`,r=document,l=()=>r.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),b=y(2),w=y(3),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r.createTreeWalker(r,129);function P(t,i){if(!a(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n:d>=0?(o.push(a),s.slice(0,d)+e+s.slice(d)+h+x):s+h+(-2===d?i:x)}return[P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t)}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i?i.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l())}}}else if(8===r.nodeType)if(r.data===o)d.push({type:2,index:c});else{let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1}c++}}static createElement(t,i){const s=r.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(!1),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S(t,h._$AS(t,i.values),h,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r).importNode(i,!0);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n]}o!==l?.index&&(h=C.nextNode(),o++)}return C.currentNode=r,e}p(t){let i=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++}}class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r.createTextNode(t)),this._$AH=t}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else{const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l()),this.O(l()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e)}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(!1,!0,i);t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else{const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r}o&&!e&&this.j(t)}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class H extends k{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===E?void 0:t}}class I extends k{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E)}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t)}}const Z={M:e,P:h,A:o,C:1,L:V,R:M,D:u,V:S,I:R,H:k,N:I,U:L,B:H,F:z},j=t.litHtmlPolyfillSupport;j?.(N,R),(t.litHtmlVersions??=[]).push("3.3.1");const B=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l(),t),t,void 0,s??{})}return h._$AI(t),h};
+//# sourceMappingURL=lit-html.js.map
+
+;// ./node_modules/lit-html/directive.js
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const directive_t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},directive_e=t=>(...e)=>({_$litDirective$:t,values:e});class directive_i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+//# sourceMappingURL=directive.js.map
+
+;// ./node_modules/lit-html/directives/style-map.js
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const style_map_n="important",style_map_i=" !"+style_map_n,style_map_o=directive_e(class extends directive_i{constructor(t){if(super(t),t.type!==directive_t.ATTRIBUTE||"style"!==t.name||t.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes("-")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`}),"")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes("-")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r="string"==typeof e&&e.endsWith(style_map_i);t.includes("-")||r?s.setProperty(t,r?e.slice(0,-11):e,r?style_map_n:""):s[t]=e}}return T}});
+//# sourceMappingURL=style-map.js.map
+
+;// ./node_modules/lit/directives/style-map.js
+
+//# sourceMappingURL=style-map.js.map
+
+// 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);
+;// ./tinkiet/loading/loading.scss
+/* harmony default export */ const loading = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{--color: hsl(var(--primary));--background-color: var(--tk-loading-background-color, hsl(var(--surface-dim)))}:host([secondary]){--color: hsl(var(--secondary))}:host([error]){--color: hsl(var(--error))}.circle{display:inline-flex;animation:rotator 3s linear infinite;transform-origin:center;width:56px;height:56px}.circle .track{stroke:var(--background-color);opacity:.4}.circle .path{stroke-dasharray:265;stroke-dashoffset:0;transform-origin:center;stroke:var(--color);animation:dash 3s ease-in-out infinite}@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dashoffset:265}50%{stroke-dashoffset:65;transform:rotate(90deg)}100%{stroke-dashoffset:265;transform:rotate(360deg)}}:host([small]) .circle{width:20px;height:20px}:host([small]) .line{height:2px}:host([large]) .circle{width:96px;height:96px}:host([large]) .line{height:14px}.line{position:relative;background-color:var(--background-color);overflow:hidden;height:6px}.line .progress{background-color:var(--color);height:100%;position:relative;width:100%}.line .indeterminate{background-color:rgba(0,0,0,0);position:absolute;top:0;left:0;right:0;bottom:0}.line .indeterminate:before{content:\"\";position:absolute;background-color:var(--color);top:0;left:0;bottom:0;will-change:left,right;animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}.line .indeterminate:after{content:\"\";position:absolute;background-color:var(--color);top:0;left:0;bottom:0;will-change:left,right;animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation-delay:1.15s}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}");
+;// ./tinkiet/loading/loading.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 TkLoading = class TkLoading extends box/* TkBox */.P {
+    constructor() {
+        super(...arguments);
+        this.circle = false;
+        this.indeterminate = false;
+        this.percent = 0;
+    }
+    static get styles() {
+        return [
+            ...box/* TkBox */.P.styles,
+            (0,external_lit_.css) `
+				${(0,external_lit_.unsafeCSS)(loading)}
+			`
+        ];
+    }
+    render() {
+        const percent = this.normalizePercent(this.percent);
+        const radius = 40;
+        const circumference = 2 * Math.PI * radius;
+        const dashOffset = circumference * (1 - percent / 100);
+        const isDeterminateCircle = this.circle && !this.indeterminate && this.hasAttribute("percent");
+        const ariaValueNow = this.indeterminate ? undefined : percent;
+        const circleStyle = isDeterminateCircle ? style_map_o({ animation: "none" }) : external_lit_.nothing;
+        const progressStyle = isDeterminateCircle
+            ? style_map_o({
+                animation: "none",
+                strokeDasharray: `${circumference}`,
+                strokeDashoffset: `${dashOffset}`
+            })
+            : external_lit_.nothing;
+        return (0,external_lit_.html) `
+			${this.circle
+            ? (0,external_lit_.html) `
+						<svg
+							class="circle"
+							viewBox="0 0 100 100"
+							role="progressbar"
+							aria-valuemin="0"
+							aria-valuemax="100"
+							aria-valuenow=${(0,if_defined_js_.ifDefined)(ariaValueNow)}
+							style=${circleStyle}
+						>
+							<circle class="track" fill="none" stroke-width="1em" cx="50" cy="50" r="40"></circle>
+							<circle
+								class=${(0,class_map_js_.classMap)({ indeterminate: this.indeterminate, path: true })}
+								fill="none"
+								stroke-width="1em"
+								stroke-linecap="butt"
+								cx="50"
+								cy="50"
+								r="40"
+								style=${progressStyle}
+							></circle>
+						</svg>
+			  `
+            : (0,external_lit_.html) `
+						<div
+							class="line"
+							role="progressbar"
+							aria-valuemin="0"
+							aria-valuemax="100"
+							aria-valuenow=${(0,if_defined_js_.ifDefined)(ariaValueNow)}
+						>
+							<div class=${(0,class_map_js_.classMap)({ progress: true, indeterminate: this.indeterminate })} style=${style_map_o(this.indeterminate ? { width: "100%" } : { width: `${percent}%` })}>
+								${this.indeterminate ? (0,external_lit_.html) `<span class="visually-hidden">Loading</span>` : external_lit_.nothing}
+							</div>
+						</div>
+			  `}
+		`;
+    }
+    normalizePercent(value) {
+        if (!Number.isFinite(value))
+            return 0;
+        return Math.min(100, Math.max(0, value));
+    }
+};
+__decorate([
+    (0,decorators_js_.property)({ attribute: true, type: Boolean })
+], TkLoading.prototype, "circle", void 0);
+__decorate([
+    (0,decorators_js_.property)({ attribute: true, type: Boolean })
+], TkLoading.prototype, "indeterminate", void 0);
+__decorate([
+    (0,decorators_js_.property)({ attribute: true, type: Number })
+], TkLoading.prototype, "percent", void 0);
+TkLoading = __decorate([
+    (0,decorators_js_.customElement)("tk-loading")
+], TkLoading);
+
+
+
 /***/ }),
 
 /***/ 8899:
@@ -3583,7 +3752,7 @@ var __webpack_exports__ = {};
 /* harmony import */ var _icon_icon__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(8758);
 /* harmony import */ var _icon_icons__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(1587);
 /* harmony import */ var _list_item_list_item__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(722);
-/* harmony import */ var _loading_loading__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(4646);
+/* harmony import */ var _loading_loading__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(8895);
 /* harmony import */ var _navigation_navigation_bar__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(2667);
 /* harmony import */ var _navigation_navigation_item__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(3338);
 /* harmony import */ var _topbar_topbar__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(1593);