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

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

@@ -1 +1 @@
-{"version":3,"file":"RuiCalendarMenu.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/calendar/RuiCalendarMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  getShortMonthNames,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { tv } from '@/utils/tv';\nimport RuiButton from '../buttons/button/RuiButton.vue';\n\ndefineOptions({\n  name: 'RuiCalendarMenu',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>();\n\nconst { viewMonth, viewYear } = defineProps<{\n  anchorEl: HTMLElement | undefined;\n  viewMonth: number;\n  viewYear: number;\n}>();\n\nconst emit = defineEmits<{\n  select: [MonthYearSelection];\n}>();\n\nconst MENU_OPTIONS: FloatingOptions = { placement: Placement.bottomStart };\n\n// Core reactive state - minimal\nconst viewMode = ref<'months' | 'years'>('months');\nconst startYear = ref<number>(viewYear - 6);\n\n// Pre-calculated constants\nconst months = getShortMonthNames();\nconst calendarState = inject<RuiCalendarState>(CalendarStateSymbol) as RuiCalendarState;\n\nconst navButtonClass = 'p-1 rounded-full text-gray-500 hover:text-rui-primary hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-rui-primary';\n\nconst cellButton = tv({\n  base: 'h-9 w-full flex items-center justify-center text-sm font-medium rounded-md transition-colors duration-150 ease-in-out border-none outline-none cursor-pointer focus:ring-2 focus:ring-rui-primary focus:ring-opacity-50',\n  variants: {\n    selected: {\n      true: 'bg-rui-primary text-white hover:bg-rui-primary-darker active:bg-rui-primary-darker dark:bg-rui-primary dark:text-white dark:hover:bg-rui-primary-darker',\n    },\n    inRange: {\n      true: 'text-gray-700 bg-transparent hover:bg-gray-100 active:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:active:bg-gray-600',\n      false: 'opacity-50 cursor-not-allowed bg-transparent hover:bg-transparent active:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent pointer-events-none text-gray-400 dark:text-gray-600',\n    },\n    selectedOutOfRange: {\n      true: 'bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400',\n    },\n  },\n});\n\n// Pre-calculated arrays for performance - using refs for better control\nconst yearRange = ref<number[]>([]);\nconst monthsInRange = ref<boolean[]>([]);\nconst yearsInRange = ref<boolean[]>([]);\nconst title = ref<string>('');\nconst canGoToNext = ref<boolean>(true);\nconst canGoToPrev = ref<boolean>(true);\n\n/** Rebuilds the years the picker offers around the current start year. */\nfunction calculateYearRange(): void {\n  const start = get(startYear);\n  set(\n    yearRange,\n    Array.from({ length: 12 }, (_, i) => start + i),\n  );\n}\n\nfunction calculateTitle(): void {\n  if (get(viewMode) === 'months') {\n    set(title, viewYear.toString());\n  }\n  else {\n    const range = get(yearRange);\n    set(title, `${range[0]} - ${range.at(-1)}`);\n  }\n}\n\nfunction calculateNavigation(): void {\n  const { maxDate, minDate } = calendarState;\n  const mode = get(viewMode);\n\n  if (mode === 'months') {\n    const nextYear = viewYear + 1;\n    const previousYear = viewYear - 1;\n\n    set(canGoToNext, !isDefined(maxDate) || nextYear <= get(maxDate).getFullYear());\n    set(canGoToPrev, !isDefined(minDate) || previousYear >= get(minDate).getFullYear());\n  }\n  else {\n    const lastYearInRange = get(startYear) + 11;\n    const firstYearInRange = get(startYear);\n\n    // Check if we can navigate to the next range of years\n    const nextRangeStart = lastYearInRange + 1;\n    set(canGoToNext, !isDefined(maxDate) || nextRangeStart <= get(maxDate).getFullYear());\n\n    // Check if we can navigate to the previous range of years\n    const prevRangeEnd = firstYearInRange - 1;\n    set(canGoToPrev, !isDefined(minDate) || prevRangeEnd >= get(minDate).getFullYear());\n  }\n}\n\nfunction calculateMonthsInRange(): void {\n  const { minDate, maxDate } = calendarState;\n  const currentYear = viewYear;\n  const result = new Array(12).fill(true);\n\n  if (isDefined(minDate) || isDefined(maxDate)) {\n    for (let month = 0; month < 12; month++) {\n      const date = new Date(currentYear, month);\n      if (isDefined(maxDate) && date > get(maxDate)) {\n        result[month] = false;\n      }\n      if (isDefined(minDate) && date < get(minDate)) {\n        result[month] = false;\n      }\n    }\n  }\n\n  set(monthsInRange, result);\n}\n\nfunction calculateYearsInRange(): void {\n  const { minDate, maxDate } = calendarState;\n  const range = get(yearRange);\n  const currentMonth = viewMonth;\n\n  if (!isDefined(minDate) && !isDefined(maxDate)) {\n    set(yearsInRange, new Array(range.length).fill(true));\n    return;\n  }\n\n  const result = range.map((year) => {\n    const date = new Date(year, currentMonth);\n    if (isDefined(maxDate) && date > get(maxDate)) {\n      return false;\n    }\n    return !isDefined(minDate) || date >= get(minDate);\n  });\n\n  set(yearsInRange, result);\n}\n\nfunction toggleSelection(): void {\n  set(viewMode, get(viewMode) === 'months' ? 'years' : 'months');\n}\n\nfunction selectMonth(month: number): void {\n  if (!get(monthsInRange)[month])\n    return;\n  emit('select', { month, year: viewYear });\n  set(modelValue, false);\n}\n\nfunction selectYear(year: number): void {\n  const yearIndex = get(yearRange).indexOf(year);\n  if (yearIndex === -1 || !get(yearsInRange)[yearIndex])\n    return;\n\n  emit('select', { month: viewMonth, year });\n  set(viewMode, 'months');\n}\n\nfunction handleNext(): void {\n  if (get(viewMode) === 'months') {\n    const nextYear = viewYear + 1;\n    // Emit directly - navigation is already constrained by canGoToNext\n    emit('select', { month: viewMonth, year: nextYear });\n  }\n  else {\n    const lastYearInRange = get(startYear) + 11;\n    set(startYear, lastYearInRange + 1);\n  }\n}\n\nfunction handlePrev(): void {\n  if (get(viewMode) === 'months') {\n    const previousYear = viewYear - 1;\n    // Emit directly - navigation is already constrained by canGoToPrev\n    emit('select', { month: viewMonth, year: previousYear });\n  }\n  else {\n    const firstYearInRange = get(startYear);\n    set(startYear, firstYearInRange - 12);\n  }\n}\n\n// Initial calculations\ncalculateYearRange();\ncalculateTitle();\ncalculateNavigation();\ncalculateMonthsInRange();\ncalculateYearsInRange();\n\n// Watchers for recalculation only when needed\nwatch(startYear, () => {\n  calculateYearRange();\n  calculateTitle();\n  calculateNavigation();\n  calculateYearsInRange();\n});\n\nwatch(viewMode, () => {\n  calculateTitle();\n  calculateNavigation();\n});\n\nwatch(\n  () => viewYear,\n  () => {\n    calculateTitle();\n    calculateNavigation();\n    calculateMonthsInRange();\n    calculateYearsInRange();\n  },\n);\n\nwatch(\n  () => viewMonth,\n  () => {\n    calculateYearsInRange();\n  },\n);\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"modelValue\"\n    :anchor-el=\"anchorEl\"\n    :options=\"MENU_OPTIONS\"\n  >\n    <div class=\"w-64 shadow-lg overflow-hidden\">\n      <div class=\"flex items-center justify-center p-1 font-medium text-gray-800 dark:text-gray-200 border-b border-rui-grey-200 dark:border-rui-grey-800 cursor-pointer hover:bg-rui-grey-100 dark:hover:bg-rui-grey-800\">\n        <RuiButton\n          type=\"button\"\n          :class=\"navButtonClass\"\n          icon\n          :disabled=\"!get(canGoToPrev)\"\n          variant=\"text\"\n          @click.stop=\"handlePrev()\"\n        >\n          <RuiIcon\n            name=\"lu-chevron-left\"\n            size=\"20\"\n          />\n        </RuiButton>\n\n        <div\n          class=\"flex-1 text-center cursor-pointer\"\n          @click.stop=\"toggleSelection()\"\n        >\n          {{ get(title) }}\n        </div>\n\n        <RuiButton\n          type=\"button\"\n          :class=\"navButtonClass\"\n          icon\n          :disabled=\"!get(canGoToNext)\"\n          variant=\"text\"\n          @click.stop=\"handleNext()\"\n        >\n          <RuiIcon\n            name=\"lu-chevron-right\"\n            size=\"20\"\n          />\n        </RuiButton>\n      </div>\n\n      <div\n        v-if=\"viewMode === 'months'\"\n        class=\"grid grid-cols-3 gap-1 p-2\"\n      >\n        <button\n          v-for=\"(month, index) in months\"\n          :key=\"month\"\n          type=\"button\"\n          :class=\"cellButton({\n            selected: index === viewMonth && get(monthsInRange)[index],\n            selectedOutOfRange: index === viewMonth && !get(monthsInRange)[index],\n            inRange: index !== viewMonth ? get(monthsInRange)[index] : undefined,\n          })\"\n          :disabled=\"!get(monthsInRange)[index]\"\n          @click.stop=\"selectMonth(index)\"\n        >\n          {{ month.substring(0, 3) }}\n        </button>\n      </div>\n\n      <div\n        v-else-if=\"viewMode === 'years'\"\n        class=\"grid grid-cols-3 gap-1 p-2\"\n      >\n        <button\n          v-for=\"(year, index) in yearRange\"\n          :key=\"year\"\n          type=\"button\"\n          :class=\"cellButton({\n            selected: year === viewYear && get(yearsInRange)[index],\n            selectedOutOfRange: year === viewYear && !get(yearsInRange)[index],\n            inRange: year !== viewYear ? get(yearsInRange)[index] : undefined,\n          })\"\n          :disabled=\"!get(yearsInRange)[index]\"\n          @click.stop=\"selectYear(year)\"\n        >\n          {{ year }}\n        </button>\n      </div>\n    </div>\n  </RuiMenu>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiCalendarMenu.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/calendar/RuiCalendarMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  getShortMonthNames,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { tv } from '@/utils/tv';\nimport RuiButton from '../buttons/button/RuiButton.vue';\n\ndefineOptions({\n  name: 'RuiCalendarMenu',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>();\n\nconst { viewMonth, viewYear } = defineProps<{\n  anchorEl: HTMLElement | undefined;\n  viewMonth: number;\n  viewYear: number;\n}>();\n\nconst emit = defineEmits<{\n  select: [MonthYearSelection];\n}>();\n\nconst MENU_OPTIONS: FloatingOptions = { placement: Placement.bottomStart };\n\n// Core reactive state - minimal\nconst viewMode = ref<'months' | 'years'>('months');\nconst startYear = ref<number>(viewYear - 6);\n\n// Pre-calculated constants\nconst months = getShortMonthNames();\nconst calendarState = inject<RuiCalendarState>(CalendarStateSymbol) as RuiCalendarState;\n\nconst cellButton = tv({\n  base: 'h-9 w-full flex items-center justify-center text-sm font-medium rounded-rui-control transition-colors duration-150 ease-in-out border-none outline-hidden cursor-pointer focus-visible:focus-ring',\n  variants: {\n    selected: {\n      true: 'bg-rui-primary-fill text-rui-primary-foreground hover:bg-rui-primary-darker active:bg-rui-primary-darker',\n    },\n    inRange: {\n      true: 'text-rui-text bg-transparent hover:bg-rui-hover active:bg-rui-pressed',\n      false: 'cursor-not-allowed bg-transparent pointer-events-none text-rui-text-disabled',\n    },\n    selectedOutOfRange: {\n      true: 'bg-rui-surface-muted text-rui-text-disabled',\n    },\n  },\n});\n\n// Pre-calculated arrays for performance - using refs for better control\nconst yearRange = ref<number[]>([]);\nconst monthsInRange = ref<boolean[]>([]);\nconst yearsInRange = ref<boolean[]>([]);\nconst title = ref<string>('');\nconst canGoToNext = ref<boolean>(true);\nconst canGoToPrev = ref<boolean>(true);\n\n/** Rebuilds the years the picker offers around the current start year. */\nfunction calculateYearRange(): void {\n  const start = get(startYear);\n  set(\n    yearRange,\n    Array.from({ length: 12 }, (_, i) => start + i),\n  );\n}\n\nfunction calculateTitle(): void {\n  if (get(viewMode) === 'months') {\n    set(title, viewYear.toString());\n  }\n  else {\n    const range = get(yearRange);\n    set(title, `${range[0]} - ${range.at(-1)}`);\n  }\n}\n\nfunction calculateNavigation(): void {\n  const { maxDate, minDate } = calendarState;\n  const mode = get(viewMode);\n\n  if (mode === 'months') {\n    const nextYear = viewYear + 1;\n    const previousYear = viewYear - 1;\n\n    set(canGoToNext, !isDefined(maxDate) || nextYear <= get(maxDate).getFullYear());\n    set(canGoToPrev, !isDefined(minDate) || previousYear >= get(minDate).getFullYear());\n  }\n  else {\n    const lastYearInRange = get(startYear) + 11;\n    const firstYearInRange = get(startYear);\n\n    // Check if we can navigate to the next range of years\n    const nextRangeStart = lastYearInRange + 1;\n    set(canGoToNext, !isDefined(maxDate) || nextRangeStart <= get(maxDate).getFullYear());\n\n    // Check if we can navigate to the previous range of years\n    const prevRangeEnd = firstYearInRange - 1;\n    set(canGoToPrev, !isDefined(minDate) || prevRangeEnd >= get(minDate).getFullYear());\n  }\n}\n\nfunction calculateMonthsInRange(): void {\n  const { minDate, maxDate } = calendarState;\n  const currentYear = viewYear;\n  const result = new Array(12).fill(true);\n\n  if (isDefined(minDate) || isDefined(maxDate)) {\n    for (let month = 0; month < 12; month++) {\n      const date = new Date(currentYear, month);\n      if (isDefined(maxDate) && date > get(maxDate)) {\n        result[month] = false;\n      }\n      if (isDefined(minDate) && date < get(minDate)) {\n        result[month] = false;\n      }\n    }\n  }\n\n  set(monthsInRange, result);\n}\n\nfunction calculateYearsInRange(): void {\n  const { minDate, maxDate } = calendarState;\n  const range = get(yearRange);\n  const currentMonth = viewMonth;\n\n  if (!isDefined(minDate) && !isDefined(maxDate)) {\n    set(yearsInRange, new Array(range.length).fill(true));\n    return;\n  }\n\n  const result = range.map((year) => {\n    const date = new Date(year, currentMonth);\n    if (isDefined(maxDate) && date > get(maxDate)) {\n      return false;\n    }\n    return !isDefined(minDate) || date >= get(minDate);\n  });\n\n  set(yearsInRange, result);\n}\n\nfunction toggleSelection(): void {\n  set(viewMode, get(viewMode) === 'months' ? 'years' : 'months');\n}\n\nfunction selectMonth(month: number): void {\n  if (!get(monthsInRange)[month])\n    return;\n  emit('select', { month, year: viewYear });\n  set(modelValue, false);\n}\n\nfunction selectYear(year: number): void {\n  const yearIndex = get(yearRange).indexOf(year);\n  if (yearIndex === -1 || !get(yearsInRange)[yearIndex])\n    return;\n\n  emit('select', { month: viewMonth, year });\n  set(viewMode, 'months');\n}\n\nfunction handleNext(): void {\n  if (get(viewMode) === 'months') {\n    const nextYear = viewYear + 1;\n    // Emit directly - navigation is already constrained by canGoToNext\n    emit('select', { month: viewMonth, year: nextYear });\n  }\n  else {\n    const lastYearInRange = get(startYear) + 11;\n    set(startYear, lastYearInRange + 1);\n  }\n}\n\nfunction handlePrev(): void {\n  if (get(viewMode) === 'months') {\n    const previousYear = viewYear - 1;\n    // Emit directly - navigation is already constrained by canGoToPrev\n    emit('select', { month: viewMonth, year: previousYear });\n  }\n  else {\n    const firstYearInRange = get(startYear);\n    set(startYear, firstYearInRange - 12);\n  }\n}\n\n// Initial calculations\ncalculateYearRange();\ncalculateTitle();\ncalculateNavigation();\ncalculateMonthsInRange();\ncalculateYearsInRange();\n\n// Watchers for recalculation only when needed\nwatch(startYear, () => {\n  calculateYearRange();\n  calculateTitle();\n  calculateNavigation();\n  calculateYearsInRange();\n});\n\nwatch(viewMode, () => {\n  calculateTitle();\n  calculateNavigation();\n});\n\nwatch(\n  () => viewYear,\n  () => {\n    calculateTitle();\n    calculateNavigation();\n    calculateMonthsInRange();\n    calculateYearsInRange();\n  },\n);\n\nwatch(\n  () => viewMonth,\n  () => {\n    calculateYearsInRange();\n  },\n);\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"modelValue\"\n    :anchor-el=\"anchorEl\"\n    :options=\"MENU_OPTIONS\"\n  >\n    <div class=\"w-64 overflow-hidden\">\n      <div class=\"flex items-center justify-between gap-1 border-b border-rui-divider px-1 pb-1 text-sm font-medium text-rui-text\">\n        <RuiButton\n          type=\"button\"\n          icon\n          size=\"sm\"\n          aria-label=\"Previous\"\n          :disabled=\"!get(canGoToPrev)\"\n          variant=\"text\"\n          @click.stop=\"handlePrev()\"\n        >\n          <RuiIcon name=\"lu-chevron-left\" />\n        </RuiButton>\n\n        <button\n          type=\"button\"\n          class=\"flex-1 rounded-rui-control px-2 py-1 text-center transition-colors hover:bg-rui-hover outline-hidden focus-visible:focus-ring\"\n          @click.stop=\"toggleSelection()\"\n        >\n          {{ get(title) }}\n        </button>\n\n        <RuiButton\n          type=\"button\"\n          icon\n          size=\"sm\"\n          aria-label=\"Next\"\n          :disabled=\"!get(canGoToNext)\"\n          variant=\"text\"\n          @click.stop=\"handleNext()\"\n        >\n          <RuiIcon name=\"lu-chevron-right\" />\n        </RuiButton>\n      </div>\n\n      <div\n        v-if=\"viewMode === 'months'\"\n        class=\"grid grid-cols-3 gap-1 p-2\"\n      >\n        <button\n          v-for=\"(month, index) in months\"\n          :key=\"month\"\n          type=\"button\"\n          :class=\"cellButton({\n            selected: index === viewMonth && get(monthsInRange)[index],\n            selectedOutOfRange: index === viewMonth && !get(monthsInRange)[index],\n            inRange: index !== viewMonth ? get(monthsInRange)[index] : undefined,\n          })\"\n          :disabled=\"!get(monthsInRange)[index]\"\n          @click.stop=\"selectMonth(index)\"\n        >\n          {{ month.substring(0, 3) }}\n        </button>\n      </div>\n\n      <div\n        v-else-if=\"viewMode === 'years'\"\n        class=\"grid grid-cols-3 gap-1 p-2\"\n      >\n        <button\n          v-for=\"(year, index) in yearRange\"\n          :key=\"year\"\n          type=\"button\"\n          :class=\"cellButton({\n            selected: year === viewYear && get(yearsInRange)[index],\n            selectedOutOfRange: year === viewYear && !get(yearsInRange)[index],\n            inRange: year !== viewYear ? get(yearsInRange)[index] : undefined,\n          })\"\n          :disabled=\"!get(yearsInRange)[index]\"\n          @click.stop=\"selectYear(year)\"\n        >\n          {{ year }}\n        </button>\n      </div>\n    </div>\n  </RuiMenu>\n</template>\n"],"mappings":"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"}

