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

package/dist/components/alerts/RuiAlert.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAlert.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../src/components/alerts/RuiAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  title?: string;\n  description?: string;\n  type?: ContextColorsType;\n  icon?: RuiIcons;\n  variant?: 'default' | 'filled' | 'outlined';\n  actionText?: string;\n  closeable?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAlert',\n  inheritAttrs: false,\n});\n\nconst {\n  title = '',\n  description = '',\n  type = 'primary',\n  icon = undefined,\n  variant = 'default',\n  actionText = '',\n  closeable = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  action: [];\n  close: [];\n}>();\n\ndefineSlots<{\n  title?: () => any;\n  default?: () => any;\n}>();\n\nconst alertStyles = tv({\n  slots: {\n    root: 'px-4 py-2.5 rounded flex space-x-4',\n    content: 'flex space-x-3 py-1 flex-grow',\n    icon: '',\n    texts: 'space-y-1 flex-grow',\n    action: '',\n    close: '',\n  },\n  variants: {\n    variant: {\n      default: {},\n      filled: {\n        icon: '!text-rui-dark-text',\n        texts: '!text-rui-dark-text',\n        action: '!text-rui-dark-text',\n        close: '!text-rui-dark-text',\n      },\n      outlined: { root: 'border m-[-1px] bg-white dark:bg-black' },\n    },\n    type: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Default variant backgrounds\n    {\n      variant: 'default',\n      type: 'primary',\n      class: { root: 'bg-rui-primary bg-tint-[.9] color-mix-supported:bg-rui-primary-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-primary-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'secondary',\n      class: { root: 'bg-rui-secondary bg-tint-[.9] color-mix-supported:bg-rui-secondary-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-secondary-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'error',\n      class: { root: 'bg-rui-error bg-tint-[.9] color-mix-supported:bg-rui-error-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-error-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'warning',\n      class: { root: 'bg-rui-warning bg-tint-[.9] color-mix-supported:bg-rui-warning-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-warning-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'info',\n      class: { root: 'bg-rui-info bg-tint-[.9] color-mix-supported:bg-rui-info-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-info-shade/[.9]' },\n    },\n    {\n      variant: 'default',\n      type: 'success',\n      class: { root: 'bg-rui-success bg-tint-[.9] color-mix-supported:bg-rui-success-tint/[.9] dark:bg-shade-[.9] dark:color-mix-supported:bg-rui-success-shade/[.9]' },\n    },\n\n    // Filled variant backgrounds\n    { variant: 'filled', type: 'primary', class: { root: 'bg-rui-primary' } },\n    { variant: 'filled', type: 'secondary', class: { root: 'bg-rui-secondary' } },\n    { variant: 'filled', type: 'error', class: { root: 'bg-rui-error' } },\n    { variant: 'filled', type: 'warning', class: { root: 'bg-rui-warning' } },\n    { variant: 'filled', type: 'info', class: { root: 'bg-rui-info' } },\n    { variant: 'filled', type: 'success', class: { root: 'bg-rui-success' } },\n\n    // Filled dark text override for warning/success/info\n    {\n      variant: 'filled',\n      type: ['warning', 'success', 'info'],\n      class: { root: 'dark:!text-rui-light-text' },\n    },\n\n    // Outlined variant borders\n    { variant: 'outlined', type: 'primary', class: { root: 'border-rui-primary' } },\n    { variant: 'outlined', type: 'secondary', class: { root: 'border-rui-secondary' } },\n    { variant: 'outlined', type: 'error', class: { root: 'border-rui-error' } },\n    { variant: 'outlined', type: 'warning', class: { root: 'border-rui-warning' } },\n    { variant: 'outlined', type: 'info', class: { root: 'border-rui-info' } },\n    { variant: 'outlined', type: 'success', class: { root: 'border-rui-success' } },\n\n  ],\n  compoundSlots: [\n    // Content text colors for default + outlined (shared across all content slots)\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'primary',\n      class: 'text-rui-primary text-shade-[.6] color-mix-supported:text-rui-primary-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-primary-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'secondary',\n      class: 'text-rui-secondary text-shade-[.6] color-mix-supported:text-rui-secondary-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-secondary-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'error',\n      class: 'text-rui-error text-shade-[.6] color-mix-supported:text-rui-error-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-error-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'warning',\n      class: 'text-rui-warning text-shade-[.6] color-mix-supported:text-rui-warning-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-warning-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'info',\n      class: 'text-rui-info text-shade-[.6] color-mix-supported:text-rui-info-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-info-tint/[.6]',\n    },\n    {\n      slots: ['icon', 'texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      type: 'success',\n      class: 'text-rui-success text-shade-[.6] color-mix-supported:text-rui-success-shade/[.6] color-mix-supported:animate-none dark:text-tint-[.6] dark:color-mix-supported:text-rui-success-tint/[.6]',\n    },\n\n    // Icon-only dark mode base color\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'primary', class: 'dark:text-rui-primary' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'secondary', class: 'dark:text-rui-secondary' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'error', class: 'dark:text-rui-error' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'warning', class: 'dark:text-rui-warning' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'info', class: 'dark:text-rui-info' },\n    { slots: ['icon'], variant: ['default', 'outlined'], type: 'success', class: 'dark:text-rui-success' },\n  ],\n});\n\nconst ui = computed<ReturnType<typeof alertStyles>>(() => alertStyles({ variant, type }));\n\nconst usedIcon = computed<RuiIcons | undefined>(() => {\n  if (icon)\n    return icon;\n\n  const iconMap: Record<ContextColorsType, RuiIcons | undefined> = {\n    primary: undefined,\n    secondary: undefined,\n    warning: 'lu-triangle-alert',\n    info: 'lu-info',\n    error: 'lu-circle-alert',\n    success: 'lu-circle-check',\n  };\n\n  return iconMap[type];\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n    :data-variant=\"variant\"\n    :data-type=\"type\"\n  >\n    <div :class=\"ui.content()\">\n      <div\n        v-if=\"usedIcon\"\n        :class=\"ui.icon()\"\n      >\n        <RuiIcon\n          :name=\"usedIcon\"\n          size=\"22\"\n        />\n      </div>\n      <div :class=\"ui.texts()\">\n        <div\n          v-if=\"$slots.title || title\"\n          :class=\"{\n            'font-medium': !!title,\n          }\"\n        >\n          <slot name=\"title\">\n            {{ title }}\n          </slot>\n        </div>\n\n        <div\n          v-if=\"$slots.default || description\"\n          class=\"text-body-2\"\n        >\n          <slot>\n            {{ description }}\n          </slot>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"actionText\">\n      <RuiButton\n        variant=\"text\"\n        size=\"sm\"\n        :color=\"variant === 'filled' ? undefined : type\"\n        :class=\"ui.action()\"\n        data-id=\"alert-action\"\n        @click=\"emit('action')\"\n      >\n        {{ actionText }}\n      </RuiButton>\n    </div>\n    <div v-if=\"closeable\">\n      <RuiButton\n        :color=\"variant === 'filled' ? undefined : type\"\n        size=\"sm\"\n        icon\n        variant=\"text\"\n        :class=\"ui.close()\"\n        data-id=\"alert-close\"\n        @click=\"emit('close')\"\n      >\n        <RuiIcon\n          name=\"lu-x\"\n          size=\"20\"\n        />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiAlert.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots"],"sources":["../../../src/components/alerts/RuiAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  title?: string;\n  description?: string;\n  type?: ContextColorsType;\n  icon?: RuiIcons;\n  variant?: 'default' | 'filled' | 'outlined';\n  actionText?: string;\n  closeable?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAlert',\n  inheritAttrs: false,\n});\n\nconst {\n  title = '',\n  description = '',\n  type = 'primary',\n  icon = undefined,\n  variant = 'default',\n  actionText = '',\n  closeable = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  action: [];\n  close: [];\n}>();\n\nconst slots = defineSlots<{\n  title?: () => any;\n  default?: () => any;\n}>();\n\nconst alertStyles = tv({\n  slots: {\n    root: 'px-4 py-2.5 rounded-rui-panel flex between:ml-4 between:mr-0',\n    content: 'flex between:ml-3 between:mr-0 py-1 grow',\n    // as tall as the first line of text and centered in it, so the icon lines up however the text wraps\n    icon: 'flex shrink-0 items-center',\n    texts: 'between:mt-1 between:mb-0 grow',\n    action: '',\n    close: '',\n  },\n  variants: {\n    // the first line is the title's (24px) when there is one, else the description's (text-sm, 20px)\n    titled: {\n      true: { icon: 'h-6' },\n      false: { icon: 'h-5' },\n    },\n    variant: {\n      default: {},\n      filled: {\n        icon: 'text-rui-dark-text!',\n        texts: 'text-rui-dark-text!',\n        action: 'text-rui-dark-text!',\n        close: 'text-rui-dark-text!',\n      },\n      outlined: { root: 'border -m-px bg-transparent' },\n    },\n    /*\n     * Each type names its color once, as `--rui-alert`, and the variants mix from it. The tints\n     * and shades used to be paused CSS animations behind an `@supports (color-mix())` check that\n     * never matched (it is not a valid condition), so every browser took the animation; mixing\n     * directly gives the same colors without it.\n     */\n    type: {\n      primary: { root: '[--rui-alert:var(--rui-primary-main)]' },\n      secondary: { root: '[--rui-alert:var(--rui-secondary-main)]' },\n      // a status color's dark `main` is a text tone, so a filled alert takes the deep `darker` there\n      error: { root: '[--rui-alert:var(--rui-error-main)] [--rui-alert-fill:var(--rui-error-darker)]' },\n      warning: { root: '[--rui-alert:var(--rui-warning-main)] [--rui-alert-fill:var(--rui-warning-darker)]' },\n      info: { root: '[--rui-alert:var(--rui-info-main)] [--rui-alert-fill:var(--rui-info-darker)]' },\n      success: { root: '[--rui-alert:var(--rui-success-main)] [--rui-alert-fill:var(--rui-success-darker)]' },\n    },\n  },\n  compoundVariants: [\n    // A tint of the type's color with a hairline of it, which reads on any surface in either theme\n    {\n      variant: 'default',\n      class: { root: 'border -m-px bg-[color-mix(in_srgb,rgb(var(--rui-alert))_8%,transparent)] dark:bg-[color-mix(in_srgb,rgb(var(--rui-alert))_12%,transparent)] border-[color-mix(in_srgb,rgb(var(--rui-alert))_25%,transparent)]' },\n    },\n    { variant: 'filled', class: { root: 'bg-[rgb(var(--rui-alert))] dark:bg-[rgb(var(--rui-alert-fill,var(--rui-alert)))]' } },\n    // without a tint behind it, the outlined alert carries its type in the icon too\n    { variant: 'outlined', class: { root: 'border-[rgb(var(--rui-alert))]', icon: 'text-[rgb(var(--rui-alert))]' } },\n  ],\n  compoundSlots: [\n    {\n      slots: ['texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n    },\n    {\n      slots: ['icon'],\n      variant: 'default',\n      class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n    },\n  ],\n});\n\nconst ui = computed<ReturnType<typeof alertStyles>>(() => alertStyles({ variant, type, titled: !!slots.title || !!title }));\n\nconst usedIcon = computed<RuiIcons | undefined>(() => {\n  if (icon)\n    return icon;\n\n  const iconMap: Record<ContextColorsType, RuiIcons | undefined> = {\n    primary: undefined,\n    secondary: undefined,\n    warning: 'lu-triangle-alert',\n    info: 'lu-info',\n    error: 'lu-circle-alert',\n    success: 'lu-circle-check',\n  };\n\n  return iconMap[type];\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n    :data-variant=\"variant\"\n    :data-type=\"type\"\n  >\n    <div :class=\"ui.content()\">\n      <div\n        v-if=\"usedIcon\"\n        :class=\"ui.icon()\"\n      >\n        <RuiIcon\n          :name=\"usedIcon\"\n          size=\"20\"\n        />\n      </div>\n      <div :class=\"ui.texts()\">\n        <div\n          v-if=\"$slots.title || title\"\n          :class=\"{\n            'font-medium': !!title,\n          }\"\n        >\n          <slot name=\"title\">\n            {{ title }}\n          </slot>\n        </div>\n\n        <div\n          v-if=\"$slots.default || description\"\n          class=\"text-body-2\"\n        >\n          <slot>\n            {{ description }}\n          </slot>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"actionText\">\n      <RuiButton\n        variant=\"text\"\n        size=\"sm\"\n        :color=\"variant === 'filled' ? undefined : type\"\n        :class=\"ui.action()\"\n        data-id=\"alert-action\"\n        @click=\"emit('action')\"\n      >\n        {{ actionText }}\n      </RuiButton>\n    </div>\n    <div v-if=\"closeable\">\n      <RuiButton\n        :color=\"variant === 'filled' ? undefined : type\"\n        size=\"sm\"\n        icon\n        variant=\"text\"\n        :class=\"ui.close()\"\n        data-id=\"alert-close\"\n        @click=\"emit('close')\"\n      >\n        <RuiIcon\n          name=\"lu-x\"\n          size=\"20\"\n        />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiAvatar.js","names":[],"sources":["../../../src/components/avatars/RuiAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { get, set } from '@vueuse/shared';\nimport {\n  type AvatarSize,\n  type AvatarVariant,\n  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport { useAvatarGroup } from '@/components/avatars/use-avatar-group';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  src?: string | null;\n  alt?: string;\n  text?: string | null;\n  icon?: RuiIcons | null;\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  color?: 'default' | ContextColorsType;\n  loading?: 'lazy' | 'eager';\n}\n\ndefineOptions({\n  name: 'RuiAvatar',\n});\n\nconst {\n  src = null,\n  alt = '',\n  text = null,\n  icon = null,\n  size,\n  variant,\n  color = 'default',\n  loading = 'lazy',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  load: [event: Event];\n  error: [event: Event];\n}>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n}>();\n\nconst group = useAvatarGroup();\n\nconst resolvedSize = computed<AvatarSize | number>(() => {\n  if (size !== undefined)\n    return size;\n  if (group)\n    return get(group).size;\n  return 'md';\n});\n\nconst resolvedVariant = computed<AvatarVariant>(() => {\n  if (variant !== undefined)\n    return variant;\n  if (group)\n    return get(group).variant;\n  return 'circular';\n});\n\nconst sizeToken = computed<AvatarSize | undefined>(() => {\n  const value = get(resolvedSize);\n  return typeof value === 'string' ? value : undefined;\n});\n\nconst sizePx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\nconst iconPx = computed<number>(() => resolveAvatarIconPx(get(resolvedSize)));\n\nconst errored = ref<boolean>(false);\n\nwatch(() => src, () => {\n  set(errored, false);\n});\n\nconst initials = computed<string>(() => {\n  const explicit = computeInitials(text ?? undefined);\n  if (explicit)\n    return explicit;\n  return computeInitials(alt);\n});\n\ntype DisplayMode = 'image' | 'slot' | 'initials' | 'icon' | 'empty';\n\nconst displayMode = computed<DisplayMode>(() => {\n  if (src && !get(errored))\n    return 'image';\n  if (slots.default)\n    return 'slot';\n  if (icon)\n    return 'icon';\n  if (get(initials))\n    return 'initials';\n  return 'empty';\n});\n\nconst decorative = computed<boolean>(() => alt === '' && !text);\n\nconst ariaLabel = computed<string | undefined>(() => {\n  if (get(displayMode) === 'image')\n    return undefined;\n  if (get(decorative))\n    return undefined;\n  return text ?? alt ?? undefined;\n});\n\nconst rootStyle = computed<Record<string, string>>(() => {\n  const px = `${get(sizePx)}px`;\n  return { width: px, height: px };\n});\n\nconst avatarStyles = tv({\n  slots: {\n    root: 'relative inline-flex items-center justify-center shrink-0 overflow-hidden select-none font-medium align-middle',\n    image: 'w-full h-full object-cover',\n    fallback: 'w-full h-full flex items-center justify-center',\n    initials: 'uppercase leading-none',\n  },\n  variants: {\n    variant: {\n      circular: { root: 'rounded-full' },\n      rounded: { root: 'rounded-md' },\n      square: { root: 'rounded-none' },\n    },\n    color: {\n      default: { root: 'bg-rui-grey-200 text-rui-text dark:bg-rui-grey-800' },\n      primary: { root: 'bg-rui-primary text-white' },\n      secondary: { root: 'bg-rui-secondary text-white' },\n      error: { root: 'bg-rui-error text-white' },\n      warning: { root: 'bg-rui-warning text-white' },\n      info: { root: 'bg-rui-info text-white' },\n      success: { root: 'bg-rui-success text-white' },\n    },\n    size: {\n      'xs': { initials: 'text-[0.625rem]' },\n      'sm': { initials: 'text-[0.6875rem]' },\n      'md': { initials: 'text-sm' },\n      'lg': { initials: 'text-base' },\n      'xl': { initials: 'text-lg' },\n      '2xl': { initials: 'text-xl' },\n    },\n  },\n  compoundSlots: [\n    { slots: ['root'], color: ['warning', 'success', 'info'], class: 'dark:text-rui-light-text' },\n  ],\n  defaultVariants: {\n    variant: 'circular',\n    color: 'default',\n    size: 'md',\n  },\n});\n\nconst ui = computed<ReturnType<typeof avatarStyles>>(() => avatarStyles({\n  variant: get(resolvedVariant),\n  color,\n  size: get(sizeToken),\n}));\n\nfunction onLoad(event: Event): void {\n  set(errored, false);\n  emit('load', event);\n}\n\nfunction onError(event: Event): void {\n  set(errored, true);\n  emit('error', event);\n}\n</script>\n\n<template>\n  <span\n    :class=\"ui.root()\"\n    :style=\"rootStyle\"\n    :role=\"displayMode === 'image' ? undefined : 'img'\"\n    :aria-label=\"ariaLabel\"\n    :data-id=\"$attrs['data-id'] ?? 'avatar-root'\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-color=\"color\"\n  >\n    <img\n      v-if=\"displayMode === 'image' && src\"\n      :class=\"ui.image()\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :loading=\"loading\"\n      :width=\"sizePx\"\n      :height=\"sizePx\"\n      data-id=\"avatar-image\"\n      @load=\"onLoad($event)\"\n      @error=\"onError($event)\"\n    />\n    <span\n      v-else\n      :class=\"ui.fallback()\"\n      data-id=\"avatar-fallback\"\n      aria-hidden=\"true\"\n    >\n      <slot v-if=\"displayMode === 'slot'\" />\n      <span\n        v-else-if=\"displayMode === 'initials'\"\n        :class=\"ui.initials()\"\n        data-id=\"avatar-initials\"\n      >\n        {{ initials }}\n      </span>\n      <RuiIcon\n        v-else-if=\"displayMode === 'icon' && icon\"\n        :name=\"icon\"\n        :size=\"iconPx\"\n        data-id=\"avatar-icon\"\n      />\n      <span v-else>&nbsp;</span>\n    </span>\n  </span>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAvatar.js","names":[],"sources":["../../../src/components/avatars/RuiAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { get, set } from '@vueuse/shared';\nimport {\n  type AvatarSize,\n  type AvatarVariant,\n  computeAvatarText,\n  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\n  resolveAvatarTextSize,\n} from '@/components/avatars/avatar-props';\nimport { useAvatarGroup } from '@/components/avatars/use-avatar-group';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  src?: string | null;\n  alt?: string;\n  text?: string | null;\n  icon?: RuiIcons | null;\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  color?: 'default' | ContextColorsType;\n  loading?: 'lazy' | 'eager';\n}\n\ndefineOptions({\n  name: 'RuiAvatar',\n});\n\nconst {\n  src = null,\n  alt = '',\n  text = null,\n  icon = null,\n  size,\n  variant,\n  color = 'default',\n  loading = 'lazy',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  load: [event: Event];\n  error: [event: Event];\n}>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n}>();\n\nconst group = useAvatarGroup();\n\nconst resolvedSize = computed<AvatarSize | number>(() => {\n  if (size !== undefined)\n    return size;\n  if (group)\n    return get(group).size;\n  return 'md';\n});\n\nconst resolvedVariant = computed<AvatarVariant>(() => {\n  if (variant !== undefined)\n    return variant;\n  if (group)\n    return get(group).variant;\n  return 'circular';\n});\n\n// A numeric size borrows the text scale of the nearest token below it\nconst textSize = computed<AvatarSize>(() => resolveAvatarTextSize(get(resolvedSize)));\n\nconst sizePx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\nconst iconPx = computed<number>(() => resolveAvatarIconPx(get(resolvedSize)));\n\nconst errored = ref<boolean>(false);\n\nwatch(() => src, () => {\n  set(errored, false);\n});\n\nconst initials = computed<string>(() => {\n  const explicit = computeAvatarText(text);\n  if (explicit)\n    return explicit;\n  return computeInitials(alt);\n});\n\ntype DisplayMode = 'image' | 'slot' | 'initials' | 'icon' | 'empty';\n\nconst displayMode = computed<DisplayMode>(() => {\n  if (src && !get(errored))\n    return 'image';\n  if (slots.default)\n    return 'slot';\n  if (icon)\n    return 'icon';\n  if (get(initials))\n    return 'initials';\n  return 'empty';\n});\n\nconst decorative = computed<boolean>(() => alt === '' && !text);\n\nconst ariaLabel = computed<string | undefined>(() => {\n  if (get(displayMode) === 'image')\n    return undefined;\n  if (get(decorative))\n    return undefined;\n  return text ?? alt ?? undefined;\n});\n\nconst rootStyle = computed<Record<string, string>>(() => {\n  const px = `${get(sizePx)}px`;\n  return { width: px, height: px };\n});\n\nconst avatarStyles = tv({\n  slots: {\n    root: 'relative inline-flex items-center justify-center shrink-0 overflow-hidden select-none font-medium align-middle',\n    image: 'w-full h-full object-cover',\n    fallback: 'w-full h-full flex items-center justify-center',\n    initials: 'uppercase leading-none',\n  },\n  variants: {\n    variant: {\n      circular: { root: 'rounded-full' },\n      rounded: { root: 'rounded-rui-control' },\n      square: { root: 'rounded-none' },\n    },\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark\n    color: {\n      default: { root: 'bg-rui-neutral-200 text-rui-text dark:bg-rui-neutral-700' },\n      primary: { root: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { root: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { root: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { root: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { root: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { root: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // On the root so slot content (such as a group's `+N`) scales too\n    size: {\n      'xs': { root: 'text-[0.625rem]' },\n      'sm': { root: 'text-[0.6875rem]' },\n      'md': { root: 'text-sm' },\n      'lg': { root: 'text-base' },\n      'xl': { root: 'text-lg' },\n      '2xl': { root: 'text-xl' },\n    },\n  },\n  defaultVariants: {\n    variant: 'circular',\n    color: 'default',\n    size: 'md',\n  },\n});\n\nconst ui = computed<ReturnType<typeof avatarStyles>>(() => avatarStyles({\n  variant: get(resolvedVariant),\n  color,\n  size: get(textSize),\n}));\n\nfunction onLoad(event: Event): void {\n  set(errored, false);\n  emit('load', event);\n}\n\nfunction onError(event: Event): void {\n  set(errored, true);\n  emit('error', event);\n}\n</script>\n\n<template>\n  <span\n    :class=\"ui.root()\"\n    :style=\"rootStyle\"\n    :role=\"ariaLabel ? 'img' : undefined\"\n    :aria-label=\"ariaLabel\"\n    :aria-hidden=\"displayMode !== 'image' && decorative ? 'true' : undefined\"\n    :data-id=\"$attrs['data-id'] ?? 'avatar-root'\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-color=\"color\"\n  >\n    <img\n      v-if=\"displayMode === 'image' && src\"\n      :class=\"ui.image()\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :loading=\"loading\"\n      :width=\"sizePx\"\n      :height=\"sizePx\"\n      data-id=\"avatar-image\"\n      @load=\"onLoad($event)\"\n      @error=\"onError($event)\"\n    />\n    <span\n      v-else\n      :class=\"ui.fallback()\"\n      data-id=\"avatar-fallback\"\n      aria-hidden=\"true\"\n    >\n      <slot v-if=\"displayMode === 'slot'\" />\n      <span\n        v-else-if=\"displayMode === 'initials'\"\n        :class=\"ui.initials()\"\n        data-id=\"avatar-initials\"\n      >\n        {{ initials }}\n      </span>\n      <RuiIcon\n        v-else-if=\"displayMode === 'icon' && icon\"\n        :name=\"icon\"\n        :size=\"iconPx\"\n        data-id=\"avatar-icon\"\n      />\n      <span v-else>&nbsp;</span>\n    </span>\n  </span>\n</template>\n"],"mappings":""}

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

@@ -1,13 +1,14 @@
+import { get, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import { tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
-import { computeInitials, resolveAvatarIconPx, resolveAvatarSizePx } from "./avatar-props.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",
 	"aria-label",
+	"aria-hidden",
 	"data-id",
 	"data-size",
 	"data-variant",
@@ -49,10 +50,7 @@ var RuiAvatar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			if (group) return get(group).variant;
 			return "circular";
 		});
-		const sizeToken = computed(() => {
-			const value = get(resolvedSize);
-			return typeof value === "string" ? value : void 0;
-		});
+		const textSize = computed(() => resolveAvatarTextSize(get(resolvedSize)));
 		const sizePx = computed(() => resolveAvatarSizePx(get(resolvedSize)));
 		const iconPx = computed(() => resolveAvatarIconPx(get(resolvedSize)));
 		const errored = ref(false);
@@ -60,7 +58,7 @@ var RuiAvatar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			set(errored, false);
 		});
 		const initials = computed(() => {
-			const explicit = computeInitials(__props.text ?? void 0);
+			const explicit = computeAvatarText(__props.text);
 			if (explicit) return explicit;
 			return computeInitials(__props.alt);
 		});
