luxen-ui 0.1.0

package/dist/elements/rating/rating.css

@@ -0,0 +1,102 @@
+:host {
+  --icon-size: 20px;
+  --active-color: gold;
+  --inactive-color: #ddd;
+  --spacing: 0px;
+  --_icon: var(
+    --icon,
+    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 19.02'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>")
+  );
+
+  display: inline-flex;
+  align-items: center;
+}
+
+/* — Read-only mode — */
+
+.rating {
+  height: var(--icon-size);
+  background: linear-gradient(
+    to right,
+    var(--active-color) var(--_fill, 0%),
+    var(--inactive-color) var(--_fill, 0%)
+  );
+  mask-size: var(--icon-size) var(--icon-size);
+  mask-repeat: no-repeat;
+}
+
+/* — Edit mode — */
+
+.rating-edit {
+  display: inline-flex;
+  gap: var(--spacing);
+}
+
+.icon-wrapper {
+  cursor: pointer;
+}
+
+.icon-wrapper input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.icon {
+  display: block;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  mask-image: var(--_icon);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  background: var(--inactive-color);
+  transition: scale 0.2s ease;
+  pointer-events: none;
+}
+
+.icon.active {
+  background: var(--active-color);
+}
+
+.icon-wrapper:hover .icon {
+  scale: 1.2;
+}
+
+.icon-wrapper:has(input:focus-visible) .icon {
+  outline: 2px solid var(--active-color);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+:host([edit-mode]) .wrapper:focus-within {
+  outline: 2px solid var(--active-color);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* — Disabled — */
+
+:host([disabled]) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* — Label — */
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.rating-label {
+  margin-inline-start: 8px;
+  flex: 1;
+  font-size: 1rem;
+  line-height: 1;
+}

package/dist/elements/rating/rating.d.ts

@@ -0,0 +1,38 @@
+import { LuxenFormAssociatedElement } from '../../shared/luxen-form-associated-element';
+/**
+ * A star rating component using CSS mask-image.
+ *
+ * @summary Displays a star rating, optionally interactive.
+ *
+ * @csspart label - The label element shown in edit mode.
+ *
+ * @cssproperty --icon-size - The size of each icon. Defaults to `20px`.
+ * @cssproperty --active-color - The fill color for rated icons. Defaults to `gold`.
+ * @cssproperty --inactive-color - The fill color for empty icons. Defaults to `#ddd`.
+ * @cssproperty --spacing - The spacing between icons. Defaults to `0px`.
+ * @cssproperty --icon - Custom SVG shape as a `url()`. Defaults to a 5-pointed star.
+ *
+ * @event {{ name: string, value: string, checked: boolean, sourceEvent: Event }} change - Emitted when the rating value changes in edit mode.
+ */
+export declare class LuxenRating extends LuxenFormAssociatedElement {
+    static styles: import("lit").CSSResult[];
+    private currentLabel;
+    private previewedValue;
+    accessor editMode: boolean;
+    accessor labels: string[];
+    accessor value: number;
+    accessor length: number;
+    /** Optional callback returning a CSS `url()` string for a given position (1-based). */
+    getIcon?: (value: number) => string;
+    connectedCallback(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string, _mode: 'restore' | 'autocomplete'): void;
+    firstUpdated(): void;
+    private setLabelForValue;
+    private getRatingStyle;
+    render(): import("lit").TemplateResult<1>;
+    private previewValue;
+    private clearPreview;
+    private onClick;
+}
+//# sourceMappingURL=rating.d.ts.map

package/dist/elements/rating/rating.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating.d.ts","sourceRoot":"","sources":["../../../src/html/elements/rating/rating.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAC;AAMxF;;;;;;;;;;;;;;GAcG;AACH,qBAAa,WAAY,SAAQ,0BAA0B;IACzD,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,cAAc,CAAK;IAG3B,QAAQ,CAAC,QAAQ,UAAS;IAU1B,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAM;IAG/B,QAAQ,CAAC,KAAK,SAAK;IAGnB,QAAQ,CAAC,MAAM,SAAK;IAEpB,uFAAuF;IACvF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAE3B,iBAAiB;IAMjB,iBAAiB;IAKjB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,cAAc;IAKzE,YAAY;IAIrB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,cAAc;IAkBb,MAAM;IAuDf,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,OAAO;CAgBhB"}

package/dist/elements/rating/rating.js

@@ -0,0 +1,193 @@
+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;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _LuxenRating_editMode_accessor_storage, _LuxenRating_labels_accessor_storage, _LuxenRating_value_accessor_storage, _LuxenRating_length_accessor_storage;
+import { html, nothing, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LuxenFormAssociatedElement } from '../../shared/luxen-form-associated-element';
+import hostStyles from '../../shared/styles/host.styles';
+import rawStyles from './rating.css?inline';
+const styles = unsafeCSS(rawStyles);
+/**
+ * A star rating component using CSS mask-image.
+ *
+ * @summary Displays a star rating, optionally interactive.
+ *
+ * @csspart label - The label element shown in edit mode.
+ *
+ * @cssproperty --icon-size - The size of each icon. Defaults to `20px`.
+ * @cssproperty --active-color - The fill color for rated icons. Defaults to `gold`.
+ * @cssproperty --inactive-color - The fill color for empty icons. Defaults to `#ddd`.
+ * @cssproperty --spacing - The spacing between icons. Defaults to `0px`.
+ * @cssproperty --icon - Custom SVG shape as a `url()`. Defaults to a 5-pointed star.
+ *
+ * @event {{ name: string, value: string, checked: boolean, sourceEvent: Event }} change - Emitted when the rating value changes in edit mode.
+ */
+export class LuxenRating extends LuxenFormAssociatedElement {
+    constructor() {
+        super(...arguments);
+        this.currentLabel = '';
+        this.previewedValue = 0;
+        _LuxenRating_editMode_accessor_storage.set(this, false);
+        _LuxenRating_labels_accessor_storage.set(this, []);
+        _LuxenRating_value_accessor_storage.set(this, 0);
+        _LuxenRating_length_accessor_storage.set(this, 5);
+    }
+    get editMode() { return __classPrivateFieldGet(this, _LuxenRating_editMode_accessor_storage, "f"); }
+    set editMode(value) { __classPrivateFieldSet(this, _LuxenRating_editMode_accessor_storage, value, "f"); }
+    get labels() { return __classPrivateFieldGet(this, _LuxenRating_labels_accessor_storage, "f"); }
+    set labels(value) { __classPrivateFieldSet(this, _LuxenRating_labels_accessor_storage, value, "f"); }
+    get value() { return __classPrivateFieldGet(this, _LuxenRating_value_accessor_storage, "f"); }
+    set value(value) { __classPrivateFieldSet(this, _LuxenRating_value_accessor_storage, value, "f"); }
+    get length() { return __classPrivateFieldGet(this, _LuxenRating_length_accessor_storage, "f"); }
+    set length(value) { __classPrivateFieldSet(this, _LuxenRating_length_accessor_storage, value, "f"); }
+    connectedCallback() {
+        super.connectedCallback();
+        this._defaultFormValue = String(this.value);
+        this._syncFormValue(this._defaultFormValue);
+    }
+    formResetCallback() {
+        this.value = Number(this._defaultFormValue);
+        super.formResetCallback();
+    }
+    formStateRestoreCallback(state, _mode) {
+        this.value = Number(state);
+        this._syncFormValue(state);
+    }
+    firstUpdated() {
+        this.setLabelForValue(this.value);
+    }
+    setLabelForValue(value) {
+        const intValue = typeof value === 'string' ? parseInt(value, 10) : value;
+        this.currentLabel = intValue ? (this.labels?.[intValue - 1] ?? '') : '';
+        this.requestUpdate();
+    }
+    getRatingStyle() {
+        const max = this.length;
+        const fillPct = max > 0 ? (this.value / max) * 100 : 0;
+        const step = 'calc(var(--icon-size) + var(--spacing))';
+        const icons = Array.from({ length: max }, (_, i) => this.getIcon?.(i + 1) ?? 'var(--_icon)');
+        const positions = Array.from({ length: max }, (_, i) => i === 0 ? '0 0' : `calc(${i} * ${step}) 0`);
+        return [
+            `width: calc(${max} * var(--icon-size) + ${max - 1} * var(--spacing))`,
+            `--_fill: ${fillPct}%`,
+            `mask-image: ${icons.join(', ')}`,
+            `mask-position: ${positions.join(', ')}`,
+        ].join('; ');
+    }
+    render() {
+        if (!this.editMode) {
+            return html `<div
+        class="rating"
+        style=${this.getRatingStyle()}
+      ></div>`;
+        }
+        const activeCount = this.previewedValue || this.value;
+        return html `
+      <div
+        class="wrapper"
+        @focusout=${this.clearPreview}
+      >
+        <div class="rating-edit">
+          ${Array.from({ length: this.length }, (_, i) => {
+            const v = i + 1;
+            const icon = this.getIcon?.(v);
+            return html `
+              <label
+                class="icon-wrapper"
+                @pointerover=${() => this.previewValue(v)}
+                @pointerout=${this.clearPreview}
+              >
+                <input
+                  type="radio"
+                  name=${this.name ?? nothing}
+                  value="${v}"
+                  aria-label="${this.labels?.[i] ?? `${v} ${v === 1 ? 'star' : 'stars'}`}"
+                  ?checked="${this.value === v}"
+                  ?disabled="${this.disabled}"
+                  @click=${this.onClick}
+                  @focusin=${() => this.previewValue(v)}
+                />
+                <span
+                  class="icon ${v <= activeCount ? 'active' : ''}"
+                  style=${icon ? `mask-image: ${icon}` : nothing}
+                ></span>
+              </label>
+            `;
+        })}
+        </div>
+        ${this.labels?.length
+            ? html `<div
+              class="rating-label"
+              part="label"
+            >
+              ${this.currentLabel}
+            </div>`
+            : nothing}
+      </div>
+    `;
+    }
+    previewValue(value) {
+        this.previewedValue = value;
+        this.setLabelForValue(value);
+    }
+    clearPreview(event) {
+        if (event) {
+            const related = event.relatedTarget;
+            if (related && this.shadowRoot?.contains(related))
+                return;
+        }
+        this.previewedValue = 0;
+        this.setLabelForValue(this.value);
+    }
+    onClick(event) {
+        const target = event.currentTarget;
+        const clickedValue = Number(target.value);
+        this.value = clickedValue === this.value ? 0 : clickedValue;
+        this.hasInteracted = true;
+        this._syncFormValue(String(this.value));
+        this.emit('change', {
+            detail: {
+                name: this.name,
+                value: String(this.value),
+                checked: this.value > 0,
+                sourceEvent: event,
+            },
+        });
+    }
+}
+_LuxenRating_editMode_accessor_storage = new WeakMap(), _LuxenRating_labels_accessor_storage = new WeakMap(), _LuxenRating_value_accessor_storage = new WeakMap(), _LuxenRating_length_accessor_storage = new WeakMap();
+LuxenRating.styles = [hostStyles, styles];
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'edit-mode' })
+], LuxenRating.prototype, "editMode", null);
+__decorate([
+    property({
+        type: Array,
+        reflect: true,
+        converter: {
+            fromAttribute: (value) => value.split('|'),
+            toAttribute: (value) => (value.length ? value.join('|') : null),
+        },
+    })
+], LuxenRating.prototype, "labels", null);
+__decorate([
+    property({ type: Number, reflect: true })
+], LuxenRating.prototype, "value", null);
+__decorate([
+    property({ type: Number, reflect: true })
+], LuxenRating.prototype, "length", null);

