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

package/dist/ai/source/BbBaseRadioIcon.md

@@ -13,17 +13,42 @@
 			'bb-base-radio-icon--checked': checked,
 			'bb-base-radio-icon--disabled': disabled,
 			'bb-base-radio-icon--errors': hasErrors,
-			'bb-base-radio-icon--warnings': hasWarning && !hasErrors,
+			'bb-base-radio-icon--warnings': hasWarnings && !hasErrors,
+			'bb-base-radio-icon--focused': focused,
 			'bb-base-radio-icon--focus-visible': focusVisible,
 			'bb-base-radio-icon--readonly': readonly,
 		}"
+		v-bind="passthrough.rootAttrs"
 	></span>
 </template>
 
 <script setup lang="ts">
-import type { BbBaseRadioIconProps } from './types';
+import { useAttrs } from 'vue';
+import { BB_BASE_RADIO_ICON_PT, type BbBaseRadioIconProps } from './types';
+import { usePassthrough } from '@/composables/usePassthrough';
 
-defineProps<BbBaseRadioIconProps>();
+defineOptions({ inheritAttrs: false });
+const props = defineProps<BbBaseRadioIconProps>();
+
+/**
+ * Passthrough (plans/passthrough/BbBaseRadioIcon.md). `root`, with the states the glyph paints — each true exactly while its modifier is on.
+ */
+const passthrough = usePassthrough({
+	component: 'BbBaseRadioIcon',
+	attrs: useAttrs(),
+	props,
+	parts: BB_BASE_RADIO_ICON_PT.parts,
+	states: BB_BASE_RADIO_ICON_PT.states,
+	active: {
+		checked: () => !!props.checked,
+		readonly: () => !!props.readonly,
+		disabled: () => !!props.disabled,
+		warnings: () => !!props.hasWarnings && !props.hasErrors,
+		errors: () => !!props.hasErrors,
+		focused: () => !!props.focused,
+		focusVisible: () => !!props.focusVisible,
+	},
+});
 </script>
 
 <style lang="postcss">
