tinkiet 0.8.20 → 0.9.1

package/chip/chip.js

@@ -0,0 +1,20 @@
+import { __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import css_248z from './chip.scss.js';
+
+let TkChip = class TkChip extends LitElement {
+    render() {
+        return html `
+			<div class="chip"><slot></slot></div>
+		`;
+    }
+};
+TkChip.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+TkChip = __decorate([
+    customElement("tk-chip")
+], TkChip);
+
+export { TkChip };

package/{tag/tag.scss.js → chip/chip.scss.js}

@@ -1,4 +1,4 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary);--text:var(--on-primary);background:var(--color);box-sizing:border-box;color:var(--text);display:flex;flex-grow:1;height:var(--navbar-height,48px);justify-content:space-between;padding:var(--navbar-padding,var(--spacing-s,.5rem));position:relative;transition:var(--nav-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));z-index:var(--navbar-z-index,100)}:host([inverted]){--color:var(--on-primary);--text:var(--primary)}:host([fixed]){left:0;position:fixed;top:0;width:100%}:host([shadow]){box-shadow:var(--nav-elevation,var(--elevation-5,0 12px 24px var(--shadow)))}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){align-items:center;display:flex;height:100%}#title,::slotted([slot=title]){font-size:var(--nav-title-font-size,var(--font-size-l,1.25rem));font-weight:var(--nav-title-font-weight,var(--font-weight-regular,500));margin:var(--nav-title-margin,0 0 0 var(--spacing-l,1.25rem))}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary);--text:var(--on-primary);background:var(--color);box-sizing:border-box;color:var(--text);display:flex;flex-grow:1;height:var(--navbar-height,48px);justify-content:space-between;padding:var(--navbar-padding,var(--spacing-s,.5rem));position:relative;transition:var(--nav-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));z-index:var(--navbar-z-index,100)}:host([inverted]){--color:var(--on-primary);--text:var(--primary)}:host([fixed]){left:0;position:fixed;top:0;width:100%}:host([shadow]){box-shadow:var(--nav-elevation,var(--elevation-5,0 12px 24px var(--shadow)))}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){align-items:center;display:flex;height:100%}#title,::slotted([slot=title]){font-size:var(--nav-title-font-size,var(--font-size-l,1.25rem));font-weight:var(--nav-title-font-weight,var(--font-weight-regular,500));margin:var(--nav-title-margin,0 0 0 var(--spacing-l,1.25rem))}";
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary);--text:var(--on-primary);background:var(--color);box-sizing:border-box;color:var(--text);display:flex;flex-grow:1;height:var(--navbar-height,48px);justify-content:space-between;padding:var(--navbar-padding,var(--spacing-s,.5rem));position:relative;transition:var(--nav-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));z-index:var(--navbar-z-index,100)}:host([inverted]){--color:var(--on-primary);--text:var(--primary)}:host([fixed]){left:0;position:fixed;top:0;width:100%}:host([shadow]){box-shadow:var(--nav-elevation,0 1px 3px 0 #0000004d,0 4px 8px 3px #00000026)}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){align-items:center;display:flex;height:100%}#title,::slotted([slot=title]){font-size:var(--nav-title-font-size,var(--font-size-l,1.25rem));margin:var(--nav-title-margin,0 0 0 var(--spacing-l,1.25rem))}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary);--text:var(--on-primary);background:var(--color);box-sizing:border-box;color:var(--text);display:flex;flex-grow:1;height:var(--navbar-height,48px);justify-content:space-between;padding:var(--navbar-padding,var(--spacing-s,.5rem));position:relative;transition:var(--nav-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));z-index:var(--navbar-z-index,100)}:host([inverted]){--color:var(--on-primary);--text:var(--primary)}:host([fixed]){left:0;position:fixed;top:0;width:100%}:host([shadow]){box-shadow:var(--nav-elevation,0 1px 3px 0 #0000004d,0 4px 8px 3px #00000026)}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){align-items:center;display:flex;height:100%}#title,::slotted([slot=title]){font-size:var(--nav-title-font-size,var(--font-size-l,1.25rem));margin:var(--nav-title-margin,0 0 0 var(--spacing-l,1.25rem))}";
 
 export { css_248z as default, stylesheet };

package/chip/index.d.ts

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

package/chip/index.js

@@ -0,0 +1 @@
+export { TkChip } from './chip.js';

package/drawer/drawer.d.ts

@@ -11,7 +11,6 @@ declare class TkDrawer extends LitElement {
     swipeable: boolean;
     private $drawer;
     private mql;
-    private pointerListener;
     render(): import("lit-html").TemplateResult<1>;
     updated(props: any): void;
     protected overMediaQuery(): void;
@@ -20,6 +19,12 @@ declare class TkDrawer extends LitElement {
     show(): void;
     hide(): void;
     toggle(): void;
+    swipeX: number;
+    swipeY: number;
+    isHorizontalSwipe: boolean;
+    touchStart(event: TouchEvent): void;
+    touchMove(event: TouchEvent): void;
+    touchEnd(event: TouchEvent): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/drawer/drawer.js

@@ -1,8 +1,7 @@
 import { __decorate } from 'tslib';
 import { LitElement, html, css, unsafeCSS } from 'lit';
-import { property, query, customElement } from 'lit/decorators.js';
+import { property, query, eventOptions, customElement } from 'lit/decorators.js';
 import css_248z from './drawer.scss.js';
-import { Direction, Pan, PointerListener, Tap } from 'contactjs';
 
 let TkDrawer = class TkDrawer extends LitElement {
     constructor() {
@@ -11,6 +10,9 @@ let TkDrawer = class TkDrawer extends LitElement {
         this.over = false;
         this.right = false;
         this.swipeable = false;
+        this.swipeX = 0;
+        this.swipeY = 0;
+        this.isHorizontalSwipe = false;
     }
     set open(value) {
         if (value === this._open)
@@ -28,11 +30,11 @@ let TkDrawer = class TkDrawer extends LitElement {
     }
     render() {
         return html `
-			<div class="container fi">
+			<div class="container">
 				<slot name="drawer-container"></slot>
 			</div>
 			<div class="overlay" @click=${() => (this.open = false)}></div>
-			<div class="drawer">
+			<div class="drawer" @touchstart=${this.touchStart} @touchmove=${this.touchMove} @touchend=${this.touchEnd}>
 				<div class="drawer-header">
 					<slot name="drawer-header"></slot>
 				</div>
@@ -42,7 +44,9 @@ let TkDrawer = class TkDrawer extends LitElement {
 				<div class="drawer-footer">
 					<slot name="drawer-footer"></slot>
 				</div>
+				<div class="drawer-swipe"></div>
 			</div>
+			
 		`;
     }
     updated(props) {
@@ -52,49 +56,11 @@ let TkDrawer = class TkDrawer extends LitElement {
             if (window.matchMedia(this.openQuery).matches)
                 this.show();
         }
-        if (props.has("swipeable") && this.swipeable) {
-            var panOptions = {
-                supportedDirections: [Direction.Left, Direction.Right],
-                bubbles: false
-            };
-            var panRecognizer = new Pan(this.$drawer, panOptions);
-            this.pointerListener = new PointerListener(this.$drawer, {
-                DEBUG: true,
-                DEBUG_GESTURES: true,
-                // handleTouchEvents : false,
-                supportedGestures: [Tap, panRecognizer],
-                bubbles: false
-            });
-            this.$drawer.addEventListener("tap", (event) => {
-                var _a;
-                const { x, y } = event.detail.live.srcEvent;
-                const el = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.elementFromPoint(x, y);
-                if (el)
-                    el.click();
-            });
-            this.$drawer.addEventListener("panstart", (event) => {
-                this.$drawer.style.transition = "transform 0ms ease";
-            });
-            this.$drawer.addEventListener("pan", (event) => {
-                var x = event.detail.global.deltaX > 0 ? 0 : event.detail.global.deltaX;
-                var y = 0;
-                var transformString = "translate3d(" + x + "px, " + y + "px, 0)";
-                requestAnimationFrame(_ => {
-                    this.$drawer.style.transform = transformString;
-                });
-            });
-            this.$drawer.addEventListener("panend", (event) => {
-                requestAnimationFrame(_ => {
-                    this.$drawer.style.transition = "";
-                    this.$drawer.style.transform = "";
-                    this.open = event.detail.global.deltaX < -50 ? false : true;
-                });
+        if (props.has("open") && this.swipeable) {
+            requestAnimationFrame(_ => {
+                this.$drawer.removeAttribute('style');
             });
         }
-        if (props.has("swipeable") && !this.swipeable) {
-            this.pointerListener && this.pointerListener.destroy();
-            this.pointerListener = null;
-        }
     }
     overMediaQuery() {
         if (this.mql)
@@ -120,6 +86,47 @@ let TkDrawer = class TkDrawer extends LitElement {
     toggle() {
         this.open = !this.open;
     }
+    touchStart(event) {
+        if (!this.swipeable)
+            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)
+            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(_ => {
+            this.$drawer.style.transform = transformString;
+        });
+    }
+    touchEnd(event) {
+        if (!this.swipeable)
+            return;
+        requestAnimationFrame(_ => {
+            this.$drawer.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;
+    }
 };
 TkDrawer.styles = css `
 		${unsafeCSS(css_248z)}
@@ -145,6 +152,15 @@ __decorate([
 __decorate([
     query("div.drawer")
 ], TkDrawer.prototype, "$drawer", void 0);
+__decorate([
+    eventOptions({ passive: true })
+], TkDrawer.prototype, "touchStart", null);
+__decorate([
+    eventOptions({ passive: true })
+], TkDrawer.prototype, "touchMove", null);
+__decorate([
+    eventOptions({ passive: true })
+], TkDrawer.prototype, "touchEnd", null);
 TkDrawer = __decorate([
     customElement("tk-drawer")
 ], TkDrawer);

package/drawer/drawer.scss.js

@@ -1,4 +1,4 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:hidden;position:absolute;top:0;touch-action:pan-y;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width,256px);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow-y:auto}:host([right]) .drawer{right:0;transform:translateX(100%)}.overlay{background-color:rgba(0,0,0,.502);bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:auto;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width,256px)}: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}}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:hidden;position:absolute;top:0;touch-action:pan-y;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width,256px);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow-y:auto}:host([right]) .drawer{right:0;transform:translateX(100%)}.overlay{background-color:rgba(0,0,0,.502);bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:auto;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width,256px)}: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}}";
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{background-color:hsl(var(--surface));display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:hsl(var(--surface));bottom:0;display:grid;grid-template-areas:\"header swipe\" \"content swipe\" \"footer swipe\";grid-template-columns:var(--drawer-width,256px) 10px;grid-template-rows:auto 1fr auto;overflow:hidden;position:absolute;top:0;touch-action:pan-y;transform:translateX(calc(-100% + 10px));transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-header{grid-area:header}.drawer .drawer-content{grid-area:content;overflow:auto;padding:12px}.drawer .drawer-footer{grid-area:footer}.drawer .drawer-swipe{background-color:initial;grid-area:swipe}:host([right]) .drawer{right:0;transform:translateX(calc(100% + 10px))}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{height:100%;overflow:auto;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}: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:0 1px 2px 0 #0000004d,0 1px 3px 1px #00000026}: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}}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{background-color:hsl(var(--surface));display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:hsl(var(--surface));bottom:0;display:grid;grid-template-areas:\"header swipe\" \"content swipe\" \"footer swipe\";grid-template-columns:var(--drawer-width,256px) 10px;grid-template-rows:auto 1fr auto;overflow:hidden;position:absolute;top:0;touch-action:pan-y;transform:translateX(calc(-100% + 10px));transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-header{grid-area:header}.drawer .drawer-content{grid-area:content;overflow:auto;padding:12px}.drawer .drawer-footer{grid-area:footer}.drawer .drawer-swipe{background-color:initial;grid-area:swipe}:host([right]) .drawer{right:0;transform:translateX(calc(100% + 10px))}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{height:100%;overflow:auto;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}: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:0 1px 2px 0 #0000004d,0 1px 3px 1px #00000026}: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}}";
 
 export { css_248z as default, stylesheet };

package/form/form.d.ts

@@ -1,7 +1,6 @@
 import { LitElement } from "lit";
 declare class TkForm extends LitElement {
     value: any;
-    protected createRenderRoot(): Element | ShadowRoot;
     connectedCallback(): void;
     disconnectedCallback(): void;
     submit(e: Event): void;

package/form/form.js

@@ -3,9 +3,6 @@ import { LitElement } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 
 let TkForm = class TkForm extends LitElement {
-    createRenderRoot() {
-        return this;
-    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener("submit", this.submit);

package/index.d.ts

@@ -3,13 +3,15 @@ export * from "./badge/index.js";
 export * from "./box/index.js";
 export * from "./button/index.js";
 export * from "./checkbox/index.js";
+export * from "./chip/index.js";
 export * from "./dialog/index.js";
 export * from "./drawer/index.js";
 export * from "./form/index.js";
 export * from "./icon/index.js";
 export * from "./list-item/index.js";
 export * from "./loading/index.js";
-export * from "./navbar/index.js";
+export * from "./navigation/index.js";
+export * from "./topbar/index.js";
 export * from "./notie/index.js";
 export * from "./pages/index.js";
 export * from "./radio/index.js";
@@ -17,7 +19,6 @@ export * from "./select/index.js";
 export * from "./slider/index.js";
 export * from "./switch/index.js";
 export * from "./tab-group/index.js";
-export * from "./tag/index.js";
 export * from "./textarea/index.js";
 export * from "./textfield/index.js";
 export * from "./theme/index.js";

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../tinkiet/index.ts"],"names":[],"mappings":"AAAA,qCAA4B;AAC5B,iCAAwB;AACxB,+BAAsB;AACtB,kCAAyB;AACzB,oCAA2B;AAC3B,kCAAyB;AACzB,kCAAyB;AACzB,gCAAuB;AACvB,gCAAuB;AACvB,qCAA4B;AAC5B,mCAA0B;AAC1B,kCAAyB;AACzB,iCAAwB;AACxB,iCAAwB;AACxB,iCAAwB;AACxB,kCAAyB;AACzB,kCAAyB;AACzB,kCAAyB;AACzB,qCAA4B;AAC5B,+BAAsB;AACtB,oCAA2B;AAC3B,qCAA4B;AAC5B,iCAAwB;AACxB,mCAA0B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../tinkiet/index.ts"],"names":[],"mappings":"AAAA,qCAA4B;AAC5B,iCAAwB;AACxB,+BAAsB;AACtB,kCAAyB;AACzB,oCAA2B;AAC3B,gCAAuB;AACvB,kCAAyB;AACzB,kCAAyB;AACzB,gCAAuB;AACvB,gCAAuB;AACvB,qCAA4B;AAC5B,mCAA0B;AAC1B,sCAA6B;AAC7B,kCAAyB;AACzB,iCAAwB;AACxB,iCAAwB;AACxB,iCAAwB;AACxB,kCAAyB;AACzB,kCAAyB;AACzB,kCAAyB;AACzB,qCAA4B;AAC5B,oCAA2B;AAC3B,qCAA4B;AAC5B,iCAAwB;AACxB,mCAA0B"}

package/index.js

@@ -3,13 +3,15 @@ import './badge/index.js';
 import './box/index.js';
 import './button/index.js';
 import './checkbox/index.js';
+import './chip/index.js';
 import './dialog/index.js';
 import './drawer/index.js';
 import './form/index.js';
 import './icon/index.js';
 import './list-item/index.js';
 import './loading/index.js';
-import './navbar/index.js';
+import './navigation/index.js';
+import './topbar/index.js';
 import './notie/index.js';
 import './pages/index.js';
 import './radio/index.js';
@@ -17,7 +19,6 @@ import './select/index.js';
 import './slider/index.js';
 import './switch/index.js';
 import './tab-group/index.js';
-import './tag/index.js';
 import './textarea/index.js';
 import './textfield/index.js';
 import './theme/index.js';
@@ -27,6 +28,7 @@ export { TkBadge } from './badge/badge.js';
 export { TkBox } from './box/box.js';
 export { TkButton } from './button/button.js';
 export { TkCheckbox } from './checkbox/checkbox.js';
+export { TkChip } from './chip/chip.js';
 export { TkDialog } from './dialog/dialog.js';
 export { TkDrawer } from './drawer/drawer.js';
 export { TkForm } from './form/form.js';
@@ -34,7 +36,9 @@ export { TkIcon } from './icon/icon.js';
 export { TkIcons } from './icon/icons.js';
 export { TkListItem } from './list-item/list-item.js';
 export { TkLoading } from './loading/loading.js';
-export { TkNavbar } from './navbar/navbar.js';
+export { TkNavigationBar } from './navigation/navigation-bar.js';
+export { TkNavigationItem } from './navigation/navigation-item.js';
+export { TkTopbar } from './topbar/topbar.js';
 export { NotieLevel, TkNotie } from './notie/notie.js';
 export { TkPages } from './pages/pages.js';
 export { TkRadio } from './radio/radio.js';
@@ -42,7 +46,6 @@ export { TkSelect } from './select/select.js';
 export { TkSlider } from './slider/slider.js';
 export { TkSwitch } from './switch/switch.js';
 export { TkTabGroup } from './tab-group/tab-group.js';
-export { TkTag } from './tag/tag.js';
 export { TkTextarea } from './textarea/textarea.js';
 export { TkTextfield } from './textfield/textfield.js';
 export { TkTheme } from './theme/theme.js';

package/list-item/list-item.d.ts

@@ -10,6 +10,7 @@ declare class TkListItem extends TkBox {
     firstUpdated(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected onKeyDown(e: KeyboardEvent): void;
     protected handleClick(e: Event): void;
 }
 declare global {

package/list-item/list-item.js

@@ -39,11 +39,20 @@ let TkListItem = class TkListItem extends TkBox {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.addEventListener("keydown", this.onKeyDown.bind(this));
         this.addEventListener("click", this.handleClick.bind(this));
     }
     disconnectedCallback() {
-        this.removeEventListener("click", this.handleClick);
         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;

package/list-item/list-item.scss.js

@@ -1,4 +1,4 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--text:var(--list-item-color,var(--foreground,#454545));--color:var(--list-item-bg,var(--background,#f7f7f7));align-items:center;background:var(--color);border-radius:var(--list-item-border-radius,var(--border-radius-large,.5rem));color:var(--text);display:flex;flex-direction:row;outline:none;overflow:hidden;padding:var(--spacing-m,1rem) var(--spacing-m,1rem);position:relative;text-align:left;transition:var(--list-item-transition,background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}:host([clickable]),:host([href]){user-select:none}:host([clickable]:not([active]):not([disabled])),:host([href]:not([active]):not([disabled])){cursor:pointer}:host(:focus),:host(:hover){--color:var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3)));will-change:background,color}:host([active]:focus),:host([active]:hover){--text:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--color:var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3)))}:host([disabled]){--text:var(--shade-dark,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*0.85)));--color:var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%)));opacity:.4;pointer-events:none}:host([active]){--text:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--color:var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3)))}::slotted([slot=after]),::slotted([slot=before]){flex-shrink:0}::slotted([slot=before]){align-self:var(--list-item-left-align-self,center);margin:0 var(--spacing-m,1rem) 0 0}::slotted([slot=after]){align-self:var(--list-item-left-align-self,center);margin:0 0 0 var(--spacing-m,1rem)}#content{display:flex;flex-direction:column;flex-grow:1}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--text:var(--list-item-color,var(--foreground,#454545));--color:var(--list-item-bg,var(--background,#f7f7f7));align-items:center;background:var(--color);border-radius:var(--list-item-border-radius,var(--border-radius-large,.5rem));color:var(--text);display:flex;flex-direction:row;outline:none;overflow:hidden;padding:var(--spacing-m,1rem) var(--spacing-m,1rem);position:relative;text-align:left;transition:var(--list-item-transition,background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}:host([clickable]),:host([href]){user-select:none}:host([clickable]:not([active]):not([disabled])),:host([href]:not([active]):not([disabled])){cursor:pointer}:host(:focus),:host(:hover){--color:var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3)));will-change:background,color}:host([active]:focus),:host([active]:hover){--text:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--color:var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3)))}:host([disabled]){--text:var(--shade-dark,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*0.85)));--color:var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%)));opacity:.4;pointer-events:none}:host([active]){--text:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--color:var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3)))}::slotted([slot=after]),::slotted([slot=before]){flex-shrink:0}::slotted([slot=before]){align-self:var(--list-item-left-align-self,center);margin:0 var(--spacing-m,1rem) 0 0}::slotted([slot=after]){align-self:var(--list-item-left-align-self,center);margin:0 0 0 var(--spacing-m,1rem)}#content{display:flex;flex-direction:column;flex-grow:1}";
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{align-items:center;border-radius:28px;color:hsl(var(--on-surface-variant));display:flex;flex-direction:row;height:56px;outline:none;overflow:hidden;padding:0 24px 0 16px;position:relative;text-align:left}:host([clickable]),:host([href]){user-select:none}:host([clickable]:not([active]):not([disabled])),:host([href]:not([active]):not([disabled])){cursor:pointer}:host(:focus),:host(:hover){background-color:hsla(var(--on-surface),.08);color:hsl(var(--on-surface));will-change:background,color}:host([active]){background-color:hsla(var(--secondary-container),1);color:hsl(var(--on-secondary-container))}:host([active]:focus),:host([active]:hover){background-color:hsla(var(--secondary-container),1);color:hsl(var(--on-secondary-container))}:host([disabled]){background:hsla(var(--surface-container-highest),.12);color:hsl(var(--on-surface-variant));opacity:.4;pointer-events:none}::slotted([slot=after]),::slotted([slot=before]){flex-shrink:0}::slotted([slot=before]){align-self:var(--list-item-left-align-self,center);margin:0 var(--spacing-m,1rem) 0 0}::slotted([slot=after]){align-self:var(--list-item-left-align-self,center);margin:0 0 0 var(--spacing-m,1rem)}#content{display:flex;flex-direction:column;flex-grow:1;max-width:100%}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{align-items:center;border-radius:28px;color:hsl(var(--on-surface-variant));display:flex;flex-direction:row;height:56px;outline:none;overflow:hidden;padding:0 24px 0 16px;position:relative;text-align:left}:host([clickable]),:host([href]){user-select:none}:host([clickable]:not([active]):not([disabled])),:host([href]:not([active]):not([disabled])){cursor:pointer}:host(:focus),:host(:hover){background-color:hsla(var(--on-surface),.08);color:hsl(var(--on-surface));will-change:background,color}:host([active]){background-color:hsla(var(--secondary-container),1);color:hsl(var(--on-secondary-container))}:host([active]:focus),:host([active]:hover){background-color:hsla(var(--secondary-container),1);color:hsl(var(--on-secondary-container))}:host([disabled]){background:hsla(var(--surface-container-highest),.12);color:hsl(var(--on-surface-variant));opacity:.4;pointer-events:none}::slotted([slot=after]),::slotted([slot=before]){flex-shrink:0}::slotted([slot=before]){align-self:var(--list-item-left-align-self,center);margin:0 var(--spacing-m,1rem) 0 0}::slotted([slot=after]){align-self:var(--list-item-left-align-self,center);margin:0 0 0 var(--spacing-m,1rem)}#content{display:flex;flex-direction:column;flex-grow:1;max-width:100%}";
 
 export { css_248z as default, stylesheet };

package/loading/loading.scss.js

@@ -1,4 +1,4 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:currentColor;--background-color:var(--tk-loading-background-color,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([accent]){--color:var(--accent)}:host([error]){--color:var(--error)}.circle{animation:rotator 3s linear infinite;display:inline-flex;height:2em;width:2em}.circle,.circle .path{transform-origin:center}.circle .path{stroke-dasharray:265;stroke-dashoffset:0;stroke:var(--color);animation:dash 3s ease-in-out infinite}@keyframes rotator{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dashoffset:265}50%{stroke-dashoffset:65;transform:rotate(90deg)}to{stroke-dashoffset:265;transform:rotate(1turn)}}.line{background-color:var(--background-color);height:.4em;overflow:hidden;position:relative}.line .progress{height:100%}.line .indeterminate,.line .progress{background-color:var(--color)}.line .indeterminate:before{animation:indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite}.line .indeterminate:after,.line .indeterminate:before{background-color:inherit;bottom:0;content:\"\";left:0;position:absolute;top:0;will-change:left,right}.line .indeterminate:after{animation:indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;animation-delay:1.15s}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:currentColor;--background-color:var(--tk-loading-background-color,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([accent]){--color:var(--accent)}:host([error]){--color:var(--error)}.circle{animation:rotator 3s linear infinite;display:inline-flex;height:2em;width:2em}.circle,.circle .path{transform-origin:center}.circle .path{stroke-dasharray:265;stroke-dashoffset:0;stroke:var(--color);animation:dash 3s ease-in-out infinite}@keyframes rotator{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dashoffset:265}50%{stroke-dashoffset:65;transform:rotate(90deg)}to{stroke-dashoffset:265;transform:rotate(1turn)}}.line{background-color:var(--background-color);height:.4em;overflow:hidden;position:relative}.line .progress{height:100%}.line .indeterminate,.line .progress{background-color:var(--color)}.line .indeterminate:before{animation:indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite}.line .indeterminate:after,.line .indeterminate:before{background-color:inherit;bottom:0;content:\"\";left:0;position:absolute;top:0;will-change:left,right}.line .indeterminate:after{animation:indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;animation-delay:1.15s}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}";
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:hsl(var(--primary));--background-color:var(--tk-loading-background-color,hsl(var(--surface-dim)))}:host([secondary]){--color:hsl(var(--secondary))}:host([error]){--color:hsl(var(--error))}.circle{animation:rotator 3s linear infinite;display:inline-flex;height:56px;width:56px}.circle,.circle .path{transform-origin:center}.circle .path{stroke-dasharray:265;stroke-dashoffset:0;stroke:var(--color);animation:dash 3s ease-in-out infinite}@keyframes rotator{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dashoffset:265}50%{stroke-dashoffset:65;transform:rotate(90deg)}to{stroke-dashoffset:265;transform:rotate(1turn)}}:host([small]) .circle{height:20px;width:20px}:host([small]) .line{height:2px}:host([large]) .circle{height:96px;width:96px}:host([large]) .line{height:14px}.line{background-color:var(--background-color);height:6px;overflow:hidden;position:relative}.line .progress{height:100%}.line .indeterminate,.line .progress{background-color:var(--color)}.line .indeterminate:before{animation:indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite}.line .indeterminate:after,.line .indeterminate:before{background-color:inherit;bottom:0;content:\"\";left:0;position:absolute;top:0;will-change:left,right}.line .indeterminate:after{animation:indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;animation-delay:1.15s}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:hsl(var(--primary));--background-color:var(--tk-loading-background-color,hsl(var(--surface-dim)))}:host([secondary]){--color:hsl(var(--secondary))}:host([error]){--color:hsl(var(--error))}.circle{animation:rotator 3s linear infinite;display:inline-flex;height:56px;width:56px}.circle,.circle .path{transform-origin:center}.circle .path{stroke-dasharray:265;stroke-dashoffset:0;stroke:var(--color);animation:dash 3s ease-in-out infinite}@keyframes rotator{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dashoffset:265}50%{stroke-dashoffset:65;transform:rotate(90deg)}to{stroke-dashoffset:265;transform:rotate(1turn)}}:host([small]) .circle{height:20px;width:20px}:host([small]) .line{height:2px}:host([large]) .circle{height:96px;width:96px}:host([large]) .line{height:14px}.line{background-color:var(--background-color);height:6px;overflow:hidden;position:relative}.line .progress{height:100%}.line .indeterminate,.line .progress{background-color:var(--color)}.line .indeterminate:before{animation:indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite}.line .indeterminate:after,.line .indeterminate:before{background-color:inherit;bottom:0;content:\"\";left:0;position:absolute;top:0;will-change:left,right}.line .indeterminate:after{animation:indeterminate-short 2.1s cubic-bezier(.165,.84,.44,1) infinite;animation-delay:1.15s}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}";
 
 export { css_248z as default, stylesheet };

package/navigation/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./navigation-bar.js";
+export * from "./navigation-item.js";

package/navigation/index.js

@@ -0,0 +1,2 @@
+export { TkNavigationBar } from './navigation-bar.js';
+export { TkNavigationItem } from './navigation-item.js';

package/navigation/navigation-bar.d.ts

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

package/navigation/navigation-bar.js

@@ -0,0 +1,20 @@
+import { __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import css_248z from './navigation-bar.scss.js';
+
+let TkNavigationBar = class TkNavigationBar extends LitElement {
+    render() {
+        return html `
+			<slot></slot>
+		`;
+    }
+};
+TkNavigationBar.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+TkNavigationBar = __decorate([
+    customElement("tk-navigation-bar")
+], TkNavigationBar);
+
+export { TkNavigationBar };

package/navigation/navigation-bar.scss.js

@@ -0,0 +1,4 @@
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host slot{display:flex;justify-content:space-between}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host slot{display:flex;justify-content:space-between}";
+
+export { css_248z as default, stylesheet };

package/navigation/navigation-item.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from "lit";
+declare class TkNavigationItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    label: string;
+    iconPath: string;
+    activeIconPath: string;
+    active: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-navigation-item": TkNavigationItem;
+    }
+}
+export { TkNavigationItem };

package/navigation/navigation-item.js

@@ -0,0 +1,51 @@
+import { __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import css_248z from './navigation-item.scss.js';
+
+let TkNavigationItem = class TkNavigationItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+        this.iconPath = "";
+        this.activeIconPath = "";
+        this.active = false;
+    }
+    render() {
+        return html `
+			<tk-box align-items="center">
+				<tk-box ripple overflow="hidden" tabindex="0" class="indicator">
+					<tk-icon path=${this.active && this.activeIconPath ? this.activeIconPath : this.iconPath}></tk-icon>
+					<span class="badge">
+						<slot name="badge"></slot>
+					</span>
+				</tk-box>
+				${this.label
+            ? html `
+							<span class="label">${this.label}</span>
+					  `
+            : ""}
+			</tk-box>
+		`;
+    }
+};
+TkNavigationItem.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+__decorate([
+    property()
+], TkNavigationItem.prototype, "label", void 0);
+__decorate([
+    property()
+], TkNavigationItem.prototype, "iconPath", void 0);
+__decorate([
+    property()
+], TkNavigationItem.prototype, "activeIconPath", void 0);
+__decorate([
+    property({ type: Boolean })
+], TkNavigationItem.prototype, "active", void 0);
+TkNavigationItem = __decorate([
+    customElement("tk-navigation-item")
+], TkNavigationItem);
+
+export { TkNavigationItem };

package/navigation/navigation-item.scss.js

@@ -0,0 +1,4 @@
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{cursor:pointer}:host .indicator{align-items:center;border-radius:16px;display:flex;height:32px;justify-content:center;margin-bottom:4px;outline:none;position:relative;width:64px}:host .indicator tk-icon{height:24px;width:24px}:host .indicator .badge{display:flex;left:35px;position:absolute;top:4px}:host .label{font-size:12px;font-weight:500;line-height:16px;margin-top:4px}:host([active]){color:hsl(var(--on-secondary-container))}:host([active]) .indicator{background-color:hsl(var(--secondary-container))}:host(:hover){color:hsl(var(--on-surface-variant))}:host(:hover) .indicator{background-color:hsla(var(--on-surface-variant),.08)}:host(:focus){color:hsl(var(--on-surface-variant))}:host(:focus) .indicator{background-color:hsla(var(--on-surface-variant),.12)}:host([active]:hover){color:hsl(var(--on-surface))}:host([active]:hover) .indicator{background-color:hsla(var(--on-surface),.08)}:host([active]:focus){color:hsl(var(--on-surface))}:host([active]:focus) .indicator{background-color:hsl(var(--on-surface),.12)}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{cursor:pointer}:host .indicator{align-items:center;border-radius:16px;display:flex;height:32px;justify-content:center;margin-bottom:4px;outline:none;position:relative;width:64px}:host .indicator tk-icon{height:24px;width:24px}:host .indicator .badge{display:flex;left:35px;position:absolute;top:4px}:host .label{font-size:12px;font-weight:500;line-height:16px;margin-top:4px}:host([active]){color:hsl(var(--on-secondary-container))}:host([active]) .indicator{background-color:hsl(var(--secondary-container))}:host(:hover){color:hsl(var(--on-surface-variant))}:host(:hover) .indicator{background-color:hsla(var(--on-surface-variant),.08)}:host(:focus){color:hsl(var(--on-surface-variant))}:host(:focus) .indicator{background-color:hsla(var(--on-surface-variant),.12)}:host([active]:hover){color:hsl(var(--on-surface))}:host([active]:hover) .indicator{background-color:hsla(var(--on-surface),.08)}:host([active]:focus){color:hsl(var(--on-surface))}:host([active]:focus) .indicator{background-color:hsl(var(--on-surface),.12)}";
+
+export { css_248z as default, stylesheet };

package/notie/notie.scss.js

@@ -1,4 +1,4 @@
-var css_248z = ":host{bottom:0;display:none;font-size:1.6rem;left:0;margin:0;position:fixed;right:0;top:0}:host .overlay{background-color:rgba(0,0,0,.502);bottom:0;left:0;position:fixed;right:0;top:0;z-index:var(--notie-z-index,400)}:host .container{background-color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));bottom:0;box-shadow:10px 10px 10px 10px var(--shadow);color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));height:fit-content;left:0;position:fixed;right:0;text-align:center;transform:translateY(100%);transition:all .15s ease-in;z-index:calc(var(--notie-z-index, 400) + 1)}:host .container.info{background-color:#4d82d6}:host .container.error{background-color:#e1715b}:host .container.warning{background-color:#d6a14d}:host .container.success{background-color:#57bf57}:host .text{padding:.5em}:host .input{--input-font-size:$font-size-widescreen;background-color:var(--background,#fff);color:var(--foreground,#000);text-align:center}:host .button{cursor:pointer;padding:.5em}:host .button.confirm,:host .button.force{background-color:#57bf57;color:#fff}:host .button.cancel{background-color:var(--error,#e1715b);color:var(--on-error,#fff)}@media screen and (max-width:900px){:host{font-size:1.4rem}}@media screen and (max-width:750px){:host{font-size:1.2rem}}@media screen and (max-width:400px){:host{font-size:1rem}}:host([position=top]) .container{bottom:inherit;position:fixed;top:0;transform:translateY(-100%)}:host([open]) .container{transform:translateY(0)}";
-var stylesheet=":host{bottom:0;display:none;font-size:1.6rem;left:0;margin:0;position:fixed;right:0;top:0}:host .overlay{background-color:rgba(0,0,0,.502);bottom:0;left:0;position:fixed;right:0;top:0;z-index:var(--notie-z-index,400)}:host .container{background-color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));bottom:0;box-shadow:10px 10px 10px 10px var(--shadow);color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));height:fit-content;left:0;position:fixed;right:0;text-align:center;transform:translateY(100%);transition:all .15s ease-in;z-index:calc(var(--notie-z-index, 400) + 1)}:host .container.info{background-color:#4d82d6}:host .container.error{background-color:#e1715b}:host .container.warning{background-color:#d6a14d}:host .container.success{background-color:#57bf57}:host .text{padding:.5em}:host .input{--input-font-size:$font-size-widescreen;background-color:var(--background,#fff);color:var(--foreground,#000);text-align:center}:host .button{cursor:pointer;padding:.5em}:host .button.confirm,:host .button.force{background-color:#57bf57;color:#fff}:host .button.cancel{background-color:var(--error,#e1715b);color:var(--on-error,#fff)}@media screen and (max-width:900px){:host{font-size:1.4rem}}@media screen and (max-width:750px){:host{font-size:1.2rem}}@media screen and (max-width:400px){:host{font-size:1rem}}:host([position=top]) .container{bottom:inherit;position:fixed;top:0;transform:translateY(-100%)}:host([open]) .container{transform:translateY(0)}";
+var css_248z = ":host{bottom:0;display:none;font-size:1.6rem;left:0;margin:0;position:fixed;right:0;top:0}:host .overlay{background-color:rgba(0,0,0,.502);bottom:0;left:0;position:fixed;right:0;top:0;z-index:var(--notie-z-index,400)}:host .container{background-color:hsl(var(--primary));bottom:0;box-shadow:10px 10px 10px 10px var(--shadow);color:hsl(var(--on-primary));height:fit-content;left:0;position:fixed;right:0;text-align:center;transform:translateY(100%);transition:all .15s ease-in;z-index:calc(var(--notie-z-index, 400) + 1)}:host .container.info{background-color:#4d82d6}:host .container.error{background-color:#e1715b}:host .container.warning{background-color:#d6a14d}:host .container.success{background-color:#57bf57}:host .text{padding:.5em}:host .input{--input-font-size:$font-size-widescreen;background-color:var(--background,#fff);color:var(--foreground,#000);text-align:center}:host .button{cursor:pointer;padding:.5em}:host .button.confirm,:host .button.force{background-color:#57bf57;color:#fff}:host .button.cancel{background-color:var(--error,#e1715b);color:var(--on-error,#fff)}@media screen and (max-width:900px){:host{font-size:1.4rem}}@media screen and (max-width:750px){:host{font-size:1.2rem}}@media screen and (max-width:400px){:host{font-size:1rem}}:host([position=top]) .container{bottom:inherit;position:fixed;top:0;transform:translateY(-100%)}:host([open]) .container{transform:translateY(0)}";
+var stylesheet=":host{bottom:0;display:none;font-size:1.6rem;left:0;margin:0;position:fixed;right:0;top:0}:host .overlay{background-color:rgba(0,0,0,.502);bottom:0;left:0;position:fixed;right:0;top:0;z-index:var(--notie-z-index,400)}:host .container{background-color:hsl(var(--primary));bottom:0;box-shadow:10px 10px 10px 10px var(--shadow);color:hsl(var(--on-primary));height:fit-content;left:0;position:fixed;right:0;text-align:center;transform:translateY(100%);transition:all .15s ease-in;z-index:calc(var(--notie-z-index, 400) + 1)}:host .container.info{background-color:#4d82d6}:host .container.error{background-color:#e1715b}:host .container.warning{background-color:#d6a14d}:host .container.success{background-color:#57bf57}:host .text{padding:.5em}:host .input{--input-font-size:$font-size-widescreen;background-color:var(--background,#fff);color:var(--foreground,#000);text-align:center}:host .button{cursor:pointer;padding:.5em}:host .button.confirm,:host .button.force{background-color:#57bf57;color:#fff}:host .button.cancel{background-color:var(--error,#e1715b);color:var(--on-error,#fff)}@media screen and (max-width:900px){:host{font-size:1.4rem}}@media screen and (max-width:750px){:host{font-size:1.2rem}}@media screen and (max-width:400px){:host{font-size:1rem}}:host([position=top]) .container{bottom:inherit;position:fixed;top:0;transform:translateY(-100%)}:host([open]) .container{transform:translateY(0)}";
 
 export { css_248z as default, stylesheet };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinkiet",
-  "version": "0.8.20",
+  "version": "0.9.1",
   "description": "Pragmatic UI Web Components",
   "type": "module",
   "main": "index.js",
@@ -23,8 +23,7 @@
   "license": "MIT",
   "homepage": "https://tinkiet.educ.cloud",
   "dependencies": {
-    "contactjs": "^2.1.7",
-    "lit": "^2.7.5",
+    "lit": "^3.1.2",
     "tslib": "^2.5.3"
   },
   "contributors": [

package/radio/radio.js

@@ -18,13 +18,16 @@ let TkRadio = class TkRadio extends LitElement {
     render() {
         return html `
 			<tk-box direction="row" align-items="center">
-				<div tabindex="0" class="radio">
-					<div id="dot"></div>
-				</div>
+				<tk-box ripple tabindex="${this.disabled ? -1 : 0}" class="state">
+					<div class="radio">
+						<div id="dot"></div>
+					</div>
+				</tk-box>
 				<span class="label"><slot></slot></span>
 			</tk-box>
 			<input
 				id=${this._id}
+				hidden
 				type="radio"
 				style="position: absolute;left: 0;z-index: -1;"
 				?checked="${this.checked}"
@@ -52,6 +55,8 @@ let TkRadio = class TkRadio extends LitElement {
         this.appendChild(this.$input);
     }
     onKeyDown(e) {
+        if (this.disabled)
+            return;
         if (e.code === "Space" || e.code === "Enter") {
             e.preventDefault();
             e.stopPropagation();
@@ -59,6 +64,8 @@ let TkRadio = class TkRadio extends LitElement {
         }
     }
     handleClick() {
+        if (this.disabled)
+            return;
         this.checked = !this.checked;
         if (this.checked && this.name)
             this.getRootNode()