@ardium-ui/ui 5.0.0-alpha.78 → 5.0.0-alpha.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ardium-ui/ui",
-  "version": "5.0.0-alpha.78",
+  "version": "5.0.0-alpha.79",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",

package/prebuilt-themes/default/badge.css

@@ -19,8 +19,8 @@
     display: flex;
     align-items: center;
     pointer-events: none;
-    background: var(--ard-uicl--bg-colored);
-    color: var(--ard-uicl--on-bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
     font-size: var(--ard-_badge-font-size);
     min-width: var(--ard-_badge-size);
     height: var(--ard-_badge-size);

package/prebuilt-themes/default/buttons/button.css

@@ -201,7 +201,7 @@
     border-radius: inherit;
     pointer-events: none;
     transition: opacity 0.2s ease;
-    background-color: var(--ard-uicl--overlay);
+    background-color: var(--ard-cmpcl--overlay);
   }
   .ard-button:hover::before {
     opacity: var(--ard-button-overlay-hover-opacity, 0.04);
@@ -217,11 +217,11 @@
   }
   .ard-button.ard-appearance-transparent, .ard-button.ard-appearance-raised {
     background: transparent;
-    color: var(--ard-uicl--content);
+    color: var(--ard-cmpcl--content);
     border: none;
   }
   .ard-button.ard-appearance-transparent::before, .ard-button.ard-appearance-raised::before {
-    background: var(--ard-uicl--overlay-colored);
+    background: var(--ard-cmpcl--overlay-colored);
   }
   .ard-button.ard-appearance-raised, .ard-button.ard-appearance-raised-strong {
     background: var(--ard-bg);
@@ -236,15 +236,15 @@
   }
   .ard-button.ard-appearance-outlined {
     background: var(--ard-bg);
-    color: var(--ard-uicl--content);
+    color: var(--ard-cmpcl--content);
     border: 1px solid var(--ard-border-light);
   }
   .ard-button.ard-appearance-outlined::before {
-    background: var(--ard-uicl--overlay-colored);
+    background: var(--ard-cmpcl--overlay-colored);
   }
   .ard-button.ard-appearance-outlined-strong {
     background: var(--ard-bg);
-    color: var(--ard-uicl--content);
+    color: var(--ard-cmpcl--content);
     border: 1px solid var(--ard-border-light);
     transition: background-color 0.2s ease, color 0.2s ease;
   }
