@brightspot/ui 1.0.1-wc.4 → 1.2.0

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,75 @@
+import { LitElement } from 'lit';
+export interface BadgeProps {
+    variant?: 'info' | 'primary' | 'error' | 'success' | 'warning';
+    dot?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Badge_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
+/**
+ * A badge component for highlighting important information.
+ *
+ * Badges help highlight notifications, status, or new messages.
+ * Primarily used for communicating secondary or additional information.
+ *
+ * @element btu-badge
+ *
+ * @fires {CustomEvent} btu-badge-ready - Fired after first render and initialization
+ *
+ * @cssprop --badge-color-foreground - Text color (overrides theme color)
+ * @cssprop --badge-color-background - Background color (overrides theme color)
+ * @cssprop --badge-radius-size - Border radius size (overrides shape default, default: 999px)
+ * @cssprop --badge-px - Horizontal padding (overrides size default)
+ * @cssprop --badge-py - Vertical padding (overrides size default)
+ * @cssprop --badge-dot-size - Size of the dot affordance (default: 6px)
+ *
+ * @example
+ * ```html
+ * <!-- Badge with dot -->
+ * <btu-badge variant="info" size="sm" dot>New</btu-badge>
+ *
+ * <!-- Badge with icon -->
+ * <btu-badge variant="success" size="md">
+ *   <btu-icon symbol="check"></btu-icon>
+ *   Success
+ * </btu-badge>
+ * ```
+ */
+export default class Badge extends Badge_base {
+    /**
+     * Style of the badge.
+     * - 'info': Informational (default)
+     * - 'primary': Primary action or emphasis
+     * - 'error': Error or danger state
+     * - 'success': Success or completion state
+     * - 'warning': Warning or caution state
+     * @attr
+     */
+    variant: 'info' | 'primary' | 'error' | 'success' | 'warning';
+    /**
+     * Should a dot be displayed before the label?
+     * @attr
+     */
+    dot: boolean;
+    /**
+     * Size variant.
+     * - 'sm': Small (default)
+     * - 'md': Medium
+     * - 'lg': Large
+     * @attr
+     */
+    size: string;
+    /** @internal */
+    private initialClasses;
+    connectedCallback(): void;
+    createRenderRoot(): this;
+    willUpdate(): void;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'btu-badge': Badge;
+    }
+}
+export {};
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/Badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAKtC,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;IAC9D,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,UAAyC;IAC1E;;;;;;;;OAQG;IAEH,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAS;IAEtE;;;OAGG;IAEH,GAAG,UAAQ;IAEX;;;;;;OAMG;IAEH,IAAI,SAAO;IAEX,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAe;IAErC,iBAAiB,IAAI,IAAI;IAQzB,gBAAgB;IAIhB,UAAU,IAAI,IAAI;IAqBlB,YAAY,IAAI,IAAI;IAIpB,MAAM;CAGP;AAQD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,KAAK,CAAA;KACnB;CACF"}

package/dist/components/badge/Badge.js

