atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/components/accordion/accordion.css

@@ -26,7 +26,7 @@
 /* Accordion Container */
 .accordion-container {
   width: 100%;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--accordion-border-color, #e5e7eb);
   border-radius: 8px;
   overflow: hidden;
   background-color: var(--accordion-bg, white);
@@ -38,7 +38,7 @@
   display: flex;
   gap: 8px;
   padding: 16px 20px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--accordion-border-color, #e5e7eb);
   background-color: #f9fafb;
   flex-wrap: wrap;
 }
@@ -85,7 +85,7 @@
 
 /* Accordion Item */
 .accordion-item {
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--accordion-border-color, #e5e7eb);
 }
 
 .accordion-item:last-child {
@@ -280,7 +280,8 @@
   align-items: center;
   justify-content: center;
   opacity: 0.7;
-  pointer-events: none; /* Let the click through to the button */
+  pointer-events: none;
+  /* Let the click through to the button */
 }
 
 .accordion-header:hover .accordion-arrow {
@@ -303,7 +304,7 @@
   max-height: 0;
   opacity: 0;
   transition: max-height var(--animation-duration, 300ms) var(--animation-timing, ease), opacity var(--animation-duration, 300ms) var(--animation-timing, ease);
-  background-color: #f9fafb;
+  background-color: var(--accordion-content-bg, #f9fafb);
   /* Kinetic Physics Variants */
 }
 .accordion-content.accordion-physics-bouncy {
@@ -773,9 +774,10 @@
   background: transparent;
 }
 .accordion-headline .accordion-content-inner {
-  padding: 0 0 40px 0;
+  padding: 24px 0 40px 0;
+  border-top: 1px dashed var(--border-default, #e5e7eb);
   font-size: var(--hl-subtitle-size, 16px);
-  color: #4b5563;
+  color: var(--text-secondary, #4b5563);
   line-height: 1.6;
   text-align: left;
 }
@@ -1456,7 +1458,7 @@
   position: absolute;
   font-size: 8px;
   font-weight: 700;
-  color: #1f2937;
+  color: var(--progress-text);
   letter-spacing: -0.02em;
 }
 
@@ -2087,4 +2089,569 @@
   transform-origin: top center;
 }
 
-/* ── End Sovereign Finale ─────────────────────────────────────────────── */
+/* ── Premium Accordion Variants ─────────────────────────────────────────── */
+/* 1. Boxed Variant Style (Image 1) */
+.accordion-container.accordion-boxed {
+  border: none;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: visible;
+}
+.accordion-container.accordion-boxed .accordion-item {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 20px;
+  background: #252627;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  margin-bottom: 0;
+  overflow: hidden;
+}
+.accordion-container.accordion-boxed .accordion-item:hover:not(.accordion-item-disabled) {
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+  transform: translateY(-2px);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+.accordion-container.accordion-boxed .accordion-item-open {
+  border-color: rgba(235, 255, 0, 0.4);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+}
+.accordion-container.accordion-boxed .accordion-header {
+  background: transparent;
+  padding: 20px 24px;
+  color: #ffffff;
+}
+.accordion-container.accordion-boxed .accordion-header::part(button) {
+  padding: 20px 24px !important;
+}
+.accordion-container.accordion-boxed .accordion-title {
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: 700;
+}
+.accordion-container.accordion-boxed .accordion-subtitle {
+  color: #a0a5ad;
+}
+.accordion-container.accordion-boxed .accordion-arrow-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background-color: #ebff00;
+  color: #121314;
+  box-shadow: 0 0 10px rgba(235, 255, 0, 0.3);
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+.accordion-container.accordion-boxed .accordion-arrow-wrapper .accordion-arrow {
+  color: #121314;
+  opacity: 1;
+  font-weight: 800;
+  transition: transform 0.3s ease;
+}
+.accordion-container.accordion-boxed .accordion-item:hover .accordion-arrow-wrapper {
+  transform: scale(1.1);
+  box-shadow: 0 0 15px rgba(235, 255, 0, 0.6);
+}
+.accordion-container.accordion-boxed .accordion-content {
+  background: #1e1f20;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+.accordion-container.accordion-boxed .accordion-content-inner {
+  color: #e2e8f0;
+  padding: 20px 24px;
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+/* 2. Minimal Variant Style (Image 2) */
+.accordion-container.accordion-minimal {
+  border: none;
+  background: transparent;
+}
+.accordion-container.accordion-minimal .accordion-item {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  margin-bottom: 0;
+}
+.accordion-container.accordion-minimal .accordion-item:last-child {
+  border-bottom: none;
+}
+.accordion-container.accordion-minimal .accordion-header {
+  padding: 20px 0;
+  background: transparent;
+  color: #1e293b;
+}
+.accordion-container.accordion-minimal .accordion-header:hover {
+  color: var(--selected-header-color, #10b981);
+}
+.accordion-container.accordion-minimal .accordion-title {
+  color: inherit;
+  font-size: 16px;
+  font-weight: 600;
+  transition: color 0.2s ease;
+}
+.accordion-container.accordion-minimal .accordion-subtitle {
+  color: #64748b;
+  margin-top: 4px;
+}
+.accordion-container.accordion-minimal .accordion-arrow {
+  color: #64748b;
+  opacity: 0.7;
+  font-size: 14px;
+}
+.accordion-container.accordion-minimal .accordion-item-open .accordion-header {
+  background-color: transparent !important;
+  color: var(--selected-header-color, #10b981);
+}
+.accordion-container.accordion-minimal .accordion-content {
+  background: transparent;
+}
+.accordion-container.accordion-minimal .accordion-content-inner {
+  padding: 0 0 20px 0;
+  color: #475569;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+/* 3. Left-Toggle Style (Image 3) */
+.accordion-container.accordion-left-toggle {
+  border: none;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.accordion-container.accordion-left-toggle .accordion-item {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  margin-bottom: 0;
+}
+.accordion-container.accordion-left-toggle .accordion-item:last-child {
+  border-bottom: none;
+}
+.accordion-container.accordion-left-toggle .accordion-header {
+  padding: 16px 0;
+  background: transparent;
+  color: #0f172a;
+}
+.accordion-container.accordion-left-toggle .accordion-title {
+  color: #0f172a;
+  font-size: 16px;
+  font-weight: 600;
+}
+.accordion-container.accordion-left-toggle .accordion-subtitle {
+  color: #64748b;
+}
+.accordion-container.accordion-left-toggle .accordion-arrow-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background-color: #0f172a;
+  color: #ffffff;
+  transition: all 0.2s ease;
+  margin-right: 12px;
+  flex-shrink: 0;
+  order: -1;
+}
+.accordion-container.accordion-left-toggle .accordion-arrow-wrapper .accordion-arrow {
+  color: #ffffff;
+  opacity: 1;
+  font-size: 11px;
+}
+.accordion-container.accordion-left-toggle .accordion-item:hover .accordion-arrow-wrapper {
+  background-color: var(--selected-header-color, #10b981);
+  transform: scale(1.08);
+}
+.accordion-container.accordion-left-toggle .accordion-item-open .accordion-arrow-wrapper {
+  background-color: #0f172a;
+}
+.accordion-container.accordion-left-toggle .accordion-content {
+  background: transparent;
+}
+.accordion-container.accordion-left-toggle .accordion-content-inner {
+  padding: 8px 0 20px 40px;
+  color: #475569;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+/* 4. Iconic & Rich Media Style (Image 4) */
+.accordion-container.accordion-iconic {
+  border: none;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.accordion-container.accordion-iconic .accordion-item {
+  border: 1px solid #f1f5f9;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  transition: all 0.25s ease;
+  overflow: hidden;
+}
+.accordion-container.accordion-iconic .accordion-item:hover:not(.accordion-item-disabled) {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border-color: #e2e8f0;
+}
+.accordion-container.accordion-iconic .accordion-header {
+  padding: 20px 24px;
+  background: transparent;
+}
+.accordion-container.accordion-iconic .accordion-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #1e293b;
+}
+.accordion-container.accordion-iconic .accordion-subtitle {
+  color: #64748b;
+  font-size: 13px;
+}
+.accordion-container.accordion-iconic .accordion-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 46px;
+  height: 46px;
+  border-radius: 12px;
+  font-size: 22px;
+  margin-right: 16px;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+  background-color: rgba(99, 102, 241, 0.1);
+  color: #6366f1;
+}
+.accordion-container.accordion-iconic .accordion-item:hover .accordion-icon {
+  transform: scale(1.05);
+}
+.accordion-container.accordion-iconic .accordion-arrow-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background-color: #f8fafc;
+  border: 1px solid #e2e8f0;
+  color: #64748b;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+.accordion-container.accordion-iconic .accordion-arrow-wrapper .accordion-arrow {
+  color: #64748b;
+  opacity: 0.8;
+  font-size: 11px;
+}
+.accordion-container.accordion-iconic .accordion-item:hover .accordion-arrow-wrapper {
+  background-color: #6366f1;
+  border-color: #6366f1;
+  color: #ffffff;
+}
+.accordion-container.accordion-iconic .accordion-item:hover .accordion-arrow-wrapper .accordion-arrow {
+  color: #ffffff;
+  opacity: 1;
+}
+.accordion-container.accordion-iconic .accordion-content {
+  background: #f8fafc;
+  border-top: 1px solid #f1f5f9;
+}
+.accordion-container.accordion-iconic .accordion-content-inner {
+  padding: 24px;
+  color: #334155;
+  font-size: 14px;
+  line-height: 1.6;
+}
+.accordion-container.accordion-iconic .accordion-item:nth-child(1) .accordion-icon {
+  background-color: rgba(99, 102, 241, 0.1);
+  color: #6366f1;
+}
+.accordion-container.accordion-iconic .accordion-item:nth-child(2) .accordion-icon {
+  background-color: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+.accordion-container.accordion-iconic .accordion-item:nth-child(3) .accordion-icon {
+  background-color: rgba(16, 185, 129, 0.1);
+  color: #10b981;
+}
+.accordion-container.accordion-iconic .accordion-item:nth-child(4) .accordion-icon {
+  background-color: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+}
+
+/* ── End Sovereign Finale ─────────────────────────────────────────────── */
+/* ── Dark Mode ─────────────────────────────────────────────── */
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Main Container */
+}
+:host-context(.dark) .accordion-container,
+:host-context([data-theme=dark]) .accordion-container,
+:host(.dark) .accordion-container,
+:host([data-theme=dark]) .accordion-container {
+  background-color: var(--accordion-bg, #1e293b);
+  border-color: var(--accordion-border-color, #334155);
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Search Input Wrapper */
+}
+:host-context(.dark) .accordion-search,
+:host-context([data-theme=dark]) .accordion-search,
+:host(.dark) .accordion-search,
+:host([data-theme=dark]) .accordion-search {
+  background-color: #0f172a;
+  border-bottom-color: #334155;
+}
+:host-context(.dark) .accordion-search-clear:hover,
+:host-context([data-theme=dark]) .accordion-search-clear:hover,
+:host(.dark) .accordion-search-clear:hover,
+:host([data-theme=dark]) .accordion-search-clear:hover {
+  background-color: #334155;
+  color: #f8fafc;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Indicators */
+}
+:host-context(.dark) .accordion-indicators,
+:host-context([data-theme=dark]) .accordion-indicators,
+:host(.dark) .accordion-indicators,
+:host([data-theme=dark]) .accordion-indicators {
+  background-color: #0f172a;
+  border-color: #334155;
+}
+:host-context(.dark) .accordion-indicator,
+:host-context([data-theme=dark]) .accordion-indicator,
+:host(.dark) .accordion-indicator,
+:host([data-theme=dark]) .accordion-indicator {
+  background-color: #1e293b;
+  border-color: #475569;
+  color: #94a3b8;
+}
+:host-context(.dark) .accordion-indicator:hover:not(.accordion-indicator-disabled),
+:host-context([data-theme=dark]) .accordion-indicator:hover:not(.accordion-indicator-disabled),
+:host(.dark) .accordion-indicator:hover:not(.accordion-indicator-disabled),
+:host([data-theme=dark]) .accordion-indicator:hover:not(.accordion-indicator-disabled) {
+  background-color: rgba(16, 185, 129, 0.15);
+}
+:host-context(.dark) .accordion-indicator-active,
+:host-context([data-theme=dark]) .accordion-indicator-active,
+:host(.dark) .accordion-indicator-active,
+:host([data-theme=dark]) .accordion-indicator-active {
+  background-color: rgba(16, 185, 129, 0.15);
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Items & Headers */
+}
+:host-context(.dark) .accordion-item,
+:host-context([data-theme=dark]) .accordion-item,
+:host(.dark) .accordion-item,
+:host([data-theme=dark]) .accordion-item {
+  border-color: var(--accordion-border-color, #334155);
+}
+:host-context(.dark) .accordion-header,
+:host-context([data-theme=dark]) .accordion-header,
+:host(.dark) .accordion-header,
+:host([data-theme=dark]) .accordion-header {
+  color: #f8fafc;
+}
+:host-context(.dark) .accordion-item-open .accordion-header,
+:host-context([data-theme=dark]) .accordion-item-open .accordion-header,
+:host(.dark) .accordion-item-open .accordion-header,
+:host([data-theme=dark]) .accordion-item-open .accordion-header {
+  background-color: rgba(16, 185, 129, 0.1);
+}
+:host-context(.dark) .accordion-header:active:not(.accordion-header-disabled),
+:host-context([data-theme=dark]) .accordion-header:active:not(.accordion-header-disabled),
+:host(.dark) .accordion-header:active:not(.accordion-header-disabled),
+:host([data-theme=dark]) .accordion-header:active:not(.accordion-header-disabled) {
+  background-color: #334155;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Typography */
+}
+:host-context(.dark) .accordion-title,
+:host-context([data-theme=dark]) .accordion-title,
+:host(.dark) .accordion-title,
+:host([data-theme=dark]) .accordion-title {
+  color: #f8fafc;
+}
+:host-context(.dark) .accordion-subtitle,
+:host-context([data-theme=dark]) .accordion-subtitle,
+:host(.dark) .accordion-subtitle,
+:host([data-theme=dark]) .accordion-subtitle {
+  color: #94a3b8;
+}
+:host-context(.dark) .accordion-icon,
+:host-context([data-theme=dark]) .accordion-icon,
+:host(.dark) .accordion-icon,
+:host([data-theme=dark]) .accordion-icon {
+  color: #94a3b8;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Content */
+}
+:host-context(.dark) .accordion-content,
+:host-context([data-theme=dark]) .accordion-content,
+:host(.dark) .accordion-content,
+:host([data-theme=dark]) .accordion-content {
+  background-color: var(--accordion-content-bg, #0f172a);
+}
+:host-context(.dark) .accordion-content-inner,
+:host-context([data-theme=dark]) .accordion-content-inner,
+:host(.dark) .accordion-content-inner,
+:host([data-theme=dark]) .accordion-content-inner {
+  color: #cbd5e1;
+}
+:host-context(.dark),
+:host-context([data-theme=dark]),
+:host(.dark),
+:host([data-theme=dark]) {
+  /* Variant Specific Overrides */
+}
+:host-context(.dark) .accordion-container.accordion-splitted .accordion-item,
+:host-context([data-theme=dark]) .accordion-container.accordion-splitted .accordion-item,
+:host(.dark) .accordion-container.accordion-splitted .accordion-item,
+:host([data-theme=dark]) .accordion-container.accordion-splitted .accordion-item {
+  background: #1e293b;
+  border-color: #334155;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+:host-context(.dark) .accordion-container.accordion-card-list .accordion-item,
+:host-context(.dark) .accordion-container.accordion-card .accordion-item,
+:host-context([data-theme=dark]) .accordion-container.accordion-card-list .accordion-item,
+:host-context([data-theme=dark]) .accordion-container.accordion-card .accordion-item,
+:host(.dark) .accordion-container.accordion-card-list .accordion-item,
+:host(.dark) .accordion-container.accordion-card .accordion-item,
+:host([data-theme=dark]) .accordion-container.accordion-card-list .accordion-item,
+:host([data-theme=dark]) .accordion-container.accordion-card .accordion-item {
+  background: #1e293b;
+  border-color: #334155;
+}
+:host-context(.dark) .accordion-container.accordion-card-list .accordion-title,
+:host-context(.dark) .accordion-container.accordion-card .accordion-title,
+:host-context([data-theme=dark]) .accordion-container.accordion-card-list .accordion-title,
+:host-context([data-theme=dark]) .accordion-container.accordion-card .accordion-title,
+:host(.dark) .accordion-container.accordion-card-list .accordion-title,
+:host(.dark) .accordion-container.accordion-card .accordion-title,
+:host([data-theme=dark]) .accordion-container.accordion-card-list .accordion-title,
+:host([data-theme=dark]) .accordion-container.accordion-card .accordion-title {
+  color: #f8fafc;
+}
+:host-context(.dark) .accordion-container.accordion-card-list .accordion-subtitle,
+:host-context(.dark) .accordion-container.accordion-card .accordion-subtitle,
+:host-context([data-theme=dark]) .accordion-container.accordion-card-list .accordion-subtitle,
+:host-context([data-theme=dark]) .accordion-container.accordion-card .accordion-subtitle,
+:host(.dark) .accordion-container.accordion-card-list .accordion-subtitle,
+:host(.dark) .accordion-container.accordion-card .accordion-subtitle,
+:host([data-theme=dark]) .accordion-container.accordion-card-list .accordion-subtitle,
+:host([data-theme=dark]) .accordion-container.accordion-card .accordion-subtitle {
+  color: #94a3b8;
+}
+:host-context(.dark) .accordion-container.accordion-card-list .accordion-content,
+:host-context(.dark) .accordion-container.accordion-card .accordion-content,
+:host-context([data-theme=dark]) .accordion-container.accordion-card-list .accordion-content,
+:host-context([data-theme=dark]) .accordion-container.accordion-card .accordion-content,
+:host(.dark) .accordion-container.accordion-card-list .accordion-content,
+:host(.dark) .accordion-container.accordion-card .accordion-content,
+:host([data-theme=dark]) .accordion-container.accordion-card-list .accordion-content,
+:host([data-theme=dark]) .accordion-container.accordion-card .accordion-content {
+  background: #0f172a;
+  border-top-color: #334155;
+}
+:host-context(.dark) .accordion-container.accordion-headline .accordion-header,
+:host-context([data-theme=dark]) .accordion-container.accordion-headline .accordion-header,
+:host(.dark) .accordion-container.accordion-headline .accordion-header,
+:host([data-theme=dark]) .accordion-container.accordion-headline .accordion-header {
+  color: #f8fafc;
+}
+:host-context(.dark) .accordion-container.accordion-headline .accordion-title,
+:host-context([data-theme=dark]) .accordion-container.accordion-headline .accordion-title,
+:host(.dark) .accordion-container.accordion-headline .accordion-title,
+:host([data-theme=dark]) .accordion-container.accordion-headline .accordion-title {
+  color: #f8fafc !important;
+}
+:host-context(.dark) .accordion-container.accordion-headline .accordion-subtitle,
+:host-context([data-theme=dark]) .accordion-container.accordion-headline .accordion-subtitle,
+:host(.dark) .accordion-container.accordion-headline .accordion-subtitle,
+:host([data-theme=dark]) .accordion-container.accordion-headline .accordion-subtitle {
+  color: #94a3b8 !important;
+}
+:host-context(.dark) .accordion-container.accordion-iconic .accordion-item,
+:host-context([data-theme=dark]) .accordion-container.accordion-iconic .accordion-item,
+:host(.dark) .accordion-container.accordion-iconic .accordion-item,
+:host([data-theme=dark]) .accordion-container.accordion-iconic .accordion-item {
+  background: #1e293b;
+  border-color: #334155;
+}
+:host-context(.dark) .accordion-container.accordion-iconic .accordion-title,
+:host-context([data-theme=dark]) .accordion-container.accordion-iconic .accordion-title,
+:host(.dark) .accordion-container.accordion-iconic .accordion-title,
+:host([data-theme=dark]) .accordion-container.accordion-iconic .accordion-title {
+  color: #f8fafc;
+}
+:host-context(.dark) .accordion-container.accordion-iconic .accordion-subtitle,
+:host-context([data-theme=dark]) .accordion-container.accordion-iconic .accordion-subtitle,
+:host(.dark) .accordion-container.accordion-iconic .accordion-subtitle,
+:host([data-theme=dark]) .accordion-container.accordion-iconic .accordion-subtitle {
+  color: #94a3b8;
+}
+:host-context(.dark) .accordion-container.accordion-iconic .accordion-content,
+:host-context([data-theme=dark]) .accordion-container.accordion-iconic .accordion-content,
+:host(.dark) .accordion-container.accordion-iconic .accordion-content,
+:host([data-theme=dark]) .accordion-container.accordion-iconic .accordion-content {
+  background: #0f172a;
+  border-top-color: #334155;
+}
+:host-context(.dark) .accordion-container.accordion-minimal .accordion-header,
+:host-context([data-theme=dark]) .accordion-container.accordion-minimal .accordion-header,
+:host(.dark) .accordion-container.accordion-minimal .accordion-header,
+:host([data-theme=dark]) .accordion-container.accordion-minimal .accordion-header {
+  color: #f8fafc;
+}
+:host-context(.dark) .accordion-container.accordion-minimal .accordion-title,
+:host-context([data-theme=dark]) .accordion-container.accordion-minimal .accordion-title,
+:host(.dark) .accordion-container.accordion-minimal .accordion-title,
+:host([data-theme=dark]) .accordion-container.accordion-minimal .accordion-title {
+  color: #f8fafc;
+}
+:host-context(.dark) .accordion-container.accordion-minimal .accordion-arrow-wrapper,
+:host-context([data-theme=dark]) .accordion-container.accordion-minimal .accordion-arrow-wrapper,
+:host(.dark) .accordion-container.accordion-minimal .accordion-arrow-wrapper,
+:host([data-theme=dark]) .accordion-container.accordion-minimal .accordion-arrow-wrapper {
+  background-color: #334155;
+  border-color: #475569;
+}
+:host-context(.dark) .accordion-container.accordion-minimal .accordion-item-open .accordion-arrow-wrapper,
+:host-context([data-theme=dark]) .accordion-container.accordion-minimal .accordion-item-open .accordion-arrow-wrapper,
+:host(.dark) .accordion-container.accordion-minimal .accordion-item-open .accordion-arrow-wrapper,
+:host([data-theme=dark]) .accordion-container.accordion-minimal .accordion-item-open .accordion-arrow-wrapper {
+  background-color: #1e293b;
+}