@clusterenvision/ui-scss 1.94.3

package/src/components/content/_timeline.scss

@@ -0,0 +1,86 @@
+// components/content/_timeline.scss
+
+@use "../../abstracts/functions" as fn;
+
+.timeline {
+  display: var(--ce-timeline-display, flex);
+  flex-direction: var(--ce-timeline-direction, column);
+  gap: var(--ce-timeline-gap, #{fn.space(lg)});
+  position: var(--ce-timeline-position, relative);
+  padding-left: var(--ce-timeline-padding, 2rem);
+
+  &__item {
+    position: var(--ce-timeline-item-position, relative);
+    display: var(--ce-timeline-item-display, flex);
+    align-items: var(--ce-timeline-item-align, flex-start);
+    gap: var(--ce-timeline-item-gap, #{fn.space(md)});
+  }
+
+  &__dot {
+    position: var(--ce-timeline-dot-position, absolute);
+    left: var(--ce-timeline-dot-left, -1.1rem);
+    top: var(--ce-timeline-dot-top, 0.5rem);
+    width: var(--ce-timeline-dot-size, 1rem);
+    height: var(--ce-timeline-dot-size, 1rem);
+    border-radius: var(--ce-timeline-dot-radius, 50%);
+    background: var(
+      --ce-timeline-dot-bg,
+      var(--theme-timeline-dot, #{fn.color(primary)})
+    );
+    border: var(
+      --ce-timeline-dot-border,
+      2px solid var(--theme-timeline-dot-border, #{fn.color(white)})
+    );
+    box-shadow: var(--ce-timeline-dot-shadow, #{fn.shadow(xs)});
+  }
+
+  &__line {
+    position: var(--ce-timeline-line-position, absolute);
+    left: var(--ce-timeline-line-left, -0.6rem);
+    top: var(--ce-timeline-line-top, 1.5rem);
+    width: var(--ce-timeline-line-width, 2px);
+    height: var(
+      --ce-timeline-line-height,
+      calc(100% - 1.5rem)
+    );
+    background: var(
+      --ce-timeline-line-bg,
+      var(--theme-timeline-line, #{fn.color(muted)})
+    );
+    z-index: var(--ce-timeline-line-z, 0);
+  }
+
+  &__content {
+    background: var(
+      --ce-timeline-content-bg,
+      var(--theme-timeline-content-bg, #{fn.color(white)})
+    );
+    color: var(
+      --ce-timeline-content-color,
+      var(--theme-timeline-content-fg, #{fn.color(dark)})
+    );
+    border-radius: var(--ce-timeline-content-radius, #{fn.radius(sm)});
+    box-shadow: var(--ce-timeline-content-shadow, #{fn.shadow(xs)});
+    padding: var(--ce-timeline-content-padding, #{fn.space(md)});
+    min-width: var(--ce-timeline-content-min-width, 180px);
+    max-width: var(--ce-timeline-content-max-width, 400px);
+    font-size: var(--ce-timeline-content-size, 1rem);
+    position: var(--ce-timeline-content-position, relative);
+    z-index: var(--ce-timeline-content-z, 1);
+  }
+
+  &__date {
+    font-size: var(--ce-timeline-date-size, 0.85rem);
+    color: var(
+      --ce-timeline-date-color,
+      var(--theme-timeline-date, #{fn.color(muted)})
+    );
+    margin-bottom: var(--ce-timeline-date-margin, #{fn.space(xs)});
+  }
+}
+
+// Accessibility notes:
+// - Use role="list" on .timeline
+// - Use role="listitem" on each item
+// - aria-label for timeline context
+// - Keyboard navigation: tab to each item

package/src/components/feedback/_advanced-notification.scss

@@ -0,0 +1,156 @@
+// components/feedback/_advanced-notification.scss
+
+@use "../../abstracts/functions" as fn;
+
+// Advanced Notification Component
+// - Themeable via CSS variables
+// - BEM naming convention
+// - Accessible: ARIA roles, keyboard navigation
+// - Supports types, actions, queue, auto-dismiss, icons
+
+.advanced-notification {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ce-an-gap, #{fn.space(md)});
+  background: var(--ce-an-bg, #{fn.color(white)});
+  color: var(--ce-an-color, #{fn.color(neutral-ink)});
+  font-size: var(--ce-an-font-size, 1rem);
+  border: 1px solid var(--ce-an-border, #{fn.color(gray-200)});
+  border-radius: var(--ce-an-radius, #{fn.radius(md)});
+  box-shadow: var(--ce-an-shadow, #{fn.shadow(md)});
+  padding: var(--ce-an-padding, #{fn.space(md)} #{fn.space(lg)});
+  min-width: 18em;
+  max-width: 32em;
+  position: relative;
+  margin-bottom: var(--ce-an-gap, #{fn.space(md)});
+  animation: an-fade-in 0.3s;
+
+  &__icon {
+    font-size: 1.5em;
+    margin-right: 0.5em;
+    color: var(--ce-an-icon-color, #{fn.color(accent-blue)});
+    flex-shrink: 0;
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ce-an-gap, 0.3em);
+  }
+
+  &__title {
+    font-weight: 600;
+    font-size: 1.1em;
+    margin-bottom: 0.2em;
+    color: var(--ce-an-title-color, #{fn.color(neutral-ink)});
+  }
+
+  &__message {
+    font-size: 1em;
+    color: var(--ce-an-message-color, #{fn.color(neutral-ink)});
+  }
+
+  &__actions {
+    display: flex;
+    gap: var(--ce-an-action-gap, #{fn.space(sm)});
+    margin-top: var(--ce-an-action-gap, #{fn.space(sm)});
+    button {
+      background: var(--ce-an-action-bg, #{fn.color(accent-blue)});
+      color: var(--ce-an-action-color, #{fn.color(white)});
+      border: none;
+      border-radius: var(--ce-an-action-radius, #{fn.radius(sm)});
+      padding: var(--ce-an-action-padding, #{fn.space(xs)} #{fn.space(sm)});
+      font-size: 0.95em;
+      cursor: pointer;
+      transition: background 0.2s;
+      &:hover,
+      &:focus {
+        background: var(--ce-an-action-hover, #{fn.color(accent-blue-strong)});
+      }
+      &:disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+    }
+  }
+
+  &--info {
+    border-left: 4px solid var(--ce-an-info, #{fn.color(accent-blue)});
+    .advanced-notification__icon {
+      color: var(--ce-an-info, #{fn.color(accent-blue)});
+    }
+  }
+  &--success {
+    border-left: 4px solid var(--ce-an-success, #{fn.color(accent-lime)});
+    .advanced-notification__icon {
+      color: var(--ce-an-success, #{fn.color(accent-lime)});
+    }
+  }
+  &--warning {
+    border-left: 4px solid var(--ce-an-warning, #{fn.color(accent-amber)});
+    .advanced-notification__icon {
+      color: var(--ce-an-warning, #{fn.color(accent-amber)});
+    }
+  }
+  &--error {
+    border-left: 4px solid var(--ce-an-error, #{fn.color(accent-rose)});
+    .advanced-notification__icon {
+      color: var(--ce-an-error, #{fn.color(accent-rose)});
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 0.7em;
+    right: 1em;
+    background: none;
+    border: none;
+    color: var(--ce-an-close, #{fn.color(neutral-mid)});
+    font-size: 1.2em;
+    cursor: pointer;
+    transition: color 0.2s;
+    &:hover {
+      color: var(--ce-an-close-hover, #{fn.color(accent-rose)});
+    }
+  }
+}
+
+@keyframes an-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-an-bg: #fff;
+//   --ce-an-color: #222;
+//   --ce-an-font-size: 1rem;
+//   --ce-an-border: #e0e0e0;
+//   --ce-an-radius: 0.5em;
+//   --ce-an-shadow: 0 2px 8px rgba(0,0,0,0.08);
+//   --ce-an-padding: 1em 1.5em;
+//   --ce-an-icon-color: #0078d4;
+//   --ce-an-title-color: #222;
+//   --ce-an-message-color: #222;
+//   --ce-an-action-bg: #0078d4;
+//   --ce-an-action-color: #fff;
+//   --ce-an-action-hover: #005fa3;
+//   --ce-an-info: #0078d4;
+//   --ce-an-success: #2ecc40;
+//   --ce-an-warning: #ffb700;
+//   --ce-an-error: #d6336c;
+//   --ce-an-close: #888;
+//   --ce-an-close-hover: #d6336c;
+// }

package/src/components/feedback/_alert.scss

@@ -0,0 +1,86 @@
+// components/feedback/_alert.scss
+
+@use "../../abstracts/functions" as fn;
+@use "sass:color";
+
+.alert {
+  padding: fn.space(md);
+  border-radius: fn.radius(sm);
+  border-left: 4px solid;
+  background-color: var(--theme-alert-bg, fn.color(light));
+  color: var(--theme-alert-fg, fn.color(dark));
+  position: relative;
+  margin-bottom: fn.space(md);
+
+  &--success {
+    border-color: var(--theme-alert-success-border, fn.color(success));
+    background-color: var(
+      --theme-alert-success-bg,
+      color.adjust(fn.color(success), $lightness: 45%)
+    );
+    color: var(
+      --theme-alert-success-fg,
+      color.adjust(fn.color(primary), $lightness: -20%)
+    );
+  }
+
+  &--danger {
+    border-color: var(--theme-alert-danger-border, fn.color(danger));
+    background-color: var(
+      --theme-alert-danger-bg,
+      color.adjust(fn.color(success), $lightness: 45%)
+    );
+    color: var(
+      --theme-alert-danger-fg,
+      color.adjust(fn.color(primary), $lightness: -20%)
+    );
+  }
+
+  &--warning {
+    border-color: var(--theme-alert-warning-border, fn.color(warning));
+    background-color: var(
+      --theme-alert-warning-bg,
+      color.adjust(fn.color(success), $lightness: 40%)
+    );
+    color: var(
+      --theme-alert-warning-fg,
+      color.adjust(fn.color(primary), $lightness: -20%)
+    );
+  }
+
+  &--info {
+    border-color: var(--theme-alert-info-border, fn.color(info));
+    background-color: var(
+      --theme-alert-info-bg,
+      color.adjust(fn.color(success), $lightness: 45%)
+    );
+    color: var(
+      --theme-alert-info-fg,
+      color.adjust(fn.color(primary), $lightness: -20%)
+    );
+  }
+
+  &__title {
+    font-weight: bold;
+    margin-bottom: fn.space(xs);
+  }
+
+  &__close {
+    position: absolute;
+    right: fn.space(sm);
+    top: fn.space(sm);
+    background: none;
+    border: none;
+    color: fn.color(muted);
+    font-size: 1.25rem;
+    cursor: pointer;
+
+    &:hover {
+      color: fn.color(danger);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--theme-accent, var(--theme-primary));
+      outline-offset: 2px;
+    }
+  }
+}

package/src/components/feedback/_message.scss

@@ -0,0 +1,26 @@
+// components/feedback/_message.scss
+
+@use "../../abstracts/functions" as fn;
+@use "sass:color";
+
+.message {
+  padding: fn.space(sm);
+  font-size: 0.875rem;
+  border-radius: fn.radius(sm);
+  color: fn.color(dark);
+
+  &--success {
+    background-color: color.adjust(fn.color(success), $lightness: 40%);
+    color: color.adjust(fn.color(primary), $lightness: -20%)
+  }
+
+  &--error {
+    background-color: color.adjust(fn.color(danger), $lightness: 40%);
+    color: color.adjust(fn.color(primary), $lightness: -20%)
+  }
+
+  &--info {
+    background-color: color.adjust(fn.color(success), $lightness: 40%);
+    color: color.adjust(fn.color(primary), $lightness: -20%)
+  }
+}

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

@@ -0,0 +1,118 @@
+// components/feedback/_notification-center.scss
+
+@use "../../abstracts/functions" as fn;
+
+.notification-center {
+  position: var(--ce-nc-position, fixed);
+  top: var(--ce-nc-top, #{fn.space(lg)});
+  right: var(--ce-nc-right, #{fn.space(lg)});
+  width: var(--ce-nc-width, 350px);
+  max-width: var(--ce-nc-max-width, 90vw);
+  z-index: var(--ce-nc-z, #{fn.z(toast)});
+  display: var(--ce-nc-display, flex);
+  flex-direction: var(--ce-nc-direction, column);
+  gap: var(--ce-nc-gap, #{fn.space(sm)});
+
+  &__notification {
+    background: var(
+      --ce-nc-item-bg,
+      var(--theme-notification-bg, #{fn.color(white)})
+    );
+    color: var(
+      --ce-nc-item-color,
+      var(--theme-notification-fg, #{fn.color(dark)})
+    );
+    border-radius: var(--ce-nc-item-radius, #{fn.radius(md)});
+    box-shadow: var(--ce-nc-item-shadow, #{fn.shadow(sm)});
+    border-width: var(--ce-nc-item-border-width, 1px);
+    border-style: var(--ce-nc-item-border-style, solid);
+    border-color: var(
+      --ce-nc-item-border,
+      var(--theme-notification-border, #{fn.color(muted)})
+    );
+    padding: var(--ce-nc-item-padding, #{fn.space(md)});
+    font-size: var(--ce-nc-item-size, 1rem);
+    display: var(--ce-nc-item-display, flex);
+    align-items: var(--ce-nc-item-align, flex-start);
+    gap: var(--ce-nc-item-gap, #{fn.space(sm)});
+    position: var(--ce-nc-item-position, relative);
+    animation: var(--ce-nc-item-animation, fade-in 0.3s ease-in-out);
+
+    &.success {
+      border-left: var(
+        --ce-nc-item-success-border,
+        4px solid var(--theme-notification-success, #{fn.color(success)})
+      );
+    }
+    &.error {
+      border-left: var(
+        --ce-nc-item-error-border,
+        4px solid var(--theme-notification-error, #{fn.color(danger)})
+      );
+    }
+    &.info {
+      border-left: var(
+        --ce-nc-item-info-border,
+        4px solid var(--theme-notification-info, #{fn.color(info)})
+      );
+    }
+    &.warning {
+      border-left: var(
+        --ce-nc-item-warning-border,
+        4px solid var(--theme-notification-warning, #{fn.color(warning)})
+      );
+    }
+
+    &:focus-visible {
+      outline: var(
+        --ce-nc-item-focus-outline,
+        2px solid var(--theme-accent, var(--theme-primary))
+      );
+      outline-offset: var(--ce-nc-item-focus-offset, 2px);
+    }
+  }
+
+  &__close {
+    position: var(--ce-nc-close-position, absolute);
+    top: var(--ce-nc-close-top, #{fn.space(sm)});
+    right: var(--ce-nc-close-right, #{fn.space(sm)});
+    background: var(--ce-nc-close-bg, none);
+    border: var(--ce-nc-close-border, none);
+    color: var(
+      --ce-nc-close-color,
+      var(--theme-notification-close, #{fn.color(muted)})
+    );
+    font-size: var(--ce-nc-close-size, 1.25rem);
+    cursor: var(--ce-nc-close-cursor, pointer);
+    transition: var(--ce-nc-close-transition, color 0.2s);
+
+    &:hover,
+    &:focus-visible {
+      color: var(
+        --ce-nc-close-hover-color,
+        var(--theme-notification-close-hover, #{fn.color(danger)})
+      );
+      outline: var(
+        --ce-nc-close-focus-outline,
+        2px solid var(--theme-accent, var(--theme-primary))
+      );
+      outline-offset: var(--ce-nc-close-focus-offset, 2px);
+    }
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Accessibility notes:
+// - Use role="status" or role="alert" on notifications
+// - aria-live="polite" or "assertive" for announcements
+// - Keyboard navigation: tab to close button

package/src/components/feedback/_progress-bar.scss

@@ -0,0 +1,48 @@
+// components/feedback/_progress-bar.scss
+
+@use "../../abstracts/functions" as fn;
+
+.progress-bar {
+  width: var(--ce-progress-bar-width, 100%);
+  background-color: var(
+    --ce-progress-bar-bg,
+    var(--theme-progress-bg, #{fn.color(light)})
+  );
+  height: var(--ce-progress-bar-height, 0.75rem);
+  border-radius: var(--ce-progress-bar-radius, #{fn.radius(md)});
+  overflow: var(--ce-progress-bar-overflow, hidden);
+
+  &__fill {
+    height: var(--ce-progress-bar-fill-height, 100%);
+    width: var(--ce-progress-bar-fill-width, 0%);
+    background-color: var(
+      --ce-progress-bar-fill-bg,
+      var(--theme-progress-fill, #{fn.color(primary)})
+    );
+    transition: var(
+      --ce-progress-bar-fill-transition,
+      width 0.3s ease-in-out
+    );
+
+    &--success {
+      background-color: var(
+        --ce-progress-bar-success-bg,
+        var(--theme-progress-success, #{fn.color(success)})
+      );
+    }
+
+    &--danger {
+      background-color: var(
+        --ce-progress-bar-danger-bg,
+        var(--theme-progress-danger, #{fn.color(danger)})
+      );
+    }
+
+    &--warning {
+      background-color: var(
+        --ce-progress-bar-warning-bg,
+        var(--theme-progress-warning, #{fn.color(warning)})
+      );
+    }
+  }
+}

package/src/components/feedback/_skeleton.scss

@@ -0,0 +1,47 @@
+// components/feedback/_skeleton.scss
+
+@use "../../abstracts/functions" as fn;
+
+.skeleton {
+  background-color: var(--theme-skeleton-bg, fn.color(light));
+  border-radius: fn.radius(sm);
+  width: 100%;
+  height: 1rem;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -50%;
+    height: 100%;
+    width: 50%;
+    background: linear-gradient(
+      to right,
+      transparent,
+      var(--theme-skeleton-shimmer, rgba(fn.color(white), 0.3)),
+      transparent
+    );
+    animation: shimmer 1.5s infinite;
+  }
+
+  &--sm {
+    height: 0.75rem;
+  }
+  &--lg {
+    height: 1.5rem;
+  }
+
+  &--circle {
+    border-radius: fn.radius(circle);
+    height: 2rem;
+    width: 2rem;
+  }
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}

package/src/components/feedback/_snackbar.scss

@@ -0,0 +1,38 @@
+// components/feedback/_snackbar.scss
+
+@use "../../abstracts/functions" as fn;
+
+.snackbar {
+  position: fixed;
+  bottom: fn.space(lg);
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--theme-snackbar-bg, fn.color(dark));
+  color: var(--theme-snackbar-fg, fn.color(white));
+  padding: fn.space(sm) fn.space(md);
+  border-radius: fn.radius(sm);
+  box-shadow: fn.shadow(md);
+  font-size: 0.875rem;
+  z-index: fn.z(toast);
+  animation: fade-in 0.3s ease-in-out;
+
+  &--success {
+    background-color: var(--theme-snackbar-success, fn.color(success));
+  }
+
+  &--error {
+    background-color: var(--theme-snackbar-error, fn.color(danger));
+  }
+
+  &--info {
+    background-color: var(--theme-snackbar-info, fn.color(info));
+  }
+
+  &--warning {
+    background-color: var(--theme-snackbar-warning, fn.color(warning));
+    &:focus-visible {
+      outline: 2px solid var(--theme-accent, var(--theme-primary));
+      outline-offset: 2px;
+    }
+  }
+}