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

package/dist/ai/source/BbNumberInput.md

@@ -175,6 +175,7 @@ import {
 	formControlPtActive,
 	TEXT_CONTROL_NATIVE_ATTRS,
 	usePassthrough,
+	variantPt,
 } from '@/composables/usePassthrough';
 import { clamp } from '@/utilities/functions/clamp';
 import { clampPrecision } from '@/utilities/functions/clampPrecision';
@@ -213,7 +214,11 @@ import {
 	type BbNumberInputSlots,
 } from './types';
 
-defineOptions({ inheritAttrs: false });
+defineOptions({
+	// An app's own variants as declared `pt:<part>:<name>` props (Q76.7).
+	mixins: [variantPt(BB_NUMBER_INPUT_PT)],
+	inheritAttrs: false,
+});
 // `min` / `max` / `step` drive the clamp and step math and `aria-valuemin` /
 // `aria-valuemax` (the SAFE_INTEGER sentinels stay silent), so they are
 // defaulted here, before anything reads them. `maxPrecision` / `minPrecision`
@@ -278,6 +283,11 @@ const passthrough = usePassthrough({
 	parts: BB_NUMBER_INPUT_PT.parts,
 	states: BB_NUMBER_INPUT_PT.states,
 	active: formControlPtActive(props, () => hasValue.value),
+	variant: {
+		...BB_NUMBER_INPUT_PT.variant,
+		// CommonFieldInput's default.
+		current: () => props.variant ?? 'outline',
+	},
 });
 
 const input = ref<HTMLInputElement | null>(null);
