@trebired/frontend 7.1.16 → 7.1.18

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 7.1.17
+
+- Updated shared utilities to `@trebired/utils@^0.4.4`.
+
 All notable package changes are documented here.
 
 ## 7.1.16

package/dist/actions/styles/index.scss

@@ -1,35 +1,35 @@
 .tbf-button {
-  --tbf-primitives-action-control-current-icon-color: var(
-    --tbf-primitives-action-control-slots-icon-color,
-    var(--tbf-primitives-button-slots-icon-color, currentColor)
+  --tbf-ui-action-current-icon: var(
+    --tbf-ui-action-slot-icon,
+    var(--tbf-ui-btn-slot-icon, currentColor)
   );
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--tbf-primitives-action-control-root-gap, var(--tbf-primitives-button-root-gap, 8px));
+  gap: var(--tbf-ui-action-root-gap, var(--tbf-ui-btn-root-gap, 8px));
   min-height: var(
-    --tbf-primitives-action-control-root-min-height,
-    var(--tbf-primitives-action-control-root-height, var(--tbf-primitives-button-root-height, 28px))
+    --tbf-ui-action-root-min-h,
+    var(--tbf-ui-action-root-height, var(--tbf-ui-btn-root-height, 28px))
   );
   box-sizing: border-box;
-  padding: var(--tbf-primitives-action-control-root-padding, var(--tbf-primitives-button-root-padding, 0 12px));
-  padding-block: var(--tbf-primitives-action-control-root-padding-block, var(--tbf-primitives-button-root-padding-block, 0));
+  padding: var(--tbf-ui-action-root-padding, var(--tbf-ui-btn-root-padding, 0 12px));
+  padding-block: var(--tbf-ui-action-root-py, var(--tbf-ui-btn-root-py, 0));
   border: var(
-    --tbf-primitives-action-control-root-border,
-    var(--tbf-primitives-button-root-border, var(--border-width) solid var(--border-surface-2))
+    --tbf-ui-action-root-border,
+    var(--tbf-ui-btn-root-border, var(--border-width) solid var(--border-surface-2))
   );
   border-radius: var(
-    --tbf-primitives-action-control-root-radius,
-    var(--tbf-primitives-button-root-radius, var(--radius-md, var(--tbf-radius, 0)))
+    --tbf-ui-action-root-radius,
+    var(--tbf-ui-btn-root-radius, var(--radius-md, var(--tbf-radius, 0)))
   );
-  color: var(--tbf-primitives-action-control-root-color, var(--tbf-primitives-button-root-color, var(--text-color)));
-  background: var(--tbf-primitives-action-control-root-background, var(--tbf-primitives-button-root-background, transparent));
+  color: var(--tbf-ui-action-root-color, var(--tbf-ui-btn-root-color, var(--text-color)));
+  background: var(--tbf-ui-action-root-bg, var(--tbf-ui-btn-root-bg, transparent));
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
-  font-family: var(--tbf-primitives-action-control-root-font-family, var(--tbf-font-sans, "Inter", sans-serif));
-  font-size: var(--tbf-primitives-action-control-root-font-size, var(--tbf-primitives-button-root-font-size, 12px));
-  font-weight: var(--tbf-primitives-action-control-root-font-weight, var(--tbf-primitives-button-root-font-weight, 600));
+  font-family: var(--tbf-ui-action-root-font-family, var(--tbf-font-sans, "Inter", sans-serif));
+  font-size: var(--tbf-ui-action-root-font-size, var(--tbf-ui-btn-root-font-size, 12px));
+  font-weight: var(--tbf-ui-action-root-font-weight, var(--tbf-ui-btn-root-font-weight, 600));
   line-height: 1.15;
   text-decoration: none;
   white-space: nowrap;
@@ -38,22 +38,22 @@
 .tbf-button:hover,
 .tbf-button[aria-pressed="true"],
 .tbf-button[data-tbf-active="true"] {
-  --tbf-primitives-action-control-current-icon-color: var(
-    --tbf-primitives-action-control-states-hover-icon-color,
-    var(--tbf-primitives-button-states-hover-icon-color, currentColor)
+  --tbf-ui-action-current-icon: var(
+    --tbf-ui-action-state-hover-icon,
+    var(--tbf-ui-btn-state-hover-icon, currentColor)
   );
-  border-color: var(--tbf-primitives-action-control-states-hover-border-color, var(--tbf-primitives-button-states-hover-border-color, currentColor));
-  color: var(--tbf-primitives-action-control-states-hover-color, var(--tbf-primitives-button-states-hover-color, currentColor));
+  border-color: var(--tbf-ui-action-state-hover-border, var(--tbf-ui-btn-state-hover-border, currentColor));
+  color: var(--tbf-ui-action-state-hover-color, var(--tbf-ui-btn-state-hover-color, currentColor));
   background: var(
-    --tbf-primitives-action-control-states-hover-background,
-    var(--tbf-primitives-button-states-hover-background, var(--tbf-primitives-button-root-background, transparent))
+    --tbf-ui-action-state-hover-bg,
+    var(--tbf-ui-btn-state-hover-bg, var(--tbf-ui-btn-root-bg, transparent))
   );
 }
 
 .tbf-button:disabled,
 .tbf-button[disabled],
 .tbf-button.disabled {
-  opacity: var(--tbf-primitives-action-control-states-disabled-opacity, var(--tbf-primitives-button-states-disabled-opacity, 0.55));
+  opacity: var(--tbf-ui-action-state-disabled-opacity, var(--tbf-ui-btn-state-disabled-opacity, 0.55));
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -63,49 +63,49 @@
 .tbf-button > i svg,
 .tbf-button > [data-icon],
 .tbf-button > [data-icon] svg {
-  color: var(--tbf-primitives-action-control-current-icon-color);
+  color: var(--tbf-ui-action-current-icon);
   flex: 0 0 auto;
 }
 
 .tbf-button--strong {
-  --tbf-primitives-action-control-current-icon-color: var(
-    --tbf-primitives-action-control-tones-highlight-icon-color,
-    var(--tbf-primitives-button-tones-highlight-icon-color, currentColor)
+  --tbf-ui-action-current-icon: var(
+    --tbf-ui-action-tone-highlight-icon,
+    var(--tbf-ui-btn-tone-highlight-icon, currentColor)
   );
   border-color: var(
-    --tbf-primitives-action-control-tones-highlight-border-color,
-    var(--tbf-primitives-button-tones-highlight-border-color, currentColor)
+    --tbf-ui-action-tone-highlight-border,
+    var(--tbf-ui-btn-tone-highlight-border, currentColor)
   );
   color: var(
-    --tbf-primitives-action-control-tones-highlight-color,
-    var(--tbf-primitives-button-tones-highlight-color, currentColor)
+    --tbf-ui-action-tone-highlight-color,
+    var(--tbf-ui-btn-tone-highlight-color, currentColor)
   );
   background: var(
-    --tbf-primitives-action-control-tones-highlight-background,
-    var(--tbf-primitives-button-tones-highlight-background, var(--tbf-primitives-button-root-background, transparent))
+    --tbf-ui-action-tone-highlight-bg,
+    var(--tbf-ui-btn-tone-highlight-bg, var(--tbf-ui-btn-root-bg, transparent))
   );
 }
 
 .tbf-button--strong:hover,
 .tbf-button--strong[aria-pressed="true"],
 .tbf-button--strong[data-tbf-active="true"] {
-  --tbf-primitives-action-control-current-icon-color: var(
-    --tbf-primitives-action-control-tones-highlight-states-hover-icon-color,
-    var(--tbf-primitives-button-tones-highlight-states-hover-icon-color, currentColor)
+  --tbf-ui-action-current-icon: var(
+    --tbf-ui-action-tone-highlight-state-hover-icon,
+    var(--tbf-ui-btn-tone-highlight-state-hover-icon, currentColor)
   );
   border-color: var(
-    --tbf-primitives-action-control-tones-highlight-states-hover-border-color,
-    var(--tbf-primitives-button-tones-highlight-states-hover-border-color, currentColor)
+    --tbf-ui-action-tone-highlight-state-hover-border,
+    var(--tbf-ui-btn-tone-highlight-state-hover-border, currentColor)
   );
   color: var(
-    --tbf-primitives-action-control-tones-highlight-states-hover-color,
-    var(--tbf-primitives-button-tones-highlight-states-hover-color, currentColor)
+    --tbf-ui-action-tone-highlight-state-hover-color,
+    var(--tbf-ui-btn-tone-highlight-state-hover-color, currentColor)
   );
   background: var(
-    --tbf-primitives-action-control-tones-highlight-states-hover-background,
+    --tbf-ui-action-tone-highlight-state-hover-bg,
     var(
-      --tbf-primitives-button-tones-highlight-states-hover-background,
-      var(--tbf-primitives-button-states-hover-background, var(--tbf-primitives-button-root-background, transparent))
+      --tbf-ui-btn-tone-highlight-state-hover-bg,
+      var(--tbf-ui-btn-state-hover-bg, var(--tbf-ui-btn-root-bg, transparent))
     )
   );
 }

package/dist/config/scss.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scss.d.ts","sourceRoot":"","sources":["../../../src/config/scss.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACV,wBAAwB,EAExB,cAAc,EAEf,MAAM,YAAY,CAAC;AA6JpB,iBAAS,oBAAoB,CAC3B,WAAW,EAAE,cAAc,GAAG,wBAAwB,GACrD,MAAM,CAkBR;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"scss.d.ts","sourceRoot":"","sources":["../../../src/config/scss.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EACV,wBAAwB,EAExB,cAAc,EAEf,MAAM,YAAY,CAAC;AAyJpB,iBAAS,oBAAoB,CAC3B,WAAW,EAAE,cAAc,GAAG,wBAAwB,GACrD,MAAM,CAkBR;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/config/scss.js

@@ -2,6 +2,7 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { renderFontsCss } from "./fonts.js";
 import { cssComment, cssString } from "./shared.js";
+import { componentGroupCssName, componentTokenCssName } from "../namespace/css-var.js";
 import { SYSTEM_ORDER, THEME_MODE_ATTRIBUTE, normalizeFrontendConfig, } from "./normalize.js";
 import { findPaletteMode, paletteModeScaleDeclarations, paletteSemanticDeclarations, paletteSuffixedDeclarations, } from "./palette.js";
 import { renderScalesCss } from "./scales-css.js";
@@ -47,15 +48,12 @@ function isNormalizedConfig(value) {
 function tokenDeclarations(prefix, tokens) {
     return flattenThemeTokens(tokens).map(([key, value]) => `  --${prefix}-${key}: ${String(value)};`);
 }
-function cssTokenKey(value) {
-    return value.replace(/([a-z0-9])([A-Z])/gu, "$1-$2").toLowerCase();
-}
 function componentTokenDeclarations(config) {
     const lines = [];
     for (const [componentGroup, tokens] of Object.entries(config.components)) {
-        const componentKey = cssTokenKey(componentGroup);
+        const componentKey = componentGroupCssName(componentGroup);
         for (const [key, value] of flattenThemeTokens(tokens)) {
-            lines.push(`  --${config.prefix}-${componentKey}-${cssTokenKey(key)}: ${String(value)};`);
+            lines.push(`  --${config.prefix}-${componentKey}-${componentTokenCssName(key)}: ${String(value)};`);
         }
     }
     return lines;

package/dist/config/scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"scss.js","sourceRoot":"","sources":["../../../src/config/scss.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"scss.js","sourceRoot":"","sources":["../../../src/config/scss.ts"],"names":[],"mappings":"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"}

package/dist/flash/styles/index.scss

@@ -20,11 +20,11 @@
   padding: var(--tbf-feedback-flash-container-padding, 15px);
   border: var(
     --tbf-feedback-flash-container-border,
-    var(--tbf-border-width, 1px) solid var(--tbf-feedback-flash-container-border-color, var(--border-surface-1, currentColor))
+    var(--tbf-border-width, 1px) solid var(--tbf-feedback-flash-container-border, var(--border-surface-1, currentColor))
   );
   border-radius: var(--tbf-feedback-flash-container-radius, var(--radius-lg, var(--tbf-radius, 0)));
   color: var(--tbf-feedback-flash-container-color, var(--text-color, currentColor));
-  background: var(--tbf-feedback-flash-container-background, var(--background-surface-1, transparent));
+  background: var(--tbf-feedback-flash-container-bg, var(--background-surface-1, transparent));
   box-shadow: var(--tbf-feedback-flash-container-shadow, var(--tbf-shadow, none));
   opacity: 0;
   overflow: hidden;
@@ -49,29 +49,29 @@
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
-  color: var(--tbf-feedback-flash-slots-icon-color, currentColor);
-  font-size: var(--tbf-feedback-flash-slots-icon-size, 13px);
-  font-weight: var(--tbf-feedback-flash-slots-icon-font-weight, 700);
+  color: var(--tbf-feedback-flash-slot-icon, currentColor);
+  font-size: var(--tbf-feedback-flash-slot-icon-size, 13px);
+  font-weight: var(--tbf-feedback-flash-slot-icon-font-weight, 700);
 }
 
 .tbf-flash[data-tbf-flash-type="success"] .tbf-flash__icon {
-  color: var(--tbf-feedback-flash-intents-success-icon-color, var(--tbf-feedback-flash-slots-icon-color, currentColor));
-  --tbf-icon-color: var(--tbf-feedback-flash-intents-success-icon-color, var(--tbf-feedback-flash-slots-icon-color, currentColor));
+  color: var(--tbf-feedback-flash-intents-success-icon, var(--tbf-feedback-flash-slot-icon, currentColor));
+  --tbf-icon-color: var(--tbf-feedback-flash-intents-success-icon, var(--tbf-feedback-flash-slot-icon, currentColor));
 }
 
 .tbf-flash[data-tbf-flash-type="error"] .tbf-flash__icon {
-  color: var(--tbf-feedback-flash-intents-error-icon-color, var(--tbf-feedback-flash-slots-icon-color, currentColor));
-  --tbf-icon-color: var(--tbf-feedback-flash-intents-error-icon-color, var(--tbf-feedback-flash-slots-icon-color, currentColor));
+  color: var(--tbf-feedback-flash-intents-error-icon, var(--tbf-feedback-flash-slot-icon, currentColor));
+  --tbf-icon-color: var(--tbf-feedback-flash-intents-error-icon, var(--tbf-feedback-flash-slot-icon, currentColor));
 }
 
 .tbf-flash[data-tbf-flash-type="warn"] .tbf-flash__icon {
-  color: var(--tbf-feedback-flash-intents-warn-icon-color, var(--tbf-feedback-flash-slots-icon-color, currentColor));
-  --tbf-icon-color: var(--tbf-feedback-flash-intents-warn-icon-color, var(--tbf-feedback-flash-slots-icon-color, currentColor));
+  color: var(--tbf-feedback-flash-intents-warn-icon, var(--tbf-feedback-flash-slot-icon, currentColor));
+  --tbf-icon-color: var(--tbf-feedback-flash-intents-warn-icon, var(--tbf-feedback-flash-slot-icon, currentColor));
 }
 
 .tbf-flash[data-tbf-flash-type="info"] .tbf-flash__icon {
-  color: var(--tbf-feedback-flash-intents-info-icon-color, var(--tbf-feedback-flash-slots-icon-color, currentColor));
-  --tbf-icon-color: var(--tbf-feedback-flash-intents-info-icon-color, var(--tbf-feedback-flash-slots-icon-color, currentColor));
+  color: var(--tbf-feedback-flash-intents-info-icon, var(--tbf-feedback-flash-slot-icon, currentColor));
+  --tbf-icon-color: var(--tbf-feedback-flash-intents-info-icon, var(--tbf-feedback-flash-slot-icon, currentColor));
 }
 
 .tbf-flash__body,
@@ -88,14 +88,14 @@
 }
 
 .tbf-flash__title {
-  color: var(--tbf-feedback-flash-slots-title-color, currentColor);
-  font-weight: var(--tbf-feedback-flash-slots-title-font-weight, 400);
+  color: var(--tbf-feedback-flash-slot-title-color, currentColor);
+  font-weight: var(--tbf-feedback-flash-slot-title-font-weight, 400);
   text-shadow: none;
 }
 
 .tbf-flash__description {
-  color: var(--tbf-feedback-flash-slots-description-color, var(--text-color-muted, currentColor));
-  font-size: var(--tbf-feedback-flash-slots-description-font-size, 0.92rem);
+  color: var(--tbf-feedback-flash-slot-description-color, var(--text-color-muted, currentColor));
+  font-size: var(--tbf-feedback-flash-slot-description-font-size, 0.92rem);
   text-shadow: none;
 }
 
@@ -110,8 +110,8 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  height: var(--tbf-feedback-flash-slots-progress-height, 4px);
-  background: var(--tbf-feedback-flash-slots-progress-color, currentColor);
+  height: var(--tbf-feedback-flash-slot-progress-height, 4px);
+  background: var(--tbf-feedback-flash-slot-progress-color, currentColor);
   transform-origin: left center;
   animation-name: tbf-flash-progress;
   animation-timing-function: linear;

package/dist/inputs/advanced/checkbox/styles.scss

@@ -16,7 +16,7 @@
   user-select: none;
 
   &:focus-visible {
-    outline: var(--border-width) solid var(--tbf-primitives-input-states-focus-color, var(--tbf-focus, currentColor));
+    outline: var(--border-width) solid var(--tbf-ui-input-state-focus-color, var(--tbf-focus, currentColor));
     outline-offset: 2px;
   }
 
@@ -27,7 +27,7 @@
   &.is-checked,
   &:has(> .checkbox-input:checked) {
     border-color: var(--border-surface-1);
-    background: var(--tbf-primitives-choice-checked-background, var(--background-surface-1, transparent));
+    background: var(--tbf-ui-choice-checked-bg, var(--background-surface-1, transparent));
   }
 
   &:not(:has(.checkbox-option-description)) {
@@ -47,9 +47,9 @@
   height: 18px;
   margin-top: 0;
   border-radius: var(--radius-xs);
-  border: var(--border-width) solid var(--tbf-primitives-choice-control-border-color, var(--border-surface-1, currentColor));
+  border: var(--border-width) solid var(--tbf-ui-choice-control-border, var(--border-surface-1, currentColor));
   background: var(--background-surface-1);
-  color: var(--tbf-primitives-choice-control-color, currentColor);
+  color: var(--tbf-ui-choice-control-color, currentColor);
   line-height: 0;
   position: relative;
   transition:
@@ -65,11 +65,11 @@
   }
 
   .checkbox-control-icon.active {
-    color: var(--tbf-primitives-choice-control-active-icon-color, currentColor);
+    color: var(--tbf-ui-choice-control-active-icon, currentColor);
   }
 
   .checkbox-control-icon.partial {
-    color: var(--tbf-primitives-choice-control-partial-icon-color, currentColor);
+    color: var(--tbf-ui-choice-control-partial-icon, currentColor);
   }
 
   .checkbox-control-icon::before {
@@ -100,20 +100,20 @@
 
 .checkbox-option:has(> .checkbox-input:checked) > .checkbox-control,
 .checkbox-option.is-checked > .checkbox-control {
-  border-color: var(--tbf-primitives-choice-control-checked-border-color, var(--tbf-focus, currentColor));
-  background: var(--tbf-primitives-choice-control-checked-background, var(--tbf-focus, transparent));
-  color: var(--tbf-primitives-choice-control-checked-color, var(--background-page, currentColor));
+  border-color: var(--tbf-ui-choice-control-checked-border, var(--tbf-focus, currentColor));
+  background: var(--tbf-ui-choice-control-checked-bg, var(--tbf-focus, transparent));
+  color: var(--tbf-ui-choice-control-checked-color, var(--background-page, currentColor));
 }
 
 .checkbox-option:has(> .checkbox-input:indeterminate) > .checkbox-control,
 .checkbox-option.is-indeterminate > .checkbox-control {
-  border-color: var(--tbf-primitives-choice-control-partial-border-color, var(--tbf-focus, currentColor));
+  border-color: var(--tbf-ui-choice-control-partial-border, var(--tbf-focus, currentColor));
   background: color-mix(
     in srgb,
     var(--background-surface-1) 70%,
     var(--tbf-focus, currentColor)
   );
-  color: var(--tbf-primitives-choice-control-partial-color, currentColor);
+  color: var(--tbf-ui-choice-control-partial-color, currentColor);
 }
 
 .checkbox-option:has(> .checkbox-input:checked)

package/dist/inputs/advanced/dropdown/styles/base.scss

@@ -33,7 +33,7 @@
     top: calc(var(--dd-h) / 2);
     transform: translateY(-3px);
     border: calc(var(--border-width) * 6) solid transparent;
-    border-top-color: var(--tbf-primitives-dropdown-arrow-color, var(--text-color-muted, currentColor));
+    border-top-color: var(--tbf-ui-dropdown-arrow-color, var(--text-color-muted, currentColor));
     pointer-events: none;
   }
 
@@ -69,7 +69,7 @@
     top: calc(100% + 4px);
     left: 0;
     right: 0;
-    background: var(--tbf-primitives-dropdown-menu-background, var(--background-surface-1, transparent));
+    background: var(--tbf-ui-dropdown-menu-bg, var(--background-surface-1, transparent));
     border: var(--border-width) solid var(--border-surface-1);
     border-radius: var(--radius-lg);
     margin: 0;
@@ -164,13 +164,13 @@
       user-select: none;
 
       &:hover {
-        background: var(--tbf-primitives-dropdown-option-states-hover-background, var(--background-surface-2, transparent));
+        background: var(--tbf-ui-dropdown-option-state-hover-bg, var(--background-surface-2, transparent));
       }
 
       &[data-dropdown-selected="true"] {
         background: color-mix(
           in srgb,
-          var(--tbf-primitives-dropdown-option-states-selected-background, var(--background-surface-2, transparent)) 70%,
+          var(--tbf-ui-dropdown-option-state-selected-bg, var(--background-surface-2, transparent)) 70%,
           var(--accent, var(--tbf-focus, currentColor)) 30%
         );
       }

package/dist/inputs/advanced/dropdown/styles/portaled.scss

@@ -2,7 +2,7 @@
 
 .options[data-dropdown-portaled="true"] {
   position: fixed;
-  background: var(--tbf-primitives-dropdown-menu-background, var(--background-surface-1, transparent));
+  background: var(--tbf-ui-dropdown-menu-bg, var(--background-surface-1, transparent));
   border: var(--border-width) solid var(--border-surface-1);
   border-radius: var(--radius-lg);
   margin: 0;
@@ -100,7 +100,7 @@
 }
 
 .options[data-dropdown-portaled="true"] .dropdown-list li:hover {
-  background: var(--tbf-primitives-dropdown-option-states-hover-background, var(--background-surface-2, transparent));
+  background: var(--tbf-ui-dropdown-option-state-hover-bg, var(--background-surface-2, transparent));
 }
 
 .options[data-dropdown-portaled="true"]
@@ -108,7 +108,7 @@
 li[data-dropdown-selected="true"] {
   background: color-mix(
     in srgb,
-    var(--tbf-primitives-dropdown-option-states-selected-background, var(--background-surface-2, transparent)) 70%,
+    var(--tbf-ui-dropdown-option-state-selected-bg, var(--background-surface-2, transparent)) 70%,
     var(--accent, var(--tbf-focus, currentColor)) 30%
   );
 }

package/dist/inputs/advanced/input/styles/file.scss

@@ -8,14 +8,14 @@
   padding: 0 10px;
   border: none;
   border-radius: var(--radius-xs);
-  background: var(--tbf-primitives-input-file-button-background, var(--background-surface-2, transparent));
+  background: var(--tbf-ui-input-file-btn-bg, var(--background-surface-2, transparent));
   color: var(--text-color-muted);
   cursor: pointer;
 }
 
 .file-input::file-selector-button:hover {
   background: var(
-    --tbf-primitives-input-file-button-states-hover-background,
-    var(--tbf-primitives-input-file-button-background, var(--background-surface-2, transparent))
+    --tbf-ui-input-file-btn-state-hover-bg,
+    var(--tbf-ui-input-file-btn-bg, var(--background-surface-2, transparent))
   );
 }

package/dist/inputs/advanced/radio/styles.scss

@@ -16,7 +16,7 @@
   user-select: none;
 
   &:focus-visible {
-    outline: var(--border-width) solid var(--tbf-primitives-input-states-focus-color, var(--tbf-focus, currentColor));
+    outline: var(--border-width) solid var(--tbf-ui-input-state-focus-color, var(--tbf-focus, currentColor));
     outline-offset: 2px;
   }
 
@@ -27,7 +27,7 @@
   &.is-checked,
   &:has(> .radio-input:checked) {
     border-color: var(--border-surface-1);
-    background: var(--tbf-primitives-choice-checked-background, var(--background-surface-1, transparent));
+    background: var(--tbf-ui-choice-checked-bg, var(--background-surface-1, transparent));
   }
 
   &:not(:has(.radio-option-description)) {
@@ -47,9 +47,9 @@
   height: 18px;
   margin-top: 0;
   border-radius: var(--radius-xs);
-  border: var(--border-width) solid var(--tbf-primitives-choice-control-border-color, var(--border-surface-1, currentColor));
+  border: var(--border-width) solid var(--tbf-ui-choice-control-border, var(--border-surface-1, currentColor));
   background: var(--background-surface-1);
-  color: var(--tbf-primitives-choice-control-color, currentColor);
+  color: var(--tbf-ui-choice-control-color, currentColor);
   line-height: 0;
   position: relative;
   transition:
@@ -65,7 +65,7 @@
   }
 
   .radio-control-icon.active {
-    color: var(--tbf-primitives-choice-control-active-icon-color, currentColor);
+    color: var(--tbf-ui-choice-control-active-icon, currentColor);
   }
 
   .radio-control-icon::before {
@@ -84,9 +84,9 @@
 
 .radio-option:has(> .radio-input:checked) > .radio-control,
 .radio-option.is-checked > .radio-control {
-  border-color: var(--tbf-primitives-choice-control-checked-border-color, var(--tbf-focus, currentColor));
-  background: var(--tbf-primitives-choice-control-checked-background, var(--tbf-focus, transparent));
-  color: var(--tbf-primitives-choice-control-checked-color, var(--background-page, currentColor));
+  border-color: var(--tbf-ui-choice-control-checked-border, var(--tbf-focus, currentColor));
+  background: var(--tbf-ui-choice-control-checked-bg, var(--tbf-focus, transparent));
+  color: var(--tbf-ui-choice-control-checked-color, var(--background-page, currentColor));
 }
 
 .radio-option:has(> .radio-input:checked)

package/dist/inputs/advanced/tabs/styles.scss

@@ -4,42 +4,42 @@ $tabs-pane-animation-easing: cubic-bezier(0.22, 1, 0.36, 1);
 .tabs {
   display: flex;
   width: 100%;
-  gap: var(--tbf-primitives-tabs-list-gap, var(--tbf-gap-sm));
+  gap: var(--tbf-ui-tabs-list-gap, var(--tbf-gap-sm));
 
   .tab {
     flex: 1 1 0;
     min-width: 0;
     max-width: 100%;
     box-sizing: border-box;
-    height: var(--tbf-primitives-tabs-root-height, 34px);
-    padding: 0 var(--tbf-primitives-tabs-root-padding-inline, 14px);
-    border: var(--tbf-primitives-tabs-root-border, var(--border-width) solid var(--border-surface-1));
-    border-radius: var(--tbf-primitives-tabs-root-radius, var(--radius-sm));
-    color: var(--tbf-primitives-tabs-root-color, var(--text-color));
-    background: var(--tbf-primitives-tabs-root-background, transparent);
+    height: var(--tbf-ui-tabs-root-height, 34px);
+    padding: 0 var(--tbf-ui-tabs-root-px, 14px);
+    border: var(--tbf-ui-tabs-root-border, var(--border-width) solid var(--border-surface-1));
+    border-radius: var(--tbf-ui-tabs-root-radius, var(--radius-sm));
+    color: var(--tbf-ui-tabs-root-color, var(--text-color));
+    background: var(--tbf-ui-tabs-root-bg, transparent);
     cursor: pointer;
     transition:
     background 0.15s,
     border-color 0.15s;
-    font-family: var(--tbf-primitives-tabs-root-font-family, var(--tbf-font-sans, "Inter", sans-serif));
-    font-size: var(--tbf-primitives-tabs-root-font-size, 14px);
-    font-weight: var(--tbf-primitives-tabs-root-font-weight, inherit);
-    line-height: calc(var(--tbf-primitives-tabs-root-height, 34px) - (var(--border-width) * 2));
+    font-family: var(--tbf-ui-tabs-root-font-family, var(--tbf-font-sans, "Inter", sans-serif));
+    font-size: var(--tbf-ui-tabs-root-font-size, 14px);
+    font-weight: var(--tbf-ui-tabs-root-font-weight, inherit);
+    line-height: calc(var(--tbf-ui-tabs-root-height, 34px) - (var(--border-width) * 2));
     text-align: left;
 
     &:hover {
-      background: var(--tbf-primitives-tabs-states-hover-background, var(--background-surface-1));
-      border-color: var(--tbf-primitives-tabs-states-hover-border-color, var(--border-surface-1));
-      color: var(--tbf-primitives-tabs-states-hover-color, var(--tbf-primitives-tabs-root-color, var(--text-color)));
+      background: var(--tbf-ui-tabs-state-hover-bg, var(--background-surface-1));
+      border-color: var(--tbf-ui-tabs-state-hover-border, var(--border-surface-1));
+      color: var(--tbf-ui-tabs-state-hover-color, var(--tbf-ui-tabs-root-color, var(--text-color)));
     }
 
     &.active,
     &[aria-selected="true"],
     &[data-tbf-active="true"],
     &[data-active="true"] {
-      background: var(--tbf-primitives-tabs-states-active-background, var(--background-surface-1));
-      border-color: var(--tbf-primitives-tabs-states-active-border-color, var(--border-surface-1));
-      color: var(--tbf-primitives-tabs-states-active-color, var(--tbf-primitives-tabs-root-color, var(--text-color)));
+      background: var(--tbf-ui-tabs-state-active-bg, var(--background-surface-1));
+      border-color: var(--tbf-ui-tabs-state-active-border, var(--border-surface-1));
+      color: var(--tbf-ui-tabs-state-active-color, var(--tbf-ui-tabs-root-color, var(--text-color)));
     }
 
     .tab-label {
@@ -105,7 +105,7 @@ $tabs-pane-animation-easing: cubic-bezier(0.22, 1, 0.36, 1);
   position: absolute;
   left: var(--tabs-nested-indicator-left, 50%);
   top: 50%;
-  color: var(--tbf-primitives-tabs-nested-indicator-color, var(--text-color-muted, currentColor));
+  color: var(--tbf-ui-tabs-nested-indicator-color, var(--text-color-muted, currentColor));
   font-size: 20px;
   line-height: 1;
   transform: translate(-50%, -50%);
@@ -140,9 +140,9 @@ $tabs-pane-animation-easing: cubic-bezier(0.22, 1, 0.36, 1);
 
   .tabs .tab {
     flex: 1 1 calc(50% - 8px);
-    height: var(--tbf-primitives-tabs-responsive-mobile-height, 36px);
-    font-size: var(--tbf-primitives-tabs-responsive-mobile-font-size, 13px);
-    line-height: calc(var(--tbf-primitives-tabs-responsive-mobile-height, 36px) - (var(--border-width) * 2));
+    height: var(--tbf-ui-tabs-resp-mobile-height, 36px);
+    font-size: var(--tbf-ui-tabs-resp-mobile-font-size, 13px);
+    line-height: calc(var(--tbf-ui-tabs-resp-mobile-height, 36px) - (var(--border-width) * 2));
   }
 }
 

package/dist/inputs/advanced/toggle/styles.scss

@@ -46,7 +46,7 @@
 }
 
 .toggle-side.active .toggle-side-label {
-  color: var(--tbf-primitives-toggle-active-color, var(--text-color, currentColor));
+  color: var(--tbf-ui-toggle-active-color, var(--text-color, currentColor));
 }
 
 .toggle-handle {
@@ -68,7 +68,7 @@
   padding: 3px;
   border: var(--border-width) solid var(--border-surface-1);
   border-radius: 999px;
-  background: var(--tbf-primitives-toggle-track-background, var(--background-surface-1, transparent));
+  background: var(--tbf-ui-toggle-track-bg, var(--background-surface-1, transparent));
   transition:
   background 120ms ease,
   border-color 120ms ease;
@@ -78,7 +78,7 @@
   width: 24px;
   height: 24px;
   border-radius: 999px;
-  background: var(--tbf-primitives-toggle-thumb-background, var(--text-color-muted, currentColor));
+  background: var(--tbf-ui-toggle-thumb-bg, var(--text-color-muted, currentColor));
   box-shadow: 0 1px 2px rgb(0 0 0 / 0.22);
   transform: translateX(0);
   transition: transform 140ms ease;
@@ -89,7 +89,7 @@
 }
 
 .toggle-handle:focus-visible {
-  outline: var(--border-width) solid var(--tbf-primitives-input-states-focus-color, var(--tbf-focus, currentColor));
+  outline: var(--border-width) solid var(--tbf-ui-input-state-focus-color, var(--tbf-focus, currentColor));
   outline-offset: 3px;
   border-radius: 999px;
 }