tinkiet 0.11.2 → 0.11.8

package/button/index.js

@@ -107,6 +107,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 [
@@ -122,14 +177,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) {
@@ -139,61 +194,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 })
@@ -286,7 +286,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;
@@ -324,6 +324,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 [
@@ -333,6 +360,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
@@ -341,8 +386,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
@@ -355,7 +406,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();
@@ -366,38 +418,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([
@@ -419,7 +445,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")
@@ -427,6 +453,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);

package/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 import "../box";
 export declare class TkCheckbox extends LitElement {
     static styles: import("lit").CSSResult;
@@ -11,11 +11,9 @@ export declare class TkCheckbox extends LitElement {
     private $input;
     constructor();
     render(): import("lit").TemplateResult<1>;
-    protected firstUpdated(): void;
-    protected updated(): void;
+    protected updated(changedProps: PropertyValues<this>): void;
     protected onKeyDown(e: KeyboardEvent): void;
     protected handleClick(): void;
-    private syncInput;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/checkbox/index.js

@@ -48,13 +48,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>
@@ -62,22 +86,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)
@@ -85,7 +102,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() {
@@ -94,18 +111,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) `
@@ -126,6 +136,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);
@@ -240,6 +253,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 [
@@ -255,14 +323,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) {
@@ -272,61 +340,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 })
@@ -403,7 +416,7 @@ var x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property) });
+module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property), ["query"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.query) });
 
 /***/ })
 

package/chip/chip.d.ts

@@ -15,7 +15,7 @@ export declare class TkChip extends LitElement {
     disabled: boolean;
     removable: boolean;
     static styles: import("lit").CSSResult;
-    private onRemove;
+    private readonly onRemove;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {