arekui 1.0.0

package/src/base/reset.css

@@ -0,0 +1,67 @@
+/* BASE / RESET */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: var(--ar-base-font);
+ background: var(--ar-base-100);
+ color: var(--ar-base-content);
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 0;
+ line-height: 1.2;
+}
+
+p {
+ margin: 0;
+}
+
+a {
+ color: var(--ar-primary);
+ text-decoration: none;
+}
+
+img,
+svg,
+video,
+canvas {
+ max-width: 100%;
+ height: auto;
+ display: block;
+}
+
+button,
+input,
+select,
+textarea {
+ font: inherit;
+}
+
+pre,
+code {
+ white-space: pre-wrap;
+ word-break: break-word;
+ overflow-x: auto;
+ font-family: var(--ar-font-mono);
+}
+
+:focus-visible {
+ outline: 2px solid var(--ar-primary);
+ outline-offset: 2px;
+}
+
+.ar-scroll-smooth {
+ scroll-behavior: smooth;
+}

package/src/base/tokens.css

@@ -0,0 +1,304 @@
+/* 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);
+}

package/src/components/accordion.css

@@ -0,0 +1,34 @@
+/* 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;
+}

package/src/components/alert.css

@@ -0,0 +1,26 @@
+/* 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);
+}

package/src/components/badge.css

@@ -0,0 +1,33 @@
+/* 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;
+}

package/src/components/breadcrumb.css

@@ -0,0 +1,33 @@
+/* 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;
+}

package/src/components/button.css

@@ -0,0 +1,103 @@
+/* BUTTONS */
+.ar-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--ar-s-2);
+ border: var(--ar-border-width) solid transparent;
+ border-radius: var(--ar-radius-field);
+ padding: 0.5rem 1rem;
+ font-family: var(--ar-font-sans);
+ font-size: 0.875rem;
+ font-weight: 600;
+ line-height: 1.25;
+ cursor: pointer;
+ background: var(--ar-base-200);
+ color: var(--ar-base-content);
+ text-decoration: none;
+ transition: all 0.2s ease-out;
+}
+.ar-btn:hover {
+ background: var(--ar-base-300);
+}
+.ar-btn:active {
+ transform: scale(0.97);
+}
+.ar-btn-primary {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+}
+.ar-btn-primary:hover {
+ background: var(--ar-neutral);
+}
+.ar-btn-outline {
+ background: transparent;
+ border-color: var(--ar-base-content);
+ color: var(--ar-base-content);
+}
+.ar-btn-outline:hover {
+ background: var(--ar-base-content);
+ color: var(--ar-base-100);
+}
+.ar-btn-ghost {
+ background: transparent;
+ color: var(--ar-base-content);
+}
+.ar-btn-ghost:hover {
+ background: var(--ar-base-200);
+}
+.ar-btn-neutral {
+ background: var(--ar-neutral);
+ color: var(--ar-neutral-content);
+}
+.ar-btn-neutral:hover {
+ opacity: 0.85;
+}
+.ar-btn-base-200 {
+ background: var(--ar-base-200);
+ color: var(--ar-base-content);
+}
+.ar-btn-circle {
+ border-radius: var(--ar-radius-pill);
+ padding: 0.5rem;
+ width: 2.5rem;
+ height: 2.5rem;
+}
+.ar-btn-xs {
+ font-size: 0.7rem;
+ padding: 0.25rem 0.5rem;
+}
+.ar-btn-sm {
+ font-size: 0.8rem;
+ padding: 0.375rem 0.75rem;
+}
+.ar-btn-lg {
+ font-size: 1.125rem;
+ padding: 0.75rem 1.5rem;
+}
+.ar-btn-block {
+ display: flex;
+ width: 100%;
+}
+.ar-btn-disabled,
+.ar-btn[disabled] {
+ opacity: 0.5;
+ pointer-events: none;
+}
+.ar-btn-loading {
+ pointer-events: none;
+}
+.ar-btn-loading::after {
+ content: "";
+ width: 1rem;
+ height: 1rem;
+ border: 2px solid currentColor;
+ border-right-color: transparent;
+ border-radius: var(--ar-radius-pill);
+ animation: ar-spin 0.7s linear infinite;
+}
+@keyframes ar-spin {
+ to {
+  transform: rotate(360deg);
+ }
+}

package/src/components/card.css

@@ -0,0 +1,24 @@
+/* CARD */
+.ar-card {
+ display: flex;
+ flex-direction: column;
+ background: var(--ar-base-100);
+ border-radius: var(--ar-radius-box);
+ box-shadow: var(--ar-shadow-md);
+ overflow: hidden;
+}
+.ar-card-body {
+ display: flex;
+ flex-direction: column;
+ gap: var(--ar-s-2);
+ padding: var(--ar-s-4);
+}
+.ar-card-title {
+ font-size: 1.125rem;
+ font-weight: 700;
+ line-height: 1.3;
+}
+.ar-card-figure img {
+ width: 100%;
+ object-fit: cover;
+}

package/src/components/carousel.css

@@ -0,0 +1,14 @@
+/* CAROUSEL */
+.ar-carousel {
+ display: flex;
+ overflow-x: auto;
+ scroll-snap-type: x mandatory;
+}
+.ar-carousel-item {
+ flex: none;
+ width: 100%;
+ scroll-snap-align: start;
+}
+.ar-carousel-item img {
+ width: 100%;
+}