@brightspot/ui 1.9.0 → 1.11.0

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,92 @@
+import { LitElement } from 'lit';
+import '../icon/Icon.js';
+declare const Switch_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
+/**
+ * A toggle switch component for binary on/off states.
+ *
+ * Uses a hidden checkbox internally for accessibility, styled via the
+ * `btu-switch` Tailwind plugin classes.
+ *
+ * @element btu-switch
+ *
+ * @fires {CustomEvent} btu-switch-ready - Fired after the toggle is first rendered and initialized
+ * @fires {CustomEvent<{ checked: boolean }>} btu-switch-change - Fired when the user toggles the switch
+ * @fires {CustomEvent} btu-switch-focus - Fired when the component gains focus
+ *
+ * @cssprop --switch-color-track-on - Background color when the toggle is checked (default: var(--btu-theme-primary-700))
+ * @cssprop --switch-color-track-off - Background color when the toggle is unchecked (default: var(--btu-theme-gray-300))
+ * @cssprop --switch-color-knob - Color of the sliding circular handle (default: var(--btu-theme-white))
+ * @cssprop --switch-label-spacing - Distance between the switch and the text label (default: 0.75rem)
+ * @cssprop --switch-track-icon-size - Size of the track icons (default: sm 0.5rem, md 0.625rem, lg 0.75rem)
+ */
+export default class Switch extends Switch_base {
+    /**
+     * Controls the physical dimensions of the switch and the associated label typography.
+     * @attr
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * The primary text displayed next to the toggle.
+     * @attr
+     */
+    label: string | undefined;
+    /**
+     * Optional helper text or secondary information displayed below the label.
+     * @attr
+     */
+    description: string | undefined;
+    /**
+     * The current state of the switch (on/off).
+     * @attr
+     */
+    checked: boolean;
+    /**
+     * If true, the toggle is non-interactive and visually muted.
+     * @attr
+     */
+    disabled: boolean;
+    /**
+     * Name of the control for form participation.
+     * @attr
+     */
+    name: string | undefined;
+    /**
+     * Determines if the label appears to the left or right of the switch.
+     * @attr label-position
+     */
+    labelPosition: 'start' | 'end';
+    /**
+     * Lucide icon name shown on the track when the switch is checked (on).
+     * @attr on-icon
+     */
+    onIcon: string | undefined;
+    /**
+     * Lucide icon name shown on the track when the switch is unchecked (off).
+     * @attr off-icon
+     */
+    offIcon: string | undefined;
+    /** @internal */
+    private _userInitiated;
+    /** @internal */
+    private initialClasses;
+    /** @internal */
+    private _initialClassesCaptured;
+    /** @internal */
+    private _descId;
+    connectedCallback(): void;
+    createRenderRoot(): this;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    firstUpdated(changedProperties: Map<string | number | symbol, unknown>): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private _onInputChange;
+    private _onFocus;
+    private _toggleInput;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'btu-switch': Switch;
+    }
+}
+export {};
+//# sourceMappingURL=Switch.d.ts.map

package/dist/components/switch/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAK/C,OAAO,iBAAiB,CAAA;;AAQxB;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,WAAyC;IAC3E;;;OAGG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAU;IAE5C;;;OAGG;IAEH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IAEzB;;;OAGG;IAEH,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAE/B;;;OAGG;IAEH,OAAO,UAAQ;IAEf;;;OAGG;IAEH,QAAQ,UAAQ;IAEhB;;;OAGG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;IAExB;;;OAGG;IAEH,aAAa,EAAE,OAAO,GAAG,KAAK,CAAQ;IAEtC;;;OAGG;IAEH,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAE1B;;;OAGG;IAEH,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;IAE3B,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAQ;IAE9B,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAe;IAErC,gBAAgB;IAChB,OAAO,CAAC,uBAAuB,CAAQ;IAEvC,gBAAgB;IAChB,OAAO,CAAC,OAAO,CAAuC;IAEtD,iBAAiB,IAAI,IAAI;IAQzB,gBAAgB;IAIhB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAW3E,YAAY,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAK7E,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAWxE,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,YAAY;IAKpB,MAAM;CA4CP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAA;KACrB;CACF"}

