tinkiet 0.3.4 → 0.4.2

package/button/button.d.ts

@@ -16,6 +16,7 @@ import { TkBox } from "../box/index";
  */
 declare class TkButton extends TkBox {
     static get styles(): import("lit").CSSResult[];
+    private _id;
     href: string | null;
     target: "_blank" | "_parent" | "_self" | "_top";
     type: "submit" | "reset" | "button";

package/button/button.js

@@ -25,6 +25,7 @@ import { TkBox } from '../box/box.js';
 let TkButton = class TkButton extends TkBox {
     constructor() {
         super(...arguments);
+        this._id = uniqueID();
         this.href = null;
         this.type = "button";
         this.disabled = false;
@@ -38,7 +39,7 @@ let TkButton = class TkButton extends TkBox {
     render() {
         return html `<div class="before"><slot name="before"></slot></div><div class="content"><slot></slot></div><div class="after"><slot name="after"></slot></div><div class="badge-in"><slot name="badge-in"></slot></div><div class="badge-out"><slot name="badge-out"></slot></div>${this.href
             ? html `<a hidden id="ahref" href="${this.href}" target="${ifDefined(this.target)}" rel="noreferrer"></a>`
-            : ""} <button id="${uniqueID()}" hidden type="${ifDefined(this.type)}"></button>`;
+            : ""} <button id="${this._id}" hidden type="${ifDefined(this.type)}"></button>`;
     }
     connectedCallback() {
         super.connectedCallback();

package/checkbox/checkbox.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 declare class TkCheckbox extends LitElement {
     static styles: import("lit").CSSResult;
+    private _id;
     name: string;
     value: string;
     checked: boolean;

package/checkbox/checkbox.js

@@ -9,10 +9,11 @@ import css_248z from './checkbox.scss.js';
 let TkCheckbox = class TkCheckbox extends LitElement {
     constructor() {
         super(...arguments);
+        this._id = uniqueID();
         this.checked = false;
     }
     render() {
-        return html `<tk-box direction="row" align-items="center"><div tabindex="0" class="checkbox"><svg id="checkmark" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 24 24"><path id="checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path><line id="indeterminate-path" fill="none" x1="0" y1="12.5" x2="24" y2="12.5"/></svg></div><span class="label"><slot></slot></span></tk-box><input id="${uniqueID()}" slot="none" style="display:none" ?checked="${this.checked}" type="checkbox" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" aria-hidden="true" tabindex="-1">`;
+        return html `<tk-box direction="row" align-items="center"><div tabindex="0" class="checkbox"><svg id="checkmark" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 24 24"><path id="checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path><line id="indeterminate-path" fill="none" x1="0" y1="12.5" x2="24" y2="12.5"/></svg></div><span class="label"><slot></slot></span></tk-box><input id="${this._id}" slot="none" style="display:none" ?checked="${this.checked}" type="checkbox" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" aria-hidden="true" tabindex="-1">`;
     }
     connectedCallback() {
         super.connectedCallback();

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: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:#00000080;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)}: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:#00000080;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)}: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{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:#00000080;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:#00000080;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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinkiet",
-  "version": "0.3.4",
+  "version": "0.4.2",
   "description": "Pragmatic UI Web Components",
   "main": "index.js",
   "module": "index.js",
@@ -27,7 +27,7 @@
   "homepage": "https://tinkiet.educ.cloud",
   "dependencies": {
     "contactjs": "^1.4.0",
-    "lit": "^2.2.1",
+    "lit": "^2.2.2",
     "tslib": "^2.3.1"
   },
   "contributors": [

package/radio/radio.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 declare class TkRadio extends LitElement {
     static styles: import("lit").CSSResult;
+    private _id;
     name: string;
     checked: boolean;
     required: boolean;

package/radio/radio.js

@@ -9,13 +9,14 @@ import css_248z from './radio.scss.js';
 let TkRadio = class TkRadio extends LitElement {
     constructor() {
         super(...arguments);
+        this._id = uniqueID();
         this.checked = false;
         this.required = false;
         this.disabled = false;
         this.readonly = false;
     }
     render() {
-        return html `<tk-box direction="row" align-items="center"><div tabindex="0" class="radio"><div id="dot"></div></div><span class="label"><slot></slot></span></tk-box><input id="${uniqueID()}" slot="none" style="display:none" type="radio" ?checked="${this.checked}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" value="${ifDefined(this.value)}" name="${ifDefined(this.name)}" aria-hidden="true" tabindex="-1">`;
+        return html `<tk-box direction="row" align-items="center"><div tabindex="0" class="radio"><div id="dot"></div></div><span class="label"><slot></slot></span></tk-box><input id="${this._id}" slot="none" style="display:none" type="radio" ?checked="${this.checked}" .checked="${this.checked}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" value="${ifDefined(this.value)}" name="${ifDefined(this.name)}" aria-hidden="true" tabindex="-1">`;
     }
     connectedCallback() {
         super.connectedCallback();

package/select/select.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 declare class TkSelect extends LitElement {
     static styles: import("lit").CSSResult;
+    private _id;
     set value(value: string);
     get value(): string;
     name: string;

package/select/select.js

@@ -9,6 +9,7 @@ import css_248z from './select.scss.js';
 let TkSelect = class TkSelect extends LitElement {
     constructor() {
         super(...arguments);
+        this._id = uniqueID();
         this.type = "text";
         this.required = false;
         this.disabled = false;
@@ -27,7 +28,7 @@ let TkSelect = class TkSelect extends LitElement {
         return this.$select != null ? this.$select.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><select id="${uniqueID()}" @keydown="${this.handleChange.bind(this)}" @input="${this.handleChange.bind(this)}" @focusout="${this.handleChange.bind(this)}" @change="${this.handleChange.bind(this)}" .value="${this.initialValue}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" name="${ifDefined(this.name)}" autocomplete="${ifDefined(this.autocomplete)}" tabindex="${this.disabled ? -1 : 0}"></select> <svg id="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 25" preserveAspectRatio="none"><polygon points="0,0 50,0 25,25"/></svg></div><slot id="after" name="after"></slot></div>`;
+        return html `<div id="container"><slot id="before" name="before"></slot><div id="wrapper"><div id="label">${this.label}</div><slot id="slot"></slot><select id="${this._id}" @keydown="${this.handleChange.bind(this)}" @input="${this.handleChange.bind(this)}" @focusout="${this.handleChange.bind(this)}" @change="${this.handleChange.bind(this)}" .value="${this.initialValue}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" name="${ifDefined(this.name)}" autocomplete="${ifDefined(this.autocomplete)}" tabindex="${this.disabled ? -1 : 0}"></select> <svg id="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 25" preserveAspectRatio="none"><polygon points="0,0 50,0 25,25"/></svg></div><slot id="after" name="after"></slot></div>`;
     }
     handleChange() {
         this.refreshAttributes();

package/slider/slider.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 declare class TkSlider extends LitElement {
     static styles: import("lit").CSSResult;
+    private _id;
     name: string;
     list: string;
     required: boolean;

package/slider/slider.js

@@ -8,6 +8,7 @@ import css_248z from './slider.scss.js';
 let TkSlider = class TkSlider extends LitElement {
     constructor() {
         super(...arguments);
+        this._id = uniqueID();
         this.required = false;
         this.disabled = false;
         this.readonly = false;
@@ -20,7 +21,7 @@ let TkSlider = class TkSlider extends LitElement {
     render() {
         return html `<div id="container"><slot id="before" name="before"></slot><div id="wrapper"><div id="label">${this.label}</div><div id="slot-wrapper"><input @input="${this.handleChange.bind(this)}" id="slider" type="range" .value="${this.value.toString()}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" aria-label="${ifDefined(this.label)}" name="${ifDefined(this.name)}" autocomplete="${ifDefined(this.autocomplete)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" tabindex="0"> ${this.thumbLabel || this.thumbLabelPersist
             ? html `<div id="thumb-container"><div id="thumb-label"><slot name="thumb-label">${this.value}</slot></div></div>`
-            : ''}</div><input id="${uniqueID()}" class="hidden-input" type="hidden" value="${this.value.toString()}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" aria-label="${ifDefined(this.label)}" name="${ifDefined(this.name)}"></div><slot id="after" name="after"></slot></div>`;
+            : ''}</div><input id="${this._id}" class="hidden-input" type="hidden" value="${this.value.toString()}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" aria-label="${ifDefined(this.label)}" name="${ifDefined(this.name)}"></div><slot id="after" name="after"></slot></div>`;
     }
     handleChange(e) {
         e.target.checkValidity() ? this.removeAttribute("invalid") : this.setAttribute("invalid", "");

package/switch/switch.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 declare class TkSwitch extends LitElement {
     static styles: import("lit").CSSResult;
+    private _id;
     name: string;
     checked: boolean;
     required: boolean;

package/switch/switch.js

@@ -9,13 +9,14 @@ import css_248z from './switch.scss.js';
 let TkSwitch = class TkSwitch extends LitElement {
     constructor() {
         super(...arguments);
+        this._id = uniqueID();
         this.checked = false;
         this.required = false;
         this.disabled = false;
         this.readonly = false;
     }
     render() {
-        return html `<tk-box direction="row" align-items="center"><span class="switch"><span id="knob"></span> </span><span class="label"><slot></slot></span></tk-box><input id="${uniqueID()}" slot="none" style="display:none" type="radio" ?checked="${this.checked}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" value="${ifDefined(this.value)}" name="${ifDefined(this.name)}" aria-hidden="true" tabindex="-1">`;
+        return html `<tk-box direction="row" align-items="center"><span class="switch"><span id="knob"></span> </span><span class="label"><slot></slot></span></tk-box><input id="${this._id}" slot="none" style="display:none" type="radio" ?checked="${this.checked}" ?required="${this.required}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" value="${ifDefined(this.value)}" name="${ifDefined(this.name)}" aria-hidden="true" tabindex="-1">`;
     }
     connectedCallback() {
         super.connectedCallback();

package/umd/tinkiet.min.d.ts

@@ -151,6 +151,7 @@ declare global {
  */
 declare class TkButton extends TkBox {
     static get styles(): import("lit").CSSResult[];
+    private _id;
     href: string | null;
     target: "_blank" | "_parent" | "_self" | "_top";
     type: "submit" | "reset" | "button";
@@ -172,6 +173,7 @@ declare global {
 }
 declare class TkCheckbox extends LitElement {
     static styles: import("lit").CSSResult;
+    private _id;
     name: string;
     value: string;
     checked: boolean;
@@ -386,6 +388,7 @@ declare global {
 }
 declare class TkRadio extends LitElement {
     static styles: import("lit").CSSResult;
+    private _id;
     name: string;
     checked: boolean;
     required: boolean;
@@ -407,6 +410,7 @@ declare global {
 }
 declare class TkSelect extends LitElement {
     static styles: import("lit").CSSResult;
+    private _id;
     set value(value: string);
     get value(): string;
     name: string;
@@ -436,6 +440,7 @@ declare global {
 }
 declare class TkSlider extends LitElement {
     static styles: import("lit").CSSResult;
+    private _id;
     name: string;
     list: string;
     required: boolean;
@@ -463,6 +468,7 @@ declare global {
 }
 declare class TkSwitch extends LitElement {
     static styles: import("lit").CSSResult;
+    private _id;
     name: string;
     checked: boolean;
     required: boolean;