@trebired/frontend 7.1.17 → 7.1.18

package/dist/inputs/styles/cropper-internals.scss

@@ -44,7 +44,7 @@
 }
 
 .tbf-upload-crop__stage .cropper-modal {
-  background: var(--tbf-primitives-upload-cropper-stage-overlay-color, rgb(0 0 0 / 72%));
+  background: var(--tbf-ui-upload-cropper-stage-overlay-color, rgb(0 0 0 / 72%));
 }
 
 .tbf-upload-crop__stage .cropper-view-box {
@@ -67,14 +67,14 @@
 
 .tbf-upload-crop__stage .cropper-view-box::before {
   inset: 0;
-  border: var(--tbf-primitives-upload-cropper-stage-line-width, 1px) solid
-  var(--tbf-primitives-upload-cropper-stage-line-contrast-color, #000);
+  border: var(--tbf-ui-upload-cropper-stage-line-width, 1px) solid
+  var(--tbf-ui-upload-cropper-stage-line-contrast-color, #000);
 }
 
 .tbf-upload-crop__stage .cropper-view-box::after {
-  inset: var(--tbf-primitives-upload-cropper-stage-line-width, 1px);
-  border: var(--tbf-primitives-upload-cropper-stage-line-width, 1px) solid
-  var(--tbf-primitives-upload-cropper-stage-line-color, #fff);
+  inset: var(--tbf-ui-upload-cropper-stage-line-width, 1px);
+  border: var(--tbf-ui-upload-cropper-stage-line-width, 1px) solid
+  var(--tbf-ui-upload-cropper-stage-line-color, #fff);
 }
 
 .tbf-upload-crop__stage .cropper-dashed {
@@ -104,7 +104,7 @@
 .tbf-upload-crop__stage .cropper-dashed.dashed-h::after {
   left: 0;
   width: 100%;
-  height: calc(var(--tbf-primitives-upload-cropper-stage-guide-width, 1px) * 2);
+  height: calc(var(--tbf-ui-upload-cropper-stage-guide-width, 1px) * 2);
   background: var(--tbf-upload-cropper-guide-horizontal);
 }
 
@@ -126,7 +126,7 @@
 .tbf-upload-crop__stage .cropper-dashed.dashed-v::before,
 .tbf-upload-crop__stage .cropper-dashed.dashed-v::after {
   top: 0;
-  width: calc(var(--tbf-primitives-upload-cropper-stage-guide-width, 1px) * 2);
+  width: calc(var(--tbf-ui-upload-cropper-stage-guide-width, 1px) * 2);
   height: 100%;
   background: var(--tbf-upload-cropper-guide-vertical);
 }
@@ -160,14 +160,14 @@
   top: 0;
   left: -4px;
   width: 9px;
-  height: calc(var(--tbf-primitives-upload-cropper-stage-guide-width, 1px) * 2);
+  height: calc(var(--tbf-ui-upload-cropper-stage-guide-width, 1px) * 2);
   background: var(--tbf-upload-cropper-guide-horizontal);
 }
 
 .tbf-upload-crop__stage .cropper-center::after {
   top: -4px;
   left: 0;
-  width: calc(var(--tbf-primitives-upload-cropper-stage-guide-width, 1px) * 2);
+  width: calc(var(--tbf-ui-upload-cropper-stage-guide-width, 1px) * 2);
   height: 9px;
   background: var(--tbf-upload-cropper-guide-vertical);
 }
@@ -181,7 +181,7 @@
 
 .tbf-upload-crop__stage .cropper-face {
   inset: 0;
-  background: var(--tbf-primitives-upload-cropper-stage-face-color, rgb(255 255 255 / 14%));
+  background: var(--tbf-ui-upload-cropper-stage-face-color, rgb(255 255 255 / 14%));
   z-index: 1;
 }
 
@@ -193,47 +193,47 @@
 .tbf-upload-crop__stage .cropper-line.line-e,
 .tbf-upload-crop__stage .cropper-line.line-w {
   top: 0;
-  width: calc(var(--tbf-primitives-upload-cropper-stage-line-width, 1px) * 2);
+  width: calc(var(--tbf-ui-upload-cropper-stage-line-width, 1px) * 2);
   height: 100%;
   cursor: ew-resize;
 }
 
 .tbf-upload-crop__stage .cropper-line.line-e {
-  right: calc(var(--tbf-primitives-upload-cropper-stage-line-width, 1px) * -1);
+  right: calc(var(--tbf-ui-upload-cropper-stage-line-width, 1px) * -1);
 }
 
 .tbf-upload-crop__stage .cropper-line.line-w {
-  left: calc(var(--tbf-primitives-upload-cropper-stage-line-width, 1px) * -1);
+  left: calc(var(--tbf-ui-upload-cropper-stage-line-width, 1px) * -1);
 }
 
 .tbf-upload-crop__stage .cropper-line.line-n,
 .tbf-upload-crop__stage .cropper-line.line-s {
   left: 0;
   width: 100%;
-  height: calc(var(--tbf-primitives-upload-cropper-stage-line-width, 1px) * 2);
+  height: calc(var(--tbf-ui-upload-cropper-stage-line-width, 1px) * 2);
   cursor: ns-resize;
 }
 
 .tbf-upload-crop__stage .cropper-line.line-n {
-  top: calc(var(--tbf-primitives-upload-cropper-stage-line-width, 1px) * -1);
+  top: calc(var(--tbf-ui-upload-cropper-stage-line-width, 1px) * -1);
 }
 
 .tbf-upload-crop__stage .cropper-line.line-s {
-  bottom: calc(var(--tbf-primitives-upload-cropper-stage-line-width, 1px) * -1);
+  bottom: calc(var(--tbf-ui-upload-cropper-stage-line-width, 1px) * -1);
 }
 
 .tbf-upload-crop__stage .cropper-point {
-  width: var(--tbf-primitives-upload-cropper-stage-point-size, 12px);
-  height: var(--tbf-primitives-upload-cropper-stage-point-size, 12px);
+  width: var(--tbf-ui-upload-cropper-stage-point-size, 12px);
+  height: var(--tbf-ui-upload-cropper-stage-point-size, 12px);
   margin: 0;
   border: var(
-    --tbf-primitives-upload-cropper-stage-point-border,
+    --tbf-ui-upload-cropper-stage-point-border,
     var(--tbf-border-width, 1px) solid var(--tbf-text, #000)
   );
-  border-radius: var(--tbf-primitives-upload-cropper-stage-point-radius, var(--tbf-radius-sm, 0));
-  background: var(--tbf-primitives-upload-cropper-stage-point-background, #fff);
-  box-shadow: 0 0 0 var(--tbf-primitives-upload-cropper-stage-line-width, 1px)
-  var(--tbf-primitives-upload-cropper-stage-line-color, #fff);
+  border-radius: var(--tbf-ui-upload-cropper-stage-point-radius, var(--tbf-radius-sm, 0));
+  background: var(--tbf-ui-upload-cropper-stage-point-bg, #fff);
+  box-shadow: 0 0 0 var(--tbf-ui-upload-cropper-stage-line-width, 1px)
+  var(--tbf-ui-upload-cropper-stage-line-color, #fff);
   cursor: pointer;
   transform: translate(var(--tbf-upload-cropper-point-x, 0), var(--tbf-upload-cropper-point-y, 0));
   z-index: 5;
@@ -250,19 +250,19 @@
 }
 
 .tbf-upload-crop__stage .cropper-point:is(.point-e, .point-ne, .point-se) {
-  right: var(--tbf-primitives-upload-cropper-stage-point-inset, 0);
+  right: var(--tbf-ui-upload-cropper-stage-point-inset, 0);
 }
 
 .tbf-upload-crop__stage .cropper-point:is(.point-w, .point-nw, .point-sw) {
-  left: var(--tbf-primitives-upload-cropper-stage-point-inset, 0);
+  left: var(--tbf-ui-upload-cropper-stage-point-inset, 0);
 }
 
 .tbf-upload-crop__stage .cropper-point:is(.point-n, .point-ne, .point-nw) {
-  top: var(--tbf-primitives-upload-cropper-stage-point-inset, 0);
+  top: var(--tbf-ui-upload-cropper-stage-point-inset, 0);
 }
 
 .tbf-upload-crop__stage .cropper-point:is(.point-s, .point-se, .point-sw) {
-  bottom: var(--tbf-primitives-upload-cropper-stage-point-inset, 0);
+  bottom: var(--tbf-ui-upload-cropper-stage-point-inset, 0);
 }
 
 .tbf-upload-crop__stage .cropper-hidden {

package/dist/inputs/styles/cropper.scss

@@ -1,17 +1,17 @@
 .tbf-upload-cropper-modal .tbf-modal__content,
 .tbf-upload-cropper-modal__content {
-  width: var(--tbf-primitives-upload-cropper-modal-width, min(960px, calc(100vw - 40px)));
-  max-height: var(--tbf-primitives-upload-cropper-modal-max-height, min(90vh, 920px));
+  width: var(--tbf-ui-upload-cropper-modal-width, min(960px, calc(100vw - 40px)));
+  max-height: var(--tbf-ui-upload-cropper-modal-max-h, min(90vh, 920px));
 }
 
 .tbf-upload-crop {
   display: grid;
-  gap: var(--tbf-primitives-upload-cropper-root-gap, var(--tbf-gap-md, 12px));
+  gap: var(--tbf-ui-upload-cropper-root-gap, var(--tbf-gap-md, 12px));
 }
 
 .tbf-upload-crop__header {
   display: grid;
-  gap: var(--tbf-primitives-upload-cropper-header-gap, var(--tbf-gap-xs, 4px));
+  gap: var(--tbf-ui-upload-cropper-header-gap, var(--tbf-gap-xs, 4px));
 }
 
 .tbf-upload-crop__title,
@@ -20,37 +20,37 @@
 }
 
 .tbf-upload-crop__description {
-  color: var(--tbf-primitives-upload-cropper-description-color, var(--tbf-text-muted, #000));
+  color: var(--tbf-ui-upload-cropper-description-color, var(--tbf-text-muted, #000));
 }
 
 .tbf-upload-crop__stage {
   position: relative;
-  height: var(--tbf-primitives-upload-cropper-stage-height, min(62vh, 640px));
-  min-height: var(--tbf-primitives-upload-cropper-stage-min-height, 320px);
+  height: var(--tbf-ui-upload-cropper-stage-height, min(62vh, 640px));
+  min-height: var(--tbf-ui-upload-cropper-stage-min-h, 320px);
   overflow: visible;
   border: var(
-    --tbf-primitives-upload-cropper-stage-border,
+    --tbf-ui-upload-cropper-stage-border,
     var(--tbf-border-width, 1px) solid var(--tbf-border, #000)
   );
-  border-radius: var(--tbf-primitives-upload-cropper-stage-radius, var(--tbf-radius, 0));
-  background: var(--tbf-primitives-upload-cropper-stage-background, var(--tbf-surface-muted, #fff));
+  border-radius: var(--tbf-ui-upload-cropper-stage-radius, var(--tbf-radius, 0));
+  background: var(--tbf-ui-upload-cropper-stage-bg, var(--tbf-surface-muted, #fff));
   --tbf-upload-cropper-guide-horizontal: linear-gradient(
     to bottom,
-    var(--tbf-primitives-upload-cropper-stage-line-contrast-color, #000) 0,
-    var(--tbf-primitives-upload-cropper-stage-line-contrast-color, #000)
-    var(--tbf-primitives-upload-cropper-stage-guide-width, 1px),
-    var(--tbf-primitives-upload-cropper-stage-line-color, #fff)
-    var(--tbf-primitives-upload-cropper-stage-guide-width, 1px),
-    var(--tbf-primitives-upload-cropper-stage-line-color, #fff) 100%
+    var(--tbf-ui-upload-cropper-stage-line-contrast-color, #000) 0,
+    var(--tbf-ui-upload-cropper-stage-line-contrast-color, #000)
+    var(--tbf-ui-upload-cropper-stage-guide-width, 1px),
+    var(--tbf-ui-upload-cropper-stage-line-color, #fff)
+    var(--tbf-ui-upload-cropper-stage-guide-width, 1px),
+    var(--tbf-ui-upload-cropper-stage-line-color, #fff) 100%
   );
   --tbf-upload-cropper-guide-vertical: linear-gradient(
     to right,
-    var(--tbf-primitives-upload-cropper-stage-line-contrast-color, #000) 0,
-    var(--tbf-primitives-upload-cropper-stage-line-contrast-color, #000)
-    var(--tbf-primitives-upload-cropper-stage-guide-width, 1px),
-    var(--tbf-primitives-upload-cropper-stage-line-color, #fff)
-    var(--tbf-primitives-upload-cropper-stage-guide-width, 1px),
-    var(--tbf-primitives-upload-cropper-stage-line-color, #fff) 100%
+    var(--tbf-ui-upload-cropper-stage-line-contrast-color, #000) 0,
+    var(--tbf-ui-upload-cropper-stage-line-contrast-color, #000)
+    var(--tbf-ui-upload-cropper-stage-guide-width, 1px),
+    var(--tbf-ui-upload-cropper-stage-line-color, #fff)
+    var(--tbf-ui-upload-cropper-stage-guide-width, 1px),
+    var(--tbf-ui-upload-cropper-stage-line-color, #fff) 100%
   );
 }
 
@@ -64,22 +64,22 @@
 .tbf-upload-crop__actions {
   display: flex;
   justify-content: flex-end;
-  gap: var(--tbf-primitives-upload-cropper-actions-gap, var(--tbf-gap-sm, 8px));
+  gap: var(--tbf-ui-upload-cropper-actions-gap, var(--tbf-gap-sm, 8px));
 }
 
 @media (max-width: 768px) {
   .tbf-upload-cropper-modal .tbf-modal__content,
   .tbf-upload-cropper-modal__content {
-    width: var(--tbf-primitives-upload-responsive-mobile-cropper-modal-width, calc(100vw - 24px));
+    width: var(--tbf-ui-upload-resp-mobile-cropper-modal-width, calc(100vw - 24px));
     max-height: var(
-      --tbf-primitives-upload-responsive-mobile-cropper-modal-max-height,
+      --tbf-ui-upload-resp-mobile-cropper-modal-max-h,
       calc(100vh - 24px)
     );
   }
 
   .tbf-upload-crop__stage {
-    height: var(--tbf-primitives-upload-responsive-mobile-cropper-stage-height, min(52vh, 420px));
-    min-height: var(--tbf-primitives-upload-responsive-mobile-cropper-stage-min-height, 260px);
+    height: var(--tbf-ui-upload-resp-mobile-cropper-stage-height, min(52vh, 420px));
+    min-height: var(--tbf-ui-upload-resp-mobile-cropper-stage-min-h, 260px);
   }
 
   .tbf-upload-crop__actions {

package/dist/inputs/styles/upload.scss

@@ -1,7 +1,7 @@
 .tbf-upload {
   display: grid;
-  gap: var(--tbf-primitives-upload-root-gap, var(--tbf-gap-sm, 8px));
-  color: var(--tbf-primitives-upload-root-color, var(--tbf-text, #000));
+  gap: var(--tbf-ui-upload-root-gap, var(--tbf-gap-sm, 8px));
+  color: var(--tbf-ui-upload-root-color, var(--tbf-text, #000));
 }
 
 .tbf-upload__input {
@@ -12,35 +12,35 @@
   display: grid;
   align-items: center;
   grid-template-columns: auto minmax(0, 1fr);
-  gap: var(--tbf-primitives-upload-surface-gap, var(--tbf-gap-md, 12px));
-  min-height: var(--tbf-primitives-upload-surface-min-height, 72px);
+  gap: var(--tbf-ui-upload-surface-gap, var(--tbf-gap-md, 12px));
+  min-height: var(--tbf-ui-upload-surface-min-h, 72px);
   box-sizing: border-box;
-  padding: var(--tbf-primitives-upload-surface-padding, var(--tbf-gap-md, 12px));
+  padding: var(--tbf-ui-upload-surface-padding, var(--tbf-gap-md, 12px));
   border: var(
-    --tbf-primitives-upload-surface-border,
+    --tbf-ui-upload-surface-border,
     var(--tbf-border-width, 1px) solid var(--tbf-border, #000)
   );
-  border-radius: var(--tbf-primitives-upload-surface-radius, var(--tbf-radius, 0));
-  color: var(--tbf-primitives-upload-surface-color, var(--tbf-text, #000));
-  background: var(--tbf-primitives-upload-surface-background, var(--tbf-surface-muted, #fff));
+  border-radius: var(--tbf-ui-upload-surface-radius, var(--tbf-radius, 0));
+  color: var(--tbf-ui-upload-surface-color, var(--tbf-text, #000));
+  background: var(--tbf-ui-upload-surface-bg, var(--tbf-surface-muted, #fff));
   transition: var(
-    --tbf-primitives-upload-surface-transition,
+    --tbf-ui-upload-surface-transition,
     border-color 140ms ease, background 140ms ease, box-shadow 140ms ease
   );
 }
 
 .tbf-upload[data-tbf-upload-drop="true"] .tbf-upload__surface {
-  border-style: var(--tbf-primitives-upload-surface-states-drop-border-style, dashed);
+  border-style: var(--tbf-ui-upload-surface-state-drop-border-style, dashed);
 }
 
 .tbf-upload[data-tbf-upload-drop="true"][data-tbf-upload-drag] .tbf-upload__surface {
-  border-color: var(--tbf-primitives-upload-surface-states-drag-border-color, var(--tbf-focus, #000));
-  box-shadow: var(--tbf-primitives-upload-surface-states-drag-shadow, 0 0 0 2px var(--tbf-focus, #000));
-  background: var(--tbf-primitives-upload-surface-states-drag-background, var(--tbf-surface, #fff));
+  border-color: var(--tbf-ui-upload-surface-state-drag-border, var(--tbf-focus, #000));
+  box-shadow: var(--tbf-ui-upload-surface-state-drag-shadow, 0 0 0 2px var(--tbf-focus, #000));
+  background: var(--tbf-ui-upload-surface-state-drag-bg, var(--tbf-surface, #fff));
 }
 
 .tbf-upload[data-tbf-upload-has-files="true"] .tbf-upload__surface {
-  border-style: var(--tbf-primitives-upload-surface-states-has-files-border-style, solid);
+  border-style: var(--tbf-ui-upload-surface-state-files-border-style, solid);
 }
 
 .tbf-upload__content,
@@ -52,11 +52,11 @@
 }
 
 .tbf-upload__content {
-  gap: var(--tbf-primitives-upload-content-gap, var(--tbf-gap-sm, 8px));
+  gap: var(--tbf-ui-upload-content-gap, var(--tbf-gap-sm, 8px));
 }
 
 .tbf-upload__meta {
-  gap: var(--tbf-primitives-upload-meta-gap, var(--tbf-gap-sm, 8px));
+  gap: var(--tbf-ui-upload-meta-gap, var(--tbf-gap-sm, 8px));
   overflow: hidden;
 }
 
@@ -64,7 +64,7 @@
   display: flex;
   flex: 0 0 auto;
   align-items: center;
-  gap: var(--tbf-primitives-upload-actions-gap, var(--tbf-gap-sm, 8px));
+  gap: var(--tbf-ui-upload-actions-gap, var(--tbf-gap-sm, 8px));
   min-width: 0;
 }
 
@@ -90,23 +90,23 @@
 }
 
 .tbf-upload__filename {
-  font-size: var(--tbf-primitives-upload-filename-font-size, 0.95rem);
-  line-height: var(--tbf-primitives-upload-filename-line-height, 1.15);
+  font-size: var(--tbf-ui-upload-filename-font-size, 0.95rem);
+  line-height: var(--tbf-ui-upload-filename-line-h, 1.15);
 }
 
 .tbf-upload__hint {
-  color: var(--tbf-primitives-upload-hint-color, var(--tbf-text-muted, #000));
-  font-size: var(--tbf-primitives-upload-hint-font-size, 0.92rem);
-  line-height: var(--tbf-primitives-upload-hint-line-height, 1.15);
+  color: var(--tbf-ui-upload-hint-color, var(--tbf-text-muted, #000));
+  font-size: var(--tbf-ui-upload-hint-font-size, 0.92rem);
+  line-height: var(--tbf-ui-upload-hint-line-h, 1.15);
 }
 
 .tbf-upload__list {
   display: grid;
-  gap: var(--tbf-primitives-upload-list-gap, var(--tbf-gap-xs, 4px));
+  gap: var(--tbf-ui-upload-list-gap, var(--tbf-gap-xs, 4px));
   overflow: auto;
-  max-height: var(--tbf-primitives-upload-list-max-height, 84px);
+  max-height: var(--tbf-ui-upload-list-max-h, 84px);
   margin: 0;
-  padding-left: var(--tbf-primitives-upload-list-padding-left, 18px);
+  padding-left: var(--tbf-ui-upload-list-padding-left, 18px);
 }
 
 .tbf-upload[data-tbf-upload-entry-count="0"] .tbf-upload__list,
@@ -124,20 +124,20 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--tbf-primitives-upload-preview-size, 64px);
-  height: var(--tbf-primitives-upload-preview-size, 64px);
-  min-width: var(--tbf-primitives-upload-preview-size, 64px);
+  width: var(--tbf-ui-upload-preview-size, 64px);
+  height: var(--tbf-ui-upload-preview-size, 64px);
+  min-width: var(--tbf-ui-upload-preview-size, 64px);
   overflow: hidden;
   border: var(
-    --tbf-primitives-upload-preview-border,
+    --tbf-ui-upload-preview-border,
     var(--tbf-border-width, 1px) solid var(--tbf-border, #000)
   );
-  border-radius: var(--tbf-primitives-upload-preview-radius, var(--tbf-radius, 0));
-  background: var(--tbf-primitives-upload-preview-background, var(--tbf-surface, #fff));
+  border-radius: var(--tbf-ui-upload-preview-radius, var(--tbf-radius, 0));
+  background: var(--tbf-ui-upload-preview-bg, var(--tbf-surface, #fff));
 }
 
 .tbf-upload__preview[data-tbf-upload-preview-shape="circle"] {
-  border-radius: var(--tbf-primitives-upload-preview-round-radius, var(--tbf-radius-round, 999px));
+  border-radius: var(--tbf-ui-upload-preview-round-radius, var(--tbf-radius-round, 999px));
 }
 
 .tbf-upload__preview-image {
@@ -148,21 +148,21 @@
 }
 
 .tbf-upload__preview-empty {
-  padding: var(--tbf-primitives-upload-preview-empty-padding, var(--tbf-gap-xs, 4px));
-  color: var(--tbf-primitives-upload-preview-empty-color, var(--tbf-text-muted, #000));
-  font-size: var(--tbf-primitives-upload-preview-empty-font-size, 0.82rem);
-  line-height: var(--tbf-primitives-upload-preview-empty-line-height, 1.1);
+  padding: var(--tbf-ui-upload-preview-empty-padding, var(--tbf-gap-xs, 4px));
+  color: var(--tbf-ui-upload-preview-empty-color, var(--tbf-text-muted, #000));
+  font-size: var(--tbf-ui-upload-preview-empty-font-size, 0.82rem);
+  line-height: var(--tbf-ui-upload-preview-empty-line-h, 1.1);
   text-align: center;
 }
 
 @media (max-width: 640px) {
   .tbf-upload__surface {
-    gap: var(--tbf-primitives-upload-responsive-mobile-surface-gap, var(--tbf-gap-sm, 8px));
-    padding: var(--tbf-primitives-upload-responsive-mobile-surface-padding, var(--tbf-gap-sm, 8px));
+    gap: var(--tbf-ui-upload-resp-mobile-surface-gap, var(--tbf-gap-sm, 8px));
+    padding: var(--tbf-ui-upload-resp-mobile-surface-padding, var(--tbf-gap-sm, 8px));
   }
 
   .tbf-upload__actions {
     flex-wrap: wrap;
-    gap: var(--tbf-primitives-upload-responsive-mobile-actions-gap, var(--tbf-gap-xs, 4px));
+    gap: var(--tbf-ui-upload-resp-mobile-actions-gap, var(--tbf-gap-xs, 4px));
   }
 }

package/dist/language/styles/index.scss

@@ -10,10 +10,10 @@
 
 .tbf-locale-switch-popover .tbf-locale-option[data-tbf-locale-current="true"] {
   background: var(
-    --tbf-shell-language-option-states-current-background,
-    var(--tbf-overlays-popover-item-states-selected-background, var(--background-surface-2, transparent))
+    --tbf-shell-language-option-state-current-bg,
+    var(--tbf-overlay-popover-item-state-selected-bg, var(--background-surface-2, transparent))
   );
-  color: var(--tbf-shell-language-option-states-current-color, var(--text-color));
+  color: var(--tbf-shell-language-option-state-current-color, var(--text-color));
 }
 
 .tbf-locale-code {

package/dist/logs/styles.scss

@@ -113,7 +113,7 @@
   background: var(--tbf-canvas-bg, var(--dot-grid));
 
   ::selection {
-    background-color: var(--tbf-data-log-selection-background, var(--background-surface-2, currentColor)) !important;
+    background-color: var(--tbf-data-log-selection-bg, var(--background-surface-2, currentColor)) !important;
     color: currentColor;
   }
 }
@@ -150,7 +150,7 @@
   cursor: pointer;
 
   &:hover {
-    background: var(--tbf-data-log-line-states-hover-background, color-mix(in srgb, var(--border-surface-1, currentColor) 28%, transparent));
+    background: var(--tbf-data-log-line-state-hover-bg, color-mix(in srgb, var(--border-surface-1, currentColor) 28%, transparent));
   }
 
   &::after {

package/dist/modal/styles/index.scss

@@ -5,15 +5,15 @@
   display: grid;
   place-items: center;
   box-sizing: border-box;
-  padding: var(--tbf-overlays-modal-backdrop-padding, 24px);
-  background: var(--tbf-overlays-modal-backdrop-background, var(--tbf-overlay, rgb(0 0 0 / 48%)));
+  padding: var(--tbf-overlay-modal-backdrop-padding, 24px);
+  background: var(--tbf-overlay-modal-backdrop-bg, var(--tbf-overlay, rgb(0 0 0 / 48%)));
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition:
-  opacity var(--tbf-overlays-modal-motion-duration, var(--tbf-transition-normal))
-  var(--tbf-overlays-modal-motion-easing, ease),
-  visibility 0s linear var(--tbf-overlays-modal-motion-duration, var(--tbf-transition-normal));
+  opacity var(--tbf-overlay-modal-motion-duration, var(--tbf-transition-normal))
+  var(--tbf-overlay-modal-motion-easing, ease),
+  visibility 0s linear var(--tbf-overlay-modal-motion-duration, var(--tbf-transition-normal));
 }
 
 [data-tbf-modal][data-tbf-open="true"],
@@ -23,35 +23,35 @@
 }
 
 [data-tbf-modal][data-tbf-open="true"] {
-  opacity: var(--tbf-overlays-modal-backdrop-opacity, 1);
+  opacity: var(--tbf-overlay-modal-backdrop-opacity, 1);
   pointer-events: auto;
   transition:
-  opacity var(--tbf-overlays-modal-motion-duration, var(--tbf-transition-normal))
-  var(--tbf-overlays-modal-motion-easing, ease),
+  opacity var(--tbf-overlay-modal-motion-duration, var(--tbf-transition-normal))
+  var(--tbf-overlay-modal-motion-easing, ease),
   visibility 0s;
 }
 
 .tbf-modal__content,
 [data-tbf-modal-content] {
-  width: var(--tbf-overlays-modal-content-width, min(720px, calc(100vw - 48px)));
-  max-height: var(--tbf-overlays-modal-content-max-height, min(80vh, 720px));
+  width: var(--tbf-overlay-modal-content-width, min(720px, calc(100vw - 48px)));
+  max-height: var(--tbf-overlay-modal-content-max-h, min(80vh, 720px));
   box-sizing: border-box;
-  padding: var(--tbf-overlays-modal-content-padding, 20px);
+  padding: var(--tbf-overlay-modal-content-padding, 20px);
   overflow-y: auto;
   border: var(
-    --tbf-overlays-modal-content-border,
+    --tbf-overlay-modal-content-border,
     var(--tbf-border-width, 1px) solid var(--tbf-border, #000)
   );
-  border-radius: var(--tbf-overlays-modal-content-radius, var(--tbf-radius, 0));
-  color: var(--tbf-overlays-modal-content-color, var(--tbf-text, #000));
-  background: var(--tbf-overlays-modal-content-background, var(--tbf-surface, #fff));
-  box-shadow: var(--tbf-overlays-modal-content-shadow, var(--tbf-shadow, 0 0 0 1px #000));
-  transform: scale(var(--tbf-overlays-modal-motion-initial-scale, 0.96));
+  border-radius: var(--tbf-overlay-modal-content-radius, var(--tbf-radius, 0));
+  color: var(--tbf-overlay-modal-content-color, var(--tbf-text, #000));
+  background: var(--tbf-overlay-modal-content-bg, var(--tbf-surface, #fff));
+  box-shadow: var(--tbf-overlay-modal-content-shadow, var(--tbf-shadow, 0 0 0 1px #000));
+  transform: scale(var(--tbf-overlay-modal-motion-initial-scale, 0.96));
   transition:
-  transform var(--tbf-overlays-modal-motion-duration, var(--tbf-transition-normal))
-  var(--tbf-overlays-modal-motion-easing, ease);
+  transform var(--tbf-overlay-modal-motion-duration, var(--tbf-transition-normal))
+  var(--tbf-overlay-modal-motion-easing, ease);
 }
 
 [data-tbf-modal][data-tbf-open="true"] [data-tbf-modal-content] {
-  transform: scale(var(--tbf-overlays-modal-motion-open-scale, 1));
+  transform: scale(var(--tbf-overlay-modal-motion-open-scale, 1));
 }

package/dist/namespace/css-var.d.ts

@@ -0,0 +1,6 @@
+declare function cssTokenKey(value: string): string;
+declare function componentGroupCssName(value: string): string;
+declare function componentTokenCssName(value: string): string;
+declare function frontendCssTokenName(name: string): string;
+export { componentGroupCssName, componentTokenCssName, cssTokenKey, frontendCssTokenName, };
+//# sourceMappingURL=css-var.d.ts.map

package/dist/namespace/css-var.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-var.d.ts","sourceRoot":"","sources":["../../../src/namespace/css-var.ts"],"names":[],"mappings":"AA4BA,iBAAS,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE1C;AAED,iBAAS,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGpD;AAED,iBAAS,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKpD;AAED,iBAAS,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOlD;AAED,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,oBAAoB,GACrB,CAAC"}

package/dist/namespace/css-var.js

@@ -0,0 +1,47 @@
+const TOKEN_GROUP_ALIASES = {
+    overlays: "overlay",
+    primitives: "ui",
+    surfaces: "surf",
+};
+const TOKEN_KEY_REPLACEMENTS = [
+    [/\baction-control\b/gu, "action"],
+    [/\btext-link\b/gu, "link"],
+    [/\bbutton\b/gu, "btn"],
+    [/\bresponsive\b/gu, "resp"],
+    [/\bhas-files\b/gu, "files"],
+    [/\bborder-inline-color\b/gu, "inline-border"],
+    [/\bborder-color\b/gu, "border"],
+    [/\bicon-color\b/gu, "icon"],
+    [/\btext-decoration\b/gu, "decoration"],
+    [/\btext-underline\b/gu, "underline"],
+    [/\bpadding-inline\b/gu, "px"],
+    [/\bpadding-block\b/gu, "py"],
+    [/\bbackground\b/gu, "bg"],
+    [/\bline-height\b/gu, "line-h"],
+    [/\bmax-height\b/gu, "max-h"],
+    [/\bmin-height\b/gu, "min-h"],
+    [/\bstates\b/gu, "state"],
+    [/\btones\b/gu, "tone"],
+    [/\bslots\b/gu, "slot"],
+];
+function cssTokenKey(value) {
+    return value.replace(/([a-z0-9])([A-Z])/gu, "$1-$2").toLowerCase();
+}
+function componentGroupCssName(value) {
+    const key = cssTokenKey(value);
+    return TOKEN_GROUP_ALIASES[key] || key;
+}
+function componentTokenCssName(value) {
+    return TOKEN_KEY_REPLACEMENTS.reduce((result, [pattern, replacement]) => result.replace(pattern, replacement), cssTokenKey(value));
+}
+function frontendCssTokenName(name) {
+    const key = cssTokenKey(name);
+    const [group = "", ...rest] = key.split("-");
+    if (!rest.length)
+        return componentGroupCssName(group);
+    return [componentGroupCssName(group), componentTokenCssName(rest.join("-"))]
+        .filter(Boolean)
+        .join("-");
+}
+export { componentGroupCssName, componentTokenCssName, cssTokenKey, frontendCssTokenName, };
+//# sourceMappingURL=css-var.js.map

package/dist/namespace/css-var.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-var.js","sourceRoot":"","sources":["../../../src/namespace/css-var.ts"],"names":[],"mappings":"AAAA,MAAM,mBAAmB,GAA2B;IAClD,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF,MAAM,sBAAsB,GAA4B;IACtD,CAAC,sBAAsB,EAAE,QAAQ,CAAC;IAClC,CAAC,iBAAiB,EAAE,MAAM,CAAC;IAC3B,CAAC,cAAc,EAAE,KAAK,CAAC;IACvB,CAAC,kBAAkB,EAAE,MAAM,CAAC;IAC5B,CAAC,iBAAiB,EAAE,OAAO,CAAC;IAC5B,CAAC,2BAA2B,EAAE,eAAe,CAAC;IAC9C,CAAC,oBAAoB,EAAE,QAAQ,CAAC;IAChC,CAAC,kBAAkB,EAAE,MAAM,CAAC;IAC5B,CAAC,uBAAuB,EAAE,YAAY,CAAC;IACvC,CAAC,sBAAsB,EAAE,WAAW,CAAC;IACrC,CAAC,sBAAsB,EAAE,IAAI,CAAC;IAC9B,CAAC,qBAAqB,EAAE,IAAI,CAAC;IAC7B,CAAC,kBAAkB,EAAE,IAAI,CAAC;IAC1B,CAAC,mBAAmB,EAAE,QAAQ,CAAC;IAC/B,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAC7B,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAC7B,CAAC,cAAc,EAAE,OAAO,CAAC;IACzB,CAAC,aAAa,EAAE,MAAM,CAAC;IACvB,CAAC,aAAa,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,SAAS,WAAW,CAAC,KAAa;IAChC,OAAO,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;AACrE,CAAC;AAED,SAAS,qBAAqB,CAAC,KAAa;IAC1C,MAAM,GAAG,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAC/B,OAAO,mBAAmB,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;AACzC,CAAC;AAED,SAAS,qBAAqB,CAAC,KAAa;IAC1C,OAAO,sBAAsB,CAAC,MAAM,CAClC,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,WAAW,CAAC,EACxE,WAAW,CAAC,KAAK,CAAC,CACnB,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAAC,IAAY;IACxC,MAAM,GAAG,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,CAAC,KAAK,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC7C,IAAI,CAAC,IAAI,CAAC,MAAM;QAAE,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAC;IACtD,OAAO,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;SAC3E,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;AACb,CAAC;AAED,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,oBAAoB,GACrB,CAAC"}

package/dist/namespace/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/namespace/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAQjD,iBAAS,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/C;AAED,iBAAS,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED,iBAAS,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAElD;AAED,iBAAS,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED,iBAAS,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI/C;AAED,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,GAClB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/namespace/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AASjD,iBAAS,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/C;AAED,iBAAS,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED,iBAAS,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAElD;AAED,iBAAS,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED,iBAAS,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI/C;AAED,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,GAClB,CAAC"}

package/dist/namespace/index.js

@@ -1,4 +1,5 @@
 import { FRONTEND_PREFIX } from "./generated.js";
+import { frontendCssTokenName } from "./css-var.js";
 function prefixedName(name) {
     const normalized = String(name || "").trim();
     if (!normalized)
@@ -15,7 +16,7 @@ function frontendDataSelector(name) {
     return `[${frontendDataAttr(name)}]`;
 }
 function frontendCssVar(name) {
-    return `--${prefixedName(name)}`;
+    return `--${prefixedName(frontendCssTokenName(name))}`;
 }
 function frontendEventName(name) {
     const normalized = String(name || "").trim();

package/dist/namespace/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/namespace/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,SAAS,YAAY,CAAC,IAAY;IAChC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IAC7C,IAAI,CAAC,UAAU;QAAE,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC9E,OAAO,eAAe,CAAC,CAAC,CAAC,GAAG,eAAe,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;AAC3E,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAY;IACrC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAY;IACpC,OAAO,QAAQ,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;AACtC,CAAC;AAED,SAAS,oBAAoB,CAAC,IAAY;IACxC,OAAO,IAAI,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC;AACvC,CAAC;AAED,SAAS,cAAc,CAAC,IAAY;IAClC,OAAO,KAAK,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;AACnC,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAY;IACrC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IAC7C,IAAI,CAAC,UAAU;QAAE,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;IAC1E,OAAO,eAAe,CAAC,CAAC,CAAC,GAAG,eAAe,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;AAC3E,CAAC;AAED,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,GAClB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/namespace/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD,SAAS,YAAY,CAAC,IAAY;IAChC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IAC7C,IAAI,CAAC,UAAU;QAAE,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC9E,OAAO,eAAe,CAAC,CAAC,CAAC,GAAG,eAAe,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;AAC3E,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAY;IACrC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAY;IACpC,OAAO,QAAQ,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;AACtC,CAAC;AAED,SAAS,oBAAoB,CAAC,IAAY;IACxC,OAAO,IAAI,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC;AACvC,CAAC;AAED,SAAS,cAAc,CAAC,IAAY;IAClC,OAAO,KAAK,YAAY,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;AACzD,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAY;IACrC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IAC7C,IAAI,CAAC,UAAU;QAAE,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;IAC1E,OAAO,eAAe,CAAC,CAAC,CAAC,GAAG,eAAe,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;AAC3E,CAAC;AAED,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,GAClB,CAAC"}