@rotki/ui-library 2.12.1 → 2.12.2

package/dist/components/logos/RuiLogo.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiLogo.vue.js","sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isClient } from '@vueuse/shared';\nimport { useSSRContext } from 'vue';\nimport fallback from '@/components/logos/logo.svg';\nimport { transformCase } from '@/utils/helpers';\n\nexport interface ExternalLinks {\n  drawer?: string;\n  app?: string;\n  website?: string;\n  about?: string;\n  emptyScreen?: string;\n  [key: string]: string | undefined;\n}\n\nexport interface Props {\n  text?: boolean;\n  branch?: 'develop' | 'main' | string;\n  logo?: keyof ExternalLinks;\n  size?: string | number; // in rems\n  uniqueKey?: string | number;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  text: false,\n  branch: 'develop',\n  logo: undefined,\n  size: 3,\n  uniqueKey: undefined,\n});\n\nconst customImageRef = ref<HTMLImageElement>();\nconst error = ref(false);\nconst decoding = ref(!!props.logo);\nconst pendingSources = ref(false);\nconst appName = 'rotki';\nconst emptyLinks: ExternalLinks = {\n  app: undefined,\n  website: undefined,\n  about: undefined,\n  emptyScreen: undefined,\n};\nconst externalSources = ref(emptyLinks);\n\nconst externalSource = computed(() => {\n  const sources = get(externalSources);\n  const { logo } = props;\n  if (!logo || !sources[logo]) {\n    set(decoding, get(pendingSources));\n    return undefined;\n  }\n\n  const url = `https://raw.githubusercontent.com/rotki/data/${props.branch}/assets/icons/${sources[logo]}`;\n\n  if (props.uniqueKey !== undefined)\n    return `${url}?key=${props.uniqueKey}`;\n\n  return url;\n});\n\nasync function fetchSources() {\n  if (!props.logo)\n    return;\n\n  set(pendingSources, true);\n  try {\n    const { data } = await useFetch<string>(\n      `https://raw.githubusercontent.com/rotki/data/${props.branch}/constants/asset-mappings.json`,\n    );\n\n    const links = transformCase(JSON.parse(get(data) ?? 'null')?.logo, 'camelCase');\n\n    if (links)\n      set(externalSources, links);\n  }\n  catch {}\n  set(pendingSources, false);\n}\n\nwatch(\n  () => get(customImageRef)?.complete,\n  (complete) => {\n    if (complete) {\n      get(customImageRef)\n        ?.decode()\n        .catch(() => set(error, true))\n        .finally(() => set(decoding, false));\n    }\n  },\n);\n\nwatchEffect(fetchSources);\n\nif (!isClient)\n  useSSRContext();\n\nonServerPrefetch(async () => {\n  await fetchSources();\n});\n</script>\n\n<template>\n  <div\n    class=\"gap-x-4 flex items-center relative\"\n    :style=\"{ height: `${size}rem` }\"\n  >\n    <div\n      v-if=\"!externalSource && decoding\"\n      class=\"h-full transition delay-0 opacity-0\"\n      :style=\"{ width: `${size}rem` }\"\n    />\n    <img\n      v-else-if=\"externalSource && (!error || decoding)\"\n      ref=\"customImageRef\"\n      :src=\"externalSource\"\n      :alt=\"appName\"\n      data-image=\"custom\"\n      class=\"h-full transition ease-out duration-200 delay-100\"\n      :style=\"{ width: `${size}rem` }\"\n      @error=\"error = true\"\n    />\n    <img\n      v-else\n      :src=\"fallback\"\n      :alt=\"appName\"\n      data-image=\"fallback\"\n      class=\"h-full transition ease-out duration-200 delay-100\"\n      :style=\"{ width: `${size}rem` }\"\n    />\n    <div\n      v-if=\"text\"\n      class=\"text-h4 text-rui-primary dark:text-white\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_toDisplayString"],"mappings":";;;;;;;;;;;AAuCA,MAAM,UAAU;;;;;;;;;;;;;;AAZhB,UAAM,QAAQ;AAQd,UAAM,iBAAiB,IAAA;AACvB,UAAM,QAAQ,IAAI,KAAK;AACvB,UAAM,WAAW,IAAI,CAAC,CAAC,MAAM,IAAI;AACjC,UAAM,iBAAiB,IAAI,KAAK;AAEhC,UAAM,aAA4B;AAAA,MAChC,KAAK;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,aAAa;AAAA,IAAA;AAEf,UAAM,kBAAkB,IAAI,UAAU;AAEtC,UAAM,iBAAiB,SAAS,MAAM;AACpC,YAAM,UAAU,IAAI,eAAe;AACnC,YAAM,EAAE,SAAS;AACjB,UAAI,CAAC,QAAQ,CAAC,QAAQ,IAAI,GAAG;AAC3B,YAAI,UAAU,IAAI,cAAc,CAAC;AACjC,eAAO;AAAA,MACT;AAEA,YAAM,MAAM,gDAAgD,MAAM,MAAM,iBAAiB,QAAQ,IAAI,CAAC;AAEtG,UAAI,MAAM,cAAc;AACtB,eAAO,GAAG,GAAG,QAAQ,MAAM,SAAS;AAEtC,aAAO;AAAA,IACT,CAAC;AAED,mBAAe,eAAe;AAC5B,UAAI,CAAC,MAAM;AACT;AAEF,UAAI,gBAAgB,IAAI;AACxB,UAAI;AACF,cAAM,EAAE,KAAA,IAAS,MAAM;AAAA,UACrB,gDAAgD,MAAM,MAAM;AAAA,QAAA;AAG9D,cAAM,QAAQ,cAAc,KAAK,MAAM,IAAI,IAAI,KAAK,MAAM,GAAG,MAAM,WAAW;AAE9E,YAAI;AACF,cAAI,iBAAiB,KAAK;AAAA,MAC9B,QACM;AAAA,MAAC;AACP,UAAI,gBAAgB,KAAK;AAAA,IAC3B;AAEA;AAAA,MACE,MAAM,IAAI,cAAc,GAAG;AAAA,MAC3B,CAAC,aAAa;AACZ,YAAI,UAAU;AACZ,cAAI,cAAc,GACd,OAAA,EACD,MAAM,MAAM,IAAI,OAAO,IAAI,CAAC,EAC5B,QAAQ,MAAM,IAAI,UAAU,KAAK,CAAC;AAAA,QACvC;AAAA,MACF;AAAA,IAAA;AAGF,gBAAY,YAAY;AAExB,QAAI,CAAC;AACH,oBAAA;AAEF,qBAAiB,YAAY;AAC3B,YAAM,aAAA;AAAA,IACR,CAAC;;0BAICA,mBAiCM,OAAA;AAAA,QAhCJ,OAAM;AAAA,QACL,mCAAoB,QAAA,IAAI,OAAA;AAAA,MAAA;QAGhB,CAAAC,MAAA,cAAA,KAAkBA,MAAA,QAAA,kBAD3BD,mBAIE,OAAA;AAAA;UAFA,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,QAAA,eAGbC,MAAA,cAAA,MAAc,CAAMA,MAAA,KAAA,KAASA,MAAA,QAAA,mBAD1CD,mBASE,OAAA;AAAA;mBAPI;AAAA,UAAJ,KAAI;AAAA,UACH,KAAKC,MAAA,cAAA;AAAA,UACL,KAAK;AAAA,UACN,cAAW;AAAA,UACX,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,UACvB,+CAAO,MAAA,QAAK;AAAA,QAAA,0CAEfD,mBAOE,OAAA;AAAA;UALC,KAAKC,MAAA,QAAA;AAAA,UACL,KAAK;AAAA,UACN,cAAW;AAAA,UACX,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,QAAA;QAGlB,QAAA,qBADRD,mBAKM,OALN,YAKME,gBADD,OAAO,CAAA;;;;;"}
+{"version":3,"file":"RuiLogo.vue.js","sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isClient } from '@vueuse/shared';\nimport { useSSRContext } from 'vue';\nimport fallback from '@/components/logos/logo.svg';\nimport { transformCase } from '@/utils/helpers';\n\nexport interface ExternalLinks {\n  drawer?: string;\n  app?: string;\n  website?: string;\n  about?: string;\n  emptyScreen?: string;\n  [key: string]: string | undefined;\n}\n\nexport interface Props {\n  text?: boolean;\n  branch?: 'develop' | 'main' | string;\n  logo?: keyof ExternalLinks;\n  size?: string | number; // in rems\n  uniqueKey?: string | number;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  text: false,\n  branch: 'develop',\n  logo: undefined,\n  size: 3,\n  uniqueKey: undefined,\n});\n\nconst customImageRef = ref<HTMLImageElement>();\nconst error = ref(false);\nconst decoding = ref(!!props.logo);\nconst pendingSources = ref(false);\nconst appName = 'rotki';\nconst emptyLinks: ExternalLinks = {\n  app: undefined,\n  website: undefined,\n  about: undefined,\n  emptyScreen: undefined,\n};\nconst externalSources = ref(emptyLinks);\n\nconst externalSource = computed(() => {\n  const sources = get(externalSources);\n  const { logo } = props;\n  if (!logo || !sources[logo]) {\n    set(decoding, get(pendingSources));\n    return undefined;\n  }\n\n  const url = `https://raw.githubusercontent.com/rotki/data/${props.branch}/assets/icons/${sources[logo]}`;\n\n  if (props.uniqueKey !== undefined)\n    return `${url}?key=${props.uniqueKey}`;\n\n  return url;\n});\n\nasync function fetchSources() {\n  if (!props.logo)\n    return;\n\n  set(pendingSources, true);\n  try {\n    const { data } = await useFetch<string>(\n      `https://raw.githubusercontent.com/rotki/data/${props.branch}/constants/asset-mappings.json`,\n    );\n\n    const links = transformCase(JSON.parse(get(data) ?? 'null')?.logo, 'camelCase');\n\n    if (links)\n      set(externalSources, links);\n  }\n  catch {}\n  set(pendingSources, false);\n}\n\nwatch(\n  () => get(customImageRef)?.complete,\n  (complete) => {\n    if (complete) {\n      get(customImageRef)\n        ?.decode()\n        .catch(() => set(error, true))\n        .finally(() => set(decoding, false));\n    }\n  },\n);\n\nwatchEffect(fetchSources);\n\nif (!isClient)\n  useSSRContext();\n\nonServerPrefetch(async () => {\n  await fetchSources();\n});\n</script>\n\n<template>\n  <div\n    class=\"gap-x-4 flex items-center relative\"\n    :style=\"{ height: `${size}rem` }\"\n  >\n    <div\n      v-if=\"!externalSource && decoding\"\n      role=\"img\"\n      :aria-label=\"appName\"\n      class=\"h-full transition delay-0 opacity-0\"\n      :style=\"{ width: `${size}rem` }\"\n    />\n    <img\n      v-else-if=\"externalSource && (!error || decoding)\"\n      ref=\"customImageRef\"\n      :src=\"externalSource\"\n      :alt=\"appName\"\n      data-image=\"custom\"\n      class=\"h-full transition ease-out duration-200 delay-100\"\n      :style=\"{ width: `${size}rem` }\"\n      @error=\"error = true\"\n    />\n    <img\n      v-else\n      :src=\"fallback\"\n      :alt=\"appName\"\n      data-image=\"fallback\"\n      class=\"h-full transition ease-out duration-200 delay-100\"\n      :style=\"{ width: `${size}rem` }\"\n    />\n    <div\n      v-if=\"text\"\n      class=\"text-h4 text-rui-primary dark:text-white\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_toDisplayString"],"mappings":";;;;;;;;;;;AAuCA,MAAM,UAAU;;;;;;;;;;;;;;AAZhB,UAAM,QAAQ;AAQd,UAAM,iBAAiB,IAAA;AACvB,UAAM,QAAQ,IAAI,KAAK;AACvB,UAAM,WAAW,IAAI,CAAC,CAAC,MAAM,IAAI;AACjC,UAAM,iBAAiB,IAAI,KAAK;AAEhC,UAAM,aAA4B;AAAA,MAChC,KAAK;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,aAAa;AAAA,IAAA;AAEf,UAAM,kBAAkB,IAAI,UAAU;AAEtC,UAAM,iBAAiB,SAAS,MAAM;AACpC,YAAM,UAAU,IAAI,eAAe;AACnC,YAAM,EAAE,SAAS;AACjB,UAAI,CAAC,QAAQ,CAAC,QAAQ,IAAI,GAAG;AAC3B,YAAI,UAAU,IAAI,cAAc,CAAC;AACjC,eAAO;AAAA,MACT;AAEA,YAAM,MAAM,gDAAgD,MAAM,MAAM,iBAAiB,QAAQ,IAAI,CAAC;AAEtG,UAAI,MAAM,cAAc;AACtB,eAAO,GAAG,GAAG,QAAQ,MAAM,SAAS;AAEtC,aAAO;AAAA,IACT,CAAC;AAED,mBAAe,eAAe;AAC5B,UAAI,CAAC,MAAM;AACT;AAEF,UAAI,gBAAgB,IAAI;AACxB,UAAI;AACF,cAAM,EAAE,KAAA,IAAS,MAAM;AAAA,UACrB,gDAAgD,MAAM,MAAM;AAAA,QAAA;AAG9D,cAAM,QAAQ,cAAc,KAAK,MAAM,IAAI,IAAI,KAAK,MAAM,GAAG,MAAM,WAAW;AAE9E,YAAI;AACF,cAAI,iBAAiB,KAAK;AAAA,MAC9B,QACM;AAAA,MAAC;AACP,UAAI,gBAAgB,KAAK;AAAA,IAC3B;AAEA;AAAA,MACE,MAAM,IAAI,cAAc,GAAG;AAAA,MAC3B,CAAC,aAAa;AACZ,YAAI,UAAU;AACZ,cAAI,cAAc,GACd,OAAA,EACD,MAAM,MAAM,IAAI,OAAO,IAAI,CAAC,EAC5B,QAAQ,MAAM,IAAI,UAAU,KAAK,CAAC;AAAA,QACvC;AAAA,MACF;AAAA,IAAA;AAGF,gBAAY,YAAY;AAExB,QAAI,CAAC;AACH,oBAAA;AAEF,qBAAiB,YAAY;AAC3B,YAAM,aAAA;AAAA,IACR,CAAC;;0BAICA,mBAmCM,OAAA;AAAA,QAlCJ,OAAM;AAAA,QACL,mCAAoB,QAAA,IAAI,OAAA;AAAA,MAAA;QAGhB,CAAAC,MAAA,cAAA,KAAkBA,MAAA,QAAA,kBAD3BD,mBAME,OAAA;AAAA;UAJA,MAAK;AAAA,UACJ,cAAY;AAAA,UACb,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,QAAA,eAGbC,MAAA,cAAA,MAAc,CAAMA,MAAA,KAAA,KAASA,MAAA,QAAA,mBAD1CD,mBASE,OAAA;AAAA;mBAPI;AAAA,UAAJ,KAAI;AAAA,UACH,KAAKC,MAAA,cAAA;AAAA,UACL,KAAK;AAAA,UACN,cAAW;AAAA,UACX,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,UACvB,+CAAO,MAAA,QAAK;AAAA,QAAA,0CAEfD,mBAOE,OAAA;AAAA;UALC,KAAKC,MAAA,QAAA;AAAA,UACL,KAAK;AAAA,UACN,cAAW;AAAA,UACX,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,QAAA;QAGlB,QAAA,qBADRD,mBAKM,OALN,YAKME,gBADD,OAAO,CAAA;;;;;"}

