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

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  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string | object | string[];\n  ariaLabel?: string;\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  contentClass = '',\n  ariaLabel,\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 top-0 h-full fixed text-rui-text bg-white dark:bg-[#363636]',\n  variants: {\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    withOverlay: {\n      true: 'z-[10000]',\n      false: 'z-[7]',\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  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false },\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    class: cn([\n      temporary && modelValue.value && 'shadow-5',\n      classNames?.content ?? contentClass,\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=\"absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50 z-[10000]\"\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        :aria-hidden=\"miniVariant && !modelValue ? 'true' : undefined\"\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 { 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":""}

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue.d.ts

@@ -11,9 +11,13 @@ export interface NavigationDrawerProps {
     overlay?: boolean;
     position?: 'left' | 'right';
     classNames?: RuiNavigationDrawerClassNames;
-    /** @deprecated Use `classNames.content` instead */
-    contentClass?: string | object | string[];
     ariaLabel?: string;
+    /**
+     * Starts the drawer, and its overlay, below the app bar (`--rui-app-bar-height`), so the app bar
+     * stays uncovered and usable while the drawer is open. Without it the drawer runs the full height and
+     * a modal one covers the app bar.
+     */
+    belowAppBar?: boolean;
 }
 type __VLS_Props = NavigationDrawerProps;
 type __VLS_Slots = {

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

@@ -1,7 +1,7 @@
 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, normalizeProps, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+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
@@ -9,8 +9,7 @@ var _hoisted_1 = [
 	"data-visible",
 	"data-position",
 	"data-mini",
-	"aria-label",
-	"aria-hidden"
+	"aria-label"
 ];
 var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiNavigationDrawer",
@@ -36,8 +35,11 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 		},
 		position: { default: "left" },
 		classNames: {},
-		contentClass: { default: "" },
-		ariaLabel: {}
+		ariaLabel: {},
+		belowAppBar: {
+			type: Boolean,
+			default: false
+		}
 	}, {
 		"modelValue": {
 			type: Boolean,
@@ -57,8 +59,16 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 		const style = computed(() => ({ width: transformPropsUnit(__props.width) }));
 		const activatorAttrs = { onClick: toggle };
 		const drawer = tv({
-			base: "transition-[transform,width] duration-200 ease-in-out top-0 h-full fixed text-rui-text bg-white dark:bg-[#363636]",
+			base: "transition-[transform,width] duration-200 ease-in-out bottom-0 fixed text-rui-text",
 			variants: {
+				belowAppBar: {
+					true: "top-rui-app-bar",
+					false: "top-0"
+				},
+				temporary: {
+					true: "bg-rui-overlay",
+					false: "bg-rui-surface"
+				},
 				position: {
 					left: "left-0",
 					right: "right-0"
@@ -72,8 +82,8 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 					false: ""
 				},
 				withOverlay: {
-					true: "z-[10000]",
-					false: "z-[7]"
+					true: "z-rui-drawer",
+					false: "z-rui-app-bar"
 				}
 			},
 			compoundVariants: [
@@ -92,16 +102,29 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 				{
 					mini: true,
 					visible: false,
-					class: "!w-14"
+					class: "w-14!"
+				},
+				{
+					temporary: false,
+					position: "left",
+					class: "border-r border-rui-divider"
+				},
+				{
+					temporary: false,
+					position: "right",
+					class: "border-l border-rui-divider"
 				}
 			],
 			defaultVariants: {
 				position: "left",
 				visible: false,
 				mini: false,
-				withOverlay: false
+				withOverlay: false,
+				temporary: false,
+				belowAppBar: false
 			}
 		});
+		const overlayClass = computed(() => cn(["fixed inset-x-0 bottom-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60 z-rui-drawer", __props.belowAppBar ? "top-rui-app-bar" : "top-0"]) ?? "");
 		/**
 		* Consumer classes go through `drawer()` rather than alongside it, so
 		* tailwind-variants' twMerge resolves conflicts in the consumer's favour.
@@ -114,9 +137,11 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 				visible: modelValue.value,
 				mini: __props.miniVariant,
 				withOverlay: __props.overlay,
+				temporary: __props.temporary,
+				belowAppBar: __props.belowAppBar,
 				class: cn([
-					__props.temporary && modelValue.value && "shadow-5",
-					__props.classNames?.content ?? __props.contentClass,
+					__props.temporary && modelValue.value && "shadow-rui-drawer",
+					__props.classNames?.content,
 					__props.classNames?.root,
 					attrsClass
 				])
@@ -160,9 +185,9 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 				default: withCtx(() => [modelValue.value ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					"data-id": "overlay",
-					class: "absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50 z-[10000]",
+					class: normalizeClass(unref(overlayClass)),
 					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => close(), ["stop"]))
-				})) : createCommentVNode("", true)]),
+				}, null, 2)) : createCommentVNode("", true)]),
 				_: 1
 			})) : createCommentVNode("", true), unref(alive) ? (openBlock(), createElementBlock("aside", mergeProps({
 				key: 1,
@@ -174,8 +199,7 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 				"data-position": __props.position,
 				"data-mini": __props.miniVariant || void 0,
 				class: rootClass(_ctx.$attrs.class),
-				"aria-label": __props.ariaLabel,
-				"aria-hidden": __props.miniVariant && !modelValue.value ? "true" : void 0
+				"aria-label": __props.ariaLabel
 			}, unref(getRootAttrs)(_ctx.$attrs, [])), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
 				attrs: activatorAttrs,
 				close

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  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string | object | string[];\n  ariaLabel?: string;\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  contentClass = '',\n  ariaLabel,\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 top-0 h-full fixed text-rui-text bg-white dark:bg-[#363636]',\n  variants: {\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    withOverlay: {\n      true: 'z-[10000]',\n      false: 'z-[7]',\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  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false },\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    class: cn([\n      temporary && modelValue.value && 'shadow-5',\n      classNames?.content ?? contentClass,\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=\"absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50 z-[10000]\"\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        :aria-hidden=\"miniVariant && !modelValue ? 'true' : undefined\"\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 { 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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiNotification.js","names":[],"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\nconst rootStyle = tv({ base: 'top-2 right-2 fixed drop-shadow-lg rounded-sm z-50' });\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-white dark:bg-[#363636]': !theme,\n          'bg-white text-rui-light-text': theme === 'light',\n          'bg-[#363636] text-rui-dark-text': 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":""}
+{"version":3,"file":"RuiNotification.js","names":[],"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":""}

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

@@ -23,7 +23,7 @@ var RuiNotification_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
 		const style = computed(() => ({ width: transformPropsUnit(__props.width) }));
-		const rootStyle = tv({ base: "top-2 right-2 fixed drop-shadow-lg rounded-sm z-50" });
+		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);
 		}, __props.timeout, { immediate: false });
@@ -55,9 +55,9 @@ var RuiNotification_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					role: "alert",
 					"aria-live": "polite",
 					class: unref(rootStyle)({ class: unref(cn)([_ctx.$attrs.class, {
-						"bg-white dark:bg-[#363636]": !__props.theme,
-						"bg-white text-rui-light-text": __props.theme === "light",
-						"bg-[#363636] text-rui-dark-text": __props.theme === "dark"
+						"bg-rui-overlay border-rui-divider": !__props.theme,
+						"bg-rui-light-overlay text-rui-light-text border-rui-light-divider": __props.theme === "light",
+						"bg-rui-dark-overlay text-rui-dark-text border-rui-dark-divider": __props.theme === "dark"
 					}]) }),
 					style: unref(style)
 				}, {

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\nconst rootStyle = tv({ base: 'top-2 right-2 fixed drop-shadow-lg rounded-sm z-50' });\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-white dark:bg-[#363636]': !theme,\n          'bg-white text-rui-light-text': theme === 'light',\n          'bg-[#363636] text-rui-dark-text': 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;EAEF,MAAM,YAAY,GAAG,EAAE,MAAM,qDAAqD,CAAC;EAEnF,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;MAA6C,8BAAA,CAAA,QAAA;MAAiD,gCAAA,QAAA,UAAK;MAA2D,mCAAA,QAAA,UAAK;;KAK7M,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,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTooltip.js","names":[],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { cn, tv } from '@/utils/tv';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n  root?: VueClassValue;\n  tooltip?: VueClassValue;\n}\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  options?: FloatingOptions;\n  /** @deprecated Use `options` instead */\n  popper?: PopperOptions;\n  classNames?: RuiTooltipClassNames;\n  /** @deprecated Use `classNames.tooltip` instead */\n  tooltipClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n  inheritAttrs: false,\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  popper,\n  classNames,\n  tooltipClass = '',\n} = defineProps<Props>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst rootStyle = tv({ base: 'relative inline-flex' });\n\nconst tooltipId = useId();\n\nconst {\n  reference: activator,\n  popover: tooltip,\n  open,\n  visible,\n  currentPlacement,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => popper ? toFloatingOptions(popper) : (options ?? {}),\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' | 'left' | 'right' | 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n  const placement = get(currentPlacement);\n  if (placement.startsWith('top'))\n    return 'top';\n  if (placement.startsWith('left'))\n    return 'left';\n  if (placement.startsWith('right'))\n    return 'right';\n  return 'bottom';\n});\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    :data-tooltip-disabled=\"disabled\"\n    :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        class=\"w-max z-[9999]\"\n        :class=\"classNames?.tooltip ?? tooltipClass\"\n        role=\"tooltip\"\n        :data-placement=\"currentPlacement\"\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=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            class=\"px-2 py-2 text-xs font-normal bg-rui-grey-700/90 text-white rounded shadow\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <slot>\n              {{ text }}\n            </slot>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            key=\"arrow\"\n            :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n            data-id=\"arrow\"\n          >\n            <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n          </span>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTooltip.js","names":[],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { cn, tv } from '@/utils/tv';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n  root?: VueClassValue;\n  tooltip?: VueClassValue;\n}\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  options?: FloatingOptions;\n  classNames?: RuiTooltipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n  inheritAttrs: false,\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  classNames,\n} = defineProps<Props>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst rootStyle = tv({ base: 'relative inline-flex' });\n\n// wraps at `--rui-tooltip-max-width`; a `max-w-*` in `classNames.tooltip` replaces it\nconst popoverStyle = tv({ base: 'w-max max-w-rui-tooltip z-rui-tooltip' });\n\nconst tooltipId = useId();\n\nconst {\n  reference: activator,\n  popover: tooltip,\n  open,\n  visible,\n  currentPlacement,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => options ?? {},\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' | 'left' | 'right' | 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n  const placement = get(currentPlacement);\n  if (placement.startsWith('top'))\n    return 'top';\n  if (placement.startsWith('left'))\n    return 'left';\n  if (placement.startsWith('right'))\n    return 'right';\n  return 'bottom';\n});\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    :data-tooltip-disabled=\"disabled\"\n    :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        :class=\"popoverStyle({ class: cn(classNames?.tooltip) })\"\n        :role=\"open ? 'tooltip' : undefined\"\n        :data-placement=\"currentPlacement\"\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=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            class=\"px-2 py-1.5 text-xs font-normal wrap-break-word bg-rui-neutral-900 dark:bg-rui-neutral-700 text-white rounded-rui-control shadow-rui-tooltip\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <ButtonGroupBoundary>\n              <slot>\n                {{ text }}\n              </slot>\n            </ButtonGroupBoundary>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            key=\"arrow\"\n            :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n            data-id=\"arrow\"\n          >\n            <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n          </span>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/tooltip/RuiTooltip.vue.d.ts

