tinkiet 0.11.2 → 0.11.8

package/chip/index.js

@@ -1,4 +1,5 @@
 import * as __WEBPACK_EXTERNAL_MODULE_lit__ from "lit";
+import * as __WEBPACK_EXTERNAL_MODULE_lit_directives_class_map_js_2f88e643__ from "lit/directives/class-map.js";
 import * as __WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__ from "lit/decorators.js";
 /******/ var __webpack_modules__ = ({
 
@@ -26,6 +27,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
@@ -38,6 +41,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 /**
  * Material-style Chip component.
  *
@@ -55,14 +59,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>
@@ -77,7 +88,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>
@@ -88,10 +99,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")
@@ -99,6 +110,17 @@ TkChip = __decorate([
 
 
 
+/***/ }),
+
+/***/ 4955:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["classMap"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_directives_class_map_js_2f88e643__.classMap) });
+
 /***/ }),
 
 /***/ 8899:

package/dialog/dialog.d.ts

@@ -4,9 +4,13 @@ export declare class TkDialog extends LitElement {
     modal: boolean;
     open: boolean;
     blurOverlay: boolean;
-    private resolve;
+    private resolve?;
+    private handleKeyDown;
+    private onOverlayClick;
     render(): import("lit").TemplateResult<1>;
-    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected updated(changedProps: PropertyValueMap<this>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     show(): Promise<string | boolean | null>;
     hide(value?: boolean | string | null): void;
 }

package/dialog/index.js

@@ -9,7 +9,7 @@ var x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitElement), ["css"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.css), ["html"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.html), ["unsafeCSS"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.unsafeCSS) });
+module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitElement), ["css"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.css), ["html"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.html), ["nothing"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.nothing), ["unsafeCSS"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.unsafeCSS) });
 
 /***/ }),
 
@@ -55,24 +55,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;

package/drawer/drawer.d.ts

@@ -1,20 +1,24 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 export declare class TkDrawer extends LitElement {
     static styles: import("lit").CSSResult;
-    _open: boolean;
-    set open(value: boolean);
-    get open(): boolean;
+    open: boolean;
     over: boolean;
     openQuery: string;
     overQuery: string;
     right: boolean;
     swipeable: boolean;
     private $drawer;
+    private $content;
+    private contentScrolled;
+    private contentHasBottomShadow;
     private mql;
+    private overMediaQueryListener;
+    private handleOverlayClick;
     render(): import("lit").TemplateResult<1>;
-    updated(props: any): void;
+    protected firstUpdated(): void;
+    updated(props: PropertyValues<this>): void;
     protected overMediaQuery(): void;
-    private overMediaQueryListener;
+    private handleContentScroll;
     hideIfOver(): void;
     show(): void;
     hide(): void;
@@ -25,6 +29,7 @@ export declare class TkDrawer extends LitElement {
     touchStart(event: TouchEvent): void;
     touchMove(event: TouchEvent): void;
     touchEnd(event: TouchEvent): void;
+    disconnectedCallback(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/drawer/index.js

@@ -27,7 +27,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;
@@ -38,43 +38,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">
@@ -85,28 +89,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;
@@ -123,53 +138,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);
@@ -188,6 +209,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);
@@ -212,7 +242,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), ["eventOptions"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.eventOptions), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property), ["query"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.query) });
+module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["eventOptions"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.eventOptions), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property), ["query"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.query), ["state"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.state) });
 
 /***/ })
 

package/icon/icon.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from "lit";
 import { TkBox } from "../box";
 export declare class TkIcon extends TkBox {
     static get styles(): import("lit").CSSResult[];
@@ -6,7 +7,7 @@ export declare class TkIcon extends TkBox {
     path: string;
     private svg;
     render(): import("lit").TemplateResult<1>;
-    updated(props: any): void;
+    protected updated(props: PropertyValues<TkIcon>): void;
     loadIcon(): Promise<void>;
 }
 declare global {