package/dist/components/overlays/badge/RuiBadge.vue.d.ts

@@ -22,17 +22,17 @@ type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    left: boolean;
     size: "sm" | "md" | "lg";
-    placement: "top" | "center" | "bottom";
-    color: "default" | ContextColorsType;
     text: string | null;
+    color: "default" | ContextColorsType;
     rounded: "sm" | "md" | "lg" | "full";
     icon: RuiIcons | null;
     modelValue: boolean;
     dot: boolean;
+    left: boolean;
     offsetX: string | number;
     offsetY: string | number;
+    placement: "top" | "center" | "bottom";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/overlays/badge/RuiBadge.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, useCssVars, unref, toRefs, useSlots, createElementBlock, openBlock, normalizeClass, renderSlot, createVNode, Transition, withCtx, createCommentVNode, createElementVNode, toDisplayString, createBlock } from "vue";
+import { defineComponent, useCssVars, unref, useSlots, toRefs, openBlock, createElementBlock, normalizeClass, renderSlot, createVNode, Transition, withCtx, createElementVNode, toDisplayString, createBlock, createCommentVNode } from "vue";
 import { logicOr, logicAnd } from "@vueuse/math";
 import RuiIcon from "../../icons/RuiIcon.vue.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/components/overlays/bottom-sheet/RuiBottomSheet.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, mergeProps, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, openBlock, createBlock, mergeProps, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
 import RuiDialog from "../dialog/RuiDialog.vue.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{

package/dist/components/overlays/dialog/RuiDialog.vue.d.ts

@@ -6,6 +6,7 @@ export interface DialogProps {
     bottomSheet?: boolean;
     contentClass?: any;
     zIndex?: string | number;
+    ariaLabel?: string;
 }
 declare function close(): void;
 declare var __VLS_1: {
@@ -23,18 +24,18 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    closed: () => any;
     "update:model-value": (value: boolean) => any;
+    closed: () => any;
     "click:outside": () => any;
     "click:esc": () => any;
 }, string, import("vue").PublicProps, Readonly<DialogProps> & Readonly<{
-    onClosed?: (() => any) | undefined;
     "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
+    onClosed?: (() => any) | undefined;
     "onClick:outside"?: (() => any) | undefined;
     "onClick:esc"?: (() => any) | undefined;
 }>, {
-    width: string | number;
     modelValue: boolean;
+    width: string | number;
     contentClass: any;
     persistent: boolean;
     zIndex: string | number;

package/dist/components/overlays/dialog/RuiDialog.vue2.js

@@ -1,7 +1,8 @@
+import { defineComponent, toRefs, ref, nextTick, watch, computed, openBlock, createElementBlock, normalizeProps, guardReactiveProps, unref, renderSlot, createBlock, Teleport, mergeProps, withKeys, withModifiers, createVNode, Transition, withCtx, normalizeClass, createCommentVNode, normalizeStyle } from "vue";
 import { transformPropsUnit, getRootAttrs, getNonRootAttrs } from "../../../utils/helpers.js";
-import { defineComponent, toRefs, ref, nextTick, watch, computed, createElementBlock, openBlock, normalizeProps, guardReactiveProps, unref, renderSlot, createBlock, Teleport, createCommentVNode, mergeProps, withKeys, withModifiers, createVNode, Transition, withCtx, normalizeClass, normalizeStyle } from "vue";
 import { watchImmediate } from "@vueuse/core";
 import { set, get } from "@vueuse/shared";
+const _hoisted_1 = ["aria-label"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiDialog",
@@ -15,7 +16,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     maxWidth: {},
     bottomSheet: { type: Boolean, default: false },
     contentClass: { default: "" },
-    zIndex: { default: 9999 }
+    zIndex: { default: 9999 },
+    ariaLabel: {}
   },
   emits: ["update:model-value", "closed", "click:outside", "click:esc"],
   setup(__props, { emit: __emit }) {
@@ -116,7 +118,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("click:outside");
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(("getRootAttrs" in _ctx ? _ctx.getRootAttrs : unref(getRootAttrs))(_ctx.$attrs))), [
+      return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [
         renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({ attrs: unref(dialogAttrs), isOpen: unref(isOpen) }))),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
           unref(isOpen) || unref(internalValue) ? (openBlock(), createElementBlock("div", mergeProps({
@@ -124,8 +126,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: _ctx.$style.wrapper,
             style: { zIndex: __props.zIndex },
             role: "dialog",
+            "aria-modal": "true",
+            "aria-label": __props.ariaLabel,
             tabindex: "0"
-          }, ("getNonRootAttrs" in _ctx ? _ctx.getNonRootAttrs : unref(getNonRootAttrs))(_ctx.$attrs), {
+          }, unref(getNonRootAttrs)(_ctx.$attrs), {
             onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => onEscClick(), ["stop"]), ["esc"]))
           }), [
             createVNode(Transition, {
@@ -139,6 +143,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               default: withCtx(() => [
                 unref(isOpen) && unref(internalValue) ? (openBlock(), createElementBlock("div", {
                   key: 0,
+                  "data-id": "overlay",
                   class: normalizeClass(_ctx.$style.overlay),
                   onClick: _cache[0] || (_cache[0] = withModifiers(($event) => onClickOutside(), ["stop"]))
                 }, null, 2)) : createCommentVNode("", true)
@@ -151,6 +156,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   key: 0,
                   ref_key: "contentRef",
                   ref: contentRef,
+                  "data-id": "content",
                   style: normalizeStyle(unref(style)),
                   tabindex: "0",
                   class: normalizeClass([_ctx.$style.content, __props.contentClass, { [_ctx.$style.center]: !unref(bottomSheet) }])
@@ -160,7 +166,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               _: 3
             }, 16)
-          ], 16)) : createCommentVNode("", true)
+          ], 16, _hoisted_1)) : createCommentVNode("", true)
         ]))
       ], 16);
     };