@@ -94,36 +92,27 @@ var RuiAvatar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			variants: {
 				variant: {
 					circular: { root: "rounded-full" },
-					rounded: { root: "rounded-md" },
+					rounded: { root: "rounded-rui-control" },
 					square: { root: "rounded-none" }
 				},
 				color: {
-					default: { root: "bg-rui-grey-200 text-rui-text dark:bg-rui-grey-800" },
-					primary: { root: "bg-rui-primary text-white" },
-					secondary: { root: "bg-rui-secondary text-white" },
-					error: { root: "bg-rui-error text-white" },
-					warning: { root: "bg-rui-warning text-white" },
-					info: { root: "bg-rui-info text-white" },
-					success: { root: "bg-rui-success text-white" }
+					default: { root: "bg-rui-neutral-200 text-rui-text dark:bg-rui-neutral-700" },
+					primary: { root: "bg-rui-primary-fill text-rui-primary-foreground" },
+					secondary: { root: "bg-rui-secondary-fill text-rui-secondary-foreground" },
+					error: { root: "bg-rui-error-fill text-rui-error-foreground" },
+					warning: { root: "bg-rui-warning-fill text-rui-warning-foreground" },
+					info: { root: "bg-rui-info-fill text-rui-info-foreground" },
+					success: { root: "bg-rui-success-fill text-rui-success-foreground" }
 				},
 				size: {
-					"xs": { initials: "text-[0.625rem]" },
-					"sm": { initials: "text-[0.6875rem]" },
-					"md": { initials: "text-sm" },
-					"lg": { initials: "text-base" },
-					"xl": { initials: "text-lg" },
-					"2xl": { initials: "text-xl" }
+					"xs": { root: "text-[0.625rem]" },
+					"sm": { root: "text-[0.6875rem]" },
+					"md": { root: "text-sm" },
+					"lg": { root: "text-base" },
+					"xl": { root: "text-lg" },
+					"2xl": { root: "text-xl" }
 				}
 			},
