atomicuilibrary 0.0.1 → 0.1.3

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';
@@ -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",
@@ -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: '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: '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: '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;
 }