bitboss-ui 3.0.0-beta.65 → 3.0.0-beta.67

package/dist/ai/source/BbSpinner.md

@@ -25,6 +25,7 @@
 </template>
 
 <script setup lang="ts">
+import type { FallthroughAttrs } from '@/types/fallthrough';
 import spinnerSvg from '@/assets/svgs/spinner.svg?raw';
 import { removedPropsFor } from '@/deprecation/removedProps';
 import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
@@ -34,9 +35,14 @@ import BbIcon from '../BbIcon/BbIcon.vue';
 import { useAttrs } from 'vue';
 
 defineOptions({ inheritAttrs: false });
-const props = withDefaults(defineProps<BbSpinnerProps>(), {
-	size: 'md',
-});
+const props = withDefaults(
+	defineProps<
+		BbSpinnerProps & /* @vue-ignore */ FallthroughAttrs<'svg', BbSpinnerProps>
+	>(),
+	{
+		size: 'md',
+	}
+);
 /**
  * Passthrough (plans/passthrough/BbSpinner.md). `root` is the glyph in both
  * branches, and so is everything bound on the component — a `class` included —

package/dist/ai/source/BbSwitch.md

@@ -82,6 +82,7 @@
 </template>
 
 <script setup lang="ts">
+import type { FallthroughAttrs } from '@/types/fallthrough';
 import { vAutofocus } from '@/utilities/misc/autofocus';
 import { withResponsiveDefault } from '@/utilities/functions/responsiveDefault';
 import CommonField from '../CommonField/CommonField.vue';
@@ -121,15 +122,21 @@ import { useFormBinding } from '@/composables/useFormBinding';
 export type { BbSwitchProps, BbSwitchEvents, BbSwitchSlots };
 
 defineOptions({ inheritAttrs: false });
-const declaredProps = withDefaults(defineProps<BbSwitchProps>(), {
-	// boolean `checked` — default: undefined so an unset prop isn't coerced to
-	// `false`; the checked state then derives from `modelValue`.
-	checked: undefined,
-	layout: 'auto',
-	// Control-first: always left-align, like BbCheckbox/BbRadio (never right, even
-	// in a horizontal layout).
-	inputPosition: 'left',
-});
+const declaredProps = withDefaults(
+	defineProps<
+		BbSwitchProps &
+			/* @vue-ignore */ FallthroughAttrs<'div', BbSwitchProps, BbSwitchEvents>
+	>(),
+	{
+		// boolean `checked` — default: undefined so an unset prop isn't coerced to
+		// `false`; the checked state then derives from `modelValue`.
+		checked: undefined,
+		layout: 'auto',
+		// Control-first: always left-align, like BbCheckbox/BbRadio (never right, even
+		// in a horizontal layout).
+		inputPosition: 'left',
+	}
+);
 
 const declaredEmit = defineEmits<BbSwitchEvents>();
 defineSlots<BbSwitchSlots>();