@@ -34,15 +59,52 @@ defineProps<BbBaseRadioIconProps>();
 ## Types
 
 ```ts
+import {
+	TOGGLE_PT_STATES,
+	type TogglePtState,
+	type PtMap,
+	type PtValue,
+} from '@/types/passthrough';
+
 /**
  * Props for the standalone radio glyph.
  *
  * `BbBaseRadioIcon` is purely presentational: it renders the ring + dot and drives
  * its own visual state from these props. It carries no native input and emits no
  * events — pair it with your own `<input>`/`<label>` when you need a completely
- * custom radio design, or let `BbBaseRadio` render it for you.
+ * custom radio design, or let `BbRadio` render it for you.
  */
+/**
+ * Passthrough parts of `BbBaseRadioIcon`
+ * (plans/passthrough/BbBaseRadioIcon.md).
+ *
+ * @part root - The drawn glyph — the ring and its dot. Its states are the
+ *   conditions it paints as it resolves them (`warnings` is off while
+ *   `errors` is on), not the raw props.
+ */
+export type BbBaseRadioIconPtPart = 'root';
+/** The runtime lists the resolver is wired with. */
+export const BB_BASE_RADIO_ICON_PT = {
+	parts: ['root'],
+	states: TOGGLE_PT_STATES,
+} as const satisfies {
+	parts: readonly BbBaseRadioIconPtPart[];
+	states: readonly TogglePtState[];
+};
+
+// Spelled INLINE with this component's own union (Vue's SFC type resolver
+// does not substitute a generic alias's type parameters — PASSTHROUGH.md T20).
+// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
 export type BbBaseRadioIconProps = {
+	[K in
+		| `pt:${BbBaseRadioIconPtPart}`
+		| `pt:${BbBaseRadioIconPtPart}:${TogglePtState}`]?: PtValue;
+} & {
+	/**
+	 * Passthrough, object form: the same keys as the `pt:*` attributes
+	 * without the prefix. See the `pt:<part>` row.
+	 */
+	pt?: PtMap<BbBaseRadioIconPtPart, TogglePtState>;
 	/**
 	 * Renders the checked state (grows the inner dot).
 	 * @defaultValue `false`
@@ -53,6 +115,13 @@ export type BbBaseRadioIconProps = {
 	 * @defaultValue `false`
 	 */
 	disabled?: boolean;
+	/**
+	 * Whether the paired native input has focus — any focus, mouse included.
+	 * Paints `--focused`, the hook the `focused` passthrough state aliases (T19);
+	 * draws nothing by itself — the ring stays on `focusVisible`.
+	 * @defaultValue `false`
+	 */
+	focused?: boolean;
 	/**
 	 * Whether keyboard focus is visible (`:focus-visible`). Draws the focus ring.
 	 * @defaultValue `false`
@@ -68,7 +137,7 @@ export type BbBaseRadioIconProps = {
 	 * Errors take priority when both are set.
 	 * @defaultValue `false`
 	 */
-	hasWarning?: boolean;
+	hasWarnings?: boolean;
 	/**
 	 * Renders the read-only affordance (default cursor instead of pointer).
 	 * @defaultValue `false`
@@ -82,17 +151,38 @@ export type BbBaseRadioIconProps = {
 ```css
 /* Standalone radio glyph. Self-contained: owns its tokens and drives every
    visual state from its own `--*` modifier classes so it can be used without
-   BbBaseRadio. Override the tokens below on the element to restyle. */
+   BbRadio. Override the tokens below on the element to restyle. */
 .bb-base-radio-icon {
-	--color: var(--bb-primary);
+	--accent: var(--bb-primary);
 	--size: 16px;
 	--space: 2px;
 	--ring-color: var(--bb-ring);
+	/* Same resting lift as the checkbox glyph — see BbBaseCheckboxIcon. */
+	--elev: var(--bb-elev-sm);
 
-	background-color: var(--bb-panel);
-	border: 1px solid var(--bb-border);
+	/* The glyph plate. DECLARED here, not consumed bare, because this glyph
+	   renders inside surfaces that declare `--bg` themselves — a table row or
+	   header cell, a dialog, an off-canvas sheet. Without the declaration it
+	   would inherit that surface's fill, which happens to match at the shipped
+	   default and would diverge the moment anyone writes
+	   `.my-table { --bg: … }`. Identical to the raw tokens it replaces at
+	   every theme. */
+	--bg: var(--bb-panel);
+	--border-color: var(--bb-border);
+
+	background-color: var(--bg);
+	border: var(--bb-border-w-sm) solid var(--border-color);
 	border-radius: 999px;
-	box-shadow: 0px 0px 0px 0px var(--bb-ring);
+	box-shadow:
+		var(--elev),
+		0px 0px 0px 0px var(--bb-ring);
+
+	/* The accent paints through `color`, so the glyph takes a text colour like
+	   every other icon: `class` / `pt:*="text-emerald-600"` recolours it, and
+	   `--accent` stays the knob that sets the default. The resting checked
+	   fill reads `currentColor`; error, warning and disabled paint from
+	   `--accent` explicitly, so a consumer text colour never wins a state. */
+	color: var(--accent);
 	cursor: pointer;
 	display: inline-block;
 	height: var(--size);
@@ -109,10 +199,12 @@ export type BbBaseRadioIconProps = {
 	   width/height, which forced layout on every check/uncheck. `scale(0)` from
 	   the shared center renders exactly like the old 0x0 box. */
 	&::after {
-		background-color: var(--color);
+		background-color: currentColor;
 		border-radius: 999px;
 		content: '';
-		height: calc(100% - 2px - var(--space));
+		/* Inner disc inset must track the glyph stroke, not a leftover 2px,
+		   or a 3px plate theme clips the checked dot. */
+		height: calc(100% - 2 * var(--bb-border-w-sm) - var(--space));
 		left: 50%;
 		position: absolute;
 		top: 50%;
@@ -120,11 +212,13 @@ export type BbBaseRadioIconProps = {
 		transition:
 			background-color var(--bb-transition-medium) var(--bb-ease),
 			transform var(--bb-transition-medium) var(--bb-ease);
-		width: calc(100% - 2px - var(--space));
+		width: calc(100% - 2 * var(--bb-border-w-sm) - var(--space));
 	}
 
 	&--focus-visible {
-		box-shadow: 0px 0px 0px var(--bb-ring-size) var(--ring-color);
+		box-shadow:
+			var(--elev),
+			0px 0px 0px var(--bb-ring-size) var(--ring-color);
 	}
 
 	&--checked {
@@ -134,14 +228,24 @@ export type BbBaseRadioIconProps = {
 	}
 
 	&--errors {
-		--color: var(--bb-danger);
+		--accent: var(--bb-danger);
 		--ring-color: var(--bb-ring-danger);
 
 		border-color: var(--bb-danger);
 	}
 
+	/* State dots beat a consumer text colour: painted from --accent, which the
+	   state set, not from `color`. */
+	&--errors,
+	&--warnings,
+	&--disabled {
+		&::after {
+			background-color: var(--accent);
+		}
+	}
+
 	&--warnings {
-		--color: var(--bb-warn);
+		--accent: var(--bb-warn);
 		--ring-color: var(--bb-ring-warn);
 
 		border-color: var(--bb-warn);
@@ -152,7 +256,7 @@ export type BbBaseRadioIconProps = {
 	}
 
 	&--disabled {
-		--color: color-mix(in oklab, var(--bb-text) 45%, var(--bb-panel));
+		--accent: color-mix(in oklab, var(--bb-text) 45%, var(--bb-panel));
 
 		background-color: var(--bb-muted);
 		border-color: var(--bb-border);

package/dist/ai/source/BbBaseSwitchIcon.md

@@ -13,20 +13,46 @@
 			'bb-base-switch-icon--checked': checked,
 			'bb-base-switch-icon--disabled': disabled,
 			'bb-base-switch-icon--errors': hasErrors,
-			'bb-base-switch-icon--warnings': hasWarning && !hasErrors,
+			'bb-base-switch-icon--warnings': hasWarnings && !hasErrors,
+			'bb-base-switch-icon--focused': focused,
 			'bb-base-switch-icon--focus-visible': focusVisible,
 			'bb-base-switch-icon--indeterminate': indeterminate,
 			'bb-base-switch-icon--readonly': readonly,
 		}"
+		v-bind="passthrough.rootAttrs"
 	>
 		<span class="bb-base-switch-icon__thumb"></span>
 	</span>
 </template>
 
 <script setup lang="ts">
-import type { BbBaseSwitchIconProps } from './types';
+import { useAttrs } from 'vue';
+import { BB_BASE_SWITCH_ICON_PT, type BbBaseSwitchIconProps } from './types';
+import { usePassthrough } from '@/composables/usePassthrough';
 
-defineProps<BbBaseSwitchIconProps>();
+defineOptions({ inheritAttrs: false });
+const props = defineProps<BbBaseSwitchIconProps>();
+
+/**
+ * Passthrough (plans/passthrough/BbBaseSwitchIcon.md). `root`, with the states the glyph paints — each true exactly while its modifier is on.
+ */
+const passthrough = usePassthrough({
+	component: 'BbBaseSwitchIcon',
+	attrs: useAttrs(),
+	props,
+	parts: BB_BASE_SWITCH_ICON_PT.parts,
+	states: BB_BASE_SWITCH_ICON_PT.states,
+	active: {
+		checked: () => !!props.checked,
+		indeterminate: () => !!props.indeterminate,
+		readonly: () => !!props.readonly,
+		disabled: () => !!props.disabled,
+		warnings: () => !!props.hasWarnings && !props.hasErrors,
+		errors: () => !!props.hasErrors,
+		focused: () => !!props.focused,
+		focusVisible: () => !!props.focusVisible,
+	},
+});
 </script>
 
 <style lang="postcss">
@@ -37,15 +63,52 @@ defineProps<BbBaseSwitchIconProps>();
 ## Types
 
 ```ts
+import {
+	CHECKABLE_PT_STATES,
+	type CheckablePtState,
+	type PtMap,
+	type PtValue,
+} from '@/types/passthrough';
+
 /**
  * Props for the standalone switch glyph.
  *
  * `BbBaseSwitchIcon` is purely presentational: it renders the track + thumb and
  * drives its own visual state from these props. It carries no native input and
  * emits no events — pair it with your own `<input>`/`<label>` when you need a
- * completely custom switch design, or let `BbBaseSwitch` render it for you.
+ * completely custom switch design, or let `BbSwitch` render it for you.
+ */
+/**
+ * Passthrough parts of `BbBaseSwitchIcon`
+ * (plans/passthrough/BbBaseSwitchIcon.md).
+ *
+ * @part root - The drawn glyph — the track and its thumb. Its states are the
+ *   conditions it paints as it resolves them (`warnings` is off while
+ *   `errors` is on), not the raw props.
  */
+export type BbBaseSwitchIconPtPart = 'root';
+/** The runtime lists the resolver is wired with. */
+export const BB_BASE_SWITCH_ICON_PT = {
+	parts: ['root'],
+	states: CHECKABLE_PT_STATES,
+} as const satisfies {
+	parts: readonly BbBaseSwitchIconPtPart[];
+	states: readonly CheckablePtState[];
+};
+
+// Spelled INLINE with this component's own union (Vue's SFC type resolver
+// does not substitute a generic alias's type parameters — PASSTHROUGH.md T20).
+// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
 export type BbBaseSwitchIconProps = {
+	[K in
+		| `pt:${BbBaseSwitchIconPtPart}`
+		| `pt:${BbBaseSwitchIconPtPart}:${CheckablePtState}`]?: PtValue;
+} & {
+	/**
+	 * Passthrough, object form: the same keys as the `pt:*` attributes
+	 * without the prefix. See the `pt:<part>` row.
+	 */
+	pt?: PtMap<BbBaseSwitchIconPtPart, CheckablePtState>;
 	/**
 	 * Renders the checked state (fills the track and slides the thumb to the end).
 	 * @defaultValue `false`
@@ -56,6 +119,13 @@ export type BbBaseSwitchIconProps = {
 	 * @defaultValue `false`
 	 */
 	disabled?: boolean;
+	/**
+	 * Whether the paired native input has focus — any focus, mouse included.
+	 * Paints `--focused`, the hook the `focused` passthrough state aliases (T19);
+	 * draws nothing by itself — the ring stays on `focusVisible`.
+	 * @defaultValue `false`
+	 */
+	focused?: boolean;
 	/**
 	 * Whether keyboard focus is visible (`:focus-visible`). Draws the focus ring.
 	 * @defaultValue `false`
@@ -71,7 +141,7 @@ export type BbBaseSwitchIconProps = {
 	 * Errors take priority when both are set.
 	 * @defaultValue `false`
 	 */
-	hasWarning?: boolean;
+	hasWarnings?: boolean;
 	/**
 	 * Renders the indeterminate state (filled track with the thumb parked at the
 	 * midpoint of its travel). Takes visual precedence over `checked`.
@@ -92,42 +162,64 @@ export type BbBaseSwitchIconProps = {
 ```css
 /* Standalone switch glyph. Self-contained: owns its tokens and drives every
    visual state from its own `--*` modifier classes so it can be used without
-   BbBaseSwitch. Override the tokens below on the element to restyle. */
+   BbSwitch. Override the tokens below on the element to restyle. */
 .bb-base-switch-icon {
-	--color: var(--bb-primary);
-	--bg-color: var(--bb-track);
+	/* Track fill and border once checked or indeterminate; --errors, --warnings
+	   and --disabled re-point it. */
+	--accent: var(--bb-primary);
+	--bg: var(--bb-track); /* track fill while off */
 	--ring-color: color-mix(
 		in oklab,
-		var(--color) var(--bb-ring-opacity),
+		currentColor var(--bb-ring-opacity),
 		transparent
-	);
-	--radius: 999px;
+	); /* focus ring; follows the accent colour (a consumer text colour too) —
+	      --errors / --warnings set their own */
+	--r: 999px; /* track corners; the thumb rounds to 80% of it */
 
 	/* Geometry — change --h / --w / --thumb freely: everything else is derived,
 	   so the thumb stays vertically centred and travels flush-to-flush at any
 	   size. --bw is the track border; the box is border-box, so the border eats
-	   into the inner track and has to be subtracted here. */
-	--bw: var(--bb-border-w);
-	--h: 18px;
-	--w: 32px;
-	--thumb: 16px;
+	   into the inner track and has to be subtracted here. Nested hairline
+	   (`--bb-border-w-sm`) so a 3px plate theme does not swallow an 18px track;
+	   a theme that wants the full plate stroke sets `--bw` on this class. */
+	--bw: var(--bb-border-w-sm);
+	--h: 18px; /* track height, border included (border-box) */
+	--w: 32px; /* track width, border included */
+	/* Capped by the track's inner height, so a thick-hairline theme shrinks the
+	   thumb instead of overflowing it. Unclamped, a 6px plate hairline leaves a
+	   12px inner track carrying a 16px thumb; `--inset` then goes negative and
+	   the thumb paints over its own border. `16px` at every hairline the
+	   library ships, so no shipped pixel moves.
+
+	   Do NOT floor `--inset` at 0 instead: that keeps the oversized thumb and
+	   pushes it out of the bottom of the track (measured +1px protrusion at a
+	   6px hairline), and it uncancels `--bw` from `--travel`, which is a
+	   constant 14px by construction. */
+	--thumb: min(16px, calc(var(--h) - 2 * var(--bw)));
 	/* Equal gap around the thumb — centres it vertically by construction, and
 	   is reused as the resting left/right inset. */
 	--inset: calc((var(--h) - 2 * var(--bw) - var(--thumb)) / 2);
 	/* How far the thumb slides between off and on (inset ↔ inset). */
 	--travel: calc(var(--w) - 2 * var(--bw) - var(--thumb) - 2 * var(--inset));
 
-	background-color: var(--bg-color);
+	background-color: var(--bg);
 	/* Fill is the recessed --bb-track surface; the edge is the border token in
 	   its own right, so the resting track reads clearly against the panel in
 	   both themes. --checked / --indeterminate override border-color below;
-	   --errors / --warnings retint --color itself (so the checked fill turns
+	   --errors / --warnings retint --accent itself (so the checked fill turns
 	   danger/warn too, matching the checkbox and radio glyphs) as well as
 	   border-color. */
 	border: var(--bw) solid var(--bb-border);
-	border-radius: var(--radius);
+	border-radius: var(--r);
 	box-shadow: 0px 0px 0px 0px var(--bb-ring);
 	box-sizing: border-box;
+
+	/* The accent paints through `color`, so the glyph takes a text colour like
+	   every other icon: `class` / `pt:*="text-emerald-600"` recolours it, and
+	   `--accent` stays the knob that sets the default. The resting checked
+	   fill reads `currentColor`; error, warning and disabled paint from
+	   `--accent` explicitly, so a consumer text colour never wins a state. */
+	color: var(--accent);
 	cursor: pointer;
 	display: inline-block;
 	height: var(--h);
@@ -139,7 +231,7 @@ export type BbBaseSwitchIconProps = {
 
 	&__thumb {
 		background-color: var(--bb-panel);
-		border-radius: calc(var(--radius) * 0.8);
+		border-radius: calc(var(--r) * 0.8);
 		display: inline-block;
 		height: var(--thumb);
 		left: var(--inset);
@@ -155,8 +247,8 @@ export type BbBaseSwitchIconProps = {
 	}
 
 	&--checked {
-		background-color: var(--color);
-		border-color: var(--color);
+		background-color: currentColor;
+		border-color: currentColor;
 
 		.bb-base-switch-icon__thumb {
 			translate: var(--travel) 0px;
@@ -166,8 +258,8 @@ export type BbBaseSwitchIconProps = {
 	/* Indeterminate: darken the track to the active color (matching the checkbox
 	   indeterminate state) and park the thumb in the middle of its travel. */
 	&--indeterminate {
-		background-color: var(--color);
-		border-color: var(--color);
+		background-color: currentColor;
+		border-color: currentColor;
 
 		.bb-base-switch-icon__thumb {
 			translate: calc(var(--travel) / 2) 0px;
@@ -175,27 +267,45 @@ export type BbBaseSwitchIconProps = {
 	}
 
 	&--errors {
-		--color: var(--bb-danger);
+		--accent: var(--bb-danger);
 		--ring-color: var(--bb-ring-danger);
 
 		border-color: var(--bb-danger);
 	}
 
 	&--warnings {
-		--color: var(--bb-warn);
+		--accent: var(--bb-warn);
 		--ring-color: var(--bb-ring-warn);
 
 		border-color: var(--bb-warn);
 	}
 
+	/* State fills beat a consumer text colour: painted from --accent, which the
+	   state set, not from `color`. */
+	&--errors,
+	&--warnings,
+	&--disabled {
+		&.bb-base-switch-icon--checked,
+		&.bb-base-switch-icon--indeterminate {
+			background-color: var(--accent);
+			border-color: var(--accent);
+		}
+	}
+
 	&--readonly {
 		/* Reserved for parity with the other glyphs; no distinct visual yet. */
 	}
 
 	&--disabled {
-		--color: var(--bb-muted);
+		--accent: var(--bb-muted);
+		/* The ring follows --accent here, not a consumer text colour. */
+		--ring-color: color-mix(
+			in oklab,
+			var(--accent) var(--bb-ring-opacity),
+			transparent
+		);
 
-		background-color: var(--color);
+		background-color: var(--accent);
 		cursor: not-allowed;
 
 		.bb-base-switch-icon__thumb {