aeico-components 0.1.6 → 0.1.7

package/src/copy-button/copy-button.ts

@@ -49,11 +49,15 @@ class CopyButton extends AeicoComponent {
 
   private _getTextToCopy(): string {
     if (this.text != null) return this.text;
+
     const nodes = this._slotElement?.assignedNodes({ flatten: true }) ?? [];
+
     return nodes
-      .filter((n) => n.nodeType === Node.TEXT_NODE)
-      .map((n) => n.textContent ?? '')
-      .join('')
+      .reduce<string>((text, n) => {
+        if (n.nodeType === Node.TEXT_NODE) return text + (n.textContent ?? '');
+
+        return text;
+      }, '')
       .trim();
   }
 
@@ -120,10 +124,10 @@ class CopyButton extends AeicoComponent {
             },
             () => {
               span({ className: 'icon-copy' }, () => {
-                aeIcon({ name: 'copy' });
+                aeIcon({ name: 'copy', size: this.size });
               });
               span({ className: 'icon-check' }, () => {
-                aeIcon({ name: 'check' });
+                aeIcon({ name: 'check', size: this.size });
               });
               this._slotElement = slot();
             },

package/src/detail/defines.ts

@@ -1,4 +1,4 @@
-export type DetailVariant = 'subtle' | 'faint' | 'filled' | 'outlined';
+export type DetailVariant = 'subtle' | 'faint' | 'filled' | 'outlined' | 'text';
 export type DetailIconPlacement = 'start' | 'end';
 export type DetailColor =
   | 'default'

package/src/icon/defines.ts

@@ -9,8 +9,13 @@ export type IconColor =
   | 'warning'
   | 'info';
 
+export interface IconPathDef {
+  d: string;
+  fill?: string;
+}
+
 export interface IconDefinition {
-  path: string;
+  paths: string | IconPathDef[];
   viewBox?: string;
   stroke?: boolean;
   strokeWidth?: number;

package/src/icon/icon.ts

@@ -41,22 +41,32 @@ class Icon extends AeicoComponent {
       this.style.removeProperty('font-size');
     }
 
-    // Resolve stroke: component prop takes priority over registry definition
-    const useStroke = this.stroke ?? def?.stroke ?? false;
-    const useStrokeWidth = this.strokeWidth ?? def?.strokeWidth ?? 2;
+    if (!def) return;
+
+    const { paths } = def;
+    const isMultiPath = Array.isArray(paths);
+
+    // Stroke CSS variables only apply in single-path mode (component props)
+    if (!isMultiPath) {
+      const useStroke =
+        this.stroke ?? (this.strokeWidth !== undefined ? true : (def.stroke ?? false));
+      const useStrokeWidth = this.strokeWidth ?? def.strokeWidth ?? 2;
 
-    if (useStroke) {
-      this.style.setProperty('--icon-fill', 'none');
-      this.style.setProperty('--icon-stroke', 'currentColor');
-      this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));
+      if (useStroke) {
+        this.style.setProperty('--icon-fill', 'none');
+        this.style.setProperty('--icon-stroke', 'currentColor');
+        this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));
+      } else {
+        this.style.removeProperty('--icon-fill');
+        this.style.removeProperty('--icon-stroke');
+        this.style.removeProperty('--icon-stroke-width');
+      }
     } else {
       this.style.removeProperty('--icon-fill');
       this.style.removeProperty('--icon-stroke');
       this.style.removeProperty('--icon-stroke-width');
     }
 