package/dist/components/overlays/dialog/RuiDialog.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDialog.vue2.js","sources":["../../../../src/components/overlays/dialog/RuiDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nexport interface DialogProps {\n  modelValue?: boolean;\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n  bottomSheet?: boolean;\n  contentClass?: any;\n  zIndex?: string | number;\n}\n\ndefineOptions({\n  name: 'RuiDialog',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  modelValue: false,\n  persistent: false,\n  width: '98%',\n  bottomSheet: false,\n  contentClass: '',\n  zIndex: 9999,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: boolean): void;\n  (e: 'closed'): void;\n  (e: 'click:outside'): void;\n  (e: 'click:esc'): void;\n}>();\n\nconst {\n  modelValue,\n  width,\n  maxWidth,\n  bottomSheet,\n} = toRefs(props);\n\nconst internalValue = ref<boolean>(false);\nconst isOpen = ref<boolean>(false);\n\nwatchImmediate(modelValue, (value) => {\n  nextTick(() => {\n    set(internalValue, value);\n  });\n});\n\nwatch(internalValue, (value) => {\n  if (value) {\n    nextTick(() => {\n      set(isOpen, value);\n    });\n  }\n  else {\n    setTimeout(() => {\n      set(isOpen, value);\n    }, 100);\n  }\n});\n\nfunction onUpdateModelValue(value: boolean) {\n  emit('update:model-value', value);\n\n  if (!value)\n    emit('closed');\n}\n\nwatch(isOpen, (isOpen) => {\n  if (isOpen) {\n    onUpdateModelValue(isOpen);\n    set(internalValue, isOpen);\n  }\n  else {\n    setTimeout(() => {\n      onUpdateModelValue(isOpen);\n      set(internalValue, isOpen);\n    }, 100);\n  }\n});\n\nfunction close() {\n  set(isOpen, false);\n}\n\nconst style = computed(() => ({\n  width: transformPropsUnit(get(width)),\n  maxWidth: transformPropsUnit(get(maxWidth)),\n}));\n\nconst contentRef = ref<HTMLDivElement>();\n\nwatch(contentRef, (contentRef) => {\n  if (contentRef) {\n    nextTick(() => {\n      contentRef.focus();\n    });\n  }\n});\n\nconst dialogAttrs = computed(() => ({\n  onClick: () => {\n    const newValue = !get(internalValue);\n    set(internalValue, newValue);\n    onUpdateModelValue(newValue);\n  },\n}));\n\nconst contentTransition = computed(() => {\n  if (!get(bottomSheet)) {\n    return {\n      enterFromClass: 'opacity-0 scale-75',\n      enterActiveClass: 'ease-out duration-150',\n      enterToClass: 'opacity-100 scale-100',\n      leaveFromClass: 'opacity-100 scale-100',\n      leaveActiveClass: 'ease-in duration-100',\n      leaveToClass: 'opacity-0 scale-75',\n    };\n  }\n\n  return {\n    enterFromClass: 'translate-y-full',\n    enterActiveClass: 'ease-out duration-150',\n    enterToClass: 'translate-y-0',\n    leaveFromClass: 'translate-y-0',\n    leaveActiveClass: 'ease-in duration-100',\n    leaveToClass: 'translate-y-full',\n  };\n});\n\nfunction onEscClick() {\n  if (!props.persistent) {\n    close();\n  }\n  emit('click:esc');\n}\n\nfunction onClickOutside() {\n  if (!props.persistent) {\n    close();\n  }\n  emit('click:outside');\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <slot\n      name=\"activator\"\n      v-bind=\"{ attrs: dialogAttrs, isOpen }\"\n    />\n    <Teleport to=\"body\">\n      <div\n        v-if=\"isOpen || internalValue\"\n        :class=\"$style.wrapper\"\n        :style=\"{ zIndex }\"\n        role=\"dialog\"\n        tabindex=\"0\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        @keydown.esc.stop=\"onEscClick()\"\n      >\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=\"isOpen && internalValue\"\n            :class=\"$style.overlay\"\n            @click.stop=\"onClickOutside()\"\n          />\n        </Transition>\n        <Transition v-bind=\"contentTransition\">\n          <div\n            v-if=\"isOpen && internalValue\"\n            ref=\"contentRef\"\n            :style=\"style\"\n            tabindex=\"0\"\n            :class=\"[$style.content, contentClass, { [$style.center]: !bottomSheet }]\"\n          >\n            <slot v-bind=\"{ isOpen, close }\" />\n          </div>\n        </Transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.wrapper {\n  @apply fixed w-full h-full top-0 left-0;\n}\n\n.overlay {\n  @apply absolute top-0 left-0 w-full h-full backdrop-blur bg-rui-grey-500/[0.5];\n}\n\n.content {\n  @apply absolute left-1/2 bottom-0 transform -translate-x-1/2 outline-none overflow-y-auto max-h-[90vh];\n\n  &.center {\n    @apply top-1/2 -translate-y-1/2 bottom-auto;\n  }\n}\n\n:global(.dark) {\n  .overlay {\n    @apply bg-black/[0.5];\n  }\n}\n</style>\n"],"names":["isOpen","contentRef","_createElementBlock","_normalizeProps","_guardReactiveProps","getRootAttrs","$attrs","_renderSlot","_unref","_createBlock","_Teleport","_openBlock","_mergeProps","$style","getNonRootAttrs","_createVNode","_Transition","_normalizeClass"],"mappings":"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"}
+{"version":3,"file":"RuiDialog.vue2.js","sources":["../../../../src/components/overlays/dialog/RuiDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getNonRootAttrs, getRootAttrs, transformPropsUnit } from '@/utils/helpers';\n\nexport interface DialogProps {\n  modelValue?: boolean;\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n  bottomSheet?: boolean;\n  contentClass?: any;\n  zIndex?: string | number;\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiDialog',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<DialogProps>(), {\n  modelValue: false,\n  persistent: false,\n  width: '98%',\n  bottomSheet: false,\n  contentClass: '',\n  zIndex: 9999,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: boolean): void;\n  (e: 'closed'): void;\n  (e: 'click:outside'): void;\n  (e: 'click:esc'): void;\n}>();\n\nconst {\n  modelValue,\n  width,\n  maxWidth,\n  bottomSheet,\n} = toRefs(props);\n\nconst internalValue = ref<boolean>(false);\nconst isOpen = ref<boolean>(false);\n\nwatchImmediate(modelValue, (value) => {\n  nextTick(() => {\n    set(internalValue, value);\n  });\n});\n\nwatch(internalValue, (value) => {\n  if (value) {\n    nextTick(() => {\n      set(isOpen, value);\n    });\n  }\n  else {\n    setTimeout(() => {\n      set(isOpen, value);\n    }, 100);\n  }\n});\n\nfunction onUpdateModelValue(value: boolean) {\n  emit('update:model-value', value);\n\n  if (!value)\n    emit('closed');\n}\n\nwatch(isOpen, (isOpen) => {\n  if (isOpen) {\n    onUpdateModelValue(isOpen);\n    set(internalValue, isOpen);\n  }\n  else {\n    setTimeout(() => {\n      onUpdateModelValue(isOpen);\n      set(internalValue, isOpen);\n    }, 100);\n  }\n});\n\nfunction close() {\n  set(isOpen, false);\n}\n\nconst style = computed(() => ({\n  width: transformPropsUnit(get(width)),\n  maxWidth: transformPropsUnit(get(maxWidth)),\n}));\n\nconst contentRef = ref<HTMLDivElement>();\n\nwatch(contentRef, (contentRef) => {\n  if (contentRef) {\n    nextTick(() => {\n      contentRef.focus();\n    });\n  }\n});\n\nconst dialogAttrs = computed(() => ({\n  onClick: () => {\n    const newValue = !get(internalValue);\n    set(internalValue, newValue);\n    onUpdateModelValue(newValue);\n  },\n}));\n\nconst contentTransition = computed(() => {\n  if (!get(bottomSheet)) {\n    return {\n      enterFromClass: 'opacity-0 scale-75',\n      enterActiveClass: 'ease-out duration-150',\n      enterToClass: 'opacity-100 scale-100',\n      leaveFromClass: 'opacity-100 scale-100',\n      leaveActiveClass: 'ease-in duration-100',\n      leaveToClass: 'opacity-0 scale-75',\n    };\n  }\n\n  return {\n    enterFromClass: 'translate-y-full',\n    enterActiveClass: 'ease-out duration-150',\n    enterToClass: 'translate-y-0',\n    leaveFromClass: 'translate-y-0',\n    leaveActiveClass: 'ease-in duration-100',\n    leaveToClass: 'translate-y-full',\n  };\n});\n\nfunction onEscClick() {\n  if (!props.persistent) {\n    close();\n  }\n  emit('click:esc');\n}\n\nfunction onClickOutside() {\n  if (!props.persistent) {\n    close();\n  }\n  emit('click:outside');\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <slot\n      name=\"activator\"\n      v-bind=\"{ attrs: dialogAttrs, isOpen }\"\n    />\n    <Teleport to=\"body\">\n      <div\n        v-if=\"isOpen || internalValue\"\n        :class=\"$style.wrapper\"\n        :style=\"{ zIndex }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"ariaLabel\"\n        tabindex=\"0\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        @keydown.esc.stop=\"onEscClick()\"\n      >\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=\"isOpen && internalValue\"\n            data-id=\"overlay\"\n            :class=\"$style.overlay\"\n            @click.stop=\"onClickOutside()\"\n          />\n        </Transition>\n        <Transition v-bind=\"contentTransition\">\n          <div\n            v-if=\"isOpen && internalValue\"\n            ref=\"contentRef\"\n            data-id=\"content\"\n            :style=\"style\"\n            tabindex=\"0\"\n            :class=\"[$style.content, contentClass, { [$style.center]: !bottomSheet }]\"\n          >\n            <slot v-bind=\"{ isOpen, close }\" />\n          </div>\n        </Transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.wrapper {\n  @apply fixed w-full h-full top-0 left-0;\n}\n\n.overlay {\n  @apply absolute top-0 left-0 w-full h-full backdrop-blur bg-rui-grey-500/[0.5];\n}\n\n.content {\n  @apply absolute left-1/2 bottom-0 transform -translate-x-1/2 outline-none overflow-y-auto max-h-[90vh];\n\n  &.center {\n    @apply top-1/2 -translate-y-1/2 bottom-auto;\n  }\n}\n\n:global(.dark) {\n  .overlay {\n    @apply bg-black/[0.5];\n  }\n}\n</style>\n"],"names":["isOpen","contentRef","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_renderSlot","_createBlock","_Teleport","_openBlock","_mergeProps","$style","_createVNode","_Transition","_normalizeClass"],"mappings":"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"}

package/dist/components/overlays/menu/RuiMenu.vue.d.ts

