tinkiet 0.10.0 → 0.11.0

package/accordion/accordion.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from "lit";
 import { TkFocusableBox } from "../box/focusable-box";
 export declare class TkAccordion extends TkFocusableBox {
     static get styles(): import("lit").CSSResult[];
@@ -5,10 +6,13 @@ export declare class TkAccordion extends TkFocusableBox {
     checked: boolean;
     rippleHeader: boolean;
     protected $input: HTMLInputElement;
+    constructor();
     render(): import("lit").TemplateResult<1>;
     firstUpdated(): void;
+    protected updated(changed: PropertyValues<this>): void;
     protected onKeyDown(e: KeyboardEvent): void;
     protected handleClick(): void;
+    private syncInput;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/accordion/index.js

@@ -1,5 +1,4 @@
 import * as __WEBPACK_EXTERNAL_MODULE_lit__ from "lit";
-import * as __WEBPACK_EXTERNAL_MODULE_lit_directives_if_defined_js_76c6050d__ from "lit/directives/if-defined.js";
 import * as __WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__ from "lit/decorators.js";
 /******/ var __webpack_modules__ = ({
 
@@ -16,8 +15,6 @@ __webpack_require__.d(__webpack_exports__, {
 var external_lit_ = __webpack_require__(2927);
 // EXTERNAL MODULE: external "lit/decorators.js"
 var decorators_js_ = __webpack_require__(8899);
-// EXTERNAL MODULE: external "lit/directives/if-defined.js"
-var if_defined_js_ = __webpack_require__(3517);
 // EXTERNAL MODULE: ./tinkiet/box/index.ts
 var box = __webpack_require__(3433);
 // EXTERNAL MODULE: ./tinkiet/utils/unique.ts
@@ -59,7 +56,7 @@ __decorate([
 ], TkFocusableBox.prototype, "disabled", void 0);
 
 ;// ./tinkiet/accordion/accordion.scss
-/* harmony default export */ const accordion = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host .header{color:hsl(var(--on-surface));background-color:hsl(var(--surface-container-lowest));padding:16px;border:solid 2px hsl(var(--outline))}:host .header>*{margin:0 10px}:host .header{cursor:pointer}:host .header:after{transition:transform .3s;content:\"▼\";display:inline-block;font-size:12px}:host .header .before{width:fit-content}:host .header .header-content{flex:1}:host .content{width:95%;margin:0 auto;height:0;opacity:0;visibility:hidden;transition:all .2s}:host h3,:host h5{margin:0}:host([checked]) .header{background-color:hsl(var(--primary));color:hsl(var(--on-primary))}:host([checked]) .header:after{transform:rotate(180deg)}:host([checked]) .content{height:auto;opacity:1;visibility:visible;transition:all .3s,opacity .7s}:host([pill]) .header{border-radius:9999px}");
+/* harmony default export */ const accordion = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host .header{position:relative;overflow:hidden;color:hsl(var(--on-surface));background-color:hsl(var(--surface-container-low));padding:16px;border:1px solid hsl(var(--outline-variant));border-radius:12px;box-shadow:0px 1px 2px 0px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15);gap:12px;cursor:pointer;transition:background-color var(--transition-duration-medium, 180ms) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)),color var(--transition-duration-medium, 180ms) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)),box-shadow var(--transition-duration-medium, 180ms) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)),border-color var(--transition-duration-medium, 180ms) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1))}:host .header:after{transition:transform .3s var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1));content:\"▼\";display:inline-block;font-size:12px;margin-inline-start:8px}:host .header:before{content:\"\";position:absolute;inset:0;background:hsl(var(--on-surface));opacity:0;transition:opacity var(--transition-duration-medium, 180ms) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1));pointer-events:none}:host .header .before{width:fit-content}:host .header .header-content{flex:1}:host .content{width:100%;margin:4px 0 0;padding:0 16px;opacity:0;visibility:hidden;max-height:0;overflow:hidden;transform:translateY(-8px);transition:max-height .28s var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)),opacity .28s var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)),transform .28s var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1));background:hsl(var(--surface-container-lowest));border-radius:0 0 12px 12px}:host h3,:host h5{margin:0}:host .header:hover:before{opacity:.08}:host .header:active:before{opacity:.12}:host .header:focus-visible{outline:none;border-color:hsl(var(--primary));box-shadow:0px 1px 2px 0px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15),0 0 0 3px hsl(var(--primary)/0.2)}:host([checked]) .header{background-color:hsl(var(--primary-container));color:hsl(var(--on-primary-container));border-color:hsl(var(--primary));box-shadow:0px 1px 2px 0px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}:host([checked]) .header:after{transform:rotate(180deg)}:host([checked]) .header:before{background:hsl(var(--on-primary-container))}:host([checked]) .content{opacity:1;visibility:visible;max-height:var(--tk-accordion-max-height, 1000px);padding:12px 16px;transform:translateY(0);transition:max-height .28s var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)),opacity .28s var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)),transform .28s var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1))}:host([pill]) .header{border-radius:9999px}@media(prefers-reduced-motion: reduce){:host .header:after{transition:none}:host .header:before{transition:none}:host .header{transition:none}:host .content{transition:none}}");
 ;// ./tinkiet/accordion/accordion.ts
 var accordion_decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -72,13 +69,7 @@ var accordion_decorate = (undefined && undefined.__decorate) || function (decora
 
 
 
-
 let TkAccordion = class TkAccordion extends TkFocusableBox {
-    constructor() {
-        super(...arguments);
-        this.checked = false;
-        this.rippleHeader = false;
-    }
     static get styles() {
         return [
             ...box/* TkBox */.P.styles,
@@ -87,11 +78,17 @@ let TkAccordion = class TkAccordion extends TkFocusableBox {
 			`
         ];
     }
+    constructor() {
+        super();
+        this.checked = false;
+        this.rippleHeader = false;
+        this.handleClick = this.handleClick.bind(this);
+    }
     render() {
         return (0,external_lit_.html) `
 			<tk-box margin="small">
 				<tk-box
-					@click=${this.handleClick.bind(this)}
+					@click=${this.handleClick}
 					?ripple=${this.rippleHeader}
 					class="header"
 					direction="row"
@@ -109,22 +106,22 @@ let TkAccordion = class TkAccordion extends TkFocusableBox {
 					<slot></slot>
 				</tk-box>
 			</tk-box>
-			<input
-				id=${this.id}
-				slot="none"
-				style="display: none;"
-				type="radio"
-				?checked="${this.checked}"
-				?disabled="${this.disabled}"
-				name="${(0,if_defined_js_.ifDefined)(this.name)}"
-				aria-hidden="true"
-				tabindex="-1"
-			/>
 		`;
     }
     firstUpdated() {
+        this.$input = document.createElement("input");
+        this.$input.type = "radio";
+        this.$input.slot = "none";
+        this.$input.style.display = "none";
+        this.$input.setAttribute("aria-hidden", "true");
+        this.$input.tabIndex = -1;
+        this.syncInput();
         this.appendChild(this.$input);
     }
+    updated(changed) {
+        super.updated(changed);
+        this.syncInput();
+    }
     onKeyDown(e) {
         if (e.code === "Space" || e.code === "Enter") {
             e.preventDefault();
@@ -138,7 +135,16 @@ let TkAccordion = class TkAccordion extends TkFocusableBox {
             this.getRootNode()
                 .querySelectorAll(`tk-accordion[name="${this.name}"]`)
                 .forEach(el => (el != this ? (el.checked = false) : null));
-        this.dispatchEvent(new Event("change"));
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+    syncInput() {
+        var _a;
+        if (!this.$input)
+            return;
+        this.$input.id = this.id;
+        this.$input.name = (_a = this.name) !== null && _a !== void 0 ? _a : "";
+        this.$input.checked = this.checked;
+        this.$input.disabled = this.disabled;
     }
 };
 accordion_decorate([
@@ -150,9 +156,6 @@ accordion_decorate([
 accordion_decorate([
     (0,decorators_js_.property)({ attribute: "ripple-header", type: Boolean })
 ], TkAccordion.prototype, "rippleHeader", void 0);
-accordion_decorate([
-    (0,decorators_js_.query)("input")
-], TkAccordion.prototype, "$input", void 0);
 TkAccordion = accordion_decorate([
     (0,decorators_js_.customElement)("tk-accordion")
 ], TkAccordion);
@@ -391,17 +394,6 @@ module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitE
 
 
 
-/***/ }),
-
-/***/ 3517:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-var x = (y) => {
-	var x = {}; __webpack_require__.d(x, y); return x
-} 
-var y = (x) => (() => (x))
-module.exports = x({ ["ifDefined"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_directives_if_defined_js_76c6050d__.ifDefined) });
-
 /***/ }),
 
 /***/ 3770:
@@ -431,7 +423,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), ["query"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.query) });
+module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property) });
 
 /***/ })
 

package/badge/badge.d.ts

@@ -1,8 +1,8 @@
 import { LitElement } from "lit";
 /**
  * A badge WebComponent
- * @cssprop --tk-badge-color - Color of widget default to --primary
- * @cssprop --tk-badge-text-color - Text color of widget to --on-primary
+ * @cssprop --tk-badge-color - Badge background color (defaults to --primary)
+ * @cssprop --tk-badge-text-color - Badge text color (defaults to --on-primary)
  */
 export declare class TkBadge extends LitElement {
     static get styles(): import("lit").CSSResult;

package/badge/index.js

@@ -1,4 +1,5 @@
 import * as __WEBPACK_EXTERNAL_MODULE_lit__ from "lit";
+import * as __WEBPACK_EXTERNAL_MODULE_lit_directives_class_map_js_2f88e643__ from "lit/directives/class-map.js";
 import * as __WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__ from "lit/decorators.js";
 /******/ var __webpack_modules__ = ({
 
@@ -15,8 +16,10 @@ __webpack_require__.d(__webpack_exports__, {
 var external_lit_ = __webpack_require__(2927);
 // EXTERNAL MODULE: external "lit/decorators.js"
 var decorators_js_ = __webpack_require__(8899);
+// EXTERNAL MODULE: external "lit/directives/class-map.js"
+var class_map_js_ = __webpack_require__(4955);
 ;// ./tinkiet/badge/badge.scss
-/* harmony default export */ const badge = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{display:inline-flex}:host .badge{background-color:hsl(var(--error));font-family:\"Trebuchet MS\",\"Lucida Sans Unicode\",\"Lucida Grande\",\"Lucida Sans\",Arial,sans-serif;color:hsl(var(--on-error));height:16px;min-width:16px;max-width:34px;border-radius:8px;padding:4px;font-size:10px;line-height:8px;text-align:center;white-space:nowrap;user-select:none;cursor:inherit}:host .badge.empty{height:6px;width:6px;min-width:6px;border-radius:100%}");
+/* harmony default export */ const badge = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{display:inline-flex}:host .badge{background-color:var(--tk-badge-color, hsl(var(--error)));font-family:\"Trebuchet MS\",\"Lucida Sans Unicode\",\"Lucida Grande\",\"Lucida Sans\",Arial,sans-serif;color:var(--tk-badge-text-color, hsl(var(--on-error)));height:16px;min-width:16px;max-width:34px;border-radius:8px;padding:4px;font-size:10px;line-height:8px;text-align:center;white-space:nowrap;user-select:none;cursor:inherit}:host .badge.empty{height:6px;width:6px;min-width:6px;border-radius:100%}");
 ;// ./tinkiet/badge/badge.ts
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -27,26 +30,32 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 /**
  * A badge WebComponent
- * @cssprop --tk-badge-color - Color of widget default to --primary
- * @cssprop --tk-badge-text-color - Text color of widget to --on-primary
+ * @cssprop --tk-badge-color - Badge background color (defaults to --primary)
+ * @cssprop --tk-badge-text-color - Badge text color (defaults to --on-primary)
  */
 let TkBadge = class TkBadge extends external_lit_.LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+    }
     static get styles() {
         return (0,external_lit_.css) `
 			${(0,external_lit_.unsafeCSS)(badge)}
 		`;
     }
     render() {
+        const isEmpty = this.label.trim().length === 0;
         return (0,external_lit_.html) `
 			<slot></slot>
-			<div class="badge ${this.label ? "" : "empty"}">${this.label}</div>
+			<div class=${(0,class_map_js_.classMap)({ badge: true, empty: isEmpty })}>${this.label}</div>
 		`;
     }
 };
 __decorate([
-    (0,decorators_js_.property)()
+    (0,decorators_js_.property)({ type: String })
 ], TkBadge.prototype, "label", void 0);
 TkBadge = __decorate([
     (0,decorators_js_.customElement)("tk-badge")
@@ -67,6 +76,17 @@ module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitE
 
 /***/ }),
 
+/***/ 4955:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["classMap"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_directives_class_map_js_2f88e643__.classMap) });
+
+/***/ }),
+
 /***/ 8899:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 

package/box/box.d.ts

@@ -48,7 +48,7 @@ export declare class TkBox extends LitElement {
     render(): import("lit").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    updated(props: any): void;
+    protected updated(props: any): void;
     private showRipple;
     private hideRipple;
 }

package/box/focusable-box.d.ts

@@ -8,5 +8,5 @@ export declare class TkFocusableBox extends TkBox {
      * disabled atribute
      */
     disabled: boolean;
-    updated(props: any): void;
+    protected updated(props: any): void;
 }

package/checkbox/checkbox.d.ts

@@ -7,13 +7,15 @@ export declare class TkCheckbox extends LitElement {
     value: string;
     checked: boolean;
     disabled: boolean;
+    indeterminate: boolean;
     private $input;
+    constructor();
     render(): import("lit").TemplateResult<1>;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    firstUpdated(): void;
+    protected firstUpdated(): void;
+    protected updated(): void;
     protected onKeyDown(e: KeyboardEvent): void;
     protected handleClick(): void;
+    private syncInput;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/checkbox/index.js

@@ -1,5 +1,5 @@
 import * as __WEBPACK_EXTERNAL_MODULE_lit__ from "lit";
-import * as __WEBPACK_EXTERNAL_MODULE_lit_directives_if_defined_js_76c6050d__ from "lit/directives/if-defined.js";
+import * as __WEBPACK_EXTERNAL_MODULE_lit_directives_class_map_js_2f88e643__ from "lit/directives/class-map.js";
 import * as __WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__ from "lit/decorators.js";
 /******/ var __webpack_modules__ = ({
 
@@ -16,8 +16,8 @@ __webpack_require__.d(__webpack_exports__, {
 var external_lit_ = __webpack_require__(2927);
 // EXTERNAL MODULE: external "lit/decorators.js"
 var decorators_js_ = __webpack_require__(8899);
-// EXTERNAL MODULE: external "lit/directives/if-defined.js"
-var if_defined_js_ = __webpack_require__(3517);
+// EXTERNAL MODULE: external "lit/directives/class-map.js"
+var class_map_js_ = __webpack_require__(4955);
 // EXTERNAL MODULE: ./tinkiet/box/index.ts
 var box = __webpack_require__(3433);
 // EXTERNAL MODULE: ./tinkiet/utils/unique.ts
@@ -39,15 +39,22 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 let TkCheckbox = class TkCheckbox extends external_lit_.LitElement {
     constructor() {
-        super(...arguments);
+        super();
         this._id = (0,unique/* uniqueID */.z)();
         this.checked = false;
         this.disabled = false;
+        this.indeterminate = false;
+        this.handleClick = this.handleClick.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
     }
     render() {
+        const containerClasses = {
+            state: true,
+            disabled: this.disabled
+        };
         return (0,external_lit_.html) `
-			<tk-box direction="row" align-items="center">
-				<tk-box ripple tabindex="${this.disabled ? -1 : 0}" class="state">
+			<tk-box direction="row" align-items="center" @click=${this.handleClick}>
+				<tk-box ripple tabindex="${this.disabled ? -1 : 0}" class=${(0,class_map_js_.classMap)(containerClasses)} @keydown=${this.onKeyDown}>
 					<div 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>
@@ -57,33 +64,24 @@ let TkCheckbox = class TkCheckbox extends external_lit_.LitElement {
 				</tk-box>
 				<span class="label"><slot></slot></span>
 			</tk-box>
-			<input
-				id=${this._id}
-				slot="none"
-				style="display: none;"
-				?checked=${this.checked}
-				type="checkbox"
-				name="${(0,if_defined_js_.ifDefined)(this.name)}"
-				value="${(0,if_defined_js_.ifDefined)(this.value)}"
-				aria-hidden="true"
-				tabindex="-1"
-			/>
 		`;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener("click", this.handleClick.bind(this));
-        this.addEventListener("keydown", this.onKeyDown.bind(this));
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener("click", this.handleClick);
-        this.removeEventListener("keydown", this.onKeyDown);
-    }
     firstUpdated() {
+        this.$input = document.createElement("input");
+        this.$input.type = "checkbox";
+        this.$input.slot = "none";
+        this.$input.style.display = "none";
+        this.$input.setAttribute("aria-hidden", "true");
+        this.$input.tabIndex = -1;
+        this.syncInput();
         this.appendChild(this.$input);
     }
+    updated() {
+        this.syncInput();
+    }
     onKeyDown(e) {
+        if (this.disabled)
+            return;
         if (e.code === "Space" || e.code === "Enter") {
             e.preventDefault();
             e.stopPropagation();
@@ -91,9 +89,24 @@ let TkCheckbox = class TkCheckbox extends external_lit_.LitElement {
         }
     }
     handleClick() {
+        if (this.disabled)
+            return;
         this.checked = !this.checked;
+        if (this.indeterminate)
+            this.indeterminate = false;
         setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
     }
+    syncInput() {
+        var _a, _b;
+        if (!this.$input)
+            return;
+        this.$input.id = this._id;
+        this.$input.name = (_a = this.name) !== null && _a !== void 0 ? _a : "";
+        this.$input.value = (_b = this.value) !== null && _b !== void 0 ? _b : "on";
+        this.$input.checked = this.checked;
+        this.$input.disabled = this.disabled;
+        this.$input.indeterminate = this.indeterminate;
+    }
 };
 TkCheckbox.styles = (0,external_lit_.css) `
 		${(0,external_lit_.unsafeCSS)(checkbox_checkbox)}
@@ -108,11 +121,11 @@ __decorate([
     (0,decorators_js_.property)({ attribute: true, type: Boolean, reflect: true })
 ], TkCheckbox.prototype, "checked", void 0);
 __decorate([
-    (0,decorators_js_.property)({ type: Boolean })
+    (0,decorators_js_.property)({ attribute: true, type: Boolean, reflect: true })
 ], TkCheckbox.prototype, "disabled", void 0);
 __decorate([
-    (0,decorators_js_.query)("input")
-], TkCheckbox.prototype, "$input", void 0);
+    (0,decorators_js_.property)({ attribute: true, type: Boolean, reflect: true })
+], TkCheckbox.prototype, "indeterminate", void 0);
 TkCheckbox = __decorate([
     (0,decorators_js_.customElement)("tk-checkbox")
 ], TkCheckbox);
@@ -350,17 +363,6 @@ module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitE
 
 
 
-/***/ }),
-
-/***/ 3517:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-var x = (y) => {
-	var x = {}; __webpack_require__.d(x, y); return x
-} 
-var y = (x) => (() => (x))
-module.exports = x({ ["ifDefined"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_directives_if_defined_js_76c6050d__.ifDefined) });
-
 /***/ }),
 
 /***/ 3770:
@@ -381,6 +383,17 @@ function uniqueID(length = 10) {
 }
 
 
+/***/ }),
+
+/***/ 4955:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["classMap"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_directives_class_map_js_2f88e643__.classMap) });
+
 /***/ }),
 
 /***/ 8899:
