@robuust-digital/vue-components 2.0.0-rc.5 → 2.0.0-rc.7

package/dist/combobox/combobox.css

@@ -7,6 +7,8 @@
   --rvc-combobox-box-shadow: var(--rvc-base-box-shadow);
   --rvc-combobox-color: var(--rvc-base-input-color);
   --rvc-combobox-bg-color: var(--rvc-base-input-bg-color);
+  --rvc-combobox-bg-color-disabled: var(--rvc-base-input-bg-color-disabled);
+  --rvc-combobox-disabled-opacity: var(--rvc-base-input-disabled-opacity);
   --rvc-combobox-padding-x: var(--rvc-base-input-padding-x);
   --rvc-combobox-height: var(--rvc-base-input-height);
   --rvc-combobox-icon-size: var(--rvc-base-input-icon-size);
@@ -42,10 +44,24 @@
   .rvc-combobox {
     display: block;
 
+    .rvc-combobox-container {
+      position: relative;
+    }
+
     .rvc-combobox-wrapper {
+      display: flex;
+      column-gap: calc(var(--spacing) * 1);
+
+      &:has(:disabled) {
+        opacity: var(--rvc-combobox-disabled-opacity);
+        pointer-events: none;
+      }
+    }
+
+    .rvc-combobox-field {
       display: grid;
-      grid-template-columns: 1fr;
       position: relative;
+      grid-template-columns: 1fr;
       width: 100%;
 
       /* Extra right padding */
@@ -60,24 +76,24 @@
     }
 
     input {
-      border-radius: var(--rvc-combobox-border-radius);
-      border-width: var(--rvc-combobox-border-width);
-      border-color: var(--rvc-combobox-border-color);
+      position: relative;
+      grid-column-start: 1;
+      grid-row-start: 1;
+      width: 100%;
+      height: var(--rvc-combobox-height);
       padding-right: var(--rvc-combobox-padding-x);
       padding-left: var(--rvc-combobox-padding-x);
+      border-width: var(--rvc-combobox-border-width);
+      border-radius: var(--rvc-combobox-border-radius);
+      border-color: var(--rvc-combobox-border-color);
+      outline-width: 0;
       background-color: var(--rvc-combobox-bg-color);
+      background-image: none;
+      box-shadow: var(--rvc-combobox-box-shadow);
+      color: var(--rvc-combobox-color);
       font-size: var(--rvc-combobox-font-size);
       font-weight: var(--rvc-combobox-font-weight);
-      color: var(--rvc-combobox-color);
-      box-shadow: var(--rvc-combobox-box-shadow);
-      height: var(--rvc-combobox-height);
-      background-image: none;
-      width: 100%;
-      position: relative;
-      grid-column-start: 1;
-      grid-row-start: 1;
       appearance: none;
-      outline-width: 0;
 
       /* Extra left padding */
       &:nth-child(2) {
@@ -87,15 +103,19 @@
       &::placeholder {
         color: var(--rvc-combobox-placeholder-color);
       }
+
+      &:disabled {
+        background-color: var(--rvc-combobox-bg-color-disabled);
+      }
     }
 
-    .rvc-combobox-button, .rvc-combobox-wrapper > svg {
-      color: var(--rvc-combobox-icon-color);
+    .rvc-combobox-button, .rvc-combobox-field > svg {
       position: relative;
+      z-index: 1;
       grid-column-start: 1;
       grid-row-start: 1;
       align-self: center;
-      z-index: 1;
+      color: var(--rvc-combobox-icon-color);
     }
 
     .rvc-combobox-button {
@@ -128,10 +148,10 @@
     }
 
     .rvc-combobox-chips {
-      margin-top: var(--rvc-combobox-chips-spacing);
-      gap: var(--rvc-combobox-chips-spacing);
       display: flex;
       flex-wrap: wrap;
+      margin-top: var(--rvc-combobox-chips-spacing);
+      gap: var(--rvc-combobox-chips-spacing);
     }
 
     .rvc-combobox-chip {
@@ -148,34 +168,34 @@
     }
 
     .rvc-combobox-options {
-      padding-inline: var(--rvc-combobox-options-padding-x);
-      padding-block: var(--rvc-combobox-options-padding-y);
+      position: absolute;
+      z-index: var(--rvc-combobox-options-z-index);
       top: calc(var(--rvc-combobox-height) + var(--rvc-combobox-options-offset));
-      border-radius: var(--rvc-combobox-border-radius);
+      width: 100%;
+      max-height: var(--rvc-combobox-options-max-height);
+      margin-top: var(--rvc-combobox-options-offset);
+      padding-block: var(--rvc-combobox-options-padding-y);
+      padding-inline: var(--rvc-combobox-options-padding-x);
+      overflow-y: auto;
       border-width: var(--rvc-combobox-border-width);
+      border-radius: var(--rvc-combobox-border-radius);
       border-color: var(--rvc-combobox-border-color);
       background-color: var(--rvc-combobox-bg-color);
-      font-size: var(--rvc-combobox-font-size);
-      color: var(--rvc-combobox-color);
       box-shadow: var(--rvc-combobox-box-shadow);
-      margin-top: var(--rvc-combobox-options-offset);
-      z-index: var(--rvc-combobox-options-z-index);
-      max-height: var(--rvc-combobox-options-max-height);
-      position: absolute;
-      width: 100%;
-      overflow-y: auto;
+      color: var(--rvc-combobox-color);
+      font-size: var(--rvc-combobox-font-size);
     }
 
     .rvc-combobox-option {
+      display: flex;
+      position: relative;
+      align-items: center;
       padding: var(--rvc-combobox-option-padding-y) var(--rvc-combobox-option-padding-x);
       border-radius: var(--rvc-combobox-border-radius);
       color: var(--rvc-combobox-color);
-      gap: calc(var(--spacing) * 2);
-      align-items: center;
-      position: relative;
-      display: flex;
-      user-select: none;
       cursor: pointer;
+      user-select: none;
+      gap: calc(var(--spacing) * 2);
 
       &.rvc-combobox-option-hover {
         background-color: var(--rvc-combobox-option-bg-color-hover);
@@ -192,6 +212,28 @@
       }
     }
 
+    .rvc-combobox-option-text {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .rvc-combobox-content {
+      position: relative;
+      padding-right: calc(var(--spacing) * 9);
+      padding-left: calc(var(--spacing) * 3);
+      padding-block: calc(var(--spacing) * 2);
+      color: var(--color-slate-500);
+      cursor: default;
+      user-select: none;
+
+      > * {
+        display: flex;
+        align-items: center;
+      }
+    }
+
     /* Size variants */
     &.rvc-combobox-sm {
       --rvc-combobox-height: var(--rvc-combobox-height-sm);

package/dist/combobox/index.js

@@ -1,10 +1,10 @@
-import { createElementBlock as d, openBlock as n, createElementVNode as r, ref as h, computed as K, createBlock as g, unref as c, mergeProps as F, withCtx as x, createCommentVNode as C, renderSlot as v, createVNode as y, resolveDynamicComponent as N, withModifiers as P, Fragment as j, renderList as z, createTextVNode as Z, toDisplayString as S, normalizeClass as U } from "vue";
+import { createElementBlock as d, openBlock as a, createElementVNode as r, ref as p, computed as K, createBlock as g, unref as c, mergeProps as F, withCtx as x, createCommentVNode as C, renderSlot as v, createVNode as y, resolveDynamicComponent as N, withModifiers as P, Fragment as j, renderList as z, createTextVNode as Z, toDisplayString as S, normalizeClass as U } from "vue";
 import { useDebounceFn as G } from "@vueuse/core";
 import { Combobox as H, ComboboxInput as J, ComboboxButton as Q, ComboboxOptions as W, ComboboxOption as X } from "@headlessui/vue";
 import { r as Y, _ } from "../_shared/ChevronDownIcon-z-5U4fIb.js";
 import { S as ee } from "../_shared/icon-spinner-CmxIOqaK.js";
 function te(e, $) {
-  return n(), d("svg", {
+  return a(), d("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
     fill: "currentColor",
@@ -19,7 +19,7 @@ function te(e, $) {
   ]);
 }
 function le(e, $) {
-  return n(), d("svg", {
+  return a(), d("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor",
@@ -29,16 +29,16 @@ function le(e, $) {
     r("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" })
   ]);
 }
-const oe = { class: "relative" }, ae = { class: "flex gap-x-1" }, ne = { class: "rvc-combobox-wrapper" }, ie = {
+const oe = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrapper" }, ae = { class: "rvc-combobox-field" }, ie = {
   key: 0,
   class: "rvc-combobox-chips"
 }, ue = ["onClick"], re = {
   key: 0,
-  class: "relative cursor-default select-none py-2 pl-3 pr-9 text-slate-500"
-}, se = { class: "flex items-center" }, ce = {
+  class: "rvc-combobox-content"
+}, se = {
   key: 1,
-  class: "relative cursor-default select-none py-2 pl-3 pr-9 text-slate-500"
-}, de = { class: "block truncate" }, pe = /* @__PURE__ */ Object.assign({
+  class: "rvc-combobox-content"
+}, ce = { class: "rvc-combobox-option-text" }, ye = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "Combobox",
@@ -147,52 +147,52 @@ const oe = { class: "relative" }, ae = { class: "flex gap-x-1" }, ne = { class:
   },
   emits: ["update:modelValue", "update:requestParams", "combobox:noResults", "combobox:error"],
   setup(e, { emit: $ }) {
-    const a = e, m = $, s = h([]), b = h(!1), k = h(null), L = h(!0), q = h(null), f = K({
-      get: () => a.multiple ? a.modelValue || [] : a.modelValue,
+    const n = e, m = $, s = p([]), f = p(!1), k = p(null), L = p(!0), q = p(null), b = K({
+      get: () => n.multiple ? n.modelValue || [] : n.modelValue,
       set: (t) => m("update:modelValue", t)
     }), O = K({
-      get: () => a.requestParams,
+      get: () => n.requestParams,
       set: (t) => m("update:requestParams", t)
     }), D = (t) => new Promise((l) => {
       setTimeout(l, t);
     }), T = (t, l) => {
       s.value = [], m("combobox:error", t), m("combobox:noResults", l);
     }, A = async (t) => {
-      if (!a.onSearch) return;
-      if (a.searchOnly && !t) {
+      if (!n.onSearch) return;
+      if (n.searchOnly && !t) {
         s.value = [];
         return;
       }
-      if (t && t.length < a.minLength) {
+      if (t && t.length < n.minLength) {
         s.value = [];
         return;
       }
-      q.value && a.onCancel && a.onCancel(q.value), b.value = !0;
+      q.value && n.onCancel && n.onCancel(q.value), f.value = !0;
       const l = Date.now();
       try {
-        const { data: i, error: p, cancel: w } = await a.onSearch(t, O.value, a.endpoint);
+        const { data: i, error: h, cancel: w } = await n.onSearch(t, O.value, n.endpoint);
         q.value = w;
-        const o = a.responseData(i), u = Date.now() - l;
-        !o.length && p && T(p, t), u < a.minLoadingTime && await D(a.minLoadingTime - u), o != null && o.length ? s.value = o : (s.value = [], m("combobox:noResults", t));
+        const o = n.responseData(i), u = Date.now() - l;
+        !o.length && h && T(h, t), u < n.minLoadingTime && await D(n.minLoadingTime - u), o != null && o.length ? s.value = o : (s.value = [], m("combobox:noResults", t));
       } catch (i) {
         i.cancelled || T(i, t);
       } finally {
-        b.value = !1;
+        f.value = !1;
       }
-    }, M = G(A, a.debounce), B = (t) => {
+    }, M = G(A, n.debounce), B = (t) => {
       L.value ? (L.value = !1, A(t)) : M(t);
     }, R = (t) => {
       var l;
-      ((l = t.target.value) == null ? void 0 : l.length) === 0 && (s.value = [], m("update:modelValue", null)), a.manualInput && m("update:modelValue", O.value.query);
+      ((l = t.target.value) == null ? void 0 : l.length) === 0 && (s.value = [], m("update:modelValue", null)), n.manualInput && m("update:modelValue", O.value.query);
     }, V = (t) => {
       var l;
-      return a.multiple ? f.value.some((i) => i[a.itemKey] === t) : ((l = f.value) == null ? void 0 : l[a.itemKey]) === t;
+      return n.multiple ? b.value.some((i) => i[n.itemKey] === t) : ((l = b.value) == null ? void 0 : l[n.itemKey]) === t;
     }, I = (t) => {
-      f.value = f.value.filter((l) => l[a.itemKey] !== t[a.itemKey]);
+      b.value = b.value.filter((l) => l[n.itemKey] !== t[n.itemKey]);
     };
-    return (t, l) => (n(), g(c(H), F({
-      modelValue: f.value,
-      "onUpdate:modelValue": l[4] || (l[4] = (i) => f.value = i),
+    return (t, l) => (a(), g(c(H), F({
+      modelValue: b.value,
+      "onUpdate:modelValue": l[4] || (l[4] = (i) => b.value = i),
       as: "div"
     }, e.rootAttrs, {
       multiple: e.multiple,
@@ -203,16 +203,16 @@ const oe = { class: "relative" }, ae = { class: "flex gap-x-1" }, ne = { class:
       ]
     }), {
       default: x(() => {
-        var i, p, w;
+        var i, h, w;
         return [
           r("div", oe, [
-            r("div", ae, [
-              r("div", ne, [
+            r("div", ne, [
+              r("div", ae, [
                 e.prefixIcon ? v(t.$slots, "prefixIcon", {
                   key: 0,
                   icon: e.prefixIcon
                 }, () => [
-                  (n(), g(N(e.prefixIcon), { "aria-hidden": "true" }))
+                  (a(), g(N(e.prefixIcon), { "aria-hidden": "true" }))
                 ]) : C("", !0),
                 y(c(J), F(t.$attrs, {
                   id: e.id,
@@ -231,23 +231,23 @@ const oe = { class: "relative" }, ae = { class: "flex gap-x-1" }, ne = { class:
                   default: x(() => {
                     var o;
                     return [
-                      b.value ? v(t.$slots, "spinner", {
+                      f.value ? v(t.$slots, "spinner", {
                         key: 0,
-                        spinning: b.value
+                        spinning: f.value
                       }, () => [
                         y(c(ee), { class: "rvc-combobox-spinner" })
-                      ]) : (!e.searchOnly || (o = s.value) != null && o.length) && !b.value ? v(t.$slots, "icon", {
+                      ]) : (!e.searchOnly || (o = s.value) != null && o.length) && !f.value ? v(t.$slots, "icon", {
                         key: 1,
                         icon: e.icon
                       }, () => [
-                        (n(), g(N(e.icon ?? c(Y)), { "aria-hidden": "true" }))
+                        (a(), g(N(e.icon ?? c(Y)), { "aria-hidden": "true" }))
                       ]) : C("", !0)
                     ];
                   }),
                   _: 3
                 }, 8, ["disabled"])
               ]),
-              e.clearable && ((i = e.modelValue) != null && i.length || (p = e.modelValue) != null && p.id) ? (n(), d("button", {
+              e.clearable && ((i = e.modelValue) != null && i.length || (h = e.modelValue) != null && h.id) ? (a(), d("button", {
                 key: 0,
                 type: "button",
                 "aria-label": "Clear selection",
@@ -259,8 +259,8 @@ const oe = { class: "relative" }, ae = { class: "flex gap-x-1" }, ne = { class:
                 ])
               ])) : C("", !0)
             ]),
-            e.multiple && f.value.length ? (n(), d("ul", ie, [
-              (n(!0), d(j, null, z(f.value, (o) => (n(), d("li", {
+            e.multiple && b.value.length ? (a(), d("ul", ie, [
+              (a(!0), d(j, null, z(b.value, (o) => (a(), d("li", {
                 key: `${e.id}-selected-option-${o[e.itemKey]}`
               }, [
                 v(t.$slots, "chip", {
@@ -288,20 +288,20 @@ const oe = { class: "relative" }, ae = { class: "flex gap-x-1" }, ne = { class:
                 ])
               ]))), 128))
             ])) : C("", !0),
-            (!e.searchOnly || (w = k.value) != null && w.length) && (!b.value || s.value.length) ? (n(), g(c(W), {
+            (!e.searchOnly || (w = k.value) != null && w.length) && (!f.value || s.value.length) ? (a(), g(c(W), {
               key: 1,
               class: "rvc-combobox-options"
             }, {
               default: x(() => {
                 var o;
                 return [
-                  ((o = k.value) == null ? void 0 : o.length) < e.minLength ? (n(), d("div", re, [
-                    r("div", se, [
+                  ((o = k.value) == null ? void 0 : o.length) < e.minLength ? (a(), d("div", re, [
+                    r("div", null, [
                       r("em", null, "Minimal " + S(e.minLength) + " characters.", 1)
                     ])
-                  ])) : !b.value && !s.value.length ? (n(), d("div", ce, l[5] || (l[5] = [
-                    r("div", { class: "flex items-center" }, " No results found. ", -1)
-                  ]))) : (n(!0), d(j, { key: 2 }, z(s.value, (u) => (n(), g(c(X), {
+                  ])) : !f.value && !s.value.length ? (a(), d("div", se, l[5] || (l[5] = [
+                    r("div", null, " No results found. ", -1)
+                  ]))) : (a(!0), d(j, { key: 2 }, z(s.value, (u) => (a(), g(c(X), {
                     key: u[e.itemKey],
                     value: u,
                     as: "template"
@@ -322,7 +322,7 @@ const oe = { class: "relative" }, ae = { class: "flex gap-x-1" }, ne = { class:
                             option: u[e.itemKey],
                             isActive: V
                           }),
-                          r("span", de, S(e.optionText(u)), 1),
+                          r("span", ce, S(e.optionText(u)), 1),
                           v(t.$slots, "optionSuffix", {
                             option: u[e.itemKey],
                             isActive: V
@@ -344,6 +344,6 @@ const oe = { class: "relative" }, ae = { class: "flex gap-x-1" }, ne = { class:
   }
 });
 export {
-  pe as Combobox,
-  pe as default
+  ye as Combobox,
+  ye as default
 };

package/dist/core/accordion.css

@@ -15,20 +15,31 @@
 @layer components {
   .rvc-accordion {
     details {
-      border-top-width: var(--rvc-accordion-border-width);
-      border-top-color: var(--rvc-accordion-border-color);
-      border-top-style: var(--rvc-accordion-border-style);
+      border-top: var(--rvc-accordion-border-width) var(--rvc-accordion-border-style) var(--rvc-accordion-border-color);
+
+      .rvc-accordion-icon {
+        width: calc(var(--spacing) * 5);
+        height: calc(var(--spacing) * 5);
+        transform: translateZ(0) var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+        transition-property: transform, translate, scale, rotate;
+        transition-duration: var(--rvc-base-transition-duration);
+        transition-timing-function: var(--rvc-base-transition-timing-function);
+      }
+
+      &:open .rvc-accordion-icon {
+        transform: rotate(45deg);
+      }
     }
 
     summary {
-      padding-block: var(--rvc-accordion-padding-y);
-      font-weight: var(--rvc-accordion-summary-font-weight);
-      font-size: var(--rvc-accordion-summary-font-size);
-      color: var(--rvc-accordion-summary-color);
-      width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
+      width: 100%;
+      padding-block: var(--rvc-accordion-padding-y);
+      color: var(--rvc-accordion-summary-color);
+      font-size: var(--rvc-accordion-summary-font-size);
+      font-weight: var(--rvc-accordion-summary-font-weight);
       cursor: pointer;
       user-select: none;
 
@@ -39,9 +50,9 @@
 
     .rvc-accordion-content {
       padding-bottom: var(--rvc-accordion-padding-y);
-      font-weight: var(--rvc-accordion-font-weight);
-      font-size: var(--rvc-accordion-font-size);
       color: var(--rvc-accordion-color);
+      font-size: var(--rvc-accordion-font-size);
+      font-weight: var(--rvc-accordion-font-weight);
     }
   }
 }

package/dist/core/alert.css

@@ -11,6 +11,7 @@
   --rvc-alert-icon-size: calc(var(--spacing) * 6);
   --rvc-alert-title-font-weight: var(--font-weight-medium);
   --rvc-alert-transition-property: color, background-color, border-color;
+  --rvc-alert-close-icon-size: calc(var(--spacing) * 5);
 
   /* Default color variables */
   --rvc-alert-bg-color: var(--color-blue-50);
@@ -56,23 +57,23 @@
 
 @layer components {
   .rvc-alert {
-    gap: var(--rvc-alert-gap);
-    padding-inline: var(--rvc-alert-padding-x);
+    display: flex;
+    position: relative;
     padding-block: var(--rvc-alert-padding-y);
+    padding-inline: var(--rvc-alert-padding-x);
+    overflow: hidden;
     border-radius: var(--rvc-alert-border-radius);
-    font-size: var(--rvc-alert-font-size);
     background-color: var(--rvc-alert-bg-color);
     color: var(--rvc-alert-color);
-    display: flex;
-    position: relative;
-    overflow: hidden;
+    font-size: var(--rvc-alert-font-size);
+    gap: var(--rvc-alert-gap);
 
     a {
-      text-decoration: var(--rvc-alert-anchor-decoration);
       transition-property: var(--rvc-alert-transition-property);
       transition-duration: var(--rvc-alert-transition-duration);
       transition-timing-function: var(--rvc-alert-transition-timing-function);
       color: var(--rvc-alert-anchor-color);
+      text-decoration: var(--rvc-alert-anchor-decoration);
 
       &:hover {
         color: var(--rvc-alert-anchor-color-hover);
@@ -80,9 +81,9 @@
     }
 
     ul, ol {
-      list-style-position: inside;
       margin: 0;
       padding-left: calc(var(--spacing) * 2);
+      list-style-position: inside;
     }
 
     ul {
@@ -94,19 +95,24 @@
     }
 
     .rvc-alert-close {
-      background-color: var(--rvc-alert-close-bg-color);
-      color: var(--rvc-alert-icon-color);
-      border-bottom-left-radius: var(--rvc-alert-border-radius);
-      transition-property: var(--rvc-alert-transition-property);
-      transition-duration: var(--rvc-alert-transition-duration);
-      transition-timing-function: var(--rvc-alert-transition-timing-function);
       display: inline-flex;
-      justify-content: center;
-      align-items: center;
       position: absolute;
       top: 0;
       right: 0;
+      align-items: center;
+      justify-content: center;
       padding: calc(var(--spacing) * 1.5);
+      transition-property: var(--rvc-alert-transition-property);
+      transition-duration: var(--rvc-alert-transition-duration);
+      transition-timing-function: var(--rvc-alert-transition-timing-function);
+      border-bottom-left-radius: var(--rvc-alert-border-radius);
+      background-color: var(--rvc-alert-close-bg-color);
+      color: var(--rvc-alert-icon-color);
+
+      svg {
+        width: var(--rvc-alert-close-icon-size);
+        height: var(--rvc-alert-close-icon-size);
+      }
 
       &:hover {
         background-color: var(--rvc-alert-close-bg-color-hover);
@@ -115,18 +121,18 @@
     }
 
     .rvc-alert-icon {
+      display: block;
+      flex-shrink: 0;
       width: var(--rvc-alert-icon-size);
       height: var(--rvc-alert-icon-size);
       color: var(--rvc-alert-icon-color);
-      display: block;
-      flex-shrink: 0;
     }
 
     .rvc-alert-title {
-      color: var(--rvc-alert-title-color);
-      font-weight: var(--rvc-alert-title-font-weight);
       display: block;
       margin-bottom: calc(var(--spacing) * 2);
+      color: var(--rvc-alert-title-color);
+      font-weight: var(--rvc-alert-title-font-weight);
 
       &:last-child {
         margin-bottom: 0;

package/dist/core/badge.css

@@ -53,23 +53,23 @@
 
 @layer components {
   .rvc-badge {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
     height: var(--rvc-badge-height);
-    padding-inline: var(--rvc-badge-padding-x);
     padding-block: var(--rvc-badge-padding-y);
-    font-weight: var(--rvc-badge-font-weight);
+    padding-inline: var(--rvc-badge-padding-x);
     border-radius: var(--rvc-badge-border-radius);
-    font-size: var(--rvc-badge-font-size);
-    gap: var(--rvc-badge-gap);
     background-color: var(--rvc-badge-bg-color);
     color: var(--rvc-badge-color);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    font-size: var(--rvc-badge-font-size);
+    font-weight: var(--rvc-badge-font-weight);
     text-align: center;
-    position: relative;
-    width: fit-content;
-    white-space: nowrap;
     text-decoration: none;
+    white-space: nowrap;
+    gap: var(--rvc-badge-gap);
 
     &.rvc-badge-gray {
       --rvc-badge-bg-color: var(--rvc-badge-bg-color-gray);