@burdenoff/fe-libs 2026.930.3 → 2026.930.4

package/dist/chrome/globalSearch/AdvancedFiltersPanel.js

@@ -12,7 +12,7 @@ function n({ filters: n }) {
 				}), /* @__PURE__ */ t("select", {
 					value: n.sortBy,
 					onChange: (e) => n.setSortBy(e.target.value),
-					className: "flex-1 h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong transition-colors",
+					className: "flex-1 h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong scheme-normal dark:scheme-dark transition-colors [&_option]:bg-bg-surface [&_option]:text-text-primary",
 					children: [
 						/* @__PURE__ */ e("option", {
 							value: "SCORE_DESC",
@@ -207,7 +207,7 @@ function n({ filters: n }) {
 						"aria-label": "Metadata operator filter",
 						value: n.metadataOperator,
 						onChange: (e) => n.setMetadataOperator(e.target.value),
-						className: "h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong transition-colors",
+						className: "h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong scheme-normal dark:scheme-dark transition-colors [&_option]:bg-bg-surface [&_option]:text-text-primary",
 						children: [
 							/* @__PURE__ */ e("option", {
 								value: "EQUALS",

package/dist/chrome/notificationCenter/NotificationFilters.js

@@ -24,7 +24,7 @@ var a = ({ filterTab: a, typeFilter: o, appFilter: s, sortBy: c, appNames: l, on
 			}, e.value)), /* @__PURE__ */ i("select", {
 				value: c,
 				onChange: (e) => p(e.target.value),
-				className: "ml-auto text-[11px] text-text-secondary bg-transparent border-none cursor-pointer focus:outline-none",
+				className: "ml-auto text-[11px] text-text-secondary bg-transparent border-none cursor-pointer scheme-normal dark:scheme-dark focus:outline-none [&_option]:bg-bg-surface [&_option]:text-text-primary",
 				"aria-label": "Sort notifications",
 				children: [
 					/* @__PURE__ */ r("option", {

package/dist/credentials/AuthMethodSelector.js

@@ -22,7 +22,7 @@ var i = ({ method: i }) => i ? /* @__PURE__ */ r(t, { children: [i.description &
 		value: u ? u.key : "",
 		onChange: (e) => a(e.target.value),
 		disabled: o,
-		className: c ? "max-w-[16rem] truncate rounded-md border border-border-subtle bg-bg-surface px-2.5 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary disabled:opacity-50" : "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary disabled:opacity-50",
+		className: c ? "max-w-[16rem] truncate rounded-md border border-border-subtle bg-bg-surface px-2.5 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary disabled:opacity-50 scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary" : "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary disabled:opacity-50 scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary",
 		children: [!u && /* @__PURE__ */ n("option", {
 			value: "",
 			disabled: !0,

package/dist/credentials/SchemaForm.js

@@ -130,7 +130,7 @@ var f = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("-
 			value: String(u ?? c.default ?? ""),
 			onChange: (e) => m(e.target.value),
 			disabled: p,
-			className: C,
+			className: `${C} scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary`,
 			children: [/* @__PURE__ */ a("option", {
 				value: "",
 				children: ["Select ", y.toLowerCase()]

package/dist/shared/assistant/ui/AssistantLanguageMenu.js

@@ -39,7 +39,7 @@ var l = "__match__", u = () => {
 						let t = e.target.value;
 						p(t === "" ? null : t);
 					},
-					className: "absolute inset-0 cursor-pointer opacity-0",
+					className: "absolute inset-0 cursor-pointer opacity-0 scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary",
 					children: [/* @__PURE__ */ s("option", {
 						value: "",
 						children: u("voice.languageFollowApp", "Same as interface")
@@ -69,7 +69,7 @@ var l = "__match__", u = () => {
 						let t = e.target.value;
 						h(t === l ? null : t);
 					},
-					className: "absolute inset-0 cursor-pointer opacity-0",
+					className: "absolute inset-0 cursor-pointer opacity-0 scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary",
 					children: [/* @__PURE__ */ c("option", {
 						value: l,
 						children: [

package/dist/shared/assistant/ui/AssistantReplyLanguageSelector.js

@@ -37,7 +37,7 @@ var l = "__match__", u = () => {
 					let t = e.target.value;
 					m(t === l ? null : t);
 				},
-				className: "absolute inset-0 cursor-pointer opacity-0",
+				className: "absolute inset-0 cursor-pointer opacity-0 scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary",
 				children: [/* @__PURE__ */ c("option", {
 					value: l,
 					children: [

package/dist/shared/assistant/ui/composer/AssistantLanguageSelector.js

@@ -26,7 +26,7 @@ var a = ({ current: a, selected: s, onChange: c, disabled: l = !1 }) => {
 					let t = e.target.value;
 					c(t === "__app__" ? null : t);
 				},
-				className: "absolute inset-0 cursor-pointer opacity-0 disabled:cursor-not-allowed",
+				className: "absolute inset-0 cursor-pointer opacity-0 scheme-normal dark:scheme-dark disabled:cursor-not-allowed [&_option]:bg-bg-surface [&_option]:text-text-primary",
 				children: [/* @__PURE__ */ r("option", {
 					value: o,
 					children: u("voice.languageFollowApp", "Same as interface")

package/dist/shared/assistant/ui/composer/AssistantVoiceSelector.js

@@ -22,7 +22,7 @@ var a = ({ disabled: a = !1 }) => {
 				let t = e.target.value;
 				d(t === "__auto__" ? null : t);
 			},
-			className: "absolute inset-0 cursor-pointer opacity-0 disabled:cursor-not-allowed",
+			className: "absolute inset-0 cursor-pointer opacity-0 scheme-normal dark:scheme-dark disabled:cursor-not-allowed [&_option]:bg-bg-surface [&_option]:text-text-primary",
 			children: [/* @__PURE__ */ r("option", {
 				value: o,
 				children: l ? `${s("voice.voiceAuto", "Best available")} (${l})` : s("voice.voiceAuto", "Best available")

package/dist/shared/pages/searchPage/FiltersPanel.js

@@ -281,7 +281,7 @@ function i({ entityTypeOptions: i, selectedTypes: a, excludedTypes: o, available
 									"aria-label": `Metadata operator ${i + 1}`,
 									value: e.operator,
 									onChange: (e) => U(i, { operator: e.target.value }),
-									className: "h-9 px-3 text-sm rounded-md border border-border-default bg-bg-canvas text-text-primary focus:outline-none focus:ring-2 focus:ring-primary-default",
+									className: "h-9 px-3 text-sm rounded-md border border-border-default bg-bg-canvas text-text-primary scheme-normal dark:scheme-dark focus:outline-none focus:ring-2 focus:ring-primary-default [&_option]:bg-bg-surface [&_option]:text-text-primary",
 									children: [
 										/* @__PURE__ */ n("option", {
 											value: "EQUALS",

package/dist/shared/pages/searchPage/SearchToolbar.js

@@ -25,7 +25,7 @@ function c({ searchMode: c, sortBy: l, showFilters: u, activeFilterCount: d, onS
 				children: [/* @__PURE__ */ o(n, { className: "size-4 text-text-tertiary" }), /* @__PURE__ */ o("select", {
 					value: l,
 					onChange: (e) => p(e.target.value),
-					className: "h-9 px-3 text-sm rounded-md border border-border-default bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary-default",
+					className: "h-9 px-3 text-sm rounded-md border border-border-default bg-bg-surface text-text-primary scheme-normal dark:scheme-dark focus:outline-none focus:ring-2 focus:ring-primary-default [&_option]:bg-bg-surface [&_option]:text-text-primary",
 					children: t.map((e) => /* @__PURE__ */ o("option", {
 						value: e.value,
 						children: e.label

package/dist/sharing/ShareDialog.js

@@ -189,7 +189,7 @@ var C = ({ resource: C, controller: w, open: T, onOpenChange: ae, workspaceId: E
 										value: V,
 										onChange: (e) => H(e.target.value),
 										"data-testid": "share-user-expiry",
-										className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+										className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary scheme-normal dark:scheme-dark focus:outline-none focus:ring-2 focus:ring-action-primary-bg [&_option]:bg-bg-surface [&_option]:text-text-primary",
 										children: b.map((e) => /* @__PURE__ */ v("option", {
 											value: e.value,
 											children: e.label
@@ -268,7 +268,7 @@ var C = ({ resource: C, controller: w, open: T, onOpenChange: ae, workspaceId: E
 										value: q,
 										onChange: (e) => oe(e.target.value),
 										"data-testid": "share-link-expiry",
-										className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+										className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary scheme-normal dark:scheme-dark focus:outline-none focus:ring-2 focus:ring-action-primary-bg [&_option]:bg-bg-surface [&_option]:text-text-primary",
 										children: b.map((e) => /* @__PURE__ */ v("option", {
 											value: e.value,
 											children: e.label

package/dist/storage/StorageFolderPicker.js

@@ -70,7 +70,7 @@ function c({ workspaceId: i, value: c, onChange: l, operations: u, initialParent
 				onChange: (e) => {
 					l(m.find((t) => t.id === e.target.value) ?? null);
 				},
-				className: "w-full rounded-md border border-border-subtle bg-bg-surface px-2 py-1.5 text-sm",
+				className: "w-full rounded-md border border-border-subtle bg-bg-surface text-text-primary px-2 py-1.5 text-sm scheme-normal dark:scheme-dark [&_option]:bg-bg-surface [&_option]:text-text-primary",
 				"aria-label": "Folder",
 				children: [/* @__PURE__ */ n("option", {
 					value: "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/fe-libs",
-  "version": "2026.930.3",
+  "version": "2026.930.4",
   "description": "Burdenoff frontend primitives and domain libraries",
   "type": "module",
   "bin": {

package/src/shared/tokens/build/semantic.css

@@ -200,6 +200,40 @@
   --color-status-warning-subtle: var(--color-status-warning-bgSubtle);
   --color-status-info: var(--color-status-info-bg);
   --color-status-info-subtle: var(--color-status-info-bgSubtle);
+
+  /* BOFF-7280: shadcn-default token aliases.
+   * Many MFE components use shadcn/ui default class names
+   * (bg-popover, bg-background, text-muted-foreground, ring-ring, etc.)
+   * that are NOT defined in the Boff UI design system. Without these
+   * aliases, those classes resolve to undefined CSS variables, which
+   * renders as a transparent / browser-default panel in Dark Mode.
+   * Map every shadcn-default token used by microfe-* dropdowns to the
+   * corresponding semantic value so the rendered colors stay consistent
+   * with the rest of the FluidGrids UI. Pixel-level duplicates of the
+   * semantic tokens, no new tokens, no new Tailwind utilities. */
+  --color-background: var(--color-bg-surface);
+  --color-foreground: var(--color-text-primary);
+  --color-muted: var(--color-bg-sunken);
+  --color-muted-foreground: var(--color-text-muted);
+  --color-accent: var(--color-bg-accentSubtle);
+  --color-accent-foreground: var(--color-text-primary);
+  --color-card: var(--color-bg-surface);
+  --color-card-foreground: var(--color-text-primary);
+  --color-secondary: var(--color-bg-sunken);
+  --color-secondary-foreground: var(--color-text-primary);
+  --color-popover: var(--color-bg-surface);
+  --color-popover-foreground: var(--color-text-primary);
+  --color-input: var(--color-border-default);
+  --color-ring: var(--color-action-primary-bg);
+  --color-destructive: var(--color-status-error-bg);
+  --color-destructive-foreground: var(--color-status-error-text);
+  --color-primary: var(--color-action-primary-bg);
+  --color-primary-foreground: var(--color-action-primary-text);
+  --color-background-primary: var(--color-bg-canvas);
+  --color-background-secondary: var(--color-bg-sunken);
+  --color-background-tertiary: var(--color-bg-sunken);
+  --color-border-secondary: var(--color-border-subtle);
+  --color-focus-ring: var(--color-action-primary-bg);
 }
 
 /* Semantic Tokens - Dark Mode - Auto-generated */
@@ -344,6 +378,37 @@
   --color-status-warning-subtle: var(--color-status-warning-bgSubtle);
   --color-status-info: var(--color-status-info-bg);
   --color-status-info-subtle: var(--color-status-info-bgSubtle);
+
+  /* BOFF-7280: shadcn-default token aliases — DARK MODE values.
+   * Same set as the light-mode block above, mapped to the dark-mode
+   * equivalents of each semantic token. Required because the consuming
+   * MFEs write class names like \`bg-popover\` / \`ring-ring\` directly
+   * and Tailwind v4's default theme supplies those names with hard-coded
+   * OKLCH values that disagree with the FluidGrids palette. Pinning
+   * them here keeps every dropdown in the app on-brand without forcing
+   * MFE-by-MFE component rewrites. */
+  --color-background: var(--color-bg-surface);
+  --color-foreground: var(--color-text-primary);
+  --color-muted: var(--color-bg-sunken);
+  --color-muted-foreground: var(--color-text-muted);
+  --color-accent: var(--color-bg-accentSubtle);
+  --color-accent-foreground: var(--color-text-primary);
+  --color-card: var(--color-bg-surface);
+  --color-card-foreground: var(--color-text-primary);
+  --color-secondary: var(--color-bg-sunken);
+  --color-secondary-foreground: var(--color-text-primary);
+  --color-popover: var(--color-bg-elevated);
+  --color-popover-foreground: var(--color-text-primary);
+  --color-input: var(--color-border-default);
+  --color-ring: var(--color-action-primary-bg);
+  --color-destructive: var(--color-status-error-bg);
+  --color-destructive-foreground: var(--color-status-error-text);
+  --color-primary: var(--color-action-primary-bg);
+  --color-primary-foreground: var(--color-action-primary-text);
+  --color-background-primary: var(--color-bg-canvas);
+  --color-background-secondary: var(--color-bg-sunken);
+  --color-background-tertiary: var(--color-bg-sunken);
+  --color-border-secondary: var(--color-border-subtle);
 }
 
 /* Compact Density - Auto-generated */
@@ -376,6 +441,71 @@
   --size-controlHeight-lg: 52px;
 }
 
+/* BOFF-7280: UNLAYERED shadcn-default token aliases (FINAL OVERRIDE).
+ *
+ * Declared at the TOP LEVEL (no @layer wrapper) so they win the cascade
+ * over BOTH Tailwind v4's built-in @layer theme defaults (e.g.
+ * `--color-popover: 222.2 84% 4.9%` from the shadcn palette, which
+ * otherwise bleeds into every microfe-* dropdown panel) AND any
+ * same-token aliases that landed in @layer semantic.
+ *
+ * Unlayered CSS wins any layered CSS per the CSS Cascade Level 5 spec,
+ * so these two blocks — one for the default :root and one for the
+ * dark-mode selectors — guarantee every shadcn-default class used by
+ * FluidGrids MFEs (microfe-rbac, microfe-files, microfe-tags,
+ * microfe-conversations, etc.) renders with the FluidGrids palette in
+ * BOTH light and dark mode. */
+:root {
+  --color-background: var(--color-bg-surface);
+  --color-foreground: var(--color-text-primary);
+  --color-muted: var(--color-bg-sunken);
+  --color-muted-foreground: var(--color-text-muted);
+  --color-accent: var(--color-bg-accentSubtle);
+  --color-accent-foreground: var(--color-text-primary);
+  --color-card: var(--color-bg-surface);
+  --color-card-foreground: var(--color-text-primary);
+  --color-secondary: var(--color-bg-sunken);
+  --color-secondary-foreground: var(--color-text-primary);
+  --color-popover: var(--color-bg-surface);
+  --color-popover-foreground: var(--color-text-primary);
+  --color-input: var(--color-border-default);
+  --color-ring: var(--color-action-primary-bg);
+  --color-destructive: var(--color-status-error-bg);
+  --color-destructive-foreground: var(--color-status-error-text);
+  --color-primary: var(--color-action-primary-bg);
+  --color-primary-foreground: var(--color-action-primary-text);
+  --color-background-primary: var(--color-bg-canvas);
+  --color-background-secondary: var(--color-bg-sunken);
+  --color-background-tertiary: var(--color-bg-sunken);
+  --color-border-secondary: var(--color-border-subtle);
+  --color-focus-ring: var(--color-action-primary-bg);
+}
+[data-theme="dark"], .dark, :root.dark {
+  --color-background: var(--color-bg-surface);
+  --color-foreground: var(--color-text-primary);
+  --color-muted: var(--color-bg-sunken);
+  --color-muted-foreground: var(--color-text-muted);
+  --color-accent: var(--color-bg-accentSubtle);
+  --color-accent-foreground: var(--color-text-primary);
+  --color-card: var(--color-bg-elevated);
+  --color-card-foreground: var(--color-text-primary);
+  --color-secondary: var(--color-bg-sunken);
+  --color-secondary-foreground: var(--color-text-primary);
+  --color-popover: var(--color-bg-elevated);
+  --color-popover-foreground: var(--color-text-primary);
+  --color-input: var(--color-border-default);
+  --color-ring: var(--color-action-primary-bg);
+  --color-destructive: var(--color-status-error-bg);
+  --color-destructive-foreground: var(--color-status-error-text);
+  --color-primary: var(--color-action-primary-bg);
+  --color-primary-foreground: var(--color-action-primary-text);
+  --color-background-primary: var(--color-bg-canvas);
+  --color-background-secondary: var(--color-bg-sunken);
+  --color-background-tertiary: var(--color-bg-sunken);
+  --color-border-secondary: var(--color-border-subtle);
+  --color-focus-ring: var(--color-action-primary-bg);
+}
+
 /* Large Typography Scale - Auto-generated */
 [data-typography="large"] {
   --font-size-body-sm: 16px;
@@ -397,3 +527,4 @@
   --font-size-heading-h3: 20px;
   --font-size-heading-h4: 18px;
 }
+