rift-ds 1.18.0 → 1.19.0

package/components/Tooltip/Tooltip.js

@@ -3,6 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useId, useEffect, isValidElement, cloneElement } from "react";
 import { useLayer } from "../../behaviors/useLayer.js";
 import { useAnchoredPosition } from "../../behaviors/useAnchoredPosition.js";
+import { useTopLayer } from "../../behaviors/useTopLayer.js";
 import "./Tooltip.css";
 import { MOTION_HOVER_SHOW_DELAY_MS, MOTION_HOVER_HIDE_DELAY_MS } from "../../tokens/motion.js";
 const clamp = (value, min, max) => max < min ? min : Math.min(Math.max(value, min), max);
@@ -54,6 +55,7 @@ const Tooltip = React.forwardRef(
         setVisible(false);
       }
     });
+    useTopLayer({ open: visible, panelRef });
     useAnchoredPosition({
       open: visible,
       anchorRef,
@@ -103,10 +105,20 @@ const Tooltip = React.forwardRef(
         },
         children: [
           trigger,
-          /* @__PURE__ */ jsxs("span", { ref: panelRef, className: panelClasses, role: "tooltip", id: tooltipId, children: [
-            content,
-            /* @__PURE__ */ jsx("span", { className: `${baseClass}__arrow` })
-          ] })
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              ref: panelRef,
+              className: panelClasses,
+              role: "tooltip",
+              id: tooltipId,
+              popover: "manual",
+              children: [
+                content,
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__arrow` })
+              ]
+            }
+          )
         ]
       }
     );

package/index.js

@@ -147,7 +147,7 @@ import { ThreadPanel } from "./components/ThreadPanel/ThreadPanel.js";
 import { ThreadTabs } from "./components/ThreadTabs/ThreadTabs.js";
 import { Timeline } from "./components/Timeline/Timeline.js";
 import { TimePicker } from "./components/TimePicker/TimePicker.js";
-import { Toast, ToastProvider, useToast } from "./components/Toast/Toast.js";
+import { Toast, ToastProvider, useOptionalToast, useToast } from "./components/Toast/Toast.js";
 import { ToggleGroup } from "./components/ToggleGroup/ToggleGroup.js";
 import { SwitchIndicator, ToggleSwitch } from "./components/ToggleSwitch/ToggleSwitch.js";
 import { Toolbar, ToolbarSeparator } from "./components/Toolbar/Toolbar.js";
@@ -386,6 +386,7 @@ export {
   useAttachments,
   useColorMode,
   useField,
+  useOptionalToast,
   useShaderField,
   useStreamReveal,
   useToast

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rift-ds",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "description": "An AI-ready React design system: accessible components on composable tokens, light/dark theming, and CSS-variable overrides.",
   "author": {
     "name": "Robert Ritacca",

package/tokens/motion.d.ts

@@ -18,6 +18,8 @@ export declare const MOTION_HOVER_SHOW_DELAY_MS = 300;
 export declare const MOTION_HOVER_HIDE_DELAY_MS = 150;
 /** How long a transient notification stays before dismissing itself. */
 export declare const MOTION_AUTO_DISMISS_MS = 5000;
+/** How long a notification carrying an action, such as an Undo, stays before dismissing itself: time to read it and decide. */
+export declare const MOTION_ACTION_DISMISS_MS = 10000;
 /** How long an exiting element's unmount waits for its CSS exit animation — mirrors --motion-duration-base. */
 export declare const MOTION_EXIT_SYNC_MS = 200;
 /** Interval between automatic slide advances. */

package/tokens/motion.js

@@ -1,6 +1,7 @@
 const MOTION_HOVER_SHOW_DELAY_MS = 300;
 const MOTION_HOVER_HIDE_DELAY_MS = 150;
 const MOTION_AUTO_DISMISS_MS = 5e3;
+const MOTION_ACTION_DISMISS_MS = 1e4;
 const MOTION_EXIT_SYNC_MS = 200;
 const MOTION_AUTOPLAY_INTERVAL_MS = 5e3;
 const MOTION_FEEDBACK_RESET_MS = 2e3;
@@ -24,6 +25,7 @@ const MOTION_CONTEXT_RESTORE_WAIT_MS = 700;
 const MOTION_ANNOUNCE_DEBOUNCE_MS = 500;
 const MOTION_SHORTCUT_SEQUENCE_MS = 1e3;
 export {
+  MOTION_ACTION_DISMISS_MS,
   MOTION_ANNOUNCE_DEBOUNCE_MS,
   MOTION_AUTOPLAY_INTERVAL_MS,
   MOTION_AUTO_DISMISS_MS,

package/tokens/tokens-light.css

@@ -299,8 +299,9 @@
   --color-pixel-ink-5: var(--primitive-blue-07);
   --color-pixel-ink-6: var(--primitive-purple-08);
 
-  /* Count badge - The solid pill a count rides on an icon's corner (a
-     toolbar's filter count, a tab's unread count, a bar's dot): the error
+  /* Count badge - The solid pill a count rides on an icon's corner or
+     trails a row with (a toolbar's filter count, a tab's unread count, a
+     nav row's count, a bar's dot): the error
      ramp at a step its figures read on, so it is seen at a glance. */
   --color-count-badge-bg: var(--primitive-red-08);
   --color-count-badge-text: var(--primitive-neutral-01);
@@ -399,7 +400,7 @@
      a modal sits level with the app rail it covers by DOM order. */
   --layer-dropdown: 10;        /* menus and panels anchored to a control */
   --layer-sticky: 10;          /* bars pinned to an edge while the page scrolls */
-  --layer-floating: 50;        /* tooltips, hover cards, context menus */
+  --layer-floating: 50;        /* hover cards, context menus; tooltips without the top layer */
   --layer-nav: 80;             /* fixed mobile navigation and its trigger */
   --layer-nav-scrim: 90;       /* the scrim behind the mobile nav drawer */
   --layer-nav-rail: 100;       /* the app rail and its open mobile drawer */