tinkiet 0.11.4 → 0.11.8

package/list-item/index.js

@@ -47,20 +47,21 @@ let TkListItem = class TkListItem extends box/* TkBox */.P {
         return (0,external_lit_.html) `
 			<slot name="before" @click=${this.handleClick}></slot>
 			<div id="content">
-				<slot></slot>
+				<slot @slotchange=${this.ensureAriaLabel}></slot>
 			</div>
 			<slot name="after" @click=${this.handleClick}></slot>
 			${this.href
             ? (0,external_lit_.html) `
-						<a tabindex="-1" id="ahref" href="${this.href}" target=${(0,if_defined_js_.ifDefined)(this.target)} rel="noreferrer" aria-label=${this.ariaLabel}></a>
+						<a tabindex="-1" id="ahref" href=${this.href} target=${(0,if_defined_js_.ifDefined)(this.target)} rel="noreferrer" aria-label=${this.ariaLabel}></a>
 				  `
-            : ""}
+            : external_lit_.nothing}
 		`;
     }
     constructor() {
         super();
         this.href = "";
         this.target = "";
+        this.ariaLabel = "";
         this.onKeyDown = (e) => {
             if (e.code === "Space" || e.code === "Enter") {
                 e.preventDefault();
@@ -74,19 +75,16 @@ let TkListItem = class TkListItem extends box/* TkBox */.P {
             if (target.tagName == "BUTTON" || target.tagName == "TK-BUTTON" || target.tagName == "TK-SWITCH" || target.tagName == "TK-CHECKBOX") {
                 return;
             }
-            if (this.href && e.isTrusted) {
+            if (this.href && e.isTrusted && this.$ahref) {
                 e.stopPropagation();
                 e.preventDefault();
                 this.$ahref.click();
             }
         };
     }
-    firstUpdated() {
-        if (!this.ariaLabel && this.innerText)
-            this.ariaLabel = this.innerText;
-    }
     connectedCallback() {
         super.connectedCallback();
+        this.ensureAriaLabel();
         this.addEventListener("keydown", this.onKeyDown);
         this.addEventListener("click", this.handleClick);
     }
@@ -95,15 +93,23 @@ let TkListItem = class TkListItem extends box/* TkBox */.P {
         this.removeEventListener("click", this.handleClick);
         this.removeEventListener("keydown", this.onKeyDown);
     }
+    ensureAriaLabel() {
+        var _a;
+        if (this.ariaLabel)
+            return;
+        const text = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        if (text)
+            this.ariaLabel = text;
+    }
 };
 __decorate([
-    (0,decorators_js_.property)({ attribute: true })
+    (0,decorators_js_.property)({ type: String, reflect: true })
 ], TkListItem.prototype, "href", void 0);
 __decorate([
-    (0,decorators_js_.property)({ attribute: true })
+    (0,decorators_js_.property)({ type: String, reflect: true })
 ], TkListItem.prototype, "target", void 0);
 __decorate([
-    (0,decorators_js_.property)({ attribute: "aria-label" })
+    (0,decorators_js_.property)({ attribute: "aria-label", reflect: true })
 ], TkListItem.prototype, "ariaLabel", void 0);
 __decorate([
     (0,decorators_js_.query)("#ahref")
@@ -332,7 +338,7 @@ var x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitElement), ["css"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.css), ["html"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.html), ["unsafeCSS"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.unsafeCSS) });
+module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitElement), ["css"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.css), ["html"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.html), ["nothing"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.nothing), ["unsafeCSS"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.unsafeCSS) });
 
 /***/ }),
 

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