@@ -38,7 +38,6 @@ declare const __VLS_base: import("vue").DefineComponent<MenuProps, {}, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{
     "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
 }>, {
-    popper: PopperOptions;
     disabled: boolean;
     modelValue: boolean;
     errorMessages: string | string[];
@@ -48,6 +47,7 @@ declare const __VLS_base: import("vue").DefineComponent<MenuProps, {}, {}, {}, {
     fullWidth: boolean;
     openDelay: number;
     closeDelay: number;
+    popper: PopperOptions;
     wrapperClass: string | object | string[];
     menuClass: string | object | string[];
     closeOnContentClick: boolean;

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

@@ -1,10 +1,10 @@
-import { defineComponent, toRefs, ref, watch, computed, createElementBlock, openBlock, withKeys, withModifiers, unref, createElementVNode, createBlock, createCommentVNode, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, Teleport, createVNode, TransitionGroup, withCtx, mergeProps, nextTick } from "vue";
+import { defineComponent, toRefs, ref, watch, computed, openBlock, createElementBlock, withKeys, withModifiers, unref, createElementVNode, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, createBlock, Teleport, createVNode, TransitionGroup, withCtx, mergeProps, createCommentVNode, nextTick } from "vue";
 import _sfc_main$1 from "../../helpers/RuiFormTextDetail.vue.js";
 import { usePopper } from "../../../composables/popper.js";
+import { useFormTextDetail } from "../../../utils/form-text-detail.js";
 import { useElementSize, onClickOutside } from "@vueuse/core";
 import { set, get } from "@vueuse/shared";
-import { useFormTextDetail } from "../../../utils/form-text-detail.js";
-const _hoisted_1 = ["data-menu-disabled"];
+const _hoisted_1 = ["data-menu-disabled", "aria-expanded"];
 const FOCUSABLE_ELEMENTS_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -156,7 +156,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ref_key: "activator",
           ref: activator,
           class: normalizeClass([_ctx.$style.wrapper, __props.wrapperClass, { "w-full": __props.fullWidth }]),
-          "data-menu-disabled": unref(disabled)
+          "data-menu-disabled": unref(disabled),
+          "aria-haspopup": "true",
+          "aria-expanded": unref(open)
         }, [
           renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({ attrs: unref(menuAttrs), open: unref(open), disabled: unref(disabled), hasError: unref(hasError), hasSuccess: unref(hasSuccess) })))
         ], 10, _hoisted_1),

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

@@ -1 +1 @@
-{"version":3,"file":"RuiMenu.vue2.js","sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type PopperOptions, usePopper } from '@/composables/popper';\n\nexport interface MenuProps {\n  modelValue?: boolean;\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  popper?: PopperOptions;\n  wrapperClass?: string | object | string[];\n  menuClass?: string | object | string[];\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  dense?: boolean;\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst props = withDefaults(defineProps<MenuProps>(), {\n  modelValue: false,\n  openOnHover: false,\n  disabled: false,\n  fullWidth: false,\n  openDelay: 0,\n  closeDelay: 0,\n  popper: () => ({}),\n  wrapperClass: '',\n  menuClass: '',\n  closeOnContentClick: false,\n  persistOnActivatorClick: false,\n  hint: undefined,\n  errorMessages: () => [],\n  successMessages: () => [],\n  persistent: false,\n  disableAutoFocus: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: boolean): void;\n}>();\n\nconst {\n  modelValue,\n  closeDelay,\n  openDelay,\n  popper,\n  disabled,\n  persistOnActivatorClick,\n  closeOnContentClick,\n  openOnHover,\n  errorMessages,\n  successMessages,\n  persistent,\n  disableAutoFocus,\n} = toRefs(props);\n\nconst {\n  reference: activator,\n  popper: menu,\n  open,\n  popperEnter,\n  leavePending,\n  onLeavePending,\n  onOpen,\n  onClose,\n  onPopperLeave,\n  updatePopper,\n} = usePopper(popper, disabled, openDelay, closeDelay);\n\nconst { width } = useElementSize(activator);\n\nconst click = ref<boolean>(false);\nconst menuContent = ref<HTMLElement>();\n\nconst FOCUSABLE_ELEMENTS_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusMenu() {\n  if (get(disableAutoFocus))\n    return;\n\n  nextTick(() => {\n    const content = get(menuContent);\n    if (!content)\n      return;\n\n    // Focus on the menu container itself\n    content.focus();\n  });\n}\n\nfunction onLeave(event?: KeyboardEvent) {\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 (!get(disableAutoFocus)) {\n    nextTick(() => {\n      const activatorEl = get(activator);\n      if (activatorEl) {\n        const focusableEl = activatorEl.querySelector<HTMLElement>(\n          FOCUSABLE_ELEMENTS_SELECTOR,\n        );\n        if (focusableEl) {\n          focusableEl.focus();\n        }\n      }\n    });\n  }\n}\n\nfunction checkClick() {\n  if (get(open) && get(click)) {\n    if (!get(persistOnActivatorClick))\n      onLeave();\n  }\n  else {\n    onOpen();\n    set(click, true);\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (value) {\n    onOpen();\n    set(click, true);\n  }\n  else {\n    onLeave();\n  }\n});\n\nwatch(open, (open) => {\n  emit('update:model-value', open);\n  if (open) {\n    focusMenu();\n  }\n});\n\nonClickOutside(menu, () => {\n  if (get(open) && !get(persistent))\n    onLeave();\n}, { ignore: [activator] });\n\nconst baseMenuAttrs = computed(() => {\n  if (get(disabled))\n    return {};\n\n  const openOnHoverVal = get(openOnHover);\n  const clickVal = get(click);\n  return {\n    onMouseover: () => {\n      if (openOnHoverVal)\n        onOpen();\n    },\n    onMouseleave: () => {\n      if (openOnHoverVal && !clickVal)\n        onClose();\n    },\n  };\n});\n\nconst menuAttrs = computed(() => {\n  if (get(disabled))\n    return {};\n\n  return { ...get(baseMenuAttrs), onClick: checkClick };\n});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  errorMessages,\n  successMessages,\n);\n</script>\n\n<template>\n  <div\n    @keydown.esc.stop=\"onLeave()\"\n    @keydown.tab=\"!disableAutoFocus && open ? undefined : null\"\n  >\n    <div\n      ref=\"activator\"\n      :class=\"[$style.wrapper, wrapperClass, { 'w-full': fullWidth }]\"\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=\"popperEnter\"\n        ref=\"menu\"\n        :class=\"[\n          $style.menu,\n          menuClass,\n          $style[`menu__${popper?.strategy ?? 'absolute'}`],\n        ]\"\n        role=\"menu\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc.stop=\"onLeave()\"\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=\"updatePopper()\"\n          @after-leave=\"leavePending ? onPopperLeave() : undefined\"\n          @before-leave=\"onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            role=\"menu-content\"\n            :class=\"$style.base\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <slot v-bind=\"{ width }\" />\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      class=\"pt-1\"\n      :class=\"[dense ? 'px-2' : 'px-4']\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.wrapper {\n  @apply relative inline-flex max-w-full;\n}\n\n.menu {\n  @apply w-max transform transition-opacity delay-0 z-[9999];\n\n  &__fixed {\n    @apply fixed;\n  }\n\n  &__absolute {\n    @apply absolute;\n  }\n\n  .base {\n    @apply rounded overflow-hidden shadow-8;\n    @apply bg-white text-rui-text;\n\n    &:focus {\n      @apply outline-none;\n    }\n  }\n}\n\n:global(.dark) {\n  .menu {\n    .base {\n      @apply bg-[#2E2E2E];\n    }\n  }\n}\n</style>\n"],"names":["open","_createElementBlock","_unref","_createElementVNode","$style","_renderSlot","_normalizeProps","_guardReactiveProps","_createBlock","_Teleport","_normalizeClass","_createVNode","_TransitionGroup","_openBlock","_mergeProps","RuiFormTextDetail"],"mappings":"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"}
+{"version":3,"file":"RuiMenu.vue2.js","sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type PopperOptions, usePopper } from '@/composables/popper';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nexport interface MenuProps {\n  modelValue?: boolean;\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  popper?: PopperOptions;\n  wrapperClass?: string | object | string[];\n  menuClass?: string | object | string[];\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  dense?: boolean;\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst props = withDefaults(defineProps<MenuProps>(), {\n  modelValue: false,\n  openOnHover: false,\n  disabled: false,\n  fullWidth: false,\n  openDelay: 0,\n  closeDelay: 0,\n  popper: () => ({}),\n  wrapperClass: '',\n  menuClass: '',\n  closeOnContentClick: false,\n  persistOnActivatorClick: false,\n  hint: undefined,\n  errorMessages: () => [],\n  successMessages: () => [],\n  persistent: false,\n  disableAutoFocus: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: boolean): void;\n}>();\n\nconst {\n  modelValue,\n  closeDelay,\n  openDelay,\n  popper,\n  disabled,\n  persistOnActivatorClick,\n  closeOnContentClick,\n  openOnHover,\n  errorMessages,\n  successMessages,\n  persistent,\n  disableAutoFocus,\n} = toRefs(props);\n\nconst {\n  reference: activator,\n  popper: menu,\n  open,\n  popperEnter,\n  leavePending,\n  onLeavePending,\n  onOpen,\n  onClose,\n  onPopperLeave,\n  updatePopper,\n} = usePopper(popper, disabled, openDelay, closeDelay);\n\nconst { width } = useElementSize(activator);\n\nconst click = ref<boolean>(false);\nconst menuContent = ref<HTMLElement>();\n\nconst FOCUSABLE_ELEMENTS_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusMenu() {\n  if (get(disableAutoFocus))\n    return;\n\n  nextTick(() => {\n    const content = get(menuContent);\n    if (!content)\n      return;\n\n    // Focus on the menu container itself\n    content.focus();\n  });\n}\n\nfunction onLeave(event?: KeyboardEvent) {\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 (!get(disableAutoFocus)) {\n    nextTick(() => {\n      const activatorEl = get(activator);\n      if (activatorEl) {\n        const focusableEl = activatorEl.querySelector<HTMLElement>(\n          FOCUSABLE_ELEMENTS_SELECTOR,\n        );\n        if (focusableEl) {\n          focusableEl.focus();\n        }\n      }\n    });\n  }\n}\n\nfunction checkClick() {\n  if (get(open) && get(click)) {\n    if (!get(persistOnActivatorClick))\n      onLeave();\n  }\n  else {\n    onOpen();\n    set(click, true);\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (value) {\n    onOpen();\n    set(click, true);\n  }\n  else {\n    onLeave();\n  }\n});\n\nwatch(open, (open) => {\n  emit('update:model-value', open);\n  if (open) {\n    focusMenu();\n  }\n});\n\nonClickOutside(menu, () => {\n  if (get(open) && !get(persistent))\n    onLeave();\n}, { ignore: [activator] });\n\nconst baseMenuAttrs = computed(() => {\n  if (get(disabled))\n    return {};\n\n  const openOnHoverVal = get(openOnHover);\n  const clickVal = get(click);\n  return {\n    onMouseover: () => {\n      if (openOnHoverVal)\n        onOpen();\n    },\n    onMouseleave: () => {\n      if (openOnHoverVal && !clickVal)\n        onClose();\n    },\n  };\n});\n\nconst menuAttrs = computed(() => {\n  if (get(disabled))\n    return {};\n\n  return { ...get(baseMenuAttrs), onClick: checkClick };\n});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  errorMessages,\n  successMessages,\n);\n</script>\n\n<template>\n  <div\n    @keydown.esc.stop=\"onLeave()\"\n    @keydown.tab=\"!disableAutoFocus && open ? undefined : null\"\n  >\n    <div\n      ref=\"activator\"\n      :class=\"[$style.wrapper, wrapperClass, { 'w-full': fullWidth }]\"\n      :data-menu-disabled=\"disabled\"\n      aria-haspopup=\"true\"\n      :aria-expanded=\"open\"\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=\"popperEnter\"\n        ref=\"menu\"\n        :class=\"[\n          $style.menu,\n          menuClass,\n          $style[`menu__${popper?.strategy ?? 'absolute'}`],\n        ]\"\n        role=\"menu\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc.stop=\"onLeave()\"\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=\"updatePopper()\"\n          @after-leave=\"leavePending ? onPopperLeave() : undefined\"\n          @before-leave=\"onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            role=\"menu-content\"\n            :class=\"$style.base\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <slot v-bind=\"{ width }\" />\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      class=\"pt-1\"\n      :class=\"[dense ? 'px-2' : 'px-4']\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.wrapper {\n  @apply relative inline-flex max-w-full;\n}\n\n.menu {\n  @apply w-max transform transition-opacity delay-0 z-[9999];\n\n  &__fixed {\n    @apply fixed;\n  }\n\n  &__absolute {\n    @apply absolute;\n  }\n\n  .base {\n    @apply rounded overflow-hidden shadow-8;\n    @apply bg-white text-rui-text;\n\n    &:focus {\n      @apply outline-none;\n    }\n  }\n}\n\n:global(.dark) {\n  .menu {\n    .base {\n      @apply bg-[#2E2E2E];\n    }\n  }\n}\n</style>\n"],"names":["open","_createElementBlock","_unref","_createElementVNode","$style","_renderSlot","_normalizeProps","_guardReactiveProps","_createBlock","_Teleport","_normalizeClass","_createVNode","_TransitionGroup","_openBlock","_mergeProps","RuiFormTextDetail"],"mappings":";;;;;;;AAsFA,MAAM,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAxDpC,UAAM,QAAQ;AAmBd,UAAM,OAAO;AAIb,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,OAAO,KAAK;AAEhB,UAAM;AAAA,MACJ,WAAW;AAAA,MACX,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,UAAU,QAAQ,UAAU,WAAW,UAAU;AAErD,UAAM,EAAE,MAAA,IAAU,eAAe,SAAS;AAE1C,UAAM,QAAQ,IAAa,KAAK;AAChC,UAAM,cAAc,IAAA;AAIpB,aAAS,YAAY;AACnB,UAAI,IAAI,gBAAgB;AACtB;AAEF,eAAS,MAAM;AACb,cAAM,UAAU,IAAI,WAAW;AAC/B,YAAI,CAAC;AACH;AAGF,gBAAQ,MAAA;AAAA,MACV,CAAC;AAAA,IACH;AAEA,aAAS,QAAQ,OAAuB;AACtC,UAAI,CAAC,IAAI,IAAI;AACX;AACF,cAAA;AACA,UAAI,OAAO,KAAK;AAIhB,UAAI,CAAC,IAAI,gBAAgB,GAAG;AAC1B,iBAAS,MAAM;AACb,gBAAM,cAAc,IAAI,SAAS;AACjC,cAAI,aAAa;AACf,kBAAM,cAAc,YAAY;AAAA,cAC9B;AAAA,YAAA;AAEF,gBAAI,aAAa;AACf,0BAAY,MAAA;AAAA,YACd;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAEA,aAAS,aAAa;AACpB,UAAI,IAAI,IAAI,KAAK,IAAI,KAAK,GAAG;AAC3B,YAAI,CAAC,IAAI,uBAAuB;AAC9B,kBAAA;AAAA,MACJ,OACK;AACH,eAAA;AACA,YAAI,OAAO,IAAI;AAAA,MACjB;AAAA,IACF;AAEA,UAAM,YAAY,CAAC,UAAU;AAC3B,UAAI,OAAO;AACT,eAAA;AACA,YAAI,OAAO,IAAI;AAAA,MACjB,OACK;AACH,gBAAA;AAAA,MACF;AAAA,IACF,CAAC;AAED,UAAM,MAAM,CAACA,UAAS;AACpB,WAAK,sBAAsBA,KAAI;AAC/B,UAAIA,OAAM;AACR,kBAAA;AAAA,MACF;AAAA,IACF,CAAC;AAED,mBAAe,MAAM,MAAM;AACzB,UAAI,IAAI,IAAI,KAAK,CAAC,IAAI,UAAU;AAC9B,gBAAA;AAAA,IACJ,GAAG,EAAE,QAAQ,CAAC,SAAS,GAAG;AAE1B,UAAM,gBAAgB,SAAS,MAAM;AACnC,UAAI,IAAI,QAAQ;AACd,eAAO,CAAA;AAET,YAAM,iBAAiB,IAAI,WAAW;AACtC,YAAM,WAAW,IAAI,KAAK;AAC1B,aAAO;AAAA,QACL,aAAa,MAAM;AACjB,cAAI;AACF,mBAAA;AAAA,QACJ;AAAA,QACA,cAAc,MAAM;AAClB,cAAI,kBAAkB,CAAC;AACrB,oBAAA;AAAA,QACJ;AAAA,MAAA;AAAA,IAEJ,CAAC;AAED,UAAM,YAAY,SAAS,MAAM;AAC/B,UAAI,IAAI,QAAQ;AACd,eAAO,CAAA;AAET,aAAO,EAAE,GAAG,IAAI,aAAa,GAAG,SAAS,WAAA;AAAA,IAC3C,CAAC;AAED,UAAM,EAAE,UAAU,WAAA,IAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IAAA;;0BAKAC,mBAiEM,OAAA;AAAA,QAhEH,WAAO;AAAA,uEAAW,QAAA,GAAO,CAAA,MAAA,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA,0DACXC,MAAA,gBAAA,KAAoBA,MAAA,IAAA,IAAO,SAAS,MAAA,CAAA,KAAA,CAAA;AAAA,QAAA;AAAA;QAEnDC,mBAWM,OAAA;AAAA,mBAVA;AAAA,UAAJ,KAAI;AAAA,UACH,uBAAQC,KAAAA,OAAO,SAAS,QAAA,0BAA0B,QAAA,UAAA,CAAS,CAAA;AAAA,UAC3D,sBAAoBF,MAAA,QAAA;AAAA,UACrB,iBAAc;AAAA,UACb,iBAAeA,MAAA,IAAA;AAAA,QAAA;UAEhBG,WAGE,KAAA,QAAA,aAAAC,eAAAC,mBAAA,EAAA,OADiBL,kBAAS,MAAEA,MAAA,IAAA,aAAMA,MAAA,QAAA,GAAQ,UAAEA,MAAA,QAAA,GAAQ,YAAEA,MAAA,UAAA,EAAA,CAAU,CAAA,CAAA;AAAA,QAAA;SAI3DA,MAAA,QAAA,kBADTM,YAwCWC,UAAA;AAAA;UAtCT,IAAG;AAAA,QAAA;UAGKP,MAAA,WAAA,kBADRD,mBAmCM,OAAA;AAAA;qBAjCA;AAAA,YAAJ,KAAI;AAAA,YACH,OAAKS,eAAA;AAAA,cAAcN,KAAAA,OAAO;AAAA,cAAgB,QAAA;AAAA,cAAqBA,KAAAA,OAAM,SAAUF,MAAA,MAAA,GAAQ,YAAQ,UAAA,EAAA;AAAA,YAAA;YAKhG,MAAK;AAAA,YACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEA,MAAA,mBAAA,IAAsB,YAAY;AAAA,YACzC,wEAAkB,QAAA,GAAO,CAAA,MAAA,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA,UAAA;YAE1BS,YAsBkBC,iBAAA;AAAA,cArBhB,sBAAmB;AAAA,cACnB,oBAAiB;AAAA,cACjB,kBAAe;AAAA,cACf,sBAAmB;AAAA,cACnB,oBAAiB;AAAA,cACjB,kBAAe;AAAA,cACd,qDAAcV,MAAA,YAAA;cACd,cAAW,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEA,MAAA,YAAA,IAAeA,MAAA,aAAA,MAAkB;AAAA,cAC9C,qDAAcA,MAAA,cAAA,EAAA;AAAA,YAAc;+BAE7B,MAUM;AAAA,gBATEA,MAAA,IAAA,KADRW,aAAAZ,mBAUM,OAVNa,WAUM;AAAA,2BARA;AAAA,kBAAJ,KAAI;AAAA,kBACJ,KAAI;AAAA,kBACJ,MAAK;AAAA,kBACJ,OAAOV,KAAAA,OAAO;AAAA,kBACf,UAAS;AAAA,gBAAA,GACDF,MAAA,aAAA,CAAa,GAAA;AAAA,kBAErBG,WAA2B,mEAAXH,MAAA,KAAA,EAAA,CAAK,CAAA,CAAA;AAAA,gBAAA;;;;;;QAMrB,QAAA,4BADRM,YAOEO,aAAA;AAAA;UALA,OAAKL,eAAA,CAAC,QAAM,CACH,QAAA,QAAK,SAAA,MAAA,CAAA,CAAA;AAAA,UACb,kBAAgBR,MAAA,aAAA;AAAA,UAChB,oBAAkBA,MAAA,eAAA;AAAA,UAClB,MAAM,QAAA;AAAA,QAAA;;;;;"}

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

