@trebired/frontend 7.1.17 → 8.0.0

package/dist/primitives/components/shared.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cloneElement, isValidElement } from "react";
 import { appendClassName, joinClassNames, jsonScript, toText } from "../../components/index.js";
+import { frontendDataAttr } from "../../namespace/index.js";
 function jsonAttr(value) {
     if (value === undefined || typeof value === "function")
         return undefined;
@@ -10,25 +11,25 @@ function actionButtonAttrs(options) {
     if (!options)
         return {};
     return {
-        "data-tbf-action-body": jsonAttr(options.body),
-        "data-tbf-action-method": options.method,
-        "data-tbf-action-ui": jsonAttr(options.ui),
-        "data-tbf-action-url": options.url,
-        "data-tbf-confetti": options.successConfetti === true ? "true" : undefined,
-        "data-tbf-confirm": typeof options.confirm === "boolean" ? String(options.confirm) : undefined,
-        "data-tbf-ignore-response-action": options.ignoreResponseAction === true ? "true" : undefined,
-        "data-tbf-submit": "",
-        "data-tbf-success": options.success,
-        "data-tbf-success-tab": options.successTab,
+        [frontendDataAttr("action-body")]: jsonAttr(options.body),
+        [frontendDataAttr("action-method")]: options.method,
+        [frontendDataAttr("action-ui")]: jsonAttr(options.ui),
+        [frontendDataAttr("action-url")]: options.url,
+        [frontendDataAttr("confetti")]: options.successConfetti === true ? "true" : undefined,
+        [frontendDataAttr("confirm")]: typeof options.confirm === "boolean" ? String(options.confirm) : undefined,
+        [frontendDataAttr("ignore-response-action")]: options.ignoreResponseAction === true ? "true" : undefined,
+        [frontendDataAttr("submit")]: "",
+        [frontendDataAttr("success")]: options.success,
+        [frontendDataAttr("success-tab")]: options.successTab,
     };
 }
 function actionTriggerAttrs(options) {
     if (!options)
         return {};
     return {
-        "data-tbf-action-trigger": options.action,
-        "data-tbf-external-href": options.externalHref,
-        "data-tbf-href": options.href,
+        [frontendDataAttr("action-trigger")]: options.action,
+        [frontendDataAttr("external-href")]: options.externalHref,
+        [frontendDataAttr("href")]: options.href,
     };
 }
 function wrapTriggerHostNode(children, options) {

package/dist/primitives/components/shared.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../src/primitives/components/shared.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAqC,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEpF,SAAS,QAAQ,CAAC,KAAc;IAC9B,IAAI,KAAK,KAAK,SAAS,IAAI,OAAO,KAAK,KAAK,UAAU;QAAE,OAAO,SAAS,CAAC;IACzE,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;AAC3B,CAAC;AAED,SAAS,iBAAiB,CAAC,OAAmC;IAC5D,IAAI,CAAC,OAAO;QAAE,OAAO,EAAE,CAAC;IACxB,OAAO;QACL,sBAAsB,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;QAC9C,wBAAwB,EAAE,OAAO,CAAC,MAAM;QACxC,oBAAoB,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;QAC1C,qBAAqB,EAAE,OAAO,CAAC,GAAG;QAClC,mBAAmB,EAAE,OAAO,CAAC,eAAe,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAC1E,kBAAkB,EAClB,OAAO,OAAO,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS;QAC1E,iCAAiC,EACjC,OAAO,CAAC,oBAAoB,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAC1D,iBAAiB,EAAE,EAAE;QACrB,kBAAkB,EAAE,OAAO,CAAC,OAAO;QACnC,sBAAsB,EAAE,OAAO,CAAC,UAAU;KAC3C,CAAC;AACJ,CAAC;AAED,SAAS,kBAAkB,CAAC,OAAkC;IAC5D,IAAI,CAAC,OAAO;QAAE,OAAO,EAAE,CAAC;IACxB,OAAO;QACL,yBAAyB,EAAE,OAAO,CAAC,MAAM;QACzC,wBAAwB,EAAE,OAAO,CAAC,YAAY;QAC9C,eAAe,EAAE,OAAO,CAAC,IAAI;KAC9B,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB,CAAC,QAAmB,EAAE,OAAkC;IAClF,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;QAC5E,OAAO,QAAQ,CAAC;IAClB,CAAC;IACD,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,OAAO,QAAQ,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAClE,OAAO,YAAY,CACjB,QAAiD,EACjD,kBAAkB,CAAC,OAAO,CAAC,CAC5B,CAAC;IACJ,CAAC;IACD,OAAO,CACL,kBACI,kBAAkB,CAAC,OAAO,CAAC,EAC/B,SAAS,EAAC,qBAAqB,EAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,YAE7B,QAAQ,GACF,CACR,CAAC;AACJ,CAAC;AAED,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,cAAc,EACd,QAAQ,EACR,MAAM,EACN,mBAAmB,GACpB,CAAC"}
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../src/primitives/components/shared.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/components/time_counter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time_counter.d.ts","sourceRoot":"","sources":["../../../../src/primitives/components/time_counter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAQnD,iBAAS,cAAc,CAAC,EAAE,EAAE,MAAM,UAajC;AAED,iBAAS,eAAe,CAAC,KAAK,EAAE,OAAO,UAItC;AAED,iBAAS,kBAAkB,CAAC,KAAK,EAAE,OAAO,UAIzC;AAED,iBAAS,iBAAiB,CAAC,KAAK,EAAE,OAAO,UAKxC;AAkED,iBAAS,YAAY,CAAC,KAAK,EAAE,gBAAgB,+BA6B5C;AAED,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,eAAe,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"time_counter.d.ts","sourceRoot":"","sources":["../../../../src/primitives/components/time_counter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AASnD,iBAAS,cAAc,CAAC,EAAE,EAAE,MAAM,UAajC;AAED,iBAAS,eAAe,CAAC,KAAK,EAAE,OAAO,UAItC;AAED,iBAAS,kBAAkB,CAAC,KAAK,EAAE,OAAO,UAIzC;AAED,iBAAS,iBAAiB,CAAC,KAAK,EAAE,OAAO,UAKxC;AAkED,iBAAS,YAAY,CAAC,KAAK,EAAE,gBAAgB,+BA6B5C;AAED,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,eAAe,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAC"}

package/dist/primitives/components/time_counter.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { jsonScript } from "../../components/index.js";
 import { joinClassNames, toText } from "./shared.js";
 import { primitiveTextClassName } from "./classes.js";
+import { frontendDataAttrs } from "../../namespace/index.js";
 function normalizeDurationMs(value) {
     return Number.isFinite(value) ? Math.max(0, value) : 0;
 }
@@ -96,7 +97,7 @@ function time_counter(props) {
     const countValue = "countValue" in state ? state.countValue : null;
     const live = "live" in state ? state.live : false;
     const remaining = "remaining" in state ? state.remaining : false;
-    return (_jsxs("span", { "data-tbf-time-counter": "", style: { display: "contents" }, children: [_jsx("script", { "data-tbf-time-counter-config": "", hidden: true, type: "application/json", dangerouslySetInnerHTML: {
+    return (_jsxs("span", { ...frontendDataAttrs({ "time-counter": "" }), style: { display: "contents" }, children: [_jsx("script", { ...frontendDataAttrs({ "time-counter-config": "" }), hidden: true, type: "application/json", dangerouslySetInnerHTML: {
                     __html: jsonScript(counterConfig(props, { countMode, countValue, endRaw, live, remaining, startRaw })),
                 } }), _jsx("span", { ...(props.id ? { id: props.id } : {}), className: counterClassName(props, countMode), children: state.initialText })] }));
 }

package/dist/primitives/components/time_counter.js.map

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

package/dist/primitives/index.d.ts

@@ -7,8 +7,8 @@ type TimeCounterConfig = {
     reloadOnZero?: boolean;
     start?: string;
 };
-declare const TIME_COUNTER_SELECTOR = "[data-tbf-time-counter]";
-declare const TIME_COUNTER_CONFIG_SELECTOR = "script[type=\"application/json\"][data-tbf-time-counter-config]";
+declare const TIME_COUNTER_SELECTOR: string;
+declare const TIME_COUNTER_CONFIG_SELECTOR: string;
 declare function refreshTimeCounter(el: HTMLElement | null): boolean;
 declare function setTimeCounterConfig(el: HTMLElement | null, config: TimeCounterConfig | null): boolean;
 declare function bindTimeCounter(host: HTMLElement | null): boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQzE,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,qBAAqB,4BAA4B,CAAC;AACxD,QAAA,MAAM,4BAA4B,oEAC6B,CAAC;AAuDhE,iBAAS,kBAAkB,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,WAQjD;AAkBD,iBAAS,oBAAoB,CAC3B,EAAE,EAAE,WAAW,GAAG,IAAI,EACtB,MAAM,EAAE,iBAAiB,GAAG,IAAI,WAajC;AAED,iBAAS,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,WAQhD;AAED,iBAAS,gBAAgB,CAAC,IAAI,GAAE,QAAmB,QAIlD;AAED,iBAAS,wBAAwB,CAAC,IAAI,GAAE,QAAmB,QAE1D;AAED,iBAAS,mBAAmB,CAAC,IAAI,GAAE,QAAmB,QAMrD;AAED,OAAO,EACL,4BAA4B,EAC5B,qBAAqB,EACrB,wBAAwB,EACxB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,GACrB,CAAC;AACF,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAClC,cAAa,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AASzE,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,qBAAqB,QAAuC,CAAC;AACnE,QAAA,MAAM,4BAA4B,QAC6C,CAAC;AAuDhF,iBAAS,kBAAkB,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,WAQjD;AAkBD,iBAAS,oBAAoB,CAC3B,EAAE,EAAE,WAAW,GAAG,IAAI,EACtB,MAAM,EAAE,iBAAiB,GAAG,IAAI,WAajC;AAED,iBAAS,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,WAQhD;AAED,iBAAS,gBAAgB,CAAC,IAAI,GAAE,QAAmB,QAIlD;AAED,iBAAS,wBAAwB,CAAC,IAAI,GAAE,QAAmB,QAE1D;AAED,iBAAS,mBAAmB,CAAC,IAAI,GAAE,QAAmB,QAMrD;AAED,OAAO,EACL,4BAA4B,EAC5B,qBAAqB,EACrB,wBAAwB,EACxB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,GACrB,CAAC;AACF,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAClC,cAAa,uBAAuB,CAAC"}

package/dist/primitives/index.js

@@ -1,7 +1,8 @@
 import { queryAll, readElementJson } from "../dom/index.js";
 import { formatDuration, formatWrappedCount, parseDateMsOrNull, parseCountValue, } from "./components/index.js";
-const TIME_COUNTER_SELECTOR = "[data-tbf-time-counter]";
-const TIME_COUNTER_CONFIG_SELECTOR = 'script[type="application/json"][data-tbf-time-counter-config]';
+import { frontendDataSelector } from "../namespace/index.js";
+const TIME_COUNTER_SELECTOR = frontendDataSelector("time-counter");
+const TIME_COUNTER_CONFIG_SELECTOR = `script[type="application/json"]${frontendDataSelector("time-counter-config")}`;
 const configs = new WeakMap();
 const positiveRemainingCounters = new WeakSet();
 const activeCounters = new Set();

package/dist/primitives/index.js.map

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

package/dist/primitives/styles/_card.scss

@@ -1,36 +1,37 @@
+@use "@trebired/bundler/namespace" as ns;
 .card {
-  min-height: var(--tbf-surfaces-card-root-min-height, var(--height-xs4, 35px));
-  border-radius: var(--tbf-surfaces-card-root-radius, var(--radius-lg, var(--tbf-radius, 0)));
-  border: var(--tbf-surfaces-card-root-border, var(--border-width) solid var(--border-surface-1));
-  background: var(--tbf-surfaces-card-root-background, var(--background-page));
-  padding: var(--tbf-surfaces-card-root-padding, 14px 14px 12px 14px);
+  min-height: var(#{ns.css-var("surf-card-root-min-h")}, var(--height-xs4, 35px));
+  border-radius: var(#{ns.css-var("surf-card-root-radius")}, var(--radius-lg, var(#{ns.css-var("radius")}, 0)));
+  border: var(#{ns.css-var("surf-card-root-border")}, var(--border-width) solid var(--border-surface-1));
+  background: var(#{ns.css-var("surf-card-root-bg")}, var(--background-page));
+  padding: var(#{ns.css-var("surf-card-root-padding")}, 14px 14px 12px 14px);
   overflow: hidden;
 
   h2 {
-    margin: var(--tbf-surfaces-card-title-margin, 0 0 10px 0);
-    font-size: var(--tbf-surfaces-card-title-font-size, 15px);
-    font-weight: var(--tbf-surfaces-card-title-font-weight, 700);
+    margin: var(#{ns.css-var("surf-card-title-margin")}, 0 0 10px 0);
+    font-size: var(#{ns.css-var("surf-card-title-font-size")}, 15px);
+    font-weight: var(#{ns.css-var("surf-card-title-font-weight")}, 700);
   }
 }
 
 .card-row {
   min-height: 0;
-  border-radius: var(--tbf-surfaces-card-row-radius, var(--radius-lg, var(--tbf-radius, 0)));
-  border: var(--tbf-surfaces-card-row-border, var(--border-width) solid var(--border-surface-1));
-  background: var(--tbf-surfaces-card-row-background, transparent);
+  border-radius: var(#{ns.css-var("surf-card-row-radius")}, var(--radius-lg, var(#{ns.css-var("radius")}, 0)));
+  border: var(#{ns.css-var("surf-card-row-border")}, var(--border-width) solid var(--border-surface-1));
+  background: var(#{ns.css-var("surf-card-row-bg")}, transparent);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   min-width: 0;
-  padding: var(--tbf-surfaces-card-row-padding, 9px 12px);
+  padding: var(#{ns.css-var("surf-card-row-padding")}, 9px 12px);
   transition: all var(--transition-2) ease;
 
   &.excluded {
-    border-color: var(--tbf-surfaces-card-row-states-excluded-border-color, var(--border-surface-1));
+    border-color: var(#{ns.css-var("surf-card-row-state-excluded-border")}, var(--border-surface-1));
   }
 
   &.selected {
-    background: var(--tbf-surfaces-card-row-states-selected-background, var(--background-surface-1));
+    background: var(#{ns.css-var("surf-card-row-state-selected-bg")}, var(--background-surface-1));
   }
 
   > * {
@@ -40,7 +41,7 @@
 
 @media (hover: hover) and (pointer: fine) {
   .card-row:hover {
-    background: var(--tbf-surfaces-card-row-states-hover-background, var(--background-surface-1, transparent));
+    background: var(#{ns.css-var("surf-card-row-state-hover-bg")}, var(--background-surface-1, transparent));
   }
 }
 
@@ -77,7 +78,7 @@
   flex: 0 0 auto;
   width: 1px;
   min-width: 1px;
-  background: var(--tbf-surfaces-card-body-divider-background, var(--border-surface-1));
+  background: var(#{ns.css-var("surf-card-body-divider-bg")}, var(--border-surface-1));
   border-radius: 999px;
   opacity: 0.9;
 }

package/dist/primitives/styles/_controls.scss

@@ -1,31 +1,32 @@
+@use "@trebired/bundler/namespace" as ns;
 @use "sass:list";
 @use "./variables" as *;
 
 .btn {
-  --button-icon-color: var(--tbf-primitives-button-slots-icon-color, currentColor);
+  --button-icon-color: var(#{ns.css-var("ui-btn-slot-icon")}, currentColor);
   box-sizing: border-box;
-  height: var(--tbf-primitives-button-root-height, 28px);
-  min-height: var(--tbf-primitives-button-root-height, 28px);
+  height: var(#{ns.css-var("ui-btn-root-height")}, 28px);
+  min-height: var(#{ns.css-var("ui-btn-root-height")}, 28px);
   width: auto;
   max-width: 100%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--tbf-primitives-button-root-gap, 8px);
-  padding: var(--tbf-primitives-button-root-padding, 0 12px);
-  padding-block: var(--tbf-primitives-button-root-padding-block, 0);
-  border-radius: var(--tbf-primitives-button-root-radius, var(--radius-md, var(--tbf-radius, 0)));
-  border: var(--tbf-primitives-button-root-border, var(--border-width) solid var(--border-surface-2));
-  background: var(--tbf-primitives-button-root-background, transparent);
-  color: var(--tbf-primitives-button-root-color, var(--text-color));
+  gap: var(#{ns.css-var("ui-btn-root-gap")}, 8px);
+  padding: var(#{ns.css-var("ui-btn-root-padding")}, 0 12px);
+  padding-block: var(#{ns.css-var("ui-btn-root-py")}, 0);
+  border-radius: var(#{ns.css-var("ui-btn-root-radius")}, var(--radius-md, var(#{ns.css-var("radius")}, 0)));
+  border: var(#{ns.css-var("ui-btn-root-border")}, var(--border-width) solid var(--border-surface-2));
+  background: var(#{ns.css-var("ui-btn-root-bg")}, transparent);
+  color: var(#{ns.css-var("ui-btn-root-color")}, var(--text-color));
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
   font-family: inherit;
   white-space: nowrap;
   text-decoration: none;
-  font-size: var(--tbf-primitives-button-root-font-size, 12px);
-  font-weight: var(--tbf-primitives-button-root-font-weight, 600);
+  font-size: var(#{ns.css-var("ui-btn-root-font-size")}, 12px);
+  font-weight: var(#{ns.css-var("ui-btn-root-font-weight")}, 600);
   line-height: 1.15;
   vertical-align: middle;
   transition:
@@ -36,17 +37,17 @@
 
   &:hover,
   &[aria-pressed="true"],
-  &[data-tbf-active="true"] {
-    --button-icon-color: var(--tbf-primitives-button-states-hover-icon-color, currentColor);
-    background: var(--tbf-primitives-button-states-hover-background, var(--tbf-primitives-button-root-background, transparent));
-    border-color: var(--tbf-primitives-button-states-hover-border-color, currentColor);
-    color: var(--tbf-primitives-button-states-hover-color, currentColor);
+  &#{ns.data("active", "true")} {
+    --button-icon-color: var(#{ns.css-var("ui-btn-state-hover-icon")}, currentColor);
+    background: var(#{ns.css-var("ui-btn-state-hover-bg")}, var(#{ns.css-var("ui-btn-root-bg")}, transparent));
+    border-color: var(#{ns.css-var("ui-btn-state-hover-border")}, currentColor);
+    color: var(#{ns.css-var("ui-btn-state-hover-color")}, currentColor);
   }
 
   &:disabled,
   &[disabled],
   &.disabled {
-    opacity: var(--tbf-primitives-button-states-disabled-opacity, 0.55);
+    opacity: var(#{ns.css-var("ui-btn-state-disabled-opacity")}, 0.55);
     pointer-events: none;
   }
 
@@ -60,81 +61,81 @@
       flex: 0 0 auto;
     }
 
-    @each $name, $size in $tbf-primitive-button-sizes {
+    @each $name, $size in $frontend-primitive-button-sizes {
       &.#{$name} {
-        height: var(--tbf-primitives-button-sizes-#{$name}-height, #{list.nth($size, 1)});
-        min-height: var(--tbf-primitives-button-sizes-#{$name}-height, #{list.nth($size, 1)});
-        padding-inline: var(--tbf-primitives-button-sizes-#{$name}-padding-inline, #{list.nth($size, 2)});
+        height: var(#{ns.css-var("ui-btn-sizes-")}#{$name}-height, #{list.nth($size, 1)});
+        min-height: var(#{ns.css-var("ui-btn-sizes-")}#{$name}-height, #{list.nth($size, 1)});
+        padding-inline: var(#{ns.css-var("ui-btn-sizes-")}#{$name}-px, #{list.nth($size, 2)});
         padding-block: 0;
-        font-size: var(--tbf-primitives-button-sizes-#{$name}-font-size, #{list.nth($size, 3)});
+        font-size: var(#{ns.css-var("ui-btn-sizes-")}#{$name}-font-size, #{list.nth($size, 3)});
       }
     }
   }
 
   &.highlight {
-    --button-icon-color: var(--tbf-primitives-button-tones-highlight-icon-color, currentColor);
-    background: var(--tbf-primitives-button-tones-highlight-background, var(--tbf-primitives-button-root-background, transparent));
-    color: var(--tbf-primitives-button-tones-highlight-color, currentColor);
-    border-color: var(--tbf-primitives-button-tones-highlight-border-color, currentColor);
+    --button-icon-color: var(#{ns.css-var("ui-btn-tone-highlight-icon")}, currentColor);
+    background: var(#{ns.css-var("ui-btn-tone-highlight-bg")}, var(#{ns.css-var("ui-btn-root-bg")}, transparent));
+    color: var(#{ns.css-var("ui-btn-tone-highlight-color")}, currentColor);
+    border-color: var(#{ns.css-var("ui-btn-tone-highlight-border")}, currentColor);
 
     &:hover,
     &[aria-pressed="true"],
-    &[data-tbf-active="true"] {
-      --button-icon-color: var(--tbf-primitives-button-tones-highlight-states-hover-icon-color, currentColor);
+    &#{ns.data("active", "true")} {
+      --button-icon-color: var(#{ns.css-var("ui-btn-tone-highlight-state-hover-icon")}, currentColor);
       background: var(
-        --tbf-primitives-button-tones-highlight-states-hover-background,
-        var(--tbf-primitives-button-states-hover-background, var(--tbf-primitives-button-root-background, transparent))
+        #{ns.css-var("ui-btn-tone-highlight-state-hover-bg")},
+        var(#{ns.css-var("ui-btn-state-hover-bg")}, var(#{ns.css-var("ui-btn-root-bg")}, transparent))
       );
-      border-color: var(--tbf-primitives-button-tones-highlight-states-hover-border-color, currentColor);
-      color: var(--tbf-primitives-button-tones-highlight-states-hover-color, currentColor);
+      border-color: var(#{ns.css-var("ui-btn-tone-highlight-state-hover-border")}, currentColor);
+      color: var(#{ns.css-var("ui-btn-tone-highlight-state-hover-color")}, currentColor);
     }
   }
 
   &.red {
-    border-inline-color: var(--tbf-primitives-button-tones-red-border-inline-color, currentColor);
+    border-inline-color: var(#{ns.css-var("ui-btn-tone-red-inline-border")}, currentColor);
 
     &:hover,
     &[aria-pressed="true"],
-    &[data-tbf-active="true"] {
+    &#{ns.data("active", "true")} {
       background: var(
-        --tbf-primitives-button-tones-red-states-hover-background,
-        var(--tbf-primitives-button-states-hover-background, var(--tbf-primitives-button-root-background, transparent))
+        #{ns.css-var("ui-btn-tone-red-state-hover-bg")},
+        var(#{ns.css-var("ui-btn-state-hover-bg")}, var(#{ns.css-var("ui-btn-root-bg")}, transparent))
       );
-      border-color: var(--tbf-primitives-button-tones-red-states-hover-border-color, currentColor);
-      color: var(--tbf-primitives-button-tones-red-states-hover-color, currentColor);
-      --button-icon-color: var(--tbf-primitives-button-tones-red-states-hover-icon-color, currentColor);
+      border-color: var(#{ns.css-var("ui-btn-tone-red-state-hover-border")}, currentColor);
+      color: var(#{ns.css-var("ui-btn-tone-red-state-hover-color")}, currentColor);
+      --button-icon-color: var(#{ns.css-var("ui-btn-tone-red-state-hover-icon")}, currentColor);
     }
   }
 
   &.yellow {
-    border-inline-color: var(--tbf-primitives-button-tones-yellow-border-inline-color, currentColor);
+    border-inline-color: var(#{ns.css-var("ui-btn-tone-yellow-inline-border")}, currentColor);
 
     &:hover,
     &[aria-pressed="true"],
-    &[data-tbf-active="true"] {
-      --button-icon-color: var(--tbf-primitives-button-tones-yellow-states-hover-icon-color, currentColor);
+    &#{ns.data("active", "true")} {
+      --button-icon-color: var(#{ns.css-var("ui-btn-tone-yellow-state-hover-icon")}, currentColor);
       background: var(
-        --tbf-primitives-button-tones-yellow-states-hover-background,
-        var(--tbf-primitives-button-states-hover-background, var(--tbf-primitives-button-root-background, transparent))
+        #{ns.css-var("ui-btn-tone-yellow-state-hover-bg")},
+        var(#{ns.css-var("ui-btn-state-hover-bg")}, var(#{ns.css-var("ui-btn-root-bg")}, transparent))
       );
-      border-color: var(--tbf-primitives-button-tones-yellow-states-hover-border-color, currentColor);
-      color: var(--tbf-primitives-button-tones-yellow-states-hover-color, currentColor);
+      border-color: var(#{ns.css-var("ui-btn-tone-yellow-state-hover-border")}, currentColor);
+      color: var(#{ns.css-var("ui-btn-tone-yellow-state-hover-color")}, currentColor);
     }
   }
 
   &.green {
-    border-inline-color: var(--tbf-primitives-button-tones-green-border-inline-color, currentColor);
+    border-inline-color: var(#{ns.css-var("ui-btn-tone-green-inline-border")}, currentColor);
 
     &:hover,
     &[aria-pressed="true"],
-    &[data-tbf-active="true"] {
-      --button-icon-color: var(--tbf-primitives-button-tones-green-states-hover-icon-color, currentColor);
+    &#{ns.data("active", "true")} {
+      --button-icon-color: var(#{ns.css-var("ui-btn-tone-green-state-hover-icon")}, currentColor);
       background: var(
-        --tbf-primitives-button-tones-green-states-hover-background,
-        var(--tbf-primitives-button-states-hover-background, var(--tbf-primitives-button-root-background, transparent))
+        #{ns.css-var("ui-btn-tone-green-state-hover-bg")},
+        var(#{ns.css-var("ui-btn-state-hover-bg")}, var(#{ns.css-var("ui-btn-root-bg")}, transparent))
       );
-      border-color: var(--tbf-primitives-button-tones-green-states-hover-border-color, currentColor);
-      color: var(--tbf-primitives-button-tones-green-states-hover-color, currentColor);
+      border-color: var(#{ns.css-var("ui-btn-tone-green-state-hover-border")}, currentColor);
+      color: var(#{ns.css-var("ui-btn-tone-green-state-hover-color")}, currentColor);
     }
   }
 
@@ -142,13 +143,13 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--tbf-primitives-button-slots-icon-size, 28px);
-    height: var(--tbf-primitives-button-slots-icon-size, 28px);
-    min-width: var(--tbf-primitives-button-slots-icon-size, 28px);
-    min-height: var(--tbf-primitives-button-slots-icon-size, 28px);
+    width: var(#{ns.css-var("ui-btn-slot-icon-size")}, 28px);
+    height: var(#{ns.css-var("ui-btn-slot-icon-size")}, 28px);
+    min-width: var(#{ns.css-var("ui-btn-slot-icon-size")}, 28px);
+    min-height: var(#{ns.css-var("ui-btn-slot-icon-size")}, 28px);
     gap: 0;
     padding: 0;
-    font-size: var(--tbf-primitives-button-slots-icon-font-size, 15px);
+    font-size: var(#{ns.css-var("ui-btn-slot-icon-font-size")}, 15px);
     line-height: 1;
     text-align: center;
     position: relative;
@@ -178,13 +179,13 @@
       text-align: center;
     }
 
-    @each $name, $size in $tbf-primitive-icon-sizes {
+    @each $name, $size in $frontend-primitive-icon-sizes {
       &.#{$name} {
-        width: var(--tbf-primitives-button-slots-icon-sizes-#{$name}-size, #{list.nth($size, 1)});
-        height: var(--tbf-primitives-button-slots-icon-sizes-#{$name}-size, #{list.nth($size, 1)});
-        min-width: var(--tbf-primitives-button-slots-icon-sizes-#{$name}-size, #{list.nth($size, 1)});
-        min-height: var(--tbf-primitives-button-slots-icon-sizes-#{$name}-size, #{list.nth($size, 1)});
-        font-size: var(--tbf-primitives-button-slots-icon-sizes-#{$name}-font-size, #{list.nth($size, 2)});
+        width: var(#{ns.css-var("ui-btn-slot-icon-sizes-")}#{$name}-size, #{list.nth($size, 1)});
+        height: var(#{ns.css-var("ui-btn-slot-icon-sizes-")}#{$name}-size, #{list.nth($size, 1)});
+        min-width: var(#{ns.css-var("ui-btn-slot-icon-sizes-")}#{$name}-size, #{list.nth($size, 1)});
+        min-height: var(#{ns.css-var("ui-btn-slot-icon-sizes-")}#{$name}-size, #{list.nth($size, 1)});
+        font-size: var(#{ns.css-var("ui-btn-slot-icon-sizes-")}#{$name}-font-size, #{list.nth($size, 2)});
       }
     }
 
@@ -200,10 +201,10 @@
   border: var(--border-width) solid var(--border-surface-1);
 
   &.unknown {
-    background-color: var(--background-surface-2, var(--tbf-surface-muted, transparent));
+    background-color: var(--background-surface-2, var(#{ns.css-var("surface-muted")}, transparent));
   }
 
-  @each $name, $size in $tbf-primitive-avatar-sizes {
+  @each $name, $size in $frontend-primitive-avatar-sizes {
     &.#{$name} {
       width: $size;
       height: $size;

package/dist/primitives/styles/_display.scss

@@ -1,3 +1,4 @@
+@use "@trebired/bundler/namespace" as ns;
 .canvas-panel {
   display: flex;
   min-height: 0;
@@ -35,7 +36,7 @@
 .canvas-panel-toolbar-actions-with-divider {
   margin-left: 4px;
   padding-left: 12px;
-  border-left: var(--border-width, var(--tbf-border-width, 1px)) solid rgba(255, 255, 255, 0.12);
+  border-left: var(--border-width, var(#{ns.css-var("border-width")}, 1px)) solid rgba(255, 255, 255, 0.12);
 }
 
 .canvas-panel-toolbar-actions > .right,
@@ -58,40 +59,42 @@
   min-height: 0;
 }
 
-.tbf-text-link,
+#{ns.class("text-link")},
+
 .text-link {
   color: var(
-    --tbf-primitives-text-link-root-color,
-    var(--text-color-muted, var(--tbf-text-muted, var(--tbf-text, currentColor)))
+    #{ns.css-var("ui-link-root-color")},
+    var(--text-color-muted, var(#{ns.css-var("text-muted")}, var(#{ns.css-var("text")}, currentColor)))
   );
-  font-weight: var(--tbf-primitives-text-link-root-font-weight, inherit);
-  text-decoration-line: var(--tbf-primitives-text-link-root-text-decoration-line, underline);
-  text-decoration-color: var(--tbf-primitives-text-link-root-text-decoration-color, currentColor);
-  text-decoration-style: var(--tbf-primitives-text-link-root-text-decoration-style, solid);
-  text-decoration-thickness: var(--tbf-primitives-text-link-root-text-decoration-thickness, 1px);
-  text-underline-offset: var(--tbf-primitives-text-link-root-text-underline-offset, 3px);
-  transition: var(--tbf-primitives-text-link-root-transition, none);
+  font-weight: var(#{ns.css-var("ui-link-root-font-weight")}, inherit);
+  text-decoration-line: var(#{ns.css-var("ui-link-root-decoration-line")}, underline);
+  text-decoration-color: var(#{ns.css-var("ui-link-root-decoration-color")}, currentColor);
+  text-decoration-style: var(#{ns.css-var("ui-link-root-decoration-style")}, solid);
+  text-decoration-thickness: var(#{ns.css-var("ui-link-root-decoration-thickness")}, 1px);
+  text-underline-offset: var(#{ns.css-var("ui-link-root-underline-offset")}, 3px);
+  transition: var(#{ns.css-var("ui-link-root-transition")}, none);
 }
 
-.tbf-text-link:hover,
-.tbf-text-link:focus,
+#{ns.class("text-link")}:hover,
+
+#{ns.class("text-link")}:focus,
 .text-link:hover,
 .text-link:focus {
-  color: var(--tbf-primitives-text-link-states-hover-color, var(--text-color, var(--tbf-text, currentColor)));
-  text-decoration-color: var(--tbf-primitives-text-link-states-hover-text-decoration-color, currentColor);
+  color: var(#{ns.css-var("ui-link-state-hover-color")}, var(--text-color, var(#{ns.css-var("text")}, currentColor)));
+  text-decoration-color: var(#{ns.css-var("ui-link-state-hover-decoration-color")}, currentColor);
   text-decoration-style: var(
-    --tbf-primitives-text-link-states-hover-text-decoration-style,
-    var(--tbf-primitives-text-link-root-text-decoration-style, solid)
+    #{ns.css-var("ui-link-state-hover-decoration-style")},
+    var(#{ns.css-var("ui-link-root-decoration-style")}, solid)
   );
 }
 
-[data-tbf-table] {
+#{ns.data("table")} {
   width: 100%;
   border-collapse: collapse;
 
   th,
   td {
-    border: var(--border-width, var(--tbf-border-width, 1px)) solid var(--border-surface-1, var(--tbf-border, currentColor));
+    border: var(--border-width, var(#{ns.css-var("border-width")}, 1px)) solid var(--border-surface-1, var(#{ns.css-var("border")}, currentColor));
     text-align: left;
     vertical-align: middle;
   }
@@ -111,7 +114,7 @@
   }
 
   tbody tr:hover {
-    background: var(--background-surface-2, var(--tbf-surface-muted, transparent));
+    background: var(--background-surface-2, var(#{ns.css-var("surface-muted")}, transparent));
     cursor: pointer;
   }
 }