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

package/dist/ai/source/BbBaseButton.md

@@ -12,7 +12,7 @@
 		v-bind="
 			mergeProps(routingAttributes, passthrough.forwardAttrs, passthrough.root)
 		"
-		><slot>{{ text }}</slot></RouterComponent
+		><slot v-bind="linkState">{{ text }}</slot></RouterComponent
 	>
 	<a
 		v-else-if="asLink"
@@ -20,7 +20,7 @@
 		v-bind="
 			mergeProps(anchorAttributes, passthrough.forwardAttrs, passthrough.root)
 		"
-		><slot>{{ text }}</slot></a
+		><slot v-bind="linkState">{{ text }}</slot></a
 	>
 	<component
 		:is="resolvedTag"
@@ -30,7 +30,7 @@
 			mergeProps(tagAttributes, passthrough.forwardAttrs, passthrough.root)
 		"
 	>
-		<slot>{{ text }}</slot>
+		<slot v-bind="linkState">{{ text }}</slot>
 	</component>
 </template>
 
@@ -61,9 +61,8 @@
  */
 import { computed, mergeProps, useAttrs } from 'vue';
 import RouterComponent from './RouterComponent.vue';
+import { currentOrigin, isNonRoutable, useBaseLinkState } from './useLinkState';
 import { useFrameworkDetection } from '@/composables/useFrameworkDetection';
