tinkiet 0.8.2 → 0.8.6

package/accordion/accordion.d.ts

@@ -1,4 +1,4 @@
-import { TkFocusableBox } from "../box/focusable-box";
+import { TkFocusableBox } from "../box/focusable-box.js";
 declare class TkAccordion extends TkFocusableBox {
     static get styles(): import("lit").CSSResult[];
     name: string;

package/accordion/index.d.ts

@@ -1 +1 @@
-export * from "./accordion";
+export * from "./accordion.js";

package/badge/badge.d.ts

@@ -1,4 +1,4 @@
-import { TkBox } from "../box/index";
+import { TkBox } from "../box/index.js";
 /**
  * A badge WebComponent
  * @cssprop --tk-badge-color - Color of widget default to --primary

package/badge/index.d.ts

@@ -1 +1 @@
-export * from "./badge";
+export * from "./badge.js";

package/box/focusable-box.d.ts

@@ -1,4 +1,4 @@
-import { TkBox } from "./box";
+import { TkBox } from "./box.js";
 declare class TkFocusableBox extends TkBox {
     /**
      * Element random id

package/box/index.d.ts

@@ -1 +1 @@
-export * from "./box";
+export * from "./box.js";

package/button/button.d.ts

@@ -1,4 +1,4 @@
-import { TkBox } from "../box/index";
+import { TkBox } from "../box/index.js";
 /**
  * A button web component
  *

package/button/index.d.ts

@@ -1 +1 @@
-export * from "./button";
+export * from "./button.js";

package/checkbox/index.d.ts

@@ -1 +1 @@
-export * from "./checkbox";
+export * from "./checkbox.js";

package/dialog/dialog.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValueMap } from "lit";
 declare class TkDialog extends LitElement {
     static styles: import("lit").CSSResult;
     modal: boolean;
@@ -6,7 +6,7 @@ declare class TkDialog extends LitElement {
     blurOverlay: boolean;
     private resolve;
     render(): import("lit-html").TemplateResult<1>;
-    updated(props: any): void;
+    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     show(): Promise<string | boolean | null>;
     hide(value?: boolean | string | null): void;
 }

package/dialog/dialog.js

@@ -22,10 +22,10 @@ let TkDialog = class TkDialog extends LitElement {
             : ""}
 		`;
     }
-    updated(props) {
-        if (props.has("open") && this.open)
+    updated(_changedProperties) {
+        if (_changedProperties.has("open") && this.open)
             this.dispatchEvent(new Event("did-show"));
-        if (props.has("open") && !this.open)
+        if (_changedProperties.has("open") && _changedProperties.get("open") == true && !this.open)
             this.dispatchEvent(new Event("did-close"));
     }
     show() {
@@ -36,7 +36,8 @@ let TkDialog = class TkDialog extends LitElement {
     }
     hide(value = null) {
         this.open = false;
-        this.resolve(value);
+        if (this.resolve)
+            this.resolve(value);
     }
 };
 TkDialog.styles = css `

package/dialog/dialog.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:none;outline:none;position:relative}:host([open]){align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--dialog-z-index,300)}:host([open]) .overlay{background-color:#00000080;bottom:0;left:0;position:absolute;right:0;top:0}:host([open]) .overlay.blur{backdrop-filter:blur(2px)}:host([open]) .container{animation:fade-in .3s forwards;border-radius:var(--border-radius-medium,.25rem);height:100%;margin:0;max-width:100%;overflow-y:auto;overscroll-behavior:contain;padding:1rem;position:fixed;width:fit-content;will-change:transform,opacity}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (max-width:400px){:host([open]) .container{padding:.1rem}}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:none;outline:none;position:relative}:host([open]){align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--dialog-z-index,300)}:host([open]) .overlay{background-color:#00000080;bottom:0;left:0;position:absolute;right:0;top:0}:host([open]) .overlay.blur{backdrop-filter:blur(2px)}:host([open]) .container{animation:fade-in .3s forwards;border-radius:var(--border-radius-medium,.25rem);height:100%;margin:0;max-width:100%;overflow-y:auto;overscroll-behavior:contain;padding:1rem;position:fixed;width:fit-content;will-change:transform,opacity}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (max-width:400px){:host([open]) .container{padding:.1rem}}";
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:none;outline:none;position:relative}:host([open]){align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--dialog-z-index,300)}:host([open]) .overlay{background-color:#00000080;bottom:0;left:0;position:absolute;right:0;top:0}:host([open]) .overlay.blur{backdrop-filter:blur(2px)}:host([open]) .container{animation:fade-in .3s forwards;margin:0;max-width:100%;overflow-y:auto;overscroll-behavior:contain;padding:1rem;position:fixed;width:fit-content;will-change:transform,opacity}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (max-width:400px){:host([open]) .container{padding:.1rem}}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:none;outline:none;position:relative}:host([open]){align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--dialog-z-index,300)}:host([open]) .overlay{background-color:#00000080;bottom:0;left:0;position:absolute;right:0;top:0}:host([open]) .overlay.blur{backdrop-filter:blur(2px)}:host([open]) .container{animation:fade-in .3s forwards;margin:0;max-width:100%;overflow-y:auto;overscroll-behavior:contain;padding:1rem;position:fixed;width:fit-content;will-change:transform,opacity}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (max-width:400px){:host([open]) .container{padding:.1rem}}";
 
 export { css_248z as default, stylesheet };

package/dialog/index.d.ts

@@ -1 +1 @@
-export * from "./dialog";
+export * from "./dialog.js";

package/drawer/drawer.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from "lit";
+declare class TkDrawer extends LitElement {
+    static styles: import("lit").CSSResult;
+    _open: boolean;
+    set open(value: boolean);
+    get open(): boolean;
+    over: boolean;
+    openQuery: string;
+    overQuery: string;
+    right: boolean;
+    swipeable: boolean;
+    private $drawer;
+    private mql;
+    private pointerListener;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(props: any): void;
+    protected overMediaQuery(): void;
+    private overMediaQueryListener;
+    hideIfOver(): void;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-drawer": TkDrawer;
+    }
+}
+export { TkDrawer };

package/drawer/drawer.js

@@ -0,0 +1,152 @@
+import { __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { property, query, 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() {
+        super(...arguments);
+        this._open = false;
+        this.over = false;
+        this.right = false;
+        this.swipeable = 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 html `
+			<div class="container fi">
+				<slot name="drawer-container"></slot>
+			</div>
+			<div class="overlay" @click=${() => (this.open = false)}></div>
+			<div class="drawer">
+				<div class="drawer-header">
+					<slot name="drawer-header"></slot>
+				</div>
+				<div class="drawer-content">
+					<slot name="drawer-content"></slot>
+				</div>
+				<div class="drawer-footer">
+					<slot name="drawer-footer"></slot>
+				</div>
+			</div>
+		`;
+    }
+    updated(props) {
+        if (props.has("overQuery"))
+            this.overMediaQuery();
+        if (props.has("openQuery")) {
+            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("swipeable") && !this.swipeable) {
+            this.pointerListener && this.pointerListener.destroy();
+            this.pointerListener = null;
+        }
+    }
+    overMediaQuery() {
+        if (this.mql)
+            this.mql.removeEventListener("change", this.overMediaQueryListener.bind(this));
+        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");
+    }
+    hideIfOver() {
+        var _a;
+        if ((this.overQuery && ((_a = this.mql) === null || _a === void 0 ? void 0 : _a.matches)) || this.over)
+            this.open = false;
+    }
+    show() {
+        this.open = true;
+    }
+    hide() {
+        this.open = false;
+    }
+    toggle() {
+        this.open = !this.open;
+    }
+};
+TkDrawer.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TkDrawer.prototype, "open", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TkDrawer.prototype, "over", void 0);
+__decorate([
+    property({ type: String, attribute: "open-query" })
+], TkDrawer.prototype, "openQuery", void 0);
+__decorate([
+    property({ type: String, attribute: "over-query" })
+], TkDrawer.prototype, "overQuery", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TkDrawer.prototype, "right", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TkDrawer.prototype, "swipeable", void 0);
+__decorate([
+    query("div.drawer")
+], TkDrawer.prototype, "$drawer", void 0);
+TkDrawer = __decorate([
+    customElement("tk-drawer")
+], TkDrawer);
+
+export { TkDrawer };

package/drawer/drawer.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{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:scroll;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:scroll}: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:scroll;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:scroll;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:scroll}: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:scroll;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}}";
+
+export { css_248z as default, stylesheet };

package/drawer/index.d.ts

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

package/drawer/index.js

@@ -0,0 +1 @@
+export { TkDrawer } from './drawer.js';

package/form/index.d.ts

@@ -1 +1 @@
-export { TkForm } from "./form";
+export { TkForm } from "./form.js";

package/icon/icon.d.ts

@@ -1,4 +1,4 @@
-import { TkBox } from "../box/index";
+import { TkBox } from "../box/index.js";
 declare class TkIcon extends TkBox {
     static get styles(): import("lit").CSSResult[];
     name: string;

package/icon/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./icon";
-export * from "./icons";
+export * from "./icon.js";
+export * from "./icons.js";

package/index.d.ts

@@ -1,23 +1,24 @@
-export * from "./accordion/index";
-export * from "./badge/index";
-export * from "./box/index";
-export * from "./button/index";
-export * from "./checkbox/index";
-export * from "./dialog/index";
-export * from "./form/index";
-export * from "./icon/index";
-export * from "./list-item/index";
-export * from "./loading/index";
-export * from "./navbar/index";
-export * from "./notie/index";
-export * from "./pages/index";
-export * from "./radio/index";
-export * from "./select/index";
-export * from "./slider/index";
-export * from "./switch/index";
-export * from "./tab-group/index";
-export * from "./tag/index";
-export * from "./textarea/index";
-export * from "./textfield/index";
-export * from "./theme/index";
+export * from "./accordion/index.js";
+export * from "./badge/index.js";
+export * from "./box/index.js";
+export * from "./button/index.js";
+export * from "./checkbox/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 "./notie/index.js";
+export * from "./pages/index.js";
+export * from "./radio/index.js";
+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";
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../tinkiet/index.ts"],"names":[],"mappings":"AAAA,kCAA4B;AAC5B,8BAAwB;AACxB,4BAAsB;AACtB,+BAAyB;AACzB,iCAA2B;AAC3B,+BAAyB;AAEzB,6BAAuB;AACvB,6BAAuB;AACvB,kCAA4B;AAC5B,gCAA0B;AAC1B,+BAAyB;AACzB,8BAAwB;AACxB,8BAAwB;AACxB,8BAAwB;AACxB,+BAAyB;AACzB,+BAAyB;AACzB,+BAAyB;AACzB,kCAA4B;AAC5B,4BAAsB;AACtB,iCAA2B;AAC3B,kCAA4B;AAC5B,8BAAwB"}
+{"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"}

package/index.js

@@ -4,6 +4,7 @@ import './box/index.js';
 import './button/index.js';
 import './checkbox/index.js';
 import './dialog/index.js';
+import './drawer/index.js';
 import './form/index.js';
 import './icon/index.js';
 import './list-item/index.js';
@@ -26,6 +27,7 @@ export { TkBox } from './box/box.js';
 export { TkButton } from './button/button.js';
 export { TkCheckbox } from './checkbox/checkbox.js';
 export { TkDialog } from './dialog/dialog.js';
+export { TkDrawer } from './drawer/drawer.js';
 export { TkForm } from './form/form.js';
 export { TkIcon } from './icon/icon.js';
 export { TkIcons } from './icon/icons.js';

package/list-item/index.d.ts

@@ -1 +1 @@
-export * from "./list-item";
+export * from "./list-item.js";

package/list-item/list-item.js

@@ -1,6 +1,7 @@
 import { __decorate } from 'tslib';
 import { LitElement, html, css, unsafeCSS } from 'lit';
 import { property, query, customElement } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import css_248z from './list-item.scss.js';
 
 let TkListItem = class TkListItem extends LitElement {
@@ -13,7 +14,7 @@ let TkListItem = class TkListItem extends LitElement {
 			<slot name="after" @click=${this.handleClick}></slot>
 			${this.href
             ? html `
-						<a tabindex="-1" id="ahref" href="${this.href}" rel="noreferrer" aria-label=${this.ariaLabel}></a>
+						<a tabindex="-1" id="ahref" href="${this.href}" target=${ifDefined(this.target)} rel="noreferrer" aria-label=${this.ariaLabel}></a>
 				  `
             : ""}
 		`;
@@ -42,7 +43,6 @@ let TkListItem = class TkListItem extends LitElement {
             // e.preventDefault();
             //e.stopPropagation();
         }
-        ;
         if (this.href && e.isTrusted) {
             e.stopPropagation();
             e.preventDefault();

package/loading/index.d.ts

@@ -1 +1 @@
-export * from "./loading";
+export * from "./loading.js";

package/loading/loading.d.ts

@@ -1,4 +1,4 @@
-import { TkBox } from "../box/index";
+import { TkBox } from "../box/index.js";
 declare class TkLoading extends TkBox {
     static get styles(): import("lit").CSSResult[];
     circle: boolean;

package/navbar/index.d.ts

@@ -1 +1 @@
-export * from "./navbar";
+export * from "./navbar.js";

package/navbar/navbar.d.ts

@@ -1,4 +1,4 @@
-import { TkBox } from "../box/index";
+import { TkBox } from "../box/index.js";
 declare class TkNavbar extends TkBox {
     static get styles(): import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;

package/notie/index.d.ts

@@ -1 +1 @@
-export * from "./notie";
+export * from "./notie.js";

package/notie/notie.d.ts

@@ -1,5 +1,5 @@
 import { TemplateResult } from "lit";
-import { TkBox } from "../box/index";
+import { TkBox } from "../box/index.js";
 interface NotieOptions {
     background?: string;
     level?: NotieLevel;

package/notie/notie.js

@@ -52,7 +52,7 @@ let TkNotie = TkNotie_1 = class TkNotie extends TkBox {
             : ""}
 				${this.type == NotieType.input
             ? html `
-							<tk-textfield class="input" ></tk-textfield>
+							<tk-textfield class="input"></tk-textfield>
 					  `
             : ""}
 				${this.type == NotieType.confirm || this.type == NotieType.input
@@ -75,9 +75,11 @@ let TkNotie = TkNotie_1 = class TkNotie extends TkBox {
             this.resolve = resolve;
             this.style.setProperty("display", "flex");
             setTimeout(() => (this.open = true));
-            this.dispatchEvent(new Event("didShow"));
-            if (this.$input)
-                setTimeout(() => this.$input.focus());
+            this.dispatchEvent(new Event("did-show"));
+            setTimeout(() => {
+                if (this.$input)
+                    this.$input.focus();
+            }, 100);
             if (this.type == NotieType.show)
                 setTimeout(() => this.hide(false), this.delay);
         });
@@ -89,7 +91,7 @@ let TkNotie = TkNotie_1 = class TkNotie extends TkBox {
             value = null;
         this.$input ? (this.$input.value = "") : null;
         this.$container.addEventListener("transitionend", () => {
-            this.dispatchEvent(new Event("didHide"));
+            this.dispatchEvent(new Event("did-hide"));
             this.resolve(value);
             if (!this.persistent)
                 this.remove();

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);color:var(--foreground);text-align:center}:host .button{cursor:pointer;padding:.5em}:host .button.confirm,:host .button.forcer{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);color:var(--foreground);text-align:center}:host .button{cursor:pointer;padding:.5em}:host .button.confirm,:host .button.forcer{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: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.forcer{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.forcer{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.2",
+  "version": "0.8.6",
   "description": "Pragmatic UI Web Components",
   "type": "module",
   "main": "index.js",

package/pages/index.d.ts

@@ -1 +1 @@
-export * from "./pages";
+export * from "./pages.js";

package/radio/index.d.ts

@@ -1 +1 @@
-export * from "./radio";
+export * from "./radio.js";

package/select/index.d.ts

@@ -1 +1 @@
-export * from "./select";
+export * from "./select.js";

package/slider/index.d.ts

@@ -1 +1 @@
-export * from "./slider";
+export * from "./slider.js";

package/switch/index.d.ts

@@ -1 +1 @@
-export * from "./switch";
+export * from "./switch.js";

package/tab-group/index.d.ts

@@ -1 +1 @@
-export * from "./tab-group";
+export * from "./tab-group.js";

package/tag/index.d.ts

@@ -1 +1 @@
-export * from "./tag";
+export * from "./tag.js";

package/textarea/index.d.ts

@@ -1 +1 @@
-export * from "./textarea";
+export * from "./textarea.js";

package/textfield/index.d.ts

@@ -1 +1 @@
-export * from "./textfield";
+export * from "./textfield.js";

package/theme/index.d.ts

@@ -1 +1 @@
-export * from "./theme";
+export * from "./theme.js";

package/umd/tinkiet.min.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult } from "lit";
+import { LitElement, PropertyValueMap, TemplateResult } from "lit";
 declare const colors: readonly [
     "primary-lighter",
     "primary-light",
@@ -197,7 +197,7 @@ declare class TkDialog extends LitElement {
     blurOverlay: boolean;
     private resolve;
     render(): import("lit-html").TemplateResult<1>;
-    updated(props: any): void;
+    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     show(): Promise<string | boolean | null>;
     hide(value?: boolean | string | null): void;
 }
@@ -206,6 +206,33 @@ declare global {
         "tk-dialog": TkDialog;
     }
 }
+declare class TkDrawer extends LitElement {
+    static styles: import("lit").CSSResult;
+    _open: boolean;
+    set open(value: boolean);
+    get open(): boolean;
+    over: boolean;
+    openQuery: string;
+    overQuery: string;
+    right: boolean;
+    swipeable: boolean;
+    private $drawer;
+    private mql;
+    private pointerListener;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(props: any): void;
+    protected overMediaQuery(): void;
+    private overMediaQueryListener;
+    hideIfOver(): void;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-drawer": TkDrawer;
+    }
+}
 declare class TkForm extends LitElement {
     value: any;
     protected createRenderRoot(): Element | ShadowRoot;
@@ -584,5 +611,5 @@ declare global {
         "tk-theme": TkTheme;
     }
 }
-export { TkAccordion, TkBadge, TkBox, TkButton, TkCheckbox, TkDialog, TkForm, TkIcon, TkIcons, TkListItem, TkLoading, TkNavbar, TkNotie, TkPages, TkRadio, TkSelect, TkSlider, TkSwitch, TkTabGroup, TkTag, TkTextarea, TkTextfield, TkTheme };
+export { TkAccordion, TkBadge, TkBox, TkButton, TkCheckbox, TkDialog, TkDrawer, TkForm, TkIcon, TkIcons, TkListItem, TkLoading, TkNavbar, TkNotie, TkPages, TkRadio, TkSelect, TkSlider, TkSwitch, TkTabGroup, TkTag, TkTextarea, TkTextfield, TkTheme };
 //# sourceMappingURL=tinkiet.min.d.ts.map