package/dist/components/cards/RuiCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCard.js","names":[],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  elevation?: number;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  classNames?: RuiCardClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  elevation = 0,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  classNames,\n  contentClass = '',\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst card = tv({\n  slots: {\n    root: 'flex flex-col h-full w-full bg-white dark:bg-[#1E1E1E]',\n    image: 'overflow-hidden',\n    content: 'text-body-1 text-rui-light-text dark:text-rui-dark-text overflow-y-auto',\n    footer: 'flex space-x-2 items-center justify-start mt-auto',\n  },\n  variants: {\n    variant: {\n      flat: { root: '' },\n      outlined: { root: 'border border-black/[0.12] dark:border-white/[0.12]' },\n    },\n    rounded: {\n      sm: { root: 'rounded-[.25rem]', image: 'rounded-t-[.25rem]' },\n      md: { root: 'rounded-[.5rem]', image: 'rounded-t-[.5rem]' },\n      lg: { root: 'rounded-[1rem]', image: 'rounded-t-[1rem]' },\n    },\n    divide: {\n      true: { root: 'divide-y divide-black/[0.12] dark:divide-white/[0.12]' },\n    },\n    padding: {\n      none: { content: 'p-0' },\n      dense: { content: 'p-3' },\n      normal: { content: 'p-4' },\n    },\n    dense: {\n      true: { footer: 'py-1' },\n      false: { footer: 'p-4 pt-2' },\n    },\n  },\n  defaultVariants: { variant: 'outlined', rounded: 'md', padding: 'normal', dense: false },\n});\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\nconst ui = computed<ReturnType<typeof card>>(() => card({ variant: cardVariant, rounded, divide, dense, padding: contentPadding.value }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: [`shadow-${elevation}`, cn(classNames?.root ?? $attrs.class)] })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      data-id=\"card-content\"\n      :class=\"ui.content({ class: cn(classNames?.content) ?? contentClass })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCard.js","names":[],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  classNames?: RuiCardClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  classNames,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst card = tv({\n  slots: {\n    root: 'flex flex-col h-full w-full bg-rui-surface',\n    image: 'overflow-hidden',\n    content: 'text-sm/6 text-rui-text overflow-y-auto outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    // a leading text button moves out by its side padding to align its label; unquoted selectors, quoted ones break consumer builds\n    footer: [\n      'flex between:ml-2 between:mr-0 items-center justify-start mt-auto',\n      '[&>[data-variant=text][data-size=xs]:first-child]:-ms-1',\n      '[&>[data-variant=text][data-size=sm]:first-child]:-ms-1.5',\n      '[&>[data-variant=text][data-size=md]:first-child]:-ms-2',\n      '[&>[data-variant=text][data-size=lg]:first-child]:-ms-2.5',\n      '[&>[data-variant=text][data-size$=xl]:first-child]:-ms-2.5',\n    ],\n  },\n  variants: {\n    variant: {\n      flat: { root: '' },\n      outlined: { root: 'border border-rui-divider' },\n    },\n    rounded: {\n      sm: { root: 'rounded-rui-sm', image: 'rounded-t-rui-sm' },\n      md: { root: 'rounded-rui-card', image: 'rounded-t-rui-card' },\n      lg: { root: 'rounded-rui-lg', image: 'rounded-t-rui-lg' },\n    },\n    divide: {\n      true: { root: 'between:border-t between:border-b-0 between:border-rui-divider' },\n    },\n    padding: {\n      none: { content: 'p-0' },\n      dense: { content: 'p-3' },\n      normal: { content: 'p-4' },\n    },\n    dense: {\n      // the footer keeps the content's side padding, so its buttons line up with the text above\n      true: { footer: 'p-3 pt-1' },\n      false: { footer: 'p-4 pt-2' },\n    },\n  },\n  defaultVariants: { variant: 'outlined', rounded: 'md', padding: 'normal', dense: false },\n});\n\nconst content = useTemplateRef<HTMLDivElement>('content');\n// a fixed-height card scrolls its content, which keyboard users need to reach when it holds no controls\nconst contentTabindex = useKeyboardScroll(content);\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\nconst ui = computed<ReturnType<typeof card>>(() => card({ variant: cardVariant, rounded, divide, dense, padding: contentPadding.value }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn(classNames?.root ?? $attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      ref=\"content\"\n      data-id=\"card-content\"\n      :tabindex=\"contentTabindex\"\n      :class=\"ui.content({ class: cn(classNames?.content) })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/cards/RuiCard.vue.d.ts

