@sigx/zero-daisyui 0.2.0-beta.3 → 0.2.0-beta.5

package/dist/css/index.css

@@ -275,22 +275,21 @@
     [data-scope="tabs"][data-part="list"] {
         display: inline-flex;
         align-self: flex-start;
-        padding: var(--space-xs);
-        gap: var(--space-xs);
-        background: var(--color-base-200);
-        border-radius: var(--radius-field);
     }
 
     [data-scope="tabs"][data-part="tab"] {
         appearance: none;
         border: none;
         background: transparent;
-        padding: var(--space-sm) var(--space-xl);
+        --tab-py: var(--space-sm);
+        --tab-px: var(--space-xl);
+        --tab-radius-min: calc(0.75rem - var(--border));
+        padding: var(--tab-py) var(--tab-px);
         font-size: var(--text-sm);
         font-weight: var(--weight-semibold);
         color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
-        border-radius: calc(var(--radius-field) - 0.25rem);
         cursor: pointer;
+        position: relative;
         transition: background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
     }
 
@@ -299,9 +298,7 @@
     }
 
     [data-scope="tabs"][data-part="tab"][data-state="active"] {
-        background: var(--color-base-100);
         color: var(--color-base-content);
-        box-shadow: var(--shadow-sm);
     }
 
     [data-scope="tabs"][data-part="tab"][data-disabled] {
@@ -321,81 +318,256 @@
     @scope ([data-scope="tabs"][data-part="root"][data-size="xs"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"] {
             font-size: var(--text-xs);
-            padding: var(--space-2xs) var(--space-md);
+            --tab-py: var(--space-2xs);
+            --tab-px: var(--space-md);
+            --tab-radius-min: calc(0.5rem - var(--border));
         }
     }
 
     @scope ([data-scope="tabs"][data-part="root"][data-size="sm"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"] {
             font-size: var(--text-xs);
-            padding: var(--space-xs) var(--space-lg);
+            --tab-py: var(--space-xs);
+            --tab-px: var(--space-lg);
+            --tab-radius-min: calc(0.5rem - var(--border));
         }
     }
 
     @scope ([data-scope="tabs"][data-part="root"][data-size="lg"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"] {
             font-size: var(--text-md);
-            padding: var(--space-md) var(--space-2xl);
+            --tab-py: var(--space-md);
+            --tab-px: var(--space-2xl);
+            --tab-radius-min: calc(1.5rem - var(--border));
         }
     }
 
     @scope ([data-scope="tabs"][data-part="root"][data-size="xl"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"] {
             font-size: var(--text-lg);
-            padding: var(--space-lg) var(--space-2xl);
+            --tab-py: var(--space-lg);
+            --tab-px: var(--space-2xl);
+            --tab-radius-min: calc(2rem - var(--border));
         }
     }
 
     @scope ([data-scope="tabs"][data-part="root"][data-color="primary"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="secondary"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="accent"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="neutral"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="info"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="success"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="warning"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-color="error"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            color: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="border"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"] {
+            border-radius: var(--radius-field);
+        }
+
+        [data-scope="tabs"][data-part="tab"]::before {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            inset-inline-start: 10%;
+            width: 80%;
+            box-sizing: border-box;
+            height: 3px;
+            border-radius: var(--radius-field);
+            background-color: transparent;
+            transition: background-color var(--duration-normal) var(--ease-standard);
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]:not([data-disabled])::before {
+            background-color: currentColor;
+            border-top: 3px solid;
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"]:not([data-variant])) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"] {
+            border-radius: var(--radius-field);
+        }
+
+        [data-scope="tabs"][data-part="tab"]::before {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            inset-inline-start: 10%;
+            width: 80%;
+            box-sizing: border-box;
+            height: 3px;
+            border-radius: var(--radius-field);
+            background-color: transparent;
+            transition: background-color var(--duration-normal) var(--ease-standard);
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]:not([data-disabled])::before {
+            background-color: currentColor;
+            border-top: 3px solid;
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="lift"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="tab"] {
+            --tab-radius-limit: min(var(--radius-field), var(--tab-radius-min));
+            border-start-start-radius: var(--tab-radius-limit);
+            border-start-end-radius: var(--tab-radius-limit);
+            border-width: 0 0 var(--border) 0;
+            border-style: solid;
+            border-color: var(--color-base-300);
+            padding: calc(var(--tab-py) + var(--border)) var(--tab-px) var(--tab-py);
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            background: var(--color-base-100);
+            border-width: var(--border) var(--border) 0 var(--border);
+            padding: var(--tab-py) calc(var(--tab-px) - var(--border)) calc(var(--tab-py) + var(--border));
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]::before {
+            --tab-grad: #0000 calc(69% - var(--border)), var(--color-base-300) calc(69% - var(--border) + 0.25px), var(--color-base-300) 69%, var(--color-base-100) calc(69% + 0.25px);
+            content: "";
+            position: absolute;
+            z-index: 1;
+            bottom: 0;
+            inset-inline-start: calc(var(--tab-radius-limit) * -1);
+            width: calc(100% + var(--tab-radius-limit) * 2);
+            height: var(--tab-radius-limit);
+            background-image: radial-gradient(circle at top left, var(--tab-grad)), radial-gradient(circle at top right, var(--tab-grad));
+            background-position: top left, top right;
+            background-size: var(--tab-radius-limit) var(--tab-radius-limit);
+            background-repeat: no-repeat;
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]:first-child::before {
+            background-image: none, radial-gradient(circle at top right, var(--tab-grad));
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]:last-child::before {
+            background-image: radial-gradient(circle at top left, var(--tab-grad)), none;
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]:only-child::before {
+            background-image: none;
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]:first-child:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)::before {
+            transform: rotateY(180deg);
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"]:last-child:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)::before {
+            transform: rotateY(180deg);
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"]) to ([data-scope="tabs"][data-part="root"]) {
+        [data-scope="tabs"][data-part="list"] {
+            padding: var(--space-xs);
+            gap: var(--space-xs);
+            background: var(--color-base-200);
+            border-radius: var(--radius-field);
+        }
+
+        [data-scope="tabs"][data-part="tab"] {
+            border-radius: calc(var(--radius-field) - 0.25rem);
+        }
+
+        [data-scope="tabs"][data-part="tab"][data-state="active"] {
+            background: var(--color-base-100);
+            box-shadow: var(--shadow-sm);
+        }
+    }
+
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="primary"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-primary);
             color: var(--color-primary-content);
         }
     }
 
