@sigx/zero-daisyui 0.8.0 → 0.10.0

package/README.md

@@ -21,7 +21,9 @@ Override `--depth: 0` on a subtree to flatten it.
 
 The modal drawer sheet **slides** in from its edge and back out, the way daisy's
 `drawer-side` does (`translate` over 0.3s), instead of fading (#83). The travel
-flips with the placement and with `dir="rtl"`, and reduced motion drops it.
+flips with the placement and with `dir="rtl"`, and reduced motion drops it. A
+`top`/`bottom` sheet (#291) spans the viewport's width, rounds its inner
+corners, and rises (or drops) on the block axis, which never mirrors.
 
 The checkbox tick, the radio dot and the rating fill are **drawn**, not typeset:
 each is geometry that interpolates between states, so it rides the size ramp and

package/dist/audit.json

@@ -5050,6 +5050,17 @@
             "ink": "#e4e4e7",
             "bg": "#09090b"
           },
+          {
+            "key": "daisyui/light/avatar-group/overflow/-/-/-",
+            "scope": "avatar-group",
+            "part": "overflow",
+            "matrix": "text",
+            "verdict": "pass",
+            "ratio": 15.68,
+            "inGroup": 15.68,
+            "ink": "#e4e4e7",
+            "bg": "#09090b"
+          },
           {
             "key": "daisyui/light/toast/root/-/-/-",
             "scope": "toast",
@@ -60823,6 +60834,17 @@
             "ink": "#e4e4e7",
             "bg": "#09090b"
           },
+          {
+            "key": "daisyui/dark/avatar-group/overflow/-/-/-",
+            "scope": "avatar-group",
+            "part": "overflow",
+            "matrix": "text",
+            "verdict": "pass",
+            "ratio": 15.68,
+            "inGroup": 15.68,
+            "ink": "#e4e4e7",
+            "bg": "#09090b"
+          },
           {
             "key": "daisyui/dark/toast/root/-/-/-",
             "scope": "toast",
@@ -116596,6 +116618,17 @@
             "ink": "#b2ccd6",
             "bg": "#1c212b"
           },
+          {
+            "key": "daisyui/dim/avatar-group/overflow/-/-/-",
+            "scope": "avatar-group",
+            "part": "overflow",
+            "matrix": "text",
+            "verdict": "pass",
+            "ratio": 9.6,
+            "inGroup": 9.6,
+            "ink": "#b2ccd6",
+            "bg": "#1c212b"
+          },
           {
             "key": "daisyui/dim/toast/root/-/-/-",
             "scope": "toast",
@@ -172369,6 +172402,17 @@
             "ink": "#d8dee9",
             "bg": "#4c566a"
           },
+          {
+            "key": "daisyui/nord/avatar-group/overflow/-/-/-",
+            "scope": "avatar-group",
+            "part": "overflow",
+            "matrix": "text",
+            "verdict": "pass",
+            "ratio": 5.46,
+            "inGroup": 5.46,
+            "ink": "#d8dee9",
+            "bg": "#4c566a"
+          },
           {
             "key": "daisyui/nord/toast/root/-/-/-",
             "scope": "toast",
@@ -228142,6 +228186,17 @@
             "ink": "#94a0a9",
             "bg": "#1b262c"
           },
+          {
+            "key": "daisyui/sunset/avatar-group/overflow/-/-/-",
+            "scope": "avatar-group",
+            "part": "overflow",
+            "matrix": "text",
+            "verdict": "pass",
+            "ratio": 5.78,
+            "inGroup": 5.78,
+            "ink": "#94a0a9",
+            "bg": "#1b262c"
+          },
           {
             "key": "daisyui/sunset/toast/root/-/-/-",
             "scope": "toast",

package/dist/components.d.ts

@@ -32,6 +32,7 @@ import type { Accordion as ZAccordion } from '@sigx/zero/accordion';
 import type { Select as ZSelect } from '@sigx/zero/select';
 import type { Button as ZButton } from '@sigx/zero/button';
 import type { Avatar as ZAvatar } from '@sigx/zero/avatar';
+import type { AvatarGroup as ZAvatarGroup } from '@sigx/zero/avatar-group';
 import type { Toast as ZToast } from '@sigx/zero/toast';
 import type { Combobox as ZCombobox } from '@sigx/zero/combobox';
 import type { Toggle as ZToggle } from '@sigx/zero/toggle';
@@ -272,6 +273,14 @@ type AvatarProps = {
 type AvatarAdapted = Adapted<typeof ZAvatar, ZeroAxisProp, AvatarProps>;
 export declare const Avatar: AvatarAdapted & AdaptedStatics<typeof ZAvatar> & { Root: AvatarAdapted };
 
+/** avatar-group — no vendor route; the wired surface keeps zero's names. */
+type AvatarGroupProps = {
+    color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+    size?: 'xs' | 'sm' | 'lg' | 'xl' | 'md';
+};
+type AvatarGroupAdapted = Adapted<typeof ZAvatarGroup, ZeroAxisProp, AvatarGroupProps>;
+export declare const AvatarGroup: AvatarGroupAdapted & AdaptedStatics<typeof ZAvatarGroup> & { Root: AvatarGroupAdapted };
+
 /** toast — no vendor route; the wired surface keeps zero's names. */
 type ToastProps = {
     color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';

package/dist/components.js

@@ -56,6 +56,7 @@ export { Slider } from '@sigx/zero/slider';
 export { Accordion } from '@sigx/zero/accordion';
 export { Select } from '@sigx/zero/select';
 export { Avatar } from '@sigx/zero/avatar';
+export { AvatarGroup } from '@sigx/zero/avatar-group';
 export { Toast } from '@sigx/zero/toast';
 export { Combobox } from '@sigx/zero/combobox';
 export { Toggle } from '@sigx/zero/toggle';

package/dist/css/components/avatar-group.css

@@ -0,0 +1,168 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
+@layer zero.recipes {
+    [data-scope="avatar-group"][data-part="root"] {
+        --avatar-group-size: calc(var(--size-selector) * 10);
+        --avatar-group-text: var(--text-sm);
+        --avatar-group-ring: var(--color-primary);
+    }
+
+    [data-scope="avatar-group"][data-part="root"] {
+        display: inline-flex;
+        align-items: center;
+        vertical-align: middle;
+        isolation: isolate;
+    }
+
+    [data-scope="avatar-group"][data-part="overflow"] {
+        position: relative;
+        display: inline-grid;
+        place-items: center;
+        box-sizing: border-box;
+        min-width: var(--avatar-group-size);
+        height: var(--avatar-group-size);
+        padding-inline: var(--space-2xs);
+        margin-inline-start: calc(var(--avatar-group-size) * -0.25);
+        border-radius: 9999px;
+        box-shadow: 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);
+        font-size: var(--avatar-group-text);
+        font-weight: var(--weight-semibold);
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+        user-select: none;
+    }
+
+    [data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:first-child) {
+        margin-inline-start: calc(var(--avatar-group-size) * -0.25);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="primary"] {
+        --avatar-group-ring: var(--color-primary);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="secondary"] {
+        --avatar-group-ring: var(--color-secondary);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="accent"] {
+        --avatar-group-ring: var(--color-accent);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="neutral"] {
+        --avatar-group-ring: var(--color-neutral);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="info"] {
+        --avatar-group-ring: var(--color-info);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="success"] {
+        --avatar-group-ring: var(--color-success);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="warning"] {
+        --avatar-group-ring: var(--color-warning);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="error"] {
+        --avatar-group-ring: var(--color-error);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-size="xs"] {
+        --avatar-group-size: calc(var(--size-selector) * 6);
+        --avatar-group-text: var(--text-xs);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-size="sm"] {
+        --avatar-group-size: calc(var(--size-selector) * 8);
+        --avatar-group-text: var(--text-xs);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-size="lg"] {
+        --avatar-group-size: calc(var(--size-selector) * 12);
+        --avatar-group-text: var(--text-md);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-size="xl"] {
+        --avatar-group-size: calc(var(--size-selector) * 16);
+        --avatar-group-text: var(--text-lg);
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-size="xs"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-size])) {
+            --avatar-size: calc(var(--size-selector) * 6);
+            --avatar-text: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-size="sm"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-size])) {
+            --avatar-size: calc(var(--size-selector) * 8);
+            --avatar-text: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-size="lg"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-size])) {
+            --avatar-size: calc(var(--size-selector) * 12);
+            --avatar-text: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-size="xl"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-size])) {
+            --avatar-size: calc(var(--size-selector) * 16);
+            --avatar-text: var(--text-lg);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="primary"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-primary);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="secondary"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-secondary);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="accent"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-accent);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="neutral"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-neutral);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="info"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-info);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="success"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-success);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="warning"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-warning);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="error"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-error);
+        }
+    }
+}

