atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/components/accordion/accordion.css

@@ -26,7 +26,7 @@
 /* Accordion Container */
 .accordion-container {
   width: 100%;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--accordion-border-color, #e5e7eb);
   border-radius: 8px;
   overflow: hidden;
   background-color: var(--accordion-bg, white);
@@ -38,7 +38,7 @@
   display: flex;
   gap: 8px;
   padding: 16px 20px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--accordion-border-color, #e5e7eb);
   background-color: #f9fafb;
   flex-wrap: wrap;
 }
@@ -85,7 +85,7 @@
 
 /* Accordion Item */
 .accordion-item {
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--accordion-border-color, #e5e7eb);
 }
 
 .accordion-item:last-child {
@@ -280,7 +280,8 @@
   align-items: center;
   justify-content: center;
   opacity: 0.7;
-  pointer-events: none; /* Let the click through to the button */
+  pointer-events: none;
+  /* Let the click through to the button */
 }
 
 .accordion-header:hover .accordion-arrow {
@@ -303,7 +304,7 @@
   max-height: 0;
   opacity: 0;
   transition: max-height var(--animation-duration, 300ms) var(--animation-timing, ease), opacity var(--animation-duration, 300ms) var(--animation-timing, ease);
-  background-color: #f9fafb;
+  background-color: var(--accordion-content-bg, #f9fafb);
   /* Kinetic Physics Variants */
 }
 .accordion-content.accordion-physics-bouncy {
@@ -773,9 +774,10 @@
   background: transparent;
 }
 .accordion-headline .accordion-content-inner {
-  padding: 0 0 40px 0;
+  padding: 24px 0 40px 0;
+  border-top: 1px dashed var(--border-default, #e5e7eb);
   font-size: var(--hl-subtitle-size, 16px);
-  color: #4b5563;
+  color: var(--text-secondary, #4b5563);
   line-height: 1.6;
   text-align: left;
 }
@@ -1456,7 +1458,7 @@
   position: absolute;
   font-size: 8px;
   font-weight: 700;
-  color: #1f2937;
+  color: var(--progress-text);
   letter-spacing: -0.02em;
 }
 
@@ -2388,4 +2390,268 @@
   color: #3b82f6;
 }
 
-/* ── End Sovereign Finale ─────────────────────────────────────────────── */
+/* ── End Sovereign Finale ─────────────────────────────────────────────── */
+/* ── Dark Mode ─────────────────────────────────────────────── */
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Main Container */
+}
+:host-context(.dark) .accordion-container,
+:host-context([data-theme=dark]) .accordion-container,
+:host(.dark) .accordion-container,
+:host([data-theme=dark]) .accordion-container {
+  background-color: var(--accordion-bg, #1e293b);
+  border-color: var(--accordion-border-color, #334155);
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Search Input Wrapper */
+}
+:host-context(.dark) .accordion-search,
+:host-context([data-theme=dark]) .accordion-search,
+:host(.dark) .accordion-search,
+:host([data-theme=dark]) .accordion-search {
+  background-color: #0f172a;
+  border-bottom-color: #334155;
+}
+:host-context(.dark) .accordion-search-clear:hover,
+:host-context([data-theme=dark]) .accordion-search-clear:hover,
+:host(.dark) .accordion-search-clear:hover,
+:host([data-theme=dark]) .accordion-search-clear:hover {
+  background-color: #334155;
+  color: #f8fafc;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Indicators */
+}
+:host-context(.dark) .accordion-indicators,
+:host-context([data-theme=dark]) .accordion-indicators,
+:host(.dark) .accordion-indicators,
+:host([data-theme=dark]) .accordion-indicators {
+  background-color: #0f172a;
+  border-color: #334155;
+}
+:host-context(.dark) .accordion-indicator,
+:host-context([data-theme=dark]) .accordion-indicator,
+:host(.dark) .accordion-indicator,
+:host([data-theme=dark]) .accordion-indicator {
+  background-color: #1e293b;
+  border-color: #475569;
+  color: #94a3b8;
+}
+:host-context(.dark) .accordion-indicator:hover:not(.accordion-indicator-disabled),
+:host-context([data-theme=dark]) .accordion-indicator:hover:not(.accordion-indicator-disabled),
+:host(.dark) .accordion-indicator:hover:not(.accordion-indicator-disabled),
+:host([data-theme=dark]) .accordion-indicator:hover:not(.accordion-indicator-disabled) {
+  background-color: rgba(16, 185, 129, 0.15);
+}
+:host-context(.dark) .accordion-indicator-active,
+:host-context([data-theme=dark]) .accordion-indicator-active,
+:host(.dark) .accordion-indicator-active,
+:host([data-theme=dark]) .accordion-indicator-active {
+  background-color: rgba(16, 185, 129, 0.15);
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Items & Headers */
+}
+:host-context(.dark) .accordion-item,
+:host-context([data-theme=dark]) .accordion-item,
+:host(.dark) .accordion-item,
+:host([data-theme=dark]) .accordion-item {
+  border-color: var(--accordion-border-color, #334155);
+}
+:host-context(.dark) .accordion-header,
+:host-context([data-theme=dark]) .accordion-header,
+:host(.dark) .accordion-header,
+:host([data-theme=dark]) .accordion-header {
+  color: #f8fafc;
+}
+:host-context(.dark) .accordion-item-open .accordion-header,
+:host-context([data-theme=dark]) .accordion-item-open .accordion-header,
+:host(.dark) .accordion-item-open .accordion-header,
+:host([data-theme=dark]) .accordion-item-open .accordion-header {
+  background-color: rgba(16, 185, 129, 0.1);
+}
+:host-context(.dark) .accordion-header:active:not(.accordion-header-disabled),
+:host-context([data-theme=dark]) .accordion-header:active:not(.accordion-header-disabled),
+:host(.dark) .accordion-header:active:not(.accordion-header-disabled),
+:host([data-theme=dark]) .accordion-header:active:not(.accordion-header-disabled) {
+  background-color: #334155;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Typography */
+}
+:host-context(.dark) .accordion-title,
+:host-context([data-theme=dark]) .accordion-title,
+:host(.dark) .accordion-title,
+:host([data-theme=dark]) .accordion-title {
+  color: #f8fafc;
+}
+:host-context(.dark) .accordion-subtitle,
+:host-context([data-theme=dark]) .accordion-subtitle,
+:host(.dark) .accordion-subtitle,
+:host([data-theme=dark]) .accordion-subtitle {
+  color: #94a3b8;
+}
+:host-context(.dark) .accordion-icon,
+:host-context([data-theme=dark]) .accordion-icon,
+:host(.dark) .accordion-icon,
+:host([data-theme=dark]) .accordion-icon {
+  color: #94a3b8;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Content */
+}
+:host-context(.dark) .accordion-content,
+:host-context([data-theme=dark]) .accordion-content,
+:host(.dark) .accordion-content,
+:host([data-theme=dark]) .accordion-content {
+  background-color: var(--accordion-content-bg, #0f172a);
+}
+:host-context(.dark) .accordion-content-inner,
+:host-context([data-theme=dark]) .accordion-content-inner,
+:host(.dark) .accordion-content-inner,
+:host([data-theme=dark]) .accordion-content-inner {
+  color: #cbd5e1;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Variant Specific Overrides */
+}
+:host-context(.dark) .accordion-container.accordion-splitted .accordion-item,
+:host-context([data-theme=dark]) .accordion-container.accordion-splitted .accordion-item,
+:host(.dark) .accordion-container.accordion-splitted .accordion-item,
+:host([data-theme=dark]) .accordion-container.accordion-splitted .accordion-item {
+  background: #1e293b;
+  border-color: #334155;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+:host-context(.dark) .accordion-container.accordion-card-list .accordion-item,
+:host-context(.dark) .accordion-container.accordion-card .accordion-item,
+:host-context([data-theme=dark]) .accordion-container.accordion-card-list .accordion-item,
+:host-context([data-theme=dark]) .accordion-container.accordion-card .accordion-item,
+:host(.dark) .accordion-container.accordion-card-list .accordion-item,
+:host(.dark) .accordion-container.accordion-card .accordion-item,
+:host([data-theme=dark]) .accordion-container.accordion-card-list .accordion-item,
+:host([data-theme=dark]) .accordion-container.accordion-card .accordion-item {
+  background: #1e293b;
+  border-color: #334155;
+}
+:host-context(.dark) .accordion-container.accordion-card-list .accordion-title,
+:host-context(.dark) .accordion-container.accordion-card .accordion-title,
+:host-context([data-theme=dark]) .accordion-container.accordion-card-list .accordion-title,
+:host-context([data-theme=dark]) .accordion-container.accordion-card .accordion-title,
+:host(.dark) .accordion-container.accordion-card-list .accordion-title,
+:host(.dark) .accordion-container.accordion-card .accordion-title,
+:host([data-theme=dark]) .accordion-container.accordion-card-list .accordion-title,
+:host([data-theme=dark]) .accordion-container.accordion-card .accordion-title {
+  color: #f8fafc;
+}
+:host-context(.dark) .accordion-container.accordion-card-list .accordion-subtitle,
+:host-context(.dark) .accordion-container.accordion-card .accordion-subtitle,
+:host-context([data-theme=dark]) .accordion-container.accordion-card-list .accordion-subtitle,
+:host-context([data-theme=dark]) .accordion-container.accordion-card .accordion-subtitle,
+:host(.dark) .accordion-container.accordion-card-list .accordion-subtitle,
+:host(.dark) .accordion-container.accordion-card .accordion-subtitle,
+:host([data-theme=dark]) .accordion-container.accordion-card-list .accordion-subtitle,
+:host([data-theme=dark]) .accordion-container.accordion-card .accordion-subtitle {
+  color: #94a3b8;
+}
+:host-context(.dark) .accordion-container.accordion-card-list .accordion-content,
+:host-context(.dark) .accordion-container.accordion-card .accordion-content,
+:host-context([data-theme=dark]) .accordion-container.accordion-card-list .accordion-content,
+:host-context([data-theme=dark]) .accordion-container.accordion-card .accordion-content,
+:host(.dark) .accordion-container.accordion-card-list .accordion-content,
+:host(.dark) .accordion-container.accordion-card .accordion-content,
+:host([data-theme=dark]) .accordion-container.accordion-card-list .accordion-content,
+:host([data-theme=dark]) .accordion-container.accordion-card .accordion-content {
+  background: #0f172a;
+  border-top-color: #334155;
+}
+:host-context(.dark) .accordion-container.accordion-headline .accordion-header,
+:host-context([data-theme=dark]) .accordion-container.accordion-headline .accordion-header,
+:host(.dark) .accordion-container.accordion-headline .accordion-header,
+:host([data-theme=dark]) .accordion-container.accordion-headline .accordion-header {
+  color: #f8fafc;
+}
+:host-context(.dark) .accordion-container.accordion-headline .accordion-title,
+:host-context([data-theme=dark]) .accordion-container.accordion-headline .accordion-title,
+:host(.dark) .accordion-container.accordion-headline .accordion-title,
+:host([data-theme=dark]) .accordion-container.accordion-headline .accordion-title {
+  color: #f8fafc !important;
+}
+:host-context(.dark) .accordion-container.accordion-headline .accordion-subtitle,
+:host-context([data-theme=dark]) .accordion-container.accordion-headline .accordion-subtitle,
+:host(.dark) .accordion-container.accordion-headline .accordion-subtitle,
+:host([data-theme=dark]) .accordion-container.accordion-headline .accordion-subtitle {
+  color: #94a3b8 !important;
+}
+:host-context(.dark) .accordion-container.accordion-iconic .accordion-item,
+:host-context([data-theme=dark]) .accordion-container.accordion-iconic .accordion-item,
+:host(.dark) .accordion-container.accordion-iconic .accordion-item,
+:host([data-theme=dark]) .accordion-container.accordion-iconic .accordion-item {
+  background: #1e293b;
+  border-color: #334155;
+}
+:host-context(.dark) .accordion-container.accordion-iconic .accordion-title,
+:host-context([data-theme=dark]) .accordion-container.accordion-iconic .accordion-title,
+:host(.dark) .accordion-container.accordion-iconic .accordion-title,
+:host([data-theme=dark]) .accordion-container.accordion-iconic .accordion-title {
+  color: #f8fafc;
+}
+:host-context(.dark) .accordion-container.accordion-iconic .accordion-subtitle,
+:host-context([data-theme=dark]) .accordion-container.accordion-iconic .accordion-subtitle,
+:host(.dark) .accordion-container.accordion-iconic .accordion-subtitle,
+:host([data-theme=dark]) .accordion-container.accordion-iconic .accordion-subtitle {
+  color: #94a3b8;
+}
+:host-context(.dark) .accordion-container.accordion-iconic .accordion-content,
+:host-context([data-theme=dark]) .accordion-container.accordion-iconic .accordion-content,
+:host(.dark) .accordion-container.accordion-iconic .accordion-content,
+:host([data-theme=dark]) .accordion-container.accordion-iconic .accordion-content {
+  background: #0f172a;
+  border-top-color: #334155;
+}
+:host-context(.dark) .accordion-container.accordion-minimal .accordion-header,
+:host-context([data-theme=dark]) .accordion-container.accordion-minimal .accordion-header,
+:host(.dark) .accordion-container.accordion-minimal .accordion-header,
+:host([data-theme=dark]) .accordion-container.accordion-minimal .accordion-header {
+  color: #f8fafc;
+}
+:host-context(.dark) .accordion-container.accordion-minimal .accordion-title,
+:host-context([data-theme=dark]) .accordion-container.accordion-minimal .accordion-title,
+:host(.dark) .accordion-container.accordion-minimal .accordion-title,
+:host([data-theme=dark]) .accordion-container.accordion-minimal .accordion-title {
+  color: #f8fafc;
+}
+:host-context(.dark) .accordion-container.accordion-minimal .accordion-arrow-wrapper,
+:host-context([data-theme=dark]) .accordion-container.accordion-minimal .accordion-arrow-wrapper,
+:host(.dark) .accordion-container.accordion-minimal .accordion-arrow-wrapper,
+:host([data-theme=dark]) .accordion-container.accordion-minimal .accordion-arrow-wrapper {
+  background-color: #334155;
+  border-color: #475569;
+}
+:host-context(.dark) .accordion-container.accordion-minimal .accordion-item-open .accordion-arrow-wrapper,
+:host-context([data-theme=dark]) .accordion-container.accordion-minimal .accordion-item-open .accordion-arrow-wrapper,
+:host(.dark) .accordion-container.accordion-minimal .accordion-item-open .accordion-arrow-wrapper,
+:host([data-theme=dark]) .accordion-container.accordion-minimal .accordion-item-open .accordion-arrow-wrapper {
+  background-color: #1e293b;
+}

package/dist/collection/components/accordion/accordion.js

@@ -33,7 +33,7 @@ export class Accordion {
     /**
      * Background color of the accordion
      */
-    backgroundColor = 'white';
+    backgroundColor = '';
     /**
      * Enable haptic feedback on interaction
      */
@@ -1158,10 +1158,11 @@ export class Accordion {
             return this.enableSearch && this.searchQuery ? this.filteredItems : result;
         };
         const itemsToRender = getFinalItems(this.parsedItems);
-        const containerStyles = {
-            '--accordion-bg': this.backgroundColor || 'white',
-            backgroundColor: 'var(--accordion-bg, #ffffff)'
-        };
+        const containerStyles = {};
+        if (this.backgroundColor) {
+            containerStyles['--accordion-bg'] = this.backgroundColor;
+            containerStyles.backgroundColor = `var(--accordion-bg)`;
+        }
         return (h(Host, { class: {
                 'accordion-host': true,
                 'is-open': this.openItems.length > 0,
@@ -1368,7 +1369,7 @@ export class Accordion {
                 "setter": false,
                 "reflect": false,
                 "attribute": "background-color",
-                "defaultValue": "'white'"
+                "defaultValue": "''"
             },
             "haptic": {
                 "type": "boolean",

package/dist/collection/components/advanced-data-table/advanced-data-table.css

@@ -37,25 +37,25 @@
 :host([color=success]),
 .table-color-success {
   --table-primary: var(--color-success, #10b981);
-  --table-primary-rgb: var(--color-primary-rgb);
+  --table-primary-rgb: var(--color-success-rgb);
 }
 
 :host([color=danger]),
 .table-color-danger {
   --table-primary: var(--color-danger, #ef4444);
-  --table-primary-rgb: var(--color-primary-rgb);
+  --table-primary-rgb: var(--color-danger-rgb);
 }
 
 :host([color=warning]),
 .table-color-warning {
   --table-primary: var(--color-warning, #f59e0b);
-  --table-primary-rgb: var(--color-primary-rgb);
+  --table-primary-rgb: var(--color-warning-rgb);
 }
 
 :host([color=info]),
 .table-color-info {
   --table-primary: var(--color-primary, #0ea5e9);
-  --table-primary-rgb: var(--color-primary-rgb);
+  --table-primary-rgb: var(--color-info-rgb);
 }
 
 /* Enterprise tokens are now global */
@@ -70,7 +70,7 @@
   --table-text-secondary-rgb: 100, 116, 139;
   --table-hover: var(--bg-primary, #f1f5f9);
   --table-primary: var(--color-primary-hover, #2563eb);
-  --table-primary-rgb: 37, 99, 235;
+  --table-primary-rgb: var(--color-primary-rgb, 37, 99, 235);
   --table-selected: rgba(var(--table-primary-rgb), 0.1);
   --table-shadow: rgba(0, 0, 0, 0.05);
   --table-striped-bg: rgba(0, 0, 0, 0.02);

package/dist/collection/components/advanced-data-table/advanced-data-table.js

@@ -2873,7 +2873,7 @@ export class AdvancedDataTable {
                 "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",
@@ -4293,7 +4293,7 @@ export class AdvancedDataTable {
                 "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/anchor/anchor.css

@@ -213,6 +213,7 @@
 }
 
 .anchor--vertical.anchor--right {
+  top: 80px;
   right: 0;
 }
 

package/dist/collection/components/animate-on-scroll/animate-on-scroll.js

@@ -252,7 +252,7 @@ export class AnimateOnScroll {
         const distance = typeof this.distance === 'string' ? this.distance : '50px';
         const origin = typeof this.transformOrigin === 'string' ? this.transformOrigin : 'center';
         const easing = typeof this.easing === 'string' ? this.easing : 'ease';
-        return (h(Host, { key: '47a9d6b0f874f646bf3ba94faf32fbf958ceb177', class: hostClass }, h("div", { key: '4b44f83641692c3bdc3e4dad2ad7c3a25dfe5ac3', class: "animate-container", ref: el => this.contentEl = el, style: {
+        return (h(Host, { key: '9da237e4b3bfbc89aa29a71e2ed4787caba7b6cd', class: hostClass }, h("div", { key: '1970eca1813aa9361c9bf721e7398559529a1c8d', class: "animate-container", ref: el => this.contentEl = el, style: {
                 '--animation-duration': `${this.duration}ms`,
                 '--animation-delay': `${this.delay}ms`,
                 '--animation-easing': easing,
@@ -262,7 +262,7 @@ export class AnimateOnScroll {
                 '--transform-origin': origin,
                 'perspective': perspective || 'none',
                 'transform-origin': origin
-            } }, h("slot", { key: '49dffe8ae575f94d9f94b9b0c076f88751e149c4' }))));
+            } }, h("slot", { key: 'fd963246d2c5667d5467374576416e7ab98134e9' }))));
     }
     static get is() { return "ui-animate-on-scroll"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/aside-panel/aside-panel.css

@@ -150,7 +150,7 @@
   align-items: center;
   padding: 12px 16px;
   background: rgba(0, 0, 0, 0.02);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.05));
 }
 .panel-header-toolbar .toolbar-left,
 .panel-header-toolbar .toolbar-right {
@@ -422,7 +422,7 @@
 @media (prefers-color-scheme: dark) {
   :host {
     --aside-panel-bg: var(--bg-primary, #1e293b);
-    --aside-panel-text: var(--bg-secondary, #f1f5f9);
+    --aside-panel-text: var(--text-primary, #f1f5f9);
   }
   .panel-header,
   .panel-footer {

package/dist/collection/components/aside-panel/aside-panel.js

@@ -158,10 +158,7 @@ export class AsidePanel {
      * Alignment along the secondary axis for 'floating' variant
      */
     floatingAlign = 'stretch';
-    /**
-     * Background color of the panel
-     */
-    backgroundColor = 'white';
+    backgroundColor = '';
     /**
      * Event emitted when the panel is closed
      */
@@ -581,13 +578,15 @@ export class AsidePanel {
         }
         styles['--aside-center-transform'] = centerTransform.trim();
         styles['--aside-transition-duration'] = this.transitionDuration;
-        styles['--aside-bg'] = this.backgroundColor || 'white';
-        styles.backgroundColor = 'var(--aside-bg, #ffffff)';
+        if (this.backgroundColor) {
+            styles['--aside-bg'] = this.backgroundColor;
+            styles.backgroundColor = 'var(--aside-bg)';
+        }
         return styles;
     }
     render() {
         const activeTheme = this.theme !== 'default' ? this.theme : this.variant;
-        return (h(Host, { key: '6fe78ffb52aa0a9d3c2659ab49da7bbb8220cd73', class: {
+        return (h(Host, { key: '92505a0012eb970501248a911a9c7bcfda231eb6', class: {
                 'aside-container': true,
                 'open': this.open,
                 'mini': this.mini,
@@ -598,7 +597,7 @@ export class AsidePanel {
                 [`animation-${this.animationType}`]: true,
                 'is-pinned': this.pinned,
                 'rtl': this.rtl
-            }, style: this.hostStyle(), role: "complementary", "aria-expanded": this.open.toString(), "aria-hidden": (!this.open).toString() }, this.showOverlay && !this.mini && (h("div", { key: 'b377c132e1a18b11fe14fea92fb42edea15e7931', class: { 'overlay': true, 'visible': this.open }, style: { backdropFilter: this.backdropBlur !== '0' ? `blur(${this.backdropBlur})` : 'none' }, onClick: this.handleOverlayClick })), h("div", { key: '64557685915ff59acf459637b07eb27a2cdd7960', class: {
+            }, style: this.hostStyle(), role: "complementary", "aria-expanded": this.open.toString(), "aria-hidden": (!this.open).toString() }, this.showOverlay && !this.mini && (h("div", { key: 'ddb0507a0fba0283f0fe2e1259cda57feacdc6c8', class: { 'overlay': true, 'visible': this.open }, style: { backdropFilter: this.backdropBlur !== '0' ? `blur(${this.backdropBlur})` : 'none' }, onClick: this.handleOverlayClick })), h("div", { key: '1ba2ecd1a7fa2ffea0861057282501507613813c', class: {
                 'panel': true,
                 [`panel-${this.direction}`]: true,
                 'open': this.open,
@@ -606,7 +605,7 @@ export class AsidePanel {
                 'resizing': this.isResizing,
                 'loading': this.loading,
                 'parallax-active': this.enableParallax
-            }, style: this.hostStyle(), onMouseMove: this.handleParallax, onMouseLeave: this.resetParallax }, this.loading && (h("div", { key: '0944112418e5cff5052444dfe972b9097c8a87cc', class: "loading-overlay" }, h("div", { key: 'd78691ea1bd174e74431b7f1e937f5c3a15a7480', class: "spinner" }))), this.resizable && !this.mini && (h("div", { key: 'b6c3327d7f2b2b390e7034f99f26baa9fb5a8e78', class: `resize-handle resize-handle-${this.direction}`, style: this.resizeHandleColor ? { backgroundColor: this.resizeHandleColor } : {}, onMouseDown: this.handleResizeStart }, this.showResizeIndicator && (h("div", { key: '7d0446ab14ce40d3de648647d10b825c4e17255b', class: "resize-indicator" }, h("span", { key: 'fd5a84994e2e84d3934404fe01d990b0741cf69d' }), h("span", { key: '3f5bb3beb076185b6b375485c2eda33a86ce1af4' }), h("span", { key: '1e2fc6fe5129ee60dc91816fb0aecb367a0f5d48' }))))), h("div", { key: 'd5f732ce0f5c0263a47821107c68fb42491423ac', class: "panel-header-toolbar" }, h("div", { key: 'f7c0483a59e5ca7b0e1a1b63f564f0662f92fbf4', class: "toolbar-left" }, this.mini ? (h("ui-button", { variant: "ghost", size: "sm", icon: "chevron-right", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Expand", onClick: () => this.toggleMini() })) : (h("div", { style: { display: 'flex', gap: '4px' } }, h("ui-button", { variant: "ghost", size: "sm", icon: "chevron-left", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Collapse to Mini", onClick: () => this.toggleMini() }), !this.mini && (h("ui-button", { variant: "ghost", size: "sm", icon: this.maximized ? 'minimize' : 'maximize', iconLibrary: "lucide", iconSize: "14px", ariaLabel: this.maximized ? 'Restore' : 'Maximize', onClick: () => this.toggleMaximize() })))), this.enableVoiceControl && (h("ui-button", { key: '779b43eae11da432d5c6f093d8b18bbbb6555d90', variant: "ghost", size: "sm", icon: "mic", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Voice Interaction", class: this.isListening ? 'active' : '', onClick: () => this.initVoice() }))), h("div", { key: 'abb834e57587a11fc4cee2868cfdff72989aafa6', class: "toolbar-right" }, this.showActions && (h("ui-button", { key: '727b404a4d895d83802bf906f77cbf78b79ed4df', id: "aside-actions-trigger", variant: "ghost", size: "sm", icon: "ellipsis-vertical", iconLibrary: "lucide", iconSize: "16px", ariaLabel: "More Actions", onClick: () => this.asideActionClick.emit() })), this.showActions && (h("ui-context-menu", { key: 'b79ede6b5aafe1ab1bfe2dd48b1392aa261c6149', items: this.actionItems, target: "#aside-actions-trigger", openOn: "click", placement: "bottom", onItemSelect: (ev) => this.asideActionClick.emit(ev.detail) })), this.pinned && h("ui-icon", { key: '2c959558d6431ce998868df3f11d0a46e708a8c6', name: "pin", library: "lucide", size: "14px", class: "pin-status" }), this.closeable && !this.pinned && (h("ui-button", { key: '3e09ac4d9d907ffa6479774ae1fe8af67dd48173', variant: "ghost", size: "sm", icon: "x", iconLibrary: "lucide", iconSize: "16px", ariaLabel: "Close panel", onClick: this.handleClose })))), h("div", { key: '88b297a05ea5c189d4301b5fa6ae6da924234f9d', class: "panel-header" }, h("div", { key: '769c42bf0fafef4cd5dd67e19a8c834edd47c212', class: "header-main" }, h("slot", { key: 'b2332bf17c6ad844421beba7842d1195c9b23dd2', name: "header" }), this.badge && h("span", { key: '51ec6d287c748533e817a9d1ac6d5f08ef2a723e', class: "header-badge" }, this.badge)), this.progress > -1 && (h("div", { key: '20cef73dab1865d28bc0c116b55d1fdfed6fb315', class: "header-progress" }, h("div", { key: '7f5ae92599c2625da1e29fb1b1e1d890a7de61d3', class: "progress-bar", style: { width: `${Math.min(100, Math.max(0, this.progress))}%` } })))), h("div", { key: 'd38f06820140b669ab0db1160adbd39718cf1d85', class: "panel-content" }, h("slot", { key: 'fd4171defde8576a75373d1f68f47b816fb7f638', name: "content" }), h("slot", { key: 'ed33565d953da868b3039684239aae6029582e2f' })), !this.mini && (h("div", { key: 'c58ffbd97eceba87ff9f85d1782cb357b5e87229', class: "panel-footer" }, h("slot", { key: '5ddc80b5ca138471895d9f86733c524094f4da8d', name: "footer" }))))));
+            }, style: this.hostStyle(), onMouseMove: this.handleParallax, onMouseLeave: this.resetParallax }, this.loading && (h("div", { key: 'fce1a24c4217fb33fcfde8ad8a46da7a24706b37', class: "loading-overlay" }, h("div", { key: '2b651b1637c82f7f63c6c116947cb5abdbb6a181', class: "spinner" }))), this.resizable && !this.mini && (h("div", { key: '4d568b58f391c50e25fc9afe79c19eaef15df314', class: `resize-handle resize-handle-${this.direction}`, style: this.resizeHandleColor ? { backgroundColor: this.resizeHandleColor } : {}, onMouseDown: this.handleResizeStart }, this.showResizeIndicator && (h("div", { key: 'de809bbc0d9dbe17fbe0677141236524c775468f', class: "resize-indicator" }, h("span", { key: 'aba11983437a5e90e4d28d056d85a00643c643c4' }), h("span", { key: '492e82796d84a56d19e4591573665979c9e067e4' }), h("span", { key: '9c36e8c6f0b13a81011c951ef6750be682964d29' }))))), h("div", { key: '0cee1aabbb0c6c4a9ad77b2597f6e8e5ad7dd9a6', class: "panel-header-toolbar" }, h("div", { key: '07843cc4dc362486386bec324c0ffeeb2ef235bf', class: "toolbar-left" }, this.mini ? (h("ui-button", { variant: "ghost", size: "sm", icon: "chevron-right", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Expand", onClick: () => this.toggleMini() })) : (h("div", { style: { display: 'flex', gap: '4px' } }, h("ui-button", { variant: "ghost", size: "sm", icon: "chevron-left", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Collapse to Mini", onClick: () => this.toggleMini() }), !this.mini && (h("ui-button", { variant: "ghost", size: "sm", icon: this.maximized ? 'minimize' : 'maximize', iconLibrary: "lucide", iconSize: "14px", ariaLabel: this.maximized ? 'Restore' : 'Maximize', onClick: () => this.toggleMaximize() })))), this.enableVoiceControl && (h("ui-button", { key: '13d2146cbbbdb4a70ae25e42084cda4037cc39cf', variant: "ghost", size: "sm", icon: "mic", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Voice Interaction", class: this.isListening ? 'active' : '', onClick: () => this.initVoice() }))), h("div", { key: 'fe299acfd95ca4bca3be49069290b55880dcbefc', class: "toolbar-right" }, this.showActions && (h("ui-button", { key: 'a352376571490fc6acccfffd438e1b1b0a709ea7', id: "aside-actions-trigger", variant: "ghost", size: "sm", icon: "ellipsis-vertical", iconLibrary: "lucide", iconSize: "16px", ariaLabel: "More Actions", onClick: () => this.asideActionClick.emit() })), this.showActions && (h("ui-context-menu", { key: 'ae3c9106f26433d2b131f7700e01170b794082d8', items: this.actionItems, target: "#aside-actions-trigger", openOn: "click", placement: "bottom", onItemSelect: (ev) => this.asideActionClick.emit(ev.detail) })), this.pinned && h("ui-icon", { key: '7f498e3efac649f652572eaa8ccefe14f6a2f527', name: "pin", library: "lucide", size: "14px", class: "pin-status" }), this.closeable && !this.pinned && (h("ui-button", { key: 'a35be0a257a261106ee9c015f30b0508bb0eb6e7', variant: "ghost", size: "sm", icon: "x", iconLibrary: "lucide", iconSize: "16px", ariaLabel: "Close panel", onClick: this.handleClose })))), h("div", { key: '3d7ebe656bfead3da872c415985fe098f4e673e5', class: "panel-header" }, h("div", { key: '0e74f91d71ccfd38fdf7449674cdf3f0eb02c3d1', class: "header-main" }, h("slot", { key: '0e1d8d13735d4d5ff965752c4bdf5520a93ce978', name: "header" }), this.badge && h("span", { key: 'f6299260ad5dc6033b9ba6bccfd3d43742d8e875', class: "header-badge" }, this.badge)), this.progress > -1 && (h("div", { key: '2b73fba206a5edd1624ffbfecd13cfb71b8ea9b3', class: "header-progress" }, h("div", { key: '22eaaae3fcdfa13fd8b094566c96aa7af067d343', class: "progress-bar", style: { width: `${Math.min(100, Math.max(0, this.progress))}%` } })))), h("div", { key: 'c68a4963fcaa2530f6953b9fa0b0317cab9ee62a', class: "panel-content" }, h("slot", { key: '06394ff635128b6d8c0ce737e5a3dac3d4ee609c', name: "content" }), h("slot", { key: 'e9e3afd0e7e4f5364cd44fcc665e9e241df38081' })), !this.mini && (h("div", { key: 'f6ed2e0ad0f0c598008a80fcd3d3079469f4cd95', class: "panel-footer" }, h("slot", { key: '72a1bb737d4a0db301aaf9a6b72a643b94066a3c', name: "footer" }))))));
     }
     static get is() { return "ui-aside-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -1458,13 +1457,13 @@ export class AsidePanel {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Background color of the panel"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "background-color",
-                "defaultValue": "'white'"
+                "defaultValue": "''"
             }
         };
     }

package/dist/collection/components/avatar/avatar.css

@@ -158,10 +158,10 @@
 
 .avatar-status {
   position: absolute;
-  width: 10px;
-  height: 10px;
+  width: var(--avatar-status-size, 10px);
+  height: var(--avatar-status-size, 10px);
   border-radius: 50%;
-  border: 2px solid var(--border-subtle, #fff);
+  border: var(--avatar-status-border-width, 2px) solid var(--border-subtle, #fff);
   z-index: 5;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
@@ -191,7 +191,7 @@
 .avatar-status.avatar-status-offline::after {
   content: "";
   position: absolute;
-  inset: 2px;
+  inset: var(--avatar-status-offline-inset, 2px);
   border-radius: 50%;
   background: var(--bg-primary, #ffffff);
   z-index: -1;
@@ -209,8 +209,8 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 6px;
-  height: 1.5px;
+  width: var(--avatar-status-busy-width, 6px);
+  height: var(--avatar-status-busy-height, 1.5px);
   background: var(--bg-primary, #ffffff);
   transform: translate(-50%, -50%);
 }