atomicuilibrary 0.0.1 → 0.1.0

package/dist/collection/assets/js/demos/tree-demo.js

@@ -1,4 +1,12 @@
 /* eslint-disable no-undef */
+function updateTreeActiveBtn(demoName) {
+  const section = document.getElementById('tree');
+  if (!section) return;
+  section.querySelectorAll('.demo-controls ui-button').forEach(btn => {
+    btn.selected = btn.getAttribute('data-demo') === demoName;
+  });
+}
+
 export function initTreeDemo() {
   const section = document.getElementById('tree');
   if (!section) return;
@@ -13,16 +21,16 @@ export function initTreeDemo() {
     </p>
 
     <div class="demo-controls" style="display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px;">
-      <ui-button onclick="window.showTreeBasic()" variant="outline" label="Basic" icon="leaf" library="lucide"></ui-button>
-      <ui-button onclick="window.showTreeModernGreen()" variant="outline" label="Modern Green" icon="beaker" library="lucide"></ui-button>
-      <ui-button onclick="window.showTreeCheckboxes()" variant="outline" label="Checkboxes" icon="check-square" library="lucide" style="background:#34d399;"></ui-button>
-      <ui-button onclick="window.showTreeDND()"  variant="outline" color="warning" label="Drag & Drop" icon="move" library="lucide"></ui-button>
-      <ui-button onclick="window.showTreeOrgChart()" variant="outline" color="primary" label="Org Chart" icon="users" library="lucide" style="background:#8b5cf6;"></ui-button>
-      <ui-button onclick="window.showTreeAesthetics()" variant="outline" color="info" label="Aesthetics" icon="palette" library="lucide" style="background:#14b8a6;"></ui-button>
-      <ui-button onclick="window.showTreeStress()" variant="outline" color="danger" label="Stress Test" icon="flame" library="lucide"></ui-button>
-      <ui-button onclick="window.showTreeGitGraph()" variant="outline" color="secondary" label="Git Graph" icon="git-branch" library="lucide" style="background:#64748b;"></ui-button>
-      <ui-button onclick="window.showTreeIcons()" variant="outline" color="warning" label="Custom Icons" icon="plus" library="lucide"></ui-button>
-      <ui-button onclick="window.showTreePlayground()" variant="outline" color="primary" label="Playground" icon="gamepad-2" library="lucide" style="background:#6366f1;"></ui-button>
+      <ui-button onclick="window.showTreeBasic()" data-demo="basic" variant="outline" label="Basic" icon="leaf" library="lucide"></ui-button>
+      <ui-button onclick="window.showTreeModernGreen()" data-demo="moderngeen" variant="outline" label="Modern Green" icon="beaker" library="lucide"></ui-button>
+      <ui-button onclick="window.showTreeCheckboxes()" data-demo="checkboxes" variant="outline" label="Checkboxes" icon="check-square" library="lucide" style="background:#34d399;"></ui-button>
+      <ui-button onclick="window.showTreeDND()" data-demo="dnd" variant="outline" label="Drag & Drop" icon="move" library="lucide"></ui-button>
+      <ui-button onclick="window.showTreeOrgChart()" data-demo="orgchart" variant="outline" label="Org Chart" icon="users" library="lucide" style="background:#8b5cf6;"></ui-button>
+      <ui-button onclick="window.showTreeAesthetics()" data-demo="aesthetics" variant="outline" label="Aesthetics" icon="palette" library="lucide" style="background:#14b8a6;"></ui-button>
+      <ui-button onclick="window.showTreeStress()" data-demo="stress" variant="outline" label="Stress Test" icon="flame" library="lucide"></ui-button>
+      <ui-button onclick="window.showTreeGitGraph()" data-demo="gitgraph" variant="outline" label="Git Graph" icon="git-branch" library="lucide" style="background:#64748b;"></ui-button>
+      <ui-button onclick="window.showTreeIcons()" data-demo="icons" variant="outline" label="Custom Icons" icon="plus" library="lucide"></ui-button>
+      <ui-button onclick="window.showTreePlayground()" data-demo="playground" variant="outline" label="Playground" icon="gamepad-2" library="lucide" style="background:#6366f1;"></ui-button>
     </div>
 
     <div id="treeDemoContainer" style="margin-top:8px; display:grid; grid-template-columns: 1fr; gap:32px;"></div>
@@ -368,6 +376,7 @@ function generateStressTestData() {
 }
 
 window.showTreeBasic = function () {
+  updateTreeActiveBtn('basic');
   const container = document.getElementById('treeDemoContainer');
   if (!container) return;
   container.innerHTML = `
@@ -389,6 +398,7 @@ window.showTreeBasic = function () {
 };
 
 window.showTreeModernGreen = function () {
+  updateTreeActiveBtn('moderngeen');
   const container = document.getElementById('treeDemoContainer');
   if (!container) return;
   container.innerHTML = `
@@ -410,6 +420,7 @@ window.showTreeModernGreen = function () {
 };
 
 window.showTreeCheckboxes = function () {
+  updateTreeActiveBtn('checkboxes');
   const container = document.getElementById('treeDemoContainer');
   if (!container) return;
   container.innerHTML = `
@@ -430,6 +441,7 @@ window.showTreeCheckboxes = function () {
 };
 
 window.showTreeDND = function () {
+  updateTreeActiveBtn('dnd');
   const container = document.getElementById('treeDemoContainer');
   if (!container) return;
   container.innerHTML = `
@@ -453,6 +465,7 @@ window.showTreeDND = function () {
 };
 
 window.showTreeOrgChart = function () {
+  updateTreeActiveBtn('orgchart');
   const container = document.getElementById('treeDemoContainer');
   if (!container) return;
   container.innerHTML = `
@@ -470,6 +483,7 @@ window.showTreeOrgChart = function () {
 };
 
 window.showTreeAesthetics = function () {
+  updateTreeActiveBtn('aesthetics');
   const container = document.getElementById('treeDemoContainer');
   if (!container) return;
   container.innerHTML = `
@@ -499,6 +513,7 @@ window.showTreeAesthetics = function () {
 };
 
 window.showTreeStress = function () {
+  updateTreeActiveBtn('stress');
   const container = document.getElementById('treeDemoContainer');
   if (!container) return;
 
@@ -531,6 +546,7 @@ window.showTreeStress = function () {
 };
 
 window.showTreeGitGraph = function () {
+  updateTreeActiveBtn('gitgraph');
   const container = document.getElementById('treeDemoContainer');
   if (!container) return;
   container.innerHTML = `
@@ -554,6 +570,7 @@ window.showTreeGitGraph = function () {
 };
 
 window.showTreeIcons = function () {
+  updateTreeActiveBtn('icons');
   const container = document.getElementById('treeDemoContainer');
   if (!container) return;
   container.innerHTML = `
@@ -589,6 +606,7 @@ window.showTreeIcons = function () {
 };
 
 window.showTreePlayground = function () {
+  updateTreeActiveBtn('playground');
   const container = document.getElementById('treeDemoContainer');
   if (!container) return;
 

package/dist/collection/collection-manifest.json

@@ -21,6 +21,7 @@
     "components/button/button.js",
     "components/horizontal-nav/horizontal-nav.js",
     "components/knob/knob.js",
+    "components/loader/loader.js",
     "components/meter-group/meter-group.js",
     "components/my-component/my-component.js",
     "components/workspace-manager/workspace-manager.js",
@@ -53,7 +54,6 @@
     "components/callout-banner/callout-banner.js",
     "components/carousel/carousel.js",
     "components/checkbox/checkbox.js",
-    "components/checkbox-group/checkbox-group.js",
     "components/code-editor/code-editor.js",
     "components/code-preview/ui-code-preview.js",
     "components/color-controller/color-controller.js",
@@ -63,9 +63,7 @@
     "components/fab/fab.js",
     "components/fab-item/fab-item.js",
     "components/icon/icon.js",
-    "components/image-button/image-button.js",
     "components/input/input.js",
-    "components/input-pair/input-pair.js",
     "components/layout-manager/layout-manager.js",
     "components/layout-manager/lm-container/lm-container.js",
     "components/layout-manager/lm-floating-window/lm-floating-window.js",
@@ -85,7 +83,6 @@
     "components/pattern-input/pattern-input.js",
     "components/progress/progress.js",
     "components/radio/radio.js",
-    "components/radio-group/radio-group.js",
     "components/resizable-panel/resizable-panel.js",
     "components/smart-location-dropdown/smart-location-dropdown.js",
     "components/smart-stepper/smart-step.js",

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

@@ -2087,4 +2087,305 @@
   transform-origin: top center;
 }
 
+/* ── Premium Accordion Variants ─────────────────────────────────────────── */
+/* 1. Boxed Variant Style (Image 1) */
+.accordion-container.accordion-boxed {
+  border: none;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: visible;
+}
+.accordion-container.accordion-boxed .accordion-item {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 20px;
+  background: #252627;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  margin-bottom: 0;
+  overflow: hidden;
+}
+.accordion-container.accordion-boxed .accordion-item:hover:not(.accordion-item-disabled) {
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+  transform: translateY(-2px);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+.accordion-container.accordion-boxed .accordion-item-open {
+  border-color: rgba(235, 255, 0, 0.4);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+}
+.accordion-container.accordion-boxed .accordion-header {
+  background: transparent;
+  padding: 20px 24px;
+  color: #ffffff;
+}
+.accordion-container.accordion-boxed .accordion-header::part(button) {
+  padding: 20px 24px !important;
+}
+.accordion-container.accordion-boxed .accordion-title {
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: 700;
+}
+.accordion-container.accordion-boxed .accordion-subtitle {
+  color: #a0a5ad;
+}
+.accordion-container.accordion-boxed .accordion-arrow-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background-color: #ebff00;
+  color: #121314;
+  box-shadow: 0 0 10px rgba(235, 255, 0, 0.3);
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+.accordion-container.accordion-boxed .accordion-arrow-wrapper .accordion-arrow {
+  color: #121314;
+  opacity: 1;
+  font-weight: 800;
+  transition: transform 0.3s ease;
+}
+.accordion-container.accordion-boxed .accordion-item:hover .accordion-arrow-wrapper {
+  transform: scale(1.1);
+  box-shadow: 0 0 15px rgba(235, 255, 0, 0.6);
+}
+.accordion-container.accordion-boxed .accordion-content {
+  background: #1e1f20;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+.accordion-container.accordion-boxed .accordion-content-inner {
+  color: #e2e8f0;
+  padding: 20px 24px;
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+/* 2. Minimal Variant Style (Image 2) */
+.accordion-container.accordion-minimal {
+  border: none;
+  background: transparent;
+}
+.accordion-container.accordion-minimal .accordion-item {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  margin-bottom: 0;
+}
+.accordion-container.accordion-minimal .accordion-item:last-child {
+  border-bottom: none;
+}
+.accordion-container.accordion-minimal .accordion-header {
+  padding: 20px 0;
+  background: transparent;
+  color: #1e293b;
+}
+.accordion-container.accordion-minimal .accordion-header:hover {
+  color: var(--selected-header-color, #10b981);
+}
+.accordion-container.accordion-minimal .accordion-title {
+  color: inherit;
+  font-size: 16px;
+  font-weight: 600;
+  transition: color 0.2s ease;
+}
+.accordion-container.accordion-minimal .accordion-subtitle {
+  color: #64748b;
+  margin-top: 4px;
+}
+.accordion-container.accordion-minimal .accordion-arrow {
+  color: #64748b;
+  opacity: 0.7;
+  font-size: 14px;
+}
+.accordion-container.accordion-minimal .accordion-item-open .accordion-header {
+  background-color: transparent !important;
+  color: var(--selected-header-color, #10b981);
+}
+.accordion-container.accordion-minimal .accordion-content {
+  background: transparent;
+}
+.accordion-container.accordion-minimal .accordion-content-inner {
+  padding: 0 0 20px 0;
+  color: #475569;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+/* 3. Left-Toggle Style (Image 3) */
+.accordion-container.accordion-left-toggle {
+  border: none;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.accordion-container.accordion-left-toggle .accordion-item {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  margin-bottom: 0;
+}
+.accordion-container.accordion-left-toggle .accordion-item:last-child {
+  border-bottom: none;
+}
+.accordion-container.accordion-left-toggle .accordion-header {
+  padding: 16px 0;
+  background: transparent;
+  color: #0f172a;
+}
+.accordion-container.accordion-left-toggle .accordion-title {
+  color: #0f172a;
+  font-size: 16px;
+  font-weight: 600;
+}
+.accordion-container.accordion-left-toggle .accordion-subtitle {
+  color: #64748b;
+}
+.accordion-container.accordion-left-toggle .accordion-arrow-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background-color: #0f172a;
+  color: #ffffff;
+  transition: all 0.2s ease;
+  margin-right: 12px;
+  flex-shrink: 0;
+  order: -1;
+}
+.accordion-container.accordion-left-toggle .accordion-arrow-wrapper .accordion-arrow {
+  color: #ffffff;
+  opacity: 1;
+  font-size: 11px;
+}
+.accordion-container.accordion-left-toggle .accordion-item:hover .accordion-arrow-wrapper {
+  background-color: var(--selected-header-color, #10b981);
+  transform: scale(1.08);
+}
+.accordion-container.accordion-left-toggle .accordion-item-open .accordion-arrow-wrapper {
+  background-color: #0f172a;
+}
+.accordion-container.accordion-left-toggle .accordion-content {
+  background: transparent;
+}
+.accordion-container.accordion-left-toggle .accordion-content-inner {
+  padding: 8px 0 20px 40px;
+  color: #475569;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+/* 4. Iconic & Rich Media Style (Image 4) */
+.accordion-container.accordion-iconic {
+  border: none;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.accordion-container.accordion-iconic .accordion-item {
+  border: 1px solid #f1f5f9;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  transition: all 0.25s ease;
+  overflow: hidden;
+}
+.accordion-container.accordion-iconic .accordion-item:hover:not(.accordion-item-disabled) {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border-color: #e2e8f0;
+}
+.accordion-container.accordion-iconic .accordion-header {
+  padding: 20px 24px;
+  background: transparent;
+}
+.accordion-container.accordion-iconic .accordion-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #1e293b;
+}
+.accordion-container.accordion-iconic .accordion-subtitle {
+  color: #64748b;
+  font-size: 13px;
+}
+.accordion-container.accordion-iconic .accordion-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 46px;
+  height: 46px;
+  border-radius: 12px;
+  font-size: 22px;
+  margin-right: 16px;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+  background-color: rgba(99, 102, 241, 0.1);
+  color: #6366f1;
+}
+.accordion-container.accordion-iconic .accordion-item:hover .accordion-icon {
+  transform: scale(1.05);
+}
+.accordion-container.accordion-iconic .accordion-arrow-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background-color: #f8fafc;
+  border: 1px solid #e2e8f0;
+  color: #64748b;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+.accordion-container.accordion-iconic .accordion-arrow-wrapper .accordion-arrow {
+  color: #64748b;
+  opacity: 0.8;
+  font-size: 11px;
+}
+.accordion-container.accordion-iconic .accordion-item:hover .accordion-arrow-wrapper {
+  background-color: #6366f1;
+  border-color: #6366f1;
+  color: #ffffff;
+}
+.accordion-container.accordion-iconic .accordion-item:hover .accordion-arrow-wrapper .accordion-arrow {
+  color: #ffffff;
+  opacity: 1;
+}
+.accordion-container.accordion-iconic .accordion-content {
+  background: #f8fafc;
+  border-top: 1px solid #f1f5f9;
+}
+.accordion-container.accordion-iconic .accordion-content-inner {
+  padding: 24px;
+  color: #334155;
+  font-size: 14px;
+  line-height: 1.6;
+}
+.accordion-container.accordion-iconic .accordion-item:nth-child(1) .accordion-icon {
+  background-color: rgba(99, 102, 241, 0.1);
+  color: #6366f1;
+}
+.accordion-container.accordion-iconic .accordion-item:nth-child(2) .accordion-icon {
+  background-color: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+.accordion-container.accordion-iconic .accordion-item:nth-child(3) .accordion-icon {
+  background-color: rgba(16, 185, 129, 0.1);
+  color: #10b981;
+}
+.accordion-container.accordion-iconic .accordion-item:nth-child(4) .accordion-icon {
+  background-color: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+}
+
 /* ── End Sovereign Finale ─────────────────────────────────────────────── */

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

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

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

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

package/dist/collection/components/anchor/anchor.css

@@ -209,12 +209,10 @@
 }
 
 .anchor--vertical.anchor--left {
-  top: 80px;
   left: 0;
 }
 
 .anchor--vertical.anchor--right {
-  top: 80px;
   right: 0;
 }
 

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

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