@@ -7,6 +7,7 @@ export interface NavigationDrawerProps {
     overlay?: boolean;
     position?: 'left' | 'right';
     contentClass?: string | object | string[];
+    ariaLabel?: string;
 }
 declare function close(): void;
 declare var __VLS_1: {
@@ -26,14 +27,14 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<NavigationDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    closed: () => any;
     "update:model-value": (value: boolean) => any;
+    closed: () => any;
 }, string, import("vue").PublicProps, Readonly<NavigationDrawerProps> & Readonly<{
-    onClosed?: (() => any) | undefined;
     "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
+    onClosed?: (() => any) | undefined;
 }>, {
-    width: string | number;
     modelValue: boolean;
+    width: string | number;
     contentClass: string | object | string[];
     overlay: boolean;
     position: "left" | "right";

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

@@ -1,7 +1,8 @@
-import { defineComponent, toRefs, ref, nextTick, watch, computed, createElementBlock, openBlock, renderSlot, createBlock, normalizeProps, guardReactiveProps, unref, Teleport, createCommentVNode, Transition, withCtx, withModifiers, normalizeClass, mergeProps } from "vue";
+import { defineComponent, toRefs, ref, nextTick, watch, computed, openBlock, createElementBlock, renderSlot, normalizeProps, guardReactiveProps, unref, createBlock, Teleport, Transition, withCtx, withModifiers, normalizeClass, createCommentVNode, mergeProps } from "vue";
 import { transformPropsUnit, getRootAttrs } from "../../../utils/helpers.js";
 import { watchImmediate, onClickOutside } from "@vueuse/core";
 import { set, get } from "@vueuse/shared";
+const _hoisted_1 = ["aria-label", "aria-hidden"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiNavigationDrawer",
@@ -16,7 +17,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     miniVariant: { type: Boolean, default: false },
     overlay: { type: Boolean, default: false },
     position: { default: "left" },
-    contentClass: { default: "" }
+    contentClass: { default: "" },
+    ariaLabel: {}
   },
   emits: ["update:model-value", "closed"],
   setup(__props, { emit: __emit }) {
@@ -99,6 +101,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               isOpen.value && internalValue.value ? (openBlock(), createElementBlock("div", {
                 key: 0,
+                "data-id": "overlay",
                 class: normalizeClass(_ctx.$style.overlay),
                 onClick: _cache[0] || (_cache[0] = withModifiers(($event) => close(), ["stop"]))
               }, null, 2)) : createCommentVNode("", true)
@@ -120,10 +123,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 [_ctx.$style.temporary]: __props.temporary,
                 [_ctx.$style["with-overlay"]]: __props.overlay
               }
-            ]
+            ],
+            "aria-label": __props.ariaLabel,
+            "aria-hidden": unref(miniVariant) && !(isOpen.value && internalValue.value) ? "true" : void 0
           }, unref(getRootAttrs)(_ctx.$attrs)), [
             renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ attrs: unref(activatorAttrs), close })))
