@rotki/ui-library 3.0.0-beta.1 → 3.0.0-beta.2

package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,11 @@
+import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { onClickOutside, useElementSize } from "../../../vendor/@vueuse/core/dist/index.js";
 import { cn, tv } from "../../../utils/tv.js";
 import { ButtonGroupBoundary } from "../../buttons/button-group/button-group-context.js";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
 import RuiFormTextDetail_default from "../../helpers/RuiFormTextDetail.js";
 import { useFloating } from "../../../composables/floating.js";
 import { Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, openBlock, ref, renderSlot, unref, useId, useModel, useTemplateRef, watch, withCtx, withKeys } from "vue";
-import { onClickOutside, useElementSize } from "@vueuse/core";
-import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/overlays/menu/RuiMenu.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-menu-disabled"];
 var _hoisted_2 = [
@@ -115,7 +115,7 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		* keys.
 		*/
 		const baseMenuAttrs = computed(() => {
-			const clickVal = get$1(click);
+			const clickVal = get(click);
 			return {
 				onMouseover: __props.disabled ? void 0 : () => {
 					if (__props.openOnHover) onOpen();
@@ -126,11 +126,11 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			};
 		});
 		const menuAttrs = computed(() => ({
-			...get$1(baseMenuAttrs),
+			...get(baseMenuAttrs),
 			"onClick": __props.disabled ? void 0 : checkClick,
-			"aria-haspopup": get$1(ariaHasPopup),
-			"aria-expanded": get$1(open),
-			"aria-controls": get$1(visible) ? menuId : void 0
+			"aria-haspopup": get(ariaHasPopup),
+			"aria-expanded": get(open),
+			"aria-controls": get(visible) ? menuId : void 0
 		}));
 		/**
 		* Moves focus into the open menu without scrolling the page. A menu taller than the space below its
@@ -138,7 +138,7 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		* container, sliding the page out from under the activator.
 		*/
 		function focusOnContent() {
-			const content = get$1(menuContent);
+			const content = get(menuContent);
 			if (!content) return;
 			content.focus({ preventScroll: true });
 		}
@@ -148,15 +148,15 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		}
 		/** Hands focus back to the activator on close, likewise without scrolling to it. */
 		function focusOnActivator() {
-			const activatorEl = get$1(activator);
+			const activatorEl = get(activator);
 			if (!activatorEl) return;
 			const focusableEl = activatorEl.querySelector(FOCUSABLE_ELEMENTS_SELECTOR);
 			if (focusableEl) focusableEl.focus({ preventScroll: true });
 		}
 		function onLeave(event) {
-			if (!get$1(open)) return;
+			if (!get(open)) return;
 			onClose();
-			set$1(click, false);
+			set(click, false);
 			event?.stopPropagation();
 			if (__props.disableAutoFocus) return;
 			nextTick(() => focusOnActivator());
@@ -177,26 +177,26 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			onLeave(event);
 		}
 		function checkClick() {
-			if (get$1(open) && get$1(click)) {
+			if (get(open) && get(click)) {
 				if (!__props.persistOnActivatorClick) onLeave();
 			} else {
 				onOpen();
-				set$1(click, true);
+				set(click, true);
 			}
 		}
 		watch(modelValue, (value) => {
-			if (get$1(open) === value) return;
+			if (get(open) === value) return;
 			if (value) {
 				onOpen();
-				set$1(click, true);
+				set(click, true);
 			} else onLeave();
 		});
 		watch(open, (open) => {
-			set$1(modelValue, open);
+			set(modelValue, open);
 			if (open) focusMenu();
 		});
 		onClickOutside(menu, () => {
-			if (get$1(open) && !__props.persistent) onLeave();
+			if (get(open) && !__props.persistent) onLeave();
 		}, { ignore: [activator] });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {

package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiMenu.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn, tv } from '@/utils/tv';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\n/**\n * What the activator slot binds onto its trigger. The ARIA keys belong on an\n * element that can carry them (a button, link or combobox), never on a plain\n * `div`; an activator that sets its own ARIA takes `activatorHandlers(attrs)`.\n */\ninterface MenuAttrs extends BaseMenuAttrs {\n  'onClick'?: () => void;\n  'aria-haspopup': RuiMenuRole | 'true';\n  'aria-expanded': boolean;\n  'aria-controls'?: string;\n}\n\nexport interface RuiMenuClassNames {\n  root?: VueClassValue;\n  wrapper?: VueClassValue;\n  menu?: VueClassValue;\n  /** Overrides applied to the popover content box (e.g. to drop its default padding). */\n  content?: VueClassValue;\n  /** Overrides applied to the hint and messages under the activator. */\n  details?: VueClassValue;\n}\n\n/**\n * Roles a popover container may take. These are the values `aria-haspopup`\n * accepts, which keeps the activator and the popover in agreement.\n */\nexport type RuiMenuRole = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\nexport interface MenuProps {\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  options?: FloatingOptions;\n  classNames?: RuiMenuClassNames;\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  dense?: boolean;\n  /**\n   * Keeps the menu open through the interactions that would otherwise dismiss\n   * it: a click outside and an Escape press. A programmatic close (`v-model`\n   * set to `false`) still applies.\n   */\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n  /**\n   * Optional external element to anchor the menu to, instead of the\n   * activator slot's wrapper. When set, the menu's position is computed\n   * against this element.\n   */\n  anchorEl?: HTMLElement;\n  /**\n   * Role of the teleported popover. Defaults to `menu`, which is correct when\n   * the content is made of `menuitem`s. Set it to `listbox` (or `tree`, `grid`,\n   * `dialog`) when the content follows a different ARIA model, e.g. a selection\n   * list opened by a `combobox`. The activator's `aria-haspopup` follows it.\n   */\n  role?: RuiMenuRole;\n  /**\n   * Accessible name of the teleported popover. A `dialog` popover needs one;\n   * the other roles take it from their activator or options.\n   */\n  menuLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  openOnHover = false,\n  disabled = false,\n  fullWidth = false,\n  openDelay = 0,\n  closeDelay = 0,\n  options,\n  classNames,\n  closeOnContentClick = false,\n  persistOnActivatorClick = false,\n  hint,\n  errorMessages = [],\n  successMessages = [],\n  showDetails = false,\n  dense = false,\n  persistent = false,\n  disableAutoFocus = false,\n  anchorEl,\n  role = 'menu',\n  menuLabel,\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n  activator?: (props: {\n    // An inline type literal, so callers can pass it on as `Record<string, unknown>`\n    attrs: {\n      'onMouseover'?: () => void;\n      'onMouseleave'?: () => void;\n      'onClick'?: () => void;\n      'aria-haspopup': RuiMenuRole | 'true';\n      'aria-expanded': boolean;\n      'aria-controls'?: string;\n    };\n    open: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  default?: (props: { width: number }) => any;\n  /** Rendered above the activator, outside the element the menu positions against. */\n  label?: () => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\nconst menuId = useId();\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nconst {\n  reference: activator,\n  popover: menu,\n  open,\n  visible,\n  currentPlacement,\n  leavePending,\n  onLeavePending,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => options ?? {},\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n  () => anchorEl,\n);\n\nconst { width } = useElementSize(activator);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst menuStyles = tv({\n  slots: {\n    wrapper: 'relative inline-flex max-w-full',\n    popover: 'w-max z-rui-menu',\n    // a hairline edge keeps the popup apart from a surface of nearly the same shade in dark mode\n    content: 'rounded-rui-panel overflow-hidden shadow-rui-menu bg-rui-menu border border-rui-divider text-rui-text focus:outline-hidden p-1',\n    details: 'pt-1',\n  },\n  variants: {\n    fullWidth: {\n      true: { wrapper: 'w-full' },\n    },\n    dense: {\n      true: { details: 'px-2' },\n      false: { details: 'px-4' },\n    },\n  },\n  defaultVariants: { fullWidth: false, dense: false },\n});\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n  fullWidth,\n  dense,\n}));\n\n// `aria-haspopup=\"true\"` means `\"menu\"`, and the default keeps emitting `true` for existing callers\nconst ariaHasPopup = computed<RuiMenuRole | 'true'>(() => role === 'menu' ? 'true' : role);\n\n/**\n * The activator attributes.\n *\n * This and the computed below it must return the same object shape from every\n * branch. Otherwise vue-tsc infers the slot's `attrs` type as a discriminated\n * union where each key is either all defined or all undefined, which breaks\n * consumer code typing its own `attrs` handler with individually optional\n * keys.\n */\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n  const clickVal = get(click);\n  return {\n    onMouseover: disabled\n      ? undefined\n      : () => {\n          if (openOnHover)\n            onOpen();\n        },\n    onMouseleave: disabled\n      ? undefined\n      : () => {\n          if (openOnHover && !clickVal)\n            onClose();\n        },\n  };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n  ...get(baseMenuAttrs),\n  'onClick': disabled ? undefined : checkClick,\n  'aria-haspopup': get(ariaHasPopup),\n  'aria-expanded': get(open),\n  // Only while the popover is in the DOM, so the reference never points at a missing element\n  'aria-controls': get(visible) ? menuId : undefined,\n}));\n\n/**\n * Moves focus into the open menu without scrolling the page. A menu taller than the space below its\n * activator would otherwise make the browser scroll the whole document to reveal the focused\n * container, sliding the page out from under the activator.\n */\nfunction focusOnContent() {\n  const content = get(menuContent);\n  if (!content)\n    return;\n\n  content.focus({ preventScroll: true });\n}\n\nfunction focusMenu(): void {\n  if (disableAutoFocus)\n    return;\n\n  nextTick(() => focusOnContent());\n}\n\n/** Hands focus back to the activator on close, likewise without scrolling to it. */\nfunction focusOnActivator() {\n  const activatorEl = get(activator);\n  if (!activatorEl) {\n    return;\n  }\n  const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n  if (focusableEl) {\n    focusableEl.focus({ preventScroll: true });\n  }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n  if (!get(open))\n    return;\n  onClose();\n  set(click, false);\n  event?.stopPropagation();\n\n  // Return focus to activator when menu closes\n  if (disableAutoFocus) {\n    return;\n  }\n\n  nextTick(() => focusOnActivator());\n}\n\n/**\n * `persistent` blocks the outside interactions that would close the menu, and\n * Escape is one of them, which is how `RuiDialog` and `RuiBottomSheet` already\n * read it. The guard sits here rather than in `onLeave`, because `onLeave`\n * also runs for a programmatic close through `v-model`, which must keep\n * working.\n *\n * A persistent menu leaves the key alone instead of swallowing it, so an inner\n * popover can close on Escape while the menu stays open, and an ancestor still\n * sees a key nothing consumed.\n */\nfunction onEscape(event: KeyboardEvent): void {\n  if (persistent)\n    return;\n\n  onLeave(event);\n}\n\nfunction checkClick(): void {\n  if (get(open) && get(click)) {\n    if (!persistOnActivatorClick)\n      onLeave();\n  }\n  else {\n    onOpen();\n    set(click, true);\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (get(open) === value)\n    return;\n\n  if (value) {\n    onOpen();\n    set(click, true);\n  }\n  else {\n    onLeave();\n  }\n});\n\nwatch(open, (open) => {\n  set(modelValue, open);\n  if (open) {\n    focusMenu();\n  }\n});\n\nonClickOutside(menu, () => {\n  if (get(open) && !persistent)\n    onLeave();\n}, { ignore: [activator] });\n</script>\n\n<template>\n  <!--\n    Escape is swallowed only while the menu is open and not persistent\n    (`onLeave` stops the event itself); a closed or persistent menu must let it\n    through, or a consumer that closes its own editor on Escape never sees the\n    key.\n  -->\n  <div\n    :class=\"classNames?.root\"\n    @keydown.esc=\"onEscape($event)\"\n  >\n    <slot name=\"label\" />\n    <div\n      ref=\"activator\"\n      :class=\"ui.wrapper({ class: cn(classNames?.wrapper) })\"\n      :data-menu-disabled=\"disabled\"\n    >\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n      />\n    </div>\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"menuId\"\n        ref=\"menu\"\n        :class=\"ui.popover({ class: cn(classNames?.menu) })\"\n        :role=\"role\"\n        :aria-label=\"menuLabel\"\n        :data-placement=\"currentPlacement\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc=\"onEscape($event)\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"leavePending ? onLeaveComplete() : undefined\"\n          @before-leave=\"onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            data-id=\"content\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <ButtonGroupBoundary>\n              <slot v-bind=\"{ width }\" />\n            </ButtonGroupBoundary>\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      :class=\"ui.details({ class: cn(classNames?.details) })\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiMenu.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn, tv } from '@/utils/tv';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\n/**\n * What the activator slot binds onto its trigger. The ARIA keys belong on an\n * element that can carry them (a button, link or combobox), never on a plain\n * `div`; an activator that sets its own ARIA takes `activatorHandlers(attrs)`.\n */\ninterface MenuAttrs extends BaseMenuAttrs {\n  'onClick'?: () => void;\n  'aria-haspopup': RuiMenuRole | 'true';\n  'aria-expanded': boolean;\n  'aria-controls'?: string;\n}\n\nexport interface RuiMenuClassNames {\n  root?: VueClassValue;\n  wrapper?: VueClassValue;\n  menu?: VueClassValue;\n  /** Overrides applied to the popover content box (e.g. to drop its default padding). */\n  content?: VueClassValue;\n  /** Overrides applied to the hint and messages under the activator. */\n  details?: VueClassValue;\n}\n\n/**\n * Roles a popover container may take. These are the values `aria-haspopup`\n * accepts, which keeps the activator and the popover in agreement.\n */\nexport type RuiMenuRole = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\nexport interface MenuProps {\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  options?: FloatingOptions;\n  classNames?: RuiMenuClassNames;\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  dense?: boolean;\n  /**\n   * Keeps the menu open through the interactions that would otherwise dismiss\n   * it: a click outside and an Escape press. A programmatic close (`v-model`\n   * set to `false`) still applies.\n   */\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n  /**\n   * Optional external element to anchor the menu to, instead of the\n   * activator slot's wrapper. When set, the menu's position is computed\n   * against this element.\n   */\n  anchorEl?: HTMLElement;\n  /**\n   * Role of the teleported popover. Defaults to `menu`, which is correct when\n   * the content is made of `menuitem`s. Set it to `listbox` (or `tree`, `grid`,\n   * `dialog`) when the content follows a different ARIA model, e.g. a selection\n   * list opened by a `combobox`. The activator's `aria-haspopup` follows it.\n   */\n  role?: RuiMenuRole;\n  /**\n   * Accessible name of the teleported popover. A `dialog` popover needs one;\n   * the other roles take it from their activator or options.\n   */\n  menuLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  openOnHover = false,\n  disabled = false,\n  fullWidth = false,\n  openDelay = 0,\n  closeDelay = 0,\n  options,\n  classNames,\n  closeOnContentClick = false,\n  persistOnActivatorClick = false,\n  hint,\n  errorMessages = [],\n  successMessages = [],\n  showDetails = false,\n  dense = false,\n  persistent = false,\n  disableAutoFocus = false,\n  anchorEl,\n  role = 'menu',\n  menuLabel,\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n  activator?: (props: {\n    // An inline type literal, so callers can pass it on as `Record<string, unknown>`\n    attrs: {\n      'onMouseover'?: () => void;\n      'onMouseleave'?: () => void;\n      'onClick'?: () => void;\n      'aria-haspopup': RuiMenuRole | 'true';\n      'aria-expanded': boolean;\n      'aria-controls'?: string;\n    };\n    open: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  default?: (props: { width: number }) => any;\n  /** Rendered above the activator, outside the element the menu positions against. */\n  label?: () => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\nconst menuId = useId();\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nconst {\n  reference: activator,\n  popover: menu,\n  open,\n  visible,\n  currentPlacement,\n  leavePending,\n  onLeavePending,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => options ?? {},\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n  () => anchorEl,\n);\n\nconst { width } = useElementSize(activator);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst menuStyles = tv({\n  slots: {\n    wrapper: 'relative inline-flex max-w-full',\n    popover: 'w-max z-rui-menu',\n    // a hairline edge keeps the popup apart from a surface of nearly the same shade in dark mode\n    content: 'rounded-rui-panel overflow-hidden shadow-rui-menu bg-rui-menu border border-rui-divider text-rui-text focus:outline-hidden p-1',\n    details: 'pt-1',\n  },\n  variants: {\n    fullWidth: {\n      true: { wrapper: 'w-full' },\n    },\n    dense: {\n      true: { details: 'px-2' },\n      false: { details: 'px-4' },\n    },\n  },\n  defaultVariants: { fullWidth: false, dense: false },\n});\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n  fullWidth,\n  dense,\n}));\n\n// `aria-haspopup=\"true\"` means `\"menu\"`, and the default keeps emitting `true` for existing callers\nconst ariaHasPopup = computed<RuiMenuRole | 'true'>(() => role === 'menu' ? 'true' : role);\n\n/**\n * The activator attributes.\n *\n * This and the computed below it must return the same object shape from every\n * branch. Otherwise vue-tsc infers the slot's `attrs` type as a discriminated\n * union where each key is either all defined or all undefined, which breaks\n * consumer code typing its own `attrs` handler with individually optional\n * keys.\n */\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n  const clickVal = get(click);\n  return {\n    onMouseover: disabled\n      ? undefined\n      : () => {\n          if (openOnHover)\n            onOpen();\n        },\n    onMouseleave: disabled\n      ? undefined\n      : () => {\n          if (openOnHover && !clickVal)\n            onClose();\n        },\n  };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n  ...get(baseMenuAttrs),\n  'onClick': disabled ? undefined : checkClick,\n  'aria-haspopup': get(ariaHasPopup),\n  'aria-expanded': get(open),\n  // Only while the popover is in the DOM, so the reference never points at a missing element\n  'aria-controls': get(visible) ? menuId : undefined,\n}));\n\n/**\n * Moves focus into the open menu without scrolling the page. A menu taller than the space below its\n * activator would otherwise make the browser scroll the whole document to reveal the focused\n * container, sliding the page out from under the activator.\n */\nfunction focusOnContent() {\n  const content = get(menuContent);\n  if (!content)\n    return;\n\n  content.focus({ preventScroll: true });\n}\n\nfunction focusMenu(): void {\n  if (disableAutoFocus)\n    return;\n\n  nextTick(() => focusOnContent());\n}\n\n/** Hands focus back to the activator on close, likewise without scrolling to it. */\nfunction focusOnActivator() {\n  const activatorEl = get(activator);\n  if (!activatorEl) {\n    return;\n  }\n  const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n  if (focusableEl) {\n    focusableEl.focus({ preventScroll: true });\n  }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n  if (!get(open))\n    return;\n  onClose();\n  set(click, false);\n  event?.stopPropagation();\n\n  // Return focus to activator when menu closes\n  if (disableAutoFocus) {\n    return;\n  }\n\n  nextTick(() => focusOnActivator());\n}\n\n/**\n * `persistent` blocks the outside interactions that would close the menu, and\n * Escape is one of them, which is how `RuiDialog` and `RuiBottomSheet` already\n * read it. The guard sits here rather than in `onLeave`, because `onLeave`\n * also runs for a programmatic close through `v-model`, which must keep\n * working.\n *\n * A persistent menu leaves the key alone instead of swallowing it, so an inner\n * popover can close on Escape while the menu stays open, and an ancestor still\n * sees a key nothing consumed.\n */\nfunction onEscape(event: KeyboardEvent): void {\n  if (persistent)\n    return;\n\n  onLeave(event);\n}\n\nfunction checkClick(): void {\n  if (get(open) && get(click)) {\n    if (!persistOnActivatorClick)\n      onLeave();\n  }\n  else {\n    onOpen();\n    set(click, true);\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (get(open) === value)\n    return;\n\n  if (value) {\n    onOpen();\n    set(click, true);\n  }\n  else {\n    onLeave();\n  }\n});\n\nwatch(open, (open) => {\n  set(modelValue, open);\n  if (open) {\n    focusMenu();\n  }\n});\n\nonClickOutside(menu, () => {\n  if (get(open) && !persistent)\n    onLeave();\n}, { ignore: [activator] });\n</script>\n\n<template>\n  <!--\n    Escape is swallowed only while the menu is open and not persistent\n    (`onLeave` stops the event itself); a closed or persistent menu must let it\n    through, or a consumer that closes its own editor on Escape never sees the\n    key.\n  -->\n  <div\n    :class=\"classNames?.root\"\n    @keydown.esc=\"onEscape($event)\"\n  >\n    <slot name=\"label\" />\n    <div\n      ref=\"activator\"\n      :class=\"ui.wrapper({ class: cn(classNames?.wrapper) })\"\n      :data-menu-disabled=\"disabled\"\n    >\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n      />\n    </div>\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"menuId\"\n        ref=\"menu\"\n        :class=\"ui.popover({ class: cn(classNames?.menu) })\"\n        :role=\"role\"\n        :aria-label=\"menuLabel\"\n        :data-placement=\"currentPlacement\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc=\"onEscape($event)\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"leavePending ? onLeaveComplete() : undefined\"\n          @before-leave=\"onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            data-id=\"content\"\n            :class=\"ui.content({ class: cn(classNames?.content) })\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <ButtonGroupBoundary>\n              <slot v-bind=\"{ width }\" />\n            </ButtonGroupBoundary>\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      :class=\"ui.details({ class: cn(classNames?.details) })\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;AAqIA,IAAM,8BACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAlDF,MAAM,aAAa,SAAoB,SAAA,YAAmB;EA6C1D,MAAM,QAAQ,IAAa,KAAK;EAChC,MAAM,cAAc,eAA4B,aAAa;EAC7D,MAAM,SAAS,MAAM;EAKrB,MAAM,EACJ,WAAW,WACX,SAAS,MACT,MACA,SACA,kBACA,cACA,gBACA,QACA,SACA,iBACA,mBACE,kBACI,QAAA,WAAW,CAAC,SACZ,QAAA,gBACA,QAAA,iBACA,QAAA,kBACA,QAAA,QACR;EAEA,MAAM,EAAE,UAAU,eAAe,SAAS;EAE1C,MAAM,EAAE,UAAU,eAAe,wBACzB,QAAA,qBACA,QAAA,eACR;EAEA,MAAM,aAAa,GAAG;GACpB,OAAO;IACL,SAAS;IACT,SAAS;IAET,SAAS;IACT,SAAS;GACX;GACA,UAAU;IACR,WAAW,EACT,MAAM,EAAE,SAAS,SAAS,EAC5B;IACA,OAAO;KACL,MAAM,EAAE,SAAS,OAAO;KACxB,OAAO,EAAE,SAAS,OAAO;IAC3B;GACF;GACA,iBAAiB;IAAE,WAAW;IAAO,OAAO;GAAM;EACpD,CAAC;EAED,MAAM,KAAK,eAA8C,WAAW;GAClE,WAAQ,QAAA;GACR,OAAI,QAAA;EACN,CAAC,CAAC;EAGF,MAAM,eAAe,eAAqC,QAAA,SAAS,SAAS,SAAS,QAAA,IAAI;;;;;;;;;;EAWzF,MAAM,gBAAgB,eAA8B;GAClD,MAAM,WAAW,IAAI,KAAK;GAC1B,OAAO;IACL,aAAa,QAAA,WACT,KAAA,UACM;KACJ,IAAI,QAAA,aACF,OAAO;IACX;IACJ,cAAc,QAAA,WACV,KAAA,UACM;KACJ,IAAI,QAAA,eAAe,CAAC,UAClB,QAAQ;IACZ;GACN;EACF,CAAC;EAED,MAAM,YAAY,gBAA2B;GAC3C,GAAG,IAAI,aAAa;GACpB,WAAW,QAAA,WAAW,KAAA,IAAY;GAClC,iBAAiB,IAAI,YAAY;GACjC,iBAAiB,IAAI,IAAI;GAEzB,iBAAiB,IAAI,OAAO,IAAI,SAAS,KAAA;EAC3C,EAAE;;;;;;EAOF,SAAS,iBAAiB;GACxB,MAAM,UAAU,IAAI,WAAW;GAC/B,IAAI,CAAC,SACH;GAEF,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;EACvC;EAEA,SAAS,YAAkB;GACzB,IAAI,QAAA,kBACF;GAEF,eAAe,eAAe,CAAC;EACjC;;EAGA,SAAS,mBAAmB;GAC1B,MAAM,cAAc,IAAI,SAAS;GACjC,IAAI,CAAC,aACH;GAEF,MAAM,cAAc,YAAY,cAA2B,2BAA2B;GACtF,IAAI,aACF,YAAY,MAAM,EAAE,eAAe,KAAK,CAAC;EAE7C;EAEA,SAAS,QAAQ,OAA6B;GAC5C,IAAI,CAAC,IAAI,IAAI,GACX;GACF,QAAQ;GACR,IAAI,OAAO,KAAK;GAChB,OAAO,gBAAgB;GAGvB,IAAI,QAAA,kBACF;GAGF,eAAe,iBAAiB,CAAC;EACnC;;;;;;;;;;;;EAaA,SAAS,SAAS,OAA4B;GAC5C,IAAI,QAAA,YACF;GAEF,QAAQ,KAAK;EACf;EAEA,SAAS,aAAmB;GAC1B,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,GACpB;QAAA,CAAC,QAAA,yBACH,QAAQ;GAAA,OAEP;IACH,OAAO;IACP,IAAI,OAAO,IAAI;GACjB;EACF;EAEA,MAAM,aAAa,UAAU;GAC3B,IAAI,IAAI,IAAI,MAAM,OAChB;GAEF,IAAI,OAAO;IACT,OAAO;IACP,IAAI,OAAO,IAAI;GACjB,OAEE,QAAQ;EAEZ,CAAC;EAED,MAAM,OAAO,SAAS;GACpB,IAAI,YAAY,IAAI;GACpB,IAAI,MACF,UAAU;EAEd,CAAC;EAED,eAAe,YAAY;GACzB,IAAI,IAAI,IAAI,KAAK,CAAC,QAAA,YAChB,QAAQ;EACZ,GAAG,EAAE,QAAQ,CAAC,SAAS,EAAE,CAAC;;GAUxB,OAAA,UAAA,GAAA,mBAgEM,OAAA;IA/DH,OAAK,eAAE,QAAA,YAAY,IAAI;IACvB,WAAO,OAAA,OAAA,OAAA,KAAA,UAAA,WAAM,SAAS,MAAM,GAAA,CAAA,KAAA,CAAA;;IAE7B,WAAqB,KAAA,QAAA,OAAA;IACrB,mBASM,OAAA;KARA,SAAA;KAAJ,KAAI;KACH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,OAAO,EAAA,CAAA,CAAA;KACjD,sBAAoB,QAAA;IAErB,GAAA,CAAA,WAGE,KAAA,QAAA,aAAA,eAAA,mBAAA;KAAA,OADiB,MAAA,SAAA;KAAS,MAAE,MAAA,IAAA;KAAI,UAAE,QAAA;KAAQ,UAAE,MAAA,QAAA;KAAQ,YAAE,MAAA,UAAA;IAAU,CAAA,CAAA,CAAA,CAAA,GAAA,IAAA,UAAA;IAI3D,CAAA,QAAA,YADT,UAAA,GAAA,YAyCW,UAAA;;KAvCT,IAAG;IAGK,GAAA,CAAA,MAAA,OAAA,KADR,UAAA,GAAA,mBAoCM,OAAA;;KAlCH,IAAI,MAAA,MAAA;KACD,SAAA;KAAJ,KAAI;KACH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,IAAI,EAAA,CAAA,CAAA;KAC9C,MAAM,QAAA;KACN,cAAY,QAAA;KACZ,kBAAgB,MAAA,gBAAA;KAChB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,sBAAsB,QAAO,IAAK,KAAA;KACzC,WAAO,OAAA,OAAA,OAAA,KAAA,UAAA,WAAM,SAAS,MAAM,GAAA,CAAA,KAAA,CAAA;IAE7B,GAAA,CAAA,YAwBkB,iBAAA;KAvBhB,sBAAmB;KACnB,oBAAiB;KACjB,kBAAe;KACf,sBAAmB;KACnB,oBAAiB;KACjB,kBAAe;KACd,eAAY,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,cAAA,CAAc,CAAA;KAC5B,cAAW,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAA,IAAe,MAAA,eAAA,CAAe,CAAA,IAAK,KAAA;KAChD,eAAY,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,cAAA,CAAc,CAAA;;KAE7B,SAAA,cAYM,CAXE,MAAA,IAAA,KADR,UAAA,GAAA,mBAYM,OAZN,WAYM;MAVA,SAAA;MAAJ,KAAI;MACJ,KAAI;MACJ,WAAQ;MACP,OAAO,MAAA,EAAA,CAAE,CAAC,QAAO,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,OAAO,EAAA,CAAA;MAClD,UAAS;KACD,GAAA,MAAA,aAAA,CAAa,GAAA,CAErB,YAEsB,MAAA,mBAAA,GAAA,MAAA;MADpB,SAAA,cAA2B,CAA3B,WAA2B,KAAA,QAAA,WAAA,eAAA,mBAAA,EAAA,OAAX,MAAA,KAAA,EAAK,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;IAOvB,QAAA,eADR,UAAA,GAAA,YAME,2BAAA;;KAJC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,OAAO,EAAA,CAAA,CAAA;KACjD,kBAAgB,QAAA;KAChB,oBAAkB,QAAA;KAClB,MAAM,QAAA"}

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiNavigationDrawer.js","names":[],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { MaybeElement } from '@vueuse/core';\nimport type { ClassValue } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  ariaLabel?: string;\n  /**\n   * Starts the drawer, and its overlay, below the app bar (`--rui-app-bar-height`), so the app bar\n   * stays uncovered and usable while the drawer is open. Without it the drawer runs the full height and\n   * a modal one covers the app bar.\n   */\n  belowAppBar?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  ariaLabel,\n  belowAppBar = false,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst drawer = tv({\n  base: 'transition-[transform,width] duration-200 ease-in-out bottom-0 fixed text-rui-text',\n  variants: {\n    belowAppBar: {\n      true: 'top-rui-app-bar',\n      false: 'top-0',\n    },\n    // a temporary drawer floats on the overlay surface; a docked one is part of the page, edged by a hairline\n    temporary: {\n      true: 'bg-rui-overlay',\n      false: 'bg-rui-surface',\n    },\n    position: {\n      left: 'left-0',\n      right: 'right-0',\n    },\n    visible: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    mini: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    // a modal drawer covers the app bar; a docked one sits level with it\n    withOverlay: {\n      true: 'z-rui-drawer',\n      false: 'z-rui-app-bar',\n    },\n  },\n  compoundVariants: [\n    { position: 'left', visible: false, mini: false, class: '-translate-x-full' },\n    { position: 'right', visible: false, mini: false, class: 'translate-x-full' },\n    { mini: true, visible: false, class: 'w-14!' },\n    { temporary: false, position: 'left', class: 'border-r border-rui-divider' },\n    { temporary: false, position: 'right', class: 'border-l border-rui-divider' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false, temporary: false, belowAppBar: false },\n});\n\n// the overlay dims what the drawer covers: the whole view, or only the part below the app bar\nconst overlayClass = computed<string>(() => cn([\n  'fixed inset-x-0 bottom-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60 z-rui-drawer',\n  belowAppBar ? 'top-rui-app-bar' : 'top-0',\n]) ?? '');\n\n/**\n * Consumer classes go through `drawer()` rather than alongside it, so\n * tailwind-variants' twMerge resolves conflicts in the consumer's favour.\n * Passed as an argument instead of read off `$attrs` here, so the template\n * keeps using `$attrs` directly.\n */\nfunction rootClass(attrsClass: ClassValue): string {\n  return drawer({\n    position,\n    visible: modelValue.value,\n    mini: miniVariant,\n    withOverlay: overlay,\n    temporary,\n    belowAppBar,\n    class: cn([\n      temporary && modelValue.value && 'shadow-rui-drawer',\n      classNames?.content,\n      classNames?.root,\n      attrsClass,\n    ]),\n  });\n}\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounced, so the activator's own click, which bubbles to the body, does not close it again\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          :class=\"overlayClass\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"alive\"\n        ref=\"content\"\n        data-id=\"drawer-content\"\n        :style=\"style\"\n        :data-visible=\"modelValue || undefined\"\n        :data-position=\"position\"\n        :data-mini=\"miniVariant || undefined\"\n        :class=\"rootClass($attrs.class)\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"getRootAttrs($attrs, [])\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiNavigationDrawer.js","names":[],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ClassValue } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport type { MaybeElement } from '@/types/dom';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  ariaLabel?: string;\n  /**\n   * Starts the drawer, and its overlay, below the app bar (`--rui-app-bar-height`), so the app bar\n   * stays uncovered and usable while the drawer is open. Without it the drawer runs the full height and\n   * a modal one covers the app bar.\n   */\n  belowAppBar?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  ariaLabel,\n  belowAppBar = false,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst drawer = tv({\n  base: 'transition-[transform,width] duration-200 ease-in-out bottom-0 fixed text-rui-text',\n  variants: {\n    belowAppBar: {\n      true: 'top-rui-app-bar',\n      false: 'top-0',\n    },\n    // a temporary drawer floats on the overlay surface; a docked one is part of the page, edged by a hairline\n    temporary: {\n      true: 'bg-rui-overlay',\n      false: 'bg-rui-surface',\n    },\n    position: {\n      left: 'left-0',\n      right: 'right-0',\n    },\n    visible: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    mini: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    // a modal drawer covers the app bar; a docked one sits level with it\n    withOverlay: {\n      true: 'z-rui-drawer',\n      false: 'z-rui-app-bar',\n    },\n  },\n  compoundVariants: [\n    { position: 'left', visible: false, mini: false, class: '-translate-x-full' },\n    { position: 'right', visible: false, mini: false, class: 'translate-x-full' },\n    { mini: true, visible: false, class: 'w-14!' },\n    { temporary: false, position: 'left', class: 'border-r border-rui-divider' },\n    { temporary: false, position: 'right', class: 'border-l border-rui-divider' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false, temporary: false, belowAppBar: false },\n});\n\n// the overlay dims what the drawer covers: the whole view, or only the part below the app bar\nconst overlayClass = computed<string>(() => cn([\n  'fixed inset-x-0 bottom-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60 z-rui-drawer',\n  belowAppBar ? 'top-rui-app-bar' : 'top-0',\n]) ?? '');\n\n/**\n * Consumer classes go through `drawer()` rather than alongside it, so\n * tailwind-variants' twMerge resolves conflicts in the consumer's favour.\n * Passed as an argument instead of read off `$attrs` here, so the template\n * keeps using `$attrs` directly.\n */\nfunction rootClass(attrsClass: ClassValue): string {\n  return drawer({\n    position,\n    visible: modelValue.value,\n    mini: miniVariant,\n    withOverlay: overlay,\n    temporary,\n    belowAppBar,\n    class: cn([\n      temporary && modelValue.value && 'shadow-rui-drawer',\n      classNames?.content,\n      classNames?.root,\n      attrsClass,\n    ]),\n  });\n}\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounced, so the activator's own click, which bubbles to the body, does not close it again\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          :class=\"overlayClass\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"alive\"\n        ref=\"content\"\n        data-id=\"drawer-content\"\n        :style=\"style\"\n        :data-visible=\"modelValue || undefined\"\n        :data-position=\"position\"\n        :data-mini=\"miniVariant || undefined\"\n        :class=\"rootClass($attrs.class)\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"getRootAttrs($attrs, [])\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
+import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { onClickOutside } from "../../../vendor/@vueuse/core/dist/index.js";
 import { cn, tv } from "../../../utils/tv.js";
 import { useTimeoutManager } from "../../../composables/timeout-manager.js";
 import { getRootAttrs, transformPropsUnit } from "../../../utils/helpers.js";
 import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
-import { onClickOutside } from "@vueuse/core";
-import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-visible",
@@ -55,7 +55,7 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 		const content = useTemplateRef("content");
 		const leaveTimeout = useTimeoutManager();
 		const clickOutsideTimeout = useTimeoutManager();
-		const alive = computed(() => get$1(modelValue) || get$1(transitioning) || __props.miniVariant);
+		const alive = computed(() => get(modelValue) || get(transitioning) || __props.miniVariant);
 		const style = computed(() => ({ width: transformPropsUnit(__props.width) }));
 		const activatorAttrs = { onClick: toggle };
 		const drawer = tv({
@@ -148,26 +148,26 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 			});
 		}
 		function toggle() {
-			set$1(modelValue, !get$1(modelValue));
+			set(modelValue, !get(modelValue));
 		}
 		function close() {
-			set$1(modelValue, false);
+			set(modelValue, false);
 		}
 		function onLeaveComplete() {
 			leaveTimeout.clear();
-			if (get$1(transitioning)) {
-				set$1(transitioning, false);
+			if (get(transitioning)) {
+				set(transitioning, false);
 				emit("closed");
 			}
 		}
 		watch(modelValue, (value) => {
 			if (!value) {
-				set$1(transitioning, true);
+				set(transitioning, true);
 				leaveTimeout.create(onLeaveComplete, 250);
 			}
 		});
 		onClickOutside(content, () => {
-			if (get$1(modelValue) && __props.temporary && !__props.stateless) clickOutsideTimeout.create(close, 50);
+			if (get(modelValue) && __props.temporary && !__props.stateless) clickOutsideTimeout.create(close, 50);
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", null, [renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { MaybeElement } from '@vueuse/core';\nimport type { ClassValue } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  ariaLabel?: string;\n  /**\n   * Starts the drawer, and its overlay, below the app bar (`--rui-app-bar-height`), so the app bar\n   * stays uncovered and usable while the drawer is open. Without it the drawer runs the full height and\n   * a modal one covers the app bar.\n   */\n  belowAppBar?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  ariaLabel,\n  belowAppBar = false,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst drawer = tv({\n  base: 'transition-[transform,width] duration-200 ease-in-out bottom-0 fixed text-rui-text',\n  variants: {\n    belowAppBar: {\n      true: 'top-rui-app-bar',\n      false: 'top-0',\n    },\n    // a temporary drawer floats on the overlay surface; a docked one is part of the page, edged by a hairline\n    temporary: {\n      true: 'bg-rui-overlay',\n      false: 'bg-rui-surface',\n    },\n    position: {\n      left: 'left-0',\n      right: 'right-0',\n    },\n    visible: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    mini: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    // a modal drawer covers the app bar; a docked one sits level with it\n    withOverlay: {\n      true: 'z-rui-drawer',\n      false: 'z-rui-app-bar',\n    },\n  },\n  compoundVariants: [\n    { position: 'left', visible: false, mini: false, class: '-translate-x-full' },\n    { position: 'right', visible: false, mini: false, class: 'translate-x-full' },\n    { mini: true, visible: false, class: 'w-14!' },\n    { temporary: false, position: 'left', class: 'border-r border-rui-divider' },\n    { temporary: false, position: 'right', class: 'border-l border-rui-divider' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false, temporary: false, belowAppBar: false },\n});\n\n// the overlay dims what the drawer covers: the whole view, or only the part below the app bar\nconst overlayClass = computed<string>(() => cn([\n  'fixed inset-x-0 bottom-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60 z-rui-drawer',\n  belowAppBar ? 'top-rui-app-bar' : 'top-0',\n]) ?? '');\n\n/**\n * Consumer classes go through `drawer()` rather than alongside it, so\n * tailwind-variants' twMerge resolves conflicts in the consumer's favour.\n * Passed as an argument instead of read off `$attrs` here, so the template\n * keeps using `$attrs` directly.\n */\nfunction rootClass(attrsClass: ClassValue): string {\n  return drawer({\n    position,\n    visible: modelValue.value,\n    mini: miniVariant,\n    withOverlay: overlay,\n    temporary,\n    belowAppBar,\n    class: cn([\n      temporary && modelValue.value && 'shadow-rui-drawer',\n      classNames?.content,\n      classNames?.root,\n      attrsClass,\n    ]),\n  });\n}\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounced, so the activator's own click, which bubbles to the body, does not close it again\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          :class=\"overlayClass\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"alive\"\n        ref=\"content\"\n        data-id=\"drawer-content\"\n        :style=\"style\"\n        :data-visible=\"modelValue || undefined\"\n        :data-position=\"position\"\n        :data-mini=\"miniVariant || undefined\"\n        :class=\"rootClass($attrs.class)\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"getRootAttrs($attrs, [])\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ClassValue } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport type { MaybeElement } from '@/types/dom';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  ariaLabel?: string;\n  /**\n   * Starts the drawer, and its overlay, below the app bar (`--rui-app-bar-height`), so the app bar\n   * stays uncovered and usable while the drawer is open. Without it the drawer runs the full height and\n   * a modal one covers the app bar.\n   */\n  belowAppBar?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  ariaLabel,\n  belowAppBar = false,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst drawer = tv({\n  base: 'transition-[transform,width] duration-200 ease-in-out bottom-0 fixed text-rui-text',\n  variants: {\n    belowAppBar: {\n      true: 'top-rui-app-bar',\n      false: 'top-0',\n    },\n    // a temporary drawer floats on the overlay surface; a docked one is part of the page, edged by a hairline\n    temporary: {\n      true: 'bg-rui-overlay',\n      false: 'bg-rui-surface',\n    },\n    position: {\n      left: 'left-0',\n      right: 'right-0',\n    },\n    visible: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    mini: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    // a modal drawer covers the app bar; a docked one sits level with it\n    withOverlay: {\n      true: 'z-rui-drawer',\n      false: 'z-rui-app-bar',\n    },\n  },\n  compoundVariants: [\n    { position: 'left', visible: false, mini: false, class: '-translate-x-full' },\n    { position: 'right', visible: false, mini: false, class: 'translate-x-full' },\n    { mini: true, visible: false, class: 'w-14!' },\n    { temporary: false, position: 'left', class: 'border-r border-rui-divider' },\n    { temporary: false, position: 'right', class: 'border-l border-rui-divider' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false, temporary: false, belowAppBar: false },\n});\n\n// the overlay dims what the drawer covers: the whole view, or only the part below the app bar\nconst overlayClass = computed<string>(() => cn([\n  'fixed inset-x-0 bottom-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60 z-rui-drawer',\n  belowAppBar ? 'top-rui-app-bar' : 'top-0',\n]) ?? '');\n\n/**\n * Consumer classes go through `drawer()` rather than alongside it, so\n * tailwind-variants' twMerge resolves conflicts in the consumer's favour.\n * Passed as an argument instead of read off `$attrs` here, so the template\n * keeps using `$attrs` directly.\n */\nfunction rootClass(attrsClass: ClassValue): string {\n  return drawer({\n    position,\n    visible: modelValue.value,\n    mini: miniVariant,\n    withOverlay: overlay,\n    temporary,\n    belowAppBar,\n    class: cn([\n      temporary && modelValue.value && 'shadow-rui-drawer',\n      classNames?.content,\n      classNames?.root,\n      attrsClass,\n    ]),\n  });\n}\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounced, so the activator's own click, which bubbles to the body, does not close it again\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          :class=\"overlayClass\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"alive\"\n        ref=\"content\"\n        data-id=\"drawer-content\"\n        :style=\"style\"\n        :data-visible=\"modelValue || undefined\"\n        :data-position=\"position\"\n        :data-mini=\"miniVariant || undefined\"\n        :class=\"rootClass($attrs.class)\"\n        :aria-label=\"ariaLabel\"\n        v-bind=\"getRootAttrs($attrs, [])\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/overlays/notification/RuiNotification.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,7 @@
+import { set, useTimeoutFn, watchImmediate } from "../../../vendor/@vueuse/shared/dist/index.js";
 import { cn, tv } from "../../../utils/tv.js";
 import { transformPropsUnit } from "../../../utils/helpers.js";
 import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeModels, mergeProps, openBlock, renderSlot, unref, useModel, withCtx } from "vue";
-import { useTimeoutFn, watchImmediate } from "@vueuse/core";
-import { set as set$1 } from "@vueuse/shared";
 //#region src/components/overlays/notification/RuiNotification.vue?vue&type=script&setup=true&lang.ts
 var RuiNotification_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiNotification",
@@ -25,11 +24,11 @@ var RuiNotification_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const style = computed(() => ({ width: transformPropsUnit(__props.width) }));
 		const rootStyle = tv({ base: "top-4 right-4 fixed z-rui-toast max-w-[calc(100vw-2rem)] overflow-hidden rounded-rui-panel border shadow-rui-menu" });
 		const { start, stop } = useTimeoutFn(() => {
-			set$1(modelValue, false);
+			set(modelValue, false);
 		}, __props.timeout, { immediate: false });
 		function dismiss() {
 			if (__props.timeout < 0) return;
-			set$1(modelValue, false);
+			set(modelValue, false);
 		}
 		watchImmediate(modelValue, (display) => {
 			if (!display) {

package/dist/components/overlays/notification/RuiNotification.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiNotification.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface NotificationProps {\n  timeout: number;\n  width?: number | string;\n  theme?: 'light' | 'dark';\n}\n\ndefineOptions({\n  name: 'RuiNotification',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ required: true });\n\nconst { timeout, width = 400, theme } = defineProps<NotificationProps>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\n// a popup like a menu: panel corners, a hairline edge for dark backgrounds, and never wider than the screen\nconst rootStyle = tv({ base: 'top-4 right-4 fixed z-rui-toast max-w-[calc(100vw-2rem)] overflow-hidden rounded-rui-panel border shadow-rui-menu' });\n\nconst { start, stop } = useTimeoutFn(() => {\n  set(modelValue, false);\n}, timeout, { immediate: false });\n\nfunction dismiss(): void {\n  if (timeout < 0)\n    return;\n\n  set(modelValue, false);\n}\n\nwatchImmediate(modelValue, (display) => {\n  if (!display) {\n    stop();\n    return;\n  }\n\n  if (timeout > 0) {\n    stop();\n    start();\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition\n      enter-from-class=\"opacity-0\"\n      enter-active-class=\"ease-out duration-150\"\n      enter-to-class=\"opacity-100\"\n      leave-from-class=\"opacity-100\"\n      leave-active-class=\"ease-in duration-100\"\n      leave-to-class=\"opacity-0\"\n    >\n      <div\n        v-if=\"modelValue\"\n        role=\"alert\"\n        aria-live=\"polite\"\n        :class=\"rootStyle({ class: cn([$attrs.class, {\n          'bg-rui-overlay border-rui-divider': !theme,\n          'bg-rui-light-overlay text-rui-light-text border-rui-light-divider': theme === 'light',\n          'bg-rui-dark-overlay text-rui-dark-text border-rui-dark-divider': theme === 'dark',\n        }]) })\"\n        :style=\"style\"\n        v-bind=\"{ ...$attrs, class: undefined }\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,aAAa,SAAoB,SAAA,YAAmB;EAQ1D,MAAM,QAAQ,gBAA+C,EAC3D,OAAO,mBAAmB,QAAA,KAAK,EACjC,EAAE;EAGF,MAAM,YAAY,GAAG,EAAE,MAAM,oHAAoH,CAAC;EAElJ,MAAM,EAAE,OAAO,SAAS,mBAAmB;GACzC,MAAI,YAAY,KAAK;EACvB,GAAG,QAAA,SAAS,EAAE,WAAW,MAAM,CAAC;EAEhC,SAAS,UAAgB;GACvB,IAAI,QAAA,UAAU,GACZ;GAEF,MAAI,YAAY,KAAK;EACvB;EAEA,eAAe,aAAa,YAAY;GACtC,IAAI,CAAC,SAAS;IACZ,KAAK;IACL;GACF;GAEA,IAAI,QAAA,UAAU,GAAG;IACf,KAAK;IACL,MAAM;GACR;EACF,CAAC;;GAIC,OAAA,UAAA,GAAA,YAyBW,UAAA,EAzBD,IAAG,OAAM,GAAA,CACjB,YAuBa,YAAA;IAtBX,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;;IAEf,SAAA,cAcM,CAbE,WAAA,SADR,UAAA,GAAA,mBAcM,OAdN,WAcM;;KAZJ,MAAK;KACL,aAAU;KACT,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAAA,CAAEA,KAAAA,OAAO,OAAK;MAAoD,qCAAA,CAAA,QAAA;MAAsF,qEAAA,QAAA,UAAK;MAA0F,kEAAA,QAAA,UAAK;;KAKxR,OAAO,MAAA,KAAA;IACKA,GAAAA;KAAAA,GAAAA,KAAAA;KAAM,OAAS,KAAA;IAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO,GAAA,CAAA,GAAA,CAEf,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiNotification.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface NotificationProps {\n  timeout: number;\n  width?: number | string;\n  theme?: 'light' | 'dark';\n}\n\ndefineOptions({\n  name: 'RuiNotification',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ required: true });\n\nconst { timeout, width = 400, theme } = defineProps<NotificationProps>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\n// a popup like a menu: panel corners, a hairline edge for dark backgrounds, and never wider than the screen\nconst rootStyle = tv({ base: 'top-4 right-4 fixed z-rui-toast max-w-[calc(100vw-2rem)] overflow-hidden rounded-rui-panel border shadow-rui-menu' });\n\nconst { start, stop } = useTimeoutFn(() => {\n  set(modelValue, false);\n}, timeout, { immediate: false });\n\nfunction dismiss(): void {\n  if (timeout < 0)\n    return;\n\n  set(modelValue, false);\n}\n\nwatchImmediate(modelValue, (display) => {\n  if (!display) {\n    stop();\n    return;\n  }\n\n  if (timeout > 0) {\n    stop();\n    start();\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition\n      enter-from-class=\"opacity-0\"\n      enter-active-class=\"ease-out duration-150\"\n      enter-to-class=\"opacity-100\"\n      leave-from-class=\"opacity-100\"\n      leave-active-class=\"ease-in duration-100\"\n      leave-to-class=\"opacity-0\"\n    >\n      <div\n        v-if=\"modelValue\"\n        role=\"alert\"\n        aria-live=\"polite\"\n        :class=\"rootStyle({ class: cn([$attrs.class, {\n          'bg-rui-overlay border-rui-divider': !theme,\n          'bg-rui-light-overlay text-rui-light-text border-rui-light-divider': theme === 'light',\n          'bg-rui-dark-overlay text-rui-dark-text border-rui-dark-divider': theme === 'dark',\n        }]) })\"\n        :style=\"style\"\n        v-bind=\"{ ...$attrs, class: undefined }\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,aAAa,SAAoB,SAAA,YAAmB;EAQ1D,MAAM,QAAQ,gBAA+C,EAC3D,OAAO,mBAAmB,QAAA,KAAK,EACjC,EAAE;EAGF,MAAM,YAAY,GAAG,EAAE,MAAM,oHAAoH,CAAC;EAElJ,MAAM,EAAE,OAAO,SAAS,mBAAmB;GACzC,IAAI,YAAY,KAAK;EACvB,GAAG,QAAA,SAAS,EAAE,WAAW,MAAM,CAAC;EAEhC,SAAS,UAAgB;GACvB,IAAI,QAAA,UAAU,GACZ;GAEF,IAAI,YAAY,KAAK;EACvB;EAEA,eAAe,aAAa,YAAY;GACtC,IAAI,CAAC,SAAS;IACZ,KAAK;IACL;GACF;GAEA,IAAI,QAAA,UAAU,GAAG;IACf,KAAK;IACL,MAAM;GACR;EACF,CAAC;;GAIC,OAAA,UAAA,GAAA,YAyBW,UAAA,EAzBD,IAAG,OAAM,GAAA,CACjB,YAuBa,YAAA;IAtBX,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;;IAEf,SAAA,cAcM,CAbE,WAAA,SADR,UAAA,GAAA,mBAcM,OAdN,WAcM;;KAZJ,MAAK;KACL,aAAU;KACT,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAAA,CAAEA,KAAAA,OAAO,OAAK;MAAoD,qCAAA,CAAA,QAAA;MAAsF,qEAAA,QAAA,UAAK;MAA0F,kEAAA,QAAA,UAAK;;KAKxR,OAAO,MAAA,KAAA;IACKA,GAAAA;KAAAA,GAAAA,KAAAA;KAAM,OAAS,KAAA;IAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO,GAAA,CAAA,GAAA,CAEf,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/components/overlays/tooltip/RuiTooltip.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
+import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
 import { cn, tv } from "../../../utils/tv.js";
 import { ButtonGroupBoundary } from "../../buttons/button-group/button-group-context.js";
 import { useFloating } from "../../../composables/floating.js";
 import { tooltipStyles } from "./tooltip-styles.js";
 import { Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useId, withCtx } from "vue";
-import { get } from "@vueuse/shared";
 //#region src/components/overlays/tooltip/RuiTooltip.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-tooltip-disabled", "aria-describedby"];
 var _hoisted_2 = [

package/dist/components/progress/RuiProgress.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
+import { get } from "../../vendor/@vueuse/shared/dist/index.js";
 import { tv } from "../../utils/tv.js";
 import { ProgressVariant } from "./progress-props.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, toDisplayString, unref } from "vue";
-import { get } from "@vueuse/shared";
 //#region src/components/progress/RuiProgress.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-valuenow",

package/dist/components/steppers/RuiFooterStepper.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,10 @@
+import { get, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import { tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import RuiProgress_default from "../progress/RuiProgress.js";
 import RuiButton_default from "../buttons/button/RuiButton.js";
 import { FooterStepperVariant } from "./footer-stepper-variant.js";
 import { Fragment, createBlock, createCommentVNode, createElementBlock, createSlots, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, withCtx } from "vue";
-import { get, set } from "@vueuse/shared";
 //#region src/components/steppers/RuiFooterStepper.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-variant"];
 var _hoisted_2 = {

package/dist/components/steppers/RuiStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiStepper.js","names":[],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\nexport interface RuiStepperClassNames {\n  root?: VueClassValue;\n  title?: VueClassValue;\n  subtitle?: VueClassValue;\n}\n\nexport interface Props {\n  step?: number;\n  steps: StepperStep[];\n  iconTop?: boolean;\n  custom?: boolean;\n  classNames?: RuiStepperClassNames;\n  orientation?: StepperOrientation;\n  keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiStepper',\n});\n\nconst {\n  step,\n  steps,\n  iconTop = false,\n  custom = false,\n  classNames,\n  orientation = StepperOrientation.horizontal,\n  keepActiveVisible = true,\n} = defineProps<Props>();\n\ndefineSlots<{\n  icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\nconst stepper = tv({\n  slots: {\n    // takes focus only while it overflows (see useKeyboardScroll); the ring sits inside the clip\n    root: 'flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    step: 'flex items-center px-6 relative',\n    title: '',\n    subtitle: '',\n    label: 'flex flex-col items-start text-left ml-2',\n    // the connector is decoration, so it takes the light divider rather than a control's edge\n    divider: 'border-rui-divider',\n  },\n  variants: {\n    orientation: {\n      [StepperOrientation.horizontal]: {\n        root: 'whitespace-nowrap lg:whitespace-normal',\n        step: '',\n        divider: 'block max-w-full min-w-4 h-0 max-h-0 self-center -mx-4 my-0 border-t flex-[1_1_0]',\n      },\n      [StepperOrientation.vertical]: {\n        root: 'flex-col inline-flex',\n        // 4px in from the edge, so the scrolling root does not clip the active marker's halo\n        step: 'px-1 py-6',\n        divider: 'block min-h-12 min-w-0 max-h-full h-full self-start -my-4 mx-4 border-l',\n      },\n    },\n    state: {\n      // an upcoming step is not disabled, so its text keeps the 4.5:1 of the secondary tone\n      [StepperState.inactive]: {\n        step: 'text-rui-text-disabled',\n        title: 'text-rui-text-secondary',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.active]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.done]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.error]: {\n        step: 'text-rui-error',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.warning]: {\n        step: 'text-rui-warning',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.info]: {\n        step: 'text-rui-info',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.success]: {\n        step: 'text-rui-success',\n        title: '',\n        subtitle: '',\n      },\n    },\n    iconTop: {\n      true: {\n        step: 'flex-col',\n        label: 'ml-0 mt-4 items-center text-center',\n      },\n    },\n    custom: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    { custom: true, state: StepperState.inactive, class: { step: 'text-rui-text' } },\n    // the line runs through the 32px marker's center\n    { orientation: StepperOrientation.vertical, custom: true, class: { divider: 'mx-5' } },\n    { orientation: StepperOrientation.vertical, iconTop: true, class: { divider: 'self-center mx-auto' } },\n  ],\n  defaultVariants: {\n    state: StepperState.inactive,\n    orientation: StepperOrientation.horizontal,\n    custom: false,\n  },\n});\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepper>>(() => stepper({ orientation, custom, iconTop }));\n\n/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\nfunction stepUi(state: StepperState): ReturnType<typeof stepper> {\n  return stepper({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n  if (step === undefined)\n    return steps;\n\n  return steps.map((item, index) => {\n    let stepStatus: StepperState = StepperState.inactive;\n\n    if (index + 1 === step)\n      stepStatus = StepperState.active;\n\n    if (index + 1 < step)\n      stepStatus = StepperState.done;\n\n    return {\n      ...item,\n      state: stepStatus,\n    };\n  });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n  return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n  if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n    return;\n  }\n\n  nextTick(() => {\n    const elem = get(wrapperRef);\n    if (!elem) {\n      return;\n    }\n    const activeStep = elem.querySelector('[data-active]');\n    activeStep?.scrollIntoView?.({\n      behavior: 'smooth',\n      inline: 'center',\n    });\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :tabindex=\"scrollTabindex\"\n    role=\"list\"\n    aria-label=\"Progress steps\"\n    :class=\"ui.root()\"\n    :data-orientation=\"orientation\"\n    :data-icon-top=\"iconTop || undefined\"\n    :data-custom=\"custom || undefined\"\n  >\n    <template\n      v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n      :key=\"index\"\n    >\n      <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n      <hr\n        v-if=\"index > 0\"\n        aria-hidden=\"true\"\n        :class=\"ui.divider()\"\n      />\n      <div\n        role=\"listitem\"\n        :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n        :data-state=\"resolveState(state)\"\n        :data-active=\"state === StepperState.active || undefined\"\n        :class=\"stepUi(resolveState(state)).step()\"\n      >\n        <slot\n          name=\"icon\"\n          v-bind=\"{ state, index: index + 1 }\"\n        >\n          <div class=\"relative flex py-2\">\n            <RuiStepperIcon\n              :index=\"index + 1\"\n              :state=\"state\"\n              :size=\"custom ? 'lg' : 'md'\"\n            />\n            <RuiProgress\n              v-if=\"loading\"\n              class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n              :size=\"custom ? 40 : 32\"\n              variant=\"indeterminate\"\n              circular\n              thickness=\"2\"\n              color=\"primary\"\n            />\n          </div>\n        </slot>\n        <div\n          v-if=\"title || description\"\n          :class=\"ui.label()\"\n          data-id=\"stepper-label\"\n        >\n          <span\n            v-if=\"title\"\n            :class=\"[stepUi(resolveState(state)).title(), custom && classNames?.title]\"\n            class=\"text-subtitle-2\"\n          >\n            {{ title }}\n          </span>\n          <span\n            v-if=\"description\"\n            :class=\"[stepUi(resolveState(state)).subtitle(), custom && classNames?.subtitle]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiStepper.js","names":[],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiStepperClassNames {\n  root?: VueClassValue;\n  title?: VueClassValue;\n  subtitle?: VueClassValue;\n}\n\nexport interface Props {\n  step?: number;\n  steps: StepperStep[];\n  iconTop?: boolean;\n  custom?: boolean;\n  classNames?: RuiStepperClassNames;\n  orientation?: StepperOrientation;\n  keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiStepper',\n  inheritAttrs: false,\n});\n\nconst {\n  step,\n  steps,\n  iconTop = false,\n  custom = false,\n  classNames,\n  orientation = StepperOrientation.horizontal,\n  keepActiveVisible = true,\n} = defineProps<Props>();\n\ndefineSlots<{\n  icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\nconst stepper = tv({\n  slots: {\n    // takes focus only while it overflows (see useKeyboardScroll); the ring sits inside the clip\n    root: 'flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    step: 'flex items-center px-6 relative',\n    title: '',\n    subtitle: '',\n    label: 'flex flex-col items-start text-left ml-2',\n    // the connector is decoration, so it takes the light divider rather than a control's edge\n    divider: 'border-rui-divider',\n  },\n  variants: {\n    orientation: {\n      [StepperOrientation.horizontal]: {\n        root: 'whitespace-nowrap lg:whitespace-normal',\n        step: '',\n        divider: 'block max-w-full min-w-4 h-0 max-h-0 self-center -mx-4 my-0 border-t flex-[1_1_0]',\n      },\n      [StepperOrientation.vertical]: {\n        root: 'flex-col inline-flex',\n        // 4px in from the edge, so the scrolling root does not clip the active marker's halo\n        step: 'px-1 py-3',\n        // reaches into both steps' padding, so the line runs from just under one marker to just over the next\n        divider: 'block min-h-6 min-w-0 max-h-full h-full self-start -my-3 mx-4 border-l',\n      },\n    },\n    state: {\n      // an upcoming step is not disabled, so its text keeps the 4.5:1 of the secondary tone\n      [StepperState.inactive]: {\n        step: 'text-rui-text-disabled',\n        title: 'text-rui-text-secondary',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.active]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.done]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.error]: {\n        step: 'text-rui-error',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.warning]: {\n        step: 'text-rui-warning',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.info]: {\n        step: 'text-rui-info',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.success]: {\n        step: 'text-rui-success',\n        title: '',\n        subtitle: '',\n      },\n    },\n    iconTop: {\n      true: {\n        step: 'flex-col',\n        label: 'ml-0 mt-4 items-center text-center',\n      },\n    },\n    custom: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    { custom: true, state: StepperState.inactive, class: { step: 'text-rui-text' } },\n    // the line runs through the 32px marker's center\n    { orientation: StepperOrientation.vertical, custom: true, class: { divider: 'mx-5' } },\n    { orientation: StepperOrientation.vertical, iconTop: true, class: { divider: 'self-center mx-auto' } },\n  ],\n  defaultVariants: {\n    state: StepperState.inactive,\n    orientation: StepperOrientation.horizontal,\n    custom: false,\n  },\n});\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepper>>(() => stepper({ orientation, custom, iconTop }));\n\n/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\nfunction stepUi(state: StepperState): ReturnType<typeof stepper> {\n  return stepper({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n  if (step === undefined)\n    return steps;\n\n  return steps.map((item, index) => {\n    let stepStatus: StepperState = StepperState.inactive;\n\n    if (index + 1 === step)\n      stepStatus = StepperState.active;\n\n    if (index + 1 < step)\n      stepStatus = StepperState.done;\n\n    return {\n      ...item,\n      state: stepStatus,\n    };\n  });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n  return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n  if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n    return;\n  }\n\n  nextTick(() => {\n    const elem = get(wrapperRef);\n    if (!elem) {\n      return;\n    }\n    const activeStep = elem.querySelector('[data-active]');\n    activeStep?.scrollIntoView?.({\n      behavior: 'smooth',\n      inline: 'center',\n    });\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :tabindex=\"scrollTabindex\"\n    role=\"list\"\n    aria-label=\"Progress steps\"\n    :class=\"ui.root({ class: cn([classNames?.root, $attrs.class]) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :data-orientation=\"orientation\"\n    :data-icon-top=\"iconTop || undefined\"\n    :data-custom=\"custom || undefined\"\n  >\n    <template\n      v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n      :key=\"index\"\n    >\n      <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n      <hr\n        v-if=\"index > 0\"\n        aria-hidden=\"true\"\n        :class=\"ui.divider()\"\n      />\n      <div\n        role=\"listitem\"\n        :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n        :data-state=\"resolveState(state)\"\n        :data-active=\"state === StepperState.active || undefined\"\n        :class=\"stepUi(resolveState(state)).step()\"\n      >\n        <slot\n          name=\"icon\"\n          v-bind=\"{ state, index: index + 1 }\"\n        >\n          <div class=\"relative flex py-2\">\n            <RuiStepperIcon\n              :index=\"index + 1\"\n              :state=\"state\"\n              :size=\"custom ? 'lg' : 'md'\"\n            />\n            <RuiProgress\n              v-if=\"loading\"\n              class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n              :size=\"custom ? 40 : 32\"\n              variant=\"indeterminate\"\n              circular\n              thickness=\"2\"\n              color=\"primary\"\n            />\n          </div>\n        </slot>\n        <div\n          v-if=\"title || description\"\n          :class=\"ui.label()\"\n          data-id=\"stepper-label\"\n        >\n          <span\n            v-if=\"title\"\n            :class=\"[stepUi(resolveState(state)).title(), custom && classNames?.title]\"\n            class=\"text-subtitle-2\"\n          >\n            {{ title }}\n          </span>\n          <span\n            v-if=\"description\"\n            :class=\"[stepUi(resolveState(state)).subtitle(), custom && classNames?.subtitle]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/steppers/RuiStepper.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,10 @@
+import { get } from "../../vendor/@vueuse/shared/dist/index.js";
 import { StepperOrientation, StepperState } from "../../types/stepper.js";
-import { tv } from "../../utils/tv.js";
+import { cn, tv } from "../../utils/tv.js";
 import RuiProgress_default from "../progress/RuiProgress.js";
 import { useKeyboardScroll } from "../../composables/keyboard-scroll.js";
 import RuiStepperIcon_default from "./RuiStepperIcon.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, useTemplateRef, watch } from "vue";
-import { get } from "@vueuse/shared";
 //#region src/components/steppers/RuiStepper.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"tabindex",
@@ -20,6 +20,7 @@ var _hoisted_2 = [
 var _hoisted_3 = { class: "relative flex py-2" };
 var RuiStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiStepper",
+	inheritAttrs: false,
 	__name: "RuiStepper",
 	props: {
 		step: {},
@@ -60,8 +61,8 @@ var RuiStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					},
 					[StepperOrientation.vertical]: {
 						root: "flex-col inline-flex",
-						step: "px-1 py-6",
-						divider: "block min-h-12 min-w-0 max-h-full h-full self-start -my-4 mx-4 border-l"
+						step: "px-1 py-3",
+						divider: "block min-h-6 min-w-0 max-h-full h-full self-start -my-3 mx-4 border-l"
 					}
 				},
 				state: {
@@ -181,17 +182,21 @@ var RuiStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			});
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
+			return openBlock(), createElementBlock("div", mergeProps({
 				ref_key: "wrapperRef",
 				ref: wrapperRef,
 				tabindex: unref(scrollTabindex),
 				role: "list",
 				"aria-label": "Progress steps",
-				class: normalizeClass(unref(ui).root()),
+				class: unref(ui).root({ class: unref(cn)([__props.classNames?.root, _ctx.$attrs.class]) })
+			}, {
+				..._ctx.$attrs,
+				class: void 0
+			}, {
 				"data-orientation": __props.orientation,
 				"data-icon-top": __props.iconTop || void 0,
 				"data-custom": __props.custom || void 0
-			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(renderedStep), ({ title, description, state, loading }, index) => {
+			}), [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(renderedStep), ({ title, description, state, loading }, index) => {
 				return openBlock(), createElementBlock(Fragment, { key: index }, [index > 0 ? (openBlock(), createElementBlock("hr", {
 					key: 0,
 					"aria-hidden": "true",
@@ -232,7 +237,7 @@ var RuiStepper_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					key: 1,
 					class: normalizeClass([[stepUi(resolveState(state)).subtitle(), __props.custom && __props.classNames?.subtitle], "text-caption"])
 				}, toDisplayString(description), 3)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 10, _hoisted_2)], 64);
-			}), 128))], 10, _hoisted_1);
+			}), 128))], 16, _hoisted_1);
 		};
 	}
 });

package/dist/components/steppers/RuiStepper.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiStepper.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { tv } from '@/utils/tv';\n\nexport interface RuiStepperClassNames {\n  root?: VueClassValue;\n  title?: VueClassValue;\n  subtitle?: VueClassValue;\n}\n\nexport interface Props {\n  step?: number;\n  steps: StepperStep[];\n  iconTop?: boolean;\n  custom?: boolean;\n  classNames?: RuiStepperClassNames;\n  orientation?: StepperOrientation;\n  keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiStepper',\n});\n\nconst {\n  step,\n  steps,\n  iconTop = false,\n  custom = false,\n  classNames,\n  orientation = StepperOrientation.horizontal,\n  keepActiveVisible = true,\n} = defineProps<Props>();\n\ndefineSlots<{\n  icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\nconst stepper = tv({\n  slots: {\n    // takes focus only while it overflows (see useKeyboardScroll); the ring sits inside the clip\n    root: 'flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    step: 'flex items-center px-6 relative',\n    title: '',\n    subtitle: '',\n    label: 'flex flex-col items-start text-left ml-2',\n    // the connector is decoration, so it takes the light divider rather than a control's edge\n    divider: 'border-rui-divider',\n  },\n  variants: {\n    orientation: {\n      [StepperOrientation.horizontal]: {\n        root: 'whitespace-nowrap lg:whitespace-normal',\n        step: '',\n        divider: 'block max-w-full min-w-4 h-0 max-h-0 self-center -mx-4 my-0 border-t flex-[1_1_0]',\n      },\n      [StepperOrientation.vertical]: {\n        root: 'flex-col inline-flex',\n        // 4px in from the edge, so the scrolling root does not clip the active marker's halo\n        step: 'px-1 py-6',\n        divider: 'block min-h-12 min-w-0 max-h-full h-full self-start -my-4 mx-4 border-l',\n      },\n    },\n    state: {\n      // an upcoming step is not disabled, so its text keeps the 4.5:1 of the secondary tone\n      [StepperState.inactive]: {\n        step: 'text-rui-text-disabled',\n        title: 'text-rui-text-secondary',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.active]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.done]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.error]: {\n        step: 'text-rui-error',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.warning]: {\n        step: 'text-rui-warning',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.info]: {\n        step: 'text-rui-info',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.success]: {\n        step: 'text-rui-success',\n        title: '',\n        subtitle: '',\n      },\n    },\n    iconTop: {\n      true: {\n        step: 'flex-col',\n        label: 'ml-0 mt-4 items-center text-center',\n      },\n    },\n    custom: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    { custom: true, state: StepperState.inactive, class: { step: 'text-rui-text' } },\n    // the line runs through the 32px marker's center\n    { orientation: StepperOrientation.vertical, custom: true, class: { divider: 'mx-5' } },\n    { orientation: StepperOrientation.vertical, iconTop: true, class: { divider: 'self-center mx-auto' } },\n  ],\n  defaultVariants: {\n    state: StepperState.inactive,\n    orientation: StepperOrientation.horizontal,\n    custom: false,\n  },\n});\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepper>>(() => stepper({ orientation, custom, iconTop }));\n\n/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\nfunction stepUi(state: StepperState): ReturnType<typeof stepper> {\n  return stepper({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n  if (step === undefined)\n    return steps;\n\n  return steps.map((item, index) => {\n    let stepStatus: StepperState = StepperState.inactive;\n\n    if (index + 1 === step)\n      stepStatus = StepperState.active;\n\n    if (index + 1 < step)\n      stepStatus = StepperState.done;\n\n    return {\n      ...item,\n      state: stepStatus,\n    };\n  });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n  return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n  if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n    return;\n  }\n\n  nextTick(() => {\n    const elem = get(wrapperRef);\n    if (!elem) {\n      return;\n    }\n    const activeStep = elem.querySelector('[data-active]');\n    activeStep?.scrollIntoView?.({\n      behavior: 'smooth',\n      inline: 'center',\n    });\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :tabindex=\"scrollTabindex\"\n    role=\"list\"\n    aria-label=\"Progress steps\"\n    :class=\"ui.root()\"\n    :data-orientation=\"orientation\"\n    :data-icon-top=\"iconTop || undefined\"\n    :data-custom=\"custom || undefined\"\n  >\n    <template\n      v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n      :key=\"index\"\n    >\n      <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n      <hr\n        v-if=\"index > 0\"\n        aria-hidden=\"true\"\n        :class=\"ui.divider()\"\n      />\n      <div\n        role=\"listitem\"\n        :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n        :data-state=\"resolveState(state)\"\n        :data-active=\"state === StepperState.active || undefined\"\n        :class=\"stepUi(resolveState(state)).step()\"\n      >\n        <slot\n          name=\"icon\"\n          v-bind=\"{ state, index: index + 1 }\"\n        >\n          <div class=\"relative flex py-2\">\n            <RuiStepperIcon\n              :index=\"index + 1\"\n              :state=\"state\"\n              :size=\"custom ? 'lg' : 'md'\"\n            />\n            <RuiProgress\n              v-if=\"loading\"\n              class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n              :size=\"custom ? 40 : 32\"\n              variant=\"indeterminate\"\n              circular\n              thickness=\"2\"\n              color=\"primary\"\n            />\n          </div>\n        </slot>\n        <div\n          v-if=\"title || description\"\n          :class=\"ui.label()\"\n          data-id=\"stepper-label\"\n        >\n          <span\n            v-if=\"title\"\n            :class=\"[stepUi(resolveState(state)).title(), custom && classNames?.title]\"\n            class=\"text-subtitle-2\"\n          >\n            {{ title }}\n          </span>\n          <span\n            v-if=\"description\"\n            :class=\"[stepUi(resolveState(state)).subtitle(), custom && classNames?.subtitle]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,MAAM,aAAa,eAA+B,YAAY;EAC9D,MAAM,iBAAiB,kBAAkB,UAAU;EAEnD,MAAM,UAAU,GAAG;GACjB,OAAO;IAEL,MAAM;IACN,MAAM;IACN,OAAO;IACP,UAAU;IACV,OAAO;IAEP,SAAS;GACX;GACA,UAAU;IACR,aAAa;MACV,mBAAmB,aAAa;MAC/B,MAAM;MACN,MAAM;MACN,SAAS;KACX;MACC,mBAAmB,WAAW;MAC7B,MAAM;MAEN,MAAM;MACN,SAAS;KACX;IACF;IACA,OAAO;MAEJ,aAAa,WAAW;MACvB,MAAM;MACN,OAAO;MACP,UAAU;KACZ;MACC,aAAa,SAAS;MACrB,MAAM;MACN,OAAO;MACP,UAAU;KACZ;MACC,aAAa,OAAO;MACnB,MAAM;MACN,OAAO;MACP,UAAU;KACZ;MACC,aAAa,QAAQ;MACpB,MAAM;MACN,OAAO;MACP,UAAU;KACZ;MACC,aAAa,UAAU;MACtB,MAAM;MACN,OAAO;MACP,UAAU;KACZ;MACC,aAAa,OAAO;MACnB,MAAM;MACN,OAAO;MACP,UAAU;KACZ;MACC,aAAa,UAAU;MACtB,MAAM;MACN,OAAO;MACP,UAAU;KACZ;IACF;IACA,SAAS,EACP,MAAM;KACJ,MAAM;KACN,OAAO;IACT,EACF;IACA,QAAQ;KACN,MAAM,CAAC;KACP,OAAO,CAAC;IACV;GACF;GACA,kBAAkB;IAChB;KAAE,QAAQ;KAAM,OAAO,aAAa;KAAU,OAAO,EAAE,MAAM,gBAAgB;IAAE;IAE/E;KAAE,aAAa,mBAAmB;KAAU,QAAQ;KAAM,OAAO,EAAE,SAAS,OAAO;IAAE;IACrF;KAAE,aAAa,mBAAmB;KAAU,SAAS;KAAM,OAAO,EAAE,SAAS,sBAAsB;IAAE;GACvG;GACA,iBAAiB;IACf,OAAO,aAAa;IACpB,aAAa,mBAAmB;IAChC,QAAQ;GACV;EACF,CAAC;EAGD,MAAM,KAAK,eAA2C,QAAQ;GAAE,aAAU,QAAA;GAAG,QAAK,QAAA;GAAG,SAAM,QAAA;EAAE,CAAC,CAAC;;;;;;;;;EAU/F,SAAS,OAAO,OAAiD;GAC/D,OAAO,QAAQ;IAAE,aAAU,QAAA;IAAG,QAAK,QAAA;IAAG,SAAM,QAAA;IAAG;GAAM,CAAC;EACxD;EAGA,MAAM,eAAe,eAA8B;GACjD,IAAI,QAAA,SAAS,KAAA,GACX,OAAO,QAAA;GAET,OAAO,QAAA,MAAM,KAAK,MAAM,UAAU;IAChC,IAAI,aAA2B,aAAa;IAE5C,IAAI,QAAQ,MAAM,QAAA,MAChB,aAAa,aAAa;IAE5B,IAAI,QAAQ,IAAI,QAAA,MACd,aAAa,aAAa;IAE5B,OAAO;KACL,GAAG;KACH,OAAO;IACT;GACF,CAAC;EACH,CAAC;EAED,SAAS,aAAa,OAA+C;GACnE,OAAO,SAAS,aAAa;EAC/B;EAEA,YAAY,QAAA,YAAY;GACtB,IAAI,CAAC,QAAA,qBAAqB,QAAA,gBAAgB,mBAAmB,YAC3D;GAGF,eAAe;IACb,MAAM,OAAO,IAAI,UAAU;IAC3B,IAAI,CAAC,MACH;IAGF,KADwB,cAAc,eACtC,CAAA,EAAY,iBAAiB;KAC3B,UAAU;KACV,QAAQ;IACV,CAAC;GACH,CAAC;EACH,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAsEM,OAAA;IArEA,SAAA;IAAJ,KAAI;IACH,UAAU,MAAA,cAAA;IACX,MAAK;IACL,cAAW;IACV,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;IACd,oBAAkB,QAAA;IAClB,iBAAe,QAAA,WAAW,KAAA;IAC1B,eAAa,QAAA,UAAU,KAAA;GAExB,GAAA,EAAA,UAAA,IAAA,GAAA,mBA2DW,UAAA,MAAA,WA1DiD,MAAA,YAAA,IAAY,EAA5D,OAAO,aAAa,OAAO,WAAW,UAAK;IAC/C,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,MAAK,GAAA,CAIH,QAAK,KADb,UAAA,GAAA,mBAIE,MAAA;;KAFA,eAAY;KACX,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IAEpB,GAAA,MAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,mBAgDM,OAAA;KA/CJ,MAAK;KACJ,gBAAc,UAAU,MAAA,YAAA,CAAY,CAAC,SAAM,SAAY,KAAA;KACvD,cAAY,aAAa,KAAK;KAC9B,eAAa,UAAU,MAAA,YAAA,CAAY,CAAC,UAAU,KAAA;KAC9C,OAAK,eAAE,OAAO,aAAa,KAAK,CAAA,CAAA,CAAG,KAAI,CAAA;IAExC,GAAA,CAAA,WAoBO,KAAA,QAAA,QApBP,WAoBO,EAAA,SAAA,KAAA,GAAA;KAlBK;KAAK,OAAS,QAAK;IAAA,CAAA,SAkBxB,CAhBL,mBAeM,OAfN,YAeM,CAdJ,YAIE,wBAAA;KAHC,OAAO,QAAK;KACL;KACP,MAAM,QAAA,SAAM,OAAA;;;;;IAGP,CAAA,GAAA,WADR,UAAA,GAAA,YAQE,qBAAA;;KANA,OAAM;KACL,MAAM,QAAA,SAAM,KAAA;KACb,SAAQ;KACR,UAAA;KACA,WAAU;KACV,OAAM;IAKJ,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,CAAA,GAAA,SAAS,eADjB,UAAA,GAAA,mBAmBM,OAAA;;KAjBH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KAChB,WAAQ;IAGA,GAAA,CAAA,SADR,UAAA,GAAA,mBAMO,QAAA;;KAJJ,OAAK,eAAA,CAAA,CAAG,OAAO,aAAa,KAAK,CAAA,CAAA,CAAG,MAAK,GAAI,QAAA,UAAU,QAAA,YAAY,KAAK,GACnE,iBAAiB,CAAA;IAEpB,GAAA,gBAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAGF,eADR,UAAA,GAAA,mBAMO,QAAA;;KAJJ,OAAK,eAAA,CAAA,CAAG,OAAO,aAAa,KAAK,CAAA,CAAA,CAAG,SAAQ,GAAI,QAAA,UAAU,QAAA,YAAY,QAAQ,GACzE,cAAc,CAAA;IAEjB,GAAA,gBAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA,CAAA,GAAA,EAAA"}
+{"version":3,"file":"RuiStepper.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiStepperClassNames {\n  root?: VueClassValue;\n  title?: VueClassValue;\n  subtitle?: VueClassValue;\n}\n\nexport interface Props {\n  step?: number;\n  steps: StepperStep[];\n  iconTop?: boolean;\n  custom?: boolean;\n  classNames?: RuiStepperClassNames;\n  orientation?: StepperOrientation;\n  keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiStepper',\n  inheritAttrs: false,\n});\n\nconst {\n  step,\n  steps,\n  iconTop = false,\n  custom = false,\n  classNames,\n  orientation = StepperOrientation.horizontal,\n  keepActiveVisible = true,\n} = defineProps<Props>();\n\ndefineSlots<{\n  icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\nconst stepper = tv({\n  slots: {\n    // takes focus only while it overflows (see useKeyboardScroll); the ring sits inside the clip\n    root: 'flex no-scrollbar overflow-auto rounded-rui-control outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    step: 'flex items-center px-6 relative',\n    title: '',\n    subtitle: '',\n    label: 'flex flex-col items-start text-left ml-2',\n    // the connector is decoration, so it takes the light divider rather than a control's edge\n    divider: 'border-rui-divider',\n  },\n  variants: {\n    orientation: {\n      [StepperOrientation.horizontal]: {\n        root: 'whitespace-nowrap lg:whitespace-normal',\n        step: '',\n        divider: 'block max-w-full min-w-4 h-0 max-h-0 self-center -mx-4 my-0 border-t flex-[1_1_0]',\n      },\n      [StepperOrientation.vertical]: {\n        root: 'flex-col inline-flex',\n        // 4px in from the edge, so the scrolling root does not clip the active marker's halo\n        step: 'px-1 py-3',\n        // reaches into both steps' padding, so the line runs from just under one marker to just over the next\n        divider: 'block min-h-6 min-w-0 max-h-full h-full self-start -my-3 mx-4 border-l',\n      },\n    },\n    state: {\n      // an upcoming step is not disabled, so its text keeps the 4.5:1 of the secondary tone\n      [StepperState.inactive]: {\n        step: 'text-rui-text-disabled',\n        title: 'text-rui-text-secondary',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.active]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.done]: {\n        step: 'text-rui-text',\n        title: '',\n        subtitle: 'text-rui-text-secondary',\n      },\n      [StepperState.error]: {\n        step: 'text-rui-error',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.warning]: {\n        step: 'text-rui-warning',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.info]: {\n        step: 'text-rui-info',\n        title: '',\n        subtitle: '',\n      },\n      [StepperState.success]: {\n        step: 'text-rui-success',\n        title: '',\n        subtitle: '',\n      },\n    },\n    iconTop: {\n      true: {\n        step: 'flex-col',\n        label: 'ml-0 mt-4 items-center text-center',\n      },\n    },\n    custom: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    { custom: true, state: StepperState.inactive, class: { step: 'text-rui-text' } },\n    // the line runs through the 32px marker's center\n    { orientation: StepperOrientation.vertical, custom: true, class: { divider: 'mx-5' } },\n    { orientation: StepperOrientation.vertical, iconTop: true, class: { divider: 'self-center mx-auto' } },\n  ],\n  defaultVariants: {\n    state: StepperState.inactive,\n    orientation: StepperOrientation.horizontal,\n    custom: false,\n  },\n});\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepper>>(() => stepper({ orientation, custom, iconTop }));\n\n/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\nfunction stepUi(state: StepperState): ReturnType<typeof stepper> {\n  return stepper({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n  if (step === undefined)\n    return steps;\n\n  return steps.map((item, index) => {\n    let stepStatus: StepperState = StepperState.inactive;\n\n    if (index + 1 === step)\n      stepStatus = StepperState.active;\n\n    if (index + 1 < step)\n      stepStatus = StepperState.done;\n\n    return {\n      ...item,\n      state: stepStatus,\n    };\n  });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n  return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n  if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n    return;\n  }\n\n  nextTick(() => {\n    const elem = get(wrapperRef);\n    if (!elem) {\n      return;\n    }\n    const activeStep = elem.querySelector('[data-active]');\n    activeStep?.scrollIntoView?.({\n      behavior: 'smooth',\n      inline: 'center',\n    });\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :tabindex=\"scrollTabindex\"\n    role=\"list\"\n    aria-label=\"Progress steps\"\n    :class=\"ui.root({ class: cn([classNames?.root, $attrs.class]) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :data-orientation=\"orientation\"\n    :data-icon-top=\"iconTop || undefined\"\n    :data-custom=\"custom || undefined\"\n  >\n    <template\n      v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n      :key=\"index\"\n    >\n      <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n      <hr\n        v-if=\"index > 0\"\n        aria-hidden=\"true\"\n        :class=\"ui.divider()\"\n      />\n      <div\n        role=\"listitem\"\n        :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n        :data-state=\"resolveState(state)\"\n        :data-active=\"state === StepperState.active || undefined\"\n        :class=\"stepUi(resolveState(state)).step()\"\n      >\n        <slot\n          name=\"icon\"\n          v-bind=\"{ state, index: index + 1 }\"\n        >\n          <div class=\"relative flex py-2\">\n            <RuiStepperIcon\n              :index=\"index + 1\"\n              :state=\"state\"\n              :size=\"custom ? 'lg' : 'md'\"\n            />\n            <RuiProgress\n              v-if=\"loading\"\n              class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n              :size=\"custom ? 40 : 32\"\n              variant=\"indeterminate\"\n              circular\n              thickness=\"2\"\n              color=\"primary\"\n            />\n          </div>\n        </slot>\n        <div\n          v-if=\"title || description\"\n          :class=\"ui.label()\"\n          data-id=\"stepper-label\"\n        >\n          <span\n            v-if=\"title\"\n            :class=\"[stepUi(resolveState(state)).title(), custom && classNames?.title]\"\n            class=\"text-subtitle-2\"\n          >\n            {{ title }}\n          </span>\n          <span\n            v-if=\"description\"\n            :class=\"[stepUi(resolveState(state)).subtitle(), custom && classNames?.subtitle]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}