-			compoundSlots: [{
-				slots: ["root"],
-				color: [
-					"warning",
-					"success",
-					"info"
-				],
-				class: "dark:text-rui-light-text"
-			}],
 			defaultVariants: {
 				variant: "circular",
 				color: "default",
@@ -133,7 +122,7 @@ var RuiAvatar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const ui = computed(() => avatarStyles({
 			variant: get(resolvedVariant),
 			color: __props.color,
-			size: get(sizeToken)
+			size: get(textSize)
 		}));
 		function onLoad(event) {
 			set(errored, false);
@@ -147,8 +136,9 @@ var RuiAvatar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			return openBlock(), createElementBlock("span", {
 				class: normalizeClass(unref(ui).root()),
 				style: normalizeStyle(unref(rootStyle)),
-				role: unref(displayMode) === "image" ? void 0 : "img",
+				role: unref(ariaLabel) ? "img" : void 0,
 				"aria-label": unref(ariaLabel),
+				"aria-hidden": unref(displayMode) !== "image" && unref(decorative) ? "true" : void 0,
 				"data-id": _ctx.$attrs["data-id"] ?? "avatar-root",
 				"data-size": typeof unref(resolvedSize) === "string" ? unref(resolvedSize) : void 0,
 				"data-variant": unref(resolvedVariant),

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

@@ -1 +1 @@
-{"version":3,"file":"RuiAvatar.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/avatars/RuiAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { get, set } from '@vueuse/shared';\nimport {\n  type AvatarSize,\n  type AvatarVariant,\n  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport { useAvatarGroup } from '@/components/avatars/use-avatar-group';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  src?: string | null;\n  alt?: string;\n  text?: string | null;\n  icon?: RuiIcons | null;\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  color?: 'default' | ContextColorsType;\n  loading?: 'lazy' | 'eager';\n}\n\ndefineOptions({\n  name: 'RuiAvatar',\n});\n\nconst {\n  src = null,\n  alt = '',\n  text = null,\n  icon = null,\n  size,\n  variant,\n  color = 'default',\n  loading = 'lazy',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  load: [event: Event];\n  error: [event: Event];\n}>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n}>();\n\nconst group = useAvatarGroup();\n\nconst resolvedSize = computed<AvatarSize | number>(() => {\n  if (size !== undefined)\n    return size;\n  if (group)\n    return get(group).size;\n  return 'md';\n});\n\nconst resolvedVariant = computed<AvatarVariant>(() => {\n  if (variant !== undefined)\n    return variant;\n  if (group)\n    return get(group).variant;\n  return 'circular';\n});\n\nconst sizeToken = computed<AvatarSize | undefined>(() => {\n  const value = get(resolvedSize);\n  return typeof value === 'string' ? value : undefined;\n});\n\nconst sizePx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\nconst iconPx = computed<number>(() => resolveAvatarIconPx(get(resolvedSize)));\n\nconst errored = ref<boolean>(false);\n\nwatch(() => src, () => {\n  set(errored, false);\n});\n\nconst initials = computed<string>(() => {\n  const explicit = computeInitials(text ?? undefined);\n  if (explicit)\n    return explicit;\n  return computeInitials(alt);\n});\n\ntype DisplayMode = 'image' | 'slot' | 'initials' | 'icon' | 'empty';\n\nconst displayMode = computed<DisplayMode>(() => {\n  if (src && !get(errored))\n    return 'image';\n  if (slots.default)\n    return 'slot';\n  if (icon)\n    return 'icon';\n  if (get(initials))\n    return 'initials';\n  return 'empty';\n});\n\nconst decorative = computed<boolean>(() => alt === '' && !text);\n\nconst ariaLabel = computed<string | undefined>(() => {\n  if (get(displayMode) === 'image')\n    return undefined;\n  if (get(decorative))\n    return undefined;\n  return text ?? alt ?? undefined;\n});\n\nconst rootStyle = computed<Record<string, string>>(() => {\n  const px = `${get(sizePx)}px`;\n  return { width: px, height: px };\n});\n\nconst avatarStyles = tv({\n  slots: {\n    root: 'relative inline-flex items-center justify-center shrink-0 overflow-hidden select-none font-medium align-middle',\n    image: 'w-full h-full object-cover',\n    fallback: 'w-full h-full flex items-center justify-center',\n    initials: 'uppercase leading-none',\n  },\n  variants: {\n    variant: {\n      circular: { root: 'rounded-full' },\n      rounded: { root: 'rounded-md' },\n      square: { root: 'rounded-none' },\n    },\n    color: {\n      default: { root: 'bg-rui-grey-200 text-rui-text dark:bg-rui-grey-800' },\n      primary: { root: 'bg-rui-primary text-white' },\n      secondary: { root: 'bg-rui-secondary text-white' },\n      error: { root: 'bg-rui-error text-white' },\n      warning: { root: 'bg-rui-warning text-white' },\n      info: { root: 'bg-rui-info text-white' },\n      success: { root: 'bg-rui-success text-white' },\n    },\n    size: {\n      'xs': { initials: 'text-[0.625rem]' },\n      'sm': { initials: 'text-[0.6875rem]' },\n      'md': { initials: 'text-sm' },\n      'lg': { initials: 'text-base' },\n      'xl': { initials: 'text-lg' },\n      '2xl': { initials: 'text-xl' },\n    },\n  },\n  compoundSlots: [\n    { slots: ['root'], color: ['warning', 'success', 'info'], class: 'dark:text-rui-light-text' },\n  ],\n  defaultVariants: {\n    variant: 'circular',\n    color: 'default',\n    size: 'md',\n  },\n});\n\nconst ui = computed<ReturnType<typeof avatarStyles>>(() => avatarStyles({\n  variant: get(resolvedVariant),\n  color,\n  size: get(sizeToken),\n}));\n\nfunction onLoad(event: Event): void {\n  set(errored, false);\n  emit('load', event);\n}\n\nfunction onError(event: Event): void {\n  set(errored, true);\n  emit('error', event);\n}\n</script>\n\n<template>\n  <span\n    :class=\"ui.root()\"\n    :style=\"rootStyle\"\n    :role=\"displayMode === 'image' ? undefined : 'img'\"\n    :aria-label=\"ariaLabel\"\n    :data-id=\"$attrs['data-id'] ?? 'avatar-root'\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-color=\"color\"\n  >\n    <img\n      v-if=\"displayMode === 'image' && src\"\n      :class=\"ui.image()\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :loading=\"loading\"\n      :width=\"sizePx\"\n      :height=\"sizePx\"\n      data-id=\"avatar-image\"\n      @load=\"onLoad($event)\"\n      @error=\"onError($event)\"\n    />\n    <span\n      v-else\n      :class=\"ui.fallback()\"\n      data-id=\"avatar-fallback\"\n      aria-hidden=\"true\"\n    >\n      <slot v-if=\"displayMode === 'slot'\" />\n      <span\n        v-else-if=\"displayMode === 'initials'\"\n        :class=\"ui.initials()\"\n        data-id=\"avatar-initials\"\n      >\n        {{ initials }}\n      </span>\n      <RuiIcon\n        v-else-if=\"displayMode === 'icon' && icon\"\n        :name=\"icon\"\n        :size=\"iconPx\"\n        data-id=\"avatar-icon\"\n      />\n      <span v-else>&nbsp;</span>\n    </span>\n  </span>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiAvatar.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/avatars/RuiAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { get, set } from '@vueuse/shared';\nimport {\n  type AvatarSize,\n  type AvatarVariant,\n  computeAvatarText,\n  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\n  resolveAvatarTextSize,\n} from '@/components/avatars/avatar-props';\nimport { useAvatarGroup } from '@/components/avatars/use-avatar-group';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  src?: string | null;\n  alt?: string;\n  text?: string | null;\n  icon?: RuiIcons | null;\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  color?: 'default' | ContextColorsType;\n  loading?: 'lazy' | 'eager';\n}\n\ndefineOptions({\n  name: 'RuiAvatar',\n});\n\nconst {\n  src = null,\n  alt = '',\n  text = null,\n  icon = null,\n  size,\n  variant,\n  color = 'default',\n  loading = 'lazy',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  load: [event: Event];\n  error: [event: Event];\n}>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n}>();\n\nconst group = useAvatarGroup();\n\nconst resolvedSize = computed<AvatarSize | number>(() => {\n  if (size !== undefined)\n    return size;\n  if (group)\n    return get(group).size;\n  return 'md';\n});\n\nconst resolvedVariant = computed<AvatarVariant>(() => {\n  if (variant !== undefined)\n    return variant;\n  if (group)\n    return get(group).variant;\n  return 'circular';\n});\n\n// A numeric size borrows the text scale of the nearest token below it\nconst textSize = computed<AvatarSize>(() => resolveAvatarTextSize(get(resolvedSize)));\n\nconst sizePx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\nconst iconPx = computed<number>(() => resolveAvatarIconPx(get(resolvedSize)));\n\nconst errored = ref<boolean>(false);\n\nwatch(() => src, () => {\n  set(errored, false);\n});\n\nconst initials = computed<string>(() => {\n  const explicit = computeAvatarText(text);\n  if (explicit)\n    return explicit;\n  return computeInitials(alt);\n});\n\ntype DisplayMode = 'image' | 'slot' | 'initials' | 'icon' | 'empty';\n\nconst displayMode = computed<DisplayMode>(() => {\n  if (src && !get(errored))\n    return 'image';\n  if (slots.default)\n    return 'slot';\n  if (icon)\n    return 'icon';\n  if (get(initials))\n    return 'initials';\n  return 'empty';\n});\n\nconst decorative = computed<boolean>(() => alt === '' && !text);\n\nconst ariaLabel = computed<string | undefined>(() => {\n  if (get(displayMode) === 'image')\n    return undefined;\n  if (get(decorative))\n    return undefined;\n  return text ?? alt ?? undefined;\n});\n\nconst rootStyle = computed<Record<string, string>>(() => {\n  const px = `${get(sizePx)}px`;\n  return { width: px, height: px };\n});\n\nconst avatarStyles = tv({\n  slots: {\n    root: 'relative inline-flex items-center justify-center shrink-0 overflow-hidden select-none font-medium align-middle',\n    image: 'w-full h-full object-cover',\n    fallback: 'w-full h-full flex items-center justify-center',\n    initials: 'uppercase leading-none',\n  },\n  variants: {\n    variant: {\n      circular: { root: 'rounded-full' },\n      rounded: { root: 'rounded-rui-control' },\n      square: { root: 'rounded-none' },\n    },\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark\n    color: {\n      default: { root: 'bg-rui-neutral-200 text-rui-text dark:bg-rui-neutral-700' },\n      primary: { root: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { root: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { root: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { root: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { root: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { root: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // On the root so slot content (such as a group's `+N`) scales too\n    size: {\n      'xs': { root: 'text-[0.625rem]' },\n      'sm': { root: 'text-[0.6875rem]' },\n      'md': { root: 'text-sm' },\n      'lg': { root: 'text-base' },\n      'xl': { root: 'text-lg' },\n      '2xl': { root: 'text-xl' },\n    },\n  },\n  defaultVariants: {\n    variant: 'circular',\n    color: 'default',\n    size: 'md',\n  },\n});\n\nconst ui = computed<ReturnType<typeof avatarStyles>>(() => avatarStyles({\n  variant: get(resolvedVariant),\n  color,\n  size: get(textSize),\n}));\n\nfunction onLoad(event: Event): void {\n  set(errored, false);\n  emit('load', event);\n}\n\nfunction onError(event: Event): void {\n  set(errored, true);\n  emit('error', event);\n}\n</script>\n\n<template>\n  <span\n    :class=\"ui.root()\"\n    :style=\"rootStyle\"\n    :role=\"ariaLabel ? 'img' : undefined\"\n    :aria-label=\"ariaLabel\"\n    :aria-hidden=\"displayMode !== 'image' && decorative ? 'true' : undefined\"\n    :data-id=\"$attrs['data-id'] ?? 'avatar-root'\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-color=\"color\"\n  >\n    <img\n      v-if=\"displayMode === 'image' && src\"\n      :class=\"ui.image()\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :loading=\"loading\"\n      :width=\"sizePx\"\n      :height=\"sizePx\"\n      data-id=\"avatar-image\"\n      @load=\"onLoad($event)\"\n      @error=\"onError($event)\"\n    />\n    <span\n      v-else\n      :class=\"ui.fallback()\"\n      data-id=\"avatar-fallback\"\n      aria-hidden=\"true\"\n    >\n      <slot v-if=\"displayMode === 'slot'\" />\n      <span\n        v-else-if=\"displayMode === 'initials'\"\n        :class=\"ui.initials()\"\n        data-id=\"avatar-initials\"\n      >\n        {{ initials }}\n      </span>\n      <RuiIcon\n        v-else-if=\"displayMode === 'icon' && icon\"\n        :name=\"icon\"\n        :size=\"iconPx\"\n        data-id=\"avatar-icon\"\n      />\n      <span v-else>&nbsp;</span>\n    </span>\n  </span>\n</template>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiAvatarGroup.js","names":[],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, Text, type VNode } from 'vue';\nimport {\n  AVATAR_GROUP_SPACING_PX,\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nconst groupStyles = tv({\n  slots: {\n    root: 'inline-flex items-center isolate',\n    item: 'relative ring-2 ring-white dark:ring-rui-grey-900 rounded-full',\n  },\n});\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => {\n  if (typeof spacing === 'number')\n    return spacing;\n  return AVATAR_GROUP_SPACING_PX[spacing];\n});\n\n// The configured spacing, which is already negative, so the items overlap\nconst ringOffsetPx = computed<number>(() => get(spacingPx));\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles());\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span class=\"leading-none\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAvatarGroup.js","names":[],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, Text, type VNode } from 'vue';\nimport {\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarGroupSpacingPx,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  /**\n   * How much each avatar overlaps the previous one. The tokens name the\n   * amount of overlap, so `lg` overlaps the most and `sm` the least; they\n   * scale with the avatar size. A number is the inline margin in pixels and\n   * should be negative to overlap.\n   */\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nconst groupStyles = tv({\n  slots: {\n    root: 'inline-flex items-center isolate',\n    item: 'relative ring-2 ring-rui-surface',\n    surplus: 'leading-none text-[0.85em] tracking-tight',\n  },\n  // The ring follows the avatar outline\n  variants: {\n    variant: {\n      circular: { item: 'rounded-full' },\n      rounded: { item: 'rounded-rui-control' },\n      square: { item: 'rounded-none' },\n    },\n  },\n});\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => resolveAvatarGroupSpacingPx(spacing, get(resolvedSize)));\n\n// The configured spacing, which is already negative, so the items overlap\nconst ringOffsetPx = computed<number>(() => get(spacingPx));\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles({ variant }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span :class=\"ui.surplus()\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/avatars/RuiAvatarGroup.vue.d.ts

@@ -5,6 +5,12 @@ export interface Props {
     variant?: AvatarVariant;
     max?: number;
     total?: number;
+    /**
+     * How much each avatar overlaps the previous one. The tokens name the
+     * amount of overlap, so `lg` overlaps the most and `sm` the least; they
+     * scale with the avatar size. A number is the inline margin in pixels and
+     * should be negative to overlap.
+     */
     spacing?: AvatarGroupSpacing | number;
 }
 type __VLS_Slots = {

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

@@ -1,11 +1,10 @@
+import { get } from "../../vendor/@vueuse/shared/dist/index.js";
 import { tv } from "../../utils/tv.js";
-import { AVATAR_GROUP_SPACING_PX, AvatarGroupSpacing, avatarGroupInjectionKey, resolveAvatarSizePx } from "./avatar-props.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 _hoisted_2 = { class: "leading-none" };
 var RuiAvatarGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiAvatarGroup",
 	__name: "RuiAvatarGroup",
@@ -29,10 +28,18 @@ var RuiAvatarGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			size: get(resolvedSize),
 			variant: __props.variant
 		})));
-		const groupStyles = tv({ slots: {
-			root: "inline-flex items-center isolate",
-			item: "relative ring-2 ring-white dark:ring-rui-grey-900 rounded-full"
-		} });
+		const groupStyles = tv({
+			slots: {
+				root: "inline-flex items-center isolate",
+				item: "relative ring-2 ring-rui-surface",
+				surplus: "leading-none text-[0.85em] tracking-tight"
+			},
+			variants: { variant: {
+				circular: { item: "rounded-full" },
+				rounded: { item: "rounded-rui-control" },
+				square: { item: "rounded-none" }
+			} }
+		});
 		function flattenChildren(nodes) {
 			if (!nodes) return [];
 			const out = [];
@@ -58,15 +65,12 @@ var RuiAvatarGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			const shown = get(visible).length;
 			return Math.max(0, totalCount - shown);
 		});
