ab-nextjs-components 0.1.10 → 0.1.12

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.1.12 — 2026-10-16
+
+* ♿ **AbInstallSnippet tabs pass AA in every state.** Each state now paints an explicit text/background pair from the live palette instead of a transparent tab and a 12% bronze tint: inactive `on-surface-variant` on `surface-container` (8.04:1 light / 9.67:1 dark), hover `on-surface` on an 8% `on-surface` state layer (12.63:1 / 10.39:1), active and active + hover `on-primary-container` on `primary-container` (13.28:1 / 7.22:1). Fallbacks are the light bronze palette, so it also passes without the theme
+* 🥉 **New `AbButton type="filled"`** (client + server): solid bronze `--md-sys-color-primary` with `on-primary` label and icon. Sets `data-type="filled"`, styled with hover / focus / disabled by `ab-nextjs-theme@^0.3.3`; a `.isFilled` fallback paints the rest state on older themes. `AbButtonType` gains `'filled'`
+* ⬆️ **`ab-nextjs-theme ^0.3.3`** (peer + dev, was `^0.3.1`) for the filled hover / focus / disabled states and the button icon-colour fix. The `.isFilled` fallback stays for apps still on an older theme
+* Tests: contrast computed from the theme palette (light + dark, every state, plus the no-theme fallbacks); filled type on client + server twins. Checked in WebKit (ratios above; filled 6.47:1 light / 7.74:1 dark)
+
+## 0.1.11 — 2026-10-15
+
+* 🐛 **AbFlowDiagram: nodes no longer cover the header in small boxes.** At 390px wide the Live Playground's top node ("core") sat under the "Live Playground" header. With a header (title, live dot or caption) the root now gets `data-ab-header="true"`, and nodes + wires live in a stage that starts below the header band: `--ab-flow-diagram-inset-top` (default `2.75rem`, tunable). Node `x` / `y` stay 0–100 but now map onto that stage, and the wires share the same box so they still meet the nodes. Without a header the stage is the full card (unchanged)
+* 📏 **AbFlowDiagram nodes scale with the card:** `container-type: inline-size` on the root; node text, padding, radius and the hub glow use clamped `cqi` sizes (13px on a 760px card, 11px at 390px)
+* 🪐 **AbFlowDiagram: side nodes are never clipped** (Joseph: s04's `--ab-color-bronze` and s07's `reduced motion` were cut off at the card edge in a 390px box). The orbit now scales with the box. Each node is anchored at the same fraction of its own box as its position (`translate(-x%, -y%)` via `--ab-flow-node-x` / `-y`; `x = y = 50` is the old centring), so the outer ring pulls in by exactly the node's width, and the wire end stays inside the pill. Nodes + wires also sit inside a side margin, `--ab-flow-diagram-inset-x` (default `0.5rem`), and an over-long label ellipsises (`max-width: 100%`). Positions are clamped to 0–100 like the wires
+* Tests: header flag, stage insets shared by nodes + wires, 390px geometry, clamped scaling, proportional anchoring + side margin, s04 / s07 orbit geometry at 390 / 760px × 276 / 380px. Checked in WebKit at 390px: "core" top 9px → 53px (header ends at 33px); no node overlaps the header or is clipped at 390 / 760px. After the orbit fix: s04 + s07 have no node clipped (x or y) or over the header at 390 / 760px wide × 276px / 380px / default-ratio heights (before: 5 nodes clipped at 390px, 2 at 760px)
+
 ## 0.1.10 — 2026-10-14
 
 * **Motion comes from ab-nextjs-animations (>= 0.2.4, now a required peer):** no component CSS declares its own `transition`, `animation` or `@keyframes` any more. Each component imports the package stylesheet it needs:

package/README.md

@@ -66,6 +66,14 @@ Shipped assets: `assets/logos/ab-logo.svg`, `assets/spinners/3-dots-scale.svg`,
 * `<AbLogo>` defaults to the Ab logo **shipped in this package** (data URI / `ab-logo/ab-logo.svg`). Pass `src` to override.
 
 
