@revolist/ui 4.0.2-rc → 4.0.2

package/status-feedback/status-feedback.scss

@@ -1,4 +1,14 @@
 @use '../styles/motion';
+@keyframes rv-status-item-exit {
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+.rv-status-feedback__item[data-exiting='true'] {
+  animation: rv-status-item-exit 160ms ease-in both;
+  pointer-events: none;
+}
 .rv-status-feedback,
 .rv-status-badge {
   --rv-status-warning: var(--rv-ui-warning);
@@ -10,13 +20,15 @@
   line-height: 1.45;
   box-sizing: border-box;
 }
-:where(.dark, [data-theme^='dark'], revo-grid[theme^='dark']) :is(.rv-status-feedback, .rv-status-badge) {
+:where(.dark, [data-theme^='dark'], revo-grid[theme^='dark'])
+  :is(.rv-status-feedback, .rv-status-badge) {
   --rv-status-warning: var(--rv-ui-warning);
   --rv-status-danger: var(--rv-ui-danger);
   --rv-status-success: var(--rv-ui-success);
 }
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme]):not(.dark) :is(.rv-status-feedback, .rv-status-badge) {
+  :root:not([data-theme]):not(.dark)
+    :is(.rv-status-feedback, .rv-status-badge) {
     --rv-status-warning: var(--rv-ui-warning);
     --rv-status-danger: var(--rv-ui-danger);
     --rv-status-success: var(--rv-ui-success);
@@ -76,10 +88,20 @@
     border-block-start: 1px solid var(--rv-ui-border);
   }
 }
-.rv-status-feedback__copy { grid-column: 2; min-inline-size: 0; overflow-wrap: anywhere; }
-.rv-status-feedback__title { font-weight: var(--rv-ui-font-weight-medium, 500); }
+.rv-status-feedback__copy {
+  grid-column: 2;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+.rv-status-feedback__title {
+  font-weight: var(--rv-ui-font-weight-medium, 500);
+}
 .rv-status-feedback__description,
-.rv-status-feedback__detail { font-size: 13px; color: var(--rv-ui-text-muted); margin-block-start: 4px; }
+.rv-status-feedback__detail {
+  font-size: 13px;
+  color: var(--rv-ui-text-muted);
+  margin-block-start: 4px;
+}
 .rv-status-feedback__icon {
   display: inline-flex;
   align-items: center;
@@ -88,14 +110,28 @@
   block-size: 18px;
   margin-block-start: 2px;
   color: var(--rv-ui-text-subtle);
-  transition: color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+  transition: color var(--rv-ui-motion-fast, 120ms)
+    var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
   flex: none;
-  svg { display: block; inline-size: 100%; block-size: 100%; fill: currentColor; }
+  svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    fill: currentColor;
+  }
+}
+[data-tone='warning'] > .rv-status-feedback__icon {
+  color: var(--rv-status-warning);
+}
+[data-tone='danger'] > .rv-status-feedback__icon {
+  color: var(--rv-status-danger);
+}
+[data-tone='success'] > .rv-status-feedback__icon {
+  color: var(--rv-status-success);
+}
+.rv-status-feedback__icon--busy {
+  animation: rv-status-feedback-spin 1s linear infinite;
 }
