tinkiet 0.8.4 → 0.8.10

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/index.d.ts

@@ -1 +1 @@
-export * from "./drawer";
+export * 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,24 +1,25 @@
-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 "./drawer/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";
+export * from "./tooltip/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;AACzB,+BAAyB;AACzB,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;AACxB,mCAA0B"}

package/index.js

@@ -21,6 +21,7 @@ import './tag/index.js';
 import './textarea/index.js';
 import './textfield/index.js';
 import './theme/index.js';
+import './tooltip/index.js';
 export { TkAccordion } from './accordion/accordion.js';
 export { TkBadge } from './badge/badge.js';
 export { TkBox } from './box/box.js';
@@ -45,3 +46,4 @@ export { TkTag } from './tag/tag.js';
 export { TkTextarea } from './textarea/textarea.js';
 export { TkTextfield } from './textfield/textfield.js';
 export { TkTheme } from './theme/theme.js';
+export { TkTooltip } from './tooltip/tooltip.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;
@@ -20,6 +20,7 @@ interface NotieConfirmOptions extends NotieOptions {
 }
 interface NotieInputOptions extends NotieConfirmOptions {
     password?: boolean;
+    inputType?: string;
 }
 declare enum NotieType {
     show = "show",
@@ -44,6 +45,7 @@ declare class TkNotie extends TkBox {
     delay: number;
     animationDelay: number;
     text: string;
+    inputType: string;
     buttonText: string;
     confirmText: string;
     cancelText: string;

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 type=${this.inputType} 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();
@@ -105,6 +107,7 @@ let TkNotie = TkNotie_1 = class TkNotie extends TkBox {
         this.level = NotieLevel.info;
         this.delay = 3000;
         this.animationDelay = 300;
+        this.inputType = "text";
         this.buttonText = "OK";
         this.confirmText = "OK";
         this.cancelText = "CANCEL";
@@ -127,7 +130,8 @@ let TkNotie = TkNotie_1 = class TkNotie extends TkBox {
     }
     static input(options) {
         const notie = this.getNotie(options, NotieType.input);
-        options.password ? (notie.$input.type = "password") : null;
+        options.inputType ? (notie.inputType = options.inputType) : null;
+        options.password ? (notie.inputType = "password") : null;
         options.confirmText ? (notie.confirmText = options.confirmText) : null;
         options.cancelText ? (notie.cancelText = options.cancelText) : null;
         return notie.show();
@@ -168,6 +172,9 @@ __decorate([
 __decorate([
     property()
 ], TkNotie.prototype, "text", void 0);
+__decorate([
+    property()
+], TkNotie.prototype, "inputType", void 0);
 __decorate([
     property()
 ], TkNotie.prototype, "buttonText", void 0);

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.4",
+  "version": "0.8.10",
   "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/tab-group/tab-group.js

@@ -35,7 +35,7 @@ let TkTabGroup = class TkTabGroup extends LitElement {
     }
     updated(props) {
         var _a, _b;
-        if (props.has("selected")) {
+        if (props.has("selected") && this.selected !== "") {
             this.querySelectorAll("*").forEach(node => node.removeAttribute("selected"));
             (_a = this.querySelector(`[tab="${this.selected}"]`)) === null || _a === void 0 ? void 0 : _a.setAttribute("selected", "");
         }
@@ -63,13 +63,6 @@ let TkTabGroup = class TkTabGroup extends LitElement {
                 }
             });
         }
-        // else {
-        // 	if (this.circle) {
-        // 		this.$circle.style.transform = `translate(-100px, -${this.$circle.clientWidth / 2}px)`;
-        // 	} else {
-        // 		this.$underline.style.width = "0";
-        // 	}
-        // }
     }
 };
 TkTabGroup.styles = css `

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/textarea/textarea.js

@@ -94,7 +94,7 @@ __decorate([
     property({ type: Boolean })
 ], TkTextarea.prototype, "required", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TkTextarea.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean })

package/textfield/index.d.ts

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

package/textfield/textfield.js

@@ -27,35 +27,37 @@ let TkTextfield = class TkTextfield extends LitElement {
         return this.$input != null ? this.$input.value : this.initialValue || "";
     }
     render() {
-        return html `<div id="container">
-			<slot id="before" name="before"></slot>
-			<div id="wrapper">
-				<div id="label">${this.label}</div>
-				<slot id="slot"></slot>
-				<input
-					id=${this._id}
-					@keydown=${this.handleChange.bind(this)}
-					@input=${this.handleChange.bind(this)}
-					@focusout=${this.handleChange.bind(this)}
-					?required="${this.required}"
-					?disabled="${this.disabled}"
-					?readonly="${this.readonly}"
-					autocomplete="${ifDefined(this.autocomplete)}"
-					autocapitalize="${ifDefined(this.autocapitalize)}"
-					aria-label="${ifDefined(this.label)}"
-					type="${ifDefined(this.type)}"
-					name="${ifDefined(this.name)}"
-					list="${ifDefined(this.list)}"
-					pattern="${ifDefined(this.pattern)}"
-					minlength="${ifDefined(this.minLength)}"
-					maxlength="${ifDefined(this.maxLength)}"
-					min="${ifDefined(this.min)}"
-					max="${ifDefined(this.max)}"
-					tabindex="${this.disabled ? -1 : 0}"
-				/>
+        return html `
+			<div id="container">
+				<slot id="before" name="before"></slot>
+				<div id="wrapper">
+					<div id="label">${this.label}</div>
+					<slot id="slot"></slot>
+					<input
+						id=${this._id}
+						@keydown=${this.handleChange.bind(this)}
+						@input=${this.handleChange.bind(this)}
+						@focusout=${this.handleChange.bind(this)}
+						?required="${this.required}"
+						?disabled="${this.disabled}"
+						?readonly="${this.readonly}"
+						autocomplete="${ifDefined(this.autocomplete)}"
+						autocapitalize="${ifDefined(this.autocapitalize)}"
+						aria-label="${ifDefined(this.label)}"
+						type="${ifDefined(this.type)}"
+						name="${ifDefined(this.name)}"
+						list="${ifDefined(this.list)}"
+						pattern="${ifDefined(this.pattern)}"
+						minlength="${ifDefined(this.minLength)}"
+						maxlength="${ifDefined(this.maxLength)}"
+						min="${ifDefined(this.min)}"
+						max="${ifDefined(this.max)}"
+						tabindex="${this.disabled ? -1 : 0}"
+					/>
+				</div>
+				<slot id="after" name="after"></slot>
 			</div>
-			<slot id="after" name="after"></slot>
-		</div> `;
+		`;
     }
     handleChange() {
         this.refreshAttributes();
@@ -94,7 +96,7 @@ __decorate([
     property({ type: Boolean })
 ], TkTextfield.prototype, "required", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TkTextfield.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean })

package/theme/index.d.ts

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

package/tooltip/index.d.ts

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

package/tooltip/index.js

@@ -0,0 +1 @@
+export { TkTooltip } from './tooltip.js';

package/tooltip/tooltip.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from "lit";
+declare class TkTooltip extends LitElement {
+    static styles: import("lit").CSSResult;
+    position: "bottom" | "top" | "right" | "left";
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tk-tooltip": TkTooltip;
+    }
+}
+export { TkTooltip };

package/tooltip/tooltip.js

@@ -0,0 +1,33 @@
+import { __decorate } from 'tslib';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import css_248z from './tooltip.scss.js';
+
+let TkTooltip = class TkTooltip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.position = "top";
+    }
+    render() {
+        return html `
+			<div class="container">
+				<slot></slot>
+				<div class="tooltip ${this.position}">
+					<slot name="tooltip"></slot>
+				</div>
+			</div>
+            
+		`;
+    }
+};
+TkTooltip.styles = css `
+		${unsafeCSS(css_248z)}
+	`;
+__decorate([
+    property({ attribute: true, type: String })
+], TkTooltip.prototype, "position", void 0);
+TkTooltip = __decorate([
+    customElement("tk-tooltip")
+], TkTooltip);
+
+export { TkTooltip };

package/tooltip/tooltip.scss.js

@@ -0,0 +1,4 @@
+var css_248z = ".container{display:inline-block;position:relative}.container .tooltip{background-color:#555;border-radius:6px;color:#fff;opacity:0;padding:.4em;position:absolute;text-align:center;transition:opacity .3s;visibility:hidden;z-index:var(--notie-z-index,400)}.container .tooltip.top{right:50%;top:0;transform:translateX(50%) translateY(calc(-100% - 5px))}.container .tooltip.top:after{border:5px solid #0000;border-top-color:#555;content:\"\";left:50%;margin-left:-5px;position:absolute;top:100%}.container .tooltip.right{right:0;top:50%;transform:translateX(calc(100% + 5px)) translateY(-50%)}.container .tooltip.right:after{border:5px solid #0000;border-right-color:#555;content:\"\";margin-top:-5px;position:absolute;right:100%;top:50%}.container .tooltip.bottom{bottom:0;right:50%;transform:translateX(50%) translateY(calc(100% + 5px))}.container .tooltip.bottom:after{border:5px solid;border-color:#0000 #0000 #555;bottom:100%;content:\"\";left:50%;margin-left:-5px;position:absolute}.container .tooltip.left{left:0;top:50%;transform:translateX(calc(-100% - 5px)) translateY(-50%)}.container .tooltip.left:after{border:5px solid #0000;border-left-color:#555;content:\"\";left:100%;margin-top:-5px;position:absolute;top:50%}.container:hover .tooltip{opacity:1;visibility:visible}";
+var stylesheet=".container{display:inline-block;position:relative}.container .tooltip{background-color:#555;border-radius:6px;color:#fff;opacity:0;padding:.4em;position:absolute;text-align:center;transition:opacity .3s;visibility:hidden;z-index:var(--notie-z-index,400)}.container .tooltip.top{right:50%;top:0;transform:translateX(50%) translateY(calc(-100% - 5px))}.container .tooltip.top:after{border:5px solid #0000;border-top-color:#555;content:\"\";left:50%;margin-left:-5px;position:absolute;top:100%}.container .tooltip.right{right:0;top:50%;transform:translateX(calc(100% + 5px)) translateY(-50%)}.container .tooltip.right:after{border:5px solid #0000;border-right-color:#555;content:\"\";margin-top:-5px;position:absolute;right:100%;top:50%}.container .tooltip.bottom{bottom:0;right:50%;transform:translateX(50%) translateY(calc(100% + 5px))}.container .tooltip.bottom:after{border:5px solid;border-color:#0000 #0000 #555;bottom:100%;content:\"\";left:50%;margin-left:-5px;position:absolute}.container .tooltip.left{left:0;top:50%;transform:translateX(calc(-100% - 5px)) translateY(-50%)}.container .tooltip.left:after{border:5px solid #0000;border-left-color:#555;content:\"\";left:100%;margin-top:-5px;position:absolute;top:50%}.container:hover .tooltip{opacity:1;visibility:visible}";
+
+export { css_248z as default, stylesheet };