@sigx/zero-daisyui 0.8.0 → 0.9.0

package/dist/register.d.ts

@@ -265,6 +265,15 @@ declare module '@sigx/zero' {
                 axes: { 'shape': 'circle' | 'square' | 'rounded' };
                 mods: Record<string, never>;
             };
+            /** avatar-group — color, size wired. */
+            'avatar-group': {
+                color: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+                size: 'xs' | 'sm' | 'lg' | 'xl' | 'md';
+                /** Accepts `variant` at runtime, but no daisyui recipe wires it — the attribute would match nothing. */
+                variant: never;
+                axes: Record<string, never>;
+                mods: Record<string, never>;
+            };
             /** toast — color, size wired. */
             'toast': {
                 color: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';

package/dist/report.json

@@ -10,8 +10,8 @@
         "score": 100,
         "weight": 25,
         "detail": {
-          "styled": 63,
-          "total": 63
+          "styled": 64,
+          "total": 64
         }
       },
       "vocabulary": {
@@ -62,8 +62,8 @@
     }
   },
   "coverage": {
-    "componentsStyled": 63,
-    "componentsTotal": 63,
+    "componentsStyled": 64,
+    "componentsTotal": 64,
     "unstyled": []
   },
   "vocabulary": {
@@ -543,6 +543,75 @@
         }
       }
     },
