bitboss-ui 3.0.0-beta.48 → 3.0.0-beta.49

package/dist/ai/source/BbTooltip.md

@@ -94,6 +94,7 @@ import {
 } from '@/utils/overlayEscapeStack';
 import { useUntil } from '../../composables/useUntil';
 import { useOverlayYield } from '@/composables/useOverlayYield';
+import { isWarm, markHidden, markShown } from './tooltipWarmup';
 import { removedPropsFor } from '@/deprecation/removedProps';
 import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
 import CommonPopover from '../CommonPopover/CommonPopover.vue';
@@ -126,7 +127,7 @@ const props = withDefaults(defineProps<BbTooltipProps>(), {
 	placement: 'top',
 	variant: 'default',
 	transitionDuration: transitions.medium,
-	delay: 0,
+	delay: 100,
 });
 
 const slots = defineSlots<BbTooltipSlots>();
@@ -245,14 +246,33 @@ const scheduleClose = () => {
 	_closeTimeout = setTimeout(forceClose, 50);
 };
 
+/**
+ * A pointer arriving: wait `delay` (it filters a pointer passing over on its
+ * way elsewhere), unless another tooltip is showing or closed within the skip
+ * window (`tooltipWarmup.ts`), when the user is reading hint after hint.
+ */
 const scheduleOpen = () => {
 	cancelClose();
 	if (open.value || props.disabled || blocked()) return;
-	_openTimeout = setTimeout(() => {
-		if (!blocked()) open.value = true;
-	}, props.delay);
+	_openTimeout = setTimeout(
+		() => {
+			if (!blocked()) open.value = true;
+		},
+		isWarm() ? 0 : props.delay
+	);
+};
+
+/** Keyboard focus is never accidental: it shows the hint at once, whatever `delay` says. */
+const openNow = () => {
+	cancelClose();
+	clearTimeout(_openTimeout);
+	if (open.value || props.disabled || blocked()) return;
+	open.value = true;
 };
 
+/** Set while a close is a yield (Q63.7), read by the warm-up bookkeeping below. */
+let yielding = false;
+
 // Tooltips give way to anything the user opened deliberately (Q63.7), like
 // hover cards: no showing while a menu, popover, dialog, select or picker is
 // open — unless the trigger is inside it — and a shown one hides. Only the