-import { useHydrated } from '@/composables/useHydrated';
-import { useInertiaPage } from '@/composables/useInertiaPage';
 import { useConfig } from '@/composables/useConfig';
 import {
 	BB_BASE_BUTTON_PT,
@@ -87,6 +86,11 @@ const props = withDefaults(defineProps<BbBaseButtonProps>(), {
 
 defineSlots<BbBaseButtonSlots>();
 
+// The one answer to "is this link the current page": the active classes, the
+// `activeLink` / `exactActiveLink` states and the default-slot props all read
+// it (computed by the wrapper this button is the root of, when there is one).
+const linkState = useBaseLinkState(props);
+
 /**
  * Passthrough (plans/passthrough/BbBaseButton.md). `root` merges LAST onto whichever element renders.
  */
@@ -96,131 +100,27 @@ const passthrough = usePassthrough({
 	props,
 	parts: BB_BASE_BUTTON_PT.parts,
 	states: BB_BASE_BUTTON_PT.states,
-	active: { disabled: () => !!props.disabled },
+	active: {
+		disabled: () => !!props.disabled,
+		activeLink: () => linkState.value.activeLink,
+		exactActiveLink: () => linkState.value.exactActiveLink,
+	},
 });
 
 const config = useConfig();
 
 const { isInertia, isNuxt } = useFrameworkDetection();
-const { isHydrated } = useHydrated();
-const { getPageUrl } = useInertiaPage();
-
-const URL_FALLBACK_BASE = 'http://localhost';
-
-// The real current origin, shared by the Inertia and plain-app branches below.
-// Inertia's own `$page.url` is always a path (never absolute — it's the
-// server request URI), so it can't be parsed for an origin; the browser's
-// actual location is the only reliable source in either mode. SSR has no
-// `window`, so `currentOrigin` is `null` there — `isNonRoutable` already
-// treats a missing origin as "can't verify same-origin, don't route".
-const isBrowser = typeof window !== 'undefined';
-const currentOrigin = isBrowser ? window.location.origin : null;
-
-// Returns true for href values that should not be handled by the Inertia router:
-// protocol-relative URLs, same-page hash fragments, and cross-origin absolute URLs.
-// Same-origin absolute URLs (e.g. from Ziggy's route()) are considered routable.
-const isNonRoutable = (href: string, originToMatch?: string | null) => {
-	const value = href.trim();
-	if (!value) return false;
-	if (value.startsWith('#')) return true;
-	if (value.startsWith('//')) return true;
-	if (!/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(value)) return false;
-	// Absolute URL: routable only when it shares the current page's origin
-	if (!originToMatch) return true;
-	try {
-		return new URL(value).origin !== originToMatch;
-	} catch {
-		return true;
-	}
-};
 
-const normalizePathname = (pathname: string) => {
-	if (pathname === '/') return pathname;
-	return pathname.replace(/\/+$/, '');
-};
+// Classes for `href` links only: RouterLink sets its own on a `to` link, and
+// they must not be doubled.
+const isActive = computed(() => !props.to && linkState.value.activeLink);
+const isExactActive = computed(
+	() => !props.to && linkState.value.exactActiveLink
+);
 
-// getPageUrl() is called inside computed so Vue tracks $page reactively.
-const inertiaPathname = computed(() => {
-	const url = getPageUrl();
-	if (!url) return undefined;
-	try {
-		return normalizePathname(new URL(url, URL_FALLBACK_BASE).pathname);
-	} catch {
-		return undefined;
-	}
-});
 const isInternalInertiaHref = computed(
 	() => !!(props.href && !isNonRoutable(props.href, currentOrigin))
 );
-const inertiaHrefPathname = computed(() => {
-	if (!isInternalInertiaHref.value || !props.href) return undefined;
-	const basePathname = inertiaPathname.value ?? '/';
-	try {
-		return normalizePathname(
-			new URL(props.href, `${URL_FALLBACK_BASE}${basePathname}`).pathname
-		);
-	} catch {
-		return undefined;
-	}
-});
-
-// Plain-app (no Inertia, no Vue Router) active matching: resolve the current
-// location and the link's target from `window.location`, mirroring the Inertia
-// path logic above. Full-page anchor navigation re-renders the component against
-// the new URL, so reading location at evaluation time is sufficient.
-//
-// Gated on `isHydrated` (the a90e1ec4 hydration-gate pattern): the server
-// renders `undefined` (no window), so a bare `window.location` read here
-// settles on the real pathname DURING hydration with no reactive dependency —
-// dev logs a class mismatch and prod keeps the server HTML, so an href link
-// to the current page never gets its active class. Reporting `undefined`
-// until the gate opens makes hydration agree with the server HTML, and the
-// gate's flip (post-hydration, pre-paint) is the reactive dep that patches
-// the class in.
-const browserPathname = computed(() =>
-	isBrowser && isHydrated.value
-		? normalizePathname(window.location.pathname)
-		: undefined
-);
-const browserHrefPathname = computed(() => {
-	if (!props.href || isNonRoutable(props.href, currentOrigin)) return undefined;
-	const basePathname = browserPathname.value ?? '/';
-	try {
-		return normalizePathname(
-			new URL(props.href, `${URL_FALLBACK_BASE}${basePathname}`).pathname
-		);
-	} catch {
-		return undefined;
-	}
-});
-
-// Active state is driven by Inertia's `$page` when present, otherwise by the
-// browser URL — so a plain `href` link gets the same "current page" highlight
-// that Vue Router gives a `to` link. `to` links are excluded here: RouterLink
-// computes its own active class natively, and we must not compute a second one.
-const activeCurrentPathname = computed(() =>
-	isInertia ? inertiaPathname.value : browserPathname.value
-);
-const activeHrefPathname = computed(() =>
-	isInertia ? inertiaHrefPathname.value : browserHrefPathname.value
-);
-
-const isExactActive = computed(() => {
-	if (props.to) return false;
-	const current = activeCurrentPathname.value;
-	const target = activeHrefPathname.value;
-	if (!current || !target) return false;
-	return target === current;
-});
-
-const isActive = computed(() => {
-	if (props.to) return false;
-	const current = activeCurrentPathname.value;
-	const target = activeHrefPathname.value;
-	if (!current || !target) return false;
-	if (target === '/') return current.startsWith('/');
-	return current === target || current.startsWith(`${target}/`);
-});
 
 /**
  * Determines if the component should render as a routing component (Inertia/Vue Router).
@@ -504,15 +404,23 @@ import type { RouteLocationRaw } from 'vue-router';
  */
 export type BbBaseButtonPtPart = 'root';
 /**
- * Passthrough states of `BbBaseButton`, true while the matching `--` modifier is on.
+ * Passthrough states of `BbBaseButton`: `disabled` while `--disabled` is on,
+ * the link states while `activeClass` / `exactActiveClass` are. Order =
+ * precedence, last wins: `disabled` outranks the link states.
  *
+ * @state activeLink - Component-wide: a link to the current page or one of its
+ *   ancestors (`/users` on `/users/5`) — exactly when `activeClass` is on.
+ *   The default slot gets it too, as `activeLink`.
+ * @state exactActiveLink - Component-wide: a link to the current page itself —
+ *   exactly when `exactActiveClass` is on (`activeLink` is on too). The default
+ *   slot gets it as `exactActiveLink`.
  * @state disabled - Component-wide: the button is `disabled`.
  */
-export type BbBaseButtonPtState = 'disabled';
+export type BbBaseButtonPtState = 'activeLink' | 'exactActiveLink' | 'disabled';
 /** The runtime lists the resolver is wired with — kept next to the types so the two cannot drift. */
 export const BB_BASE_BUTTON_PT = {
 	parts: ['root'],
-	states: ['disabled'],
+	states: ['activeLink', 'exactActiveLink', 'disabled'],
 } as const satisfies {
 	parts: readonly BbBaseButtonPtPart[];
 	states: readonly BbBaseButtonPtState[];
@@ -790,11 +698,23 @@ export type BbBaseButtonProps = {
 	viewTransition?: boolean;
 };
 
+/**
+ * The default slot's props: whether the link points at the current page, the
+ * same facts as its `activeClass` / `exactActiveClass` and its
+ * `activeLink` / `exactActiveLink` `pt` states. Always `false` on a button.
+ */
+export type BbLinkSlotProps = {
+	/** A link to the current page or one of its ancestors: `activeClass` is on. */
+	activeLink: boolean;
+	/** A link to the current page itself: `exactActiveClass` is on. */
+	exactActiveLink: boolean;
+};
+
 export type BbBaseButtonSlots = {
 	/**
 	 * Primary content rendered inside the button element. Falls back to the `text` prop when empty.
 	 */
-	default?: (props: object) => any;
+	default?: (props: BbLinkSlotProps) => any;
 };
 
 /**
@@ -809,6 +729,8 @@ const baseButtonPropMap: Record<keyof BbBaseButtonProps, true> = {
 	// (and therefore in `BB_BASE_BUTTON_PROP_KEYS`) like every other prop.
 	pt: true,
 	'pt:root': true,
+	'pt:root:activeLink': true,
+	'pt:root:exactActiveLink': true,
 	'pt:root:disabled': true,
 	activeClass: true,
 	async: true,

package/dist/ai/source/BbBaseCheckboxIcon.md

@@ -319,4 +319,42 @@ export type BbBaseCheckboxIconProps = {
 		cursor: not-allowed;
 	}
 }
+
+/* Forced colors (ATT-11 c): the theme's plate and accent mean nothing in a
+   high-contrast theme, and an SVG glyph is not repainted by the browser, so
+   the box is drawn in system colours, which forced colors keep: the checked
+   fill is `Highlight`, a disabled box `GrayText`. The focus ring is not
+   restyled here. */
+@media (forced-colors: active) {
+	.bb-base-checkbox-icon {
+		--accent: Highlight;
+		--bg: Canvas;
+		--border-color: CanvasText;
+		--check-color: HighlightText;
+
+		color: Highlight;
+	}
+
+	.bb-base-checkbox-icon--checked,
+	.bb-base-checkbox-icon--indeterminate {
+		--bg: currentColor;
+		--border-color: currentColor;
+	}
+
+	.bb-base-checkbox-icon.bb-base-checkbox-icon--disabled {
+		--accent: GrayText;
+		--bg: Canvas;
+		--border-color: GrayText;
+		--check-color: Canvas;
+
+		color: GrayText;
+
+		&:is(
+			.bb-base-checkbox-icon--checked,
+			.bb-base-checkbox-icon--indeterminate
+		) {
+			--bg: GrayText;
+		}
+	}
+}
 ```

package/dist/ai/source/BbBaseRadioIcon.md

@@ -265,4 +265,22 @@ export type BbBaseRadioIconProps = {
 		cursor: not-allowed;
 	}
 }
+
+/* Forced colors (ATT-11 c): the browser repaints the dot `Canvas`, so a
+   checked radio looked unchecked. The dot is drawn in a system colour, which
+   forced colors keep: `Highlight`, or `GrayText` with a `GrayText` ring when
+   disabled. The focus ring is not restyled here. */
+@media (forced-colors: active) {
+	.bb-base-radio-icon::after {
+		background-color: Highlight;
+	}
+
+	.bb-base-radio-icon.bb-base-radio-icon--disabled {
+		border-color: GrayText;
+
+		&::after {
+			background-color: GrayText;
+		}
+	}
+}
 ```

package/dist/ai/source/BbBaseSwitchIcon.md

@@ -320,4 +320,55 @@ export type BbBaseSwitchIconProps = {
 		}
 	}
 }
+
+/* Forced colors (ATT-11 c): the browser repaints the track and the thumb
+   `Canvas`, so the thumb vanished and on / off read alike. Both are drawn in
+   system colours, which forced colors keep: an on track is `Highlight` with a
+   `HighlightText` thumb, an off track keeps the browser's frame around a
+   `CanvasText` thumb, a disabled switch is `GrayText`. The focus ring is not
+   restyled here. */
+@media (forced-colors: active) {
+	.bb-base-switch-icon {
+		--accent: Highlight;
+
+		/* The frame follows `color`: keep it the text colour. */
+		color: CanvasText;
+
+		&:is(.bb-base-switch-icon--checked, .bb-base-switch-icon--indeterminate) {
+			background-color: var(--accent);
+			border-color: var(--accent);
+		}
+	}
+
+	.bb-base-switch-icon .bb-base-switch-icon__thumb {
+		background-color: CanvasText;
+	}
+
+	.bb-base-switch-icon:is(
+			.bb-base-switch-icon--checked,
+			.bb-base-switch-icon--indeterminate
+		)
+		.bb-base-switch-icon__thumb {
+		background-color: HighlightText;
+	}
+
+	.bb-base-switch-icon.bb-base-switch-icon--disabled {
+		--accent: GrayText;
+
+		border-color: GrayText;
+
+		&:not(.bb-base-switch-icon--checked, .bb-base-switch-icon--indeterminate) {
+			background-color: Canvas;
+		}
+
+		.bb-base-switch-icon__thumb {
+			background-color: GrayText;
+		}
+
+		&:is(.bb-base-switch-icon--checked, .bb-base-switch-icon--indeterminate)
+			.bb-base-switch-icon__thumb {
+			background-color: Canvas;
+		}
+	}
+}
 ```