@clusterenvision/ui-scss 1.94.3

package/src/components/content/_chip.scss

@@ -0,0 +1,246 @@
+// components/content/_chip.scss
+
+@use "../../abstracts/functions" as fn;
+
+.chip,
+.ce-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ce-chip-gap, #{fn.space(xs)});
+  padding: var(--ce-chip-padding, 0.375rem 0.875rem);
+  font-size: var(--ce-chip-font-size, 0.875rem);
+  line-height: var(--ce-chip-line-height, 1.5);
+  border-radius: var(--ce-chip-radius, #{fn.radius(pill)});
+  background-color: var(--ce-chip-bg, var(--theme-chip-bg, #{fn.color(light)}));
+  color: var(--ce-chip-color, var(--theme-chip-fg, #{fn.color(dark)}));
+  font-weight: var(--ce-chip-weight, 500);
+  border-width: var(--ce-chip-border-width, 1px);
+  border-style: var(--ce-chip-border-style, solid);
+  border-color: var(--ce-chip-border-color, var(--theme-chip-border, #{fn.color(muted)}));
+  transition: all var(--ce-chip-transition, 0.2s)
+    var(--ce-chip-transition-ease, ease);
+  cursor: var(--ce-chip-cursor, default);
+  white-space: var(--ce-chip-white-space, nowrap);
+  max-width: var(--ce-chip-max-width, 100%);
+
+  // Size variants
+  &--sm {
+    --ce-chip-padding: 0.25rem 0.625rem;
+    --ce-chip-font-size: 0.75rem;
+    --ce-chip-gap: 0.25rem;
+  }
+
+  &--md {
+    --ce-chip-padding: 0.375rem 0.875rem;
+    --ce-chip-font-size: 0.875rem;
+  }
+
+  &--lg {
+    --ce-chip-padding: 0.5rem 1rem;
+    --ce-chip-font-size: 1rem;
+  }
+
+  // Color variants - Solid
+  &--primary {
+    --ce-chip-bg: var(--ce-chip-primary-bg, var(--theme-chip-primary, #{fn.color(primary)}));
+    --ce-chip-color: var(--ce-chip-primary-color, #{fn.color(white)});
+    --ce-chip-border-color: var(
+      --ce-chip-primary-border,
+      var(--theme-chip-primary-border, #{fn.color(primary)})
+    );
+  }
+
+  &--secondary {
+    --ce-chip-bg: var(--ce-chip-secondary-bg, var(--theme-chip-secondary, #{fn.color(secondary)}));
+    --ce-chip-color: var(--ce-chip-secondary-color, #{fn.color(white)});
+    --ce-chip-border-color: var(
+      --ce-chip-secondary-border,
+      var(--theme-chip-secondary-border, #{fn.color(secondary)})
+    );
+  }
+
+  &--success {
+    --ce-chip-bg: var(--ce-chip-success-bg, var(--theme-chip-success, #{fn.color(success)}));
+    --ce-chip-color: var(--ce-chip-success-color, #{fn.color(white)});
+    --ce-chip-border-color: var(
+      --ce-chip-success-border,
+      var(--theme-chip-success-border, #{fn.color(success)})
+    );
+  }
+
+  &--danger {
+    --ce-chip-bg: var(--ce-chip-danger-bg, var(--theme-chip-danger, #{fn.color(danger)}));
+    --ce-chip-color: var(--ce-chip-danger-color, #{fn.color(white)});
+    --ce-chip-border-color: var(
+      --ce-chip-danger-border,
+      var(--theme-chip-danger-border, #{fn.color(danger)})
+    );
+  }
+
+  &--warning {
+    --ce-chip-bg: var(--ce-chip-warning-bg, var(--theme-chip-warning, #{fn.color(warning)}));
+    --ce-chip-color: var(--ce-chip-warning-color, #{fn.color(dark)});
+    --ce-chip-border-color: var(
+      --ce-chip-warning-border,
+      var(--theme-chip-warning-border, #{fn.color(warning)})
+    );
+  }
+
+  &--info {
+    --ce-chip-bg: var(--ce-chip-info-bg, var(--theme-chip-info, #{fn.color(info)}));
+    --ce-chip-color: var(--ce-chip-info-color, #{fn.color(white)});
+    --ce-chip-border-color: var(
+      --ce-chip-info-border,
+      var(--theme-chip-info-border, #{fn.color(info)})
+    );
+  }
+
+  // Outlined variants
+  &--outlined {
+    --ce-chip-bg: var(--ce-chip-outlined-bg, transparent);
+    --ce-chip-border-color: var(--ce-chip-outlined-border, currentColor);
+
+    &.chip--primary,
+    &.ce-chip--primary {
+      --ce-chip-color: var(--ce-chip-outlined-primary-color, #{fn.color(primary)});
+      --ce-chip-border-color: var(--ce-chip-outlined-primary-border, #{fn.color(primary)});
+    }
+
+    &.chip--secondary,
+    &.ce-chip--secondary {
+      --ce-chip-color: var(--ce-chip-outlined-secondary-color, #{fn.color(secondary)});
+      --ce-chip-border-color: var(--ce-chip-outlined-secondary-border, #{fn.color(secondary)});
+    }
+
+    &.chip--success,
+    &.ce-chip--success {
+      --ce-chip-color: var(--ce-chip-outlined-success-color, #{fn.color(success)});
+      --ce-chip-border-color: var(--ce-chip-outlined-success-border, #{fn.color(success)});
+    }
+
+    &.chip--danger,
+    &.ce-chip--danger {
+      --ce-chip-color: var(--ce-chip-outlined-danger-color, #{fn.color(danger)});
+      --ce-chip-border-color: var(--ce-chip-outlined-danger-border, #{fn.color(danger)});
+    }
+
+    &.chip--warning,
+    &.ce-chip--warning {
+      --ce-chip-color: var(--ce-chip-outlined-warning-color, #{fn.color(warning-dark)});
+      --ce-chip-border-color: var(--ce-chip-outlined-warning-border, #{fn.color(warning)});
+    }
+
+    &.chip--info,
+    &.ce-chip--info {
+      --ce-chip-color: var(--ce-chip-outlined-info-color, #{fn.color(info)});
+      --ce-chip-border-color: var(--ce-chip-outlined-info-border, #{fn.color(info)});
+    }
+  }
+
+  // Ghost variants
+  &--ghost {
+    --ce-chip-border-color: var(--ce-chip-ghost-border, transparent);
+
+    &.chip--primary,
+    &.ce-chip--primary {
+      --ce-chip-bg: var(--ce-chip-ghost-primary-bg, rgba(fn.color(primary), 0.1));
+      --ce-chip-color: var(--ce-chip-ghost-primary-color, #{fn.color(primary)});
+    }
+
+    &.chip--secondary,
+    &.ce-chip--secondary {
+      --ce-chip-bg: var(
+        --ce-chip-ghost-secondary-bg,
+        rgba(fn.color(secondary), 0.1)
+      );
+      --ce-chip-color: var(--ce-chip-ghost-secondary-color, #{fn.color(secondary)});
+    }
+
+    &.chip--success,
+    &.ce-chip--success {
+      --ce-chip-bg: var(--ce-chip-ghost-success-bg, rgba(fn.color(success), 0.1));
+      --ce-chip-color: var(--ce-chip-ghost-success-color, #{fn.color(success)});
+    }
+
+    &.chip--danger,
+    &.ce-chip--danger {
+      --ce-chip-bg: var(--ce-chip-ghost-danger-bg, rgba(fn.color(danger), 0.1));
+      --ce-chip-color: var(--ce-chip-ghost-danger-color, #{fn.color(danger)});
+    }
+
+    &.chip--warning,
+    &.ce-chip--warning {
+      --ce-chip-bg: var(--ce-chip-ghost-warning-bg, rgba(fn.color(warning), 0.15));
+      --ce-chip-color: var(--ce-chip-ghost-warning-color, #{fn.color(warning-dark)});
+    }
+
+    &.chip--info,
+    &.ce-chip--info {
+      --ce-chip-bg: var(--ce-chip-ghost-info-bg, rgba(fn.color(info), 0.1));
+      --ce-chip-color: var(--ce-chip-ghost-info-color, #{fn.color(info)});
+    }
+  }
+
+  &.active {
+    --ce-chip-bg: var(
+      --ce-chip-active-bg,
+      var(--theme-chip-active-bg, #{fn.color(primary)})
+    );
+    --ce-chip-color: var(
+      --ce-chip-active-color,
+      var(--theme-chip-active-fg, #{fn.color(white)})
+    );
+    --ce-chip-border-color: var(
+      --ce-chip-active-border,
+      var(--theme-chip-active-border, #{fn.color(primary)})
+    );
+  }
+
+  // Removable chip with close button
+  &--removable {
+    --ce-chip-padding: var(--ce-chip-removable-padding, 0.375rem 0.5rem 0.375rem 0.875rem);
+  }
+
+  &__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--ce-chip-close-bg, transparent);
+    border-width: var(--ce-chip-close-border-width, 0);
+    border-style: var(--ce-chip-close-border-style, solid);
+    border-color: var(--ce-chip-close-border-color, transparent);
+    color: var(--ce-chip-close-color, currentColor);
+    font-size: var(--ce-chip-close-size, 1.25em);
+    cursor: var(--ce-chip-close-cursor, pointer);
+    padding: var(--ce-chip-close-padding, 0);
+    margin-left: var(--ce-chip-close-gap, 0.375rem);
+    opacity: var(--ce-chip-close-opacity, 0.6);
+    transition: opacity var(--ce-chip-close-transition, 0.2s)
+      var(--ce-chip-close-transition-ease, ease);
+    width: var(--ce-chip-close-width, 1em);
+    height: var(--ce-chip-close-height, 1em);
+    line-height: var(--ce-chip-close-line-height, 1);
+
+    &:hover,
+    &:focus-visible {
+      opacity: var(--ce-chip-close-hover-opacity, 1);
+      outline-width: var(--ce-chip-close-outline-width, 2px);
+      outline-style: var(--ce-chip-close-outline-style, solid);
+      outline-color: var(--ce-chip-close-outline-color, currentColor);
+      outline-offset: var(--ce-chip-close-outline-offset, 2px);
+      border-radius: var(--ce-chip-close-radius, #{fn.radius(sm)});
+    }
+  }
+
+  &__icon {
+    display: inline-flex;
+    font-size: var(--ce-chip-icon-size, 1.1em);
+  }
+
+  // Disabled state
+  &:disabled,
+  &.disabled {
+    opacity: var(--ce-chip-disabled-opacity, 0.5);
+    cursor: var(--ce-chip-disabled-cursor, not-allowed);
+  }
+}

package/src/components/content/_divider.scss

@@ -0,0 +1,49 @@
+// components/content/_divider.scss
+
+@use "../../abstracts/functions" as fn;
+
+// Divider component
+// - Uses CSS variables for theming
+// - BEM naming convention
+// - Accessible: should be used as <hr> for horizontal, <div role="separator" aria-orientation="vertical"> for vertical
+// - Customizable: thickness, style, color
+
+.divider {
+  border: none;
+  border-top: var(--ce-divider-thickness, 1px) var(--ce-divider-style, solid)
+    var(--ce-divider-color, #{fn.color(muted)});
+  margin: var(--ce-divider-margin, #{fn.space(md)}) 0;
+  background: none;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+
+  &--vertical {
+    border-top: none;
+    border-left: var(--ce-divider-thickness, 1px) var(--ce-divider-style, solid)
+      var(--ce-divider-color, #{fn.color(muted)});
+    height: 100%;
+    margin: 0 var(--ce-divider-margin, #{fn.space(md)});
+    width: auto;
+    min-height: 1em;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  &--dashed {
+    border-top-style: dashed;
+    border-left-style: dashed;
+  }
+
+  &--thick {
+    border-top-width: 2px;
+    border-left-width: 2px;
+  }
+  // Example CSS variables for theming (add to :root or theme files)
+  // :root {
+  //   --ce-divider-color: #e0e0e0;
+  //   --ce-divider-thickness: 1px;
+  //   --ce-divider-style: solid;
+  //   --ce-divider-margin: 1rem;
+  // }
+}

package/src/components/content/_image.scss

@@ -0,0 +1,32 @@
+// components/content/_image.scss
+
+@use "../../abstracts/functions" as fn;
+
+.image {
+  max-width: 100%;
+  display: block;
+  height: auto;
+  border-radius: fn.radius(sm);
+
+  &--rounded {
+    border-radius: fn.radius(md);
+  }
+
+  &--circle {
+    border-radius: fn.radius(circle);
+  }
+
+  &--shadow {
+    box-shadow: fn.shadow(md);
+  }
+
+  &--cover {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+  &--contain {
+    object-fit: contain;
+  }
+}

package/src/components/content/_rating.scss

@@ -0,0 +1,60 @@
+// components/content/_rating.scss
+
+@use "../../abstracts/functions" as fn;
+
+.rating {
+  display: var(--ce-rating-display, inline-flex);
+  align-items: var(--ce-rating-align, center);
+  gap: var(--ce-rating-gap, 0.25em);
+
+  &__star {
+    width: var(--ce-rating-star-size, 1.5em);
+    height: var(--ce-rating-star-size, 1.5em);
+    display: var(--ce-rating-star-display, inline-block);
+    background-color: var(
+      --ce-rating-star-bg,
+      var(--theme-rating-star-bg, #{fn.color(muted)})
+    );
+    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>')
+      no-repeat center / contain;
+    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/></svg>')
+      no-repeat center / contain;
+    transition: var(--ce-rating-star-transition, background-color 0.2s);
+    cursor: var(--ce-rating-star-cursor, pointer);
+    outline: var(--ce-rating-star-outline, none);
+
+    &.active {
+      background-color: var(
+        --ce-rating-star-active,
+        var(--theme-rating-star-active, #{fn.color(warning)})
+      );
+    }
+    &:hover,
+    &:focus-visible {
+      background-color: var(
+        --ce-rating-star-hover,
+        var(--theme-rating-star-hover, #{fn.color(primary)})
+      );
+      outline: var(
+        --ce-rating-star-focus-outline,
+        2px solid var(--theme-accent, var(--theme-primary))
+      );
+      outline-offset: var(--ce-rating-star-focus-offset, 2px);
+    }
+  }
+
+  &__label {
+    margin-left: var(--ce-rating-label-margin, 0.5em);
+    font-size: var(--ce-rating-label-size, 1em);
+    color: var(
+      --ce-rating-label-color,
+      var(--theme-rating-label, #{fn.color(dark)})
+    );
+  }
+}
+
+// Accessibility notes:
+// - Use role="radiogroup" on .rating
+// - Use role="radio" and aria-checked on each star
+// - Keyboard navigation: left/right arrows to change rating
+// - aria-label or aria-labelledby for context

package/src/components/content/_rich-text-editor.scss

@@ -0,0 +1,153 @@
+// components/content/_rich-text-editor.scss
+
+@use "../../abstracts/functions" as fn;
+
+// Rich Text Editor Component
+// - Themeable via CSS variables
+// - BEM naming convention
+// - Accessible: keyboard navigation, ARIA roles
+// - Supports toolbar, content area, formatting, code, blockquote, lists
+
+.rich-text-editor {
+  display: var(--ce-rte-display, flex);
+  flex-direction: var(--ce-rte-direction, column);
+  background: var(--ce-rte-bg, #{fn.color(white)});
+  color: var(--ce-rte-color, #{fn.color(neutral-ink)});
+  font-size: var(--ce-rte-font-size, 1rem);
+  border: 1px solid var(--ce-rte-border, #{fn.color(gray-200)});
+  border-radius: var(--ce-rte-radius, #{fn.radius(md)});
+  box-shadow: var(--ce-rte-shadow, #{fn.shadow(xs)});
+
+  &__toolbar {
+    display: var(--ce-rte-toolbar-display, flex);
+    flex-wrap: var(--ce-rte-toolbar-wrap, wrap);
+    gap: var(--ce-rte-toolbar-gap, #{fn.space(sm)});
+    background: var(--ce-rte-toolbar-bg, #{fn.color(neutral-surface)});
+    border-bottom: 1px solid var(--ce-rte-border, #{fn.color(gray-200)});
+    padding: var(--ce-rte-toolbar-padding, #{fn.space(sm)});
+    align-items: var(--ce-rte-toolbar-align, center);
+    button {
+      background: none;
+      border: none;
+      color: var(--ce-rte-toolbar-btn-color, #{fn.color(neutral-ink)});
+      font-size: 1em;
+      padding: var(--ce-rte-toolbar-btn-padding, #{fn.space(xs)} #{fn.space(sm)});
+      border-radius: var(--ce-rte-toolbar-btn-radius, #{fn.radius(sm)});
+      cursor: var(--ce-rte-toolbar-btn-cursor, pointer);
+      transition: var(--ce-rte-toolbar-btn-transition, background 0.2s);
+      &:hover,
+      &:focus {
+        background: var(--ce-rte-toolbar-btn-hover, #{fn.color(accent-blue-soft)});
+        color: var(--ce-rte-toolbar-btn-active, #{fn.color(accent-blue)});
+      }
+      &.active {
+        background: var(--ce-rte-toolbar-btn-active-bg, #{fn.color(accent-blue-muted)});
+        color: var(--ce-rte-toolbar-btn-active, #{fn.color(accent-blue)});
+      }
+      &:disabled {
+        opacity: var(--ce-rte-toolbar-btn-disabled-opacity, 0.5);
+        pointer-events: var(--ce-rte-toolbar-btn-disabled-events, none);
+      }
+    }
+  }
+
+  &__content {
+    min-height: var(--ce-rte-content-min-height, 10em);
+    padding: var(--ce-rte-content-padding, #{fn.space(md)});
+    outline: none;
+    background: var(--ce-rte-content-bg, #{fn.color(white)});
+    color: var(--ce-rte-content-color, #{fn.color(neutral-ink)});
+    font-size: inherit;
+    border-radius: 0 0 var(--ce-rte-radius, #{fn.radius(md)})
+      var(--ce-rte-radius, #{fn.radius(md)});
+    overflow-y: var(--ce-rte-content-overflow, auto);
+    line-height: var(--ce-rte-content-line-height, 1.6);
+    box-sizing: var(--ce-rte-content-box, border-box);
+    // Content formatting
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-weight: var(--ce-rte-heading-weight, 600);
+      margin: var(--ce-rte-heading-margin, 1em 0 0.5em);
+    }
+    p {
+      margin: var(--ce-rte-paragraph-margin, 0.5em 0);
+    }
+    ul,
+    ol {
+      margin: var(--ce-rte-list-margin, 0.5em 0 0.5em 2em);
+      padding: var(--ce-rte-list-padding, 0);
+    }
+    blockquote {
+      border-left: 3px solid var(--ce-rte-blockquote, #{fn.color(accent-blue)});
+      margin: var(--ce-rte-blockquote-margin, 1em 0);
+      padding: var(--ce-rte-blockquote-padding, 0.5em 1em);
+      background: var(--ce-rte-blockquote-bg, #{fn.color(neutral-surface)});
+      color: var(--ce-rte-blockquote-color, #{fn.color(neutral-ink)});
+    }
+    code {
+      background: var(--ce-rte-code-bg, #{fn.color(gray-100)});
+      color: var(--ce-rte-code-color, #{fn.color(accent-rose)});
+      padding: var(--ce-rte-code-padding, 0.2em 0.4em);
+      border-radius: var(--ce-rte-code-radius, 0.2em);
+      font-family: var(--ce-rte-code-font, monospace);
+      font-size: var(--ce-rte-code-size, 0.95em);
+    }
+    pre {
+      background: var(--ce-rte-pre-bg, #{fn.color(gray-100)});
+      color: var(--ce-rte-pre-color, #{fn.color(neutral-ink)});
+      padding: var(--ce-rte-pre-padding, 0.8em 1em);
+      border-radius: var(--ce-rte-pre-radius, 0.3em);
+      overflow-x: var(--ce-rte-pre-overflow, auto);
+      font-family: var(--ce-rte-pre-font, monospace);
+      font-size: var(--ce-rte-pre-size, 0.95em);
+    }
+    img {
+      max-width: var(--ce-rte-img-width, 100%);
+      height: var(--ce-rte-img-height, auto);
+      border-radius: var(--ce-rte-img-radius, 0.2em);
+      margin: var(--ce-rte-img-margin, 0.5em 0);
+    }
+    a {
+      color: var(--ce-rte-link, #{fn.color(accent-blue)});
+      text-decoration: var(--ce-rte-link-decoration, underline);
+      &:hover {
+        text-decoration: var(--ce-rte-link-hover-decoration, none);
+      }
+    }
+  }
+}
+
+// Accessibility notes:
+// - Use role="toolbar" for toolbar, role="textbox" for content area
+// - Keyboard navigation: tab, arrow keys, shortcuts for formatting
+// - Use aria-label, aria-pressed, aria-disabled as needed
+
+// Example CSS variables for theming (add to :root or theme files)
+// :root {
+//   --ce-rte-bg: #fff;
+//   --ce-rte-color: #222;
+//   --ce-rte-font-size: 1rem;
+//   --ce-rte-border: #e0e0e0;
+//   --ce-rte-radius: 0.5em;
+//   --ce-rte-shadow: 0 1px 4px rgba(0,0,0,0.04);
+//   --ce-rte-toolbar-bg: #f5f7fa;
+//   --ce-rte-toolbar-btn-color: #222;
+//   --ce-rte-toolbar-btn-hover: #e0eaff;
+//   --ce-rte-toolbar-btn-active: #0078d4;
+//   --ce-rte-toolbar-btn-active-bg: #d0e7ff;
+//   --ce-rte-content-min-height: 10em;
+//   --ce-rte-content-bg: #fff;
+//   --ce-rte-content-color: #222;
+//   --ce-rte-blockquote: #0078d4;
+//   --ce-rte-blockquote-bg: #f5f7fa;
+//   --ce-rte-blockquote-color: #222;
+//   --ce-rte-code-bg: #f0f4fa;
+//   --ce-rte-code-color: #d6336c;
+//   --ce-rte-pre-bg: #f0f4fa;
+//   --ce-rte-pre-color: #222;
+//   --ce-rte-link: #0078d4;
+// }

package/src/components/content/_timeline-advanced.scss

@@ -0,0 +1,138 @@
+// components/content/_timeline-advanced.scss
+
+@use "../../abstracts/functions" as fn;
+
+// Advanced Timeline Component
+// - Themeable via CSS variables
+// - BEM naming convention
+// - Accessible: ARIA roles, keyboard navigation
+// - Supports icons, badges, alternate layout, events, status
+
+.timeline-advanced {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ce-timeline-gap, #{fn.space(xl)});
+  background: var(--ce-timeline-bg, #{fn.color(white)});
+  color: var(--ce-timeline-color, #{fn.color(neutral-ink)});
+  font-size: var(--ce-timeline-font-size, 1rem);
+  padding: var(--ce-timeline-padding, #{fn.space(md)});
+  border-radius: var(--ce-timeline-radius, #{fn.radius(md)});
+  box-shadow: var(--ce-timeline-shadow, #{fn.shadow(xs)});
+
+  &__item {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ce-timeline-item-gap, #{fn.space(md)});
+    position: relative;
+    min-height: var(--ce-timeline-item-min-height, 3em);
+    padding-bottom: var(--ce-timeline-item-spacing, #{fn.space(lg)});
+    &:last-child {
+      padding-bottom: 0;
+    }
+    &--alternate {
+      flex-direction: row-reverse;
+    }
+    &--completed {
+      opacity: 0.7;
+    }
+    &--active {
+      font-weight: 600;
+      color: var(--ce-timeline-active, #{fn.color(accent-blue)});
+    }
+    &--error {
+      color: var(--ce-timeline-error, #{fn.color(accent-rose)});
+    }
+    &--disabled {
+      opacity: 0.4;
+      pointer-events: none;
+    }
+  }
+
+  &__icon {
+    width: 2em;
+    height: 2em;
+    border-radius: var(--ce-timeline-icon-radius, var(--ce-radius-circle, 50%));
+    background: var(--ce-timeline-icon-bg, #{fn.color(accent-blue-soft)});
+    color: var(--ce-timeline-icon-color, #{fn.color(accent-blue)});
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2em;
+    margin-right: 0.5em;
+    flex-shrink: 0;
+  }
+
+  &__badge {
+    background: var(--ce-timeline-badge-bg, #{fn.color(accent-amber)});
+    color: var(--ce-timeline-badge-color, #{fn.color(neutral-ink)});
+    border-radius: var(--ce-timeline-badge-radius, 1em);
+    padding: var(--ce-timeline-badge-padding, 0.2em 0.8em);
+    font-size: 0.95em;
+    font-weight: 500;
+    margin-right: 0.5em;
+    display: inline-block;
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ce-timeline-content-gap, 0.3em);
+  }
+
+  &__title {
+    font-weight: 600;
+    font-size: 1.1em;
+    margin-bottom: 0.2em;
+    color: var(--ce-timeline-title-color, #{fn.color(neutral-ink)});
+  }
+
+  &__desc {
+    font-size: 1em;
+    color: var(--ce-timeline-desc-color, #{fn.color(neutral-ink)});
+  }
+
+  &__date {
+    font-size: 0.95em;
+    color: var(--ce-timeline-date-color, #{fn.color(neutral-mid)});
+    margin-top: 0.2em;
+  }
+
+  &__connector {
+    position: absolute;
+    left: 1em;
+    top: 2em;
+    width: var(--ce-timeline-connector-width, 2px);
+    height: calc(100% - 2em);
+    background: var(--ce-timeline-connector, #{fn.color(gray-200)});
+    z-index: 0;
+    border-radius: var(--ce-timeline-connector-radius, 1px);
+    pointer-events: none;
+  }
+}
+
+// Accessibility notes:
+// - Use role="list" for timeline, role="listitem" for items
+// - 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-timeline-gap: 2em;
+//   --ce-timeline-bg: #fff;
+//   --ce-timeline-color: #222;
+//   --ce-timeline-font-size: 1rem;
+//   --ce-timeline-padding: 1em;
+//   --ce-timeline-radius: 0.5em;
+//   --ce-timeline-shadow: 0 1px 4px rgba(0,0,0,0.04);
+//   --ce-timeline-active: #0078d4;
+//   --ce-timeline-error: #d6336c;
+//   --ce-timeline-icon-bg: #e0eaff;
+//   --ce-timeline-icon-color: #0078d4;
+//   --ce-timeline-badge-bg: #ffb700;
+//   --ce-timeline-badge-color: #222;
+//   --ce-timeline-title-color: #222;
+//   --ce-timeline-desc-color: #222;
+//   --ce-timeline-date-color: #888;
+//   --ce-timeline-connector: #e0e0e0;
+// }