@clusterenvision/ui-scss 1.94.3

package/src/components/advanced/_steps.scss

@@ -0,0 +1,57 @@
+// components/advanced/_steps.scss
+
+@use "../../abstracts/functions" as fn;
+
+.steps {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: fn.space(md);
+
+  .step {
+    flex: 1;
+    text-align: center;
+    position: relative;
+
+    .circle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      background-color: fn.color(muted);
+      color: fn.color(white);
+      border-radius: fn.radius(circle);
+      font-weight: bold;
+      margin-bottom: fn.space(xs);
+
+      &.active {
+        background-color: fn.color(primary);
+      }
+
+      &.completed {
+        background-color: fn.color(success);
+      }
+    }
+
+    .label {
+      font-size: 0.875rem;
+      color: fn.color(dark);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 1rem;
+      right: -50%;
+      width: 100%;
+      height: 2px;
+      background-color: fn.color(muted);
+      z-index: -1;
+    }
+
+    &:last-child::after {
+      display: none;
+    }
+  }
+}

package/src/components/advanced/_timeline.scss

@@ -0,0 +1,47 @@
+// components/advanced/_timeline.scss
+
+@use "../../abstracts/functions" as fn;
+
+.timeline {
+  position: var(--ce-timeline-advanced-position, relative);
+  padding-left: var(--ce-timeline-advanced-padding, #{fn.space(xl)});
+  border-left: var(--ce-timeline-advanced-border, 2px solid #{fn.color(muted)});
+
+  .timeline__event {
+    margin-bottom: var(--ce-timeline-advanced-event-margin, #{fn.space(xl)});
+    position: var(--ce-timeline-advanced-event-position, relative);
+
+    &::before {
+      content: var(--ce-timeline-advanced-dot-content, '');
+      position: var(--ce-timeline-advanced-dot-position, absolute);
+      left: var(--ce-timeline-advanced-dot-left, #{fn.space(lg)});
+      top: var(--ce-timeline-advanced-dot-top, 0.25rem);
+      width: var(--ce-timeline-advanced-dot-size, 1rem);
+      height: var(--ce-timeline-advanced-dot-size, 1rem);
+      background-color: var(
+        --ce-timeline-advanced-dot-bg,
+        #{fn.color(primary)}
+      );
+      border-radius: var(--ce-timeline-advanced-dot-radius, 50%);
+      border: var(
+        --ce-timeline-advanced-dot-border,
+        2px solid #{fn.color(white)}
+      );
+    }
+
+    .title {
+      font-weight: var(--ce-timeline-advanced-title-weight, bold);
+      color: var(--ce-timeline-advanced-title-color, #{fn.color(dark)});
+    }
+
+    .timestamp {
+      font-size: var(--ce-timeline-advanced-time-size, 0.75rem);
+      color: var(--ce-timeline-advanced-time-color, #{fn.color(muted)});
+    }
+
+    .content {
+      margin-top: var(--ce-timeline-advanced-content-margin, #{fn.space(sm)});
+      font-size: var(--ce-timeline-advanced-content-size, 0.9rem);
+    }
+  }
+}

package/src/components/advanced/_wizard.scss

@@ -0,0 +1,132 @@
+// components/advanced/_wizard.scss
+
+@use "../../abstracts/functions" as fn;
+
+// Advanced Wizard Component
+// - Themeable via CSS variables
+// - BEM naming convention
+// - Accessible: ARIA roles, keyboard navigation
+// - Supports steps, progress, completed, error, disabled
+
+.wizard {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--ce-wizard-gap, #{fn.space(xl)});
+  background: var(--ce-wizard-bg, #{fn.color(white)});
+  color: var(--ce-wizard-color, #{fn.color(neutral-ink)});
+  font-size: var(--ce-wizard-font-size, 1rem);
+  padding: var(--ce-wizard-padding, #{fn.space(md)});
+  border-radius: var(--ce-wizard-radius, #{fn.radius(md)});
+  box-shadow: var(--ce-wizard-shadow, #{fn.shadow(xs)});
+
+  &__steps {
+    display: flex;
+    flex-direction: row;
+    gap: var(--ce-wizard-step-gap, #{fn.space(lg)});
+    align-items: center;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  &__step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+    transition: color 0.2s, background 0.2s;
+    color: var(--ce-wizard-step-color, #{fn.color(neutral-mid)});
+    background: var(--ce-wizard-step-bg, #{fn.color(neutral-surface)});
+    border-radius: var(--ce-wizard-step-radius, #{fn.radius(xl)});
+    padding: var(--ce-wizard-step-padding, #{fn.space(sm)} #{fn.space(md)});
+    min-width: 3em;
+    min-height: 3em;
+    font-weight: 500;
+    &:hover,
+    &:focus {
+      background: var(--ce-wizard-step-hover-bg, #{fn.color(accent-blue-soft)});
+      color: var(--ce-wizard-step-hover-color, #{fn.color(accent-blue)});
+    }
+    &--active {
+      background: var(--ce-wizard-step-active-bg, #{fn.color(accent-blue)});
+      color: var(--ce-wizard-step-active-color, #{fn.color(white)});
+      font-weight: 700;
+      box-shadow: 0 0 0 var(--ce-wizard-outline, 2px)
+        var(--ce-wizard-step-active-shadow, #{fn.color(accent-blue-muted)});
+    }
+    &--completed {
+      background: var(--ce-wizard-step-completed-bg, #{fn.color(accent-blue-muted)});
+      color: var(--ce-wizard-step-completed-color, #{fn.color(accent-blue)});
+    }
+    &--error {
+      background: var(--ce-wizard-step-error-bg, #{fn.color(accent-rose-soft)});
+      color: var(--ce-wizard-step-error-color, #{fn.color(accent-rose)});
+    }
+    &--disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    &__label {
+      margin-top: 0.5em;
+      font-size: 0.95em;
+      color: inherit;
+    }
+    &__icon {
+      font-size: 1.2em;
+      margin-bottom: 0.2em;
+      color: inherit;
+    }
+  }
+
+  &__progress {
+    flex: 1;
+    height: var(--ce-wizard-progress-height, 0.25em);
+    background: var(--ce-wizard-progress-bg, #{fn.color(gray-200)});
+    border-radius: var(--ce-wizard-progress-radius, var(--ce-radius-sm, 0.25em));
+    margin: var(--ce-wizard-progress-margin, 1em 0);
+    position: relative;
+    overflow: hidden;
+    &__bar {
+      height: 100%;
+      background: var(--ce-wizard-progress-bar, #{fn.color(accent-blue)});
+      border-radius: var(--ce-wizard-progress-radius, var(--ce-radius-sm, 0.25em));
+      transition: width 0.3s;
+      width: 0%; // Set dynamically
+    }
+  }
+}
+
+// Accessibility notes:
+// - Use role="list" for steps, role="listitem" for step
+// - Use aria-current, aria-disabled, aria-label as needed
+// - Keyboard navigation: arrow keys, tab, enter/space to activate
+
+// Example CSS variables for theming (add to :root or theme files)
+// :root {
+//   --ce-wizard-bg: #fff;
+//   --ce-wizard-color: #222;
+//   --ce-wizard-font-size: 1rem;
+//   --ce-wizard-padding: 1em;
+//   --ce-wizard-radius: 0.5em;
+//   --ce-wizard-shadow: 0 1px 4px rgba(0,0,0,0.04);
+//   --ce-wizard-gap: 2em;
+//   --ce-wizard-step-gap: 1.5em;
+//   --ce-wizard-step-color: #888;
+//   --ce-wizard-step-bg: #f5f7fa;
+//   --ce-wizard-step-radius: 1em;
+//   --ce-wizard-step-padding: 0.5em 1em;
+//   --ce-wizard-step-hover-bg: #e0eaff;
+//   --ce-wizard-step-hover-color: #0078d4;
+//   --ce-wizard-step-active-bg: #0078d4;
+//   --ce-wizard-step-active-color: #fff;
+//   --ce-wizard-step-active-shadow: #d0e7ff;
+//   --ce-wizard-step-completed-bg: #d0e7ff;
+//   --ce-wizard-step-completed-color: #0078d4;
+//   --ce-wizard-step-error-bg: #ffe0e0;
+//   --ce-wizard-step-error-color: #d6336c;
+//   --ce-wizard-progress-bg: #e0e0e0;
+//   --ce-wizard-progress-bar: #0078d4;
+// }

package/src/components/buttons/_button-group.scss

@@ -0,0 +1,40 @@
+// components/buttons/_button-group.scss
+
+@use "../../abstracts/functions" as fn;
+
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  border-radius: fn.radius(md);
+  overflow: hidden;
+
+  .button {
+    border-radius: 0;
+    margin: 0;
+
+    &:not(:last-child) {
+      border-right: 1px solid fn.color(muted);
+    }
+  }
+
+  &--vertical {
+    flex-direction: column;
+
+    .button:not(:last-child) {
+      border-right: none;
+      border-bottom: 1px solid fn.color(muted);
+    }
+  }
+
+  &--rounded {
+    .button:first-child {
+      border-top-left-radius: fn.radius(md);
+      border-bottom-left-radius: fn.radius(md);
+    }
+
+    .button:last-child {
+      border-top-right-radius: fn.radius(md);
+      border-bottom-right-radius: fn.radius(md);
+    }
+  }
+}

package/src/components/buttons/_button.scss

@@ -0,0 +1,296 @@
+// components/buttons/_button.scss
+
+@use "../../abstracts/functions" as fn;
+@use "../../abstracts/mixins" as mx;
+@use "sass:color";
+
+.button,
+.ce-btn {
+  --ce-button-bg: var(--ce-component-button-background, var(--ce-color-primary, var(--theme-primary, #{fn.color(primary)})));
+  --ce-button-color: var(--ce-component-button-foreground, var(--ce-color-text, var(--theme-fg, #{fn.color(white)})));
+  --ce-button-border: var(--ce-component-button-border, var(--ce-color-primary, var(--theme-primary, #{fn.color(primary)})));
+  --ce-button-radius: var(--ce-component-button-radius, var(--ce-radius-md, #{fn.radius(md)}));
+  --ce-button-padding-y: var(--ce-component-button-padding-y, var(--ce-space-8, #{fn.space(sm)}));
+  --ce-button-padding-x: var(--ce-component-button-padding-x, var(--ce-space-16, #{fn.space(md)}));
+  --ce-button-font-size: var(--ce-component-button-font-size, 1rem);
+  --ce-button-font-weight: var(--ce-component-button-font-weight, 500);
+  --ce-button-line-height: var(--ce-component-button-line-height, 1.2);
+  --ce-button-focus-ring: var(--ce-component-button-focus-ring, var(--ce-color-focus-ring, var(--theme-accent, #{fn.color(primary)})));
+  --ce-button-hover-bg: var(--ce-component-button-hover-background, var(--ce-button-bg));
+
+  background-color: var(--ce-button-bg);
+  color: var(--ce-button-color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  font-size: var(--ce-button-font-size);
+  font-weight: var(--ce-button-font-weight);
+  line-height: var(--ce-button-line-height);
+  padding: var(--ce-button-padding-y) var(--ce-button-padding-x);
+  border-radius: var(--ce-button-radius);
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  border: 1px solid var(--ce-button-border);
+  outline: none;
+  transition: background-color 0.2s ease, border-color 0.2s ease,
+    color 0.2s ease;
+
+  // 💡 Layout-agnostic fixes
+  width: fit-content;
+  max-width: 100%;
+  min-width: auto;
+  white-space: nowrap;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  @extend %transition !optional;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  // COLOR VARIANTS - Default is Primary
+  &--primary {
+    --ce-button-bg: var(--ce-button-primary-bg, var(--ce-color-primary, var(--theme-primary, #{fn.color(primary)})));
+    --ce-button-color: var(--ce-button-primary-color, var(--ce-color-text, var(--theme-fg, #{fn.color(white)})));
+    --ce-button-border: var(--ce-button-primary-border, var(--ce-button-bg));
+    --ce-button-hover-bg: var(--ce-button-primary-hover, var(--theme-primary-hover, #{color.adjust(fn.color(primary), $lightness: -7%)}));
+
+    &:hover:not(:disabled) {
+      background-color: var(--ce-button-hover-bg);
+    }
+  }
+
+  &--secondary {
+    --ce-button-bg: var(--ce-button-secondary-bg, #{fn.color(secondary)});
+    --ce-button-color: var(--ce-button-secondary-color, #{fn.color(dark)});
+    --ce-button-border: var(--ce-button-secondary-border, #{fn.color(secondary)});
+    --ce-button-hover-bg: var(--ce-button-secondary-hover, #{color.adjust(fn.color(secondary), $lightness: -7%)});
+
+    &:hover:not(:disabled) {
+      background-color: var(--ce-button-hover-bg);
+    }
+  }
+
+  &--glass {
+    --ce-button-bg: var(--ce-button-glass-bg, rgba(255, 255, 255, 0.1));
+    --ce-button-border: var(--ce-button-glass-border, rgba(255, 255, 255, 0.2));
+    --ce-button-color: var(--ce-button-glass-color, var(--theme-fg, #{fn.color(white)}));
+
+    background-color: var(--ce-button-bg);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--ce-button-border);
+    color: var(--ce-button-color);
+  }
+
+  &--success {
+    --ce-button-bg: var(--ce-button-success-bg, #{fn.color(success)});
+    --ce-button-color: var(--ce-button-success-color, #{fn.color(white)});
+    --ce-button-border: var(--ce-button-success-border, #{fn.color(success)});
+    --ce-button-hover-bg: var(--ce-button-success-hover, #{color.adjust(fn.color(success), $lightness: -7%)});
+
+    &:hover:not(:disabled) {
+      background-color: var(--ce-button-hover-bg);
+    }
+  }
+
+  &--danger {
+    --ce-button-bg: var(--ce-button-danger-bg, #{fn.color(danger)});
+    --ce-button-color: var(--ce-button-danger-color, #{fn.color(white)});
+    --ce-button-border: var(--ce-button-danger-border, #{fn.color(danger)});
+    --ce-button-hover-bg: var(--ce-button-danger-hover, #{color.adjust(fn.color(danger), $lightness: -7%)});
+
+    &:hover:not(:disabled) {
+      background-color: var(--ce-button-hover-bg);
+    }
+  }
+
+  &--warning {
+    --ce-button-bg: var(--ce-button-warning-bg, #{fn.color(warning)});
+    --ce-button-color: var(--ce-button-warning-color, #{fn.color(black)});
+    --ce-button-border: var(--ce-button-warning-border, #{fn.color(warning)});
+    --ce-button-hover-bg: var(--ce-button-warning-hover, #{color.adjust(fn.color(warning), $lightness: -7%)});
+
+    &:hover:not(:disabled) {
+      background-color: var(--ce-button-hover-bg);
+    }
+  }
+
+  &--info {
+    --ce-button-bg: var(--ce-button-info-bg, #{fn.color(info)});
+    --ce-button-color: var(--ce-button-info-color, #{fn.color(white)});
+    --ce-button-border: var(--ce-button-info-border, #{fn.color(info)});
+    --ce-button-hover-bg: var(--ce-button-info-hover, #{color.adjust(fn.color(info), $lightness: -7%)});
+
+    &:hover:not(:disabled) {
+      background-color: var(--ce-button-hover-bg);
+    }
+  }
+
+  &--light {
+    --ce-button-bg: var(--ce-button-light-bg, #{fn.color(light)});
+    --ce-button-color: var(--ce-button-light-color, #{fn.color(dark)});
+    --ce-button-border: var(--ce-button-light-border, #{fn.color(light)});
+    --ce-button-hover-bg: var(--ce-button-light-hover, #{color.adjust(fn.color(light), $lightness: -10%)});
+
+    &:hover:not(:disabled) {
+      background-color: var(--ce-button-hover-bg);
+    }
+  }
+
+  &--dark {
+    --ce-button-bg: var(--ce-button-dark-bg, #{fn.color(dark)});
+    --ce-button-color: var(--ce-button-dark-color, #{fn.color(white)});
+    --ce-button-border: var(--ce-button-dark-border, #{fn.color(dark)});
+    --ce-button-hover-bg: var(--ce-button-dark-hover, #{color.adjust(fn.color(dark), $lightness: 5%)});
+
+    &:hover:not(:disabled) {
+      background-color: var(--ce-button-hover-bg);
+    }
+  }
+
+  // APPEARANCE/STYLE VARIANTS
+  &--outline {
+    background-color: transparent !important;
+    border: 1px solid currentColor;
+
+    &.ce-btn--primary, &.button--primary {
+      color: var(--ce-button-outline-primary-color, #{fn.color(primary)});
+      border-color: var(--ce-button-outline-primary-border, #{fn.color(primary)});
+      &:hover:not(:disabled) {
+        background-color: var(--ce-button-outline-primary-hover, rgba(fn.color(primary), 0.1)) !important;
+      }
+    }
+    &.ce-btn--secondary, &.button--secondary {
+      color: var(--ce-button-outline-secondary-color, #{fn.color(secondary)});
+      border-color: var(--ce-button-outline-secondary-border, #{fn.color(secondary)});
+      &:hover:not(:disabled) {
+        background-color: var(--ce-button-outline-secondary-hover, rgba(fn.color(secondary), 0.1)) !important;
+      }
+    }
+    &.ce-btn--success, &.button--success {
+      color: var(--ce-button-outline-success-color, #{fn.color(success)});
+      border-color: var(--ce-button-outline-success-border, #{fn.color(success)});
+      &:hover:not(:disabled) {
+        background-color: var(--ce-button-outline-success-hover, rgba(fn.color(success), 0.1)) !important;
+      }
+    }
+    &.ce-btn--danger, &.button--danger {
+      color: var(--ce-button-outline-danger-color, #{fn.color(danger)});
+      border-color: var(--ce-button-outline-danger-border, #{fn.color(danger)});
+      &:hover:not(:disabled) {
+        background-color: var(--ce-button-outline-danger-hover, rgba(fn.color(danger), 0.1)) !important;
+      }
+    }
+  }
+
+  &--ghost {
+    background-color: transparent !important;
+    border: none;
+
+    &.ce-btn--primary, &.button--primary {
+      color: var(--ce-button-ghost-primary-color, #{fn.color(primary)});
+      &:hover:not(:disabled) {
+        background-color: var(--ce-button-ghost-primary-hover, rgba(fn.color(primary), 0.05)) !important;
+      }
+    }
+    &.ce-btn--secondary, &.button--secondary {
+      color: var(--ce-button-ghost-secondary-color, #{fn.color(secondary)});
+      &:hover:not(:disabled) {
+        background-color: var(--ce-button-ghost-secondary-hover, rgba(fn.color(secondary), 0.05)) !important;
+      }
+    }
+    &.ce-btn--success, &.button--success {
+      color: var(--ce-button-ghost-success-color, #{fn.color(success)});
+      &:hover:not(:disabled) {
+        background-color: var(--ce-button-ghost-success-hover, rgba(fn.color(success), 0.05)) !important;
+      }
+    }
+    &.ce-btn--danger, &.button--danger {
+      color: var(--ce-button-ghost-danger-color, #{fn.color(danger)});
+      &:hover:not(:disabled) {
+        background-color: var(--ce-button-ghost-danger-hover, rgba(fn.color(danger), 0.05)) !important;
+      }
+    }
+  }
+
+  // Solid appearance (default)
+  &--solid {
+    // Already handled by color variants above
+  }
+
+  // SIZE VARIANTS
+  &--xs {
+    --ce-button-font-size: 0.75rem;
+    --ce-button-padding-y: var(--ce-space-4, #{fn.space(xs)});
+    --ce-button-padding-x: var(--ce-space-4, #{fn.space(xs)});
+    --ce-button-line-height: 1;
+  }
+
+  &--sm {
+    --ce-button-font-size: 0.875rem;
+    --ce-button-padding-y: var(--ce-space-4, #{fn.space(xs)});
+    --ce-button-padding-x: var(--ce-space-8, #{fn.space(sm)});
+    --ce-button-line-height: 1;
+    letter-spacing: var(--ce-button-letter-spacing, -0.2px);
+  }
+
+  &--lg {
+    --ce-button-font-size: 1.125rem;
+    --ce-button-padding-y: var(--ce-space-16, #{fn.space(md)});
+    --ce-button-padding-x: var(--ce-space-24, #{fn.space(lg)});
+    --ce-button-line-height: 1.4;
+  }
+
+  &--xl {
+    --ce-button-font-size: 1.25rem;
+    --ce-button-padding-y: var(--ce-space-24, #{fn.space(lg)});
+    --ce-button-padding-x: var(--ce-space-32, #{fn.space(xl)});
+    --ce-button-line-height: 1.5;
+  }
+
+  &--xxl {
+    --ce-button-font-size: 1.375rem;
+    --ce-button-padding-y: var(--ce-space-24, #{fn.space(lg)});
+    --ce-button-padding-x: var(--ce-space-48, #{fn.space(xxl)});
+    --ce-button-line-height: 1.5;
+  }
+
+  // SHAPE VARIANTS
+  &--block,
+  &--full {
+    display: flex;
+    width: 100%;
+  }
+
+  &--rounded {
+    --ce-button-radius: var(--ce-radius-md, #{fn.radius(md)});
+  }
+
+  &--pill {
+    --ce-button-radius: var(--ce-radius-pill, #{fn.radius(pill)});
+  }
+
+  &--circle,
+  &--square {
+    --ce-button-padding-y: var(--ce-space-8, #{fn.space(sm)});
+    --ce-button-padding-x: var(--ce-space-8, #{fn.space(sm)});
+    --ce-button-radius: 50%;
+    width: var(--ce-button-square-size, 2.5rem);
+    height: var(--ce-button-square-size, 2.5rem);
+    justify-content: center;
+  }
+
+  &--square {
+    --ce-button-radius: var(--ce-radius-md, #{fn.radius(md)});
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ce-button-focus-ring);
+    outline-offset: 2px;
+  }
+}

package/src/components/buttons/_icon-button.scss

@@ -0,0 +1,42 @@
+// components/buttons/_icon-button.scss
+
+@use "../../abstracts/functions" as fn;
+
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: fn.space(sm);
+  width: 2.5rem;
+  height: 2.5rem;
+  border: none;
+  border-radius: fn.radius(circle);
+  background-color: fn.color(light);
+  color: fn.color(primary);
+  font-size: 1.25rem;
+  cursor: pointer;
+  @extend %transition !optional;
+
+
+  &:hover {
+    background-color: fn.color(primary);
+    color: fn.color(white);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &--sm {
+    width: 2rem;
+    height: 2rem;
+    font-size: 1rem;
+  }
+
+  &--lg {
+    width: 3rem;
+    height: 3rem;
+    font-size: 1.5rem;
+  }
+}

package/src/components/charts/_chart-types.scss

@@ -0,0 +1,74 @@
+// components/charts/_chart-types.scss
+
+@use "../../abstracts/functions" as fn;
+
+// Chart Types Component
+// - Themeable via CSS variables
+// - BEM naming convention
+// - Accessible: ARIA roles, focus styles, color contrast
+// - Responsive: adapts to container width
+
+.chart-wrapper {
+  background-color: var(--ce-chart-bg, #{fn.color(white)});
+  padding: var(--ce-chart-padding, #{fn.space(md)});
+  border-radius: var(--ce-chart-radius, #{fn.radius(sm)});
+  box-shadow: var(--ce-chart-shadow, #{fn.shadow(sm)});
+  border: 1px solid var(--ce-chart-border, #{fn.color(muted)});
+  margin-bottom: var(--ce-chart-margin, #{fn.space(lg)});
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  outline: none;
+  transition: box-shadow 0.2s;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--ce-chart-focus, #{fn.color(accent-blue)});
+  }
+
+  &--bar,
+  &--line,
+  &--pie,
+  &--radar {
+    canvas {
+      width: 100% !important;
+      height: var(--ce-chart-canvas-height, 280px) !important;
+      max-width: 100%;
+      border-radius: var(--ce-chart-canvas-radius, 0.3em);
+      background: var(--ce-chart-canvas-bg, transparent);
+      outline: none;
+    }
+  }
+
+  &__title {
+    font-weight: bold;
+    font-size: var(--ce-chart-title-size, 1.1rem);
+    margin-bottom: var(--ce-chart-title-margin, #{fn.space(sm)});
+    color: var(--ce-chart-title-color, #{fn.color(dark)});
+    line-height: 1.3;
+    letter-spacing: 0.01em;
+    outline: none;
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+  // Accessibility notes:
+  // - Use role="img" and aria-label on chart canvas for screen readers
+  // - Ensure color contrast for chart elements
+  // - Provide keyboard focus styles for wrapper and title
+
+  // Example CSS variables for theming (add to :root or theme files)
+  // :root {
+  //   --ce-chart-bg: #fff;
+  //   --ce-chart-padding: 1.5em;
+  //   --ce-chart-radius: 0.5em;
+  //   --ce-chart-shadow: 0 1px 4px rgba(0,0,0,0.04);
+  //   --ce-chart-border: #e0e0e0;
+  //   --ce-chart-margin: 2em;
+  //   --ce-chart-focus: #0078d4;
+  //   --ce-chart-canvas-height: 280px;
+  //   --ce-chart-canvas-radius: 0.3em;
+  //   --ce-chart-canvas-bg: transparent;
+  //   --ce-chart-title-size: 1.1rem;
+  //   --ce-chart-title-margin: 0.5em;
+  //   --ce-chart-title-color: #222;
+  // }
+}