atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/components/avatar/avatar.js

@@ -37,6 +37,8 @@ export class Avatar {
     statusPosition = 'bottom-right';
     /** Show status indicator */
     showStatus = false;
+    /** Size of the status indicator dot. Accepts a number (px) or any CSS size value. */
+    indicatorSize;
     /** Badge count/text overlay */
     badge = '';
     /** Badge position */
@@ -391,6 +393,31 @@ export class Avatar {
         const textContent = this.name || this.el.textContent?.trim();
         return textContent || '';
     }
+    getIndicatorSizeStyles() {
+        if (this.indicatorSize === undefined || this.indicatorSize === null || this.indicatorSize === '') {
+            return undefined;
+        }
+        const rawIndicatorSize = typeof this.indicatorSize === 'string'
+            ? this.indicatorSize.trim()
+            : this.indicatorSize;
+        let rawSize;
+        if (typeof rawIndicatorSize === 'number') {
+            rawSize = `${rawIndicatorSize}px`;
+        }
+        else if (/^\d+(?:\.\d+)?$/.test(rawIndicatorSize)) {
+            rawSize = `${rawIndicatorSize}px`;
+        }
+        else {
+            rawSize = rawIndicatorSize;
+        }
+        return {
+            '--avatar-status-size': rawSize,
+            '--avatar-status-border-width': `max(1px, calc(${rawSize} * 0.2))`,
+            '--avatar-status-offline-inset': `max(1px, calc(${rawSize} * 0.2))`,
+            '--avatar-status-busy-width': `calc(${rawSize} * 0.6)`,
+            '--avatar-status-busy-height': `max(1px, calc(${rawSize} * 0.15))`,
+        };
+    }
     renderStatusIndicator() {
         if (!this.showStatus || !this.status)
             return null;
@@ -400,7 +427,7 @@ export class Avatar {
             [`avatar-status-${this.statusPosition}`]: true,
             'avatar-status-pulse': this.statusPulse,
         };
-        return h("span", { class: statusClass });
+        return h("span", { class: statusClass, style: this.getIndicatorSizeStyles() });
     }
     renderBadge() {
         if (!this.badge)
@@ -463,16 +490,22 @@ export class Avatar {
     getAllAvatarData() {
         if (this.avatars && this.avatars.length > 0)
             return this.avatars;
-        return this.slottedAvatars.map(el => ({
-            src: el.getAttribute('src'),
-            name: el.getAttribute('name'),
-            content: el.getAttribute('content') || el.textContent?.trim(),
-            tooltipText: el.getAttribute('tooltipText') || el.getAttribute('tooltip-text') || el.getAttribute('name') || el.textContent?.trim(),
-            icon: el.getAttribute('icon'),
-            bgColor: el.getAttribute('bgColor') || el.getAttribute('bg-color'),
-            badge: el.getAttribute('badge'),
-            status: el.getAttribute('status')
-        }));
+        return this.slottedAvatars.map(el => {
+            const data = {
+                content: el.textContent?.trim() || undefined,
+                tooltipText: el.getAttribute('name') || el.textContent?.trim() || undefined,
+            };
+            Array.from(el.attributes).forEach((attr) => {
+                const camelCase = attr.name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                let val = attr.value;
+                if (val === 'true' || val === '')
+                    val = true;
+                if (val === 'false')
+                    val = false;
+                data[camelCase] = val;
+            });
+            return data;
+        });
     }
     renderExcessCount(total, max) {
         const excess = total - max;
@@ -994,6 +1027,25 @@ export class Avatar {
                 "attribute": "show-status",
                 "defaultValue": "false"
             },
+            "indicatorSize": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the status indicator dot. Accepts a number (px) or any CSS size value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indicator-size"
+            },
             "badge": {
                 "type": "any",
                 "mutable": false,

package/dist/collection/components/badge/badge.css

@@ -210,7 +210,7 @@
 
 /* Colors - Outlined */
 .badge-outlined {
-  background-color: var(--bg-primary, var(--text-standard, #ffffff));
+  background-color: transparent;
 }
 
 .badge-outlined.badge-primary {
@@ -269,26 +269,34 @@
   transform: scale(0.95);
 }
 
-/* Closeable badges need pointer events and a chip/rectangle shape */
+/* Closeable badges need pointer events and auto width to fit both text and icon */
 .badge.badge-closable {
   pointer-events: auto !important;
-  border-radius: 6px !important;
-  /* Chip/Rectangle shape */
-  padding-left: 10px !important;
-  padding-right: 10px !important;
+  width: auto !important;
+  min-width: var(--badge-size, 20px) !important;
+  padding-left: 0.6em !important;
+  padding-right: 0.3em !important;
+}
+
+.badge.badge-closable.badge-shape-circle {
+  border-radius: 9999px; /* Gracefully become a pill instead of an elliptical oval */
 }
 
 /* Close Button */
 .badge-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   background: none;
   border: none;
   color: inherit;
   cursor: pointer;
-  padding: 0 0 0 4px;
+  padding: 2px;
   margin-left: 4px;
-  font-size: 0.9em;
-  opacity: 0.8;
-  transition: opacity 0.2s ease;
+  border-radius: 50%;
+  font-size: 1em;
+  opacity: 0.7;
+  transition: opacity 0.2s ease, transform 0.1s ease, background-color 0.2s ease;
   line-height: 1;
   pointer-events: auto;
   position: relative;
@@ -297,11 +305,13 @@
 
 .badge-close:hover {
   opacity: 1;
+  transform: scale(1.1);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
 /* Bordered Variant */
 .badge-bordered {
-  background-color: var(--bg-primary, var(--text-standard, #ffffff));
+  background-color: transparent;
   border: 2px solid currentColor;
 }
 
@@ -337,32 +347,32 @@
 
 /* Soft Variant */
 .badge-soft.badge-primary {
-  background-color: var(--bg-primary, #eff6ff);
+  background-color: var(--color-primary-soft, #ecfdf5);
   color: var(--color-primary, #10b981);
 }
 
 .badge-soft.badge-secondary {
-  background-color: var(--bg-secondary, #f3f4f6);
+  background-color: var(--color-secondary-soft, #f3f4f6);
   color: var(--text-muted, #6b7280);
 }
 
 .badge-soft.badge-success {
-  background-color: var(--bg-primary, #d1fae5);
+  background-color: var(--color-success-soft, #ecfdf5);
   color: var(--color-success, #10b981);
 }
 
 .badge-soft.badge-danger {
-  background-color: var(--bg-primary, #fee2e2);
+  background-color: var(--color-danger-soft, #fef2f2);
   color: var(--color-danger, #ef4444);
 }
 
 .badge-soft.badge-warning {
-  background-color: var(--bg-primary, #fef3c7);
+  background-color: var(--color-warning-soft, #fffbeb);
   color: var(--color-warning, #f59e0b);
 }
 
 .badge-soft.badge-info {
-  background-color: var(--bg-primary, #cffafe);
+  background-color: var(--color-info-soft, #ecfeff);
   color: var(--color-info, #06b6d4);
 }
 

package/dist/collection/components/badge/badge.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 export class Badge {
+    hostElement;
     /**
      * Content/number to display in badge
      */
@@ -132,7 +133,8 @@ export class Badge {
         if (!this.isVisible)
             return null;
         const displayValue = this.getDisplayValue();
-        const shouldShow = this.dot || displayValue !== '' || this.icon;
+        const hasSlotContent = !!this.hostElement.querySelector('[slot="badge-content"]');
+        const shouldShow = this.dot || displayValue !== '' || this.icon || hasSlotContent;
         const displayValueStr = displayValue.toString();
         const isSingleChar = displayValueStr.length === 1 && !this.icon;
         const classes = [
@@ -160,7 +162,7 @@ export class Badge {
             style['background-color'] = this.customColor;
         if (this.customTextColor)
             style['color'] = this.customTextColor;
-        return (h(Host, { dir: this.rtl ? 'rtl' : undefined }, h("div", { class: "badge-wrapper" }, h("slot", null), shouldShow && (h("span", { class: classes, style: style, onClick: this.handleClick }, this.icon && this.iconPosition === 'left' && !this.dot && (h("span", { class: "badge-icon" }, h("ui-icon", { name: this.icon, library: this.iconLibrary, size: "1.1em" }))), h("slot", { name: "badge-content" }, !this.dot && displayValue), this.icon && this.iconPosition === 'right' && !this.dot && (h("span", { class: "badge-icon" }, h("ui-icon", { name: this.icon, library: this.iconLibrary, size: "1.1em" }))), this.closeable && (h("ui-button", { variant: "ghost", class: "badge-close", onClick: this.handleClose, ariaLabel: "Close badge", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })))))));
+        return (h(Host, { dir: this.rtl ? 'rtl' : undefined }, h("div", { class: "badge-wrapper" }, h("slot", null), shouldShow && (h("span", { class: classes, style: style, onClick: this.handleClick }, this.icon && this.iconPosition === 'left' && !this.dot && (h("span", { class: "badge-icon" }, h("ui-icon", { name: this.icon, library: this.iconLibrary, size: "1.1em" }))), h("slot", { name: "badge-content" }, !this.dot && displayValue), this.icon && this.iconPosition === 'right' && !this.dot && (h("span", { class: "badge-icon" }, h("ui-icon", { name: this.icon, library: this.iconLibrary, size: "1.1em" }))), this.closeable && (h("span", { class: "badge-close", onClick: this.handleClose, "aria-label": "Close badge", role: "button", tabindex: "0" }, h("ui-icon", { name: "x", library: "lucide", size: "1em" }))))))));
     }
     static get is() { return "ui-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -220,7 +222,7 @@ export class Badge {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",
@@ -720,4 +722,5 @@ export class Badge {
                 }
             }];
     }
+    static get elementRef() { return "hostElement"; }
 }

package/dist/collection/components/breadcrumb/breadcrumb-item.js

@@ -39,8 +39,8 @@ export class BreadcrumbItemComponent {
             'disabled': this.disabled,
             [`size-${this.size}`]: true,
         };
-        const content = (h("span", { key: '7247bee3f00e6cc3de54c9860d014243b5d9c4cb', class: "breadcrumb-content" }, this.icon && (h("span", { key: '2537f399d8d557033b72f63a9bc190b208ebdf88', class: "breadcrumb-icon" }, h("ui-icon", { key: '951ece78e4e9936fd8f459bb041940c9f6632390', name: this.icon, library: this.iconLibrary, size: "1.1em" }))), h("span", { key: '9b2cc37dc1ae16e0b4f73ee0b12ecd168c930c49', class: "breadcrumb-label" }, h("slot", { key: 'd150b1d67baaa1f1ee0a679a4eded9fb2fe70e88' }, this.label)), this.badge !== undefined && (h("span", { key: '90d28ba9ab8e41cb81e4956fb4eb2a06fc940145', class: "breadcrumb-badge" }, this.badge))));
-        return (h(Host, { key: '867a980816ed6ca77aeedd631e00f284a8cccbf5', class: "breadcrumb-item-wrapper" }, this.href && !this.disabled && !this.active ? (h("a", { href: this.href, class: classes, "aria-current": this.active ? 'page' : undefined }, content)) : (h("span", { class: classes, "aria-current": this.active ? 'page' : undefined }, content))));
+        const content = (h("span", { key: '05f34f83d3f1bf069dce5942c543969be61213b9', class: "breadcrumb-content" }, this.icon && (h("span", { key: 'a7f149671e841edc15caafb4c3f9bafc71a7271a', class: "breadcrumb-icon" }, h("ui-icon", { key: 'c3c58f5cd81851e138fbce645f57bfff0dc1cbb8', name: this.icon, library: this.iconLibrary, size: "1.1em" }))), h("span", { key: 'cf7f46a53174ffebe4d51288164b9ffc798fb428', class: "breadcrumb-label" }, h("slot", { key: 'd93e29958c18269d8fdb2c9e3fc46554cf191ed7' }, this.label)), this.badge !== undefined && (h("span", { key: '96f4c6783184aedb03161046018c179a089c94b5', class: "breadcrumb-badge" }, this.badge))));
+        return (h(Host, { key: 'db0123ea2494998e20fa67557bdc2ea374811767', class: "breadcrumb-item-wrapper" }, this.href && !this.disabled && !this.active ? (h("a", { href: this.href, class: classes, "aria-current": this.active ? 'page' : undefined }, content)) : (h("span", { class: classes, "aria-current": this.active ? 'page' : undefined }, content))));
     }
     static get is() { return "ui-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button/button.css

@@ -421,6 +421,7 @@
 
 /* Soft Variant (Premium Refinement) */
 .btn-soft {
+  background: var(--btn-soft-bg, rgba(var(--color-primary-rgb, 59, 130, 246), 0.15));
   color: var(--label-color, var(--text-primary, #1e293b));
   border-color: transparent;
   box-shadow: none;

package/dist/collection/components/button/button.js

@@ -736,7 +736,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",
@@ -1117,7 +1117,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",
@@ -1181,7 +1181,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",

package/dist/collection/components/button-toggle/button-toggle.js

@@ -64,10 +64,10 @@ export class ButtonToggle {
         if (this.reveal !== 'none' && this.revealDelay > 0) {
             style['animation-delay'] = `${this.revealDelay}ms`;
         }
-        return (h("ui-button", { key: '97cc24c55a704ecd85f39d443f4cc098b3194138', part: "button", label: this.label, description: this.description, descriptionPosition: this.descriptionPosition, shape: this.shape, variant: this.variant, size: this.size, selected: this.selected, style: style, icon: this.icon || this.iconLeft || this.iconRight, iconPosition: this.iconPosition, iconLibrary: this.library, iconOnly: this.iconOnly, avatarSrc: this.avatarSrc, avatarAlt: this.avatarAlt, avatarStatus: this.status, disabled: this.disabled || this.loading, "aria-pressed": this.selected ? 'true' : 'false', "aria-label": this.label, role: "radio", onClick: this.handleClick, tabIndex: this.disabled ? -1 : 0, class: {
+        return (h("ui-button", { key: 'faf3faae2f92535d6336b53616c8013ff533e7d6', part: "button", label: this.label, description: this.description, descriptionPosition: this.descriptionPosition, shape: this.shape, variant: this.variant, size: this.size, selected: this.selected, style: style, icon: this.icon || this.iconLeft || this.iconRight, iconPosition: this.iconPosition, iconLibrary: this.library, iconOnly: this.iconOnly, avatarSrc: this.avatarSrc, avatarAlt: this.avatarAlt, avatarStatus: this.status, disabled: this.disabled || this.loading, "aria-pressed": this.selected ? 'true' : 'false', "aria-label": this.label, role: "radio", onClick: this.handleClick, tabIndex: this.disabled ? -1 : 0, class: {
                 'button-toggle-item': true,
                 'full-width': this.fullWidth
-            } }, h("slot", { key: '2d5cdcb204273dbd82191ff0da555eec5d79ed6d' })));
+            } }, h("slot", { key: '4423b19bae11878c48a5ae7d66bd332aa8d6015f' })));
     }
     static get is() { return "ui-button-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button-toggle-group/button-toggle-group.css

@@ -135,7 +135,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  background: var(--indicator-bg, #10b981);
+  background: var(--indicator-bg, var(--color-primary, #10b981));
   opacity: 0;
   pointer-events: none;
   transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), width 0.3s cubic-bezier(0.19, 1, 0.22, 1), height 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.2s ease;
@@ -177,6 +177,7 @@
   --button-padding: 8px 16px;
   --ui-button-height: auto;
   min-height: 44px;
+  color: var(--text-color, #64748b) !important;
 }
 
 .button-list-vertical ui-button {
@@ -219,26 +220,26 @@
 
 /* Selected Button Text & Icon Color Over Indicator */
 .button-list:not(.group-multi-select) ui-button[selected]::part(button) {
-  color: var(--indicator-text-color, #ffffff);
+  color: var(--indicator-text-color, #ffffff) !important;
   z-index: 5;
-  opacity: 1;
+  opacity: 1 !important;
 }
 
 /* Content colors for selected items (regardless of multi/single) */
 .ui-button-toggle-group .button-list ui-button[selected]::part(title),
 .ui-button-toggle-group .button-list ui-button[selected]::part(subtitle),
 .ui-button-toggle-group .button-list ui-button[selected]::part(icon) {
-  color: var(--indicator-text-color, #ffffff);
-  opacity: 1;
+  color: var(--indicator-text-color, #ffffff) !important;
+  opacity: 1 !important;
 }
 
 .group-multi-select .button-list ui-button[selected]::part(button) {
-  background: var(--indicator-bg, #10b981);
-  color: var(--indicator-text-color, #ffffff);
-  opacity: 1;
-  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 16, 185, 129), 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
-  border-radius: var(--indicator-radius, 30px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--indicator-bg, var(--color-primary, #10b981)) !important;
+  color: var(--indicator-text-color, #ffffff) !important;
+  opacity: 1 !important;
+  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 16, 185, 129), 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
+  border-radius: var(--indicator-radius, 30px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
   z-index: 5;
   transform: scale(0.96);
 }
@@ -356,8 +357,8 @@
   color: #1e293b;
 }
 .dropdown-option.dropdown-option-selected {
-  background: rgba(16, 185, 129, 0.1);
-  color: #10b981;
+  background: var(--color-primary-subtle, rgba(var(--color-primary-rgb, 16, 185, 129), 0.1));
+  color: var(--color-primary, #10b981);
 }
 .dropdown-option.dropdown-option-disabled {
   opacity: 0.5;
@@ -375,7 +376,7 @@
   flex: 1;
 }
 .dropdown-option .option-check {
-  color: #10b981;
+  color: var(--color-primary, #10b981);
   margin-left: auto;
   display: flex;
   align-items: center;
@@ -398,4 +399,150 @@
 .dropdown-search input:focus {
   border-color: #10b981;
   box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
+}
+
+/* Dark, Violet, Pink, Blue Theme Overrides */
+:host-context([data-theme=dark]) .button-group-label,
+:host([data-theme=dark]) .button-group-label,
+:host-context([data-theme=violet]) .button-group-label,
+:host([data-theme=violet]) .button-group-label,
+:host-context([data-theme=pink]) .button-group-label,
+:host([data-theme=pink]) .button-group-label,
+:host-context([data-theme=blue]) .button-group-label,
+:host([data-theme=blue]) .button-group-label {
+  --label-color: var(--label-color, #f1f5f9);
+}
+:host-context([data-theme=dark]) .button-list,
+:host([data-theme=dark]) .button-list,
+:host-context([data-theme=violet]) .button-list,
+:host([data-theme=violet]) .button-list,
+:host-context([data-theme=pink]) .button-list,
+:host([data-theme=pink]) .button-list,
+:host-context([data-theme=blue]) .button-list,
+:host([data-theme=blue]) .button-list {
+  --button-group-bg: var(--bg-secondary, #1e293b);
+  --border-color: var(--border-color, #334155);
+  --text-color: var(--text-secondary, #94a3b8);
+}
+:host-context([data-theme=dark]) .button-list ui-button:hover::part(button),
+:host([data-theme=dark]) .button-list ui-button:hover::part(button),
+:host-context([data-theme=violet]) .button-list ui-button:hover::part(button),
+:host([data-theme=violet]) .button-list ui-button:hover::part(button),
+:host-context([data-theme=pink]) .button-list ui-button:hover::part(button),
+:host([data-theme=pink]) .button-list ui-button:hover::part(button),
+:host-context([data-theme=blue]) .button-list ui-button:hover::part(button),
+:host([data-theme=blue]) .button-list ui-button:hover::part(button) {
+  background: rgba(255, 255, 255, 0.05) !important;
+}
+:host-context([data-theme=dark]) .dropdown-button,
+:host([data-theme=dark]) .dropdown-button,
+:host-context([data-theme=violet]) .dropdown-button,
+:host([data-theme=violet]) .dropdown-button,
+:host-context([data-theme=pink]) .dropdown-button,
+:host([data-theme=pink]) .dropdown-button,
+:host-context([data-theme=blue]) .dropdown-button,
+:host([data-theme=blue]) .dropdown-button {
+  --button-group-bg: var(--bg-secondary, #1e293b);
+  --border-color: var(--border-color, #334155);
+}
+:host-context([data-theme=dark]) .dropdown-menu,
+:host([data-theme=dark]) .dropdown-menu,
+:host-context([data-theme=violet]) .dropdown-menu,
+:host([data-theme=violet]) .dropdown-menu,
+:host-context([data-theme=pink]) .dropdown-menu,
+:host([data-theme=pink]) .dropdown-menu,
+:host-context([data-theme=blue]) .dropdown-menu,
+:host([data-theme=blue]) .dropdown-menu {
+  background: var(--bg-primary, #1e293b);
+  border-color: var(--border-color, #334155);
+}
+:host-context([data-theme=dark]) .dropdown-option,
+:host([data-theme=dark]) .dropdown-option,
+:host-context([data-theme=violet]) .dropdown-option,
+:host([data-theme=violet]) .dropdown-option,
+:host-context([data-theme=pink]) .dropdown-option,
+:host([data-theme=pink]) .dropdown-option,
+:host-context([data-theme=blue]) .dropdown-option,
+:host([data-theme=blue]) .dropdown-option {
+  color: var(--text-secondary, #cbd5e1);
+}
+:host-context([data-theme=dark]) .dropdown-option:hover,
+:host([data-theme=dark]) .dropdown-option:hover,
+:host-context([data-theme=violet]) .dropdown-option:hover,
+:host([data-theme=violet]) .dropdown-option:hover,
+:host-context([data-theme=pink]) .dropdown-option:hover,
+:host([data-theme=pink]) .dropdown-option:hover,
+:host-context([data-theme=blue]) .dropdown-option:hover,
+:host([data-theme=blue]) .dropdown-option:hover {
+  background: var(--bg-secondary, #334155);
+  color: var(--text-primary, #ffffff);
+}
+:host-context([data-theme=dark]) .dropdown-option.dropdown-option-selected,
+:host([data-theme=dark]) .dropdown-option.dropdown-option-selected,
+:host-context([data-theme=violet]) .dropdown-option.dropdown-option-selected,
+:host([data-theme=violet]) .dropdown-option.dropdown-option-selected,
+:host-context([data-theme=pink]) .dropdown-option.dropdown-option-selected,
+:host([data-theme=pink]) .dropdown-option.dropdown-option-selected,
+:host-context([data-theme=blue]) .dropdown-option.dropdown-option-selected,
+:host([data-theme=blue]) .dropdown-option.dropdown-option-selected {
+  background: rgba(var(--color-primary-rgb, 16, 185, 129), 0.15);
+  color: var(--color-primary, #10b981);
+}
+:host-context([data-theme=dark]) .dropdown-search input,
+:host([data-theme=dark]) .dropdown-search input,
+:host-context([data-theme=violet]) .dropdown-search input,
+:host([data-theme=violet]) .dropdown-search input,
+:host-context([data-theme=pink]) .dropdown-search input,
+:host([data-theme=pink]) .dropdown-search input,
+:host-context([data-theme=blue]) .dropdown-search input,
+:host([data-theme=blue]) .dropdown-search input {
+  background: var(--bg-primary, #1e293b);
+  border-color: var(--border-color, #334155);
+  color: var(--text-primary, #ffffff);
+}
+
+/* Green Theme Override */
+:host-context([data-theme=green]) .button-group-label,
+:host([data-theme=green]) .button-group-label {
+  --label-color: #f0fdf4;
+}
+:host-context([data-theme=green]) .button-list,
+:host([data-theme=green]) .button-list {
+  --button-group-bg: #064e3b;
+  --border-color: #166534;
+  --text-color: #a7f3d0;
+}
+:host-context([data-theme=green]) .button-list ui-button:hover::part(button),
+:host([data-theme=green]) .button-list ui-button:hover::part(button) {
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+:host-context([data-theme=green]) .dropdown-button,
+:host([data-theme=green]) .dropdown-button {
+  --button-group-bg: #064e3b;
+  --border-color: #166534;
+}
+:host-context([data-theme=green]) .dropdown-menu,
+:host([data-theme=green]) .dropdown-menu {
+  background: #064e3b;
+  border-color: #166534;
+}
+:host-context([data-theme=green]) .dropdown-option,
+:host([data-theme=green]) .dropdown-option {
+  color: #d1fae5;
+}
+:host-context([data-theme=green]) .dropdown-option:hover,
+:host([data-theme=green]) .dropdown-option:hover {
+  background: #166534;
+  color: #ffffff;
+}
+:host-context([data-theme=green]) .dropdown-option.dropdown-option-selected,
+:host([data-theme=green]) .dropdown-option.dropdown-option-selected {
+  background: rgba(255, 255, 255, 0.15);
+  color: #ffffff;
+}
+:host-context([data-theme=green]) .dropdown-search input,
+:host([data-theme=green]) .dropdown-search input {
+  background: #064e3b;
+  border-color: #166534;
+  color: #ffffff;
 }

package/dist/collection/components/button-toggle-group/button-toggle-group.js

@@ -449,12 +449,12 @@ export class ButtonToggleGroup {
             '--indicator-bg': indicatorBg,
             '--indicator-text-color': indicatorColor
         };
-        return (h("div", { key: '2a8531e523b28208a24139e5424eaa90be9c7073', class: containerClasses, role: this.multiSelect ? 'group' : 'radiogroup', "aria-label": this.label, tabIndex: 0, style: hostStyles, onMouseMove: (e) => this.handleMouseMove(e), onMouseLeave: () => this.updateIndicator() }, this.renderLabel(), this.batchActions && (h("div", { key: 'e30632897c55499283fe0e6886bd7a3e7f590bad', class: "batch-actions" }, h("ui-button", { key: '407de40948622de1cc9e14fcdae9d9ce06d8ec8c', variant: "ghost", onClick: this.selectAll, disabled: this.disabled, label: "Select All", size: "sm" }), h("ui-button", { key: '19699cfd346bb5d7fa4bab0f56f0b8b55333d148', variant: "ghost", onClick: this.clearAll, disabled: this.disabled, label: "Clear All", size: "sm" }), this.exportEnabled && h("ui-button", { key: 'a3e66305b6edca7fc19394bd7413af5f5801fc5f', variant: "ghost", onClick: this.exportSelection, label: "Export", size: "sm" }), this.importEnabled && h("ui-button", { key: 'de9512a60ee5bfdef71b409f17be20f0c1d575a8', variant: "ghost", onClick: this.importSelection, label: "Import", size: "sm" }))), this.mode === 'dropdown' ? (this.renderDropdownButton()) : (h("div", { class: buttonListClasses }, !this.multiSelect && h("div", { class: "selection-indicator", ref: el => this.selectionIndicatorRef = el }), filteredButtons.map((option, idx) => (h("ui-button", { key: option.value, value: option.value, label: option.label, icon: option.icon, iconPosition: option.icon ? this.iconPosition : 'none', iconOnly: this.iconOnly, name: this.name, selected: this.multiSelect ? this.selectedValues.includes(option.value) : this.value === option.value, disabled: this.disabled || option.disabled, readonly: this.readonly, loading: this.loading, size: this.size, variant: this.variant, description: option.description, "description-position": option.descriptionPosition, "full-width": this.fullWidth, reveal: this.reveal, "reveal-delay": this.revealDelay + (idx * this.revealStagger), tabIndex: this.focusIndex === idx ? 0 : -1, "aria-checked": this.multiSelect ? this.selectedValues.includes(option.value) : this.value === option.value, "aria-label": option.label || option.value, onFocus: () => this.handleFocus(idx), onBlur: this.handleBlur, onClick: (e) => {
+        return (h("div", { key: '5826e0db706109891e74fc0a4ee04e1df381687b', class: containerClasses, role: this.multiSelect ? 'group' : 'radiogroup', "aria-label": this.label, tabIndex: 0, style: hostStyles, onMouseMove: (e) => this.handleMouseMove(e), onMouseLeave: () => this.updateIndicator() }, this.renderLabel(), this.batchActions && (h("div", { key: 'fbf7ab8ce6a8548a53438eb613040a78f58bbaa4', class: "batch-actions" }, h("ui-button", { key: 'b4b34241bf9a24158472ad3714ca63d898493869', variant: "ghost", onClick: this.selectAll, disabled: this.disabled, label: "Select All", size: "sm" }), h("ui-button", { key: '5cf67b5f2a749f6ee2975be469f03ba0c7374906', variant: "ghost", onClick: this.clearAll, disabled: this.disabled, label: "Clear All", size: "sm" }), this.exportEnabled && h("ui-button", { key: '15d1e37dbccf82fb1f0097301c4de451e0931273', variant: "ghost", onClick: this.exportSelection, label: "Export", size: "sm" }), this.importEnabled && h("ui-button", { key: '3a82d6a1896cca92f0314c8b423c0a9df823eba6', variant: "ghost", onClick: this.importSelection, label: "Import", size: "sm" }))), this.mode === 'dropdown' ? (this.renderDropdownButton()) : (h("div", { class: buttonListClasses }, !this.multiSelect && h("div", { class: "selection-indicator", ref: el => this.selectionIndicatorRef = el }), filteredButtons.map((option, idx) => (h("ui-button", { key: option.value, value: option.value, label: option.label, icon: option.icon, iconPosition: option.icon ? this.iconPosition : 'none', iconOnly: this.iconOnly, name: this.name, selected: this.multiSelect ? this.selectedValues.includes(option.value) : this.value === option.value, disabled: this.disabled || option.disabled, readonly: this.readonly, loading: this.loading, size: this.size, variant: this.variant, description: option.description, "description-position": option.descriptionPosition, "full-width": this.fullWidth, reveal: this.reveal, "reveal-delay": this.revealDelay + (idx * this.revealStagger), tabIndex: this.focusIndex === idx ? 0 : -1, "aria-checked": this.multiSelect ? this.selectedValues.includes(option.value) : this.value === option.value, "aria-label": option.label || option.value, onFocus: () => this.handleFocus(idx), onBlur: this.handleBlur, onClick: (e) => {
                 e.stopPropagation();
                 if (!this.disabled && !option.disabled) {
                     this.handleButtonToggleChange({ detail: { value: option.value } });
                 }
-            }, shape: this.shape, iconLibrary: option.iconLibrary || this.library || this.iconLibrary }))))), this.renderHelperText(), this.analyticsEnabled && (h("div", { key: 'cefc7fae744e3cc636c5b014a53fbb3ac07051f2', class: "analytics-info" }, h("pre", { key: '00a1e53ab91350e9a5c7cc753e782f64a48e4f99' }, JSON.stringify(this.analytics, null, 2))))));
+            }, shape: this.shape, iconLibrary: option.iconLibrary || this.library || this.iconLibrary }))))), this.renderHelperText(), this.analyticsEnabled && (h("div", { key: '10b18efe0af543838aa8b835a931951d9b17ab78', class: "analytics-info" }, h("pre", { key: '1e7ac3662e57728b24e3ab14f4846c2d2b9c3991' }, JSON.stringify(this.analytics, null, 2))))));
     }
     // Premium and accessibility methods
     handleKeyDown = (e) => {