atomicuilibrary 0.1.0 → 0.1.3

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

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

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

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

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

@@ -105,6 +105,10 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   position: relative;
 }
+.card-face-content.has-open-menu {
+  overflow: visible !important;
+  z-index: 100 !important;
+}
 
 .card-details-wrapper {
   display: flex;
@@ -640,11 +644,37 @@
   padding: 20px;
 }
 
+.skeleton-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.skeleton-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.skeleton-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+}
+
+.skeleton-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 .skeleton-avatar {
   background: var(--bg-secondary, #f3f4f6);
   width: 48px;
   height: 48px;
   border-radius: 50%;
+  flex-shrink: 0;
 }
 
 .skeleton-text {
@@ -654,6 +684,19 @@
   position: relative;
   overflow: hidden;
 }
+.skeleton-text.skeleton-title {
+  width: 60%;
+}
+.skeleton-text.skeleton-subtitle {
+  width: 40%;
+  height: 12px;
+}
+.skeleton-text.full {
+  width: 100%;
+}
+.skeleton-text.half {
+  width: 50%;
+}
 .skeleton-text::after {
   content: "";
   position: absolute;
@@ -684,32 +727,201 @@
 }
 
 /* --- Dark Theme Support --- */
-:host-context([data-theme=dark]) .card-face-content {
+:host-context(.dark) .card-face-content,
+:host-context([data-theme=dark]) .card-face-content,
+:host(.dark) .card-face-content,
+:host([data-theme=dark]) .card-face-content {
   background: var(--bg-primary, #1f2937);
   border-color: var(--border-default, #374151);
   color: var(--text-standard, #f3f4f6);
 }
-:host-context([data-theme=dark]) .card-title-text {
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Restore color variants left border in dark mode (excluding emphasized cards) */
+}
+:host-context(.dark) .card-variant-primary:not(.card-importance-emphasized),
+:host-context([data-theme=dark]) .card-variant-primary:not(.card-importance-emphasized),
+:host(.dark) .card-variant-primary:not(.card-importance-emphasized),
+:host([data-theme=dark]) .card-variant-primary:not(.card-importance-emphasized) {
+  border-left: 4px solid var(--ui-card-primary) !important;
+}
+:host-context(.dark) .card-variant-success:not(.card-importance-emphasized),
+:host-context([data-theme=dark]) .card-variant-success:not(.card-importance-emphasized),
+:host(.dark) .card-variant-success:not(.card-importance-emphasized),
+:host([data-theme=dark]) .card-variant-success:not(.card-importance-emphasized) {
+  border-left: 4px solid var(--ui-card-success) !important;
+}
+:host-context(.dark) .card-variant-warning:not(.card-importance-emphasized),
+:host-context([data-theme=dark]) .card-variant-warning:not(.card-importance-emphasized),
+:host(.dark) .card-variant-warning:not(.card-importance-emphasized),
+:host([data-theme=dark]) .card-variant-warning:not(.card-importance-emphasized) {
+  border-left: 4px solid var(--ui-card-warning) !important;
+}
+:host-context(.dark) .card-variant-danger:not(.card-importance-emphasized),
+:host-context([data-theme=dark]) .card-variant-danger:not(.card-importance-emphasized),
+:host(.dark) .card-variant-danger:not(.card-importance-emphasized),
+:host([data-theme=dark]) .card-variant-danger:not(.card-importance-emphasized) {
+  border-left: 4px solid var(--ui-card-danger) !important;
+}
+:host-context(.dark) .card-variant-info:not(.card-importance-emphasized),
+:host-context([data-theme=dark]) .card-variant-info:not(.card-importance-emphasized),
+:host(.dark) .card-variant-info:not(.card-importance-emphasized),
+:host([data-theme=dark]) .card-variant-info:not(.card-importance-emphasized) {
+  border-left: 4px solid var(--ui-card-info) !important;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Restore status cards colored background and borders in dark mode */
+}
+:host-context(.dark) .card-variant-status,
+:host-context([data-theme=dark]) .card-variant-status,
+:host(.dark) .card-variant-status,
+:host([data-theme=dark]) .card-variant-status {
+  border-color: var(--border-default, #374151);
+}
+:host-context(.dark) .card-variant-status.card-color-primary,
+:host-context([data-theme=dark]) .card-variant-status.card-color-primary,
+:host(.dark) .card-variant-status.card-color-primary,
+:host([data-theme=dark]) .card-variant-status.card-color-primary {
+  border-color: var(--ui-card-primary) !important;
+  background: color-mix(in srgb, var(--ui-card-primary) 8%, var(--bg-primary, #1f2937)) !important;
+}
+:host-context(.dark) .card-variant-status.card-color-success,
+:host-context([data-theme=dark]) .card-variant-status.card-color-success,
+:host(.dark) .card-variant-status.card-color-success,
+:host([data-theme=dark]) .card-variant-status.card-color-success {
+  border-color: var(--ui-card-success) !important;
+  background: color-mix(in srgb, var(--ui-card-success) 8%, var(--bg-primary, #1f2937)) !important;
+}
+:host-context(.dark) .card-variant-status.card-color-warning,
+:host-context([data-theme=dark]) .card-variant-status.card-color-warning,
+:host(.dark) .card-variant-status.card-color-warning,
+:host([data-theme=dark]) .card-variant-status.card-color-warning {
+  border-color: var(--ui-card-warning) !important;
+  background: color-mix(in srgb, var(--ui-card-warning) 8%, var(--bg-primary, #1f2937)) !important;
+}
+:host-context(.dark) .card-variant-status.card-color-danger,
+:host-context([data-theme=dark]) .card-variant-status.card-color-danger,
+:host(.dark) .card-variant-status.card-color-danger,
+:host([data-theme=dark]) .card-variant-status.card-color-danger {
+  border-color: var(--ui-card-danger) !important;
+  background: color-mix(in srgb, var(--ui-card-danger) 8%, var(--bg-primary, #1f2937)) !important;
+}
+:host-context(.dark) .card-variant-status.card-color-info,
+:host-context([data-theme=dark]) .card-variant-status.card-color-info,
+:host(.dark) .card-variant-status.card-color-info,
+:host([data-theme=dark]) .card-variant-status.card-color-info {
+  border-color: var(--ui-card-info) !important;
+  background: color-mix(in srgb, var(--ui-card-info) 8%, var(--bg-primary, #1f2937)) !important;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Restore emphasized cards premium gradient background in dark mode */
+}
+:host-context(.dark) .card-importance-emphasized,
+:host-context([data-theme=dark]) .card-importance-emphasized,
+:host(.dark) .card-importance-emphasized,
+:host([data-theme=dark]) .card-importance-emphasized {
+  border: none !important;
+  background: linear-gradient(135deg, var(--bg-secondary, #111827) 0%, var(--color-primary, #374151) 100%) !important;
+  color: var(--text-standard, #ffffff) !important;
+}
+:host-context(.dark) .card-importance-emphasized .card-title-text,
+:host-context(.dark) .card-importance-emphasized .card-content,
+:host-context(.dark) .card-importance-emphasized .card-extra,
+:host-context(.dark) .card-importance-emphasized .card-description,
+:host-context([data-theme=dark]) .card-importance-emphasized .card-title-text,
+:host-context([data-theme=dark]) .card-importance-emphasized .card-content,
+:host-context([data-theme=dark]) .card-importance-emphasized .card-extra,
+:host-context([data-theme=dark]) .card-importance-emphasized .card-description,
+:host(.dark) .card-importance-emphasized .card-title-text,
+:host(.dark) .card-importance-emphasized .card-content,
+:host(.dark) .card-importance-emphasized .card-extra,
+:host(.dark) .card-importance-emphasized .card-description,
+:host([data-theme=dark]) .card-importance-emphasized .card-title-text,
+:host([data-theme=dark]) .card-importance-emphasized .card-content,
+:host([data-theme=dark]) .card-importance-emphasized .card-extra,
+:host([data-theme=dark]) .card-importance-emphasized .card-description {
+  color: var(--text-standard, #ffffff) !important;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Restore glassmorphic cards translucent backdrop and border in dark mode */
+}
+:host-context(.dark) .card-glass,
+:host-context([data-theme=dark]) .card-glass,
+:host(.dark) .card-glass,
+:host([data-theme=dark]) .card-glass {
+  background: rgba(15, 23, 42, 0.45) !important;
+  border-color: rgba(255, 255, 255, 0.08) !important;
+  backdrop-filter: blur(12px) !important;
+  -webkit-backdrop-filter: blur(12px) !important;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Restore selected cards border in dark mode */
+}
+:host-context(.dark) .card-selected,
+:host-context([data-theme=dark]) .card-selected,
+:host(.dark) .card-selected,
+:host([data-theme=dark]) .card-selected {
+  border-color: var(--ui-card-selected-border) !important;
+}
+:host-context(.dark) .card-title-text,
+:host-context([data-theme=dark]) .card-title-text,
+:host(.dark) .card-title-text,
+:host([data-theme=dark]) .card-title-text {
   color: var(--text-standard, #f9fafb);
 }
-:host-context([data-theme=dark]) .card-header {
+:host-context(.dark) .card-header,
+:host-context([data-theme=dark]) .card-header,
+:host(.dark) .card-header,
+:host([data-theme=dark]) .card-header {
   border-bottom-color: var(--border-default, #374151);
 }
-:host-context([data-theme=dark]) .card-footer {
+:host-context(.dark) .card-footer,
+:host-context([data-theme=dark]) .card-footer,
+:host(.dark) .card-footer,
+:host([data-theme=dark]) .card-footer {
   border-top-color: var(--border-default, #374151);
 }
-:host-context([data-theme=dark]) .menu-dropdown {
+:host-context(.dark) .menu-dropdown,
+:host-context([data-theme=dark]) .menu-dropdown,
+:host(.dark) .menu-dropdown,
+:host([data-theme=dark]) .menu-dropdown {
   background: var(--bg-primary, #1f2937);
   border-color: var(--border-default, #374151);
 }
-:host-context([data-theme=dark]) .menu-item {
+:host-context(.dark) .menu-item,
+:host-context([data-theme=dark]) .menu-item,
+:host(.dark) .menu-item,
+:host([data-theme=dark]) .menu-item {
   color: var(--bg-secondary, #d1d5db);
 }
-:host-context([data-theme=dark]) .menu-item:hover {
+:host-context(.dark) .menu-item:hover,
+:host-context([data-theme=dark]) .menu-item:hover,
+:host(.dark) .menu-item:hover,
+:host([data-theme=dark]) .menu-item:hover {
   background: var(--color-primary, #374151);
   color: var(--text-standard, #f9fafb);
 }
+:host-context(.dark) .skeleton-text,
+:host-context(.dark) .skeleton-avatar,
 :host-context([data-theme=dark]) .skeleton-text,
-:host-context([data-theme=dark]) .skeleton-avatar {
-  background: var(--color-primary, #374151);
+:host-context([data-theme=dark]) .skeleton-avatar,
+:host(.dark) .skeleton-text,
+:host(.dark) .skeleton-avatar,
+:host([data-theme=dark]) .skeleton-text,
+:host([data-theme=dark]) .skeleton-avatar {
+  background: var(--bg-secondary, #374151);
 }

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

@@ -342,6 +342,7 @@ export class Card {
             'card-selected': this.selected,
             'card-clickable': !!((this.href || this.clickable) && !this.flippable),
             'card-glass': this.glass,
+            'has-open-menu': this.isMenuOpen,
             [`card-layout-${this.layout}`]: true,
             [`card-importance-${this.importance}`]: true,
             [`card-pattern-${this.pattern}`]: true,
@@ -389,7 +390,7 @@ export class Card {
             width: typeof this.width === 'string' ? this.width : undefined,
             height: typeof this.height === 'string' ? this.height : undefined,
         };
-        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: {
+        return (h(Host, { key: 'd3957a8995d121511a78f4639c913d09f276f23a', class: hostClass, style: containerStyle, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.ribbon && (h("div", { key: 'd6876c833f4b02af4b78b370e3168b4ea1630f87', class: `card-ribbon ribbon-${this.ribbonPosition}`, style: this.ribbonColor ? { backgroundColor: this.ribbonColor } : {} }, h("span", { key: 'a42c047dd8f66aca2754b18fc8e3a335dde47c74' }, 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()])))));
@@ -534,7 +535,7 @@ export class Card {
                 "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/checkbox/checkbox.js

@@ -225,7 +225,7 @@ export class Checkbox {
             'checkbox-indeterminate': this.indeterminate,
             'checkbox-ripple': this.rippleEffect && !this.disabled,
         };
-        return (h("div", { key: '98ae46b3ba03456e81610b5c1558d2f62b2c697e', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr', style: { '--reveal-delay': `${this.revealDelay}ms` } }, h("label", { key: '8d7a330bb7f92b454076bef8e22cee9daa8f9fb4', class: "checkbox-label", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, (this.labelPosition === 'left' || this.labelPosition === 'top') && this.renderLabel(), h("div", { key: 'fd9728537e2c16a564f9b363012802ba8fa1235e', class: checkboxClasses }, h("input", { key: '1074f40300a98aaef23eb2c03466cc972b1b3090', ref: el => this.inputElement = el, type: "checkbox", class: "checkbox-input", checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value, name: this.name, tabindex: this.checkboxTabIndex, "aria-label": this.ariaLabel || this.label, "aria-describedby": this.ariaDescribedBy, "aria-checked": this.indeterminate ? 'mixed' : this.checked.toString(), "aria-invalid": this.invalid.toString(), onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), h("div", { key: 'c769aaf4fe33649562de2848871114f15c88b742', class: "checkbox-box" }, h("div", { key: '7de0b8700ecaad754fe7bc0e44da00852c4bb014', class: "glow-layer" }), this.renderCheckmark(), this.particles.map(p => (h("span", { class: "btn-confetti", key: p.id, style: {
+        return (h("div", { key: '673150aaef8e061ffa6707069559d0c8c7443fc3', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr', style: { '--reveal-delay': `${this.revealDelay}ms` } }, h("label", { key: '3f5ee2f5bb51d48665ee7c474fcb391b6935a2d3', class: "checkbox-label", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, (this.labelPosition === 'left' || this.labelPosition === 'top') && this.renderLabel(), h("div", { key: '2c6cf630253c513b809f538a3eb242a85ed35de2', class: checkboxClasses }, h("input", { key: '0a8619f9539cdf9e4c204d1624ee04af795c705d', ref: el => this.inputElement = el, type: "checkbox", class: "checkbox-input", checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.value, name: this.name, tabindex: this.checkboxTabIndex, "aria-label": this.ariaLabel || this.label, "aria-describedby": this.ariaDescribedBy, "aria-checked": this.indeterminate ? 'mixed' : this.checked.toString(), "aria-invalid": this.invalid.toString(), onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown }), h("div", { key: '4b9e1d7467487f5e099f79334e80be33cf79aa46', class: "checkbox-box" }, h("div", { key: '7214d1c9b1ed15c2de19011566764e4961919ef0', class: "glow-layer" }), this.renderCheckmark(), this.particles.map(p => (h("span", { class: "btn-confetti", key: p.id, style: {
                 left: `${p.x}%`,
                 top: `${p.y}%`,
                 '--vx': `${p.vx}px`,
@@ -234,7 +234,7 @@ export class Checkbox {
                 backgroundColor: p.color,
                 width: `${p.size}px`,
                 height: `${p.size}px`
-            } })))), this.badge && h("span", { key: '99ad8db8cebfa106f5865c0a96470cb481ef9e91', class: "checkbox-badge" }, this.badge), this.tooltip && (h("div", { key: 'a2c46d9e27e9d404d543c31a1449b0ae945965c2', class: `checkbox-tooltip checkbox-tooltip-${this.tooltipPosition}` }, this.tooltip))), (this.labelPosition === 'right' || this.labelPosition === 'bottom') && this.renderLabel()), this.renderHelperText()));
+            } })))), this.badge && h("span", { key: '370c8a224d1234ca2c83cfda6bc18d1af4a9f29d', class: "checkbox-badge" }, this.badge), this.tooltip && (h("div", { key: 'eb8c1e6a57151d12846e897b79ec86c9256cdf4b', class: `checkbox-tooltip checkbox-tooltip-${this.tooltipPosition}` }, this.tooltip))), (this.labelPosition === 'right' || this.labelPosition === 'bottom') && this.renderLabel()), this.renderHelperText()));
     }
     static get is() { return "ui-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -588,7 +588,7 @@ export class Checkbox {
                 "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/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: '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()));
+        return (h("div", { key: '5229f839ffa5013cc1353c43d54c3315d6aa0c11', class: `code-editor-container ${themeClass}` }, this.renderTabBar(), this.renderToolbar(), this.renderPalette(), h("div", { key: '6564c00ec9a82be1bcb45a18940fe7556b0393df', class: "code-editor-layout" }, this.renderSidebar(), h("div", { key: 'f47ffa82fba7f827560b696c1f7405e65615571b', class: "editor-main-panel" }, this.renderBreadcrumbs(), h("div", { key: 'a1fef31453e1575e131734c36e0a4c1b719ea837', class: "editor-main-content", style: { display: 'flex', flex: '1', minHeight: '0', position: 'relative' } }, this.renderLineNumbers(), h("div", { key: '20e82ae884cd7bf7adf2fcbe89381b8df7fba253', class: "editor-wrapper" }, this.renderSearch(), this.renderSuggestions(), h("ui-button", { key: '35f030759ebe50cbfd90e5b993ddd950b6762956', variant: "ghost", class: "copy-button", onClick: this.handleCopy, ariaLabel: "Copy Code", icon: "copy", iconLibrary: "fontawesome", iconOnly: true }), h("pre", { key: 'dcc2605b0183153a60e5242ff75af686c1e2d591', class: "syntax-highlighter", ref: el => this.pre = el, innerHTML: sanitizeHTML(this.highlightedCode) }), h("textarea", { key: '64339f4a719d2f1b5851cd886b741b56eb5d0e58', 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: '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)))));
+        return (h("div", { key: '811103de21fb5c3ff463e4088243cfc9105b1273', class: { 'code-preview-root': true, 'is-expanded': this.expanded } }, h("div", { key: '79b59a2fe64d31f795f8f10d4ae96eac2156ec70', class: "code-toolbar" }, h("div", { key: '96fe58a5fb9fa40551bb9be4b5f5b59339759bee', class: "left-actions" }, this.label && h("span", { key: '3eda520830a007b75d8dea1b565b26341afb9974', class: "code-label" }, this.label), this.internalSnippets.length > 1 && (h("div", { key: 'dd51e5c06a645a7561c613c68bfdccf4471a1bd5', 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: 'f5b0ae6583318202d615626051922de254ca5aef', class: "code-label", style: { opacity: '0.7', fontSize: '12px' } }, this.getLabel(this.internalSnippets[0])))), h("div", { key: '288495bfd25c894386dff4736b2db81967ae0b08', class: "right-actions" }, this.showReset && (h("ui-button", { key: '17ee0a23664d63660bab0d7fc393a07fc73f7eb2', 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: '98fa30e525d7714e6fa890fb28ab79427afb72f9', 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: '9766773c94ea197a8a9121e684fb9ef70519242c', 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: 'c119a017577a7c95213cc91f152baec31a3d03ac', class: "code-container", style: { maxHeight: this.expanded ? '800px' : '0' } }, h("pre", { key: '9c1b4083099695f7cf587df3c234467a4cdc6430', class: `language-${prismLang}` }, h("code", { key: '6267458fadcd83701e97f09e2bddbf7132de54bb', class: `language-${prismLang}` }, currentCode)))));
     }
     static get is() { return "ui-code-preview"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/color-picker/color-picker.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .sr-only {
   position: absolute !important;
   width: 1px !important;
@@ -83,17 +84,71 @@
   color: var(--text-muted, #9ca3af);
 }
 
+/* Compact trigger — swatch-only button */
+.cp-trigger-compact {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px;
+  border: 1.5px solid var(--border-strong, #d1d5db);
+  border-radius: 8px;
+  background: var(--bg-primary, #ffffff);
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.cp-trigger-compact:hover:not(:disabled) {
+  border-color: var(--color-primary, #10b981);
+  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.12);
+}
+.cp-trigger-compact.cp-open {
+  border-color: var(--color-primary, #10b981);
+  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.15);
+}
+.cp-trigger-compact:disabled, .cp-trigger-compact.cp-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cp-trigger-compact-swatch {
+  width: 26px;
+  height: 26px;
+  border-radius: 5px;
+  border: 1.5px solid rgba(0, 0, 0, 0.1);
+  display: block;
+}
+
+/* Size variants for compact trigger */
+:host(.cp-size-sm) .cp-trigger-compact {
+  border-radius: 6px;
+}
+
+:host(.cp-size-sm) .cp-trigger-compact-swatch {
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+}
+
+:host(.cp-size-lg) .cp-trigger-compact {
+  border-radius: 10px;
+}
+
+:host(.cp-size-lg) .cp-trigger-compact-swatch {
+  width: 32px;
+  height: 32px;
+  border-radius: 7px;
+}
+
 /* Dropdown */
 .cp-dropdown {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 0;
-  z-index: 1000;
+  /* position:fixed + coordinates set via JS — never clipped by parent overflow */
+  position: fixed;
+  z-index: 9999;
   background: var(--bg-primary, #ffffff);
   border: 1px solid var(--border-default, #e5e7eb);
   border-radius: 14px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
-  overflow: hidden;
+  /* overflow is managed entirely by JS via inline styles (max-height + overflow-y/x) */
+  overflow-x: hidden;
   animation: cp-drop-in 0.15s ease;
 }
 
@@ -109,7 +164,7 @@
 }
 /* Panel */
 .cp-panel {
-  width: 460px;
+  width: 430px;
   padding: 14px;
 }
 
@@ -268,6 +323,55 @@
   --ui-input-text-align: left;
 }
 
+/* Inline validation error */
+.cp-input-field-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  flex: 1;
+}
+
+.cp-channel-col {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  flex: 1;
+}
+
+.cp-field-error {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-danger, #ef4444);
+  margin-top: 5px;
+  padding: 3px 8px;
+  background: rgba(239, 68, 68, 0.08);
+  border-radius: 6px;
+  border-left: 2px solid var(--color-danger, #ef4444);
+  animation: cp-field-error-in 0.25s ease, cp-shake 0.3s ease;
+}
+
+@keyframes cp-field-error-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes cp-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-3px);
+  }
+  75% {
+    transform: translateX(3px);
+  }
+}
 :host(.cp-variant-hue) .cp-panel {
   padding-block: 12px;
 }