@sigx/zero-daisyui 0.8.0 → 0.9.0

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/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);

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

@@ -0,0 +1,97 @@
+.zx-avatar-group__root {
+    --avatar-group-text: var(--text-sm);
+    --avatar-group-ring: var(--color-primary);
+}
+
+.zx-avatar-group__root {
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+    isolation: isolate;
+}
+
+.zx-avatar-group__overflow {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    box-sizing: border-box;
+    min-width: calc(var(--size-selector) * 10);
+    height: calc(var(--size-selector) * 10);
+    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;
+}
+
+.zx-avatar-group__overflow.zx-a-size-xs {
+    min-width: calc(var(--size-selector) * 6);
+    height: calc(var(--size-selector) * 6);
+}
+
+.zx-avatar-group__overflow.zx-a-size-sm {
+    min-width: calc(var(--size-selector) * 8);
+    height: calc(var(--size-selector) * 8);
+}
+
+.zx-avatar-group__overflow.zx-a-size-lg {
+    min-width: calc(var(--size-selector) * 12);
+    height: calc(var(--size-selector) * 12);
+}
+
+.zx-avatar-group__overflow.zx-a-size-xl {
+    min-width: calc(var(--size-selector) * 16);
+    height: calc(var(--size-selector) * 16);
+}
+
+.zx-avatar-group__root.zx-a-color-primary {
+    --avatar-group-ring: var(--color-primary);
+}
+
+.zx-avatar-group__root.zx-a-color-secondary {
+    --avatar-group-ring: var(--color-secondary);
+}
+
+.zx-avatar-group__root.zx-a-color-accent {
+    --avatar-group-ring: var(--color-accent);
+}
+
+.zx-avatar-group__root.zx-a-color-neutral {
+    --avatar-group-ring: var(--color-neutral);
+}
+
+.zx-avatar-group__root.zx-a-color-info {
+    --avatar-group-ring: var(--color-info);
+}
+
+.zx-avatar-group__root.zx-a-color-success {
+    --avatar-group-ring: var(--color-success);
+}
+
+.zx-avatar-group__root.zx-a-color-warning {
+    --avatar-group-ring: var(--color-warning);
+}
+
+.zx-avatar-group__root.zx-a-color-error {
+    --avatar-group-ring: var(--color-error);
+}
+
+.zx-avatar-group__root.zx-a-size-xs {
+    --avatar-group-text: var(--text-xs);
+}
+
+.zx-avatar-group__root.zx-a-size-sm {
+    --avatar-group-text: var(--text-xs);
+}
+
+.zx-avatar-group__root.zx-a-size-lg {
+    --avatar-group-text: var(--text-md);
+}
+
+.zx-avatar-group__root.zx-a-size-xl {
+    --avatar-group-text: var(--text-lg);
+}

package/dist/lynx/components/divider.css

@@ -7,15 +7,34 @@
     align-items: center;
     border: none;
     align-self: stretch;
+    background: var(--divider-ink);
 }
 
 .zx-divider__root.zx-o-horizontal {
     inline-size: 100%;
+    block-size: var(--border);
+}
+
+.zx-divider__root.zx-o-horizontal.zx-a-size-lg {
+    block-size: calc(var(--border) * 2);
+}
+
+.zx-divider__root.zx-o-horizontal.zx-a-size-xl {
+    block-size: calc(var(--border) * 3);
 }
 
 .zx-divider__root.zx-o-vertical {
     flex-direction: column;
     min-block-size: 1em;
+    inline-size: var(--border);
+}
+
+.zx-divider__root.zx-o-vertical.zx-a-size-lg {
+    inline-size: calc(var(--border) * 2);
+}
+
+.zx-divider__root.zx-o-vertical.zx-a-size-xl {
+    inline-size: calc(var(--border) * 3);
 }
 
 .zx-divider__label {