bitboss-ui 3.0.0-beta.4 → 3.0.0-beta.8

package/dist/ai/recipes/nuxt/records-workspace.md

@@ -802,7 +802,11 @@ const statusGroup: BbDropdownItem = {
 
 // Pipeline facet: `prefill: true` resolves a picked customer's name eagerly,
 // so a chip never sits on a bare id while this group's own submenu (inside
-// the Filters menu) has never been opened.
+// the Filters menu) has never been opened. The eager flag belongs HERE, on
+// the menu's copy only — the chip derives its own copy with
+// `prefill: 'interaction'` (see FilterChip.vue), because a second dropdown
+// redeclaring `prefill: true` would fetch every seeded facet twice on page
+// load for nothing.
 const customerGroup: BbDropdownItem = {
 	key: 'customer',
 	label: 'Customer',
@@ -854,10 +858,10 @@ const menu = computed<BbDropdownItem[]>(() => [
 	     component sitting between `BbBadge` and `BbBadgeButton` breaks the
 	     badge's direct-child vnode scan (the companion must be a literal
 	     child). This IS "the chip is itself a dropdown onto the same filter
-	     group": `group` is the exact descriptor FilterRail declared, reused
-	     rather than redeclared, so this scoped picker and the Filters menu's
-	     own submenu can never drift apart. -->
-	<BbDropdown :activator="chipRef" :items="[group]" :width="220">
+	     group": `chipGroup` is derived from the exact descriptor FilterRail
+	     declared (spread, one override — never redeclared), so this scoped
+	     picker and the Filters menu's own submenu can never drift apart. -->
+	<BbDropdown :activator="chipRef" :items="[chipGroup]" :width="220">
 		<BbDropdownGroup
 			:id="groupKey"
 			:model-value="modelValue"
@@ -891,9 +895,24 @@ const emit = defineEmits<{ 'update:modelValue': [value: unknown] }>();
 
 const chipRef = useTemplateRef('chipRef');
 
+// The chip's own copy of the shared descriptor, one override: `prefill:
+// 'interaction'`. BbDropdown mounts a pipeline resolver for every group it
+// declares at its own root, independent of the panel ever opening — so if
+// this second dropdown repeated the menu's `prefill: true` verbatim, each
+// seeded pipeline facet would be fetched TWICE on page load, and the chip's
+// copy of the result would feed nothing (the label below comes from the
+// menu's resolution via context). `'interaction'` defers this copy's fetch
+// to the moment the chip's dropdown is actually opened. For static array
+// facets the override is inert — arrays resolve synchronously either way.
+const chipGroup = computed<BbDropdownItem>(() => ({
+	...props.group,
+	prefill: 'interaction',
+}));
+
 // Reads the Filters menu's already-resolved selection — no twin fetch. A
-// pipeline group needs `prefill: true` (set on `group` by FilterRail) so this
-// never sits on a bare id/value while the menu's own submenu is unopened.
+// pipeline group needs `prefill: true` (set on the MENU's copy of `group` by
+// FilterRail) so this never sits on a bare id/value while the menu's own
+// submenu is unopened.
 const dropdownFilters = useBbDropdownContext('invoice-filters');
 const chipText = computed(() => {
 	const options =

package/dist/ai/recipes/vue/layout-scaffold.md

@@ -648,7 +648,11 @@ paints a selected row but opens nothing is a dead affordance.
 
 `.plain-link`, `.table-flush` and the row tints are project CSS by design (the
 library ships no such classes), but they are the _same_ project CSS on every
-workspace page. Author them **once**, next to the layout, and import that file
+workspace page. (`.table-flush`'s edge-inset rules address the table through
+its grid containers — `> .bb-table__table > .bb-table__body > [role='row'] >
+:first-child` — never through `table`/`tbody`/`tr`/`td`, which the table no
+longer renders; the canonical block is in the BbTable guide § Styling hooks.)
+Author them **once**, next to the layout, and import that file
 from the app entry — not per page, and never copy-pasted into a page's
 `<style scoped>`, which is how three pages end up with three underline colours.
 

package/dist/ai/recipes/vue/records-workspace.md

@@ -735,7 +735,11 @@ const statusGroup: BbDropdownItem = {
 
 // Pipeline facet: `prefill: true` resolves a picked customer's name eagerly,
 // so a chip never sits on a bare id while this group's own submenu (inside
-// the Filters menu) has never been opened.
+// the Filters menu) has never been opened. The eager flag belongs HERE, on
+// the menu's copy only — the chip derives its own copy with
+// `prefill: 'interaction'` (see FilterChip.vue), because a second dropdown
+// redeclaring `prefill: true` would fetch every seeded facet twice on page
+// load for nothing.
 const customerGroup: BbDropdownItem = {
 	key: 'customer',
 	label: 'Customer',
@@ -787,10 +791,10 @@ const menu = computed<BbDropdownItem[]>(() => [
 	     component sitting between `BbBadge` and `BbBadgeButton` breaks the
 	     badge's direct-child vnode scan (the companion must be a literal
 	     child). This IS "the chip is itself a dropdown onto the same filter
-	     group": `group` is the exact descriptor FilterRail declared, reused
-	     rather than redeclared, so this scoped picker and the Filters menu's
-	     own submenu can never drift apart. -->
-	<BbDropdown :activator="chipRef" :items="[group]" :width="220">
+	     group": `chipGroup` is derived from the exact descriptor FilterRail
+	     declared (spread, one override — never redeclared), so this scoped
+	     picker and the Filters menu's own submenu can never drift apart. -->
+	<BbDropdown :activator="chipRef" :items="[chipGroup]" :width="220">
 		<BbDropdownGroup
 			:id="groupKey"
 			:model-value="modelValue"
@@ -824,9 +828,24 @@ const emit = defineEmits<{ 'update:modelValue': [value: unknown] }>();
 
 const chipRef = useTemplateRef('chipRef');
 
+// The chip's own copy of the shared descriptor, one override: `prefill:
+// 'interaction'`. BbDropdown mounts a pipeline resolver for every group it
+// declares at its own root, independent of the panel ever opening — so if
+// this second dropdown repeated the menu's `prefill: true` verbatim, each
+// seeded pipeline facet would be fetched TWICE on page load, and the chip's
+// copy of the result would feed nothing (the label below comes from the
+// menu's resolution via context). `'interaction'` defers this copy's fetch
+// to the moment the chip's dropdown is actually opened. For static array
+// facets the override is inert — arrays resolve synchronously either way.
+const chipGroup = computed<BbDropdownItem>(() => ({
+	...props.group,
+	prefill: 'interaction',
+}));
+
 // Reads the Filters menu's already-resolved selection — no twin fetch. A
-// pipeline group needs `prefill: true` (set on `group` by FilterRail) so this
-// never sits on a bare id/value while the menu's own submenu is unopened.
+// pipeline group needs `prefill: true` (set on the MENU's copy of `group` by
+// FilterRail) so this never sits on a bare id/value while the menu's own
+// submenu is unopened.
 const dropdownFilters = useBbDropdownContext('invoice-filters');
 const chipText = computed(() => {
 	const options =

package/dist/ai/source/BbBaseInputContainer.md

@@ -657,6 +657,22 @@ export type BaseInputContainerSlots = {
 	display: flex;
 	flex-direction: column;
 
+	/*
+	 * A field never sizes its own track from its content.
+	 * -----------------------------------------------------------------
+	 * As a grid or flex item this container's automatic minimum size is
+	 * `min-content`, and for a select that is the ENTIRE placeholder string:
+	 * the trigger paints its placeholder as real `nowrap` text, because a
+	 * native `::placeholder` only exists on a real `<input>`. So a long
+	 * placeholder used to widen the column it sat in, while a `BbTextInput`
+	 * next to it held its own (its `<input>` floors at `min-width: 50px` and
+	 * `::placeholder` is paint-only). In a `repeat(3, 1fr)` form row that
+	 * measured 188.9 / 226 / 68px instead of three equal tracks.
+	 *
+	 * The floor lives on the control, not here — see `__control` below.
+	 */
+	min-width: 0;
+
 	/*
 	 * Compact mode
 	 * -----------------------------------------------------------------
@@ -961,6 +977,16 @@ export type BaseInputContainerSlots = {
 		 */
 		display: grid;
 
+		/* Same reason as the container root: this is a flex item, so its
+		   automatic minimum would re-introduce the content floor the root just
+		   dropped. `min-width` has to be 0 on EVERY link between the sized
+		   ancestor and the element that ellipses, or the chain stops truncating
+		   at the first link that still says `auto`. The 50px keeps a squeezed
+		   field usable, mirroring the `min-width: 50px` the native input and
+		   textarea already carry so a select and a text input degrade
+		   identically. */
+		min-width: min(50px, 100%);
+
 		&--left {
 			justify-items: flex-start;
 		}

package/dist/ai/source/BbBreadcrumbs.md

@@ -802,6 +802,37 @@ export type BbBreadcrumbsSlots = {
 		display: none;
 	}
 
+	/*
+	 * Flush outer edge. A crumb paints no background in ANY state (base, hover
+	 * and `aria-current` are all transparent, and BbBaseButton's ring is
+	 * zero-spread), so its 4px inline padding is visible only as rhythm
+	 * BETWEEN crumbs — at the component's own edge it is an invisible box
+	 * pushing the first glyph off the text column it should align with. The
+	 * list adds `--bb-ring-size` more, which is NOT dead: `overflow: hidden`
+	 * clips at the padding box, so without it the ellipsis focus ring loses
+	 * its outer 2px. Hence two different moves — zero the padding that buys
+	 * nothing, bleed back the padding that does.
+	 *
+	 * Both are scoped to a list that IS the outer edge. With a prepend/append
+	 * edge slot the list is interior, and the crumb next to that slot keeps
+	 * its padding so the spacing there stays the same as between two crumbs.
+	 */
+	&__container > &__list:first-child {
+		margin-inline-start: calc(-1 * var(--bb-ring-size));
+	}
+
+	&__container > &__list:last-child {
+		margin-inline-end: calc(-1 * var(--bb-ring-size));
+	}
+
+	&__container > &__list:first-child > &__item:first-of-type &__breadcrumb {
+		padding-inline-start: 0;
+	}
+
+	&__container > &__list:last-child > &__item:last-of-type &__breadcrumb {
+		padding-inline-end: 0;
+	}
+
 	&__breadcrumb[aria-disabled='true'],
 	&__breadcrumb:disabled {
 		cursor: not-allowed;

package/dist/ai/source/BbDialog.md

@@ -657,6 +657,13 @@ export type { BbDialogSlots as BaseDialogSlots };
 ```css
 /* @inherit --transition-duration --max-width — set inline from props; @inherit --scrollbar-width — set on body by the scroll lock */
 .bb-dialog {
+	/* Axis split of --bb-panel-p: --px (inline) / --py (block),
+	   each branching off it. Set the pair only when the axes differ; setting
+	   --bb-panel-p alone keeps them equal. Local on this root class (not
+	   :root) so scoped --bb-panel-p overrides keep reaching the slots; for
+	   per-part asymmetry, scope --py to the part class. */
+	--px: var(--bb-panel-p);
+	--py: var(--bb-panel-p);
 	--page-padding: 20px;
 	--transition-timing-function: var(--bb-ease);
 
@@ -760,8 +767,7 @@ export type { BbDialogSlots as BaseDialogSlots };
 		display: flex;
 		flex-shrink: 0;
 		justify-content: space-between;
-		padding: var(--bb-panel-p) var(--bb-panel-p) calc(var(--bb-panel-p) / 2)
-			var(--bb-panel-p);
+		padding: var(--py) var(--px) calc(var(--py) / 2) var(--px);
 
 		.bb-dialog__title {
 			font-size: var(--dialog-title-fs, calc(var(--bb-fs) + 2px));
@@ -792,8 +798,8 @@ export type { BbDialogSlots as BaseDialogSlots };
 			--size: var(--close-size);
 			--p: 7px;
 			position: absolute;
-			right: calc(var(--bb-panel-p) - var(--p));
-			top: calc(var(--bb-panel-p) - var(--p));
+			right: calc(var(--px) - var(--p));
+			top: calc(var(--py) - var(--p));
 		}
 	}
 
@@ -804,20 +810,20 @@ export type { BbDialogSlots as BaseDialogSlots };
 
 		&:first-child {
 			.bb-dialog__body-content {
-				padding-top: var(--bb-panel-p);
+				padding-top: var(--py);
 
 				> .bb-close-button {
 					--size: 28px;
 					--p: 7px;
 					position: absolute;
-					right: calc(var(--bb-panel-p) - var(--p));
-					top: calc(var(--bb-panel-p) - var(--p));
+					right: calc(var(--px) - var(--p));
+					top: calc(var(--py) - var(--p));
 				}
 			}
 		}
 
 		&-content {
-			padding: 0px var(--bb-panel-p) var(--dialog-gap, var(--bb-panel-p));
+			padding: 0px var(--px) var(--dialog-gap, var(--py));
 		}
 
 		/* Hide any nested dialogs that are not open so that scale transition works without affecting fixed positioning */
@@ -828,7 +834,7 @@ export type { BbDialogSlots as BaseDialogSlots };
 
 	.bb-dialog__footer {
 		border-top: 1px solid var(--bb-border);
-		padding: var(--dialog-gap, var(--bb-panel-p)) var(--bb-panel-p);
+		padding: var(--dialog-gap, var(--py)) var(--px);
 		pointer-events: auto;
 
 		&:empty {

package/dist/ai/source/BbOffCanvas.md

@@ -892,6 +892,13 @@ export type BbOffCanvasSlots = {
 	/* Duration for the stack shift + pad. Zeroed while a peer resizes so parents
 	   track the live size instead of lagging behind a 250ms animation. */
 	--stack-transition-duration: var(--transition-duration);
+	/* Axis split of --bb-panel-p: --px (inline) / --py
+	   (block), each branching off it. Set the pair only when the axes differ;
+	   setting --bb-panel-p alone keeps them equal. Local on this root class
+	   (not :root) so scoped --bb-panel-p overrides keep reaching the slots;
+	   for per-part asymmetry, scope --py to the part class. */
+	--px: var(--bb-panel-p);
+	--py: var(--bb-panel-p);
 	--transition-timing-function: var(--bb-ease);
 	background-color: var(--bb-panel);
 	border: 1px solid var(--bb-border);
@@ -1171,14 +1178,14 @@ export type BbOffCanvasSlots = {
 	   `:first-child` because an absolutely-positioned drag handle can precede the
 	   body in the DOM, which would defeat `:first-child`. */
 	&.bb-offcanvas--no-header .bb-offcanvas__body-content {
-		padding-top: var(--bb-panel-p);
+		padding-top: var(--py);
 	}
 
 	/* Make room for the handle so it does not overlap header content. */
 	&.bb-offcanvas--has-handle.bb-offcanvas--bottom .bb-offcanvas__header,
 	&.bb-offcanvas--has-handle.bb-offcanvas--bottom.bb-offcanvas--no-header
 		.bb-offcanvas__body-content {
-		padding-top: calc(var(--bb-panel-p) + 12px);
+		padding-top: calc(var(--py) + 12px);
 	}
 
 	.bb-offcanvas__header {
@@ -1191,8 +1198,7 @@ export type BbOffCanvasSlots = {
 		display: flex;
 		flex-shrink: 0;
 		justify-content: space-between;
-		padding: var(--bb-panel-p) var(--bb-panel-p) calc(var(--bb-panel-p) / 2)
-			var(--bb-panel-p);
+		padding: var(--py) var(--px) calc(var(--py) / 2) var(--px);
 		position: relative;
 		/* Header is a dependable drag surface even when content scrolls. */
 		touch-action: none;
@@ -1227,8 +1233,8 @@ export type BbOffCanvasSlots = {
 			--size: var(--close-size);
 			--p: 7px;
 			position: absolute;
-			right: calc(var(--bb-panel-p) - var(--p));
-			top: calc(var(--bb-panel-p) - var(--p));
+			right: calc(var(--px) - var(--p));
+			top: calc(var(--py) - var(--p));
 		}
 	}
 
@@ -1239,20 +1245,20 @@ export type BbOffCanvasSlots = {
 
 		&:first-child {
 			.bb-offcanvas__body-content {
-				padding-top: var(--bb-panel-p);
+				padding-top: var(--py);
 
 				> .bb-close-button {
 					--size: 28px;
 					--p: 7px;
 					position: absolute;
-					right: calc(var(--bb-panel-p) - var(--p));
-					top: calc(var(--bb-panel-p) - var(--p));
+					right: calc(var(--px) - var(--p));
+					top: calc(var(--py) - var(--p));
 				}
 			}
 		}
 
 		.bb-offcanvas__body-content {
-			padding: 0px var(--bb-panel-p) var(--dialog-gap, var(--bb-panel-p));
+			padding: 0px var(--px) var(--dialog-gap, var(--py));
 		}
 
 		/* Keep nested overlays out of flow while closed, mirroring dialog behavior. */
@@ -1264,7 +1270,7 @@ export type BbOffCanvasSlots = {
 
 	.bb-offcanvas__footer {
 		border-top: 1px solid var(--bb-border);
-		padding: var(--dialog-gap, var(--bb-panel-p)) var(--bb-panel-p);
+		padding: var(--dialog-gap, var(--py)) var(--px);
 		pointer-events: auto;
 
 		&:empty {

package/dist/ai/source/BbProgress.md

@@ -126,8 +126,8 @@ export type BbProgressProps = {
  *   --track — track height (default 4px)
  *   --fill  — bar color (default var(--bb-primary))
  * Declared on the root (not read with a fallback) so a consumer override wins
- * and an inherited --fill from an ancestor — BbTable publishes its own --fill
- * on .bb-table — is shadowed for this subtree instead of leaking into the bar.
+ * and an inherited --fill from an ancestor (any same-named local a consumer
+ * sets up-tree) is shadowed for this subtree instead of leaking into the bar.
  */
 .bb-progress {
 	--track: 4px;