ab-nextjs-components 0.1.11 → 0.1.12

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 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)

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-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.11",
+  "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;