-          ], 16)) : createCommentVNode("", true)
+          ], 16, _hoisted_1)) : createCommentVNode("", true)
         ]))
       ]);
     };

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

@@ -1 +1 @@
-{"version":3,"file":"RuiNavigationDrawer.vue2.js","sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang='ts'>\nimport type { MaybeElement } from '@vueuse/core';\nimport { type Ref, ref } from 'vue';\nimport { getRootAttrs } from '@/utils/helpers';\n\nexport interface NavigationDrawerProps {\n  modelValue?: boolean;\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  contentClass?: string | object | string[];\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<NavigationDrawerProps>(), {\n  modelValue: false,\n  temporary: false,\n  stateless: false,\n  width: 360,\n  miniVariant: false,\n  overlay: false,\n  position: 'left',\n  contentClass: '',\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: boolean): void;\n  (e: 'closed'): void;\n}>();\n\nconst {\n  modelValue,\n  position,\n  miniVariant,\n  width,\n} = toRefs(props);\n\nfunction onUpdateModelValue(value: boolean): void {\n  emit('update:model-value', value);\n\n  if (!value)\n    emit('closed');\n}\n\nconst internalValue = ref<boolean>(false);\nconst isOpen = ref<boolean>(false);\n\nwatchImmediate(modelValue, (value) => {\n  nextTick(() => {\n    set(internalValue, value);\n  });\n});\n\nwatch(internalValue, (value) => {\n  if (value) {\n    window.requestAnimationFrame(() => {\n      set(isOpen, value);\n    });\n  }\n  else {\n    setTimeout(() => {\n      set(isOpen, value);\n    }, 150);\n  }\n});\n\nwatch(isOpen, (isOpen) => {\n  if (isOpen) {\n    onUpdateModelValue(isOpen);\n    set(internalValue, isOpen);\n  }\n  else {\n    setTimeout(() => {\n      onUpdateModelValue(isOpen);\n      set(internalValue, isOpen);\n    }, 150);\n  }\n});\n\nfunction close(): void {\n  set(isOpen, false);\n}\n\nconst style = computed(() => ({\n  width: transformPropsUnit(get(width)),\n}));\n\nconst content: Ref<MaybeElement | null> = ref(null);\n\nonClickOutside(content, () => {\n  if (get(isOpen) && props.temporary && !props.stateless) {\n    setTimeout(() => {\n      close();\n    }, 50);\n  }\n});\n\nconst activatorAttrs = computed(() => ({\n  onClick: () => {\n    const newValue = !get(internalValue);\n    set(internalValue, newValue);\n    onUpdateModelValue(newValue);\n  },\n}));\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: internalValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\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-150\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"isOpen && internalValue\"\n          :class=\"$style.overlay\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"isOpen || internalValue || miniVariant\"\n        ref=\"content\"\n        :style=\"style\"\n        :class=\"[\n          $style.content,\n          contentClass,\n          {\n            [$style.visible]: isOpen && internalValue,\n            [$style[position]]: position,\n            [$style.mini]: miniVariant,\n            [$style.temporary]: temporary,\n            [$style['with-overlay']]: overlay,\n          },\n        ]\"\n        v-bind=\"getRootAttrs($attrs)\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.overlay {\n  @apply absolute top-0 left-0 w-full h-full backdrop-blur bg-rui-grey-500/[0.5] z-[10000];\n}\n\n.content {\n  @apply transition-all duration-150 ease-in-out top-0 h-full fixed text-rui-text bg-white z-[7];\n\n  &.left {\n    @apply -translate-x-full left-0;\n  }\n\n  &.right {\n    @apply translate-x-full right-0;\n  }\n\n  &.with-overlay {\n    @apply z-[10000];\n  }\n\n  &.visible {\n    @apply translate-x-0;\n  }\n\n  &.temporary {\n    &.visible {\n      @apply shadow-5;\n    }\n  }\n\n  &.mini {\n    @apply translate-x-0;\n\n    &:not(.visible) {\n      @apply w-14 #{!important};\n    }\n  }\n}\n\n:global(.dark) {\n  .overlay {\n    @apply bg-black/[0.5];\n  }\n\n  .content {\n    @apply bg-[#363636];\n  }\n}\n</style>\n"],"names":["isOpen","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_unref","_createBlock","_Teleport","_Transition","_normalizeClass","$style","_openBlock","_mergeProps","$attrs"],"mappings":"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"}
+{"version":3,"file":"RuiNavigationDrawer.vue2.js","sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang='ts'>\nimport type { MaybeElement } from '@vueuse/core';\nimport { type Ref, ref } from 'vue';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\n\nexport interface NavigationDrawerProps {\n  modelValue?: boolean;\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  contentClass?: string | object | string[];\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<NavigationDrawerProps>(), {\n  modelValue: false,\n  temporary: false,\n  stateless: false,\n  width: 360,\n  miniVariant: false,\n  overlay: false,\n  position: 'left',\n  contentClass: '',\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: boolean): void;\n  (e: 'closed'): void;\n}>();\n\nconst {\n  modelValue,\n  position,\n  miniVariant,\n  width,\n} = toRefs(props);\n\nfunction onUpdateModelValue(value: boolean): void {\n  emit('update:model-value', value);\n\n  if (!value)\n    emit('closed');\n}\n\nconst internalValue = ref<boolean>(false);\nconst isOpen = ref<boolean>(false);\n\nwatchImmediate(modelValue, (value) => {\n  nextTick(() => {\n    set(internalValue, value);\n  });\n});\n\nwatch(internalValue, (value) => {\n  if (value) {\n    window.requestAnimationFrame(() => {\n      set(isOpen, value);\n    });\n  }\n  else {\n    setTimeout(() => {\n      set(isOpen, value);\n    }, 150);\n  }\n});\n\nwatch(isOpen, (isOpen) => {\n  if (isOpen) {\n    onUpdateModelValue(isOpen);\n    set(internalValue, isOpen);\n  }\n  else {\n    setTimeout(() => {\n      onUpdateModelValue(isOpen);\n      set(internalValue, isOpen);\n    }, 150);\n  }\n});\n\nfunction close(): void {\n  set(isOpen, false);\n}\n\nconst style = computed(() => ({\n  width: transformPropsUnit(get(width)),\n}));\n\nconst content: Ref<MaybeElement | null> = ref(null);\n\nonClickOutside(content, () => {\n  if (get(isOpen) && props.temporary && !props.stateless) {\n    setTimeout(() => {\n      close();\n    }, 50);\n  }\n});\n\nconst activatorAttrs = computed(() => ({\n  onClick: () => {\n    const newValue = !get(internalValue);\n    set(internalValue, newValue);\n    onUpdateModelValue(newValue);\n  },\n}));\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: internalValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\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-150\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"isOpen && internalValue\"\n          data-id=\"overlay\"\n          :class=\"$style.overlay\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"isOpen || internalValue || miniVariant\"\n        ref=\"content\"\n        :style=\"style\"\n        :class=\"[\n          $style.content,\n          contentClass,\n          {\n            [$style.visible]: isOpen && internalValue,\n            [$style[position]]: position,\n            [$style.mini]: miniVariant,\n            [$style.temporary]: temporary,\n            [$style['with-overlay']]: overlay,\n          },\n        ]\"\n        :aria-label=\"ariaLabel\"\n        :aria-hidden=\"miniVariant && !(isOpen && internalValue) ? 'true' : undefined\"\n        v-bind=\"getRootAttrs($attrs)\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.overlay {\n  @apply absolute top-0 left-0 w-full h-full backdrop-blur bg-rui-grey-500/[0.5] z-[10000];\n}\n\n.content {\n  @apply transition-all duration-150 ease-in-out top-0 h-full fixed text-rui-text bg-white z-[7];\n\n  &.left {\n    @apply -translate-x-full left-0;\n  }\n\n  &.right {\n    @apply translate-x-full right-0;\n  }\n\n  &.with-overlay {\n    @apply z-[10000];\n  }\n\n  &.visible {\n    @apply translate-x-0;\n  }\n\n  &.temporary {\n    &.visible {\n      @apply shadow-5;\n    }\n  }\n\n  &.mini {\n    @apply translate-x-0;\n\n    &:not(.visible) {\n      @apply w-14 #{!important};\n    }\n  }\n}\n\n:global(.dark) {\n  .overlay {\n    @apply bg-black/[0.5];\n  }\n\n  .content {\n    @apply bg-[#363636];\n  }\n}\n</style>\n"],"names":["isOpen","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_unref","_createBlock","_Teleport","_Transition","_normalizeClass","$style","_openBlock","_mergeProps","$attrs"],"mappings":"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"}

package/dist/components/overlays/notification/RuiNotification.vue.d.ts

@@ -13,8 +13,8 @@ declare const __VLS_base: import("vue").DefineComponent<NotificationProps, {}, {
 }, string, import("vue").PublicProps, Readonly<NotificationProps> & Readonly<{
     "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
 }>, {
-    width: number | string;
     theme: "light" | "dark";
+    width: number | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, computed, createBlock, openBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, createCommentVNode, unref, mergeProps, renderSlot } from "vue";
+import { defineComponent, toRefs, computed, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, unref, createElementBlock, mergeProps, renderSlot, createCommentVNode } from "vue";
 import { transformPropsUnit } from "../../../utils/helpers.js";
 import { get } from "@vueuse/shared";
 import { watchImmediate } from "@vueuse/core";