@@ -328,18 +335,49 @@ const iconSlotProps = (
 ## Types
 
 ```ts
-import {
-	BB_CHECKBOX_PT,
-	type BbCheckboxEvents,
-	type BbCheckboxIconSlotProps,
-	type BbCheckboxProps,
+import type {
+	BbCheckboxEvents,
+	BbCheckboxIconSlotProps,
+	BbCheckboxProps,
 } from '../BbCheckbox/types';
 import type { CommonFieldAsteriskSlotProps } from '../CommonField/types';
+import {
+	CHECKABLE_PT_STATES,
+	type CheckablePtState,
+	TOGGLE_PT_PARTS,
+	type TogglePtPart,
+} from '@/types/passthrough';
 
-/** `BbSwitch` shares `BbCheckbox`'s passthrough vocabulary (its props are the same type). */
-export const BB_SWITCH_PT = BB_CHECKBOX_PT;
+/**
+ * Passthrough parts of `BbSwitch`: a toggle's. `icon` is the switch track
+ * (the drawn glyph); a consumer `icon` slot replaces it.
+ */
+export type BbSwitchPtPart = TogglePtPart;
+/** Passthrough states of `BbSwitch`: a checkable toggle's, every one on every part. */
+export type BbSwitchPtState = CheckablePtState;
 
-/** Re-export of BbCheckboxProps for the switch variant. */
+/**
+ * The switch's own passthrough lists — the same words as a checkbox's, but
+ * its own object, so a word a checkbox gains later never lands on the switch
+ * by aliasing. The global map key is `BbSwitch`: a `BbCheckbox` entry never
+ * styles a switch.
+ */
+export const BB_SWITCH_PT = {
+	parts: TOGGLE_PT_PARTS,
+	states: CHECKABLE_PT_STATES,
+	/** On every part: every state is component-wide. */
+	wide: CHECKABLE_PT_STATES,
+} as const satisfies {
+	parts: readonly BbSwitchPtPart[];
+	states: readonly BbSwitchPtState[];
+	wide: readonly BbSwitchPtState[];
+};
+
+/**
+ * The switch's props: the same shape as `BbCheckboxProps` (a switch is a
+ * checkbox drawn as a track). Its `pt` is its own — the global map styles it
+ * under `BbSwitch`, never through a `BbCheckbox` entry.
+ */
 export type BbSwitchProps = BbCheckboxProps;
 
 /** Re-export for consumers importing events type from BbSwitch. */
@@ -453,4 +491,44 @@ export type BbSwitchSlots = {
 		}
 	}
 }
+
+/* ---- Touch target (Q44.19, R12) -----------------------------------------
+ * A lone switch's row is one label line (18px). On a coarse pointer only, an
+ * invisible `::after` centred on the row (the `<label>`) reaches out to
+ * 44px; nothing moves. The reach per side follows BbButton's rule: the full
+ * 44px with no element beside the field, 4px a side (half the library's 8px
+ * gap) with one, the cell's `--py` in a table cell. The group components
+ * keep their own rows (BbCheckboxGroup § Touch targets). */
+@media (pointer: coarse) {
+	.bb-switch {
+		--tap-i: 22px;
+		--tap-b: 22px;
+
+		&:is(* + *, :has(+ *)) {
+			--tap-i: 4px;
+			--tap-b: 4px;
+		}
+
+		.bb-table__cell & {
+			--tap-i: var(--py, 4px);
+			--tap-b: var(--py, 4px);
+
+			&:is(* + *, :has(+ *)) {
+				--tap-i: min(4px, var(--py, 4px));
+				--tap-b: min(4px, var(--py, 4px));
+			}
+		}
+
+		> :where(.bb-field__layout) {
+			position: relative;
+		}
+
+		> .bb-field__layout::after {
+			content: '';
+			inset-block: max(min(0px, calc(50% - 22px)), calc(var(--tap-b) * -1));
+			inset-inline: max(min(0px, calc(50% - 22px)), calc(var(--tap-i) * -1));
+			position: absolute;
+		}
+	}
+}
 ```

package/dist/ai/source/BbSwitchGroup.md

@@ -126,6 +126,7 @@
 </template>
 
 <script setup lang="ts" generic="T = any">
+import type { FallthroughAttrs } from '@/types/fallthrough';
 import { vAutofocus } from '@/utilities/misc/autofocus';
 import CommonField from '../CommonField/CommonField.vue';
 import OptionsContainer from '../OptionsContainer/OptionsContainer.vue';
@@ -182,13 +183,23 @@ import { useFormBinding } from '@/composables/useFormBinding';
 export type { BbSwitchGroupProps, BbSwitchGroupEvents, BbSwitchGroupSlots };
 
 defineOptions({ inheritAttrs: false });
-const declaredProps = withDefaults(defineProps<BbSwitchGroupProps<T>>(), {
-	// Match BbCheckboxGroup: switch groups are multi-select by default, and an
-	// absent boolean-union prop would otherwise coerce to `false`.
-	multiple: true,
-	inputPosition: 'left',
-	selectable: true,
-});
+const declaredProps = withDefaults(
+	defineProps<
+		BbSwitchGroupProps<T> &
+			/* @vue-ignore */ FallthroughAttrs<
+				'div',
+				BbSwitchGroupProps<T>,
+				BbSwitchGroupEvents
+			>
+	>(),
+	{
+		// Match BbCheckboxGroup: switch groups are multi-select by default, and an
+		// absent boolean-union prop would otherwise coerce to `false`.
+		multiple: true,
+		inputPosition: 'left',
+		selectable: true,
+	}
+);
 
 const declaredEmit = defineEmits<BbSwitchGroupEvents>();
 
@@ -299,15 +310,15 @@ const { data: modelValueIndexedByHash } = useIndexById({
 });
 
 const { options } = useBaseOptions({
-	disabled: toRef(props, 'disabled'),
+	disabled: toRef(() => props.disabled),
 	items: internalItems,
 	itemText: props.itemText as any,
-	itemProps: toRef(props, 'itemProps'),
+	itemProps: toRef(() => props.itemProps),
 	itemValue: props.itemValue as any,
 	optionDefaults: true,
 	// A ref, not the setup-time number: a runtime `:max` change must re-gate rows.
-	max: toRef(props, 'max'),
-	selectable: toRef(props, 'selectable'),
+	max: toRef(() => props.max),
+	selectable: toRef(() => props.selectable),
 	selectedIndexedByHash: modelValueIndexedByHash,
 });
 
@@ -335,7 +346,7 @@ const { data: optionsIndexedByHash } = useIndexById({
 });
 
 const { coherent, coherentValue } = useCoherence({
-	modelValue: toRef(props, 'modelValue'),
+	modelValue: toRef(() => props.modelValue),
 	multiple: props.multiple,
 	iteratee: (item) => !!optionsIndexedByHash.value[hash(item)],
 });
@@ -543,10 +554,11 @@ import type {
 	BbCheckboxGroupEvents,
 } from '../BbCheckboxGroup/types';
 import {
+	type PtCompoundProps,
 	GROUP_PT_PARTS,
 	GROUP_PT_STATES,
-	GROUP_ROW_PT_PARTS,
-	GROUP_ROW_PT_STATES,
+	GROUP_ROW_PT_NODE,
+	GROUP_WIDE_PT_STATES,
 	type GroupPtMap,
 	type PtNoInfer,
 } from '@/types/passthrough';
@@ -559,18 +571,21 @@ import type { CommonFieldAsteriskSlotProps } from '../CommonField/types';
 export const BB_SWITCH_GROUP_PT = {
 	parts: GROUP_PT_PARTS,
 	states: GROUP_PT_STATES,
-	rowParts: GROUP_ROW_PT_PARTS,
-	rowStates: GROUP_ROW_PT_STATES,
+	/** On every part: the group-wide states (the resolver's `active` map). */
+	wide: GROUP_WIDE_PT_STATES,
+	/** Per node: what one row knows — never on a field part. */
+	node: GROUP_ROW_PT_NODE,
 } as const;
 
 /** BbCheckboxGroup's props without its `variant` (and the `indicator` part). */
-export type BbSwitchGroupProps<T = any> = BbCheckboxGroupBaseProps<T> & {
-	/**
-	 * Passthrough, object form: the same keys as the `pt:*` attributes
-	 * without the prefix. See the `pt:<part>` row.
-	 */
-	pt?: GroupPtMap<PtNoInfer<T>>;
-};
+export type BbSwitchGroupProps<T = any> = BbCheckboxGroupBaseProps<T> &
+	/* @vue-ignore */ PtCompoundProps<typeof BB_SWITCH_GROUP_PT> & {
+		/**
+		 * Passthrough, object form: the same keys as the `pt:*` attributes
+		 * without the prefix. See the `pt:<part>` row.
+		 */
+		pt?: GroupPtMap<PtNoInfer<T>>;
+	};
 
 /** Re-export for consumers importing events type from BbSwitchGroup. */
 export type BbSwitchGroupEvents = BbCheckboxGroupEvents;