@@ -1327,7 +1337,12 @@ watch([symbols, shownMinPrecision, maxPrecision, legacy, affix], () => {
 
 ```ts
 import type { Responsive } from '@/types/ResponsiveSize';
-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';
@@ -1338,6 +1353,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';
@@ -1358,7 +1374,19 @@ export type BbNumberInputPtState = FormControlPtState;
 export const BB_NUMBER_INPUT_PT = {
 	parts: TEXT_CONTROL_PT_PARTS,
 	states: FORM_CONTROL_PT_STATES,
+	// 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 BbNumberInputPtPart[];
 	states: readonly BbNumberInputPtState[];
 };
@@ -1431,261 +1459,269 @@ export type BbNumberUnit = BbNumberSimpleUnit | `${string}-per-${string}`;
 export type BbNumberInputProps = {
 	[K in
 		| `pt:${BbNumberInputPtPart}`
-		| `pt:${BbNumberInputPtPart}:${BbNumberInputPtState}`]?: PtValue;
-} & {
-	/**
-	 * Passthrough, object form: `{ box: '…', 'box:errors': '…' }` — the same
-	 * keys as the `pt:*` attributes without the prefix. See the `pt:<part>` row.
-	 */
-	pt?: PtMap<BbNumberInputPtPart, BbNumberInputPtState>;
-	/**
-	 * 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;
-
-	/**
-	 * An ISO 4217 code (`'EUR'`): the amount shows the locale's way, symbol
-	 * inside the text (`1.234,56 €`), leaving `#prefix` / `#suffix` free; the
-	 * model is the number. Decimals default to the currency's; `minPrecision` /
-	 * `maxPrecision` win. Not with `unit`.
-	 */
-	currency?: string;
-
-	/**
-	 * 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;
-
-	/**
-	 * Sets the text alignment of the label.
-	 */
-	labelPosition?: 'left' | 'center' | 'right';
-
-	/**
-	 * Label rendering mode.
-	 */
-	labelMode?: 'outside' | 'floating' | 'inside';
-
-	/**
-	 * Sets the component in a loading state, usually triggering some visual styles.
-	 */
-	loading?: boolean;
-
-	/**
-	 * Maximum value cap.
-	 *
-	 * @defaultValue `Number.MAX_SAFE_INTEGER`
-	 */
-	max?: number;
-
-	/**
-	 * Maximum precision of the number: fraction digits past it are refused as
-	 * typed (never rounded). With `currency`, the currency's own digits (`2`
-	 * for EUR, `0` for JPY, `3` for KWD), or `minPrecision` when that is larger.
-	 *
-	 * @defaultValue `8`
-	 */
-	maxPrecision?: number;
-
-	/**
-	 * Fraction digits always shown (`2`: `1` shows `1,00`), also while typing,
-	 * where the padding zeros are placeholders; the model stays the number.
-	 * Above `maxPrecision` it gives way. Applies with `disableFormatting` too.
-	 * With `currency`: the currency's own digits.
-	 *
-	 * @defaultValue `0`
-	 */
-	minPrecision?: number;
-
-	/**
-	 * Shows the number as typed (period decimal, no grouping), with `name` on
-	 * the visible input. Without it the field formats the locale's way while
-	 * typing (`10.005,6`) and posts the raw value (`10005.6`) through a hidden
-	 * input carrying `name`.
-	 *
-	 * @defaultValue `false`
-	 */
-	disableFormatting?: boolean;
-
-	/**
-	 * Minimum value cap. Applied on blur and on Enter (before a surrounding
-	 * form submits), not while typing, so a value above a `min` greater than 1
-	 * can be typed digit by digit.
-	 *
-	 * @defaultValue `Number.MIN_SAFE_INTEGER`
-	 */
-	min?: number;
-
-	/**
-	 * Used by v-model.
-	 *
-	 * @defaultValue `null`
-	 */
-	modelValue?: number | string | null;
-
-	/**
-	 * Defines the name of the input.
-	 */
-	name?: InputHTMLAttributes['name'];
-
-	/**
-	 * Keeps the hint displayed.
-	 */
-	persistentHint?: 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;
-
-	/**
-	 * Marks the input required (asterisk, aria-required, native validation in a plain form). Inside a BbForm it is not enforced; use rules="required" or the schema.
-	 */
-	required?: boolean;
-
-	/**
-	 * Reverses the layout. Applicable in every direction the order of the label and the input is swapped.
-	 */
-	reverse?: boolean;
-
-	/**
-	 * Incremental unit used by ArrowUp / ArrowDown and by the `increase` and `decrease` functions the slots receive.
-	 * It is NOT applied to manual input as a step of 5 would prevent the user from inserting a value like `115` because of rounding down.
-	 *
-	 * @defaultValue `1`
-	 */
-	step?: number;
-
-	/**
-	 * A unit `Intl.NumberFormat` knows (`'kilogram'`, `'celsius'`,
-	 * `'percent'`), shown the locale's way inside the text (`20 kg`). The model
-	 * is the number you see: `percent` showing `15 %` holds `15`. Not with
-	 * `currency` (which wins).
-	 */
-	unit?: BbNumberUnit;
-} & FormFieldProps<number | string | null>;
+		| `pt:${BbNumberInputPtPart}:${BbNumberInputPtState}`
+		| `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<BbNumberInputPtPart, BbNumberInputPtState> & {
+			[K in `${TextControlPtPart}:${InputVariantBuiltIn | keyof InputVariantRegistry}`]?: PtValue;
+		};
+		/* eslint-enable @typescript-eslint/consistent-indexed-object-style */
+		/**
+		 * 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;
+
+		/**
+		 * An ISO 4217 code (`'EUR'`): the amount shows the locale's way, symbol
+		 * inside the text (`1.234,56 €`), leaving `#prefix` / `#suffix` free; the
+		 * model is the number. Decimals default to the currency's; `minPrecision` /
+		 * `maxPrecision` win. Not with `unit`.
+		 */
+		currency?: string;
+
+		/**
+		 * 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;
+
+		/**
+		 * Sets the text alignment of the label.
+		 */
+		labelPosition?: 'left' | 'center' | 'right';
+
+		/**
+		 * Label rendering mode.
+		 */
+		labelMode?: 'outside' | 'floating' | 'inside';
+
+		/**
+		 * Sets the component in a loading state, usually triggering some visual styles.
+		 */
+		loading?: boolean;
+
+		/**
+		 * Maximum value cap.
+		 *
+		 * @defaultValue `Number.MAX_SAFE_INTEGER`
+		 */
+		max?: number;
+
+		/**
+		 * Maximum precision of the number: fraction digits past it are refused as
+		 * typed (never rounded). With `currency`, the currency's own digits (`2`
+		 * for EUR, `0` for JPY, `3` for KWD), or `minPrecision` when that is larger.
+		 *
+		 * @defaultValue `8`
+		 */
+		maxPrecision?: number;
+
+		/**
+		 * Fraction digits always shown (`2`: `1` shows `1,00`), also while typing,
+		 * where the padding zeros are placeholders; the model stays the number.
+		 * Above `maxPrecision` it gives way. Applies with `disableFormatting` too.
+		 * With `currency`: the currency's own digits.
+		 *
+		 * @defaultValue `0`
+		 */
+		minPrecision?: number;
+
+		/**
+		 * Shows the number as typed (period decimal, no grouping), with `name` on
+		 * the visible input. Without it the field formats the locale's way while
+		 * typing (`10.005,6`) and posts the raw value (`10005.6`) through a hidden
+		 * input carrying `name`.
+		 *
+		 * @defaultValue `false`
+		 */
+		disableFormatting?: boolean;
+
+		/**
+		 * Minimum value cap. Applied on blur and on Enter (before a surrounding
+		 * form submits), not while typing, so a value above a `min` greater than 1
+		 * can be typed digit by digit.
+		 *
+		 * @defaultValue `Number.MIN_SAFE_INTEGER`
+		 */
+		min?: number;
+
+		/**
+		 * Used by v-model.
+		 *
+		 * @defaultValue `null`
+		 */
+		modelValue?: number | string | null;
+
+		/**
+		 * Defines the name of the input.
+		 */
+		name?: InputHTMLAttributes['name'];
+
+		/**
+		 * Keeps the hint displayed.
+		 */
+		persistentHint?: 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;
+
+		/**
+		 * Marks the input required (asterisk, aria-required, native validation in a plain form). Inside a BbForm it is not enforced; use rules="required" or the schema.
+		 */
+		required?: boolean;
+
+		/**
+		 * Reverses the layout. Applicable in every direction the order of the label and the input is swapped.
+		 */
+		reverse?: boolean;
+
+		/**
+		 * Incremental unit used by ArrowUp / ArrowDown and by the `increase` and `decrease` functions the slots receive.
+		 * It is NOT applied to manual input as a step of 5 would prevent the user from inserting a value like `115` because of rounding down.
+		 *
+		 * @defaultValue `1`
+		 */
+		step?: number;
+
+		/**
+		 * A unit `Intl.NumberFormat` knows (`'kilogram'`, `'celsius'`,
+		 * `'percent'`), shown the locale's way inside the text (`20 kg`). The model
+		 * is the number you see: `percent` showing `15 %` holds `15`. Not with
+		 * `currency` (which wins).
+		 */
+		unit?: BbNumberUnit;
+	} & FormFieldProps<number | string | null>;
 
 export type BbNumberInputEvents = {
 	/**