-    if (!def) return;
-
     return html(({ svg, path }) => {
       svg(
         {
@@ -66,7 +76,15 @@ class Icon extends AeicoComponent {
           xmlns: SVG_NS,
         },
         () => {
-          path({ d: def.path });
+          if (typeof paths === 'string') {
+            path({ d: paths });
+          } else {
+            for (const p of paths) {
+              const attrs: Record<string, unknown> = { d: p.d };
+              if (p.fill) attrs.style = { fill: p.fill };
+              path(attrs);
+            }
+          }
         },
       );
     });

package/src/icon/index.ts

@@ -1,4 +1,4 @@
 export { default as Icon } from './icon';
 export type { IconProps } from './icon';
 export { default as IconRegistry } from './registry';
-export type { IconSize, IconColor, IconDefinition, IconRegistryData } from './defines';
+export type { IconSize, IconColor, IconDefinition, IconPathDef, IconRegistryData } from './defines';

package/src/icon/registry.ts

@@ -9,7 +9,7 @@ class IconRegistry {
   static add(icons: IconRegistryData) {
     for (const [name, data] of Object.entries(icons)) {
       if (typeof data === 'string') {
-        this._icons.set(name, { path: data, viewBox: defaultViewBox });
+        this._icons.set(name, { paths: data, viewBox: defaultViewBox });
       } else {
         this._icons.set(name, data);
       }
@@ -27,7 +27,7 @@ class IconRegistry {
       // Skip if the user has already registered this icon
       if (this._icons.has(name) && !this._builtInKeys.has(name)) continue;
       if (typeof data === 'string') {
-        this._icons.set(name, { path: data, viewBox: defaultViewBox });
+        this._icons.set(name, { paths: data, viewBox: defaultViewBox });
       } else {
         this._icons.set(name, data);
       }

package/src/styles/color.css

@@ -1,117 +1,117 @@
 :host {
-  --color-solid:           var(--color-gray);
-  --color-solid-hover:     color-mix(in srgb, var(--color-solid), var(--color-mix-hover));
-  --color-solid-active:    color-mix(in srgb, var(--color-solid), var(--color-mix-active));
-  --color-on-solid:        var(--color-text-main);
-  --color-border:          var(--color-gray);
-  --color-border-hover:    color-mix(in srgb, var(--color-border), var(--color-mix-hover));
-  --color-accent:          var(--color-text-muted);
-  --color-accent-hover:    var(--color-text-main);
-  --color-subtle:          var(--border-subtle);
-  --color-subtle-hover:    var(--border-default);
-  --color-bg-subtle:       var(--border-subtle);
-  --color-text-subtle:     var(--color-text-muted);
-  --color-border-subtle:   var(--border-default);
+  --ae-color-solid:           var(--ae-color-gray);
+  --ae-color-solid-hover:     color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));
+  --ae-color-solid-active:    color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));
+  --ae-color-on-solid:        var(--ae-color-text-main);
+  --ae-color-border:          var(--ae-color-gray);
+  --ae-color-border-hover:    color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));
+  --ae-color-accent:          var(--ae-color-text-muted);
+  --ae-color-accent-hover:    var(--ae-color-text-main);
+  --ae-color-subtle:          var(--ae-border-subtle);
+  --ae-color-subtle-hover:    var(--ae-border-default);
+  --ae-color-bg-subtle:       var(--ae-border-subtle);
+  --ae-color-text-subtle:     var(--ae-color-text-muted);
+  --ae-color-border-subtle:   var(--ae-border-default);
 }
 
 :host([color="primary"]) {
-  --color-solid:           var(--color-primary);
-  --color-on-solid:        white;
-  --color-border:          var(--color-primary);
-  --color-accent:          var(--color-text-link);
-  --color-accent-hover:    var(--color-text-link-hover);
-  --color-subtle:          var(--color-primary-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--blue) r g b / 0.15);
-  --color-bg-subtle:       var(--color-primary-bg-subtle);
-  --color-text-subtle:     var(--color-primary-text-emphasis);
-  --color-border-subtle:   var(--color-primary-border-subtle);
+  --ae-color-solid:           var(--ae-color-primary);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-color-primary);
+  --ae-color-accent:          var(--ae-color-text-link);
+  --ae-color-accent-hover:    var(--ae-color-text-link-hover);
+  --ae-color-subtle:          var(--ae-color-primary-bg-subtle);
+  --ae-color-subtle-hover:    rgb(from var(--ae-blue) r g b / 0.15);
+  --ae-color-bg-subtle:       var(--ae-color-primary-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-primary-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-primary-border-subtle);
 }
 
 :host([color="secondary"]) {
-  --color-solid:           var(--color-secondary);
-  --color-on-solid:        white;
-  --color-border:          var(--color-secondary-hover);
-  --color-accent:          var(--color-secondary-text-emphasis);
-  --color-accent-hover:    var(--color-text-main);
-  --color-subtle:          rgb(from var(--slate) r g b / 0.06);
-  --color-subtle-hover:    rgb(from var(--slate) r g b / 0.12);
-  --color-bg-subtle:       var(--color-secondary-bg-subtle);
-  --color-text-subtle:     var(--color-secondary-text-emphasis);
-  --color-border-subtle:   var(--color-secondary-border-subtle);
+  --ae-color-solid:           var(--ae-color-secondary);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-color-secondary-hover);
+  --ae-color-accent:          var(--ae-color-secondary-text-emphasis);
+  --ae-color-accent-hover:    var(--ae-color-text-main);
+  --ae-color-subtle:          rgb(from var(--ae-slate) r g b / 0.06);
+  --ae-color-subtle-hover:    rgb(from var(--ae-slate) r g b / 0.12);
+  --ae-color-bg-subtle:       var(--ae-color-secondary-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-secondary-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-secondary-border-subtle);
 }
 
 :host([color="success"]) {
-  --color-solid:           var(--color-success);
-  --color-on-solid:        white;
-  --color-border:          var(--color-success);
-  --color-accent:          var(--color-success-text-emphasis);
-  --color-accent-hover:    var(--color-success-hover);
-  --color-subtle:          var(--color-success-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--green) r g b / 0.15);
-  --color-bg-subtle:       var(--color-success-bg-subtle);
-  --color-text-subtle:     var(--color-success-text-emphasis);
-  --color-border-subtle:   var(--color-success-border-subtle);
+  --ae-color-solid:           var(--ae-color-success);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-color-success);
+  --ae-color-accent:          var(--ae-color-success-text-emphasis);
+  --ae-color-accent-hover:    var(--ae-color-success-hover);
+  --ae-color-subtle:          var(--ae-color-success-bg-subtle);
+  --ae-color-subtle-hover:    rgb(from var(--ae-green) r g b / 0.15);
+  --ae-color-bg-subtle:       var(--ae-color-success-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-success-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-success-border-subtle);
 }
 
 :host([color="danger"]) {
-  --color-solid:           var(--color-danger);
-  --color-on-solid:        white;
-  --color-border:          var(--color-danger);
-  --color-accent:          var(--color-danger-text-emphasis);
-  --color-accent-hover:    var(--color-danger-hover);
-  --color-subtle:          var(--color-danger-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--red) r g b / 0.15);
-  --color-bg-subtle:       var(--color-danger-bg-subtle);
-  --color-text-subtle:     var(--color-danger-text-emphasis);
-  --color-border-subtle:   var(--color-danger-border-subtle);
+  --ae-color-solid:           var(--ae-color-danger);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-color-danger);
+  --ae-color-accent:          var(--ae-color-danger-text-emphasis);
+  --ae-color-accent-hover:    var(--ae-color-danger-hover);
+  --ae-color-subtle:          var(--ae-color-danger-bg-subtle);
+  --ae-color-subtle-hover:    rgb(from var(--ae-red) r g b / 0.15);
+  --ae-color-bg-subtle:       var(--ae-color-danger-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-danger-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-danger-border-subtle);
 }
 
 :host([color="warning"]) {
-  --color-solid:           var(--color-warning);
-  --color-on-solid:        var(--gray-900);
-  --color-border:          var(--color-warning);
-  --color-accent:          var(--color-warning-text-emphasis);
-  --color-accent-hover:    var(--color-warning-hover);
-  --color-subtle:          var(--color-warning-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--yellow) r g b / 0.15);
-  --color-bg-subtle:       var(--color-warning-bg-subtle);
-  --color-text-subtle:     var(--color-warning-text-emphasis);
-  --color-border-subtle:   var(--color-warning-border-subtle);
+  --ae-color-solid:           var(--ae-color-warning);
+  --ae-color-on-solid:        var(--ae-gray-900);
+  --ae-color-border:          var(--ae-color-warning);
+  --ae-color-accent:          var(--ae-color-warning-text-emphasis);
+  --ae-color-accent-hover:    var(--ae-color-warning-hover);
+  --ae-color-subtle:          var(--ae-color-warning-bg-subtle);
+  --ae-color-subtle-hover:    rgb(from var(--ae-yellow) r g b / 0.15);
+  --ae-color-bg-subtle:       var(--ae-color-warning-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-warning-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-warning-border-subtle);
 }
 
 :host([color="info"]) {
-  --color-solid:           var(--color-info);
-  --color-on-solid:        white;
-  --color-border:          var(--color-info);
-  --color-accent:          var(--color-info-text-emphasis);
-  --color-accent-hover:    var(--color-info-hover);
-  --color-subtle:          var(--color-info-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--cyan) r g b / 0.15);
-  --color-bg-subtle:       var(--color-info-bg-subtle);
-  --color-text-subtle:     var(--color-info-text-emphasis);
-  --color-border-subtle:   var(--color-info-border-subtle);
+  --ae-color-solid:           var(--ae-color-info);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-color-info);
+  --ae-color-accent:          var(--ae-color-info-text-emphasis);
+  --ae-color-accent-hover:    var(--ae-color-info-hover);
+  --ae-color-subtle:          var(--ae-color-info-bg-subtle);
+  --ae-color-subtle-hover:    rgb(from var(--ae-cyan) r g b / 0.15);
+  --ae-color-bg-subtle:       var(--ae-color-info-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-info-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-info-border-subtle);
 }
 
 :host([color="light"]) {
-  --color-solid:           var(--light);
-  --color-on-solid:        var(--gray-900);
-  --color-border:          var(--border-hover);
-  --color-subtle:          var(--color-light-bg-subtle);
-  --color-subtle-hover:    var(--color-light-border-subtle);
-  --color-bg-subtle:       var(--color-light-bg-subtle);
-  --color-text-subtle:     var(--color-text-muted);
-  --color-border-subtle:   var(--color-light-border-subtle);
+  --ae-color-solid:           var(--ae-light);
+  --ae-color-on-solid:        var(--ae-gray-900);
+  --ae-color-border:          var(--ae-border-hover);
+  --ae-color-subtle:          var(--ae-color-light-bg-subtle);
+  --ae-color-subtle-hover:    var(--ae-color-light-border-subtle);
+  --ae-color-bg-subtle:       var(--ae-color-light-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-text-muted);
+  --ae-color-border-subtle:   var(--ae-color-light-border-subtle);
 }
 
 :host([color="dark"]) {
-  --color-solid:           var(--dark-500);
-  --color-on-solid:        white;
-  --color-border:          var(--dark-500);
-  --color-accent:          var(--color-text-main);
-  --color-accent-hover:    var(--color-text-main);
-  --color-subtle:          var(--color-dark-bg-subtle);
-  --color-subtle-hover:    var(--color-dark-border-subtle);
-  --color-bg-subtle:       var(--color-dark-bg-subtle);
-  --color-text-subtle:     var(--color-text-main);
-  --color-border-subtle:   var(--color-dark-border-subtle);
+  --ae-color-solid:           var(--ae-dark-500);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-dark-500);
+  --ae-color-accent:          var(--ae-color-text-main);
+  --ae-color-accent-hover:    var(--ae-color-text-main);
+  --ae-color-subtle:          var(--ae-color-dark-bg-subtle);
+  --ae-color-subtle-hover:    var(--ae-color-dark-border-subtle);
+  --ae-color-bg-subtle:       var(--ae-color-dark-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-text-main);
+  --ae-color-border-subtle:   var(--ae-color-dark-border-subtle);
 }

