ropav 0.11.1 → 0.12.0

package/dist/components/autocomplete/autocomplete-clear-button.js

@@ -23,7 +23,7 @@ var autocomplete_clear_button_vue_vue_type_script_setup_true_vapor_true_lang_def
 		};
 		/** Empties the selection, and only the selection — the text that was typed is left alone. */
 		const onClick = () => {
-			state.selection.clearSelection();
+			state.clearValue();
 			onClear();
 		};
 		const n1 = t0();

package/dist/components/autocomplete/autocomplete-root.js

@@ -178,7 +178,10 @@ var autocomplete_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 		* that part is what {@link provideAutocompleteContext} above carries.
 		*/
 		provideSelectContext({
+			isDisabled,
+			onClear: () => emit("clear"),
 			placeholder,
+			registerClearButton: () => () => {},
 			select,
 			selectedItems: state.selectedItems,
 			selectedText,

package/dist/components/checkbox/checkbox-root.js

@@ -88,7 +88,10 @@ var checkbox_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		});
 		const validation = group ? group.state.itemValidation : ownValidation;
 		provideFieldErrorContext(group ? null : { validation: validation.displayValidation });
-		const { context: fieldIds, describedBy } = useFieldIds({ slots: ["description", "errorMessage"] });
+		const { context: fieldIds, describedBy } = useFieldIds({
+			labelElementType: "span",
+			slots: ["description", "errorMessage"]
+		});
 		provideFieldIdsContext(fieldIds);
 		const resolvedDescribedBy = computed(() => {
 			const ids = [

package/dist/components/radio/radio-root.js

@@ -23,7 +23,10 @@ var radio_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		const styles = computed(() => radioVariants());
 		const isSelected = computed(() => state.selectedValue.value === props.value);
 		const isDisabled = computed(() => Boolean(props.isDisabled) || state.isDisabled.value);
-		const { context: fieldIds, describedBy } = useFieldIds({ slots: ["description"] });
+		const { context: fieldIds, describedBy } = useFieldIds({
+			labelElementType: "span",
+			slots: ["description"]
+		});
 		provideFieldIdsContext(fieldIds);
 		const resolvedDescribedBy = computed(() => {
 			const ids = [

package/dist/components/scroll-shadow/scroll-shadow-root.js

@@ -1,5 +1,5 @@
 import { focusableIn } from "../../utils/focus.js";
-import { useScrollShadow } from "./use-scroll-shadow.js";
+import { clearScrollShadowVisibility, useScrollShadow } from "./use-scroll-shadow.js";
 import { computed, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, setStyle, shallowRef, template, watch } from "vue";
 import { scrollShadowVariants } from "@ropav/styles";
 //#region src/components/scroll-shadow/scroll-shadow-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -43,21 +43,13 @@ var scroll_shadow_root_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			variant: props.variant
 		}).base({ class: props.class }));
 		const style = computed(() => [{ "--scroll-shadow-size": `${props.size}px` }, props.style]);
-		const clearVisibility = (current) => {
-			delete current.dataset["topScroll"];
-			delete current.dataset["bottomScroll"];
-			delete current.dataset["topBottomScroll"];
-			delete current.dataset["leftScroll"];
-			delete current.dataset["rightScroll"];
-			delete current.dataset["leftRightScroll"];
-		};
 		watch([
 			element,
 			() => props.visibility,
 			() => props.orientation
 		], ([current, visibility, orientation]) => {
 			if (!current || visibility === "auto") return;
-			clearVisibility(current);
+			clearScrollShadowVisibility(current);
 			if (visibility === "both") current.dataset[orientation === "vertical" ? "topBottomScroll" : "leftRightScroll"] = "true";
 			else if (visibility !== "none") current.dataset[`${visibility}Scroll`] = "true";
 		}, {

package/dist/components/scroll-shadow/use-scroll-shadow.d.ts

@@ -12,6 +12,16 @@ export interface UseScrollShadowReturn {
     /** Re-measure immediately. The DOM write is batched into the next animation frame. */
     checkOverflow: () => void;
 }
+/**
+ * Take every edge attribute off, so the stylesheet's mask stops applying.
+ *
+ * The attributes are the whole state, and the one place the mask is keyed on, so whoever stops
+ * writing them has to take the last set off too or the fade stays painted at whatever it was.
+ *
+ * Reports whether anything was actually removed, so a caller telling the world the fade is gone
+ * only says it when there was one.
+ */
+export declare const clearScrollShadowVisibility: (element: HTMLElement) => boolean;
 /**
  * Detect the scrollable edges around an element and publish them as `data-*` attributes.
  *

package/dist/components/scroll-shadow/use-scroll-shadow.js

@@ -1,5 +1,32 @@
 import { computed, onScopeDispose, toValue, watch } from "vue";
 //#region src/components/scroll-shadow/use-scroll-shadow.ts
+/** Every attribute an edge is published as, which together are the whole state. */
+var EDGE_ATTRIBUTES = [
+	"topScroll",
+	"bottomScroll",
+	"topBottomScroll",
+	"leftScroll",
+	"rightScroll",
+	"leftRightScroll"
+];
+/**
+* Take every edge attribute off, so the stylesheet's mask stops applying.
+*
+* The attributes are the whole state, and the one place the mask is keyed on, so whoever stops
+* writing them has to take the last set off too or the fade stays painted at whatever it was.
+*
+* Reports whether anything was actually removed, so a caller telling the world the fade is gone
+* only says it when there was one.
+*/
+var clearScrollShadowVisibility = (element) => {
+	let cleared = false;
+	for (const attribute of EDGE_ATTRIBUTES) {
+		if (element.dataset[attribute] === void 0) continue;
+		delete element.dataset[attribute];
+		cleared = true;
+	}
+	return cleared;
+};
 /**
 * Detect the scrollable edges around an element and publish them as `data-*` attributes.
 *
@@ -73,7 +100,12 @@ var useScrollShadow = (options) => {
 	], ([current, enabled, mode], _previous, onCleanup) => {
 		previous = null;
 		cancelPendingFrame();
-		if (!current || !enabled || mode !== "auto") return;
+		if (!current) return;
+		if (mode !== "auto") return;
+		if (!enabled) {
+			if (clearScrollShadowVisibility(current)) options.onVisibilityChange?.("none");
+			return;
+		}
 		checkOverflow();
 		current.addEventListener("scroll", checkOverflow, { passive: true });
 		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(checkOverflow);
@@ -120,4 +152,4 @@ var useScrollShadow = (options) => {
 	return { checkOverflow };
 };
 //#endregion
-export { useScrollShadow };
+export { clearScrollShadowVisibility, useScrollShadow };

package/dist/components/select/index.d.ts

@@ -1,10 +1,11 @@
+import SelectClearButton from "./select-clear-button.js";
 import SelectIndicator from "./select-indicator.js";
 import SelectPopover from "./select-popover.js";
 import SelectRoot from "./select-root.js";
 import SelectTrigger from "./select-trigger.js";
 import SelectValue from "./select-value.js";
-export { SelectIndicator, SelectPopover, SelectRoot as Select, SelectTrigger, SelectValue };
-export type { SelectIndicatorProps, SelectPopoverProps, SelectRootProps as SelectProps, SelectRootSlotProps as SelectSlotProps, SelectTriggerProps, SelectValueProps, SelectValueSlotProps, } from "./select.types.js";
+export { SelectClearButton, SelectIndicator, SelectPopover, SelectRoot as Select, SelectTrigger, SelectValue, };
+export type { SelectClearButtonProps, SelectIndicatorProps, SelectPopoverProps, SelectRootProps as SelectProps, SelectRootSlotProps as SelectSlotProps, SelectTriggerProps, SelectValueProps, SelectValueSlotProps, } from "./select.types.js";
 export { useSelectContext } from "./select.context.js";
 export type { SelectContext } from "./select.context.js";
 export type { UseSelectReturn } from "../../composables/use-select.js";

package/dist/components/select/index.js

@@ -1,8 +1,9 @@
 import { useSelectContext } from "./select.context.js";
+import select_clear_button_default from "./select-clear-button.js";
 import select_indicator_default from "./select-indicator.js";
 import select_popover_default from "./select-popover.js";
 import select_root_default from "./select-root.js";
 import select_trigger_default from "./select-trigger.js";
 import select_value_default from "./select-value.js";
 import { selectVariants } from "@ropav/styles";
-export { select_root_default as Select, select_indicator_default as SelectIndicator, select_popover_default as SelectPopover, select_trigger_default as SelectTrigger, select_value_default as SelectValue, selectVariants, useSelectContext };
+export { select_root_default as Select, select_clear_button_default as SelectClearButton, select_indicator_default as SelectIndicator, select_popover_default as SelectPopover, select_trigger_default as SelectTrigger, select_value_default as SelectValue, selectVariants, useSelectContext };

package/dist/components/select/select-clear-button.d.ts

@@ -0,0 +1,21 @@
+import type { SelectClearButtonProps } from "./select.types.js";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<SelectClearButtonProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/select/select-clear-button.js

@@ -0,0 +1,66 @@
+import { dataAttr } from "../../utils/assertion.js";
+import icon_close_default from "../icons/icon-close.js";
+import { useSelectContext } from "./select.context.js";
+import { computed, createComponent, createSlot, defineVaporComponent, on, onMounted, onUnmounted, renderEffect, setAttr, setClass, setInsertionState, template, unref } from "vue";
+//#region src/components/select/select-clear-button.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span aria-hidden=true data-slot=select-clear-button>", 1);
+var select_clear_button_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "select-clear-button",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { isDisabled, onClear, registerClearButton, select, selectedItems, slots, state } = useSelectContext();
+		const styles = computed(() => slots.value.clearButton({ class: props.class }));
+		/**
+		* Whether there is nothing to clear, which is what the stylesheet fades this out on.
+		*
+		* It stays in the DOM either way: appearing and disappearing would reflow the trigger every time
+		* a choice was made or undone.
+		*
+		* Read from the chosen items rather than the selected keys, so this agrees with what the trigger
+		* shows: a value naming an option the collection does not hold renders as the placeholder, and a
+		* button offering to clear what the user cannot see is a button offering to clear nothing.
+		*/
+		const isEmpty = computed(() => selectedItems.value.length === 0);
+		let unregister;
+		onMounted(() => {
+			unregister = registerClearButton();
+		});
+		onUnmounted(() => {
+			unregister?.();
+			unregister = void 0;
+		});
+		/**
+		* Keeps the press off the trigger, so clearing does not also open the popover.
+		*
+		* Guarded the same way the click is: with nothing to clear the stylesheet takes this out of the
+		* hit test, and a press swallowed here rather than there would leave a strip of the trigger that
+		* neither clears nor opens.
+		*/
+		const onPointerdown = (event) => {
+			if (isDisabled.value || isEmpty.value) return;
+			event.stopPropagation();
+		};
+		const onClick = (event) => {
+			event.stopPropagation();
+			if (isDisabled.value || isEmpty.value) return;
+			state.clearValue();
+			onClear();
+			select.triggerElement.value?.focus();
+		};
+		const n3 = t0();
+		renderEffect(() => {
+			setClass(n3, styles.value);
+			setAttr(n3, "data-empty", unref(dataAttr)(isEmpty.value));
+		});
+		setInsertionState(n3);
+		createSlot("default", null, () => {
+			return createComponent(unref(icon_close_default), { "data-slot": "select-clear-button-icon" });
+		});
+		on(n3, "click", onClick);
+		on(n3, "pointerdown", onPointerdown);
+		return n3;
+	}
+});
+//#endregion
+export { select_clear_button_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/select/select-root.d.ts

@@ -3,6 +3,7 @@ import type { SelectRootProps, SelectRootSlotProps } from "./select.types.js";
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<SelectRootProps<T> & {
         onChange?: ((value: SelectedValue) => any) | undefined;
+        onClear?: (() => any) | undefined;
         onFocusChange?: ((isFocused: boolean) => any) | undefined;
         onOpenChange?: ((isOpen: boolean) => any) | undefined;
         "onUpdate:isOpen"?: ((isOpen: boolean) => any) | undefined;
@@ -15,7 +16,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
     slots: {
         default?: (props: SelectRootSlotProps) => unknown;
     };
-    emit: ((evt: "change", value: SelectedValue) => void) & ((evt: "focusChange", isFocused: boolean) => void) & ((evt: "openChange", isOpen: boolean) => void) & ((evt: "update:isOpen", isOpen: boolean) => void) & ((evt: "update:value", value: SelectedValue) => void);
+    emit: ((evt: "change", value: SelectedValue) => void) & ((evt: "clear") => void) & ((evt: "focusChange", isFocused: boolean) => void) & ((evt: "openChange", isOpen: boolean) => void) & ((evt: "update:isOpen", isOpen: boolean) => void) & ((evt: "update:value", value: SelectedValue) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/select/select-root.js

@@ -74,7 +74,8 @@ var select_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 		"update:value",
 		"openChange",
 		"update:isOpen",
-		"focusChange"
+		"focusChange",
+		"clear"
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
@@ -106,12 +107,22 @@ var select_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 			validationBehavior: () => props.validationBehavior,
 			value: () => props.value
 		});
+		let clearButtons = 0;
+		const registerClearButton = () => {
+			clearButtons += 1;
+			return () => {
+				clearButtons -= 1;
+			};
+		};
+		const onClear = () => emit("clear");
 		const select = useSelect({
 			ariaDescribedby: () => props.ariaDescribedby,
 			ariaLabel: () => props.ariaLabel,
 			ariaLabelledby: () => props.ariaLabelledby,
+			hasClearButton: () => clearButtons > 0,
 			isDisabled: () => props.isDisabled,
 			isRequired: () => props.isRequired,
+			onClear,
 			onFocusChange: (isFocused) => emit("focusChange", isFocused)
 		}, state);
 		const strings = useLocalizedStringFormatter(selectStrings);
@@ -136,7 +147,10 @@ var select_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 		provideFieldIdsContext(select.fieldIds.context);
 		provideFieldErrorContext({ validation: state.displayValidation });
 		provideSelectContext({
+			isDisabled: computed(() => Boolean(props.isDisabled)),
+			onClear,
 			placeholder,
+			registerClearButton,
 			select,
 			selectedItems: state.selectedItems,
 			selectedText,

package/dist/components/select/select.context.d.ts

@@ -12,6 +12,17 @@ export interface SelectContext {
     selectedText: ComputedRef<string>;
     /** What the trigger shows when nothing is chosen, already resolved to the localized default. */
     placeholder: ComputedRef<string>;
+    /** Whether the whole select is disabled, which the clear button has to answer to as well. */
+    isDisabled: ComputedRef<boolean>;
+    /** Called after the selection is emptied, whichever way it was emptied. */
+    onClear: () => void;
+    /**
+     * Registers a mounted clear button and returns the call that unregisters it.
+     *
+     * Counted rather than a flag, so unmounting one cannot switch the trigger's clear shortcut off
+     * while another is still mounted.
+     */
+    registerClearButton: () => () => void;
 }
 /**
  * Strict: every part of a select reads the state the root holds, so one rendered outside a root

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

@@ -90,6 +90,9 @@ export interface SelectValueSlotProps<T = unknown> {
 export interface SelectIndicatorProps {
     class?: string;
 }
+export interface SelectClearButtonProps {
+    class?: string;
+}
 export interface SelectPopoverProps {
     class?: string;
     /** @default "bottom" */

package/dist/components/switch/switch-root.js

@@ -56,7 +56,10 @@ var switch_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 			value: () => state.value
 		});
 		provideFieldErrorContext({ validation: validation.displayValidation });
-		const { context: fieldIds, describedBy } = useFieldIds({ slots: ["description", "errorMessage"] });
+		const { context: fieldIds, describedBy } = useFieldIds({
+			labelElementType: "span",
+			slots: ["description", "errorMessage"]
+		});
 		provideFieldIdsContext(fieldIds);
 		const resolvedDescribedBy = computed(() => {
 			const ids = [describedBy.value, props.ariaDescribedby].filter(Boolean);

package/dist/components/table/table-row.js

@@ -1,10 +1,11 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useId as useId$1 } from "../../composables/use-id.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { isNestedControl } from "../../utils/focus.js";
 import { useVirtualizerItem } from "../virtualizer/use-virtualizer-item.js";
 import { visuallyHiddenStyle } from "../../utils/visually-hidden.js";
 import { provideTableRowContext, useTableGridContext, useTableVirtualizerContext } from "./table.context.js";
-import { createTableRegistry, isTableCellControl, tableCellId } from "./use-table-collection.js";
+import { createTableRegistry, tableCellId } from "./use-table-collection.js";
 import { computed, createDynamicComponent, createIf, createSlot, defineVaporComponent, extend, on, renderEffect, setDynamicProps, setStaticTemplateRef, shallowRef, template, unref, watch } from "vue";
 //#region src/components/table/table-row.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>");
@@ -155,7 +156,7 @@ var table_row_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		});
 		const onClick = (event) => {
 			if (isDisabled.value || selectionMode.value === "none") return;
-			if (isTableCellControl(event.target)) return;
+			if (isNestedControl(event.target)) return;
 			selection.select(rowKey.value, {
 				isCtrlPressed: event.ctrlKey || event.metaKey,
 				isShiftPressed: event.shiftKey

package/dist/components/table/use-grid-keyboard.js

@@ -1,5 +1,4 @@
-import { focusableIn, getScrollParent, isScrollable } from "../../utils/focus.js";
-import { isTableCellControl } from "./use-table-collection.js";
+import { focusableIn, getScrollParent, isNestedControl, isScrollable } from "../../utils/focus.js";
 import { computed, nextTick, shallowRef, toValue, watch } from "vue";
 //#region src/components/table/use-grid-keyboard.ts
 var NO_FOCUS = {
@@ -307,7 +306,7 @@ var useGridKeyboard = (options) => {
 		const target = event.target;
 		if (toValue(options.isDisabled)) return;
 		if (!element || !(target instanceof Node) || !element.contains(target)) return;
-		if (isTableCellControl(target)) return;
+		if (isNestedControl(target)) return;
 		const from = focused.value;
 		const isModified = event.ctrlKey || event.metaKey;
 		const move = (next) => {

package/dist/components/table/use-table-collection.d.ts

@@ -135,14 +135,3 @@ export declare const normalizeIdKey: (key: CollectionKey) => string;
 export declare const tableColumnHeaderId: (tableId: string, columnKey: CollectionKey) => string;
 /** The id a row header cell carries, which is what `aria-labelledby` on the row points at. */
 export declare const tableCellId: (tableId: string, rowKey: CollectionKey, columnKey: CollectionKey) => string;
-/**
- * Whether an event landed on a control inside a cell rather than on a part of the grid.
- *
- * React Aria never has to ask: its press hook stops propagation, so a button or a checkbox in a
- * cell never lets the row or the grid see the interaction. Nothing stops propagation here, so both
- * the row's click handler and the grid's key handler have to recognise the case themselves.
- *
- * The grid's own parts are told apart by their collection marker — a cell holding the roving tab
- * stop matches the focusable selector without being content.
- */
-export declare const isTableCellControl: (target: EventTarget | null) => boolean;

package/dist/components/table/use-table-collection.js

@@ -1,4 +1,3 @@
-import { FOCUSABLE_SELECTOR } from "../../utils/focus.js";
 import { useCollection } from "../../composables/use-collection.js";
 import { createTableCollection } from "../../utils/virtualizer-collection.js";
 import { computed, shallowRef } from "vue";
@@ -113,20 +112,5 @@ var normalizeIdKey = (key) => typeof key === "string" ? key.replace(/\s*/g, "")
 var tableColumnHeaderId = (tableId, columnKey) => `${tableId}-${normalizeIdKey(columnKey)}`;
 /** The id a row header cell carries, which is what `aria-labelledby` on the row points at. */
 var tableCellId = (tableId, rowKey, columnKey) => `${tableId}-${normalizeIdKey(rowKey)}-${normalizeIdKey(columnKey)}`;
-/**
-* Whether an event landed on a control inside a cell rather than on a part of the grid.
-*
-* React Aria never has to ask: its press hook stops propagation, so a button or a checkbox in a
-* cell never lets the row or the grid see the interaction. Nothing stops propagation here, so both
-* the row's click handler and the grid's key handler have to recognise the case themselves.
-*
-* The grid's own parts are told apart by their collection marker — a cell holding the roving tab
-* stop matches the focusable selector without being content.
-*/
-var isTableCellControl = (target) => {
-	if (!(target instanceof Element)) return false;
-	const control = target.closest(FOCUSABLE_SELECTOR);
-	return control != null && !control.hasAttribute("data-collection");
-};
 //#endregion
-export { createTableRegistry, createTableTree, isTableCellControl, normalizeIdKey, tableCellId, tableColumnHeaderId, useTableCollection };
+export { createTableRegistry, createTableTree, normalizeIdKey, tableCellId, tableColumnHeaderId, useTableCollection };

package/dist/components/tabs/tabs-root.js

@@ -12,6 +12,7 @@ var tabs_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 	__name: "tabs-root",
 	props: {
 		class: {},
+		align: { default: void 0 },
 		selectedKey: {},
 		defaultSelectedKey: {},
 		disabledKeys: {},
@@ -32,7 +33,10 @@ var tabs_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		const orientation = computed(() => props.orientation ?? "horizontal");
 		const keyboardActivation = computed(() => props.keyboardActivation ?? "automatic");
 		const isDisabled = computed(() => Boolean(props.isDisabled));
-		const slots = computed(() => tabsVariants({ variant: props.variant }));
+		const slots = computed(() => tabsVariants({
+			align: props.align,
+			variant: props.variant
+		}));
 		const state = useTabListState({
 			defaultSelectedKey: props.defaultSelectedKey,
 			disabledKeys: () => props.disabledKeys,

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

@@ -8,6 +8,12 @@ export type TabsOrientation = "horizontal" | "vertical";
 export type TabsKeyboardActivation = "automatic" | "manual";
 export interface TabsRootProps {
     class?: string;
+    /**
+     * Where a tab's label and icon sit inside the tab.
+     *
+     * @default "center"
+     */
+    align?: TabsVariants["align"];
     /** The selected tab, when the caller drives it. */
     selectedKey?: CollectionKey;
     /** The initially selected tab. Falls back to the first tab that is not disabled. */

package/dist/components/toast/index.d.ts

@@ -8,7 +8,7 @@ import ToastRoot from "./toast-root.js";
 import ToastTitle from "./toast-title.js";
 export { ToastActionButton, ToastCloseButton, ToastContent, ToastDescription, ToastIndicator, ToastProvider, ToastRoot as Toast, ToastTitle, };
 export type { ToastActionButtonProps, ToastActionValue, ToastAddOptions, ToastCloseButtonProps, ToastContentProps, ToastContentValue, ToastDescriptionProps, ToastIndicatorProps, ToastOptions, ToastPromiseOptions, ToastProviderProps, ToastProviderSlotProps, ToastQueueOptions, ToastRenderable, ToastRootProps as ToastProps, ToastTitleProps, QueuedToast, } from "./toast.types.js";
-export { ToastQueue, createToastFunction, getQueuedToastCount, resetToastQueue, toast, toastQueue, useToastQueue, } from "./toast-queue.js";
+export { ToastQueue, createToastFunction, createViewTransitionUpdate, getQueuedToastCount, resetToastQueue, toast, toastQueue, useToastQueue, } from "./toast-queue.js";
 export type { Timer } from "./toast-queue.js";
 export type { ToastFunction, UseToastQueueReturn } from "./toast-queue.js";
 export { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, } from "./toast.constants.js";

package/dist/components/toast/index.js

@@ -4,10 +4,10 @@ import toast_close_button_default from "./toast-close-button.js";
 import toast_content_default from "./toast-content.js";
 import toast_description_default from "./toast-description.js";
 import toast_indicator_default from "./toast-indicator.js";
+import { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH } from "./toast.constants.js";
 import toast_root_default from "./toast-root.js";
 import toast_title_default from "./toast-title.js";
-import { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH } from "./toast.constants.js";
-import { ToastQueue, createToastFunction, getQueuedToastCount, resetToastQueue, toast, toastQueue, useToastQueue } from "./toast-queue.js";
+import { ToastQueue, createToastFunction, createViewTransitionUpdate, getQueuedToastCount, resetToastQueue, toast, toastQueue, useToastQueue } from "./toast-queue.js";
 import toast_provider_default from "./toast-provider.js";
 import { toastVariants } from "@ropav/styles";
-export { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, toast_root_default as Toast, toast_action_button_default as ToastActionButton, toast_close_button_default as ToastCloseButton, toast_content_default as ToastContent, toast_description_default as ToastDescription, toast_indicator_default as ToastIndicator, toast_provider_default as ToastProvider, ToastQueue, toast_title_default as ToastTitle, createToastFunction, getQueuedToastCount, resetToastQueue, toast, toastQueue, toastVariants, useToastItemContext, useToastQueue, useToastRegionContext };
+export { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, toast_root_default as Toast, toast_action_button_default as ToastActionButton, toast_close_button_default as ToastCloseButton, toast_content_default as ToastContent, toast_description_default as ToastDescription, toast_indicator_default as ToastIndicator, toast_provider_default as ToastProvider, ToastQueue, toast_title_default as ToastTitle, createToastFunction, createViewTransitionUpdate, getQueuedToastCount, resetToastQueue, toast, toastQueue, toastVariants, useToastItemContext, useToastQueue, useToastRegionContext };

package/dist/components/toast/toast-default-content.js

@@ -8,7 +8,7 @@ import toast_indicator_default from "./toast-indicator.js";
 import toast_renderable_default from "./toast-renderable.js";
 import toast_root_default from "./toast-root.js";
 import toast_title_default from "./toast-title.js";
-import { computed, createComponent, createIf, defineVaporComponent, extend, unref } from "vue";
+import { computed, createComponent, createIf, defineVaporComponent, extend, shallowRef, unref, watch } from "vue";
 //#region src/components/toast/toast-default-content.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var toast_default_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "toast-default-content",
@@ -21,6 +21,19 @@ var toast_default_content_vue_vue_type_script_setup_true_vapor_true_lang_default
 		* because there is no room for a row.
 		*/
 		const isMobile = useMediaQuery("(max-width: 768px)");
+		/**
+		* Which of the three indicators is showing. Tracked here rather than inside the indicator because
+		* the three are separate branches: settling a promise toast unmounts the spinner's instance and
+		* mounts a fresh one, which would have no memory of what it replaced.
+		*/
+		const indicatorKind = computed(() => {
+			if (content.value.isLoading === true) return "loading";
+			return content.value.indicator === void 0 ? "default" : "custom";
+		});
+		const hasSwappedIndicator = shallowRef(false);
+		watch(indicatorKind, () => {
+			hasSwappedIndicator.value = true;
+		});
 		const action = computed(() => {
 			const value = content.value.actionProps;
 			return value?.label == null ? void 0 : value;
@@ -38,18 +51,27 @@ var toast_default_content_vue_vue_type_script_setup_true_vapor_true_lang_default
 			return [
 				createIf(() => content.value.indicator !== null, () => {
 					return createIf(() => content.value.isLoading === true, () => {
-						return createComponent(toast_indicator_default, { variant: () => content.value.variant }, () => {
+						return createComponent(toast_indicator_default, {
+							"is-swapped": () => hasSwappedIndicator.value,
+							variant: () => content.value.variant
+						}, () => {
 							return createComponent(spinner_root_default, {
 								color: "current",
 								size: "sm"
 							});
 						});
 					}, () => createIf(() => content.value.indicator !== void 0, () => {
-						return createComponent(toast_indicator_default, { variant: () => content.value.variant }, () => {
+						return createComponent(toast_indicator_default, {
+							"is-swapped": () => hasSwappedIndicator.value,
+							variant: () => content.value.variant
+						}, () => {
 							return createComponent(toast_renderable_default, { value: () => content.value.indicator });
 						});
 					}, () => {
-						return createComponent(toast_indicator_default, { variant: () => content.value.variant });
+						return createComponent(toast_indicator_default, {
+							"is-swapped": () => hasSwappedIndicator.value,
+							variant: () => content.value.variant
+						});
 					}, 517), 261);
 				}),
 				createComponent(toast_content_default, null, extend(() => {

package/dist/components/toast/toast-indicator.js

@@ -1,15 +1,17 @@
+import { dataAttr } from "../../utils/assertion.js";
 import danger_icon_default from "../icons/danger-icon.js";
 import info_icon_default from "../icons/info-icon.js";
 import success_icon_default from "../icons/success-icon.js";
 import warning_icon_default from "../icons/warning-icon.js";
 import { useToastItemContext } from "./toast.context.js";
-import { computed, createDynamicComponent, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+import { computed, createDynamicComponent, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template, unref } from "vue";
 //#region src/components/toast/toast-indicator.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-slot=toast-indicator>", 1);
 var toast_indicator_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "toast-indicator",
 	props: {
 		class: {},
+		isSwapped: { type: Boolean },
 		variant: {}
 	},
 	setup(__props) {
@@ -25,7 +27,11 @@ var toast_indicator_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 			}
 		});
 		const n3 = t0();
-		renderEffect(() => setClass(n3, ["rp-toast__indicator", props.class]));
+		renderEffect(() => {
+			const _props = props;
+			setClass(n3, ["rp-toast__indicator", _props.class]);
+			setAttr(n3, "data-swapped", unref(dataAttr)(_props.isSwapped));
+		});
 		setInsertionState(n3);
 		createSlot("default", null, () => {
 			return createDynamicComponent(() => defaultIcon.value, { "data-slot": "toast-default-icon" });