jet_ui 0.2.4

data/app/assets/stylesheets/jet_ui/pagy.css

@@ -0,0 +1,54 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .pagy {
+    @apply inline-flex;
+
+    a:not(.gap) {
+      @apply relative flex items-center justify-center size-8 text-muted-foreground border border-border;
+
+      &:first-child {
+        @apply text-transparent;
+        border-top-left-radius: var(--radius-btn-md);
+        border-bottom-left-radius: var(--radius-btn-md);
+      }
+
+      &:last-child {
+        @apply text-transparent;
+        border-top-right-radius: var(--radius-btn-md);
+        border-bottom-right-radius: var(--radius-btn-md);
+      }
+
+      &:hover {
+        @apply bg-muted;
+      }
+
+      &:not(:last-child) {
+        @apply border-r-0;
+      }
+
+      &:first-child::before,
+      &:last-child::before {
+        @apply absolute size-4 content-[''] text-muted-foreground;
+        background-color: currentColor;
+        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5 8.25 12l7.5-7.5'/%3E%3C/svg%3E");
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: 100%;
+      }
+
+      &:last-child::before {
+        transform: rotate(180deg);
+      }
+
+      &:not([href]) {
+        @apply relative inline-flex items-center h-8 px-2 cursor-not-allowed bg-transparent;
+      }
+
+      &.current {
+        @apply relative z-10 flex items-center justify-center cursor-default size-8;
+        @apply bg-(--color-accent) border-(--color-accent) text-(--color-accent-foreground);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/jet_ui/popover.css

@@ -0,0 +1,51 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  [data-controller~="popover"] {
+    position: relative;
+    width: fit-content;
+  }
+
+  .popover {
+    @apply absolute z-10 w-64 text-sm shadow-sm;
+    @apply text-muted-foreground bg-popover border border-border rounded-dropdown;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+  }
+
+  .popover--visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .popover::after {
+    @apply absolute rotate-45 size-2.5 bg-popover border border-border;
+    content: "";
+  }
+
+  .popover[data-placement^="top"]::after {
+    @apply bottom-0 -translate-x-1/2 translate-y-1/2 border-t-0 border-l-0 left-1/2;
+  }
+
+  .popover[data-placement^="bottom"]::after {
+    @apply top-0 -translate-x-1/2 -translate-y-1/2 border-b-0 border-r-0 left-1/2 bg-muted;
+  }
+
+  .popover[data-placement^="left"]::after {
+    @apply right-0 translate-x-1/2 -translate-y-1/2 border-b-0 border-l-0 top-1/2;
+  }
+
+  .popover[data-placement^="right"]::after {
+    @apply left-0 -translate-x-1/2 -translate-y-1/2 border-t-0 border-r-0 top-1/2;
+  }
+
+  .popover__title {
+    @apply px-3 py-3 font-semibold text-foreground bg-muted border-b border-border;
+    @apply rounded-tl-dropdown rounded-tr-dropdown;
+  }
+
+  .popover__body {
+    @apply p-3;
+  }
+}

data/app/assets/stylesheets/jet_ui/sidebar.css

@@ -0,0 +1,35 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .sidebar {
+    @apply flex flex-col gap-y-8 overflow-y-auto text-sm;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+
+  .sidebar__section {
+    @apply flex flex-col gap-3;
+  }
+
+  .sidebar__title {
+    @apply flex items-center justify-between gap-2 font-semibold text-foreground;
+  }
+
+  .sidebar__menu {
+    @apply flex flex-col gap-1;
+  }
+
+  .sidebar__link {
+    @apply block px-3 py-1.5 font-medium text-muted-foreground rounded-btn-md;
+    @apply hover:text-foreground;
+  }
+
+  .sidebar__link-active {
+    @apply font-semibold bg-muted text-foreground;
+  }
+
+  .sidebar__link-disabled {
+    @apply cursor-not-allowed font-normal text-muted-foreground;
+    @apply hover:text-muted-foreground;
+  }
+}

data/app/assets/stylesheets/jet_ui/stat.css

@@ -0,0 +1,23 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .stat {
+    @apply border border-border rounded-card p-6;
+  }
+
+  .stat__label {
+    @apply text-sm font-medium text-muted-foreground;
+  }
+
+  .stat__value {
+    @apply text-2xl font-bold text-foreground mt-1;
+  }
+
+  .stat__description {
+    @apply text-sm mt-2 flex items-center gap-1 text-muted-foreground;
+  }
+
+  .stat__description--success { @apply text-success; }
+  .stat__description--warning { @apply text-warning; }
+  .stat__description--error   { @apply text-destructive; }
+}

data/app/assets/stylesheets/jet_ui/stepper.css

@@ -0,0 +1,82 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .stepper {
+    @apply w-full;
+  }
+
+  .stepper__list {
+    @apply flex items-start list-none p-0 m-0;
+  }
+
+  .stepper__item {
+    @apply relative flex-1 flex flex-col items-center text-center;
+  }
+
+  .stepper__item:not(:last-child)::after {
+    content: "";
+    @apply absolute top-5 left-[calc(50%+1rem)] right-[calc(-50%+1rem)] h-0.5 z-0 bg-border;
+  }
+
+  .stepper__item-completed:not(:last-child)::after {
+    @apply bg-(--color-accent);
+  }
+
+  .stepper__indicator {
+    @apply relative z-10 flex items-center justify-center w-10 h-10 rounded-full border-2;
+    @apply bg-(--color-surface) border-border text-muted-foreground;
+  }
+
+  .stepper__item-current .stepper__indicator {
+    @apply bg-(--color-accent) border-(--color-accent) text-(--color-accent-foreground);
+  }
+
+  .stepper__item-completed .stepper__indicator {
+    @apply bg-(--color-accent) border-(--color-accent) text-(--color-accent-foreground);
+  }
+
+  .stepper__icon {
+    @apply size-5;
+  }
+
+  .stepper__number {
+    @apply text-sm font-semibold;
+  }
+
+  .stepper__dot {
+    @apply size-2.5 rounded-full bg-current;
+  }
+
+  .stepper__content {
+    @apply mt-3 flex flex-col gap-0.5;
+  }
+
+  .stepper__title {
+    @apply text-sm font-medium;
+  }
+
+  .stepper__item-pending .stepper__title {
+    @apply text-muted-foreground;
+  }
+
+  .stepper__item-current .stepper__title,
+  .stepper__item-completed .stepper__title {
+    @apply text-foreground;
+  }
+
+  .stepper__description {
+    @apply text-xs text-muted-foreground;
+  }
+
+  .stepper__link {
+    @apply relative z-10 flex flex-col items-center no-underline transition-opacity hover:opacity-80;
+  }
+
+  .stepper__item-has-url:not(.stepper__item-pending) {
+    @apply cursor-pointer;
+  }
+
+  .stepper__item-has-url.stepper__item-pending {
+    @apply cursor-not-allowed;
+  }
+}

