bitboss-ui 3.0.0-beta.2 → 3.0.0-beta.21

package/dist/ai/source/BbBaseSwitchGroup.md

@@ -109,6 +109,8 @@ useOnTruthy(active, () => emit('active'));
 
 const {
 	getter,
+	clientReproducible,
+	hydratedFromSsr,
 	items: internalItems,
 	loading,
 } = useItemsGetter({
@@ -122,6 +124,8 @@ const alignToCoherenceSettings = () => {
 };
 
 const { hasPrefilled } = usePrefill({
+	alreadyLoaded: hydratedFromSsr,
+	clientReproducible,
 	trigger: true,
 	currentValue: props.modelValue,
 	multiple: props.multiple,

package/dist/ai/source/BbBaseTimePickerInput.md

@@ -186,7 +186,7 @@
 </template>
 
 <script setup lang="ts">
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { isEmpty } from '@/utilities/functions/empty';
@@ -222,9 +222,13 @@ const props = withDefaults(defineProps<BaseTimePickerInputProps>(), {
 	disableWriting: false,
 	autocomplete: 'off',
 });
+
 const emit = defineEmits<BaseTimePickerInputEvents>();
+
 defineSlots<BaseTimePickerInputSlots>();
 
+const config = useConfig();
+
 const { t } = useLocale();
 const logger = useLogger();
 

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/BbButton.md

@@ -27,8 +27,18 @@
 		<!-- v-if'd so idle buttons carry no spinner node (and no running
 		     keyframe animation). The <Transition> keeps the fade smooth: the
 		     node persists through the leave phase, so the sibling cross-fade
-		     and label-slide CSS keep matching while everything animates back. -->
-		<Transition appear name="bb-button-spinner">
+		     and label-slide CSS keep matching while everything animates back.
+
+		     The <Transition> itself waits for the first load. It is two component
+		     instances (the wrapper and BaseTransition) that render nothing at all
+		     until `loading` first turns true, and a button that never loads —
+		     every button in a table cell, and most buttons anywhere — paid for
+		     both on every mount. `appear` is what makes the deferral invisible:
+		     mounting the transition WITH its child already inside runs the enter
+		     animation, exactly as a plain toggle would have. From then on
+		     `hasLoadedOnce` stays true, so the leave animation has its transition
+		     to run in. -->
+		<Transition v-if="hasLoadedOnce" appear name="bb-button-spinner">
 			<BbSpinner v-if="loading" class="bb-button__spinner" />
 		</Transition>
 		<BbIcon
@@ -59,11 +69,12 @@
 <script setup lang="ts">
 import { BbBaseButton, BbSpinner } from '@/index';
 import BbIcon from '../BbIcon/BbIcon.vue';
-import { computed, ref, toRef, useAttrs, watchEffect } from 'vue';
+import { computed, ref, useAttrs, watchEffect } from 'vue';
 import { pickBy } from '@/utilities/functions/pickBy';
 import { noop } from '@/utilities/functions/noop';
 import { useLocale } from '@/composables/useLocale';
 import { useLogger } from '@/composables/useLogger';
+import { useUntil } from '@/composables/useUntil';
 import { removedPropsFor } from '@/deprecation/removedProps';
 import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
 import { extractDomContainer } from '@/utilities/functions/extractDomContainer';
@@ -128,6 +139,9 @@ const loading = computed(
 	() => props.loading || (!!internalLoading.value && !props.disableAutoLoading)
 );
 
+/** Latches on the first load; gates the spinner's <Transition> — see the template. */
+const hasLoadedOnce = useUntil(loading);
+
 const onClick = async (event: Event) => {
 	if (loading.value && !props.interactiveWhileLoading) {
 		// router-link doesn't allow for prevent default but the logic stays
@@ -141,9 +155,20 @@ const onClick = async (event: Event) => {
 		const falseVal = props.falseValue;
 		modelValue.value = isEqual(modelValue.value, trueVal) ? falseVal : trueVal;
 	}
+	// Call the handler FIRST, then decide. Auto-loading is documented as
+	// tracking *async* click handlers, but the counter used to increment before
+	// the call, so a plain sync handler still passed through a loading state for
+	// one microtask. In isolation that never paints — the flip and Vue's
+	// re-render settle in the same drain. In a real app it does: a consumer's
+	// sync handler that opened a dialog flickered the spinner on every click,
+	// and `disable-auto-loading` was the only cure. A sync handler now never
+	// touches the counter at all, so there is no window to catch.
+	const result = ((attrs.onClick ?? noop) as (...args: any[]) => any)(event);
+	if (!result || typeof result.then !== 'function') return result;
+
 	internalLoading.value++;
 	try {
-		await ((attrs.onClick ?? noop) as (...args: any[]) => any)(event);
+		return await result;
 	} finally {
 		// Always release the auto-loading counter, even if the handler rejects,
 		// so a failing async onClick doesn't leave the button stuck loading.
@@ -176,27 +201,29 @@ const sizeClasses = computed(() => {
 	);
 });
 
-const propsToPass = toRef(() => ({
+/** Props consumed here, never forwarded to the base button. */
+const OWN_PROPS = new Set([
+	'append:icon',
+	'disableAutoLoading',
+	'disabled',
+	'interactiveWhileLoading',
+	'falseValue',
+	'group',
+	'icon',
+	'loading',
+	'modelValue',
+	'prepend:icon',
+	'size',
+	'trueValue',
+	'variant',
+]);
+
+// A `computed`, not a getter `toRef`: the getter re-ran the whole pick on
+// every read — once per render of every button — which a virtualized table
+// mounting a couple of buttons per row turned into measurable scroll cost.
+const propsToPass = computed(() => ({
 	...forwardedAttrs.value,
-	...pickBy(
-		props,
-		(_, key) =>
-			![
-				'append:icon',
-				'disableAutoLoading',
-				'disabled',
-				'interactiveWhileLoading',
-				'falseValue',
-				'group',
-				'icon',
-				'loading',
-				'modelValue',
-				'prepend:icon',
-				'size',
-				'trueValue',
-				'variant',
-			].includes(key)
-	),
+	...pickBy(props, (_, key) => !OWN_PROPS.has(key)),
 }));
 
 /**

package/dist/ai/source/BbCheckbox.md

@@ -315,9 +315,23 @@ export type BbCheckboxSlots = {
 		.bb-base-input-container__layout--horizontal {
 			align-items: flex-start;
 
+			/*
+			 * `align-items` + `min-height` are what pin the control to the
+			 * LABEL'S FIRST LINE instead of the block centre — measured: with a
+			 * 4-line label the control's mid sits exactly on the first line's
+			 * mid, and 28px above the block centre.
+			 *
+			 * There used to be a `display: inline-flex` here too, and it was
+			 * doing none of that vertical work — but it silently killed
+			 * `input-position`, whose only lever is `justify-items` (a grid
+			 * property, inert on a flex container). So a described row with
+			 * `input-position="right"` painted its control at the START of the
+			 * column: 182px out on a 198px column (Q20.2). Removing the one
+			 * declaration restores left/center/right and leaves the vertical
+			 * geometry byte-identical.
+			 */
 			.bb-base-input-container__control {
 				align-items: center;
-				display: inline-flex;
 				min-height: var(--bb-label-lh);
 			}
 		}

package/dist/ai/source/BbCheckboxGroup.md

@@ -282,7 +282,8 @@ export type BbCheckboxGroupProps<T> = {
 	/**
 	 * Legend rendering mode. `'outside'` renders the legend above the fieldset in the normal flow;
 	 * `'inside'` overlays the legend inside the fieldset border.
-	 * Floating mode is not supported for checkbox groups.
+	 * Floating mode is not supported for option groups (checkbox, radio or
+	 * switch) — there is no single field for the legend to float against.
 	 */
 	legendMode?: 'outside' | 'inside';
 

package/dist/ai/source/BbCollapsible.md

@@ -68,9 +68,15 @@ export type BbCollapsibleProps = {
 	/**
 	 * Used by v-model to trigger opening / closing the collapsible.
 	 *
+	 * Optional, matching the runtime: `withDefaults` supplies `false`, so an
+	 * omitted binding renders closed and Vue never warns. It was typed required
+	 * while carrying that default, which made the manifest publish a row that
+	 * was `required: true` AND `default: false` — a contradiction that read as
+	 * a generator bug.
+	 *
 	 * @defaultValue `false`
 	 */
-	modelValue: boolean;
+	modelValue?: boolean;
 };
 
 export type BbCollapsibleSlots = {

package/dist/ai/source/BbColorInput.md

@@ -66,7 +66,7 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import { isNotNil } from '@/utilities/functions/isNotNil';
 import { removedPropsFor } from '@/deprecation/removedProps';
 import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
@@ -78,7 +78,6 @@ import type {
 	BbColorInputEvents,
 	BbColorInputSlots,
 } from './types';
-export type { BbColorInputProps, BbColorInputEvents, BbColorInputSlots };
 
 const props = withDefaults(defineProps<BbColorInputProps>(), {
 	// `undefined` (declared, not omitted) keeps `adaptive` three-state: it
@@ -87,10 +86,10 @@ const props = withDefaults(defineProps<BbColorInputProps>(), {
 	// keeping the Boolean type so the valueless `adaptive` shorthand → `true`.
 	adaptive: undefined,
 });
-
 const emit = defineEmits<BaseColorInputEvents>();
-
 defineSlots<BbColorInputSlots>();
+const config = useConfig();
+export type { BbColorInputProps, BbColorInputEvents, BbColorInputSlots };
 
 if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbColorInput', removedPropsFor('BbColorInput'));

package/dist/ai/source/BbColorPalette.md

@@ -80,7 +80,7 @@
 
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import { createReusableTemplate } from '@vueuse/core';
 import { extractDomContainer } from '@/utilities/functions/extractDomContainer';
 import { useClosingInert } from '@/composables/useClosingInert';
@@ -98,7 +98,6 @@ import type {
 	BbColorPaletteSlots,
 } from './types';
 import { transitions } from '@/utilities/misc/transitions';
-export type { BbColorPaletteProps, BbColorPaletteEvents, BbColorPaletteSlots };
 
 const props = withDefaults(defineProps<BbColorPaletteProps>(), {
 	// `undefined` (declared, not omitted) keeps `adaptive` three-state: it disables
@@ -112,10 +111,10 @@ const props = withDefaults(defineProps<BbColorPaletteProps>(), {
 	eyeDropper: false,
 	transitionDuration: transitions.medium,
 });
-
 const emit = defineEmits<BbColorPaletteEvents>();
-
 defineSlots<BbColorPaletteSlots>();
+const config = useConfig();
+export type { BbColorPaletteProps, BbColorPaletteEvents, BbColorPaletteSlots };
 
 if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbColorPalette', removedPropsFor('BbColorPalette'));

package/dist/ai/source/BbDatePicker.md

@@ -104,7 +104,7 @@
 </template>
 
 <script setup lang="ts">
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { extractDomContainer } from '@/utilities/functions/extractDomContainer';
@@ -144,7 +144,11 @@ const props = withDefaults(defineProps<BbDatePickerProps>(), {
 });
 
 const emit = defineEmits<BbDatePickerEvents>();
+
 defineSlots<BbDatePickerSlots>();
+
+const config = useConfig();
+
 /**
  * The time rail is a `datetime` affordance only. Every former `props.datetime`
  * read goes through this, so the type union stays the single source of truth.

package/dist/ai/source/BbDatePickerInput.md

@@ -88,7 +88,7 @@ import BaseDatePickerInput from '../BbBaseDatePickerInput/BbBaseDatePickerInput.
 import BaseInputContainer from '../BbBaseInputContainer/BbBaseInputContainer.vue';
 import type { BaseDatePickerInputEvents } from '../BbBaseDatePickerInput/types';
 import { ref, computed, onBeforeUnmount, onDeactivated } from 'vue';
-import { config } from 'virtual:bitboss-ui/config';
+import { useConfig } from '@/composables/useConfig';
 import { removedPropsFor } from '@/deprecation/removedProps';
 import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
 import { isNotEmpty } from '@/utilities/functions/isNotEmpty';
@@ -106,9 +106,13 @@ const props = withDefaults(defineProps<BbDatePickerInputProps>(), {
 	// resolves to `true`.
 	adaptive: undefined,
 });
+
 const emit = defineEmits<BaseDatePickerInputEvents>();
+
 defineSlots<BbDatePickerInputSlots>();
 
+const config = useConfig();
+
 if (process.env.NODE_ENV !== 'production')
 	warnRemovedAttrs('BbDatePickerInput', removedPropsFor('BbDatePickerInput'));