-    @scope ([data-scope="tabs"][data-part="root"][data-color="secondary"]) to ([data-scope="tabs"][data-part="root"]) {
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="secondary"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-secondary);
             color: var(--color-secondary-content);
         }
     }
 
-    @scope ([data-scope="tabs"][data-part="root"][data-color="accent"]) to ([data-scope="tabs"][data-part="root"]) {
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="accent"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-accent);
             color: var(--color-accent-content);
         }
     }
 
-    @scope ([data-scope="tabs"][data-part="root"][data-color="neutral"]) to ([data-scope="tabs"][data-part="root"]) {
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="neutral"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-neutral);
             color: var(--color-neutral-content);
         }
     }
 
-    @scope ([data-scope="tabs"][data-part="root"][data-color="info"]) to ([data-scope="tabs"][data-part="root"]) {
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="info"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-info);
             color: var(--color-info-content);
         }
     }
 
-    @scope ([data-scope="tabs"][data-part="root"][data-color="success"]) to ([data-scope="tabs"][data-part="root"]) {
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="success"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-success);
             color: var(--color-success-content);
         }
     }
 
-    @scope ([data-scope="tabs"][data-part="root"][data-color="warning"]) to ([data-scope="tabs"][data-part="root"]) {
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="warning"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-warning);
             color: var(--color-warning-content);
         }
     }
 