@@ -390,7 +403,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), ["query"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.query) });
+module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property) });
 
 /***/ })
 

package/chip/chip.d.ts

@@ -1,6 +1,21 @@
 import { LitElement } from "lit";
+/**
+ * Material-style Chip component.
+ *
+ * Slots :
+ *   • default <slot> → label text
+ *   • <slot name="leading"> → leading icon / image
+ *   • <slot name="trailing"> → trailing icon (remove / action)
+ *
+ * Attributes :
+ *   • removable (boolean) → affiche un trailing icon automatique (ex: bouton X)
+ *   • disabled (boolean)
+ */
 export declare class TkChip extends LitElement {
+    disabled: boolean;
+    removable: boolean;
     static styles: import("lit").CSSResult;
+    private onRemove;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/chip/index.js

@@ -27,7 +27,7 @@ var external_lit_ = __webpack_require__(2927);
 // EXTERNAL MODULE: external "lit/decorators.js"
 var decorators_js_ = __webpack_require__(8899);
 ;// ./tinkiet/chip/chip.scss
-/* harmony default export */ const chip = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{z-index:var(--navbar-z-index, 100);--color: var(--primary);--text: var(--on-primary);position:relative;color:var(--text);transition:var(--nav-transition, background var(--transition-duration-fast, 120ms) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)), transform var(--transition-duration-medium, 180ms) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)), box-shadow var(--transition-duration-medium, 180ms) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)));height:var(--navbar-height, 48px);padding:var(--navbar-padding, var(--spacing-s, 0.5rem));background:var(--color);display:flex;justify-content:space-between;box-sizing:border-box;flex-grow:1}:host([inverted]){--color: var(--on-primary);--text: var(--primary)}:host([fixed]){position:fixed;top:0;left:0;width:100%}:host([shadow]){box-shadow:var(--nav-elevation, 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15))}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){display:flex;align-items:center;height:100%}#title,::slotted([slot=title]){margin:var(--nav-title-margin, 0 0 0 var(--spacing-l, 1.25rem));font-size:var(--nav-title-font-size, var(--font-size-l, 1.25rem))}");
+/* harmony default export */ const chip = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}.chip{display:inline-flex;align-items:center;border-radius:10px;padding:3px 10px;background:hsl(var(--surface-container-highest));border:1px solid hsl(var(--outline-variant));font-size:13px;height:30px;gap:6px;line-height:1;cursor:pointer}.chip.disabled{opacity:.4;pointer-events:none}.chip .leading{display:inline-flex;align-items:center}.chip .leading slot::slotted(*){display:inline-flex;align-items:center}.chip .label{white-space:nowrap;display:inline-flex;align-items:center;line-height:1}.chip .trailing{display:inline-flex;align-items:center}.chip .trailing slot::slotted(*){display:inline-flex;align-items:center}.chip .trailing .remove{background:none;border:none;cursor:pointer;font-size:13px;line-height:1;opacity:.7}.chip .trailing .remove:hover{opacity:1}");
 ;// ./tinkiet/chip/chip.ts
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -38,16 +38,61 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+/**
+ * Material-style Chip component.
+ *
+ * Slots :
+ *   • default <slot> → label text
+ *   • <slot name="leading"> → leading icon / image
+ *   • <slot name="trailing"> → trailing icon (remove / action)
+ *
+ * Attributes :
+ *   • removable (boolean) → affiche un trailing icon automatique (ex: bouton X)
+ *   • disabled (boolean)
+ */
 let TkChip = class TkChip extends external_lit_.LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.removable = false;
