@trebired/frontend 7.1.18 → 8.0.0

package/dist/inputs/styles/cropper.scss

@@ -1,88 +1,91 @@
-.tbf-upload-cropper-modal .tbf-modal__content,
-.tbf-upload-cropper-modal__content {
-  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));
+@use "@trebired/bundler/namespace" as ns;
+#{ns.class("upload-cropper-modal")} #{ns.element-class("modal", "content")},
+
+#{ns.element-class("upload-cropper-modal", "content")} {
+  width: var(#{ns.css-var("ui-upload-cropper-modal-width")}, min(960px, calc(100vw - 40px)));
+  max-height: var(#{ns.css-var("ui-upload-cropper-modal-max-h")}, min(90vh, 920px));
 }
 
-.tbf-upload-crop {
+#{ns.class("upload-crop")} {
   display: grid;
-  gap: var(--tbf-ui-upload-cropper-root-gap, var(--tbf-gap-md, 12px));
+  gap: var(#{ns.css-var("ui-upload-cropper-root-gap")}, var(#{ns.css-var("gap-md")}, 12px));
 }
 
-.tbf-upload-crop__header {
+#{ns.element-class("upload-crop", "header")} {
   display: grid;
-  gap: var(--tbf-ui-upload-cropper-header-gap, var(--tbf-gap-xs, 4px));
+  gap: var(#{ns.css-var("ui-upload-cropper-header-gap")}, var(#{ns.css-var("gap-xs")}, 4px));
 }
 
-.tbf-upload-crop__title,
-.tbf-upload-crop__description {
+#{ns.element-class("upload-crop", "title")},
+
+#{ns.element-class("upload-crop", "description")} {
   margin: 0;
 }
 
-.tbf-upload-crop__description {
-  color: var(--tbf-ui-upload-cropper-description-color, var(--tbf-text-muted, #000));
+#{ns.element-class("upload-crop", "description")} {
+  color: var(#{ns.css-var("ui-upload-cropper-description-color")}, var(#{ns.css-var("text-muted")}, #000));
 }
 
-.tbf-upload-crop__stage {
+#{ns.element-class("upload-crop", "stage")} {
   position: relative;
-  height: var(--tbf-ui-upload-cropper-stage-height, min(62vh, 640px));
-  min-height: var(--tbf-ui-upload-cropper-stage-min-h, 320px);
+  height: var(#{ns.css-var("ui-upload-cropper-stage-height")}, min(62vh, 640px));
+  min-height: var(#{ns.css-var("ui-upload-cropper-stage-min-h")}, 320px);
   overflow: visible;
   border: var(
-    --tbf-ui-upload-cropper-stage-border,
-    var(--tbf-border-width, 1px) solid var(--tbf-border, #000)
+    #{ns.css-var("ui-upload-cropper-stage-border")},
+    var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, #000)
   );
-  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(
+  border-radius: var(#{ns.css-var("ui-upload-cropper-stage-radius")}, var(#{ns.css-var("radius")}, 0));
+  background: var(#{ns.css-var("ui-upload-cropper-stage-bg")}, var(#{ns.css-var("surface-muted")}, #fff));
+  #{ns.css-var("upload-cropper-guide-horizontal")}: linear-gradient(
     to bottom,
-    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%
+    var(#{ns.css-var("ui-upload-cropper-stage-line-contrast-color")}, #000) 0,
+    var(#{ns.css-var("ui-upload-cropper-stage-line-contrast-color")}, #000)
+    var(#{ns.css-var("ui-upload-cropper-stage-guide-width")}, 1px),
+    var(#{ns.css-var("ui-upload-cropper-stage-line-color")}, #fff)
+    var(#{ns.css-var("ui-upload-cropper-stage-guide-width")}, 1px),
+    var(#{ns.css-var("ui-upload-cropper-stage-line-color")}, #fff) 100%
   );
-  --tbf-upload-cropper-guide-vertical: linear-gradient(
+  #{ns.css-var("upload-cropper-guide-vertical")}: linear-gradient(
     to right,
-    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%
+    var(#{ns.css-var("ui-upload-cropper-stage-line-contrast-color")}, #000) 0,
+    var(#{ns.css-var("ui-upload-cropper-stage-line-contrast-color")}, #000)
+    var(#{ns.css-var("ui-upload-cropper-stage-guide-width")}, 1px),
+    var(#{ns.css-var("ui-upload-cropper-stage-line-color")}, #fff)
+    var(#{ns.css-var("ui-upload-cropper-stage-guide-width")}, 1px),
+    var(#{ns.css-var("ui-upload-cropper-stage-line-color")}, #fff) 100%
   );
 }
 
-.tbf-upload-crop__image {
+#{ns.element-class("upload-crop", "image")} {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
 }
 
-.tbf-upload-crop__actions {
+#{ns.element-class("upload-crop", "actions")} {
   display: flex;
   justify-content: flex-end;
-  gap: var(--tbf-ui-upload-cropper-actions-gap, var(--tbf-gap-sm, 8px));
+  gap: var(#{ns.css-var("ui-upload-cropper-actions-gap")}, var(#{ns.css-var("gap-sm")}, 8px));
 }
 
 @media (max-width: 768px) {
-  .tbf-upload-cropper-modal .tbf-modal__content,
-  .tbf-upload-cropper-modal__content {
-    width: var(--tbf-ui-upload-resp-mobile-cropper-modal-width, calc(100vw - 24px));
+  #{ns.class("upload-cropper-modal")} #{ns.element-class("modal", "content")},
+  #{ns.element-class("upload-cropper-modal", "content")} {
+    width: var(#{ns.css-var("ui-upload-resp-mobile-cropper-modal-width")}, calc(100vw - 24px));
     max-height: var(
-      --tbf-ui-upload-resp-mobile-cropper-modal-max-h,
+      #{ns.css-var("ui-upload-resp-mobile-cropper-modal-max-h")},
       calc(100vh - 24px)
     );
   }
 
-  .tbf-upload-crop__stage {
-    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);
+  #{ns.element-class("upload-crop", "stage")} {
+    height: var(#{ns.css-var("ui-upload-resp-mobile-cropper-stage-height")}, min(52vh, 420px));
+    min-height: var(#{ns.css-var("ui-upload-resp-mobile-cropper-stage-min-h")}, 260px);
   }
 
-  .tbf-upload-crop__actions {
+  #{ns.element-class("upload-crop", "actions")} {
     flex-direction: column;
   }
 }

package/dist/inputs/styles/field.scss

@@ -1,14 +1,15 @@
-.tbf-input {
+@use "@trebired/bundler/namespace" as ns;
+#{ns.class("input")} {
   min-height: 36px;
   box-sizing: border-box;
   padding: 0 10px;
-  border: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
-  border-radius: var(--tbf-radius-sm, 0);
-  color: var(--tbf-text, #000);
-  background: var(--tbf-surface, #fff);
+  border: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, #000);
+  border-radius: var(#{ns.css-var("radius-sm")}, 0);
+  color: var(#{ns.css-var("text")}, #000);
+  background: var(#{ns.css-var("surface")}, #fff);
 }
 
-.tbf-input:focus-visible {
-  outline: var(--tbf-border-width, 1px) solid var(--tbf-focus, #000);
+#{ns.class("input")}:focus-visible {
+  outline: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("focus")}, #000);
   outline-offset: 2px;
 }

package/dist/inputs/styles/primitives.scss

@@ -1,146 +1,153 @@
-.tbf-disclosure {
+@use "@trebired/bundler/namespace" as ns;
+#{ns.class("disclosure")} {
   display: flex;
   min-width: 0;
   flex-direction: column;
-  gap: var(--tbf-gap-sm, 8px);
+  gap: var(#{ns.css-var("gap-sm")}, 8px);
 }
 
-.tbf-disclosure__trigger,
-.tbf-dropdown__trigger,
-.tbf-tabs__tab {
+#{ns.element-class("disclosure", "trigger")},
+
+#{ns.element-class("dropdown", "trigger")},
+
+#{ns.element-class("tabs", "tab")} {
   min-height: 32px;
   box-sizing: border-box;
   padding: 0 10px;
-  border: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
-  border-radius: var(--tbf-radius-sm, 0);
-  color: var(--tbf-text, #000);
-  background: var(--tbf-surface, #fff);
+  border: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, #000);
+  border-radius: var(#{ns.css-var("radius-sm")}, 0);
+  color: var(#{ns.css-var("text")}, #000);
+  background: var(#{ns.css-var("surface")}, #fff);
   cursor: pointer;
 }
 
-.tbf-disclosure__panel {
+#{ns.element-class("disclosure", "panel")} {
   min-width: 0;
 }
 
-.tbf-tabs {
+#{ns.class("tabs")} {
   display: flex;
   min-width: 0;
   flex-direction: column;
-  gap: var(--tbf-gap-md, 12px);
+  gap: var(#{ns.css-var("gap-md")}, 12px);
 }
 
-.tbf-tabs__list {
+#{ns.element-class("tabs", "list")} {
   display: flex;
   min-width: 0;
   gap: 6px;
   overflow-x: auto;
 }
 
-.tbf-tabs__tab[aria-selected="true"],
-.tbf-tabs__tab[data-tbf-active="true"] {
-  border-color: var(--tbf-focus, #000);
-  background: var(--tbf-surface-muted, #f4f4f4);
+#{ns.element-class("tabs", "tab")}[aria-selected="true"],
+
+#{ns.element-class("tabs", "tab")}#{ns.data("active", "true")} {
+  border-color: var(#{ns.css-var("focus")}, #000);
+  background: var(#{ns.css-var("surface-muted")}, #f4f4f4);
 }
 
-.tbf-tabs__panel {
+#{ns.element-class("tabs", "panel")} {
   min-width: 0;
 }
 
-.tbf-dropdown {
+#{ns.class("dropdown")} {
   position: relative;
   display: inline-flex;
   min-width: 0;
 }
 
-.tbf-dropdown__menu {
+#{ns.element-class("dropdown", "menu")} {
   position: absolute;
-  z-index: var(--tbf-z-dropdown, 950);
+  z-index: var(#{ns.css-var("z-dropdown")}, 950);
   inset-block-start: calc(100% + 4px);
   inset-inline-start: 0;
   display: none;
   min-width: 100%;
   flex-direction: column;
   padding: 4px;
-  border: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
-  border-radius: var(--tbf-radius-sm, 0);
-  background: var(--tbf-surface, #fff);
+  border: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, #000);
+  border-radius: var(#{ns.css-var("radius-sm")}, 0);
+  background: var(#{ns.css-var("surface")}, #fff);
 }
 
-.tbf-dropdown[data-tbf-dropdown-open="true"] .tbf-dropdown__menu,
-[data-tbf-dropdown][data-tbf-dropdown-open="true"] [data-tbf-dropdown-menu] {
+#{ns.class("dropdown")}#{ns.data("dropdown-open", "true")} #{ns.element-class("dropdown", "menu")},
+
+#{ns.data("dropdown")}#{ns.data("dropdown-open", "true")} #{ns.data("dropdown-menu")} {
   display: flex;
 }
 
-.tbf-dropdown__option {
+#{ns.element-class("dropdown", "option")} {
   min-height: 30px;
   border: 0;
-  color: var(--tbf-text, #000);
+  color: var(#{ns.css-var("text")}, #000);
   text-align: start;
   background: transparent;
   cursor: pointer;
 }
 
-.tbf-dropdown__option[aria-selected="true"] {
-  background: var(--tbf-surface-muted, #f4f4f4);
+#{ns.element-class("dropdown", "option")}[aria-selected="true"] {
+  background: var(#{ns.css-var("surface-muted")}, #f4f4f4);
 }
 
-.tbf-search {
+#{ns.class("search")} {
   display: flex;
   min-width: 0;
   flex-direction: column;
-  gap: var(--tbf-gap-sm, 8px);
+  gap: var(#{ns.css-var("gap-sm")}, 8px);
 }
 
-.tbf-search__item[hidden],
-.tbf-search__empty[hidden] {
+#{ns.element-class("search", "item")}[hidden],
+
+#{ns.element-class("search", "empty")}[hidden] {
   display: none !important;
 }
 
-.tbf-choice-group {
+#{ns.class("choice-group")} {
   display: flex;
   min-width: 0;
   flex-direction: column;
   gap: 6px;
 }
 
-.tbf-choice,
-.tbf-toggle {
+#{ns.class("choice")},
+
+#{ns.class("toggle")} {
   display: inline-flex;
   min-width: 0;
   align-items: center;
   gap: 8px;
 }
 
-.tbf-toggle span {
+#{ns.class("toggle")} span {
   display: inline-flex;
   min-height: 28px;
   align-items: center;
   padding: 0 10px;
-  border: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
-  border-radius: var(--tbf-radius-pill, 999px);
+  border: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, #000);
+  border-radius: var(#{ns.css-var("radius-pill")}, 999px);
 }
 
-.tbf-toggle input:checked + span {
-  border-color: var(--tbf-focus, #000);
-  background: var(--tbf-surface-muted, #f4f4f4);
+#{ns.class("toggle")} input:checked + span {
+  border-color: var(#{ns.css-var("focus")}, #000);
+  background: var(#{ns.css-var("surface-muted")}, #f4f4f4);
 }
 
-.tbf-status-field {
+#{ns.class("status-field")} {
   display: flex;
   min-width: 0;
   flex-direction: column;
   gap: 5px;
 }
 
-.tbf-status-field__message {
-  color: var(--tbf-text-muted, #666);
+#{ns.element-class("status-field", "message")} {
+  color: var(#{ns.css-var("text-muted")}, #666);
   font-size: 0.9rem;
 }
 
-.tbf-status-field[data-tbf-status-state="error"] .tbf-status-field__message {
-  color: var(--tbf-status-error-color, var(--tbf-focus, currentColor));
+#{ns.class("status-field")}#{ns.data("status-state", "error")} #{ns.element-class("status-field", "message")} {
+  color: var(#{ns.css-var("status-error-color")}, var(#{ns.css-var("focus")}, currentColor));
 }
 
-.tbf-status-field[data-tbf-status-state="success"] .tbf-status-field__message {
-  color: var(--tbf-status-success-color, var(--tbf-focus, currentColor));
+#{ns.class("status-field")}#{ns.data("status-state", "success")} #{ns.element-class("status-field", "message")} {
+  color: var(#{ns.css-var("status-success-color")}, var(#{ns.css-var("focus")}, currentColor));
 }

package/dist/inputs/styles/upload.scss

@@ -1,86 +1,89 @@
-.tbf-upload {
+@use "@trebired/bundler/namespace" as ns;
+#{ns.class("upload")} {
   display: grid;
-  gap: var(--tbf-ui-upload-root-gap, var(--tbf-gap-sm, 8px));
-  color: var(--tbf-ui-upload-root-color, var(--tbf-text, #000));
+  gap: var(#{ns.css-var("ui-upload-root-gap")}, var(#{ns.css-var("gap-sm")}, 8px));
+  color: var(#{ns.css-var("ui-upload-root-color")}, var(#{ns.css-var("text")}, #000));
 }
 
-.tbf-upload__input {
+#{ns.element-class("upload", "input")} {
   display: none;
 }
 
-.tbf-upload__surface {
+#{ns.element-class("upload", "surface")} {
   display: grid;
   align-items: center;
   grid-template-columns: auto minmax(0, 1fr);
-  gap: var(--tbf-ui-upload-surface-gap, var(--tbf-gap-md, 12px));
-  min-height: var(--tbf-ui-upload-surface-min-h, 72px);
+  gap: var(#{ns.css-var("ui-upload-surface-gap")}, var(#{ns.css-var("gap-md")}, 12px));
+  min-height: var(#{ns.css-var("ui-upload-surface-min-h")}, 72px);
   box-sizing: border-box;
-  padding: var(--tbf-ui-upload-surface-padding, var(--tbf-gap-md, 12px));
+  padding: var(#{ns.css-var("ui-upload-surface-padding")}, var(#{ns.css-var("gap-md")}, 12px));
   border: var(
-    --tbf-ui-upload-surface-border,
-    var(--tbf-border-width, 1px) solid var(--tbf-border, #000)
+    #{ns.css-var("ui-upload-surface-border")},
+    var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, #000)
   );
-  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));
+  border-radius: var(#{ns.css-var("ui-upload-surface-radius")}, var(#{ns.css-var("radius")}, 0));
+  color: var(#{ns.css-var("ui-upload-surface-color")}, var(#{ns.css-var("text")}, #000));
+  background: var(#{ns.css-var("ui-upload-surface-bg")}, var(#{ns.css-var("surface-muted")}, #fff));
   transition: var(
-    --tbf-ui-upload-surface-transition,
+    #{ns.css-var("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-ui-upload-surface-state-drop-border-style, dashed);
+#{ns.class("upload")}#{ns.data("upload-drop", "true")} #{ns.element-class("upload", "surface")} {
+  border-style: var(#{ns.css-var("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-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));
+#{ns.class("upload")}#{ns.data("upload-drop", "true")}#{ns.data("upload-drag")} #{ns.element-class("upload", "surface")} {
+  border-color: var(#{ns.css-var("ui-upload-surface-state-drag-border")}, var(#{ns.css-var("focus")}, #000));
+  box-shadow: var(#{ns.css-var("ui-upload-surface-state-drag-shadow")}, 0 0 0 2px var(#{ns.css-var("focus")}, #000));
+  background: var(#{ns.css-var("ui-upload-surface-state-drag-bg")}, var(#{ns.css-var("surface")}, #fff));
 }
 
-.tbf-upload[data-tbf-upload-has-files="true"] .tbf-upload__surface {
-  border-style: var(--tbf-ui-upload-surface-state-files-border-style, solid);
+#{ns.class("upload")}#{ns.data("upload-has-files", "true")} #{ns.element-class("upload", "surface")} {
+  border-style: var(#{ns.css-var("ui-upload-surface-state-files-border-style")}, solid);
 }
 
-.tbf-upload__content,
-.tbf-upload__meta {
+#{ns.element-class("upload", "content")},
+
+#{ns.element-class("upload", "meta")} {
   display: flex;
   min-width: 0;
   flex: 1 1 auto;
   flex-direction: column;
 }
 
-.tbf-upload__content {
-  gap: var(--tbf-ui-upload-content-gap, var(--tbf-gap-sm, 8px));
+#{ns.element-class("upload", "content")} {
+  gap: var(#{ns.css-var("ui-upload-content-gap")}, var(#{ns.css-var("gap-sm")}, 8px));
 }
 
-.tbf-upload__meta {
-  gap: var(--tbf-ui-upload-meta-gap, var(--tbf-gap-sm, 8px));
+#{ns.element-class("upload", "meta")} {
+  gap: var(#{ns.css-var("ui-upload-meta-gap")}, var(#{ns.css-var("gap-sm")}, 8px));
   overflow: hidden;
 }
 
-.tbf-upload__actions {
+#{ns.element-class("upload", "actions")} {
   display: flex;
   flex: 0 0 auto;
   align-items: center;
-  gap: var(--tbf-ui-upload-actions-gap, var(--tbf-gap-sm, 8px));
+  gap: var(#{ns.css-var("ui-upload-actions-gap")}, var(#{ns.css-var("gap-sm")}, 8px));
   min-width: 0;
 }
 
-.tbf-upload__actions > .btn {
+#{ns.element-class("upload", "actions")} > .btn {
   min-width: 0;
 }
 
-.tbf-upload__actions > .btn > span {
+#{ns.element-class("upload", "actions")} > .btn > span {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.tbf-upload__filename,
-.tbf-upload__hint {
+#{ns.element-class("upload", "filename")},
+
+#{ns.element-class("upload", "hint")} {
   display: block;
   min-width: 0;
   overflow: hidden;
@@ -89,80 +92,81 @@
   white-space: nowrap;
 }
 
-.tbf-upload__filename {
-  font-size: var(--tbf-ui-upload-filename-font-size, 0.95rem);
-  line-height: var(--tbf-ui-upload-filename-line-h, 1.15);
+#{ns.element-class("upload", "filename")} {
+  font-size: var(#{ns.css-var("ui-upload-filename-font-size")}, 0.95rem);
+  line-height: var(#{ns.css-var("ui-upload-filename-line-h")}, 1.15);
 }
 
-.tbf-upload__hint {
-  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);
+#{ns.element-class("upload", "hint")} {
+  color: var(#{ns.css-var("ui-upload-hint-color")}, var(#{ns.css-var("text-muted")}, #000));
+  font-size: var(#{ns.css-var("ui-upload-hint-font-size")}, 0.92rem);
+  line-height: var(#{ns.css-var("ui-upload-hint-line-h")}, 1.15);
 }
 
-.tbf-upload__list {
+#{ns.element-class("upload", "list")} {
   display: grid;
-  gap: var(--tbf-ui-upload-list-gap, var(--tbf-gap-xs, 4px));
+  gap: var(#{ns.css-var("ui-upload-list-gap")}, var(#{ns.css-var("gap-xs")}, 4px));
   overflow: auto;
-  max-height: var(--tbf-ui-upload-list-max-h, 84px);
+  max-height: var(#{ns.css-var("ui-upload-list-max-h")}, 84px);
   margin: 0;
-  padding-left: var(--tbf-ui-upload-list-padding-left, 18px);
+  padding-left: var(#{ns.css-var("ui-upload-list-padding-left")}, 18px);
 }
 
-.tbf-upload[data-tbf-upload-entry-count="0"] .tbf-upload__list,
-.tbf-upload[data-tbf-upload-entry-count="1"] .tbf-upload__list {
+#{ns.class("upload")}#{ns.data("upload-entry-count", "0")} #{ns.element-class("upload", "list")},
+
+#{ns.class("upload")}#{ns.data("upload-entry-count", "1")} #{ns.element-class("upload", "list")} {
   display: none;
 }
 
-.tbf-upload__list > li {
+#{ns.element-class("upload", "list")} > li {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.tbf-upload__preview {
+#{ns.element-class("upload", "preview")} {
   display: flex;
   align-items: center;
   justify-content: center;
-  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);
+  width: var(#{ns.css-var("ui-upload-preview-size")}, 64px);
+  height: var(#{ns.css-var("ui-upload-preview-size")}, 64px);
+  min-width: var(#{ns.css-var("ui-upload-preview-size")}, 64px);
   overflow: hidden;
   border: var(
-    --tbf-ui-upload-preview-border,
-    var(--tbf-border-width, 1px) solid var(--tbf-border, #000)
+    #{ns.css-var("ui-upload-preview-border")},
+    var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, #000)
   );
-  border-radius: var(--tbf-ui-upload-preview-radius, var(--tbf-radius, 0));
-  background: var(--tbf-ui-upload-preview-bg, var(--tbf-surface, #fff));
+  border-radius: var(#{ns.css-var("ui-upload-preview-radius")}, var(#{ns.css-var("radius")}, 0));
+  background: var(#{ns.css-var("ui-upload-preview-bg")}, var(#{ns.css-var("surface")}, #fff));
 }
 
-.tbf-upload__preview[data-tbf-upload-preview-shape="circle"] {
-  border-radius: var(--tbf-ui-upload-preview-round-radius, var(--tbf-radius-round, 999px));
+#{ns.element-class("upload", "preview")}#{ns.data("upload-preview-shape", "circle")} {
+  border-radius: var(#{ns.css-var("ui-upload-preview-round-radius")}, var(#{ns.css-var("radius-round")}, 999px));
 }
 
-.tbf-upload__preview-image {
+#{ns.element-class("upload", "preview-image")} {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-.tbf-upload__preview-empty {
-  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);
+#{ns.element-class("upload", "preview-empty")} {
+  padding: var(#{ns.css-var("ui-upload-preview-empty-padding")}, var(#{ns.css-var("gap-xs")}, 4px));
+  color: var(#{ns.css-var("ui-upload-preview-empty-color")}, var(#{ns.css-var("text-muted")}, #000));
+  font-size: var(#{ns.css-var("ui-upload-preview-empty-font-size")}, 0.82rem);
+  line-height: var(#{ns.css-var("ui-upload-preview-empty-line-h")}, 1.1);
   text-align: center;
 }
 
 @media (max-width: 640px) {
-  .tbf-upload__surface {
-    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));
+  #{ns.element-class("upload", "surface")} {
+    gap: var(#{ns.css-var("ui-upload-resp-mobile-surface-gap")}, var(#{ns.css-var("gap-sm")}, 8px));
+    padding: var(#{ns.css-var("ui-upload-resp-mobile-surface-padding")}, var(#{ns.css-var("gap-sm")}, 8px));
   }
 
-  .tbf-upload__actions {
+  #{ns.element-class("upload", "actions")} {
     flex-wrap: wrap;
-    gap: var(--tbf-ui-upload-resp-mobile-actions-gap, var(--tbf-gap-xs, 4px));
+    gap: var(#{ns.css-var("ui-upload-resp-mobile-actions-gap")}, var(#{ns.css-var("gap-xs")}, 4px));
   }
 }

package/dist/inputs/tabs.d.ts

@@ -1,8 +1,8 @@
 import { type BindRoot } from "../dom/index.d.ts";
-declare const TABS_SELECTOR = "[data-tbf-tabs]";
-declare const TAB_SELECTOR = "[data-tbf-tab]";
-declare const TAB_PANEL_SELECTOR = "[data-tbf-tab-panel]";
-declare const TABS_CHANGE_EVENT = "tbf:tabs";
+declare const TABS_SELECTOR: string;
+declare const TAB_SELECTOR: string;
+declare const TAB_PANEL_SELECTOR: string;
+declare const TABS_CHANGE_EVENT: string;
 type TabsState = {
     root: HTMLElement;
     tab: HTMLElement;

package/dist/inputs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/inputs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmC,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE/E,QAAA,MAAM,aAAa,oBAAoB,CAAC;AACxC,QAAA,MAAM,YAAY,mBAAmB,CAAC;AACtC,QAAA,MAAM,kBAAkB,yBAAyB,CAAC;AAClD,QAAA,MAAM,iBAAiB,aAAa,CAAC;AAErC,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,GAAG,EAAE,WAAW,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAYF,iBAAS,YAAY,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,WAAW;;;;EAoBxD;AAiBD,iBAAS,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;;;;EAiB7C;AAED,iBAAS,cAAc,CAAC,IAAI,GAAE,QAAmB,QAEhD;AAED,OAAO,EACL,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACZ,YAAY,GACb,CAAC;AACF,YAAY,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/inputs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmC,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAG/E,QAAA,MAAM,aAAa,QAA+B,CAAC;AACnD,QAAA,MAAM,YAAY,QAA8B,CAAC;AACjD,QAAA,MAAM,kBAAkB,QAAoC,CAAC;AAC7D,QAAA,MAAM,iBAAiB,QAA4B,CAAC;AAEpD,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,GAAG,EAAE,WAAW,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAYF,iBAAS,YAAY,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,WAAW;;;;EAoBxD;AAiBD,iBAAS,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;;;;EAiB7C;AAED,iBAAS,cAAc,CAAC,IAAI,GAAE,QAAmB,QAEhD;AAED,OAAO,EACL,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACZ,YAAY,GACb,CAAC;AACF,YAAY,EAAE,SAAS,EAAE,CAAC"}