@apliteni/apliteni-ui 0.64.0 → 0.65.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.64.0",
+  "version": "0.65.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -29,7 +29,7 @@ import '@apliteni/apliteni-ui/react/css';  // React components' shell styles (mo
 import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 ```
 
-Components: `Checkbox`, `Switch`, `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
+Components: `Success`, `SuccessPanel`, `SuccessCheck`, `Checkbox`, `Switch`, `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
 
 `Pill` renders metadata with the existing pill spacing. Omit `variant` for neutral
 metadata or use `live` or `soon`. Its children accept React content.
@@ -553,6 +553,52 @@ Tooltip accepts text and inline children, without nested controls. Hovering or f
 <Tooltip text="Updated daily">Balance</Tooltip>
 ```
 
+## Success
+
+`SuccessPanel` confirms an outcome inside the current page with `title` and optional
+`sub`, takes the same `check` as `Success`, and forwards a ref to its root div. `SuccessCheck` is the bare mark both
+confirmations draw, matching the kit's `successCheck()`, and forwards a ref to its
+`svg`. It carries no size or box of its own: to compose it alone, put it in a wrapper
+that sets both, such as the kit's `ui-success__check`, and name the outcome in text
+next to it.
+
+```tsx
+<div className="ui-success__check"><SuccessCheck /></div>
+```
+
+The mark comes in two: `line` (the default) is the bare Lucide check in the success
+colour, which strokes itself on and takes its size from the layout it lands in;
+`circled` is Lucide `circle-check-big` at 20px, the kit's label size, drawn at rest and
+the same size everywhere — in every `Success` layout and in `SuccessPanel`. Pick it with `check` on `Success` or `variant` on
+`SuccessCheck`. Guidelines / Iconography reserves a circled glyph for a state and a
+bare one for an action, and a confirmation reports a state — so `circled` is the mark
+that rule asks for, and `line` is the default because it carries the moment at page
+size. Neither has a filled disc behind it.
+
+`Success` provides `hero`, `split`, and `compact` layouts on a plain elevated card;
+there is no backdrop layer and no `backdrop` prop. Pass `title`, one short `body`
+line, and React `actions`. There is no `eyebrow` prop: a confirmation carries one
+title and at most one line under it, so put the outcome in the title rather than in a
+label above it. A kit `Button` carries the focus ring already; a router link or
+a plain `<a>` must also take `className="ui-focusable"`, or it falls back to the
+browser's own focus outline. An omitted or empty `actions`
+leaves out the actions row. Hero and split default to h1; compact defaults to h2.
+`level` overrides the heading rank, and a value outside 1–6 falls back to that layout
+default. `confetti` enables the existing decorative animation. All three components
+use the kit CSS and its reduced-motion rules.
+
+```tsx
+<Success title="Changes saved" check="circled"
+  countdown={waiting ? { seconds: 5, label: 'Continuing' } : null}
+  onCountdownEnd={continueToNextPage}
+  actions={<Button onClick={() => setWaiting(false)}>Stay here</Button>} />
+```
+
+Removing `countdown` or unmounting cancels the timer. Changing its duration restarts
+it; changing its label or callback does not. Durations are whole seconds rounded
+down, with five seconds used for omitted, non-finite, or sub-one values. Completion
+fires once per countdown, including in StrictMode. Navigation belongs to the caller.
+
 ## Checkbox and Switch
 
 `Checkbox` wraps a native checkbox and its visible `label`. Set `type="radio"`