data/app/assets/stylesheets/jet_ui/table.css

@@ -0,0 +1,68 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .scroller {
+    @apply w-full overflow-auto;
+  }
+
+  .scroller-x {
+    @apply overflow-x-auto;
+  }
+
+  .table {
+    @apply w-auto;
+
+    thead {
+      @apply bg-(--color-surface);
+    }
+
+    th, td {
+      @apply px-3 py-2 text-sm border-b border-border;
+    }
+
+    th {
+      @apply font-semibold text-left text-foreground;
+    }
+
+    tfoot {
+      @apply font-semibold bg-muted;
+    }
+  }
+
+  .table-full {
+    @apply min-w-full;
+  }
+
+  .table-hovered {
+    tbody tr:hover td,
+    thead tr:hover th {
+      @apply bg-muted;
+    }
+  }
+
+  .table-bordered {
+    th, td {
+      @apply border border-border;
+    }
+  }
+
+  .table__th_sticky {
+    @apply sticky z-10 bg-(--color-surface) hover:bg-muted;
+  }
+
+  .table__th_sticky-left  { @apply left-0 text-left; }
+  .table__th_sticky-right { @apply right-0 text-right; }
+
+  .table__td_sticky       { @apply sticky bg-(--color-surface); }
+  .table__td_sticky-left  { @apply left-0 text-left; }
+  .table__td_sticky-right { @apply right-0 text-right; }
+
+  .table-xs { th, td { @apply px-2 py-2 text-xs; } }
+  .table-sm { th, td { @apply px-3 py-2 text-sm; } }
+  .table-md { th, td { @apply px-3 py-2.5 text-sm; } }
+  .table-lg { th, td { @apply px-4 py-4 text-base; } }
+
+  .table__actions {
+    @apply w-0 text-right;
+  }
+}

