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

package/package.json

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

package/prebuilt-themes/default/badge.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-badge-small-font-size: 0.55rem;
     --ard-badge-small-font-weight: 400;
@@ -19,8 +19,8 @@
     display: flex;
     align-items: center;
     pointer-events: none;
-    background: var(--ard-cmpcl--bg-colored);
-    color: var(--ard-cmpcl--on-bg-colored);
+    background: var(--ard-uicl--bg-colored);
+    color: var(--ard-uicl--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

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-button-height: 2.5em;
     --ard-button-height-compact: 2.25em;
@@ -201,7 +201,7 @@
     border-radius: inherit;
     pointer-events: none;
     transition: opacity 0.2s ease;
-    background-color: var(--ard-cmpcl--overlay);
+    background-color: var(--ard-uicl--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-cmpcl--content);
+    color: var(--ard-uicl--content);
     border: none;
   }
   .ard-button.ard-appearance-transparent::before, .ard-button.ard-appearance-raised::before {
-    background: var(--ard-cmpcl--overlay-colored);
+    background: var(--ard-uicl--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-cmpcl--content);
+    color: var(--ard-uicl--content);
     border: 1px solid var(--ard-border-light);
   }
   .ard-button.ard-appearance-outlined::before {
-    background: var(--ard-cmpcl--overlay-colored);
+    background: var(--ard-uicl--overlay-colored);
   }
   .ard-button.ard-appearance-outlined-strong {
     background: var(--ard-bg);
-    color: var(--ard-cmpcl--content);
+    color: var(--ard-uicl--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-cmpcl--bg-colored);
-    color: var(--ard-cmpcl--on-bg-colored);
+    background: var(--ard-uicl--bg-colored);
+    color: var(--ard-uicl--on-bg-colored);
   }
   .ard-button.ard-appearance-flat, .ard-button.ard-appearance-raised-strong {
-    background: var(--ard-cmpcl--bg-colored);
-    color: var(--ard-cmpcl--on-bg-colored);
-    border: 1px solid var(--ard-cmpcl--bg-colored);
+    background: var(--ard-uicl--bg-colored);
+    color: var(--ard-uicl--on-bg-colored);
+    border: 1px solid var(--ard-uicl--bg-colored);
   }
   .ard-button.ard-appearance-flat::before, .ard-button.ard-appearance-raised-strong::before {
-    background: var(--ard-cmpcl--on-bg);
+    background: var(--ard-uicl--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-cmpcl--content-light);
+    color: var(--ard-uicl--content-light);
   }
   .ard-button.ard-appearance-transparent.ard-light-coloring::before {
-    background: var(--ard-cmpcl--overlay-colored-light);
+    background: var(--ard-uicl--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-cmpcl--overlay);
+    background: var(--ard-uicl--overlay);
   }
   .ard-button.ard-disabled.ard-button-with-pointer-events-when-disabled {
     pointer-events: all;

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

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-fab-size-standard: 3.5rem;
     --ard-fab-size-small: 2.5rem;
@@ -197,7 +197,7 @@
     border-radius: inherit;
     pointer-events: none;
     transition: opacity 0.2s ease;
-    background-color: var(--ard-cmpcl--overlay);
+    background-color: var(--ard-uicl--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-cmpcl--content);
+    color: var(--ard-uicl--content);
     border: none;
   }
   .ard-fab.ard-appearance-transparent::before, .ard-fab.ard-appearance-raised::before {
-    background: var(--ard-cmpcl--overlay-colored);
+    background: var(--ard-uicl--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-cmpcl--content);
+    color: var(--ard-uicl--content);
     border: 1px solid var(--ard-border-light);
   }
   .ard-fab.ard-appearance-outlined::before {
-    background: var(--ard-cmpcl--overlay-colored);
+    background: var(--ard-uicl--overlay-colored);
   }
   .ard-fab.ard-appearance-outlined-strong {
     background: var(--ard-bg);
-    color: var(--ard-cmpcl--content);
+    color: var(--ard-uicl--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-cmpcl--bg-colored);
-    color: var(--ard-cmpcl--on-bg-colored);
+    background: var(--ard-uicl--bg-colored);
+    color: var(--ard-uicl--on-bg-colored);
   }
   .ard-fab.ard-appearance-flat, .ard-fab.ard-appearance-raised-strong {
-    background: var(--ard-cmpcl--bg-colored);
-    color: var(--ard-cmpcl--on-bg-colored);
-    border: 1px solid var(--ard-cmpcl--bg-colored);
+    background: var(--ard-uicl--bg-colored);
+    color: var(--ard-uicl--on-bg-colored);
+    border: 1px solid var(--ard-uicl--bg-colored);
   }
   .ard-fab.ard-appearance-flat::before, .ard-fab.ard-appearance-raised-strong::before {
-    background: var(--ard-cmpcl--on-bg);
+    background: var(--ard-uicl--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-cmpcl--content-light);
+    color: var(--ard-uicl--content-light);
   }
   .ard-fab.ard-appearance-transparent.ard-light-coloring::before {
-    background: var(--ard-cmpcl--overlay-colored-light);
+    background: var(--ard-uicl--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-cmpcl--overlay);
+    background: var(--ard-uicl--overlay);
   }
   ard-fab.ard-disabled.ard-button-with-pointer-events-when-disabled {
     pointer-events: all;

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

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-icon-button-height: 2.1875em;
     --ard-icon-button-height-compact: 2.25em;
@@ -37,7 +37,7 @@
     justify-content: center;
     padding: 0;
     overflow: hidden;
-    color: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-uicl--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-cmpcl--overlay);
+    background-color: var(--ard-uicl--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-cmpcl--content);
+    color: var(--ard-uicl--content);
     border: none;
   }
   .ard-icon-button.ard-appearance-transparent::before, .ard-icon-button.ard-appearance-raised::before {
-    background: var(--ard-cmpcl--overlay-colored);
+    background: var(--ard-uicl--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-cmpcl--content);
+    color: var(--ard-uicl--content);
     border: 1px solid var(--ard-border-light);
   }
   .ard-icon-button.ard-appearance-outlined::before {
-    background: var(--ard-cmpcl--overlay-colored);
+    background: var(--ard-uicl--overlay-colored);
   }
   .ard-icon-button.ard-appearance-outlined-strong {
     background: var(--ard-bg);
-    color: var(--ard-cmpcl--content);
+    color: var(--ard-uicl--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-cmpcl--bg-colored);
-    color: var(--ard-cmpcl--on-bg-colored);
+    background: var(--ard-uicl--bg-colored);
+    color: var(--ard-uicl--on-bg-colored);
   }
   .ard-icon-button.ard-appearance-flat, .ard-icon-button.ard-appearance-raised-strong {
-    background: var(--ard-cmpcl--bg-colored);
-    color: var(--ard-cmpcl--on-bg-colored);
-    border: 1px solid var(--ard-cmpcl--bg-colored);
+    background: var(--ard-uicl--bg-colored);
+    color: var(--ard-uicl--on-bg-colored);
+    border: 1px solid var(--ard-uicl--bg-colored);
   }
   .ard-icon-button.ard-appearance-flat::before, .ard-icon-button.ard-appearance-raised-strong::before {
-    background: var(--ard-cmpcl--on-bg);
+    background: var(--ard-uicl--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-cmpcl--content-light);
+    color: var(--ard-uicl--content-light);
   }
   .ard-icon-button.ard-appearance-transparent.ard-light-coloring::before {
-    background: var(--ard-cmpcl--overlay-colored-light);
+    background: var(--ard-uicl--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-cmpcl--bg-colored-light);
+    color: var(--ard-uicl--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-cmpcl--overlay);
+    background: var(--ard-uicl--overlay);
   }
   ard-icon-button.ard-disabled > .ard-icon-button .ard-focus-overlay {
     opacity: 0;

package/prebuilt-themes/default/calendar.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-calendar-grid-size: 2.25rem;
     --ard-calendar-grid-gap: 0.25rem;
@@ -288,7 +288,7 @@
     pointer-events: none;
     transition: opacity 0.2s ease;
     z-index: -1;
-    background: var(--ard-cmpcl--overlay);
+    background: var(--ard-uicl--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-cmpcl--bg-colored);
-    border-bottom-color: var(--ard-cmpcl--bg-colored);
+    border-top-color: var(--ard-uicl--bg-colored);
+    border-bottom-color: var(--ard-uicl--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-cmpcl--bg-colored);
+    border-left-color: var(--ard-uicl--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-cmpcl--bg-colored);
+    border-right-color: var(--ard-uicl--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-cmpcl--bg-colored);
+    background-color: var(--ard-uicl--bg-colored);
   }
   .ard-calendar .ard-calendar__entry.ard-calendar__entry-selected .ard-calendar__entry-button {
-    color: var(--ard-cmpcl--on-bg-colored);
+    color: var(--ard-uicl--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-cmpcl--bg-colored);
+    background: var(--ard-uicl--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-cmpcl--overlay);
+    background: var(--ard-uicl--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/card.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-card-content-padding-top: 0;
     --ard-card-content-padding-right: 1em;

package/prebuilt-themes/default/checkbox-list.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-checkbox-list-padding: 0.375rem 0;
     --ard-checkbox-list-item-hover-opacity: 5%;

package/prebuilt-themes/default/checkbox.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-checkbox-size: 1.25em;
     --ard-checkbox-icon-size: 1em;

package/prebuilt-themes/default/chips.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-chip-margin: 0;
     --ard-chip-height: 2rem;
@@ -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-cmpcl--on-bg-colored);
-    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-uicl--on-bg-colored);
+    background: var(--ard-uicl--bg-colored);
   }
   .ard-chip-wrapper.ard-appearance-filled {
-    background: var(--ard-cmpcl--bg-colored-light);
-    color: var(--ard-cmpcl--on-bg-colored-light);
+    background: var(--ard-uicl--bg-colored-light);
+    color: var(--ard-uicl--on-bg-colored-light);
   }
   .ard-chip-wrapper.ard-appearance-filled-strong {
-    background: var(--ard-cmpcl--bg-colored);
-    color: var(--ard-cmpcl--on-bg-colored);
+    background: var(--ard-uicl--bg-colored);
+    color: var(--ard-uicl--on-bg-colored);
   }
   .ard-chip-wrapper.ard-appearance-outlined, .ard-chip-wrapper.ard-appearance-outlined-strong {
     background: transparent;
-    color: var(--ard-cmpcl--content);
-    border: 1px solid var(--ard-cmpcl--bg-colored);
+    color: var(--ard-uicl--content);
+    border: 1px solid var(--ard-uicl--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-cmpcl--bg-colored);
+    background: var(--ard-uicl--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-cmpcl--content);
-    border-color: var(--ard-cmpcl--content);
+    color: var(--ard-uicl--content);
+    border-color: var(--ard-uicl--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-cmpcl--bg-colored);
+    background: var(--ard-uicl--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/color-display.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-color-display-gap: 0.3ch;
     --ard-color-display-size: 1em * math.div(19, 16);

package/prebuilt-themes/default/color-picker.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   .ard-color-picker {
     width: 15rem;
     padding: 0.5rem;

package/prebuilt-themes/default/core.css

@@ -1,6 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-bg: white;
     --ard-bg-alt: black;

package/prebuilt-themes/default/dialog.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-dialog-content-actions-gap: 1rem;
     --ard-dialog-buttons-gap: 1rem;

package/prebuilt-themes/default/divider.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-divider-margin-size: 0.5rem;
     --ard-divider-width: 1px;

package/prebuilt-themes/default/dropdown-panel.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-dropdown-panel-margin: 0.375rem 0;
     --ard-dropdown-panel-margin-compact: 0.25rem 0;

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

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-file-drop-area-min-width: 15rem;
     --ard-file-drop-area-min-height: 10rem;
@@ -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-cmpcl--bg-colored-verylight);
+    background: var(--ard-uicl--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-cmpcl--border);
+    border: var(--ard-file-drop-area-outline-border-width, 2px) var(--ard-file-drop-area-outline-border-style, dashed) var(--ard-uicl--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-cmpcl--border);
+    border: 1px solid var(--ard-uicl--border);
     pointer-events: all;
   }
   .ard-file-drop-area .ard-file-drop-area-dragover-text {

package/prebuilt-themes/default/form-field-frame.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   .ard-form-field-frame {
     box-sizing: border-box;
     min-height: var(--ard-form-field-height);

package/prebuilt-themes/default/form-field.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-form-field-label-padding: 0.25rem 0 0.125rem 0.125rem;
     --ard-form-field-label-font-size: 0.9375rem;

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

@@ -1,7 +1,7 @@
 /**
  * Should be applied to the first element in the component's template.
  */
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-autocomplete-input-gap: 0.625rem;
     --ard-autocomplete-input-line-height: 1.25;

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

@@ -1,7 +1,7 @@
 /**
  * Should be applied to the first element in the component's template.
  */
-@layer ard-theme {
+@layer ard-ui {
   .ard-color-input {
     padding: 0 0.375rem;
     min-width: 10rem;

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

@@ -1,7 +1,7 @@
 /**
  * Should be applied to the first element in the component's template.
  */
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-date-input-gap: 0.625rem;
     --ard-date-input-line-height: 1.25;

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

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-digit-input-font-weight: 500;
     --ard-digit-input-gap: 0.375em;

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

@@ -1,7 +1,7 @@
 /**
  * Should be applied to the first element in the component's template.
  */
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-file-input-gap: 0.625rem;
     --ard-file-input-line-height: 1.25;
@@ -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-cmpcl--content-light);
+    outline: var(--ard-file-input-dragover-outline-width, 2px) var(--ard-file-input-dragover-outline-style, solid) var(--ard-uicl--content-light);
   }
   .ard-file-input .ard-file-input__value {
     overflow: hidden;

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

@@ -1,7 +1,7 @@
 /**
  * Should be applied to the first element in the component's template.
  */
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-hex-input-gap: 0.625rem;
     --ard-hex-input-line-height: 1.25;

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

@@ -1,7 +1,7 @@
 /**
  * Should be applied to the first element in the component's template.
  */
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-input-gap: 0.625rem;
     --ard-input-line-height: 1.25;

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

@@ -1,7 +1,7 @@
 /**
  * Should be applied to the first element in the component's template.
  */
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-number-input-gap: 0.625rem;
     --ard-number-input-line-height: 1.25;

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

@@ -1,7 +1,7 @@
 /**
  * Should be applied to the first element in the component's template.
  */
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-password-input-gap: 0.625rem;
     --ard-password-input-line-height: 1.25;

package/prebuilt-themes/default/kbd-shortcut.css

@@ -1,4 +1,4 @@
-@layer ard-theme {
+@layer ard-ui {
   :root {
     --ard-kbd-shortcut-font-size: 0.875em;
     --ard-kbd-shortcut-transparent-font-size: 0.75em;