@clusterenvision/ui-scss 1.94.3

package/src/components/containers/_accordion.scss

@@ -0,0 +1,65 @@
+// components/containers/_accordion.scss
+
+@use "../../abstracts/functions" as fn;
+
+.accordion,
+.ce-accordion {
+  border: 1px solid var(--theme-accordion-border, fn.color(muted));
+  border-radius: fn.radius(md);
+  overflow: hidden;
+
+  &__item {
+    border-bottom: 1px solid var(--theme-accordion-border, fn.color(muted));
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &__header {
+    padding: fn.space(md);
+    font-weight: 500;
+    cursor: pointer;
+    background-color: var(--theme-accordion-header-bg, fn.color(light));
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--theme-accordion-header-hover, rgba(0, 0, 0, 0.05));
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--theme-accent, var(--theme-primary));
+      outline-offset: 2px;
+    }
+
+    // Indicator arrow
+    &::after {
+      content: '▼';
+      font-size: 0.75rem;
+      transition: transform 0.2s ease;
+    }
+  }
+
+  &__item.is-open &__header::after {
+    transform: rotate(180deg);
+  }
+
+  &__content,
+  &__body {
+    padding: 0 fn.space(md) fn.space(md) fn.space(md);
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
+
+    &.is-open,
+    &.open {
+      max-height: 1000px;
+      opacity: 1;
+      padding-top: fn.space(sm);
+    }
+  }
+}

package/src/components/containers/_card.scss

