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

package/dist/ai/source/BbColorInput.md

@@ -162,6 +162,7 @@ import {
 	formControlPtActive,
 	TEXT_CONTROL_NATIVE_ATTRS,
 	usePassthrough,
+	variantPt,
 } from '@/composables/usePassthrough';
 import { isHex } from '@/utilities/functions/isHex';
 import { isNotNil } from '@/utilities/functions/isNotNil';
@@ -178,7 +179,11 @@ import {
 	type BbColorInputSlots,
 } from './types';
 
-defineOptions({ inheritAttrs: false });
+defineOptions({
+	// An app's own variants as declared `pt:<part>:<name>` props (Q76.7).
+	mixins: [variantPt(BB_COLOR_INPUT_PT)],
+	inheritAttrs: false,
+});
 const declaredProps = withDefaults(defineProps<BbColorInputProps>(), {
 	// `undefined` (declared, not omitted) keeps `adaptive` three-state: it
 	// disables Vue's absent→`false` Boolean cast so BbColorPalette's
@@ -248,6 +253,11 @@ const passthrough = usePassthrough({
 	parts: BB_COLOR_INPUT_PT.parts,
 	states: BB_COLOR_INPUT_PT.states,
 	active: formControlPtActive(props, () => hasValue.value),
+	variant: {
+		...BB_COLOR_INPUT_PT.variant,
+		// CommonFieldInput's default.
+		current: () => props.variant ?? 'outline',
+	},
 });
 
 const wrapperRef = ref<InstanceType<typeof CommonFieldInput> | null>(null);
@@ -379,7 +389,12 @@ const indicatorBindings = (dotProps: Record<string, unknown>) =>
 ```ts
 import type { Responsive } from '@/types/ResponsiveSize';
 import type { BbOffCanvasProps } from '../BbOffCanvas/types';
-import type { InputVariantType } from '@/types/InputVariant';
+import {
+	INPUT_VARIANTS,
+	type InputVariantBuiltIn,
+	type InputVariantRegistry,
+	type InputVariantType,
+} from '@/types/InputVariant';
 import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import type { FieldCrossAlign, FieldLayout } from '@/types/FieldLayout';
 import type { IconType } from '@/types/Icon';
@@ -389,6 +404,7 @@ import {
 	type PtMap,
 	type PtValue,
 	type TextControlPtPart,
+	type PtVariantAttrs,
 } from '@/types/passthrough';
 import type { FormFieldProps } from '@/composables/useFormBinding';
 import type { CommonFieldAsteriskSlotProps } from '../CommonField/types';
@@ -437,7 +453,19 @@ export const BB_COLOR_INPUT_PT = {
 	/** `rowStates` are declared on `rowParts` only. */
 	rowParts: ['swatch'],
 	rowStates: ['selected'],
+	// The input `variant` is a state on the field's parts (Q76.7), below
+	// the real states; a picker's panel and rows are not the field's.
+	variant: {
+		names: INPUT_VARIANTS,
+		option: 'inputVariants',
+		parts: TEXT_CONTROL_PT_PARTS,
+	},
 } as const satisfies {
+	variant: {
+		names: readonly InputVariantBuiltIn[];
+		option: string;
+		parts: readonly TextControlPtPart[];
+	};
 	parts: readonly BbColorInputPtPart[];
 	states: readonly BbColorInputPtState[];
 	rowParts: readonly BbColorInputPtPart[];
@@ -453,208 +481,216 @@ export type BbColorInputProps = {
 	[K in
 		| `pt:${BbColorInputPtPart}`
 		| `pt:${BbColorInputPtPart}:${FormControlPtState}`
-		| 'pt:swatch:selected']?: PtValue;
-} & {
-	/**
-	 * Passthrough, object form: `{ box: '…', 'box:errors': '…' }` — the same
-	 * keys as the `pt:*` attributes without the prefix. See the `pt:<part>` row.
-	 */
-	pt?: PtMap<BbColorInputPtPart, FormControlPtState> & {
-		'swatch:selected'?: PtValue;
-	};
-	/**
-	 * When `true`, the color palette opens as a bottom off-canvas sheet on mobile
-	 * viewports instead of a floating popover; on desktop it stays a popover.
-	 * Mirrors the adaptive behaviour of `BbSelect`/`BbDatePickerInput`.
-	 *
-	 * When unset, falls back to the global `config.adaptive`.
-	 * @defaultValue `config.adaptive` (`true`)
-	 */
-	adaptive?: boolean;
-	/**
-	 * Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on
-	 * mobile), spread over its defaults. A `pt` inside it styles only the sheet
-	 * (passthrough guide § Inside the sheet). The sheet hides its ✕; `{
-	 * hideClose: false }` brings it back.
-	 */
-	offCanvasProps?: Partial<BbOffCanvasProps>;
-	/**
-	 * Enable the alpha channel. Shows an opacity slider and uses `#RRGGBBAA` hex8 format.
-	 *
-	 * @defaultValue `false`
-	 */
-	alpha?: boolean;
-	/**
-	 * Name of the icon to be added at the end of the input.
-	 */
-
-	'append:icon'?: IconType;
-	/**
-	 * Guides the browser as to the type of information expected in the field.
-	 *
-	 * @defaultValue `'off'`
-	 */
-	autocomplete?: InputHTMLAttributes['autocomplete'];
-	/**
-	 * Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field.
-	 */
-	autofocus?: InputHTMLAttributes['autofocus'];
-	/**
-	 * Displays a clear button when the input has a value and is being interacted with.
-	 */
-	clearable?: boolean;
-	/**
-	 * Compact density: the field uses the `-compact` twins of `--bb-input-h`,
-	 * `--bb-input-py` and `--bb-label-spacing-y`, so a `--bb-input-h` set on
-	 * the component is ignored while it is on. Size a compact field with
-	 * `--bb-input-h-compact` (and `--bb-input-py-compact`).
-	 */
-	compact?: boolean;
-
-	/**
-	 * The field box's look, with `BbButton`'s names and tokens. Colours only,
-	 * so a form never reflows; `'ghost'` has no border in any state, `'none'`
-	 * no look at all (you own hover, focus and the states). Register more with
-	 * the plugin's `inputVariants`.
-	 *
-	 * @defaultValue `'outline'`
-	 */
-	variant?: InputVariantType;
-	/**
-	 * Text between the label and the input. Unlike the hint it is always
-	 * visible; it joins the input's `aria-describedby` after any `errors` /
-	 * `warnings`, before the `hint`.
-	 */
-	description?: string;
-
-	/**
-	 * How label and input sit together: `'vertical'`, `'horizontal'` (50/50),
-	 * `'auto'`, `'label-fill'`, `'input-fill'`, a ratio like `'xx xxxxx'`, or a
-	 * per-breakpoint map (`{ default: 'vertical', md: 'xx xxxxx' }`).
-	 */
-	layout?: Responsive<FieldLayout>;
-
-	/**
-	 * Vertical position of the label block in a side-by-side row; not
-	 * `labelPosition`, the horizontal one. Omitted, the label's first line
-	 * meets the control's.
-	 */
-	labelAlign?: FieldCrossAlign;
-
-	/**
-	 * Vertical position of the control in a side-by-side row; not
-	 * `inputPosition`, the horizontal one. Omitted, the control's first line
-	 * meets the label's.
-	 */
-	inputAlign?: FieldCrossAlign;
-	/**
-	 * Disables the component.
-	 */
-	disabled?: boolean;
-	/**
-	 * Error messages under the field, a string or array, in an
-	 * `aria-live="polite"` region and first in the control's
-	 * `aria-describedby`, so they are re-read when it regains focus.
-	 */
-	errors?: string | string[];
-	/**
-	 * Define if the component should be in an error state.
-	 * It usually attaches a CSS class for styling purposes.
-	 */
-	hasErrors?: boolean;
-	/**
-	 * Warning messages under the field, a string or array: amber, in their own
-	 * `aria-live` region and in the control's `aria-describedby` after the
-	 * errors. Non-empty turns on the warning state; errors win when both are
-	 * set.
-	 */
-	warnings?: string | string[];
-
-	/**
-	 * Define if the component should be in a warning state.
-	 * Same chrome as errors with `--bb-warn`; errors take priority.
-	 */
-	hasWarnings?: boolean;
-	/**
-	 * Visually hides the label of the input while maintaining accessibility.
-	 */
-	hideLabel?: boolean;
-	/**
-	 * Text box to be displayed near the input, usually to indicate instructions.
-	 */
-	hint?: string;
-	/**
-	 * The `id` of the native control; the label's `for` and the description
-	 * and message ids derive from it. Generated when omitted.
-	 */
-	id?: HTMLAttributes['id'];
-	/**
-	 * Text content of the label of the element.
-	 */
-	label: string;
-	/**
-	 * Label rendering mode: `outside` places the label above the input,
-	 * `floating` overlays it on the field and shrinks it when a value is set,
-	 * `inside` keeps it inside the field.
-	 */
-	labelMode?: 'outside' | 'floating' | 'inside';
-	/**
-	 * Sets the text alignment of the label.
-	 */
-	labelPosition?: 'left' | 'center' | 'right';
-	/**
-	 * Sets the component in a loading state, usually triggering some visual styles.
-	 */
-	loading?: boolean;
-	/**
-	 * Used by v-model.
-	 * @defaultValue `null`
-	 */
-	modelValue?: string | null;
-	/**
-	 * Defines the name of the input.
-	 */
-	name?: InputHTMLAttributes['name'];
-	/**
-	 * Keeps the hint displayed.
-	 */
-	persistentHint?: boolean;
-	/**
-	 * Show an eyedropper button to sample any color on screen.
-	 * Uses the native EyeDropper API — hidden automatically on unsupported browsers.
-	 *
-	 * @defaultValue `false`
-	 */
-	eyeDropper?: boolean;
-	/**
-	 * Text shown while the field is empty.
-	 */
-	placeholder?: InputHTMLAttributes['placeholder'];
-	/**
-	 * Name of the icon to be added at the start of the input.
-	 */
-
-	'prepend:icon'?: IconType;
-	/**
-	 * Sets the input in a readonly state.
-	 */
-	readonly?: boolean;
-	/**
-	 * Sets the input as required.
-	 */
-	required?: boolean;
-	/**
-	 * Reverses the layout. Applicable in every direction the order of the label and the input is swapped.
-	 */
-	reverse?: boolean;
-	/**
-	 * Controls swatches display in the picker:
-	 * - `true`       — show the built-in Material-palette swatches
-	 * - `string[][]` — show custom swatches (each inner array = a column of shades)
-	 * - `false` / omitted — no swatches section
-	 */
-	swatches?: boolean | string[][];
-} & FormFieldProps<string | null>;
+		| 'pt:swatch:selected'
+		| `pt:${TextControlPtPart}:${InputVariantBuiltIn}`]?: PtValue;
+} & /* @vue-ignore */ PtVariantAttrs<
+	TextControlPtPart,
+	keyof InputVariantRegistry
+> & {
+		/**
+		 * Passthrough, object form: `{ box: '…', 'box:errors': '…' }` — the same
+		 * keys as the `pt:*` attributes without the prefix. See the `pt:<part>` row.
+		 */
+		/* eslint-disable @typescript-eslint/consistent-indexed-object-style -- mapped, never Record (T23) */
+		pt?: PtMap<BbColorInputPtPart, FormControlPtState> & {
+			'swatch:selected'?: PtValue;
+		} & {
+			[K in `${TextControlPtPart}:${InputVariantBuiltIn | keyof InputVariantRegistry}`]?: PtValue;
+		};
+		/* eslint-enable @typescript-eslint/consistent-indexed-object-style */
+		/**
+		 * When `true`, the color palette opens as a bottom off-canvas sheet on mobile
+		 * viewports instead of a floating popover; on desktop it stays a popover.
+		 * Mirrors the adaptive behaviour of `BbSelect`/`BbDatePickerInput`.
+		 *
+		 * When unset, falls back to the global `config.adaptive`.
+		 * @defaultValue `config.adaptive` (`true`)
+		 */
+		adaptive?: boolean;
+		/**
+		 * Props for the phone sheet (the `BbOffCanvas` that `adaptive` renders on
+		 * mobile), spread over its defaults. A `pt` inside it styles only the sheet
+		 * (passthrough guide § Inside the sheet). The sheet hides its ✕; `{
+		 * hideClose: false }` brings it back.
+		 */
+		offCanvasProps?: Partial<BbOffCanvasProps>;
+		/**
+		 * Enable the alpha channel. Shows an opacity slider and uses `#RRGGBBAA` hex8 format.
+		 *
+		 * @defaultValue `false`
+		 */
+		alpha?: boolean;
+		/**
+		 * Name of the icon to be added at the end of the input.
+		 */
+
+		'append:icon'?: IconType;
+		/**
+		 * Guides the browser as to the type of information expected in the field.
+		 *
+		 * @defaultValue `'off'`
+		 */
+		autocomplete?: InputHTMLAttributes['autocomplete'];
+		/**
+		 * Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field.
+		 */
+		autofocus?: InputHTMLAttributes['autofocus'];
+		/**
+		 * Displays a clear button when the input has a value and is being interacted with.
+		 */
+		clearable?: boolean;
+		/**
+		 * Compact density: the field uses the `-compact` twins of `--bb-input-h`,
+		 * `--bb-input-py` and `--bb-label-spacing-y`, so a `--bb-input-h` set on
+		 * the component is ignored while it is on. Size a compact field with
+		 * `--bb-input-h-compact` (and `--bb-input-py-compact`).
+		 */
+		compact?: boolean;
+
+		/**
+		 * The field box's look, with `BbButton`'s names and tokens. Colours only,
+		 * so a form never reflows; `'ghost'` has no border in any state, `'none'`
+		 * no look at all (you own hover, focus and the states). Register more with
+		 * the plugin's `inputVariants`.
+		 *
+		 * @defaultValue `'outline'`
+		 */
+		variant?: InputVariantType;
+		/**
+		 * Text between the label and the input. Unlike the hint it is always
+		 * visible; it joins the input's `aria-describedby` after any `errors` /
+		 * `warnings`, before the `hint`.
+		 */
+		description?: string;
+
+		/**
+		 * How label and input sit together: `'vertical'`, `'horizontal'` (50/50),
+		 * `'auto'`, `'label-fill'`, `'input-fill'`, a ratio like `'xx xxxxx'`, or a
+		 * per-breakpoint map (`{ default: 'vertical', md: 'xx xxxxx' }`).
+		 */
+		layout?: Responsive<FieldLayout>;
+
+		/**
+		 * Vertical position of the label block in a side-by-side row; not
+		 * `labelPosition`, the horizontal one. Omitted, the label's first line
+		 * meets the control's.
+		 */
+		labelAlign?: FieldCrossAlign;
+
+		/**
+		 * Vertical position of the control in a side-by-side row; not
+		 * `inputPosition`, the horizontal one. Omitted, the control's first line
+		 * meets the label's.
+		 */
+		inputAlign?: FieldCrossAlign;
+		/**
+		 * Disables the component.
+		 */
+		disabled?: boolean;
+		/**
+		 * Error messages under the field, a string or array, in an
+		 * `aria-live="polite"` region and first in the control's
+		 * `aria-describedby`, so they are re-read when it regains focus.
+		 */
+		errors?: string | string[];
+		/**
+		 * Define if the component should be in an error state.
+		 * It usually attaches a CSS class for styling purposes.
+		 */
+		hasErrors?: boolean;
+		/**
+		 * Warning messages under the field, a string or array: amber, in their own
+		 * `aria-live` region and in the control's `aria-describedby` after the
+		 * errors. Non-empty turns on the warning state; errors win when both are
+		 * set.
+		 */
+		warnings?: string | string[];
+
+		/**
+		 * Define if the component should be in a warning state.
+		 * Same chrome as errors with `--bb-warn`; errors take priority.
+		 */
+		hasWarnings?: boolean;
+		/**
+		 * Visually hides the label of the input while maintaining accessibility.
+		 */
+		hideLabel?: boolean;
+		/**
+		 * Text box to be displayed near the input, usually to indicate instructions.
+		 */
+		hint?: string;
+		/**
+		 * The `id` of the native control; the label's `for` and the description
+		 * and message ids derive from it. Generated when omitted.
+		 */
+		id?: HTMLAttributes['id'];
+		/**
+		 * Text content of the label of the element.
+		 */
+		label: string;
+		/**
+		 * Label rendering mode: `outside` places the label above the input,
+		 * `floating` overlays it on the field and shrinks it when a value is set,
+		 * `inside` keeps it inside the field.
+		 */
+		labelMode?: 'outside' | 'floating' | 'inside';
+		/**
+		 * Sets the text alignment of the label.
+		 */
+		labelPosition?: 'left' | 'center' | 'right';
+		/**
+		 * Sets the component in a loading state, usually triggering some visual styles.
+		 */
+		loading?: boolean;
+		/**
+		 * Used by v-model.
+		 * @defaultValue `null`
+		 */
+		modelValue?: string | null;
+		/**
+		 * Defines the name of the input.
+		 */
+		name?: InputHTMLAttributes['name'];
+		/**
+		 * Keeps the hint displayed.
+		 */
+		persistentHint?: boolean;
+		/**
+		 * Show an eyedropper button to sample any color on screen.
+		 * Uses the native EyeDropper API — hidden automatically on unsupported browsers.
+		 *
+		 * @defaultValue `false`
+		 */
+		eyeDropper?: boolean;
+		/**
+		 * Text shown while the field is empty.
+		 */
+		placeholder?: InputHTMLAttributes['placeholder'];
+		/**
+		 * Name of the icon to be added at the start of the input.
+		 */
+
+		'prepend:icon'?: IconType;
+		/**
+		 * Sets the input in a readonly state.
+		 */
+		readonly?: boolean;
+		/**
+		 * Sets the input as required.
+		 */
+		required?: boolean;
+		/**
+		 * Reverses the layout. Applicable in every direction the order of the label and the input is swapped.
+		 */
+		reverse?: boolean;
+		/**
+		 * Controls swatches display in the picker:
+		 * - `true`       — show the built-in Material-palette swatches
+		 * - `string[][]` — show custom swatches (each inner array = a column of shades)
+		 * - `false` / omitted — no swatches section
+		 */
+		swatches?: boolean | string[][];
+	} & FormFieldProps<string | null>;
 
 /**
  * Events emitted by the color input.

package/dist/ai/source/BbColorPalette.md

@@ -267,7 +267,10 @@ import {
 } from 'vue';
 import { useConfig } from '@/composables/useConfig';
 import { createReusableTemplate } from '@vueuse/core';
-import { extractDomContainer } from '@/utilities/functions/extractDomContainer';
+import {
+	extractDomContainer,
+	type DomHost,
+} from '@/utilities/functions/extractDomContainer';
 import { useClosingInert } from '@/composables/useClosingInert';
 import { useId } from '@/composables/useId';
 import { useLocale } from '@/composables/useLocale';
@@ -344,8 +347,8 @@ const [DefinePalette, ReusePalette] = createReusableTemplate();
 
 // ---- Activator element ---------------------------------------------------------
 
-const activatorEl = ref<HTMLElement | undefined>();
-const anchorEl = ref<HTMLElement | undefined>();
+const activatorEl = ref<DomHost | undefined>();
+const anchorEl = ref<DomHost | undefined>();
 const hasExternalActivator = computed(() => props.activator != null);
 
 /** Ref callback passed to the activator slot. */
