arekui 1.0.0 → 2.0.0

package/src/base/tokens.css

@@ -1,304 +1,61 @@
 /* DESIGN TOKENS */
-:root {
- --ar-font-sans:
-  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-  sans-serif;
- --ar-font-serif: "IM Fell English", Georgia, "Times New Roman", serif;
- --ar-font-mono:
-  ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, "Courier New",
-  monospace;
- --ar-base-font: var(--ar-font-serif);
-
- --ar-s-0: 0;
- --ar-s-1: 0.25rem;
- --ar-s-2: 0.5rem;
- --ar-s-3: 0.75rem;
- --ar-s-4: 1rem;
- --ar-s-5: 1.25rem;
- --ar-s-6: 1.5rem;
- --ar-s-8: 2rem;
- --ar-s-10: 2.5rem;
- --ar-s-12: 3rem;
- --ar-s-16: 4rem;
- --ar-s-20: 5rem;
-
- --ar-radius-field: 0.25rem;
- --ar-radius-box: 0.5rem;
- --ar-radius-selector: 2rem;
- --ar-radius-pill: 9999px;
-
- --ar-border-width: 1px;
-
- --ar-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
- --ar-shadow-md:
-  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
- --ar-shadow-lg:
-  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
- --ar-shadow-xl:
-  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
- --ar-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-
- /* Relative to this stylesheet — override the token if you serve
-     arekui.css from another path or want a different texture. */
- --ar-texture: url("assets/img/grunge-wall-texture-freepick-kues1.webp");
-
- --ar-gray-50: #fafafa;
- --ar-gray-100: #f5f5f5;
- --ar-gray-200: #e5e5e5;
- --ar-gray-300: #d4d4d4;
- --ar-gray-400: #a3a3a3;
- --ar-gray-500: #737373;
- --ar-gray-600: #525252;
- --ar-gray-700: #404040;
- --ar-gray-800: #262626;
- --ar-gray-900: #171717;
-
- /* Dark palette — single source of truth shared by
-     html[data-theme="dark"] and the prefers-color-scheme fallback. */
- --ar-dark-base-100: oklch(25.33% 0.016 252.42);
- --ar-dark-base-200: oklch(23.26% 0.014 253.1);
- --ar-dark-base-300: oklch(21.15% 0.012 254.09);
- --ar-dark-base-content: oklch(97.807% 0.029 256.847);
- --ar-dark-primary: oklch(58% 0.233 277.117);
- --ar-dark-primary-content: oklch(96% 0.018 272.314);
- --ar-dark-secondary: oklch(65% 0.241 354.308);
- --ar-dark-secondary-content: oklch(94% 0.028 342.258);
- --ar-dark-accent: oklch(77% 0.152 181.912);
- --ar-dark-accent-content: oklch(38% 0.063 188.416);
- --ar-dark-neutral: oklch(14% 0.005 285.823);
- --ar-dark-neutral-content: oklch(92% 0.004 286.32);
- --ar-dark-info: oklch(74% 0.16 232.661);
- --ar-dark-info-content: oklch(29% 0.066 243.157);
- --ar-dark-success: oklch(76% 0.177 163.223);
- --ar-dark-success-content: oklch(37% 0.077 168.94);
- --ar-dark-warning: oklch(82% 0.189 84.429);
- --ar-dark-warning-content: oklch(41% 0.112 45.904);
- --ar-dark-error: oklch(71% 0.194 13.428);
- --ar-dark-error-content: oklch(27% 0.105 12.094);
- --ar-dark-bg-img-fill: rgb(152 159 171 / 0.3);
- --ar-dark-desc-grad: linear-gradient(
-   to left,
-   var(--ar-dark-base-200) 50%,
-   #fafafa 50%
-  )
-  right;
- --ar-dark-arc: #333333;
- --ar-dark-gray-50: #1a1a1a;
- --ar-dark-gray-100: #262626;
- --ar-dark-gray-200: #333333;
- --ar-dark-gray-300: #444444;
- --ar-dark-gray-400: #999999;
- --ar-dark-gray-500: #aaaaaa;
- --ar-dark-gray-600: #bbbbbb;
- --ar-dark-gray-700: #cccccc;
- --ar-dark-gray-800: #dddddd;
- --ar-dark-gray-900: #eeeeee;
- --ar-dark-base-content-80: oklch(97.807% 0.029 256.847 / 0.8);
-
- /* --------------------------------------------------------
-     NEOBRUTALISM palette — single source of truth.
-     Referenced by html[data-theme="neo"] below.
-     -------------------------------------------------------- */
- --ar-neo-base-100: #ffffff;
- --ar-neo-base-200: #f8f8f8;
- --ar-neo-base-300: #e8e8e8;
- --ar-neo-base-content: #1e293b;
- --ar-neo-base-content-80: rgb(30 41 59 / 0.8);
- --ar-neo-primary: #00aeef;
- --ar-neo-primary-content: #ffffff;
- --ar-neo-secondary: #8bc53f;
- --ar-neo-secondary-content: #ffffff;
- --ar-neo-accent: #ffd100;
- --ar-neo-accent-content: #1e293b;
- --ar-neo-neutral: #1e293b;
- --ar-neo-neutral-content: #ffffff;
- --ar-neo-info: #00aeef;
- --ar-neo-info-content: #ffffff;
- --ar-neo-success: #8bc53f;
- --ar-neo-success-content: #ffffff;
- --ar-neo-warning: #ffd100;
- --ar-neo-warning-content: #1e293b;
- --ar-neo-error: #e4002b;
- --ar-neo-error-content: #ffffff;
- --ar-neo-bg-img-fill: #1e293b;
- --ar-neo-desc-grad: linear-gradient(to left, #f8f8f8 50%, #1e293b 50%) right;
- --ar-neo-arc: #ffffff;
- --ar-neo-gray-50: #f8f8f8;
- --ar-neo-gray-100: #f0f0f0;
- --ar-neo-gray-200: #e0e0e0;
- --ar-neo-gray-300: #cccccc;
- --ar-neo-gray-400: #999999;
- --ar-neo-gray-500: #777777;
- --ar-neo-gray-600: #555555;
- --ar-neo-gray-700: #333333;
- --ar-neo-gray-800: #222222;
- --ar-neo-gray-900: #111111;
-
- /* Neobrutalism-specific tokens */
- --ar-neo-border-width: 3px;
- --ar-neo-border-color: #1e293b;
- --ar-neo-shadow-sm: 2px 2px 0px 0px #1e293b;
- --ar-neo-shadow-md: 4px 4px 0px 0px #1e293b;
- --ar-neo-shadow-lg: 6px 6px 0px 0px #1e293b;
- --ar-neo-shadow-xl: 8px 8px 0px 0px #1e293b;
- --ar-neo-shadow-2xl: 12px 12px 0px 0px #1e293b;
-}
-
-html[data-theme="light"] {
- color-scheme: light;
- --ar-base-100: oklch(100% 0 0);
- --ar-base-200: oklch(97% 0 0);
- --ar-base-300: oklch(94% 0 0);
- --ar-base-content: oklch(0% 0 0);
- --ar-base-content-80: oklch(0% 0 0 / 0.8);
- --ar-primary: oklch(15.906% 0 0);
- --ar-primary-content: oklch(100% 0 0);
- --ar-secondary: oklch(21.455% 0.001 17.278);
- --ar-secondary-content: oklch(100% 0 0);
- --ar-accent: oklch(26.861% 0 0);
- --ar-accent-content: oklch(100% 0 0);
- --ar-neutral: oklch(0% 0 0);
- --ar-neutral-content: oklch(100% 0 0);
- --ar-info: oklch(79.54% 0.103 205.9);
- --ar-info-content: oklch(15.908% 0.02 205.9);
- --ar-success: oklch(90.13% 0.153 164.14);
- --ar-success-content: oklch(18.026% 0.03 164.14);
- --ar-warning: oklch(88.37% 0.135 79.94);
- --ar-warning-content: oklch(17.674% 0.027 79.94);
- --ar-error: oklch(78.66% 0.15 28.47);
- --ar-error-content: oklch(15.732% 0.03 28.47);
- --ar-bg-img-fill: transparent;
- --ar-desc-grad: linear-gradient(
-   to left,
-   var(--ar-base-200) 50%,
-   var(--ar-neutral) 50%
-  )
-  right;
- --ar-arc: #fafafa;
-}
-
-html[data-theme="dark"] {
- color-scheme: dark;
- --ar-base-100: var(--ar-dark-base-100);
- --ar-base-200: var(--ar-dark-base-200);
- --ar-base-300: var(--ar-dark-base-300);
- --ar-base-content: var(--ar-dark-base-content);
- --ar-base-content-80: var(--ar-dark-base-content-80);
- --ar-primary: var(--ar-dark-primary);
- --ar-primary-content: var(--ar-dark-primary-content);
- --ar-secondary: var(--ar-dark-secondary);
- --ar-secondary-content: var(--ar-dark-secondary-content);
- --ar-accent: var(--ar-dark-accent);
- --ar-accent-content: var(--ar-dark-accent-content);
- --ar-neutral: var(--ar-dark-neutral);
- --ar-neutral-content: var(--ar-dark-neutral-content);
- --ar-info: var(--ar-dark-info);
- --ar-info-content: var(--ar-dark-info-content);
- --ar-success: var(--ar-dark-success);
- --ar-success-content: var(--ar-dark-success-content);
- --ar-warning: var(--ar-dark-warning);
- --ar-warning-content: var(--ar-dark-warning-content);
- --ar-error: var(--ar-dark-error);
- --ar-error-content: var(--ar-dark-error-content);
- --ar-bg-img-fill: var(--ar-dark-bg-img-fill);
- --ar-desc-grad: var(--ar-dark-desc-grad);
- --ar-arc: var(--ar-dark-arc);
- --ar-gray-50: var(--ar-dark-gray-50);
- --ar-gray-100: var(--ar-dark-gray-100);
- --ar-gray-200: var(--ar-dark-gray-200);
- --ar-gray-300: var(--ar-dark-gray-300);
- --ar-gray-400: var(--ar-dark-gray-400);
- --ar-gray-500: var(--ar-dark-gray-500);
- --ar-gray-600: var(--ar-dark-gray-600);
- --ar-gray-700: var(--ar-dark-gray-700);
- --ar-gray-800: var(--ar-dark-gray-800);
- --ar-gray-900: var(--ar-dark-gray-900);
-}
-
-@media (prefers-color-scheme: dark) {
- html:not([data-theme]) {
-  color-scheme: dark;
-  --ar-base-100: var(--ar-dark-base-100);
-  --ar-base-200: var(--ar-dark-base-200);
-  --ar-base-300: var(--ar-dark-base-300);
-  --ar-base-content: var(--ar-dark-base-content);
-  --ar-base-content-80: var(--ar-dark-base-content-80);
-  --ar-primary: var(--ar-dark-primary);
-  --ar-primary-content: var(--ar-dark-primary-content);
-  --ar-secondary: var(--ar-dark-secondary);
-  --ar-secondary-content: var(--ar-dark-secondary-content);
-  --ar-accent: var(--ar-dark-accent);
-  --ar-accent-content: var(--ar-dark-accent-content);
-  --ar-neutral: var(--ar-dark-neutral);
-  --ar-neutral-content: var(--ar-dark-neutral-content);
-  --ar-info: var(--ar-dark-info);
-  --ar-info-content: var(--ar-dark-info-content);
-  --ar-success: var(--ar-dark-success);
-  --ar-success-content: var(--ar-dark-success-content);
-  --ar-warning: var(--ar-dark-warning);
-  --ar-warning-content: var(--ar-dark-warning-content);
-  --ar-error: var(--ar-dark-error);
-  --ar-error-content: var(--ar-dark-error-content);
-  --ar-bg-img-fill: var(--ar-dark-bg-img-fill);
-  --ar-desc-grad: var(--ar-dark-desc-grad);
-  --ar-arc: var(--ar-dark-arc);
-  --ar-gray-50: var(--ar-dark-gray-50);
-  --ar-gray-100: var(--ar-dark-gray-100);
-  --ar-gray-200: var(--ar-dark-gray-200);
-  --ar-gray-300: var(--ar-dark-gray-300);
-  --ar-gray-400: var(--ar-dark-gray-400);
-  --ar-gray-500: var(--ar-dark-gray-500);
-  --ar-gray-600: var(--ar-dark-gray-600);
-  --ar-gray-700: var(--ar-dark-gray-700);
-  --ar-gray-800: var(--ar-dark-gray-800);
-  --ar-gray-900: var(--ar-dark-gray-900);
- }
-}
-
-html[data-theme="neo"] {
- color-scheme: light;
- --ar-base-100: var(--ar-neo-base-100);
- --ar-base-200: var(--ar-neo-base-200);
- --ar-base-300: var(--ar-neo-base-300);
- --ar-base-content: var(--ar-neo-base-content);
- --ar-base-content-80: var(--ar-neo-base-content-80);
- --ar-primary: var(--ar-neo-primary);
- --ar-primary-content: var(--ar-neo-primary-content);
- --ar-secondary: var(--ar-neo-secondary);
- --ar-secondary-content: var(--ar-neo-secondary-content);
- --ar-accent: var(--ar-neo-accent);
- --ar-accent-content: var(--ar-neo-accent-content);
- --ar-neutral: var(--ar-neo-neutral);
- --ar-neutral-content: var(--ar-neo-neutral-content);
- --ar-info: var(--ar-neo-info);
- --ar-info-content: var(--ar-neo-info-content);
- --ar-success: var(--ar-neo-success);
- --ar-success-content: var(--ar-neo-success-content);
- --ar-warning: var(--ar-neo-warning);
- --ar-warning-content: var(--ar-neo-warning-content);
- --ar-error: var(--ar-neo-error);
- --ar-error-content: var(--ar-neo-error-content);
- --ar-bg-img-fill: var(--ar-neo-bg-img-fill);
- --ar-desc-grad: var(--ar-neo-desc-grad);
- --ar-arc: var(--ar-neo-arc);
- --ar-gray-50: var(--ar-neo-gray-50);
- --ar-gray-100: var(--ar-neo-gray-100);
- --ar-gray-200: var(--ar-neo-gray-200);
- --ar-gray-300: var(--ar-neo-gray-300);
- --ar-gray-400: var(--ar-neo-gray-400);
- --ar-gray-500: var(--ar-neo-gray-500);
- --ar-gray-600: var(--ar-neo-gray-600);
- --ar-gray-700: var(--ar-neo-gray-700);
- --ar-gray-800: var(--ar-neo-gray-800);
- --ar-gray-900: var(--ar-neo-gray-900);
- /* Override design tokens for neobrutalism */
- --ar-border-width: var(--ar-neo-border-width);
- --ar-radius-field: 0.5rem;
- --ar-radius-box: 0.75rem;
- --ar-shadow-sm: var(--ar-neo-shadow-sm);
- --ar-shadow-md: var(--ar-neo-shadow-md);
- --ar-shadow-lg: var(--ar-neo-shadow-lg);
- --ar-shadow-xl: var(--ar-neo-shadow-xl);
- --ar-shadow-2xl: var(--ar-neo-shadow-2xl);
- --ar-base-font: var(--ar-font-sans);
+:root {
+ --ar-font-sans:
+  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+  sans-serif;
+ --ar-font-serif: "IM Fell English", Georgia, "Times New Roman", serif;
+ --ar-font-mono:
+  ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, "Courier New",
+  monospace;
+ --ar-base-font: var(--ar-font-serif);
+
+ --ar-s-0: 0;
+ --ar-s-1: 0.25rem;
+ --ar-s-2: 0.5rem;
+ --ar-s-3: 0.75rem;
+ --ar-s-4: 1rem;
+ --ar-s-5: 1.25rem;
+ --ar-s-6: 1.5rem;
+ --ar-s-8: 2rem;
+ --ar-s-10: 2.5rem;
+ --ar-s-12: 3rem;
+ --ar-s-16: 4rem;
+ --ar-s-20: 5rem;
+ --ar-s-24: 6rem;
+ --ar-s-32: 8rem;
+ --ar-s-40: 10rem;
+ --ar-s-48: 12rem;
+ --ar-s-60: 15rem;
+ --ar-s-80: 20rem;
+
+ --ar-radius-field: 0.25rem;
+ --ar-radius-box: 0.5rem;
+ --ar-radius-selector: 2rem;
+ --ar-radius-pill: 9999px;
+
+ --ar-border-width: 1px;
+
+ --ar-nav-h: 4.5rem;
+
+ --ar-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+ --ar-shadow-md:
+  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ --ar-shadow-lg:
+  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+ --ar-shadow-xl:
+  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+ --ar-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+ --ar-texture: url("assets/img/grunge-wall-texture-freepick-kues1.webp");
+
+ --ar-gray-50: #fafafa;
+ --ar-gray-100: #f5f5f5;
+ --ar-gray-200: #e5e5e5;
+ --ar-gray-300: #d4d4d4;
+ --ar-gray-400: #a3a3a3;
+ --ar-gray-500: #737373;
+ --ar-gray-600: #525252;
+ --ar-gray-700: #404040;
+ --ar-gray-800: #262626;
+ --ar-gray-900: #171717;
 }

package/src/components/accordion.css

@@ -1,34 +1,33 @@
-/* ACCORDION */
-.ar-accordion {
- border: var(--ar-border-width) solid var(--ar-base-300);
- border-radius: var(--ar-radius-box);
- overflow: hidden;
-}
-.ar-accordion details {
- border-top: var(--ar-border-width) solid var(--ar-base-300);
-}
-.ar-accordion details:first-child {
- border-top: 0;
-}
-.ar-accordion summary {
- list-style: none;
- cursor: pointer;
- padding: 1rem;
- font-weight: 600;
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-.ar-accordion summary::-webkit-details-marker {
- display: none;
-}
-.ar-accordion summary::after {
- content: "+";
- font-size: 1.25rem;
-}
-.ar-accordion details[open] summary::after {
- content: "\2212";
-}
-.ar-accordion .ar-accordion-body {
- padding: 0 1rem 1rem;
+.ar-accordion {
+ border: var(--ar-border-width) solid var(--ar-base-300);
+ border-radius: var(--ar-radius-box);
+ overflow: hidden;
+}
+.ar-accordion details {
+ border-top: var(--ar-border-width) solid var(--ar-base-300);
+}
+.ar-accordion details:first-child {
+ border-top: 0;
+}
+.ar-accordion summary {
+ list-style: none;
+ cursor: pointer;
+ padding: 1rem;
+ font-weight: 600;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.ar-accordion summary::-webkit-details-marker {
+ display: none;
+}
+.ar-accordion summary::after {
+ content: "+";
+ font-size: 1.25rem;
+}
+.ar-accordion details[open] summary::after {
+ content: "\2212";
+}
+.ar-accordion .ar-accordion-body {
+ padding: 0 1rem 1rem;
 }

package/src/components/alert.css

@@ -1,26 +1,25 @@
-/* ALERT */
-.ar-alert {
- display: flex;
- align-items: center;
- gap: var(--ar-s-3);
- border-radius: var(--ar-radius-box);
- padding: var(--ar-s-4);
- background: var(--ar-base-200);
- color: var(--ar-base-content);
-}
-.ar-alert-info {
- background: var(--ar-info);
- color: var(--ar-info-content);
-}
-.ar-alert-success {
- background: var(--ar-success);
- color: var(--ar-success-content);
-}
-.ar-alert-warning {
- background: var(--ar-warning);
- color: var(--ar-warning-content);
-}
-.ar-alert-error {
- background: var(--ar-error);
- color: var(--ar-error-content);
+.ar-alert {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-3);
+ border-radius: var(--ar-radius-box);
+ padding: var(--ar-s-4);
+ background: var(--ar-base-200);
+ color: var(--ar-base-content);
+}
+.ar-alert-info {
+ background: var(--ar-info);
+ color: var(--ar-info-content);
+}
+.ar-alert-success {
+ background: var(--ar-success);
+ color: var(--ar-success-content);
+}
+.ar-alert-warning {
+ background: var(--ar-warning);
+ color: var(--ar-warning-content);
+}
+.ar-alert-error {
+ background: var(--ar-error);
+ color: var(--ar-error-content);
 }

package/src/components/badge.css

@@ -1,33 +1,32 @@
-/* BADGE */
-.ar-badge {
- display: inline-flex;
- align-items: center;
- gap: var(--ar-s-1);
- border-radius: var(--ar-radius-selector);
- padding: 0.125rem 0.625rem;
- font-size: 0.75rem;
- font-weight: 600;
- line-height: 1.5;
- background: var(--ar-base-200);
- color: var(--ar-base-content);
-}
-.ar-badge-outline {
- background: transparent;
- border: var(--ar-border-width) solid var(--ar-base-content);
-}
-.ar-badge-primary {
- background: var(--ar-primary);
- color: var(--ar-primary-content);
-}
-.ar-badge-neutral {
- background: var(--ar-neutral);
- color: var(--ar-neutral-content);
-}
-.ar-badge-sm {
- font-size: 0.625rem;
- padding: 0 0.5rem;
-}
-.ar-badge-xs {
- font-size: 0.55rem;
- padding: 0 0.375rem;
+.ar-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--ar-s-1);
+ border-radius: var(--ar-radius-selector);
+ padding: 0.125rem 0.625rem;
+ font-size: 0.75rem;
+ font-weight: 600;
+ line-height: 1.5;
+ background: var(--ar-base-200);
+ color: var(--ar-base-content);
+}
+.ar-badge-outline {
+ background: transparent;
+ border: var(--ar-border-width) solid var(--ar-base-content);
+}
+.ar-badge-primary {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+}
+.ar-badge-neutral {
+ background: var(--ar-neutral);
+ color: var(--ar-neutral-content);
+}
+.ar-badge-sm {
+ font-size: 0.625rem;
+ padding: 0 0.5rem;
+}
+.ar-badge-xs {
+ font-size: 0.55rem;
+ padding: 0 0.375rem;
 }

package/src/components/breadcrumb.css

@@ -1,33 +1,32 @@
-/* BREADCRUMB */
-.ar-breadcrumb {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- gap: var(--ar-s-1);
- list-style: none;
- margin: 0;
- padding: 0;
- font-size: 0.875rem;
-}
-.ar-breadcrumb-item {
- display: flex;
- align-items: center;
- gap: var(--ar-s-1);
-}
-.ar-breadcrumb-item a {
- color: var(--ar-gray-600);
- text-decoration: none;
- transition: color 0.2s ease;
-}
-.ar-breadcrumb-item a:hover {
- color: var(--ar-primary);
-}
-.ar-breadcrumb-item:not(:last-child)::after {
- content: "/";
- color: var(--ar-gray-400);
- margin-left: var(--ar-s-1);
-}
-.ar-breadcrumb-item:last-child {
- color: var(--ar-base-content);
- font-weight: 600;
+.ar-breadcrumb {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: var(--ar-s-1);
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ font-size: 0.875rem;
+}
+.ar-breadcrumb-item {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-1);
+}
+.ar-breadcrumb-item a {
+ color: var(--ar-gray-600);
+ text-decoration: none;
+ transition: color 0.2s ease;
+}
+.ar-breadcrumb-item a:hover {
+ color: var(--ar-primary-text);
+}
+.ar-breadcrumb-item:not(:last-child)::after {
+ content: "/";
+ color: var(--ar-gray-400);
+ margin-left: var(--ar-s-1);
+}
+.ar-breadcrumb-item:last-child {
+ color: var(--ar-base-content);
+ font-weight: 600;
 }