package/dist/components/switch/Switch.js

@@ -0,0 +1,189 @@
+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 { LitElement, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
+import { ReadyMixin } from '../../util/ReadyMixin.js';
+import '../icon/Icon.js';
+// 'small' is omitted — it uses the base btu-switch dimensions with no modifier class
+const SIZE_CLASSES = {
+    medium: 'btu-switch-md',
+    large: 'btu-switch-lg',
+};
+/**
+ * A toggle switch component for binary on/off states.
+ *
+ * Uses a hidden checkbox internally for accessibility, styled via the
+ * `btu-switch` Tailwind plugin classes.
+ *
+ * @element btu-switch
+ *
+ * @fires {CustomEvent} btu-switch-ready - Fired after the toggle is first rendered and initialized
+ * @fires {CustomEvent<{ checked: boolean }>} btu-switch-change - Fired when the user toggles the switch
+ * @fires {CustomEvent} btu-switch-focus - Fired when the component gains focus
+ *
+ * @cssprop --switch-color-track-on - Background color when the toggle is checked (default: var(--btu-theme-primary-700))
+ * @cssprop --switch-color-track-off - Background color when the toggle is unchecked (default: var(--btu-theme-gray-300))
+ * @cssprop --switch-color-knob - Color of the sliding circular handle (default: var(--btu-theme-white))
+ * @cssprop --switch-label-spacing - Distance between the switch and the text label (default: 0.75rem)
+ * @cssprop --switch-track-icon-size - Size of the track icons (default: sm 0.5rem, md 0.625rem, lg 0.75rem)
+ */
+export default class Switch extends EventEmitterMixin(ReadyMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Controls the physical dimensions of the switch and the associated label typography.
+         * @attr
+         */
+        this.size = 'small';
+        /**
+         * The current state of the switch (on/off).
+         * @attr
+         */
+        this.checked = false;
+        /**
+         * If true, the toggle is non-interactive and visually muted.
+         * @attr
+         */
+        this.disabled = false;
+        /**
+         * Determines if the label appears to the left or right of the switch.
+         * @attr label-position
+         */
+        this.labelPosition = 'end';
+        /** @internal */
+        this._userInitiated = false;
+        /** @internal */
+        this.initialClasses = [];
+        /** @internal */
+        this._initialClassesCaptured = false;
+        /** @internal */
+        this._descId = `switch-desc-${crypto.randomUUID()}`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this._initialClassesCaptured && this.className) {
+            this.initialClasses = this.className.split(' ').filter(c => c.trim());
+            this._initialClassesCaptured = true;
+        }
+    }
+    createRenderRoot() {
+        return this;
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        const classes = [
+            ...this.initialClasses,
+            'btu-switch',
+            SIZE_CLASSES[this.size],
+            this.labelPosition === 'start' && 'btu-switch-label-start',
+        ];
+        this.className = classes.filter(Boolean).join(' ');
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.emit('btu-switch-ready');
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (!this._userInitiated)
+            return;
+        this._userInitiated = false;
+        if (changedProperties.has('checked')) {
+            this.emit('btu-switch-change', { checked: this.checked });
+        }
+    }
+    _onInputChange(e) {
+        const input = e.target;
+        this._userInitiated = true;
+        this.checked = input.checked;
+    }
+    _onFocus() {
+        this.emit('btu-switch-focus');
+    }
+    _toggleInput() {
+        if (this.disabled)
+            return;
+        this.renderRoot.querySelector('.btu-switch-input')?.click();
+    }
+    render() {
+        return html `
+      <input
+        type="checkbox"
+        role="switch"
+        class="btu-switch-input"
+        .checked=${this.checked}
+        ?disabled=${this.disabled}
+        name=${ifDefined(this.name)}
+        aria-checked=${this.checked}
+        aria-label=${ifDefined(this.label)}
+        aria-describedby=${ifDefined(this.description ? this._descId : undefined)}
+        @change=${this._onInputChange}
+        @focus=${this._onFocus}
+      />
+      <span class="btu-switch-track" @click=${this._toggleInput}>
+        ${this.onIcon
+            ? html `<btu-icon
+              class="btu-switch-track-icon-on"
+              symbol=${this.onIcon}
+              style="--Icon-size: var(--switch-track-icon-size)"
+            ></btu-icon>`
+            : nothing}
+        <span class="btu-switch-knob"></span>
+        ${this.offIcon
+            ? html `<btu-icon
+              class="btu-switch-track-icon-off"
+              symbol=${this.offIcon}
+              style="--Icon-size: var(--switch-track-icon-size)"
+            ></btu-icon>`
+            : nothing}
+      </span>
+      ${this.label || this.description
+            ? html `
+            <span class="btu-switch-text" @click=${this._toggleInput}>
+              ${this.label ? html `<span class="btu-switch-label">${this.label}</span>` : nothing}
+              ${this.description
+                ? html `<span id=${this._descId} class="btu-switch-description">${this.description}</span>`
+                : nothing}
+            </span>
+          `
+            : nothing}
+    `;
+    }
+}
+__decorate([
+    property()
+], Switch.prototype, "size", void 0);
+__decorate([
+    property()
+], Switch.prototype, "label", void 0);
+__decorate([
+    property()
+], Switch.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean })
+], Switch.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], Switch.prototype, "disabled", void 0);
+__decorate([
+    property()
+], Switch.prototype, "name", void 0);
+__decorate([
+    property({ attribute: 'label-position' })
+], Switch.prototype, "labelPosition", void 0);
+__decorate([
+    property({ attribute: 'on-icon' })
+], Switch.prototype, "onIcon", void 0);
+__decorate([
+    property({ attribute: 'off-icon' })
+], Switch.prototype, "offIcon", void 0);
+if (!customElements.get('btu-switch')) {
+    customElements.define('btu-switch', Switch);
+}
+//# sourceMappingURL=Switch.js.map