@@ -0,0 +1,65 @@
+// components/containers/_card.scss
+
+@use "../../abstracts/functions" as fn;
+@use "../../abstracts/mixins" as mx;
+
+.card,
+.ce-card {
+  background-color: var(--ce-card-bg, var(--theme-bg, #{fn.color(white)}));
+  border-width: var(--ce-card-border-width, 1px);
+  border-style: var(--ce-card-border-style, solid);
+  border-color: var(--ce-card-border-color, var(--theme-border, #{fn.color(muted)}));
+  border-radius: var(--ce-card-radius, #{fn.radius(md)});
+  gap: var(--ce-card-gap, #{fn.space(md)});
+  box-shadow: var(--ce-card-shadow, #{fn.shadow(md)});
+  padding: var(--ce-card-padding, #{fn.space(lg)});
+  transition: box-shadow var(--ce-card-transition-shadow, 0.2s);
+  display: flex;
+  flex-direction: column;
+  color: var(--ce-card-color, inherit);
+
+  &:hover {
+    box-shadow: var(--ce-card-hover-shadow, #{fn.shadow(md)});
+  }
+
+  &__header {
+    font-weight: var(--ce-card-header-weight, 600);
+    font-size: var(--ce-card-header-size, 1.125rem);
+    margin-bottom: var(--ce-card-header-margin-bottom, #{fn.space(md)});
+    color: var(--ce-card-header-color, inherit);
+  }
+
+  &__body {
+    flex: 1;
+    color: var(--ce-card-body-color, inherit);
+  }
+
+  &__footer {
+    margin-top: var(--ce-card-footer-margin-top, #{fn.space(md)});
+    text-align: var(--ce-card-footer-align, right);
+    color: var(--ce-card-footer-color, inherit);
+  }
+
+  &--hover {
+    cursor: var(--ce-card-hover-cursor, pointer);
+
+    &:hover {
+      box-shadow: var(--ce-card-hover-shadow, #{fn.shadow(md)});
+    }
+
+    &:focus-visible {
+      outline-width: var(--ce-card-focus-outline-width, 2px);
+      outline-style: var(--ce-card-focus-outline-style, solid);
+      outline-color: var(--ce-card-focus-outline-color, var(--theme-accent, var(--theme-primary)));
+      outline-offset: var(--ce-card-focus-outline-offset, 2px);
+    }
+  }
+
+  &--borderless {
+    --ce-card-border-width: 0;
+  }
+
+  &--elevated {
+    --ce-card-shadow: #{fn.shadow(md)};
+  }
+}

package/src/components/containers/_drawer.scss

@@ -0,0 +1,48 @@
+// components/containers/_drawer.scss
+
+@use "../../abstracts/functions" as fn;
+
+.drawer {
+  position: fixed;
+  top: var(--ce-drawer-top, 0);
+  right: var(--ce-drawer-right, 0);
+  width: var(--ce-drawer-width, 300px);
+  max-width: var(--ce-drawer-max-width, 100%);
+  height: var(--ce-drawer-height, 100vh);
+  background-color: var(--ce-drawer-bg, #{fn.color(white)});
+  box-shadow: var(--ce-drawer-shadow, #{fn.shadow(lg)});
+  z-index: var(--ce-drawer-z, #{fn.z(modal)});
+  display: flex;
+  flex-direction: column;
+  animation: var(--ce-drawer-animation, slide-in)
+    var(--ce-drawer-animation-duration, 0.3s)
+    var(--ce-drawer-animation-ease, ease-in-out);
+
+  &__header {
+    padding: var(--ce-drawer-header-padding, #{fn.space(md)});
+    font-weight: var(--ce-drawer-header-weight, 600);
+    border-bottom-width: var(--ce-drawer-header-border-width, 1px);
+    border-bottom-style: var(--ce-drawer-header-border-style, solid);
+    border-bottom-color: var(
+      --ce-drawer-header-border-color,
+      #{fn.color(muted)}
+    );
+  }
+
+  &__body {
+    flex: 1;
+    overflow-y: var(--ce-drawer-body-overflow, auto);
+    padding: var(--ce-drawer-body-padding, #{fn.space(lg)});
+  }
+
+  &__footer {
+    padding: var(--ce-drawer-footer-padding, #{fn.space(md)});
+    border-top-width: var(--ce-drawer-footer-border-width, 1px);
+    border-top-style: var(--ce-drawer-footer-border-style, solid);
+    border-top-color: var(
+      --ce-drawer-footer-border-color,
+      #{fn.color(muted)}
+    );
+    text-align: var(--ce-drawer-footer-align, right);
+  }
+}

package/src/components/containers/_modal.scss

@@ -0,0 +1,78 @@
+@use "../../abstracts/functions" as fn;
+
+// Modal wrapper/overlay
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: fn.z(modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  // Glassmorphism enhancement
+  background-color: var(
+    --theme-modal-overlay,
+    rgba(fn.color(black), 0.4)
+  ); // semi-transparent
+  -webkit-backdrop-filter: blur(6px); // glass effect
+  backdrop-filter: blur(6px);
+  padding: fn.space(lg);
+
+  // Visibility toggle support
+  &.hidden {
+    display: none !important;
+  }
+
+  &__content {
+    background-color: var(--theme-modal-bg, rgba(fn.color(white), 0.06));
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
+    border-radius: fn.radius(md);
+    width: 100%;
+    max-width: 600px;
+    box-shadow: fn.shadow(lg);
+    overflow: hidden;
+    animation: fade-in 0.3s ease-in-out;
+    color: var(--theme-modal-fg, fn.color(white));
+  }
+
+  &__header {
+    padding: fn.space(md);
+    font-size: 1.25rem;
+    font-weight: 600;
+    border-bottom: 1px solid var(--theme-modal-border, fn.color(muted));
+  }
+
+  &__body {
+    padding: fn.space(lg);
+  }
+
+  &__footer {
+    padding: fn.space(md);
+    text-align: right;
+    border-top: 1px solid var(--theme-modal-border, fn.color(muted));
+  }
+
+  &__close {
+    position: absolute;
+    top: fn.space(sm);
+    right: fn.space(sm);
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: fn.color(muted);
+    cursor: pointer;
+
+    &:hover {
+      color: fn.color(danger);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--theme-accent, var(--theme-primary));
+      outline-offset: 2px;
+    }
+  }
+
+  .hidden {
+    display: none !important;
+  }
+}

package/src/components/containers/_panel.scss

@@ -0,0 +1,37 @@
+// components/containers/_panel.scss
+
+@use "../../abstracts/functions" as fn;
+
+.panel {
+  padding: fn.space(lg);
+  border-left: 4px solid fn.color(primary);
+  background-color: fn.color(light);
+  border-radius: fn.radius(sm);
+  box-shadow: fn.shadow(sm);
+  margin-bottom: fn.space(lg);
+
+  &--info {
+    border-color: fn.color(info);
+  }
+
+  &--success {
+    border-color: fn.color(success);
+  }
+
+  &--warning {
+    border-color: fn.color(warning);
+  }
+
+  &--danger {
+    border-color: fn.color(danger);
+  }
+
+  &__title {
+    font-weight: bold;
+    margin-bottom: fn.space(sm);
+  }
+
+  &__content {
+    font-size: 0.95rem;
+  }
+}

package/src/components/containers/_toast.scss

@@ -0,0 +1,40 @@
+// components/containers/_toast.scss
+
+@use "../../abstracts/functions" as fn;
+
+.toast {
+  position: var(--ce-toast-position, fixed);
+  bottom: var(--ce-toast-bottom, #{fn.space(lg)});
+  right: var(--ce-toast-right, #{fn.space(lg)});
+  background-color: var(--ce-toast-bg, #{fn.color(dark)});
+  color: var(--ce-toast-color, #{fn.color(white)});
+  padding: var(--ce-toast-padding, #{fn.space(md)});
+  border-radius: var(--ce-toast-radius, #{fn.radius(md)});
+  box-shadow: var(--ce-toast-shadow, #{fn.shadow(lg)});
+  z-index: var(--ce-toast-z, #{fn.z(toast)});
+  animation: var(--ce-toast-animation, fade-in 0.3s ease-in-out);
+  min-width: var(--ce-toast-min-width, 250px);
+
+  &--success { background-color: var(--ce-toast-success-bg, #{fn.color(success)}); }
+  &--error { background-color: var(--ce-toast-error-bg, #{fn.color(danger)}); }
+  &--info { background-color: var(--ce-toast-info-bg, #{fn.color(info)}); }
+
+  &__message {
+    font-size: var(--ce-toast-message-size, 0.95rem);
+  }
+
+  &__close {
+    position: var(--ce-toast-close-position, absolute);
+    top: var(--ce-toast-close-top, #{fn.space(xs)});
+    right: var(--ce-toast-close-right, #{fn.space(xs)});
+    background: var(--ce-toast-close-bg, none);
+    border: var(--ce-toast-close-border, none);
+    color: var(--ce-toast-close-color, #{fn.color(white)});
+    font-size: var(--ce-toast-close-size, 1.25rem);
+    cursor: var(--ce-toast-close-cursor, pointer);
+
+    &:hover {
+      opacity: var(--ce-toast-close-hover-opacity, 0.7);
+    }
+  }
+}

package/src/components/content/_avatar.scss

@@ -0,0 +1,56 @@
+// components/content/_avatar.scss
+
+@use "../../abstracts/functions" as fn;
+
+.avatar,
+.ce-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ce-avatar-size, 2.5rem);
+  height: var(--ce-avatar-size, 2.5rem);
+  border-radius: var(--ce-avatar-radius, 50%);
+  background-color: var(--ce-avatar-bg, var(--theme-avatar-bg, #{fn.color(muted)}));
+  color: var(--ce-avatar-color, var(--theme-avatar-fg, #{fn.color(white)}));
+  font-size: var(--ce-avatar-font-size, 1.25rem);
+  font-weight: var(--ce-avatar-weight, 600);
+  overflow: hidden;
+  position: relative;
+  border-width: var(--ce-avatar-border-width, 0);
+  border-style: var(--ce-avatar-border-style, solid);
+  border-color: var(--ce-avatar-border-color, transparent);
+  box-shadow: var(--ce-avatar-shadow, none);
+
+  &__img {
+    width: 100%;
+    height: 100%;
+    object-fit: var(--ce-avatar-image-fit, cover);
+    border-radius: inherit;
+    display: block;
+  }
+
+  &__status {
+    position: absolute;
+    bottom: var(--ce-avatar-status-offset, 0.15rem);
+    right: var(--ce-avatar-status-offset, 0.15rem);
+    width: var(--ce-avatar-status-size, 0.7rem);
+    height: var(--ce-avatar-status-size, 0.7rem);
+    border-radius: var(--ce-avatar-status-radius, 50%);
+    background-color: var(--ce-avatar-status-bg, var(--theme-avatar-status, #{fn.color(success)}));
+    border-width: var(--ce-avatar-status-border-width, 2px);
+    border-style: var(--ce-avatar-status-border-style, solid);
+    border-color: var(--ce-avatar-status-border-color, var(--theme-avatar-bg, #{fn.color(muted)}));
+  }
+
+  &--sm {
+    --ce-avatar-size: 1.5rem;
+    --ce-avatar-font-size: 0.75rem;
+  }
+  &--lg {
+    --ce-avatar-size: 4rem;
+    --ce-avatar-font-size: 2rem;
+  }
+  &--square {
+    --ce-avatar-radius: #{fn.radius(md)};
+  }
+}

package/src/components/content/_badge.scss

@@ -0,0 +1,42 @@
+// components/content/_badge.scss
+
+@use "../../abstracts/functions" as fn;
+
+.badge,
+.ce-badge {
+  display: inline-block;
+  padding: var(--ce-badge-padding, 0.25em 0.6em);
+  font-size: var(--ce-badge-size, 0.75rem);
+  border-radius: var(--ce-badge-radius, #{fn.radius(pill)});
+  font-weight: var(--ce-badge-weight, 600);
+  background-color: var(--ce-badge-bg, var(--theme-badge-bg, #{fn.color(muted)}));
+  color: var(--ce-badge-color, var(--theme-badge-fg, #{fn.color(white)}));
+  line-height: var(--ce-badge-line-height, 1);
+  border-width: var(--ce-badge-border-width, 0);
+  border-style: var(--ce-badge-border-style, solid);
+  border-color: var(--ce-badge-border-color, transparent);
+  box-shadow: var(--ce-badge-shadow, none);
+
+  &--primary {
+    --ce-badge-bg: var(--ce-badge-primary-bg, var(--theme-badge-primary, #{fn.color(primary)}));
+  }
+  &--success {
+    --ce-badge-bg: var(--ce-badge-success-bg, var(--theme-badge-success, #{fn.color(success)}));
+  }
+  &--danger {
+    --ce-badge-bg: var(--ce-badge-danger-bg, var(--theme-badge-danger, #{fn.color(danger)}));
+  }
+  &--warning {
+    --ce-badge-bg: var(--ce-badge-warning-bg, var(--theme-badge-warning, #{fn.color(warning)}));
+  }
+  &--info {
+    --ce-badge-bg: var(--ce-badge-info-bg, var(--theme-badge-info, #{fn.color(info)}));
+  }
+  &--light {
+    --ce-badge-bg: var(--ce-badge-light-bg, var(--theme-badge-light, #{fn.color(light)}));
+    --ce-badge-color: var(--ce-badge-light-color, var(--theme-badge-light-fg, #{fn.color(dark)}));
+  }
+  &--dark {
+    --ce-badge-bg: var(--ce-badge-dark-bg, var(--theme-badge-dark, #{fn.color(dark)}));
+  }
+}

package/src/components/content/_calendar.scss

@@ -0,0 +1,147 @@
+// components/content/_calendar.scss
+
+@use "../../abstracts/functions" as fn;
+
+// Calendar Component
+// - Themeable via CSS variables
+// - BEM naming convention
+// - Accessible: keyboard navigation, ARIA roles
+// - Supports range selection, disabled dates, today, events
+
+.calendar {
+  display: inline-block;
+  background: var(--ce-calendar-bg, #{fn.color(white)});
+  color: var(--ce-calendar-color, #{fn.color(neutral-ink)});
+  font-size: var(--ce-calendar-font-size, 1rem);
+  border: 1px solid var(--ce-calendar-border, #{fn.color(gray-200)});
+  border-radius: var(--ce-calendar-radius, #{fn.radius(md)});
+  box-shadow: var(--ce-calendar-shadow, #{fn.shadow(xs)});
+  padding: var(--ce-calendar-padding, #{fn.space(md)});
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--ce-calendar-header-gap, #{fn.space(xs)});
+    font-weight: 600;
+    color: var(--ce-calendar-header-color, #{fn.color(accent-blue)});
+    background: var(--ce-calendar-header-bg, #{fn.color(neutral-surface)});
+    border-radius: var(--ce-calendar-header-radius, #{fn.radius(sm)});
+    padding: var(--ce-calendar-header-padding, #{fn.space(sm)} #{fn.space(md)});
+  }
+
+  &__nav {
+    display: flex;
+    gap: var(--ce-calendar-nav-gap, #{fn.space(sm)});
+    button {
+      background: none;
+      border: none;
+      color: var(--ce-calendar-nav-color, #{fn.color(accent-blue)});
+      font-size: var(--ce-calendar-nav-size, 1.2em);
+      cursor: pointer;
+      border-radius: var(--ce-calendar-nav-radius, #{fn.radius(xs)});
+      padding: var(--ce-calendar-nav-padding, #{fn.space(xs)} #{fn.space(sm)});
+      transition: background 0.2s;
+      &:hover,
+      &:focus {
+        background: var(--ce-calendar-nav-hover, #{fn.color(accent-blue-soft)});
+      }
+      &:disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+    }
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: var(--ce-calendar-grid-gap, #{fn.space(xs)});
+    background: var(--ce-calendar-grid-bg, #{fn.color(white)});
+    border-radius: var(--ce-calendar-grid-radius, #{fn.radius(sm)});
+    padding: var(--ce-calendar-grid-padding, #{fn.space(sm)});
+  }
+
+  &__day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--ce-calendar-day-height, 2.2em);
+    font-size: 1em;
+    border-radius: var(--ce-calendar-day-radius, #{fn.radius(sm)});
+    cursor: pointer;
+    transition: background 0.2s, color 0.2s;
+    background: var(--ce-calendar-day-bg, #{fn.color(white)});
+    color: var(--ce-calendar-day-color, #{fn.color(neutral-ink)});
+    outline: none;
+    &:hover,
+    &:focus {
+      background: var(--ce-calendar-day-hover, #{fn.color(accent-blue-soft)});
+      color: var(--ce-calendar-day-hover-color, #{fn.color(accent-blue)});
+    }
+    &--today {
+      background: var(--ce-calendar-day-today-bg, #{fn.color(accent-blue-muted)});
+      color: var(--ce-calendar-day-today-color, #{fn.color(accent-blue)});
+      font-weight: 700;
+      box-shadow: 0 0 0 var(--ce-calendar-day-outline, 2px)
+        var(--ce-calendar-day-today-shadow, #{fn.color(accent-blue)});
+    }
+    &--selected {
+      background: var(--ce-calendar-day-selected-bg, #{fn.color(accent-blue)});
+      color: var(--ce-calendar-day-selected-color, #{fn.color(white)});
+      font-weight: 700;
+    }
+    &--range {
+      background: var(--ce-calendar-day-range-bg, #{fn.color(accent-blue-soft)});
+      color: var(--ce-calendar-day-range-color, #{fn.color(accent-blue)});
+    }
+    &--disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    &__event {
+      width: 0.5em;
+      height: 0.5em;
+      background: var(--ce-calendar-event-bg, #{fn.color(accent-rose)});
+      border-radius: var(--ce-calendar-event-radius, var(--ce-radius-circle, 50%));
+      margin-left: 0.3em;
+      display: inline-block;
+    }
+  }
+}
+
+// Accessibility notes:
+// - Use role="grid" for grid, role="gridcell" for days
+// - Use aria-selected, aria-disabled, aria-current as needed
+// - Keyboard navigation: arrow keys, tab, enter/space to select
+
+// Example CSS variables for theming (add to :root or theme files)
+// :root {
+//   --ce-calendar-bg: #fff;
+//   --ce-calendar-color: #222;
+//   --ce-calendar-font-size: 1rem;
+//   --ce-calendar-border: #e0e0e0;
+//   --ce-calendar-radius: 0.5em;
+//   --ce-calendar-shadow: 0 1px 4px rgba(0,0,0,0.04);
+//   --ce-calendar-padding: 1em;
+//   --ce-calendar-header-color: #0078d4;
+//   --ce-calendar-header-bg: #f5f7fa;
+//   --ce-calendar-header-radius: 0.3em;
+//   --ce-calendar-nav-color: #0078d4;
+//   --ce-calendar-nav-hover: #e0eaff;
+//   --ce-calendar-grid-bg: #fff;
+//   --ce-calendar-grid-radius: 0.3em;
+//   --ce-calendar-day-radius: 0.3em;
+//   --ce-calendar-day-bg: #fff;
+//   --ce-calendar-day-color: #222;
+//   --ce-calendar-day-hover: #e0eaff;
+//   --ce-calendar-day-hover-color: #0078d4;
+//   --ce-calendar-day-today-bg: #d0e7ff;
+//   --ce-calendar-day-today-color: #0078d4;
+//   --ce-calendar-day-today-shadow: #0078d4;
+//   --ce-calendar-day-selected-bg: #0078d4;
+//   --ce-calendar-day-selected-color: #fff;
+//   --ce-calendar-day-range-bg: #e0eaff;
+//   --ce-calendar-day-range-color: #0078d4;
+//   --ce-calendar-event-bg: #d6336c;
+// }

package/src/components/content/_carousel.scss

@@ -0,0 +1,112 @@
+// components/content/_carousel.scss
+
+@use "../../abstracts/functions" as fn;
+
+.carousel {
+  position: relative;
+  width: var(--ce-carousel-width, 100%);
+  max-width: var(--ce-carousel-max-width, 600px);
+  overflow: hidden;
+  border-radius: var(--ce-carousel-radius, #{fn.radius(md)});
+  background-color: var(--ce-carousel-bg, var(--theme-carousel-bg, var(--theme-surface, #{fn.color(light)})));
+  box-shadow: var(--ce-carousel-shadow, #{fn.shadow(sm)});
+  color: var(--ce-carousel-color, inherit);
+
+  &__track {
+    display: flex;
+    transition: transform var(--ce-carousel-track-duration, 0.4s)
+      var(--ce-carousel-track-ease, cubic-bezier(0.4, 0, 0.2, 1));
+    will-change: transform;
+  }
+
+  &__slide {
+    min-width: 100%;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(
+      --ce-carousel-slide-bg,
+      var(--theme-carousel-slide-bg, var(--theme-surface, #{fn.color(light)}))
+    );
+    color: var(
+      --ce-carousel-slide-color,
+      var(--theme-carousel-slide-fg, var(--theme-fg, #{fn.color(dark)}))
+    );
+    font-size: var(--ce-carousel-slide-size, 1.25rem);
+    padding: var(--ce-carousel-slide-padding, #{fn.space(lg)});
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  &__controls {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-between;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  &__button {
+    background: var(--ce-carousel-btn-bg, var(--theme-carousel-btn-bg, #{fn.color(primary)}));
+    color: var(--ce-carousel-btn-color, var(--theme-carousel-btn-fg, #{fn.color(white)}));
+    border: none;
+    border-radius: var(--ce-carousel-btn-radius, #{fn.radius(circle)});
+    width: var(--ce-carousel-btn-size, 2.5rem);
+    height: var(--ce-carousel-btn-size, 2.5rem);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--ce-carousel-btn-font-size, 1.5rem);
+    cursor: var(--ce-carousel-btn-cursor, pointer);
+    pointer-events: auto;
+    transition: background var(--ce-carousel-btn-transition, 0.2s);
+    outline: none;
+
+    &:hover,
+    &:focus-visible {
+      background: var(--ce-carousel-btn-hover-bg, var(--theme-carousel-btn-hover, #{fn.color(dark)}));
+      outline-width: var(--ce-carousel-btn-focus-outline-width, 2px);
+      outline-style: var(--ce-carousel-btn-focus-outline-style, solid);
+      outline-color: var(--ce-carousel-btn-focus-outline-color, var(--theme-accent, var(--theme-primary)));
+      outline-offset: var(--ce-carousel-btn-focus-outline-offset, 2px);
+    }
+  }
+
+  &__indicators {
+    position: absolute;
+    bottom: var(--ce-carousel-indicators-bottom, #{fn.space(sm)});
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: var(--ce-carousel-indicators-gap, #{fn.space(xs)});
+  }
+
+  &__indicator {
+    width: var(--ce-carousel-dot-size, 0.75rem);
+    height: var(--ce-carousel-dot-size, 0.75rem);
+    border-radius: var(--ce-carousel-dot-radius, 50%);
+    background: var(--ce-carousel-dot-bg, var(--theme-carousel-indicator, #{fn.color(muted)}));
+    cursor: var(--ce-carousel-dot-cursor, pointer);
+    transition: background var(--ce-carousel-dot-transition, 0.2s);
+
+    &.active {
+      background: var(--ce-carousel-dot-active-bg, var(--theme-carousel-indicator-active, #{fn.color(primary)}));
+    }
+    &:focus-visible {
+      outline-width: var(--ce-carousel-dot-focus-outline-width, 2px);
+      outline-style: var(--ce-carousel-dot-focus-outline-style, solid);
+      outline-color: var(--ce-carousel-dot-focus-outline-color, var(--theme-accent, var(--theme-primary)));
+      outline-offset: var(--ce-carousel-dot-focus-outline-offset, 2px);
+    }
+  }
+}
+
+// Accessibility notes:
+// - Use role="region" and aria-label for carousel
+// - Use role="group" and aria-roledescription="slide" for slides
+// - Keyboard navigation: left/right arrows, tab to controls
+// - aria-live for announcements