-[data-tone='warning'] > .rv-status-feedback__icon { color: var(--rv-status-warning); }
-[data-tone='danger'] > .rv-status-feedback__icon { color: var(--rv-status-danger); }
-[data-tone='success'] > .rv-status-feedback__icon { color: var(--rv-status-success); }
-.rv-status-feedback__icon--busy { animation: rv-status-feedback-spin 1s linear infinite; }
 .rv-status-feedback__actions {
   display: flex;
   flex-wrap: wrap;
@@ -122,27 +158,61 @@
   border-radius: var(--rv-ui-radius, 6px);
   background: var(--rv-ui-surface);
   font-size: 13px;
-  transition: background-color var(--rv-ui-motion-normal, 160ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)), border-color var(--rv-ui-motion-normal, 160ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)), color var(--rv-ui-motion-normal, 160ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
-  .rv-status-feedback__icon { inline-size: 14px; block-size: 14px; margin: 0; }
-  &[data-tone='warning'] { color: var(--rv-status-warning); }
-  &[data-tone='danger'] { color: var(--rv-status-danger); }
-  &[data-tone='success'] { color: var(--rv-status-success); }
+  transition:
+    background-color var(--rv-ui-motion-normal, 160ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    border-color var(--rv-ui-motion-normal, 160ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    color var(--rv-ui-motion-normal, 160ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
+  .rv-status-feedback__icon {
+    inline-size: 14px;
+    block-size: 14px;
+    margin: 0;
+  }
+  &[data-tone='warning'] {
+    color: var(--rv-status-warning);
+  }
+  &[data-tone='danger'] {
+    color: var(--rv-status-danger);
+  }
+  &[data-tone='success'] {
+    color: var(--rv-status-success);
+  }
   &:not([data-tone='neutral']) {
     background: color-mix(in srgb, currentColor 7%, var(--rv-ui-surface));
     border-color: color-mix(in srgb, currentColor 20%, var(--rv-ui-border));
   }
 }
 @container (max-width: 480px) {
-  .rv-status-feedback__item--multiple-actions > .rv-status-feedback__actions { grid-column: 2 / -1; justify-content: flex-start; padding: 0; }
+  .rv-status-feedback__item--multiple-actions > .rv-status-feedback__actions {
+    grid-column: 2 / -1;
+    justify-content: flex-start;
+    padding: 0;
+  }
 }
 @container (max-width: 340px) {
-  .rv-status-feedback__item { grid-template-columns: 18px minmax(0, 1fr); }
-  .rv-status-feedback__actions { grid-column: 2; justify-content: flex-start; padding: 0; }
+  .rv-status-feedback__item {
+    grid-template-columns: 18px minmax(0, 1fr);
+  }
+  .rv-status-feedback__actions {
+    grid-column: 2;
+    justify-content: flex-start;
+    padding: 0;
+  }
+}
+@keyframes rv-status-feedback-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
-@keyframes rv-status-feedback-spin { to { transform: rotate(360deg); } }
 @media (prefers-reduced-motion: reduce) {
-  .rv-status-feedback__icon--busy { animation: none; }
-  .rv-status-feedback__action { transition: none; }
+  .rv-status-feedback__icon--busy {
+    animation: none;
+  }
+  .rv-status-feedback__action {
+    transition: none;
+  }
 }
 
 /* Floating feedback uses the browser top layer and keeps its DOM theme inheritance. */
@@ -156,11 +226,20 @@
   padding: 0;
   display: none;
   z-index: 1000;
-  &::backdrop { background: transparent; pointer-events: none; }
+  &::backdrop {
+    background: transparent;
+    pointer-events: none;
+  }
+}
+.rv-status-feedback--collapsed .rv-status-feedback__header {
+  border-block-end: 0;
+  padding-block: 8px;
 }
-.rv-status-feedback--collapsed .rv-status-feedback__header { border-block-end: 0; padding-block: 8px; }
-.rv-status-feedback__items[hidden] { display: none; }
-.rv-status-feedback :is(.rv-status-feedback__toggle, .rv-status-feedback__close) {
+.rv-status-feedback__items[hidden] {
+  display: none;
+}
+.rv-status-feedback
+  :is(.rv-status-feedback__toggle, .rv-status-feedback__close) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -169,22 +248,39 @@
   min-width: 30px;
   min-height: 30px;
   padding: 6px;
-  .rv-status-feedback__icon { width: 12px; height: 12px; margin: 0; }
+  .rv-status-feedback__icon {
+    width: 12px;
+    height: 12px;
+    margin: 0;
+  }
 }
-:where(.dark, [data-theme^='dark'], revo-grid[theme^='dark']) .rv-status-feedback {
+:where(.dark, [data-theme^='dark'], revo-grid[theme^='dark'])
+  .rv-status-feedback {
   --rv-status-shadow: 0 12px 32px -8px var(--rv-ui-shadow);
 }
 
 .rv-status-feedback__header > .rv-status-feedback__icon {
   margin-block-start: 0;
-  &[data-tone='warning'] { color: var(--rv-status-warning); }
-  &[data-tone='danger'] { color: var(--rv-status-danger); }
+  &[data-tone='warning'] {
+    color: var(--rv-status-warning);
+  }
+  &[data-tone='danger'] {
+    color: var(--rv-status-danger);
+  }
 }
 
-.rv-status-feedback__toggle + .rv-status-feedback__close { margin-inline-start: 0; }
+.rv-status-feedback__toggle + .rv-status-feedback__close {
+  margin-inline-start: 0;
+}
 .rv-status-feedback--compact {
   font-size: 13px;
-  .rv-status-feedback__header { padding: 6px 10px; }
-  .rv-status-feedback__heading { font-size: 13px; }
-  .rv-status-feedback__item { padding: 10px; }
+  .rv-status-feedback__header {
+    padding: 6px 10px;
+  }
+  .rv-status-feedback__heading {
+    font-size: 13px;
+  }
+  .rv-status-feedback__item {
+    padding: 10px;
+  }
 }

package/status-feedback/types.d.ts

@@ -29,6 +29,10 @@ export interface StatusFeedbackLocaleText {
     readonly formatCount: (count: number) => string;
 }
 export interface StatusFeedbackPanelProps {
+    /** Component adapters only: dismiss settled neutral/success items after this delay. Disabled by default. */
+    readonly autoDismissMs?: number;
+    /** The owner removes the item after its exit animation. */
+    readonly onDismissItem?: (id: string) => void;
     readonly compact?: boolean;
     readonly onClose?: () => void;
     readonly closeLabel?: string;

package/status-feedback/use-auto-dismiss.d.ts

@@ -0,0 +1,3 @@
+import { StatusFeedbackItem } from './types';
+/** Timers follow individual items; the consumer remains the owner of removal. */
+export declare function useAutoDismiss(items: readonly StatusFeedbackItem[], duration?: number, onDismiss?: (id: string) => void): StatusFeedbackItem[];

package/styles/_activity-message.scss

@@ -8,7 +8,9 @@
   font-size: 13px;
   line-height: 1.5;
 }
-.rv-activity-message-avatar { padding-block-start: 10px; }
+.rv-activity-message-avatar {
+  padding-block-start: 10px;
+}
 .rv-activity-message-card {
   display: grid;
   grid-template-columns: minmax(0, 1fr) fit-content(35%);
@@ -21,11 +23,23 @@
   background: var(--rv-ui-surface-sunken);
   box-shadow: none;
 }
-.rv-activity-message-header { min-width: 0; overflow-wrap: anywhere; }
-.rv-activity-message-content { min-width: 0; overflow-wrap: anywhere; }
-.rv-activity-message-content--full { grid-column: 1 / -1; }
-.rv-activity-message-content > :first-child { margin-block-start: 0; }
-.rv-activity-message-content > :last-child { margin-block-end: 0; }
+.rv-activity-message-header {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.rv-activity-message-content {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.rv-activity-message-content--full {
+  grid-column: 1 / -1;
+}
+.rv-activity-message-content > :first-child {
+  margin-block-start: 0;
+}
+.rv-activity-message-content > :last-child {
+  margin-block-end: 0;
+}
 .rv-activity-message-time {
   grid-column: 2;
   grid-row: 1;
@@ -43,4 +57,7 @@
   flex-wrap: wrap;
   gap: 4px;
 }
-.rv-activity-message-details { grid-column: 2; min-width: 0; }
+.rv-activity-message-details {
+  grid-column: 2;
+  min-width: 0;
+}

package/styles/_alert.scss

@@ -8,28 +8,89 @@
   padding: 12px 16px;
   border: 1px solid var(--rv-ui-border);
   border-radius: var(--rv-ui-radius, 8px);
-  background: var(--rv-ui-surface);
+  background: var(--rv-alert-surface, var(--rv-ui-surface));
   color: var(--rv-ui-text);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   overflow-wrap: anywhere;
 }
-.rv-alert--with-icon { grid-template-columns: 16px minmax(0, 1fr); column-gap: 12px; }
-.rv-alert__icon { --rv-icon-size: 16px; display: inline-flex; width: 16px; height: 16px; margin-top: 2px; color: var(--rv-alert-tone, currentColor); }
-.rv-alert__icon svg { display: block; width: 16px; height: 16px; fill: currentColor; }
-.rv-alert__content { display: grid; min-width: 0; gap: 2px; }
-.rv-alert__title { font-weight: 500; }
-.rv-alert__description { color: var(--rv-ui-text-muted); }
-.rv-alert__content > p, .rv-alert__description > p { margin: 0; }
-.rv-alert--danger { --rv-alert-tone: var(--rv-ui-danger); color: var(--rv-alert-tone); }
-.rv-alert--danger .rv-alert__description { color: inherit; }
-.rv-alert--warning { --rv-alert-tone: var(--rv-ui-warning); }
-.rv-alert--success { --rv-alert-tone: var(--rv-ui-success); }
+.rv-alert--with-icon {
+  grid-template-columns: 16px minmax(0, 1fr);
+  column-gap: 12px;
+}
+.rv-alert__icon {
+  --rv-icon-size: 16px;
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  color: var(--rv-alert-tone, currentColor);
+}
+.rv-alert__icon svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+.rv-alert__content {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+.rv-alert__title {
+  font-weight: 500;
+}
+.rv-alert__description {
+  color: var(--rv-ui-text-muted);
+}
+.rv-alert__content > p,
+.rv-alert__description > p {
+  margin: 0;
+}
+.rv-alert--danger,
+.rv-alert--warning,
+.rv-alert--success {
+  border: 0;
+}
 
-.rv-alert--with-actions { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
-.rv-alert--with-icon.rv-alert--with-actions { grid-template-columns: 16px minmax(0, 1fr) auto; }
-.rv-alert__actions { display: flex; align-items: center; gap: 8px; }
-.rv-alert[hidden] { display: none; }
+.rv-alert--danger {
+  --rv-alert-tone: var(--rv-ui-danger);
+  --rv-alert-surface: var(--rv-ui-danger-surface);
+  color: var(--rv-alert-tone);
+}
+.rv-alert--danger .rv-alert__description {
+  color: inherit;
+}
+.rv-alert--warning {
+  --rv-alert-tone: var(--rv-ui-warning);
+  --rv-alert-surface: var(--rv-ui-warning-surface);
+}
+.rv-alert--success {
+  --rv-alert-tone: var(--rv-ui-success);
+  --rv-alert-surface: var(--rv-ui-success-surface);
+}
+
+.rv-alert--with-actions {
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: 12px;
+  align-items: center;
+}
+.rv-alert--with-icon.rv-alert--with-actions {
+  grid-template-columns: 16px minmax(0, 1fr) auto;
+}
+.rv-alert__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.rv-alert[hidden] {
+  display: none;
+}
 
-.rv-alert .rv-alert__icon > * { color: inherit; inline-size: 100%; block-size: 100%; margin: 0; }
+.rv-alert .rv-alert__icon > * {
+  color: inherit;
+  inline-size: 100%;
+  block-size: 100%;
+  margin: 0;
+}

package/styles/_cell-editor-frame.scss

@@ -0,0 +1,11 @@
+/** Shared active-cell frame; inset so the grid viewport cannot clip it. */
+@mixin cell-editor-frame {
+  border: 0;
+  border-radius: var(--rv-control-radius, 6px);
+  outline: 2px solid var(--rv-ui-accent, var(--rg-theme-primary, #2563eb));
+  outline-offset: -2px;
+
+  &[aria-invalid='true'] {
+    outline-color: var(--rv-ui-danger, #dc2626);
+  }
+}