@trebired/frontend 1.0.0 → 1.1.0

package/dist/src/flash/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/flash/toast.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAe,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvE,iBAAS,YAAY,CAAC,EAAE,EAAE,MAAM,WAS/B;AAED,iBAAS,aAAa,CACpB,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,OAAO,EAChB,WAAW,GAAE,OAAY,EACzB,OAAO,GAAE,YAAiB;;;;EAe3B;AAwBD,iBAAS,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,GAAE,SAAkB,EAAE,WAAW,SAAK,EAAE,OAAO,KAAK;;;;EAE5F;AAED,iBAAS,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,SAAK,EAAE,OAAO,KAAK;;;;EAKrF;AAED,iBAAS,SAAS,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,SAAK,EAAE,OAAO,KAAK;;;;EAMnF;AAED,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/flash/toast.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAe,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvE,iBAAS,YAAY,CAAC,EAAE,EAAE,MAAM,WAS/B;AAED,iBAAS,aAAa,CACpB,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,OAAO,EAChB,WAAW,GAAE,OAAY,EACzB,OAAO,GAAE,YAAiB;;;;;;EAkB3B;AAwBD,iBAAS,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,GAAE,SAAkB,EAAE,WAAW,SAAK,EAAE,OAAO,KAAK;;;;;;EAE5F;AAED,iBAAS,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,SAAK,EAAE,OAAO,KAAK;;;;;;EAKrF;AAED,iBAAS,SAAS,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,SAAK,EAAE,OAAO,KAAK;;;;;;EAMnF;AAED,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,GAAG,SAAS,EAChD,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,OAAO,EAChB,WAAW,SAAK,OAUjB;AASD,OAAO,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,WAAW,GACZ,CAAC"}

package/dist/src/flash/toast.js

@@ -8,7 +8,7 @@ function dismissFlash(id) {
     const safeId = String(id || "").trim();
     if (!safeId)
         return false;
-    const target = stack.querySelector(`[data-tbf-flash-id="${safeId}"]`);
+    const target = stack.querySelector(attrSelector("data-tbf-flash-id", safeId));
     if (!target)
         return false;
     hideFlashElement(stack, target);
@@ -19,15 +19,18 @@ function showFlashImpl(type, message, description = "", options = {}) {
     if (!stack)
         return null;
     const id = String(options.id || "").trim() || flashId();
-    const existing = stack.querySelector(`[data-tbf-flash-id="${id}"]`);
+    const existing = stack.querySelector(attrSelector("data-tbf-flash-id", id));
     if (existing && options.update === true)
         existing.remove();
     const controls = createFlashElement(type, message, description, id, options);
     stack.appendChild(controls.element);
     startFlashLifetime(stack, controls, message, description, options);
+    const dismiss = () => dismissFlash(id);
     return {
-        dismiss: () => dismissFlash(id),
+        dismiss,
+        el: controls.element,
         element: controls.element,
+        hide: dismiss,
         id,
     };
 }
@@ -63,5 +66,21 @@ function liveFlash(type, message, description = "", options = {}) {
         update: true,
     });
 }
-export { dismissFlash, liveFlash, showFlash, showFlashImpl, stickyFlash };
+function showFlashMessage(flashApi, kind, message, description = "") {
+    const type = normalizeFlashType(kind);
+    if (flashApi && typeof flashApi[type] === "function") {
+        return flashApi[type](message, description);
+    }
+    if (flashApi && typeof flashApi === "function") {
+        return flashApi(message, type, description);
+    }
+    return showFlashImpl(type, message, description);
+}
+function attrSelector(name, value) {
+    const escaped = typeof CSS !== "undefined" && typeof CSS.escape === "function"
+        ? CSS.escape(value)
+        : value.replace(/\\/gu, "\\\\").replace(/"/gu, "\\\"");
+    return `[${name}="${escaped}"]`;
+}
+export { dismissFlash, liveFlash, showFlash, showFlashImpl, showFlashMessage, stickyFlash, };
 //# sourceMappingURL=toast.js.map

package/dist/src/flash/toast.js.map

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

package/dist/src/flash/types.d.ts