data/app/assets/stylesheets/jet_ui/tabs.css

@@ -0,0 +1,32 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .tabs__list {
+    @apply inline-flex gap-1 p-1 text-sm list-none bg-muted rounded-(--radius-btn-md);
+  }
+
+  .tabs__link {
+    @apply inline-flex items-center gap-2 px-3 py-1.5 font-medium transition-colors;
+    @apply text-muted-foreground rounded-(--radius-btn-md);
+    @apply hover:text-foreground;
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-(--color-ring);
+  }
+
+  .tabs__link--active {
+    @apply shadow-sm text-foreground bg-(--color-surface);
+  }
+
+  /* Underline variant */
+  .tabs--underline .tabs__list {
+    @apply w-full gap-6 p-0 bg-transparent rounded-none border-b border-(--color-border);
+  }
+
+  .tabs--underline .tabs__link {
+    @apply px-0 py-4 rounded-none -mb-px border-b-2 border-transparent;
+    @apply hover:text-foreground hover:border-(--color-border);
+  }
+
+  .tabs--underline .tabs__link--active {
+    @apply bg-transparent shadow-none text-(--color-accent) border-(--color-accent);
+  }
+}

data/app/assets/stylesheets/jet_ui/theme.css

@@ -0,0 +1,174 @@
+@layer base {
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+  }
+
+  @keyframes slideUp {
+    from { opacity: 0.7; transform: translateY(2rem); }
+    to   { opacity: 1;   transform: translateY(0); }
+  }
+
+  @keyframes slideLeft {
+    from { opacity: 0.8; transform: translateX(3rem); }
+    to   { opacity: 1;   transform: translateX(0); }
+  }
+}
+
+:root {
+  --accent-hue: 262;
+  --accent-chroma: 0.245;
+  --accent-lightness: 0.55;
+  --gray-chroma: 0.006;
+}
+
+@theme {
+  /* Layout */
+  --height-navbar: 54px;
+  --width-sidebar: 220px;
+  --spacing-navbar: var(--height-navbar);
+  --spacing-sidebar: var(--width-sidebar);
+
+  /* Animations */
+  --animate-fade-in: fadeIn 0.15s ease-in-out;
+  --animate-slide-up: slideUp 0.3s ease-in-out;
+  --animate-slide-left: slideLeft 0.3s ease-in-out;
+
+  /* Radius */
+  --radius-btn-xs: calc(var(--radius-md) * 0.75);
+  --radius-btn-sm: calc(var(--radius-md) * 1);
+  --radius-btn-md: calc(var(--radius-md) * 1.125);
+  --radius-btn-lg: calc(var(--radius-md) * 1.25);
+  --radius-card: calc(var(--radius-md) * 1.5);
+  --radius-modal: calc(var(--radius-md) * 1.5);
+  --radius-dropdown: calc(var(--radius-md) * 1.5);
+  --radius-field: var(--radius-md);
+  --radius-tooltip: var(--radius-sm);
+
+  /* Dynamic Gray */
+  --color-gray-50:  oklch(0.985 var(--gray-chroma) var(--accent-hue));
+  --color-gray-100: oklch(0.967 var(--gray-chroma) var(--accent-hue));
+  --color-gray-200: oklch(0.928 var(--gray-chroma) var(--accent-hue));
+  --color-gray-300: oklch(0.872 var(--gray-chroma) var(--accent-hue));
+  --color-gray-400: oklch(0.707 var(--gray-chroma) var(--accent-hue));
+  --color-gray-500: oklch(0.551 var(--gray-chroma) var(--accent-hue));
+  --color-gray-600: oklch(0.446 var(--gray-chroma) var(--accent-hue));
+  --color-gray-700: oklch(0.373 var(--gray-chroma) var(--accent-hue));
+  --color-gray-800: oklch(0.278 var(--gray-chroma) var(--accent-hue));
+  --color-gray-900: oklch(0.21  var(--gray-chroma) var(--accent-hue));
+  --color-gray-950: oklch(0.13  var(--gray-chroma) var(--accent-hue));
+
+  /* Card / Popover (semantic surface tokens) */
+  --color-card:             var(--color-surface);
+  --color-card-foreground:  var(--color-surface-foreground);
+  --color-popover:          var(--color-surface);
+  --color-popover-foreground: var(--color-surface-foreground);
+
+  /* Layout */
+  --color-background:         var(--color-gray-50);
+  --color-foreground:         var(--color-gray-900);
+  --color-surface:            oklch(1 0 0);
+  --color-surface-foreground: var(--color-gray-900);
+  --color-overlay:            oklch(0.21 var(--gray-chroma) var(--accent-hue) / 0.5);
+
+  /* Accent */
+  --color-accent:          oklch(var(--accent-lightness) var(--accent-chroma) var(--accent-hue));
+  --color-accent-hover:    oklch(calc(var(--accent-lightness) - 0.06) var(--accent-chroma) var(--accent-hue));
+  --color-accent-active:   oklch(calc(var(--accent-lightness) - 0.12) var(--accent-chroma) var(--accent-hue));
+  --color-accent-foreground: oklch(1 0 0);
+
+  /* Muted */
+  --color-muted:            oklch(0.97 var(--gray-chroma) var(--accent-hue));
+  --color-muted-hover:      oklch(0.94 var(--gray-chroma) var(--accent-hue));
+  --color-muted-foreground: var(--color-gray-500);
+
+  /* Border & Input */
+  --color-border:       var(--color-gray-200);
+  --color-input:        var(--color-gray-300);
+  --color-input-focus:  oklch(0.809 0.105 var(--accent-hue));
+  --color-ring:         oklch(0.882 0.059 var(--accent-hue) / 0.5);
+
+  /* Destructive */
+  --color-destructive:                    var(--color-red-600);
+  --color-destructive-hover:              var(--color-red-700);
+  --color-destructive-foreground:         oklch(1 0 0);
+  --color-destructive-soft:               var(--color-red-50);
+  --color-destructive-soft-foreground:    var(--color-red-800);
+  --color-destructive-border:             var(--color-red-200);
+
+  /* Success */
+  --color-success:                  var(--color-green-600);
+  --color-success-hover:            var(--color-green-700);
+  --color-success-foreground:       oklch(1 0 0);
+  --color-success-soft:             var(--color-green-50);
+  --color-success-soft-foreground:  var(--color-green-800);
+  --color-success-border:           var(--color-green-200);
+
+  /* Warning */
+  --color-warning:                  var(--color-yellow-500);
+  --color-warning-hover:            var(--color-yellow-600);
+  --color-warning-foreground:       oklch(1 0 0);
+  --color-warning-soft:             var(--color-yellow-50);
+  --color-warning-soft-foreground:  var(--color-yellow-800);
+  --color-warning-border:           var(--color-yellow-200);
+
+  /* Info */
+  --color-info:                   var(--color-blue-600);
+  --color-info-hover:             var(--color-blue-700);
+  --color-info-foreground:         oklch(1 0 0);
+  --color-info-soft:               var(--color-blue-50);
+  --color-info-soft-foreground:    var(--color-blue-800);
+  --color-info-border:             var(--color-blue-200);
+
+  /* Link */
+  --color-link:       var(--color-accent);
+  --color-link-hover: var(--color-accent-hover);
+}
+
+.dark {
+  --dark-chroma: calc(var(--gray-chroma) * 6);
+
+  --color-background:         oklch(0.13 var(--dark-chroma) var(--accent-hue));
+  --color-foreground:         oklch(0.85 var(--dark-chroma) var(--accent-hue));
+  --color-surface:            oklch(0.17 var(--dark-chroma) var(--accent-hue));
+  --color-surface-foreground: oklch(0.95 var(--dark-chroma) var(--accent-hue));
+  --color-overlay:            oklch(0 0 0 / 0.7);
+
+  --color-accent:           oklch(calc(var(--accent-lightness) - 0.15) calc(var(--accent-chroma) * 0.55) var(--accent-hue));
+  --color-accent-hover:     oklch(calc(var(--accent-lightness) - 0.1)  calc(var(--accent-chroma) * 0.6)  var(--accent-hue));
+  --color-accent-active:    oklch(calc(var(--accent-lightness) - 0.2)  calc(var(--accent-chroma) * 0.5)  var(--accent-hue));
+  --color-accent-foreground: oklch(1 0 0);
+
+  --color-muted:            oklch(0.2  var(--dark-chroma) var(--accent-hue));
+  --color-muted-hover:      oklch(0.24 var(--dark-chroma) var(--accent-hue));
+  --color-muted-foreground: oklch(0.6  var(--dark-chroma) var(--accent-hue));
+
+  --color-border:      oklch(0.28 var(--dark-chroma) var(--accent-hue));
+  --color-input:       oklch(0.32 var(--dark-chroma) var(--accent-hue));
+  --color-input-focus: oklch(0.55 0.15 var(--accent-hue));
+  --color-ring:        oklch(0.5  0.12 var(--accent-hue) / 0.35);
+
+  --color-destructive:            oklch(0.5  0.12 25);
+  --color-destructive-hover:      oklch(0.55 0.14 25);
+  --color-destructive-foreground: oklch(1 0 0);
+  --color-destructive-soft:       oklch(0.2  0.04 25);
+  --color-destructive-border:     oklch(0.35 0.08 25);
+
+  --color-success:            oklch(0.7  0.19 145);
+  --color-success-hover:      oklch(0.75 0.2  145);
+  --color-success-foreground: oklch(0.15 0.04 145);
+  --color-success-soft:       oklch(0.2  0.035 145);
+  --color-success-border:     oklch(0.35 0.07  145);
+
+  --color-warning:            oklch(0.8  0.16 85);
+  --color-warning-hover:      oklch(0.85 0.17 85);
+  --color-warning-foreground: oklch(0.2  0.04 85);
+  --color-warning-soft:       oklch(0.22 0.035 85);
+  --color-warning-border:     oklch(0.38 0.07  85);
+
+  --color-info:            oklch(0.7  0.16 240);
+  --color-info-hover:      oklch(0.75 0.18 240);
+  --color-info-foreground: oklch(1 0 0);
+  --color-info-soft:       oklch(0.2  0.04 240);
+  --color-info-border:     oklch(0.35 0.08 240);
+}