@@ -0,0 +1,118 @@
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
+import { ReadyMixin } from '../../util/ReadyMixin.js';
+/**
+ * A badge component for highlighting important information.
+ *
+ * Badges help highlight notifications, status, or new messages.
+ * Primarily used for communicating secondary or additional information.
+ *
+ * @element btu-badge
+ *
+ * @fires {CustomEvent} btu-badge-ready - Fired after first render and initialization
+ *
+ * @cssprop --badge-color-foreground - Text color (overrides theme color)
+ * @cssprop --badge-color-background - Background color (overrides theme color)
+ * @cssprop --badge-radius-size - Border radius size (overrides shape default, default: 999px)
+ * @cssprop --badge-px - Horizontal padding (overrides size default)
+ * @cssprop --badge-py - Vertical padding (overrides size default)
+ * @cssprop --badge-dot-size - Size of the dot affordance (default: 6px)
+ *
+ * @example
+ * ```html
+ * <!-- Badge with dot -->
+ * <btu-badge variant="info" size="sm" dot>New</btu-badge>
+ *
+ * <!-- Badge with icon -->
+ * <btu-badge variant="success" size="md">
+ *   <btu-icon symbol="check"></btu-icon>
+ *   Success
+ * </btu-badge>
+ * ```
+ */
+export default class Badge extends EventEmitterMixin(ReadyMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Style of the badge.
+         * - 'info': Informational (default)
+         * - 'primary': Primary action or emphasis
+         * - 'error': Error or danger state
+         * - 'success': Success or completion state
+         * - 'warning': Warning or caution state
+         * @attr
+         */
+        this.variant = 'info';
+        /**
+         * Should a dot be displayed before the label?
+         * @attr
+         */
+        this.dot = false;
+        /**
+         * Size variant.
+         * - 'sm': Small (default)
+         * - 'md': Medium
+         * - 'lg': Large
+         * @attr
+         */
+        this.size = 'sm';
+        /** @internal */
+        this.initialClasses = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Capture initial classes from backend HTML
+        if (this.className) {
+            this.initialClasses = this.className.split(' ').filter(c => c.trim());
+        }
+    }
+    createRenderRoot() {
+        return this;
+    }
+    willUpdate() {
+        // Map variant to theme color (info → gray)
+        const colorMap = {
+            info: 'gray',
+            primary: 'primary',
+            error: 'error',
+            success: 'success',
+            warning: 'warning',
+        };
+        const classes = [
+            ...this.initialClasses,
+            'btu-badge',
+            `btu-badge-${this.size}`,
+            `btu-badge-${colorMap[this.variant]}`,
+            this.dot ? 'btu-badge-dot' : '',
+        ];
+        this.className = classes.filter(Boolean).join(' ');
+    }
+    firstUpdated() {
+        this.emit('btu-badge-ready');
+    }
+    render() {
+        return html ``;
+    }
+}
+__decorate([
+    property({ type: String })
+], Badge.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean })
+], Badge.prototype, "dot", void 0);
+__decorate([
+    property({ type: String })
+], Badge.prototype, "size", void 0);
+// Register custom element with guard to prevent double registration
+// (common with yarn link, HMR, or webpack bundle duplication)
+if (!customElements.get('btu-badge')) {
+    customElements.define('btu-badge', Badge);
+}
+//# sourceMappingURL=Badge.js.map

package/dist/components/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/badge/Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAQrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,iBAAiB,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IAA5E;;QACE;;;;;;;;WAQG;QAEH,YAAO,GAAyD,MAAM,CAAA;QAEtE;;;WAGG;QAEH,QAAG,GAAG,KAAK,CAAA;QAEX;;;;;;WAMG;QAEH,SAAI,GAAG,IAAI,CAAA;QAEX,gBAAgB;QACR,mBAAc,GAAa,EAAE,CAAA;IA0CvC,CAAC;IAxCC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,4CAA4C;QAC5C,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAA;QACvE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IAED,UAAU;QACR,2CAA2C;QAC3C,MAAM,QAAQ,GAAmD;YAC/D,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,SAAS;SACnB,CAAA;QAED,MAAM,OAAO,GAAG;YACd,GAAG,IAAI,CAAC,cAAc;YACtB,WAAW;YACX,aAAa,IAAI,CAAC,IAAI,EAAE;YACxB,aAAa,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACrC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;SAChC,CAAA;QAED,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACpD,CAAC;IAED,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,EAAE,CAAA;IACf,CAAC;CACF;AA9DC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAC2C;AAOtE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kCACjB;AAUX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAChB;AA+Cb,oEAAoE;AACpE,8DAA8D;AAC9D,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;IACrC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;AAC3C,CAAC"}

package/dist/components/circular-progress/CircularProgress.d.ts

