@sigx/zero-daisyui 0.8.0 → 0.10.0

package/src/recipes.ts

@@ -2939,6 +2939,38 @@ const fieldControl: NonNullable<PartStyles['base']> = {
  */
 const SELECT_CLEARABLE = '[data-scope="select"][data-part="root"]:has(> [data-scope="select"][data-part="clear-trigger"]) &';
 
+/**
+ * The select trigger's lynx steps — `[inline padding in --size-field units,
+ * font-size step]` — as the size variants set them (`lynxBtnPad` and the
+ * web ramp's `fontSize`). One table, so the clear-trigger's offset below
+ * cannot drift from the trigger it sits in.
+ */
+const SELECT_LYNX_STEPS = {
+    xs: [2, 'xs'],
+    sm: [3, 'sm'],
+    md: [4, 'sm'],
+    lg: [5, 'md'],
+    xl: [6, 'lg'],
+} as const satisfies Record<keyof typeof FIELD_STEPS, readonly [number, string]>;
+
+/**
+ * Where the lynx clear-trigger's 1.5rem chip sits at one size step
+ * (signalxjs/lynx#1184): centred in the field — the root is exactly the
+ * trigger's height, so half the field less half the chip, from the top —
+ * and one `--space-xs` short of the chevron's 1em box, which sits inside the
+ * trigger's border and end padding at that step's font size. Physical
+ * `top`/`right` and direct `calc(var())` only: lynx resolves no logical
+ * insets on Android and no `min()`, and drops a `var()` that holds a
+ * `calc()`.
+ */
+const lynxSelectClear = (step: keyof typeof SELECT_LYNX_STEPS): NonNullable<PartStyles['base']> => {
+    const [pad, text] = SELECT_LYNX_STEPS[step];
+    return {
+        top: `calc(var(--size-field) * ${FIELD_STEPS[step] / 2} - 0.75rem)`,
+        right: `calc(var(--border) + var(--size-field) * ${pad} + var(--text-${text}) + var(--space-xs))`,
+    };
+};
+
 export const select: RecipeInput = {
     component: 'select',
     // Accent as text/border ink only — daisy's highlighted item is a neutral
@@ -3144,9 +3176,23 @@ export const select: RecipeInput = {
                 // A touch list has no highlight: the pressed item takes the
                 // highlighted item's wash.
                 item: { states: { pressed: { background: 'var(--color-base-200)' } } },
+                // The × and the ▾ get a spacing contract (signalxjs/lynx#1184).
+                // The web offsets the clear-trigger by "the md padding + 1em",
+                // and the 1em is the clear-trigger's own text-sm: at lg/xl the
+                // trigger's padding and chevron both grow, so the × slid onto
+                // the ▾. Here the chevron is a 1em box (right-aligned, so an
+                // unclearable select looks as before) and the clear-trigger a
+                // 1.5rem square (WCAG 2.5.8's target) placed per size beside
+                // it — see `lynxSelectClear`. The web's `min()` height and
+                // `margin-block: auto` centring are dropped on lynx, which
+                // left the box stretched to the field's full height: its
+                // focus ring was a tall pill. The ring is inset, so it hugs
+                // the chip and can never reach the chevron, and no gap shadow
+                // paints past the chip's rounded corners.
+                indicator: { base: { width: '1em', textAlign: 'right' } },
                 'clear-trigger': {
-                    base: { top: 'var(--space-xs)', bottom: 'var(--space-xs)', right: 'calc(var(--size-field) * 4 + 1em + var(--space-xs))', minWidth: '1.5rem' },
-                    states: lynxFocus(),
+                    base: { ...lynxSelectClear('md'), width: '1.5rem', height: '1.5rem', minWidth: '1.5rem', boxSizing: 'border-box' },
+                    states: lynxFocus({ inset: true }),
                 },
             },
             variants: {
@@ -3155,7 +3201,10 @@ export const select: RecipeInput = {
                 color: Object.fromEntries(ROLES.map((c) => [c, { popup: { base: {
                     '--select-accent': `var(--color-${c})`,
                 } } }])),
-                size: { ...lynxBtnSizes('trigger'), md: { trigger: { base: lynxBtnPad(4) } } },
+                size: Object.fromEntries((Object.keys(SELECT_LYNX_STEPS) as (keyof typeof SELECT_LYNX_STEPS)[]).map((step) => [step, {
+                    trigger: { base: lynxBtnPad(SELECT_LYNX_STEPS[step][0]) },
+                    'clear-trigger': { base: lynxSelectClear(step) },
+                }])),
             },
         },
     },
@@ -3599,6 +3648,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 +5670,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) ────────────────────────────────────────────────────────
@@ -7224,9 +7386,11 @@ export const steps: RecipeInput = {
 /**
  * The modal sheet's slide (#83): in from its edge, back out to it.
  *
- * `translate` is physical, so the travel is a custom property that flips with
- * the placement AND the direction — off the reading start is leftward in LTR
- * and rightward in RTL (the `rtl` hedge, as everywhere here). Keyed on
+ * `translate` is physical, so the travel is a custom property — the whole
+ * `x y` pair — that flips with the placement AND the direction: off the
+ * reading start is leftward in LTR and rightward in RTL (the `rtl` hedge, as
+ * everywhere here), while a `top` / `bottom` sheet travels on Y and mirrors
+ * in neither (#291). Keyed on
  * `data-l-dock="sheet"`, the regime, which holds through the exit where
  * `:modal` does not, so the slide-out leaves from the sheet's own box.
  * Opacity stays at 1: the travel is the transition. Each direction rides the
@@ -7240,16 +7404,19 @@ const sheetSlide = (enter: string, exit: string): PartStyles => {
         return `translate ${tempo}, display ${duration} allow-discrete, overlay ${duration} allow-discrete`;
     };
     return {
-        base: { '--drawer-travel': '-100%' },
+        base: { '--drawer-travel': '-100% 0' },
         selectors: {
-            '&[data-placement="end"]': { '--drawer-travel': '100%' },
-            [`&[data-placement="start"]${rtl}`]: { '--drawer-travel': '100%' },
-            [`&[data-placement="end"]${rtl}`]: { '--drawer-travel': '-100%' },
-            [sheet]: { opacity: '1', translate: 'var(--drawer-travel) 0', transition: travel(exit) },
+            '&[data-placement="end"]': { '--drawer-travel': '100% 0' },
+            [`&[data-placement="start"]${rtl}`]: { '--drawer-travel': '100% 0' },
+            [`&[data-placement="end"]${rtl}`]: { '--drawer-travel': '-100% 0' },
+            // The block edges travel on Y, and no direction mirrors them (#291).
+            '&[data-placement="top"]': { '--drawer-travel': '0 -100%' },
+            '&[data-placement="bottom"]': { '--drawer-travel': '0 100%' },
+            [sheet]: { opacity: '1', translate: 'var(--drawer-travel)', transition: travel(exit) },
             [open]: { translate: 'none', transition: travel(enter) },
         },
         at: {
-            'starting-style': { selectors: { [open]: { opacity: '1', translate: 'var(--drawer-travel) 0' } } },
+            'starting-style': { selectors: { [open]: { opacity: '1', translate: 'var(--drawer-travel)' } } },
             'reduced-motion': { selectors: { [sheet]: { transition: 'none' }, [open]: { transition: 'none' } } },
         },
     };
@@ -7319,6 +7486,38 @@ export const drawer: RecipeInput = {
                 },
                 '&[data-placement="start"][data-l-dock="sheet"]': { insetInlineStart: '0', insetInlineEnd: 'auto' },
                 '&[data-placement="end"][data-l-dock="sheet"]': { insetInlineStart: 'auto', insetInlineEnd: '0' },
+                /**
+                 * The block edges (#291): a sheet across the viewport's width,
+                 * pinned with `inset-block-*` — nothing here mirrors in RTL. Its
+                 * height is this recipe's: content-sized up to most of the
+                 * viewport, so the scrim stays in reach. Full width by default —
+                 * `measure` still caps the INLINE size (centred by the auto
+                 * margins), which the `:where()` keeps below the layout step
+                 * table's specificity whatever order the files load in.
+                 */
+                '&:where([data-placement="top"], [data-placement="bottom"])': { '--l-measure': 'none' },
+                '&[data-placement="top"][data-l-dock="sheet"]': {
+                    insetBlockStart: '0',
+                    insetBlockEnd: 'auto',
+                    insetInlineStart: '0',
+                    insetInlineEnd: '0',
+                    marginInline: 'auto',
+                    blockSize: 'auto',
+                    maxBlockSize: '85dvh',
+                    borderEndStartRadius: 'var(--radius-box)',
+                    borderEndEndRadius: 'var(--radius-box)',
+                },
+                '&[data-placement="bottom"][data-l-dock="sheet"]': {
+                    insetBlockStart: 'auto',
+                    insetBlockEnd: '0',
+                    insetInlineStart: '0',
+                    insetInlineEnd: '0',
+                    marginInline: 'auto',
+                    blockSize: 'auto',
+                    maxBlockSize: '85dvh',
+                    borderStartStartRadius: 'var(--radius-box)',
+                    borderStartEndRadius: 'var(--radius-box)',
+                },
             },
         }),
         backdrop: {
@@ -8151,7 +8350,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,