package/dist/components/switch/Switch.js.map

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

package/dist/components/tabs/Tab.d.ts

@@ -0,0 +1,108 @@
+import { LitElement } from 'lit';
+import '../badge/Badge.js';
+import '../icon/Icon.js';
+export interface TabProps {
+    name?: string;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    iconName?: string;
+    iconPosition?: 'leading' | 'trailing';
+    iconOnly?: boolean;
+    error?: boolean;
+    badge?: string;
+}
+declare const Tab_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
+/**
+ * An individual tab within a tab group.
+ *
+ * Renders a button with role="tab" that participates in keyboard navigation
+ * and selection state managed by the parent `btu-tabs` container.
+ *
+ * @element btu-tab
+ *
+ * @fires {CustomEvent} btu-tab-ready - Fired after first render
+ * @fires {CustomEvent<{name: string}>} btu-tab-change - Fired when a non-disabled tab with a name is clicked
+ *
+ * @cssprop --badge-color-background - Background color of the count indicator badge (default: gray-50)
+ * @cssprop --badge-color-foreground - Text color of the count indicator badge (default: gray-700)
+ *
+ * @example
+ * ```html
+ * <btu-tabs>
+ *   <btu-tab name="main" label="Main"></btu-tab>
+ *   <btu-tab name="seo" label="SEO"></btu-tab>
+ *   <btu-tab name="styles" label="Styles" disabled></btu-tab>
+ * </btu-tabs>
+ * ```
+ */
+export default class Tab extends Tab_base {
+    static get tagName(): string;
+    /**
+     * Value that identifies this tab and links it to panel elements that share the same `name` attribute.
+     * @attr name
+     */
+    name?: string;
+    /**
+     * Text displayed in the tab.
+     * @attr
+     */
+    label?: string;
+    /**
+     * Accessibility description for screen readers.
+     * @attr
+     */
+    description?: string;
+    /**
+     * Whether the tab is disabled and non-interactive.
+     * @attr
+     */
+    disabled: boolean;
+    /**
+     * Lucide icon name to display.
+     * @attr icon-name
+     */
+    iconName?: string;
+    /**
+     * Placement of the icon relative to the label.
+     * @attr icon-position
+     */
+    iconPosition: 'leading' | 'trailing';
+    /**
+     * When true, hides the label visually while maintaining accessibility.
+     * @attr icon-only
+     */
+    iconOnly: boolean;
+    /**
+     * When true, displays an error badge on the tab.
+     * @attr
+     */
+    error: boolean;
+    /**
+     * Displays a badge with the given value alongside the label.
+     * @attr
+     */
+    badge?: string;
+    /** @internal Active state set by parent btu-tabs */
+    _active: boolean;
+    /** @internal Roving tabindex value set by parent btu-tabs */
+    _tabindex: number;
+    /** @internal Set by parent btu-tabs */
+    size: 'xs' | 'sm' | 'md' | 'lg';
+    /** @internal */
+    private initialClasses;
+    connectedCallback(): void;
+    createRenderRoot(): this;
+    willUpdate(): void;
+    firstUpdated(): void;
+    /** @internal */
+    private handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'btu-tab': Tab;
+    }
+}
+export {};
+//# sourceMappingURL=Tab.d.ts.map

