atomicuilibrary 0.0.1 → 0.1.0

package/dist/collection/components/card/card.css

@@ -60,10 +60,21 @@
   transform-style: preserve-3d;
 }
 
-.is-flipped .card-flipper {
+:host(.is-flipped) .card-flipper {
   transform: rotateY(180deg);
 }
 
+:host(.is-flippable) {
+  min-height: var(--ui-card-flip-min-height, 280px);
+}
+:host(.is-flippable) .card-container {
+  min-height: var(--ui-card-flip-min-height, 280px);
+}
+
+:host(.is-closed) {
+  display: none !important;
+}
+
 .card-face {
   position: absolute;
   top: 0;
@@ -103,106 +114,147 @@
 }
 
 /* --- Variants --- */
-.variant-elevated .card-face-content {
+.card-variant-elevated {
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
-.variant-outlined .card-face-content {
+.card-variant-outlined {
   box-shadow: none;
   border: 2px solid var(--ui-card-border-color, var(--border-default, #e5e7eb));
 }
 
-.variant-filled .card-face-content {
+.card-variant-filled {
   background-color: var(--bg-primary, #f9fafb);
   border: none;
 }
 
-.variant-primary .card-face-content {
+.card-variant-primary {
   border-left: 4px solid var(--ui-card-primary);
 }
-.variant-primary .card-face-content .card-header {
+.card-variant-primary .card-header {
   background: linear-gradient(to right, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1), transparent);
 }
 
-.variant-success .card-face-content {
+.card-variant-success {
   border-left: 4px solid var(--ui-card-success);
 }
-.variant-success .card-face-content .card-header {
+.card-variant-success .card-header {
   background: linear-gradient(to right, rgba(var(--color-success-rgb, 16, 185, 129), 0.1), transparent);
 }
 
-.variant-warning .card-face-content {
+.card-variant-warning {
   border-left: 4px solid var(--ui-card-warning);
 }
-.variant-warning .card-face-content .card-header {
+.card-variant-warning .card-header {
   background: linear-gradient(to right, rgba(var(--color-warning-rgb, 245, 158, 11), 0.1), transparent);
 }
 
-.variant-danger .card-face-content {
+.card-variant-danger {
   border-left: 4px solid var(--ui-card-danger);
 }
-.variant-danger .card-face-content .card-header {
+.card-variant-danger .card-header {
   background: linear-gradient(to right, rgba(var(--color-danger-rgb, 239, 68, 68), 0.1), transparent);
 }
 
-.variant-info .card-face-content {
+.card-variant-info {
   border-left: 4px solid var(--ui-card-info);
 }
-.variant-info .card-face-content .card-header {
+.card-variant-info .card-header {
   background: linear-gradient(to right, rgba(6, 182, 212, 0.1), transparent);
 }
 
+/* --- Status Cards --- */
+.card-variant-status {
+  border: 1px solid var(--border-default, #e5e7eb);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.card-variant-status.card-color-primary {
+  border: 1.5px solid var(--ui-card-primary);
+  background: color-mix(in srgb, var(--ui-card-primary) 5%, var(--ui-card-bg, var(--bg-primary, #ffffff)));
+}
+.card-variant-status.card-color-primary .card-header {
+  border-bottom-color: color-mix(in srgb, var(--ui-card-primary) 15%, var(--border-default, #e5e7eb));
+}
+.card-variant-status.card-color-success {
+  border: 1.5px solid var(--ui-card-success);
+  background: color-mix(in srgb, var(--ui-card-success) 5%, var(--ui-card-bg, var(--bg-primary, #ffffff)));
+}
+.card-variant-status.card-color-success .card-header {
+  border-bottom-color: color-mix(in srgb, var(--ui-card-success) 15%, var(--border-default, #e5e7eb));
+}
+.card-variant-status.card-color-warning {
+  border: 1.5px solid var(--ui-card-warning);
+  background: color-mix(in srgb, var(--ui-card-warning) 5%, var(--ui-card-bg, var(--bg-primary, #ffffff)));
+}
+.card-variant-status.card-color-warning .card-header {
+  border-bottom-color: color-mix(in srgb, var(--ui-card-warning) 15%, var(--border-default, #e5e7eb));
+}
+.card-variant-status.card-color-danger {
+  border: 1.5px solid var(--ui-card-danger);
+  background: color-mix(in srgb, var(--ui-card-danger) 5%, var(--ui-card-bg, var(--bg-primary, #ffffff)));
+}
+.card-variant-status.card-color-danger .card-header {
+  border-bottom-color: color-mix(in srgb, var(--ui-card-danger) 15%, var(--border-default, #e5e7eb));
+}
+.card-variant-status.card-color-info {
+  border: 1.5px solid var(--ui-card-info);
+  background: color-mix(in srgb, var(--ui-card-info) 5%, var(--ui-card-bg, var(--bg-primary, #ffffff)));
+}
+.card-variant-status.card-color-info .card-header {
+  border-bottom-color: color-mix(in srgb, var(--ui-card-info) 15%, var(--border-default, #e5e7eb));
+}
+
 /* --- Importance & Patterns --- */
-.card-importance-emphasized .card-face-content {
+.card-importance-emphasized {
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   border: none;
   background: linear-gradient(135deg, var(--bg-secondary, #111827) 0%, var(--color-primary, #374151) 100%);
   color: var(--text-standard, #ffffff);
 }
-.card-importance-emphasized .card-face-content .card-title-text,
-.card-importance-emphasized .card-face-content .card-content,
-.card-importance-emphasized .card-face-content .card-extra,
-.card-importance-emphasized .card-face-content .card-description {
+.card-importance-emphasized .card-title-text,
+.card-importance-emphasized .card-content,
+.card-importance-emphasized .card-extra,
+.card-importance-emphasized .card-description {
   color: var(--text-standard, #ffffff);
 }
-.card-importance-emphasized .card-face-content .card-header,
-.card-importance-emphasized .card-face-content .card-footer {
+.card-importance-emphasized .card-header,
+.card-importance-emphasized .card-footer {
   border-bottom-color: rgba(255, 255, 255, 0.1);
   border-top-color: rgba(255, 255, 255, 0.1);
 }
-.card-importance-emphasized .card-face-content .card-action-btn {
+.card-importance-emphasized .card-action-btn {
   color: rgba(255, 255, 255, 0.7);
 }
-.card-importance-emphasized .card-face-content .card-action-btn:hover {
+.card-importance-emphasized .card-action-btn:hover {
   background: rgba(255, 255, 255, 0.1);
   color: var(--text-standard, #ffffff);
 }
 
-.card-pattern-shortcut .card-face-content {
+.card-pattern-shortcut {
   text-align: center;
   padding: 32px 24px;
   align-items: center;
 }
-.card-pattern-shortcut .card-face-content .card-header {
+.card-pattern-shortcut .card-header {
   border-bottom: none;
   padding: 0;
   margin-bottom: 16px;
   flex-direction: column;
 }
-.card-pattern-shortcut .card-face-content .card-header-main {
+.card-pattern-shortcut .card-header-main {
   flex-direction: column;
   gap: 12px;
 }
-.card-pattern-shortcut .card-face-content .card-title-text {
+.card-pattern-shortcut .card-title-text {
   font-size: 20px;
   text-align: center;
 }
-.card-pattern-shortcut .card-face-content .card-avatar {
+.card-pattern-shortcut .card-avatar {
   margin: 0 auto 8px;
   width: 64px;
   height: 64px;
 }
-.card-pattern-shortcut .card-face-content .card-avatar i {
+.card-pattern-shortcut .card-avatar i {
   font-size: 32px;
 }
 
@@ -226,7 +278,7 @@
 }
 
 /* --- Glassmorphism --- */
-.card-glass .card-face-content {
+.card-glass {
   background: rgba(255, 255, 255, 0.4);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
@@ -244,7 +296,7 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 
-.card-selected .card-face-content {
+.card-selected {
   border-color: var(--ui-card-selected-border) !important;
   box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
 }

package/dist/collection/components/card/card.js

@@ -60,6 +60,8 @@ export class Card {
     collapsed = false;
     /** Show close button in header */
     closable = false;
+    /** Controlled closed/dismissed state of the card */
+    closed = false;
     /** Enable selection mode */
     selectable = false;
     /** Selection state */
@@ -117,6 +119,7 @@ export class Card {
     isFlipped = false;
     isMenuOpen = false;
     isCollapsed = false;
+    isClosed = false;
     parsedMenuItems = [];
     magneticTransform = '';
     tiltTransform = '';
@@ -139,10 +142,14 @@ export class Card {
     handleCollapsedChange(newValue) {
         this.isCollapsed = newValue;
     }
+    handleClosedChange(newValue) {
+        this.isClosed = newValue;
+    }
     componentWillLoad() {
         this.parseMenuItems();
         this.isFlipped = this.flipped;
         this.isCollapsed = this.collapsed;
+        this.isClosed = this.closed;
     }
     handleClickOutside(event) {
         if (this.isMenuOpen && this.menuRef && !this.menuRef.contains(event.target)) {
@@ -280,6 +287,8 @@ export class Card {
     };
     handleClose = (e) => {
         e.stopPropagation();
+        this.isClosed = true;
+        this.closed = true;
         this.cardClose.emit();
     };
     renderMenu() {
@@ -337,6 +346,8 @@ export class Card {
             [`card-importance-${this.importance}`]: true,
             [`card-pattern-${this.pattern}`]: true,
             [`card-type-${this.type}`]: true,
+            [`card-variant-${this.variant}`]: true,
+            [`card-color-${this.color}`]: true,
         };
         const faceStyle = {
             borderRadius: this.borderRadius,
@@ -355,22 +366,30 @@ export class Card {
             borderRadius: this.borderRadius,
             border: this.bordered ? (this.border || undefined) : 'none'
         };
-        return (h("div", { class: "card-face-content card-back", style: cardStyle }, h("div", { class: "card-back-header" }, h("ui-button", { variant: "ghost", onClick: this.toggleFlip, ariaLabel: "Flip card back", icon: "arrow-left", iconLibrary: "lucide", iconOnly: true, size: "sm" })), h("div", { class: "card-content" }, h("slot", { name: "back" }, h("div", { class: "card-back-default" }, h("h3", null, "Back Side"), h("p", null, "Add content to the \"back\" slot to customize this side."))), h("slot", { name: "back-content" }))));
+        const backClasses = {
+            'card-face-content': true,
+            'card-back': true,
+            [`card-variant-${this.variant}`]: true,
+            [`card-color-${this.color}`]: true,
+        };
+        return (h("div", { class: backClasses, style: cardStyle }, h("div", { class: "card-back-header" }, h("ui-button", { variant: "ghost", onClick: this.toggleFlip, ariaLabel: "Flip card back", icon: "arrow-left", iconLibrary: "lucide", iconOnly: true, size: "sm" })), h("div", { class: "card-content" }, h("slot", { name: "back" }, h("div", { class: "card-back-default" }, h("h3", null, "Back Side"), h("p", null, "Add content to the \"back\" slot to customize this side."))), h("slot", { name: "back-content" }))));
     }
     render() {
         const hostClass = [
             'ui-card',
             `variant-${typeof this.variant === 'string' ? this.variant : 'default'}`,
+            `color-${typeof this.color === 'string' ? this.color : 'default'}`,
             `size-${typeof this.size === 'string' ? this.size : 'md'}`,
             this.isFlipped && 'is-flipped',
             this.loading && 'is-loading',
             this.flippable && 'is-flippable',
+            this.isClosed && 'is-closed',
         ].filter(Boolean).join(' ');
         const containerStyle = {
             width: typeof this.width === 'string' ? this.width : undefined,
             height: typeof this.height === 'string' ? this.height : undefined,
         };
-        return (h(Host, { key: 'ef88aac3904761439d1c4d689cd89c4c47569894', class: hostClass, style: containerStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.ribbon && (h("div", { key: 'a9866c010965c9259e2d566ca909965f63e0dbbb', class: `card-ribbon ribbon-${this.ribbonPosition}`, style: this.ribbonColor ? { backgroundColor: this.ribbonColor } : {} }, h("span", { key: '24ef228a94d1e6ffc61bc7fef52c4f34ca88daf2' }, this.ribbon))), this.loading ? (h("div", { class: "card-loading-container", style: { borderRadius: this.borderRadius } }, this.renderSkeleton())) : (h("div", { class: "card-container", onClick: this.handleCardClick, onMouseMove: this.handleMouseMove, style: {
+        return (h(Host, { key: '186bcc9dde0f56786499dd1f575f17996461aa7f', class: hostClass, style: containerStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.ribbon && (h("div", { key: '9073fc18c3fedf1c31fb18f15f26e2a4acfd9387', class: `card-ribbon ribbon-${this.ribbonPosition}`, style: this.ribbonColor ? { backgroundColor: this.ribbonColor } : {} }, h("span", { key: 'fee6270b9bc17041837bd7dbffc26db9e43aad0e' }, this.ribbon))), this.loading ? (h("div", { class: "card-loading-container", style: { borderRadius: this.borderRadius } }, this.renderSkeleton())) : (h("div", { class: "card-container", onClick: this.handleCardClick, onMouseMove: this.handleMouseMove, style: {
                 transform: `${this.magneticTransform} ${this.tiltTransform}`,
                 transition: (!this.magneticTransform && !this.tiltTransform) ? 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1)' : 'none'
             } }, this.flippable ? (h("div", { class: "card-flipper" }, h("div", { class: "card-face face-front" }, this.renderFrontCard(), this.renderSelectionIndicator()), h("div", { class: "card-face face-back" }, this.renderBackCard()))) : ([this.renderFrontCard(), this.renderSelectionIndicator()])))));
@@ -434,7 +453,7 @@ export class Card {
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentVariant",
-                    "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",
@@ -967,6 +986,26 @@ export class Card {
                 "attribute": "closable",
                 "defaultValue": "false"
             },
+            "closed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled closed/dismissed state of the card"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closed",
+                "defaultValue": "false"
+            },
             "selectable": {
                 "type": "boolean",
                 "mutable": false,
@@ -1513,6 +1552,7 @@ export class Card {
             "isFlipped": {},
             "isMenuOpen": {},
             "isCollapsed": {},
+            "isClosed": {},
             "parsedMenuItems": {},
             "magneticTransform": {},
             "tiltTransform": {}
@@ -1683,6 +1723,9 @@ export class Card {
             }, {
                 "propName": "collapsed",
                 "methodName": "handleCollapsedChange"
+            }, {
+                "propName": "closed",
+                "methodName": "handleClosedChange"
             }];
     }
     static get listeners() {

package/dist/collection/components/checkbox/checkbox.css

@@ -150,9 +150,9 @@
   --ui-checkbox-border: var(--border-strong, #bfc8d8);
   --ui-checkbox-border-hover: var(--color-primary, #94a3b8);
   --ui-checkbox-bg: var(--bg-primary, #ffffff);
-  --ui-checkbox-checked-bg: var(--color-success, #3dcd58);
-  --text-primary: var(--label-color, var(--text-primary, #1e293b));
-  --text-secondary: var(--label-subtitle-color, var(--text-secondary, #64748b));
+  --ui-checkbox-checked-bg: var(--color-primary, #3b82f6);
+  --text-primary: var(--label-color, inherit);
+  --text-secondary: var(--label-subtitle-color, inherit);
   --error-color-light: var(--bg-secondary, #fef2f2);
 }
 
@@ -169,8 +169,6 @@
   --ui-checkbox-border-hover: var(--color-primary, #475569);
   --ui-checkbox-bg: var(--bg-primary, #1e293b);
   --ui-checkbox-checked-bg: var(--color-primary, #4ade80);
-  --text-primary: var(--label-color, var(--text-primary, #f1f5f9));
-  --text-secondary: var(--label-subtitle-color, var(--text-secondary, #cbd5e1));
 }
 
 .checkbox-container {
@@ -180,7 +178,7 @@
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   vertical-align: middle;
   box-sizing: border-box;
-  color: var(--text-primary);
+  color: inherit;
 }
 .checkbox-container.checkbox-rtl {
   direction: rtl;
@@ -303,7 +301,7 @@
 .checkbox-box .glow-layer {
   position: absolute;
   inset: -4px;
-  background: var(--ui-checkbox-color, var(--color-primary));
+  background: var(--ui-checkbox-color, var(--ui-checkbox-checked-bg, var(--color-primary, #3b82f6)));
   opacity: 0;
   filter: blur(12px);
   transition: opacity 0.4s ease;
@@ -589,7 +587,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: currentColor;
+  background: var(--ui-checkbox-color, var(--ui-checkbox-checked-bg, var(--color-primary, #3b82f6)));
   transform: scale(0);
   transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   border-radius: inherit;
@@ -631,8 +629,8 @@
 
 .checkbox-checked .checkbox-box,
 .checkbox-indeterminate .checkbox-box {
-  background: var(--ui-checkbox-color, var(--color-primary));
-  border-color: var(--ui-checkbox-color, var(--color-primary));
+  background: var(--ui-checkbox-color, var(--ui-checkbox-checked-bg, var(--color-primary, #3b82f6)));
+  border-color: var(--ui-checkbox-color, var(--ui-checkbox-checked-bg, var(--color-primary, #3b82f6)));
 }
 
 .checkbox-box {

package/dist/collection/components/checkbox/checkbox.js

@@ -25,7 +25,7 @@ export class Checkbox {
     value = '';
     name = '';
     size = 'md';
-    color = 'success';
+    color = 'primary';
     variant = 'default';
     skeleton = false;
     labelPosition = 'right';
@@ -608,7 +608,7 @@ export class Checkbox {
                 "setter": false,
                 "reflect": false,
                 "attribute": "color",
-                "defaultValue": "'success'"
+                "defaultValue": "'primary'"
             },
             "variant": {
                 "type": "string",

package/dist/collection/components/code-editor/code-editor.js

@@ -935,7 +935,7 @@ export class AppCodeEditor {
         // I'll leave the Folding Logic in place but comment out the Layout shift if it's too risky.
         // Actually, let's try to just filter the `lines` map in `renderLineNumbers` to visually show we handle it,
         // but for the textarea/pre, we CANNOT hide separate lines.
-        return (h("div", { key: '321fc92d91bf5365394b866e7efef0bcce5f92e8', class: `code-editor-container ${themeClass}` }, this.renderTabBar(), this.renderToolbar(), this.renderPalette(), h("div", { key: '212c74c9fae6bddf8206698c2b7279acc328cdf6', class: "code-editor-layout" }, this.renderSidebar(), h("div", { key: '6afeb17b34a66e4cdaf72d8582041913a58d13fc', class: "editor-main-panel" }, this.renderBreadcrumbs(), h("div", { key: '7a3e97d74cc5b68250a4471a3e1b9fa858d22b98', class: "editor-main-content", style: { display: 'flex', flex: '1', minHeight: '0', position: 'relative' } }, this.renderLineNumbers(), h("div", { key: 'ce569b57f4c9b4365cd9f014d8aff2d1c8679b8b', class: "editor-wrapper" }, this.renderSearch(), this.renderSuggestions(), h("ui-button", { key: '629168b1f60cc6a962af7d4f81e0078d5c13f2d4', variant: "ghost", class: "copy-button", onClick: this.handleCopy, ariaLabel: "Copy Code", icon: "copy", iconLibrary: "fontawesome", iconOnly: true }), h("pre", { key: 'd4fa13f823d5ba4ab80db9ab66286de099ba28cc', class: "syntax-highlighter", ref: el => this.pre = el, innerHTML: sanitizeHTML(this.highlightedCode) }), h("textarea", { key: '77d8ec6eb4aa8cea02da3ca30d1b5a992717d319', class: "editor-content", ref: el => this.textarea = el, value: this.value, onInput: this.handleInput, onScroll: this.handleScroll, onKeyDown: this.handleKeydown, onSelect: this.handleSelection, onClick: this.handleSelection, onKeyUp: this.handleSelection, spellcheck: false, readonly: this.readonly, role: "textbox", "aria-multiline": "true", "aria-label": "Code Editor" })), this.renderMinimap()), this.renderBottomPanel())), this.renderStatusBar(), this.renderHelp()));
+        return (h("div", { key: 'e856c9fbd64e22059c917ed99eebcc66f605d91b', class: `code-editor-container ${themeClass}` }, this.renderTabBar(), this.renderToolbar(), this.renderPalette(), h("div", { key: 'de880b366ca14669ef66169d2283a18fab623e31', class: "code-editor-layout" }, this.renderSidebar(), h("div", { key: '058b6a13934f82cd6b257a3b6322361c8323cb5d', class: "editor-main-panel" }, this.renderBreadcrumbs(), h("div", { key: '408b4b6d461588819fa49ea1aef707edcc666be6', class: "editor-main-content", style: { display: 'flex', flex: '1', minHeight: '0', position: 'relative' } }, this.renderLineNumbers(), h("div", { key: 'dcb8f35793966525ef0da6d966e4789e5d0eed8e', class: "editor-wrapper" }, this.renderSearch(), this.renderSuggestions(), h("ui-button", { key: '1cbe2e3c0929fa428fd6735b36dc4845bd733b58', variant: "ghost", class: "copy-button", onClick: this.handleCopy, ariaLabel: "Copy Code", icon: "copy", iconLibrary: "fontawesome", iconOnly: true }), h("pre", { key: 'dc17184da52fcfced8a468f891443ab7af9372f6', class: "syntax-highlighter", ref: el => this.pre = el, innerHTML: sanitizeHTML(this.highlightedCode) }), h("textarea", { key: 'f04e9f88a8299b500bcb3bf9cf928416f539b15d', class: "editor-content", ref: el => this.textarea = el, value: this.value, onInput: this.handleInput, onScroll: this.handleScroll, onKeyDown: this.handleKeydown, onSelect: this.handleSelection, onClick: this.handleSelection, onKeyUp: this.handleSelection, spellcheck: false, readonly: this.readonly, role: "textbox", "aria-multiline": "true", "aria-label": "Code Editor" })), this.renderMinimap()), this.renderBottomPanel())), this.renderStatusBar(), this.renderHelp()));
     }
     static get is() { return "ui-code-editor"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/code-preview/ui-code-preview.js

@@ -274,7 +274,7 @@ export class UiCodePreview {
         const currentCode = activeSnippet ? activeSnippet.code : '';
         const displayLang = activeSnippet ? activeSnippet.language : 'markup';
         const prismLang = this.getPrismLanguage(displayLang);
-        return (h("div", { key: '7a1351cde2fe115457ca505a74ddbeac1f6dcddd', class: { 'code-preview-root': true, 'is-expanded': this.expanded } }, h("div", { key: '1f9addfe7e96493bccb7257ddb5069d1a7e70c7e', class: "code-toolbar" }, h("div", { key: '080be5bd471895a49e949192b4980dc0de1e6226', class: "left-actions" }, this.label && h("span", { key: 'd658281d365881a28fa22b875f5f091b4fe157a4', class: "code-label" }, this.label), this.internalSnippets.length > 1 && (h("div", { key: 'e61fb82ff28f045b037bf30310c730c4280fa4d8', class: "lang-tabs" }, this.internalSnippets.map(snippet => (h("ui-button", { variant: this.activeLang === snippet.language ? 'primary' : 'ghost', class: { 'active': this.activeLang === snippet.language }, onClick: () => this.activeLang = snippet.language, size: "sm", label: this.getLabel(snippet) }))))), this.internalSnippets.length === 1 && !this.label && (h("span", { key: 'd0e2caca56998e929749f305ac2af37be47ea4b6', class: "code-label", style: { opacity: '0.7', fontSize: '12px' } }, this.getLabel(this.internalSnippets[0])))), h("div", { key: '49fa1c00084fa56f46acc5efd41a6008abf3a136', class: "right-actions" }, this.showReset && (h("ui-button", { key: '4d65ee2605b003d51bb6ec924b086310f3c398f2', variant: "ghost", onClick: this.handleReset, title: "Reset demo", ariaLabel: "Reset demo", icon: "rotate-cw", iconLibrary: "lucide", iconOnly: true, size: "sm", loading: this.resetting })), h("ui-button", { key: '0889f503e1703a2f07bc2fbc489282495667637c', variant: "ghost", onClick: this.toggleExpanded, title: this.expanded ? 'Hide code' : 'Show code', ariaLabel: this.expanded ? 'Hide code' : 'Show code', size: "sm", label: this.expanded ? 'Hide code' : 'Show code', icon: this.expanded ? 'chevron-up' : 'chevron-down', iconLibrary: "lucide" }), h("ui-button", { key: 'e31e13096084bfeac8115e778423ec6693411b92', variant: "ghost", onClick: this.handleCopy, title: "Copy code", ariaLabel: "Copy code", size: "sm", icon: this.copied ? 'check' : 'copy', iconLibrary: "lucide", iconOnly: true, iconColor: this.copied ? '#4caf50' : undefined }))), h("div", { key: '4e94f96825f20eb61feadf421a08cbc76cdec0db', class: "code-container", style: { maxHeight: this.expanded ? '800px' : '0' } }, h("pre", { key: '8206cc5718503cdcc151d816897fffdaebdf0195', class: `language-${prismLang}` }, h("code", { key: '32aed72ceca967b3f29aaccf03e8746033df5dea', class: `language-${prismLang}` }, currentCode)))));
+        return (h("div", { key: '7c018300ea409daaeffdc41909ee4cd6219ee3e7', class: { 'code-preview-root': true, 'is-expanded': this.expanded } }, h("div", { key: 'efca8affcb0b7261ea588b97950b99df29ca696a', class: "code-toolbar" }, h("div", { key: '71d77e7c07764ff350d438eb963328f1def9695f', class: "left-actions" }, this.label && h("span", { key: '54b86ab6f989e15c93d7c6421dfd548be19c3be3', class: "code-label" }, this.label), this.internalSnippets.length > 1 && (h("div", { key: 'b4d2e0ebce935db765f8b125150448f224270998', class: "lang-tabs" }, this.internalSnippets.map(snippet => (h("ui-button", { variant: this.activeLang === snippet.language ? 'primary' : 'ghost', class: { 'active': this.activeLang === snippet.language }, onClick: () => this.activeLang = snippet.language, size: "sm", label: this.getLabel(snippet) }))))), this.internalSnippets.length === 1 && !this.label && (h("span", { key: 'dfd511444c9ac3367ec094a02b39a9b2a75ce80c', class: "code-label", style: { opacity: '0.7', fontSize: '12px' } }, this.getLabel(this.internalSnippets[0])))), h("div", { key: '6db7ea479ab2760e5f4826866a763bb774b2d8d4', class: "right-actions" }, this.showReset && (h("ui-button", { key: 'b54d50c47246f4c9a7a3cd04f15ff69bc5f0ab0e', variant: "ghost", onClick: this.handleReset, title: "Reset demo", ariaLabel: "Reset demo", icon: "rotate-cw", iconLibrary: "lucide", iconOnly: true, size: "sm", loading: this.resetting })), h("ui-button", { key: '1ea0a7befd699d18b05d6bc95ba0290f7d56d447', variant: "ghost", onClick: this.toggleExpanded, title: this.expanded ? 'Hide code' : 'Show code', ariaLabel: this.expanded ? 'Hide code' : 'Show code', size: "sm", label: this.expanded ? 'Hide code' : 'Show code', icon: this.expanded ? 'chevron-up' : 'chevron-down', iconLibrary: "lucide" }), h("ui-button", { key: '42aca403662777a91d6841f0195185dceaeb04da', variant: "ghost", onClick: this.handleCopy, title: "Copy code", ariaLabel: "Copy code", size: "sm", icon: this.copied ? 'check' : 'copy', iconLibrary: "lucide", iconOnly: true, iconColor: this.copied ? '#4caf50' : undefined }))), h("div", { key: '48dee33979bc2f63352c5ed2375951b8341e812a', class: "code-container", style: { maxHeight: this.expanded ? '800px' : '0' } }, h("pre", { key: 'c426c52b4a21389c77ebfa99d7b14fdb6acc778d', class: `language-${prismLang}` }, h("code", { key: 'ece0a1bf1acedae115ac8c5f1c13cbb4065c7ee7', class: `language-${prismLang}` }, currentCode)))));
     }
     static get is() { return "ui-code-preview"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/color-controller/color-controller.js

@@ -128,7 +128,7 @@ export class ColorController {
         this.emitChange();
     }
     render() {
-        return (h(Host, { key: 'b3bf272d34509127138914724e36b188edd43d6e' }, this.label && h("div", { key: '36ebf9de294642b1d67135b6c8c452fb47c612e6', class: "col-ctrl-label" }, this.label), h("div", { key: '59133d3793607ff7168906dbddd0e7e40c7244a9', class: "col-ctrl-grid" }, h("div", { key: '44b1a8ae8bbc3faaf5c9b009eab5580297761c2d', class: "col-ctrl-row" }, h("span", { key: 'd5fe3fe12e6a116569b2939a0d63f8ff5599184f', class: "col-ctrl-key" }, "H"), h("div", { key: '69bb7842109760c51e1122963cb56f0eba8454a0', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: 'f6a133615ab877293398de65f3b0004c0234f161', class: "col-ctrl-input", type: "number", value: this.h, onInputChange: (v) => this.handleHsvChange('h', parseInt(v.detail)), variant: "plain" }), h("span", { key: 'e00ac8771d5c0f6a08d93fd3f1c1b85b6014edca', class: "col-ctrl-unit" }, "\u00B0"))), h("div", { key: '2fd071bc5741f47cbf40b6664332c6f63e684091', class: "col-ctrl-row" }, h("span", { key: '375c1767c1631f1f5aa0095606c9e50b350443f2', class: "col-ctrl-key" }, "S"), h("div", { key: '3c41e3f98fc37ab7a2af5f3a57dfa7bb05427744', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '3f2a4a152681231156b1b82091fd08b78d6cba2f', class: "col-ctrl-input", type: "number", value: this.s, onInputChange: (v) => this.handleHsvChange('s', parseInt(v.detail)), variant: "plain" }), h("span", { key: '3c33faf1a4ffe99ebe5cde064c024034b691ad1f', class: "col-ctrl-unit" }, "%"))), h("div", { key: '2e49ebd592ade20e0e7660b10416b656312347e0', class: "col-ctrl-row", style: { marginBottom: '12px' } }, h("span", { key: '874e0da90ed96b03c7955ac6650c75b039ea886a', class: "col-ctrl-key" }, "V"), h("div", { key: '7ef1fd0da2ea55c460643e464a0a06bd4ae2d280', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '11cb688038ce67cee9c29b091498b7967674b7fa', class: "col-ctrl-input", type: "number", value: this.v, onInputChange: (v) => this.handleHsvChange('v', parseInt(v.detail)), variant: "plain" }), h("span", { key: '09449462dbba86a0fd33b862f42590209218b9e2', class: "col-ctrl-unit" }, "%"))), h("div", { key: 'c16ecc86f52bbb01edea970400c2128d86384a70', class: "col-ctrl-row" }, h("span", { key: '53fa2cd839dc048567e3aed4fe6ce766d7005577', class: "col-ctrl-key" }, "R"), h("div", { key: 'bcf8bf7833c0dc0030d99b28af56b0bc430fd708', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: 'a498ca548a2529505bae7161659f50b4e5641678', class: "col-ctrl-input", type: "number", value: this.r, onInputChange: (v) => this.handleRgbChange('r', parseInt(v.detail)), variant: "plain" }))), h("div", { key: '516aff05554aad71cc012a9905dad96d5e03b91e', class: "col-ctrl-row" }, h("span", { key: '2c234e6e2f2111724cf603a76303a965b2277c17', class: "col-ctrl-key" }, "G"), h("div", { key: '85339e47bcd95bf20f6e7ae42ac5d29739e8d05a', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: 'd705b336aaceb110e92a9a63c000bfc19c9bdb17', class: "col-ctrl-input", type: "number", value: this.g, onInputChange: (v) => this.handleRgbChange('g', parseInt(v.detail)), variant: "plain" }))), h("div", { key: '033523f4276729ee119fe4ad793e02850c288831', class: "col-ctrl-row", style: { marginBottom: '12px' } }, h("span", { key: '66fd8bdd0d2dd540fb591d02ebc3240913477b52', class: "col-ctrl-key" }, "B"), h("div", { key: '1cfa29786007a7c1292817b914cb573f0a69f1b8', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: 'b6c51663d914adb081819c23fb8e7915be7b50cb', class: "col-ctrl-input", type: "number", value: this.b, onInputChange: (v) => this.handleRgbChange('b', parseInt(v.detail)), variant: "plain" }))), h("div", { key: '4c43173acd72a63dcb2e3ea5759d05bceebd6087', class: "col-ctrl-row hex-row" }, h("span", { key: '3d742b9ca0c5956498a6787171a22fbdb0e87a12', class: "col-ctrl-key" }, "#"), h("div", { key: '294d48fc7bb69c9dda1a36788b6e712725fda674', class: "col-ctrl-input-wrapper hex-wrapper" }, h("ui-input", { key: '051e90c5e2814ba7a5ae6cb542e379f343cf29ea', class: "col-ctrl-input hex-input", value: this.hex, onInputChange: (v) => this.handleHexInput({ detail: { value: v.detail } }), variant: "plain" }))))));
+        return (h(Host, { key: '8a799159e4f7d80bbe881ba3a93d1a6faed5a54e' }, this.label && h("div", { key: 'd32e7f8bcf4ab190437317d2697a86486e84d264', class: "col-ctrl-label" }, this.label), h("div", { key: '75cc18672f23ef572569ac2cc9d125373264c962', class: "col-ctrl-grid" }, h("div", { key: 'af936f413bb4b7aeff0dd9752deadc0ce1dfcb03', class: "col-ctrl-row" }, h("span", { key: '71c0d3c44062a67c1402d2e2b92f81c3ce8878dc', class: "col-ctrl-key" }, "H"), h("div", { key: '08c832583ca9f956c3fc761fa32b712d208d853d', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '283a471f4bf8af83f37b7ac201a81d25e6803dba', class: "col-ctrl-input", type: "number", value: this.h, onInputChange: (v) => this.handleHsvChange('h', parseInt(v.detail)), variant: "plain" }), h("span", { key: 'ef039c70dbc01252f0129f95f7eca4f6302f9049', class: "col-ctrl-unit" }, "\u00B0"))), h("div", { key: '68c91d46d38583bd8a8158452033088811453d1c', class: "col-ctrl-row" }, h("span", { key: '3dfb8b3a1f1053080d6ca3c3b03027fa46cc33bd', class: "col-ctrl-key" }, "S"), h("div", { key: '929558e93d27bc799a2401b0f01f358222c24c24', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: 'a2fcdc19f32f5348848347319c134d94d8963ca5', class: "col-ctrl-input", type: "number", value: this.s, onInputChange: (v) => this.handleHsvChange('s', parseInt(v.detail)), variant: "plain" }), h("span", { key: 'de5d00b3264b1284fe23ca13f9611e5046c444d6', class: "col-ctrl-unit" }, "%"))), h("div", { key: '4e744c31accbcdbe6505a160e693926e6001ac9c', class: "col-ctrl-row", style: { marginBottom: '12px' } }, h("span", { key: '9feef4b4fe6459e34f6ac36a42c90d24413da27b', class: "col-ctrl-key" }, "V"), h("div", { key: '9d1821a375ab9473de477c7ab38cea6cd0cf9c57', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '259bb011612129fd3589fcb7febf15bdd0e7ce13', class: "col-ctrl-input", type: "number", value: this.v, onInputChange: (v) => this.handleHsvChange('v', parseInt(v.detail)), variant: "plain" }), h("span", { key: '3646c32d18517429f758cfef21d34df5d9ec407e', class: "col-ctrl-unit" }, "%"))), h("div", { key: '4f0dae6cce89af626b9d545dda0971ab2f041bca', class: "col-ctrl-row" }, h("span", { key: '6995401c0f6cabba13eb35c596e039769dc33c0a', class: "col-ctrl-key" }, "R"), h("div", { key: 'cc802f297a286f745957b613b37f3ab5ea12fa4e', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '633391de1afcd81d7ce6f68656569f858a673d62', class: "col-ctrl-input", type: "number", value: this.r, onInputChange: (v) => this.handleRgbChange('r', parseInt(v.detail)), variant: "plain" }))), h("div", { key: 'f4dce90ceb3f0849cb17101c07229b384739d5f1', class: "col-ctrl-row" }, h("span", { key: 'c3891f220f1fccf54fd84ded9674bad3100c530f', class: "col-ctrl-key" }, "G"), h("div", { key: '187f474a516c7a1bd35cce0e03e9aeb3c8d3b6b8', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '60be98aaf3e10a67b43bb2206e767d60e7bc1e04', class: "col-ctrl-input", type: "number", value: this.g, onInputChange: (v) => this.handleRgbChange('g', parseInt(v.detail)), variant: "plain" }))), h("div", { key: 'a844765b839bfa715a150932d1b3b80c44899d11', class: "col-ctrl-row", style: { marginBottom: '12px' } }, h("span", { key: '548be88547a50add11eb34c6f837e6fca6d9fbfd', class: "col-ctrl-key" }, "B"), h("div", { key: 'eaab04459f36946161d9165d917cff488b27a841', class: "col-ctrl-input-wrapper" }, h("ui-input", { key: '7a3b67f4b98a20e920c8c6537a48354a891d76e5', class: "col-ctrl-input", type: "number", value: this.b, onInputChange: (v) => this.handleRgbChange('b', parseInt(v.detail)), variant: "plain" }))), h("div", { key: '97a6584e32baa09c44a1c3dc80e93c45ea8b1282', class: "col-ctrl-row hex-row" }, h("span", { key: 'aed2ff62dd29ada3896212ede2c24cbf679591ca', class: "col-ctrl-key" }, "#"), h("div", { key: 'b75b8984f2e9dfca0c01022c45a2b1a6e23ba925', class: "col-ctrl-input-wrapper hex-wrapper" }, h("ui-input", { key: '1e051860e57dd8f10298ac939509173bebaca5e3', class: "col-ctrl-input hex-input", value: this.hex, onInputChange: (v) => this.handleHexInput({ detail: { value: v.detail } }), variant: "plain" }))))));
     }
     static get is() { return "ui-color-controller"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/context-menu/context-menu.css

@@ -100,9 +100,9 @@ html[data-theme=dark] :host .ctx-menu::-webkit-scrollbar-thumb {
 html[data-theme=dark] :host .ctx-menu {
   /* Portal Consistent Dark Theme */
   --ctx-bg: var(--bg-primary, #1e293b);
-  --ctx-fg: var(--bg-primary, #e2e8f0);
-  --ctx-border: var(--color-primary, #334155);
-  --ctx-hover: var(--color-primary, #334155);
+  --ctx-fg: var(--text-primary, #e2e8f0);
+  --ctx-border: var(--border-color, #334155);
+  --ctx-hover: var(--bg-secondary, #334155);
   --ctx-active: rgba(0, 138, 22, 0.15);
   --ctx-active-fg: var(--color-success, #008a16);
   --ctx-active-icon: var(--color-success, #008a16);

package/dist/collection/components/dialog-box/dialog-box.js

@@ -2157,7 +2157,7 @@ export class DialogBox {
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentVariant",
-                    "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",

package/dist/collection/components/dialog-header/dialog-header.js

@@ -349,7 +349,7 @@ export class DialogHeader {
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentVariant",
-                    "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",

package/dist/collection/components/dock-host/ui-dock-host.js

@@ -91,7 +91,7 @@ export class UiDockHost {
     }
     render() {
         const isFloating = this.dock === 'float';
-        return (h(Host, { key: 'eb4278c32044099287ccc523dfeb357eac020471', class: {
+        return (h(Host, { key: 'ae3a9906a747c4ae3d2f504e230b6438261bc699', class: {
                 'ui-dock-host-layout': true,
                 'is-floating': isFloating,
                 [`is-docked-${this.dock}`]: !isFloating,
@@ -105,14 +105,14 @@ export class UiDockHost {
                 top: '0',
                 left: '0',
                 pointerEvents: isFloating ? 'none' : 'auto' // Allow clicking through layout when only a floating window exists
-            } }, h("div", { key: '94e7a5c14e43b2148185a6cf1f82584e81b9d7fc', class: "dock-main-area", style: { flex: '1', overflow: 'auto', pointerEvents: 'auto' } }, h("slot", { key: 'd596984ab3af3b15b7ce804efa11d0c9deac4afb', name: "main" })), h("div", { key: '75305e8a892eaef65f9aad0b6616f51c420051ab', class: {
+            } }, h("div", { key: '9c64f35a9e8225b8ab4a4ca7b1ff516676a1b2aa', class: "dock-main-area", style: { flex: '1', overflow: 'auto', pointerEvents: 'auto' } }, h("slot", { key: '73fa260f89788adb5d6f04fc985052aa31fc1e5d', name: "main" })), h("div", { key: 'a2ec976d0c2268a1022fbf043936671a2932985f', class: {
                 'dock-panel': true,
                 'floating': isFloating,
                 [this.dock]: !isFloating
             }, style: {
                 ...this.getDockStyle(),
                 pointerEvents: 'auto'
-            } }, h("div", { key: '870aeb69f442ff5999d497fac1b24c3df06789d6', class: "dock-header", onMouseDown: this.onHeaderMouseDown }, h("span", { key: 'd805d6048ad33ba4b1985b697d6f385a4cf7542d', class: "dock-header-content" }, h("slot", { key: '773b00910c742b27390f6603dd4b953873c4d4b2', name: "header" }, "Dock Host")), h("ui-button", { key: 'f04e79da811c43f783126e42bbdbb30fe5bde7d5', variant: "ghost", onClick: this.toggleFloat, title: isFloating ? 'Dock' : 'Float', size: "sm", icon: isFloating ? 'layout' : 'maximize', iconLibrary: "lucide", label: isFloating ? 'Dock' : 'Float' })), h("div", { key: '4f9d5d7a1970a66fe5166de61835aaa6b37cb7ab', class: "dock-content" }, h("slot", { key: 'fa29815f9621d44f3e18506b57c899088502f7dc' })), isFloating && (h("div", { key: '1f62fef99c359ff8d4d15e959b70c584f50a979a', class: "dock-resize-handle", onMouseDown: this.onResizeMouseDown, style: { position: 'absolute', right: '0', bottom: '0', width: '16px', height: '16px', cursor: 'nwse-resize', zIndex: '10' } })))));
+            } }, h("div", { key: '12ae10fc29ce6cdb243964765cd5e6ea4d01742c', class: "dock-header", onMouseDown: this.onHeaderMouseDown }, h("span", { key: 'c0d6ef086badd0b21ab9c2d66fbf0a226d7be995', class: "dock-header-content" }, h("slot", { key: '09ac92cfe25a30b2213e2aefb26e71b5401dbfd0', name: "header" }, "Dock Host")), h("ui-button", { key: 'bf3971544a8e4ae3de4a311e8fcc71d679b8d9b7', variant: "ghost", onClick: this.toggleFloat, title: isFloating ? 'Dock' : 'Float', size: "sm", icon: isFloating ? 'layout' : 'maximize', iconLibrary: "lucide", label: isFloating ? 'Dock' : 'Float' })), h("div", { key: 'c7bc3b6668e730f5e466c977e625890ad820cb06', class: "dock-content" }, h("slot", { key: '50e0ce9c5beff1b054732c28bdcad6a01f2bd1ef' })), isFloating && (h("div", { key: 'd827c4c190fcd6a1fdf258d9524b7646e1d05619', class: "dock-resize-handle", onMouseDown: this.onResizeMouseDown, style: { position: 'absolute', right: '0', bottom: '0', width: '16px', height: '16px', cursor: 'nwse-resize', zIndex: '10' } })))));
     }
     static get is() { return "ui-dock-host"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/drag-drop/drag-drop.js

@@ -147,7 +147,7 @@ export class UIDragDrop {
         const styles = {
             gap: this.gap,
         };
-        return (h("div", { key: '51ed908447ec8729df4df557816c7e08b2db4620', class: containerClasses, style: styles, role: "list" }, this.internalItems.map((item, index) => this.renderItem(item, index))));
+        return (h("div", { key: '8610eaa90602aa5ddeebce5afe2437eec3aebc97', class: containerClasses, style: styles, role: "list" }, this.internalItems.map((item, index) => this.renderItem(item, index))));
     }
     static get is() { return "ui-drag-drop"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/empty-state/empty-state.js

@@ -372,7 +372,7 @@ export class EmptyState {
             padding: this.padding || undefined,
             maxWidth: this.maxWidth || undefined,
         };
-        return (h(Host, { key: '3291f3cc57238c4228b4c296fa831a5b87130b0d' }, h("div", { key: 'd122b911ff1f2a4b6e4591835fc6cb08fbc5ddec', class: containerClasses, style: containerStyle }, this.renderBackButton(), h("div", { key: '8165539538ff504236a84e7f244731bb5db23fc1', class: "empty-state-content" }, this.renderIcon(), h("slot", { key: 'cb9c3d2da3314438d9e109c22d28257591f778db', name: "heading" }, headingToShow && h("h2", { key: 'fffced165c0fec93f1843dfcfb0844fa2a6fead0', class: "empty-state-title" }, headingToShow)), h("slot", { key: '938212bdd5443ebc8570c524dc682cb90e4b0bca', name: "message" }, messageToShow && h("p", { key: '032f187cd7950217e221ad7034cbe60a2b79c2c7', class: "empty-state-message" }, messageToShow)), this.description && (h("p", { key: 'ccb6b30f65404e289daa468d96cde08565c09719', class: "empty-state-description" }, this.description)), h("slot", { key: 'f15c1b1bd9b174d4b31466f396f3d93ff7b4fb3e', name: "custom-content" }), this.renderItems(), this.renderActions(), h("slot", { key: 'f596bf19b1d025f026220247f0b2fab6600bdab2', name: "footer" })))));
+        return (h(Host, { key: '0f7a224ca36c6e2fcda778b134ed8d8d4396d9b6' }, h("div", { key: '6ac5efd99135e6484d84139250e84e8e22b7fedd', class: containerClasses, style: containerStyle }, this.renderBackButton(), h("div", { key: 'c8ab7670d312a8ea4e5e69b2331db1b6374476c4', class: "empty-state-content" }, this.renderIcon(), h("slot", { key: '11d5618957f52edc36c6db9370b630bf02ef58fc', name: "heading" }, headingToShow && h("h2", { key: '786051e59375b5e04cad426320fc768a0622cf82', class: "empty-state-title" }, headingToShow)), h("slot", { key: '11a7eb49b8e3eb457942125ad1512bfaf062228b', name: "message" }, messageToShow && h("p", { key: '7c74c4c3721f562ae616ee1992ab0782f81f6b3d', class: "empty-state-message" }, messageToShow)), this.description && (h("p", { key: 'a49d0e45e660f30a3af67c6db480cf2ce2a5717e', class: "empty-state-description" }, this.description)), h("slot", { key: '31d8ea03a88a1032c02fa6ae1bb511d1a239cd62', name: "custom-content" }), this.renderItems(), this.renderActions(), h("slot", { key: '20d487b415fe17ba94746fafd2bbf97dfa033b0d', name: "footer" })))));
     }
     static get is() { return "ui-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fab/fab.js

@@ -244,14 +244,14 @@ export class Fab {
             '--fab-offset-y': `${this.currentY}px`,
             'z-index': this.zIndex.toString()
         };
-        return (h(Host, { key: '3134d7c95b289f7ba1fbe491e2381a39ab33cd90', class: hostClasses, style: hostStyles }, this.backdrop && this.internalOpen && (h("div", { key: '65ab05d3229cdd3c50436461400a93dfbdc79f89', class: "fab-backdrop", onClick: this.handleBackdropClick })), h("div", { key: '095790fe29d7b5110679b9e83af15e16654b5f9c', class: "fab-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, isSpeedDial && (h("div", { key: 'cd098ce374a0f59635d9e36f94cc8873225a35c7', class: "fab-actions", "aria-hidden": !this.internalOpen ? 'true' : 'false' }, h("slot", { key: '22573c4f39319b8c438265035c7062eabd31a0dd', name: "actions" }))), this.panel && (h("div", { key: 'eba8176fc2531f4984f1a15db4439d739d72c364', class: {
+        return (h(Host, { key: '7e6f5d73427366ff17f1f5e65bd17f6835098b63', class: hostClasses, style: hostStyles }, this.backdrop && this.internalOpen && (h("div", { key: 'f1256c22cd5f454ca9d17c3ebd30c0cdf541b491', class: "fab-backdrop", onClick: this.handleBackdropClick })), h("div", { key: 'c6772712b949c61127a52722a7e0d2a85ec09f06', class: "fab-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, isSpeedDial && (h("div", { key: '0398eb0d055bb156268bcb3af06ca48c89b894a3', class: "fab-actions", "aria-hidden": !this.internalOpen ? 'true' : 'false' }, h("slot", { key: '5cd5d9f5bc34719f89645cda401eb6d85db11449', name: "actions" }))), this.panel && (h("div", { key: 'd9075d5a11d5c4d0394e4d637f09f24dc03870af', class: {
                 'fab-panel': true,
                 'has-header': !!this.panelTitle
             }, role: "dialog", "aria-hidden": !this.internalOpen ? 'true' : 'false', style: {
                 width: this.panelWidth,
                 height: this.panelHeight,
                 maxHeight: this.panelMaxHeight
-            } }, this.panelTitle && (h("div", { key: '32f400ac44e2559bc42857c5f953c8339749747b', class: "fab-panel-header" }, h("span", { key: 'a8ab67880b596cf3ac7ee9608ed69533da83a164', class: "fab-panel-title" }, this.panelTitle), h("ui-button", { key: '8258cd221bf4f1ce486f2e789ffa160609385c1f', variant: "ghost", class: "fab-panel-close", onClick: () => this.closeFab(), ariaLabel: "Close panel", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" }))), h("div", { key: 'b934937a301cfa9f759644679a5b42b88bdfb956', class: "fab-panel-body" }, h("slot", { key: 'd0583bd15b3a49b9d0d78698464811cd7d3ddccf', name: "panel" })), h("div", { key: '628ff324c833159612e523ca14c8b34ee591d23f', class: "fab-panel-footer" }, h("slot", { key: '4d738a08683eae8f5ad3d96397b65983c9f00deb', name: "panel-footer" })))), h("ui-button", { key: '40f831f7769b5918779a74100aab35ebe87d46ae', variant: this.variant, shape: this.type === 'extended' || (this.label && this.type !== 'speed-dial') ? 'rounded' : 'circle', class: "fab-trigger", disabled: this.disabled || this.loading, loading: this.loading, ariaLabel: this.label || 'Floating Action Button', onClick: this.handleClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp, label: isExtended && this.label ? this.label : undefined, icon: this.icon, iconOnly: !isExtended, size: this.size === 'mini' ? 'sm' : (this.size === 'lg' ? 'lg' : 'md') }, isSpeedDial && this.toggle && this.internalOpen && (h("ui-icon", { key: '46fdd3e22ff4ae11f0fa3b27166db77bb0ca4a38', slot: "icon", class: "fab-icon close-icon", name: "x", size: this.size === 'mini' ? '18' : '24' })), !this.icon && !isExtended && h("slot", { key: '045dd7944e14501a0a703754ee21bc1f2d77fdff', name: "trigger" })))));
+            } }, this.panelTitle && (h("div", { key: '3becbad472d14e38d2b3ab20e2ff4c34e0269e0f', class: "fab-panel-header" }, h("span", { key: 'b140b40024a609232de0a763654d03dd0f225a9b', class: "fab-panel-title" }, this.panelTitle), h("ui-button", { key: 'e72642cfa211273ef540eab5e293e950c0180415', variant: "ghost", class: "fab-panel-close", onClick: () => this.closeFab(), ariaLabel: "Close panel", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" }))), h("div", { key: 'f8006eb878ba30e0711f74633b4cd6e85c9f41bb', class: "fab-panel-body" }, h("slot", { key: '35933e69377366b5405245f7f32df3201390066d', name: "panel" })), h("div", { key: '4332e87ae404c1cd4d4a5799f1f25d8a430df709', class: "fab-panel-footer" }, h("slot", { key: '7dbbc44576c425495dd7cd8ba53f93a9b7ff1d6a', name: "panel-footer" })))), h("ui-button", { key: 'e0459872b67bac7714d6eef306cf232253f3bfd1', variant: this.variant, shape: this.type === 'extended' || (this.label && this.type !== 'speed-dial') ? 'rounded' : 'circle', class: "fab-trigger", disabled: this.disabled || this.loading, loading: this.loading, ariaLabel: this.label || 'Floating Action Button', onClick: this.handleClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp, label: isExtended && this.label ? this.label : undefined, icon: this.icon, iconOnly: !isExtended, size: this.size === 'mini' ? 'sm' : (this.size === 'lg' ? 'lg' : 'md') }, isSpeedDial && this.toggle && this.internalOpen && (h("ui-icon", { key: 'c001fc5d8906bb8aadab821856f181fa204e994a', slot: "icon", class: "fab-icon close-icon", name: "x", size: this.size === 'mini' ? '18' : '24' })), !this.icon && !isExtended && h("slot", { key: '73458b1312ff61bcf62fb97bf076c0684389cc57', name: "trigger" })))));
     }
     static get is() { return "ui-fab"; }
     static get encapsulation() { return "shadow"; }