-		const spacingPx = computed(() => {
-			if (typeof __props.spacing === "number") return __props.spacing;
-			return AVATAR_GROUP_SPACING_PX[__props.spacing];
-		});
+		const spacingPx = computed(() => resolveAvatarGroupSpacingPx(__props.spacing, get(resolvedSize)));
 		const ringOffsetPx = computed(() => get(spacingPx));
 		const itemStyle = computed(() => ({ marginInlineStart: `${get(ringOffsetPx)}px` }));
 		const firstItemStyle = computed(() => ({ marginInlineStart: "0" }));
 		const avatarPx = computed(() => resolveAvatarSizePx(get(resolvedSize)));
-		const ui = computed(() => groupStyles());
+		const ui = computed(() => groupStyles({ variant: __props.variant }));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				class: normalizeClass(unref(ui).root()),
@@ -93,7 +97,7 @@ var RuiAvatarGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					height: `${unref(avatarPx)}px`
 				})
 			}, {
-				default: withCtx(() => [createElementVNode("span", _hoisted_2, "+" + toDisplayString(unref(surplusCount)), 1)]),
+				default: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(ui).surplus()) }, "+" + toDisplayString(unref(surplusCount)), 3)]),
 				_: 1
 			}, 8, [
 				"size",

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

@@ -1 +1 @@
-{"version":3,"file":"RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, Text, type VNode } from 'vue';\nimport {\n  AVATAR_GROUP_SPACING_PX,\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nconst groupStyles = tv({\n  slots: {\n    root: 'inline-flex items-center isolate',\n    item: 'relative ring-2 ring-white dark:ring-rui-grey-900 rounded-full',\n  },\n});\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => {\n  if (typeof spacing === 'number')\n    return spacing;\n  return AVATAR_GROUP_SPACING_PX[spacing];\n});\n\n// The configured spacing, which is already negative, so the items overlap\nconst ringOffsetPx = computed<number>(() => get(spacingPx));\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles());\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span class=\"leading-none\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, Text, type VNode } from 'vue';\nimport {\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarGroupSpacingPx,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  /**\n   * How much each avatar overlaps the previous one. The tokens name the\n   * amount of overlap, so `lg` overlaps the most and `sm` the least; they\n   * scale with the avatar size. A number is the inline margin in pixels and\n   * should be negative to overlap.\n   */\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nconst groupStyles = tv({\n  slots: {\n    root: 'inline-flex items-center isolate',\n    item: 'relative ring-2 ring-rui-surface',\n    surplus: 'leading-none text-[0.85em] tracking-tight',\n  },\n  // The ring follows the avatar outline\n  variants: {\n    variant: {\n      circular: { item: 'rounded-full' },\n      rounded: { item: 'rounded-rui-control' },\n      square: { item: 'rounded-none' },\n    },\n  },\n});\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => resolveAvatarGroupSpacingPx(spacing, get(resolvedSize)));\n\n// The configured spacing, which is already negative, so the items overlap\nconst ringOffsetPx = computed<number>(() => get(spacingPx));\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles({ variant }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span :class=\"ui.surplus()\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/avatars/avatar-props.d.ts

@@ -20,12 +20,25 @@ export declare const AvatarGroupSpacing: {
     readonly lg: "lg";
 };
 export type AvatarGroupSpacing = (typeof AvatarGroupSpacing)[keyof typeof AvatarGroupSpacing];
-export declare const AVATAR_SIZE_PX: Record<AvatarSize, number>;
-export declare const AVATAR_ICON_PX: Record<AvatarSize, number>;
-export declare const AVATAR_GROUP_SPACING_PX: Record<AvatarGroupSpacing, number>;
+/**
+ * Resolves the inline margin between grouped avatars. A token scales with the
+ * avatar size and a number is used as given, in pixels.
+ */
+export declare function resolveAvatarGroupSpacingPx(spacing: AvatarGroupSpacing | number, size: AvatarSize | number | undefined): number;
 export declare function resolveAvatarSizePx(size: AvatarSize | number | undefined): number;
+/**
+ * Picks the size token whose text scale fits a size: the token itself, or for
+ * a numeric size the largest token that is not bigger than it.
+ */
+export declare function resolveAvatarTextSize(size: AvatarSize | number | undefined): AvatarSize;
 export declare function resolveAvatarIconPx(size: AvatarSize | number | undefined): number;
 export declare function computeInitials(source: string | undefined | null): string;
+/**
+ * Resolves the `text` prop for display. A short token such as `AL` or `BTC`
+ * (1 to 3 characters, no whitespace) renders as given; anything else is
+ * treated as a name and reduced to its initials.
+ */
+export declare function computeAvatarText(source: string | undefined | null): string;
 export interface AvatarGroupContext {
     size: AvatarSize | number;
     variant: AvatarVariant;

package/dist/components/avatars/avatar-props.js

@@ -20,15 +20,41 @@ var AVATAR_ICON_PX = {
 	"xl": 28,
 	"2xl": 36
 };
-var AVATAR_GROUP_SPACING_PX = {
-	sm: -4,
-	md: -8,
-	lg: -12
+/**
+* How much of an avatar the next one covers, as a share of the avatar size.
+* Kept small enough that the trailing initial of a two-letter avatar stays
+* readable at every size, including the 2px ring.
+*/
+var AVATAR_GROUP_OVERLAP_RATIO = {
+	sm: .04,
+	md: .07,
+	lg: .1
 };
+/**
+* Resolves the inline margin between grouped avatars. A token scales with the
+* avatar size and a number is used as given, in pixels.
+*/
+function resolveAvatarGroupSpacingPx(spacing, size) {
+	if (typeof spacing === "number") return spacing;
+	return -Math.round(resolveAvatarSizePx(size) * AVATAR_GROUP_OVERLAP_RATIO[spacing]);
+}
 function resolveAvatarSizePx(size) {
 	if (typeof size === "number") return size;
 	return AVATAR_SIZE_PX[size ?? "md"];
 }
+/**
+* Picks the size token whose text scale fits a size: the token itself, or for
+* a numeric size the largest token that is not bigger than it.
+*/
+function resolveAvatarTextSize(size) {
+	if (typeof size !== "number") return size ?? "md";
+	let match = "xs";
+	for (const [token, px] of Object.entries(AVATAR_SIZE_PX)) if (px <= size && isAvatarSize(token)) match = token;
+	return match;
+}
+function isAvatarSize(value) {
+	return value in AVATAR_SIZE_PX;
+}
 function resolveAvatarIconPx(size) {
 	if (typeof size === "number") return Math.round(size * .56);
 	return AVATAR_ICON_PX[size ?? "md"];
@@ -39,8 +65,19 @@ function computeInitials(source) {
 	if (parts.length === 0) return "";
 	return parts.map((p) => p.charAt(0).toUpperCase()).join("");
 }
+/**
+* Resolves the `text` prop for display. A short token such as `AL` or `BTC`
+* (1 to 3 characters, no whitespace) renders as given; anything else is
+* treated as a name and reduced to its initials.
+*/
+function computeAvatarText(source) {
+	if (!source) return "";
+	const trimmed = source.trim();
+	if (trimmed.length > 0 && trimmed.length <= 3 && !/\s/.test(trimmed)) return trimmed;
+	return computeInitials(trimmed);
+}
 var avatarGroupInjectionKey = Symbol("avatarGroup");
 //#endregion
-export { AVATAR_GROUP_SPACING_PX, AVATAR_ICON_PX, AVATAR_SIZE_PX, AvatarGroupSpacing, avatarGroupInjectionKey, computeInitials, resolveAvatarIconPx, resolveAvatarSizePx };
+export { AvatarGroupSpacing, avatarGroupInjectionKey, computeAvatarText, computeInitials, resolveAvatarGroupSpacingPx, resolveAvatarIconPx, resolveAvatarSizePx, resolveAvatarTextSize };
 
 //# sourceMappingURL=avatar-props.js.map

package/dist/components/avatars/avatar-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-props.js","names":[],"sources":["../../../src/components/avatars/avatar-props.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue';\n\nexport const AvatarSize = {\n  'xs': 'xs',\n  'sm': 'sm',\n  'md': 'md',\n  'lg': 'lg',\n  'xl': 'xl',\n  '2xl': '2xl',\n} as const;\n\nexport type AvatarSize = (typeof AvatarSize)[keyof typeof AvatarSize];\n\nexport const AvatarVariant = {\n  circular: 'circular',\n  rounded: 'rounded',\n  square: 'square',\n} as const;\n\nexport type AvatarVariant = (typeof AvatarVariant)[keyof typeof AvatarVariant];\n\nexport const AvatarGroupSpacing = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n} as const;\n\nexport type AvatarGroupSpacing = (typeof AvatarGroupSpacing)[keyof typeof AvatarGroupSpacing];\n\nexport const AVATAR_SIZE_PX: Record<AvatarSize, number> = {\n  'xs': 20,\n  'sm': 24,\n  'md': 32,\n  'lg': 40,\n  'xl': 48,\n  '2xl': 64,\n};\n\nexport const AVATAR_ICON_PX: Record<AvatarSize, number> = {\n  'xs': 12,\n  'sm': 14,\n  'md': 18,\n  'lg': 22,\n  'xl': 28,\n  '2xl': 36,\n};\n\nexport const AVATAR_GROUP_SPACING_PX: Record<AvatarGroupSpacing, number> = {\n  sm: -4,\n  md: -8,\n  lg: -12,\n};\n\nexport function resolveAvatarSizePx(size: AvatarSize | number | undefined): number {\n  if (typeof size === 'number')\n    return size;\n  return AVATAR_SIZE_PX[size ?? 'md'];\n}\n\nexport function resolveAvatarIconPx(size: AvatarSize | number | undefined): number {\n  if (typeof size === 'number')\n    return Math.round(size * 0.56);\n  return AVATAR_ICON_PX[size ?? 'md'];\n}\n\nexport function computeInitials(source: string | undefined | null): string {\n  if (!source)\n    return '';\n  const parts = source\n    .trim()\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2);\n  if (parts.length === 0)\n    return '';\n  return parts.map(p => p.charAt(0).toUpperCase()).join('');\n}\n\nexport interface AvatarGroupContext {\n  size: AvatarSize | number;\n  variant: AvatarVariant;\n}\n\nexport const avatarGroupInjectionKey: InjectionKey<ComputedRef<AvatarGroupContext>>\n  = Symbol('avatarGroup');\n"],"mappings":";AAqBA,IAAa,qBAAqB;CAChC,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAIA,IAAa,iBAA6C;CACxD,MAAM;CACN,MAAM;CACN,MAAM;CACN,MAAM;CACN,MAAM;CACN,OAAO;AACT;AAEA,IAAa,iBAA6C;CACxD,MAAM;CACN,MAAM;CACN,MAAM;CACN,MAAM;CACN,MAAM;CACN,OAAO;AACT;AAEA,IAAa,0BAA8D;CACzE,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAgB,oBAAoB,MAA+C;CACjF,IAAI,OAAO,SAAS,UAClB,OAAO;CACT,OAAO,eAAe,QAAQ;AAChC;AAEA,SAAgB,oBAAoB,MAA+C;CACjF,IAAI,OAAO,SAAS,UAClB,OAAO,KAAK,MAAM,OAAO,GAAI;CAC/B,OAAO,eAAe,QAAQ;AAChC;AAEA,SAAgB,gBAAgB,QAA2C;CACzE,IAAI,CAAC,QACH,OAAO;CACT,MAAM,QAAQ,OACX,KAAK,CAAC,CACN,MAAM,KAAK,CAAC,CACZ,OAAO,OAAO,CAAC,CACf,MAAM,GAAG,CAAC;CACb,IAAI,MAAM,WAAW,GACnB,OAAO;CACT,OAAO,MAAM,KAAI,MAAK,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,EAAE;AAC1D;AAOA,IAAa,0BACT,OAAO,aAAa"}
+{"version":3,"file":"avatar-props.js","names":[],"sources":["../../../src/components/avatars/avatar-props.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue';\n\nexport const AvatarSize = {\n  'xs': 'xs',\n  'sm': 'sm',\n  'md': 'md',\n  'lg': 'lg',\n  'xl': 'xl',\n  '2xl': '2xl',\n} as const;\n\nexport type AvatarSize = (typeof AvatarSize)[keyof typeof AvatarSize];\n\nexport const AvatarVariant = {\n  circular: 'circular',\n  rounded: 'rounded',\n  square: 'square',\n} as const;\n\nexport type AvatarVariant = (typeof AvatarVariant)[keyof typeof AvatarVariant];\n\nexport const AvatarGroupSpacing = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n} as const;\n\nexport type AvatarGroupSpacing = (typeof AvatarGroupSpacing)[keyof typeof AvatarGroupSpacing];\n\nconst AVATAR_SIZE_PX: Record<AvatarSize, number> = {\n  'xs': 20,\n  'sm': 24,\n  'md': 32,\n  'lg': 40,\n  'xl': 48,\n  '2xl': 64,\n};\n\nconst AVATAR_ICON_PX: Record<AvatarSize, number> = {\n  'xs': 12,\n  'sm': 14,\n  'md': 18,\n  'lg': 22,\n  'xl': 28,\n  '2xl': 36,\n};\n\n/**\n * How much of an avatar the next one covers, as a share of the avatar size.\n * Kept small enough that the trailing initial of a two-letter avatar stays\n * readable at every size, including the 2px ring.\n */\nconst AVATAR_GROUP_OVERLAP_RATIO: Record<AvatarGroupSpacing, number> = {\n  sm: 0.04,\n  md: 0.07,\n  lg: 0.1,\n};\n\n/**\n * Resolves the inline margin between grouped avatars. A token scales with the\n * avatar size and a number is used as given, in pixels.\n */\nexport function resolveAvatarGroupSpacingPx(\n  spacing: AvatarGroupSpacing | number,\n  size: AvatarSize | number | undefined,\n): number {\n  if (typeof spacing === 'number')\n    return spacing;\n  return -Math.round(resolveAvatarSizePx(size) * AVATAR_GROUP_OVERLAP_RATIO[spacing]);\n}\n\nexport function resolveAvatarSizePx(size: AvatarSize | number | undefined): number {\n  if (typeof size === 'number')\n    return size;\n  return AVATAR_SIZE_PX[size ?? 'md'];\n}\n\n/**\n * Picks the size token whose text scale fits a size: the token itself, or for\n * a numeric size the largest token that is not bigger than it.\n */\nexport function resolveAvatarTextSize(size: AvatarSize | number | undefined): AvatarSize {\n  if (typeof size !== 'number')\n    return size ?? 'md';\n  let match: AvatarSize = 'xs';\n  for (const [token, px] of Object.entries(AVATAR_SIZE_PX)) {\n    if (px <= size && isAvatarSize(token))\n      match = token;\n  }\n  return match;\n}\n\nfunction isAvatarSize(value: string): value is AvatarSize {\n  return value in AVATAR_SIZE_PX;\n}\n\nexport function resolveAvatarIconPx(size: AvatarSize | number | undefined): number {\n  if (typeof size === 'number')\n    return Math.round(size * 0.56);\n  return AVATAR_ICON_PX[size ?? 'md'];\n}\n\nexport function computeInitials(source: string | undefined | null): string {\n  if (!source)\n    return '';\n  const parts = source\n    .trim()\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2);\n  if (parts.length === 0)\n    return '';\n  return parts.map(p => p.charAt(0).toUpperCase()).join('');\n}\n\n/**\n * Resolves the `text` prop for display. A short token such as `AL` or `BTC`\n * (1 to 3 characters, no whitespace) renders as given; anything else is\n * treated as a name and reduced to its initials.\n */\nexport function computeAvatarText(source: string | undefined | null): string {\n  if (!source)\n    return '';\n  const trimmed = source.trim();\n  if (trimmed.length > 0 && trimmed.length <= 3 && !/\\s/.test(trimmed))\n    return trimmed;\n  return computeInitials(trimmed);\n}\n\nexport interface AvatarGroupContext {\n  size: AvatarSize | number;\n  variant: AvatarVariant;\n}\n\nexport const avatarGroupInjectionKey: InjectionKey<ComputedRef<AvatarGroupContext>>\n  = Symbol('avatarGroup');\n"],"mappings":";AAqBA,IAAa,qBAAqB;CAChC,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAIA,IAAM,iBAA6C;CACjD,MAAM;CACN,MAAM;CACN,MAAM;CACN,MAAM;CACN,MAAM;CACN,OAAO;AACT;AAEA,IAAM,iBAA6C;CACjD,MAAM;CACN,MAAM;CACN,MAAM;CACN,MAAM;CACN,MAAM;CACN,OAAO;AACT;;;;;;AAOA,IAAM,6BAAiE;CACrE,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;AAMA,SAAgB,4BACd,SACA,MACQ;CACR,IAAI,OAAO,YAAY,UACrB,OAAO;CACT,OAAO,CAAC,KAAK,MAAM,oBAAoB,IAAI,IAAI,2BAA2B,QAAQ;AACpF;AAEA,SAAgB,oBAAoB,MAA+C;CACjF,IAAI,OAAO,SAAS,UAClB,OAAO;CACT,OAAO,eAAe,QAAQ;AAChC;;;;;AAMA,SAAgB,sBAAsB,MAAmD;CACvF,IAAI,OAAO,SAAS,UAClB,OAAO,QAAQ;CACjB,IAAI,QAAoB;CACxB,KAAK,MAAM,CAAC,OAAO,OAAO,OAAO,QAAQ,cAAc,GACrD,IAAI,MAAM,QAAQ,aAAa,KAAK,GAClC,QAAQ;CAEZ,OAAO;AACT;AAEA,SAAS,aAAa,OAAoC;CACxD,OAAO,SAAS;AAClB;AAEA,SAAgB,oBAAoB,MAA+C;CACjF,IAAI,OAAO,SAAS,UAClB,OAAO,KAAK,MAAM,OAAO,GAAI;CAC/B,OAAO,eAAe,QAAQ;AAChC;AAEA,SAAgB,gBAAgB,QAA2C;CACzE,IAAI,CAAC,QACH,OAAO;CACT,MAAM,QAAQ,OACX,KAAK,CAAC,CACN,MAAM,KAAK,CAAC,CACZ,OAAO,OAAO,CAAC,CACf,MAAM,GAAG,CAAC;CACb,IAAI,MAAM,WAAW,GACnB,OAAO;CACT,OAAO,MAAM,KAAI,MAAK,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,EAAE;AAC1D;;;;;;AAOA,SAAgB,kBAAkB,QAA2C;CAC3E,IAAI,CAAC,QACH,OAAO;CACT,MAAM,UAAU,OAAO,KAAK;CAC5B,IAAI,QAAQ,SAAS,KAAK,QAAQ,UAAU,KAAK,CAAC,KAAK,KAAK,OAAO,GACjE,OAAO;CACT,OAAO,gBAAgB,OAAO;AAChC;AAOA,IAAa,0BACT,OAAO,aAAa"}

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 { type ButtonSize, ButtonVariant, FAB_DEFAULT_ELEVATION, getButtonSpinnerSize, NO_ELEVATION } 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  elevation?: number | string | null;\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  elevation = null,\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\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst defaultElevation = computed<number>(() => variant === ButtonVariant.fab ? FAB_DEFAULT_ELEVATION : NO_ELEVATION);\nconst usedElevation = computed<number | string>(() => disabled ? NO_ELEVATION : elevation ?? get(defaultElevation));\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(size));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant,\n  color: color ?? 'grey',\n  size,\n  rounded,\n  icon,\n  active,\n  loading,\n  hideFocusIndicator,\n}));\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"[\n      ui.root({ class: cn($attrs.class) }),\n      `shadow-${usedElevation}`,\n    ]\"\n    :disabled=\"disabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-active=\"active || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"emit('update:model-value', btnValue)\"\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    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\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.d.ts

@@ -5,7 +5,6 @@ export interface Props<T = undefined> {
     loading?: boolean;
     color?: ContextColorsType;
     rounded?: boolean;
-    elevation?: number | string | null;
     variant?: ButtonVariant;
     icon?: boolean;
     active?: boolean;