package/src/styles/components/action-button.css

@@ -13,25 +13,25 @@
 }
 
 .clear-btn:not(.action-btn) {
-  border-radius: var(--clear-btn-border-radius);
-  background: var(--clear-btn-bg);
-  color: var(--clear-btn-color);
-  transition: var(--clear-btn-transition);
+  border-radius: var(--ae-clear-btn-border-radius);
+  background: var(--ae-clear-btn-bg);
+  color: var(--ae-clear-btn-color);
+  transition: var(--ae-clear-btn-transition);
 }
 
 .reset-btn:not(.action-btn) {
-  border-radius: var(--reset-btn-border-radius);
-  background: var(--reset-btn-bg);
-  color: var(--reset-btn-color);
-  transition: var(--reset-btn-transition);
+  border-radius: var(--ae-reset-btn-border-radius);
+  background: var(--ae-reset-btn-bg);
+  color: var(--ae-reset-btn-color);
+  transition: var(--ae-reset-btn-transition);
 }
 
 .clear-btn:not(.action-btn):hover {
-  background: var(--clear-btn-bg-hover);
-  color: var(--clear-btn-color-hover);
+  background: var(--ae-clear-btn-bg-hover);
+  color: var(--ae-clear-btn-color-hover);
 }
 
 .reset-btn:not(.action-btn):hover {
-  background: var(--reset-btn-bg-hover);
-  color: var(--reset-btn-color-hover);
+  background: var(--ae-reset-btn-bg-hover);
+  color: var(--ae-reset-btn-color-hover);
 }

