atomicuilibrary 0.0.1 → 0.1.3

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
      */
@@ -67,11 +67,19 @@ export class Accordion {
      */
     selectionPosition = 'left';
     /**
-    * Accordion variant: 'default' | 'bordered' | 'splitted' | 'light' | 'shadow' | 'card' | 'card-list' | 'headline'
+    * Accordion variant: 'default' | 'bordered' | 'splitted' | 'light' | 'shadow' | 'card' | 'card-list' | 'headline' | 'boxed' | 'minimal' | 'left-toggle' | 'iconic'
     * Use 'card' or 'card-list' for a separated card layout with icon pills and a right-chevron.
     * Use 'headline' for a minimalist, high-impact typography-first layout.
+    * Use 'boxed' for dark individual cards with glowing yellow action badges.
+    * Use 'minimal' for border-bottom separators and clean typography.
+    * Use 'left-toggle' for a left plus-minus toggle structure.
+    * Use 'iconic' for custom left status/brand icons with micro plus-minus toggles.
     */
     variant = 'default';
+    /**
+     * Toggle icon style: 'chevron' | 'plus-minus'
+     */
+    toggleStyle = 'chevron';
     /**
      * Size of the accordion: 'sm' | 'md' | 'lg'
      */
@@ -1081,14 +1089,18 @@ export class Accordion {
                 if (el)
                     this.itemRefs.set(item.id, el);
             } }, item.headerSlot ? (h("div", { class: "accordion-header-custom", role: "heading", "aria-level": currentHeaderLevel }, h("slot", { name: item.headerSlot }))) : (h(HeaderTag, { style: { margin: 0, padding: 0 } }, h("ui-button", { variant: "accordion", class: headerClasses, onClick: (e) => this.toggleItem(item.id, e), disabled: isDisabled, fullWidth: true, "icon-position": "none", align: "start", justify: "between", noRipple: true, "aria-expanded": isOpen ? 'true' : 'false', "aria-controls": `accordion-content-${item.id}`, ariaLabel: `${isOpen ? 'Close' : 'Open'} ${item.title}`, tabindex: isDisabled ? -1 : 0 }, h("div", { class: "accordion-header-content" }, h("div", { class: "accordion-header-left" }, this.iconPosition === 'start' && !this.hideArrow && (() => {
-            const arrowName = isOpen ? this.arrowIconExpanded : this.arrowIconCollapsed;
+            const arrowName = this.toggleStyle === 'plus-minus'
+                ? (isOpen ? 'minus' : 'plus')
+                : (isOpen ? this.arrowIconExpanded : this.arrowIconCollapsed);
             const arrowLib = this.iconLibrary;
-            return (h("ui-icon", { name: arrowName, library: arrowLib, size: "1.2em", class: "accordion-arrow arrow-start" }));
+            return (h("div", { class: "accordion-arrow-wrapper" }, h("ui-icon", { name: arrowName, library: arrowLib, size: "1.2em", class: "accordion-arrow arrow-start" })));
         })(), item.image && (h("img", { src: item.image, alt: "", class: "accordion-image" })), item.icon && (h("span", { class: "accordion-icon" }, h("ui-icon", { name: item.icon, library: item.iconLibrary || this.iconLibrary, size: "1.2em" }))), h("div", { class: "accordion-header-text" }, this.showBreadcrumbs && parentTitles.length > 0 && (h("div", { class: "accordion-breadcrumbs" }, parentTitles.map((p, i) => (h("span", { class: "breadcrumb-node" }, p, " ", i < parentTitles.length - 1 ? ' > ' : ''))))), h("div", { class: "accordion-title-group" }, h("div", { class: "accordion-title", innerHTML: sanitizeHTML(this.enableSearch ? this.highlightSearchText(item.title) : item.title) }), item.subtitle && (h("div", { class: "accordion-subtitle", innerHTML: sanitizeHTML(this.enableSearch ? this.highlightSearchText(item.subtitle) : item.subtitle) })), this.renderSparkline(item.sparkline ?? []), this.renderAIBriefing(item), this.renderTeleportLink(item)), item.peek && !isOpen && !this.searchQuery && (h("span", { class: "accordion-peek-snippet", innerHTML: sanitizeHTML(item.peek) })))), h("div", { class: "accordion-header-right" }, h("div", { class: "accordion-header-indicators" }, this.renderPresence(item), this.renderQuickActions(item), item.progress !== undefined && item.progress >= 0 && (h("div", { class: "accordion-progress-ring" }, h("svg", { viewBox: "0 0 36 36" }, h("circle", { cx: "18", cy: "18", r: "16", fill: "none", class: "ring-bg", "stroke-width": "3" }), h("circle", { cx: "18", cy: "18", r: "16", fill: "none", class: "ring-fg", "stroke-width": "3", style: { strokeDasharray: `${item.progress}, 100` } })), h("span", { class: "progress-text" }, item.progress, "%"))), item.status && item.status !== 'none' && (h("div", { class: `accordion-status-badge status-${item.status}` }, item.status === 'completed' && h("ui-icon", { name: "check", library: this.iconLibrary, size: "14px" }), item.status === 'error' && h("ui-icon", { name: "alert-circle", library: this.iconLibrary, size: "14px" }), item.status === 'warning' && h("ui-icon", { name: "alert-triangle", library: this.iconLibrary, size: "14px" }), item.status === 'current' && h("div", { class: "pulse-dot" })))), item.badge !== undefined && item.badge > 0 && (h("span", { class: "accordion-badge" }, item.badge)), item.actions && item.actions.length > 0 && (h("div", { class: "accordion-actions" }, item.actions.map(action => (h("ui-button", { key: action.id, variant: action.variant || 'ghost', size: "xs", iconOnly: !!action.icon, icon: action.icon, iconLibrary: action.iconLibrary || item.iconLibrary || this.iconLibrary, iconSize: "1.1em", label: action.icon ? undefined : action.label, ariaLabel: action.ariaLabel || action.label, disabled: action.disabled, onClick: (e) => this.handleActionClick(item.id, action.id, action, e) }))))), item.loading && (h("ui-loader", { size: "xs", color: "currentColor", class: "accordion-loading-spinner" })), this.iconPosition === 'end' && !this.hideArrow && (() => {
             //  const isCardList = this.variant === 'card-list' || this.variant === 'card';
-            const arrowName = isOpen ? this.arrowIconExpanded : this.arrowIconCollapsed;
+            const arrowName = this.toggleStyle === 'plus-minus'
+                ? (isOpen ? 'minus' : 'plus')
+                : (isOpen ? this.arrowIconExpanded : this.arrowIconCollapsed);
             const arrowLib = this.iconLibrary;
-            return (h("ui-icon", { name: arrowName, library: arrowLib, size: "1.2em", class: "accordion-arrow" }));
+            return (h("div", { class: "accordion-arrow-wrapper" }, h("ui-icon", { name: arrowName, library: arrowLib, size: "1.2em", class: "accordion-arrow" })));
         })()))))), (() => {
             // God-tier Lazy Logic:
             // 1. If not lazy, always render.
@@ -1146,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,
@@ -1356,7 +1369,7 @@ export class Accordion {
                 "setter": false,
                 "reflect": false,
                 "attribute": "background-color",
-                "defaultValue": "'white'"
+                "defaultValue": "''"
             },
             "haptic": {
                 "type": "boolean",
@@ -1522,15 +1535,15 @@ export class Accordion {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'bordered' | 'splitted' | 'light' | 'shadow' | 'card' | 'card-list' | 'headline'",
-                    "resolved": "\"bordered\" | \"card\" | \"card-list\" | \"default\" | \"headline\" | \"light\" | \"shadow\" | \"splitted\"",
+                    "original": "'default' | 'bordered' | 'splitted' | 'light' | 'shadow' | 'card' | 'card-list' | 'headline' | 'boxed' | 'minimal' | 'left-toggle' | 'iconic'",
+                    "resolved": "\"bordered\" | \"boxed\" | \"card\" | \"card-list\" | \"default\" | \"headline\" | \"iconic\" | \"left-toggle\" | \"light\" | \"minimal\" | \"shadow\" | \"splitted\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Accordion variant: 'default' | 'bordered' | 'splitted' | 'light' | 'shadow' | 'card' | 'card-list' | 'headline'\r\nUse 'card' or 'card-list' for a separated card layout with icon pills and a right-chevron.\r\nUse 'headline' for a minimalist, high-impact typography-first layout."
+                    "text": "Accordion variant: 'default' | 'bordered' | 'splitted' | 'light' | 'shadow' | 'card' | 'card-list' | 'headline' | 'boxed' | 'minimal' | 'left-toggle' | 'iconic'\r\nUse 'card' or 'card-list' for a separated card layout with icon pills and a right-chevron.\r\nUse 'headline' for a minimalist, high-impact typography-first layout.\r\nUse 'boxed' for dark individual cards with glowing yellow action badges.\r\nUse 'minimal' for border-bottom separators and clean typography.\r\nUse 'left-toggle' for a left plus-minus toggle structure.\r\nUse 'iconic' for custom left status/brand icons with micro plus-minus toggles."
                 },
                 "getter": false,
                 "setter": false,
@@ -1538,6 +1551,26 @@ export class Accordion {
                 "attribute": "variant",
                 "defaultValue": "'default'"
             },
+            "toggleStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'chevron' | 'plus-minus'",
+                    "resolved": "\"chevron\" | \"plus-minus\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggle icon style: 'chevron' | 'plus-minus'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggle-style",
+                "defaultValue": "'chevron'"
+            },
             "size": {
                 "type": "string",
                 "mutable": false,

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 */
@@ -66,11 +66,11 @@
   --table-header-bg: var(--bg-primary, #f8fafc);
   --table-border: var(--border-subtle, #f1f5f9);
   --table-text: var(--text-primary, #1e293b);
-  --table-text-secondary: var(--color-primary, #64748b);
+  --table-text-secondary: var(--text-secondary, #64748b);
   --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);
@@ -84,18 +84,32 @@
   overflow: hidden;
 }
 
-/* Dark Mode */
-.data-table-container.dark-mode {
+/* Dark Mode & Theme Contexts */
+.data-table-container.dark-mode,
+:host-context(.theme-dark) .data-table-container,
+:host-context(.dark) .data-table-container {
   --table-bg: var(--bg-secondary, #0f172a);
   --table-header-bg: var(--bg-primary, #1e293b);
   --table-border: rgba(255, 255, 255, 0.05);
-  --table-text: var(--bg-primary, #f8fafc);
-  --table-text-secondary: var(--color-primary, #94a3b8);
+  --table-text: var(--text-primary, #f8fafc);
+  --table-text-secondary: var(--text-secondary, #94a3b8);
   --table-hover: rgba(255, 255, 255, 0.03);
   --table-selected: rgba(var(--table-primary-rgb), 0.1);
   --table-shadow: rgba(0, 0, 0, 0.4);
 }
 
+:host-context(.theme-light) .data-table-container,
+:host-context(.light) .data-table-container {
+  --table-bg: var(--bg-primary, #ffffff);
+  --table-header-bg: var(--bg-primary, #f8fafc);
+  --table-border: var(--border-subtle, #f1f5f9);
+  --table-text: var(--text-primary, #1e293b);
+  --table-text-secondary: var(--text-secondary, #64748b);
+  --table-hover: var(--bg-primary, #f1f5f9);
+  --table-selected: rgba(var(--table-primary-rgb), 0.1);
+  --table-shadow: rgba(0, 0, 0, 0.05);
+}
+
 .advanced-table-glass {
   background: transparent !important;
   box-shadow: none !important;

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

@@ -209,7 +209,6 @@
 }
 
 .anchor--vertical.anchor--left {
-  top: 80px;
   left: 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

@@ -37,7 +37,7 @@
   --aside-resize-handle-hover: var(--color-primary, #10b981);
   --aside-resize-handle-active: var(--color-primary-hover, #2563eb);
   --aside-panel-padding: 32px;
-  --aside-transition-duration: 1s;
+  --aside-transition-duration: 0.3s;
   --aside-ease: cubic-bezier(0.65, 0, 0.35, 1);
   --aside-z-index-overlay: 1500;
   --aside-z-index-panel: 1501;
@@ -60,13 +60,11 @@
   opacity: 0;
   visibility: hidden;
   transition: opacity var(--aside-transition-duration) var(--aside-ease), visibility var(--aside-transition-duration) var(--aside-ease);
-  transition-delay: var(--aside-transition-duration);
   z-index: var(--aside-z-index-overlay);
 }
 .overlay.visible {
   opacity: 1;
   visibility: visible;
-  transition-delay: 0s;
 }
 
 /* ── Panel Core ─────────────────────────────────────────────────────── */
@@ -152,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 {
@@ -424,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

@@ -123,7 +123,7 @@ export class AsidePanel {
     /**
      * Animation transition duration (e.g. '0.3s' or '500ms')
      */
-    transitionDuration = '1s';
+    transitionDuration = '0.3s';
     /**
      * Animation style for opening and closing
      * @default 'slide-in-out'
@@ -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: '96228f17ee1f0fab8f11427ee6055f42234418cb', 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: '5dae19f30e04a7fc18cb0fef62a8319f79296160', class: { 'overlay': true, 'visible': this.open }, style: { backdropFilter: this.backdropBlur !== '0' ? `blur(${this.backdropBlur})` : 'none' }, onClick: this.handleOverlayClick })), h("div", { key: '688ced9dccc2bfe6ee489e8283146f8863044224', 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: 'e78d13a733dbd6e9b2949634c8b107cab6225d24', class: "loading-overlay" }, h("div", { key: 'c7db0694fba52bfbc8d6a90440976556a85056c6', class: "spinner" }))), this.resizable && !this.mini && (h("div", { key: 'ecc06e0c68c743eff86b12e2bb978369743924d7', class: `resize-handle resize-handle-${this.direction}`, style: this.resizeHandleColor ? { backgroundColor: this.resizeHandleColor } : {}, onMouseDown: this.handleResizeStart }, this.showResizeIndicator && (h("div", { key: '28156c16815117726861da00bb93165c174fc1fe', class: "resize-indicator" }, h("span", { key: '6b4e06e9ae3935a5a68dfbd2a51b53b1172fdd0f' }), h("span", { key: '82558b01333dff587f0afd3d723a7e592a757ede' }), h("span", { key: 'c8e3a7ab11462c951e1477b5abcae131e2019129' }))))), h("div", { key: 'ab67f36b3f4dd65dffdb6fd4e12bb09d04fa4d59', class: "panel-header-toolbar" }, h("div", { key: '627055ac7880157e1ccdb43587832fb151800202', 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: '67bd0e21f1411391f2ee3bfc9d752ce267012401', variant: "ghost", size: "sm", icon: "mic", iconLibrary: "lucide", iconSize: "14px", ariaLabel: "Voice Interaction", class: this.isListening ? 'active' : '', onClick: () => this.initVoice() }))), h("div", { key: 'fa9bad7d620cab7d18cf9234f50f985378b472f5', class: "toolbar-right" }, this.showActions && (h("ui-button", { key: '7688f94038ec6a27423be56b787873631614cdc2', 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: '32daa2cbf1311059c80058a3ad587946f24b8e59', items: this.actionItems, target: "#aside-actions-trigger", openOn: "click", placement: "bottom", onItemSelect: (ev) => this.asideActionClick.emit(ev.detail) })), this.pinned && h("ui-icon", { key: 'a3e70a59b575c0376c151e0c6a1db1553a9dd1e9', name: "pin", library: "lucide", size: "14px", class: "pin-status" }), this.closeable && !this.pinned && (h("ui-button", { key: 'c686337c8755a0375b4c87239bf95d2838f8bd36', variant: "ghost", size: "sm", icon: "x", iconLibrary: "lucide", iconSize: "16px", ariaLabel: "Close panel", onClick: this.handleClose })))), h("div", { key: 'b4c1294140c10f94287ba98fa86f16627c61bb5b', class: "panel-header" }, h("div", { key: 'cd0533b0730d96b11136e68ce6a1e0372885ff4f', class: "header-main" }, h("slot", { key: '687c43c34a171ff4351e8a41778da102826ce2f8', name: "header" }), this.badge && h("span", { key: '830f3cb27cf809029f686bacbd488a6dcbcedad3', class: "header-badge" }, this.badge)), this.progress > -1 && (h("div", { key: '6c37bd10a8d7bfac71cc7aa619c44b4145400681', class: "header-progress" }, h("div", { key: '07fbdc20712c119f1e345fcd070f2eb33f7380e6', class: "progress-bar", style: { width: `${Math.min(100, Math.max(0, this.progress))}%` } })))), h("div", { key: '569c75c3b02918bb22d3ffc4322a882267b92bb9', class: "panel-content" }, h("slot", { key: '9255c9b298178ae03bae04acd856d8b528ddf808', name: "content" }), h("slot", { key: '0c071717c63c6baabfd5350cad38f57621989c6c' })), !this.mini && (h("div", { key: 'd2a629a5864e57d917ca7a5a8256125a8a8ec0a4', class: "panel-footer" }, h("slot", { key: '9b79d14c480eefa03ef84e73e5363bca9cd63e6e', 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"; }
@@ -1268,7 +1267,7 @@ export class AsidePanel {
                 "setter": false,
                 "reflect": false,
                 "attribute": "transition-duration",
-                "defaultValue": "'1s'"
+                "defaultValue": "'0.3s'"
             },
             "animationType": {
                 "type": "string",
@@ -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%);
 }

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,
@@ -1293,7 +1345,7 @@ export class Avatar {
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentVariant | 'glass'",
-                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
+                    "resolved": "\"bordered\" | \"borderless\" | \"color\" | \"danger\" | \"dark\" | \"default\" | \"dots-only\" | \"elevated\" | \"error\" | \"filled\" | \"flat\" | \"ghost\" | \"glass\" | \"gradient\" | \"info\" | \"inverse\" | \"light\" | \"minimal\" | \"neutral\" | \"outlined\" | \"panel\" | \"plain\" | \"primary\" | \"quaternary\" | \"raised\" | \"secondary\" | \"segmented\" | \"soft\" | \"solid\" | \"standard\" | \"status\" | \"success\" | \"surface\" | \"tertiary\" | \"text\" | \"underlined\" | \"warning\"",
                     "references": {
                         "ComponentVariant": {
                             "location": "import",