+### Buttons & install snippet (0.1.12)
+
+* `<AbButton type="filled">` 🥉 is a solid bronze button (`--md-sys-color-primary` background, `--md-sys-color-on-primary` label and icon). It sets `data-type="filled"`, which **`ab-nextjs-theme@^0.3.3`** styles with hover, focus and disabled states. On older themes a built-in fallback still paints the solid bronze rest state.
+  ```tsx
+  <AbButton type="filled" label="Get started" />
+  ```
+* `<AbInstallSnippet>` tabs are **≥ 4.5:1** (WCAG AA) in light and dark, active, inactive and hover: inactive = on-surface-variant on surface-container, hover = on-surface on an 8% state layer, active = on-primary-container on primary-container.
+
 ## Getting Started
 
 ### Installation

package/ab-button/helpers.ts

@@ -37,7 +37,9 @@
 */
 
 // 🎨 visual types shared by the client + server twins
-export type AbButtonType = 'contained' | 'outlined' | 'text';
+// 🥉 'filled' (0.1.12): solid bronze, painted by ab-nextjs-theme ≥ 0.3.3's
+//    `button[data-type="filled"]` rule (fallback in styles.module.css → .isFilled)
+export type AbButtonType = 'contained' | 'filled' | 'outlined' | 'text';
 // 🎨 colour roles
 export type AbButtonColor = 'primary' | 'secondary' | 'tertiary' | 'white' | 'black';
 // 🏷️ badge tones (G22): neutral grey or bronze accent

package/ab-button/index.tsx

