bitboss-ui 2.1.123 → 2.1.124

package/dist/ai/BbDropdown.md

@@ -36,8 +36,8 @@
 	>
 		<span
 			:id="`menu_${id}`"
-			:aria-labelledby="id"
-			aria-role="menu"
+			:aria-labelledby="activatorId"
+			role="menu"
 			class="bb-dropdown__items-container"
 			:inert="!open"
 			:style="parsedWidth ? { width: parsedWidth } : undefined"
@@ -62,7 +62,7 @@
 					:text="item.text"
 				></slot>
 				<BaseButton
-					:aria-role="'menuitem'"
+					role="menuitem"
 					class="bb-dropdown__item"
 					:class="{
 						'bb-dropdown__item--first': index === 0,
@@ -149,6 +149,12 @@ defineOptions({
 });
 
 const id = props.id ?? `bb_${useId().id.value}`;
+/**
+ * Id used to label the menu (`aria-labelledby`). Defaults to the component id,
+ * but adopts the activator's pre-existing id when there is one — so attaching to
+ * a user-owned element (e.g. via a directive) never clobbers its id.
+ */
+const activatorId = ref(id);
 const activator = ref<HTMLElement>();
 const activatorDom = computed(() => extractDomContainer(activator.value));
 const hasExternalActivator = computed(() => props.activator != null);
@@ -465,7 +471,15 @@ watch(
 		}
 		if (!el) return;
 
-		el.id = id;
+		// Adopt an existing id rather than overwriting it (the menu is labelled by
+		// the activator via `aria-labelledby`); only assign one when absent.
+		let assignedId = false;
+		if (!el.id) {
+			el.id = id;
+			assignedId = true;
+		}
+		activatorId.value = el.id;
+		el.setAttribute('aria-haspopup', 'menu');
 
 		const removers: (() => void)[] = [];
 