@@ -550,7 +553,7 @@ const activatorLabelledby = computed(() =>
  * `props` and an external `activator` alike. Only what was set here is
  * removed again.
  */
-const markedDisabled = new WeakSet<HTMLElement>();
+const markedDisabled = new WeakSet<DomHost>();
 
 /** What the `#activator` slot's `props` spread onto the trigger. */
 const activatorSlotProps = computed<BbColorPaletteActivatorProps>(() =>

package/dist/ai/source/BbConfirm.md

@@ -105,7 +105,7 @@ import {
 import { useId } from '@/composables/useId';
 import { useConfig } from '@/composables/useConfig';
 import BbDialog from '../BbDialog/BbDialog.vue';
-import { usePassthrough } from '@/composables/usePassthrough';
+import { usePassthrough, variantPt } from '@/composables/usePassthrough';
 import { BB_DIALOG_PT } from '../BbDialog/types';
 import { BB_CONFIRM_PT, type BbConfirmProps } from './types';
 import { CONFIRM_ENTRY } from './confirmEntry';
@@ -117,7 +117,11 @@ import BbButton from '../BbButton/BbButton.vue';
 // Reaches the <dialog> root through fallthrough attrs (same route d8a21c73
 // used for the adaptive sheets' aria-labelledby). Portal content is arbitrary
 // markup, so it deliberately gets no describedby.
-defineOptions({ inheritAttrs: false });
+defineOptions({
+	// An app's own variants as declared `pt:<part>:<name>` props (Q76.7).
+	mixins: [variantPt(BB_CONFIRM_PT)],
+	inheritAttrs: false,
+});
 const props = defineProps<BbConfirmProps>();
 
 /**
@@ -147,6 +151,10 @@ const passthrough = usePassthrough({
 	parts: BB_CONFIRM_PT.parts,
 	states: BB_CONFIRM_PT.states,
 	active: { open: () => state.processing },
+	variant: {
+		...BB_CONFIRM_PT.variant,
+		current: () => current.value?.variant ?? 'default',
+	},
 });
 
 /**
@@ -242,7 +250,12 @@ const onClose = (value: boolean) => {
 ## Types
 
 ```ts
-import type { PtMap, PtValue } from '@/types/passthrough';
+import type { PtMap, PtValue, PtVariantAttrs } from '@/types/passthrough';
+import {
+	CONFIRM_VARIANTS,
+	type ConfirmVariantBuiltIn,
+	type ConfirmVariantRegistry,
+} from '@/types/ConfirmVariant';
 
 /**
  * Passthrough parts of `BbConfirm` (plans/passthrough/BbConfirm.md). Every
@@ -294,9 +307,12 @@ export const BB_CONFIRM_PT = {
 		'action',
 	],
 	states: ['open'],
+	// The message's `variant` is a state on every part (Q76.7), below `open`.
+	variant: { names: CONFIRM_VARIANTS, option: 'confirmVariants' },
 } as const satisfies {
 	parts: readonly BbConfirmPtPart[];
 	states: readonly BbConfirmPtState[];
+	variant: { names: readonly ConfirmVariantBuiltIn[]; option: string };
 };
 
 // Spelled INLINE with this component's own unions (Vue's SFC type resolver
@@ -305,14 +321,21 @@ export const BB_CONFIRM_PT = {
 export type BbConfirmProps = {
 	[K in
 		| `pt:${BbConfirmPtPart}`
-		| `pt:${BbConfirmPtPart}:${BbConfirmPtState}`]?: PtValue;
-} & {
-	/**
-	 * Passthrough, object form: the same keys as the `pt:*` attributes
-	 * without the prefix. See the `pt:<part>` row.
-	 */
-	pt?: PtMap<BbConfirmPtPart, BbConfirmPtState>;
-};
+		| `pt:${BbConfirmPtPart}:${BbConfirmPtState}`
+		| `pt:${BbConfirmPtPart}:${ConfirmVariantBuiltIn}`]?: PtValue;
+} & /* @vue-ignore */ PtVariantAttrs<
+	BbConfirmPtPart,
+	keyof ConfirmVariantRegistry
+> & {
+		/**
+		 * Passthrough, object form: the same keys as the `pt:*` attributes
+		 * without the prefix. See the `pt:<part>` row.
+		 */
+		pt?: PtMap<
+			BbConfirmPtPart,
+			BbConfirmPtState | ConfirmVariantBuiltIn | keyof ConfirmVariantRegistry
+		>;
+	};
 
 /**
  * The default slot scope of `<BbConfirmPortal>`: the ONE place this family's