-    @scope ([data-scope="tabs"][data-part="root"][data-color="error"]) to ([data-scope="tabs"][data-part="root"]) {
+    @scope ([data-scope="tabs"][data-part="root"][data-variant="box"][data-color="error"]) to ([data-scope="tabs"][data-part="root"]) {
         [data-scope="tabs"][data-part="tab"][data-state="active"] {
             background: var(--color-error);
             color: var(--color-error-content);
@@ -3285,31 +3457,37 @@
     }
 
     [data-scope="button"][data-part="root"][data-size="xs"] {
+        height: calc(var(--size-field) * 6);
         padding: var(--space-2xs) var(--space-xs);
         font-size: var(--text-xs);
     }
 
     [data-scope="button"][data-part="root"][data-size="sm"] {
+        height: calc(var(--size-field) * 8);
         padding: var(--space-xs) var(--space-sm);
         font-size: var(--text-sm);
     }
 
     [data-scope="button"][data-part="root"][data-size="md"] {
+        height: calc(var(--size-field) * 10);
         padding: var(--space-sm) var(--space-lg);
         font-size: var(--text-md);
     }
 
     [data-scope="button"][data-part="root"]:not([data-size]) {
+        height: calc(var(--size-field) * 10);
         padding: var(--space-sm) var(--space-lg);
         font-size: var(--text-md);
     }
 
     [data-scope="button"][data-part="root"][data-size="lg"] {
+        height: calc(var(--size-field) * 12);
         padding: var(--space-md) var(--space-xl);
         font-size: var(--text-lg);
     }
 
     [data-scope="button"][data-part="root"][data-size="xl"] {
+        height: calc(var(--size-field) * 14);
         padding: var(--space-lg) var(--space-2xl);
         font-size: var(--text-xl);
     }

package/dist/lynx/components/alert.css

@@ -16,7 +16,7 @@
 
 .zx-alert__icon {
     grid-row: 1 / span 2;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     color: var(--alert-ink);
     font-size: var(--text-lg);

package/dist/lynx/components/avatar.css

@@ -1,5 +1,4 @@
 .zx-avatar__root {
-    --avatar-size: calc(var(--size-selector) * 10);
     --avatar-text: var(--text-sm);
     --avatar-ring: var(--color-primary);
 }
@@ -7,8 +6,8 @@
 .zx-avatar__root {
     position: relative;
     display: inline-grid;
-    width: var(--avatar-size);
-    height: var(--avatar-size);
+    width: calc(var(--size-selector) * 10);
+    height: calc(var(--size-selector) * 10);
     border-radius: 9999px;
     overflow: hidden;
     vertical-align: middle;
@@ -16,6 +15,26 @@
     box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--avatar-ring);
 }
 
+.zx-avatar__root.zx-a-size-xs {
+    width: calc(var(--size-selector) * 6);
+    height: calc(var(--size-selector) * 6);
+}
+
+.zx-avatar__root.zx-a-size-sm {
+    width: calc(var(--size-selector) * 8);
+    height: calc(var(--size-selector) * 8);
+}
+
+.zx-avatar__root.zx-a-size-lg {
+    width: calc(var(--size-selector) * 12);
+    height: calc(var(--size-selector) * 12);
+}
+
+.zx-avatar__root.zx-a-size-xl {
+    width: calc(var(--size-selector) * 16);
+    height: calc(var(--size-selector) * 16);
+}
+
 .zx-avatar__image {
     grid-area: 1 / 1;
     width: 100%;
@@ -68,21 +87,17 @@
 }
 
 .zx-avatar__root.zx-a-size-xs {
-    --avatar-size: calc(var(--size-selector) * 6);
     --avatar-text: var(--text-xs);
 }
 
 .zx-avatar__root.zx-a-size-sm {
-    --avatar-size: calc(var(--size-selector) * 8);
     --avatar-text: var(--text-xs);
 }
 
 .zx-avatar__root.zx-a-size-lg {
-    --avatar-size: calc(var(--size-selector) * 12);
     --avatar-text: var(--text-md);
 }
 
 .zx-avatar__root.zx-a-size-xl {
-    --avatar-size: calc(var(--size-selector) * 16);
     --avatar-text: var(--text-lg);
 }

package/dist/lynx/components/badge.css

@@ -4,7 +4,7 @@
 }
 
 .zx-badge__root {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: 0.375em;
     background: var(--badge-fill);

package/dist/lynx/components/button.css

@@ -26,7 +26,7 @@
 
 .zx-button__root {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -295,26 +295,31 @@
 }
 
 .zx-button__root.zx-a-size-xs {
+    height: calc(var(--size-field) * 6);
     padding: var(--space-2xs) var(--space-xs);
     font-size: var(--text-xs);
 }
 
 .zx-button__root.zx-a-size-sm {
+    height: calc(var(--size-field) * 8);
     padding: var(--space-xs) var(--space-sm);
     font-size: var(--text-sm);
 }
 
 .zx-button__root.zx-a-size-md {
+    height: calc(var(--size-field) * 10);
     padding: var(--space-sm) var(--space-lg);
     font-size: var(--text-md);
 }
 
 .zx-button__root.zx-a-size-lg {
+    height: calc(var(--size-field) * 12);
     padding: var(--space-md) var(--space-xl);
     font-size: var(--text-lg);
 }
 
 .zx-button__root.zx-a-size-xl {
+    height: calc(var(--size-field) * 14);
     padding: var(--space-lg) var(--space-2xl);
     font-size: var(--text-xl);
 }

package/dist/lynx/components/checkbox.css

@@ -1,12 +1,11 @@
 .zx-checkbox__root {
-    --checkbox-size: calc(var(--size-selector) * 6);
     --checkbox-pad: 0.25rem;
     --checkbox-accent: var(--color-primary);
     --checkbox-on-accent: var(--color-primary-content);
 }
 
 .zx-checkbox__root {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: 0.625rem;
     cursor: pointer;
@@ -23,9 +22,10 @@
     vertical-align: middle;
     flex-shrink: 0;
     box-sizing: border-box;
-    width: var(--checkbox-size);
-    height: var(--checkbox-size);
+    width: calc(var(--size-selector) * 6);
+    height: calc(var(--size-selector) * 6);
     padding: var(--checkbox-pad);
+    border: var(--border) solid var(--checkbox-accent);
     border-radius: var(--radius-selector);
     color: var(--checkbox-on-accent);
     box-shadow: 0 1px var(--depth-shade) inset, 0 0 #0000 inset, 0 0 #0000;
@@ -35,6 +35,26 @@
     transition: background-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
 }
 
+.zx-checkbox__control.zx-a-size-xs {
+    width: calc(var(--size-selector) * 4);
+    height: calc(var(--size-selector) * 4);
+}
+
+.zx-checkbox__control.zx-a-size-sm {
+    width: calc(var(--size-selector) * 5);
+    height: calc(var(--size-selector) * 5);
+}
+
+.zx-checkbox__control.zx-a-size-lg {
+    width: calc(var(--size-selector) * 7);
+    height: calc(var(--size-selector) * 7);
+}
+
+.zx-checkbox__control.zx-a-size-xl {
+    width: calc(var(--size-selector) * 8);
+    height: calc(var(--size-selector) * 8);
+}
+
 .zx-checkbox__control.zx-s-checked {
     background-color: var(--checkbox-accent);
     box-shadow: 0 0 #0000 inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
@@ -59,7 +79,7 @@
     height: 100%;
     opacity: 0;
     rotate: 45deg;
-    background-color: currentColor;
+    background-color: var(--checkbox-on-accent);
     clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
     box-shadow: 0 3px 0 0 var(--depth-sheen) inset;
     font-size: 1rem;
@@ -125,7 +145,6 @@
 }
 
 .zx-checkbox__root.zx-a-size-xs {
-    --checkbox-size: calc(var(--size-selector) * 4);
     --checkbox-pad: 0.125rem;
 }
 
@@ -134,7 +153,6 @@
 }
 
 .zx-checkbox__root.zx-a-size-sm {
-    --checkbox-size: calc(var(--size-selector) * 5);
     --checkbox-pad: 0.1875rem;
 }
 
@@ -143,7 +161,6 @@
 }
 
 .zx-checkbox__root.zx-a-size-md {
-    --checkbox-size: calc(var(--size-selector) * 6);
     --checkbox-pad: 0.25rem;
 }
 
