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

package/dist/ai/source/BbToast.md

@@ -35,7 +35,7 @@ import {
 	useAttrs,
 	watch,
 } from 'vue';
-import { usePassthrough } from '@/composables/usePassthrough';
+import { usePassthrough, variantPt } from '@/composables/usePassthrough';
 import { useConfig } from '@/composables/useConfig';
 import {
 	toastState,
@@ -49,7 +49,11 @@ import type { BbToast, BbToastPosition } from './types';
 import BbToastRegion from './BbToastRegion.vue';
 import { BB_TOAST_PT, type BbToastProps } from './types';
 
-defineOptions({ inheritAttrs: false });
+defineOptions({
+	// An app's own variants as declared `pt:<part>:<name>` props (Q76.7).
+	mixins: [variantPt(BB_TOAST_PT)],
+	inheritAttrs: false,
+});
 const props = defineProps<BbToastProps>();
 
 /** Passthrough (plans/passthrough/BbToast.md) — handed down to every region and card. */
@@ -60,6 +64,8 @@ const passthrough = usePassthrough({
 	parts: BB_TOAST_PT.parts,
 	states: BB_TOAST_PT.states,
 	active: {},
+	// Per toast: each card passes its own variant to `part()`.
+	variant: BB_TOAST_PT.variant,
 });
 
 const config = useConfig();
@@ -151,9 +157,14 @@ const regions = computed(() => {
 
 ```ts
 import type { Component } from 'vue';
-import type { PtMap, PtValue } from '@/types/passthrough';
+import type { PtMap, PtValue, PtVariantAttrs } from '@/types/passthrough';
 import type { IconType } from '@/types/Icon';
-import type { ToastVariantType } from '@/types/ToastVariant';
+import {
+	TOAST_VARIANTS,
+	type ToastVariantBuiltIn,
+	type ToastVariantRegistry,
+	type ToastVariantType,
+} from '@/types/ToastVariant';
 import type { ActionButtonConfig } from '@/types/ActionButton';
 
 /**
@@ -324,11 +335,31 @@ export const BB_TOAST_PT = {
 		'close',
 	],
 	rowStates: ['loading'],
+	// Each toast's `variant` is a state on its card parts (Q76.7), below `loading`.
+	variant: {
+		names: TOAST_VARIANTS,
+		option: 'toastVariants',
+		parts: [
+			'panel',
+			'icon',
+			'content',
+			'title',
+			'text',
+			'footer',
+			'action',
+			'close',
+		],
+	},
 } as const satisfies {
 	parts: readonly BbToastPtPart[];
 	states: readonly BbToastPtState[];
 	rowParts: readonly BbToastPtPart[];
 	rowStates: readonly BbToastPtState[];
+	variant: {
+		names: readonly ToastVariantBuiltIn[];
+		option: string;
+		parts: readonly BbToastCardPtPart[];
+	};
 };
 
 // Spelled INLINE with this component's own union (Vue's SFC type resolver
@@ -336,18 +367,26 @@ export const BB_TOAST_PT = {
 // `loading` is a card state: declared on the card parts, never on `root`.
 // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
 export type BbToastProps = {
-	[K in `pt:${BbToastPtPart}` | `pt:${BbToastCardPtPart}:loading`]?: PtValue;
-} & {
-	/**
-	 * Passthrough, object form: the same keys as the `pt:*` attributes
-	 * without the prefix. See the `pt:<part>` row.
-	 */
-	// Mapped, never `Record` (the SFC resolver reads only the mapped spelling, T23).
-	// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
-	pt?: PtMap<BbToastPtPart, never> & {
-		[K in `${BbToastCardPtPart}:loading`]?: PtValue;
+	[K in
+		| `pt:${BbToastPtPart}`
+		| `pt:${BbToastCardPtPart}:loading`
+		| `pt:${BbToastCardPtPart}:${ToastVariantBuiltIn}`]?: PtValue;
+} & /* @vue-ignore */ PtVariantAttrs<
+	BbToastCardPtPart,
+	keyof ToastVariantRegistry
+> & {
+		/**
+		 * Passthrough, object form: the same keys as the `pt:*` attributes
+		 * without the prefix. See the `pt:<part>` row.
+		 */
+		// Mapped, never `Record` (the SFC resolver reads only the mapped spelling, T23).
+		// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
+		pt?: PtMap<BbToastPtPart, never> & {
+			[K in
+				| `${BbToastCardPtPart}:loading`
+				| `${BbToastCardPtPart}:${ToastVariantBuiltIn | keyof ToastVariantRegistry}`]?: PtValue;
+		};
 	};
-};
 ```
 
 ## Styles
@@ -362,7 +401,7 @@ export type BbToastProps = {
  *   --front-index    distance from the front of the pile (0 = newest/front)
  *   --height-before  combined px height of the toasts in front (expanded layout)
  *   --front-height   px height of the front toast (collapsed pile sizing)
- *   --toast-height   px height of this toast's own content
+ *   --toast-height   px height of this toast's card (content + edge)
  *   --z              z-index (front toast highest)
  *   --swipe-amount   live px offset while the user drags to dismiss
  *
@@ -448,8 +487,10 @@ export type BbToastProps = {
 	--r: min(var(--bb-radius), 10px);
 	--ring-size: 2px; /* focus ring on the close button */
 	--bg: var(--bb-panel); /* card fill, and the close button's own fill */
-	/* Card edge, painted as an inset ring (the card carries no `border`) */
-	--border-color: var(--bb-border);
+	--border-color: var(--bb-border); /* card edge */
+	/* Edge width: a real `border`, counted in the measured height; the inner
+	   padding and the × take it back, so the card keeps its size. */
+	--bw: var(--bb-border-w);
 	--fg: var(--bb-text); /* title, text and close glyph */
 	/* The status glyph only — the variants below re-point this and nothing else */
 	--icon-color: var(--bb-text);
@@ -462,15 +503,12 @@ export type BbToastProps = {
 	-webkit-backdrop-filter: var(--bb-surface-filter);
 	backdrop-filter: var(--bb-surface-filter);
 	background-color: var(--bg);
+	border: var(--bw) solid var(--border-color);
 	border-radius: min(var(--r), 14px);
-	/* --bb-shadow like every other floating surface (BbDialog, BbPopover, …) —
-	   was a hand-rolled light-only pair that stayed flat once the page went
-	   dark. The inset ring is the border; kept as its own layer since the card
-	   has no `border` property to carry it. */
-	box-shadow:
-		var(--bb-shadow),
-		inset 0 0 0 var(--bb-border-w) var(--border-color);
-
+	/* --bb-shadow like every other floating surface (BbDialog, BbPopover, …),
+	   alone in the property, so `--bb-shadow: none` turns it off and keeps
+	   the edge. */
+	box-shadow: var(--bb-shadow);
 	box-sizing: border-box;
 	color: var(--fg);
 	height: var(--toast-height);
@@ -559,7 +597,7 @@ export type BbToastProps = {
 	box-sizing: border-box;
 	display: flex;
 	gap: 12px;
-	padding: 14px 16px;
+	padding: calc(14px - var(--bw)) calc(16px - var(--bw));
 	transition: opacity 0.3s var(--bb-ease);
 	width: 100%;
 }
@@ -633,12 +671,14 @@ export type BbToastProps = {
 	cursor: pointer;
 	display: flex;
 	height: 22px;
-	inset-inline-end: 8px;
+	/* 8px from the card's outer corner: the containing block starts inside
+	   the edge. */
+	inset-inline-end: calc(8px - var(--bw));
 	justify-content: center;
 	opacity: 0;
 	padding: 0;
 	position: absolute;
-	top: 8px;
+	top: calc(8px - var(--bw));
 	transition:
 		opacity 0.15s var(--bb-ease),
 		background-color 0.15s var(--bb-ease);
@@ -729,10 +769,11 @@ export type BbToastProps = {
 		&::after {
 			--hit: 44px;
 			content: '';
-			height: calc(var(--hit) - 2px);
-			inset-inline-end: -8px; /* the button's inset from the card corner */
+			/* From inside the edge (the card clips there), bottom unchanged. */
+			height: calc(var(--hit) - 2px - var(--bw));
+			inset-inline-end: calc(var(--bw) - 8px);
 			position: absolute;
-			top: -8px;
+			top: calc(var(--bw) - 8px);
 			width: var(--hit);
 		}
 	}

package/dist/ai/source/BbToastPortal.md

@@ -56,9 +56,14 @@ watchEffect((onCleanup) => {
 
 ```ts
 import type { Component } from 'vue';
-import type { PtMap, PtValue } from '@/types/passthrough';
+import type { PtMap, PtValue, PtVariantAttrs } from '@/types/passthrough';
 import type { IconType } from '@/types/Icon';
-import type { ToastVariantType } from '@/types/ToastVariant';
+import {
+	TOAST_VARIANTS,
+	type ToastVariantBuiltIn,
+	type ToastVariantRegistry,
+	type ToastVariantType,
+} from '@/types/ToastVariant';
 import type { ActionButtonConfig } from '@/types/ActionButton';
 
 /**
@@ -229,11 +234,31 @@ export const BB_TOAST_PT = {
 		'close',
 	],
 	rowStates: ['loading'],
+	// Each toast's `variant` is a state on its card parts (Q76.7), below `loading`.
+	variant: {
+		names: TOAST_VARIANTS,
+		option: 'toastVariants',
+		parts: [
+			'panel',
+			'icon',
+			'content',
+			'title',
+			'text',
+			'footer',
+			'action',
+			'close',
+		],
+	},
 } as const satisfies {
 	parts: readonly BbToastPtPart[];
 	states: readonly BbToastPtState[];
 	rowParts: readonly BbToastPtPart[];
 	rowStates: readonly BbToastPtState[];
+	variant: {
+		names: readonly ToastVariantBuiltIn[];
+		option: string;
+		parts: readonly BbToastCardPtPart[];
+	};
 };
 
 // Spelled INLINE with this component's own union (Vue's SFC type resolver
@@ -241,18 +266,26 @@ export const BB_TOAST_PT = {
 // `loading` is a card state: declared on the card parts, never on `root`.
 // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
 export type BbToastProps = {
-	[K in `pt:${BbToastPtPart}` | `pt:${BbToastCardPtPart}:loading`]?: PtValue;
-} & {
-	/**
-	 * Passthrough, object form: the same keys as the `pt:*` attributes
-	 * without the prefix. See the `pt:<part>` row.
-	 */
-	// Mapped, never `Record` (the SFC resolver reads only the mapped spelling, T23).
-	// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
-	pt?: PtMap<BbToastPtPart, never> & {
-		[K in `${BbToastCardPtPart}:loading`]?: PtValue;
+	[K in
+		| `pt:${BbToastPtPart}`
+		| `pt:${BbToastCardPtPart}:loading`
+		| `pt:${BbToastCardPtPart}:${ToastVariantBuiltIn}`]?: PtValue;
+} & /* @vue-ignore */ PtVariantAttrs<
+	BbToastCardPtPart,
+	keyof ToastVariantRegistry
+> & {
+		/**
+		 * Passthrough, object form: the same keys as the `pt:*` attributes
+		 * without the prefix. See the `pt:<part>` row.
+		 */
+		// Mapped, never `Record` (the SFC resolver reads only the mapped spelling, T23).
+		// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
+		pt?: PtMap<BbToastPtPart, never> & {
+			[K in
+				| `${BbToastCardPtPart}:loading`
+				| `${BbToastCardPtPart}:${ToastVariantBuiltIn | keyof ToastVariantRegistry}`]?: PtValue;
+		};
 	};
-};
 ```
 
 ## Styles
@@ -267,7 +300,7 @@ export type BbToastProps = {
  *   --front-index    distance from the front of the pile (0 = newest/front)
  *   --height-before  combined px height of the toasts in front (expanded layout)
  *   --front-height   px height of the front toast (collapsed pile sizing)
- *   --toast-height   px height of this toast's own content
+ *   --toast-height   px height of this toast's card (content + edge)
  *   --z              z-index (front toast highest)
  *   --swipe-amount   live px offset while the user drags to dismiss
  *
@@ -353,8 +386,10 @@ export type BbToastProps = {
 	--r: min(var(--bb-radius), 10px);
 	--ring-size: 2px; /* focus ring on the close button */
 	--bg: var(--bb-panel); /* card fill, and the close button's own fill */
-	/* Card edge, painted as an inset ring (the card carries no `border`) */
-	--border-color: var(--bb-border);
+	--border-color: var(--bb-border); /* card edge */
+	/* Edge width: a real `border`, counted in the measured height; the inner
+	   padding and the × take it back, so the card keeps its size. */
+	--bw: var(--bb-border-w);
 	--fg: var(--bb-text); /* title, text and close glyph */
 	/* The status glyph only — the variants below re-point this and nothing else */
 	--icon-color: var(--bb-text);
@@ -367,15 +402,12 @@ export type BbToastProps = {
 	-webkit-backdrop-filter: var(--bb-surface-filter);
 	backdrop-filter: var(--bb-surface-filter);
 	background-color: var(--bg);
+	border: var(--bw) solid var(--border-color);
 	border-radius: min(var(--r), 14px);
-	/* --bb-shadow like every other floating surface (BbDialog, BbPopover, …) —
-	   was a hand-rolled light-only pair that stayed flat once the page went
-	   dark. The inset ring is the border; kept as its own layer since the card
-	   has no `border` property to carry it. */
-	box-shadow:
-		var(--bb-shadow),
-		inset 0 0 0 var(--bb-border-w) var(--border-color);
-
+	/* --bb-shadow like every other floating surface (BbDialog, BbPopover, …),
+	   alone in the property, so `--bb-shadow: none` turns it off and keeps
+	   the edge. */
+	box-shadow: var(--bb-shadow);
 	box-sizing: border-box;
 	color: var(--fg);
 	height: var(--toast-height);
@@ -464,7 +496,7 @@ export type BbToastProps = {
 	box-sizing: border-box;
 	display: flex;
 	gap: 12px;
-	padding: 14px 16px;
+	padding: calc(14px - var(--bw)) calc(16px - var(--bw));
 	transition: opacity 0.3s var(--bb-ease);
 	width: 100%;
 }
@@ -538,12 +570,14 @@ export type BbToastProps = {
 	cursor: pointer;
 	display: flex;
 	height: 22px;
-	inset-inline-end: 8px;
+	/* 8px from the card's outer corner: the containing block starts inside
+	   the edge. */
+	inset-inline-end: calc(8px - var(--bw));
 	justify-content: center;
 	opacity: 0;
 	padding: 0;
 	position: absolute;
-	top: 8px;
+	top: calc(8px - var(--bw));
 	transition:
 		opacity 0.15s var(--bb-ease),
 		background-color 0.15s var(--bb-ease);
@@ -634,10 +668,11 @@ export type BbToastProps = {
 		&::after {
 			--hit: 44px;
 			content: '';
-			height: calc(var(--hit) - 2px);
-			inset-inline-end: -8px; /* the button's inset from the card corner */
+			/* From inside the edge (the card clips there), bottom unchanged. */
+			height: calc(var(--hit) - 2px - var(--bw));
+			inset-inline-end: calc(var(--bw) - 8px);
 			position: absolute;
-			top: -8px;
+			top: calc(var(--bw) - 8px);
 			width: var(--hit);
 		}
 	}