@@ -1,6 +1,5 @@
 import type { VueClassValue } from '../../../types/class-value';
 import { type FloatingOptions } from '../../../composables/floating.js';
-import { type PopperOptions } from '../../../composables/popper.js';
 export interface RuiTooltipClassNames {
     root?: VueClassValue;
     tooltip?: VueClassValue;
@@ -13,11 +12,7 @@ export interface Props {
     closeDelay?: number;
     persistOnTooltipHover?: boolean;
     options?: FloatingOptions;
-    /** @deprecated Use `options` instead */
-    popper?: PopperOptions;
     classNames?: RuiTooltipClassNames;
-    /** @deprecated Use `classNames.tooltip` instead */
-    tooltipClass?: string;
 }
 type __VLS_Slots = {
     activator?: (props: {

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

@@ -1,12 +1,16 @@
 import { cn, tv } from "../../../utils/tv.js";
+import { ButtonGroupBoundary } from "../../buttons/button-group/button-group-context.js";
 import { useFloating } from "../../../composables/floating.js";
-import { toFloatingOptions } from "../../../composables/popper.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 = ["id", "data-placement"];
+var _hoisted_2 = [
+	"id",
+	"role",
+	"data-placement"
+];
 var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiTooltip",
 	inheritAttrs: false,
@@ -28,14 +32,13 @@ var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			default: false
 		},
 		options: {},
-		popper: {},
-		classNames: {},
-		tooltipClass: { default: "" }
+		classNames: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const rootStyle = tv({ base: "relative inline-flex" });
+		const popoverStyle = tv({ base: "w-max max-w-rui-tooltip z-rui-tooltip" });
 		const tooltipId = useId();
-		const { reference: activator, popover: tooltip, open, visible, currentPlacement, onOpen, onClose, onLeaveComplete, updatePosition } = useFloating(() => __props.popper ? toFloatingOptions(__props.popper) : __props.options ?? {}, () => __props.disabled, () => __props.openDelay, () => __props.closeDelay);
+		const { reference: activator, popover: tooltip, open, visible, currentPlacement, onOpen, onClose, onLeaveComplete, updatePosition } = useFloating(() => __props.options ?? {}, () => __props.disabled, () => __props.openDelay, () => __props.closeDelay);
 		const placementSide = computed(() => {
 			const placement = get(currentPlacement);
 			if (placement.startsWith("top")) return "top";
@@ -73,8 +76,8 @@ var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				id: unref(tooltipId),
 				ref_key: "tooltip",
 				ref: tooltip,
-				class: normalizeClass(["w-max z-[9999]", __props.classNames?.tooltip ?? __props.tooltipClass]),
-				role: "tooltip",
+				class: normalizeClass(unref(popoverStyle)({ class: unref(cn)(__props.classNames?.tooltip) })),
+				role: unref(open) ? "tooltip" : void 0,
 				"data-placement": unref(currentPlacement)
 			}, [createVNode(TransitionGroup, {
 				"enter-active-class": "transition ease-out duration-200",
@@ -88,11 +91,14 @@ var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			}, {
 				default: withCtx(() => [unref(open) ? (openBlock(), createElementBlock("div", {
 					key: "tooltip",
-					class: "px-2 py-2 text-xs font-normal bg-rui-grey-700/90 text-white rounded shadow",
+					class: "px-2 py-1.5 text-xs font-normal wrap-break-word bg-rui-neutral-900 dark:bg-rui-neutral-700 text-white rounded-rui-control shadow-rui-tooltip",
 					"data-id": "content",
 					onMouseover: _cache[0] || (_cache[0] = ($event) => __props.persistOnTooltipHover && unref(onOpen)()),
 					onMouseleave: _cache[1] || (_cache[1] = ($event) => __props.persistOnTooltipHover && unref(onClose)())
-				}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.text), 1)])], 32)) : createCommentVNode("", true), !__props.hideArrow ? (openBlock(), createElementBlock("span", {
+				}, [createVNode(unref(ButtonGroupBoundary), null, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.text), 1)])]),
+					_: 3
+				})], 32)) : createCommentVNode("", true), !__props.hideArrow ? (openBlock(), createElementBlock("span", {
 					key: "arrow",
 					class: normalizeClass(unref(tooltipStyles)({
 						open: unref(open),

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTooltip.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { cn, tv } from '@/utils/tv';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n  root?: VueClassValue;\n  tooltip?: VueClassValue;\n}\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  options?: FloatingOptions;\n  /** @deprecated Use `options` instead */\n  popper?: PopperOptions;\n  classNames?: RuiTooltipClassNames;\n  /** @deprecated Use `classNames.tooltip` instead */\n  tooltipClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n  inheritAttrs: false,\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  popper,\n  classNames,\n  tooltipClass = '',\n} = defineProps<Props>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst rootStyle = tv({ base: 'relative inline-flex' });\n\nconst tooltipId = useId();\n\nconst {\n  reference: activator,\n  popover: tooltip,\n  open,\n  visible,\n  currentPlacement,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => popper ? toFloatingOptions(popper) : (options ?? {}),\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' | 'left' | 'right' | 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n  const placement = get(currentPlacement);\n  if (placement.startsWith('top'))\n    return 'top';\n  if (placement.startsWith('left'))\n    return 'left';\n  if (placement.startsWith('right'))\n    return 'right';\n  return 'bottom';\n});\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    :data-tooltip-disabled=\"disabled\"\n    :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        class=\"w-max z-[9999]\"\n        :class=\"classNames?.tooltip ?? tooltipClass\"\n        role=\"tooltip\"\n        :data-placement=\"currentPlacement\"\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=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            class=\"px-2 py-2 text-xs font-normal bg-rui-grey-700/90 text-white rounded shadow\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <slot>\n              {{ text }}\n            </slot>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            key=\"arrow\"\n            :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n            data-id=\"arrow\"\n          >\n            <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n          </span>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiTooltip.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { cn, tv } from '@/utils/tv';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n  root?: VueClassValue;\n  tooltip?: VueClassValue;\n}\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  options?: FloatingOptions;\n  classNames?: RuiTooltipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n  inheritAttrs: false,\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  classNames,\n} = defineProps<Props>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst rootStyle = tv({ base: 'relative inline-flex' });\n\n// wraps at `--rui-tooltip-max-width`; a `max-w-*` in `classNames.tooltip` replaces it\nconst popoverStyle = tv({ base: 'w-max max-w-rui-tooltip z-rui-tooltip' });\n\nconst tooltipId = useId();\n\nconst {\n  reference: activator,\n  popover: tooltip,\n  open,\n  visible,\n  currentPlacement,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => options ?? {},\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' | 'left' | 'right' | 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n  const placement = get(currentPlacement);\n  if (placement.startsWith('top'))\n    return 'top';\n  if (placement.startsWith('left'))\n    return 'left';\n  if (placement.startsWith('right'))\n    return 'right';\n  return 'bottom';\n});\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    :data-tooltip-disabled=\"disabled\"\n    :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        :class=\"popoverStyle({ class: cn(classNames?.tooltip) })\"\n        :role=\"open ? 'tooltip' : undefined\"\n        :data-placement=\"currentPlacement\"\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=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            class=\"px-2 py-1.5 text-xs font-normal wrap-break-word bg-rui-neutral-900 dark:bg-rui-neutral-700 text-white rounded-rui-control shadow-rui-tooltip\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <ButtonGroupBoundary>\n              <slot>\n                {{ text }}\n              </slot>\n            </ButtonGroupBoundary>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            key=\"arrow\"\n            :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n            data-id=\"arrow\"\n          >\n            <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n          </span>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/overlays/tooltip/tooltip-styles.d.ts

@@ -1,3 +1,8 @@
+/**
+ * The arrow is a solid square turned 45°, centred on the bubble's edge so half of it tucks under the
+ * bubble in the same color. A triangle drawn from two borders showed a hairline where the borders
+ * met, and a square has no such join. Being symmetric, it needs no rotation per side.
+ */
 export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
     open: {
         true: {
@@ -10,19 +15,15 @@ export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
     side: {
         top: {
             arrow: string;
-            diamond: string;
         };
         bottom: {
             arrow: string;
-            diamond: string;
         };
         left: {
             arrow: string;
-            diamond: string;
         };
         right: {
             arrow: string;
-            diamond: string;
         };
     };
 }, {
@@ -40,19 +41,15 @@ export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
     side: {
         top: {
             arrow: string;
-            diamond: string;
         };
         bottom: {
             arrow: string;
-            diamond: string;
         };
         left: {
             arrow: string;
-            diamond: string;
         };
         right: {
             arrow: string;
-            diamond: string;
         };
     };
 }, {
@@ -70,19 +67,15 @@ export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
     side: {
         top: {
             arrow: string;
-            diamond: string;
         };
         bottom: {
             arrow: string;
-            diamond: string;
         };
         left: {
             arrow: string;
-            diamond: string;
         };
         right: {
             arrow: string;
-            diamond: string;
         };
     };
 }, {

package/dist/components/overlays/tooltip/tooltip-styles.js

@@ -1,9 +1,14 @@
 import { tv } from "../../../utils/tv.js";
 //#region src/components/overlays/tooltip/tooltip-styles.ts
+/**
+* The arrow is a solid square turned 45°, centred on the bubble's edge so half of it tucks under the
+* bubble in the same color. A triangle drawn from two borders showed a hairline where the borders
+* met, and a square has no such join. Being symmetric, it needs no rotation per side.
+*/
 var tooltipStyles = tv({
 	slots: {
-		arrow: "absolute block w-2.5 h-2.5 transition-opacity",
-		diamond: "block border-[0.3125rem] origin-center border-l-transparent border-b-transparent border-t-rui-grey-700/90 border-r-rui-grey-700/90 rounded-[0_0.125rem_0_0]"
+		arrow: "absolute block size-2 transition-opacity",
+		diamond: "block size-2 rotate-45 rounded-[0.0625rem] bg-rui-neutral-900 dark:bg-rui-neutral-700"
 	},
 	variants: {
 		open: {
@@ -11,22 +16,10 @@ var tooltipStyles = tv({
 			false: { arrow: "opacity-0" }
 		},
 		side: {
-			top: {
-				arrow: "bottom-[calc(0.5px-0.3125rem)]",
-				diamond: "rotate-[135deg]"
-			},
-			bottom: {
-				arrow: "top-[calc(0.5px-0.3125rem)]",
-				diamond: "-rotate-45"
-			},
-			left: {
-				arrow: "right-[calc(0.5px-0.3125rem)]",
-				diamond: "rotate-45"
-			},
-			right: {
-				arrow: "left-[calc(0.5px-0.3125rem)]",
-				diamond: "-rotate-[135deg]"
-			}
+			top: { arrow: "-bottom-1" },
+			bottom: { arrow: "-top-1" },
+			left: { arrow: "-right-1" },
+			right: { arrow: "-left-1" }
 		}
 	},
 	defaultVariants: {

package/dist/components/overlays/tooltip/tooltip-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-styles.js","names":[],"sources":["../../../../src/components/overlays/tooltip/tooltip-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const tooltipStyles = tv({\n  slots: {\n    arrow: 'absolute block w-2.5 h-2.5 transition-opacity',\n    diamond: 'block border-[0.3125rem] origin-center border-l-transparent border-b-transparent border-t-rui-grey-700/90 border-r-rui-grey-700/90 rounded-[0_0.125rem_0_0]',\n  },\n  variants: {\n    open: {\n      true: { arrow: 'opacity-100' },\n      false: { arrow: 'opacity-0' },\n    },\n    side: {\n      top: {\n        arrow: 'bottom-[calc(0.5px-0.3125rem)]',\n        diamond: 'rotate-[135deg]',\n      },\n      bottom: {\n        arrow: 'top-[calc(0.5px-0.3125rem)]',\n        diamond: '-rotate-45',\n      },\n      left: {\n        arrow: 'right-[calc(0.5px-0.3125rem)]',\n        diamond: 'rotate-45',\n      },\n      right: {\n        arrow: 'left-[calc(0.5px-0.3125rem)]',\n        diamond: '-rotate-[135deg]',\n      },\n    },\n  },\n  defaultVariants: { open: false, side: 'bottom' },\n});\n"],"mappings":";;AAEA,IAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,OAAO;EACP,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,MAAM,EAAE,OAAO,cAAc;GAC7B,OAAO,EAAE,OAAO,YAAY;EAC9B;EACA,MAAM;GACJ,KAAK;IACH,OAAO;IACP,SAAS;GACX;GACA,QAAQ;IACN,OAAO;IACP,SAAS;GACX;GACA,MAAM;IACJ,OAAO;IACP,SAAS;GACX;GACA,OAAO;IACL,OAAO;IACP,SAAS;GACX;EACF;CACF;CACA,iBAAiB;EAAE,MAAM;EAAO,MAAM;CAAS;AACjD,CAAC"}
+{"version":3,"file":"tooltip-styles.js","names":[],"sources":["../../../../src/components/overlays/tooltip/tooltip-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The arrow is a solid square turned 45°, centred on the bubble's edge so half of it tucks under the\n * bubble in the same color. A triangle drawn from two borders showed a hairline where the borders\n * met, and a square has no such join. Being symmetric, it needs no rotation per side.\n */\nexport const tooltipStyles = tv({\n  slots: {\n    arrow: 'absolute block size-2 transition-opacity',\n    // eslint-disable-next-line better-tailwindcss/no-restricted-classes -- the tip of the arrow is geometry, not a surface's corner\n    diamond: 'block size-2 rotate-45 rounded-[0.0625rem] bg-rui-neutral-900 dark:bg-rui-neutral-700',\n  },\n  variants: {\n    open: {\n      true: { arrow: 'opacity-100' },\n      false: { arrow: 'opacity-0' },\n    },\n    side: {\n      top: { arrow: '-bottom-1' },\n      bottom: { arrow: '-top-1' },\n      left: { arrow: '-right-1' },\n      right: { arrow: '-left-1' },\n    },\n  },\n  defaultVariants: { open: false, side: 'bottom' },\n});\n"],"mappings":";;;;;;;AAOA,IAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,OAAO;EAEP,SAAS;CACX;CACA,UAAU;EACR,MAAM;GACJ,MAAM,EAAE,OAAO,cAAc;GAC7B,OAAO,EAAE,OAAO,YAAY;EAC9B;EACA,MAAM;GACJ,KAAK,EAAE,OAAO,YAAY;GAC1B,QAAQ,EAAE,OAAO,SAAS;GAC1B,MAAM,EAAE,OAAO,WAAW;GAC1B,OAAO,EAAE,OAAO,UAAU;EAC5B;CACF;CACA,iBAAiB;EAAE,MAAM;EAAO,MAAM;CAAS;AACjD,CAAC"}