package/dist/components/tabs/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAK/C,OAAO,mBAAmB,CAAA;AAC1B,OAAO,iBAAiB,CAAA;AAExB,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,QAAyC;IACxE,MAAM,KAAK,OAAO,WAEjB;IAED;;;OAGG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;OAGG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IAEH,QAAQ,UAAQ;IAEhB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;OAGG;IAEH,YAAY,EAAE,SAAS,GAAG,UAAU,CAAY;IAEhD;;;OAGG;IAEH,QAAQ,UAAQ;IAEhB;;;OAGG;IAEH,KAAK,UAAQ;IAEb;;;OAGG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,oDAAoD;IACpD,OAAO,UAAQ;IAEf,6DAA6D;IAC7D,SAAS,SAAK;IAEd,uCAAuC;IACvC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAO;IAEtC,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAe;IAErC,iBAAiB,IAAI,IAAI;IAOzB,gBAAgB;IAIhB,UAAU,IAAI,IAAI;IAIlB,YAAY,IAAI,IAAI;IAIpB,gBAAgB;IAChB,OAAO,CAAC,WAAW;IAKnB,MAAM;CAkCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,GAAG,CAAA;KACf;CACF"}

package/dist/components/tabs/Tab.js

@@ -0,0 +1,152 @@
+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 { LitElement, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
+import { ReadyMixin } from '../../util/ReadyMixin.js';
+import '../badge/Badge.js';
+import '../icon/Icon.js';
+/**
+ * An individual tab within a tab group.
+ *
+ * Renders a button with role="tab" that participates in keyboard navigation
+ * and selection state managed by the parent `btu-tabs` container.
+ *
+ * @element btu-tab
+ *
+ * @fires {CustomEvent} btu-tab-ready - Fired after first render
+ * @fires {CustomEvent<{name: string}>} btu-tab-change - Fired when a non-disabled tab with a name is clicked
+ *
+ * @cssprop --badge-color-background - Background color of the count indicator badge (default: gray-50)
+ * @cssprop --badge-color-foreground - Text color of the count indicator badge (default: gray-700)
+ *
+ * @example
+ * ```html
+ * <btu-tabs>
+ *   <btu-tab name="main" label="Main"></btu-tab>
+ *   <btu-tab name="seo" label="SEO"></btu-tab>
+ *   <btu-tab name="styles" label="Styles" disabled></btu-tab>
+ * </btu-tabs>
+ * ```
+ */
+export default class Tab extends EventEmitterMixin(ReadyMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the tab is disabled and non-interactive.
+         * @attr
+         */
+        this.disabled = false;
+        /**
+         * Placement of the icon relative to the label.
+         * @attr icon-position
+         */
+        this.iconPosition = 'leading';
+        /**
+         * When true, hides the label visually while maintaining accessibility.
+         * @attr icon-only
+         */
+        this.iconOnly = false;
+        /**
+         * When true, displays an error badge on the tab.
+         * @attr
+         */
+        this.error = false;
+        /** @internal Active state set by parent btu-tabs */
+        this._active = false;
+        /** @internal Roving tabindex value set by parent btu-tabs */
+        this._tabindex = -1;
+        /** @internal Set by parent btu-tabs */
+        this.size = 'md';
+        /** @internal */
+        this.initialClasses = [];
+    }
+    static get tagName() {
+        return 'BTU-TAB';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.className) {
+            this.initialClasses = this.className.split(' ').filter(c => c.trim());
+        }
+    }
+    createRenderRoot() {
+        return this;
+    }
+    willUpdate() {
+        this.className = [...this.initialClasses, 'btu-tab'].filter(Boolean).join(' ');
+    }
+    firstUpdated() {
+        this.emit('btu-tab-ready');
+    }
+    /** @internal */
+    handleClick() {
+        if (this.disabled || !this.name)
+            return;
+        this.emit('btu-tab-change', { name: this.name });
+    }
+    render() {
+        const iconTemplate = this.iconName
+            ? html `<btu-icon symbol="${this.iconName}" size="${this.size === 'lg' ? 'md' : 'sm'}"></btu-icon>`
+            : nothing;
+        const labelTemplate = this.iconOnly && this.iconName ? nothing : html `<span>${this.label}</span>`;
+        const badgeTemplate = this.badge != null ? html `<btu-badge size="sm">${this.badge}</btu-badge>` : nothing;
+        const errorDot = this.error ? html `<btu-badge size="sm" variant="error">!</btu-badge>` : nothing;
+        const indicator = this._active && !this.disabled
+            ? html `<span
+            class="btu-tab-indicator"
+            style=${styleMap(this.error ? { background: 'oklch(var(--btu-theme-error-600))' } : {})}
+          ></span>`
+            : nothing;
+        return html `<button
+      type="button"
+      role="tab"
+      class="btu-tab-button btu-tab-button-${this.size}"
+      aria-selected="${this._active}"
+      aria-disabled="${this.disabled || nothing}"
+      aria-description="${this.description || nothing}"
+      aria-label="${this.iconOnly && this.label ? this.label : nothing}"
+      tabindex="${this._tabindex}"
+      @click=${this.handleClick}
+    >
+      ${this.iconPosition === 'leading' ? iconTemplate : nothing} ${labelTemplate}
+      ${this.iconPosition === 'trailing' ? iconTemplate : nothing} ${badgeTemplate} ${errorDot} ${indicator}
+    </button>`;
+    }
+}
+__decorate([
+    property({ type: String, attribute: 'name', reflect: true })
+], Tab.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], Tab.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], Tab.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Tab.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'icon-name' })
+], Tab.prototype, "iconName", void 0);
+__decorate([
+    property({ type: String, attribute: 'icon-position' })
+], Tab.prototype, "iconPosition", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'icon-only' })
+], Tab.prototype, "iconOnly", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'error' })
+], Tab.prototype, "error", void 0);
+__decorate([
+    property({ attribute: 'badge' })
+], Tab.prototype, "badge", void 0);
+if (!customElements.get('btu-tab')) {
+    customElements.define('btu-tab', Tab);
+}
+//# sourceMappingURL=Tab.js.map

package/dist/components/tabs/Tab.js.map

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