@trebired/frontend 7.1.18 → 8.0.0

package/dist/layout/index.d.ts

@@ -1,12 +1,12 @@
 import { type BindRoot } from "../dom/index.d.ts";
 import { type HeaderRuntimeOptions } from "./header.js";
-declare const LAYOUT_ROOT_SELECTOR = "[data-tbf-layout-root]";
-declare const LAYOUT_MAIN_SELECTOR = "[data-tbf-layout-main]";
-declare const LAYOUT_CONTENT_SELECTOR = "[data-tbf-layout-content]";
+declare const LAYOUT_ROOT_SELECTOR: string;
+declare const LAYOUT_MAIN_SELECTOR: string;
+declare const LAYOUT_CONTENT_SELECTOR: string;
 declare const LAYOUT_PORTAL_ROOT_ID = "tbf_layout_portal_root";
-declare const LAYOUT_PORTAL_ROOT_SELECTOR = "[data-tbf-layout-portal-root]";
-declare const LAYOUT_BODY_ATTRIBUTE = "data-tbf-layout";
-declare const LAYOUT_MOBILE_BODY_ATTRIBUTE = "data-tbf-layout-mobile";
+declare const LAYOUT_PORTAL_ROOT_SELECTOR: string;
+declare const LAYOUT_BODY_ATTRIBUTE: `data-${string}`;
+declare const LAYOUT_MOBILE_BODY_ATTRIBUTE: `data-${string}`;
 type LayoutSide = "left" | "right";
 type LayoutBodyState = {
     hasHeader: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAExD,OAAO,EAIL,KAAK,oBAAoB,EAC1B,MAAM,aAAa,CAAC;AAErB,QAAA,MAAM,oBAAoB,2BAA2B,CAAC;AACtD,QAAA,MAAM,oBAAoB,2BAA2B,CAAC;AACtD,QAAA,MAAM,uBAAuB,8BAA8B,CAAC;AAC5D,QAAA,MAAM,qBAAqB,2BAA2B,CAAC;AACvD,QAAA,MAAM,2BAA2B,kCAAkC,CAAC;AACpE,QAAA,MAAM,qBAAqB,oBAAoB,CAAC;AAChD,QAAA,MAAM,4BAA4B,2BAA2B,CAAC;AAE9D,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnC,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAUF,iBAAS,mBAAmB,CAAC,IAAI,GAAE,UAAqB,GAAG,eAAe,CAQzE;AAED,iBAAS,oBAAoB,CAAC,KAAK,EAAE,eAAe,EAAE,OAAO,GAAE,oBAAyB,mBAgBvF;AAED,iBAAS,mBAAmB,CAAC,IAAI,GAAE,UAAqB,EAAE,OAAO,GAAE,oBAAyB,mBAE3F;AAED,iBAAS,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,EAAE,OAAO,GAAE,oBAAyB,eAKnF;AAED,iBAAS,WAAW,CAAC,IAAI,GAAE,QAAmB,EAAE,OAAO,GAAE,oBAAyB,QAOjF;AAED,iBAAS,sBAAsB,gBAS9B;AAED,iBAAS,sBAAsB,CAAC,KAAK,GAAE,OAAO,CAAC,eAAe,CAAM,UAqBnE;AAED,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,oBAAoB,EACpB,4BAA4B,EAC5B,qBAAqB,EACrB,2BAA2B,EAC3B,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EACnB,mBAAmB,GACpB,CAAC;AACF,cAAa,iBAAiB,CAAC;AAC/B,cAAa,aAAa,CAAC;AAC3B,cAAa,YAAY,CAAC;AAC1B,YAAY,EAAE,eAAe,EAAE,oBAAoB,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAExD,OAAO,EAIL,KAAK,oBAAoB,EAC1B,MAAM,aAAa,CAAC;AAGrB,QAAA,MAAM,oBAAoB,QAAsC,CAAC;AACjE,QAAA,MAAM,oBAAoB,QAAsC,CAAC;AACjE,QAAA,MAAM,uBAAuB,QAAyC,CAAC;AACvE,QAAA,MAAM,qBAAqB,2BAA0C,CAAC;AACtE,QAAA,MAAM,2BAA2B,QAA6C,CAAC;AAC/E,QAAA,MAAM,qBAAqB,kBAA6B,CAAC;AACzD,QAAA,MAAM,4BAA4B,kBAAoC,CAAC;AAEvE,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnC,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAUF,iBAAS,mBAAmB,CAAC,IAAI,GAAE,UAAqB,GAAG,eAAe,CAQzE;AAED,iBAAS,oBAAoB,CAAC,KAAK,EAAE,eAAe,EAAE,OAAO,GAAE,oBAAyB,mBAgBvF;AAED,iBAAS,mBAAmB,CAAC,IAAI,GAAE,UAAqB,EAAE,OAAO,GAAE,oBAAyB,mBAE3F;AAED,iBAAS,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,EAAE,OAAO,GAAE,oBAAyB,eAKnF;AAED,iBAAS,WAAW,CAAC,IAAI,GAAE,QAAmB,EAAE,OAAO,GAAE,oBAAyB,QAOjF;AAED,iBAAS,sBAAsB,gBAS9B;AAED,iBAAS,sBAAsB,CAAC,KAAK,GAAE,OAAO,CAAC,eAAe,CAAM,UAqBnE;AAED,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,oBAAoB,EACpB,4BAA4B,EAC5B,qBAAqB,EACrB,2BAA2B,EAC3B,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EACnB,mBAAmB,GACpB,CAAC;AACF,cAAa,iBAAiB,CAAC;AAC/B,cAAa,aAAa,CAAC;AAC3B,cAAa,YAAY,CAAC;AAC1B,YAAY,EAAE,eAAe,EAAE,oBAAoB,EAAE,UAAU,EAAE,CAAC"}

package/dist/layout/index.js

@@ -1,15 +1,16 @@
 import { queryAll } from "../dom/index.js";
 import { bindBreadcrumbs } from "./breadcrumb.js";
 import { HEADER_PRIMARY_SELECTOR, HEADER_SECONDARY_SELECTOR, bindHeaders, } from "./header.js";
-const LAYOUT_ROOT_SELECTOR = "[data-tbf-layout-root]";
-const LAYOUT_MAIN_SELECTOR = "[data-tbf-layout-main]";
-const LAYOUT_CONTENT_SELECTOR = "[data-tbf-layout-content]";
-const LAYOUT_PORTAL_ROOT_ID = "tbf_layout_portal_root";
-const LAYOUT_PORTAL_ROOT_SELECTOR = "[data-tbf-layout-portal-root]";
-const LAYOUT_BODY_ATTRIBUTE = "data-tbf-layout";
-const LAYOUT_MOBILE_BODY_ATTRIBUTE = "data-tbf-layout-mobile";
+import { FRONTEND_PREFIX, frontendDataAttr, frontendDataSelector } from "../namespace/index.js";
+const LAYOUT_ROOT_SELECTOR = frontendDataSelector("layout-root");
+const LAYOUT_MAIN_SELECTOR = frontendDataSelector("layout-main");
+const LAYOUT_CONTENT_SELECTOR = frontendDataSelector("layout-content");
+const LAYOUT_PORTAL_ROOT_ID = `${FRONTEND_PREFIX}_layout_portal_root`;
+const LAYOUT_PORTAL_ROOT_SELECTOR = frontendDataSelector("layout-portal-root");
+const LAYOUT_BODY_ATTRIBUTE = frontendDataAttr("layout");
+const LAYOUT_MOBILE_BODY_ATTRIBUTE = frontendDataAttr("layout-mobile");
 function layoutSideSelector(side) {
-    return `[data-tbf-sidebar-shell][data-tbf-sidebar-side="${side}"]`;
+    return `${frontendDataSelector("sidebar-shell")}${frontendDataSelector("sidebar-side", side)}`;
 }
 function hasSidebar(root, side) {
     return Boolean(root.querySelector(layoutSideSelector(side)));
@@ -18,7 +19,7 @@ function readLayoutBodyState(root = document) {
     return {
         hasHeader: Boolean(root.querySelector(HEADER_PRIMARY_SELECTOR)),
         hasLeftSidebar: hasSidebar(root, "left"),
-        hasMobileBottomBar: Boolean(root.querySelector("[data-tbf-layout-bottom-bar]")),
+        hasMobileBottomBar: Boolean(root.querySelector(frontendDataSelector("layout-bottom-bar"))),
         hasRightSidebar: hasSidebar(root, "right"),
         hasSecondaryHeader: Boolean(root.querySelector(HEADER_SECONDARY_SELECTOR)),
     };
@@ -28,10 +29,10 @@ function applyLayoutBodyState(state, options = {}) {
     if (!body)
         return state;
     body.setAttribute(LAYOUT_BODY_ATTRIBUTE, "true");
-    body.setAttribute("data-tbf-header-primary", state.hasHeader ? "true" : "false");
-    body.setAttribute("data-tbf-header-secondary", state.hasSecondaryHeader ? "true" : "false");
-    body.setAttribute("data-tbf-sidebar-left", state.hasLeftSidebar ? "true" : "false");
-    body.setAttribute("data-tbf-sidebar-right", state.hasRightSidebar ? "true" : "false");
+    body.setAttribute(frontendDataAttr("header-primary"), state.hasHeader ? "true" : "false");
+    body.setAttribute(frontendDataAttr("header-secondary"), state.hasSecondaryHeader ? "true" : "false");
+    body.setAttribute(frontendDataAttr("sidebar-left"), state.hasLeftSidebar ? "true" : "false");
+    body.setAttribute(frontendDataAttr("sidebar-right"), state.hasRightSidebar ? "true" : "false");
     body.setAttribute(LAYOUT_MOBILE_BODY_ATTRIBUTE, options.mobile === true || state.hasMobileBottomBar ? "true" : "false");
     return state;
 }
@@ -41,7 +42,7 @@ function syncLayoutBodyState(root = document, options = {}) {
 function bindLayoutRoot(root, options = {}) {
     if (!(root instanceof HTMLElement))
         return null;
-    root.setAttribute("data-tbf-layout-bound", "true");
+    root.setAttribute(frontendDataAttr("layout-bound"), "true");
     syncLayoutBodyState(root, options);
     return root;
 }
@@ -62,7 +63,7 @@ function ensureLayoutPortalRoot() {
         return existing;
     const root = document.createElement("div");
     root.id = LAYOUT_PORTAL_ROOT_ID;
-    root.setAttribute("data-tbf-layout-portal-root", "");
+    root.setAttribute(frontendDataAttr("layout-portal-root"), "");
     document.body?.appendChild(root);
     return root;
 }
@@ -79,12 +80,12 @@ function createLayoutBootScript(state = {}) {
         `var state=${payload};`,
         "var body=document.body;",
         "if(!body)return;",
-        "body.setAttribute('data-tbf-layout','true');",
-        "body.setAttribute('data-tbf-header-primary',state.hasHeader?'true':'false');",
-        "body.setAttribute('data-tbf-header-secondary',state.hasSecondaryHeader?'true':'false');",
-        "body.setAttribute('data-tbf-sidebar-left',state.hasLeftSidebar?'true':'false');",
-        "body.setAttribute('data-tbf-sidebar-right',state.hasRightSidebar?'true':'false');",
-        "body.setAttribute('data-tbf-layout-mobile',state.hasMobileBottomBar?'true':'false');",
+        `body.setAttribute(${JSON.stringify(LAYOUT_BODY_ATTRIBUTE)},'true');`,
+        `body.setAttribute(${JSON.stringify(frontendDataAttr("header-primary"))},state.hasHeader?'true':'false');`,
+        `body.setAttribute(${JSON.stringify(frontendDataAttr("header-secondary"))},state.hasSecondaryHeader?'true':'false');`,
+        `body.setAttribute(${JSON.stringify(frontendDataAttr("sidebar-left"))},state.hasLeftSidebar?'true':'false');`,
+        `body.setAttribute(${JSON.stringify(frontendDataAttr("sidebar-right"))},state.hasRightSidebar?'true':'false');`,
+        `body.setAttribute(${JSON.stringify(LAYOUT_MOBILE_BODY_ATTRIBUTE)},state.hasMobileBottomBar?'true':'false');`,
         "}catch(e){}})();",
     ].join("");
 }

package/dist/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EACzB,WAAW,GAEZ,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAExF,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,aAAa,CAAC,CAAC;AACjE,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,aAAa,CAAC,CAAC;AACjE,MAAM,uBAAuB,GAAG,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;AACvE,MAAM,qBAAqB,GAAG,GAAG,eAAe,qBAAqB,CAAC;AACtE,MAAM,2BAA2B,GAAG,oBAAoB,CAAC,oBAAoB,CAAC,CAAC;AAC/E,MAAM,qBAAqB,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AACzD,MAAM,4BAA4B,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;AAiBvE,SAAS,kBAAkB,CAAC,IAAgB;IAC1C,OAAO,GAAG,oBAAoB,CAAC,eAAe,CAAC,GAAG,oBAAoB,CAAC,cAAc,EAAE,IAAI,CAAC,EAAE,CAAC;AACjG,CAAC;AAED,SAAS,UAAU,CAAC,IAAgB,EAAE,IAAgB;IACpD,OAAO,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAC/D,CAAC;AAED,SAAS,mBAAmB,CAAC,OAAmB,QAAQ;IACtD,OAAO;QACL,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAC/D,cAAc,EAAE,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC;QACxC,kBAAkB,EAAE,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAC1F,eAAe,EAAE,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC;QAC1C,kBAAkB,EAAE,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;KAC3E,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAAC,KAAsB,EAAE,UAAgC,EAAE;IACtF,MAAM,IAAI,GAAG,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACpE,IAAI,CAAC,IAAI;QAAE,OAAO,KAAK,CAAC;IACxB,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;IACjD,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC1F,IAAI,CAAC,YAAY,CACf,gBAAgB,CAAC,kBAAkB,CAAC,EACpC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAC5C,CAAC;IACF,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC7F,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC/F,IAAI,CAAC,YAAY,CACf,4BAA4B,EAC5B,OAAO,CAAC,MAAM,KAAK,IAAI,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CACvE,CAAC;IACF,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,mBAAmB,CAAC,OAAmB,QAAQ,EAAE,UAAgC,EAAE;IAC1F,OAAO,oBAAoB,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;AAClE,CAAC;AAED,SAAS,cAAc,CAAC,IAAwB,EAAE,UAAgC,EAAE;IAClF,IAAI,CAAC,CAAC,IAAI,YAAY,WAAW,CAAC;QAAE,OAAO,IAAI,CAAC;IAChD,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,CAAC;IAC5D,mBAAmB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,WAAW,CAAC,OAAiB,QAAQ,EAAE,UAAgC,EAAE;IAChF,QAAQ,CAAc,IAAI,EAAE,oBAAoB,CAAC,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;QACrE,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IACH,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC;IACxC,eAAe,CAAC,IAAI,CAAC,CAAC;IACtB,IAAI,IAAI,KAAK,QAAQ;QAAE,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AAChE,CAAC;AAED,SAAS,sBAAsB;IAC7B,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,IAAI,CAAC;IACjD,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC;IAChE,IAAI,QAAQ,YAAY,WAAW;QAAE,OAAO,QAAQ,CAAC;IACrD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,qBAAqB,CAAC;IAChC,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,EAAE,CAAC,CAAC;IAC9D,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IACjC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,sBAAsB,CAAC,QAAkC,EAAE;IAClE,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC;QAC3B,SAAS,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI;QACnC,cAAc,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI;QAC7C,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI;QACrD,eAAe,EAAE,KAAK,CAAC,eAAe,KAAK,IAAI;QAC/C,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI;KACxD,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IAC7B,OAAO;QACL,kBAAkB;QAClB,aAAa,OAAO,GAAG;QACvB,yBAAyB;QACzB,kBAAkB;QAClB,qBAAqB,IAAI,CAAC,SAAS,CAAC,qBAAqB,CAAC,WAAW;QACrE,qBAAqB,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,mCAAmC;QAC1G,qBAAqB,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,4CAA4C;QACrH,qBAAqB,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,wCAAwC;QAC7G,qBAAqB,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,yCAAyC;QAC/G,qBAAqB,IAAI,CAAC,SAAS,CAAC,4BAA4B,CAAC,4CAA4C;QAC7G,kBAAkB;KACnB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC;AAED,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,oBAAoB,EACpB,4BAA4B,EAC5B,qBAAqB,EACrB,2BAA2B,EAC3B,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EACnB,mBAAmB,GACpB,CAAC;AACF,cAAa,iBAAiB,CAAC;AAC/B,cAAa,aAAa,CAAC;AAC3B,cAAa,YAAY,CAAC"}

package/dist/layout/styles/breadcrumb.scss

@@ -1,8 +1,9 @@
-.tbf-breadcrumb {
+@use "@trebired/bundler/namespace" as ns;
+#{ns.class("breadcrumb")} {
   min-width: 0;
 }
 
-.tbf-breadcrumb__list {
+#{ns.element-class("breadcrumb", "list")} {
   display: flex;
   min-width: 0;
   align-items: center;
@@ -13,20 +14,21 @@
   list-style: none;
 }
 
-.tbf-breadcrumb__item {
+#{ns.element-class("breadcrumb", "item")} {
   display: inline-flex;
   min-width: 0;
   align-items: center;
 }
 
-.tbf-breadcrumb__item + .tbf-breadcrumb__item::before {
+#{ns.element-class("breadcrumb", "item")} + #{ns.element-class("breadcrumb", "item")}::before {
   content: "/";
   margin-inline-end: 6px;
-  color: var(--tbf-text-muted, #666);
+  color: var(#{ns.css-var("text-muted")}, #666);
 }
 
-.tbf-breadcrumb__link,
-.tbf-breadcrumb__current {
+#{ns.element-class("breadcrumb", "link")},
+
+#{ns.element-class("breadcrumb", "current")} {
   display: inline-flex;
   min-width: 0;
   align-items: center;
@@ -35,7 +37,7 @@
   text-decoration: none;
 }
 
-.tbf-breadcrumb__label {
+#{ns.element-class("breadcrumb", "label")} {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;

package/dist/layout/styles/chrome.scss

@@ -1,62 +1,76 @@
-.tbf-header,
-[data-tbf-header] {
+@use "@trebired/bundler/namespace" as ns;
+#{ns.class("header")},
+
+#{ns.data("header")} {
   display: flex;
-  min-height: var(--tbf-header-min-height, 67px);
+  min-height: var(#{ns.css-var("header-min-height")}, 67px);
   box-sizing: border-box;
   align-items: center;
-  gap: var(--tbf-gap-sm, 8px);
-  padding: var(--tbf-header-padding, 8px 18px);
-  border-block-end: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
-  color: var(--tbf-text, #000);
-  background: var(--tbf-page, var(--background-page, #fff));
+  gap: var(#{ns.css-var("gap-sm")}, 8px);
+  padding: var(#{ns.css-var("header-padding")}, 8px 18px);
+  border-block-end: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, #000);
+  color: var(#{ns.css-var("text")}, #000);
+  background: var(#{ns.css-var("page")}, var(--background-page, #fff));
 }
 
-[data-tbf-header][data-tbf-header-primary],
-[data-tbf-header][data-tbf-header-secondary] {
+#{ns.data("header")}#{ns.data("header-primary")},
+
+#{ns.data("header")}#{ns.data("header-secondary")} {
   position: sticky;
   inset-block-start: 0;
-  z-index: var(--tbf-z-header, 920);
+  z-index: var(#{ns.css-var("z-header")}, 920);
 }
 
-[data-tbf-header][data-tbf-header-secondary] {
-  inset-block-start: var(--tbf-header-height, 0px);
-  z-index: var(--tbf-z-secondary-header, 910);
+#{ns.data("header")}#{ns.data("header-secondary")} {
+  inset-block-start: var(#{ns.css-var("header-height")}, 0px);
+  z-index: var(#{ns.css-var("z-secondary-header")}, 910);
 }
 
-.tbf-header__brand,
-[data-tbf-header-brand],
-.tbf-header__group,
-[data-tbf-header-group],
-.tbf-header__nav,
-[data-tbf-header-nav],
-.tbf-header__actions,
-[data-tbf-header-actions] {
+#{ns.element-class("header", "brand")},
+
+#{ns.data("header-brand")},
+
+#{ns.element-class("header", "group")},
+
+#{ns.data("header-group")},
+
+#{ns.element-class("header", "nav")},
+
+#{ns.data("header-nav")},
+
+#{ns.element-class("header", "actions")},
+
+#{ns.data("header-actions")} {
   display: flex;
   min-width: 0;
   align-items: center;
-  gap: var(--tbf-gap-sm, 8px);
+  gap: var(#{ns.css-var("gap-sm")}, 8px);
 }
 
-.tbf-header__brand,
-[data-tbf-header-brand] {
+#{ns.element-class("header", "brand")},
+
+#{ns.data("header-brand")} {
   flex: 0 1 auto;
   font-weight: 700;
 }
 
-.tbf-header__nav,
-[data-tbf-header-nav] {
+#{ns.element-class("header", "nav")},
+
+#{ns.data("header-nav")} {
   flex: 1 1 auto;
   overflow: hidden;
 }
 
-.tbf-header__actions,
-[data-tbf-header-actions] {
+#{ns.element-class("header", "actions")},
+
+#{ns.data("header-actions")} {
   flex: 0 0 auto;
   margin-inline-start: auto;
 }
 
-.tbf-shell-header-brand__link,
-.tbf-shell-header-brand__mark {
+#{ns.element-class("shell-header-brand", "link")},
+
+#{ns.element-class("shell-header-brand", "mark")} {
   display: inline-flex;
   min-width: 0;
   align-items: center;
@@ -64,103 +78,107 @@
   text-decoration: none;
 }
 
-.tbf-shell-header-brand__identity {
+#{ns.element-class("shell-header-brand", "identity")} {
   display: inline-flex;
   min-width: 0;
   align-items: center;
-  gap: var(--tbf-shell-header-brand-gap, var(--tbf-gap-xs, 6px));
+  gap: var(#{ns.css-var("shell-header-brand-gap")}, var(#{ns.css-var("gap-xs")}, 6px));
 }
 
-.tbf-shell-header-brand__identity[data-tbf-brand-tag-align="vertical"] {
+#{ns.element-class("shell-header-brand", "identity")}#{ns.data("brand-tag-align", "vertical")} {
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--tbf-shell-header-brand-vertical-gap, 2px);
+  gap: var(#{ns.css-var("shell-header-brand-vertical-gap")}, 2px);
 }
 
-.tbf-shell-header-brand__logo,
-.tbf-shell-header-brand__tag,
-.tbf-shell-header-brand__meta {
+#{ns.element-class("shell-header-brand", "logo")},
+
+#{ns.element-class("shell-header-brand", "tag")},
+
+#{ns.element-class("shell-header-brand", "meta")} {
   display: inline-flex;
   min-width: 0;
   align-items: center;
 }
 
-.tbf-shell-header-brand__tag {
-  transform: translateY(var(--tbf-shell-header-brand-tag-offset-y, 0));
+#{ns.element-class("shell-header-brand", "tag")} {
+  transform: translateY(var(#{ns.css-var("shell-header-brand-tag-offset-y")}, 0));
 }
 
-.tbf-shell-header-toggle-group {
+#{ns.class("shell-header-toggle-group")} {
   display: none;
   margin-inline-start: auto;
 }
 
-.tbf-mobile-nav,
-[data-tbf-mobile-nav] {
+#{ns.class("mobile-nav")},
+
+#{ns.data("mobile-nav")} {
   position: fixed;
-  z-index: var(--tbf-z-mobile-nav, 940);
+  z-index: var(#{ns.css-var("z-mobile-nav")}, 940);
   inset: 0;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition:
-  opacity var(--tbf-transition-normal, 180ms) ease,
-  visibility 0s linear var(--tbf-transition-normal, 180ms);
+  opacity var(#{ns.css-var("transition-normal")}, 180ms) ease,
+  visibility 0s linear var(#{ns.css-var("transition-normal")}, 180ms);
 }
 
-[data-tbf-mobile-nav][data-tbf-mobile-nav-open="true"] {
+#{ns.data("mobile-nav")}#{ns.data("mobile-nav-open", "true")} {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transition:
-  opacity var(--tbf-transition-normal, 180ms) ease,
+  opacity var(#{ns.css-var("transition-normal")}, 180ms) ease,
   visibility 0s;
 }
 
-.tbf-mobile-nav__scrim {
+#{ns.element-class("mobile-nav", "scrim")} {
   position: absolute;
   inset: 0;
-  background: var(--tbf-overlay, rgb(0 0 0 / 48%));
+  background: var(#{ns.css-var("overlay")}, rgb(0 0 0 / 48%));
 }
 
-.tbf-mobile-nav__panel,
-[data-tbf-mobile-nav-panel] {
+#{ns.element-class("mobile-nav", "panel")},
+
+#{ns.data("mobile-nav-panel")} {
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
   display: flex;
-  width: min(var(--tbf-mobile-nav-width, 340px), calc(100vw - 38px));
+  width: min(var(#{ns.css-var("mobile-nav-width")}, 340px), calc(100vw - 38px));
   max-width: calc(100vw - 24px);
   box-sizing: border-box;
   flex-direction: column;
-  gap: var(--tbf-gap-md, 12px);
-  padding: var(--tbf-mobile-nav-padding, 16px);
+  gap: var(#{ns.css-var("gap-md")}, 12px);
+  padding: var(#{ns.css-var("mobile-nav-padding")}, 16px);
   overflow-y: auto;
-  color: var(--tbf-text, #000);
-  background: var(--tbf-page, var(--background-page, #fff));
+  color: var(#{ns.css-var("text")}, #000);
+  background: var(#{ns.css-var("page")}, var(--background-page, #fff));
   transform: translateX(-100%);
-  transition: transform var(--tbf-transition-normal, 180ms) ease;
+  transition: transform var(#{ns.css-var("transition-normal")}, 180ms) ease;
 }
 
-[data-tbf-mobile-nav][data-tbf-mobile-nav-open="true"] [data-tbf-mobile-nav-panel] {
+#{ns.data("mobile-nav")}#{ns.data("mobile-nav-open", "true")} #{ns.data("mobile-nav-panel")} {
   transform: translateX(0);
 }
 
-.tbf-shell-mobile-nav {
+#{ns.class("shell-mobile-nav")} {
   display: flex;
   min-width: 0;
   flex-direction: column;
-  gap: var(--tbf-gap-md, 12px);
+  gap: var(#{ns.css-var("gap-md")}, 12px);
 }
 
-.tbf-shell-mobile-nav__head {
+#{ns.element-class("shell-mobile-nav", "head")} {
   display: flex;
   min-width: 0;
   align-items: center;
   justify-content: space-between;
-  gap: var(--tbf-gap-sm, 8px);
+  gap: var(#{ns.css-var("gap-sm")}, 8px);
 }
 
-.tbf-shell-mobile-nav__title {
+#{ns.element-class("shell-mobile-nav", "title")} {
   min-width: 0;
   overflow: hidden;
   font-weight: 700;
@@ -168,97 +186,105 @@
   white-space: nowrap;
 }
 
-.tbf-shell-mobile-nav__section,
-.tbf-shell-support-links {
+#{ns.element-class("shell-mobile-nav", "section")},
+
+#{ns.class("shell-support-links")} {
   display: flex;
   min-width: 0;
   flex-direction: column;
-  gap: var(--tbf-gap-sm, 8px);
+  gap: var(#{ns.css-var("gap-sm")}, 8px);
 }
 
-.tbf-shell-support-links__list {
+#{ns.element-class("shell-support-links", "list")} {
   display: flex;
   min-width: 0;
   flex-direction: row;
   align-items: center;
-  gap: var(--tbf-gap-sm, 8px);
+  gap: var(#{ns.css-var("gap-sm")}, 8px);
   padding: 0;
   margin: 0;
   list-style: none;
 }
 
-.tbf-shell-support-links__list.inline-row {
+#{ns.element-class("shell-support-links", "list")}.inline-row {
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-start;
 }
 
-.tbf-shell-support-links__list.column {
+#{ns.element-class("shell-support-links", "list")}.column {
   flex-direction: column;
   align-items: stretch;
 }
 
-.tbf-header__nav .tbf-shell-support-links,
-[data-tbf-header-nav] .tbf-shell-support-links {
+#{ns.element-class("header", "nav")} #{ns.class("shell-support-links")},
+
+#{ns.data("header-nav")} #{ns.class("shell-support-links")} {
   flex: 1 1 auto;
   overflow: hidden;
 }
 
-.tbf-header__nav .tbf-shell-support-links__list,
-[data-tbf-header-nav] .tbf-shell-support-links__list {
+#{ns.element-class("header", "nav")} #{ns.element-class("shell-support-links", "list")},
+
+#{ns.data("header-nav")} #{ns.element-class("shell-support-links", "list")} {
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: thin;
 }
 
-.tbf-shell-mobile-nav__section-label,
-.tbf-shell-support-links__label {
-  color: var(--tbf-text-muted, #666);
-  font-size: var(--tbf-font-size-sm, 0.875rem);
+#{ns.element-class("shell-mobile-nav", "section-label")},
+
+#{ns.element-class("shell-support-links", "label")} {
+  color: var(#{ns.css-var("text-muted")}, #666);
+  font-size: var(#{ns.css-var("font-size-sm")}, 0.875rem);
   font-weight: 700;
 }
 
-.tbf-product-shell-sidebar-footer {
+#{ns.class("product-shell-sidebar-footer")} {
   display: flex;
   min-width: 0;
   flex-direction: column;
-  gap: var(--tbf-gap-sm, 8px);
+  gap: var(#{ns.css-var("gap-sm")}, 8px);
   margin-block-start: auto;
 }
 
-.tbf-product-shell-sidebar-controls {
+#{ns.class("product-shell-sidebar-controls")} {
   display: flex;
   min-width: 0;
   align-items: center;
-  gap: var(--tbf-gap-xs, 6px);
-  padding: var(--tbf-spacing-xs, 6px);
+  gap: var(#{ns.css-var("gap-xs")}, 6px);
+  padding: var(#{ns.css-var("spacing-xs")}, 6px);
 }
 
-.tbf-product-shell-sidebar-minimize__collapse,
-.tbf-product-shell-sidebar-minimize__expand {
+#{ns.element-class("product-shell-sidebar-minimize", "collapse")},
+
+#{ns.element-class("product-shell-sidebar-minimize", "expand")} {
   display: inline-flex;
   align-items: center;
 }
 
-[data-tbf-sidebar-minimized="true"]
-.tbf-product-shell-sidebar-minimize__collapse,
-[data-tbf-sidebar-minimized="false"]
-.tbf-product-shell-sidebar-minimize__expand {
+#{ns.data("sidebar-minimized", "true")}
+
+#{ns.element-class("product-shell-sidebar-minimize", "collapse")},
+
+#{ns.data("sidebar-minimized", "false")}
+
+#{ns.element-class("product-shell-sidebar-minimize", "expand")} {
   display: none;
 }
 
-.tbf-mobile-bottom-bar__items {
+#{ns.element-class("mobile-bottom-bar", "items")} {
   display: grid;
   grid-auto-columns: minmax(0, 1fr);
   grid-auto-flow: column;
   min-height: 52px;
-  border: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
-  border-radius: var(--tbf-radius, 0);
-  background: var(--tbf-page, var(--background-page, #fff));
+  border: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, #000);
+  border-radius: var(#{ns.css-var("radius")}, 0);
+  background: var(#{ns.css-var("page")}, var(--background-page, #fff));
   pointer-events: auto;
 }
 
-.tbf-mobile-bottom-bar__item {
+#{ns.element-class("mobile-bottom-bar", "item")} {
   position: relative;
   display: flex;
   min-width: 0;
@@ -267,15 +293,15 @@
   justify-content: center;
   gap: 3px;
   padding: 7px 5px;
-  color: var(--tbf-text-muted, #666);
+  color: var(#{ns.css-var("text-muted")}, #666);
   text-decoration: none;
 }
 
-.tbf-mobile-bottom-bar__item[data-tbf-active="true"] {
-  color: var(--tbf-text, #000);
+#{ns.element-class("mobile-bottom-bar", "item")}#{ns.data("active", "true")} {
+  color: var(#{ns.css-var("text")}, #000);
 }
 
-.tbf-mobile-bottom-bar__label {
+#{ns.element-class("mobile-bottom-bar", "label")} {
   max-width: 100%;
   overflow: hidden;
   font-size: 11px;
@@ -283,31 +309,31 @@
   white-space: nowrap;
 }
 
-.tbf-mobile-bottom-bar__badge {
+#{ns.element-class("mobile-bottom-bar", "badge")} {
   position: absolute;
   inset-block-start: 5px;
   inset-inline-end: 12px;
 }
 
 @media (max-width: 900px) {
-  .tbf-header,
-  [data-tbf-header] {
+  #{ns.class("header")},
+  #{ns.data("header")} {
     flex-wrap: wrap;
     min-height: 10px;
-    padding: var(--tbf-header-mobile-padding, 10px 14px);
+    padding: var(#{ns.css-var("header-mobile-padding")}, 10px 14px);
   }
 
-  .tbf-header__nav,
-  [data-tbf-header-nav] {
+  #{ns.element-class("header", "nav")},
+  #{ns.data("header-nav")} {
     display: none;
   }
 
-  .tbf-shell-header-toggle-group {
+  #{ns.class("shell-header-toggle-group")} {
     display: inline-flex;
   }
 
-  .tbf-header__actions,
-  [data-tbf-header-actions] {
+  #{ns.element-class("header", "actions")},
+  #{ns.data("header-actions")} {
     display: none;
   }
 }