@ixfx/components 0.2.2 → 0.2.4

package/dist/swipe/swipe.js

@@ -0,0 +1,229 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement, svg } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { prominenceStyles } from '../styles/prominence.js';
+let SwipeElement = class SwipeElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.barSpacing = 20;
+        this.barWidth = 14;
+        this.debounceMs = 200;
+        this.retractDurationMs = 400;
+        this._startX = 0;
+        this._currentX = 0;
+        this._pointerId = null;
+        this._componentWidth = 0;
+        this._isDragging = false;
+        this._offset = 0;
+        this._width = 0;
+        this._height = 0;
+        this._animRafId = null;
+        this._debounceTimer = null;
+        this._animStartOffset = 0;
+        this._animStartTime = null;
+        this._resizeObserver = null;
+        this.#onWindowPointerUp = (e) => {
+            if (e.pointerId !== this._pointerId)
+                return;
+            this.#removeWindowListeners();
+            const rect = this.getBoundingClientRect();
+            const inside = e.clientX >= rect.left && e.clientX <= rect.right
+                && e.clientY >= rect.top && e.clientY <= rect.bottom;
+            if (inside) {
+                const deltaX = this._currentX - this._startX;
+                const value = Math.max(-1, Math.min(1, deltaX / this._componentWidth));
+                this.#emitInput(value);
+            }
+            this._isDragging = false;
+            this._pointerId = null;
+            this.#scheduleRetraction();
+        };
+        this.#onWindowPointerCancel = (e) => {
+            if (e.pointerId !== this._pointerId)
+                return;
+            this.#removeWindowListeners();
+            this._isDragging = false;
+            this._pointerId = null;
+            this.#scheduleRetraction();
+        };
+        this._onPointerDown = (e) => {
+            e.preventDefault();
+            this.#cancelAnimation();
+            const target = e.target;
+            target.setPointerCapture(e.pointerId);
+            this._pointerId = e.pointerId;
+            this._startX = e.clientX;
+            this._currentX = e.clientX;
+            this._componentWidth = this.getBoundingClientRect().width;
+            this._isDragging = true;
+            window.addEventListener(`pointerup`, this.#onWindowPointerUp);
+            window.addEventListener(`pointercancel`, this.#onWindowPointerCancel);
+        };
+        this._onPointerMove = (e) => {
+            if (!this._isDragging || e.pointerId !== this._pointerId)
+                return;
+            this._currentX = e.clientX;
+            const deltaX = this._currentX - this._startX;
+            const ratio = Math.max(-1, Math.min(1, deltaX / this._componentWidth));
+            this._offset = ratio * this._height * 0.5;
+            this.requestUpdate();
+        };
+    }
+    #onWindowPointerUp;
+    #onWindowPointerCancel;
+    #emitInput(value) {
+        this.dispatchEvent(new CustomEvent(`input`, {
+            detail: { value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._resizeObserver = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            this._width = entry.contentRect.width;
+            this._height = entry.contentRect.height;
+            this.requestUpdate();
+        });
+        this._resizeObserver.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
+        this.#cancelAnimation();
+        this.#removeWindowListeners();
+        this._isDragging = false;
+        this._pointerId = null;
+    }
+    #removeWindowListeners() {
+        window.removeEventListener(`pointerup`, this.#onWindowPointerUp);
+        window.removeEventListener(`pointercancel`, this.#onWindowPointerCancel);
+    }
+    #scheduleRetraction() {
+        if (this._debounceTimer !== null)
+            clearTimeout(this._debounceTimer);
+        this._debounceTimer = setTimeout(() => {
+            this._debounceTimer = null;
+            this.#startRetraction();
+        }, this.debounceMs);
+    }
+    #startRetraction() {
+        this._animStartOffset = this._offset;
+        this._animStartTime = null;
+        const animate = (time) => {
+            if (this._animStartTime === null)
+                this._animStartTime = time;
+            const elapsed = time - this._animStartTime;
+            const t = Math.min(elapsed / this.retractDurationMs, 1);
+            const eased = 1 - (1 - t) ** 3;
+            this._offset = this._animStartOffset * (1 - eased);
+            this.requestUpdate();
+            if (t < 1) {
+                this._animRafId = requestAnimationFrame(animate);
+            }
+            else {
+                this._offset = 0;
+                this._animRafId = null;
+                this.requestUpdate();
+            }
+        };
+        this._animRafId = requestAnimationFrame(animate);
+    }
+    #cancelAnimation() {
+        if (this._animRafId !== null) {
+            cancelAnimationFrame(this._animRafId);
+            this._animRafId = null;
+        }
+        if (this._debounceTimer !== null) {
+            clearTimeout(this._debounceTimer);
+            this._debounceTimer = null;
+        }
+    }
+    #renderBars() {
+        const w = this._width;
+        const h = this._height;
+        const off = this._offset;
+        const { barSpacing, barWidth } = this;
+        if (w === 0 || h === 0)
+            return svg ``;
+        const half = barWidth / 2;
+        const mid = h / 2;
+        const count = Math.ceil(w / barSpacing) + 1;
+        return svg `${Array.from({ length: count }, (_, i) => {
+            const cx = i * barSpacing;
+            const x0 = cx - half;
+            const x1 = cx + half;
+            const colorVar = i % 2 === 0
+                ? `var(--swipe-color-a, var(--surface-4))`
+                : `var(--swipe-color-b, var(--surface-5))`;
+            const d = `M${x0},0 L${x1},0 L${x1 + off},${mid} L${x1},${h} L${x0},${h} L${x0 + off},${mid}Z`;
+            return svg `<path d=${d} style="fill:${colorVar}"></path>`;
+        })}`;
+    }
+    static { this.styles = [prominenceStyles, css `
+    :host {
+      display: block;
+      user-select: none;
+      touch-action: none;
+      width: 100%;
+      height: 2.5rem;
+      --swipe-border-color: var(--border);
+    }
+
+    .swipe-area {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      cursor: grab;
+      border: var(--swipe-border-color);
+      overflow: hidden;
+    }
+
+    .swipe-area:active {
+      cursor: grabbing;
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  `]; }
+    render() {
+        return html `
+      <div
+        class="swipe-area"
+        @pointerdown=${this._onPointerDown}
+        @pointermove=${this._onPointerMove}
+      >
+        <svg aria-hidden="true">${this.#renderBars()}</svg>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], SwipeElement.prototype, "barSpacing", void 0);
+__decorate([
+    property({ type: Number })
+], SwipeElement.prototype, "barWidth", void 0);
+__decorate([
+    property({ type: Number })
+], SwipeElement.prototype, "debounceMs", void 0);
+__decorate([
+    property({ type: Number })
+], SwipeElement.prototype, "retractDurationMs", void 0);
+SwipeElement = __decorate([
+    customElement(`ixfx-swipe`)
+], SwipeElement);
+export { SwipeElement };
+//# sourceMappingURL=swipe.js.map

package/dist/swipe/swipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipe.js","sourceRoot":"","sources":["../../src/swipe/swipe.ts"],"names":[],"mappings":"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"}

package/dist/tabs/tab-layout-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-layout-item.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-layout-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAGtC,qBACa,oBAAqB,SAAQ,UAAU;IAIlD,MAAM,CAAC,MAAM,0BAIZ;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,oBAAoB,CAAC;KAC9C;CACF"}
+{"version":3,"file":"tab-layout-item.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-layout-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAGtC,qBACa,oBAAqB,SAAQ,UAAU;IAClD,MAAM,CAAC,MAAM,0BAIX;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,oBAAoB,CAAC;KAC9C;CACF"}

package/dist/tabs/tab-layout-item.js

@@ -14,7 +14,7 @@ let TabLayoutItemElement = class TabLayoutItemElement extends LitElement {
   `; }
 };
 TabLayoutItemElement = __decorate([
-    customElement('ixfx-tab-layout-item')
+    customElement(`ixfx-tab-layout-item`)
 ], TabLayoutItemElement);
 export { TabLayoutItemElement };
 //# sourceMappingURL=tab-layout-item.js.map

