tinkiet 0.11.2 → 0.11.8

package/index.js

@@ -143,63 +143,69 @@ let TkListItem = class TkListItem extends box/* TkBox */.P {
         return (0,external_lit_.html) `
 			<slot name="before" @click=${this.handleClick}></slot>
 			<div id="content">
-				<slot></slot>
+				<slot @slotchange=${this.ensureAriaLabel}></slot>
 			</div>
 			<slot name="after" @click=${this.handleClick}></slot>
 			${this.href
             ? (0,external_lit_.html) `
-						<a tabindex="-1" id="ahref" href="${this.href}" target=${(0,if_defined_js_.ifDefined)(this.target)} rel="noreferrer" aria-label=${this.ariaLabel}></a>
+						<a tabindex="-1" id="ahref" href=${this.href} target=${(0,if_defined_js_.ifDefined)(this.target)} rel="noreferrer" aria-label=${this.ariaLabel}></a>
 				  `
-            : ""}
+            : external_lit_.nothing}
 		`;
     }
     constructor() {
         super();
         this.href = "";
         this.target = "";
-    }
-    firstUpdated() {
-        if (!this.ariaLabel && this.innerText)
-            this.ariaLabel = this.innerText;
+        this.ariaLabel = "";
+        this.onKeyDown = (e) => {
+            if (e.code === "Space" || e.code === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                this.click();
+            }
+        };
+        this.handleClick = (e) => {
+            const target = e.target;
+            // In case click cames from a slotted element with href attribute we stop propagation
+            if (target.tagName == "BUTTON" || target.tagName == "TK-BUTTON" || target.tagName == "TK-SWITCH" || target.tagName == "TK-CHECKBOX") {
+                return;
+            }
+            if (this.href && e.isTrusted && this.$ahref) {
+                e.stopPropagation();
+                e.preventDefault();
+                this.$ahref.click();
+            }
+        };
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener("keydown", this.onKeyDown.bind(this));
-        this.addEventListener("click", this.handleClick.bind(this));
+        this.ensureAriaLabel();
+        this.addEventListener("keydown", this.onKeyDown);
+        this.addEventListener("click", this.handleClick);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener("click", this.handleClick);
         this.removeEventListener("keydown", this.onKeyDown);
     }
