@xen-orchestra/web-core 0.14.0 → 0.16.0

package/lib/components/ui/card-numbers/UiCardNumbers.vue

@@ -1,9 +1,9 @@
 <!-- v1 -->
 <template>
   <div class="ui-card-numbers" :class="sizeClass">
-    <span class="label" :class="labelFontClass">{{ label }}</span>
+    <span class="label typo-caption-small">{{ label }}</span>
     <div class="values" :class="sizeClass">
-      <span v-if="percentValue" class="value typo c2-semi-bold">
+      <span v-if="percentValue" class="value typo-caption-small">
         {{ percentValue }}
       </span>
 
@@ -31,11 +31,9 @@ const { n } = useI18n()
 
 const sizeClass = computed(() => toVariants({ size: props.size }))
 
-const labelFontClass = computed(() => (props.size === 'medium' ? 'typo c3-semi-bold' : 'typo c2-semi-bold'))
+const valueFontClass = computed(() => (props.size === 'medium' ? 'typo-h3' : 'typo-caption-small'))
 
-const valueFontClass = computed(() => (props.size === 'medium' ? 'typo h3-semi-bold' : 'typo c2-semi-bold'))
-
-const unitFontClass = computed(() => (props.size === 'medium' ? 'typo p2-medium' : 'typo c2-semi-bold'))
+const unitFontClass = computed(() => (props.size === 'medium' ? 'typo-body-bold-small' : 'typo-caption-small'))
 
 const percentValue = computed(() => {
   if (props.size !== 'small' || props.max === undefined || props.max === 0) {

package/lib/components/ui/card-subtitle/UiCardSubtitle.vue

@@ -1,8 +1,8 @@
 <!-- v1 -->
 <template>
-  <div class="ui-card-subtitle">
-    <span class="typo h7-semi-bold"><slot /></span>
-    <span v-if="slots.info" class="typo p3-medium"><slot name="info" /></span>
+  <div class="ui-card-subtitle typo-body-bold-small">
+    <span><slot /></span>
+    <span v-if="slots.info"><slot name="info" /></span>
   </div>
 </template>
 

package/lib/components/ui/card-title/UiCardTitle.vue

@@ -2,14 +2,14 @@
 <template>
   <div class="ui-card-title">
     <div class="main-content">
-      <div class="title typo h6-medium">
+      <div class="title typo-body-bold">
         <slot />
       </div>
-      <div v-if="slots.info" class="info typo h7-semi-bold">
+      <div v-if="slots.info" class="info typo-body-bold-small">
         <slot name="info" />
       </div>
     </div>
-    <p v-if="slots.description" class="description typo p3-regular">
+    <p v-if="slots.description" class="description typo-body-regular-small">
       <slot name="description" />
     </p>
   </div>

package/lib/components/ui/character-limit/UiCharacterLimit.vue

@@ -0,0 +1,35 @@
+<!-- v1 -->
+<template>
+  <span class="ui-character-limit" :class="classes">
+    {{ $t('core.character-limit', { count, max }) }}
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const { count, max } = defineProps<{
+  count: number
+  max: number
+}>()
+
+const isTooLong = computed(() => count > max)
+
+const classes = computed(() => {
+  if (isTooLong.value) {
+    return ['has-error', 'typo-body-bold-small']
+  }
+
+  return 'typo-body-regular-small'
+})
+</script>
+
+<style lang="postcss" scoped>
+.ui-character-limit {
+  color: var(--color-neutral-txt-secondary);
+
+  &.has-error {
+    color: var(--color-danger-txt-base);
+  }
+}
+</style>

package/lib/components/ui/checkbox/UiCheckbox.vue

@@ -12,7 +12,7 @@
     <span class="fake-checkbox">
       <VtsIcon :icon accent="current" class="icon" />
     </span>
-    <span v-if="slots.default" class="typo p1-regular">
+    <span v-if="slots.default" class="typo-body-regular">
       <slot />
     </span>
   </label>
@@ -156,7 +156,7 @@ const attrs = useAttrs()
       }
 
       &:focus-visible + .fake-checkbox::before {
-        border: 0.2rem solid var(--color-info-txt-base);
+        border: 0.2rem solid var(--color-brand-txt-base);
       }
 
       &:active + .fake-checkbox {
@@ -207,7 +207,7 @@ const attrs = useAttrs()
       }
 
       &:focus-visible + .fake-checkbox::before {
-        border: 0.2rem solid var(--color-warning-txt-base);
+        border: 0.2rem solid var(--color-brand-txt-base);
       }
 
       &:active + .fake-checkbox {
@@ -262,7 +262,7 @@ const attrs = useAttrs()
       }
 
       &:focus-visible + .fake-checkbox::before {
-        border: 0.2rem solid var(--color-danger-txt-base);
+        border: 0.2rem solid var(--color-brand-txt-base);
       }
 
       &:active + .fake-checkbox {

package/lib/components/ui/chip/UiChip.vue

@@ -1,6 +1,6 @@
 <!-- v4 -->
 <template>
-  <span :class="classNames" class="ui-chip typo p3-regular" @click="emit('edit')">
+  <span :class="classNames" class="ui-chip typo-body-regular-small" @click="emit('edit')">
     <ChipIcon :disabled :icon />
     <span class="content text-ellipsis">
       <slot />

package/lib/components/ui/counter/UiCounter.vue

@@ -21,8 +21,8 @@ const { size, accent, variant } = defineProps<{
 }>()
 
 const typoClasses = {
-  small: 'typo p4-semi-bold',
-  medium: 'typo p1-medium',
+  small: 'typo-body-bold-small',
+  medium: 'typo-body-bold',
 }
 
 const classNames = computed(() => {
@@ -57,16 +57,16 @@ const classNames = computed(() => {
       color: var(--color-brand-txt-item);
     }
 
-    &.accent--info {
-      background-color: var(--color-info-item-base);
-      color: var(--color-info-txt-item);
-    }
-
     &.accent--neutral {
       background-color: var(--color-neutral-txt-primary);
       color: var(--color-neutral-background-primary);
     }
 
+    &.accent--info {
+      background-color: var(--color-info-item-base);
+      color: var(--color-info-txt-item);
+    }
+
     &.accent--success {
       background-color: var(--color-success-item-base);
       color: var(--color-success-txt-item);

package/lib/components/ui/dropdown-button/UiDropdownButton.vue

@@ -2,7 +2,7 @@
 <template>
   <button :class="{ selected }" :disabled="isDisabled" class="ui-dropdown-item" type="button">
     <VtsIcon :icon accent="current" class="left-icon" fixed-width />
-    <span class="typo p1-regular label">
+    <span class="typo-action-button label">
       <slot />
     </span>
     <VtsIcon :icon="faAngleDown" accent="current" class="right-icon" fixed-width />
@@ -62,7 +62,7 @@ const isDisabled = useDisabled(() => disabled)
       content: '';
       position: absolute;
       inset: -0.5rem;
-      border: 0.2rem solid var(--color-info-txt-base);
+      border: 0.2rem solid var(--color-brand-txt-base);
       border-radius: 0.4rem;
     }
   }

package/lib/components/ui/head-bar/UiHeadBar.vue

@@ -7,11 +7,11 @@
           <VtsIcon :icon accent="current" />
         </slot>
       </span>
-      <h4 v-tooltip class="typo h4-medium label text-ellipsis">
+      <h4 v-tooltip class="typo-h4 label text-ellipsis">
         <slot />
       </h4>
     </div>
-    <div v-if="slots.status" class="status typo c3-regular">
+    <div v-if="slots.status" class="status typo-caption-small">
       <slot name="status" />
     </div>
     <div v-if="slots.actions" class="actions">

package/lib/components/ui/info/UiInfo.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="ui-info">
     <VtsIcon :accent class="icon" :icon="faCircle" :overlay-icon="icon" />
-    <p v-tooltip="!wrap" class="typo p3-regular" :class="{ 'text-ellipsis': !wrap }">
+    <p v-tooltip="!wrap" class="typo-form-info" :class="{ 'text-ellipsis': !wrap }">
       <slot />
     </p>
   </div>

package/lib/components/ui/input/UiInput.vue

@@ -6,7 +6,14 @@
     </UiLabel>
     <div>
       <VtsIcon :icon accent="current" class="before" />
-      <input :id v-model.trim="modelValue" class="typo p1-regular input text-ellipsis" :type :disabled v-bind="attrs" />
+      <input
+        :id
+        v-model.trim="modelValue"
+        class="typo-body-regular input text-ellipsis"
+        :type
+        :disabled
+        v-bind="attrs"
+      />
       <VtsIcon
         v-if="!attrs.disabled && modelValue && clearable"
         :icon="faXmark"
@@ -15,7 +22,7 @@
         @click="modelValue = ''"
       />
     </div>
-    <UiInfo v-if="slots.info || info" :accent>
+    <UiInfo v-if="slots.info || info" :accent="accent === 'brand' ? 'info' : accent">
       <slot name="info">{{ info }}</slot>
     </UiInfo>
   </div>
@@ -30,7 +37,7 @@ import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
 import { computed, useAttrs, useId } from 'vue'
 
-type InputAccent = 'info' | 'warning' | 'danger'
+type InputAccent = 'brand' | 'warning' | 'danger'
 type InputType = 'text' | 'number' | 'password' | 'search'
 
 defineOptions({
@@ -60,7 +67,7 @@ const slots = defineSlots<{
 
 const attrs = useAttrs()
 
-const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
+const labelAccent = computed(() => (accent === 'brand' ? 'neutral' : accent))
 </script>
 
 <style lang="postcss" scoped>
@@ -69,7 +76,6 @@ const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
   position: relative;
   display: flex;
   flex-direction: column;
-  flex: 1;
   gap: 0.4rem;
   flex: 1;
 
@@ -100,20 +106,20 @@ const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
 
   /* VARIANT */
 
-  &.accent--info {
+  &.accent--brand {
     .input {
       border-color: var(--color-neutral-border);
 
       &:hover {
-        border-color: var(--color-info-item-hover);
+        border-color: var(--color-brand-item-hover);
       }
 
       &:focus {
-        border-color: var(--color-info-item-base);
+        border-color: var(--color-brand-item-base);
       }
 
       &:active {
-        border-color: var(--color-info-item-active);
+        border-color: var(--color-brand-item-active);
       }
 
       &:disabled {

package/lib/components/ui/label/UiLabel.vue

@@ -2,7 +2,7 @@
 <template>
   <div :class="toVariants({ accent })" class="ui-label">
     <VtsIcon accent="current" :icon class="icon" />
-    <label :for="htmlFor" :class="{ required }" class="typo c2-semi-bold label">
+    <label :for="htmlFor" :class="{ required }" class="typo-caption label">
       <slot />
     </label>
     <UiLink v-if="href" class="learn-more-link" size="small" :href>{{ $t('learn-more') }}</UiLink>

package/lib/components/ui/legend/UiLegend.vue

@@ -2,9 +2,9 @@
 <template>
   <li :class="classNames" class="ui-legend">
     <VtsIcon :icon="faCircle" accent="current" class="circle-icon" />
-    <span class="label typo p3-regular"><slot /></span>
-    <VtsIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" accent="brand" />
-    <span v-if="valueLabel" class="value-and-unit typo c3-semi-bold">{{ valueLabel }}</span>
+    <span class="label typo-body-regular-small"><slot /></span>
+    <VtsIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" accent="info" />
+    <span v-if="valueLabel" class="value-and-unit typo-caption-small">{{ valueLabel }}</span>
   </li>
 </template>
 

package/lib/components/ui/legend-title/UiLegendTitle.vue

@@ -1,6 +1,6 @@
 <!-- v3 -->
 <template>
-  <div class="ui-legend-title typo c3-semi-bold">
+  <div class="ui-legend-title typo-caption-small">
     <slot />
     <VtsIcon v-tooltip="iconTooltip ?? false" :icon accent="info" />
   </div>

package/lib/components/ui/link/UiLink.vue

@@ -22,8 +22,8 @@ const props = defineProps<
 >()
 
 const typoClasses = {
-  small: 'typo p3-regular-underline',
-  medium: 'typo p1-regular-underline',
+  small: 'typo-action-link-small',
+  medium: 'typo-action-link',
 }
 
 const { component, attributes, isDisabled } = useLinkComponent('span', () => props)
@@ -53,7 +53,7 @@ const classes = computed(() => [typoClasses[props.size], { disabled: isDisabled.
       content: '';
       position: absolute;
       inset: -0.4rem;
-      border: 0.2rem solid var(--color-info-txt-base);
+      border: 0.2rem solid var(--color-brand-txt-base);
       border-radius: 0.4rem;
     }
   }

package/lib/components/ui/object-link/UiObjectLink.vue

@@ -1,6 +1,6 @@
 <!-- v3 -->
 <template>
-  <RouterLink v-if="route && !disabled" :to="route" class="ui-object-link is-link typo p3-regular-underline">
+  <RouterLink v-if="route && !disabled" :to="route" class="ui-object-link is-link typo-action-link-small">
     <span class="icon">
       <slot name="icon">
         <VtsIcon :icon accent="current" />
@@ -10,7 +10,7 @@
       <slot />
     </span>
   </RouterLink>
-  <span v-else :class="{ disabled }" class="ui-object-link typo p3-regular-underline">
+  <span v-else :class="{ disabled }" class="ui-object-link typo-action-link-small">
     <span class="icon">
       <slot name="icon">
         <VtsIcon :icon accent="current" />
@@ -43,7 +43,7 @@ defineSlots<{
   display: flex;
   min-width: 0;
   align-items: center;
-  color: var(--color-info-txt-base);
+  color: var(--color-brand-txt-base);
   gap: 1rem;
 
   &.disabled {
@@ -53,18 +53,18 @@ defineSlots<{
 
   .icon {
     color: var(--color-neutral-txt-primary);
-    font-size: 0.8rem;
+    font-size: 1.6rem;
   }
 
   /* INTERACTION VARIANTS */
 
   &.is-link {
     &:hover {
-      color: var(--color-info-txt-hover);
+      color: var(--color-brand-txt-hover);
     }
 
     &:active {
-      color: var(--color-info-txt-active);
+      color: var(--color-brand-txt-active);
     }
 
     &:focus-visible {
@@ -74,7 +74,7 @@ defineSlots<{
         content: '';
         position: absolute;
         inset: -0.6rem;
-        border: 0.2rem solid var(--color-info-txt-base);
+        border: 0.2rem solid var(--color-brand-txt-base);
         border-radius: 0.4rem;
       }
     }

package/lib/components/ui/panel/UiPanel.vue

@@ -23,10 +23,12 @@ const slots = defineSlots<{
 
 <style scoped lang="postcss">
 .ui-panel {
-  height: 100%;
+  max-height: calc(100dvh - 5.5rem);
+  position: sticky;
+  top: 0;
   display: flex;
   flex-direction: column;
-  border: 0.1rem solid var(--color-neutral-border);
+  border-inline-start: 0.1rem solid var(--color-neutral-border);
   background-color: var(--color-neutral-background-secondary);
 
   .header {

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

@@ -1,14 +1,14 @@
 <!-- v3 -->
 <template>
   <form class="ui-query-search-bar" @submit.prevent="emit('search', value)">
-    <label v-if="uiStore.isDesktop" :for="id" class="typo p2-regular label">
+    <label v-if="uiStore.isDesktop" :for="id" class="typo-body-regular-small label">
       {{ $t('core.query-search-bar.label') }}
     </label>
     <UiInput
       :id
       v-model="value"
       type="text"
-      accent="info"
+      accent="brand"
       :aria-label="uiStore.isMobile ? $t('core.query-search-bar.label') : undefined"
       :icon="uiStore.isDesktop ? faMagnifyingGlass : undefined"
       :placeholder="$t('core.query-search-bar.placeholder')"

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

@@ -5,7 +5,7 @@
       <UiButtonIcon accent="brand" :icon="isExpanded ? faAngleDown : faAngleRight" size="small" />
     </div>
     <div class="content">
-      <div class="typo p1-medium">
+      <div class="typo-body-bold">
         {{ task.name }}
       </div>
       <div class="informations">
@@ -13,10 +13,10 @@
           <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 p4-medium">{{ $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 p4-regular">
+        <div v-if="task.start" class="line-2 typo-body-regular-small">
           {{ $d(task.start, 'datetime_short') }}
           <template v-if="task.end">
             <VtsIcon :icon="faArrowRight" accent="current" />

package/lib/components/ui/radio-button/UiRadioButton.vue

@@ -1,6 +1,6 @@
 <!-- v4 -->
 <template>
-  <label :class="variant" class="ui-radio-button typo p1-regular">
+  <label :class="variant" class="ui-radio-button typo-body-regular">
     <span class="radio-container">
       <input v-model="model" :disabled="isDisabled" :value class="input" type="radio" />
       <VtsIcon :icon="faCircle" accent="current" class="radio-icon" />
@@ -60,7 +60,7 @@ const isDisabled = useDisabled(() => disabled)
         position: absolute;
         content: '';
         inset: -0.5rem;
-        border: 0.2rem solid var(--color-info-txt-base);
+        border: 0.2rem solid var(--color-brand-txt-base);
         border-radius: 0.4rem;
       }
     }

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

@@ -4,7 +4,7 @@
     v-tooltip="{ selector: '.text-ellipsis' }"
     :class="`accent--${accent}`"
     :style="{ width: percentage + '%' }"
-    class="stacked-bar-segment typo c4-semi-bold"
+    class="stacked-bar-segment typo-caption-small"
   >
     <div ref="ellipsisElement" :class="{ hidden }" class="text-ellipsis">
       {{ $n(percentage / 100, 'percent') }}

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

@@ -7,13 +7,13 @@
       <PaginationButton :disabled="isLastPage || disabled" :icon="faAngleRight" @click="goToNextPage()" />
       <PaginationButton :disabled="isLastPage || disabled" :icon="faAngleDoubleRight" @click="goToLastPage()" />
     </div>
-    <span class="typo p3-regular label">
+    <span class="typo-body-regular-small label">
       {{ $t('core.select.n-object-of', { from: startIndex, to: endIndex, total: totalItems }) }}
     </span>
-    <span class="typo p3-regular label show">{{ $t('core.show-by') }}</span>
+    <span class="typo-body-regular-small label show">{{ $t('core.show-by') }}</span>
     <div class="dropdown-wrapper">
-      <select v-model="pageSize" :disabled class="dropdown typo c3-regular" @change="goToFirstPage">
-        <option v-for="option in pageSizeOptions" :key="option" :value="option" class="typo p2-medium">
+      <select v-model="pageSize" :disabled class="dropdown typo-body-regular-small" @change="goToFirstPage">
+        <option v-for="option in pageSizeOptions" :key="option" :value="option" class="typo-body-bold-small">
           {{ option }}
         </option>
       </select>

package/lib/components/ui/tag/UiTag.vue

@@ -1,7 +1,7 @@
 <!-- v3 -->
 <!-- TODO: implement tertiary variant to bump to v4 -->
 <template>
-  <span :class="toVariants({ accent, variant })" class="ui-tag typo p3-regular">
+  <span :class="toVariants({ accent, variant })" class="ui-tag typo-body-regular-small">
     <slot name="icon">
       <VtsIcon :icon accent="current" fixed-width />
     </slot>

package/lib/components/ui/{input → text-area}/UiTextarea.vue

@@ -1,25 +1,41 @@
 <!-- v2 -->
 <template>
-  <div class="ui-textarea" :class="toVariants({ accent })">
-    <UiLabel v-if="slots.default" :accent="labelAccent" :required :icon :href><slot /></UiLabel>
-    <textarea v-model="model" :disabled class="textarea" v-bind="attrs" />
-    <UiInfo v-if="slots.info" :accent><slot name="info" /></UiInfo>
+  <div class="ui-textarea" :class="toVariants({ accent: hasMaxCharactersError ? 'danger' : accent })">
+    <UiLabel v-if="slots.default" :accent="labelAccent" :required :icon :href :for="id">
+      <slot />
+    </UiLabel>
+    <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 }) }}
+    </UiInfo>
+    <UiInfo v-if="slots.info" :accent="accent === 'brand' ? 'info' : accent">
+      <slot name="info" />
+    </UiInfo>
   </div>
 </template>
 
 <script lang="ts" setup>
+import UiCharacterLimit from '@core/components/ui/character-limit/UiCharacterLimit.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import UiLabel from '@core/components/ui/label/UiLabel.vue'
 import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { computed, useAttrs } from 'vue'
+import { useFocus } from '@vueuse/core'
+import { computed, useAttrs, useId, useTemplateRef } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<{
-  accent: 'info' | 'warning' | 'danger'
+const {
+  accent,
+  maxCharacters,
+  id = useId(),
+} = defineProps<{
+  accent: 'brand' | 'warning' | 'danger'
+  id?: string
+  maxCharacters?: number
   disabled?: boolean
   href?: string
   icon?: IconDefinition
@@ -35,7 +51,24 @@ const slots = defineSlots<{
 
 const attrs = useAttrs()
 
-const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.accent))
+const textAreaElement = useTemplateRef('textarea')
+
+const { focused } = useFocus(textAreaElement)
+
+// WIP: To update when using VeeValidate and custom validation rules
+const isExceedingMaxCharacters = computed(() =>
+  maxCharacters !== undefined ? model.value.trim().length > maxCharacters : false
+)
+
+const hasMaxCharactersError = computed(() => !focused.value && isExceedingMaxCharacters.value)
+
+const labelAccent = computed(() => {
+  if (hasMaxCharactersError.value) {
+    return 'danger'
+  }
+
+  return accent === 'brand' ? 'neutral' : accent
+})
 </script>
 
 <style lang="postcss" scoped>
@@ -54,20 +87,23 @@ const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.
     width: 100%;
   }
 
-  &.accent--info {
+  &.accent--brand {
     .textarea {
       border-color: var(--color-neutral-border);
 
       &:hover {
-        border-color: var(--color-info-item-hover);
+        border-color: var(--color-brand-item-hover);
       }
+
       &:active {
-        border-color: var(--color-info-item-active);
+        border-color: var(--color-brand-item-active);
       }
+
       &:focus:not(:active) {
         border-width: 0.2rem;
-        border-color: var(--color-info-item-base);
+        border-color: var(--color-brand-item-base);
       }
+
       &:disabled {
         background-color: var(--color-neutral-background-disabled);
         border-color: var(--color-neutral-border);
@@ -82,13 +118,16 @@ const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.
       &:hover {
         border-color: var(--color-warning-item-hover);
       }
+
       &:active {
         border-color: var(--color-warning-item-active);
       }
+
       &:focus:not(:active) {
         border-width: 0.2rem;
         border-color: var(--color-warning-item-base);
       }
+
       &:disabled {
         background-color: var(--color-neutral-background-disabled);
         border-color: var(--color-neutral-border);
@@ -103,13 +142,16 @@ const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.
       &:hover {
         border-color: var(--color-danger-item-hover);
       }
+
       &:active {
         border-color: var(--color-danger-item-active);
       }
+
       &:focus:not(:active) {
         border-width: 0.2rem;
         border-color: var(--color-danger-item-base);
       }
+
       &:disabled {
         background-color: var(--color-neutral-background-disabled);
         border-color: var(--color-neutral-border);