@bitforgehq/ui 0.3.2 → 0.4.0

package/ai/reference/provide-bf-labels.md

@@ -8,7 +8,7 @@ Replaces built-in strings, merged over the parent's (validation merged key by ke
 out or set to `undefined` keeps the parent's string. In `ApplicationConfig.providers` it covers
 every string. In a component's `providers` it covers that sub-tree's widgets and form controls
 (`loading`, `dismiss`, `tabBar`, `tabBadge`, `back`, `refreshing`, `tableSelectAll`, `tableSortBy`,
-`tableSortAscending`, `tableSortDescending`, `theme`, `themeSystem`, `themeLight`, `themeDark`,
+`tableSortNone`, `tableSortAscending`, `tableSortDescending`, `theme`, `themeSystem`, `themeLight`, `themeDark`,
 `breadcrumb`, `breadcrumbExpand`, `navigation`, `navBadge`, `sidebarCollapse`, `sidebarExpand`,
 `skipToContent`, `pagination`, `previousPage`, `nextPage`, `pageOf`, `goToPage`, `tabGroup`,
 `calendarPreviousMonth`, `calendarNextMonth`, `calendarChooseMonth`, `calendarChooseYear`,
@@ -17,7 +17,7 @@ every string. In a component's `providers` it covers that sub-tree's widgets and
 `dateInputUnavailable`, `timeInputHour`, `timeInputMinute`, `timeInputSecond`,
 `timeInputDayPeriod`, `timeInputOpenList`, `timeInputInvalid`, `timeInputMin`, `timeInputMax`,
 `chart`, `chartLegend`, `chartValues`, `chartShowData`, `chartHideData`, `chartCategory`,
-`chartValue`, `chartEmpty`, `chartError`, `validation`); the overlay services (`ok`, `cancel`,
+`chartValue`, `chartEmpty`, `chartError`, `listItemUnread`, `validation`); the overlay services (`ok`, `cancel`,
 `actions`, `sheet`, `modal`, `close`, `expand`, `collapse`, `sheetPosition`, `dialog`,
 `notifications`) are root singletons and pick it up only when the caller passes its injector:
 `open(…, { injector: inject(Injector) })`.

package/dark-ink.css