-    onKeyDown(e) {
-        if (e.code === "Space" || e.code === "Enter") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.click();
-        }
-    }
-    handleClick(e) {
-        const target = e.target;
-        // In case click cames from a slotted element with href attribute we stop propagation
-        if (target.tagName == "BUTTON" || target.tagName == "TK-BUTTON" || target.tagName == "TK-SWITCH" || target.tagName == "TK-CHECKBOX") {
+    ensureAriaLabel() {
+        var _a;
+        if (this.ariaLabel)
             return;
-        }
-        if (this.href && e.isTrusted) {
-            e.stopPropagation();
-            e.preventDefault();
-            this.$ahref.click();
-        }
+        const text = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        if (text)
+            this.ariaLabel = text;
     }
 };
 __decorate([
-    (0,decorators_js_.property)({ attribute: true })
+    (0,decorators_js_.property)({ type: String, reflect: true })
 ], TkListItem.prototype, "href", void 0);
 __decorate([
-    (0,decorators_js_.property)({ attribute: true })
+    (0,decorators_js_.property)({ type: String, reflect: true })
 ], TkListItem.prototype, "target", void 0);
 __decorate([
-    (0,decorators_js_.property)({ attribute: "aria-label" })
+    (0,decorators_js_.property)({ attribute: "aria-label", reflect: true })
 ], TkListItem.prototype, "ariaLabel", void 0);
 __decorate([
     (0,decorators_js_.query)("#ahref")
@@ -608,13 +614,37 @@ let TkCheckbox = class TkCheckbox extends external_lit_.LitElement {
         this.onKeyDown = this.onKeyDown.bind(this);
     }
     render() {
+        var _a, _b;
+        const labelId = `${this._id}-label`;
+        const ariaChecked = this.indeterminate ? "mixed" : this.checked ? "true" : "false";
         const containerClasses = {
             state: true,
             disabled: this.disabled
         };
         return (0,external_lit_.html) `
+			<input
+				type="checkbox"
+				aria-hidden="true"
+				tabindex="-1"
+				style="display: none"
+				.id=${this._id}
+				.name=${(_a = this.name) !== null && _a !== void 0 ? _a : ""}
+				.value=${(_b = this.value) !== null && _b !== void 0 ? _b : "on"}
+				?checked=${this.checked}
+				?disabled=${this.disabled}
+				.indeterminate=${this.indeterminate}
+			/>
 			<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}>
+				<tk-box
+					ripple
+					tabindex="${this.disabled ? -1 : 0}"
+					class=${(0,class_map_js_.classMap)(containerClasses)}
+					role="checkbox"
+					aria-checked=${ariaChecked}
+					aria-disabled=${this.disabled ? "true" : "false"}
+					aria-labelledby=${labelId}
+					@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>
@@ -622,22 +652,15 @@ let TkCheckbox = class TkCheckbox extends external_lit_.LitElement {
 						</svg>
 					</div>
 				</tk-box>
-				<span class="label"><slot></slot></span>
+				<span class="label" id=${labelId}><slot></slot></span>
 			</tk-box>
 		`;
     }
-    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();
+    updated(changedProps) {
+        super.updated(changedProps);
+        if (changedProps.has("indeterminate") && this.$input) {
+            this.$input.indeterminate = this.indeterminate;
+        }
     }
     onKeyDown(e) {
         if (this.disabled)
@@ -645,7 +668,7 @@ let TkCheckbox = class TkCheckbox extends external_lit_.LitElement {
         if (e.code === "Space" || e.code === "Enter") {
             e.preventDefault();
             e.stopPropagation();
-            this.click();
+            this.handleClick();
         }
     }
     handleClick() {
@@ -654,18 +677,11 @@ let TkCheckbox = class TkCheckbox extends external_lit_.LitElement {
         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;
+        this.dispatchEvent(new CustomEvent("change", {
+            bubbles: true,
+            composed: true,
+            detail: { checked: this.checked, indeterminate: this.indeterminate }
+        }));
     }
 };
 TkCheckbox.styles = (0,external_lit_.css) `
@@ -686,6 +702,9 @@ __decorate([
 __decorate([
     (0,decorators_js_.property)({ attribute: true, type: Boolean, reflect: true })
 ], TkCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    (0,decorators_js_.query)("input[aria-hidden]")
+], TkCheckbox.prototype, "$input", void 0);
 TkCheckbox = __decorate([
     (0,decorators_js_.customElement)("tk-checkbox")
 ], TkCheckbox);
@@ -741,14 +760,14 @@ class TkFocusableBox extends box_box/* TkBox */.P {
     }
 }
 __decorate([
-    (0,decorators_js_.property)({ type: Boolean })
+    (0,decorators_js_.property)({ type: String })
 ], TkFocusableBox.prototype, "_id", void 0);
 __decorate([
     (0,decorators_js_.property)({ type: Boolean })
 ], 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{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}}");
+/* 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);overflow-y:scroll;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;
@@ -772,6 +791,7 @@ let TkAccordion = class TkAccordion extends TkFocusableBox {
     }
     constructor() {
         super();
+        this.name = "";
         this.checked = false;
         this.rippleHeader = false;
         this.handleClick = this.handleClick.bind(this);
@@ -781,10 +801,14 @@ let TkAccordion = class TkAccordion extends TkFocusableBox {
 			<tk-box margin="small">
 				<tk-box
 					@click=${this.handleClick}
+					@keydown=${this.onKeyDown}
 					?ripple=${this.rippleHeader}
 					class="header"
 					direction="row"
 					align-items="center"
+					role="button"
+					tabindex="0"
+					aria-expanded=${this.checked}
 				>
 					<tk-box class="before">
 						<slot name="before"></slot>
@@ -812,16 +836,21 @@ let TkAccordion = class TkAccordion extends TkFocusableBox {
     }
     updated(changed) {
         super.updated(changed);
-        this.syncInput();
+        if (changed.has("checked") || changed.has("name") || changed.has("disabled"))
+            this.syncInput();
     }
     onKeyDown(e) {
+        if (this.disabled)
+            return;
         if (e.code === "Space" || e.code === "Enter") {
             e.preventDefault();
             e.stopPropagation();
-            this.click();
+            this.handleClick();
         }
     }
     handleClick() {
+        if (this.disabled)
+            return;
         this.checked = !this.checked;
         if (this.checked && this.name)
             this.getRootNode()
@@ -1012,6 +1041,61 @@ let TkBox = class TkBox extends external_lit_.LitElement {
          * Activate ripple
          */
         this.ripple = false;
+        this.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();
+                    });
+                };
+            };
+        };
+        this.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();
+                    });
+                };
+            });
+        };
     }
     static get styles() {
         return [
@@ -1027,14 +1111,14 @@ let TkBox = class TkBox extends external_lit_.LitElement {
     }
     connectedCallback() {
         if (this.ripple) {
-            this.addEventListener("mousedown", this.showRipple.bind(this), { passive: true });
-            this.addEventListener("mouseup", this.hideRipple.bind(this), { passive: true });
+            this.addEventListener("mousedown", this.showRipple, { passive: true });
+            this.addEventListener("mouseup", this.hideRipple, { passive: true });
         }
         super.connectedCallback();
     }
     disconnectedCallback() {
         this.removeEventListener("mousedown", this.showRipple);
-        this.addEventListener("mouseup", this.hideRipple);
+        this.removeEventListener("mouseup", this.hideRipple);
         super.disconnectedCallback();
     }
     updated(props) {
@@ -1044,61 +1128,6 @@ let TkBox = class TkBox extends external_lit_.LitElement {
         // 	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 })
@@ -1159,6 +1188,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/class-map.js"
+var class_map_js_ = __webpack_require__(4955);
 ;// ./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}.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
@@ -1171,6 +1202,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 /**
  * Material-style Chip component.
  *
@@ -1188,14 +1220,21 @@ let TkChip = class TkChip extends external_lit_.LitElement {
         super(...arguments);
         this.disabled = false;
         this.removable = false;
-    }
-    onRemove() {
-        this.dispatchEvent(new CustomEvent("remove", { bubbles: true, composed: true }));
+        this.onRemove = (event) => {
+            event.stopPropagation();
+            if (this.disabled)
+                return;
+            this.dispatchEvent(new CustomEvent("remove", { bubbles: true, composed: true }));
+        };
     }
     render() {
+        const classes = {
+            chip: true,
+            disabled: this.disabled
+        };
         return (0,external_lit_.html) `
-      <div class="chip ${this.disabled ? "disabled" : ""}">
-        
+      <div class=${(0,class_map_js_.classMap)(classes)} aria-disabled=${this.disabled ? "true" : "false"}>
+
         <!-- 3. LEADING ICON (optional) -->
         <span class="leading">
           <slot name="leading"></slot>
@@ -1210,7 +1249,7 @@ let TkChip = class TkChip extends external_lit_.LitElement {
         <span class="trailing">
           <slot name="trailing">
             ${this.removable
-            ? (0,external_lit_.html) `<button class="remove" @click=${this.onRemove}>✕</button>`
+            ? (0,external_lit_.html) `<button class="remove" type="button" ?disabled=${this.disabled} aria-label="Remove" @click=${this.onRemove}>✕</button>`
             : ""}
           </slot>
         </span>
@@ -1221,10 +1260,10 @@ let TkChip = class TkChip extends external_lit_.LitElement {
 };
 TkChip.styles = (0,external_lit_.css) `${(0,external_lit_.unsafeCSS)(chip)}`;
 __decorate([
-    (0,decorators_js_.property)({ type: Boolean })
+    (0,decorators_js_.property)({ type: Boolean, reflect: true })
 ], TkChip.prototype, "disabled", void 0);
 __decorate([
-    (0,decorators_js_.property)({ type: Boolean })
+    (0,decorators_js_.property)({ type: Boolean, reflect: true })
 ], TkChip.prototype, "removable", void 0);
 TkChip = __decorate([
     (0,decorators_js_.customElement)("tk-chip")
@@ -1373,6 +1412,25 @@ let TkRadio = class TkRadio extends external_lit_.LitElement {
         this.required = false;
         this.disabled = false;
         this.readonly = false;
+        this.onKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.code === "Space" || e.code === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                this.click();
+            }
+        };
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.checked = !this.checked;
+            if (this.checked && this.name)
+                this.getRootNode()
+                    .querySelectorAll(`tk-radio[name="${this.name}"]`)
+                    .forEach(el => (el != this ? (el.checked = false) : null));
+            setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
+        };
     }
     render() {
         return (0,external_lit_.html) `
@@ -1402,8 +1460,8 @@ let TkRadio = class TkRadio extends external_lit_.LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener("click", this.handleClick.bind(this));
-        this.addEventListener("keydown", this.onKeyDown.bind(this));
+        this.addEventListener("click", this.handleClick);
+        this.addEventListener("keydown", this.onKeyDown);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -1413,25 +1471,6 @@ let TkRadio = class TkRadio extends external_lit_.LitElement {
     firstUpdated() {
         this.appendChild(this.$input);
     }
-    onKeyDown(e) {
-        if (this.disabled)
-            return;
-        if (e.code === "Space" || e.code === "Enter") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.click();
-        }
-    }
-    handleClick() {
-        if (this.disabled)
-            return;
-        this.checked = !this.checked;
-        if (this.checked && this.name)
-            this.getRootNode()
-                .querySelectorAll(`tk-radio[name="${this.name}"]`)
-                .forEach(el => (el != this ? (el.checked = false) : null));
-        setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
-    }
 };
 TkRadio.styles = (0,external_lit_.css) `
 		${(0,external_lit_.unsafeCSS)(radio_radio)}
@@ -2009,7 +2048,7 @@ var external_lit_ = __webpack_require__(2927);
 // EXTERNAL MODULE: external "lit/decorators.js"
 var decorators_js_ = __webpack_require__(8899);
 ;// ./tinkiet/drawer/drawer.scss
-/* harmony default export */ const drawer = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{display:block;height:100%;width:100%;position:relative;overflow:hidden;background-color:hsl(var(--surface))}.drawer{display:grid;grid-template-columns:var(--drawer-width, 256px) 10px;grid-template-rows:auto 1fr auto;grid-template-areas:\"header swipe\" \"content swipe\" \"footer swipe\";position:absolute;top:0;bottom:0;transform:translateX(calc(-100% + 10px));transition:transform cubic-bezier(0.4, 0, 0.2, 1) var(--transition-duration-medium, 180ms);will-change:transform;touch-action:pan-y;z-index:var(--drawer-z-index, 200);background-color:hsl(var(--surface))}.drawer .drawer-header{grid-area:header}.drawer .drawer-content{grid-area:content;overflow:auto}.drawer .drawer-footer{grid-area:footer}.drawer .drawer-swipe{grid-area:swipe;background-color:rgba(0,0,0,0)}:host([right]) .drawer{right:0;transform:translateX(calc(100% + 10px))}.overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:var(--drawer-overlay-z-index, 200);background-color:rgba(0,0,0,.5);display:none}.container{transition:padding cubic-bezier(0.4, 0, 0.2, 1) var(--transition-duration-slow, 250ms);overflow:auto;height:100%}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width, 256px)}:host([open][over]) .drawer{background-color:hsl(var(--surface-container-low));box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)}:host([open][over]) .container{padding-left:0}:host([open][over]) .overlay{display:block}@media(max-width: var(--drawer-trigger-width, 400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}");
+/* harmony default export */ const drawer = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{display:block;height:100%;width:100%;position:relative;overflow:hidden;background-color:hsl(var(--surface))}.drawer{display:grid;grid-template-columns:var(--drawer-width, 256px) 10px;grid-template-rows:auto 1fr auto;grid-template-areas:\"header swipe\" \"content swipe\" \"footer swipe\";position:absolute;top:0;bottom:0;transform:translateX(calc(-100% + 10px));transition:transform cubic-bezier(0.4, 0, 0.2, 1) var(--transition-duration-medium, 180ms);will-change:transform;touch-action:pan-y;z-index:var(--drawer-z-index, 200);background-color:hsl(var(--surface))}.drawer .drawer-header{grid-area:header}.drawer .drawer-content{grid-area:content;overflow:auto;position:relative;transition:opacity var(--transition-duration-medium, 180ms) ease}.drawer .drawer-content::before,.drawer .drawer-content::after{content:\"\";position:sticky;display:block;height:14px;pointer-events:none;opacity:0;transition:opacity var(--transition-duration-medium, 180ms) ease;left:0;right:0;width:100%;z-index:1}.drawer .drawer-content::before{top:0;margin-top:-14px;background:linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0))}.drawer .drawer-content::after{bottom:0;margin-bottom:-14px;background:linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0))}.drawer .drawer-content.has-top-shadow::before{opacity:1}.drawer .drawer-content.has-bottom-shadow::after{opacity:1}.drawer .drawer-footer{grid-area:footer}.drawer .drawer-swipe{grid-area:swipe;background-color:rgba(0,0,0,0)}:host([right]) .drawer{right:0;transform:translateX(calc(100% + 10px))}.overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:var(--drawer-overlay-z-index, 200);background-color:rgba(0,0,0,.5);display:none}.container{transition:padding cubic-bezier(0.4, 0, 0.2, 1) var(--transition-duration-slow, 250ms);overflow:auto;height:100%}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width, 256px)}:host([open][over]) .drawer{background-color:hsl(var(--surface-container-low));box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)}:host([open][over]) .container{padding-left:0}:host([open][over]) .overlay{display:block}@media(max-width: var(--drawer-trigger-width, 400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}");
 ;// ./tinkiet/drawer/drawer.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;
@@ -2020,43 +2059,47 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
-
 let TkDrawer = class TkDrawer extends external_lit_.LitElement {
     constructor() {
         super(...arguments);
-        this._open = false;
+        this.open = false;
         this.over = false;
         this.right = false;
         this.swipeable = false;
+        this.contentScrolled = false;
+        this.contentHasBottomShadow = false;
+        this.overMediaQueryListener = (e) => {
+            e.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
+        };
+        this.handleOverlayClick = () => {
+            this.hide();
+        };
+        this.handleContentScroll = () => {
+            if (!this.$content)
+                return;
+            const { scrollTop, scrollHeight, clientHeight } = this.$content;
+            this.contentScrolled = scrollTop > 0;
+            const atBottom = Math.ceil(scrollTop + clientHeight) >= scrollHeight;
+            this.contentHasBottomShadow = !atBottom && scrollHeight > clientHeight;
+        };
         this.swipeX = 0;
         this.swipeY = 0;
         this.isHorizontalSwipe = false;
     }
-    set open(value) {
-        if (value === this._open)
-            return;
-        const oldValue = this._open;
-        this._open = value;
-        this.requestUpdate("open", oldValue);
-        if (this._open)
-            this.dispatchEvent(new Event("did-show"));
-        if (!this._open)
-            this.dispatchEvent(new Event("did-close"));
-    }
-    get open() {
-        return this._open;
-    }
     render() {
         return (0,external_lit_.html) `
 			<div class="container">
 				<slot name="drawer-container"></slot>
 			</div>
-			<div class="overlay" @click=${() => (this.open = false)}></div>
+			<div class="overlay" @click=${this.handleOverlayClick}></div>
 			<div class="drawer" @touchstart=${this.touchStart} @touchmove=${this.touchMove} @touchend=${this.touchEnd}>
 				<div class="drawer-header">
 					<slot name="drawer-header"></slot>
 				</div>
-				<div class="drawer-content">
+				<div
+					class="drawer-content ${this.contentScrolled ? "has-top-shadow" : ""} ${this.contentHasBottomShadow ? "has-bottom-shadow" : ""}"
+					@scroll=${this.handleContentScroll}
+				>
 					<slot name="drawer-content"></slot>
 				</div>
 				<div class="drawer-footer">
@@ -2067,28 +2110,39 @@ let TkDrawer = class TkDrawer extends external_lit_.LitElement {
 			
 		`;
     }
+    firstUpdated() {
+        if (this.overQuery)
+            this.overMediaQuery();
+        if (this.openQuery && window.matchMedia(this.openQuery).matches)
+            this.show();
+        this.handleContentScroll();
+    }
     updated(props) {
-        if (props.has("overQuery"))
+        super.updated(props);
+        if (props.has("overQuery") && this.overQuery)
             this.overMediaQuery();
-        if (props.has("openQuery")) {
-            if (window.matchMedia(this.openQuery).matches)
-                this.show();
-        }
-        if (props.has("open") && this.swipeable) {
-            requestAnimationFrame(_ => {
-                this.$drawer.removeAttribute('style');
-            });
+        if (props.has("openQuery") && this.openQuery && window.matchMedia(this.openQuery).matches)
+            this.show();
+        if (props.has("open")) {
+            if (this.open) {
+                this.dispatchEvent(new CustomEvent("did-show", { bubbles: true }));
+            }
+            else if (props.get("open") === true) {
+                this.dispatchEvent(new CustomEvent("did-close", { bubbles: true }));
+            }
+            if (this.swipeable && this.$drawer) {
+                requestAnimationFrame(() => {
+                    this.$drawer.removeAttribute("style");
+                });
+            }
         }
     }
     overMediaQuery() {
         if (this.mql)
-            this.mql.removeEventListener("change", this.overMediaQueryListener.bind(this));
+            this.mql.removeEventListener("change", this.overMediaQueryListener);
         this.mql = window.matchMedia(this.overQuery);
         this.mql.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
-        this.mql.addEventListener("change", this.overMediaQueryListener.bind(this));
-    }
-    overMediaQueryListener(e) {
-        e.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
+        this.mql.addEventListener("change", this.overMediaQueryListener);
     }
     hideIfOver() {
         var _a;
@@ -2105,53 +2159,59 @@ let TkDrawer = class TkDrawer extends external_lit_.LitElement {
         this.open = !this.open;
     }
     touchStart(event) {
-        if (!this.swipeable)
+        if (!this.swipeable || !this.$drawer)
             return;
         this.$drawer.style.transition = "transform 0ms ease";
         this.swipeX = event.touches[0].clientX;
         this.swipeY = event.touches[0].clientY;
     }
     touchMove(event) {
-        if (!this.swipeable)
+        if (!this.swipeable || !this.$drawer)
             return;
         const deltaX = event.touches[0].clientX - this.swipeX;
         const deltaY = event.touches[0].clientY - this.swipeY;
         this.isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);
         if (!this.isHorizontalSwipe)
             return;
-        var x = this.open ?
-            deltaX > 0 ? 0 : deltaX :
-            deltaX < 0 ? 0 : deltaX;
-        var transformString;
-        this.open ?
-            transformString = "translateX(" + x + "px)" :
-            transformString = `translateX(min(calc(-100% + 10px + ${x}px), 0px)`;
-        requestAnimationFrame(_ => {
+        const x = this.open
+            ? deltaX > 0 ? 0 : deltaX
+            : deltaX < 0 ? 0 : deltaX;
+        const transformString = this.open
+            ? `translateX(${x}px)`
+            : `translateX(min(calc(-100% + 10px + ${x}px), 0px))`;
+        requestAnimationFrame(() => {
+            if (!this.$drawer)
+                return;
             this.$drawer.style.transform = transformString;
         });
     }
     touchEnd(event) {
-        if (!this.swipeable)
+        if (!this.swipeable || !this.$drawer)
             return;
-        requestAnimationFrame(_ => {
-            this.$drawer.removeAttribute('style');
+        requestAnimationFrame(() => {
+            var _a;
+            (_a = this.$drawer) === null || _a === void 0 ? void 0 : _a.removeAttribute("style");
         });
         const deltaX = event.changedTouches[0].clientX - this.swipeX;
         if (this.isHorizontalSwipe && this.open)
             this.open = -50 > deltaX ? false : true;
         else if (this.isHorizontalSwipe && !this.open) {
-            console.log("bbb", deltaX, 50 < Math.abs(deltaX) ? true : false);
             this.open = 50 < deltaX ? true : false;
         }
         this.isHorizontalSwipe = false;
     }
+    disconnectedCallback() {
+        if (this.mql)
+            this.mql.removeEventListener("change", this.overMediaQueryListener);
+        super.disconnectedCallback();
+    }
 };
 TkDrawer.styles = (0,external_lit_.css) `
 		${(0,external_lit_.unsafeCSS)(drawer)}
 	`;
 __decorate([
     (0,decorators_js_.property)({ type: Boolean, reflect: true })
-], TkDrawer.prototype, "open", null);
+], TkDrawer.prototype, "open", void 0);
 __decorate([
     (0,decorators_js_.property)({ type: Boolean, reflect: true })
 ], TkDrawer.prototype, "over", void 0);
@@ -2170,6 +2230,15 @@ __decorate([
 __decorate([
     (0,decorators_js_.query)("div.drawer")
 ], TkDrawer.prototype, "$drawer", void 0);
+__decorate([
+    (0,decorators_js_.query)("div.drawer-content")
+], TkDrawer.prototype, "$content", void 0);
+__decorate([
+    (0,decorators_js_.state)()
+], TkDrawer.prototype, "contentScrolled", void 0);
+__decorate([
+    (0,decorators_js_.state)()
+], TkDrawer.prototype, "contentHasBottomShadow", void 0);
 __decorate([
     (0,decorators_js_.eventOptions)({ passive: true })
 ], TkDrawer.prototype, "touchStart", null);
@@ -2318,7 +2387,7 @@ var box = __webpack_require__(3433);
 // EXTERNAL MODULE: ./tinkiet/utils/unique.ts
 var unique = __webpack_require__(3770);
 ;// ./tinkiet/button/button.scss
-/* harmony default export */ const button_button = ("*{-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;justify-content:center;flex-shrink:0;flex-direction:row;align-items:center;position:relative;cursor:pointer;text-align:center;text-decoration:none;vertical-align:middle;text-overflow:ellipsis;user-select:none;overflow:hidden;border-radius:20px;height:40px;width:40px;color:hsl(var(--primary))}:host tk-icon{width:24px;height:24px}:host([extended]){width:auto}:host([extended]) .content{display:flex;align-items:center;pointer-events:none;font-family:Roboto,sans-serif;line-height:20px;font-size:var(--font-size, 14px);font-weight:500;margin:0 24px}:host([extended]) .content.has-icon{margin:0 24px 0 8px}:host([extended]) tk-icon{margin-left:16px;width:18px;height:18px}:host(:hover),:host(:focus){background-color:hsla(var(--primary), 0.3);outline:none}:host([elevated]){background-color:hsl(var(--surface-container-low));color:hsl(var(--primary));box-shadow:0px 1px 2px 0px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}:host([elevated]:hover),:host([elevated]:focus){box-shadow:0px 1px 2px 0px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);background-color:hsl(var(--surface-container-high));outline:none}:host([filled]){background-color:hsl(var(--primary));color:hsl(var(--on-primary))}:host([filled]:hover){box-shadow:0px 1px 2px 0px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15);background-color:hsla(var(--primary), 0.6)}:host([filled]:focus){background-color:hsla(var(--primary), 0.6);outline:none}:host([tonal]){background-color:hsl(var(--secondary-container));color:hsl(var(--on-secondary-container))}:host([tonal]:hover){box-shadow:0px 1px 2px 0px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15);background-color:hsla(var(--on-secondary-container), 0.3)}:host([tonal]:focus){background-color:hsla(var(--on-secondary-container), 0.3);outline:none}:host([outlined]){background-color:rgba(0,0,0,0);border:solid 1px hsl(var(--outline));color:hsl(var(--primary))}:host([outlined]:hover){background-color:hsla(var(--primary), 0.08);color:hsl(var(--primary))}:host([outlined]:focus){background-color:hsla(var(--primary), 0.12);border-color:hsl(var(--primary));outline:none}:host([fab]){background-color:hsl(var(--primary));display:inline-flex;justify-content:center;align-items:center;color:hsl(var(--on-primary));box-shadow:0px 1px 3px 0px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);width:56px;height:56px;padding:12px;border-radius:16px}:host([fab]) tk-icon{margin-left:0;width:24px;height:24px}:host([fab]) .content{margin:0}:host([fab][extended]){width:auto;min-width:80px}:host([fab][extended]) .content{margin:0 24px}:host([fab][extended]) .content.has-icon{margin:0 24px 0 8px}:host([fab][extended]) tk-icon{margin-left:16px}:host([fab]:hover){background-color:hsla(var(--on-primary-container), 0.3)}:host([fab]:focus){box-shadow:0px 1px 3px 0px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);background-color:hsla(var(--on-primary-container), 0.3);outline:none}:host([fab][small]){width:40px;height:40px;border-radius:12px}:host([fab][small]) tk-icon{width:24px;height:24px}:host([fab][large]){width:96px;height:96px;border-radius:28px}:host([fab][large]) tk-icon{width:36px;height:36px}:host([disabled]){pointer-events:none;cursor:not-allowed;background-color:hsla(var(--on-surface), 0.12);box-shadow:none;opacity:.5;color:hsl(var(--on-surface))}");
+/* harmony default export */ const button_button = ("*{-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;justify-content:center;flex-shrink:0;flex-direction:row;align-items:center;position:relative;cursor:pointer;text-align:center;text-decoration:none;vertical-align:middle;text-overflow:ellipsis;user-select:none;overflow:hidden;border-radius:20px;height:40px;width:40px;color:hsl(var(--primary))}:host tk-icon{width:24px;height:24px}.badge-in,.badge-out{display:none}:host([has-badge-in]) .badge-in,:host([has-badge-out]) .badge-out{display:inline-flex;align-items:center}.badge-in{align-items:center;margin:0 12px 0 8px}.badge-out{position:absolute;top:0;right:0;transform:translate(50%, -50%);pointer-events:none}:host([extended]){width:auto}:host([extended]) .content{display:flex;align-items:center;pointer-events:none;font-family:Roboto,sans-serif;line-height:20px;font-size:var(--font-size, 14px);font-weight:500;margin:0 24px}:host([extended]) .content.has-icon{margin:0 24px 0 8px}:host([extended]) tk-icon{margin-left:16px;width:18px;height:18px}:host(:hover),:host(:focus){background-color:hsla(var(--primary), 0.3);outline:none}:host([elevated]){background-color:hsl(var(--surface-container-low));color:hsl(var(--primary));box-shadow:0px 1px 2px 0px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}:host([elevated]:hover),:host([elevated]:focus){box-shadow:0px 1px 2px 0px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);background-color:hsl(var(--surface-container-high));outline:none}:host([filled]){background-color:hsl(var(--primary));color:hsl(var(--on-primary))}:host([filled]:hover){box-shadow:0px 1px 2px 0px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15);background-color:hsla(var(--primary), 0.6)}:host([filled]:focus){background-color:hsla(var(--primary), 0.6);outline:none}:host([tonal]){background-color:hsl(var(--secondary-container));color:hsl(var(--on-secondary-container))}:host([tonal]:hover){box-shadow:0px 1px 2px 0px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15);background-color:hsla(var(--on-secondary-container), 0.3)}:host([tonal]:focus){background-color:hsla(var(--on-secondary-container), 0.3);outline:none}:host([outlined]){background-color:rgba(0,0,0,0);border:solid 1px hsl(var(--outline));color:hsl(var(--primary))}:host([outlined]:hover){background-color:hsla(var(--primary), 0.08);color:hsl(var(--primary))}:host([outlined]:focus){background-color:hsla(var(--primary), 0.12);border-color:hsl(var(--primary));outline:none}:host([fab]){background-color:hsl(var(--primary));display:inline-flex;justify-content:center;align-items:center;color:hsl(var(--on-primary));box-shadow:0px 1px 3px 0px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);width:56px;height:56px;padding:12px;border-radius:16px}:host([fab]) tk-icon{margin-left:0;width:24px;height:24px}:host([fab]) .content{margin:0}:host([fab][extended]){width:auto;min-width:80px}:host([fab][extended]) .content{margin:0 24px}:host([fab][extended]) .content.has-icon{margin:0 24px 0 8px}:host([fab][extended]) tk-icon{margin-left:16px}:host([fab]:hover){background-color:hsla(var(--on-primary-container), 0.3)}:host([fab]:focus){box-shadow:0px 1px 3px 0px rgba(0,0,0,.3),0px 4px 8px 3px rgba(0,0,0,.15);background-color:hsla(var(--on-primary-container), 0.3);outline:none}:host([fab][small]){width:40px;height:40px;border-radius:12px}:host([fab][small]) tk-icon{width:24px;height:24px}:host([fab][large]){width:96px;height:96px;border-radius:28px}:host([fab][large]) tk-icon{width:36px;height:36px}:host([disabled]){pointer-events:none;cursor:not-allowed;background-color:hsla(var(--on-surface), 0.12);box-shadow:none;opacity:.5;color:hsl(var(--on-surface))}");
 ;// ./tinkiet/button/button.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;
@@ -2356,6 +2425,33 @@ let TkButton = class TkButton extends box/* TkBox */.P {
         this.disabled = false;
         this.fab = false;
         this.ripple = true;
+        this.onKeyDown = (e) => {
+            if (e.code === "Space" || e.code === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                this.click();
+            }
+        };
+        this.handleClick = (e) => {
+            var _a;
+            if (this.href && e.isTrusted) {
+                e.stopPropagation();
+                e.preventDefault();
+                this.$ahref.click();
+            }
+            else if ((e.isTrusted && this.type == "submit") || this.type == "reset") {
+                (_a = this.querySelector("button")) === null || _a === void 0 ? void 0 : _a.click();
+            }
+        };
+        this.slotChanged = () => {
+            this.toggleAttributeForSlot(this.$defaultSlot, "extended");
+        };
+        this.badgeInChanged = () => {
+            this.toggleAttributeForSlot(this.$badgeInSlot, "has-badge-in");
+        };
+        this.badgeOutChanged = () => {
+            this.toggleAttributeForSlot(this.$badgeOutSlot, "has-badge-out");
+        };
     }
     static get styles() {
         return [
@@ -2365,6 +2461,24 @@ let TkButton = class TkButton extends box/* TkBox */.P {
 			`
         ];
     }
+    hasSlotContent(slot) {
+        var _a;
+        const nodes = (_a = slot === null || slot === void 0 ? void 0 : slot.assignedNodes({ flatten: true })) !== null && _a !== void 0 ? _a : [];
+        return nodes.some(node => {
+            var _a;
+            if (node.nodeType === Node.TEXT_NODE)
+                return !!((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim());
+            return node.nodeType !== Node.COMMENT_NODE;
+        });
+    }
+    toggleAttributeForSlot(slot, attribute) {
+        if (this.hasSlotContent(slot)) {
+            this.setAttribute(attribute, "");
+        }
+        else {
+            this.removeAttribute(attribute);
+        }
+    }
     render() {
         return (0,external_lit_.html) `
 			${this.iconPath
@@ -2373,8 +2487,14 @@ let TkButton = class TkButton extends box/* TkBox */.P {
 				  `
             : ""}
 
-			<div class="content ${this.iconPath ? "has-icon" : ""}" @slotchange=${this.slotChanged}>
-				<slot></slot>
+			<div class="content ${this.iconPath ? "has-icon" : ""}">
+				<slot @slotchange=${this.slotChanged}></slot>
+			</div>
+			<div class="badge-in">
+				<slot name="badge-in" @slotchange=${this.badgeInChanged}></slot>
+			</div>
+			<div class="badge-out">
+				<slot name="badge-out" @slotchange=${this.badgeOutChanged}></slot>
 			</div>
 
 			${this.href
@@ -2387,7 +2507,8 @@ let TkButton = class TkButton extends box/* TkBox */.P {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener("click", this.handleClick.bind(this));
+        this.addEventListener("click", this.handleClick);
+        this.addEventListener("keydown", this.onKeyDown);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -2398,38 +2519,12 @@ let TkButton = class TkButton extends box/* TkBox */.P {
         this.tabIndex = this.disabled ? -1 : 0;
         super.updated(props);
     }
-    onKeyDown(e) {
-        if (e.code === "Space" || e.code === "Enter") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.click();
-        }
-    }
     firstUpdated() {
         if (this.type == "submit" || this.type == "reset")
             this.appendChild(this.$button);
-    }
-    handleClick(e) {
-        var _a;
-        if (this.href && e.isTrusted) {
-            e.stopPropagation();
-            e.preventDefault();
-            this.$ahref.click();
-        }
-        else if ((e.isTrusted && this.type == "submit") || this.type == "reset") {
-            (_a = this.querySelector("button")) === null || _a === void 0 ? void 0 : _a.click();
-        }
-    }
-    slotChanged() {
-        var _a;
-        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-        const elements = slot === null || slot === void 0 ? void 0 : slot.assignedNodes({ flatten: true });
-        if (elements && elements.length > 0) {
-            this.setAttribute('extended', '');
-        }
-        else {
-            this.removeAttribute('extended');
-        }
+        this.slotChanged();
+        this.badgeInChanged();
+        this.badgeOutChanged();
     }
 };
 __decorate([
@@ -2451,7 +2546,7 @@ __decorate([
     (0,decorators_js_.property)({ type: String })
 ], TkButton.prototype, "iconPath", void 0);
 __decorate([
-    (0,decorators_js_.property)()
+    (0,decorators_js_.property)({ type: Boolean })
 ], TkButton.prototype, "ripple", void 0);
 __decorate([
     (0,decorators_js_.query)("#ahref")
@@ -2459,6 +2554,15 @@ __decorate([
 __decorate([
     (0,decorators_js_.query)("button")
 ], TkButton.prototype, "$button", void 0);
+__decorate([
+    (0,decorators_js_.query)("slot:not([name])")
+], TkButton.prototype, "$defaultSlot", void 0);
+__decorate([
+    (0,decorators_js_.query)('slot[name="badge-in"]')
+], TkButton.prototype, "$badgeInSlot", void 0);
+__decorate([
+    (0,decorators_js_.query)('slot[name="badge-out"]')
+], TkButton.prototype, "$badgeOutSlot", void 0);
 TkButton = __decorate([
     (0,decorators_js_.customElement)("tk-button")
 ], TkButton);
@@ -2509,6 +2613,21 @@ let TkSwitch = class TkSwitch extends external_lit_.LitElement {
         this.required = false;
         this.disabled = false;
         this.readonly = false;
+        this.onKeyDown = (e) => {
+            if (e.code === "Space" || e.code === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                this.click();
+            }
+        };
+        this.handleClick = () => {
+            this.checked = !this.checked;
+            if (this.checked && this.name)
+                this.getRootNode()
+                    .querySelectorAll(`tk-radio[name="${this.name}"]`)
+                    .forEach(el => (el != this ? (el.checked = false) : null));
+            setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
+        };
     }
     render() {
         return (0,external_lit_.html) `
@@ -2538,8 +2657,8 @@ let TkSwitch = class TkSwitch extends external_lit_.LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener("click", this.handleClick.bind(this));
-        this.addEventListener("keydown", this.onKeyDown.bind(this));
+        this.addEventListener("click", this.handleClick);
+        this.addEventListener("keydown", this.onKeyDown);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -2549,21 +2668,6 @@ let TkSwitch = class TkSwitch extends external_lit_.LitElement {
     firstUpdated() {
         this.appendChild(this.$input);
     }
-    onKeyDown(e) {
-        if (e.code === "Space" || e.code === "Enter") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.click();
-        }
-    }
-    handleClick() {
-        this.checked = !this.checked;
-        if (this.checked && this.name)
-            this.getRootNode()
-                .querySelectorAll(`tk-radio[name="${this.name}"]`)
-                .forEach(el => (el != this ? (el.checked = false) : null));
-        setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
-    }
 };
 TkSwitch.styles = (0,external_lit_.css) `
 		${(0,external_lit_.unsafeCSS)(switch_switch)}
@@ -2981,8 +3085,13 @@ let TkTheme = class TkTheme extends external_lit_.LitElement {
         this.error = "#B3261E";
         this.neutral = "#5E5F5C";
         this.neutralVariant = "#5c6057";
-        this.forceBody = false;
         this.inverted = false;
+        this.primary_hsl = [];
+        this.secondary_hsl = [];
+        this.tertiary_hsl = [];
+        this.error_hsl = [];
+        this.neutral_hsl = [];
+        this.neutral_variant_hsl = [];
     }
     render() {
         return (0,external_lit_.html) `
@@ -2992,6 +3101,17 @@ let TkTheme = class TkTheme extends external_lit_.LitElement {
     firstUpdated(_changedProperties) {
         this.setThemeColor();
     }
+    updated(changedProps) {
+        if (changedProps.has("primary") ||
+            changedProps.has("secondary") ||
+            changedProps.has("tertiary") ||
+            changedProps.has("error") ||
+            changedProps.has("neutral") ||
+            changedProps.has("neutralVariant")) {
+            this.setThemeColor();
+        }
+        super.updated(changedProps);
+    }
     hexToHSL(hex) {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
         if (result == null)
@@ -3028,8 +3148,11 @@ let TkTheme = class TkTheme extends external_lit_.LitElement {
         this.error_hsl = this.hexToHSL(this.error);
         this.neutral_hsl = this.hexToHSL(this.neutral);
         this.neutral_variant_hsl = this.hexToHSL(this.neutralVariant);
-        const style = document.createElement("style");
-        style.innerHTML = `
+        if (!this.styleEl) {
+            this.styleEl = document.createElement("style");
+            document.body.appendChild(this.styleEl);
+        }
+        this.styleEl.innerHTML = `
 			:root {
 				--primary-h: ${this.primary_hsl[0]};
 				--primary-s: ${this.primary_hsl[1]};
@@ -3051,7 +3174,6 @@ let TkTheme = class TkTheme extends external_lit_.LitElement {
 				--neutral-variant-l: ${this.neutral_variant_hsl[2]};
 			}
 		`;
-        document.body.appendChild(style);
     }
 };
 TkTheme.styles = (0,external_lit_.css) `
@@ -3075,30 +3197,9 @@ __decorate([
 __decorate([
     (0,decorators_js_.property)()
 ], TkTheme.prototype, "neutralVariant", void 0);
-__decorate([
-    (0,decorators_js_.property)({ type: Boolean, attribute: "force-body", reflect: true })
-], TkTheme.prototype, "forceBody", void 0);
 __decorate([
     (0,decorators_js_.property)({ type: Boolean, attribute: true, reflect: true })
 ], TkTheme.prototype, "inverted", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "primary_hsl", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "secondary_hsl", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "tertiary_hsl", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "error_hsl", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "neutral_hsl", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "neutral_variant_hsl", void 0);
 TkTheme = __decorate([
     (0,decorators_js_.customElement)("tk-theme")
 ], TkTheme);
@@ -3172,29 +3273,43 @@ let TkIcon = class TkIcon extends box/* TkBox */.P {
 		`;
     }
     updated(props) {
-        if (props.has("name") && this.name)
+        if ((props.has("name") || props.has("library")) && this.name && !this.path)
             this.loadIcon();
     }
     loadIcon() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (!this.name || this.path) {
+                this.svg = "";
+                return;
+            }
+            const name = this.name;
+            const library = this.library;
             const resolver = this.library
                 ? document.querySelector(`tk-icons[library=${this.library}]`)
                 : document.querySelector("tk-icons");
-            if (resolver) {
-                this.svg = yield fetch(resolver.resolve(this.name))
-                    .then(response => {
-                    return response.blob().then(blob => {
-                        return {
-                            contentType: response.headers.get("Content-Type"),
-                            raw: blob
-                        };
-                    });
-                })
-                    .then(data => {
-                    if (data.contentType && /svg/.test(data.contentType))
-                        return data.raw.text();
-                    return "";
-                });
+            if (!resolver) {
+                this.svg = "";
+                return;
+            }
+            try {
+                const response = yield fetch(resolver.resolve(name));
+                if (!response.ok) {
+                    this.svg = "";
+                    return;
+                }
+                const contentType = response.headers.get("Content-Type") || "";
+                if (!/svg/i.test(contentType)) {
+                    this.svg = "";
+                    return;
+                }
+                const svg = yield response.text();
+                // Ensure the props are still current to avoid race conditions
+                if (name === this.name && library === this.library && !this.path) {
+                    this.svg = svg;
+                }
+            }
+            catch (_e) {
+                this.svg = "";
             }
         });
     }
@@ -3209,7 +3324,7 @@ __decorate([
     (0,decorators_js_.property)()
 ], TkIcon.prototype, "path", void 0);
 __decorate([
-    (0,decorators_js_.property)()
+    (0,decorators_js_.state)()
 ], TkIcon.prototype, "svg", void 0);
 TkIcon = __decorate([
     (0,decorators_js_.customElement)("tk-icon")
@@ -3561,24 +3676,44 @@ let TkDialog = class TkDialog extends external_lit_.LitElement {
         this.modal = false;
         this.open = false;
         this.blurOverlay = false;
+        this.handleKeyDown = (event) => {
+            if (event.key === "Escape" && this.open && !this.modal)
+                this.hide();
+        };
+        this.onOverlayClick = () => {
+            if (!this.modal)
+                this.hide();
+        };
     }
     render() {
         return (0,external_lit_.html) `
 			${this.open
             ? (0,external_lit_.html) `
-						<div class="overlay ${this.blurOverlay ? "blur" : ""}" @click=${() => (this.modal ? null : this.hide())}></div>
-						<div class="container">
+						<div class="overlay ${this.blurOverlay ? "blur" : ""}" @click=${this.onOverlayClick}></div>
+						<div class="container" role="dialog" aria-modal=${this.modal ? "true" : "false"}>
 							<slot></slot>
 						</div>
 				  `
-            : ""}
+            : external_lit_.nothing}
 		`;
     }
-    updated(_changedProperties) {
-        if (_changedProperties.has("open") && this.open)
-            this.dispatchEvent(new Event("did-show"));
-        if (_changedProperties.has("open") && _changedProperties.get("open") == true && !this.open)
-            this.dispatchEvent(new Event("did-close"));
+    updated(changedProps) {
+        if (changedProps.has("open")) {
+            if (this.open) {
+                this.dispatchEvent(new CustomEvent("did-show", { bubbles: true }));
+            }
+            else if (changedProps.get("open") === true) {
+                this.dispatchEvent(new CustomEvent("did-close", { bubbles: true }));
+            }
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("keydown", this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("keydown", this.handleKeyDown);
+        super.disconnectedCallback();
     }
     show() {
         this.open = true;