@revikornmann/muka-ui 0.27.1 → 0.27.3

package/dist/types/components/Avatar/Avatar.d.ts

@@ -45,7 +45,10 @@ export interface AvatarProps {
  * - Loading and error states
  * - Clickable support
  *
- * @accessibility WCAG 2.1 AA compliant
+ * @accessibility WCAG 2.1 AA, except initials contrast
+ * - Initials and "+N" use subtle text by design (Figma "Avatar"), about 2.5–3.4:1
+ *   on the avatar fill, below the 4.5:1 AA text minimum. They are decorative:
+ *   the accessible name comes from `name`, so always pass it
  * - Requires alt text when using image
  * - Uses role="img" with aria-label for non-image avatars
  * - Status indicators include aria-label

package/dist/types/components/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,cAAc,CAAC;AAEtB;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElF,MAAM,WAAW,WAAW;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,0BAA0B;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,oBAAoB;IACpB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAE5B,uBAAuB;IACvB,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAEhD,gCAAgC;IAChC,cAAc,CAAC,EAAE,WAAW,GAAG,cAAc,CAAC;IAE9C,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAaD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkKxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,cAAc,CAAC;AAEtB;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElF,MAAM,WAAW,WAAW;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,0BAA0B;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,oBAAoB;IACpB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAE5B,uBAAuB;IACvB,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAEhD,gCAAgC;IAChC,cAAc,CAAC,EAAE,WAAW,GAAG,cAAc,CAAC;IAE9C,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAaD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkKxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/types/components/Avatar/AvatarGroup.d.ts

@@ -13,6 +13,13 @@ export interface AvatarGroupProps {
      * (half) or `spacious` (a third).
      */
     spacing?: 'tight' | 'compact' | 'spacious';
+    /**
+     * Number shown in a badge on the top-right corner of the group, e.g. an
+     * unread count. Rendered as an info `BadgeNumber`; omit for no badge.
+     */
+    badge?: React.ReactNode;
+    /** Accessible label for the badge (e.g. "12 unread messages") */
+    badgeLabel?: string;
     /** Additional CSS classes */
     className?: string;
     /** Accessible label for the group */
@@ -30,6 +37,7 @@ export interface AvatarGroupProps {
  * - Three spacing modes: tight, compact, spacious
  * - Size propagation to child avatars
  * - Overflow counter display
+ * - Optional number badge on the top-right corner
  *
  * @accessibility WCAG 2.1 AA compliant
  * - Uses role="group" with aria-label

package/dist/types/components/Avatar/AvatarGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAgB;IAC/B,mCAAmC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4DAA4D;IAC5D,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,mCAAmC;IACnC,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IAE3C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoElD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../../components/Avatar/AvatarGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAgB;IAC/B,mCAAmC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4DAA4D;IAC5D,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,mCAAmC;IACnC,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IAE3C;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiFlD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/types/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAGnG,OAAO,YAAY,CAAC;AAEpB,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAkBnC,MAAM,WAAW,SAAS;IACxB,wCAAwC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,mBAAmB;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAE7B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAuCpC,CAAC;AAGF,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAyD1C,CAAC;AAGF,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IAEd,gBAAgB;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,qEAAqE;IACrE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAyDlC,CAAC;AAGF,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IAEd,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqB5C,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAGnG,OAAO,YAAY,CAAC;AAEpB,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAkBnC,MAAM,WAAW,SAAS;IACxB,wCAAwC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,mBAAmB;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAE7B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAuCpC,CAAC;AAGF,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAyD1C,CAAC;AAGF,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IAEd,gBAAgB;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,qEAAqE;IACrE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAyDlC,CAAC;AAGF,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IAEd,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqB5C,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/docs/consumers/brand.md

@@ -214,8 +214,12 @@ const link = document.getElementById('muka-theme') as HTMLLinkElement;
 link.href = `/styles/tokens-acme-${mode}.css`;
 ```
 
-Copy the generated CSS into your static/public directory so those hrefs resolve.
-This is exactly how Muka's own Storybook switches between its ten themes.
+Those hrefs need the generated CSS at a stable URL: have your token build write
+or copy it into your static/public directory, as part of the same `build:tokens`
+step described under [Keeping your brand current](#keeping-your-brand-current).
+Don't keep a hand-made copy there — it stays frozen while the light stylesheet
+moves on, and any token missing from the dark copy shows its light value in dark
+mode. This is exactly how Muka's own Storybook switches between its ten themes.
 
 ## Keeping your brand current
 

package/docs/consumers/setup-instructions.md

@@ -71,9 +71,41 @@ document.getElementById('muka-theme').href =
   `/styles/tokens-${brand}-${mode}.css`;
 ```
 
-Copy the token CSS you need into your static/public directory (or let your
-bundler emit it at a stable URL) so those hrefs resolve. Muka's own Storybook
-switches between all ten themes exactly this way — see
+Those hrefs need the token CSS at a stable URL. Copy it from the installed
+package **as part of every `dev` and `build`** (or let your bundler emit it), so
+it always matches the Muka version you have installed:
+
+```js
+// scripts/sync-theme-tokens.mjs
+import { copyFileSync, mkdirSync } from 'node:fs';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+mkdirSync('public/styles', { recursive: true });
+for (const mode of ['light', 'dark']) {
+  const file = `tokens-muka-${mode}.css`;
+  copyFileSync(require.resolve(`@revikornmann/muka-ui/styles/${file}`), `public/styles/${file}`);
+}
+```
+
+```json
+"scripts": {
+  "sync:themes": "node scripts/sync-theme-tokens.mjs",
+  "dev": "npm run sync:themes && next dev",
+  "build": "npm run sync:themes && next build"
+}
+```
+
+Gitignore the copies (`public/styles/tokens-*.css`). Chain the script into
+`dev` and `build` rather than using `predev` / `prebuild`: pnpm 9 skips `pre*`
+scripts by default.
+
+**Never commit a hand-made copy.** It is frozen at the version you copied, and
+each Muka release adds tokens it lacks. A token missing from the dark copy keeps
+the value from the light stylesheet, so new components show light colours in
+dark mode (e.g. a white ring around grouped avatars).
+
+Muka's own Storybook switches between all ten themes this way — see
 `.storybook/ThemeDecorator.ts` in the repo.
 
 ### `data-layout`: the one attribute that does do something

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revikornmann/muka-ui",
-  "version": "0.27.1",
+  "version": "0.27.3",
   "description": "Muka Design System - Multi-brand design tokens and React components",
   "main": "dist/cjs/components/index.js",
   "module": "dist/esm/components/index.js",

package/skills/setup-muka/SKILL.md

@@ -82,9 +82,42 @@ const link = document.getElementById('muka-theme') as HTMLLinkElement;
 link.href = `/styles/tokens-${brand}-${mode}.css`;
 ```
 
-Copy the brand's token CSS into the app's static/public directory (or let the
-bundler emit it with a stable URL) so those hrefs resolve. This is exactly what
-Muka's own Storybook does.
+Those hrefs need the brand's token CSS at a stable URL. Add a script that copies
+it from the installed package into the app's static/public directory, run it
+before `dev` and `build`, and gitignore the copies (or let the bundler emit the
+CSS). Use the brand the app actually loads in place of `muka`:
+
+```js
+// scripts/sync-theme-tokens.mjs
+import { copyFileSync, mkdirSync } from 'node:fs';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+mkdirSync('public/styles', { recursive: true });
+for (const mode of ['light', 'dark']) {
+  const file = `tokens-muka-${mode}.css`;
+  copyFileSync(require.resolve(`@revikornmann/muka-ui/styles/${file}`), `public/styles/${file}`);
+}
+```
+
+```json
+"scripts": {
+  "sync:themes": "node scripts/sync-theme-tokens.mjs",
+  "dev": "npm run sync:themes && next dev",
+  "build": "npm run sync:themes && next build"
+}
+```
+
+Gitignore the copies (`public/styles/tokens-*.css`). Chain the script into
+`dev` and `build` rather than using `predev` / `prebuild`: pnpm 9 skips `pre*`
+scripts by default.
+
+**Never commit a hand-made copy.** It is frozen at the version you copied, and
+each Muka release adds tokens it lacks. A token missing from the dark copy keeps
+the value from the light stylesheet, so new components show light colours in
+dark mode (e.g. a white ring around grouped avatars).
+
+This is exactly how Muka's own Storybook switches themes.
 
 ### Fonts come from Muka — do not load them yourself
 

package/tokens/t4-components/avatar.json

@@ -38,6 +38,38 @@
         "$value": "{size.10xl}"
       }
     },
+    "icon": {
+      "size": {
+        "3xs": {
+          "$type": "sizing",
+          "$value": "{size.md}"
+        },
+        "2xs": {
+          "$type": "sizing",
+          "$value": "{size.lg}"
+        },
+        "xs": {
+          "$type": "sizing",
+          "$value": "{size.xl}"
+        },
+        "sm": {
+          "$type": "sizing",
+          "$value": "{size.2xl}"
+        },
+        "md": {
+          "$type": "sizing",
+          "$value": "{size.3xl}"
+        },
+        "lg": {
+          "$type": "sizing",
+          "$value": "{size.4xl}"
+        },
+        "xl": {
+          "$type": "sizing",
+          "$value": "{size.6xl}"
+        }
+      }
+    },
     "color": {
       "background": {
         "default": {
@@ -52,7 +84,7 @@
       "foreground": {
         "default": {
           "$type": "color",
-          "$value": "{color.text.default.default}"
+          "$value": "{color.text.subtle.default}"
         },
         "muted": {
           "$type": "color",
@@ -165,13 +197,13 @@
       },
       "overlap": {
         "tight": {
-          "sm": {
+          "xs": {
             "$type": "dimension",
-            "$value": "{spacing.8}"
+            "$value": "{spacing.7}"
           },
           "2xs": {
             "$type": "dimension",
-            "$value": "{spacing.5}"
+            "$value": "{spacing.6}"
           },
           "3xs": {
             "$type": "dimension",
@@ -179,21 +211,21 @@
           }
         },
         "compact": {
-          "sm": {
+          "xs": {
             "$type": "dimension",
             "$value": "{spacing.6}"
           },
           "2xs": {
             "$type": "dimension",
-            "$value": "{spacing.4}"
+            "$value": "1.125rem"
           },
           "3xs": {
             "$type": "dimension",
-            "$value": "{spacing.3}"
+            "$value": "0.875rem"
           }
         },
         "spacious": {
-          "sm": {
+          "xs": {
             "$type": "dimension",
             "$value": "{spacing.4}"
           },
@@ -206,6 +238,12 @@
             "$value": "{spacing.2}"
           }
         }
+      },
+      "badge": {
+        "offset": {
+          "$type": "dimension",
+          "$value": "{spacing.1}"
+        }
       }
     }
   }