package/dist/css/components/drawer.css

@@ -38,7 +38,7 @@
         opacity: 0;
         transform: none;
         transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
-        --drawer-travel: -100%;
+        --drawer-travel: -100% 0;
         padding: var(--space-lg);
         background: var(--color-base-100);
         color: var(--color-base-content);
@@ -57,20 +57,28 @@
     }
 
     [data-scope="drawer"][data-part="panel"][data-placement="end"] {
-        --drawer-travel: 100%;
+        --drawer-travel: 100% 0;
     }
 
     [data-scope="drawer"][data-part="panel"][data-placement="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-        --drawer-travel: 100%;
+        --drawer-travel: 100% 0;
     }
 
     [data-scope="drawer"][data-part="panel"][data-placement="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-        --drawer-travel: -100%;
+        --drawer-travel: -100% 0;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="top"] {
+        --drawer-travel: 0 -100%;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="bottom"] {
+        --drawer-travel: 0 100%;
     }
 
     [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"] {
         opacity: 1;
-        translate: var(--drawer-travel) 0;
+        translate: var(--drawer-travel);
         transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
         position: fixed;
         inset-block-start: 0;
@@ -96,6 +104,34 @@
         inset-inline-end: 0;
     }
 
+    [data-scope="drawer"][data-part="panel"]:where([data-placement="top"], [data-placement="bottom"]) {
+        --l-measure: none;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="top"][data-l-dock="sheet"] {
+        inset-block-start: 0;
+        inset-block-end: auto;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        margin-inline: auto;
+        block-size: auto;
+        max-block-size: 85dvh;
+        border-end-start-radius: var(--radius-box);
+        border-end-end-radius: var(--radius-box);
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="bottom"][data-l-dock="sheet"] {
+        inset-block-start: auto;
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        margin-inline: auto;
+        block-size: auto;
+        max-block-size: 85dvh;
+        border-start-start-radius: var(--radius-box);
+        border-start-end-radius: var(--radius-box);
+    }
+
     [data-scope="drawer"][data-part="panel"]::backdrop {
         background: oklch(0% 0 0 / 0.4);
     }