@@ -8,13 +8,10 @@ export interface RuiCardClassNames {
 export interface Props {
     dense?: boolean;
     divide?: boolean;
-    elevation?: number;
     variant?: 'flat' | 'outlined';
     rounded?: 'sm' | 'md' | 'lg';
     noPadding?: boolean;
     classNames?: RuiCardClassNames;
-    /** @deprecated Use `classNames.content` instead */
-    contentClass?: string;
 }
 type __VLS_Slots = {
     'image'?: () => any;

package/dist/components/cards/RuiCard.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,9 @@
 import { cn, tv } from "../../utils/tv.js";
 import RuiCardHeader_default from "./RuiCardHeader.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, useSlots, withCtx } from "vue";
+import { useKeyboardScroll } from "../../composables/keyboard-scroll.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, useSlots, useTemplateRef, withCtx } from "vue";
 //#region src/components/cards/RuiCard.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["tabindex"];
 var RuiCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiCard",
 	inheritAttrs: false,
@@ -15,52 +17,57 @@ var RuiCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			type: Boolean,
 			default: false
 		},
-		elevation: { default: 0 },
 		variant: { default: "outlined" },
 		rounded: { default: "md" },
 		noPadding: {
 			type: Boolean,
 			default: false
 		},
-		classNames: {},
-		contentClass: { default: "" }
+		classNames: {}
 	},
 	setup(__props) {
 		const slots = useSlots();
 		const card = tv({
 			slots: {
-				root: "flex flex-col h-full w-full bg-white dark:bg-[#1E1E1E]",
+				root: "flex flex-col h-full w-full bg-rui-surface",
 				image: "overflow-hidden",
-				content: "text-body-1 text-rui-light-text dark:text-rui-dark-text overflow-y-auto",
-				footer: "flex space-x-2 items-center justify-start mt-auto"
+				content: "text-sm/6 text-rui-text overflow-y-auto outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2",
+				footer: [
+					"flex between:ml-2 between:mr-0 items-center justify-start mt-auto",
+					"[&>[data-variant=text][data-size=xs]:first-child]:-ms-1",
+					"[&>[data-variant=text][data-size=sm]:first-child]:-ms-1.5",
+					"[&>[data-variant=text][data-size=md]:first-child]:-ms-2",
+					"[&>[data-variant=text][data-size=lg]:first-child]:-ms-2.5",
+					"[&>[data-variant=text][data-size$=xl]:first-child]:-ms-2.5"
+				]
 			},
 			variants: {
 				variant: {
 					flat: { root: "" },
-					outlined: { root: "border border-black/[0.12] dark:border-white/[0.12]" }
+					outlined: { root: "border border-rui-divider" }
 				},
 				rounded: {
 					sm: {
-						root: "rounded-[.25rem]",
-						image: "rounded-t-[.25rem]"
+						root: "rounded-rui-sm",
+						image: "rounded-t-rui-sm"
 					},
 					md: {
-						root: "rounded-[.5rem]",
-						image: "rounded-t-[.5rem]"
+						root: "rounded-rui-card",
+						image: "rounded-t-rui-card"
 					},
 					lg: {
-						root: "rounded-[1rem]",
-						image: "rounded-t-[1rem]"
+						root: "rounded-rui-lg",
+						image: "rounded-t-rui-lg"
 					}
 				},
-				divide: { true: { root: "divide-y divide-black/[0.12] dark:divide-white/[0.12]" } },
+				divide: { true: { root: "between:border-t between:border-b-0 between:border-rui-divider" } },
 				padding: {
 					none: { content: "p-0" },
 					dense: { content: "p-3" },
 					normal: { content: "p-4" }
 				},
 				dense: {
-					true: { footer: "py-1" },
+					true: { footer: "p-3 pt-1" },
 					false: { footer: "p-4 pt-2" }
 				}
 			},
@@ -71,6 +78,8 @@ var RuiCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				dense: false
 			}
 		});