+    }
+    onRemove() {
+        this.dispatchEvent(new CustomEvent("remove", { bubbles: true, composed: true }));
+    }
     render() {
         return (0,external_lit_.html) `
-			<div class="chip"><slot></slot></div>
-		`;
+      <div class="chip ${this.disabled ? "disabled" : ""}">
+        
+        <!-- 3. LEADING ICON (optional) -->
+        <span class="leading">
+          <slot name="leading"></slot>
+        </span>
+
+        <!-- 2. LABEL TEXT -->
+        <span class="label">
+          <slot></slot>
+        </span>
+
+        <!-- 4. TRAILING ICON -->
+        <span class="trailing">
+          <slot name="trailing">
+            ${this.removable
+            ? (0,external_lit_.html) `<button class="remove" @click=${this.onRemove}>✕</button>`
+            : ""}
+          </slot>
+        </span>
+
+      </div>
+    `;
     }
 };
-TkChip.styles = (0,external_lit_.css) `
-		${(0,external_lit_.unsafeCSS)(chip)}
-	`;
+TkChip.styles = (0,external_lit_.css) `${(0,external_lit_.unsafeCSS)(chip)}`;
+__decorate([
+    (0,decorators_js_.property)({ type: Boolean })
+], TkChip.prototype, "disabled", void 0);
+__decorate([
+    (0,decorators_js_.property)({ type: Boolean })
+], TkChip.prototype, "removable", void 0);
 TkChip = __decorate([
     (0,decorators_js_.customElement)("tk-chip")
 ], TkChip);
@@ -63,7 +108,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) });
+module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property) });
 
 /***/ })