package/dist/tabs/tab-layout-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-layout-item.js","sourceRoot":"","sources":["../../src/tabs/tab-layout-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;aAI3C,WAAM,GAAG,GAAG,CAAA;;;;GAIlB,AAJY,CAIZ;;AARU,oBAAoB;IADhC,aAAa,CAAC,sBAAsB,CAAC;GACzB,oBAAoB,CAShC"}
+{"version":3,"file":"tab-layout-item.js","sourceRoot":"","sources":["../../src/tabs/tab-layout-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;aAC3C,WAAM,GAAG,GAAG,CAAA;;;;GAIlB,AAJY,CAIX;;AALS,oBAAoB;IADhC,aAAa,CAAC,sBAAsB,CAAC;GACzB,oBAAoB,CAMhC"}

package/dist/tabs/tab-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-layout.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAGtC,qBACa,gBAAiB,SAAQ,UAAU;IAG9C,MAAM,CAAC,MAAM,0BASZ;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,gBAAgB,CAAC;KACrC;CACF"}
+{"version":3,"file":"tab-layout.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAGtC,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,0BASX;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,gBAAgB,CAAC;KACrC;CACF"}

package/dist/tabs/tab-layout.js

@@ -19,7 +19,7 @@ let TabLayoutElement = class TabLayoutElement extends LitElement {
   `; }
 };
 TabLayoutElement = __decorate([
-    customElement('ixfx-tab-layout')
+    customElement(`ixfx-tab-layout`)
 ], TabLayoutElement);
 export { TabLayoutElement };
 //# sourceMappingURL=tab-layout.js.map

package/dist/tabs/tab-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-layout.js","sourceRoot":"","sources":["../../src/tabs/tab-layout.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;aAGvC,WAAM,GAAG,GAAG,CAAA;;;;;;;;;GASlB,AATY,CASZ;;AAZU,gBAAgB;IAD5B,aAAa,CAAC,iBAAiB,CAAC;GACpB,gBAAgB,CAa5B"}
+{"version":3,"file":"tab-layout.js","sourceRoot":"","sources":["../../src/tabs/tab-layout.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;aACvC,WAAM,GAAG,GAAG,CAAA;;;;;;;;;GASlB,AATY,CASX;;AAVS,gBAAgB;IAD5B,aAAa,CAAC,iBAAiB,CAAC;GACpB,gBAAgB,CAW5B"}

package/dist/tabs/tab-list-item.d.ts

@@ -1,14 +1,30 @@
+import type { CommandRegistry } from "@clinth/ui-commands";
+import type { PropertyValues } from "lit";
 import { LitElement } from "lit";
+import "../icons/icon.js";
 /**
- * CSS vars
- * * --selected-colour: text colour
- * * --selected-border-width: bottom border width
- * * --padding
+ * CSS vars (can be overridden per-instance):
+ * --selected-colour: text colour when selected
+ * --selected-border-width: border width
+ * --padding
  */
 export declare class TabListItemElement extends LitElement {
     closeable: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
+    iconName: string | undefined;
+    description: string | undefined;
+    commandActive: string | undefined;
+    registry: CommandRegistry<unknown> | undefined;
+    private _compact;
+    private _resizeObserver?;
+    private _commandCleanup?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    private _syncTooltipAttrs;
+    private _syncCommandListener;
+    render(): import("lit").TemplateResult<1>;
+    private _onCloseClick;
+    static styles: import("lit").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/tabs/tab-list-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-list-item.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C;;;;;GAKG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAEhD,SAAS,UAAQ;IAKjB,MAAM;IAON,MAAM,CAAC,MAAM,0BA0BZ;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,kBAAkB,CAAC;KAC1C;CACF"}
+{"version":3,"file":"tab-list-item.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,kBAAkB,CAAC;AAE1B;;;;;GAKG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAEhD,SAAS,UAAS;IAGlB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAa;IAGzC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAa;IAG5C,aAAa,EAAE,MAAM,GAAG,SAAS,CAAa;IAG9C,QAAQ,EAAE,eAAe,CAAC,OAAO,CAAC,GAAG,SAAS,CAAa;IAElD,OAAO,CAAC,QAAQ,CAAS;IAClC,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,eAAe,CAAC,CAAa;IAE5B,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAQ/C,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,oBAAoB;IAWnB,MAAM;IAsBf,OAAO,CAAC,aAAa;IAWrB,OAAgB,MAAM,4BA0EpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,kBAAkB,CAAC;KAC1C;CACF"}

package/dist/tabs/tab-list-item.js

@@ -4,60 +4,192 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { prominenceStyles } from "../styles/prominence.js";
+import "../icons/icon.js";
 /**
- * CSS vars
- * * --selected-colour: text colour
- * * --selected-border-width: bottom border width
- * * --padding
+ * CSS vars (can be overridden per-instance):
+ * --selected-colour: text colour when selected
+ * --selected-border-width: border width
+ * --padding
  */
 let TabListItemElement = class TabListItemElement extends LitElement {
     constructor() {
         super(...arguments);
-        this.closeable = true;
+        this.closeable = false;
+        this.iconName = undefined;
+        this.description = undefined;
+        this.commandActive = undefined;
+        this.registry = undefined;
+        this._compact = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._resizeObserver = new ResizeObserver(([entry]) => {
+            this._compact = entry.contentRect.width < 64;
+        });
+        this._resizeObserver.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = undefined;
+        this._commandCleanup?.();
+        this._commandCleanup = undefined;
+    }
+    updated(changed) {
+        super.updated(changed);
+        this._syncTooltipAttrs();
+        if (changed.has(`registry`) || changed.has(`commandActive`)) {
+            this._syncCommandListener();
+        }
+    }
+    _syncTooltipAttrs() {
+        if (this.description) {
+            this.setAttribute(`data-tooltip`, this.description);
+            this.setAttribute(`data-tooltip-anchor`, `top`);
+        }
+        else {
+            this.removeAttribute(`data-tooltip`);
+            this.removeAttribute(`data-tooltip-anchor`);
+        }
+    }
+    _syncCommandListener() {
+        this._commandCleanup?.();
+        this._commandCleanup = undefined;
+        if (this.registry && this.commandActive) {
+            this._commandCleanup = this.registry.addOnInvokeHandler((id) => {
+                if (id === this.commandActive)
+                    this.click();
+            });
+        }
     }
-    // @property({ type: Boolean })
-    // activated = true;
     render() {
-        return html `<div ><slot part="header"></slot></div>`;
-    }
-    // protected createRenderRoot() {
-    //   return this;
-    // }
-    static { this.styles = css `
-    :host {
-      --selected-colour: blue;
-      --selected-border-width: 1px;
-      --padding: 0.5ch;
-      --hover-background: whitesmoke;
-      display: inline;
-      user-select:none;
-      box-sizing: border-box;
-    }
-    
-    :host([selected])>div {
-      color: var(--selected-colour);
-      border-bottom: var(--selected-border-width) solid var(--selected-colour);
-    }
-    div {
-      padding:var(--padding) calc(2*var(--padding)) var(--padding) calc(2*var(--padding));
-      border-bottom: var(--selected-border-width) solid transparent;
-
-    }
-    
-    div:hover {
-      background-color: var(--hover-background);
-      color:unset !important;
-
-    }
-  `; }
+        const showLabel = !this._compact || !this.iconName;
+        return html `
+      <div>
+        ${this.iconName ? html `<ixfx-icon name="${this.iconName}"></ixfx-icon>` : nothing}
+        ${showLabel ? html `<span class="label"><slot></slot></span>` : nothing}
+        ${this.closeable
+            ? html `
+          <button
+            class="close-btn"
+            type="button"
+            aria-label="Close tab"
+            @click=${this._onCloseClick}
+          >
+            <ixfx-icon name="close"></ixfx-icon>
+          </button>
+        `
+            : nothing}
+      </div>
+    `;
+    }
+    _onCloseClick(e) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent(`close`, {
+            bubbles: true,
+            composed: true,
+        }));
+        this.remove();
+    }
+    static { this.styles = [
+        prominenceStyles,
+        css `
+      :host {
+        --selected-colour: var(--accent);
+        --selected-border-width: 1px;
+        --padding: var(--space-m);
+        display: inline-flex;
+        min-width: 0;
+        user-select: none;
+        box-sizing: border-box;
+      }
+
+      div {
+        display: flex;
+        align-items: center;
+        gap: var(--space-s, 4px);
+        padding: var(--padding) calc(2 * var(--padding));
+        min-width: 0;
+        width: 100%;
+        font-weight: 500;
+        border: var(--selected-border-width) solid transparent;
+      }
+
+      :host([selected]) > div {
+        color: var(--selected-colour);
+        border-top-color: var(--indicator-color-top, transparent);
+        border-bottom-color: var(--indicator-color-bottom, transparent);
+        border-left-color: var(--indicator-color-left, transparent);
+        border-right-color: var(--indicator-color-right, transparent);
+      }
+
+      .label {
+        overflow: var(--allow-overflow, hidden);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+        flex: 1 1 auto;
+      }
+
+      ixfx-icon {
+        flex-shrink: 0;
+      }
+
+      .close-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: none;
+        border: none;
+        padding: var(--space-xs);
+        margin-left: auto;
+        cursor: pointer;
+        color: inherit;
+        border-radius: var(--radius-s);
+        opacity: var(--prominence-idle-opacity);
+        transition: opacity var(--transition), background var(--transition);
+      }
+
+      .close-btn:hover {
+        background: var(--surface-5);
+        opacity: var(--prominence-tickled-opacity);
+      }
+
+      .close-btn:focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: 1px;
+      }
+
+      :host([selected]) .close-btn,
+      :host(:hover) .close-btn {
+        opacity: var(--prominence-tickled-opacity);
+      }
+    `,
+    ]; }
 };
 __decorate([
     property({ type: Boolean })
 ], TabListItemElement.prototype, "closeable", void 0);
+__decorate([
+    property({ type: String, attribute: `icon-name` })
+], TabListItemElement.prototype, "iconName", void 0);
+__decorate([
+    property({ type: String })
+], TabListItemElement.prototype, "description", void 0);
+__decorate([
+    property({ type: String, attribute: `command-active` })
+], TabListItemElement.prototype, "commandActive", void 0);
+__decorate([
+    property({ attribute: false })
+], TabListItemElement.prototype, "registry", void 0);
+__decorate([
+    state()
+], TabListItemElement.prototype, "_compact", void 0);
 TabListItemElement = __decorate([
-    customElement('ixfx-tab-list-item')
+    customElement(`ixfx-tab-list-item`)
 ], TabListItemElement);
 export { TabListItemElement };
 //# sourceMappingURL=tab-list-item.js.map

package/dist/tabs/tab-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-list-item.js","sourceRoot":"","sources":["../../src/tabs/tab-list-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;GAKG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAEL,cAAS,GAAG,IAAI,CAAC;IAuCnB,CAAC;IArCC,+BAA+B;IAC/B,oBAAoB;IAEpB,MAAM;QACJ,OAAO,IAAI,CAAA,yCAAyC,CAAA;IACtD,CAAC;IAED,iCAAiC;IACjC,iBAAiB;IACjB,IAAI;aACG,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BlB,AA1BY,CA0BZ;;AAtCD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACX;AAFN,kBAAkB;IAD9B,aAAa,CAAC,oBAAoB,CAAC;GACvB,kBAAkB,CAyC9B"}
+{"version":3,"file":"tab-list-item.js","sourceRoot":"","sources":["../../src/tabs/tab-list-item.ts"],"names":[],"mappings":"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"}

package/dist/tabs/tab-list.d.ts

@@ -1,14 +1,24 @@
+import type { TabListItemElement } from "./tab-list-item.js";
+import type { PropertyValues } from "lit";
 import { LitElement } from "lit";
-import { TabListItemElement } from "./tab-list-item.js";
 /**
  * Events
- * * 'change' - new tab selected { previous:string, selected:string, for:string }
+ * 'change' - new tab selected { previous:string, selected:string, for:string }
  */
+export type TabListChangeDetail = {
+    readonly previous: string | undefined;
+    readonly selected: string;
+    readonly for: string;
+};
+export type TabListChangeEvent = CustomEvent<TabListChangeDetail>;
 export declare class TabListElement extends LitElement {
     #private;
-    horizontal: boolean;
-    _listItems: TabListItemElement[];
-    render(): import("lit-html").TemplateResult<1>;
+    orientation: `horizontal` | `vertical-stack` | `vertical-side`;
+    flip: boolean;
+    scrollable: boolean;
+    render(): import("lit").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changedProperties: PropertyValues): void;
     getSelectedElement(): TabListItemElement | undefined;
     selectElement(el: HTMLElement): void;
     static styles: import("lit").CSSResult;

package/dist/tabs/tab-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-list.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD;;;GAGG;AACH,qBACa,cAAe,SAAQ,UAAU;;IAE5C,UAAU,UAAQ;IAGlB,UAAU,EAAG,kBAAkB,EAAE,CAAC;IAElC,MAAM;IAyBN,kBAAkB;IAalB,aAAa,CAAC,EAAE,EAAE,WAAW;IA6D7B,MAAM,CAAC,MAAM,0BAsBZ;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF"}
+{"version":3,"file":"tab-list.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-list.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,mBAAmB,CAAC,CAAC;AAElE,qBACa,cAAe,SAAQ,UAAU;;IAE5C,WAAW,EAAE,YAAY,GAAG,gBAAgB,GAAG,eAAe,CAAgB;IAG9E,IAAI,UAAS;IAGb,UAAU,UAAS;IAYV,MAAM;IAqBN,YAAY;IAQZ,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IA2CzD,kBAAkB;IAclB,aAAa,CAAC,EAAE,EAAE,WAAW;IAkE7B,MAAM,CAAC,MAAM,0BAoEX;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF"}