@@ -63,7 +63,7 @@ export type { AbButtonBadgeTone, AbButtonColor, AbButtonType, AbButtonDisabledMo
 // ⚙️ props
 export interface AbButtonProps {
   id?: string; // 🆔
-  type?: AbButtonType; // 🎨 contained / outlined / text
+  type?: AbButtonType; // 🎨 contained / filled 🥉 / outlined / text
   htmlType?: 'button' | 'submit' | 'reset'; // 🧾
   className?: string; // 🏷️
   spinnerClassName?: string; // ⏳ spinner class
@@ -140,6 +140,7 @@ const AbButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, AbButtonProps
     className, // 🏷️
     rounded && styles.abButtonRounded, // 💊
     type === 'contained' && styles.isContained, // 🎨
+    type === 'filled' && styles.isFilled, // 🥉 solid bronze (theme ≥ 0.3.3 paints it, this is the fallback)
     mode === 'native' && styles.isDisabled, // 🚫
   );
 

package/ab-button/styles.module.css

@@ -62,6 +62,17 @@
 
 .isContained {}
 
+/* 🥉 Filled (0.1.12): solid bronze fallback for apps on ab-nextjs-theme < 0.3.3.
+ * Theme ≥ 0.3.3 ships `button[data-type="filled"]` (higher specificity), which
+ * adds the hover / focus / disabled state layers on top of this 🎨 */
+.isFilled {
+  --material-icon-color: var(--ab-button-text-color, var(--md-sys-color-on-primary, #fff)); /* 🎨 icon = label */
+
+  background: var(--ab-button-background-color, var(--md-sys-color-primary, rgb(133 83 24)));
+  color: var(--ab-button-text-color, var(--md-sys-color-on-primary, #fff));
+  font-weight: bold;
+}
+
 .isDisabled {
   pointer-events: none;
   opacity: 0.6;

package/ab-flow-diagram/index.tsx

@@ -73,6 +73,13 @@ export interface AbFlowDiagramProps {
   children?: ReactNode; // 🧩 optional extra overlay (decorative)
 }
 
+// ✂️ 0–100 (same clamp as the wires, so a node and its wire end always agree)
+const pct = (v: number): number => Math.min(100, Math.max(0, v));
+
+/** 📍 node position + proportional anchor (CSS keeps every node inside the stage, see styles.module.css) */
+const nodeStyle = (n: AbFlowNode): CSSProperties =>
+  ({ left: `${pct(n.x)}%`, top: `${pct(n.y)}%`, '--ab-flow-node-x': String(pct(n.x)), '--ab-flow-node-y': String(pct(n.y)) }) as CSSProperties;
+
 /** 🎨 Live Playground scene: SVG wires + HTML nodes, CSS-only motion, one accessible image. */
 export function AbFlowDiagram(props: AbFlowDiagramProps): ReactElement {
   // 🧩 props
@@ -88,6 +95,9 @@ export function AbFlowDiagram(props: AbFlowDiagramProps): ReactElement {
     '--ab-wire-poster': String(100 - Math.min(1, Math.max(0, posterAt)) * 100), // 🖼️ dashoffset at the poster frame
   } as CSSProperties;
 
+  // 🏷️ is there a header row? (drives the header-safe stage inset in CSS)
+  const hasHeader = Boolean(title || live || caption);
+
   return (
     <figure
       role="img" // ♿ the whole scene is ONE image
@@ -98,9 +108,10 @@ export function AbFlowDiagram(props: AbFlowDiagramProps): ReactElement {
       data-active={String(active)} // ▶️ / ⏸️
       data-ab-paused={String(!active)} // ⏸️ ab-nextjs-animations pauses wires on inactive slides
       data-variant={variant} // 📐
+      data-ab-header={String(hasHeader)} // 🏷️ header-safe stage: nodes + wires start below the header
     >
       {/* 🏷️ card header (decorative: alt already describes it) */}
-      {title || live || caption ? (
+      {hasHeader ? (
         <div className={styles.header} aria-hidden="true">
           {title ? <span className={styles.title}>{title}</span> : null}
           {live ? <span className={styles.live}><span className={styles.liveDot} />{typeof live === 'string' ? live : null}</span> : null}
@@ -126,7 +137,7 @@ export function AbFlowDiagram(props: AbFlowDiagramProps): ReactElement {
       {/* 🔵 nodes layer (HTML: crisp text, real fonts) */}
       <div className={styles.nodes} aria-hidden="true">
         {nodes.map((n) => (
-          <span key={n.id} className={styles.node} data-tone={n.tone ?? 'node'} style={{ left: `${n.x}%`, top: `${n.y}%` }}>
+          <span key={n.id} className={styles.node} data-tone={n.tone ?? 'node'} style={nodeStyle(n)}>
             {n.icon ? <span className={styles.nodeIcon}>{n.icon}</span> : null}
             <span>{n.label}</span>
           </span>

package/ab-flow-diagram/styles.module.css

@@ -47,6 +47,15 @@
   background: var(--ab-color-surface-container, transparent); /* 🎨 */
   overflow: hidden; /* ✂️ */
   color: var(--ab-color-on-surface, currentColor); /* 🎨 */
+  container-type: inline-size; /* 📦 nodes scale with the card width (cqi units below) */
+  /* 🎛️ stage insets (tunable): where nodes + wires may sit. Top is 0 unless a header renders (below) */
+  --ab-flow-diagram-stage-top: 0px;
+  --ab-flow-diagram-stage-x: var(--ab-flow-diagram-inset-x, 0.5rem); /* ↔️ side margin: nodes never touch the card edge */
+}
+/* 🏷️ header-safe stage: with a title / live dot / caption, nodes + wires start BELOW the header band, so a
+ *    node near the top (e.g. "core" at 390px) can't cover the header. Override with --ab-flow-diagram-inset-top */
+.root[data-ab-header='true'] {
+  --ab-flow-diagram-stage-top: var(--ab-flow-diagram-inset-top, 2.75rem); /* 📏 0.875rem header top + ~1.25rem row + gap */
 }
 .root[data-variant='compact'] {
   aspect-ratio: auto; /* 📐 */
@@ -78,9 +87,9 @@
 /* 〰️ wires layer */
 .wires {
   position: absolute; /* 📌 */
-  inset: 0; /* 📐 full card */
-  width: 100%; /* ↔️ */
-  height: 100%; /* ↕️ */
+  inset: var(--ab-flow-diagram-stage-top) var(--ab-flow-diagram-stage-x) 0; /* 📐 the stage (below the header, inside the side margins) */
+  width: calc(100% - 2 * var(--ab-flow-diagram-stage-x)); /* ↔️ same box as .nodes */
+  height: calc(100% - var(--ab-flow-diagram-stage-top)); /* ↕️ same box as .nodes, so wires meet the nodes */
   overflow: visible; /* 🚫 clip */
 }
 .wire,
@@ -101,25 +110,33 @@
 }
 
 /* 🔵 nodes layer */
-.nodes { position: absolute; inset: 0; } /* 📐 */
+.nodes { position: absolute; inset: var(--ab-flow-diagram-stage-top) var(--ab-flow-diagram-stage-x) 0; } /* 📐 same stage as .wires */
 .node {
   position: absolute; /* 📌 x/y */
-  transform: translate(-50%, -50%); /* 🎯 centre on the point */
+  /* 🎯 orbit that scales with the box: each node is anchored at the SAME fraction of its own box as its
+   *    position in the stage (x = 8 → 8% of the pill sits left of the point, x = 92 → 92%). So the outer edge
+   *    of the orbit pulls in by exactly the node's width: a side node can never cross the card edge, at any
+   *    box size, and the wire end (the point) is always inside the pill. x = y = 50 is the old centring. */
+  transform: translate(calc(var(--ab-flow-node-x, 50) * -1%), calc(var(--ab-flow-node-y, 50) * -1%));
+  max-width: 100%; /* 📏 an over-long label can't be wider than the stage… */
+  overflow: hidden; /* ✂️ …it ellipsises instead */
+  text-overflow: ellipsis; /* … */
   display: inline-flex; /* 📐 */
   align-items: center; /* ↕️ */
   gap: 0.375rem; /* 🧱 */
-  padding: 0.375rem 0.625rem; /* 🧱 */
-  border-radius: 0.625rem; /* 🔲 */
+  /* 📏 scales with the card (cqi = 1% of its width): 760px card → 13px text, 390px → 11px; clamped both ways */
+  padding: clamp(0.25rem, 0.8cqi, 0.375rem) clamp(0.4375rem, 1.4cqi, 0.625rem); /* 🧱 */
+  border-radius: clamp(0.5rem, 1.4cqi, 0.625rem); /* 🔲 */
   border: 1px solid var(--ab-color-outline-variant, rgb(0 0 0 / 0.12)); /* 🖊️ */
   background: var(--ab-color-surface, #fff); /* 🎨 */
-  font-size: 0.8125rem; /* 🔡 */
+  font-size: clamp(0.6875rem, 1.75cqi, 0.8125rem); /* 🔡 */
   white-space: nowrap; /* 🚫 wrap */
 }
 .node[data-tone='hub'] {
-  padding: 0.625rem 0.875rem; /* 🧱 bigger */
+  padding: clamp(0.4375rem, 1.4cqi, 0.625rem) clamp(0.625rem, 1.9cqi, 0.875rem); /* 🧱 bigger (scales too) */
   border-color: var(--ab-color-bronze, #A67C52); /* 🥉 */
   font-weight: 700; /* 💪 */
-  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ab-color-bronze, #A67C52) 12%, transparent); /* ✨ glow */
+  box-shadow: 0 0 0 clamp(3px, 0.8cqi, 6px) color-mix(in srgb, var(--ab-color-bronze, #A67C52) 12%, transparent); /* ✨ glow */
 }
 .node[data-tone='accent'] { color: var(--ab-color-bronze-text, #8A6440); } /* ♿ */
 .nodeIcon { display: inline-flex; width: 1.125rem; height: 1.125rem; } /* 🖼️ */

package/ab-install-snippet/styles.module.css

@@ -53,21 +53,31 @@
   gap: 0.25rem; /* 🧱 */
 }
 
-/* 🔘 tab */
+/* 🔘 tab
+ * ♿ 0.1.12: every state is an explicit text/background pair from the live
+ * Material palette, so it is ≥ 4.5:1 in light AND dark (tested in
+ * __tests__/ab-install-snippet-contrast.test.ts). Fallbacks are the light
+ * bronze palette, for apps that don't load the theme 🎨 */
 .tab {
   min-height: 28px; /* 📏 ≥ 24px target */
   padding: 0.25rem 0.625rem; /* 🧱 */
   border: 0; /* 🧹 */
   border-radius: 9999px; /* 💊 */
-  background: transparent; /* 🫥 */
-  color: var(--ab-color-on-surface-variant, currentColor); /* 🎨 */
+  background: var(--ab-color-surface-container, var(--md-sys-color-surface-container, rgb(252 235 226))); /* 🫥 inactive = card surface */
+  color: var(--ab-color-on-surface-variant, var(--md-sys-color-on-surface-variant, rgb(80 69 58))); /* 🎨 inactive label */
   font: inherit; /* 🔤 */
   font-size: 0.8125rem; /* 🔡 */
   cursor: pointer; /* 👆 */
 }
-.tab[aria-selected='true'] {
-  color: var(--ab-color-bronze-text, #8A6440); /* ♿ AA small text */
-  background: color-mix(in srgb, var(--ab-color-bronze, #A67C52) 12%, transparent); /* 🎨 */
+/* 🖱️ hover (inactive): 8% on-surface state layer + full on-surface label */
+.tab:hover {
+  background: color-mix(in srgb, var(--ab-color-on-surface, var(--md-sys-color-on-surface, rgb(34 26 21))) 8%, var(--ab-color-surface-container, var(--md-sys-color-surface-container, rgb(252 235 226))));
+  color: var(--ab-color-on-surface, var(--md-sys-color-on-surface, rgb(34 26 21)));
+}
+/* ✅ active (and active + hover): solid bronze container + its on-colour */
+.tab[aria-selected='true'], .tab[aria-selected='true']:hover {
+  background: var(--md-sys-color-primary-container, rgb(255 220 189)); /* 🥉 */
+  color: var(--md-sys-color-on-primary-container, rgb(44 22 0)); /* ♿ */
   font-weight: 600; /* 💪 */
 }
 .tab:focus-visible {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ab-nextjs-components",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "🚀 A lightweight collection of server & client React components created by Abraham Ukachi, and optimized for Next.js applications 😎.",
   "type": "module",
   "main": "index.ts",
@@ -43,7 +43,7 @@
     "ab-nextjs-animations": "^0.2.4",
     "ab-nextjs-hooks": "^0.1.6",
     "ab-nextjs-icons": "^0.2.3",
-    "ab-nextjs-theme": "^0.3.1",
+    "ab-nextjs-theme": "^0.3.3",
     "clsx": "^2",
     "next": "^16.3.4",
     "react": "^19",
@@ -56,7 +56,7 @@
     "ab-nextjs-animations": "^0.2.4",
     "ab-nextjs-hooks": "^0.1.6",
     "ab-nextjs-icons": "^0.2.3",
-    "ab-nextjs-theme": "^0.3.1",
+    "ab-nextjs-theme": "^0.3.3",
     "clsx": "^2.1.1",
     "esbuild": "^0.28.2",
     "eslint": "^9.39.0",

package/server/ab-button/index.tsx

@@ -94,7 +94,7 @@ const AbButton = ({
   const srReason = getAbButtonSrReason({ disabled, disabledReason });
 
   // 🏷️ classes
-  const classNames = clsx('AbButton', styles.abButton, className, rounded && styles.abButtonRounded, mode === 'native' && styles.isDisabled);
+  const classNames = clsx('AbButton', styles.abButton, className, rounded && styles.abButtonRounded, type === 'filled' && styles.isFilled /* 🥉 */, mode === 'native' && styles.isDisabled);
 
   // 🗂️ data attributes
   const dataAttrs = {

package/server/ab-button/styles.module.css

@@ -62,6 +62,17 @@
 
 .isContained {}
 
+/* 🥉 Filled (0.1.12): solid bronze fallback for apps on ab-nextjs-theme < 0.3.3.
+ * Theme ≥ 0.3.3 ships `button[data-type="filled"]` (higher specificity), which
+ * adds the hover / focus / disabled state layers on top of this 🎨 */
+.isFilled {
+  --material-icon-color: var(--ab-button-text-color, var(--md-sys-color-on-primary, #fff)); /* 🎨 icon = label */
+
+  background: var(--ab-button-background-color, var(--md-sys-color-primary, rgb(133 83 24)));
+  color: var(--ab-button-text-color, var(--md-sys-color-on-primary, #fff));
+  font-weight: bold;
+}
+
 .isDisabled {
   pointer-events: none;
   opacity: 0.6;