@justin_evo/evo-ui 1.0.1

package/src/css/notification.module.scss

@@ -0,0 +1,691 @@
+@use 'base/variables' as *;
+@use 'base/color' as *;
+
+// ============================================================
+// EvoNotification — toast + inbox stylesheet
+// ------------------------------------------------------------
+// Two visual subsystems share this file:
+//   1. Toast (transient, portaled to body)
+//   2. Bell + Panel + Item (inbox center)
+// All colour comes from --evo-color-* tokens so dark mode is
+// automatic. Six anchors and a strict mobile breakpoint below.
+// ============================================================
+
+// ---------- Animations ----------
+
+@keyframes evoToastEnterRight {
+  from { transform: translateX(110%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+}
+
+@keyframes evoToastEnterLeft {
+  from { transform: translateX(-110%); opacity: 0; }
+  to   { transform: translateX(0);     opacity: 1; }
+}
+
+@keyframes evoToastEnterTop {
+  from { transform: translateY(-110%); opacity: 0; }
+  to   { transform: translateY(0);     opacity: 1; }
+}
+
+@keyframes evoToastEnterBottom {
+  from { transform: translateY(110%); opacity: 0; }
+  to   { transform: translateY(0);    opacity: 1; }
+}
+
+@keyframes evoToastExit {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.92); }
+}
+
+@keyframes evoPanelEnter {
+  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0)   scale(1); }
+}
+
+// ---------- Toaster (portal root) ----------
+
+.toasterRoot {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 10000;
+}
+
+// Visually-hidden screen-reader live region. Always present in the DOM so
+// announcements fire reliably when its text content changes.
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+.anchor {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  max-width: min(420px, calc(100vw - 2rem));
+  pointer-events: none;
+}
+
+.anchor > * {
+  pointer-events: auto;
+}
+
+// Stacking direction. The newest toast is always rendered last in the DOM and
+// must sit flush against the anchored screen edge — top anchors grow downward
+// from the top, bottom anchors grow upward from the bottom. So top anchors
+// reverse the column (DOM-last renders visually first/topmost) while bottom
+// anchors keep the natural column (DOM-last renders visually last/bottom-most).
+// The depth offset in ToastRow then pushes older cards *away* from that edge.
+.anchor-top-left    { top: 0; left: 0; align-items: flex-start; flex-direction: column-reverse; }
+.anchor-top-center  { top: 0; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
+.anchor-top-right   { top: 0; right: 0; align-items: flex-end; flex-direction: column-reverse; }
+.anchor-bottom-left { bottom: 0; left: 0; align-items: flex-start; }
+.anchor-bottom-center {
+  bottom: 0; left: 50%; transform: translateX(-50%);
+  align-items: center;
+}
+.anchor-bottom-right {
+  bottom: 0; right: 0; align-items: flex-end;
+}
+
+// Mobile: pin to top or bottom edge, full-width.
+@media (max-width: 23.4375rem) { // 375px
+  .anchor {
+    left: 0 !important;
+    right: 0 !important;
+    transform: none !important;
+    max-width: 100%;
+    padding: 0.5rem;
+    align-items: stretch;
+  }
+}
+
+.overflowPill {
+  font-size: $text-xs;
+  font-weight: 600;
+  color: $color-text-secondary;
+  background-color: $color-surface-elevated;
+  border: 1px solid $color-border;
+  border-radius: $radius-full;
+  padding: 0.25rem 0.625rem;
+  box-shadow: $shadow-sm;
+}
+
+// ---------- Single toast card ----------
+
+.toast {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 0.75rem 0.875rem;
+  min-width: 280px;
+  max-width: 100%;
+  background-color: $color-surface-elevated;
+  color: $color-text-primary;
+  border: 1px solid $color-border;
+  border-radius: $radius-md;
+  box-shadow: $shadow-xl;
+  font-family: $font-sans;
+  font-size: $text-sm;
+  line-height: 1.45;
+  // Left colour bar (severity)
+  border-left-width: 3px;
+  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
+              opacity 220ms ease;
+  will-change: transform, opacity;
+
+  // Width parity on mobile.
+  @media (max-width: 23.4375rem) {
+    min-width: 0;
+    width: 100%;
+  }
+}
+
+// Anchor-aware enter animations applied via parent.
+.anchor-top-right    > .toast { animation: evoToastEnterRight 240ms cubic-bezier(0.16, 1, 0.3, 1); }
+.anchor-bottom-right > .toast { animation: evoToastEnterRight 240ms cubic-bezier(0.16, 1, 0.3, 1); }
+.anchor-top-left     > .toast { animation: evoToastEnterLeft  240ms cubic-bezier(0.16, 1, 0.3, 1); }
+.anchor-bottom-left  > .toast { animation: evoToastEnterLeft  240ms cubic-bezier(0.16, 1, 0.3, 1); }
+.anchor-top-center   > .toast { animation: evoToastEnterTop   240ms cubic-bezier(0.16, 1, 0.3, 1); }
+.anchor-bottom-center > .toast { animation: evoToastEnterBottom 240ms cubic-bezier(0.16, 1, 0.3, 1); }
+
+.toast.exiting {
+  animation: evoToastExit 180ms ease forwards;
+}
+
+.toast.noMotion,
+.toast.noMotion.exiting {
+  animation: none !important;
+  transition: opacity 1ms linear !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast,
+  .toast.exiting {
+    animation: none !important;
+    transition: opacity 1ms linear !important;
+  }
+}
+
+.sev-success {
+  border-left-color: $evo-success-color;
+  .toastIcon { background-color: $evo-success-color; color: $evo-success-fg; }
+}
+.sev-error {
+  border-left-color: $evo-danger-color;
+  .toastIcon { background-color: $evo-danger-color; color: $evo-danger-fg; }
+}
+.sev-warning {
+  border-left-color: $evo-warning-color;
+  .toastIcon { background-color: $evo-warning-color; color: $evo-warning-text; }
+}
+.sev-info {
+  border-left-color: $evo-info-color;
+  .toastIcon { background-color: $evo-info-color; color: $evo-info-fg; }
+}
+
+.toastIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  font-size: $text-xs;
+  font-weight: 700;
+  flex-shrink: 0;
+  margin-top: 0.0625rem;
+}
+
+.toastBody {
+  flex: 1;
+  min-width: 0;
+}
+
+.toastTitle {
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.toastDescription {
+  margin-top: 0.1875rem;
+  color: $color-text-secondary;
+  font-size: $text-sm;
+}
+
+// Count badge for coalesced toasts (groupKey) — "×3" beside the title.
+.toastCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.125rem;
+  margin-left: 0.375rem;
+  padding: 0 0.3125rem;
+  font-size: $text-xs;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: $color-text-secondary;
+  background-color: $color-surface-sunken;
+  border: 1px solid $color-border;
+  border-radius: $radius-full;
+  vertical-align: middle;
+}
+
+// Determinate progress bar (toast.progress / EvoToastOptions.progress).
+// Pinned along the bottom edge of the card.
+.toastProgressTrack {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3px;
+  background-color: $color-border-subtle;
+  border-bottom-left-radius: $radius-md;
+  border-bottom-right-radius: $radius-md;
+  overflow: hidden;
+}
+
+.toastProgressFill {
+  height: 100%;
+  width: 100%;
+  transform-origin: left center;
+  background-color: $evo-primary-color;
+  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+// Fill tracks the toast severity so a resolved progress toast reads green.
+.sev-success .toastProgressFill { background-color: $evo-success-color; }
+.sev-error   .toastProgressFill { background-color: $evo-danger-color; }
+.sev-warning .toastProgressFill { background-color: $evo-warning-color; }
+.sev-info    .toastProgressFill { background-color: $evo-info-color; }
+
+.toast.noMotion .toastProgressFill { transition: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .toastProgressFill { transition: none; }
+}
+
+.toastAction {
+  align-self: center;
+  font: inherit;
+  font-weight: 600;
+  font-size: $text-xs;
+  color: $evo-primary-color;
+  background: transparent;
+  border: 1px solid $color-border;
+  border-radius: $radius-sm;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+  flex-shrink: 0;
+  min-height: 1.75rem;
+  transition: background-color $transition-fast, border-color $transition-fast;
+
+  &:hover { background-color: $color-surface-hover; }
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 1px;
+  }
+}
+
+.toastClose {
+  align-self: flex-start;
+  background: transparent;
+  border: none;
+  color: $color-text-muted;
+  font-size: $text-xs;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: $radius-sm;
+  flex-shrink: 0;
+  transition: color $transition-fast, background-color $transition-fast;
+
+  &:hover { color: $color-text-primary; background-color: $color-surface-hover; }
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 1px;
+  }
+}
+
+// ---------- Bell ----------
+
+.bellWrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.bell {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: $radius-full;
+  color: $color-text-primary;
+  cursor: pointer;
+  font: inherit;
+  transition: background-color $transition-fast, color $transition-fast, border-color $transition-fast;
+
+  &:hover { background-color: $color-surface-hover; }
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 2px;
+  }
+}
+
+.bell-ghost  { background-color: transparent; }
+.bell-solid  {
+  background-color: $color-surface-elevated;
+  border-color: $color-border;
+}
+
+.bell-sm { width: 2rem;    height: 2rem; }
+.bell-md { width: 2.75rem; height: 2.75rem; } // 44px — WCAG touch target
+.bell-lg { width: 3rem;    height: 3rem; }
+
+.bellOpen {
+  background-color: $color-surface-hover;
+}
+
+.bellBadge {
+  position: absolute;
+  top: 0.125rem;
+  right: 0.125rem;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  background-color: $evo-danger-color;
+  color: $evo-danger-fg;
+  font-size: 0.625rem;
+  font-weight: 700;
+  border-radius: $radius-full;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid $color-surface;
+  line-height: 1;
+}
+
+.bellBadgeZero {
+  background-color: $color-border-strong;
+  color: $color-text-inverted;
+}
+
+// ---------- Panel placement (anchored to Bell) ----------
+
+.bellPanelHost {
+  position: absolute;
+  z-index: 9001;
+  min-width: 22rem;
+  max-width: 24rem;
+
+  @media (max-width: 30rem) {
+    position: fixed;
+    top: auto !important;
+    bottom: auto !important;
+    left: 0.5rem !important;
+    right: 0.5rem !important;
+    min-width: 0;
+    max-width: none;
+  }
+}
+
+.place-bottom-end   { top: calc(100% + 0.5rem); right: 0; }
+.place-bottom-start { top: calc(100% + 0.5rem); left: 0; }
+.place-bottom       { top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); }
+.place-top-end      { bottom: calc(100% + 0.5rem); right: 0; }
+.place-top-start    { bottom: calc(100% + 0.5rem); left: 0; }
+
+// ---------- Panel ----------
+
+.panel {
+  background-color: $color-surface-elevated;
+  border: 1px solid $color-border;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-xl;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: $font-sans;
+  color: $color-text-primary;
+  animation: evoPanelEnter 160ms ease;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+.panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid $color-border;
+  gap: 0.5rem;
+}
+
+.panelTitle {
+  font-weight: 600;
+  font-size: $text-sm;
+}
+
+.panelHeaderActions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.panelMarkAll {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  font-size: $text-xs;
+  font-weight: 600;
+  color: $evo-primary-color;
+  padding: 0.25rem 0.5rem;
+  border-radius: $radius-sm;
+  min-height: 1.75rem;
+
+  &:hover { background-color: $color-surface-hover; }
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 1px;
+  }
+}
+
+.panelClose {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: $color-text-muted;
+  padding: 0.25rem;
+  font-size: $text-xs;
+  border-radius: $radius-sm;
+  min-height: 1.75rem;
+  min-width: 1.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover { color: $color-text-primary; background-color: $color-surface-hover; }
+}
+
+.panelBody {
+  overflow-y: auto;
+}
+
+.panelState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1.5rem;
+  color: $color-text-secondary;
+  font-size: $text-sm;
+  text-align: center;
+}
+
+.panelStateError {
+  color: $evo-danger-color;
+}
+
+.itemList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    border-bottom: 1px solid $color-border-subtle;
+
+    &:last-child { border-bottom: none; }
+  }
+}
+
+// ---------- Empty state ----------
+
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 2rem 1rem;
+  text-align: center;
+}
+
+.emptyIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  background-color: $color-surface-sunken;
+  color: $color-text-muted;
+}
+
+.emptyTitle {
+  font-weight: 600;
+  font-size: $text-sm;
+  color: $color-text-primary;
+}
+
+.emptyHint {
+  font-size: $text-xs;
+  color: $color-text-secondary;
+}
+
+// ---------- Item ----------
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 0.75rem 1rem 0.75rem 1.25rem;
+  background-color: transparent;
+  transition: background-color $transition-fast;
+
+  &.itemUnread { background-color: color-mix(in srgb, $evo-primary-color 6%, transparent); }
+}
+
+.itemInteractive {
+  cursor: pointer;
+
+  &:hover { background-color: $color-surface-hover; }
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: -2px;
+  }
+}
+
+.itemUnreadDot {
+  position: absolute;
+  left: 0.5rem;
+  top: 1rem;
+  width: 0.4375rem;
+  height: 0.4375rem;
+  border-radius: 50%;
+  background-color: $evo-primary-color;
+  opacity: 1;
+
+  // Hidden when read (parent doesn't get .itemUnread).
+  .item:not(.itemUnread) & { opacity: 0; }
+}
+
+.itemMedia {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: $color-text-inverted;
+  font-size: $text-xs;
+  font-weight: 700;
+  flex-shrink: 0;
+  overflow: hidden;
+
+  &.sev-success { background-color: $evo-success-color; }
+  &.sev-error   { background-color: $evo-danger-color; }
+  &.sev-warning { background-color: $evo-warning-color; }
+  &.sev-info    { background-color: $evo-info-color; }
+}
+
+.itemAvatar {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.itemMediaGlyph {
+  line-height: 1;
+}
+
+.itemBody {
+  flex: 1;
+  min-width: 0;
+}
+
+.itemTitle {
+  font-size: $text-sm;
+  font-weight: 600;
+  color: $color-text-primary;
+  line-height: 1.35;
+}
+
+.itemDescription {
+  margin-top: 0.125rem;
+  font-size: $text-sm;
+  color: $color-text-secondary;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.itemMeta {
+  margin-top: 0.375rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: $text-xs;
+  color: $color-text-muted;
+}
+
+.itemTimestamp {
+  font-variant-numeric: tabular-nums;
+}
+
+.itemAction {
+  background: transparent;
+  border: 1px solid $color-border;
+  color: $evo-primary-color;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  font: inherit;
+  font-size: $text-xs;
+  font-weight: 600;
+  padding: 0.1875rem 0.5rem;
+  min-height: 1.5rem;
+
+  &:hover { background-color: $color-surface-hover; }
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 1px;
+  }
+}
+
+.itemDismiss {
+  align-self: flex-start;
+  background: transparent;
+  border: none;
+  color: $color-text-muted;
+  font-size: $text-xs;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: $radius-sm;
+  opacity: 0;
+  transition: opacity $transition-fast, color $transition-fast;
+  flex-shrink: 0;
+
+  .item:hover &,
+  &:focus-visible { opacity: 1; }
+  &:hover { color: $color-text-primary; }
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 1px;
+  }
+}