data/app/assets/stylesheets/jet_ui/timeline.css

@@ -0,0 +1,45 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .timeline {
+    @apply relative flex flex-col;
+  }
+
+  .timeline-item {
+    @apply relative flex gap-4 pb-8;
+  }
+
+  .timeline-item:last-child {
+    @apply pb-0;
+  }
+
+  .timeline-item:not(:last-child)::before {
+    content: "";
+    @apply absolute left-[11px] top-6 bottom-0 w-0.5 bg-border;
+  }
+
+  .timeline-dot {
+    @apply relative z-10 flex-shrink-0 size-6 rounded-full border-2 flex items-center justify-center;
+  }
+
+  .timeline-dot-default { @apply bg-muted border-border; }
+  .timeline-dot-info    { @apply bg-info-soft border-info; }
+  .timeline-dot-success { @apply bg-success-soft border-success; }
+  .timeline-dot-warning { @apply bg-warning-soft border-warning; }
+  .timeline-dot-error   { @apply bg-destructive-soft border-destructive; }
+
+  .timeline-dot-icon { @apply size-6; }
+  .timeline-dot-icon.timeline-dot-default { @apply text-muted-foreground; }
+  .timeline-dot-icon.timeline-dot-info    { @apply text-info; }
+  .timeline-dot-icon.timeline-dot-success { @apply text-success; }
+  .timeline-dot-icon.timeline-dot-warning { @apply text-warning; }
+  .timeline-dot-icon.timeline-dot-error   { @apply text-destructive; }
+
+  .timeline-content {
+    @apply flex-1 pt-0.5;
+  }
+
+  .timeline-time {
+    @apply block text-sm mb-1 text-muted-foreground;
+  }
+}

