@clusterenvision/ui-scss 1.94.3

package/src/components/advanced/_editor.scss

@@ -0,0 +1,156 @@
+@use "../../abstracts/functions" as fn;
+@use "sass:color";
+
+.editor {
+  border-width: var(--ce-editor-border-width, 1px);
+  border-style: var(--ce-editor-border-style, solid);
+  border-color: var(--ce-editor-border-color, #{fn.color(muted)});
+  border-radius: var(--ce-editor-radius, #{fn.radius(sm)});
+  background-color: var(--ce-editor-bg, #{fn.color(white)});
+  padding: var(--ce-editor-padding, #{fn.space(sm)});
+  font-size: var(--ce-editor-size, 1rem);
+  line-height: var(--ce-editor-line-height, 1.6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ce-editor-gap, #{fn.space(sm)});
+  min-height: var(--ce-editor-min-height, 250px);
+
+  &__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ce-editor-toolbar-gap, #{fn.space(xs)});
+    border-bottom-width: var(--ce-editor-toolbar-border-width, 1px);
+    border-bottom-style: var(--ce-editor-toolbar-border-style, solid);
+    border-bottom-color: var(--ce-editor-toolbar-border-color, #{fn.color(muted)});
+    padding-bottom: var(--ce-editor-toolbar-padding, #{fn.space(xs)});
+
+    button {
+      background-color: var(--ce-editor-button-bg, #{fn.color(light)});
+      border-width: var(--ce-editor-button-border-width, 1px);
+      border-style: var(--ce-editor-button-border-style, solid);
+      border-color: var(--ce-editor-button-border-color, #{fn.color(gray-300)});
+      padding: var(--ce-editor-button-padding, #{fn.space(xs)} #{fn.space(sm)});
+      border-radius: var(--ce-editor-button-radius, #{fn.radius(xs)});
+      font-size: var(--ce-editor-button-size, 0.85rem);
+      cursor: var(--ce-editor-button-cursor, pointer);
+
+      &:hover {
+        background-color: var(
+          --ce-editor-button-hover-bg,
+          #{fn.color(primary)}
+        );
+        color: var(--ce-editor-button-hover-color, #{fn.color(white)});
+      }
+
+      &.active {
+        background-color: var(
+          --ce-editor-button-active-bg,
+          #{fn.color(primary)}
+        );
+        color: var(--ce-editor-button-active-color, #{fn.color(white)});
+      }
+    }
+  }
+
+  &__content {
+    flex: 1;
+    min-height: var(--ce-editor-content-min-height, 160px);
+    padding: var(--ce-editor-content-padding, #{fn.space(sm)});
+    border-radius: var(--ce-editor-content-radius, #{fn.radius(xs)});
+    border: var(--ce-editor-content-border, none);
+    outline: var(--ce-editor-content-outline, none);
+    color: var(--ce-editor-content-color, #{fn.color(dark)});
+    background: var(--ce-editor-content-bg, #{fn.color(white)});
+    font-size: var(--ce-editor-content-size, 1rem);
+
+    p {
+      margin-bottom: var(--ce-editor-paragraph-margin, #{fn.space(sm)});
+    }
+
+    h1, h2, h3 {
+      margin: var(--ce-editor-heading-margin, #{fn.space(sm)} 0);
+      font-weight: var(--ce-editor-heading-weight, bold);
+    }
+
+    ul, ol {
+      padding-left: var(--ce-editor-list-padding, #{fn.space(md)});
+      margin: var(--ce-editor-list-margin, #{fn.space(sm)} 0);
+    }
+
+    blockquote {
+      border-left-width: var(--ce-editor-blockquote-border-width, 4px);
+      border-left-style: var(--ce-editor-blockquote-border-style, solid);
+      border-left-color: var(
+        --ce-editor-blockquote-border-color,
+        #{fn.color(primary)}
+      );
+      padding-left: var(--ce-editor-blockquote-padding, #{fn.space(sm)});
+      color: var(--ce-editor-blockquote-color, #{fn.color(muted)});
+      margin: var(--ce-editor-blockquote-margin, #{fn.space(sm)} 0);
+    }
+
+    pre {
+      font-family: var(--ce-editor-pre-font, monospace);
+      background: var(--ce-editor-pre-bg, #{fn.color(dark)});
+      color: var(--ce-editor-pre-color, #{fn.color(white)});
+      padding: var(--ce-editor-pre-padding, #{fn.space(sm)});
+      border-radius: var(--ce-editor-pre-radius, #{fn.radius(sm)});
+      overflow-x: var(--ce-editor-pre-overflow, auto);
+    }
+
+    code {
+      background: var(--ce-editor-code-bg, #{fn.color(light)});
+      padding: var(--ce-editor-code-padding, 2px 6px);
+      border-radius: var(--ce-editor-code-radius, #{fn.radius(xs)});
+      font-size: var(--ce-editor-code-size, 0.9rem);
+    }
+
+    img {
+      max-width: var(--ce-editor-image-max-width, 100%);
+      height: var(--ce-editor-image-height, auto);
+      border-radius: var(--ce-editor-image-radius, #{fn.radius(xs)});
+      margin: var(--ce-editor-image-margin, #{fn.space(sm)} 0);
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: var(--ce-editor-table-margin, #{fn.space(sm)} 0);
+
+      th, td {
+        border-width: var(--ce-editor-table-border-width, 1px);
+        border-style: var(--ce-editor-table-border-style, solid);
+        border-color: var(--ce-editor-table-border-color, #{fn.color(gray-300)});
+        padding: var(--ce-editor-table-cell-padding, #{fn.space(xs)});
+        text-align: left;
+      }
+
+      th {
+        background: var(--ce-editor-table-header-bg, #{fn.color(gray-100)});
+      }
+    }
+
+    a {
+      color: var(--ce-editor-link-color, #{fn.color(primary)});
+      text-decoration: var(--ce-editor-link-decoration, underline);
+
+      &:hover {
+        color: var(
+          --ce-editor-link-hover-color,
+          #{color.adjust(fn.color(primary), $lightness: -10%)}
+        )
+      }
+    }
+  }
+
+  &--readonly {
+    pointer-events: none;
+    background-color: var(--ce-editor-readonly-bg, #{fn.color(light)});
+    border-style: var(--ce-editor-readonly-border-style, dashed);
+  }
+
+  &--disabled {
+    opacity: var(--ce-editor-disabled-opacity, 0.6);
+    pointer-events: var(--ce-editor-disabled-events, none);
+  }
+}

package/src/components/advanced/_modal.scss

@@ -0,0 +1,96 @@
+// components/advanced/_modal.scss
+
+@use "../../abstracts/functions" as fn;
+
+// Advanced Modal Component
+// - Themeable via CSS variables
+// - BEM naming convention
+// - Accessible: ARIA roles, keyboard navigation
+// - Supports overlay, close, header, footer, size, animation
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--ce-modal-overlay, rgba(fn.color(black), 0.4));
+  transition: background 0.2s;
+
+  &__dialog {
+    background: var(--ce-modal-bg, #{fn.color(white)});
+    color: var(--ce-modal-color, #{fn.color(neutral-ink)});
+    font-size: var(--ce-modal-font-size, 1rem);
+    border-radius: var(--ce-modal-radius, #{fn.radius(md)});
+    box-shadow: var(--ce-modal-shadow, #{fn.shadow(lg)});
+    padding: var(--ce-modal-padding, #{fn.space(xl)});
+    min-width: 20em;
+    max-width: 40em;
+    outline: none;
+    position: relative;
+    animation: modal-fade-in 0.3s;
+  }
+
+  &__header {
+    font-weight: 600;
+    font-size: 1.2em;
+    margin-bottom: var(--ce-modal-header-spacing, #{fn.space(md)});
+    color: var(--ce-modal-header-color, #{fn.color(neutral-ink)});
+  }
+
+  &__footer {
+    margin-top: var(--ce-modal-footer-spacing, #{fn.space(lg)});
+    display: flex;
+    gap: var(--ce-modal-footer-gap, #{fn.space(md)});
+    justify-content: flex-end;
+  }
+
+  &__close {
+    position: absolute;
+    top: var(--ce-modal-close-offset, #{fn.space(md)});
+    right: var(--ce-modal-close-offset, #{fn.space(md)});
+    background: none;
+    border: none;
+    color: var(--ce-modal-close, #{fn.color(neutral-mid)});
+    font-size: 1.2em;
+    cursor: pointer;
+    transition: color 0.2s;
+    &:hover {
+      color: var(--ce-modal-close-hover, #{fn.color(accent-rose)});
+    }
+  }
+}
+
+@keyframes modal-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Accessibility notes:
+// - Use role="dialog" and aria-modal="true"
+// - Use aria-label, aria-describedby, aria-labelledby
+// - Keyboard navigation: tab, escape to close
+
+// Example CSS variables for theming (add to :root or theme files)
+// :root {
+//   --ce-modal-overlay: rgba(0,0,0,0.4);
+//   --ce-modal-bg: #fff;
+//   --ce-modal-color: #222;
+//   --ce-modal-font-size: 1rem;
+//   --ce-modal-radius: 0.5em;
+//   --ce-modal-shadow: 0 2px 16px rgba(0,0,0,0.16);
+//   --ce-modal-padding: 2em;
+//   --ce-modal-header-color: #222;
+//   --ce-modal-close: #888;
+//   --ce-modal-close-hover: #d6336c;
+// }

package/src/components/advanced/_notification-center.scss

@@ -0,0 +1,172 @@
+// components/advanced/_notification-center.scss
+
+@use "../../abstracts/functions" as fn;
+
+// Advanced Notification Center Component
+// - Themeable via CSS variables
+// - BEM naming convention
+// - Accessible: ARIA roles, keyboard navigation
+// - Supports queue, actions, types, icons, auto-dismiss
+
+.notification-center {
+  position: fixed;
+  top: var(--ce-nc-top, #{fn.space(xl)});
+  right: var(--ce-nc-right, #{fn.space(xl)});
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ce-nc-gap, #{fn.space(md)});
+  min-width: 20em;
+  max-width: 32em;
+  pointer-events: none;
+}
+
+.notification {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ce-nc-gap, #{fn.space(md)});
+  background: var(--ce-nc-bg, #{fn.color(white)});
+  color: var(--ce-nc-color, #{fn.color(neutral-ink)});
+  font-size: var(--ce-nc-font-size, 1rem);
+  border: 1px solid var(--ce-nc-border, #{fn.color(gray-200)});
+  border-radius: var(--ce-nc-radius, #{fn.radius(md)});
+  box-shadow: var(--ce-nc-shadow, #{fn.shadow(md)});
+  padding: var(--ce-nc-padding, #{fn.space(md)} #{fn.space(lg)});
+  min-width: 18em;
+  max-width: 32em;
+  position: relative;
+  margin-bottom: var(--ce-nc-gap, #{fn.space(md)});
+  pointer-events: auto;
+  animation: nc-fade-in 0.3s;
+
+  &__icon {
+    font-size: 1.5em;
+    margin-right: 0.5em;
+    color: var(--ce-nc-icon-color, #{fn.color(accent-blue)});
+    flex-shrink: 0;
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ce-nc-gap, 0.3em);
+  }
+
+  &__title {
+    font-weight: 600;
+    font-size: 1.1em;
+    margin-bottom: 0.2em;
+    color: var(--ce-nc-title-color, #{fn.color(neutral-ink)});
+  }
+
+  &__message {
+    font-size: 1em;
+    color: var(--ce-nc-message-color, #{fn.color(neutral-ink)});
+  }
+
+  &__actions {
+    display: flex;
+    gap: var(--ce-nc-action-gap, #{fn.space(sm)});
+    margin-top: var(--ce-nc-action-gap, #{fn.space(sm)});
+    button {
+      background: var(--ce-nc-action-bg, #{fn.color(accent-blue)});
+      color: var(--ce-nc-action-color, #{fn.color(white)});
+      border: none;
+      border-radius: var(--ce-nc-action-radius, #{fn.radius(sm)});
+      padding: var(--ce-nc-action-padding, #{fn.space(xs)} #{fn.space(sm)});
+      font-size: 0.95em;
+      cursor: pointer;
+      transition: background 0.2s;
+      &:hover,
+      &:focus {
+        background: var(--ce-nc-action-hover, #{fn.color(accent-blue-strong)});
+      }
+      &:disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+    }
+  }
+
+  &--info {
+    border-left: 4px solid var(--ce-nc-info, #{fn.color(accent-blue)});
+    .notification__icon {
+      color: var(--ce-nc-info, #{fn.color(accent-blue)});
+    }
+  }
+  &--success {
+    border-left: 4px solid var(--ce-nc-success, #{fn.color(accent-lime)});
+    .notification__icon {
+      color: var(--ce-nc-success, #{fn.color(accent-lime)});
+    }
+  }
+  &--warning {
+    border-left: 4px solid var(--ce-nc-warning, #{fn.color(accent-amber)});
+    .notification__icon {
+      color: var(--ce-nc-warning, #{fn.color(accent-amber)});
+    }
+  }
+  &--error {
+    border-left: 4px solid var(--ce-nc-error, #{fn.color(accent-rose)});
+    .notification__icon {
+      color: var(--ce-nc-error, #{fn.color(accent-rose)});
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 0.7em;
+    right: 1em;
+    background: none;
+    border: none;
+    color: var(--ce-nc-close, #{fn.color(neutral-mid)});
+    font-size: 1.2em;
+    cursor: pointer;
+    transition: color 0.2s;
+    &:hover {
+      color: var(--ce-nc-close-hover, #{fn.color(accent-rose)});
+    }
+  }
+}
+
+@keyframes nc-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Accessibility notes:
+// - Use role="alert" or role="status" as appropriate
+// - Use aria-live, aria-atomic, aria-label for messages
+// - Keyboard navigation: tab, enter/space to close or activate actions
+
+// Example CSS variables for theming (add to :root or theme files)
+// :root {
+//   --ce-nc-top: 2em;
+//   --ce-nc-right: 2em;
+//   --ce-nc-bg: #fff;
+//   --ce-nc-color: #222;
+//   --ce-nc-font-size: 1rem;
+//   --ce-nc-border: #e0e0e0;
+//   --ce-nc-radius: 0.5em;
+//   --ce-nc-shadow: 0 2px 8px rgba(0,0,0,0.08);
+//   --ce-nc-padding: 1em 1.5em;
+//   --ce-nc-icon-color: #0078d4;
+//   --ce-nc-title-color: #222;
+//   --ce-nc-message-color: #222;
+//   --ce-nc-action-bg: #0078d4;
+//   --ce-nc-action-color: #fff;
+//   --ce-nc-action-hover: #005fa3;
+//   --ce-nc-info: #0078d4;
+//   --ce-nc-success: #2ecc40;
+//   --ce-nc-warning: #ffb700;
+//   --ce-nc-error: #d6336c;
+//   --ce-nc-close: #888;
+//   --ce-nc-close-hover: #d6336c;
+// }

package/src/components/advanced/_popover.scss

@@ -0,0 +1,68 @@
+// components/advanced/_popover.scss
+
+@use "../../abstracts/functions" as fn;
+
+// Advanced Popover Component
+// - Themeable via CSS variables
+// - BEM naming convention
+// - Accessible: ARIA roles, keyboard navigation
+// - Supports arrow, placement, interactive, close, shadow
+
+.popover {
+  position: absolute;
+  z-index: 1000;
+  min-width: 12em;
+  max-width: 24em;
+  background: var(--ce-popover-bg, #{fn.color(white)});
+  color: var(--ce-popover-color, #{fn.color(neutral-ink)});
+  font-size: var(--ce-popover-font-size, 1rem);
+  border-radius: var(--ce-popover-radius, #{fn.radius(md)});
+  box-shadow: var(--ce-popover-shadow, #{fn.shadow(md)});
+  padding: var(--ce-popover-padding, #{fn.space(md)});
+  border: 1px solid var(--ce-popover-border, #{fn.color(gray-200)});
+  outline: none;
+  transition: opacity 0.2s, transform 0.2s;
+
+  &__arrow {
+    position: absolute;
+    width: 1.2em;
+    height: 1.2em;
+    background: var(--ce-popover-bg, #{fn.color(white)});
+    border: 1px solid var(--ce-popover-border, #{fn.color(gray-200)});
+    transform: rotate(45deg);
+    z-index: -1;
+  }
+
+  &__close {
+    position: absolute;
+    top: 0.7em;
+    right: 1em;
+    background: none;
+    border: none;
+    color: var(--ce-popover-close, #{fn.color(neutral-mid)});
+    font-size: 1.2em;
+    cursor: pointer;
+    transition: color 0.2s;
+    &:hover {
+      color: var(--ce-popover-close-hover, #{fn.color(accent-rose)});
+    }
+  }
+}
+
+// Accessibility notes:
+// - Use role="dialog" or role="tooltip" as appropriate
+// - Use aria-modal, aria-label, aria-describedby
+// - Keyboard navigation: tab, escape to close
+
+// Example CSS variables for theming (add to :root or theme files)
+// :root {
+//   --ce-popover-bg: #fff;
+//   --ce-popover-color: #222;
+//   --ce-popover-font-size: 1rem;
+//   --ce-popover-radius: 0.5em;
+//   --ce-popover-shadow: 0 2px 8px rgba(0,0,0,0.12);
+//   --ce-popover-padding: 1em;
+//   --ce-popover-border: #e0e0e0;
+//   --ce-popover-close: #888;
+//   --ce-popover-close-hover: #d6336c;
+// }

package/src/components/advanced/_rating.scss

@@ -0,0 +1,22 @@
+// components/advanced/_rating.scss
+
+@use "../../abstracts/functions" as fn;
+
+.rating {
+  display: var(--ce-rating-advanced-display, inline-flex);
+  gap: var(--ce-rating-advanced-gap, #{fn.space(xs)});
+  font-size: var(--ce-rating-advanced-size, 1.25rem);
+  color: var(--ce-rating-advanced-color, #{fn.color(muted)});
+  cursor: var(--ce-rating-advanced-cursor, pointer);
+
+  .star {
+    transition: var(--ce-rating-advanced-star-transition, color 0.2s);
+
+    &.filled {
+      color: var(--ce-rating-advanced-star-filled, #{fn.color(warning)});
+    }
+  }
+
+  &--sm { font-size: var(--ce-rating-advanced-sm-size, 1rem); }
+  &--lg { font-size: var(--ce-rating-advanced-lg-size, 1.75rem); }
+}

package/src/components/advanced/_stepper.scss

@@ -0,0 +1,135 @@
+// components/advanced/_stepper.scss
+
+@use "../../abstracts/functions" as fn;
+
+// Advanced Stepper Component
+// - Themeable via CSS variables
+// - BEM naming convention
+// - Accessible: ARIA roles, keyboard navigation
+// - Supports steps, progress, completed, error, disabled
+
+.stepper {
+  display: var(--ce-stepper-advanced-display, flex);
+  flex-direction: var(--ce-stepper-advanced-direction, row);
+  align-items: var(--ce-stepper-advanced-align, flex-start);
+  gap: var(--ce-stepper-gap, #{fn.space(xl)});
+  background: var(--ce-stepper-bg, #{fn.color(white)});
+  color: var(--ce-stepper-color, #{fn.color(neutral-ink)});
+  font-size: var(--ce-stepper-font-size, 1rem);
+  padding: var(--ce-stepper-padding, #{fn.space(md)});
+  border-radius: var(--ce-stepper-radius, #{fn.radius(md)});
+  box-shadow: var(--ce-stepper-shadow, #{fn.shadow(xs)});
+
+  &__steps {
+    display: var(--ce-stepper-advanced-steps-display, flex);
+    flex-direction: var(--ce-stepper-advanced-steps-direction, row);
+    gap: var(--ce-stepper-step-gap, #{fn.space(lg)});
+    align-items: var(--ce-stepper-advanced-steps-align, center);
+    list-style: var(--ce-stepper-advanced-steps-style, none);
+    padding: var(--ce-stepper-advanced-steps-padding, 0);
+    margin: var(--ce-stepper-advanced-steps-margin, 0);
+  }
+
+  &__step {
+    display: var(--ce-stepper-advanced-step-display, flex);
+    flex-direction: var(--ce-stepper-advanced-step-direction, column);
+    align-items: var(--ce-stepper-advanced-step-align, center);
+    position: var(--ce-stepper-advanced-step-position, relative);
+    cursor: var(--ce-stepper-advanced-step-cursor, pointer);
+    outline: var(--ce-stepper-advanced-step-outline, none);
+    transition: var(
+      --ce-stepper-advanced-step-transition,
+      color 0.2s, background 0.2s
+    );
+    color: var(--ce-stepper-step-color, #{fn.color(neutral-mid)});
+    background: var(--ce-stepper-step-bg, #{fn.color(neutral-surface)});
+    border-radius: var(--ce-stepper-step-radius, #{fn.radius(xl)});
+    padding: var(--ce-stepper-step-padding, #{fn.space(sm)} #{fn.space(md)});
+    min-width: 3em;
+    min-height: 3em;
+    font-weight: 500;
+    &:hover,
+    &:focus {
+      background: var(--ce-stepper-step-hover-bg, #{fn.color(accent-blue-soft)});
+      color: var(--ce-stepper-step-hover-color, #{fn.color(accent-blue)});
+    }
+    &--active {
+      background: var(--ce-stepper-step-active-bg, #{fn.color(accent-blue)});
+      color: var(--ce-stepper-step-active-color, #{fn.color(white)});
+      font-weight: 700;
+      box-shadow: 0 0 0 var(--ce-stepper-outline, 2px)
+        var(--ce-stepper-step-active-shadow, #{fn.color(accent-blue-muted)});
+    }
+    &--completed {
+      background: var(--ce-stepper-step-completed-bg, #{fn.color(accent-blue-muted)});
+      color: var(--ce-stepper-step-completed-color, #{fn.color(accent-blue)});
+    }
+    &--error {
+      background: var(--ce-stepper-step-error-bg, #{fn.color(accent-rose-soft)});
+      color: var(--ce-stepper-step-error-color, #{fn.color(accent-rose)});
+    }
+    &--disabled {
+      opacity: var(--ce-stepper-advanced-step-disabled-opacity, 0.5);
+      pointer-events: var(--ce-stepper-advanced-step-disabled-events, none);
+    }
+    &__label {
+      margin-top: var(--ce-stepper-advanced-label-margin, 0.5em);
+      font-size: var(--ce-stepper-advanced-label-size, 0.95em);
+      color: var(--ce-stepper-advanced-label-color, inherit);
+    }
+    &__icon {
+      font-size: var(--ce-stepper-advanced-icon-size, 1.2em);
+      margin-bottom: var(--ce-stepper-advanced-icon-margin, 0.2em);
+      color: var(--ce-stepper-advanced-icon-color, inherit);
+    }
+  }
+
+  &__progress {
+    flex: var(--ce-stepper-advanced-progress-flex, 1);
+    height: var(--ce-stepper-progress-height, 0.25em);
+    background: var(--ce-stepper-progress-bg, #{fn.color(gray-200)});
+    border-radius: var(--ce-stepper-progress-radius, var(--ce-radius-sm, 0.25em));
+    margin: var(--ce-stepper-advanced-progress-margin, 1em 0);
+    position: var(--ce-stepper-advanced-progress-position, relative);
+    overflow: var(--ce-stepper-advanced-progress-overflow, hidden);
+    &__bar {
+      height: 100%;
+      background: var(--ce-stepper-progress-bar, #{fn.color(accent-blue)});
+      border-radius: var(--ce-stepper-progress-radius, var(--ce-radius-sm, 0.25em));
+      transition: var(--ce-stepper-advanced-progress-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-stepper-bg: #fff;
+//   --ce-stepper-color: #222;
+//   --ce-stepper-font-size: 1rem;
+//   --ce-stepper-padding: 1em;
+//   --ce-stepper-radius: 0.5em;
+//   --ce-stepper-shadow: 0 1px 4px rgba(0,0,0,0.04);
+//   --ce-stepper-gap: 2em;
+//   --ce-stepper-step-gap: 1.5em;
+//   --ce-stepper-step-color: #888;
+//   --ce-stepper-step-bg: #f5f7fa;
+//   --ce-stepper-step-radius: 1em;
+//   --ce-stepper-step-padding: 0.5em 1em;
+//   --ce-stepper-step-hover-bg: #e0eaff;
+//   --ce-stepper-step-hover-color: #0078d4;
+//   --ce-stepper-step-active-bg: #0078d4;
+//   --ce-stepper-step-active-color: #fff;
+//   --ce-stepper-step-active-shadow: #d0e7ff;
+//   --ce-stepper-step-completed-bg: #d0e7ff;
+//   --ce-stepper-step-completed-color: #0078d4;
+//   --ce-stepper-step-error-bg: #ffe0e0;
+//   --ce-stepper-step-error-color: #d6336c;
+//   --ce-stepper-progress-bg: #e0e0e0;
+//   --ce-stepper-progress-bar: #0078d4;
+// }