@@ -316,7 +352,7 @@
 
         [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state="open"] {
             opacity: 1;
-            translate: var(--drawer-travel) 0;
+            translate: var(--drawer-travel);
         }
     }
 }

package/dist/css/index.css

@@ -4747,6 +4747,173 @@
     }
 }
 
+@layer zero.recipes {
+    [data-scope="avatar-group"][data-part="root"] {
+        --avatar-group-size: calc(var(--size-selector) * 10);
+        --avatar-group-text: var(--text-sm);
+        --avatar-group-ring: var(--color-primary);
+    }
+
+    [data-scope="avatar-group"][data-part="root"] {
+        display: inline-flex;
+        align-items: center;
+        vertical-align: middle;
+        isolation: isolate;
+    }
+
+    [data-scope="avatar-group"][data-part="overflow"] {
+        position: relative;
+        display: inline-grid;
+        place-items: center;
+        box-sizing: border-box;
+        min-width: var(--avatar-group-size);
+        height: var(--avatar-group-size);
+        padding-inline: var(--space-2xs);
+        margin-inline-start: calc(var(--avatar-group-size) * -0.25);
+        border-radius: 9999px;
+        box-shadow: 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);
+        font-size: var(--avatar-group-text);
+        font-weight: var(--weight-semibold);
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+        user-select: none;
+    }
+
+    [data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:first-child) {
+        margin-inline-start: calc(var(--avatar-group-size) * -0.25);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="primary"] {
+        --avatar-group-ring: var(--color-primary);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="secondary"] {
+        --avatar-group-ring: var(--color-secondary);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="accent"] {
+        --avatar-group-ring: var(--color-accent);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="neutral"] {
+        --avatar-group-ring: var(--color-neutral);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="info"] {
+        --avatar-group-ring: var(--color-info);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="success"] {
+        --avatar-group-ring: var(--color-success);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="warning"] {
+        --avatar-group-ring: var(--color-warning);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-color="error"] {
+        --avatar-group-ring: var(--color-error);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-size="xs"] {
+        --avatar-group-size: calc(var(--size-selector) * 6);
+        --avatar-group-text: var(--text-xs);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-size="sm"] {
+        --avatar-group-size: calc(var(--size-selector) * 8);
+        --avatar-group-text: var(--text-xs);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-size="lg"] {
+        --avatar-group-size: calc(var(--size-selector) * 12);
+        --avatar-group-text: var(--text-md);
+    }
+
+    [data-scope="avatar-group"][data-part="root"][data-size="xl"] {
+        --avatar-group-size: calc(var(--size-selector) * 16);
+        --avatar-group-text: var(--text-lg);
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-size="xs"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-size])) {
+            --avatar-size: calc(var(--size-selector) * 6);
+            --avatar-text: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-size="sm"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-size])) {
+            --avatar-size: calc(var(--size-selector) * 8);
+            --avatar-text: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-size="lg"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-size])) {
+            --avatar-size: calc(var(--size-selector) * 12);
+            --avatar-text: var(--text-md);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-size="xl"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-size])) {
+            --avatar-size: calc(var(--size-selector) * 16);
+            --avatar-text: var(--text-lg);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="primary"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-primary);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="secondary"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-secondary);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="accent"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-accent);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="neutral"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-neutral);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="info"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-info);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="success"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-success);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="warning"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-warning);
+        }
+    }
+
+    @scope ([data-scope="avatar-group"][data-part="root"][data-color="error"]) to ([data-scope="avatar-group"][data-part="root"]) {
+        :scope[data-scope="avatar-group"][data-part="root"] [data-scope="avatar"][data-part="root"]:not(:where([data-color])) {
+            --avatar-ring: var(--color-error);
+        }
+    }
+}
+
 @layer zero.recipes {
     [data-scope="toast"][data-part="root"] {
         --toast-bg: var(--color-base-200);
@@ -10180,7 +10347,7 @@
         opacity: 0;
         transform: none;
         transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
-        --drawer-travel: -100%;
+        --drawer-travel: -100% 0;
         padding: var(--space-lg);
         background: var(--color-base-100);
         color: var(--color-base-content);
@@ -10199,20 +10366,28 @@
     }
 
     [data-scope="drawer"][data-part="panel"][data-placement="end"] {
-        --drawer-travel: 100%;
+        --drawer-travel: 100% 0;
     }
 
     [data-scope="drawer"][data-part="panel"][data-placement="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-        --drawer-travel: 100%;
+        --drawer-travel: 100% 0;
     }
 
     [data-scope="drawer"][data-part="panel"][data-placement="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-        --drawer-travel: -100%;
+        --drawer-travel: -100% 0;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="top"] {
+        --drawer-travel: 0 -100%;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="bottom"] {
+        --drawer-travel: 0 100%;
     }
 
     [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"] {
         opacity: 1;
-        translate: var(--drawer-travel) 0;
+        translate: var(--drawer-travel);
         transition: translate var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
         position: fixed;
         inset-block-start: 0;
@@ -10238,6 +10413,34 @@
         inset-inline-end: 0;
     }
 
+    [data-scope="drawer"][data-part="panel"]:where([data-placement="top"], [data-placement="bottom"]) {
+        --l-measure: none;
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="top"][data-l-dock="sheet"] {
+        inset-block-start: 0;
+        inset-block-end: auto;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        margin-inline: auto;
+        block-size: auto;
+        max-block-size: 85dvh;
+        border-end-start-radius: var(--radius-box);
+        border-end-end-radius: var(--radius-box);
+    }
+
+    [data-scope="drawer"][data-part="panel"][data-placement="bottom"][data-l-dock="sheet"] {
+        inset-block-start: auto;
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        margin-inline: auto;
+        block-size: auto;
+        max-block-size: 85dvh;
+        border-start-start-radius: var(--radius-box);
+        border-start-end-radius: var(--radius-box);
+    }
+
     [data-scope="drawer"][data-part="panel"]::backdrop {
         background: oklch(0% 0 0 / 0.4);
     }
@@ -10458,7 +10661,7 @@
 
         [data-scope="drawer"][data-part="panel"][data-l-dock="sheet"][data-state="open"] {
             opacity: 1;
-            translate: var(--drawer-travel) 0;
+            translate: var(--drawer-travel);
         }
     }
 }