@@ -50,6 +50,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             unref(modelValue) ? (openBlock(), createElementBlock("div", mergeProps({
               key: 0,
+              role: "alert",
+              "aria-live": "polite",
               class: ["top-2 right-2 fixed drop-shadow-lg rounded-sm z-50", {
                 "bg-white dark:bg-[#363636]": !__props.theme,
                 "bg-white text-rui-light-text": __props.theme === "light",

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

@@ -1 +1 @@
-{"version":3,"file":"RuiNotification.vue.js","sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang='ts' setup>\nexport interface NotificationProps {\n  modelValue: boolean;\n  timeout: number;\n  width?: number | string;\n  theme?: 'light' | 'dark';\n}\n\ndefineOptions({\n  name: 'RuiNotification',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<NotificationProps>(),\n  {\n    width: 400,\n    theme: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: boolean): void;\n}>();\n\nconst { timeout, modelValue, width } = toRefs(props);\n\nconst style = computed(() => ({\n  width: transformPropsUnit(get(width)),\n}));\n\nfunction dismiss() {\n  if (get(timeout) < 0)\n    return;\n\n  emit('update:model-value', false);\n}\n\nwatchImmediate(modelValue, (display) => {\n  if (!display)\n    return;\n\n  const duration = get(timeout);\n  if (duration > 0) {\n    setTimeout(() => {\n      emit('update:model-value', false);\n    }, duration);\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        class=\"top-2 right-2 fixed drop-shadow-lg rounded-sm z-50\"\n        :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\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"names":["_createBlock","_Teleport","_createVNode","_Transition","_unref","_openBlock","_createElementBlock","_mergeProps","$attrs","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;AAaA,UAAM,QAAQ;AAQd,UAAM,OAAO;AAIb,UAAM,EAAE,SAAS,YAAY,MAAA,IAAU,OAAO,KAAK;AAEnD,UAAM,QAAQ,SAAS,OAAO;AAAA,MAC5B,OAAO,mBAAmB,IAAI,KAAK,CAAC;AAAA,IAAA,EACpC;AAEF,aAAS,UAAU;AACjB,UAAI,IAAI,OAAO,IAAI;AACjB;AAEF,WAAK,sBAAsB,KAAK;AAAA,IAClC;AAEA,mBAAe,YAAY,CAAC,YAAY;AACtC,UAAI,CAAC;AACH;AAEF,YAAM,WAAW,IAAI,OAAO;AAC5B,UAAI,WAAW,GAAG;AAChB,mBAAW,MAAM;AACf,eAAK,sBAAsB,KAAK;AAAA,QAClC,GAAG,QAAQ;AAAA,MACb;AAAA,IACF,CAAC;;0BAICA,YAwBWC,UAAA,EAxBD,IAAG,UAAM;AAAA,QACjBC,YAsBaC,YAAA;AAAA,UArBX,oBAAiB;AAAA,UACjB,sBAAmB;AAAA,UACnB,kBAAe;AAAA,UACf,oBAAiB;AAAA,UACjB,sBAAmB;AAAA,UACnB,kBAAe;AAAA,QAAA;2BAEf,MAaM;AAAA,YAZEC,MAAA,UAAA,KADRC,aAAAC,mBAaM,OAbNC,WAaM;AAAA;cAXJ,QAAM,sDAAoD;AAAA,+CACP,QAAA;AAAA,gDAAiD,QAAA,UAAK;AAAA,mDAA2D,QAAA,UAAK;AAAA,cAAA;cAKxK,OAAOH,MAAA,KAAA;AAAA,YAAA,GACAI,KAAAA,QAAM;AAAA,cACb,+CAAO,QAAA;AAAA,YAAO;cAEfC,WAAQ,KAAA,QAAA,SAAA;AAAA,YAAA;;;;;;;;"}
+{"version":3,"file":"RuiNotification.vue.js","sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang='ts' setup>\nimport { transformPropsUnit } from '@/utils/helpers';\n\nexport interface NotificationProps {\n  modelValue: boolean;\n  timeout: number;\n  width?: number | string;\n  theme?: 'light' | 'dark';\n}\n\ndefineOptions({\n  name: 'RuiNotification',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<NotificationProps>(),\n  {\n    width: 400,\n    theme: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: boolean): void;\n}>();\n\nconst { timeout, modelValue, width } = toRefs(props);\n\nconst style = computed(() => ({\n  width: transformPropsUnit(get(width)),\n}));\n\nfunction dismiss() {\n  if (get(timeout) < 0)\n    return;\n\n  emit('update:model-value', false);\n}\n\nwatchImmediate(modelValue, (display) => {\n  if (!display)\n    return;\n\n  const duration = get(timeout);\n  if (duration > 0) {\n    setTimeout(() => {\n      emit('update:model-value', false);\n    }, duration);\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=\"top-2 right-2 fixed drop-shadow-lg rounded-sm z-50\"\n        :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\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"names":["_createBlock","_Teleport","_createVNode","_Transition","_unref","_openBlock","_createElementBlock","_mergeProps","$attrs","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;AAeA,UAAM,QAAQ;AAQd,UAAM,OAAO;AAIb,UAAM,EAAE,SAAS,YAAY,MAAA,IAAU,OAAO,KAAK;AAEnD,UAAM,QAAQ,SAAS,OAAO;AAAA,MAC5B,OAAO,mBAAmB,IAAI,KAAK,CAAC;AAAA,IAAA,EACpC;AAEF,aAAS,UAAU;AACjB,UAAI,IAAI,OAAO,IAAI;AACjB;AAEF,WAAK,sBAAsB,KAAK;AAAA,IAClC;AAEA,mBAAe,YAAY,CAAC,YAAY;AACtC,UAAI,CAAC;AACH;AAEF,YAAM,WAAW,IAAI,OAAO;AAC5B,UAAI,WAAW,GAAG;AAChB,mBAAW,MAAM;AACf,eAAK,sBAAsB,KAAK;AAAA,QAClC,GAAG,QAAQ;AAAA,MACb;AAAA,IACF,CAAC;;0BAICA,YA0BWC,UAAA,EA1BD,IAAG,UAAM;AAAA,QACjBC,YAwBaC,YAAA;AAAA,UAvBX,oBAAiB;AAAA,UACjB,sBAAmB;AAAA,UACnB,kBAAe;AAAA,UACf,oBAAiB;AAAA,UACjB,sBAAmB;AAAA,UACnB,kBAAe;AAAA,QAAA;2BAEf,MAeM;AAAA,YAdEC,MAAA,UAAA,KADRC,aAAAC,mBAeM,OAfNC,WAeM;AAAA;cAbJ,MAAK;AAAA,cACL,aAAU;AAAA,cACV,QAAM,sDAAoD;AAAA,+CACP,QAAA;AAAA,gDAAiD,QAAA,UAAK;AAAA,mDAA2D,QAAA,UAAK;AAAA,cAAA;cAKxK,OAAOH,MAAA,KAAA;AAAA,YAAA,GACAI,KAAAA,QAAM;AAAA,cACb,+CAAO,QAAA;AAAA,YAAO;cAEfC,WAAQ,KAAA,QAAA,SAAA;AAAA,YAAA;;;;;;;;"}

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

@@ -22,11 +22,11 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {
     onOpen: (immediate?: boolean) => void;
     onClose: (immediate?: boolean) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    popper: PopperOptions;
     text: string | null;
     disabled: boolean;
     openDelay: number;
     closeDelay: number;
+    popper: PopperOptions;
     hideArrow: boolean;
     persistOnTooltipHover: boolean;
     tooltipClass: string;

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

@@ -1,6 +1,7 @@
-import { defineComponent, toRefs, createElementBlock, openBlock, unref, normalizeClass, renderSlot, createBlock, createCommentVNode, Teleport, createVNode, TransitionGroup, withCtx, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, toRefs, useId, openBlock, createElementBlock, unref, normalizeClass, renderSlot, createBlock, Teleport, createVNode, TransitionGroup, withCtx, createTextVNode, toDisplayString, createCommentVNode } from "vue";
 import { usePopper } from "../../../composables/popper.js";
-const _hoisted_1 = ["data-tooltip-disabled"];
+const _hoisted_1 = ["data-tooltip-disabled", "aria-describedby"];
+const _hoisted_2 = ["id"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiTooltip"
@@ -19,6 +20,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     const props = __props;
     const { closeDelay, openDelay, popper, disabled } = toRefs(props);
+    const tooltipId = useId();
     const {
       reference: activator,
       popper: tooltip,
@@ -39,6 +41,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref: activator,
         class: normalizeClass(_ctx.$style.wrapper),
         "data-tooltip-disabled": unref(disabled),
+        "aria-describedby": !unref(disabled) && unref(open) ? unref(tooltipId) : void 0,
         onMouseover: _cache[4] || (_cache[4] = ($event) => unref(onOpen)()),
         onMouseleave: _cache[5] || (_cache[5] = ($event) => unref(onClose)()),
         onFocusin: _cache[6] || (_cache[6] = ($event) => unref(onOpen)()),
@@ -54,6 +57,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, [
           unref(popperEnter) ? (openBlock(), createElementBlock("div", {
             key: 0,
+            id: unref(tooltipId),
             ref_key: "tooltip",
             ref: tooltip,
             class: normalizeClass([
@@ -93,7 +97,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               _: 3
             })
-          ], 2)) : createCommentVNode("", true)
+          ], 10, _hoisted_2)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
       ], 42, _hoisted_1);
     };

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTooltip.vue2.js","sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { type PopperOptions, usePopper } from '@/composables/popper';\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  popper?: PopperOptions;\n  tooltipClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  text: null,\n  disabled: false,\n  hideArrow: false,\n  openDelay: 0,\n  closeDelay: 500,\n  persistOnTooltipHover: false,\n  popper: () => ({}),\n  tooltipClass: '',\n});\n\nconst { closeDelay, openDelay, popper, disabled } = toRefs(props);\n\nconst {\n  reference: activator,\n  popper: tooltip,\n  open,\n  popperEnter,\n  onOpen,\n  onClose,\n  onPopperLeave,\n  updatePopper,\n} = usePopper(popper, disabled, openDelay, closeDelay);\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    :class=\"$style.wrapper\"\n    :data-tooltip-disabled=\"disabled\"\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=\"popperEnter\"\n        ref=\"tooltip\"\n        :class=\"[\n          $style.tooltip,\n          tooltipClass,\n          $style[`tooltip__${popper?.strategy ?? 'absolute'}`],\n        ]\"\n        role=\"tooltip\"\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=\"updatePopper()\"\n          @after-leave=\"onPopperLeave()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            :class=\"$style.base\"\n            role=\"tooltip-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            :class=\"[$style.arrow, { [$style.arrow__open ?? '']: open }]\"\n            data-popper-arrow\n          />\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n$arrowSize: 0.625rem;\n.wrapper {\n  @apply relative inline-flex;\n}\n\n.tooltip {\n  @apply w-max transform transition-opacity delay-0 z-[9999];\n\n  &__fixed {\n    @apply fixed;\n  }\n\n  &__absolute {\n    @apply absolute;\n  }\n\n  .base {\n    @apply px-2 py-1 text-xs font-normal;\n    @apply bg-rui-grey-700/90 text-white rounded shadow;\n  }\n\n  .arrow {\n    @apply w-2.5 h-2.5 transition-opacity opacity-0;\n\n    &__open {\n      @apply opacity-100;\n    }\n\n    &::before {\n      @apply block border-[0.3125rem] origin-center;\n      @apply border-l-transparent border-b-transparent border-t-rui-grey-700/90 border-r-rui-grey-700/90;\n\n      content: '';\n      border-radius: 0 0.125rem 0 0;\n    }\n  }\n\n  &[data-popper-placement*='bottom'] .arrow {\n    top: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply -rotate-45;\n    }\n  }\n\n  &[data-popper-placement*='top'] .arrow {\n    bottom: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply rotate-[135deg];\n    }\n  }\n\n  &[data-popper-placement*='left'] .arrow {\n    right: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply rotate-45;\n    }\n  }\n\n  &[data-popper-placement*='right'] .arrow {\n    left: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply -rotate-[135deg];\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_unref","_renderSlot","_createBlock","_Teleport","_createVNode","_TransitionGroup"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,UAAM,QAAQ;AAWd,UAAM,EAAE,YAAY,WAAW,QAAQ,SAAA,IAAa,OAAO,KAAK;AAEhE,UAAM;AAAA,MACJ,WAAW;AAAA,MACX,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,UAAU,QAAQ,UAAU,WAAW,UAAU;AAErD,aAAa;AAAA,MACX;AAAA,MACA;AAAA,IAAA,CACD;;0BAICA,mBA2DM,OAAA;AAAA,iBA1DA;AAAA,QAAJ,KAAI;AAAA,QACH,OAAKC,eAAEC,KAAAA,OAAO,OAAO;AAAA,QACrB,yBAAuBC,MAAA,QAAA;AAAA,QACvB,mDAAWA,MAAA,MAAA;QACX,oDAAYA,MAAA,OAAA;QACZ,iDAASA,MAAA,MAAA;QACT,kDAAUA,MAAA,OAAA,EAAA;AAAA,MAAO;QAElBC,WAIE,KAAA,QAAA,aAAA;AAAA,UAFC,MAAMD,MAAA,IAAA;AAAA,UACN,OAAOA,MAAA,OAAA;AAAA,QAAA;SAIDA,MAAA,QAAA,kBADTE,YA2CWC,UAAA;AAAA;UAzCT,IAAG;AAAA,QAAA;UAGKH,MAAA,WAAA,kBADRH,mBAsCM,OAAA;AAAA;qBApCA;AAAA,YAAJ,KAAI;AAAA,YACH,OAAKC,eAAA;AAAA,cAAcC,KAAAA,OAAO;AAAA,cAAmB,QAAA;AAAA,cAAwBA,KAAAA,OAAM,YAAaC,MAAA,MAAA,GAAQ,YAAQ,UAAA,EAAA;AAAA,YAAA;YAKzG,MAAK;AAAA,UAAA;YAELI,YA2BkBC,iBAAA;AAAA,cA1BhB,sBAAmB;AAAA,cACnB,oBAAiB;AAAA,cACjB,kBAAe;AAAA,cACf,sBAAmB;AAAA,cACnB,oBAAiB;AAAA,cACjB,kBAAe;AAAA,cACd,qDAAcL,MAAA,YAAA;cACd,oDAAaA,MAAA,aAAA,EAAA;AAAA,YAAa;+BAE3B,MAWM;AAAA,gBAVEA,MAAA,IAAA,kBADRH,mBAWM,OAAA;AAAA,kBATJ,KAAI;AAAA,kBACH,OAAKC,eAAEC,KAAAA,OAAO,IAAI;AAAA,kBACnB,MAAK;AAAA,kBACJ,aAAS,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,QAAA,yBAAyBC,MAAA,MAAA,EAAA;AAAA,kBACpC,cAAU,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,QAAA,yBAAyBA,MAAA,OAAA,EAAA;AAAA,gBAAO;kBAE7CC,WAEO,4BAFP,MAEO;AAAA,oDADF,QAAA,IAAI,GAAA,CAAA;AAAA,kBAAA;;iBAIF,QAAA,0BADTJ,mBAIE,QAAA;AAAA;kBAFC,OAAKC,eAAA,CAAGC,YAAO,UAAUA,KAAAA,OAAO,eAAW,EAAA,GAASC,MAAA,IAAA,EAAA,CAAI,CAAA;AAAA,kBACzD,qBAAA;AAAA,gBAAA;;;;;;;;;;"}
+{"version":3,"file":"RuiTooltip.vue2.js","sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { type PopperOptions, usePopper } from '@/composables/popper';\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  popper?: PopperOptions;\n  tooltipClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  text: null,\n  disabled: false,\n  hideArrow: false,\n  openDelay: 0,\n  closeDelay: 500,\n  persistOnTooltipHover: false,\n  popper: () => ({}),\n  tooltipClass: '',\n});\n\nconst { closeDelay, openDelay, popper, disabled } = toRefs(props);\n\nconst tooltipId = useId();\n\nconst {\n  reference: activator,\n  popper: tooltip,\n  open,\n  popperEnter,\n  onOpen,\n  onClose,\n  onPopperLeave,\n  updatePopper,\n} = usePopper(popper, disabled, openDelay, closeDelay);\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    :class=\"$style.wrapper\"\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=\"popperEnter\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        :class=\"[\n          $style.tooltip,\n          tooltipClass,\n          $style[`tooltip__${popper?.strategy ?? 'absolute'}`],\n        ]\"\n        role=\"tooltip\"\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=\"updatePopper()\"\n          @after-leave=\"onPopperLeave()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            :class=\"$style.base\"\n            role=\"tooltip-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            :class=\"[$style.arrow, { [$style.arrow__open ?? '']: open }]\"\n            data-popper-arrow\n          />\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n$arrowSize: 0.625rem;\n.wrapper {\n  @apply relative inline-flex;\n}\n\n.tooltip {\n  @apply w-max transform transition-opacity delay-0 z-[9999];\n\n  &__fixed {\n    @apply fixed;\n  }\n\n  &__absolute {\n    @apply absolute;\n  }\n\n  .base {\n    @apply px-2 py-1 text-xs font-normal;\n    @apply bg-rui-grey-700/90 text-white rounded shadow;\n  }\n\n  .arrow {\n    @apply w-2.5 h-2.5 transition-opacity opacity-0;\n\n    &__open {\n      @apply opacity-100;\n    }\n\n    &::before {\n      @apply block border-[0.3125rem] origin-center;\n      @apply border-l-transparent border-b-transparent border-t-rui-grey-700/90 border-r-rui-grey-700/90;\n\n      content: '';\n      border-radius: 0 0.125rem 0 0;\n    }\n  }\n\n  &[data-popper-placement*='bottom'] .arrow {\n    top: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply -rotate-45;\n    }\n  }\n\n  &[data-popper-placement*='top'] .arrow {\n    bottom: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply rotate-[135deg];\n    }\n  }\n\n  &[data-popper-placement*='left'] .arrow {\n    right: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply rotate-45;\n    }\n  }\n\n  &[data-popper-placement*='right'] .arrow {\n    left: calc(0.5px - #{$arrowSize} / 2);\n\n    &::before {\n      @apply -rotate-[135deg];\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_unref","_renderSlot","_createBlock","_Teleport","_createVNode","_TransitionGroup"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkBA,UAAM,QAAQ;AAWd,UAAM,EAAE,YAAY,WAAW,QAAQ,SAAA,IAAa,OAAO,KAAK;AAEhE,UAAM,YAAY,MAAA;AAElB,UAAM;AAAA,MACJ,WAAW;AAAA,MACX,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,UAAU,QAAQ,UAAU,WAAW,UAAU;AAErD,aAAa;AAAA,MACX;AAAA,MACA;AAAA,IAAA,CACD;;0BAICA,mBA6DM,OAAA;AAAA,iBA5DA;AAAA,QAAJ,KAAI;AAAA,QACH,OAAKC,eAAEC,KAAAA,OAAO,OAAO;AAAA,QACrB,yBAAuBC,MAAA,QAAA;AAAA,QACvB,qBAAmBA,MAAA,QAAA,KAAYA,cAAOA,MAAA,SAAA,IAAY;AAAA,QAClD,mDAAWA,MAAA,MAAA;QACX,oDAAYA,MAAA,OAAA;QACZ,iDAASA,MAAA,MAAA;QACT,kDAAUA,MAAA,OAAA,EAAA;AAAA,MAAO;QAElBC,WAIE,KAAA,QAAA,aAAA;AAAA,UAFC,MAAMD,MAAA,IAAA;AAAA,UACN,OAAOA,MAAA,OAAA;AAAA,QAAA;SAIDA,MAAA,QAAA,kBADTE,YA4CWC,UAAA;AAAA;UA1CT,IAAG;AAAA,QAAA;UAGKH,MAAA,WAAA,kBADRH,mBAuCM,OAAA;AAAA;YArCH,IAAIG,MAAA,SAAA;AAAA,qBACD;AAAA,YAAJ,KAAI;AAAA,YACH,OAAKF,eAAA;AAAA,cAAcC,KAAAA,OAAO;AAAA,cAAmB,QAAA;AAAA,cAAwBA,KAAAA,OAAM,YAAaC,MAAA,MAAA,GAAQ,YAAQ,UAAA,EAAA;AAAA,YAAA;YAKzG,MAAK;AAAA,UAAA;YAELI,YA2BkBC,iBAAA;AAAA,cA1BhB,sBAAmB;AAAA,cACnB,oBAAiB;AAAA,cACjB,kBAAe;AAAA,cACf,sBAAmB;AAAA,cACnB,oBAAiB;AAAA,cACjB,kBAAe;AAAA,cACd,qDAAcL,MAAA,YAAA;cACd,oDAAaA,MAAA,aAAA,EAAA;AAAA,YAAa;+BAE3B,MAWM;AAAA,gBAVEA,MAAA,IAAA,kBADRH,mBAWM,OAAA;AAAA,kBATJ,KAAI;AAAA,kBACH,OAAKC,eAAEC,KAAAA,OAAO,IAAI;AAAA,kBACnB,MAAK;AAAA,kBACJ,aAAS,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,QAAA,yBAAyBC,MAAA,MAAA,EAAA;AAAA,kBACpC,cAAU,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,QAAA,yBAAyBA,MAAA,OAAA,EAAA;AAAA,gBAAO;kBAE7CC,WAEO,4BAFP,MAEO;AAAA,oDADF,QAAA,IAAI,GAAA,CAAA;AAAA,kBAAA;;iBAIF,QAAA,0BADTJ,mBAIE,QAAA;AAAA;kBAFC,OAAKC,eAAA,CAAGC,YAAO,UAAUA,KAAAA,OAAO,eAAW,EAAA,GAASC,MAAA,IAAA,EAAA,CAAI,CAAA;AAAA,kBACzD,qBAAA;AAAA,gBAAA;;;;;;;;;;"}

package/dist/components/progress/RuiProgress.vue.d.ts

@@ -26,9 +26,9 @@ export interface Props {
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     size: number | string;
     value: number;
-    color: ContextColorsType | "inherit";
     bufferValue: number;
     variant: "determinate" | "indeterminate" | "buffer";
+    color: ContextColorsType | "inherit";
     circular: boolean;
     showLabel: boolean;
     thickness: number | string;

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

@@ -1,4 +1,4 @@
-import { defineComponent, useCssVars, unref, computed, toRefs, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, Fragment, toDisplayString } from "vue";
+import { defineComponent, useCssVars, unref, toRefs, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, createCommentVNode, toDisplayString } from "vue";
 import { get } from "@vueuse/shared";
 const _hoisted_1 = ["aria-valuenow"];
 const _hoisted_2 = ["viewBox"];