+		const content = useTemplateRef("content");
+		const contentTabindex = useKeyboardScroll(content);
 		const hasHeadContent = computed(() => !!slots.header || !!slots.subheader);
 		const contentPadding = computed(() => {
 			if (__props.noPadding) return "none";
@@ -84,7 +93,7 @@ var RuiCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			padding: contentPadding.value
 		}));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ class: ui.value.root({ class: [`shadow-${__props.elevation}`, unref(cn)(__props.classNames?.root ?? _ctx.$attrs.class)] }) }, {
+			return openBlock(), createElementBlock("div", mergeProps({ class: ui.value.root({ class: unref(cn)(__props.classNames?.root ?? _ctx.$attrs.class) }) }, {
 				..._ctx.$attrs,
 				class: void 0
 			}), [
@@ -115,9 +124,12 @@ var RuiCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				]), 1032, ["dense"])) : createCommentVNode("", true)]),
 				slots.default ? (openBlock(), createElementBlock("div", {
 					key: 1,
+					ref_key: "content",
+					ref: content,
 					"data-id": "card-content",
-					class: normalizeClass(ui.value.content({ class: unref(cn)(__props.classNames?.content) ?? __props.contentClass }))
-				}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true),
+					tabindex: unref(contentTabindex),
+					class: normalizeClass(ui.value.content({ class: unref(cn)(__props.classNames?.content) }))
+				}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1)) : createCommentVNode("", true),
 				slots.footer ? (openBlock(), createElementBlock("div", {
 					key: 2,
 					"data-id": "card-footer",

package/dist/components/cards/RuiCard.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCard.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  elevation?: number;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  classNames?: RuiCardClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  elevation = 0,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  classNames,\n  contentClass = '',\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst card = tv({\n  slots: {\n    root: 'flex flex-col h-full w-full bg-white dark:bg-[#1E1E1E]',\n    image: 'overflow-hidden',\n    content: 'text-body-1 text-rui-light-text dark:text-rui-dark-text overflow-y-auto',\n    footer: 'flex space-x-2 items-center justify-start mt-auto',\n  },\n  variants: {\n    variant: {\n      flat: { root: '' },\n      outlined: { root: 'border border-black/[0.12] dark:border-white/[0.12]' },\n    },\n    rounded: {\n      sm: { root: 'rounded-[.25rem]', image: 'rounded-t-[.25rem]' },\n      md: { root: 'rounded-[.5rem]', image: 'rounded-t-[.5rem]' },\n      lg: { root: 'rounded-[1rem]', image: 'rounded-t-[1rem]' },\n    },\n    divide: {\n      true: { root: 'divide-y divide-black/[0.12] dark:divide-white/[0.12]' },\n    },\n    padding: {\n      none: { content: 'p-0' },\n      dense: { content: 'p-3' },\n      normal: { content: 'p-4' },\n    },\n    dense: {\n      true: { footer: 'py-1' },\n      false: { footer: 'p-4 pt-2' },\n    },\n  },\n  defaultVariants: { variant: 'outlined', rounded: 'md', padding: 'normal', dense: false },\n});\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\nconst ui = computed<ReturnType<typeof card>>(() => card({ variant: cardVariant, rounded, divide, dense, padding: contentPadding.value }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: [`shadow-${elevation}`, cn(classNames?.root ?? $attrs.class)] })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      data-id=\"card-content\"\n      :class=\"ui.content({ class: cn(classNames?.content) ?? contentClass })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiCard.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  classNames?: RuiCardClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  classNames,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst card = tv({\n  slots: {\n    root: 'flex flex-col h-full w-full bg-rui-surface',\n    image: 'overflow-hidden',\n    content: 'text-sm/6 text-rui-text overflow-y-auto outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    // a leading text button moves out by its side padding to align its label; unquoted selectors, quoted ones break consumer builds\n    footer: [\n      'flex between:ml-2 between:mr-0 items-center justify-start mt-auto',\n      '[&>[data-variant=text][data-size=xs]:first-child]:-ms-1',\n      '[&>[data-variant=text][data-size=sm]:first-child]:-ms-1.5',\n      '[&>[data-variant=text][data-size=md]:first-child]:-ms-2',\n      '[&>[data-variant=text][data-size=lg]:first-child]:-ms-2.5',\n      '[&>[data-variant=text][data-size$=xl]:first-child]:-ms-2.5',\n    ],\n  },\n  variants: {\n    variant: {\n      flat: { root: '' },\n      outlined: { root: 'border border-rui-divider' },\n    },\n    rounded: {\n      sm: { root: 'rounded-rui-sm', image: 'rounded-t-rui-sm' },\n      md: { root: 'rounded-rui-card', image: 'rounded-t-rui-card' },\n      lg: { root: 'rounded-rui-lg', image: 'rounded-t-rui-lg' },\n    },\n    divide: {\n      true: { root: 'between:border-t between:border-b-0 between:border-rui-divider' },\n    },\n    padding: {\n      none: { content: 'p-0' },\n      dense: { content: 'p-3' },\n      normal: { content: 'p-4' },\n    },\n    dense: {\n      // the footer keeps the content's side padding, so its buttons line up with the text above\n      true: { footer: 'p-3 pt-1' },\n      false: { footer: 'p-4 pt-2' },\n    },\n  },\n  defaultVariants: { variant: 'outlined', rounded: 'md', padding: 'normal', dense: false },\n});\n\nconst content = useTemplateRef<HTMLDivElement>('content');\n// a fixed-height card scrolls its content, which keyboard users need to reach when it holds no controls\nconst contentTabindex = useKeyboardScroll(content);\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\nconst ui = computed<ReturnType<typeof card>>(() => card({ variant: cardVariant, rounded, divide, dense, padding: contentPadding.value }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn(classNames?.root ?? $attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      ref=\"content\"\n      data-id=\"card-content\"\n      :tabindex=\"contentTabindex\"\n      :class=\"ui.content({ class: cn(classNames?.content) })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/cards/RuiCardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCardHeader.js","names":[],"sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  dense?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCardHeader',\n  inheritAttrs: false,\n});\n\nconst { dense = false } = defineProps<Props>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  header?: () => any;\n  subheader?: () => any;\n}>();\n\nconst cardHeader = tv({\n  slots: {\n    root: 'flex',\n    prepend: 'rounded-full flex items-center justify-center text-white bg-rui-grey-400 dark:bg-rui-grey-700 dark:text-black/90 overflow-hidden',\n    header: 'text-rui-text dark:text-rui-dark-text',\n  },\n  variants: {\n    dense: {\n      true: {\n        root: 'p-3 space-x-2',\n        prepend: 'text-base p-[0.08rem] w-9 h-9',\n      },\n      false: {\n        root: 'p-4 space-x-4',\n        prepend: 'text-[1.25rem] w-10 h-10',\n      },\n    },\n    hasPrepend: {\n      true: { header: 'text-body-1' },\n      false: { header: 'text-h6' },\n    },\n  },\n  defaultVariants: { dense: false, hasPrepend: false },\n});\n\nconst ui = computed<ReturnType<typeof cardHeader>>(() => cardHeader({ dense, hasPrepend: !!slots.prepend }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.prepend\"\n      data-id=\"prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <div class=\"flex flex-col justify-center\">\n      <h5\n        v-if=\"slots.header\"\n        data-id=\"header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\" />\n      </h5>\n      <p\n        v-if=\"slots.subheader\"\n        data-id=\"subheader\"\n        class=\"text-rui-text-secondary dark:text-rui-dark-text-secondary text-body-2 mb-0\"\n      >\n        <slot name=\"subheader\" />\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCardHeader.js","names":[],"sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  dense?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCardHeader',\n  inheritAttrs: false,\n});\n\nconst { dense = false } = defineProps<Props>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  header?: () => any;\n  subheader?: () => any;\n}>();\n\nconst cardHeader = tv({\n  slots: {\n    root: 'flex',\n    prepend: 'rounded-full flex items-center justify-center bg-rui-neutral-200 text-rui-neutral-700 dark:bg-rui-neutral-700 dark:text-rui-neutral-200 overflow-hidden',\n    // one title style whether or not there is a prepend: a card title is a section heading, not a page title\n    header: 'text-base font-semibold text-rui-text',\n  },\n  variants: {\n    dense: {\n      true: {\n        root: 'p-3 between:ml-2 between:mr-0',\n        prepend: 'text-base p-[0.08rem] w-9 h-9',\n      },\n      false: {\n        root: 'p-4 between:ml-4 between:mr-0',\n        prepend: 'text-[1.25rem] w-10 h-10',\n      },\n    },\n  },\n  defaultVariants: { dense: false },\n});\n\nconst ui = computed<ReturnType<typeof cardHeader>>(() => cardHeader({ dense }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.prepend\"\n      data-id=\"prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <div class=\"flex flex-col justify-center\">\n      <h5\n        v-if=\"slots.header\"\n        data-id=\"header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\" />\n      </h5>\n      <p\n        v-if=\"slots.subheader\"\n        data-id=\"subheader\"\n        class=\"text-rui-text-secondary text-body-2 mb-0\"\n      >\n        <slot name=\"subheader\" />\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/cards/RuiCardHeader.vue_vue_type_script_setup_true_lang.js

@@ -5,7 +5,7 @@ var _hoisted_1 = { class: "flex flex-col justify-center" };
 var _hoisted_2 = {
 	key: 1,
 	"data-id": "subheader",
-	class: "text-rui-text-secondary dark:text-rui-dark-text-secondary text-body-2 mb-0"
+	class: "text-rui-text-secondary text-body-2 mb-0"
 };
 var RuiCardHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiCardHeader",
@@ -20,34 +20,22 @@ var RuiCardHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		const cardHeader = tv({
 			slots: {
 				root: "flex",
-				prepend: "rounded-full flex items-center justify-center text-white bg-rui-grey-400 dark:bg-rui-grey-700 dark:text-black/90 overflow-hidden",
-				header: "text-rui-text dark:text-rui-dark-text"
+				prepend: "rounded-full flex items-center justify-center bg-rui-neutral-200 text-rui-neutral-700 dark:bg-rui-neutral-700 dark:text-rui-neutral-200 overflow-hidden",
+				header: "text-base font-semibold text-rui-text"
 			},
-			variants: {
-				dense: {
-					true: {
-						root: "p-3 space-x-2",
-						prepend: "text-base p-[0.08rem] w-9 h-9"
-					},
-					false: {
-						root: "p-4 space-x-4",
-						prepend: "text-[1.25rem] w-10 h-10"
-					}
+			variants: { dense: {
+				true: {
+					root: "p-3 between:ml-2 between:mr-0",
+					prepend: "text-base p-[0.08rem] w-9 h-9"
 				},
-				hasPrepend: {
-					true: { header: "text-body-1" },
-					false: { header: "text-h6" }
+				false: {
+					root: "p-4 between:ml-4 between:mr-0",
+					prepend: "text-[1.25rem] w-10 h-10"
 				}
-			},
-			defaultVariants: {
-				dense: false,
-				hasPrepend: false
-			}
+			} },
+			defaultVariants: { dense: false }
 		});
-		const ui = computed(() => cardHeader({
-			dense: __props.dense,
-			hasPrepend: !!slots.prepend
-		}));
+		const ui = computed(() => cardHeader({ dense: __props.dense }));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ class: unref(ui).root() }, _ctx.$attrs), [slots.prepend ? (openBlock(), createElementBlock("div", {
 				key: 0,

package/dist/components/cards/RuiCardHeader.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCardHeader.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  dense?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCardHeader',\n  inheritAttrs: false,\n});\n\nconst { dense = false } = defineProps<Props>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  header?: () => any;\n  subheader?: () => any;\n}>();\n\nconst cardHeader = tv({\n  slots: {\n    root: 'flex',\n    prepend: 'rounded-full flex items-center justify-center text-white bg-rui-grey-400 dark:bg-rui-grey-700 dark:text-black/90 overflow-hidden',\n    header: 'text-rui-text dark:text-rui-dark-text',\n  },\n  variants: {\n    dense: {\n      true: {\n        root: 'p-3 space-x-2',\n        prepend: 'text-base p-[0.08rem] w-9 h-9',\n      },\n      false: {\n        root: 'p-4 space-x-4',\n        prepend: 'text-[1.25rem] w-10 h-10',\n      },\n    },\n    hasPrepend: {\n      true: { header: 'text-body-1' },\n      false: { header: 'text-h6' },\n    },\n  },\n  defaultVariants: { dense: false, hasPrepend: false },\n});\n\nconst ui = computed<ReturnType<typeof cardHeader>>(() => cardHeader({ dense, hasPrepend: !!slots.prepend }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.prepend\"\n      data-id=\"prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <div class=\"flex flex-col justify-center\">\n      <h5\n        v-if=\"slots.header\"\n        data-id=\"header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\" />\n      </h5>\n      <p\n        v-if=\"slots.subheader\"\n        data-id=\"subheader\"\n        class=\"text-rui-text-secondary dark:text-rui-dark-text-secondary text-body-2 mb-0\"\n      >\n        <slot name=\"subheader\" />\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ,SAAA;EAMd,MAAM,aAAa,GAAG;GACpB,OAAO;IACL,MAAM;IACN,SAAS;IACT,QAAQ;GACV;GACA,UAAU;IACR,OAAO;KACL,MAAM;MACJ,MAAM;MACN,SAAS;KACX;KACA,OAAO;MACL,MAAM;MACN,SAAS;KACX;IACF;IACA,YAAY;KACV,MAAM,EAAE,QAAQ,cAAc;KAC9B,OAAO,EAAE,QAAQ,UAAU;IAC7B;GACF;GACA,iBAAiB;IAAE,OAAO;IAAO,YAAY;GAAM;EACrD,CAAC;EAED,MAAM,KAAK,eAA8C,WAAW;GAAE,OAAI,QAAA;GAAG,YAAY,CAAC,CAAC,MAAM;EAAQ,CAAC,CAAC;;GAIzG,OAAA,UAAA,GAAA,mBA2BM,OA3BN,WA2BM,EA1BH,OAAO,MAAA,EAAA,CAAE,CAAC,KAAI,EACPA,GAAAA,KAAAA,MAAM,GAAA,CAGN,MAAM,WADd,UAAA,GAAA,mBAMM,OAAA;;IAJJ,WAAQ;IACP,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;GAElB,GAAA,CAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEzB,mBAeM,OAfN,YAeM,CAbI,MAAM,UADd,UAAA,GAAA,mBAMK,MAAA;;IAJH,WAAQ;IACP,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;GAEjB,GAAA,CAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAGhB,MAAM,aADd,UAAA,GAAA,mBAMI,KANJ,YAMI,CADF,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,EAAA"}
+{"version":3,"file":"RuiCardHeader.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  dense?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCardHeader',\n  inheritAttrs: false,\n});\n\nconst { dense = false } = defineProps<Props>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  header?: () => any;\n  subheader?: () => any;\n}>();\n\nconst cardHeader = tv({\n  slots: {\n    root: 'flex',\n    prepend: 'rounded-full flex items-center justify-center bg-rui-neutral-200 text-rui-neutral-700 dark:bg-rui-neutral-700 dark:text-rui-neutral-200 overflow-hidden',\n    // one title style whether or not there is a prepend: a card title is a section heading, not a page title\n    header: 'text-base font-semibold text-rui-text',\n  },\n  variants: {\n    dense: {\n      true: {\n        root: 'p-3 between:ml-2 between:mr-0',\n        prepend: 'text-base p-[0.08rem] w-9 h-9',\n      },\n      false: {\n        root: 'p-4 between:ml-4 between:mr-0',\n        prepend: 'text-[1.25rem] w-10 h-10',\n      },\n    },\n  },\n  defaultVariants: { dense: false },\n});\n\nconst ui = computed<ReturnType<typeof cardHeader>>(() => cardHeader({ dense }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.prepend\"\n      data-id=\"prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <div class=\"flex flex-col justify-center\">\n      <h5\n        v-if=\"slots.header\"\n        data-id=\"header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\" />\n      </h5>\n      <p\n        v-if=\"slots.subheader\"\n        data-id=\"subheader\"\n        class=\"text-rui-text-secondary text-body-2 mb-0\"\n      >\n        <slot name=\"subheader\" />\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ,SAAA;EAMd,MAAM,aAAa,GAAG;GACpB,OAAO;IACL,MAAM;IACN,SAAS;IAET,QAAQ;GACV;GACA,UAAU,EACR,OAAO;IACL,MAAM;KACJ,MAAM;KACN,SAAS;IACX;IACA,OAAO;KACL,MAAM;KACN,SAAS;IACX;GACF,EACF;GACA,iBAAiB,EAAE,OAAO,MAAM;EAClC,CAAC;EAED,MAAM,KAAK,eAA8C,WAAW,EAAE,OAAI,QAAA,MAAE,CAAC,CAAC;;GAI5E,OAAA,UAAA,GAAA,mBA2BM,OA3BN,WA2BM,EA1BH,OAAO,MAAA,EAAA,CAAE,CAAC,KAAI,EACPA,GAAAA,KAAAA,MAAM,GAAA,CAGN,MAAM,WADd,UAAA,GAAA,mBAMM,OAAA;;IAJJ,WAAQ;IACP,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;GAElB,GAAA,CAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEzB,mBAeM,OAfN,YAeM,CAbI,MAAM,UADd,UAAA,GAAA,mBAMK,MAAA;;IAJH,WAAQ;IACP,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;GAEjB,GAAA,CAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAGhB,MAAM,aADd,UAAA,GAAA,mBAMI,KANJ,YAMI,CADF,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,EAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiChip.js","names":[],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiChipClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface Props {\n  tile?: boolean;\n  clickable?: boolean;\n  closeable?: boolean;\n  disabled?: boolean;\n  size?: ChipSize;\n  variant?: ChipVariant;\n  color?: 'grey' | ContextColorsType;\n  closeIcon?: RuiIcons;\n  bgColor?: string;\n  textColor?: string;\n  classNames?: RuiChipClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiChip',\n  inheritAttrs: false,\n});\n\nconst {\n  tile = false,\n  size = ChipSize.md,\n  color = 'grey',\n  clickable = false,\n  closeable = false,\n  disabled = false,\n  variant = ChipVariant.filled,\n  closeIcon = 'lu-circle-x',\n  bgColor = undefined,\n  textColor = undefined,\n  classNames,\n  contentClass = '',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  'click:close': [];\n  'click': [e: MouseEvent];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  default?: () => any;\n}>();\n\nconst chipStyles = tv({\n  slots: {\n    root: 'inline-flex items-center justify-between px-2 py-1 transition-all cursor-default outline-none max-w-full truncate',\n    prepend: 'rounded-full flex items-center justify-center pr-0 w-6 h-6 text-[0.6rem] text-white bg-rui-grey-400 dark:bg-rui-grey-700 overflow-hidden',\n    label: 'truncate px-2 text-[0.8125rem]',\n    close: 'rounded-full flex items-center p-[0.13rem] pl-0 inset-y-0 focus:outline-none',\n    closeIcon: 'opacity-50 hover:opacity-80 dark:hover:text-rui-grey-300 transition-opacity',\n  },\n  variants: {\n    tile: {\n      true: { root: 'rounded-lg' },\n      false: { root: 'rounded-full' },\n    },\n    size: {\n      md: { root: 'min-h-8' },\n      sm: {\n        root: 'py-[0.19rem]',\n        prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n        label: 'px-1.5 text-[0.7rem]',\n        close: 'p-[0.08rem]',\n      },\n    },\n    disabled: {\n      true: { root: 'opacity-40 cursor-default', close: 'cursor-default' },\n      false: {},\n    },\n    clickable: {\n      true: { root: 'cursor-pointer' },\n      false: { root: 'cursor-default', close: 'cursor-default' },\n    },\n    variant: {\n      filled: {},\n      outlined: {},\n    },\n    color: {\n      grey: { root: 'text-rui-text' },\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Interactive states (clickable + not disabled)\n    { clickable: true, disabled: false, class: { root: 'hover:brightness-90 focus:brightness-75 dark:hover:brightness-110' } },\n\n    // Grey filled/outlined\n    { color: 'grey', variant: 'filled', class: { root: 'bg-rui-grey-200 dark:bg-rui-grey-800' } },\n    { color: 'grey', variant: 'outlined', class: { root: 'border border-black/[0.26] bg-transparent dark:border-white/[0.26]' } },\n    { color: 'grey', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-black/[0.04] focus:bg-black/[0.12] dark:hover:bg-white/[0.04] dark:focus:bg-white/[0.12]' } },\n\n    // Context colors — filled bg\n    { color: 'primary', variant: 'filled', class: { root: 'bg-rui-primary' } },\n    { color: 'secondary', variant: 'filled', class: { root: 'bg-rui-secondary' } },\n    { color: 'error', variant: 'filled', class: { root: 'bg-rui-error' } },\n    { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning' } },\n    { color: 'info', variant: 'filled', class: { root: 'bg-rui-info' } },\n    { color: 'success', variant: 'filled', class: { root: 'bg-rui-success' } },\n\n    // Context colors — outlined base\n    { color: 'primary', variant: 'outlined', class: { root: 'border text-rui-primary border-rui-primary/50 bg-transparent' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'border text-rui-secondary border-rui-secondary/50 bg-transparent' } },\n    { color: 'error', variant: 'outlined', class: { root: 'border text-rui-error border-rui-error/50 bg-transparent' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'border text-rui-warning border-rui-warning/50 bg-transparent' } },\n    { color: 'info', variant: 'outlined', class: { root: 'border text-rui-info border-rui-info/50 bg-transparent' } },\n    { color: 'success', variant: 'outlined', class: { root: 'border text-rui-success border-rui-success/50 bg-transparent' } },\n\n    // Context colors — outlined interactive\n    { color: 'primary', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-primary/[0.04] focus:bg-rui-primary/[0.12]' } },\n    { color: 'secondary', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-secondary/[0.04] focus:bg-rui-secondary/[0.12]' } },\n    { color: 'error', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-error/[0.04] focus:bg-rui-error/[0.12]' } },\n    { color: 'warning', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-warning/[0.04] focus:bg-rui-warning/[0.12]' } },\n    { color: 'info', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-info/[0.04] focus:bg-rui-info/[0.12]' } },\n    { color: 'success', variant: 'outlined', clickable: true, disabled: false, class: { root: 'hover:bg-rui-success/[0.04] focus:bg-rui-success/[0.12]' } },\n  ],\n  compoundSlots: [\n    // All context colors filled share dark text\n    { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-text' },\n    // Dark mode: warning/success/info filled use light text\n    { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'filled', class: 'dark:text-rui-light-text' },\n  ],\n  defaultVariants: {\n    tile: false,\n    size: 'md',\n    disabled: false,\n    clickable: false,\n    variant: 'filled',\n    color: 'grey',\n  },\n});\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n  tile,\n  size,\n  color,\n  variant,\n  disabled,\n  clickable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n  const s: Partial<StyleValue> = {};\n  if (bgColor)\n    s.backgroundColor = bgColor;\n  if (textColor)\n    s.color = textColor;\n  return s;\n});\n\nfunction click(e: MouseEvent): void {\n  if (!clickable || disabled)\n    return;\n\n  emit('click', e);\n}\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn(classNames?.root) })\"\n    :style=\"style\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-disabled=\"disabled || undefined\"\n    role=\"button\"\n    tabindex=\"0\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($event)\"\n  >\n    <div\n      v-if=\"$slots.prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <span :class=\"ui.label({ class: cn(classNames?.content) ?? contentClass })\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"ui.close()\"\n      :disabled=\"disabled\"\n      type=\"button\"\n      @click.stop=\"emit('click:close')\"\n    >\n      <RuiIcon\n        :class=\"ui.closeIcon()\"\n        :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n        :name=\"closeIcon\"\n      />\n    </button>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiChip.js","names":[],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiChipClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface Props {\n  tile?: boolean;\n  clickable?: boolean;\n  closeable?: boolean;\n  disabled?: boolean;\n  size?: ChipSize;\n  variant?: ChipVariant;\n  color?: 'grey' | ContextColorsType;\n  closeIcon?: RuiIcons;\n  /**\n   * Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n   * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n   */\n  closeUnfocusable?: boolean;\n  bgColor?: string;\n  textColor?: string;\n  classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiChip',\n  inheritAttrs: false,\n});\n\nconst {\n  tile = false,\n  size = ChipSize.md,\n  color = 'grey',\n  clickable = false,\n  closeable = false,\n  disabled = false,\n  variant = ChipVariant.filled,\n  closeIcon = 'lu-x',\n  closeUnfocusable = false,\n  bgColor = undefined,\n  textColor = undefined,\n  classNames,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  'click:close': [];\n  'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst chipStyles = tv({\n  slots: {\n    // min-h sets the height and items-center the rest, so a prefix or a border never adds to it\n    root: 'inline-flex items-center justify-between px-2 transition duration-150 cursor-default outline-hidden max-w-full truncate',\n    // the avatar's neutral pair, so initials stay readable on any chip color\n    prepend: 'rounded-full flex items-center justify-center shrink-0 w-6 h-6 text-[0.625rem] font-semibold text-rui-neutral-700 bg-rui-neutral-200 dark:text-rui-neutral-200 dark:bg-rui-neutral-700 overflow-hidden',\n    label: 'truncate px-2 text-[0.8125rem]/5',\n    // a round hover fill marks the close icon as its own button\n    close: 'rounded-full flex items-center p-0.5 inset-y-0 focus:outline-hidden transition-colors hover:bg-rui-pressed',\n    closeIcon: 'opacity-60 hover:opacity-100 transition-opacity',\n  },\n  variants: {\n    tile: {\n      true: { root: 'rounded-rui-sm' },\n      false: { root: 'rounded-full' },\n    },\n    size: {\n      // 28px, to sit in a 44px table row; sm is 24px with 12px text, the smallest the library sets\n      md: { root: 'min-h-7' },\n      sm: {\n        root: 'min-h-6',\n        prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n        label: 'px-1.5 text-xs/4',\n        close: 'p-px',\n      },\n    },\n    // a leading circle sits as far from the start edge as from the top, like an avatar in a pill\n    prepended: {\n      true: { root: 'pl-0.5' },\n      false: {},\n    },\n    closeable: {\n      true: {},\n      false: {},\n    },\n    disabled: {\n      true: { root: '!text-rui-text-disabled cursor-default', close: 'cursor-default hover:bg-transparent dark:hover:bg-transparent' },\n      false: {},\n    },\n    clickable: {\n      true: { root: 'cursor-pointer' },\n      false: { root: 'cursor-default', close: 'cursor-default' },\n    },\n    variant: {\n      filled: {},\n      outlined: {},\n      tonal: {},\n    },\n    color: {\n      grey: { root: 'text-rui-text' },\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // Interactive states (clickable + not disabled): a tint over any fill, which keeps the text color\n    { clickable: true, disabled: false, class: { root: 'hover:state-layer active:state-layer-pressed focus-visible:focus-ring' } },\n\n    // Grey filled: a solid step above the tonal tint\n    { color: 'grey', variant: 'filled', class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n\n    // Outlined: the border is the text color at 40%, so it follows the brighter text tone in dark\n    { variant: 'outlined', class: { root: 'border border-current/40 bg-transparent' } },\n\n    // Context colors — filled bg\n    { color: 'primary', variant: 'filled', class: { root: 'bg-rui-primary' } },\n    { color: 'secondary', variant: 'filled', class: { root: 'bg-rui-secondary' } },\n    // in dark a status color's `main` is a text tone, so the fill is its deep `darker`\n    { color: 'error', variant: 'filled', class: { root: 'bg-rui-error dark:bg-rui-error-darker' } },\n    { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning dark:bg-rui-warning-darker' } },\n    { color: 'info', variant: 'filled', class: { root: 'bg-rui-info dark:bg-rui-info-darker' } },\n    { color: 'success', variant: 'filled', class: { root: 'bg-rui-success dark:bg-rui-success-darker' } },\n\n    // Context colors: outlined text\n    { color: 'primary', variant: 'outlined', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: 'outlined', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'text-rui-warning' } },\n    { color: 'info', variant: 'outlined', class: { root: 'text-rui-info' } },\n    { color: 'success', variant: 'outlined', class: { root: 'text-rui-success' } },\n\n    // Tonal: a tint with the deeper tone as text, 4.5:1; primary and secondary sit near grey, so tint harder\n    { color: 'grey', variant: 'tonal', class: { root: 'bg-rui-neutral-500/10 dark:bg-rui-neutral-400/10' } },\n    { color: 'primary', variant: 'tonal', class: { root: 'bg-rui-primary/15 text-rui-primary-darker dark:bg-rui-primary/35 dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: 'tonal', class: { root: 'bg-rui-secondary/20 text-rui-secondary-darker dark:bg-rui-secondary/35 dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: 'tonal', class: { root: 'bg-rui-error/10 text-rui-error-darker dark:bg-rui-error/20 dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: 'tonal', class: { root: 'bg-rui-warning/10 text-rui-warning-darker dark:bg-rui-warning/20 dark:text-rui-warning-lighter' } },\n    { color: 'info', variant: 'tonal', class: { root: 'bg-rui-info/10 text-rui-info-darker dark:bg-rui-info/20 dark:text-rui-info-lighter' } },\n    { color: 'success', variant: 'tonal', class: { root: 'bg-rui-success/10 text-rui-success-darker dark:bg-rui-success/20 dark:text-rui-success-lighter' } },\n\n    // sm: a 16px circle in a 24px chip, 4px in from the start as from the top\n    { size: 'sm', prepended: true, class: { root: 'pl-1' } },\n    // in a tile chip the prefix follows the corners: the chip's 6px radius less the 2px inset\n    { tile: true, class: { prepend: 'rounded-sm' } },\n    // the close button's round hover area mirrors the prefix: as far from the end edge as from the top\n    { closeable: true, class: { root: 'pr-1', label: 'pr-1' } },\n    { closeable: true, size: 'sm', class: { root: 'pr-1', label: 'pr-0.5' } },\n\n    // Disabled: a flat neutral chip in any color, like a disabled button\n    { disabled: true, variant: ['filled', 'tonal'], class: { root: '!bg-rui-neutral-100 dark:!bg-rui-neutral-800' } },\n    { disabled: true, variant: 'outlined', class: { root: '!border-rui-divider' } },\n  ],\n  compoundSlots: [\n    // Every filled color takes light text, in both themes\n    { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-text' },\n  ],\n  defaultVariants: {\n    tile: false,\n    size: 'md',\n    disabled: false,\n    clickable: false,\n    variant: 'filled',\n    color: 'grey',\n  },\n});\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n  tile,\n  size,\n  color,\n  variant,\n  disabled,\n  clickable,\n  prepended: !!slots.prepend,\n  closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n  const s: Partial<StyleValue> = {};\n  if (bgColor)\n    s.backgroundColor = bgColor;\n  if (textColor)\n    s.color = textColor;\n  return s;\n});\n\nfunction click(e: MouseEvent): void {\n  if (!clickable || disabled)\n    return;\n\n  emit('click', e);\n}\n\n/**\n * Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n *\n * @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n  if (!clickable || disabled || e.target !== get(root))\n    return;\n  if (e.key !== 'Enter' && e.key !== ' ')\n    return;\n\n  e.preventDefault();\n  get(root)?.click();\n}\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    :class=\"ui.root({ class: cn(classNames?.root) })\"\n    :style=\"style\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-disabled=\"disabled || undefined\"\n    :role=\"clickable ? 'button' : undefined\"\n    :tabindex=\"clickable && !disabled ? 0 : undefined\"\n    :aria-disabled=\"clickable && disabled ? true : undefined\"\n    v-bind=\"objectOmit($attrs, ['onClick'])\"\n    @click=\"click($event)\"\n    @keydown=\"onKeydown($event)\"\n  >\n    <div\n      v-if=\"$slots.prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n      <slot />\n    </span>\n    <button\n      v-if=\"closeable\"\n      :class=\"ui.close()\"\n      :disabled=\"disabled\"\n      type=\"button\"\n      aria-label=\"Remove\"\n      :tabindex=\"closeUnfocusable ? -1 : undefined\"\n      @click.stop=\"emit('click:close')\"\n    >\n      <RuiIcon\n        :class=\"ui.closeIcon()\"\n        :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n        :name=\"closeIcon\"\n      />\n    </button>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/chips/RuiChip.vue.d.ts

@@ -15,11 +15,14 @@ export interface Props {
     variant?: ChipVariant;
     color?: 'grey' | ContextColorsType;
     closeIcon?: RuiIcons;
+    /**
+     * Takes the close button out of the tab order, for a chip inside a widget that removes chips from
+     * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.
+     */
+    closeUnfocusable?: boolean;
     bgColor?: string;
     textColor?: string;
     classNames?: RuiChipClassNames;
-    /** @deprecated Use `classNames.content` instead */
-    contentClass?: string;
 }
 type __VLS_Slots = {
     prepend?: () => any;