@xen-orchestra/web-core 0.20.0 → 0.21.0

package/lib/components/ui/progress-bar/UiProgressBar.vue

@@ -5,8 +5,8 @@
       <div class="fill" :style="{ width: `${fillWidth}%` }" />
     </div>
     <div v-if="shouldShowSteps" class="steps typo-body-regular-small">
-      <span>{{ $n(0, 'percent') }}</span>
-      <span v-for="step in steps" :key="step">{{ $n(step, 'percent') }}</span>
+      <span>{{ n(0, 'percent') }}</span>
+      <span v-for="step in steps" :key="step">{{ n(step, 'percent') }}</span>
     </div>
     <VtsLegendList class="legend">
       <UiLegend :accent :value="Math.round(percentage)" unit="%">{{ legend }}</UiLegend>
@@ -20,6 +20,7 @@ import UiLegend from '@core/components/ui/legend/UiLegend.vue'
 import { toVariants } from '@core/utils/to-variants.util'
 import { useClamp, useMax } from '@vueuse/math'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const {
   value: _value,
@@ -32,6 +33,8 @@ const {
   showSteps?: boolean
 }>()
 
+const { n } = useI18n()
+
 const value = useMax(0, () => _value)
 
 const percentage = computed(() => (max <= 0 ? 0 : (value.value / max) * 100))

package/lib/components/ui/query-search-bar/UiQuerySearchBar.vue

@@ -2,29 +2,29 @@
 <template>
   <form class="ui-query-search-bar" @submit.prevent="emit('search', value)">
     <label v-if="uiStore.isDesktop" :for="id" class="typo-body-regular-small label">
-      {{ $t('core.query-search-bar.label') }}
+      {{ t('core.query-search-bar.label') }}
     </label>
     <UiInput
       :id
       v-model="value"
       type="text"
       accent="brand"
-      :aria-label="uiStore.isMobile ? $t('core.query-search-bar.label') : undefined"
+      :aria-label="uiStore.isMobile ? t('core.query-search-bar.label') : undefined"
       :icon="uiStore.isDesktop ? faMagnifyingGlass : undefined"
-      :placeholder="$t('core.query-search-bar.placeholder')"
+      :placeholder="t('core.query-search-bar.placeholder')"
     />
     <template v-if="uiStore.isDesktop">
-      <UiButton size="medium" accent="brand" variant="primary" type="submit">{{ $t('core.search') }}</UiButton>
+      <UiButton size="medium" accent="brand" variant="primary" type="submit">{{ t('core.search') }}</UiButton>
       <VtsDivider type="stretch" />
       <UiButton
-        v-tooltip="$t('coming-soon')"
+        v-tooltip="t('coming-soon')"
         size="medium"
         accent="brand"
         variant="secondary"
         :left-icon="faFilter"
         disabled
       >
-        {{ $t('core.query-search-bar.use-query-builder') }}
+        {{ t('core.query-search-bar.use-query-builder') }}
       </UiButton>
     </template>
     <template v-else>
@@ -44,11 +44,14 @@ import { useUiStore } from '@core/stores/ui.store'
 import { uniqueId } from '@core/utils/unique-id.util'
 import { faFilter, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const emit = defineEmits<{
   search: [value: string]
 }>()
 
+const { t } = useI18n()
+
 const id = uniqueId('search-input-')
 
 const uiStore = useUiStore()

package/lib/components/ui/quick-task-item/UiQuickTaskItem.vue

@@ -13,14 +13,14 @@
           <UiTag v-if="task.tag" accent="neutral" variant="primary">{{ task.tag }}</UiTag>
           <div v-if="hasSubTasks" class="subtasks">
             <VtsIcon :icon="faCircleNotch" accent="current" />
-            <span class="typo-body-regular-small">{{ $t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
+            <span class="typo-body-regular-small">{{ t('tasks.n-subtasks', { n: subTasksCount }) }}</span>
           </div>
         </div>
         <div v-if="task.start" class="line-2 typo-body-regular-small">
-          {{ $d(task.start, 'datetime_short') }}
+          {{ d(task.start, 'datetime_short') }}
           <template v-if="task.end">
             <VtsIcon :icon="faArrowRight" accent="current" />
-            {{ $d(new Date(task.end), 'datetime_short') }}
+            {{ d(new Date(task.end), 'datetime_short') }}
           </template>
         </div>
       </div>
@@ -37,6 +37,7 @@ import UiTag from '@core/components/ui/tag/UiTag.vue'
 import { faAngleDown, faAngleRight, faArrowRight, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 import { useToggle } from '@vueuse/core'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 export type TaskStatus = 'pending' | 'success' | 'failure'
 
@@ -54,6 +55,8 @@ const props = defineProps<{
   task: Task
 }>()
 
+const { t, d } = useI18n()
+
 const [isExpanded, toggleExpand] = useToggle()
 
 const subTasks = computed(() => props.task.subtasks ?? [])

package/lib/components/ui/stacked-bar/StackedBarSegment.vue

@@ -7,7 +7,7 @@
     class="stacked-bar-segment typo-caption-small"
   >
     <div ref="ellipsisElement" :class="{ hidden }" class="text-ellipsis">
-      {{ $n(percentage / 100, 'percent') }}
+      {{ n(percentage / 100, 'percent') }}
     </div>
   </div>
 </template>
@@ -17,6 +17,7 @@ import { vTooltip } from '@core/directives/tooltip.directive'
 import { hasEllipsis } from '@core/utils/has-ellipsis.util'
 import { useResizeObserver } from '@vueuse/core'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 export type StackedBarSegmentAccent = 'info' | 'success' | 'warning' | 'danger'
 
@@ -27,6 +28,8 @@ export type StackedBarSegmentProps = {
 
 defineProps<StackedBarSegmentProps>()
 
+const { n } = useI18n()
+
 const hidden = ref(false)
 const ellipsisElement = ref<HTMLElement | null>(null)
 

package/lib/components/ui/table-pagination/UiTablePagination.vue

@@ -8,13 +8,13 @@
       <PaginationButton :disabled="isLastPage" :icon="faAngleDoubleRight" @click="emit('last')" />
     </div>
     <span class="typo-body-regular-small label">
-      {{ $t('core.select.n-object-of', { from, to, total }) }}
+      {{ t('core.select.n-object-of', { from, to, total }) }}
     </span>
-    <span class="typo-body-regular-small label show">{{ $t('core.pagination.show-by') }}</span>
+    <span class="typo-body-regular-small label show">{{ t('core.pagination.show-by') }}</span>
     <div class="dropdown-wrapper">
       <select v-model="showBy" class="dropdown typo-body-regular-small">
         <option v-for="option in [50, 100, 150, 200, -1]" :key="option" :value="option" class="typo-body-bold-small">
-          {{ option === -1 ? $t('core.pagination.all') : option }}
+          {{ option === -1 ? t('core.pagination.all') : option }}
         </option>
       </select>
       <VtsIcon :icon="faAngleDown" accent="current" class="icon" />
@@ -32,6 +32,7 @@ import {
   faAngleLeft,
   faAngleRight,
 } from '@fortawesome/free-solid-svg-icons'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   from: number
@@ -49,6 +50,8 @@ const emit = defineEmits<{
 }>()
 
 const showBy = defineModel<number>('showBy', { default: 50 })
+
+const { t } = useI18n()
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/ui/text-area/UiTextarea.vue

@@ -7,7 +7,7 @@
     <textarea v-bind="attrs" :id ref="textarea" v-model="model" :disabled class="textarea" />
     <UiCharacterLimit v-if="maxCharacters" :count="model.trim().length" :max="maxCharacters" />
     <UiInfo v-if="isExceedingMaxCharacters" accent="danger">
-      {{ $t('core.textarea.exceeds-max-characters', { max: maxCharacters }) }}
+      {{ t('core.textarea.exceeds-max-characters', { max: maxCharacters }) }}
     </UiInfo>
     <UiInfo v-if="slots.info" :accent="accent === 'brand' ? 'info' : accent">
       <slot name="info" />
@@ -23,6 +23,7 @@ import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { useFocus } from '@vueuse/core'
 import { computed, useAttrs, useId, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 defineOptions({
   inheritAttrs: false,
@@ -49,6 +50,8 @@ const slots = defineSlots<{
   info?(): any
 }>()
 
+const { t } = useI18n()
+
 const attrs = useAttrs()
 
 const textAreaElement = useTemplateRef('textarea')

package/lib/components/ui/top-bottom-table/UiTopBottomTable.vue

@@ -3,7 +3,7 @@
   <div class="ui-top-bottom-table">
     <div class="content">
       <span class="typo-body-regular-small label">
-        {{ $t('core.select.n-selected-of', { count: selectedItems, total: totalItems }) }}
+        {{ t('core.select.n-selected-of', { count: selectedItems, total: totalItems }) }}
       </span>
 
       <UiButton
@@ -13,7 +13,7 @@
         variant="tertiary"
         @click="emit('toggleSelectAll', true)"
       >
-        {{ $t('core.select.all') }}
+        {{ t('core.select.all') }}
       </UiButton>
       <UiButton
         :disabled="selectedItems === 0"
@@ -22,7 +22,7 @@
         variant="tertiary"
         @click="emit('toggleSelectAll', false)"
       >
-        {{ $t('core.select.unselect') }}
+        {{ t('core.select.unselect') }}
       </UiButton>
     </div>
     <slot />
@@ -31,6 +31,7 @@
 
 <script setup lang="ts">
 import UiButton from '@core/components/ui/button/UiButton.vue'
+import { useI18n } from 'vue-i18n'
 
 defineProps<{
   selectedItems: number
@@ -44,6 +45,8 @@ const emit = defineEmits<{
 defineSlots<{
   default(): any
 }>()
+
+const { t } = useI18n()
 </script>
 
 <style scoped lang="postcss">

package/lib/components/ui/tree-item-label/UiTreeItemLabel.vue

@@ -16,7 +16,7 @@
       </template>
       <UiButtonIcon
         v-if="hasToggle"
-        v-tooltip="isExpanded ? $t('core.close') : $t('core.open')"
+        v-tooltip="isExpanded ? t('core.close') : t('core.open')"
         class="toggle"
         accent="brand"
         :icon="isExpanded ? faAngleDown : faAngleRight"
@@ -47,6 +47,7 @@ import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_LIST_DEPTH }
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { inject, ref, useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
 
 defineOptions({
@@ -69,6 +70,8 @@ defineSlots<{
   addons?(): any
 }>()
 
+const { t } = useI18n()
+
 const attrs = useAttrs()
 
 const hasToggle = inject(IK_TREE_ITEM_HAS_CHILDREN, ref(false))

package/lib/composables/local-time-ago.composable.ts

@@ -0,0 +1,53 @@
+import { useTimestamp } from '@vueuse/core'
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export enum SECONDS {
+  MINUTE = 60,
+  HOUR = SECONDS.MINUTE * 60,
+  DAY = SECONDS.HOUR * 24,
+  WEEK = SECONDS.DAY * 7,
+  MONTH = SECONDS.DAY * 30,
+  YEAR = SECONDS.DAY * 365,
+}
+
+export type TimeThreshold = [number, Intl.RelativeTimeFormatUnit]
+
+const timeThresholds: TimeThreshold[] = [
+  [SECONDS.MINUTE, 'second'],
+  [SECONDS.HOUR, 'minute'],
+  [SECONDS.DAY, 'hour'],
+  [SECONDS.WEEK, 'day'],
+  [SECONDS.MONTH, 'week'],
+  [SECONDS.YEAR, 'month'],
+  [Infinity, 'year'],
+]
+
+export function useTimeAgo(referenceDate: MaybeRefOrGetter<Date | number | string>) {
+  const { locale } = useI18n()
+
+  const formatter = computed(() => new Intl.RelativeTimeFormat(locale.value, { numeric: 'auto' }))
+
+  const now = useTimestamp({ interval: 1000 })
+
+  const referenceTime = computed(() => new Date(toValue(referenceDate)).getTime())
+
+  const distance = computed(() => {
+    const diff = Math.trunc((referenceTime.value - now.value) / 1000)
+
+    if (Math.abs(diff) < 60) {
+      return Math.trunc(diff / 10) * 10 || 0 // Avoid recomputing when the value changes from 0 to -0
+    }
+
+    return timeThresholds.reduce(
+      (acc, [threshold]) => (Math.abs(acc) < threshold ? acc : Math.trunc(acc / threshold) * threshold),
+      diff
+    )
+  })
+
+  return computed(() => {
+    const index = timeThresholds.findIndex(([threshold]) => Math.abs(distance.value) < threshold)
+    const divisor = index > 0 ? timeThresholds[index - 1][0] : 1
+    return formatter.value.format(Math.trunc(distance.value / divisor), timeThresholds[index][1])
+  })
+}

package/lib/composables/locale-time-ago.composable.ts

@@ -0,0 +1,53 @@
+import { useTimestamp } from '@vueuse/core'
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export enum SECONDS {
+  MINUTE = 60,
+  HOUR = SECONDS.MINUTE * 60,
+  DAY = SECONDS.HOUR * 24,
+  WEEK = SECONDS.DAY * 7,
+  MONTH = SECONDS.DAY * 30,
+  YEAR = SECONDS.DAY * 365,
+}
+
+export type TimeThreshold = [number, Intl.RelativeTimeFormatUnit]
+
+const timeThresholds: TimeThreshold[] = [
+  [SECONDS.MINUTE, 'second'],
+  [SECONDS.HOUR, 'minute'],
+  [SECONDS.DAY, 'hour'],
+  [SECONDS.WEEK, 'day'],
+  [SECONDS.MONTH, 'week'],
+  [SECONDS.YEAR, 'month'],
+  [Infinity, 'year'],
+]
+
+export function useTimeAgo(referenceDate: MaybeRefOrGetter<Date | number | string>) {
+  const { locale } = useI18n()
+
+  const formatter = computed(() => new Intl.RelativeTimeFormat(locale.value, { numeric: 'auto' }))
+
+  const now = useTimestamp({ interval: 1000 })
+
+  const referenceTime = computed(() => new Date(toValue(referenceDate)).getTime())
+
+  const distance = computed(() => {
+    const diff = Math.trunc((referenceTime.value - now.value) / 1000)
+
+    if (Math.abs(diff) < 60) {
+      return Math.trunc(diff / 10) * 10 || 0 // Avoid recomputing when the value changes from 0 to -0
+    }
+
+    return timeThresholds.reduce(
+      (acc, [threshold]) => (Math.abs(acc) < threshold ? acc : Math.trunc(acc / threshold) * threshold),
+      diff
+    )
+  })
+
+  return computed(() => {
+    const index = timeThresholds.findIndex(([threshold]) => Math.abs(distance.value) < threshold)
+    const divisor = index > 0 ? timeThresholds[index - 1][0] : 1
+    return formatter.value.format(Math.trunc(distance.value / divisor), timeThresholds[index][1])
+  })
+}

package/lib/icons/fa-icons.ts

@@ -0,0 +1,164 @@
+import { defineIconPack } from '@core/packages/icon/define-icon-pack.ts'
+import { faBuilding, faFile, faFolderClosed, faFolderOpen, faSquareCheck } from '@fortawesome/free-regular-svg-icons'
+import {
+  faAlignLeft,
+  faAngleDoubleLeft,
+  faAngleDoubleRight,
+  faAngleDown,
+  faAngleLeft,
+  faAngleRight,
+  faAngleUp,
+  faArrowDown,
+  faArrowRight,
+  faArrowRightFromBracket,
+  faArrowUp,
+  faArrowUpRightFromSquare,
+  faAt,
+  faBars,
+  faBarsProgress,
+  faBook,
+  faCamera,
+  faCaretDown,
+  faCaretUp,
+  faCheck,
+  faCircle,
+  faCircleCheck,
+  faCircleMinus,
+  faCircleNotch,
+  faCirclePlay,
+  faCircleXmark,
+  faCity,
+  faClose,
+  faCode,
+  faComments,
+  faCopy,
+  faDatabase,
+  faDesktop,
+  faDisplay,
+  faDownLeftAndUpRightToCenter,
+  faDownload,
+  faEarthAmericas,
+  faEdit,
+  faEllipsis,
+  faEllipsisVertical,
+  faExternalLink,
+  faEyeSlash,
+  faFileCsv,
+  faFileExport,
+  faFilter,
+  faFont,
+  faGear,
+  faHashtag,
+  faHeadset,
+  faKeyboard,
+  faLayerGroup,
+  faList,
+  faLock,
+  faLockOpen,
+  faMagnifyingGlass,
+  faMemory,
+  faMicrochip,
+  faMinus,
+  faMoon,
+  faNetworkWired,
+  faPause,
+  faPencil,
+  faPlay,
+  faPlug,
+  faPlus,
+  faPowerOff,
+  faRemove,
+  faRepeat,
+  faRotateLeft,
+  faRoute,
+  faSatellite,
+  faServer,
+  faSliders,
+  faTrash,
+  faUpRightAndDownLeftFromCenter,
+  faXmark,
+} from '@fortawesome/free-solid-svg-icons'
+
+export const faIcons = defineIconPack({
+  'align-left': { icon: faAlignLeft },
+  'angle-double-left': { icon: faAngleDoubleLeft },
+  'angle-double-right': { icon: faAngleDoubleRight },
+  'angle-down': { icon: faAngleDown },
+  'angle-left': { icon: faAngleLeft },
+  'angle-right': { icon: faAngleRight },
+  'angle-up': { icon: faAngleUp },
+  'arrow-down': { icon: faArrowDown },
+  'arrow-right': { icon: faArrowRight },
+  'arrow-right-from-bracket': { icon: faArrowRightFromBracket },
+  'arrow-up': { icon: faArrowUp },
+  'arrow-up-right-from-square': { icon: faArrowUpRightFromSquare },
+  at: { icon: faAt },
+  bars: { icon: faBars },
+  'bars-progress': { icon: faBarsProgress },
+  book: { icon: faBook },
+  building: { icon: faBuilding },
+  camera: { icon: faCamera },
+  'caret-down': { icon: faCaretDown },
+  'caret-up': { icon: faCaretUp },
+  check: { icon: faCheck },
+  circle: { icon: faCircle },
+  'circle-check': { icon: faCircleCheck },
+  'circle-minus': { icon: faCircleMinus },
+  'circle-notch': { icon: faCircleNotch },
+  'circle-play': { icon: faCirclePlay },
+  'circle-xmark': { icon: faCircleXmark },
+  city: { icon: faCity },
+  close: { icon: faClose },
+  code: { icon: faCode },
+  comments: { icon: faComments },
+  copy: { icon: faCopy },
+  database: { icon: faDatabase },
+  desktop: { icon: faDesktop },
+  display: { icon: faDisplay },
+  'down-left-and-up-right-to-center': { icon: faDownLeftAndUpRightToCenter },
+  download: { icon: faDownload },
+  'earth-americas': { icon: faEarthAmericas },
+  edit: { icon: faEdit },
+  ellipsis: { icon: faEllipsis },
+  'ellipsis-vertical': { icon: faEllipsisVertical },
+  'external-link': { icon: faExternalLink },
+  'eye-slash': { icon: faEyeSlash },
+  file: { icon: faFile },
+  'file-csv': { icon: faFileCsv },
+  'file-export': { icon: faFileExport },
+  filter: { icon: faFilter },
+  'folder-closed': { icon: faFolderClosed },
+  'folder-open': { icon: faFolderOpen },
+  font: { icon: faFont },
+  gear: { icon: faGear },
+  hashtag: { icon: faHashtag },
+  headset: { icon: faHeadset },
+  keyboard: { icon: faKeyboard },
+  'layer-group': { icon: faLayerGroup },
+  list: { icon: faList },
+  lock: { icon: faLock },
+  'lock-open': { icon: faLockOpen },
+  'magnifying-glass': { icon: faMagnifyingGlass },
+  memory: { icon: faMemory },
+  microchip: { icon: faMicrochip },
+  minus: { icon: faMinus },
+  moon: { icon: faMoon },
+  'network-wired': { icon: faNetworkWired },
+  pause: { icon: faPause },
+  pencil: { icon: faPencil },
+  play: { icon: faPlay },
+  plug: { icon: faPlug },
+  plus: { icon: faPlus },
+  'power-off': { icon: faPowerOff },
+  remove: { icon: faRemove },
+  repeat: { icon: faRepeat },
+  'rotate-left': { icon: faRotateLeft },
+  route: { icon: faRoute },
+  satellite: { icon: faSatellite },
+  server: { icon: faServer },
+  sliders: { icon: faSliders },
+  'square-check': { icon: faSquareCheck },
+  trash: { icon: faTrash },
+  'up-right-and-down-left-from-center': { icon: faUpRightAndDownLeftFromCenter },
+  xmark: { icon: faXmark },
+})

package/lib/icons/index.ts

@@ -0,0 +1,15 @@
+import { faIcons } from '@core/icons/fa-icons.ts'
+import { legacyIcons } from '@core/icons/legacy-icons.ts'
+import { objectIcons } from '@core/icons/object-icons.ts'
+import { defineIconPack } from '@core/packages/icon/define-icon-pack.ts'
+import type { ICON_SYMBOL } from '@core/packages/icon/types.ts'
+
+export const icons = defineIconPack({
+  fa: faIcons,
+  legacy: legacyIcons,
+  object: objectIcons,
+})
+
+export type IconName = Exclude<keyof typeof icons, typeof ICON_SYMBOL>
+
+export type ObjectIconName = Extract<IconName, `object:${string}`>

package/lib/icons/legacy-icons.ts

@@ -0,0 +1,80 @@
+import { defineIconPack } from '@core/packages/icon/define-icon-pack.ts'
+import { defineIcon } from '@core/packages/icon/define-icon.ts'
+import { createMapper } from '@core/packages/mapper/create-mapper.ts'
+import {
+  faCheck,
+  faCircle,
+  faCircleInfo,
+  faExclamation,
+  faInfo,
+  faMinus,
+  faPlay,
+  faStar,
+  faStop,
+  faXmark,
+} from '@fortawesome/free-solid-svg-icons'
+
+const getStatusIcon = createMapper(
+  {
+    info: faInfo,
+    success: faCheck,
+    warning: faExclamation,
+    danger: faXmark,
+    muted: faMinus,
+  },
+  'muted'
+)
+
+const getStatusColor = createMapper(
+  {
+    info: 'var(--color-info-txt-item)',
+    success: 'var(--color-success-txt-item)',
+    warning: 'var(--color-warning-txt-item)',
+    danger: 'var(--color-danger-txt-item)',
+    muted: 'var(--color-neutral-txt-secondary)',
+  },
+  'muted'
+)
+
+export const legacyIcons = defineIconPack({
+  'circle-progress': defineIcon([['success', 'warning', 'danger']], accent => [
+    {
+      icon: accent === 'success' ? faCheck : faExclamation,
+    },
+  ]),
+  halted: {
+    icon: faStop,
+    color: 'var(--color-danger-item-base)',
+  },
+  info: {
+    icon: faCircleInfo,
+    color: 'var(--color-info-item-base)',
+  },
+  'legend-circle': { icon: faCircle, size: 8 },
+  primary: [
+    {
+      icon: faCircle,
+      color: 'var(--color-info-item-base)',
+    },
+    {
+      icon: faStar,
+      color: 'var(--color-info-txt-item)',
+      size: 8,
+    },
+  ],
+  running: {
+    icon: faPlay,
+    color: 'var(--color-success-item-base)',
+  },
+  status: defineIcon([['info', 'success', 'warning', 'danger', 'muted']], accent => [
+    {
+      icon: faCircle,
+      color: accent === 'muted' ? 'var(--color-neutral-background-disabled)' : `var(--color-${accent}-item-base)`,
+    },
+    {
+      icon: getStatusIcon(accent),
+      color: getStatusColor(accent),
+      size: 8,
+    },
+  ]),
+})