@@ -261,7 +281,12 @@ const scheduleOpen = () => {
 const { blocked } = useOverlayYield(
 	() => activatorEl.value,
 	() => popoverDom.value,
-	forceClose
+	() => {
+		// Giving way to a menu or dialog is not the user moving on: it doesn't
+		// warm the next tooltip up.
+		yielding = true;
+		forceClose();
+	}
 );
 
 /** A press on the trigger (a click, a right-click opening a menu) hides it at once. */
@@ -289,7 +314,7 @@ const onEsc = (event: KeyboardEvent) => {
  */
 const onActivatorFocus = (event: FocusEvent) => {
 	const el = event.currentTarget as HTMLElement | null;
-	if (el?.matches(':focus-visible')) scheduleOpen();
+	if (el?.matches(':focus-visible')) openNow();
 };
 
 /**
@@ -297,7 +322,18 @@ const onActivatorFocus = (event: FocusEvent) => {
  * it also works when the tooltip is opened via `v-model`, and never lingers
  * on the document after an external close.
  */
+/** Whether this tooltip counts as showing in the shared skip window. */
+let counted = false;
+
 watch(open, (isOpen) => {
+	if (isOpen && !counted) {
+		counted = true;
+		markShown();
+	} else if (!isOpen && counted) {
+		counted = false;
+		markHidden(!yielding);
+	}
+	yielding = false;
 	if (isOpen) {
 		// Transient: a shown tooltip never makes another surface give way.
 		pushEscapeEntry(escapeKey, {
@@ -438,6 +474,11 @@ onBeforeUnmount(() => {
 		describedByHost = null;
 	}
 	forceClose();
+	// Unmounting is not the user moving on: release the count, no warm-up.
+	if (counted) {
+		counted = false;
+		markHidden(false);
+	}
 	// The open watcher may not flush during teardown — drop the listener (and
 	// the stack entry, which would otherwise wedge Escape page-wide) directly.
 	removeEscapeEntry(escapeKey);
@@ -630,9 +671,14 @@ export type BbTooltipProps = {
 	 */
 	variant?: BbTooltipVariant;
 	/**
-	 * The delay in milliseconds before the tooltip is shown.
+	 * How long, in milliseconds, a pointer has to rest on the activator before
+	 * the tooltip shows; it keeps hints from flashing under a pointer passing
+	 * by. Keyboard focus shows it at once whatever this says, and so does a
+	 * pointer arriving while another tooltip shows or within 300 ms of one
+	 * closing (the skip delay, shared by every tooltip). `0` shows it on hover
+	 * at once.
 	 *
-	 * @defaultValue `0`
+	 * @defaultValue `100`
 	 */
 	delay?: number;
 	/**

package/dist/ai/source/BbTree.md

@@ -27,7 +27,7 @@
 <script setup lang="ts" generic="Meta">
 import { removedPropsFor } from '@/deprecation/removedProps';
 import { warnRemovedAttrs } from '@/utilities/functions/warnRemovedAttrs';
-import { provide, useAttrs, watch } from 'vue';
+import { provide, reactive, useAttrs, watch } from 'vue';
 import BbTreeLevel from './BbTreeLevel.vue';
 import { BbTreeContextKey, type BbTreeContext } from './context';
 import { usePassthrough } from '@/composables/usePassthrough';
@@ -113,9 +113,27 @@ if (process.env.NODE_ENV !== 'production')
 				),
 	});
 
+/*
+ * Q44.22 (B): the open state per node. A reactive Set tracks `has(hash)` per
+ * key, so a level's nodes depend on their own entries only: toggling one
+ * branch re-renders the level that holds it, not every level of the tree
+ * (the shared index object used to invalidate them all). Kept in sync with
+ * the model synchronously, before any render reads it.
+ */
+const expandedHashes = reactive(new Set<string>());
+watch(
+	expandedItemsIndexedByHash,
+	(index) => {
+		for (const key of expandedHashes)
+			if (!(key in index)) expandedHashes.delete(key);
+		for (const key of Object.keys(index)) expandedHashes.add(key);
+	},
+	{ immediate: true, flush: 'sync' }
+);
+
 /* Leaves have nothing to hide, so they always count as expanded. */
 const isExpanded = (item: BbTreeItem<Meta>) =>
-	!item.children?.length || hashFor(item) in expandedItemsIndexedByHash.value;
+	!item.children?.length || expandedHashes.has(hashFor(item));
 
 const toggleExpanded = (item: BbTreeItem<Meta>) => {
 	const value = valueFor(item);
@@ -399,7 +417,7 @@ export type BbTreeLevelProps<Meta = any> = {
 
 		> .bb-tree__children {
 			overflow: hidden;
-			padding-left: var(--indent);
+			padding-inline-start: var(--indent);
 
 			> .bb-tree__item:first-child {
 				margin-top: var(--gap);

package/dist/ai/source/CommonField.md

@@ -930,7 +930,7 @@ export type CommonFieldSlots = {
 			}
 
 			.bb-field__label {
-				left: var(--bb-input-px);
+				inset-inline-start: var(--bb-input-px);
 				top: 5px;
 			}
 
@@ -957,7 +957,7 @@ export type CommonFieldSlots = {
 			/* Keep inside labels single-line and clipped in crowded layouts. */
 			display: -webkit-box;
 			font-size: var(--bb-label-fs-sm);
-			left: var(--inside-label-offset-l);
+			inset-inline-start: var(--inside-label-offset-l);
 			-webkit-line-clamp: 1;
 			line-height: var(--bb-label-lh-sm);
 			max-width: calc(
@@ -1086,7 +1086,7 @@ export type CommonFieldSlots = {
 				   It shrinks to the small size only when it rises to the border. */
 				font-size: var(--bb-label-fs);
 				font-weight: var(--bb-label-weight);
-				left: 0;
+				inset-inline-start: 0;
 				line-height: 1;
 				max-width: calc(100% - var(--fl-rest-l) - var(--fl-rest-r));
 				opacity: 0.6;
@@ -1310,12 +1310,14 @@ export type CommonFieldSlots = {
 		transition-timing-function: var(--bb-ease);
 
 		&--left {
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- geometry: the `labelPosition` prop names a physical side */
 			text-align: left;
 		}
 		&--center {
 			text-align: center;
 		}
 		&--right {
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- geometry: the `labelPosition` prop names a physical side */
 			text-align: right;
 		}
 		&--hidden {
@@ -1485,7 +1487,7 @@ export type CommonFieldSlots = {
 	&.bb-field--inside-label.bb-field--description {
 		.bb-field__description {
 			font-size: var(--bb-description-fs-sm);
-			left: var(--inside-label-offset-l);
+			inset-inline-start: var(--inside-label-offset-l);
 			line-height: var(--bb-description-lh-sm);
 			margin-top: 0;
 			max-width: calc(

package/dist/ai/source/CommonFieldInput.md

@@ -47,12 +47,17 @@
 				}"
 			>
 				<Transition appear name="bb-field-input-icon">
+					<!-- `@mousedown.prevent` keeps focus in the field: the ✕ shows while
+					the field has focus, and WebKit does not focus a button on mousedown,
+					so the press blurred the field and hid the ✕ before the click landed
+					(clear-webkit; BbSelectPopover does the same). -->
 					<!-- eslint-disable vue/attributes-order -- `pt` binds LAST so a consumer listener runs after ours (PASSTHROUGH.md T17) -->
 					<ClearableButton
 						v-if="shouldShowClearVisible"
 						key="clear"
 						class="bb-field-input__clear"
 						@click="onClickClear"
+						@mousedown.prevent
 						v-bind="passthrough?.clear"
 					/>
 					<!-- eslint-enable vue/attributes-order -->
@@ -550,8 +555,8 @@ export type CommonFieldInputSlots = {
 		min-height: calc(var(--bb-input-h) + var(--inside-label-clearance));
 		min-width: 0;
 		overflow: clip;
-		padding-left: var(--bb-input-px);
-		padding-right: var(--bb-input-px);
+		padding-inline-end: var(--bb-input-px);
+		padding-inline-start: var(--bb-input-px);
 		padding-top: var(--inside-label-clearance);
 
 		/* Enumerated, not `all`: background-color (disabled), border-color +
@@ -611,14 +616,14 @@ export type CommonFieldInputSlots = {
 		}
 
 		.bb-button:first-child {
-			margin-left: clamp(
+			margin-inline-start: clamp(
 				calc(var(--bb-input-px) * -1),
 				calc(((var(--bb-input-h) - var(--h)) / 2) - var(--bb-input-px)),
 				0px
 			);
 		}
 		.bb-button:last-child {
-			margin-right: clamp(
+			margin-inline-end: clamp(
 				calc(var(--bb-input-px) * -1),
 				calc(((var(--bb-input-h) - var(--h)) / 2) - var(--bb-input-px)),
 				0px
@@ -629,7 +634,7 @@ export type CommonFieldInputSlots = {
 	&__prepend-icon {
 		color: var(--bb-text-muted);
 		flex-shrink: 0;
-		margin-left: calc(var(--bb-input-px) * 0.4 * -1);
+		margin-inline-start: calc(var(--bb-input-px) * 0.4 * -1);
 	}
 
 	/* The field's own icons are BbIcons: size them through BbIcon's `--size`
@@ -646,7 +651,7 @@ export type CommonFieldInputSlots = {
 		display: grid;
 		flex-shrink: 0;
 		height: var(--bb-input-icon);
-		margin-right: calc(var(--bb-input-px) * 0.4 * -1);
+		margin-inline-end: calc(var(--bb-input-px) * 0.4 * -1);
 		place-items: center;
 		width: var(--bb-input-icon);
 
@@ -698,14 +703,14 @@ export type CommonFieldInputSlots = {
 	   the same rhythm on both sides. It used to sit half that from the border. */
 	&__prefix {
 		justify-content: end;
-		margin-left: calc(var(--bb-input-px) * -1);
-		padding-left: var(--bb-input-px);
+		margin-inline-start: calc(var(--bb-input-px) * -1);
+		padding-inline-start: var(--bb-input-px);
 	}
 
 	&__suffix {
 		justify-content: start;
-		margin-right: calc(var(--bb-input-px) * -1);
-		padding-right: var(--bb-input-px);
+		margin-inline-end: calc(var(--bb-input-px) * -1);
+		padding-inline-end: var(--bb-input-px);
 	}
 
 	/* Disabled — after the variants and the inner hover/focus rules so it wins

package/dist/ai/source/CommonPopover.md

@@ -443,7 +443,9 @@ const closePopover = () => {
 		.bb-common-popover__arrow {
 			border-bottom: calc(var(--arrow-h) * var(--bb-arrow)) solid
 				var(--border-color);
+			/* stylelint-disable-next-line property-disallowed-list -- geometry: the arrow follows the side Floating UI placed the panel on */
 			border-left: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid transparent;
+			/* stylelint-disable-next-line property-disallowed-list -- geometry: the arrow follows the side Floating UI placed the panel on */
 			border-right: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid transparent;
 			height: 0;
 			position: relative;
@@ -451,8 +453,10 @@ const closePopover = () => {
 
 			&::after {
 				border-bottom: calc(var(--arrow-h) * var(--bb-arrow)) solid var(--bg);
+				/* stylelint-disable-next-line property-disallowed-list -- geometry: the arrow follows the side Floating UI placed the panel on */
 				border-left: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid
 					transparent;
+				/* stylelint-disable-next-line property-disallowed-list -- geometry: the arrow follows the side Floating UI placed the panel on */
 				border-right: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid
 					transparent;
 				content: '';
@@ -491,6 +495,7 @@ const closePopover = () => {
 		.bb-common-popover__arrow {
 			border-bottom: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid
 				transparent;
+			/* stylelint-disable-next-line property-disallowed-list -- geometry: the arrow follows the side Floating UI placed the panel on */
 			border-left: calc(var(--arrow-h) * var(--bb-arrow)) solid
 				var(--border-color);
 			border-top: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid transparent;
@@ -501,6 +506,7 @@ const closePopover = () => {
 			&::after {
 				border-bottom: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid
 					transparent;
+				/* stylelint-disable-next-line property-disallowed-list -- geometry: the arrow follows the side Floating UI placed the panel on */
 				border-left: calc(var(--arrow-h) * var(--bb-arrow)) solid var(--bg);
 				border-top: calc(var(--arrow-w) / 2 * var(--bb-arrow)) solid transparent;
 				content: '';

package/dist/ai/source/CommonTimeSelector.md

@@ -520,17 +520,17 @@ export type TimeUnit = 'hour' | 'minute' | 'second' | 'meridiem';
 	   row; only the painted knob matches the calendar's. */
 	--time-mark: 24px;
 
-	border-left: var(--bb-border-w) solid var(--bb-border);
+	border-inline-start: var(--bb-border-w) solid var(--bb-border);
 	bottom: 0;
 	display: flex;
 	flex-direction: column;
+	inset-inline-end: 0;
 	/* Mirror the calendar body's vertical padding (--py, 8px) top AND bottom:
 	   the readout then sits level with the month/year controls, the headers level
 	   with the weekday initials, and — because the middle scroll flexes — the last
 	   row anchors on the calendar's bottom edge. 12px left gutter for the divider. */
 	padding: 8px 8px 8px 12px;
 	position: absolute;
-	right: 0;
 	top: 0;
 	width: calc(var(--rail-w, 252px) - 12px);
 
@@ -634,6 +634,7 @@ export type TimeUnit = 'hour' | 'minute' | 'second' | 'meridiem';
 			border-radius: var(--bb-radius-sm);
 			content: '';
 			height: var(--time-mark);
+			/* stylelint-disable-next-line property-disallowed-list -- geometry: centred with a physical translate */
 			left: 50%;
 			position: absolute;
 			top: 50%;
@@ -696,8 +697,8 @@ export type TimeUnit = 'hour' | 'minute' | 'second' | 'meridiem';
 	position: relative;
 
 	.bb-time-selector {
-		border-left: 0;
-		padding-left: 0;
+		border-inline-start: 0;
+		padding-inline-start: 0;
 		padding-top: 8px;
 		position: static;
 		width: auto;

package/dist/components/BbBadge/BbBadgeButton.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { useLogger as e } from "../../composables/useLogger.js";
-import t from "../BbBaseButton/BbBaseButton.vue.js";
-import { useBadgeHost as n } from "./badgeButtonContext.js";
-import r from "./BadgeBodyContent.vue.js";
+import { useBadgeHost as t } from "./badgeButtonContext.js";
+import n from "./BadgeBodyContent.vue.js";
+import r from "../BbBaseButton/BbBaseButton.vue.js";
 import { computed as i, createBlock as a, createVNode as o, defineComponent as s, mergeProps as c, openBlock as l, renderSlot as u, useAttrs as d, withCtx as f } from "vue";
 //#region src/components/BbBadge/BbBadgeButton.vue?vue&type=script&setup=true&lang.ts
 var p = /*@__PURE__*/ s({
@@ -65,13 +65,15 @@ var p = /*@__PURE__*/ s({
 		viewTransition: { type: Boolean }
 	},
 	setup(s) {
-		let p = s, m = n();
+		let p = s, m = t();
 		m || e().throw("[BbBadgeButton] must be rendered inside a <BbBadge> default slot.");
 		let h = d(), g = i(() => !!m?.loading.value), _ = i(() => {
 			let { onClick: e, ...t } = h, n = [].concat(e ?? []).filter((e) => typeof e == "function");
 			return c(t, p, {
-				"aria-disabled": g.value ? !0 : void 0,
-				tabindex: g.value ? -1 : void 0,
+				...g.value ? {
+					"aria-disabled": !0,
+					tabindex: -1
+				} : {},
 				onClick: (e) => {
 					if (g.value) {
 						e.preventDefault();
@@ -81,8 +83,8 @@ var p = /*@__PURE__*/ s({
 				}
 			});
 		});
-		return (e, n) => (l(), a(t, c({ class: "bb-badge__body" }, _.value), {
-			default: f(() => [o(r, null, {
+		return (e, t) => (l(), a(r, c({ class: "bb-badge__body" }, _.value), {
+			default: f(() => [o(n, null, {
 				default: f(() => [u(e.$slots, "default")]),
 				_: 3
 			})]),

package/dist/components/BbBaseButton/BbBaseButton.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,10 @@
 import { usePassthrough as e } from "../../composables/usePassthrough.js";
 import { useConfig as t } from "../../composables/useConfig.js";
 import { useHydrated as n } from "../../composables/useHydrated.js";
-import { useFrameworkDetection as r } from "../../composables/useFrameworkDetection.js";
-import i from "./RouterComponent.vue.js";
-import { useInertiaPage as a } from "../../composables/useInertiaPage.js";
-import { BB_BASE_BUTTON_PT as o } from "./types.js";
+import { BB_BASE_BUTTON_PT as r } from "./types.js";
+import { useFrameworkDetection as i } from "../../composables/useFrameworkDetection.js";
+import a from "./RouterComponent.vue.js";
+import { useInertiaPage as o } from "../../composables/useInertiaPage.js";
 import { computed as s, createBlock as c, createElementBlock as l, createTextVNode as u, defineComponent as d, mergeProps as f, openBlock as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, unref as _, useAttrs as v, withCtx as y } from "vue";
 //#region src/components/BbBaseButton/BbBaseButton.vue?vue&type=script&setup=true&lang.ts
 var b = "http://localhost", x = /*@__PURE__*/ d({
@@ -70,10 +70,10 @@ var b = "http://localhost", x = /*@__PURE__*/ d({
 			component: "BbBaseButton",
 			attrs: v(),
 			props: x,
-			parts: o.parts,
-			states: o.states,
+			parts: r.parts,
+			states: r.states,
 			active: { disabled: () => !!x.disabled }
-		}), C = t(), { isInertia: w, isNuxt: T } = r(), { isHydrated: E } = n(), { getPageUrl: D } = a(), O = typeof window < "u", k = O ? window.location.origin : null, A = (e, t) => {
+		}), C = t(), { isInertia: w, isNuxt: T } = i(), { isHydrated: E } = n(), { getPageUrl: D } = o(), O = typeof window < "u", k = O ? window.location.origin : null, A = (e, t) => {
 			let n = e.trim();
 			if (!n) return !1;
 			if (n.startsWith("#") || n.startsWith("//")) return !0;
@@ -185,7 +185,7 @@ var b = "http://localhost", x = /*@__PURE__*/ d({
 			...$.value,
 			...Y()
 		} : ee.value);
-		return (e, t) => V.value ? (p(), c(i, f({
+		return (e, t) => V.value ? (p(), c(a, f({
 			key: 0,
 			class: G.value
 		}, f(te.value, _(S).forwardAttrs, _(S).root)), {