@@ -0,0 +1,57 @@
+import { LitElement } from 'lit';
+declare const CircularProgress_base: (new (...args: any[]) => import("../../util/ProgressMixin.js").ProgressMixinInterface) & (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
+/**
+ * A circular progress indicator for showing loading states or progress.
+ *
+ * @element btu-circular-progress
+ *
+ * @fires {CustomEvent} btu-progress-ready - Fired after first render and initialization
+ * @fires {CustomEvent} btu-progress-complete - Fired when determinate progress reaches 100
+ *
+ * @cssprop --progress-color - Custom progress indicator color (overrides theme color)
+ * @cssprop --track-color - Track/background color (overrides default gray-100)
+ * @cssprop --progress-size - Custom size in pixels (overrides size preset)
+ *
+ * @example
+ * ```html
+ * <!-- Indeterminate spinner (default) -->
+ * <btu-circular-progress color="primary" size="md"></btu-circular-progress>
+ *
+ * <!-- Determinate progress -->
+ * <btu-circular-progress indeterminate="false" progress="75" color="success"></btu-circular-progress>
+ * ```
+ */
+export default class CircularProgress extends CircularProgress_base {
+    /**
+     * Whether the progress indicator is indeterminate (animated spinner).
+     * When false, shows determinate progress based on the progress value.
+     * @attr
+     */
+    indeterminate: boolean;
+    /**
+     * Size variant.
+     * - 'sm': Small (16px) - default
+     * - 'md': Medium (32px)
+     * - 'lg': Large (48px)
+     * @attr
+     */
+    size: 'sm' | 'md' | 'lg';
+    /** @internal */
+    private _initialClasses;
+    /** @internal */
+    private _styleObserver?;
+    connectedCallback(): void;
+    createRenderRoot(): this;
+    willUpdate(): void;
+    firstUpdated(changedProperties: Map<PropertyKey, unknown>): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<PropertyKey, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'btu-circular-progress': CircularProgress;
+    }
+}
+export {};
+//# sourceMappingURL=CircularProgress.d.ts.map

package/dist/components/circular-progress/CircularProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../../src/components/circular-progress/CircularProgress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAA;;AAMpD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,qBAAwD;IACpG;;;;OAIG;IAEH,aAAa,UAAO;IAEpB;;;;;;OAMG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAO;IAE/B,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAAe;IAEtC,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAC,CAAkB;IAEzC,iBAAiB,IAAI,IAAI;IAsBzB,gBAAgB;IAIhB,UAAU,IAAI,IAAI;IAMlB,YAAY,CAAC,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAShE,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAc3D,MAAM;CA+DP;AAOD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,gBAAgB,CAAA;KAC1C;CACF"}

package/dist/components/circular-progress/CircularProgress.js

