@enigmax/primitives 0.19.1 → 0.21.0

package/dist/react/index.d.ts

@@ -20,7 +20,7 @@ export { RelativeTime, RelativeTimeProps } from './relative-time.js';
 export { R as RelativeTimeFormat, a as RelativeTimeOptions, b as RelativeTimePrecision, c as RelativeTimeStyle, d as RelativeTimeTense } from '../relative-time-YpRTG7YH.js';
 export { N as Notification, a as NotificationAction, b as NotificationInput, c as NotificationTone, e as NotificationsOptions } from '../notifications-BpVV6sel.js';
 export { Flag, FlagProps } from './flag.js';
-export { c as FlagFormat, d as FlagOptions, e as FlagShape, f as FlagSource, h as configureFlags, i as flagAttributes, k as flagName, l as flagSrc, m as flagView, n as normalizeFlagCode } from '../flags-fLwIl2hG.js';
+export { c as FlagFormat, d as FlagOptions, e as FlagShape, f as FlagSource, h as configureFlags, i as flagAttributes, k as flagName, l as flagSrc, m as flagView, n as normalizeFlagCode } from '../flags-BQU1V9rE.js';
 export { PaletteContent, PaletteContextValue, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteListProps, PaletteRoot, PaletteRootProps, PaletteRow, PaletteSection, PaletteTrigger, SearchPalette, SearchPaletteProps, usePaletteContext } from './palette.js';
 export { R as RecentEntry, b as RecentStore, e as createRecentStore, g as groupRows, i as isPaletteShortcut, m as moveActive, r as recentKey, s as shortcutLabel } from '../palette-D7iuQh_T.js';
 

package/dist/react/index.js

@@ -1,8 +1,8 @@
 "use client";
 export { useInput } from '../chunk-U3V4EHOB.js';
 export { PasswordStrength } from '../chunk-XQHCZAPJ.js';
-export { Flag } from '../chunk-XPKWJD5O.js';
-export { Toaster } from '../chunk-ZCUFYBPB.js';
+export { Flag } from '../chunk-NPHRS2Q7.js';
+export { Toaster } from '../chunk-JCCL7XKC.js';
 export { useMarquee } from '../chunk-ZWR2EXHQ.js';
 export { useSearch } from '../chunk-QQFNAKMY.js';
 export { useNetworkState } from '../chunk-S653GLSF.js';
@@ -10,7 +10,7 @@ export { createNotificationQueue, defaultQueue, useNotifications } from '../chun
 export { RelativeTime } from '../chunk-OCMI7R6H.js';
 import '../chunk-KJINGUQN.js';
 export { estimatePasswordStrength, generatePassword } from '../chunk-HC2ME5PU.js';
-export { configureFlags, flagAttributes, flagName, flagSrc, flagView, normalizeFlagCode } from '../chunk-T4F3BWR5.js';
+export { configureFlags, flagAttributes, flagName, flagSrc, flagView, normalizeFlagCode } from '../chunk-LMZJBOZG.js';
 import '../chunk-UOSSNUSC.js';
 import '../chunk-2QFTRNAZ.js';
 import '../chunk-SNYUBXWQ.js';

package/dist/react/toast.d.ts

@@ -1,17 +1,8 @@
 import { d as Notifications, N as Notification } from '../notifications-BpVV6sel.js';
+export { a as NotificationAction, b as NotificationInput, c as NotificationTone } from '../notifications-BpVV6sel.js';
 import { ReactNode, CSSProperties } from 'react';
+export { createNotificationQueue, defaultQueue, useNotifications } from './notifications.js';
 