@@ -4,14 +4,14 @@ export declare class TkListItem extends TkBox {
     href: string;
     target: string;
     ariaLabel: string;
-    protected $ahref: HTMLAnchorElement;
+    protected $ahref?: HTMLAnchorElement;
     render(): import("lit").TemplateResult<1>;
     constructor();
-    firstUpdated(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected onKeyDown: (e: KeyboardEvent) => void;
     protected handleClick: (e: Event) => void;
+    private ensureAriaLabel;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinkiet",
-  "version": "0.11.4",
+  "version": "0.11.8",
   "description": "Pragmatic UI Web Components",
   "type": "module",
   "main": "index.js",

package/theme/index.js

@@ -47,8 +47,13 @@ let TkTheme = class TkTheme extends external_lit_.LitElement {
         this.error = "#B3261E";
         this.neutral = "#5E5F5C";
         this.neutralVariant = "#5c6057";
-        this.forceBody = false;
         this.inverted = false;
+        this.primary_hsl = [];
+        this.secondary_hsl = [];
+        this.tertiary_hsl = [];
+        this.error_hsl = [];
+        this.neutral_hsl = [];
+        this.neutral_variant_hsl = [];
     }
     render() {
         return (0,external_lit_.html) `
@@ -58,6 +63,17 @@ let TkTheme = class TkTheme extends external_lit_.LitElement {
     firstUpdated(_changedProperties) {
         this.setThemeColor();
     }
+    updated(changedProps) {
+        if (changedProps.has("primary") ||
+            changedProps.has("secondary") ||
+            changedProps.has("tertiary") ||
+            changedProps.has("error") ||
+            changedProps.has("neutral") ||
+            changedProps.has("neutralVariant")) {
+            this.setThemeColor();
+        }
+        super.updated(changedProps);
+    }
     hexToHSL(hex) {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
         if (result == null)
@@ -94,8 +110,11 @@ let TkTheme = class TkTheme extends external_lit_.LitElement {
         this.error_hsl = this.hexToHSL(this.error);
         this.neutral_hsl = this.hexToHSL(this.neutral);
         this.neutral_variant_hsl = this.hexToHSL(this.neutralVariant);
-        const style = document.createElement("style");
-        style.innerHTML = `
+        if (!this.styleEl) {
+            this.styleEl = document.createElement("style");
+            document.body.appendChild(this.styleEl);
+        }
+        this.styleEl.innerHTML = `
 			:root {
 				--primary-h: ${this.primary_hsl[0]};
 				--primary-s: ${this.primary_hsl[1]};
@@ -117,7 +136,6 @@ let TkTheme = class TkTheme extends external_lit_.LitElement {
 				--neutral-variant-l: ${this.neutral_variant_hsl[2]};
 			}
 		`;
-        document.body.appendChild(style);
     }
 };
 TkTheme.styles = (0,external_lit_.css) `
@@ -141,30 +159,9 @@ __decorate([
 __decorate([
     (0,decorators_js_.property)()
 ], TkTheme.prototype, "neutralVariant", void 0);
-__decorate([
-    (0,decorators_js_.property)({ type: Boolean, attribute: "force-body", reflect: true })
-], TkTheme.prototype, "forceBody", void 0);
 __decorate([
     (0,decorators_js_.property)({ type: Boolean, attribute: true, reflect: true })
 ], TkTheme.prototype, "inverted", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "primary_hsl", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "secondary_hsl", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "tertiary_hsl", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "error_hsl", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "neutral_hsl", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "neutral_variant_hsl", void 0);
 TkTheme = __decorate([
     (0,decorators_js_.customElement)("tk-theme")
 ], TkTheme);
@@ -180,7 +177,7 @@ var x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property), ["state"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.state) });
+module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property) });
 
 /***/ })
 

package/theme/theme.d.ts

@@ -7,7 +7,6 @@ export declare class TkTheme extends LitElement {
     error: string;
     neutral: string;
     neutralVariant: string;
-    forceBody: boolean;
     inverted: boolean;
     private primary_hsl;
     private secondary_hsl;
@@ -15,8 +14,10 @@ export declare class TkTheme extends LitElement {
     private error_hsl;
     private neutral_hsl;
     private neutral_variant_hsl;
+    private styleEl?;
     render(): import("lit").TemplateResult<1>;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected updated(changedProps: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     private hexToHSL;
     private setThemeColor;
 }