@@ -495,7 +509,8 @@ watch(
 
 		cleanupActivator = () => {
 			removers.forEach((fn) => fn());
-			el.removeAttribute('id');
+			if (assignedId) el.removeAttribute('id');
+			el.removeAttribute('aria-haspopup');
 			el.removeAttribute('aria-expanded');
 			el.removeAttribute('aria-controls');
 		};

package/dist/ai/BbSelect.md

@@ -514,7 +514,10 @@ export type BbSelectSlots<T> = {
 	/**
 	 * Content appended inside the options list, after the last option.
 	 */
-	'options:append'?: (props: { focus: () => void; close: () => Promise<void> }) => any;
+	'options:append'?: (props: {
+		focus: () => void;
+		close: () => Promise<void>;
+	}) => any;
 	/**
 	 * Content appended outside the options list container.
 	 */
@@ -522,7 +525,10 @@ export type BbSelectSlots<T> = {
 	/**
 	 * Content prepended inside the options list, before the first option.
 	 */
-	'options:prepend'?: (props: { focus: () => void; close: () => Promise<void> }) => any;
+	'options:prepend'?: (props: {
+		focus: () => void;
+		close: () => Promise<void>;
+	}) => any;
 	/**
 	 * Content prepended outside the options list container.
 	 */

package/dist/ai/BbTooltip.md

@@ -4,6 +4,10 @@
 
 ```vue
 <template>
+	<span v-if="resolvedDescription" :id="descId" class="sr-only">{{
+		resolvedDescription
+	}}</span>
+
 	<slot
 		v-if="!hasExternalActivator"
 		name="activator"
@@ -49,13 +53,22 @@
 					/>
 				</svg>
 			</BaseButton>
-			<slot></slot>
+			<slot>{{ text }}</slot>
 		</span>
 	</CommonPopover>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue';
+import {
+	Comment,
+	computed,
+	onBeforeUnmount,
+	onMounted,
+	ref,
+	useTemplateRef,
+	watch,
+	type VNode,
+} from 'vue';
 import { useId } from '@/composables/useId';
 import { useLocale } from '@/composables/useLocale';
 import { useUntil } from '@/composables/useUntil';
@@ -76,7 +89,7 @@ const props = withDefaults(defineProps<BbTooltipProps>(), {
 	timeout: 0,
 });
 
-defineSlots<BbTooltipSlots>();
+const slots = defineSlots<BbTooltipSlots>();
 
 defineOptions({
 	inheritAttrs: false,
@@ -84,6 +97,47 @@ defineOptions({
 
 const { t } = useLocale();
 const id = `bb_${props.id ?? useId().id.value}`;
+const descId = `${id}_desc`;
+
+/**
+ * Recursively collect plain text from slot vnodes so a description can be
+ * resolved from the default slot (e.g. `<BbTooltip>Some text</BbTooltip>`)
+ * without forcing the consumer to also pass the `text` prop. Component vnodes
+ * are skipped on purpose, so wrappers used only for styling still resolve while
+ * nested components don't leak their content.
+ */
+const slotToText = (nodes?: VNode[]): string => {
+	if (!nodes) return '';
+	let out = '';
+	for (const node of nodes) {
+		if (node.type === Comment) continue;
+		const children = node.children;
+		if (typeof children === 'string') {
+			out += children;
+		} else if (Array.isArray(children)) {
+			out += slotToText(children as VNode[]);
+		}
+	}
+	return out;
+};
+
+/**
+ * The description exposed to assistive technology. Prefers the explicit `text`
+ * prop, falling back to text extracted from the default slot. When empty, the
+ * component keeps its lazy `aria-describedby`-on-open behaviour.
+ */
+/**
+ * Slot reading is disabled until the component is mounted so the slot is only
+ * ever invoked inside the render function (reading it during setup — e.g. from
+ * a watcher baseline — triggers Vue's "slot invoked outside render" warning).
+ */
+const canReadSlots = ref(false);
+
+const resolvedDescription = computed(() => {
+	const raw =
+		props.text ?? (canReadSlots.value ? slotToText(slots.default?.({})) : '');
+	return raw.replace(/\s+/g, ' ').trim();
+});
 const activatorEl = ref<HTMLElement>();
 const hasExternalActivator = computed(() => props.activator != null);
 const popoverRef = useTemplateRef('popover');
@@ -196,16 +250,31 @@ watch(
 	{ immediate: true }
 );
 
-watch(
-	[activatorEl, hasOpenedOnce] as const,
-	([el, opened]) => {
-		if (!el) return;
-		if (opened) {
-			el.setAttribute('aria-describedby', id);
-		}
-	},
-	{ immediate: true }
-);
+const applyDescribedBy = () => {
+	const el = activatorEl.value;
+	if (!el) return;
+	// When a description can be resolved up front, associate it eagerly so it is
+	// announced on first focus. Otherwise fall back to the lazy popover content,
+	// which only exists once the tooltip has opened.
+	if (resolvedDescription.value) {
+		el.setAttribute('aria-describedby', descId);
+	} else if (hasOpenedOnce.value) {
+		el.setAttribute('aria-describedby', id);
+	}
+};
+
+onMounted(() => {
+	// Apply the prop-based description first (slot reading is still off, so this
+	// never invokes the slot outside render), then enable slot extraction.
+	applyDescribedBy();
+	canReadSlots.value = true;
+});
+
+// `flush: 'post'` so the slot-derived description is read from the cached
+// computed *after* render — never by invoking the slot outside the render fn.
+watch([activatorEl, hasOpenedOnce, resolvedDescription], applyDescribedBy, {
+	flush: 'post',
+});
 
 onBeforeUnmount(() => {
 	cleanupActivator?.();
@@ -257,6 +326,7 @@ export type BbTooltipProps = Pick<
 	| 'padding'
 	| 'placement'
 	| 'showClose'
+	| 'text'
 	| 'theme'
 	| 'transitionDuration'
 > & {

package/dist/ai/CommonPopover.md

@@ -51,7 +51,14 @@ import {
 	hide,
 	size,
 } from '@floating-ui/vue';
-import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import {
+	computed,
+	nextTick,
+	onBeforeUnmount,
+	onMounted,
+	ref,
+	watch,
+} from 'vue';
 import type { CommonPopoverProps, CommonPopoverSlots } from './types';
 
 const props = withDefaults(defineProps<CommonPopoverProps>(), {
@@ -131,12 +138,37 @@ const { floatingStyles, placement, middlewareData, update } = useFloating(
 	wrapper,
 	{
 		placement: props.placement,
-		whileElementsMounted: autoUpdate,
 		middleware,
 		strategy: 'fixed',
 	}
 );
 
+/**
+ * `autoUpdate` attaches scroll/resize listeners and `ResizeObserver`s for as
+ * long as it runs, so we only keep it alive while the popover is visible (or
+ * when `forceAutoUpdate` opts back into always-on tracking). Idle popovers then
+ * hold no listeners. `toggle()` still calls `update()` on open for the first
+ * frame, so gating this loses no positioning accuracy.
+ */
+let stopAutoUpdate: (() => void) | null = null;
+
+watch(
+	[shown, anchor, wrapper, () => props.forceAutoUpdate] as const,
+	([isShown, anchorEl, floatingEl, force]) => {
+		stopAutoUpdate?.();
+		stopAutoUpdate = null;
+		if ((isShown || force) && anchorEl && floatingEl) {
+			stopAutoUpdate = autoUpdate(anchorEl, floatingEl, update);
+		}
+	},
+	{ immediate: true }
+);
+
+onBeforeUnmount(() => {
+	stopAutoUpdate?.();
+	stopAutoUpdate = null;
+});
+
 /**
  * This mess is due to:
  * - lazy rendering of content
@@ -465,6 +497,17 @@ export type CommonPopoverProps = Pick<
 	 * @defaultValue `false`
 	 */
 	scrollable?: boolean;
+	/**
+	 * Keeps floating-ui's `autoUpdate` (scroll/resize/resize-observer tracking)
+	 * running while the popover is closed.
+	 *
+	 * By default the position is only tracked while the popover is open, so idle
+	 * popovers attach no listeners. Enable this only when the anchor moves while
+	 * the popover is closed and the next open must be pixel-perfect immediately.
+	 *
+	 * @defaultValue `false`
+	 */
+	forceAutoUpdate?: boolean;
 };
 
 export type CommonPopoverEvents = Record<never, never>;

package/dist/components/BbTooltip/types.d.ts

@@ -1,6 +1,6 @@
 import { CommonProps } from '../../types/CommonProps';
 import { Placement } from '@floating-ui/vue';
-export type BbTooltipProps = Pick<CommonProps, 'arrowPadding' | 'block' | 'disabled' | 'eager' | 'id' | 'padding' | 'placement' | 'showClose' | 'theme' | 'transitionDuration'> & {
+export type BbTooltipProps = Pick<CommonProps, 'arrowPadding' | 'block' | 'disabled' | 'eager' | 'id' | 'padding' | 'placement' | 'showClose' | 'text' | 'theme' | 'transitionDuration'> & {
     /**
      * External activator element or component ref.
      * When provided, the activator slot is not rendered and event listeners

package/dist/components/CommonPopover/types.d.ts

@@ -40,6 +40,17 @@ export type CommonPopoverProps = Pick<CommonProps, 'arrowPadding' | 'eager' | 'o
      * @defaultValue `false`
      */
     scrollable?: boolean;
+    /**
+     * Keeps floating-ui's `autoUpdate` (scroll/resize/resize-observer tracking)
+     * running while the popover is closed.
+     *
+     * By default the position is only tracked while the popover is open, so idle
+     * popovers attach no listeners. Enable this only when the anchor moves while
+     * the popover is closed and the next open must be pixel-perfect immediately.
+     *
+     * @defaultValue `false`
+     */
+    forceAutoUpdate?: boolean;
 };
 export type CommonPopoverEvents = Record<never, never>;
 export type CommonPopoverSlots = {

package/dist/directives/bbDropdown.d.ts

@@ -0,0 +1,38 @@
+import { App } from 'vue';
+import { BbDropdownProps, Item } from '../components/BbDropdown/types';
+/**
+ * Value accepted by the `v-bb-dropdown` directive.
+ *
+ * - an array of {@link Item} is used directly as the dropdown items
+ * - an object spreads every `BbDropdown` prop plus a required `items` array
+ */
+export type BbDropdownDirectiveValue = Item[] | (Partial<Omit<BbDropdownProps, 'items'>> & {
+    items: Item[];
+});
+/**
+ * `v-bb-dropdown` — attach a {@link BbDropdown} menu to any element without
+ * wrapping it. Best used on a focusable/clickable element (e.g. a `<button>`);
+ * the keyboard and ARIA wiring is applied to the host element directly.
+ *
+ * @example
+ * ```html
+ * <button v-bb-dropdown="items">Menu</button>
+ * <button v-bb-dropdown:bottom="items">Menu</button>
+ * <button v-bb-dropdown="{ items, trigger: 'contextMenu', placement: 'right' }">Menu</button>
+ * ```
+ */
+export declare const vBbDropdown: import('vue').Directive<HTMLElement, BbDropdownDirectiveValue>;
+/**
+ * Vue plugin that registers {@link vBbDropdown} globally.
+ *
+ * @example
+ * ```ts
+ * import { BbDropdownDirective } from '@bitboss/ui-components';
+ * app.use(BbDropdownDirective);             // registers `v-bb-dropdown`
+ * app.use(BbDropdownDirective, 'dropdown'); // registers `v-dropdown`
+ * ```
+ */
+export declare const BbDropdownDirectivePlugin: {
+    install(app: App, name?: string): void;
+};
+export default vBbDropdown;

package/dist/directives/bbTooltip.d.ts

@@ -0,0 +1,36 @@
+import { App } from 'vue';
+import { BbTooltipProps } from '../components/BbTooltip/types';
+/**
+ * Value accepted by the `v-bb-tooltip` directive.
+ *
+ * - a string/number is used directly as the tooltip text
+ * - an object spreads every `BbTooltip` prop plus a required `text`
+ */
+export type BbTooltipDirectiveValue = string | number | (Partial<BbTooltipProps> & {
+    text: string;
+});
+/**
+ * `v-bb-tooltip` — attach a {@link BbTooltip} to any element without wrapping it.
+ *
+ * @example
+ * ```html
+ * <span v-bb-tooltip="'North Atlantic Treaty Organization'">Nato</span>
+ * <span v-bb-tooltip:bottom="'North Atlantic…'">Nato</span>
+ * <span v-bb-tooltip="{ text: 'North Atlantic…', placement: 'right', timeout: 300 }">Nato</span>
+ * ```
+ */
+export declare const vBbTooltip: import('vue').Directive<HTMLElement, BbTooltipDirectiveValue>;
+/**
+ * Vue plugin that registers {@link vBbTooltip} globally.
+ *
+ * @example
+ * ```ts
+ * import { BbTooltipDirective } from '@bitboss/ui-components';
+ * app.use(BbTooltipDirective);            // registers `v-bb-tooltip`
+ * app.use(BbTooltipDirective, 'tooltip'); // registers `v-tooltip`
+ * ```
+ */
+export declare const BbTooltipDirectivePlugin: {
+    install(app: App, name?: string): void;
+};
+export default vBbTooltip;

package/dist/directives/createPopoverDirective.d.ts

@@ -0,0 +1,25 @@
+import { Directive, DirectiveBinding, VNode } from 'vue';
+/**
+ * Shared machinery for directives that attach a floating component (tooltip,
+ * dropdown…) to an arbitrary element via that component's external `activator`
+ * prop.
+ *
+ * Every instance for a given app renders into a single
+ * `<div data-<name>-host>` container, so the DOM holds one host per directive
+ * per app rather than a wrapper element per usage. Keying the host by
+ * `AppContext` keeps `useId` prefixes, global config and registered
+ * components/icons correct when several Vue apps coexist on a page.
+ */
+export interface PopoverDirectiveConfig<Value, Options> {
+    /** Used for the host element's `data-*` attribute and the entry id prefix. */
+    name: string;
+    /** Normalise the raw binding into the options consumed by {@link build}. */
+    resolve: (binding: DirectiveBinding<Value>) => Options;
+    /**
+     * Build the component vnode for one entry, or return `null` to render
+     * nothing (e.g. an empty value). `id` is a stable, unique key/id and `el` is
+     * the activator element.
+     */
+    build: (id: string, el: HTMLElement, options: Options) => VNode | null;
+}
+export declare const createPopoverDirective: <Value, Options>(config: PopoverDirectiveConfig<Value, Options>) => Directive<HTMLElement, Value>;

package/dist/index.d.ts

@@ -86,6 +86,10 @@ export { default as BbTextInput } from './components/BbTextInput/BbTextInput.vue
 export { default as BbToast } from './components/BbToast/BbToast.vue';
 export { default as BbTooltip } from './components/BbTooltip/BbTooltip.vue';
 export { default as BbTree } from './components/BbTree/BbTree.vue';
+export { vBbTooltip, BbTooltipDirectivePlugin } from './directives/bbTooltip';
+export type { BbTooltipDirectiveValue } from './directives/bbTooltip';
+export { vBbDropdown, BbDropdownDirectivePlugin, } from './directives/bbDropdown';
+export type { BbDropdownDirectiveValue } from './directives/bbDropdown';
 export { default as CommonInputInnerContainer } from './components/CommonInputInnerContainer/CommonInputInnerContainer.vue';
 export { default as CommonInputOuterContainer } from './components/CommonInputOuterContainer/CommonInputOuterContainer.vue';
 export type { BaseButtonProps } from './components/BaseButton/types';

package/dist/index.js

@@ -77,4 +77,6 @@ import be from "./index337.js";
 import xe from "./index342.js";
 import Se from "./index345.js";
 import Ce from "./index349.js";
-export { d as BaseButton, g as BaseCheckbox, _ as BaseCheckboxGroup, h as BaseColorInput, v as BaseDatePicker, y as BaseDatePickerInput, b as BaseDialog, x as BaseInputContainer, S as BaseNumberInput, C as BaseRadio, w as BaseRadioGroup, T as BaseRating, O as BaseSelect, k as BaseSlider, A as BaseSwitch, j as BaseSwitchGroup, M as BaseTag, P as BaseTextInput, N as BaseTextarea, I as BbAccordion, R as BbAlert, z as BbAvatar, B as BbBadge, H as BbBreadcrumbs, U as BbButton, W as BbCheckbox, G as BbCheckboxGroup, D as BbChip, F as BbCollapsible, K as BbColorInput, f as BbColorPalette, J as BbConfirm, Y as BbConfirmPortal, X as BbDatePickerInput, Z as BbDialog, V as BbDropdown, Q as BbDropdownButton, $ as BbDropzone, L as BbIcon, ee as BbIntersection, te as BbNumberInput, ne as BbOffCanvas, re as BbPagination, ie as BbPopover, ae as BbProgress, oe as BbRadio, se as BbRadioGroup, ce as BbRating, le as BbRatio, ue as BbRows, fe as BbSelect, de as BbSelectPopover, pe as BbSlider, E as BbSmoothHeight, q as BbSpinner, me as BbSwitch, he as BbSwitchGroup, ge as BbTab, _e as BbTable, ve as BbTag, be as BbTextInput, ye as BbTextarea, xe as BbToast, Se as BbTooltip, Ce as BbTree, p as CommonInputInnerContainer, m as CommonInputOuterContainer, e as useBbConfig, t as useBroadcastChannelInstance, n as useConfirm, r as useCountdown, i as useId, a as useMobile, s as useQuery, o as useQueue, c as useToast, l as useWizard, u as wizardInjectionKey };
+import we, { BbTooltipDirectivePlugin as Te } from "./index351.js";
+import Ee, { BbDropdownDirectivePlugin as De } from "./index352.js";
+export { d as BaseButton, g as BaseCheckbox, _ as BaseCheckboxGroup, h as BaseColorInput, v as BaseDatePicker, y as BaseDatePickerInput, b as BaseDialog, x as BaseInputContainer, S as BaseNumberInput, C as BaseRadio, w as BaseRadioGroup, T as BaseRating, O as BaseSelect, k as BaseSlider, A as BaseSwitch, j as BaseSwitchGroup, M as BaseTag, P as BaseTextInput, N as BaseTextarea, I as BbAccordion, R as BbAlert, z as BbAvatar, B as BbBadge, H as BbBreadcrumbs, U as BbButton, W as BbCheckbox, G as BbCheckboxGroup, D as BbChip, F as BbCollapsible, K as BbColorInput, f as BbColorPalette, J as BbConfirm, Y as BbConfirmPortal, X as BbDatePickerInput, Z as BbDialog, V as BbDropdown, Q as BbDropdownButton, De as BbDropdownDirectivePlugin, $ as BbDropzone, L as BbIcon, ee as BbIntersection, te as BbNumberInput, ne as BbOffCanvas, re as BbPagination, ie as BbPopover, ae as BbProgress, oe as BbRadio, se as BbRadioGroup, ce as BbRating, le as BbRatio, ue as BbRows, fe as BbSelect, de as BbSelectPopover, pe as BbSlider, E as BbSmoothHeight, q as BbSpinner, me as BbSwitch, he as BbSwitchGroup, ge as BbTab, _e as BbTable, ve as BbTag, be as BbTextInput, ye as BbTextarea, xe as BbToast, Se as BbTooltip, Te as BbTooltipDirectivePlugin, Ce as BbTree, p as CommonInputInnerContainer, m as CommonInputOuterContainer, e as useBbConfig, t as useBroadcastChannelInstance, n as useConfirm, r as useCountdown, i as useId, a as useMobile, s as useQuery, o as useQueue, c as useToast, l as useWizard, Ee as vBbDropdown, we as vBbTooltip, u as wizardInjectionKey };