@@ -0,0 +1,173 @@
+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, css, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
+import { ProgressMixin } from '../../util/ProgressMixin.js';
+import { ReadyMixin } from '../../util/ReadyMixin.js';
+/**
+ * A circular progress indicator for showing loading states or progress.
+ *
+ * @element btu-circular-progress
+ *
+ * @fires {CustomEvent} btu-progress-ready - Fired after first render and initialization
+ * @fires {CustomEvent} btu-progress-complete - Fired when determinate progress reaches 100
+ *
+ * @cssprop --progress-color - Custom progress indicator color (overrides theme color)
+ * @cssprop --track-color - Track/background color (overrides default gray-100)
+ * @cssprop --progress-size - Custom size in pixels (overrides size preset)
+ *
+ * @example
+ * ```html
+ * <!-- Indeterminate spinner (default) -->
+ * <btu-circular-progress color="primary" size="md"></btu-circular-progress>
+ *
+ * <!-- Determinate progress -->
+ * <btu-circular-progress indeterminate="false" progress="75" color="success"></btu-circular-progress>
+ * ```
+ */
+export default class CircularProgress extends ProgressMixin(EventEmitterMixin(ReadyMixin(LitElement))) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the progress indicator is indeterminate (animated spinner).
+         * When false, shows determinate progress based on the progress value.
+         * @attr
+         */
+        this.indeterminate = true;
+        /**
+         * Size variant.
+         * - 'sm': Small (16px) - default
+         * - 'md': Medium (32px)
+         * - 'lg': Large (48px)
+         * @attr
+         */
+        this.size = 'sm';
+        /** @internal */
+        this._initialClasses = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Capture initial classes from backend HTML
+        if (this.className) {
+            this._initialClasses = this.className.split(' ').filter(c => c.trim());
+        }
+        // Observe style attribute changes to detect --progress-size updates
+        this._styleObserver = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+                    this.requestUpdate();
+                }
+            });
+        });
+        this._styleObserver.observe(this, {
+            attributes: true,
+            attributeFilter: ['style'],
+        });
+    }
+    createRenderRoot() {
+        return this;
+    }
+    willUpdate() {
+        const classes = [...this._initialClasses, 'inline-flex', 'flex-col', 'items-center'];
+        this.className = classes.join(' ');
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        // Only setup initial animation for determinate mode
+        if (!this.indeterminate) {
+            this._setupInitialAnimation();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._styleObserver?.disconnect();
+        this._cleanupInitialAnimation();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Setup animation if switching to determinate mode
+        if (changedProperties.has('indeterminate') && !this.indeterminate) {
+            this._setupInitialAnimation();
+        }
+        // Only track completion in determinate mode
+        if (!this.indeterminate) {
+            this._trackCompletion();
+        }
+    }
+    render() {
+        // Determine size: check --progress-size CSS property, fallback to size preset
+        const sizeMap = { sm: 16, md: 32, lg: 48 };
+        const customSize = getComputedStyle(this).getPropertyValue('--progress-size').trim();
+        const parsed = parseFloat(customSize);
+        const size = customSize && !isNaN(parsed) && parsed > 0 ? parsed : (sizeMap[this.size] ?? sizeMap.sm);
+        const thickness = this.thickness ?? 2; // default thickness is 2
+        const color = this._getProgressColorValue();
+        const radius = (size - thickness) / 2;
+        const circumference = 2 * Math.PI * radius;
+        const center = size / 2;
+        const progressValue = this._getAnimatedProgress();
+        const strokeDashoffset = this.indeterminate ? 0 : circumference - (progressValue / 100) * circumference;
+        return html `
+      <span
+        class="block"
+        role="progressbar"
+        aria-label="${this.ariaLabel || nothing}"
+        aria-labelledby="${this.ariaLabelledBy || nothing}"
+        aria-valuenow="${this.indeterminate ? nothing : progressValue}"
+        aria-valuemin="${this.indeterminate ? nothing : '0'}"
+        aria-valuemax="${this.indeterminate ? nothing : '100'}"
+        aria-valuetext="${this.indeterminate
+            ? nothing
+            : this.ariaValueText || this.label || `${progressValue} percent`}"
+      >
+        <svg
+          class="${this.indeterminate ? 'animate-circular-progress-rotate' : ''} block"
+          width="${size}"
+          height="${size}"
+          viewBox="0 0 ${size} ${size}"
+          aria-hidden="true"
+        >
+          <circle
+            cx="${center}"
+            cy="${center}"
+            r="${radius}"
+            fill="none"
+            stroke="var(--track-color, oklch(var(--btu-theme-gray-100)))"
+            stroke-width="${thickness}"
+          />
+          <circle
+            class="${this.indeterminate
+            ? 'animate-circular-progress-dash'
+            : '-rotate-90'} origin-center transition-all duration-300 ease-in-out"
+            cx="${center}"
+            cy="${center}"
+            r="${radius}"
+            fill="none"
+            stroke="${color}"
+            stroke-width="${thickness}"
+            stroke-dasharray="${this.indeterminate ? '1, 200' : circumference}"
+            stroke-dashoffset="${this.indeterminate ? '0' : strokeDashoffset}"
+            stroke-linecap="round"
+          />
+        </svg>
+      </span>
+      ${this.label ? html `<span class="mt-2 text-center text-xs font-medium text-gray-700">${this.label}</span>` : ''}
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], CircularProgress.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: String })
+], CircularProgress.prototype, "size", void 0);
+// Register custom element with guard to prevent double registration
+if (!customElements.get('btu-circular-progress')) {
+    customElements.define('btu-circular-progress', CircularProgress);
+}
+//# sourceMappingURL=CircularProgress.js.map

package/dist/components/circular-progress/CircularProgress.js.map

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

package/dist/components/icon/Icon.d.ts

@@ -0,0 +1,90 @@
+import { LitElement } from 'lit';
+export interface IconProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    symbol?: string;
+    gradient?: 'ai' | 'error' | 'gray' | 'primary' | 'purple' | 'rose' | 'success' | 'teal' | 'warning';
+}
+declare const Icon_base: (new (...args: any[]) => import("../../util/EventEmitterMixin.js").EventEmitterMixinInterface) & (new (...args: any[]) => import("../../util/ReadyMixin.js").ReadyMixinInterface) & typeof LitElement;
+/**
+ * An icon component for displaying Lucide icons.
+ *
+ * Icons inherit parent text color by default or can use gradient fills.
+ * All icons are from the Lucide icon library (https://lucide.dev/icons/).
+ * Supports both direct SVG rendering and mask-based gradient fills.
+ *
+ * @element btu-icon
+ *
+ * @fires {CustomEvent} btu-icon-ready - Fired after first render and initialization
+ *
+ * @cssprop --Icon-size - Icon size (overrides size default)
+ * @cssprop --Icon-fill - Icon fill color for filled icons (e.g., "currentColor")
+ * @cssprop --Icon-svg - SVG data URI for mask-based rendering
+ *
+ * @example
+ * ```html
+ * <!-- Icon inheriting parent text color -->
+ * <btu-icon symbol="heart" size="md"></btu-icon>
+ *
+ * <!-- Gradient icon -->
+ * <btu-icon symbol="star" size="lg" gradient="primary"></btu-icon>
+ *
+ * <!-- Custom size via CSS -->
+ * <btu-icon symbol="check" style="--Icon-size: 3rem"></btu-icon>
+ *
+ * <!-- Filled icon via CSS (advanced usage) -->
+ * <btu-icon symbol="heart" style="--Icon-fill: currentColor"></btu-icon>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Programmatic usage
+ * const icon = document.createElement('btu-icon')
+ * icon.symbol = 'smile'
+ * icon.size = 'lg'
+ * icon.addEventListener('btu-icon-ready', () => console.log('Icon loaded'))
+ * ```
+ */
+export default class Icon extends Icon_base {
+    static get tagName(): string;
+    /**
+     * Size of the icon.
+     * - 'xs': Extra small (0.75rem)
+     * - 'sm': Small (1rem)
+     * - 'md': Medium (1.25rem, default)
+     * - 'lg': Large (1.5rem)
+     * - 'xl': Extra large (1.75rem)
+     * @attr
+     */
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Lucide icon name to display.
+     * See https://lucide.dev/icons/ for available icons.
+     * @attr
+     */
+    symbol: string;
+    /**
+     * Theme color to use for gradient fill.
+     * When set, icon displays with gradient. When undefined, icon inherits parent text color.
+     * @attr
+     */
+    gradient?: 'ai' | 'error' | 'gray' | 'primary' | 'purple' | 'rose' | 'success' | 'teal' | 'warning';
+    /** @internal */
+    private initialClasses;
+    connectedCallback(): void;
+    createRenderRoot(): this;
+    willUpdate(): void;
+    firstUpdated(): void;
+    /**
+     * Escape HTML special characters to prevent XSS attacks in comments.
+     * @internal
+     */
+    private escapeHtml;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'btu-icon': Icon;
+    }
+}
+export {};
+//# sourceMappingURL=Icon.d.ts.map

package/dist/components/icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/Icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAWtC,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;CACpG;;AASD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,SAAyC;IACzE,MAAM,KAAK,OAAO,WAEjB;IAED;;;;;;;;OAQG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAO;IAE7C;;;;OAIG;IAEH,MAAM,EAAE,MAAM,CAAkB;IAEhC;;;;OAIG;IAEH,QAAQ,CAAC,EAAE,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;IAEnG,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAAe;IAErC,iBAAiB,IAAI,IAAI;IAQzB,gBAAgB;IAIhB,UAAU,IAAI,IAAI;IAclB,YAAY,IAAI,IAAI;IAIpB;;;OAGG;IACH,OAAO,CAAC,UAAU;IASlB,MAAM;CA+CP;AAQD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAA;KACjB;CACF"}