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

package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
+import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { useElementSize } from "../../../vendor/@vueuse/core/dist/index.js";
 import { cn, tv } from "../../../utils/tv.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, unref, useId, useTemplateRef } from "vue";
-import { useElementSize } from "@vueuse/core";
-import { get as get$1 } from "@vueuse/shared";
 //#region src/components/accordions/accordion/RuiAccordion.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-state"];
 var _hoisted_2 = [
@@ -37,7 +37,7 @@ var RuiAccordion_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		const triggerId = useId();
 		const contentId = useId();
 		const { height: innerHeight } = useElementSize(inner);
-		const contentHeight = computed(() => __props.open ? `${get$1(innerHeight)}px` : "0px");
+		const contentHeight = computed(() => __props.open ? `${get(innerHeight)}px` : "0px");
 		function toggle() {
 			emit("click");
 		}

package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordion.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n\nconst rootStyle = tv({ base: 'flex flex-col items-start' });\n</script>\n\n<template>\n  <div\n    :class=\"rootStyle({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <!-- rounded only while focused: a permanent radius bent any border an app draws on the header -->\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"group flex gap-2 items-center cursor-pointer outline-hidden focus-visible:focus-ring focus-visible:rounded-rui-control\"\n      :class=\"[classNames?.header, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"shrink-0 text-rui-text-secondary transition-[rotate,color] duration-200 ease-out group-hover:text-rui-text motion-reduce:transition-none\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n        :size=\"16\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      class=\"grow transition-[height] duration-200 ease-out overflow-hidden w-full motion-reduce:transition-none\"\n      :class=\"classNames?.content\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,OAAO;EASb,MAAM,QAAQ,eAA+B,OAAO;EAEpD,MAAM,YAAY,MAAM;EACxB,MAAM,YAAY,MAAM;EACxB,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,gBAAgB,eAAwB,QAAA,OAAO,GAAG,MAAI,WAAW,EAAE,MAAM,KAAM;EAErF,SAAS,SAAe;GACtB,KAAK,OAAO;EACd;EAEA,SAAS,UAAU,OAA4B;GAC7C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;IAC9C,MAAM,eAAe;IACrB,OAAO;GACT;EACF;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,4BAA4B,CAAC;;GAIxD,OAAA,UAAA,GAAA,mBA+CM,OA/CN,WA+CM;IA9CH,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,QAAQA,KAAAA,OAAO,KAAK,EAAA,CAAA;IAC7D,cAAY,QAAA,OAAI,SAAA;IACjB,kBAAA;GACaA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAI7BC,KAAAA,OAAO,UADf,UAAA,GAAA,mBAyBM,OAAA;;IAvBH,IAAI,MAAA,SAAA;IACL,OAAK,eAAA,CAAC,0HAAwH,CACrH,QAAA,YAAY,QAAM,EAAA,UAAc,QAAA,WAAU,CAAA,CAAA,CAAA;IACnD,MAAK;IACL,UAAS;IACR,iBAAe,QAAA;IACf,iBAAe,MAAA,SAAA;IAChB,0BAAA;IACC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM;IACb,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;GAE1B,GAAA,CAAA,mBAKM,OAAA,EALA,OAAK,eAAA,EAAA,MAAU,QAAA,WAAU,CAAA,EAAA,GAAA,CAC7B,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,KAAI,CAAA,CAAA,GAAA,CAAA,GAGf,YAKE,iBAAA;IAJA,OAAK,eAAA,CAAC,4IAA0I,EAAA,eACvH,QAAA,KAAI,CAAA,CAAA;IAC7B,MAAK;IACJ,MAAM;GAIH,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,QAAA,QAAQ,QAAA,SADhB,UAAA,GAAA,mBAaM,OAAA;;IAXH,IAAI,MAAA,SAAA;IACL,OAAK,eAAA,CAAC,uGACE,QAAA,YAAY,OAAO,CAAA;IAC1B,OAAK,eAAA,EAAA,QAAY,MAAA,aAAA,EAAa,CAAA;IAC/B,MAAK;IACJ,mBAAiB,MAAA,SAAA;IAClB,0BAAA;GAEA,GAAA,CAAA,mBAEM,OAAA;IAFG,SAAA;IAAJ,KAAI;GACP,GAAA,CAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}
+{"version":3,"file":"RuiAccordion.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport Icon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiAccordionClassNames {\n  root?: VueClassValue;\n  header?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  classNames?: RuiAccordionClassNames;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst {\n  open = false,\n  eager = false,\n  headerGrow = false,\n  classNames,\n} = defineProps<AccordionProps>();\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\ndefineSlots<{\n  header?: (props: { open: boolean }) => any;\n  default?: () => any;\n}>();\n\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst triggerId = useId();\nconst contentId = useId();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (open ? `${get(innerHeight)}px` : '0px'));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n\nconst rootStyle = tv({ base: 'flex flex-col items-start' });\n</script>\n\n<template>\n  <div\n    :class=\"rootStyle({ class: cn(classNames?.root ?? $attrs.class) })\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <!-- rounded only while focused: a permanent radius bent any border an app draws on the header -->\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"group flex gap-2 items-center cursor-pointer outline-hidden focus-visible:focus-ring focus-visible:rounded-rui-control\"\n      :class=\"[classNames?.header, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div :class=\"{ grow: headerGrow }\">\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"shrink-0 text-rui-text-secondary transition-[rotate,color] duration-200 ease-out group-hover:text-rui-text motion-reduce:transition-none\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n        :size=\"16\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      class=\"grow transition-[height] duration-200 ease-out overflow-hidden w-full motion-reduce:transition-none\"\n      :class=\"classNames?.content\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,OAAO;EASb,MAAM,QAAQ,eAA+B,OAAO;EAEpD,MAAM,YAAY,MAAM;EACxB,MAAM,YAAY,MAAM;EACxB,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,gBAAgB,eAAwB,QAAA,OAAO,GAAG,IAAI,WAAW,EAAE,MAAM,KAAM;EAErF,SAAS,SAAe;GACtB,KAAK,OAAO;EACd;EAEA,SAAS,UAAU,OAA4B;GAC7C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;IAC9C,MAAM,eAAe;IACrB,OAAO;GACT;EACF;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,4BAA4B,CAAC;;GAIxD,OAAA,UAAA,GAAA,mBA+CM,OA/CN,WA+CM;IA9CH,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,QAAQA,KAAAA,OAAO,KAAK,EAAA,CAAA;IAC7D,cAAY,QAAA,OAAI,SAAA;IACjB,kBAAA;GACaA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAI7BC,KAAAA,OAAO,UADf,UAAA,GAAA,mBAyBM,OAAA;;IAvBH,IAAI,MAAA,SAAA;IACL,OAAK,eAAA,CAAC,0HAAwH,CACrH,QAAA,YAAY,QAAM,EAAA,UAAc,QAAA,WAAU,CAAA,CAAA,CAAA;IACnD,MAAK;IACL,UAAS;IACR,iBAAe,QAAA;IACf,iBAAe,MAAA,SAAA;IAChB,0BAAA;IACC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAM;IACb,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;GAE1B,GAAA,CAAA,mBAKM,OAAA,EALA,OAAK,eAAA,EAAA,MAAU,QAAA,WAAU,CAAA,EAAA,GAAA,CAC7B,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,KAAI,CAAA,CAAA,GAAA,CAAA,GAGf,YAKE,iBAAA;IAJA,OAAK,eAAA,CAAC,4IAA0I,EAAA,eACvH,QAAA,KAAI,CAAA,CAAA;IAC7B,MAAK;IACJ,MAAM;GAIH,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,QAAA,QAAQ,QAAA,SADhB,UAAA,GAAA,mBAaM,OAAA;;IAXH,IAAI,MAAA,SAAA;IACL,OAAK,eAAA,CAAC,uGACE,QAAA,YAAY,OAAO,CAAA;IAC1B,OAAK,eAAA,EAAA,QAAY,MAAA,aAAA,EAAa,CAAA;IAC/B,MAAK;IACJ,mBAAiB,MAAA,SAAA;IAClB,0BAAA;GAEA,GAAA,CAAA,mBAEM,OAAA;IAFG,SAAA;IAAJ,KAAI;GACP,GAAA,CAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/accordions/accordions/RuiAccordions.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
+import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
 import { Fragment, computed, createBlock, createElementBlock, defineComponent, guardReactiveProps, isVNode, mergeModels, normalizeProps, openBlock, ref, renderList, resolveDynamicComponent, unref, useModel, useSlots, watch } from "vue";
-import { get, set } from "@vueuse/shared";
 //#region src/components/accordions/accordions/RuiAccordions.vue?vue&type=script&setup=true&lang.ts
 var RuiAccordions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiAccordions",

package/dist/components/avatars/RuiAvatar.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
+import { get, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import { tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import { computeAvatarText, computeInitials, resolveAvatarIconPx, resolveAvatarSizePx, resolveAvatarTextSize } from "./avatar-props.js";
 import { useAvatarGroup } from "./use-avatar-group.js";
 import { computed, createBlock, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useSlots, watch } from "vue";
-import { get, set } from "@vueuse/shared";
 //#region src/components/avatars/RuiAvatar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"role",

package/dist/components/avatars/RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
+import { get } from "../../vendor/@vueuse/shared/dist/index.js";
 import { tv } from "../../utils/tv.js";
 import { AvatarGroupSpacing, avatarGroupInjectionKey, resolveAvatarGroupSpacingPx, resolveAvatarSizePx } from "./avatar-props.js";
 import RuiAvatar_default from "./RuiAvatar.js";
 import { Comment, Fragment, Text, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, provide, renderList, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
-import { get } from "@vueuse/shared";
 //#region src/components/avatars/RuiAvatarGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-size", "data-variant"];
 var RuiAvatarGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({

package/dist/components/buttons/button/RuiButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButton.js","names":[],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ButtonSize, ButtonVariant, getButtonSpinnerSize } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:model-value': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\n// a RuiButtonGroup anywhere above, unless an overlay's content sits in between\nconst group = inject(ButtonGroupKey, undefined);\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst resolvedVariant = computed<ButtonVariant>(() => group?.variant() ?? variant);\n\nconst resolvedSize = computed<ButtonSize | undefined>(() => size ?? group?.size());\n\nconst resolvedDisabled = computed<boolean>(() => disabled || (group?.disabled() ?? false));\n\n// a grouped button is pressed when the group's model holds its value; it needs one to take part\nconst resolvedActive = computed<boolean>(() => active || (!!group && modelValue !== undefined && group.isActive(modelValue)));\n\nconst resolvedColor = computed<ContextColorsType | undefined>(() => group?.color(get(resolvedActive)) ?? color);\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant: get(resolvedVariant),\n  color: get(resolvedColor) ?? 'grey',\n  size: get(resolvedSize),\n  rounded,\n  icon,\n  active: get(resolvedActive),\n  loading,\n  hideFocusIndicator,\n}));\n\nfunction onClick(): void {\n  emit('update:model-value', get(btnValue));\n  if (group && modelValue !== undefined)\n    group.toggle(modelValue);\n}\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"ui.root({ class: cn([group?.itemClass(), $attrs.class]) })\"\n    :disabled=\"resolvedDisabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-size=\"resolvedSize ?? 'md'\"\n    :data-color=\"resolvedColor\"\n    :data-active=\"resolvedActive || undefined\"\n    :aria-busy=\"loading || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"onClick()\"\n  >\n    <slot name=\"prepend\" />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n    <!-- the button's aria-busy announces the wait, so the spinner stays out of the accessibility tree -->\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      aria-hidden=\"true\"\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n  </Component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiButton.js","names":[],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ButtonSize, ButtonVariant, getButtonSpinnerSize } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:model-value': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\n// a RuiButtonGroup anywhere above, unless an overlay's content sits in between\nconst group = inject(ButtonGroupKey, undefined);\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst resolvedVariant = computed<ButtonVariant>(() => group?.variant() ?? variant);\n\nconst resolvedSize = computed<ButtonSize | undefined>(() => size ?? group?.size());\n\nconst resolvedDisabled = computed<boolean>(() => disabled || (group?.disabled() ?? false));\n\n// a grouped button is pressed when the group's model holds its value; it needs one to take part\nconst resolvedActive = computed<boolean>(() => active || (!!group && modelValue !== undefined && group.isActive(modelValue)));\n\nconst resolvedColor = computed<ContextColorsType | undefined>(() => group?.color(get(resolvedActive)) ?? color);\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant: get(resolvedVariant),\n  color: get(resolvedColor) ?? 'grey',\n  size: get(resolvedSize),\n  rounded,\n  icon,\n  active: get(resolvedActive),\n  loading,\n  hideFocusIndicator,\n}));\n\nfunction onClick(): void {\n  emit('update:model-value', get(btnValue));\n  if (group && modelValue !== undefined)\n    group.toggle(modelValue);\n}\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"ui.root({ class: cn([group?.itemClass(), $attrs.class]) })\"\n    :disabled=\"resolvedDisabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-size=\"resolvedSize ?? 'md'\"\n    :data-color=\"resolvedColor\"\n    :data-active=\"resolvedActive || undefined\"\n    :aria-busy=\"loading || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"onClick()\"\n  >\n    <!-- the button's aria-busy announces the wait, so the spinner stays out of the accessibility tree -->\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      aria-hidden=\"true\"\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n    <!-- while loading, the spinner stands in for the prepend icon; the label stays -->\n    <slot\n      v-if=\"!loading || icon\"\n      name=\"prepend\"\n    />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n  </Component>\n</template>\n"],"mappings":""}

package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,10 @@
+import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
 import { cn } from "../../../utils/tv.js";
 import { ButtonGroupKey } from "../button-group/button-group-context.js";
 import { ButtonVariant, getButtonSpinnerSize } from "./button-props.js";
 import { buttonStyles } from "./button-styles.js";
 import RuiProgress_default from "../../progress/RuiProgress.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, useSlots, withCtx } from "vue";
-import { get } from "@vueuse/shared";
 //#region src/components/buttons/button/RuiButton.vue?vue&type=script&setup=true&lang.ts
 var RuiButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiButton",
@@ -83,15 +83,8 @@ var RuiButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				class: void 0
 			}, { onClick: _cache[0] || (_cache[0] = ($event) => onClick()) }), {
 				default: withCtx(() => [
-					renderSlot(_ctx.$slots, "prepend"),
-					slots.default ? (openBlock(), createElementBlock("span", {
-						key: 0,
-						class: normalizeClass(unref(ui).label()),
-						"data-id": "btn-label"
-					}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true),
-					renderSlot(_ctx.$slots, "append"),
 					__props.loading ? (openBlock(), createBlock(RuiProgress_default, {
-						key: 1,
+						key: 0,
 						circular: "",
 						"data-spinner": "",
 						"aria-hidden": "true",
@@ -99,7 +92,14 @@ var RuiButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						variant: "indeterminate",
 						thickness: "2",
 						size: unref(spinnerSize)
-					}, null, 8, ["class", "size"])) : createCommentVNode("", true)
+					}, null, 8, ["class", "size"])) : createCommentVNode("", true),
+					!__props.loading || __props.icon ? renderSlot(_ctx.$slots, "prepend", {}, void 0, void 0, 1) : createCommentVNode("", true),
+					slots.default ? (openBlock(), createElementBlock("span", {
+						key: 2,
+						class: normalizeClass(unref(ui).label()),
+						"data-id": "btn-label"
+					}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "append")
 				]),
 				_: 3
 			}, 16, [

package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButton.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ButtonSize, ButtonVariant, getButtonSpinnerSize } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:model-value': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\n// a RuiButtonGroup anywhere above, unless an overlay's content sits in between\nconst group = inject(ButtonGroupKey, undefined);\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst resolvedVariant = computed<ButtonVariant>(() => group?.variant() ?? variant);\n\nconst resolvedSize = computed<ButtonSize | undefined>(() => size ?? group?.size());\n\nconst resolvedDisabled = computed<boolean>(() => disabled || (group?.disabled() ?? false));\n\n// a grouped button is pressed when the group's model holds its value; it needs one to take part\nconst resolvedActive = computed<boolean>(() => active || (!!group && modelValue !== undefined && group.isActive(modelValue)));\n\nconst resolvedColor = computed<ContextColorsType | undefined>(() => group?.color(get(resolvedActive)) ?? color);\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant: get(resolvedVariant),\n  color: get(resolvedColor) ?? 'grey',\n  size: get(resolvedSize),\n  rounded,\n  icon,\n  active: get(resolvedActive),\n  loading,\n  hideFocusIndicator,\n}));\n\nfunction onClick(): void {\n  emit('update:model-value', get(btnValue));\n  if (group && modelValue !== undefined)\n    group.toggle(modelValue);\n}\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"ui.root({ class: cn([group?.itemClass(), $attrs.class]) })\"\n    :disabled=\"resolvedDisabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-size=\"resolvedSize ?? 'md'\"\n    :data-color=\"resolvedColor\"\n    :data-active=\"resolvedActive || undefined\"\n    :aria-busy=\"loading || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"onClick()\"\n  >\n    <slot name=\"prepend\" />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n    <!-- the button's aria-busy announces the wait, so the spinner stays out of the accessibility tree -->\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      aria-hidden=\"true\"\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n  </Component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,OAAO;EAIb,MAAM,QAAQ,SAAA;EAOd,MAAM,QAAQ,OAAO,gBAAgB,KAAA,CAAS;EAE9C,MAAM,WAAW,eAA8B,QAAA,UAAU;EAEzD,MAAM,kBAAkB,eAA8B,OAAO,QAAQ,KAAK,QAAA,OAAO;EAEjF,MAAM,eAAe,eAAuC,QAAA,QAAQ,OAAO,KAAK,CAAC;EAEjF,MAAM,mBAAmB,eAAwB,QAAA,aAAa,OAAO,SAAS,KAAK,MAAM;EAGzF,MAAM,iBAAiB,eAAwB,QAAA,UAAW,CAAC,CAAC,SAAS,QAAA,eAAe,KAAA,KAAa,MAAM,SAAS,QAAA,UAAU,CAAE;EAE5H,MAAM,gBAAgB,eAA8C,OAAO,MAAM,IAAI,cAAc,CAAC,KAAK,QAAA,KAAK;EAE9G,MAAM,cAAc,eAAuB,qBAAqB,IAAI,YAAY,CAAC,CAAC;EAElF,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAS,IAAI,eAAe;GAC5B,OAAO,IAAI,aAAa,KAAK;GAC7B,MAAM,IAAI,YAAY;GACtB,SAAM,QAAA;GACN,MAAG,QAAA;GACH,QAAQ,IAAI,cAAc;GAC1B,SAAM,QAAA;GACN,oBAAiB,QAAA;EACnB,CAAC,CAAC;EAEF,SAAS,UAAgB;GACvB,KAAK,sBAAsB,IAAI,QAAQ,CAAC;GACxC,IAAI,SAAS,QAAA,eAAe,KAAA,GAC1B,MAAM,OAAO,QAAA,UAAU;EAC3B;;GAIE,OAAA,UAAA,GAAA,YAiCY,wBAhCL,QAAA,GAAG,GADV,WAiCY;IA/BT,OAAO,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAU,MAAA,EAAA,CAAE,CAAA,CAAE,MAAA,KAAA,CAAK,EAAE,UAAS,GAAIA,KAAAA,OAAO,KAAK,CAAA,EAAA,CAAA;IAC5D,UAAU,MAAA,gBAAA,KAAoB,QAAA;IAC9B,MAAM,QAAA,QAAG,WAAgB,QAAA,OAAO,KAAA;IAChC,gBAAc,MAAA,eAAA;IACd,aAAW,MAAA,YAAA,KAAY;IACvB,cAAY,MAAA,aAAA;IACZ,eAAa,MAAA,cAAA,KAAkB,KAAA;IAC/B,aAAW,QAAA,WAAW,KAAA;GACVA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO,GAAA,CAAA,GAAA;IAEf,SAAA,cAAuB;KAAvB,WAAuB,KAAA,QAAA,SAAA;KAEf,MAAM,WADd,UAAA,GAAA,mBAMO,QAAA;;MAJJ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;MAChB,WAAQ;KAER,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEV,WAAsB,KAAA,QAAA,QAAA;KAGd,QAAA,WADR,UAAA,GAAA,YASE,qBAAA;;MAPA,UAAA;MACA,gBAAA;MACA,eAAY;MACX,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;MAClB,SAAQ;MACR,WAAU;MACT,MAAM,MAAA,WAAA"}
+{"version":3,"file":"RuiButton.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ButtonSize, ButtonVariant, getButtonSpinnerSize } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:model-value': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\n// a RuiButtonGroup anywhere above, unless an overlay's content sits in between\nconst group = inject(ButtonGroupKey, undefined);\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst resolvedVariant = computed<ButtonVariant>(() => group?.variant() ?? variant);\n\nconst resolvedSize = computed<ButtonSize | undefined>(() => size ?? group?.size());\n\nconst resolvedDisabled = computed<boolean>(() => disabled || (group?.disabled() ?? false));\n\n// a grouped button is pressed when the group's model holds its value; it needs one to take part\nconst resolvedActive = computed<boolean>(() => active || (!!group && modelValue !== undefined && group.isActive(modelValue)));\n\nconst resolvedColor = computed<ContextColorsType | undefined>(() => group?.color(get(resolvedActive)) ?? color);\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant: get(resolvedVariant),\n  color: get(resolvedColor) ?? 'grey',\n  size: get(resolvedSize),\n  rounded,\n  icon,\n  active: get(resolvedActive),\n  loading,\n  hideFocusIndicator,\n}));\n\nfunction onClick(): void {\n  emit('update:model-value', get(btnValue));\n  if (group && modelValue !== undefined)\n    group.toggle(modelValue);\n}\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"ui.root({ class: cn([group?.itemClass(), $attrs.class]) })\"\n    :disabled=\"resolvedDisabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-size=\"resolvedSize ?? 'md'\"\n    :data-color=\"resolvedColor\"\n    :data-active=\"resolvedActive || undefined\"\n    :aria-busy=\"loading || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"onClick()\"\n  >\n    <!-- the button's aria-busy announces the wait, so the spinner stays out of the accessibility tree -->\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      aria-hidden=\"true\"\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n    <!-- while loading, the spinner stands in for the prepend icon; the label stays -->\n    <slot\n      v-if=\"!loading || icon\"\n      name=\"prepend\"\n    />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n  </Component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,OAAO;EAIb,MAAM,QAAQ,SAAA;EAOd,MAAM,QAAQ,OAAO,gBAAgB,KAAA,CAAS;EAE9C,MAAM,WAAW,eAA8B,QAAA,UAAU;EAEzD,MAAM,kBAAkB,eAA8B,OAAO,QAAQ,KAAK,QAAA,OAAO;EAEjF,MAAM,eAAe,eAAuC,QAAA,QAAQ,OAAO,KAAK,CAAC;EAEjF,MAAM,mBAAmB,eAAwB,QAAA,aAAa,OAAO,SAAS,KAAK,MAAM;EAGzF,MAAM,iBAAiB,eAAwB,QAAA,UAAW,CAAC,CAAC,SAAS,QAAA,eAAe,KAAA,KAAa,MAAM,SAAS,QAAA,UAAU,CAAE;EAE5H,MAAM,gBAAgB,eAA8C,OAAO,MAAM,IAAI,cAAc,CAAC,KAAK,QAAA,KAAK;EAE9G,MAAM,cAAc,eAAuB,qBAAqB,IAAI,YAAY,CAAC,CAAC;EAElF,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAS,IAAI,eAAe;GAC5B,OAAO,IAAI,aAAa,KAAK;GAC7B,MAAM,IAAI,YAAY;GACtB,SAAM,QAAA;GACN,MAAG,QAAA;GACH,QAAQ,IAAI,cAAc;GAC1B,SAAM,QAAA;GACN,oBAAiB,QAAA;EACnB,CAAC,CAAC;EAEF,SAAS,UAAgB;GACvB,KAAK,sBAAsB,IAAI,QAAQ,CAAC;GACxC,IAAI,SAAS,QAAA,eAAe,KAAA,GAC1B,MAAM,OAAO,QAAA,UAAU;EAC3B;;GAIE,OAAA,UAAA,GAAA,YAqCY,wBApCL,QAAA,GAAG,GADV,WAqCY;IAnCT,OAAO,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAU,MAAA,EAAA,CAAE,CAAA,CAAE,MAAA,KAAA,CAAK,EAAE,UAAS,GAAIA,KAAAA,OAAO,KAAK,CAAA,EAAA,CAAA;IAC5D,UAAU,MAAA,gBAAA,KAAoB,QAAA;IAC9B,MAAM,QAAA,QAAG,WAAgB,QAAA,OAAO,KAAA;IAChC,gBAAc,MAAA,eAAA;IACd,aAAW,MAAA,YAAA,KAAY;IACvB,cAAY,MAAA,aAAA;IACZ,eAAa,MAAA,cAAA,KAAkB,KAAA;IAC/B,aAAW,QAAA,WAAW,KAAA;GACVA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO,GAAA,CAAA,GAAA;IAGf,SAAA,cASE;KARM,QAAA,WADR,UAAA,GAAA,YASE,qBAAA;;MAPA,UAAA;MACA,gBAAA;MACA,eAAY;MACX,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;MAClB,SAAQ;MACR,WAAU;MACT,MAAM,MAAA,WAAA;;KAIA,CAAA,QAAA,WAAW,QAAA,OADpB,WAGE,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA;KAEM,MAAM,WADd,UAAA,GAAA,mBAMO,QAAA;;MAJJ,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;MAChB,WAAQ;KAER,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEV,WAAsB,KAAA,QAAA,QAAA"}

package/dist/components/buttons/button/button-styles.js

@@ -49,7 +49,7 @@ var buttonStyles = tv({
 			"focus-visible:focus-ring"
 		].join(" "),
 		label: "inline-block text-nowrap",
-		spinner: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+		spinner: "shrink-0"
 	},
 	variants: {
 		variant: {
@@ -88,7 +88,7 @@ var buttonStyles = tv({
 			false: {}
 		},
 		loading: {
-			true: { root: "relative !cursor-progress space-x-0 [&>*:not([data-spinner])]:opacity-0" },
+			true: { root: "relative !cursor-progress" },
 			false: {}
 		},
 		hideFocusIndicator: { true: { root: "focus-visible:!outline-hidden" } }
@@ -106,6 +106,14 @@ var buttonStyles = tv({
 			],
 			class: { root: "not-disabled:hover:state-layer-pressed" }
 		},
+		{
+			loading: true,
+			icon: true,
+			class: {
+				root: "[&>*:not([data-spinner])]:opacity-0",
+				spinner: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+			}
+		},
 		{
 			loading: false,
 			class: { root: "disabled:!bg-rui-neutral-100 dark:disabled:!bg-rui-neutral-800 disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled" }

package/dist/components/buttons/button/button-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The button's classes.\n *\n * Three decisions the class lists cannot state themselves:\n *\n * `position: relative` is not in the base root: it is only a positioning\n * context for the loading spinner, so the `loading` variant applies it.\n * Basing it here would collide with consumers pinning the button with\n * `fixed`/`absolute`, since cascade order picks the later utility, usually\n * `relative`, and turns their `right-*`/`bottom-*` into relative offsets,\n * which misplaces FABs.\n *\n * Icon sizing flows through the `--rui-icon-size` custom property, seeded at\n * the md value in the base root and redefined per size variant with `!` so a\n * variant beats the baseline on the same element regardless of source order.\n * RuiIcon's own `size` prop stamps an inline style on the svg, which beats the\n * inherited value, so a consumer always wins. See rotki/ui-library#512.\n *\n * `disabled` on the element covers two states: actually disabled, and loading,\n * since RuiButton sets `disabled = disabled || loading`. Only the cursor is\n * shared between them; the grey disabled palette lives in the `loading: false`\n * compounds, so a loading button keeps its variant color behind the spinner.\n *\n * An icon-only button matches the height of the text button of the same size,\n * with a 60-70% glyph ratio, which is a larger glyph than the same size gives\n * a prepend/append icon so it does not look lost in the square. xs pads by an\n * arbitrary 0.1875rem because no Tailwind token holds the ratio at a 14px\n * glyph:\n *\n * ```\n * xs            p-[0.1875rem] + 0.875rem icon = 1.25rem (20px)   70%\n * sm            p-1           + 1.25rem  icon = 1.75rem (28px)   71%\n * md (default)  p-2           + 1.25rem  icon = 2.25rem (36px)   56%\n * lg            p-1.5         + 1.5rem   icon = 2.25rem (36px)   67%\n * xl            p-2           + 1.5rem   icon = 2.5rem  (40px)   60%\n * 2xl           p-2           + 1.75rem  icon = 2.75rem (44px)   64%\n * ```\n */\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium inset-ring inset-ring-transparent',\n      'flex items-center justify-center gap-x-2',\n      // md is 36px, the height of a text field or select, so a button lines up with them in a row\n      'px-4 py-2 rounded-rui-control transition-colors duration-150',\n      '[--rui-icon-size:1rem]',\n      'disabled:cursor-not-allowed',\n      'focus-visible:focus-ring',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {},\n      text: { root: 'px-2' },\n      fab: { root: 'rounded-full py-2 shadow-rui-control disabled:shadow-none' },\n      // The label's 16px line-box matches the md icon box, so the two share an optical center (rotki/ui-library#515)\n      list: { root: 'p-3 px-3 rounded-rui-sm w-full justify-start text-left', label: 'w-full leading-4' },\n    },\n    size: {\n      'xs': { root: 'px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]' },\n      'sm': { root: 'px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:0.875rem]' },\n      'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n      // 40px, to line up with RuiTextField / RuiMenuSelect in a toolbar; a 44px jumbo CTA is `2xl`\n      'xl': { root: 'px-6 py-2 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n      '2xl': { root: 'px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n    },\n    color: {\n      grey: { root: 'bg-rui-neutral-100 hover:bg-rui-neutral-200 active:bg-rui-neutral-300 text-rui-text dark:bg-rui-neutral-800 dark:hover:bg-rui-neutral-700 dark:active:bg-rui-neutral-600' },\n      // hover is a tint laid over the fill (see the filled compound below); pressed sinks to `darker`\n      primary: { root: 'bg-rui-primary active:bg-rui-primary-darker text-rui-dark-text dark:text-rui-text' },\n      secondary: { root: 'bg-rui-secondary active:bg-rui-secondary-darker text-rui-dark-text dark:text-rui-text' },\n      error: { root: 'bg-rui-error active:bg-rui-error-darker text-rui-dark-text dark:text-rui-text' },\n      warning: { root: 'bg-rui-warning active:bg-rui-warning-darker text-rui-dark-text dark:text-rui-text' },\n      info: { root: 'bg-rui-info active:bg-rui-info-darker text-rui-dark-text dark:text-rui-text' },\n      success: { root: 'bg-rui-success active:bg-rui-success-darker text-rui-dark-text dark:text-rui-text' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      /*\n       * Only the round shape; the `icon + size` compounds below carry padding and icon sizing. The\n       * label holds no text, so it lays out as a flex box: a line box would put a wrapped icon (a\n       * badge) on the text baseline and grow the button by the descender gap.\n       */\n      true: { root: 'rounded-full', label: 'inline-flex' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      // transparent rather than invisible, which would take the label out of the accessibility tree\n      true: { root: 'relative !cursor-progress space-x-0 [&>*:not([data-spinner])]:opacity-0' },\n      false: {},\n    },\n    hideFocusIndicator: {\n      true: { root: 'focus-visible:!outline-hidden' },\n    },\n  },\n  compoundVariants: [\n    /*\n     * Filled hover: the pressed state layer (10% black in light, 12% white in dark) over the fill, a\n     * step of about a tenth rather than the jump to `darker`, which stays for the pressed state.\n     * `not-disabled:` keeps a disabled or loading button flat; an `<a>` is never `:disabled`.\n     */\n    { variant: ['default', 'fab'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: { root: 'not-disabled:hover:state-layer-pressed' } },\n    // Disabled appearance: a flat neutral fill, skipped while loading so the variant color shows behind the spinner\n    { loading: false, class: { root: 'disabled:!bg-rui-neutral-100 dark:disabled:!bg-rui-neutral-800 disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n    { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:inset-ring-rui-text-disabled dark:disabled:inset-ring-rui-text-disabled' } },\n    { loading: false, variant: 'text', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n    { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n    // === Grey color variants ===\n    { color: 'grey', active: true, class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n    // the same hover and pressed tints as a highlighted menu option\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-hover active:bg-rui-pressed dark:bg-transparent dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-pressed dark:bg-rui-pressed' } },\n    // the shared control edge, 3:1 against the page like the 50% context colours beside it\n    { color: 'grey', variant: 'outlined', class: { root: 'inset-ring-rui-outline' } },\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary' } },\n\n    // `dark:text-rui-<color>` beats the filled buttons' `dark:text-rui-text`; primary, secondary and error use their lighter tone in dark for 4.5:1\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary/6 active:bg-rui-primary/10 text-rui-primary dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary/6 active:bg-rui-secondary/10 text-rui-secondary dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error/6 active:bg-rui-error/10 text-rui-error dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning/6 active:bg-rui-warning/10 text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info/6 active:bg-rui-info/10 text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success/6 active:bg-rui-success/10 text-rui-success dark:text-rui-success' } },\n\n    // === Context colors — active default ===\n    { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n    { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n    { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n    { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n    { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n    { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n    // Active outlined/text: a quiet tint with the deeper tone as the label, which keeps 4.5:1 for every color\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary/[0.08] text-rui-primary-darker' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary/[0.08] text-rui-secondary-darker' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error/[0.08] text-rui-error-darker' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning/[0.08] text-rui-warning-darker' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info/[0.08] text-rui-info-darker' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success/[0.08] text-rui-success-darker' } },\n\n    // === Context colors: outlined border (dark draws primary and secondary solid; at 50% their deep fills sink into the page and look alike) ===\n    { color: 'primary', variant: 'outlined', class: { root: 'inset-ring-rui-primary/50 dark:inset-ring-rui-primary' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'inset-ring-rui-secondary/50 dark:inset-ring-rui-secondary' } },\n    { color: 'error', variant: 'outlined', class: { root: 'inset-ring-rui-error/50' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'inset-ring-rui-warning/50' } },\n    { color: 'info', variant: 'outlined', class: { root: 'inset-ring-rui-info/50' } },\n    { color: 'success', variant: 'outlined', class: { root: 'inset-ring-rui-success/50' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'xs', class: { root: 'px-1' } },\n    { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n    { variant: 'text', size: 'xl', class: { root: 'px-2.5' } },\n    { variant: 'text', size: '2xl', class: { root: 'px-2.5' } },\n    { variant: 'fab', size: 'xs', class: { root: 'py-1 px-1' } },\n    { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n    { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n    { variant: 'list', size: 'xs', class: { root: 'px-3 py-0.5' } },\n    // 32px: a dense select's option row, which `getOptionHeight` reserves in the virtual list\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-2' } },\n    // Icon-only sizing, per the padding and glyph table on buttonStyles above\n    { icon: true, class: { root: 'p-2 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'xs', class: { root: 'p-[0.1875rem] ![--rui-icon-size:0.875rem]' } },\n    { icon: true, size: 'sm', class: { root: 'p-1 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'lg', class: { root: 'p-1.5 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: 'xl', class: { root: 'p-2 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: '2xl', class: { root: 'p-2 ![--rui-icon-size:1.75rem]' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n  ],\n  compoundSlots: [\n    // In dark a status color's `main` is a text tone, so a filled status button takes the deep `darker` fill\n    { slots: ['root'], color: 'error', variant: ['default', 'fab'], class: 'dark:bg-rui-error-darker dark:active:bg-rui-error-darker/75' },\n    { slots: ['root'], color: 'warning', variant: ['default', 'fab'], class: 'dark:bg-rui-warning-darker dark:active:bg-rui-warning-darker/75' },\n    { slots: ['root'], color: 'info', variant: ['default', 'fab'], class: 'dark:bg-rui-info-darker dark:active:bg-rui-info-darker/75' },\n    { slots: ['root'], color: 'success', variant: ['default', 'fab'], class: 'dark:bg-rui-success-darker dark:active:bg-rui-success-darker/75' },\n    // Dark mode active outlined/text: the same quiet tint, with the lighter tone as the label\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary/[0.16] dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary/[0.16] dark:text-rui-secondary-lighter' },\n    { slots: ['root'], color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-error/[0.16] dark:text-rui-error-lighter' },\n    { slots: ['root'], color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-warning/[0.16] dark:text-rui-warning-lighter' },\n    { slots: ['root'], color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-info/[0.16] dark:text-rui-info-lighter' },\n    { slots: ['root'], color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-success/[0.16] dark:text-rui-success-lighter' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    color: 'grey',\n    active: false,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The button's classes.\n *\n * Three decisions the class lists cannot state themselves:\n *\n * `position: relative` is not in the base root: it is only a positioning\n * context for the loading spinner, so the `loading` variant applies it.\n * Basing it here would collide with consumers pinning the button with\n * `fixed`/`absolute`, since cascade order picks the later utility, usually\n * `relative`, and turns their `right-*`/`bottom-*` into relative offsets,\n * which misplaces FABs.\n *\n * Icon sizing flows through the `--rui-icon-size` custom property, seeded at\n * the md value in the base root and redefined per size variant with `!` so a\n * variant beats the baseline on the same element regardless of source order.\n * RuiIcon's own `size` prop stamps an inline style on the svg, which beats the\n * inherited value, so a consumer always wins. See rotki/ui-library#512.\n *\n * `disabled` on the element covers two states: actually disabled, and loading,\n * since RuiButton sets `disabled = disabled || loading`. Only the cursor is\n * shared between them; the grey disabled palette lives in the `loading: false`\n * compounds, so a loading button keeps its variant color behind the spinner.\n *\n * An icon-only button matches the height of the text button of the same size,\n * with a 60-70% glyph ratio, which is a larger glyph than the same size gives\n * a prepend/append icon so it does not look lost in the square. xs pads by an\n * arbitrary 0.1875rem because no Tailwind token holds the ratio at a 14px\n * glyph:\n *\n * ```\n * xs            p-[0.1875rem] + 0.875rem icon = 1.25rem (20px)   70%\n * sm            p-1           + 1.25rem  icon = 1.75rem (28px)   71%\n * md (default)  p-2           + 1.25rem  icon = 2.25rem (36px)   56%\n * lg            p-1.5         + 1.5rem   icon = 2.25rem (36px)   67%\n * xl            p-2           + 1.5rem   icon = 2.5rem  (40px)   60%\n * 2xl           p-2           + 1.75rem  icon = 2.75rem (44px)   64%\n * ```\n */\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium inset-ring inset-ring-transparent',\n      'flex items-center justify-center gap-x-2',\n      // md is 36px, the height of a text field or select, so a button lines up with them in a row\n      'px-4 py-2 rounded-rui-control transition-colors duration-150',\n      '[--rui-icon-size:1rem]',\n      'disabled:cursor-not-allowed',\n      'focus-visible:focus-ring',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    // inline in the prepend icon's place; an icon-only button centers it over its hidden glyph instead\n    spinner: 'shrink-0',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {},\n      text: { root: 'px-2' },\n      fab: { root: 'rounded-full py-2 shadow-rui-control disabled:shadow-none' },\n      // The label's 16px line-box matches the md icon box, so the two share an optical center (rotki/ui-library#515)\n      list: { root: 'p-3 px-3 rounded-rui-sm w-full justify-start text-left', label: 'w-full leading-4' },\n    },\n    size: {\n      'xs': { root: 'px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]' },\n      'sm': { root: 'px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:0.875rem]' },\n      'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n      // 40px, to line up with RuiTextField / RuiMenuSelect in a toolbar; a 44px jumbo CTA is `2xl`\n      'xl': { root: 'px-6 py-2 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n      '2xl': { root: 'px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n    },\n    color: {\n      grey: { root: 'bg-rui-neutral-100 hover:bg-rui-neutral-200 active:bg-rui-neutral-300 text-rui-text dark:bg-rui-neutral-800 dark:hover:bg-rui-neutral-700 dark:active:bg-rui-neutral-600' },\n      // hover is a tint laid over the fill (see the filled compound below); pressed sinks to `darker`\n      primary: { root: 'bg-rui-primary active:bg-rui-primary-darker text-rui-dark-text dark:text-rui-text' },\n      secondary: { root: 'bg-rui-secondary active:bg-rui-secondary-darker text-rui-dark-text dark:text-rui-text' },\n      error: { root: 'bg-rui-error active:bg-rui-error-darker text-rui-dark-text dark:text-rui-text' },\n      warning: { root: 'bg-rui-warning active:bg-rui-warning-darker text-rui-dark-text dark:text-rui-text' },\n      info: { root: 'bg-rui-info active:bg-rui-info-darker text-rui-dark-text dark:text-rui-text' },\n      success: { root: 'bg-rui-success active:bg-rui-success-darker text-rui-dark-text dark:text-rui-text' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      /*\n       * Only the round shape; the `icon + size` compounds below carry padding and icon sizing. The\n       * label holds no text, so it lays out as a flex box: a line box would put a wrapped icon (a\n       * badge) on the text baseline and grow the button by the descender gap.\n       */\n      true: { root: 'rounded-full', label: 'inline-flex' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      true: { root: 'relative !cursor-progress' },\n      false: {},\n    },\n    hideFocusIndicator: {\n      true: { root: 'focus-visible:!outline-hidden' },\n    },\n  },\n  compoundVariants: [\n    /*\n     * Filled hover: the pressed state layer (10% black in light, 12% white in dark) over the fill, a\n     * step of about a tenth rather than the jump to `darker`, which stays for the pressed state.\n     * `not-disabled:` keeps a disabled or loading button flat; an `<a>` is never `:disabled`.\n     */\n    { variant: ['default', 'fab'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: { root: 'not-disabled:hover:state-layer-pressed' } },\n    // An icon-only button has no label to keep, so its glyph goes transparent (still in the accessibility tree) under a centered spinner\n    { loading: true, icon: true, class: { root: '[&>*:not([data-spinner])]:opacity-0', spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2' } },\n    // Disabled appearance: a flat neutral fill, skipped while loading so the variant color shows behind the spinner\n    { loading: false, class: { root: 'disabled:!bg-rui-neutral-100 dark:disabled:!bg-rui-neutral-800 disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n    { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:inset-ring-rui-text-disabled dark:disabled:inset-ring-rui-text-disabled' } },\n    { loading: false, variant: 'text', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n    { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n    // === Grey color variants ===\n    { color: 'grey', active: true, class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n    // the same hover and pressed tints as a highlighted menu option\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-hover active:bg-rui-pressed dark:bg-transparent dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-pressed dark:bg-rui-pressed' } },\n    // the shared control edge, 3:1 against the page like the 50% context colours beside it\n    { color: 'grey', variant: 'outlined', class: { root: 'inset-ring-rui-outline' } },\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary' } },\n\n    // `dark:text-rui-<color>` beats the filled buttons' `dark:text-rui-text`; primary, secondary and error use their lighter tone in dark for 4.5:1\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary/6 active:bg-rui-primary/10 text-rui-primary dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary/6 active:bg-rui-secondary/10 text-rui-secondary dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error/6 active:bg-rui-error/10 text-rui-error dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning/6 active:bg-rui-warning/10 text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info/6 active:bg-rui-info/10 text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success/6 active:bg-rui-success/10 text-rui-success dark:text-rui-success' } },\n\n    // === Context colors — active default ===\n    { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n    { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n    { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n    { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n    { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n    { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n    // Active outlined/text: a quiet tint with the deeper tone as the label, which keeps 4.5:1 for every color\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary/[0.08] text-rui-primary-darker' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary/[0.08] text-rui-secondary-darker' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error/[0.08] text-rui-error-darker' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning/[0.08] text-rui-warning-darker' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info/[0.08] text-rui-info-darker' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success/[0.08] text-rui-success-darker' } },\n\n    // === Context colors: outlined border (dark draws primary and secondary solid; at 50% their deep fills sink into the page and look alike) ===\n    { color: 'primary', variant: 'outlined', class: { root: 'inset-ring-rui-primary/50 dark:inset-ring-rui-primary' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'inset-ring-rui-secondary/50 dark:inset-ring-rui-secondary' } },\n    { color: 'error', variant: 'outlined', class: { root: 'inset-ring-rui-error/50' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'inset-ring-rui-warning/50' } },\n    { color: 'info', variant: 'outlined', class: { root: 'inset-ring-rui-info/50' } },\n    { color: 'success', variant: 'outlined', class: { root: 'inset-ring-rui-success/50' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'xs', class: { root: 'px-1' } },\n    { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n    { variant: 'text', size: 'xl', class: { root: 'px-2.5' } },\n    { variant: 'text', size: '2xl', class: { root: 'px-2.5' } },\n    { variant: 'fab', size: 'xs', class: { root: 'py-1 px-1' } },\n    { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n    { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n    { variant: 'list', size: 'xs', class: { root: 'px-3 py-0.5' } },\n    // 32px: a dense select's option row, which `getOptionHeight` reserves in the virtual list\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-2' } },\n    // Icon-only sizing, per the padding and glyph table on buttonStyles above\n    { icon: true, class: { root: 'p-2 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'xs', class: { root: 'p-[0.1875rem] ![--rui-icon-size:0.875rem]' } },\n    { icon: true, size: 'sm', class: { root: 'p-1 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'lg', class: { root: 'p-1.5 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: 'xl', class: { root: 'p-2 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: '2xl', class: { root: 'p-2 ![--rui-icon-size:1.75rem]' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n  ],\n  compoundSlots: [\n    // In dark a status color's `main` is a text tone, so a filled status button takes the deep `darker` fill\n    { slots: ['root'], color: 'error', variant: ['default', 'fab'], class: 'dark:bg-rui-error-darker dark:active:bg-rui-error-darker/75' },\n    { slots: ['root'], color: 'warning', variant: ['default', 'fab'], class: 'dark:bg-rui-warning-darker dark:active:bg-rui-warning-darker/75' },\n    { slots: ['root'], color: 'info', variant: ['default', 'fab'], class: 'dark:bg-rui-info-darker dark:active:bg-rui-info-darker/75' },\n    { slots: ['root'], color: 'success', variant: ['default', 'fab'], class: 'dark:bg-rui-success-darker dark:active:bg-rui-success-darker/75' },\n    // Dark mode active outlined/text: the same quiet tint, with the lighter tone as the label\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary/[0.16] dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary/[0.16] dark:text-rui-secondary-lighter' },\n    { slots: ['root'], color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-error/[0.16] dark:text-rui-error-lighter' },\n    { slots: ['root'], color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-warning/[0.16] dark:text-rui-warning-lighter' },\n    { slots: ['root'], color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-info/[0.16] dark:text-rui-info-lighter' },\n    { slots: ['root'], color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-success/[0.16] dark:text-rui-success-lighter' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    color: 'grey',\n    active: false,\n  },\n});\n"],"mappings":"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"}

package/dist/components/buttons/button-group/RuiButtonGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
+import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
 import { cn, tv } from "../../../utils/tv.js";
 import { ButtonGroupKey } from "./button-group-context.js";
 import { computed, createElementBlock, defineComponent, mergeModels, mergeProps, openBlock, provide, renderSlot, unref, useModel } from "vue";
-import { get, set } from "@vueuse/shared";
 //#region src/components/buttons/button-group/RuiButtonGroup.vue?vue&type=script&setup=true&lang.ts
 var RuiButtonGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiButtonGroup",

package/dist/components/calendar/RuiCalendar.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,10 @@
+import { get, isDefined, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import { useRotkiTheme } from "../../composables/theme.js";
 import { tv } from "../../utils/tv.js";
 import { CalendarStateSymbol } from "./state.js";
 import RuiCalendarGrid_default from "./RuiCalendarGrid.js";
 import RuiCalendarHeader_default from "./RuiCalendarHeader.js";
 import { computed, createElementBlock, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, provide, ref, useModel, watch } from "vue";
-import { get, isDefined, set } from "@vueuse/core";
 //#region src/components/calendar/RuiCalendar.vue?vue&type=script&setup=true&lang.ts
 var RuiCalendar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiCalendar",

package/dist/components/calendar/RuiCalendarGrid.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
+import { get, isDefined, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import { tv } from "../../utils/tv.js";
 import { CalendarStateSymbol, getDaysOfWeek } from "./state.js";
 import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, inject, mergeModels, nextTick, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useModel, useTemplateRef, watch, withModifiers } from "vue";
-import { get, isDefined, set } from "@vueuse/core";
 //#region src/components/calendar/RuiCalendarGrid.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "w-full p-2 pt-0" };
 var _hoisted_2 = {

package/dist/components/calendar/RuiCalendarHeader.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
+import { get, isDefined, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import RuiButton_default from "../buttons/button/RuiButton.js";
 import { CalendarStateSymbol } from "./state.js";
 import RuiCalendarMenu_default from "./RuiCalendarMenu.js";
 import { computed, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeModels, openBlock, ref, toDisplayString, useModel, withCtx, withModifiers } from "vue";
-import { get, isDefined, set } from "@vueuse/core";
 //#region src/components/calendar/RuiCalendarHeader.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex items-center justify-between px-3 py-2" };
 var _hoisted_2 = { class: "flex min-w-0 flex-1 justify-center" };

package/dist/components/calendar/RuiCalendarMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,4 @@
+import { get, isDefined, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import { tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import RuiButton_default from "../buttons/button/RuiButton.js";
@@ -5,7 +6,6 @@ import { CalendarStateSymbol, getShortMonthNames } from "./state.js";
 import { Placement } from "../../composables/floating.js";
 import RuiMenu_default from "../overlays/menu/RuiMenu.js";
 import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeModels, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useModel, watch, withCtx, withModifiers } from "vue";
-import { get, isDefined, set } from "@vueuse/core";
 //#region src/components/calendar/RuiCalendarMenu.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "w-64 overflow-hidden" };
 var _hoisted_2 = { class: "flex items-center justify-between gap-1 border-b border-rui-divider px-1 pb-1 text-sm font-medium text-rui-text" };

package/dist/components/chips/RuiChip.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
+import { get, objectOmit } from "../../vendor/@vueuse/shared/dist/index.js";
 import { cn, tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from "./chip-props.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, useSlots, useTemplateRef, withModifiers } from "vue";
-import { get, objectOmit } from "@vueuse/shared";
 //#region src/components/chips/RuiChip.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-variant",

package/dist/components/color-picker/RuiColorBoard.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
+import { clamp, get, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import { cn, tv } from "../../utils/tv.js";
 import { useElementDrag } from "./utils.js";
 import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, onMounted, openBlock, reactive, ref, unref, useTemplateRef, watch } from "vue";
-import { clamp, get, set } from "@vueuse/shared";
 import tinycolor from "tinycolor2";
 //#region src/components/color-picker/RuiColorBoard.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-valuetext"];

package/dist/components/color-picker/RuiColorDisplay.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
+import { useClipboard } from "../../vendor/@vueuse/core/dist/index.js";
 import RuiTooltip_default from "../overlays/tooltip/RuiTooltip.js";
 import { createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, unref, withCtx } from "vue";
-import { useClipboard } from "@vueuse/core";
 //#region src/components/color-picker/RuiColorDisplay.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,

package/dist/components/color-picker/RuiColorHue.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
+import { clamp, get, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import { cn, tv } from "../../utils/tv.js";
 import { roundTwoDecimal, useElementDrag } from "./utils.js";
 import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, onMounted, openBlock, ref, unref, useModel, useTemplateRef, watch } from "vue";
-import { clamp, get, set } from "@vueuse/shared";
 //#region src/components/color-picker/RuiColorHue.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-valuenow"];
 var MAX_HUE = 360;

package/dist/components/color-picker/RuiColorInput.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,8 @@
+import { clamp, get, set, useDebounceFn } from "../../vendor/@vueuse/shared/dist/index.js";
 import RuiTextField_default from "../forms/text-field/RuiTextField.js";
 import RuiTab_default from "../tabs/tab/RuiTab.js";
 import RuiTabs_default from "../tabs/tabs/RuiTabs.js";
 import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, reactive, ref, renderList, unref, useModel, watch, withCtx } from "vue";
-import { useDebounceFn } from "@vueuse/core";
-import { clamp, get as get$1, set as set$1 } from "@vueuse/shared";
 import tinycolor from "tinycolor2";
 //#region src/components/color-picker/RuiColorInput.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
@@ -35,9 +34,9 @@ var RuiColorInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		];
 		const inputType = ref("hex");
 		const state = reactive({
-			color: get$1(modelValue),
-			hex: get$1(modelValue).hex,
-			rgb: get$1(modelValue).rgb
+			color: get(modelValue),
+			hex: get(modelValue).hex,
+			rgb: get(modelValue).rgb
 		});
 		function applyRgbValue(value, key) {
 			if (!state.rgb || !state.color) return;
@@ -60,7 +59,7 @@ var RuiColorInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				if (tinycolor(hex).isValid() && VALID_HEX_LENGTHS.includes(hex.length)) state.color.hex = hex;
 				else state.color.hex = DEFAULT_HEX;
 			} else if (key !== void 0) applyRgbValue(value, key);
-			set$1(modelValue, state.color);
+			set(modelValue, state.color);
 		}, 100);
 		const onInputChange = useDebounceFn((format, value, key) => {
 			if (!value) return;
@@ -68,16 +67,16 @@ var RuiColorInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				const hex = value.replace("#", "");
 				if (tinycolor(hex).isValid() && state.color && hex.length === 6) state.color.hex = hex;
 			} else if (key !== void 0) applyRgbValue(value, key);
-			set$1(modelValue, state.color);
+			set(modelValue, state.color);
 		}, 300);
 		function onInputTypeChange(value) {
-			if (value === "hex" || value === "rgb") set$1(inputType, value);
+			if (value === "hex" || value === "rgb") set(inputType, value);
 		}
 		watch(() => {
-			const color = get$1(modelValue);
+			const color = get(modelValue);
 			return [color.hex, ...color.rgb];
 		}, () => {
-			const color = get$1(modelValue);
+			const color = get(modelValue);
 			state.color = color;
 			state.hex = color.hex;
 			state.rgb = color.rgb;

package/dist/components/color-picker/RuiColorInput.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorInput.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, ColorFormat } from './utils';\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiTab from '@/components/tabs/tab/RuiTab.vue';\nimport RuiTabs from '@/components/tabs/tabs/RuiTabs.vue';\n\ndefineOptions({\n  name: 'RuiColorInput',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<Color>({ required: true });\n\nconst MAX_RGB = 255;\nconst VALID_HEX_LENGTHS = [3, 4, 6];\nconst DEFAULT_HEX = '000000';\nconst RGB_CHANNELS = ['Red', 'Green', 'Blue'];\n\nconst inputType = ref<ColorFormat>('hex');\nconst state = reactive({\n  color: get(modelValue),\n  hex: get(modelValue).hex,\n  rgb: get(modelValue).rgb,\n});\n\nfunction applyRgbValue(value: string, key: number): void {\n  if (!state.rgb || !state.color)\n    return;\n\n  const clamped = clamp(Number(value), 0, MAX_RGB);\n  state.rgb[key] = clamped;\n  const [r, g, b] = state.rgb;\n  state.color.hex = tinycolor({ r, g, b }).toHex();\n}\n\nconst onBlurChange = useDebounceFn((format: ColorFormat, event: Event, key?: number) => {\n  if (!state.color)\n    return;\n\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n\n  const value = target.value;\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && VALID_HEX_LENGTHS.includes(hex.length))\n      state.color.hex = hex;\n    else state.color.hex = DEFAULT_HEX;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 100);\n\nconst onInputChange = useDebounceFn((format: ColorFormat, value: string, key?: number) => {\n  if (!value)\n    return;\n\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && state.color && hex.length === 6)\n      state.color.hex = hex;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 300);\n\nfunction onInputTypeChange(value: string | number): void {\n  if (value === 'hex' || value === 'rgb')\n    set(inputType, value);\n}\n\nwatch(\n  () => {\n    const color = get(modelValue);\n    return [color.hex, ...color.rgb] as const;\n  },\n  () => {\n    const color = get(modelValue);\n    state.color = color;\n    state.hex = color.hex;\n    state.rgb = color.rgb;\n  },\n);\n</script>\n\n<template>\n  <div\n    data-id=\"color-input\"\n    class=\"flex flex-col gap-2 w-full\"\n    v-bind=\"$attrs\"\n  >\n    <!-- the format is a choice between two views of one value, which is what a segmented control is for -->\n    <RuiTabs\n      :model-value=\"inputType\"\n      variant=\"segmented\"\n      grow\n      data-id=\"color-format\"\n      @update:model-value=\"onInputTypeChange($event)\"\n    >\n      <RuiTab value=\"hex\">\n        Hex\n      </RuiTab>\n      <RuiTab value=\"rgb\">\n        RGB\n      </RuiTab>\n    </RuiTabs>\n    <RuiTextField\n      v-if=\"inputType === 'hex'\"\n      v-model=\"state.hex\"\n      class=\"w-full [&_input]:uppercase\"\n      maxlength=\"6\"\n      color=\"primary\"\n      aria-label=\"Hex color\"\n      dense\n      hide-details\n      @update:model-value=\"onInputChange(inputType, $event)\"\n      @blur=\"onBlurChange(inputType, $event)\"\n    >\n      <template #prepend>\n        <span class=\"text-rui-text-secondary\">#</span>\n      </template>\n    </RuiTextField>\n    <div\n      v-else\n      class=\"flex gap-1\"\n    >\n      <RuiTextField\n        v-for=\"(v, i) in state.rgb\"\n        :key=\"i\"\n        :model-value=\"v.toString()\"\n        class=\"[&_input]:text-center w-full\"\n        maxlength=\"3\"\n        color=\"primary\"\n        :aria-label=\"RGB_CHANNELS[i]\"\n        dense\n        hide-details\n        @update:model-value=\"onInputChange(inputType, $event, i)\"\n        @blur=\"onBlurChange(inputType, $event, i)\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiColorInput.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, ColorFormat } from './utils';\nimport { clamp } from '@vueuse/shared';\nimport tinycolor from 'tinycolor2';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiTab from '@/components/tabs/tab/RuiTab.vue';\nimport RuiTabs from '@/components/tabs/tabs/RuiTabs.vue';\n\ndefineOptions({\n  name: 'RuiColorInput',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<Color>({ required: true });\n\nconst MAX_RGB = 255;\nconst VALID_HEX_LENGTHS = [3, 4, 6];\nconst DEFAULT_HEX = '000000';\nconst RGB_CHANNELS = ['Red', 'Green', 'Blue'];\n\nconst inputType = ref<ColorFormat>('hex');\nconst state = reactive({\n  color: get(modelValue),\n  hex: get(modelValue).hex,\n  rgb: get(modelValue).rgb,\n});\n\nfunction applyRgbValue(value: string, key: number): void {\n  if (!state.rgb || !state.color)\n    return;\n\n  const clamped = clamp(Number(value), 0, MAX_RGB);\n  state.rgb[key] = clamped;\n  const [r, g, b] = state.rgb;\n  state.color.hex = tinycolor({ r, g, b }).toHex();\n}\n\nconst onBlurChange = useDebounceFn((format: ColorFormat, event: Event, key?: number) => {\n  if (!state.color)\n    return;\n\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n\n  const value = target.value;\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && VALID_HEX_LENGTHS.includes(hex.length))\n      state.color.hex = hex;\n    else state.color.hex = DEFAULT_HEX;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 100);\n\nconst onInputChange = useDebounceFn((format: ColorFormat, value: string, key?: number) => {\n  if (!value)\n    return;\n\n  if (format === 'hex') {\n    const hex = value.replace('#', '');\n    if (tinycolor(hex).isValid() && state.color && hex.length === 6)\n      state.color.hex = hex;\n  }\n  else if (key !== undefined) {\n    applyRgbValue(value, key);\n  }\n\n  set(modelValue, state.color);\n}, 300);\n\nfunction onInputTypeChange(value: string | number): void {\n  if (value === 'hex' || value === 'rgb')\n    set(inputType, value);\n}\n\nwatch(\n  () => {\n    const color = get(modelValue);\n    return [color.hex, ...color.rgb] as const;\n  },\n  () => {\n    const color = get(modelValue);\n    state.color = color;\n    state.hex = color.hex;\n    state.rgb = color.rgb;\n  },\n);\n</script>\n\n<template>\n  <div\n    data-id=\"color-input\"\n    class=\"flex flex-col gap-2 w-full\"\n    v-bind=\"$attrs\"\n  >\n    <!-- the format is a choice between two views of one value, which is what a segmented control is for -->\n    <RuiTabs\n      :model-value=\"inputType\"\n      variant=\"segmented\"\n      grow\n      data-id=\"color-format\"\n      @update:model-value=\"onInputTypeChange($event)\"\n    >\n      <RuiTab value=\"hex\">\n        Hex\n      </RuiTab>\n      <RuiTab value=\"rgb\">\n        RGB\n      </RuiTab>\n    </RuiTabs>\n    <RuiTextField\n      v-if=\"inputType === 'hex'\"\n      v-model=\"state.hex\"\n      class=\"w-full [&_input]:uppercase\"\n      maxlength=\"6\"\n      color=\"primary\"\n      aria-label=\"Hex color\"\n      dense\n      hide-details\n      @update:model-value=\"onInputChange(inputType, $event)\"\n      @blur=\"onBlurChange(inputType, $event)\"\n    >\n      <template #prepend>\n        <span class=\"text-rui-text-secondary\">#</span>\n      </template>\n    </RuiTextField>\n    <div\n      v-else\n      class=\"flex gap-1\"\n    >\n      <RuiTextField\n        v-for=\"(v, i) in state.rgb\"\n        :key=\"i\"\n        :model-value=\"v.toString()\"\n        class=\"[&_input]:text-center w-full\"\n        maxlength=\"3\"\n        color=\"primary\"\n        :aria-label=\"RGB_CHANNELS[i]\"\n        dense\n        hide-details\n        @update:model-value=\"onInputChange(inputType, $event, i)\"\n        @blur=\"onBlurChange(inputType, $event, i)\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/color-picker/RuiColorPicker.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,4 @@
+import { get, set, whenever } from "../../vendor/@vueuse/shared/dist/index.js";
 import { cn, tv } from "../../utils/tv.js";
 import { Color } from "./utils.js";
 import RuiColorBoard_default from "./RuiColorBoard.js";
@@ -5,8 +6,6 @@ import RuiColorDisplay_default from "./RuiColorDisplay.js";
 import RuiColorHue_default from "./RuiColorHue.js";
 import RuiColorInput_default from "./RuiColorInput.js";
 import { createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, reactive, unref, useModel, watch } from "vue";
-import { whenever } from "@vueuse/core";
-import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/color-picker/RuiColorPicker.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex flex-col gap-5 p-4" };
 var _hoisted_2 = { class: "flex items-center gap-4" };
@@ -21,7 +20,7 @@ var RuiColorPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
-		const state = reactive({ color: new Color(get$1(modelValue)) });
+		const state = reactive({ color: new Color(get(modelValue)) });
 		function onBoardChange({ saturation, brightness }) {
 			state.color.saturation = saturation;
 			state.color.brightness = brightness;
@@ -30,7 +29,7 @@ var RuiColorPicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			if (state.color.hex !== value) state.color = new Color(value);
 		});
 		watch(() => state.color.hex, (hex) => {
-			set$1(modelValue, hex);
+			set(modelValue, hex);
 		}, { immediate: true });
 		const rootStyle = tv({ base: "relative select-none" });
 		return (_ctx, _cache) => {

package/dist/components/color-picker/RuiColorPicker.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiColorPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn, tv } from '@/utils/tv';\nimport { Color } from './utils';\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n  saturation,\n  brightness,\n}: {\n  saturation: number;\n  brightness: number;\n}): void {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n);\n\nwatch(\n  () => state.color.hex,\n  (hex: string) => {\n    set(modelValue, hex);\n  },\n  { immediate: true },\n);\n\nconst rootStyle = tv({ base: 'relative select-none' });\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,aAAa,SAAmB,SAAA,YAAgB;EAEtD,MAAM,QAAQ,SAAS,EACrB,OAAO,IAAI,MAAM,MAAI,UAAU,CAAC,EAClC,CAAC;EAED,SAAS,cAAc,EACrB,YACA,cAIO;GACP,MAAM,MAAM,aAAa;GACzB,MAAM,MAAM,aAAa;EAC3B;EAEA,SACE,aACC,UAAkB;GACjB,IAAI,MAAM,MAAM,QAAQ,OACtB,MAAM,QAAQ,IAAI,MAAM,KAAK;EACjC,CACF;EAEA,YACQ,MAAM,MAAM,MACjB,QAAgB;GACf,MAAI,YAAY,GAAG;EACrB,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,uBAAuB,CAAC;;GAInD,OAAA,UAAA,GAAA,mBAsBM,OAtBN,WAsBM;IArBJ,MAAK;IACL,cAAW;IACX,WAAQ;IACP,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAACA,KAAAA,OAAO,KAAK,EAAA,CAAA;GAC7BA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAErC,YAGE,uBAAA;IAFC,OAAO,MAAA,KAAA,CAAK,CAAC;IACb,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,cAAc,MAAM;GAErC,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GAAA,mBAUM,OAVN,YAUM,CATJ,mBAMM,OANN,YAMM,CALJ,YAAkD,yBAAA,EAAhC,OAAO,MAAA,KAAA,CAAK,CAAC,MAAM,UAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GACrC,YAGE,qBAAA;IAFS,YAAA,MAAA,KAAA,CAAK,CAAC,MAAM;IAAZ,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,MAAM,MAAG;IACxB,OAAM;GAIV,GAAA,MAAA,GAAA,CAAA,YAAA,CAAA,CAAA,CAAA,GAAA,YAAuC,uBAAA;IAAf,YAAA,MAAA,KAAA,CAAK,CAAC;IAAN,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,QAAK"}
+{"version":3,"file":"RuiColorPicker.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/color-picker/RuiColorPicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n// Inspired by https://github.com/aesoper101/vue3-colorpicker/\nimport RuiColorBoard from '@/components/color-picker/RuiColorBoard.vue';\nimport RuiColorDisplay from '@/components/color-picker/RuiColorDisplay.vue';\nimport RuiColorHue from '@/components/color-picker/RuiColorHue.vue';\nimport RuiColorInput from '@/components/color-picker/RuiColorInput.vue';\nimport { cn, tv } from '@/utils/tv';\nimport { Color } from './utils';\n\ndefineOptions({\n  name: 'RuiColorPicker',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ default: '' });\n\nconst state = reactive({\n  color: new Color(get(modelValue)),\n});\n\nfunction onBoardChange({\n  saturation,\n  brightness,\n}: {\n  saturation: number;\n  brightness: number;\n}): void {\n  state.color.saturation = saturation;\n  state.color.brightness = brightness;\n}\n\nwhenever(\n  modelValue,\n  (value: string) => {\n    if (state.color.hex !== value)\n      state.color = new Color(value);\n  },\n);\n\nwatch(\n  () => state.color.hex,\n  (hex: string) => {\n    set(modelValue, hex);\n  },\n  { immediate: true },\n);\n\nconst rootStyle = tv({ base: 'relative select-none' });\n</script>\n\n<template>\n  <div\n    role=\"application\"\n    aria-label=\"Color picker\"\n    data-id=\"color-picker\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <RuiColorBoard\n      :color=\"state.color\"\n      @update:board=\"onBoardChange($event)\"\n    />\n    <div class=\"flex flex-col gap-5 p-4\">\n      <div class=\"flex items-center gap-4\">\n        <RuiColorDisplay :color=\"state.color.hexString\" />\n        <RuiColorHue\n          v-model=\"state.color.hue\"\n          class=\"flex-1\"\n        />\n      </div>\n\n      <RuiColorInput v-model=\"state.color\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAcA,MAAM,aAAa,SAAmB,SAAA,YAAgB;EAEtD,MAAM,QAAQ,SAAS,EACrB,OAAO,IAAI,MAAM,IAAI,UAAU,CAAC,EAClC,CAAC;EAED,SAAS,cAAc,EACrB,YACA,cAIO;GACP,MAAM,MAAM,aAAa;GACzB,MAAM,MAAM,aAAa;EAC3B;EAEA,SACE,aACC,UAAkB;GACjB,IAAI,MAAM,MAAM,QAAQ,OACtB,MAAM,QAAQ,IAAI,MAAM,KAAK;EACjC,CACF;EAEA,YACQ,MAAM,MAAM,MACjB,QAAgB;GACf,IAAI,YAAY,GAAG;EACrB,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,MAAM,YAAY,GAAG,EAAE,MAAM,uBAAuB,CAAC;;GAInD,OAAA,UAAA,GAAA,mBAsBM,OAtBN,WAsBM;IArBJ,MAAK;IACL,cAAW;IACX,WAAQ;IACP,OAAO,MAAA,SAAA,CAAS,CAAA,EAAA,OAAU,MAAA,EAAA,CAAE,CAACA,KAAAA,OAAO,KAAK,EAAA,CAAA;GAC7BA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAErC,YAGE,uBAAA;IAFC,OAAO,MAAA,KAAA,CAAK,CAAC;IACb,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,cAAc,MAAM;GAErC,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GAAA,mBAUM,OAVN,YAUM,CATJ,mBAMM,OANN,YAMM,CALJ,YAAkD,yBAAA,EAAhC,OAAO,MAAA,KAAA,CAAK,CAAC,MAAM,UAAA,GAAA,MAAA,GAAA,CAAA,OAAA,CAAA,GACrC,YAGE,qBAAA;IAFS,YAAA,MAAA,KAAA,CAAK,CAAC,MAAM;IAAZ,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,MAAM,MAAG;IACxB,OAAM;GAIV,GAAA,MAAA,GAAA,CAAA,YAAA,CAAA,CAAA,CAAA,GAAA,YAAuC,uBAAA;IAAf,YAAA,MAAA,KAAA,CAAK,CAAC;IAAN,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,KAAA,CAAK,CAAC,QAAK"}