package/dist/elements/skeleton/index.d.ts

@@ -0,0 +1,8 @@
+import { LuxenSkeleton } from './skeleton';
+export * from './skeleton';
+declare global {
+    interface HTMLElementTagNameMap {
+        'l-skeleton': LuxenSkeleton;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/skeleton/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,cAAc,YAAY,CAAC;AAG3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,aAAa,CAAC;KAC7B;CACF"}

package/dist/elements/skeleton/index.js

@@ -0,0 +1,4 @@
+import { define } from '../../define';
+import { LuxenSkeleton } from './skeleton';
+export * from './skeleton';
+define('skeleton', LuxenSkeleton);

package/dist/elements/skeleton/skeleton.d.ts

@@ -0,0 +1,12 @@
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * @summary A skeleton loading placeholder.
+ * @customElement l-skeleton
+ *
+ * @cssproperty --width - Width of the skeleton
+ * @cssproperty --height - Height of the skeleton
+ */
+export declare class LuxenSkeleton extends LuxenElement {
+    createRenderRoot(): this;
+}
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/elements/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/html/elements/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D;;;;;;GAMG;AACH,qBAAa,aAAc,SAAQ,YAAY;IACpC,gBAAgB;CAG1B"}

package/dist/elements/skeleton/skeleton.js

@@ -0,0 +1,13 @@
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * @summary A skeleton loading placeholder.
+ * @customElement l-skeleton
+ *
+ * @cssproperty --width - Width of the skeleton
+ * @cssproperty --height - Height of the skeleton
+ */
+export class LuxenSkeleton extends LuxenElement {
+    createRenderRoot() {
+        return this;
+    }
+}

package/dist/elements/spinner/index.d.ts

@@ -0,0 +1,8 @@
+import { LuxenSpinner } from './spinner';
+export * from './spinner';
+declare global {
+    interface HTMLElementTagNameMap {
+        'l-spinner': LuxenSpinner;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/spinner/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,cAAc,WAAW,CAAC;AAG1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,YAAY,CAAC;KAC3B;CACF"}

package/dist/elements/spinner/index.js

@@ -0,0 +1,4 @@
+import { define } from '../../define';
+import { LuxenSpinner } from './spinner';
+export * from './spinner';
+define('spinner', LuxenSpinner);

package/dist/elements/spinner/spinner.css

@@ -0,0 +1,28 @@
+:host {
+  --size: 1em;
+  --indicator-color: currentColor;
+  --speed: 0.75s;
+
+  flex: none;
+  display: inline-flex;
+  width: var(--size);
+  height: var(--size);
+  color: var(--indicator-color);
+}
+
+svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+.spinner {
+  transform-origin: center;
+  animation: spin var(--speed) linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/elements/spinner/spinner.d.ts

@@ -0,0 +1,16 @@
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * @summary A spinner component for indicating loading state.
+ * @customElement l-spinner
+ *
+ * @csspart base - The SVG container element.
+ *
+ * @cssproperty --size - The size of the spinner (width and height). Defaults to `1em`.
+ * @cssproperty --indicator-color - The color of the spinner.
+ * @cssproperty --speed - The duration of one full spin cycle.
+ */
+export declare class LuxenSpinner extends LuxenElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=spinner.d.ts.map

package/dist/elements/spinner/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/html/elements/spinner/spinner.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAM1D;;;;;;;;;GASG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,4BAAwB;IAErC,MAAM;CAmBhB"}

package/dist/elements/spinner/spinner.js

@@ -0,0 +1,37 @@
+import { html, unsafeCSS } from 'lit';
+import { LuxenElement } from '../../shared/luxen-element';
+import hostStyles from '../../shared/styles/host.styles';
+import rawStyles from './spinner.css?inline';
+const styles = unsafeCSS(rawStyles);
+/**
+ * @summary A spinner component for indicating loading state.
+ * @customElement l-spinner
+ *
+ * @csspart base - The SVG container element.
+ *
+ * @cssproperty --size - The size of the spinner (width and height). Defaults to `1em`.
+ * @cssproperty --indicator-color - The color of the spinner.
+ * @cssproperty --speed - The duration of one full spin cycle.
+ */
+export class LuxenSpinner extends LuxenElement {
+    render() {
+        return html `
+      <svg
+        part="base"
+        role="progressbar"
+        aria-label="Loading"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+          opacity=".25"
+        />
+        <path
+          d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+          class="spinner"
+        />
+      </svg>
+    `;
+    }
+}
+LuxenSpinner.styles = [hostStyles, styles];

package/dist/elements/tabs/index.d.ts

@@ -0,0 +1,8 @@
+import { LuxenTabs } from './tabs';
+export * from './tabs';
+declare global {
+    interface HTMLElementTagNameMap {
+        'l-tabs': LuxenTabs;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tabs/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,cAAc,QAAQ,CAAC;AAGvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,SAAS,CAAC;KACrB;CACF"}

package/dist/elements/tabs/index.js

@@ -0,0 +1,4 @@
+import { define } from '../../define';
+import { LuxenTabs } from './tabs';
+export * from './tabs';
+define('tabs', LuxenTabs);

package/dist/elements/tabs/tabs.d.ts

@@ -0,0 +1,48 @@
+import { LuxenElement } from '../../shared/luxen-element';
+export type TabsVariant = 'enclosed' | 'line';
+export type TabsOrientation = 'horizontal' | 'vertical';
+/**
+ * @summary A tabs component that progressively enhances light DOM markup
+ * with ARIA roles, keyboard navigation, and animated indicators.
+ *
+ * @example
+ * ```html
+ * <l-tabs variant="enclosed">
+ *   <div>
+ *     <button>Tab 1</button>
+ *     <button>Tab 2</button>
+ *   </div>
+ *   <div>Content 1</div>
+ *   <div>Content 2</div>
+ * </l-tabs>
+ * ```
+ *
+ * @event change - Fired when the active tab changes. Detail: `{ index: number, name: string | null }`.
+ *
+ * @customElement l-tabs
+ */
+export declare class LuxenTabs extends LuxenElement {
+    createRenderRoot(): this;
+    private _instanceId;
+    private _tablistEl;
+    private _tabs;
+    private _panels;
+    /** Visual variant. */
+    variant: TabsVariant;
+    /** Index of the active tab (0-based). */
+    value: string;
+    /** Stretch tabs to fill container width. */
+    fullWidth: boolean;
+    /** Tab orientation. */
+    orientation: TabsOrientation;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _setup;
+    private _teardown;
+    private _selectTab;
+    private _updateIndicator;
+    private _onClick;
+    private _onKeyDown;
+}
+//# sourceMappingURL=tabs.d.ts.map

package/dist/elements/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tabs/tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AAExD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,SAAU,SAAQ,YAAY;IAChC,gBAAgB;IAIzB,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,OAAO,CAAqB;IAEpC,sBAAsB;IAEtB,OAAO,EAAE,WAAW,CAAU;IAE9B,yCAAyC;IAEzC,KAAK,SAAO;IAEZ,4CAA4C;IAE5C,SAAS,UAAS;IAElB,uBAAuB;IAEvB,WAAW,EAAE,eAAe,CAAgB;IAInC,iBAAiB;IAMjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAW9C,OAAO,CAAC,MAAM;IAoDd,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,QAAQ,CAQd;IAEF,OAAO,CAAC,UAAU,CAkChB;CACH"}