@@ -152,7 +169,6 @@
 }
 
 .zx-checkbox__root.zx-a-size-lg {
-    --checkbox-size: calc(var(--size-selector) * 7);
     --checkbox-pad: 0.3125rem;
 }
 
@@ -161,7 +177,6 @@
 }
 
 .zx-checkbox__root.zx-a-size-xl {
-    --checkbox-size: calc(var(--size-selector) * 8);
     --checkbox-pad: 0.375rem;
 }
 

package/dist/lynx/components/combobox.css

@@ -3,12 +3,12 @@
 }
 
 .zx-combobox__root {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
 }
 
 .zx-combobox__control {
-    display: inline-flex;
+    display: flex;
     align-items: stretch;
     min-width: 13rem;
     box-sizing: border-box;

package/dist/lynx/components/countdown.css

@@ -4,7 +4,7 @@
 }
 
 .zx-countdown__root {
-    display: inline-flex;
+    display: flex;
     align-items: baseline;
     gap: 0.1em;
     font-size: var(--countdown-font);

package/dist/lynx/components/dialog.css

@@ -1,6 +1,6 @@
 .zx-dialog__trigger {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -91,7 +91,7 @@
 
 .zx-dialog__close {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;
@@ -119,7 +119,7 @@
 
 .zx-dialog__cancel {
     appearance: none;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5em;

package/dist/lynx/components/divider.css

@@ -1,6 +1,5 @@
 .zx-divider__root {
     --divider-ink: var(--color-base-300);
-    --divider-thickness: var(--border);
 }
 
 .zx-divider__root {
@@ -11,14 +10,30 @@
 
 .zx-divider__root.zx-o-horizontal {
     inline-size: 100%;
-    block-size: var(--divider-thickness);
+    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 {
-    inline-size: var(--divider-thickness);
+    inline-size: var(--border);
     min-block-size: 1em;
 }
 
+.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__root.zx-a-color-primary {
     --divider-ink: var(--color-primary);
 }
@@ -50,19 +65,3 @@
 .zx-divider__root.zx-a-color-error {
     --divider-ink: var(--color-error);
 }
-
-.zx-divider__root.zx-a-size-xs {
-    --divider-thickness: var(--border);
-}
-
-.zx-divider__root.zx-a-size-sm {
-    --divider-thickness: var(--border);
-}
-
-.zx-divider__root.zx-a-size-lg {
-    --divider-thickness: calc(var(--border) * 2);
-}
-
-.zx-divider__root.zx-a-size-xl {
-    --divider-thickness: calc(var(--border) * 3);
-}