@@ -1,29 +1,65 @@
 type FlashType = "error" | "info" | "success" | "warn";
+type FlashStackPriority = "high" | "low" | "normal";
+type FlashProgressTone = "blue" | "cyan" | "gray" | "green" | "indigo" | "orange" | "red" | "ruby" | "yellow" | (string & {});
 type FlashOptions = {
     description?: string;
     id?: string;
-    stackPriority?: "high" | "low" | "normal";
+    progressTone?: FlashProgressTone;
+    progressType?: FlashProgressTone;
+    stackPriority?: FlashStackPriority;
     sticky?: boolean;
     update?: boolean;
 };
 type FlashHandle = {
     dismiss: () => boolean;
+    el: HTMLElement;
     element: HTMLElement;
+    hide: () => boolean;
     id: string;
 };
+type ConfirmVariant = "archive" | "delete" | "drop";
+type ConfirmationAttrsInput = {
+    confirmationText?: unknown;
+    mode?: unknown;
+    subject?: unknown;
+    target?: unknown;
+    variant?: unknown;
+};
 type ConfirmOptions = {
     cancelText?: string;
+    confirmButtonText?: string;
+    confirmMode?: "classic" | "text";
     confirmText?: string;
+    confirmType?: "classic" | "text";
     confirmationText?: string;
     mode?: "classic" | "text";
     placeholder?: string;
+    progressTone?: FlashProgressTone;
+    progressType?: FlashProgressTone;
+    subject?: string;
+    target?: string;
     type?: FlashType;
+    variant?: ConfirmVariant | (string & {});
+};
+type ConfirmModel = {
+    cancelText: string;
+    confirmButtonText: string;
+    confirmMode: "classic" | "text";
+    confirmationText: string;
+    description: string;
+    isTextConfirm: boolean;
+    placeholder: string;
+    progressTone: string;
+    title: string;
+    type: FlashType;
 };
 type PromptOptions = {
     cancelText?: string;
     placeholder?: string;
+    progressTone?: FlashProgressTone;
+    progressType?: FlashProgressTone;
     submitText?: string;
     value?: string;
 };
-export type { ConfirmOptions, FlashHandle, FlashOptions, FlashType, PromptOptions, };
+export type { ConfirmationAttrsInput, ConfirmModel, ConfirmOptions, ConfirmVariant, FlashHandle, FlashOptions, FlashProgressTone, FlashStackPriority, FlashType, PromptOptions, };
 //# sourceMappingURL=types.d.ts.map

package/dist/src/flash/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/flash/types.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AACvD,KAAK,YAAY,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AACF,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC;IACvB,OAAO,EAAE,WAAW,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AACF,KAAK,cAAc,GAAG;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AACF,KAAK,aAAa,GAAG;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,YAAY,EACV,cAAc,EACd,WAAW,EACX,YAAY,EACZ,SAAS,EACT,aAAa,GACd,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/flash/types.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AACvD,KAAK,kBAAkB,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AACpD,KAAK,iBAAiB,GAClB,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,GACR,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAClB,KAAK,YAAY,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AACF,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC;IACvB,EAAE,EAAE,WAAW,CAAC;IAChB,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,MAAM,OAAO,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AACF,KAAK,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AACpD,KAAK,sBAAsB,GAAG;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AACF,KAAK,cAAc,GAAG;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,cAAc,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CAC1C,CAAC;AACF,KAAK,YAAY,GAAG;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AACF,KAAK,aAAa,GAAG;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,YAAY,EACV,sBAAsB,EACtB,YAAY,EACZ,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,SAAS,EACT,aAAa,GACd,CAAC"}

package/dist/styles/tokens.scss