@@ -0,0 +1,124 @@
+/*
+ * @bitforgehq/ui — Ink, an opt-in dark preset: near-black surfaces one small step apart,
+ * see-through status tints, 1 px edges instead of heavy shadows, off-white text.
+ *
+ * Usage: import it AFTER theme.css. It redefines tokens under .dark only, so light mode is
+ * untouched, and it wins over theme.css's own .dark block by order:
+ *   @import 'tailwindcss';
+ *   @import '@bitforgehq/ui/theme.css';
+ *   @import '@bitforgehq/ui/dark-ink.css';
+ *
+ * It sets every colour and shadow token theme.css's .dark block sets except the brand set (the
+ * primary family below), so the app's brand primary stays: the default dark indigo, or the
+ * app's own .dark brand override placed after this import. For the monochrome look of the
+ * mockups, paste this optional block after the import as well:
+ *
+ *   .dark {
+ *     --color-primary: #ececee;
+ *     --color-primary-hover: #dcdce0;
+ *     --color-primary-pressed: #cdcdd2;
+ *     --color-primary-soft: rgb(255 255 255 / 0.08);
+ *     --color-primary-soft-hover: rgb(255 255 255 / 0.11);
+ *     --color-primary-soft-pressed: rgb(255 255 255 / 0.14);
+ *     --color-primary-strong: #ffffff;
+ *     --color-on-primary: #0b0c0e;
+ *     --color-primary-text: #e8e9ec;
+ *   }
+ *
+ * Every pair is contrast-checked in theme.spec.ts, alpha tints composited over the surface they
+ * sit on (bg, surface, surface-muted and surface-sunken), with the default dark brand and with
+ * the monochrome block.
+ */
+
+/* Tailwind inlines a shadow token's value into the shadow-* utilities when it compiles them, so
+   redefining --shadow-* under .dark alone changes nothing that the utilities draw. These read
+   the dark value through --bf-shadow-*, which only .dark below sets; in light mode the fallback
+   is theme.css's own light value, so light mode compiles to the same shadows. */
+@theme {
+  --shadow-raised: var(
+    --bf-shadow-raised,
+    0 1px 2px rgb(31 42 34 / 0.06),
+    0 8px 24px rgb(31 42 34 / 0.08)
+  );
+  --shadow-floating: var(--bf-shadow-floating, 0 10px 30px rgb(31 42 34 / 0.18));
+  --shadow-segment: var(--bf-shadow-segment, 0 1px 3px rgb(31 42 34 / 0.14));
+}
+
+.dark {
+  /* Surfaces: the page and cards near black, one step apart. */
+  --color-bg: #0b0c0e;
+  --color-surface: #121316;
+  --color-surface-muted: #191a1e; /* hover */
+  --color-surface-sunken: #0e0f11;
+  --color-surface-pressed: #202126;
+  --color-selected: rgb(255 255 255 / 0.06);
+
+  /* Status: the colour as text, its soft tint the same colour at 12 % (a see-through tint that
+     sits on any surface, >= 5:1 under its text on bg, surface, surface-muted and surface-sunken). */
+  --color-success: #4cc38a;
+  --color-success-soft: rgb(76 195 138 / 0.12);
+  --color-warning: #e5b454;
+  --color-warning-soft: rgb(229 180 84 / 0.12);
+  --color-danger: #f2706a;
+  /* Opaque (the danger colour at 13 % over surface), not see-through: the danger button's hover
+     and pressed states write danger-soft as text on the danger fill, where a tint would vanish. */
+  --color-danger-soft: #2f1f21;
+  --color-danger-pressed: #f59994;
+  --color-danger-border: #c9372c;
+  --color-info: #5eb1ef;
+  --color-info-soft: rgb(94 177 239 / 0.12);
+  /* Strong fills (>= 3:1 on bg, surface and surface-sunken), text on them >= 4.5:1. */
+  --color-neutral-strong: #9a9da5;
+  --color-on-neutral-strong: #0b0c0e; /* 7.2:1 */
+  --color-success-strong: #26804f;
+  --color-on-success-strong: #ffffff; /* 4.9:1 */
+  --color-warning-strong: #d99a3c;
+  --color-on-warning-strong: #1a1206; /* 7.6:1 */
+  --color-danger-strong: #c9372c;
+  --color-on-danger-strong: #ffffff; /* 5.2:1 */
+  --color-info-strong: #2a7aa8;
+  --color-on-info-strong: #ffffff; /* 4.7:1 */
+  --color-tooltip: #e8e9ec;
+  --color-on-tooltip: #121316; /* 15.3:1 on tooltip */
+
+  /* Charts: the default dark series (each >= 5:1 on bg and surface here, adjacent pairs distinct
+     under colour vision deficiency); grid lines as faint as the border, the axis >= 3:1. */
+  --color-chart-1: #3e9e66;
+  --color-chart-2: #7479ee;
+  --color-chart-3: #d8692f;
+  --color-chart-4: #1f9cb8;
+  --color-chart-5: #b08a1c;
+  --color-chart-6: #dc5893;
+  --color-chart-7: #a072e6;
+  --color-chart-8: #7f9c2c;
+  --color-chart-grid: #1f2024;
+  --color-chart-axis: #64676e;
+  --color-neutral: #a9adb5;
+  --color-neutral-soft: rgb(255 255 255 / 0.06);
+
+  /* Lines: border-strong and control-off >= 3:1 on bg, surface, surface-muted, surface-sunken. */
+  --color-border: #1f2024;
+  --color-border-strong: #64676e;
+  --color-divider: #18191c;
+  --color-control-off: #64676e;
+  --color-scrim: #000000;
+
+  /* Text: off-white, never pure white; muted >= 4.5:1 on every surface and on primary-soft. */
+  --color-text: #e8e9ec;
+  --color-text-secondary: #b4b7bd;
+  --color-text-muted: #90949b;
+  --color-text-subtle: #63676f; /* icons and chevrons only (>= 3:1), never text */
+  --color-text-disabled: #4a4d53;
+  --color-text-done: #6e727a;
+
+  /* A neutral focus ring (>= 5:1 on bg and surface), so it fits any brand. */
+  --color-ring: #8b8f97;
+
+  /* Edges instead of shadows: a 1 px white ring inside the raised and floating shadows. */
+  --shadow-raised: 0 0 0 1px rgb(255 255 255 / 0.06), 0 1px 2px rgb(0 0 0 / 0.6);
+  --shadow-floating: 0 0 0 1px rgb(255 255 255 / 0.08), 0 16px 48px rgb(0 0 0 / 0.7);
+  --shadow-segment: 0 1px 3px rgb(0 0 0 / 0.5);
+  --bf-shadow-raised: var(--shadow-raised);
+  --bf-shadow-floating: var(--shadow-floating);
+  --bf-shadow-segment: var(--shadow-segment);
+}

package/fesm2022/bitforgehq-ui-mobile.mjs

@@ -2959,13 +2959,22 @@ var BfHeaderComponent = class BfHeaderComponent {
 			};
 			measure();
 			if (typeof ResizeObserver !== "undefined") {
-				const observer = new ResizeObserver(measure);
+				let frame = null;
+				const observer = new ResizeObserver(() => {
+					frame ??= requestAnimationFrame(() => {
+						frame = null;
+						measure();
+					});
+				});
 				observer.observe(toolbar);
 				observer.observe(start);
 				observer.observe(end);
 				for (const element of [title, sizer]) if (element) observer.observe(element);
 				if (block) observer.observe(block);
-				onCleanup(() => observer.disconnect());
+				onCleanup(() => {
+					observer.disconnect();
+					if (frame !== null) cancelAnimationFrame(frame);
+				});
 			}
 		});
 		let destroyed = false;
@@ -5157,7 +5166,8 @@ var BfActionSheetComponent = class BfActionSheetComponent {
 					"interactive",
 					"chevron",
 					"disabled",
-					"truncate"
+					"truncate",
+					"unread"
 				],
 				outputs: ["clicked"]
 			},