@@ -252,25 +252,25 @@
     display: none;
   }
   .ard-button.ard-appearance-outlined-strong:hover, .ard-button.ard-appearance-outlined-strong:focus-visible {
-    background: var(--ard-uicl--bg-colored);
-    color: var(--ard-uicl--on-bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
   }
   .ard-button.ard-appearance-flat, .ard-button.ard-appearance-raised-strong {
-    background: var(--ard-uicl--bg-colored);
-    color: var(--ard-uicl--on-bg-colored);
-    border: 1px solid var(--ard-uicl--bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
+    border: 1px solid var(--ard-cmpcl--bg-colored);
   }
   .ard-button.ard-appearance-flat::before, .ard-button.ard-appearance-raised-strong::before {
-    background: var(--ard-uicl--on-bg);
+    background: var(--ard-cmpcl--on-bg);
   }
   .ard-button.ard-appearance-flat:focus-visible, .ard-button.ard-appearance-raised-strong:focus-visible {
     outline: solid black;
   }
   .ard-button.ard-appearance-transparent.ard-light-coloring {
-    color: var(--ard-uicl--content-light);
+    color: var(--ard-cmpcl--content-light);
   }
   .ard-button.ard-appearance-transparent.ard-light-coloring::before {
-    background: var(--ard-uicl--overlay-colored-light);
+    background: var(--ard-cmpcl--overlay-colored-light);
   }
   .ard-button.ard-align-left {
     flex-direction: row;
@@ -317,7 +317,7 @@
     opacity: var(--ard-button-disabled-opacity, 0.6);
   }
   .ard-button.ard-disabled.ard-color-none::before {
-    background: var(--ard-uicl--overlay);
+    background: var(--ard-cmpcl--overlay);
   }
   .ard-button.ard-disabled.ard-button-with-pointer-events-when-disabled {
     pointer-events: all;

package/prebuilt-themes/default/buttons/fab.css

@@ -197,7 +197,7 @@
     border-radius: inherit;
     pointer-events: none;
     transition: opacity 0.2s ease;
-    background-color: var(--ard-uicl--overlay);
+    background-color: var(--ard-cmpcl--overlay);
   }
   .ard-fab:hover::before {
     opacity: var(--ard-fab-overlay-hover-opacity, var(--ard-button-overlay-hover-opacity, 0.04));
@@ -213,11 +213,11 @@
   }
   .ard-fab.ard-appearance-transparent, .ard-fab.ard-appearance-raised {
     background: transparent;
-    color: var(--ard-uicl--content);
+    color: var(--ard-cmpcl--content);
     border: none;
   }
   .ard-fab.ard-appearance-transparent::before, .ard-fab.ard-appearance-raised::before {
-    background: var(--ard-uicl--overlay-colored);
+    background: var(--ard-cmpcl--overlay-colored);
   }
   .ard-fab.ard-appearance-raised, .ard-fab.ard-appearance-raised-strong {
     background: var(--ard-bg);
@@ -232,15 +232,15 @@
   }
   .ard-fab.ard-appearance-outlined {
     background: var(--ard-bg);
-    color: var(--ard-uicl--content);
+    color: var(--ard-cmpcl--content);
     border: 1px solid var(--ard-border-light);
   }
   .ard-fab.ard-appearance-outlined::before {
-    background: var(--ard-uicl--overlay-colored);
+    background: var(--ard-cmpcl--overlay-colored);
   }
   .ard-fab.ard-appearance-outlined-strong {
     background: var(--ard-bg);
-    color: var(--ard-uicl--content);
+    color: var(--ard-cmpcl--content);
     border: 1px solid var(--ard-border-light);
     transition: background-color 0.2s ease, color 0.2s ease;
   }
@@ -248,25 +248,25 @@
     display: none;
   }
   .ard-fab.ard-appearance-outlined-strong:hover, .ard-fab.ard-appearance-outlined-strong:focus-visible {
-    background: var(--ard-uicl--bg-colored);
-    color: var(--ard-uicl--on-bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
   }
   .ard-fab.ard-appearance-flat, .ard-fab.ard-appearance-raised-strong {
-    background: var(--ard-uicl--bg-colored);
-    color: var(--ard-uicl--on-bg-colored);
-    border: 1px solid var(--ard-uicl--bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
+    border: 1px solid var(--ard-cmpcl--bg-colored);
   }
   .ard-fab.ard-appearance-flat::before, .ard-fab.ard-appearance-raised-strong::before {
-    background: var(--ard-uicl--on-bg);
+    background: var(--ard-cmpcl--on-bg);
   }
   .ard-fab.ard-appearance-flat:focus-visible, .ard-fab.ard-appearance-raised-strong:focus-visible {
     outline: solid black;
   }
   .ard-fab.ard-appearance-transparent.ard-light-coloring {
-    color: var(--ard-uicl--content-light);
+    color: var(--ard-cmpcl--content-light);
   }
   .ard-fab.ard-appearance-transparent.ard-light-coloring::before {
-    background: var(--ard-uicl--overlay-colored-light);
+    background: var(--ard-cmpcl--overlay-colored-light);
   }
   .ard-fab.ard-fab-size-standard {
     --ard-_fab-size: var(--ard-fab-size-standard, 3.5rem);
@@ -307,7 +307,7 @@
     opacity: var(--ard-fab-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2));
   }
   ard-fab.ard-disabled > .ard-fab.ard-color-none::before {
-    background: var(--ard-uicl--overlay);
+    background: var(--ard-cmpcl--overlay);
   }
   ard-fab.ard-disabled.ard-button-with-pointer-events-when-disabled {
     pointer-events: all;

package/prebuilt-themes/default/buttons/icon-button.css

@@ -37,7 +37,7 @@
     justify-content: center;
     padding: 0;
     overflow: hidden;
-    color: var(--ard-uicl--bg-colored);
+    color: var(--ard-cmpcl--bg-colored);
   }
   .ard-icon-button.ard-color-none {
     --ard-cmpcl--bg: var(--ard-bg);
@@ -190,7 +190,7 @@
     border-radius: inherit;
     pointer-events: none;
     transition: opacity 0.2s ease;
-    background-color: var(--ard-uicl--overlay);
+    background-color: var(--ard-cmpcl--overlay);
   }
   .ard-icon-button:hover::before {
     opacity: var(--ard-icon-button-overlay-hover-opacity, var(--ard-button-overlay-hover-opacity, 0.04));
@@ -206,11 +206,11 @@
   }
   .ard-icon-button.ard-appearance-transparent, .ard-icon-button.ard-appearance-raised {
     background: transparent;
-    color: var(--ard-uicl--content);
+    color: var(--ard-cmpcl--content);
     border: none;
   }
   .ard-icon-button.ard-appearance-transparent::before, .ard-icon-button.ard-appearance-raised::before {
-    background: var(--ard-uicl--overlay-colored);
+    background: var(--ard-cmpcl--overlay-colored);
   }
   .ard-icon-button.ard-appearance-raised, .ard-icon-button.ard-appearance-raised-strong {
     background: var(--ard-bg);
@@ -225,15 +225,15 @@
   }
   .ard-icon-button.ard-appearance-outlined {
     background: var(--ard-bg);
-    color: var(--ard-uicl--content);
+    color: var(--ard-cmpcl--content);
     border: 1px solid var(--ard-border-light);
   }
   .ard-icon-button.ard-appearance-outlined::before {
-    background: var(--ard-uicl--overlay-colored);
+    background: var(--ard-cmpcl--overlay-colored);
   }
   .ard-icon-button.ard-appearance-outlined-strong {
     background: var(--ard-bg);
-    color: var(--ard-uicl--content);
+    color: var(--ard-cmpcl--content);
     border: 1px solid var(--ard-border-light);
     transition: background-color 0.2s ease, color 0.2s ease;
   }
@@ -241,25 +241,25 @@
     display: none;
   }
   .ard-icon-button.ard-appearance-outlined-strong:hover, .ard-icon-button.ard-appearance-outlined-strong:focus-visible {
-    background: var(--ard-uicl--bg-colored);
-    color: var(--ard-uicl--on-bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
   }
   .ard-icon-button.ard-appearance-flat, .ard-icon-button.ard-appearance-raised-strong {
-    background: var(--ard-uicl--bg-colored);
-    color: var(--ard-uicl--on-bg-colored);
-    border: 1px solid var(--ard-uicl--bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
+    border: 1px solid var(--ard-cmpcl--bg-colored);
   }
   .ard-icon-button.ard-appearance-flat::before, .ard-icon-button.ard-appearance-raised-strong::before {
-    background: var(--ard-uicl--on-bg);
+    background: var(--ard-cmpcl--on-bg);
   }
   .ard-icon-button.ard-appearance-flat:focus-visible, .ard-icon-button.ard-appearance-raised-strong:focus-visible {
     outline: solid black;
   }
   .ard-icon-button.ard-appearance-transparent.ard-light-coloring {
-    color: var(--ard-uicl--content-light);
+    color: var(--ard-cmpcl--content-light);
   }
   .ard-icon-button.ard-appearance-transparent.ard-light-coloring::before {
-    background: var(--ard-uicl--overlay-colored-light);
+    background: var(--ard-cmpcl--overlay-colored-light);
   }
   .ard-icon-button > ard-icon {
     font-weight: 500;
@@ -270,7 +270,7 @@
     font-size: var(--ard-icon-button-font-size-compact, 0.75rem);
   }
   .ard-icon-button.ard-light-coloring {
-    color: var(--ard-uicl--bg-colored-light);
+    color: var(--ard-cmpcl--bg-colored-light);
   }
   ard-icon-button.ard-disabled > .ard-icon-button {
     pointer-events: none;
@@ -286,7 +286,7 @@
     opacity: var(--ard-icon-button-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2));
   }
   ard-icon-button.ard-disabled > .ard-icon-button.ard-color-none::before {
-    background: var(--ard-uicl--overlay);
+    background: var(--ard-cmpcl--overlay);
   }
   ard-icon-button.ard-disabled > .ard-icon-button .ard-focus-overlay {
     opacity: 0;

package/prebuilt-themes/default/calendar.css

@@ -288,7 +288,7 @@
     pointer-events: none;
     transition: opacity 0.2s ease;
     z-index: -1;
-    background: var(--ard-uicl--overlay);
+    background: var(--ard-cmpcl--overlay);
     transition: border-color 0.1s ease, opacity 0.1s ease;
   }
   .ard-calendar .ard-calendar__entry .ard-calendar__entry-button .ard-range-overlay {
@@ -318,14 +318,14 @@
   }
   .ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range .ard-range-overlay {
     opacity: 1;
-    border-top-color: var(--ard-uicl--bg-colored);
-    border-bottom-color: var(--ard-uicl--bg-colored);
+    border-top-color: var(--ard-cmpcl--bg-colored);
+    border-bottom-color: var(--ard-cmpcl--bg-colored);
   }
   .ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range.ard-calendar__entry-selected-start .ard-range-overlay {
-    border-left-color: var(--ard-uicl--bg-colored);
+    border-left-color: var(--ard-cmpcl--bg-colored);
   }
   .ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range.ard-calendar__entry-selected-end .ard-range-overlay, .ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted-in-range.ard-calendar__entry-highlighted .ard-range-overlay {
-    border-right-color: var(--ard-uicl--bg-colored);
+    border-right-color: var(--ard-cmpcl--bg-colored);
   }
   .ard-calendar .ard-calendar__entry.ard-calendar__entry-highlighted .ard-focus-overlay {
     opacity: var(--ard-calendar-entry-highlighted-overlay-opacity, 20%);
@@ -342,14 +342,14 @@
   }
   .ard-calendar .ard-calendar__entry.ard-calendar__entry-selected-in-range .ard-range-overlay {
     opacity: var(--ard-calendar-entry-selected-range-overlay-opacity, 12%);
-    background-color: var(--ard-uicl--bg-colored);
+    background-color: var(--ard-cmpcl--bg-colored);
   }
   .ard-calendar .ard-calendar__entry.ard-calendar__entry-selected .ard-calendar__entry-button {
-    color: var(--ard-uicl--on-bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
   }
   .ard-calendar .ard-calendar__entry.ard-calendar__entry-selected .ard-focus-overlay {
     opacity: var(--ard-calendar-entry-selected-overlay-opacity, 100%);
-    background: var(--ard-uicl--bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
   }
   .ard-calendar .ard-calendar__entry.ard-calendar__entry-selected.ard-calendar-today .ard-focus-overlay {
     border: var(--ard-calendar-entry-today-selected-border, 2px solid var(--ard-bg));
@@ -362,7 +362,7 @@
     cursor: default;
   }
   .ard-calendar .ard-calendar__entry.ard-calendar__entry-disabled .ard-focus-overlay {
-    background: var(--ard-uicl--overlay);
+    background: var(--ard-cmpcl--overlay);
   }
   .ard-calendar .ard-calendar__entry.ard-calendar__entry-disabled.ard-calendar__entry-highlighted .ard-focus-overlay {
     opacity: var(--ard-calendar-entry-disabled-highlighted-overlay-opacity, 15%);

package/prebuilt-themes/default/chips.css

@@ -302,21 +302,21 @@
     transition: color var(--ard-chip-transition, 0.15s ease), border-color var(--ard-chip-transition, 0.15s ease), background-color var(--ard-chip-transition, 0.15s ease);
   }
   .ard-chip-wrapper.ard-appearance-filled.ard-chip-selectable.ard-chip-selected, .ard-chip-wrapper.ard-appearance-filled-strong.ard-chip-selectable.ard-chip-selected {
-    color: var(--ard-uicl--on-bg-colored);
-    background: var(--ard-uicl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
   }
   .ard-chip-wrapper.ard-appearance-filled {
-    background: var(--ard-uicl--bg-colored-light);
-    color: var(--ard-uicl--on-bg-colored-light);
+    background: var(--ard-cmpcl--bg-colored-light);
+    color: var(--ard-cmpcl--on-bg-colored-light);
   }
   .ard-chip-wrapper.ard-appearance-filled-strong {
-    background: var(--ard-uicl--bg-colored);
-    color: var(--ard-uicl--on-bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
   }
   .ard-chip-wrapper.ard-appearance-outlined, .ard-chip-wrapper.ard-appearance-outlined-strong {
     background: transparent;
-    color: var(--ard-uicl--content);
-    border: 1px solid var(--ard-uicl--bg-colored);
+    color: var(--ard-cmpcl--content);
+    border: 1px solid var(--ard-cmpcl--bg-colored);
     border-radius: var(--ard-variant-border-radius);
     font-weight: 600;
   }
@@ -325,7 +325,7 @@
   }
   .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable > .ard-focus-overlay {
     opacity: 0;
-    background: var(--ard-uicl--bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
   }
   .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable:focus > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable:focus > .ard-focus-overlay {
     opacity: var(--ard-chip-outlined-hover-overlay-opacity, 4%);
@@ -334,8 +334,8 @@
     opacity: var(--ard-chip-outlined-active-overlay-opacity, 10%);
   }
   .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected {
-    color: var(--ard-uicl--content);
-    border-color: var(--ard-uicl--content);
+    color: var(--ard-cmpcl--content);
+    border-color: var(--ard-cmpcl--content);
   }
   .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected > .ard-focus-overlay {
     opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
@@ -354,7 +354,7 @@
   }
   .ard-chip-wrapper.ard-appearance-outlined-strong > .ard-focus-overlay {
     opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
-    background: var(--ard-uicl--bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
   }
   .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable {
     color: var(--ard-chip-outlined-strong-selectable-color, var(--ard-text2));

package/prebuilt-themes/default/file-drop-area.css

@@ -58,7 +58,7 @@
     min-height: var(--ard-file-drop-area-min-height, 10rem);
     padding: var(--ard-file-drop-area-padding, 0.625rem);
     box-sizing: border-box;
-    background: var(--ard-uicl--bg-colored-verylight);
+    background: var(--ard-cmpcl--bg-colored-verylight);
     display: flex;
   }
   .ard-file-drop-area.ard-color-none {
@@ -205,7 +205,7 @@
     width: 100%;
     min-height: 100%;
     box-sizing: border-box;
-    border: var(--ard-file-drop-area-outline-border-width, 2px) var(--ard-file-drop-area-outline-border-style, dashed) var(--ard-uicl--border);
+    border: var(--ard-file-drop-area-outline-border-width, 2px) var(--ard-file-drop-area-outline-border-style, dashed) var(--ard-cmpcl--border);
     padding: var(--ard-file-drop-area-outline-padding, 0.375rem);
     pointer-events: none;
   }
@@ -235,7 +235,7 @@
     font-size: var(--ard-file-drop-area-or-text-font-size, 95%);
   }
   .ard-file-drop-area .ard-file-drop-area-browse-button > button {
-    border: 1px solid var(--ard-uicl--border);
+    border: 1px solid var(--ard-cmpcl--border);
     pointer-events: all;
   }
   .ard-file-drop-area .ard-file-drop-area-dragover-text {

package/prebuilt-themes/default/inputs/file-input.css

@@ -243,7 +243,7 @@
     user-select: none;
   }
   .ard-file-input.ard-state-dragover {
-    outline: var(--ard-file-input-dragover-outline-width, 2px) var(--ard-file-input-dragover-outline-style, solid) var(--ard-uicl--content-light);
+    outline: var(--ard-file-input-dragover-outline-width, 2px) var(--ard-file-input-dragover-outline-style, solid) var(--ard-cmpcl--content-light);
   }
   .ard-file-input .ard-file-input__value {
     overflow: hidden;

package/prebuilt-themes/default/progress-bar.css

@@ -160,13 +160,13 @@
   .ard-progress-bar .ard-progress-bar__background,
   .ard-progress-bar .ard-progress-bar__overlay {
     position: absolute;
-    background-color: var(--ard-progress-bar-foreground-color, var(--ard-uicl--bg-colored));
+    background-color: var(--ard-progress-bar-foreground-color, var(--ard-cmpcl--bg-colored));
     top: 0;
     bottom: 0;
     left: 0;
   }
   .ard-progress-bar .ard-progress-bar__background {
-    background-color: var(--ard-progress-bar-background-color, var(--ard-uicl--bg-colored-light));
+    background-color: var(--ard-progress-bar-background-color, var(--ard-cmpcl--bg-colored-light));
     top: 0;
     bottom: 0;
     left: 0;
@@ -225,10 +225,10 @@
     bottom: 0;
     width: 9999px;
     animation: buffer var(--ard-progress-bar-buffer-animation-duration, 0.4s) linear infinite;
-    border-bottom: var(--ard-progress-bar-height, 0.25rem) dotted var(--ard-uicl--bg-colored);
+    border-bottom: var(--ard-progress-bar-height, 0.25rem) dotted var(--ard-cmpcl--bg-colored);
   }
   .ard-progress-bar.ard-progress-bar__mode-buffer .ard-progress-bar__overlay-buffer {
-    background: var(--ard-progress-bar-buffer-color, var(--ard-uicl--bg-colored-light));
+    background: var(--ard-progress-bar-buffer-color, var(--ard-cmpcl--bg-colored-light));
     opacity: var(--ard-progress-bar-buffer-opacity, 100%);
     position: absolute;
     left: 0;
@@ -242,11 +242,11 @@
   }
   .ard-progress-bar.ard-color-currentColor .ard-progress-bar__background {
     opacity: var(--ard-progress-bar-currentColor-background-opacity, 22.5%);
-    background: var(--ard-uicl--bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
   }
   .ard-progress-bar.ard-color-currentColor .ard-progress-bar__overlay-buffer {
     opacity: var(--ard-progress-bar-currentColor-overlay-buffer-opacity, 30%);
-    background: var(--ard-uicl--bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
   }
 }
 @keyframes indeterminate {

package/prebuilt-themes/default/progress-circle.css

@@ -8,7 +8,7 @@
   .ard-progress-circle {
     width: var(--ard-progress-circle-size, 3em);
     height: var(--ard-progress-circle-size, 3em);
-    --ard-_progress-circle-fill-color: var(--ard-uicl--bg-colored);
+    --ard-_progress-circle-fill-color: var(--ard-cmpcl--bg-colored);
   }
   .ard-progress-circle.ard-color-none {
     --ard-cmpcl--bg: var(--ard-bg);
@@ -159,7 +159,7 @@
   }
   .ard-progress-circle.ard-appearance-colored .ard-progress-circle-background {
     opacity: var(--ard-progress-circle-colored-background-opacity, 100%);
-    background: var(--ard-uicl--bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
   }
   .ard-progress-circle.ard-progress-circle-variant-ring .ard-progress-circle-background,
   .ard-progress-circle.ard-progress-circle-variant-ring .ard-progress-circle-overlay {

package/prebuilt-themes/default/radio.css

@@ -194,7 +194,7 @@
     right: var(--ard-radio-inner-circle-inset, 25%);
     top: var(--ard-radio-inner-circle-inset, 25%);
     bottom: var(--ard-radio-inner-circle-inset, 25%);
-    background: var(--ard-uicl--bg-colored);
+    background: var(--ard-cmpcl--bg-colored);
     border-radius: var(--ard-radio-border-radius, 9999px);
     transform: scale(0);
     transition: transform var(--ard-radio-transition-duration, 0.2s) cubic-bezier(0.4, 0, 0.2, 1);
@@ -225,13 +225,13 @@
     opacity: var(--ard-radio-hover-overlay-opacity, 7.5%);
   }
   .ard-radio.ard-radio-selected > .ard-radio-circles > .ard-radio-outer-circle {
-    border-color: var(--ard-uicl--bg-colored);
+    border-color: var(--ard-cmpcl--bg-colored);
   }
   .ard-radio.ard-radio-selected > .ard-radio-circles > .ard-radio-inner-circle {
     transform: scale(1);
   }
   .ard-radio.ard-radio-selected > .ard-radio-circles > .ard-focus-overlay {
-    background-color: var(--ard-uicl--bg-colored);
+    background-color: var(--ard-cmpcl--bg-colored);
   }
   .ard-radio:focus > .ard-radio-circles > .ard-focus-overlay {
     opacity: var(--ard-radio-focus-overlay-opacity, 15%);

package/prebuilt-themes/default/segment.css

@@ -216,7 +216,7 @@
     border-radius: inherit;
     pointer-events: none;
     transition: opacity 0.2s ease;
-    background-color: var(--ard-uicl--content);
+    background-color: var(--ard-cmpcl--content);
   }
   .ard-segment-container .ard-segment-row {
     gap: var(--ard-segment-option-gap, var(--ard-segment-padding, 0.15rem));
@@ -274,10 +274,10 @@
     background: transparent;
   }
   .ard-segment-container.ard-appearance-transparent .ard-segment-row .ard-segment-option .ard-focus-overlay {
-    background-color: var(--ard-uicl--content);
+    background-color: var(--ard-cmpcl--content);
   }
   .ard-segment-container.ard-appearance-transparent .ard-segment-row .ard-segment-option.ard-option-selected {
-    color: var(--ard-uicl--content);
+    color: var(--ard-cmpcl--content);
   }
   .ard-segment-container.ard-appearance-outlined, .ard-segment-container.ard-appearance-outlined-strong {
     background: var(--ard-bg);
@@ -287,8 +287,8 @@
     border: 1px solid var(--ard-segment-border-color, var(--ard-border-light));
   }
   .ard-segment-container.ard-appearance-outlined .ard-segment-option.ard-option-selected, .ard-segment-container.ard-appearance-outlined-strong .ard-segment-option.ard-option-selected {
-    border-color: var(--ard-uicl--content);
-    color: var(--ard-uicl--content);
+    border-color: var(--ard-cmpcl--content);
+    color: var(--ard-cmpcl--content);
   }
   .ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected, .ard-segment-container.ard-appearance-outlined.ard-variant-sharp-connected, .ard-segment-container.ard-appearance-outlined.ard-variant-pill-connected, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-sharp-connected, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-pill-connected {
     gap: 0;
@@ -343,8 +343,8 @@
     padding-right: 1.25em;
   }
   .ard-segment-container.ard-appearance-outlined-strong .ard-segment-option.ard-option-selected {
-    background-color: var(--ard-uicl--bg);
-    color: var(--ard-uicl--on-bg);
+    background-color: var(--ard-cmpcl--bg);
+    color: var(--ard-cmpcl--on-bg);
   }
   .ard-segment-container.ard-appearance-filled {
     position: relative;
@@ -357,25 +357,25 @@
     left: 0;
     right: 0;
     border-radius: inherit;
-    background: var(--ard-uicl--bg);
+    background: var(--ard-cmpcl--bg);
     opacity: 15%;
   }
   .ard-segment-container.ard-appearance-filled-strong {
-    background: var(--ard-uicl--bg);
+    background: var(--ard-cmpcl--bg);
     border-radius: var(--ard-_variant-border-radius);
   }
   .ard-segment-container.ard-appearance-filled-strong .ard-segment-row .ard-segment-option {
-    color: var(--ard-uicl--on-bg);
+    color: var(--ard-cmpcl--on-bg);
   }
   .ard-segment-container.ard-appearance-filled-strong .ard-segment-row .ard-segment-option .ard-focus-overlay {
-    background-color: var(--ard-uicl--on-bg);
+    background-color: var(--ard-cmpcl--on-bg);
   }
   .ard-segment-container.ard-appearance-filled-strong .ard-segment-row .ard-segment-option.ard-option-highlighted .ard-focus-overlay {
     opacity: var(--ard-segment-option-highlighted-filled-bg-opacity, 16%);
   }
   .ard-segment-container.ard-appearance-filled-strong .ard-segment-row .ard-segment-option.ard-option-selected {
-    color: var(--ard-uicl--content);
-    background: var(--ard-uicl--on-bg);
+    color: var(--ard-cmpcl--content);
+    background: var(--ard-cmpcl--on-bg);
   }
   .ard-segment-container.ard-appearance-filled-strong .ard-segment-row .ard-segment-option.ard-option-selected .ard-focus-overlay {
     opacity: 0;
@@ -428,7 +428,7 @@
     opacity: calc(var(--ard-segment-option-disabled-opacity, 50%) * 1.2);
   }
   .ard-segment-container.ard-disabled.ard-color-none .ard-focus-overlay {
-    background: var(--ard-uicl--overlay);
+    background: var(--ard-cmpcl--overlay);
   }
 }
 

package/prebuilt-themes/default/slide-toggle.css

@@ -218,7 +218,7 @@
     border-radius: inherit;
     pointer-events: none;
     transition: opacity 0.2s ease;
-    background: var(--ard-uicl--overlay-colored);
+    background: var(--ard-cmpcl--overlay-colored);
   }
   .ard-slide-toggle .ard-slide-toggle-handle .ard-slide-toggle-icon {
     font-family: "Material Symbols Outlined";
@@ -248,16 +248,16 @@
     opacity: var(--ard-slide-toggle-active-overlay-opacity, 12%);
   }
   .ard-slide-toggle.ard-slide-toggle-selected .ard-slide-toggle-track-overlay {
-    background: var(--ard-uicl--content);
+    background: var(--ard-cmpcl--content);
     opacity: var(--ard-slide-toggle-track-selected-opacity, 40%);
   }
   .ard-slide-toggle.ard-slide-toggle-selected .ard-slide-toggle-handle {
     left: 100%;
     transform: translateX(-100%);
-    background: var(--ard-uicl--bg);
+    background: var(--ard-cmpcl--bg);
   }
   .ard-slide-toggle.ard-slide-toggle-selected .ard-slide-toggle-handle .ard-slide-toggle-icon {
-    color: var(--ard-uicl--on-bg);
+    color: var(--ard-cmpcl--on-bg);
   }
   .ard-slide-toggle.ard-slide-toggle-selected .ard-slide-toggle-handle .ard-slide-toggle-icon.ard-icon-for-selected {
     display: block;
@@ -278,7 +278,7 @@
     box-sizing: border-box;
   }
   .ard-slide-toggle.ard-appearance-contained .ard-slide-toggle-track .ard-slide-toggle-track-overlay {
-    background: var(--ard-uicl--content);
+    background: var(--ard-cmpcl--content);
     opacity: 0;
   }
   .ard-slide-toggle.ard-appearance-contained .ard-slide-toggle-handle {
@@ -293,7 +293,7 @@
     transform: translateX(-1px) translateY(-50%);
   }
   .ard-slide-toggle.ard-appearance-contained.ard-slide-toggle-selected .ard-slide-toggle-track {
-    border-color: var(--ard-uicl--content);
+    border-color: var(--ard-cmpcl--content);
   }
   .ard-slide-toggle.ard-appearance-contained.ard-slide-toggle-selected .ard-slide-toggle-track-overlay {
     opacity: 100%;