@@ -1,22 +1,74 @@
 :root {
+  --border-width: 1px;
+  --outline-width: 2px;
+  --icon-gap: 5px;
+  --header-height: 80px;
+  --viewport-scrollbar-gap-inline-end: 0px;
+  --viewport-scrollbar-gap-block-end: 0px;
+  --transition-1: 120ms;
+  --transition-2: 180ms;
+  --transition-3: 240ms;
+  --transition-4: 320ms;
+  --theme-switch-duration: var(--transition-2, 180ms);
+  --theme-switch-easing: ease;
+  --height-input: var(--height-xs4, 35px);
+  --click-brightness: 0.85;
+  --brightness-1: var(--click-brightness);
+  --brightness-2: 0.75;
+  --brightness-3: 0.65;
+  --shadow-overlay-lg:
+    0 8px 24px rgba(0, 0, 0, 0.2),
+    0 2px 6px rgba(0, 0, 0, 0.08);
+  --shadow-overlay-sm:
+    0 6px 18px rgba(0, 0, 0, 0.18),
+    0 2px 4px rgba(0, 0, 0, 0.08);
+  --dot-grid:
+    var(--gray-950, #1a1a1b)
+    radial-gradient(var(--gray-700, #303031) 2px, transparent 0) -5px -5px / 30px 30px;
+  --z-bottom-bar: var(--z-index-xs, 900);
+  --z-header-secondary: 910;
+  --z-header-primary: 920;
+  --z-scrollbar-gutter-border: 925;
+  --z-mobile-nav: 930;
+  --z-fullscreen: var(--z-index-sm, 1000);
+  --z-modal: var(--z-index-md, 1010);
+  --z-floating-ui: var(--z-index-lg, 1020);
+  --z-tooltip: var(--z-index-xl, 1100);
   --tbf-radius: var(--radius-md, 0);
   --tbf-radius-sm: var(--radius-sm, 0);
   --tbf-border-width: var(--border-width, 1px);
-  --tbf-border: var(--border-surface-1, #000);
-  --tbf-surface: var(--surface-1, #fff);
-  --tbf-surface-muted: var(--surface-2, #fff);
-  --tbf-text: var(--text-color, #000);
-  --tbf-text-muted: var(--text-color-muted, #000);
+  --tbf-border: var(--border-surface-1, var(--gray-750, #000));
+  --tbf-surface: var(--surface-1, var(--background-surface-1, #fff));
+  --tbf-surface-muted: var(--surface-2, var(--background-surface-2, #fff));
+  --tbf-text: var(--text-color, var(--gray-100, #000));
+  --tbf-text-muted: var(--text-color-muted, var(--gray-300, #000));
   --tbf-focus: var(--focus-color, #000);
   --tbf-shadow: var(--shadow-overlay-lg, 0 0 0 1px #000);
   --tbf-overlay: color-mix(in srgb, var(--tbf-text) 48%, transparent);
   --tbf-transition-fast: var(--transition-2, 180ms);
   --tbf-transition-normal: var(--transition-3, 240ms);
-  --tbf-gap-xs: var(--space-xs, 4px);
-  --tbf-gap-sm: var(--space-sm, 8px);
-  --tbf-gap-md: var(--space-md, 12px);
-  --tbf-gap-lg: var(--space-lg, 16px);
+  --tbf-gap-xs2: var(--space-xs2, 4px);
+  --tbf-gap-xs: var(--space-xs, 8px);
+  --tbf-gap-sm: var(--space-sm, 12px);
+  --tbf-gap-md: var(--space-md, 24px);
+  --tbf-gap-lg: var(--space-lg, 40px);
+  --tbf-canvas-bg: var(--dot-grid);
   --tbf-z-layer: var(--z-layer-root, 1000);
+  --tbf-z-bottom-bar: var(--z-bottom-bar, 900);
+  --tbf-z-header: var(--z-header-primary, 920);
+  --tbf-z-secondary-header: var(--z-header-secondary, 910);
+  --tbf-z-sidebar: var(--z-index-xs, 900);
+  --tbf-z-fullscreen: var(--z-fullscreen, var(--z-index-sm, 1000));
+  --tbf-z-modal: var(--z-modal, var(--z-index-md, 1010));
+  --tbf-z-floating-ui: var(--z-floating-ui, var(--z-index-lg, 1020));
+  --tbf-z-tooltip: var(--z-tooltip, var(--z-index-xl, 1100));
   --tbf-z-progress: var(--z-progress, 99999);
   --tbf-z-confetti: var(--z-confetti, 99998);
 }
+
+:root[data-tbf-theme="light"],
+body[data-tbf-theme="light"] {
+  --dot-grid:
+    var(--gray-950, #f8f8f9)
+    radial-gradient(var(--gray-700, #dbdbdc) 2px, transparent 0) -5px -5px / 30px 30px;
+}

package/dist/styles/utils.scss

@@ -1,3 +1,198 @@
+.tbf-root,
+[data-tbf-layout-document],
+html,
+body {
+  min-width: 0;
+}
+
+[data-scrollbar-gap="y"],
+[data-scrollbar-gap="both"] {
+  scrollbar-gutter: stable;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  scroll-behavior: smooth;
+  overscroll-behavior-y: none;
+  color: var(--tbf-text, #000);
+  background-color: var(--background-page, var(--tbf-surface, #fff));
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+html[data-theme-switching="true"],
+html[data-theme-switching="true"] *,
+html[data-theme-switching="true"] *::before,
+html[data-theme-switching="true"] *::after,
+html[data-theme-switching="true"] body::after {
+  transition: none !important;
+  animation: none !important;
+}
+
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  font-family: var(--tbf-font-sans, "Inter", sans-serif);
+  line-height: var(--tbf-body-line-height, var(--lh-sm, 1.4));
+}
+
+body::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  right: var(--viewport-scrollbar-gap-inline-end, 0px);
+  bottom: 0;
+  width: var(--tbf-border-width, 1px);
+  background: var(--tbf-border, #000);
+  pointer-events: none;
+  z-index: var(--z-scrollbar-gutter-border, 925);
+}
+
+body[data-mobile-sidebar-open="true"],
+body[data-tbf-sidebar-open="true"] {
+  overflow: hidden;
+}
+
+::selection {
+  color: var(--tbf-selection-text, var(--gray-200, #fff));
+  background-color: var(--tbf-selection-bg, color-mix(in srgb, var(--gray-500, #888) 50%, transparent)) !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 !important;
+  font-family: var(--tbf-font-sans, "Inter", sans-serif);
+  font-weight: var(--tbf-heading-font-weight, 500) !important;
+  cursor: default;
+}
+
+h1 {
+  font-size: 2.25rem !important;
+}
+
+h2 {
+  font-size: 1.8rem !important;
+}
+
+h3 {
+  font-size: 1.55rem !important;
+}
+
+h4 {
+  font-size: 1.35rem !important;
+}
+
+h5 {
+  font-size: 1.15rem !important;
+}
+
+h6 {
+  font-size: 0.95rem !important;
+}
+
+@media (max-width: 640px) {
+  h1 {
+    font-size: 2rem !important;
+  }
+
+  h2 {
+    font-size: 1.65rem !important;
+  }
+
+  h3 {
+    font-size: 1.45rem !important;
+  }
+
+  h4 {
+    font-size: 1.25rem !important;
+  }
+}
+
+p {
+  font-size: 16px;
+  font-weight: 400;
+  cursor: default;
+}
+
+@media (max-width: 769px) {
+  p {
+    font-size: 15px;
+  }
+}
+
+span {
+  color: inherit;
+}
+
+hr {
+  width: 100%;
+  height: var(--tbf-border-width, 1px);
+  border: 0;
+  background-color: var(--tbf-border, #000);
+}
+
+a {
+  color: var(--tbf-link-color, var(--tbf-text, #000));
+  text-decoration: none;
+}
+
+img {
+  -webkit-user-drag: none;
+  pointer-events: auto;
+}
+
+form {
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+i {
+  font-weight: 100 !important;
+}
+
+.icon-glyph {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.icon-glyph > svg {
+  display: block;
+  width: 1em;
+  height: 1em;
+}
+
+summary {
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+ul {
+  list-style-type: none;
+}
+
 .is-hidden,
 [hidden] {
   display: none !important;
@@ -30,6 +225,9 @@
   --tbf-scroll-min-size: 6px;
   --tbf-scroll-min-track: var(--scroll-track, #fff);
   --tbf-scroll-min-thumb: var(--scroll-thumb, #000);
+  --tbf-scroll-min-thumb-hover: var(--scroll-thumb-hover, var(--tbf-scroll-min-thumb));
+  --scroll-min-horizontal-gap: 6px;
+  --scroll-min-size: var(--tbf-scroll-min-size);
 
   &::-webkit-scrollbar {
     width: var(--tbf-scroll-min-size);
@@ -44,6 +242,16 @@
     border-radius: var(--tbf-radius, 0);
     background-color: var(--tbf-scroll-min-thumb);
   }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--tbf-scroll-min-thumb-hover);
+  }
+
+  &[data-scroll-overflow-x="true"] {
+    padding-bottom: calc(
+      var(--scroll-min-padding-bottom, 0px) + var(--scroll-min-horizontal-gap)
+    );
+  }
 }
 
 .inline-row {
@@ -58,6 +266,10 @@
     max-width: 100%;
   }
 
+  &.wrap {
+    flex-wrap: wrap;
+  }
+
   &.top {
     align-items: flex-start;
   }
@@ -74,6 +286,10 @@
     }
   }
 
+  &.between {
+    justify-content: space-between;
+  }
+
   &.scroll-x {
     @extend .scroll-min;
 
@@ -84,6 +300,11 @@
     > * {
       flex: 0 0 auto;
     }
+
+    > :where(.input, input, textarea, select, [data-dropdown]) {
+      width: var(--inline-row-scroll-field-width, 18rem);
+      min-width: var(--inline-row-scroll-field-width, 18rem);
+    }
   }
 
   > .right {
@@ -100,6 +321,14 @@
   }
 }
 
+.align-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
 .column {
   display: flex;
   min-width: 0;
@@ -138,6 +367,10 @@
   }
 }
 
+.gap-xs2 {
+  gap: var(--tbf-gap-xs2);
+}
+
 .gap-xs {
   gap: var(--tbf-gap-xs);
 }
@@ -158,6 +391,10 @@
   margin-top: var(--tbf-gap-xs);
 }
 
+.mt-xs2 {
+  margin-top: var(--tbf-gap-xs2);
+}
+
 .mt-sm {
   margin-top: var(--tbf-gap-sm);
 }
@@ -174,6 +411,10 @@
   margin-bottom: var(--tbf-gap-xs);
 }
 
+.mb-xs2 {
+  margin-bottom: var(--tbf-gap-xs2);
+}
+
 .mb-sm {
   margin-bottom: var(--tbf-gap-sm);
 }
@@ -200,6 +441,23 @@
   color: var(--tbf-text-muted, #000);
 }
 
+.text-xs {
+  font-size: 12px;
+}
+
+.text-sm,
+.text-small {
+  font-size: 14px;
+}
+
+.text-md {
+  font-size: 16px;
+}
+
+.text-lg {
+  font-size: 20px;
+}
+
 .text-break {
   min-width: 0;
   max-width: 100%;
@@ -223,6 +481,10 @@
   margin-left: var(--tbf-gap-xs);
 }
 
+.ml-xs2 {
+  margin-left: var(--tbf-gap-xs2);
+}
+
 .ml-sm {
   margin-left: var(--tbf-gap-sm);
 }
@@ -239,6 +501,10 @@
   margin-right: var(--tbf-gap-xs);
 }
 
+.mr-xs2 {
+  margin-right: var(--tbf-gap-xs2);
+}
+
 .mr-sm {
   margin-right: var(--tbf-gap-sm);
 }
@@ -340,6 +606,22 @@ $tbf-hor-alignments: (
   margin-top: auto;
 }
 
+.ver-xs {
+  margin-top: var(--tbf-gap-xs2);
+}
+
+.ver-sm {
+  margin-top: var(--tbf-gap-xs);
+}
+
+.ver-md {
+  margin-top: var(--tbf-gap-sm);
+}
+
+.ver-lg {
+  margin-top: var(--tbf-gap-md);
+}
+
 .no-stretch {
   flex: 0 0 auto;
   width: auto;
@@ -390,6 +672,10 @@ $tbf-hor-alignments: (
   font-size: 14px;
 }
 
+.bg-canvas {
+  background: var(--tbf-canvas-bg, var(--dot-grid)) !important;
+}
+
 .pre-wrap {
   white-space: pre-wrap !important;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebired/frontend",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Generic browser runtime systems for Trebired frontend packages and applications.",
   "type": "module",
   "private": false,