package/react/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode, ButtonHTMLAttributes, RefAttributes, ReactElement, AnchorHTMLAttributes, HTMLAttributes, RefObject, MouseEvent, ElementType, ComponentPropsWithoutRef, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode, ButtonHTMLAttributes, RefAttributes, ReactElement, AnchorHTMLAttributes, HTMLAttributes, RefObject, MouseEvent, ElementType, ComponentPropsWithoutRef, SelectHTMLAttributes, TextareaHTMLAttributes, SVGAttributes } from 'react';
 
 declare function Icon({ name }: {
     name: string;
@@ -679,6 +679,73 @@ type TooltipProps = {
 };
 declare function Tooltip({ text, children }: TooltipProps): react.JSX.Element;
 
+type SuccessMark = 'line' | 'circled';
+type SuccessCheckProps = Omit<SVGAttributes<SVGSVGElement>, 'children'> & {
+    /** `line` is the bare Lucide check and draws itself on; `circled` is Lucide
+     *  circle-check-big at 20px, the kit's label size, drawn at rest. */
+    variant?: SuccessMark;
+};
+/** Decorative mark. Supply the outcome in adjacent text. */
+declare const SuccessCheck: react.ForwardRefExoticComponent<Omit<SVGAttributes<SVGSVGElement>, "children"> & {
+    /** `line` is the bare Lucide check and draws itself on; `circled` is Lucide
+     *  circle-check-big at 20px, the kit's label size, drawn at rest. */
+    variant?: SuccessMark;
+} & react.RefAttributes<SVGSVGElement>>;
+type SuccessPanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {
+    title?: string;
+    sub?: string;
+    /** Which check mark to draw. See SuccessCheck. */
+    check?: SuccessMark;
+};
+declare const SuccessPanel: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> & {
+    title?: string;
+    sub?: string;
+    /** Which check mark to draw. See SuccessCheck. */
+    check?: SuccessMark;
+} & react.RefAttributes<HTMLDivElement>>;
+type SuccessCountdown = {
+    seconds?: number;
+    label?: string;
+};
+type SuccessProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {
+    layout?: 'hero' | 'split' | 'compact';
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Which check mark to draw. See SuccessCheck. */
+    check?: SuccessMark;
+    title?: string;
+    /** One short line under the title, or nothing. There is no eyebrow tier.
+     *  why: docs/specification.md#success-confirmations */
+    body?: string;
+    /** Removed: a confirmation carries one title and at most one line. Typed as
+     *  `never` so a caller still passing it is told where it went rather than
+     *  having it spread silently onto the root as an unknown DOM attribute. */
+    eyebrow?: never;
+    actions?: ReactNode;
+    confetti?: boolean;
+    /** Set to null to cancel; changing seconds starts a new countdown. */
+    countdown?: SuccessCountdown | null;
+    onCountdownEnd?: () => void;
+};
+declare const Success: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> & {
+    layout?: "hero" | "split" | "compact";
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Which check mark to draw. See SuccessCheck. */
+    check?: SuccessMark;
+    title?: string;
+    /** One short line under the title, or nothing. There is no eyebrow tier.
+     *  why: docs/specification.md#success-confirmations */
+    body?: string;
+    /** Removed: a confirmation carries one title and at most one line. Typed as
+     *  `never` so a caller still passing it is told where it went rather than
+     *  having it spread silently onto the root as an unknown DOM attribute. */
+    eyebrow?: never;
+    actions?: ReactNode;
+    confetti?: boolean;
+    /** Set to null to cancel; changing seconds starts a new countdown. */
+    countdown?: SuccessCountdown | null;
+    onCountdownEnd?: () => void;
+} & react.RefAttributes<HTMLDivElement>>;
+
 type SidebarNavBadge = string | number | {
     text: string | number;
     tone?: 'neutral' | 'accent' | 'live' | 'danger';
@@ -732,4 +799,4 @@ declare const SidebarNav: react.ForwardRefExoticComponent<Omit<Omit<react.Detail
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };
+export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };

package/react/dist/index.js

@@ -2868,6 +2868,129 @@ function ThemeToggle({ labelled = false }) {
   ] }) : button;
 }
 