package/src/styles/components/alert.css

@@ -2,57 +2,51 @@
   position: relative;
   padding: 12px 16px;
   margin-bottom: 12px;
-  border-radius: 4px;
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
   font-size: 12px;
   line-height: 1.6;
-  background-color: var(--alert-solid-bg);
-  color:            var(--alert-solid-color);
-  border: 1px solid var(--alert-solid-bg);
+  background-color: var(--ae-color-solid);
+  color:            var(--ae-color-on-solid);
+  border: 1px solid var(--ae-color-solid);
 }
 
 .alert:last-child {
   margin-bottom: 0;
 }
 
-:host {
-  --color-solid:           var(--color-primary);
-  --color-on-solid:        var(--color-text-main);
-  --color-border:          var(--color-primary);
-  --color-bg-subtle:       var(--color-primary-bg-subtle);
-  --color-text-subtle:     var(--color-primary-text-emphasis);
-  --color-border-subtle:   var(--color-primary-border-subtle);
-
-  --alert-solid-bg:     var(--color-solid);
-  --alert-solid-color:  var(--color-on-solid);
-  --alert-border:       var(--color-border);
-  --alert-subtle-bg:    var(--color-bg-subtle);
-  --alert-subtle-color: var(--color-text-subtle);
-  --alert-subtle-border:var(--color-border-subtle);
+/* default color (no [color] attribute) — primary */
+:host(:not([color])) {
+  --ae-color-solid:           var(--ae-color-primary);
+  --ae-color-on-solid:        var(--ae-color-text-main);
+  --ae-color-border:          var(--ae-color-primary);
+  --ae-color-bg-subtle:       var(--ae-color-primary-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-primary-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-primary-border-subtle);
 }
 
 
 :host([variant="faint"]) .alert {
-  background-color: var(--alert-subtle-bg);
-  color:            var(--alert-subtle-color);
-  border-color:     var(--alert-subtle-border);
+  background-color: var(--ae-color-bg-subtle);
+  color:            var(--ae-color-text-subtle);
+  border-color:     var(--ae-color-border-subtle);
 }
 
 :host([variant="subtle"]) .alert {
-  background-color: var(--alert-subtle-bg);
-  color:            var(--alert-subtle-color);
+  background-color: var(--ae-color-bg-subtle);
+  color:            var(--ae-color-text-subtle);
   border-color:     transparent;
 }
 
 :host([variant="filled"]) .alert {
-  background-color: var(--alert-solid-bg);
-  color:            var(--alert-solid-color);
-  border-color:     var(--alert-solid-bg);
+  background-color: var(--ae-color-solid);
+  color:            var(--ae-color-on-solid);
+  border-color:     var(--ae-color-solid);
 }
 
 :host([variant="outlined"]) .alert {
   background-color: transparent;
-  color:            var(--alert-subtle-color);
-  border-color:     var(--alert-border);
+  color:            var(--ae-color-text-subtle);
+  border-color:     var(--ae-color-border);
 }
 
 :host([dismissible]) .alert {

package/src/styles/components/badge.css

@@ -1,13 +1,6 @@
 :host {
   display: inline-flex;
   align-items: center;
-  --badge-solid-bg:       var(--color-solid);
-  --badge-solid-color:    var(--color-on-solid);
-  --badge-border:         var(--color-border);
-  --badge-accent:         var(--color-accent);
-  --badge-subtle-bg:      var(--color-bg-subtle);
-  --badge-subtle-color:   var(--color-text-subtle);
-  --badge-subtle-border:  var(--color-border-subtle);
 }
 
 .badge {
@@ -21,10 +14,10 @@
   line-height: 1.2;
   font-size: 1em;
   padding: 0.15em 0.6em;
-  border-radius: 4px;
-  border: 1px solid var(--badge-solid-bg);
-  background: var(--badge-solid-bg);
-  color: var(--badge-solid-color);
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
+  border: 1px solid var(--ae-color-solid);
+  background: var(--ae-color-solid);
+  color: var(--ae-color-on-solid);
 }
 
 /* Default (no [variant]) = filled */
@@ -33,32 +26,32 @@
 
 :host([variant="outlined"]) .badge {
   background:   transparent;
-  border-color: var(--badge-border);
-  color:        var(--badge-accent);
+  border-color: var(--ae-color-border);
+  color:        var(--ae-color-accent);
 }
 
 :host([variant="faint"]) .badge {
-  background:   var(--badge-subtle-bg);
-  border-color: var(--badge-subtle-border);
-  color:        var(--badge-subtle-color);
+  background:   var(--ae-color-bg-subtle);
+  border-color: var(--ae-color-border-subtle);
+  color:        var(--ae-color-text-subtle);
 }
 
 :host([variant="subtle"]) .badge {
-  background:   var(--badge-subtle-bg);
+  background:   var(--ae-color-bg-subtle);
   border-color: transparent;
-  color:        var(--badge-subtle-color);
+  color:        var(--ae-color-text-subtle);
 }
 
 :host([variant="text"]) .badge {
   background:   transparent;
   border-color: transparent;
-  color:        var(--badge-accent);
+  color:        var(--ae-color-accent);
   padding-left:  0;
   padding-right: 0;
 }
 
 :host([pill]) .badge {
-  border-radius: 999px;
+  border-radius: var(--ae-radius-pill);
 }
 
 /* Icon slots */

package/src/styles/components/breadcrumb-item.css

@@ -13,7 +13,7 @@
 .sep {
   display: inline-flex;
   align-items: center;
-  color: var(--color-text-muted);
+  color: var(--ae-color-text-muted);
   padding: 0 0.35em;
   user-select: none;
   pointer-events: none;
@@ -30,30 +30,30 @@
 .label {
   display: inline-flex;
   align-items: center;
-  color: var(--color-text-muted);
+  color: var(--ae-color-text-muted);
 }
 
 /* Current page — last item */
 :host([aria-current="page"]) .label {
-  color: var(--color-text-main);
+  color: var(--ae-color-text-main);
   font-weight: 500;
   cursor: default;
 }
 
 /* Link items */
 .label a {
-  color: var(--color-accent, var(--color-text-link));
+  color: var(--ae-color-accent, var(--ae-color-text-link));
   text-decoration: none;
   outline: none;
 }
 
 .label a:hover {
-  color: var(--color-accent-hover, var(--color-text-link-hover));
+  color: var(--ae-color-accent-hover, var(--ae-color-text-link-hover));
   text-decoration: underline;
 }
 
 .label a:focus-visible {
-  outline: 2px solid var(--color-accent, var(--focus-ring-color));
+  outline: 2px solid var(--ae-color-accent, var(--ae-focus-ring-color));
   outline-offset: 2px;
-  border-radius: 2px;
+  border-radius: var(--ae-radius-xs);
 }