-/**
- * `<Toaster />` - the stack, the movement and the gestures. No colours.
- *
- * The queue underneath already owns ordering, dedupe by key, sticky errors and timers that
- * HOLD while the tab is hidden. What this adds is everything you cannot express in a queue:
- * a toast that is on its way out is still on screen, a pointer resting on the stack must
- * stop the clock, and a swipe has to follow the finger before it decides anything.
- *
- * Every part carries a data attribute, so the theme is a stylesheet you own. `enigma add
- * toast --copy` writes one.
- */
 type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 interface ToasterProps {
     /** Which queue to render. The shared one by default. */
@@ -27,6 +18,16 @@ interface ToasterProps {
     swipeThreshold?: number;
     /** Render a toast yourself. The default renders title, body and the action. */
     children?: (notification: Notification, controls: ToastControls) => ReactNode;
+    /** How many toasts are drawn at once. The rest wait behind them. Default 3. */
+    visibleCount?: number;
+    /** Fan the stack out permanently, instead of only while the pointer is on it. */
+    expand?: boolean;
+    /**
+     * Inject the theme. On by default - see the note above; `false` leaves the markup
+     * unstyled for your own stylesheet, and `@enigmax/primitives/toast.css` is the same
+     * sheet if you would rather import it.
+     */
+    styles?: boolean;
     /** Accessible name for the region. */
     label?: string;
     className?: string;
@@ -35,6 +36,6 @@ interface ToasterProps {
 interface ToastControls {
     dismiss: () => void;
 }
-declare function Toaster({ queue, position, exitDuration, swipeThreshold, children, label, className, style }: ToasterProps): ReactNode;
+declare function Toaster({ queue, position, exitDuration, swipeThreshold, visibleCount, expand, styles: withStyles, children, label, className, style }: ToasterProps): ReactNode;
 
-export { type ToastControls, type ToastPosition, Toaster, type ToasterProps };
+export { Notification, Notifications, type ToastControls, type ToastPosition, Toaster, type ToasterProps };

package/dist/react/toast.js

@@ -1,4 +1,4 @@
 "use client";
-export { Toaster } from '../chunk-ZCUFYBPB.js';
-import '../chunk-QYMUIW5I.js';
+export { Toaster } from '../chunk-JCCL7XKC.js';
+export { createNotificationQueue, defaultQueue, useNotifications } from '../chunk-QYMUIW5I.js';
 import '../chunk-SNYUBXWQ.js';

package/dist/react-router/index.d.ts

@@ -18,7 +18,7 @@ export { RelativeTime, RelativeTimeProps } from '../react/relative-time.js';
 export { R as RelativeTimeFormat, a as RelativeTimeOptions, b as RelativeTimePrecision, c as RelativeTimeStyle, d as RelativeTimeTense } from '../relative-time-YpRTG7YH.js';
 export { N as Notification, a as NotificationAction, b as NotificationInput, c as NotificationTone, e as NotificationsOptions } from '../notifications-BpVV6sel.js';
 export { Flag, FlagProps } from '../react/flag.js';
-export { c as FlagFormat, d as FlagOptions, e as FlagShape, f as FlagSource, h as configureFlags, i as flagAttributes, k as flagName, l as flagSrc, m as flagView, n as normalizeFlagCode } from '../flags-fLwIl2hG.js';
+export { c as FlagFormat, d as FlagOptions, e as FlagShape, f as FlagSource, h as configureFlags, i as flagAttributes, k as flagName, l as flagSrc, m as flagView, n as normalizeFlagCode } from '../flags-BQU1V9rE.js';
 export { PaletteContent, PaletteContextValue, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteListProps, PaletteRoot, PaletteRootProps, PaletteRow, PaletteSection, PaletteTrigger, SearchPalette, SearchPaletteProps, usePaletteContext } from '../react/palette.js';
 export { R as RecentEntry, b as RecentStore, e as createRecentStore, g as groupRows, i as isPaletteShortcut, m as moveActive, r as recentKey, s as shortcutLabel } from '../palette-D7iuQh_T.js';
 

package/dist/react-router/index.js

@@ -1,8 +1,8 @@
 "use client";
 export { useInput } from '../chunk-U3V4EHOB.js';
 export { PasswordStrength } from '../chunk-XQHCZAPJ.js';
-export { Flag } from '../chunk-XPKWJD5O.js';
-export { Toaster } from '../chunk-ZCUFYBPB.js';
+export { Flag } from '../chunk-NPHRS2Q7.js';
+export { Toaster } from '../chunk-JCCL7XKC.js';
 export { useMarquee } from '../chunk-ZWR2EXHQ.js';
 export { useSearch } from '../chunk-QQFNAKMY.js';
 export { useNetworkState } from '../chunk-S653GLSF.js';
@@ -10,7 +10,7 @@ export { createNotificationQueue, defaultQueue, useNotifications } from '../chun
 export { RelativeTime } from '../chunk-OCMI7R6H.js';
 import '../chunk-KJINGUQN.js';
 export { estimatePasswordStrength, generatePassword } from '../chunk-HC2ME5PU.js';
-export { configureFlags, flagAttributes, flagName, flagSrc, flagView, normalizeFlagCode } from '../chunk-T4F3BWR5.js';
+export { configureFlags, flagAttributes, flagName, flagSrc, flagView, normalizeFlagCode } from '../chunk-LMZJBOZG.js';
 import '../chunk-UOSSNUSC.js';
 import '../chunk-2QFTRNAZ.js';
 import '../chunk-SNYUBXWQ.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmax/primitives",
-  "version": "0.19.1",
+  "version": "0.21.0",
   "description": "Headless components: the behaviour, the timing and the accessibility, with no styles of their own. Framework-agnostic core plus thin adapters.",
   "type": "module",
   "sideEffects": [

package/recipes/toast/styles.css

@@ -1,165 +1,238 @@
 /*
- * Ember - the default toast theme.
+ * The toast theme.
  *
- * Every colour, every distance and every curve is in this file. `<Toaster />` renders the
- * structure and the state; nothing below is something the package decided for you, so
- * editing this file is the supported way to make it yours.
+ * GENERATED from src/react/toast-styles.ts by scripts/sync-recipes.mjs - edit that file, not
+ * this one. It exists as a stylesheet as well as a string because <Toaster /> injects the
+ * theme itself, and this is the same look for anyone who would rather import it, copy it
+ * with `enigma add toast --copy`, or fork it outright.
  *
- * The custom properties at the top are the whole API. Override them on `:root` and you have
- * a different theme without touching a selector.
+ * Every value is a custom property on [data-enigma-toaster]: override them there, or on
+ * :root, and you have a different toast without touching a selector.
  */
-
-:root {
-    --enigma-toast-width: 22rem;
-    --enigma-toast-gap: 0.625rem;
-    --enigma-toast-edge: 1.25rem;
-    --enigma-toast-radius: 0.75rem;
-    --enigma-toast-exit: 200ms;
+[data-enigma-toaster] {
+    --enigma-toast-width: 356px;
+    --enigma-toast-edge: 24px;
+    --enigma-toast-gap: 14px;
+    --enigma-toast-peek: 14px;
+    --enigma-toast-scale-step: 0.06;
+    --enigma-toast-radius: 12px;
+    --enigma-toast-enter: 420ms;
+    --enigma-toast-exit: 350ms;
 
     --enigma-toast-bg: #101010;
     --enigma-toast-border: #2a2a2a;
     --enigma-toast-text: #f5f5f5;
     --enigma-toast-muted: #a3a3a3;
-    --enigma-toast-shadow: 0 8px 30px rgb(0 0 0 / 45%);
+    --enigma-toast-shadow: 0 6px 22px rgb(0 0 0 / 34%);
+
+    --enigma-toast-success: hsl(150 80% 72%);
+    --enigma-toast-success-bg: hsl(150 38% 9%);
+    --enigma-toast-success-border: hsl(147 55% 18%);
+    --enigma-toast-error: hsl(358 100% 82%);
+    --enigma-toast-error-bg: hsl(358 42% 12%);
+    --enigma-toast-error-border: hsl(357 55% 24%);
+    --enigma-toast-info: hsl(216 87% 74%);
+    --enigma-toast-info-bg: hsl(215 45% 11%);
+    --enigma-toast-info-border: hsl(223 50% 24%);
+    --enigma-toast-warning: hsl(46 87% 70%);
+    --enigma-toast-warning-bg: hsl(40 55% 9%);
+    --enigma-toast-warning-border: hsl(40 55% 20%);
 
-    --enigma-toast-info: #60a5fa;
-    --enigma-toast-success: #4ade80;
-    --enigma-toast-warning: #fbbf24;
-    --enigma-toast-error: #f87171;
-    --enigma-toast-loading: var(--enigma-toast-muted);
+    position: fixed;
+    z-index: 999999;
+    width: var(--enigma-toast-width);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    outline: none;
+    font-family: inherit;
+    font-size: 13px;
+    /* The stack is a positioning context: every toast is absolute inside it, which is what
+       lets the ones behind be clipped to the front one's height. */
+    transition: transform 350ms ease;
 }
 
 @media (prefers-color-scheme: light) {
-    :root {
+    [data-enigma-toaster] {
         --enigma-toast-bg: #ffffff;
         --enigma-toast-border: #e5e5e5;
         --enigma-toast-text: #171717;
         --enigma-toast-muted: #737373;
-        --enigma-toast-shadow: 0 8px 30px rgb(0 0 0 / 12%);
+        --enigma-toast-shadow: 0 6px 22px rgb(0 0 0 / 12%);
+        --enigma-toast-success-bg: hsl(143 85% 96%);
+        --enigma-toast-success-border: hsl(145 92% 87%);
+        --enigma-toast-success: hsl(140 100% 27%);
+        --enigma-toast-error-bg: hsl(359 100% 97%);
+        --enigma-toast-error-border: hsl(359 100% 94%);
+        --enigma-toast-error: hsl(360 100% 45%);
+        --enigma-toast-info-bg: hsl(208 100% 97%);
+        --enigma-toast-info-border: hsl(221 91% 93%);
+        --enigma-toast-info: hsl(210 92% 45%);
+        --enigma-toast-warning-bg: hsl(49 100% 97%);
+        --enigma-toast-warning-border: hsl(49 91% 84%);
+        --enigma-toast-warning: hsl(31 92% 45%);
     }
 }
 
-[data-enigma-toaster] {
-    position: fixed;
-    z-index: 9999;
-    display: flex;
-    flex-direction: column;
-    gap: var(--enigma-toast-gap);
-    width: min(var(--enigma-toast-width), calc(100vw - var(--enigma-toast-edge) * 2));
-    /* The region is a layout box, not a wall: clicks pass through the gaps between toasts. */
-    pointer-events: none;
-    margin: 0;
-    padding: 0;
-}
-
-[data-enigma-toaster][data-position^="top"] { top: var(--enigma-toast-edge); flex-direction: column-reverse; }
+[data-enigma-toaster][data-position^="top"] { top: var(--enigma-toast-edge); }
 [data-enigma-toaster][data-position^="bottom"] { bottom: var(--enigma-toast-edge); }
-[data-enigma-toaster][data-position$="-left"] { left: var(--enigma-toast-edge); }
 [data-enigma-toaster][data-position$="-right"] { right: var(--enigma-toast-edge); }
+[data-enigma-toaster][data-position$="-left"] { left: var(--enigma-toast-edge); }
 [data-enigma-toaster][data-position$="-center"] { left: 50%; transform: translateX(-50%); }
+/* The whole stack lifts a little when it fans out, so the front toast does not sit on the
+   exact pixel it did a moment ago. */
+[data-enigma-toaster][data-expanded][data-position^="bottom"] { transform: translateY(-6px); }
+[data-enigma-toaster][data-expanded][data-position^="top"] { transform: translateY(6px); }
+[data-enigma-toaster][data-expanded][data-position="bottom-center"] { transform: translateX(-50%) translateY(-6px); }
+[data-enigma-toaster][data-expanded][data-position="top-center"] { transform: translateX(-50%) translateY(6px); }
 
 [data-enigma-toast] {
-    pointer-events: auto;
-    position: relative;
-    display: grid;
-    grid-template-columns: 1fr auto;
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
     align-items: center;
-    gap: 0.25rem 0.75rem;
-    padding: 0.875rem 1rem;
+    gap: 10px;
+    padding: 15px 16px;
     color: var(--enigma-toast-text);
     background: var(--enigma-toast-bg);
     border: 1px solid var(--enigma-toast-border);
     border-radius: var(--enigma-toast-radius);
     box-shadow: var(--enigma-toast-shadow);
-    /* The swipe offset the component publishes. Zero unless a finger is on it. */
-    translate: var(--enigma-toast-swipe, 0) 0;
-    transition: translate 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease-out;
-    touch-action: pan-y;
+    overflow-wrap: anywhere;
+    touch-action: none;
     outline: none;
+    z-index: var(--enigma-toast-z, 1);
+    transition:
+        transform var(--enigma-toast-enter) cubic-bezier(0.21, 1.02, 0.73, 1),
+        opacity var(--enigma-toast-exit),
+        height 350ms;
 }
 
-[data-enigma-toaster][data-position$="-center"] [data-enigma-toast] { translate: 0 var(--enigma-toast-swipe, 0); }
+[data-enigma-toaster][data-position^="bottom"] [data-enigma-toast] { bottom: 0; transform-origin: bottom center; }
+[data-enigma-toaster][data-position^="top"] [data-enigma-toast] { top: 0; transform-origin: top center; }
+
+/* Enter from off screen, in the direction the stack is pinned to. */
+[data-enigma-toaster][data-position^="bottom"] [data-enigma-toast] { transform: translateY(110%); opacity: 0; }
+[data-enigma-toaster][data-position^="top"] [data-enigma-toast] { transform: translateY(-110%); opacity: 0; }
+/* Scoped to the toaster so it OUTRANKS the enter rules above, which are scoped the same
+   way: at equal specificity the later rule wins, and a mounted toast that lost this one sat
+   at its entry offset forever - visible, and 110% of its own height off the bottom. */
+[data-enigma-toaster] [data-enigma-toast][data-mounted] { opacity: 1; transform: translateY(0); }
+
+/* Collapsed: the ones behind are clipped to the FRONT toast's height and scaled back, so
+   the stack reads as depth rather than as a list. Their content is hidden but present -
+   removing it would make the box jump when the stack expands. */
+[data-enigma-toaster]:not([data-expanded]) [data-enigma-toast][data-mounted]:not([data-front]) {
+    height: var(--enigma-toast-front-height);
+    transform: translateY(calc(var(--enigma-toast-before) * var(--enigma-toast-peek) * -1))
+        scale(calc(1 - var(--enigma-toast-before) * var(--enigma-toast-scale-step)));
+}
+[data-enigma-toaster][data-position^="top"]:not([data-expanded]) [data-enigma-toast][data-mounted]:not([data-front]) {
+    transform: translateY(calc(var(--enigma-toast-before) * var(--enigma-toast-peek)))
+        scale(calc(1 - var(--enigma-toast-before) * var(--enigma-toast-scale-step)));
+}
+[data-enigma-toaster]:not([data-expanded]) [data-enigma-toast]:not([data-front]) > * { opacity: 0; }
+[data-enigma-toast] > * { transition: opacity 350ms; }
 
-/* While a finger is down the toast tracks it exactly: a transition here would lag behind
-   the pointer, which reads as a broken gesture rather than a smooth one. */
-[data-enigma-toast][data-swiping] { transition: none; cursor: grabbing; user-select: none; }
+/* Expanded: each toast is lifted by the summed height of the ones in front of it. */
+[data-enigma-toaster][data-expanded][data-position^="bottom"] [data-enigma-toast][data-mounted] {
+    transform: translateY(calc(var(--enigma-toast-offset) * -1));
+}
+[data-enigma-toaster][data-expanded][data-position^="top"] [data-enigma-toast][data-mounted] {
+    transform: translateY(var(--enigma-toast-offset));
+}
+
+/* Past the visible count it is still in the DOM, still counted, and not on screen. */
+[data-enigma-toast][data-hidden] { opacity: 0; pointer-events: none; }
+
+[data-enigma-toast][data-state="leaving"] { opacity: 0; }
+[data-enigma-toaster]:not([data-expanded]) [data-enigma-toast][data-state="leaving"] { transform: translateY(150%) scale(0.9); }
+[data-enigma-toaster][data-expanded][data-position^="bottom"] [data-enigma-toast][data-state="leaving"] {
+    transform: translateY(calc(var(--enigma-toast-offset) * -1 + 110%));
+}
+
+/* While a finger is down the toast tracks it exactly: a transition here would lag behind the
+   pointer, which reads as a broken gesture rather than a smooth one. */
+[data-enigma-toast][data-swiping] {
+    transition: opacity 200ms;
+    transform: translateX(var(--enigma-toast-swipe, 0px));
+}
 
 [data-enigma-toast]:focus-visible { box-shadow: var(--enigma-toast-shadow), 0 0 0 2px var(--enigma-toast-info); }
 
-/* A left border is the tone. It reads at a glance and survives any background. */
-[data-enigma-toast]::before {
-    content: "";
-    position: absolute;
-    inset: 0 auto 0 0;
-    width: 3px;
-    border-radius: var(--enigma-toast-radius) 0 0 var(--enigma-toast-radius);
-    background: var(--enigma-toast-tone, transparent);
+[data-enigma-toast][data-tone="success"] {
+    color: var(--enigma-toast-success);
+    background: var(--enigma-toast-success-bg);
+    border-color: var(--enigma-toast-success-border);
+}
+[data-enigma-toast][data-tone="error"] {
+    color: var(--enigma-toast-error);
+    background: var(--enigma-toast-error-bg);
+    border-color: var(--enigma-toast-error-border);
+}
+[data-enigma-toast][data-tone="info"] {
+    color: var(--enigma-toast-info);
+    background: var(--enigma-toast-info-bg);
+    border-color: var(--enigma-toast-info-border);
+}
+[data-enigma-toast][data-tone="warning"] {
+    color: var(--enigma-toast-warning);
+    background: var(--enigma-toast-warning-bg);
+    border-color: var(--enigma-toast-warning-border);
 }
 
-[data-enigma-toast][data-tone="info"] { --enigma-toast-tone: var(--enigma-toast-info); }
-[data-enigma-toast][data-tone="success"] { --enigma-toast-tone: var(--enigma-toast-success); }
-[data-enigma-toast][data-tone="warning"] { --enigma-toast-tone: var(--enigma-toast-warning); }
-[data-enigma-toast][data-tone="error"] { --enigma-toast-tone: var(--enigma-toast-error); }
-[data-enigma-toast][data-tone="loading"] { --enigma-toast-tone: var(--enigma-toast-loading); }
+[data-enigma-toast-icon] { display: flex; flex-shrink: 0; width: 20px; height: 20px; }
+[data-enigma-toast-icon] svg { width: 20px; height: 20px; display: block; }
+[data-enigma-toast-icon][data-tone="loading"] svg { animation: enigma-toast-spin 900ms linear infinite; }
+@keyframes enigma-toast-spin { to { transform: rotate(360deg); } }
 
-[data-enigma-toast-title] { grid-column: 1; margin: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
-[data-enigma-toast-body] { grid-column: 1; margin: 0; font-size: 0.8125rem; color: var(--enigma-toast-muted); line-height: 1.45; }
+[data-enigma-toast-content] { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
+[data-enigma-toast-title] { margin: 0; font-weight: 600; line-height: 1.4; }
+[data-enigma-toast-body] { margin: 0; font-size: 12px; line-height: 1.45; opacity: 0.75; }
 
 [data-enigma-toast-action] {
-    grid-column: 2;
-    grid-row: 1 / -1;
-    padding: 0.3125rem 0.625rem;
+    flex-shrink: 0;
+    padding: 5px 10px;
     font: inherit;
-    font-size: 0.75rem;
+    font-size: 12px;
     font-weight: 600;
     color: var(--enigma-toast-bg);
-    background: var(--enigma-toast-text);
+    background: currentColor;
     border: 0;
-    border-radius: 0.375rem;
+    border-radius: 6px;
     cursor: pointer;
 }
 
 [data-enigma-toast-close] {
-    position: absolute;
-    top: 0.375rem;
-    right: 0.5rem;
-    padding: 0 0.25rem;
-    font-size: 0.875rem;
-    line-height: 1;
-    color: var(--enigma-toast-muted);
+    flex-shrink: 0;
+    display: grid;
+    place-items: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    color: inherit;
     background: none;
     border: 0;
+    border-radius: 5px;
     cursor: pointer;
     /* Shown on hover or focus, so it never covers the message while it is being read - but
-       always reachable by keyboard, which `display: none` would take away. */
+       always reachable by keyboard, which display:none would take away. */
     opacity: 0;
     transition: opacity 120ms ease-out;
 }
-
 [data-enigma-toast]:hover [data-enigma-toast-close],
-[data-enigma-toast-close]:focus-visible { opacity: 1; }
-
-/* Enter from the edge it is pinned to, leave the same way. */
-@keyframes enigma-toast-in-right { from { opacity: 0; translate: 100% 0; } to { opacity: 1; translate: 0 0; } }
-@keyframes enigma-toast-in-left { from { opacity: 0; translate: -100% 0; } to { opacity: 1; translate: 0 0; } }
-@keyframes enigma-toast-in-top { from { opacity: 0; translate: 0 -100%; } to { opacity: 1; translate: 0 0; } }
-@keyframes enigma-toast-in-bottom { from { opacity: 0; translate: 0 100%; } to { opacity: 1; translate: 0 0; } }
-@keyframes enigma-toast-out { to { opacity: 0; scale: 0.94; } }
-
-[data-position$="-right"] [data-enigma-toast][data-state="open"] { animation: enigma-toast-in-right 260ms cubic-bezier(0.22, 1, 0.36, 1); }
-[data-position$="-left"] [data-enigma-toast][data-state="open"] { animation: enigma-toast-in-left 260ms cubic-bezier(0.22, 1, 0.36, 1); }
-[data-position="top-center"] [data-enigma-toast][data-state="open"] { animation: enigma-toast-in-top 260ms cubic-bezier(0.22, 1, 0.36, 1); }
-[data-position="bottom-center"] [data-enigma-toast][data-state="open"] { animation: enigma-toast-in-bottom 260ms cubic-bezier(0.22, 1, 0.36, 1); }
+[data-enigma-toast-close]:focus-visible { opacity: 0.7; }
+[data-enigma-toast-close]:hover { opacity: 1; }
 
-/* Matches the component's exitDuration: the node is held for exactly this long, so a
-   longer animation would be cut off mid-way. */
-[data-enigma-toast][data-state="leaving"] {
-    animation: enigma-toast-out var(--enigma-toast-exit) ease-in forwards;
-    pointer-events: none;
+@media (max-width: 600px) {
+    [data-enigma-toaster] { right: 14px; left: 14px; width: auto; }
 }
 
 @media (prefers-reduced-motion: reduce) {
     /* The movement goes, the state change stays: a toast still appears and still leaves. */
-    [data-enigma-toast] { animation: none !important; transition: opacity 120ms ease-out; }
-    [data-enigma-toast][data-state="leaving"] { opacity: 0; }
+    [data-enigma-toast], [data-enigma-toast] > * { transition: opacity 200ms !important; }
+    [data-enigma-toast][data-mounted] { transform: none !important; }
 }

package/registry.json

@@ -711,12 +711,12 @@
     {
       "name": "toast",
       "title": "Toast",
-      "description": "The notification queue with a renderer on top: stacking, swipe to dismiss, a pointer that stops the clock, and a toast that is still on screen while it animates out. Ships the Ember theme, which is a stylesheet you own.",
+      "description": "The notification queue with a renderer on top: the newest toast in front, the older ones stacked behind it and fanning out when the pointer arrives, swipe to dismiss, a pointer that stops the clock, and a toast that is still on screen while it animates out. It brings its own theme - a toast at the edge of the screen is the one component a forgotten stylesheet ruins rather than merely undresses.",
       "targets": [
         "react"
       ],
       "entry": {
-        "react": "@enigmax/primitives/react"
+        "react": "@enigmax/primitives/react/toast"
       },
       "exports": {
         "react": [
@@ -774,15 +774,20 @@
           }
         }
       ],
-      "styles": false,
+      "styles": true,
       "themeHooks": [
         "[data-enigma-toaster]",
         "[data-enigma-toaster][data-position]",
+        "[data-enigma-toaster][data-expanded]",
         "[data-enigma-toast]",
         "[data-enigma-toast][data-tone=error]",
+        "[data-enigma-toast][data-front]",
+        "[data-enigma-toast][data-mounted]",
         "[data-enigma-toast][data-state=leaving]",
         "[data-enigma-toast][data-swiping]",
-        "[data-enigma-toast][data-front]",
+        "[data-enigma-toast][data-hidden]",
+        "[data-enigma-toast-icon]",
+        "[data-enigma-toast-content]",
         "[data-enigma-toast-title]",
         "[data-enigma-toast-body]",
         "[data-enigma-toast-action]",