+    "avatar-group": {
+      "styled": true,
+      "axes": {
+        "color": {
+          "wired": [
+            "accent",
+            "error",
+            "info",
+            "neutral",
+            "primary",
+            "secondary",
+            "success",
+            "warning"
+          ],
+          "status": "wired"
+        },
+        "size": {
+          "wired": [
+            "lg",
+            "md",
+            "sm",
+            "xl",
+            "xs"
+          ],
+          "status": "wired"
+        },
+        "variant": {
+          "wired": [],
+          "status": "unwired"
+        }
+      },
+      "customAxes": {},
+      "mods": [],
+      "never": [
+        "variant"
+      ],
+      "parts": {
+        "root": {
+          "styled": true,
+          "states": {
+            "covered": [],
+            "coveredIndirectly": [],
+            "skipped": [],
+            "uncovered": []
+          },
+          "flags": {
+            "covered": [],
+            "coveredIndirectly": [],
+            "skipped": [],
+            "uncovered": []
+          }
+        },
+        "overflow": {
+          "styled": true,
+          "states": {
+            "covered": [],
+            "coveredIndirectly": [],
+            "skipped": [],
+            "uncovered": []
+          },
+          "flags": {
+            "covered": [],
+            "coveredIndirectly": [],
+            "skipped": [],
+            "uncovered": []
+          }
+        }
+      }
+    },
     "badge": {
       "styled": true,
       "axes": {
@@ -8267,6 +8336,16 @@
           "success",
           "warning"
         ],
+        "avatar-group": [
+          "accent",
+          "error",
+          "info",
+          "neutral",
+          "primary",
+          "secondary",
+          "success",
+          "warning"
+        ],
         "badge": [
           "accent",
           "error",
@@ -8947,6 +9026,13 @@
           "xl",
           "xs"
         ],
+        "avatar-group": [
+          "lg",
+          "md",
+          "sm",
+          "xl",
+          "xs"
+        ],
         "badge": [
           "lg",
           "md",
@@ -9743,8 +9829,8 @@
   "contrast": [
     {
       "name": "light",
-      "cells": 3310,
-      "measured": 2900,
+      "cells": 3311,
+      "measured": 2901,
       "failing": 0,
       "warnings": 324,
       "disabledFailing": 0,
@@ -9819,8 +9905,8 @@
     },
     {
       "name": "dark",
-      "cells": 3310,
-      "measured": 2900,
+      "cells": 3311,
+      "measured": 2901,
       "failing": 0,
       "warnings": 168,
       "disabledFailing": 0,
@@ -9895,8 +9981,8 @@
     },
     {
       "name": "dim",
-      "cells": 3310,
-      "measured": 2900,
+      "cells": 3311,
+      "measured": 2901,
       "failing": 0,
       "warnings": 269,
       "disabledFailing": 0,
@@ -9971,8 +10057,8 @@
     },
     {
       "name": "nord",
-      "cells": 3310,
-      "measured": 2900,
+      "cells": 3311,
+      "measured": 2901,
       "failing": 0,
       "warnings": 1231,
       "disabledFailing": 0,
@@ -10047,8 +10133,8 @@
     },
     {
       "name": "sunset",
-      "cells": 3310,
-      "measured": 2900,
+      "cells": 3311,
+      "measured": 2901,
       "failing": 0,
       "warnings": 268,
       "disabledFailing": 0,
@@ -10338,6 +10424,18 @@
         "detail": "calc-holding custom-property chain inlined: value substituted into 2 consumer declaration(s) across 5 compound(s) and the definition dropped — lynx drops any declaration consuming var() of a property whose value holds calc() (measured, signalxjs/lynx#1075)",
         "scope": "avatar"
       },
+      {
+        "where": "lynx recipe for \"avatar-group\".\"root\"",
+        "what": "display: inline-flex",
+        "detail": "rewritten to display: flex — lynx has no inline formatting context, and an unsupported display value keeps the default linear layout (signalxjs/lynx#1075)",
+        "scope": "avatar-group"
+      },
+      {
+        "where": "lynx recipe for \"avatar-group\"",
+        "what": "--avatar-group-size",
+        "detail": "calc-holding custom-property chain inlined: value substituted into 2 consumer declaration(s) across 5 compound(s) and the definition dropped — lynx drops any declaration consuming var() of a property whose value holds calc() (measured, signalxjs/lynx#1075)",
+        "scope": "avatar-group"
+      },
       {
         "where": "lynx recipe for \"combobox\".\"root\"",
         "what": "display: inline-flex",
@@ -10455,7 +10553,7 @@
       {
         "where": "lynx recipe for \"divider\"",
         "what": "--divider-thickness",
-        "detail": "calc-holding custom-property chain inlined: value substituted into 0 consumer declaration(s) across 5 compound(s) and the definition dropped — lynx drops any declaration consuming var() of a property whose value holds calc() (measured, signalxjs/lynx#1075)",
+        "detail": "calc-holding custom-property chain inlined: value substituted into 2 consumer declaration(s) across 5 compound(s) and the definition dropped — lynx drops any declaration consuming var() of a property whose value holds calc() (measured, signalxjs/lynx#1075)",
         "scope": "divider"
       },
       {
@@ -11617,6 +11715,96 @@
         "detail": "not expressible in the class grammar — dropped; supply a lynx replacement in the recipe target section",
         "scope": "avatar"
       },
+      {
+        "where": "lynx recipe for \"avatar-group\".\"overflow\"",
+        "what": "paddingInline: var(--space-2xs)",
+        "detail": "padding-inline resolves on iOS but not on Android (measured, signalxjs/lynx#1084) — cross-platform-asymmetric, treated as unsupported; dropped, restate the geometry with a physical spelling (top/right/bottom/left, margin-*/padding-*) in the recipe's lynx target section",
+        "scope": "avatar-group"
+      },
+      {
+        "where": "lynx recipe for \"avatar-group\".\"overflow\"",
+        "what": "marginInlineStart: calc(var(--avatar-group-size) * -0.25)",
+        "detail": "margin-inline-start resolves on iOS but not on Android (measured, signalxjs/lynx#1084) — cross-platform-asymmetric, treated as unsupported; dropped, restate the geometry with a physical spelling (top/right/bottom/left, margin-*/padding-*) in the recipe's lynx target section",
+        "scope": "avatar-group"
+      },
+      {
+        "where": "lynx recipe for \"avatar-group\"",
+        "what": "composes[\"avatar\"]",
+        "detail": "a nested scope styled in context has no class form on this target — dropped; the nested component keeps its own recipe",
+        "scope": "avatar-group"
+      },
+      {
+        "where": "lynx recipe for \"avatar-group\"",
+        "what": "compoundVariants[0].composes[\"avatar\"]",
+        "detail": "a nested scope styled in context has no class form on this target — dropped; the nested component keeps its own recipe",
+        "scope": "avatar-group"
+      },
+      {
+        "where": "lynx recipe for \"avatar-group\"",
+        "what": "compoundVariants[1].composes[\"avatar\"]",
+        "detail": "a nested scope styled in context has no class form on this target — dropped; the nested component keeps its own recipe",
+        "scope": "avatar-group"
+      },
+      {
+        "where": "lynx recipe for \"avatar-group\"",
+        "what": "compoundVariants[2].composes[\"avatar\"]",
+        "detail": "a nested scope styled in context has no class form on this target — dropped; the nested component keeps its own recipe",
+        "scope": "avatar-group"
+      },
+      {
+        "where": "lynx recipe for \"avatar-group\"",
+        "what": "compoundVariants[3].composes[\"avatar\"]",
+        "detail": "a nested scope styled in context has no class form on this target — dropped; the nested component keeps its own recipe",
+        "scope": "avatar-group"
+      },
+      {
+        "where": "lynx recipe for \"avatar-group\"",
+        "what": "compoundVariants[4].composes[\"avatar\"]",
+        "detail": "a nested scope styled in context has no class form on this target — dropped; the nested component keeps its own recipe",
+        "scope": "avatar-group"
+      },
+      {
+        "where": "lynx recipe for \"avatar-group\"",
+        "what": "compoundVariants[5].composes[\"avatar\"]",
+        "detail": "a nested scope styled in context has no class form on this target — dropped; the nested component keeps its own recipe",
+        "scope": "avatar-group"
+      },
+      {
+        "where": "lynx recipe for \"avatar-group\"",
+        "what": "compoundVariants[6].composes[\"avatar\"]",
+        "detail": "a nested scope styled in context has no class form on this target — dropped; the nested component keeps its own recipe",
+        "scope": "avatar-group"
+      },
+      {
+        "where": "lynx recipe for \"avatar-group\"",
+        "what": "compoundVariants[7].composes[\"avatar\"]",
+        "detail": "a nested scope styled in context has no class form on this target — dropped; the nested component keeps its own recipe",
+        "scope": "avatar-group"
+      },
+      {
+        "where": "lynx recipe for \"avatar-group\"",
+        "what": "compoundVariants[8].composes[\"avatar\"]",
+        "detail": "a nested scope styled in context has no class form on this target — dropped; the nested component keeps its own recipe",
+        "scope": "avatar-group"
+      },
+      {
+        "where": "lynx recipe for \"avatar-group\"",
+        "what": "compoundVariants[9].composes[\"avatar\"]",
+        "detail": "a nested scope styled in context has no class form on this target — dropped; the nested component keeps its own recipe",
+        "scope": "avatar-group"
+      },
+      {
+        "where": "lynx recipe for \"avatar-group\"",
+        "what": "compoundVariants[10].composes[\"avatar\"]",
+        "detail": "a nested scope styled in context has no class form on this target — dropped; the nested component keeps its own recipe",
+        "scope": "avatar-group"
+      },
+      {
+        "where": "lynx recipe for \"avatar-group\"",
+        "what": "compoundVariants[11].composes[\"avatar\"]",
+        "detail": "a nested scope styled in context has no class form on this target — dropped; the nested component keeps its own recipe",
+        "scope": "avatar-group"
+      },
       {
         "where": "lynx recipe for \"toast\".\"viewport\"",
         "what": "selectors[\"&:popover-open\"]",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigx/zero-daisyui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "DaisyUI-flavored design system for SignalX Zero — daisy's token values and component look as a pure tokens+recipes skin over @sigx/zero primitives. No Tailwind, no daisyUI plugin required.",
   "type": "module",
   "main": "./dist/index.js",
@@ -62,12 +62,12 @@
     "url": "https://github.com/signalxjs/zero/issues"
   },
   "peerDependencies": {
-    "@sigx/zero": "^0.8.0"
+    "@sigx/zero": "^0.9.0"
   },
   "devDependencies": {
     "typescript": "^7.0.2",
-    "@sigx/zero": "^0.8.0",
-    "@sigx/zero-kit": "^0.8.0"
+    "@sigx/zero": "^0.9.0",
+    "@sigx/zero-kit": "^0.9.0"
   },
   "publishConfig": {
     "access": "public"

package/src/recipes.ts

@@ -3599,6 +3599,100 @@ export const avatar: RecipeInput = {
     },
 };
 
+/**
+ * Avatar group (#297) — daisy's `avatar-group`: the faces overlap by a
+ * quarter, each already cut out by the avatar's own base-100 gap ring, and the
+ * "+N" chip is daisy's `avatar-placeholder` (neutral fill, neutral-content
+ * ink, a circle) wearing the same ring. The group's `size` borrows the
+ * avatar's own size step (`composes`), so a group sizes its faces without a
+ * prop on each, and an avatar's own `size` still wins. Colour is daisy's
+ * ring colour: it rings the chip, and it is borrowed by the avatars too, so
+ * one `color` on the group rings every face alike.
+ */
+const avatarGroupSteps: Record<string, [string, string]> = {
+    xs: ['calc(var(--size-selector) * 6)', 'var(--text-xs)'],
+    sm: ['calc(var(--size-selector) * 8)', 'var(--text-xs)'],
+    lg: ['calc(var(--size-selector) * 12)', 'var(--text-md)'],
+    xl: ['calc(var(--size-selector) * 16)', 'var(--text-lg)'],
+};
+
+export const avatarGroup: RecipeInput = {
+    component: 'avatar-group',
+    tokens: {
+        '--avatar-group-size': 'calc(var(--size-selector) * 10)',
+        '--avatar-group-text': 'var(--text-sm)',
+        '--avatar-group-ring': 'var(--color-primary)',
+    },
+    parts: {
+        root: {
+            base: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                verticalAlign: 'middle',
+                isolation: 'isolate',
+            },
+        },
+        overflow: {
+            base: {
+                // Positioned like the avatars, or it would paint under the
+                // face it overlaps.
+                position: 'relative',
+                display: 'inline-grid',
+                placeItems: 'center',
+                boxSizing: 'border-box',
+                minWidth: 'var(--avatar-group-size)',
+                height: 'var(--avatar-group-size)',
+                paddingInline: 'var(--space-2xs)',
+                marginInlineStart: 'calc(var(--avatar-group-size) * -0.25)',
+                borderRadius: '9999px',
+                boxShadow: '0 0 0 2px var(--color-base-100), 0 0 0 4px var(--avatar-group-ring)',
+                background: 'var(--color-neutral)',
+                color: 'var(--color-neutral-content)',
+                fontSize: 'var(--avatar-group-text)',
+                fontWeight: 'var(--weight-semibold)',
+                fontVariantNumeric: 'tabular-nums',
+                whiteSpace: 'nowrap',
+                userSelect: 'none',
+            },
+        },
+    },
+    composes: {
+        avatar: {
+            parts: {
+                root: {
+                    selectors: {
+                        '&:not(:first-child)': { marginInlineStart: 'calc(var(--avatar-group-size) * -0.25)' },
+                    },
+                },
+            },
+        },
+    },
+    compoundVariants: [
+        ...Object.keys(avatarGroupSteps).map((size) => ({
+            match: { size },
+            parts: {},
+            composes: { avatar: { axes: { size } } },
+        })),
+        ...ROLES.map((color) => ({
+            match: { color },
+            parts: {},
+            composes: { avatar: { axes: { color } } },
+        })),
+    ],
+    variants: {
+        color: Object.fromEntries(ROLES.map((c) => [c, { root: { base: {
+            '--avatar-group-ring': `var(--color-${c})`,
+        } } }])),
+        size: {
+            ...Object.fromEntries(Object.entries(avatarGroupSteps).map(([size, [box, text]]) => [size, { root: { base: {
+                '--avatar-group-size': box, '--avatar-group-text': text,
+            } } }])),
+            // `md` is the un-attributed render — the defaults in `tokens:`.
+            md: {},
+        },
+    },
+};
+
 /**
  * A toast whose indicator is rendered (#292): the grid grows a leading column
  * for the mark, and the text, action and close step one column along.
@@ -5527,6 +5621,25 @@ export const divider: RecipeInput = {
             xl: { root: { base: { '--divider-thickness': 'calc(var(--border) * 3)' } } },
         },
     },
+    targets: {
+        lynx: {
+            parts: {
+                // Lynx drops the ::before/::after segments the rule is drawn
+                // with above, which left the lynx divider with no line and,
+                // since only those rules read `--divider-thickness`, no size
+                // ramp either (#375). There the root itself is the line, as
+                // it was before the segments (#356): filled with the ink and
+                // one thickness across.
+                root: {
+                    base: { background: 'var(--divider-ink)' },
+                    selectors: {
+                        '&[data-orientation="horizontal"]': { blockSize: 'var(--divider-thickness)' },
+                        '&[data-orientation="vertical"]': { inlineSize: 'var(--divider-thickness)' },
+                    },
+                },
+            },
+        },
+    },
 };
 
 // ── Loading (#314) ────────────────────────────────────────────────────────
@@ -8151,7 +8264,7 @@ export const diff: RecipeInput = {
 
 export const recipes: RecipeInput[] = [
     tabs, collapsible, switchRecipe, dialog, popover, tooltip, hoverCard, menu, menubar,
-    field, fieldset, checkbox, checkboxGroup, radioGroup, progress, slider, accordion, select, button, avatar, toast, combobox,
+    field, fieldset, checkbox, checkboxGroup, radioGroup, progress, slider, accordion, select, button, avatar, avatarGroup, toast, combobox,
     toggle, toggleGroup, numberInput, ratingGroup, treeView, input, textarea,
     card, alert, emptyState, badge, divider, skeleton, spinner,
     kbd, status, indicator, stats, timeline, chat, chatLog, radialProgress, join,