atomicuilibrary 0.0.1 → 0.1.3

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) => {

package/dist/collection/components/callout-banner/callout-banner.css

@@ -23,6 +23,72 @@
   border-width: 0 !important;
 }
 
+:host-context(.dark).variant-info .callout-inner,
+:host-context([data-theme=dark]).variant-info .callout-inner,
+:host-context([data-theme=violet]).variant-info .callout-inner,
+:host-context([data-theme=pink]).variant-info .callout-inner,
+:host-context([data-theme=blue]).variant-info .callout-inner,
+:host-context([data-theme=green]).variant-info .callout-inner,
+:host-context([data-theme=yellow]).variant-info .callout-inner {
+  --callout-bg: #1e293b;
+  --callout-text: #60a5fa;
+  --callout-border: rgba(59, 130, 246, 0.35);
+  --callout-icon-bg: rgba(59, 130, 246, 0.18);
+  --callout-shadow: rgba(59, 130, 246, 0.13);
+}
+:host-context(.dark).variant-success .callout-inner,
+:host-context([data-theme=dark]).variant-success .callout-inner,
+:host-context([data-theme=violet]).variant-success .callout-inner,
+:host-context([data-theme=pink]).variant-success .callout-inner,
+:host-context([data-theme=blue]).variant-success .callout-inner,
+:host-context([data-theme=green]).variant-success .callout-inner,
+:host-context([data-theme=yellow]).variant-success .callout-inner {
+  --callout-bg: #052e16;
+  --callout-text: #4ade80;
+  --callout-border: rgba(34, 197, 94, 0.35);
+  --callout-icon-bg: rgba(34, 197, 94, 0.18);
+  --callout-shadow: rgba(34, 197, 94, 0.13);
+}
+:host-context(.dark).variant-warning .callout-inner,
+:host-context([data-theme=dark]).variant-warning .callout-inner,
+:host-context([data-theme=violet]).variant-warning .callout-inner,
+:host-context([data-theme=pink]).variant-warning .callout-inner,
+:host-context([data-theme=blue]).variant-warning .callout-inner,
+:host-context([data-theme=green]).variant-warning .callout-inner,
+:host-context([data-theme=yellow]).variant-warning .callout-inner {
+  --callout-bg: #78350f;
+  --callout-text: #facc15;
+  --callout-border: rgba(251, 191, 36, 0.35);
+  --callout-icon-bg: rgba(251, 191, 36, 0.18);
+  --callout-shadow: rgba(251, 191, 36, 0.13);
+}
+:host-context(.dark).variant-danger .callout-inner,
+:host-context([data-theme=dark]).variant-danger .callout-inner,
+:host-context([data-theme=violet]).variant-danger .callout-inner,
+:host-context([data-theme=pink]).variant-danger .callout-inner,
+:host-context([data-theme=blue]).variant-danger .callout-inner,
+:host-context([data-theme=green]).variant-danger .callout-inner,
+:host-context([data-theme=yellow]).variant-danger .callout-inner {
+  --callout-bg: #7f1d1d;
+  --callout-text: #f87171;
+  --callout-border: rgba(239, 68, 68, 0.35);
+  --callout-icon-bg: rgba(239, 68, 68, 0.18);
+  --callout-shadow: rgba(239, 68, 68, 0.13);
+}
+:host-context(.dark).variant-neutral .callout-inner,
+:host-context([data-theme=dark]).variant-neutral .callout-inner,
+:host-context([data-theme=violet]).variant-neutral .callout-inner,
+:host-context([data-theme=pink]).variant-neutral .callout-inner,
+:host-context([data-theme=blue]).variant-neutral .callout-inner,
+:host-context([data-theme=green]).variant-neutral .callout-inner,
+:host-context([data-theme=yellow]).variant-neutral .callout-inner {
+  --callout-bg: #0f172a;
+  --callout-text: #f1f5f9;
+  --callout-border: rgba(148, 163, 184, 0.25);
+  --callout-icon-bg: rgba(148, 163, 184, 0.13);
+  --callout-shadow: rgba(148, 163, 184, 0.09);
+}
+
 @media (prefers-color-scheme: dark) {
   :host(.variant-info) .callout-inner {
     --callout-bg: #1e293b;
@@ -281,6 +347,15 @@ a[part=callout]:active {
   border: 1px solid var(--callout-border, transparent);
   box-shadow: 0 4px 16px var(--callout-shadow, rgba(15, 23, 42, 0.07));
   overflow: hidden;
+  --text-primary: var(--callout-text);
+  --text-secondary: var(--callout-text);
+  --text-muted: var(--callout-text);
+  --text-standard: var(--callout-text);
+  --bg-primary: var(--callout-bg);
+  --bg-secondary: var(--callout-icon-bg, rgba(255, 255, 255, 0.5));
+  --border-default: var(--callout-border, transparent);
+  --border-subtle: var(--callout-border, transparent);
+  --border-strong: var(--callout-border, transparent);
 }
 
 /* ── Compact layout ───────────────────────── */

package/dist/collection/components/callout-banner/callout-banner.js

@@ -379,7 +379,7 @@ export class UiCalloutBanner {
                 "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",