data/app/assets/stylesheets/jet_ui/tooltip.css

@@ -0,0 +1,33 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .tooltip {
+    --tooltip-bg: var(--color-gray-900);
+
+    @apply absolute z-20 px-3 py-2 text-xs text-center shadow-sm pointer-events-none;
+    @apply text-white rounded-tooltip;
+    background-color: var(--tooltip-bg);
+  }
+
+  .tooltip::after {
+    @apply absolute rotate-45 size-2;
+    background-color: var(--tooltip-bg);
+    content: "";
+  }
+
+  .tooltip[data-placement^="top"]::after {
+    @apply bottom-0 -translate-x-1/2 translate-y-1/2 left-1/2;
+  }
+
+  .tooltip[data-placement^="bottom"]::after {
+    @apply top-0 -translate-x-1/2 -translate-y-1/2 left-1/2;
+  }
+
+  .tooltip[data-placement^="left"]::after {
+    @apply right-0 translate-x-1/2 -translate-y-1/2 top-1/2;
+  }
+
+  .tooltip[data-placement^="right"]::after {
+    @apply left-0 -translate-x-1/2 -translate-y-1/2 top-1/2;
+  }
+}

data/app/assets/stylesheets/jet_ui.css

@@ -0,0 +1,28 @@
+@import "./jet_ui/theme.css";
+@import "./jet_ui/icon.css";
+@import "./jet_ui/avatar.css";
+@import "./jet_ui/breadcrumbs.css";
+@import "./jet_ui/btn.css";
+@import "./jet_ui/card.css";
+@import "./jet_ui/badge.css";
+@import "./jet_ui/alert.css";
+@import "./jet_ui/group.css";
+@import "./jet_ui/stat.css";
+@import "./jet_ui/tabs.css";
+@import "./jet_ui/empty.css";
+@import "./jet_ui/list.css";
+@import "./jet_ui/divider.css";
+@import "./jet_ui/timeline.css";
+@import "./jet_ui/stepper.css";
+@import "./jet_ui/table.css";
+@import "./jet_ui/pagy.css";
+@import "./jet_ui/flash.css";
+@import "./jet_ui/accordion.css";
+@import "./jet_ui/sidebar.css";
+@import "./jet_ui/header.css";
+@import "./jet_ui/navbar.css";
+@import "./jet_ui/modal.css";
+@import "./jet_ui/drawer.css";
+@import "./jet_ui/dropdown.css";
+@import "./jet_ui/tooltip.css";
+@import "./jet_ui/popover.css";

data/app/components/jet_ui/accordion/body_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Accordion
+    class BodyComponent < JetUi::BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :div, content, class: classes, **@options.except(:class)
+      end
+
+      private
+
+      def classes
+        class_names('accordion__body', @options[:class])
+      end
+    end
+  end
+end

data/app/components/jet_ui/accordion/component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Accordion
+    class Component < JetUi::BaseComponent
+      def initialize(name: nil, open: false, **options)
+        @name = name
+        @open = open
+        @options = options
+      end
+
+      def call
+        content_tag :details, content, class: classes, name: @name, open: @open,
+                                       **@options.except(:class)
+      end
+
+      private
+
+      def classes
+        class_names('accordion', @options[:class])
+      end
+    end
+  end
+end