+// src/Success.tsx
+import { forwardRef as forwardRef8, useEffect as useEffect14, useRef as useRef17, useState as useState13 } from "react";
+import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+var SuccessCheck = forwardRef8(function SuccessCheck2({ variant = "line", className, ...rest }, ref) {
+  const circled = variant === "circled";
+  return /* @__PURE__ */ jsxs29(
+    "svg",
+    {
+      ...rest,
+      ref,
+      className: ["ui-sx__check", `ui-sx__check--${circled ? "circled" : "line"}`, className].filter(Boolean).join(" "),
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        circled && /* @__PURE__ */ jsx34("path", { className: "ui-sx__circle", d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+        /* @__PURE__ */ jsx34("path", { className: "ui-sx__tick", d: circled ? "M22 4L12 14.01l-3-3" : "M20 6L9 17l-5-5" })
+      ]
+    }
+  );
+});
+var SuccessPanel = forwardRef8(function SuccessPanel2({ title = "Done", sub, check = "line", className, ...rest }, ref) {
+  const circled = check === "circled";
+  return /* @__PURE__ */ jsxs29("div", { ...rest, ref, className: ["ui-success", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx34("div", { className: ["ui-success__check", circled && "ui-success__check--circled"].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx34(SuccessCheck, { variant: circled ? "circled" : "line" }) }),
+    /* @__PURE__ */ jsx34("div", { className: "ui-success__title", children: title }),
+    sub && /* @__PURE__ */ jsx34("div", { className: "ui-success__sub", children: sub })
+  ] });
+});
+var pieces = [
+  [8, 0, -24, "a", 1],
+  [20, 0.14, 40, "g", 0.8],
+  [31, 0.06, 12, "c", 1.1],
+  [42, 0.2, -52, "p", 0.9],
+  [50, 0.02, 28, "a", 1],
+  [58, 0.18, -16, "k", 0.75],
+  [67, 0.09, 60, "g", 1.05],
+  [76, 0.24, -36, "c", 0.85],
+  [85, 0.05, 20, "a", 1],
+  [92, 0.16, -48, "p", 0.9],
+  [14, 0.3, 44, "k", 0.8],
+  [37, 0.34, -28, "g", 1],
+  [62, 0.28, 52, "a", 0.9],
+  [80, 0.36, -20, "c", 1.05]
+];
+function Countdown({ seconds, label = "Redirecting", onDone }) {
+  const [remaining, setRemaining] = useState13(seconds);
+  const callback = useRef17(onDone);
+  useEffect14(() => {
+    callback.current = onDone;
+  }, [onDone]);
+  useEffect14(() => {
+    let count = seconds;
+    const timer = setInterval(() => {
+      count -= 1;
+      setRemaining(count);
+      if (count === 0) {
+        clearInterval(timer);
+        callback.current?.();
+      }
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [seconds]);
+  return /* @__PURE__ */ jsxs29("div", { className: "ui-sx__count", "data-sx-count": "", style: { "--sx-secs": `${seconds}s` }, children: [
+    /* @__PURE__ */ jsx34("span", { className: "ui-sx__count-ring", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs29("span", { className: "ui-sx__count-text", children: [
+      label,
+      " in ",
+      /* @__PURE__ */ jsx34("b", { "data-sx-num": "", children: remaining }),
+      "s"
+    ] })
+  ] });
+}
+var Success = forwardRef8(function Success2({
+  layout = "hero",
+  level,
+  check = "line",
+  title = "All done",
+  body,
+  actions,
+  confetti = false,
+  countdown,
+  onCountdownEnd,
+  className,
+  // Destructured only to keep it out of `rest`; see SuccessProps.eyebrow.
+  eyebrow: _removedEyebrow,
+  ...rest
+}, ref) {
+  void _removedEyebrow;
+  const rank = [1, 2, 3, 4, 5, 6].includes(Number(level)) ? Number(level) : layout === "compact" ? 2 : 1;
+  const Heading = `h${rank}`;
+  const hasActions = Array.isArray(actions) ? actions.length > 0 : Boolean(actions);
+  const seconds = countdown?.seconds;
+  const duration = seconds != null && Number.isFinite(seconds) && seconds >= 1 ? Math.floor(seconds) : 5;
+  const mark = check === "circled" ? "circled" : "line";
+  return /* @__PURE__ */ jsxs29(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      ...rest,
+      ref,
+      className: ["ui-sx", `ui-sx--${layout}`, `ui-sx--check-${mark}`, confetti && "ui-sx--confetti", className].filter(Boolean).join(" "),
+      children: [
+        confetti && /* @__PURE__ */ jsx34("div", { className: "ui-sx__confetti", "aria-hidden": "true", children: pieces.map(
+          ([x, d, r, t, s], index) => /* @__PURE__ */ jsx34("i", { className: `ui-sx__piece ui-sx__piece--${t}`, style: { left: `${x}%`, "--sx-d": `${d}s`, "--sx-r": `${r}deg`, "--sx-s": s } }, index)
+        ) }),
+        /* @__PURE__ */ jsxs29("div", { className: "ui-sx__inner", children: [
+          /* @__PURE__ */ jsx34("div", { className: "ui-sx__visual", children: /* @__PURE__ */ jsx34(SuccessCheck, { variant: mark }) }),
+          /* @__PURE__ */ jsxs29("div", { className: "ui-sx__content", children: [
+            /* @__PURE__ */ jsx34(Heading, { className: "ui-sx__title", children: title }),
+            body && /* @__PURE__ */ jsx34("p", { className: "ui-sx__body", children: body }),
+            hasActions && /* @__PURE__ */ jsx34("div", { className: "ui-sx__actions", children: actions }),
+            countdown && /* @__PURE__ */ jsx34(Countdown, { seconds: duration, label: countdown.label, onDone: onCountdownEnd }, duration)
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+
 // src/index.ts
 var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
@@ -2909,6 +3032,9 @@ export {
   Snippet,
   StatBand,
   StatusDot,
+  Success,
+  SuccessCheck,
+  SuccessPanel,
   Switch,
   THEME_INIT_SCRIPT,
   Tabs,

package/src/components/index.js

@@ -264,11 +264,13 @@ export function toast({
 // a card. Two strings, no options; styles are .ui-success in styles/callout.css.
 //
 // The kit also publishes success() from components/success.js, which is the same
-// idea at page size: layouts, a backdrop, follow-up buttons and an auto-redirect
-// countdown. Pick by how much of the screen the confirmation owns. The two share
-// the glowing check; their layout and content remain independent.
-export function successPanel({ title = 'Done', sub = '' } = {}) {
-  return `<div class="ui-success"><div class="ui-success__check">${successCheck()}</div><div class="ui-success__title">${esc(title)}</div>${sub ? `<div class="ui-success__sub">${esc(sub)}</div>` : ''}</div>`;
+// idea at page size: layouts, follow-up buttons and an auto-redirect countdown.
+// Pick by how much of the screen the confirmation owns. The two share the check;
+// their layout and content remain independent.
+export function successPanel({ title = 'Done', sub = '', check = 'line' } = {}) {
+  // The circled mark is one status size everywhere, so the box narrows for it.
+  const box = check === 'circled' ? 'ui-success__check ui-success__check--circled' : 'ui-success__check';
+  return `<div class="ui-success"><div class="${box}">${successCheck(check)}</div><div class="ui-success__title">${esc(title)}</div>${sub ? `<div class="ui-success__sub">${esc(sub)}</div>` : ''}</div>`;
 }
 
 // ---- Empty state ---------------------------------------------------------

package/src/components/success.js

@@ -1,26 +1,26 @@
-// Success / confirmation surface. One factory, three layouts and three
-// backdrops, an SVG check that draws itself in, optional confetti and an
-// optional auto-redirect countdown. Every motion path is reduced-motion safe.
-// Accent-aware, but the success mark stays on the --green family.
+// Success / confirmation surface. One factory, three layouts, two check marks,
+// optional confetti and an optional auto-redirect countdown, every motion path
+// reduced-motion safe. Accent-aware, but the mark stays on the --green family.
 //
 //   container.innerHTML = success({ title, body, actions: [{ label, variant }] });
 //
-// The check animation is pure CSS, so string-rendered markup animates on its own
-// once mounted. A live countdown is opt-in via wireSuccess(); the markup alone
-// shows the ring sweep and a static number.
+// The check animation is pure CSS, so string-rendered markup animates once
+// mounted. A live countdown is opt-in via wireSuccess().
 import { esc, button } from './index.js';
 
-// Self-drawing check: a faint track disc, a filled accent disc that springs in,
-// the tick that strokes on via dash-offset, and a burst ring that expands and
-// fades. viewBox 0 0 52 52; the tick path length is ~34 (dasharray tuned to it).
-export function successCheck() {
-  // width/height attributes keep the base svg:where(:not([width]):not([height]))
-  // fallback from sizing us; the real size is set per-layout in success.css.
-  return `<svg class="ui-sx__check" width="52" height="52" viewBox="0 0 52 52" aria-hidden="true" focusable="false">
-  <circle class="ui-sx__ring" cx="26" cy="26" r="24"/>
-  <circle class="ui-sx__disc" cx="26" cy="26" r="24"/>
-  <path class="ui-sx__tick" d="M15 27l7.5 7.5L37 18"/>
-</svg>`;
+// 'line' is the bare Lucide `check`, 'circled' is Lucide circle-check-big. Which
+// is the default, and why that departs from Guidelines / Iconography:
+// why: docs/specification.md#success-confirmations
+// Each is written whole because the icon-sizing and glyph-stroke gates find their
+// subjects by scanning source for a class on an `<svg …>`: a tag split across
+// string pieces leaves both silent rather than failing.
+const MARKS = {
+  line: '<svg class="ui-sx__check ui-sx__check--line" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path class="ui-sx__tick" d="M20 6L9 17l-5-5"/></svg>',
+  circled: '<svg class="ui-sx__check ui-sx__check--circled" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path class="ui-sx__circle" d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path class="ui-sx__tick" d="M22 4L12 14.01l-3-3"/></svg>',
+};
+
+export function successCheck(variant = 'line') {
+  return Object.hasOwn(MARKS, variant) ? MARKS[variant] : MARKS.line;
 }
 
 // A deterministic confetti field (opt-in). Decorative + aria-hidden; each piece
@@ -60,21 +60,26 @@ function countdownEl({ seconds = 5, label = 'Redirecting' } = {}) {
 // For a confirmation that stays inside the page the user is already on, the kit
 // publishes successPanel() from components/index.js — a check, a title and one
 // line of sub, and nothing to configure. Pick by how much of the screen the
-// confirmation owns. The two share the glowing check, while their layout
-// and content remain independent.
+// confirmation owns. The two share the check, while their layout and content
+// remain independent.
+//
+// Both carry one title and at most one short line under it. There is no eyebrow
+// tier: a confirmation stacking a label, a headline and a paragraph reads as
+// three competing voices for one outcome.
+// why: docs/specification.md#success-confirmations
 export function success({
   layout = 'hero',          // 'hero' | 'split' | 'compact'
   level,                    // heading level of the title; see the note below
-  backdrop = 'aurora',      // 'aurora' | 'glow' | 'flat'
-  eyebrow = '',
+  check = 'line',           // 'line' | 'circled' — see successCheck() above
   title = 'All done',
-  body = '',
+  body = '',                // one short line, or nothing; see the note below
   actions = [],             // [{ label, variant, href, icon, iconRight, size }]
   confetti = false,         // opt-in particle burst (reduced-motion safe)
   countdown = null,         // { seconds, label } | null
   className = '',
 } = {}) {
-  const cls = ['ui-sx', `ui-sx--${layout}`, `ui-sx--bd-${backdrop}`, confetti && 'ui-sx--confetti', className]
+  const mark = check === 'circled' ? 'circled' : 'line';
+  const cls = ['ui-sx', `ui-sx--${layout}`, `ui-sx--check-${mark}`, confetti && 'ui-sx--confetti', className]
     .filter(Boolean).join(' ');
 
   // The title's rank follows the layout, because the layout is the question
@@ -87,16 +92,6 @@ export function success({
   const rank = [1, 2, 3, 4, 5, 6].includes(Number(level)) ? Number(level) : (layout === 'compact' ? 2 : 1);
   const h = `h${rank}`;
 
-  const bd = backdrop === 'aurora'
-    ? `<div class="ui-sx__aurora" aria-hidden="true">
-        <span class="ui-sx__glow ui-sx__glow--a"></span>
-        <span class="ui-sx__glow ui-sx__glow--b"></span>
-      </div>`
-    : backdrop === 'glow'
-      ? `<span class="ui-glow ui-glow--green ui-sx__bg-glow" aria-hidden="true"></span>`
-      : '';
-
-  const eyebrowEl = eyebrow ? `<div class="ui-sx__eyebrow">${esc(eyebrow)}</div>` : '';
   const bodyEl = body ? `<p class="ui-sx__body">${esc(body)}</p>` : '';
   const actionsEl = actions.length
     ? `<div class="ui-sx__actions">${actions.map((a) => button({ size: 'md', ...a })).join('')}</div>`
@@ -104,12 +99,10 @@ export function success({
   const countEl = countdown ? countdownEl(countdown) : '';
 
   return `<div class="${esc(cls)}" role="status" aria-live="polite">
-  ${bd}
   ${confetti ? confettiField() : ''}
   <div class="ui-sx__inner">
-    <div class="ui-sx__visual">${successCheck()}</div>
+    <div class="ui-sx__visual">${successCheck(mark)}</div>
     <div class="ui-sx__content">
-      ${eyebrowEl}
       <${h} class="ui-sx__title">${esc(title)}</${h}>
       ${bodyEl}
       ${actionsEl}

package/src/index.d.ts

@@ -82,7 +82,7 @@ export declare function deckTextSwitch(active?: string): string;
 export declare function hlShell(raw: string): string;
 export declare function pill(label: string, variant?: string): string;
 export declare function statusDot(live?: boolean): string;
-export declare function successCheck(): string;
+export declare function successCheck(variant?: 'line' | 'circled'): string;
 export declare function themeIcon(theme: string): string;
 export declare function themeName(theme: string): string;
 export declare function themeToggle(theme?: string): string;

package/src/styles/callout.css

@@ -123,9 +123,15 @@
 }
 .ui-success__check {
   --sx-green: var(--chip-success-ink);
-  width: 48px; height: 48px;
+  width: 28px; height: 28px;
   margin: 0 auto 14px;
 }
 .ui-success__check .ui-sx__check { width: 100%; height: 100%; }
+/* `circled` is one status size everywhere, this panel included: the box narrows to
+   the 20px success() draws it at, rather than stretching a status mark to fill the
+   line mark's box. The mark fills the box, so the box is what decides. The modifier
+   is written by successPanel(), as success() writes ui-sx--check-circled on its root.
+   why: docs/specification.md#success-confirmations */
+.ui-success__check--circled { width: 20px; height: 20px; }
 .ui-success__title { color: var(--strong); font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: 5px; }
 .ui-success__sub { color: var(--text); font-size: var(--text-base); }

package/src/styles/success.css

@@ -1,21 +1,16 @@
 /* ============================================================================
  * Success / confirmation surface — .ui-sx*
- *   The emotional high point of a flow, with craft: a self-drawing SVG check
- *   (ring burst + spring), an aurora / glow backdrop, follow-up actions, an
- *   optional confetti field and an optional auto-redirect countdown. Three
- *   layouts (hero / split / compact) and three backdrops (aurora / glow / flat).
+ *   The end of a flow: a check mark, the outcome in words, somewhere to go
+ *   next, an optional confetti field and an optional auto-redirect countdown.
+ *   Three layouts (hero / split / compact) and two check marks.
  *
- *   Accent-aware via the kit tokens; the success mark stays on the --green
- *   family (green = success), the surrounds follow --accent so it re-themes with
- *   the sub-theme. Every motion path is reduced-motion safe — see the block at
- *   the foot. Markup comes from success() in components/index (re-exported).
+ *   The card is a plain elevated surface — no blurred glows or drifting blobs
+ *   behind it. Accent-aware via the kit tokens; the mark stays on the --green
+ *   family (green = success). Every motion path is reduced-motion safe — see
+ *   the block at the foot. Markup comes from success() in components/index
+ *   (re-exported).
  * ========================================================================== */
 
-.ui-sx, .ui-success__check {
-  --sx-tint: color-mix(in srgb, var(--green) 18%, transparent);
-  --sx-track: color-mix(in srgb, var(--green) 32%, transparent);
-}
-
 .ui-sx {
   --sx-green: var(--green);
   position: relative;
@@ -26,41 +21,9 @@
   isolation: isolate;
 }
 
-/* ---- Backdrops ----------------------------------------------------------- */
-/* Aurora: two soft blurred blobs — a green wash under the check + an accent
-   blob for identity — so the success matches the rest of the kit's warmth. */
-.ui-sx__aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
-.ui-sx__glow {
-  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.9;
-  aspect-ratio: 1; will-change: transform;
-}
-.ui-sx__glow--a {
-  width: 58%; top: -14%; left: 50%; translate: -50% 0;
-  background: radial-gradient(circle at center, var(--sx-tint), transparent 68%);
-  animation: ui-sx-float 14s ease-in-out infinite alternate; /* motion: ambient — a background glow that drifts on its own clock; `alternate` needs a symmetric curve, which var(--ease) is not */
-}
-.ui-sx__glow--b {
-  width: 52%; bottom: -20%; left: 12%;
-  background: radial-gradient(circle at center,
-    color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%);
-  animation: ui-sx-float 18s ease-in-out -6s infinite alternate; /* motion: ambient — the second glow, offset in period and phase so the pair never lines up */
-}
-:root[data-theme="light"] .ui-sx__glow { opacity: 0.7; }
-@keyframes ui-sx-float {
-  from { transform: translate(-2%, -2%) scale(1); }
-  to   { transform: translate(3%, 3%) scale(1.14); }
-}
-/* Glow backdrop: reuse the shared .ui-glow--green, parked behind the check. */
-.ui-sx__bg-glow { top: -40%; left: 50%; translate: -50% 0; width: 360px; height: 360px; }
-
 /* ---- Layout shell -------------------------------------------------------- */
 .ui-sx__inner { position: relative; z-index: 1; }
 .ui-sx__content { min-width: 0; }
-.ui-sx__eyebrow {
-  /* rank: label */
-  color: var(--green); font-size: var(--text-sm); font-weight: var(--weight-medium);
-  margin-bottom: 10px;
-}
 .ui-sx__title {
   color: var(--strong); font-size: var(--text-xl); font-weight: var(--weight-semibold);
   letter-spacing: -.02em; line-height: 1.2; margin: 0;
@@ -76,7 +39,7 @@
 .ui-sx--hero .ui-sx__visual { margin-bottom: 22px; }
 .ui-sx--hero .ui-sx__body { margin-left: auto; margin-right: auto; }
 .ui-sx--hero .ui-sx__actions { justify-content: center; }
-.ui-sx--hero .ui-sx__check { width: 96px; height: 96px; }
+.ui-sx--hero .ui-sx__check { width: 56px; height: 56px; }
 
 /* split — visual panel beside the copy */
 .ui-sx--split .ui-sx__inner {
@@ -87,14 +50,14 @@
   background: color-mix(in srgb, var(--green) 8%, transparent); /* ring-gap: inherit — decorative illustration has no nested focus target. */
   border-right: 1px solid var(--border);
 }
-.ui-sx--split .ui-sx__check { width: 120px; height: 120px; }
+.ui-sx--split .ui-sx__check { width: 72px; height: 72px; }
 .ui-sx--split .ui-sx__content { padding: 40px 36px; align-self: center; }
 
 /* compact — inline, panel/toast-adjacent */
 .ui-sx--compact { padding: 18px 20px; }
 .ui-sx--compact .ui-sx__inner { display: flex; align-items: center; gap: 16px; }
 .ui-sx--compact .ui-sx__visual { flex: none; }
-.ui-sx--compact .ui-sx__check { width: 44px; height: 44px; }
+.ui-sx--compact .ui-sx__check { width: 28px; height: 28px; }
 .ui-sx--compact .ui-sx__title { font-size: calc(var(--text-md) + 0.5px); }
 .ui-sx--compact .ui-sx__body { font-size: var(--text-sm); margin-top: 3px; }
 .ui-sx--compact .ui-sx__actions { margin-top: 0; margin-left: auto; flex: none; }
@@ -102,38 +65,29 @@
 .ui-sx--compact .ui-sx__content > div:first-child,
 .ui-sx--compact .ui-sx__title { min-width: 0; }
 
-/* ---- The self-drawing check --------------------------------------------- */
-.ui-sx__check { display: block; overflow: visible; }
-/* Soft tinted disc that springs in behind the tick. */
-.ui-sx__disc {
-  fill: var(--sx-tint); stroke: var(--sx-track); stroke-width: 1.5;
-  transform-origin: center; animation: ui-sx-pop .5s cubic-bezier(.22,1,.3,1) both; /* motion: choreographed — first beat of the check: disc, then tick at .28s, then ring at .2s */
-}
-/* The tick, stroked on via dash-offset (path length ~34). */
-.ui-sx__tick {
-  fill: none; stroke: var(--sx-green); stroke-width: 5;
+/* ---- The check mark ------------------------------------------------------ */
+/* Two marks, both unmodified Lucide paths at Lucide's own stroke width, in the
+   success colour. `line` is the bare check (Lucide `check`), the default. It
+   strokes itself on via dash-offset; the path is 22.6 units long, which is what
+   the dasharray is tuned to. `circled` is Lucide `circle-check-big` at 20px —
+   the kit's label size — for a confirmation that should stay quiet. It is drawn
+   at rest, because a 20px mark has nothing to choreograph. */
+.ui-sx__check { display: block; }
+.ui-sx__tick, .ui-sx__circle {
+  fill: none; stroke: var(--sx-green, var(--green)); stroke-width: 2;
   stroke-linecap: round; stroke-linejoin: round;
-  stroke-dasharray: 34; stroke-dashoffset: 34;
-  animation: ui-sx-draw .5s cubic-bezier(.6,0,.35,1) .28s forwards; /* motion: choreographed — the tick draws while the disc is still settling */
-  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--green) 55%, transparent));
-}
-/* Burst ring that expands and fades once, framing the moment. */
-.ui-sx__ring {
-  fill: none; stroke: var(--sx-green); stroke-width: 2;
-  transform-origin: center; opacity: 0;
-  animation: ui-sx-burst .7s cubic-bezier(.3,.7,.4,1) .2s forwards; /* motion: choreographed — the ring outlives the tick so the moment ends on the frame */
 }
-
-@keyframes ui-sx-pop {
-  0% { transform: scale(.4); opacity: 0; }
-  60% { transform: scale(1.06); opacity: 1; }
-  100% { transform: scale(1); }
+.ui-sx__check--line .ui-sx__tick {
+  stroke-dasharray: 23; stroke-dashoffset: 23;
+  animation: ui-sx-draw var(--dur-slow) var(--ease-out) forwards;
 }
 @keyframes ui-sx-draw { to { stroke-dashoffset: 0; } }
-@keyframes ui-sx-burst {
-  0% { transform: scale(.55); opacity: .7; }
-  100% { transform: scale(1.7); opacity: 0; }
-}
+
+/* circled — one small size in every layout, so it reads as a status mark
+   rather than an illustration. The split panel narrows to match it. */
+.ui-sx--check-circled .ui-sx__check { width: 20px; height: 20px; }
+.ui-sx--check-circled.ui-sx--hero .ui-sx__visual { margin-bottom: 12px; }
+.ui-sx--check-circled.ui-sx--split .ui-sx__inner { grid-template-columns: minmax(120px, 160px) 1fr; }
 
 /* ---- Confetti (opt-in) --------------------------------------------------- */
 .ui-sx__confetti { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
@@ -171,12 +125,9 @@
 .ui-sx__count-text { color: var(--text); font-size: var(--text-sm); }
 .ui-sx__count-text b { color: var(--text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
 
-/* ---- Reduced motion — static check, no burst / confetti / sweep ---------- */
+/* ---- Reduced motion — static check, no confetti / sweep ------------------ */
 @media (prefers-reduced-motion: reduce) {
-  .ui-sx__glow--a, .ui-sx__glow--b { animation: none; }
-  .ui-sx__disc { animation: none; }
-  .ui-sx__tick { animation: none; stroke-dashoffset: 0; }
-  .ui-sx__ring { display: none; }
+  .ui-sx__check--line .ui-sx__tick { animation: none; stroke-dashoffset: 0; }
   .ui-sx__confetti { display: none; }
   .ui-sx__count-ring { animation: none; background: var(--surface-2); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ }
 }
@@ -184,6 +135,7 @@
 /* ---- Narrow — split stacks -------------------------------------------- */
 @media (max-width: 560px) {
   .ui-sx--split .ui-sx__inner { grid-template-columns: 1fr; }
+  .ui-sx--check-circled.ui-sx--split .ui-sx__inner { grid-template-columns: 1fr; }
   .ui-sx--split .ui-sx__visual { border-right: 0; border-bottom: 1px solid var(--border); padding: 32px 24px; }
   .ui-sx--split .ui-sx__content { padding: 28px 26px; text-align: center; }
   .ui-sx--split .ui-sx__actions { justify-content: center; }