@apliteni/apliteni-ui 0.37.0 → 0.37.1

package/README.md

@@ -105,6 +105,10 @@ import { tokensCss, topbarCss, cssText } from '@apliteni/apliteni-ui/inline';
 // …inline tokensCss + topbarCss into the <style> you serve.
 ```
 
+`cssText` includes every sheet. When selecting individual sheets from `styles`,
+`successPanel()` needs both `styles.callout` (panel layout) and `styles.success`
+(shared glowing check and reduced-motion styles), after `tokensCss` and `baseCss`.
+
 ## React components (stateful surfaces)
 
 `DataTable`, `Pagination`, `Modal`, `Button`, `Badge`, `Card` and `Icon` — same `.ui-*` classes,

package/package.json

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

package/src/components/index.js

@@ -2,10 +2,10 @@
 // viz/ server-render idiom so the portal can adopt them with no framework.
 import { icon } from '../assets/icons.js';
 import { illo } from '../assets/illustrations.js';
+import { successCheck } from './success.js';
 const HTML_ENTITIES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' };
 const cx = (...a) => a.filter(Boolean).join(' ');
 export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"]/g, (c) => HTML_ENTITIES[c]);
-
 // ---- Button --------------------------------------------------------------
 // `iconSvg` is a raw leading-icon SVG string (trusted markup, not escaped) for
 // branded glyphs the kit's icon set doesn't own — e.g. a Google "G". It takes
@@ -261,9 +261,9 @@ export function toast({
 // 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
-// no CSS, so changing one never moves the other.
+// 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">${icon('check')}</div><div class="ui-success__title">${esc(title)}</div>${sub ? `<div class="ui-success__sub">${esc(sub)}</div>` : ''}</div>`;
+  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>`;
 }
 
 // ---- Empty state ---------------------------------------------------------

package/src/components/success.js

@@ -60,8 +60,8 @@ 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 no CSS (.ui-sx here, .ui-success there), so
-// changing one never moves the other.
+// confirmation owns. The two share the glowing check, while their layout
+// and content remain independent.
 export function success({
   layout = 'hero',          // 'hero' | 'split' | 'compact'
   level,                    // heading level of the title; see the note below

package/src/inline.js

@@ -25,7 +25,7 @@ export const baseCss = read('styles/base.css');
 // Canonical topbar (same class names the portal already uses).
 export const topbarCss = read('styles/topbar.css');
 
-// Individual component stylesheets, addressable by name.
+// Individual sheets; successPanel() needs both styles.callout and styles.success.
 export const styles = {
   base: baseCss,
   reducedMotion: read('styles/reduced-motion.css'),

package/src/styles/callout.css

@@ -181,14 +181,10 @@
   background: var(--glow-green); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */
 }
 .ui-success__check {
+  --sx-green: var(--chip-success-ink);
   width: 48px; height: 48px;
-  border-radius: 50%;
-  background: var(--green);
-  color: var(--signal-contrast);
-  display: grid;
-  place-items: center;
   margin: 0 auto 14px;
 }
-.ui-success__check svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.4; }
+.ui-success__check .ui-sx__check { width: 100%; height: 100%; }
 .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

@@ -11,11 +11,13 @@
  *   the foot. Markup comes from success() in components/index (re-exported).
  * ========================================================================== */
 
-.ui-sx {
-  --sx-green: var(--green);
+.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;
   overflow: hidden;
   border-radius: 20px;