@sigx/zero-daisyui 0.12.0 → 0.14.0

package/dist/lynx/components/badge.css

@@ -1,15 +1,37 @@
 .zx-badge__root {
+    --badge-dot: var(--badge-ink);
+    --badge-dot-ring: var(--badge-ink);
     --badge-fill: var(--color-base-200);
     --badge-ink: var(--color-base-content);
 }
 
+.zx-root .zx-badge__root {
+    --badge-dot-halo: #18181b59;
+}
+
+.zx-root.zx-theme-dark .zx-badge__root {
+    --badge-dot-halo: #ecf9ff59;
+}
+
+.zx-root.zx-theme-dim .zx-badge__root {
+    --badge-dot-halo: #b2ccd659;
+}
+
+.zx-root.zx-theme-nord .zx-badge__root {
+    --badge-dot-halo: #2e344059;
+}
+
+.zx-root.zx-theme-sunset .zx-badge__root {
+    --badge-dot-halo: #9fb9d059;
+}
+
 .zx-badge__root {
     display: flex;
     align-items: center;
     gap: 0.375em;
     background: var(--badge-fill);
     color: var(--badge-ink);
-    border: var(--border) solid transparent;
+    border: 0 solid transparent;
     border-radius: var(--radius-selector);
     padding: var(--space-2xs) var(--space-lg);
     font-size: var(--text-xs);
@@ -17,21 +39,41 @@
     line-height: var(--leading-normal);
     white-space: nowrap;
     text-decoration: none;
+    width: max-content;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    border-top-width: var(--border);
+    border-right-width: var(--border);
+    border-bottom-width: var(--border);
+    border-left-width: var(--border);
 }
 
 .zx-badge__dot {
-    display: inline-block;
+    display: flex;
     flex: none;
     inline-size: 0.5em;
     block-size: 0.5em;
     box-sizing: border-box;
     border-radius: 50%;
     background: var(--badge-dot);
-    border: 0.1em solid var(--badge-dot-ring);
+    border: 0 solid transparent;
+    width: 0.5em;
+    height: 0.5em;
+    flex-shrink: 0;
+    border-top-width: 0.1em;
+    border-right-width: 0.1em;
+    border-bottom-width: 0.1em;
+    border-left-width: 0.1em;
+    border-top-color: var(--badge-dot-ring);
+    border-right-color: var(--badge-dot-ring);
+    border-bottom-color: var(--badge-dot-ring);
+    border-left-color: var(--badge-dot-ring);
 }
 
 .zx-badge__dot.zx-s-running {
-    animation: zero-daisy-badge-pulse 1.6s ease-out infinite;
+    box-shadow: 0 0 0 0.2em var(--badge-dot-halo);
+    animation: zero-daisy-badge-pulse 1.6s ease-in-out infinite;
 }
 
 .zx-badge__root.zx-a-color-primary {
@@ -44,6 +86,26 @@
     --badge-dot-ring: var(--color-primary-content);
 }
 
+.zx-root .zx-badge__dot.zx-a-color-primary {
+    --badge-dot-halo: #422ad559;
+}
+
+.zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-primary {
+    --badge-dot-halo: #605dff59;
+}
+
+.zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-primary {
+    --badge-dot-halo: #9fe88d59;
+}
+
+.zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-primary {
+    --badge-dot-halo: #5e81ac59;
+}
+
+.zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-primary {
+    --badge-dot-halo: #ff865b59;
+}
+
 .zx-badge__root.zx-a-color-secondary {
     --badge-fill: var(--color-secondary);
     --badge-ink: var(--color-secondary-content);
@@ -54,6 +116,26 @@
     --badge-dot-ring: var(--color-secondary-content);
 }
 
+.zx-root .zx-badge__dot.zx-a-color-secondary {
+    --badge-dot-halo: #f4309859;
+}
+
+.zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-secondary {
+    --badge-dot-halo: #f4309859;
+}
+
+.zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-secondary {
+    --badge-dot-halo: #ff7d5d59;
+}
+
+.zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-secondary {
+    --badge-dot-halo: #81a1c159;
+}
+
+.zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-secondary {
+    --badge-dot-halo: #fd6f9c59;
+}
+
 .zx-badge__root.zx-a-color-accent {
     --badge-fill: var(--color-accent);
     --badge-ink: var(--color-accent-content);
@@ -64,6 +146,26 @@
     --badge-dot-ring: var(--color-accent-content);
 }
 
+.zx-root .zx-badge__dot.zx-a-color-accent {
+    --badge-dot-halo: #00d3bb59;
+}
+
+.zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-accent {
+    --badge-dot-halo: #00d3bb59;
+}
+
+.zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-accent {
+    --badge-dot-halo: #c792e959;
+}
+
+.zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-accent {
+    --badge-dot-halo: #88c0d059;
+}
+
+.zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-accent {
+    --badge-dot-halo: #b387fa59;
+}
+
 .zx-badge__root.zx-a-color-neutral {
     --badge-fill: var(--color-neutral);
     --badge-ink: var(--color-neutral-content);
@@ -74,6 +176,26 @@
     --badge-dot-ring: var(--color-neutral-content);
 }
 
+.zx-root .zx-badge__dot.zx-a-color-neutral {
+    --badge-dot-halo: #09090b59;
+}
+
+.zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-neutral {
+    --badge-dot-halo: #09090b59;
+}
+
+.zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-neutral {
+    --badge-dot-halo: #1c212b59;
+}
+
+.zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-neutral {
+    --badge-dot-halo: #4c566a59;
+}
+
+.zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-neutral {
+    --badge-dot-halo: #1b262c59;
+}
+
 .zx-badge__root.zx-a-color-info {
     --badge-fill: var(--color-info);
     --badge-ink: var(--color-info-content);
@@ -84,6 +206,26 @@
     --badge-dot-ring: var(--color-info-content);
 }
 
+.zx-root .zx-badge__dot.zx-a-color-info {
+    --badge-dot-halo: #00bafe59;
+}
+
+.zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-info {
+    --badge-dot-halo: #00bafe59;
+}
+
+.zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-info {
+    --badge-dot-halo: #28ebff59;
+}
+
+.zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-info {
+    --badge-dot-halo: #b48ead59;
+}
+
+.zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-info {
+    --badge-dot-halo: #89e0eb59;
+}
+
 .zx-badge__root.zx-a-color-success {
     --badge-fill: var(--color-success);
     --badge-ink: var(--color-success-content);
@@ -94,6 +236,26 @@
     --badge-dot-ring: var(--color-success-content);
 }
 
+.zx-root .zx-badge__dot.zx-a-color-success {
+    --badge-dot-halo: #00d39059;
+}
+
+.zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-success {
+    --badge-dot-halo: #00d39059;
+}
+
+.zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-success {
+    --badge-dot-halo: #62efbd59;
+}
+
+.zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-success {
+    --badge-dot-halo: #a3be8d59;
+}
+
+.zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-success {
+    --badge-dot-halo: #addfad59;
+}
+
 .zx-badge__root.zx-a-color-warning {
     --badge-fill: var(--color-warning);
     --badge-ink: var(--color-warning-content);
@@ -104,6 +266,26 @@
     --badge-dot-ring: var(--color-warning-content);
 }
 
+.zx-root .zx-badge__dot.zx-a-color-warning {
+    --badge-dot-halo: #fcb70059;
+}
+
+.zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-warning {
+    --badge-dot-halo: #fcb70059;
+}
+
+.zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-warning {
+    --badge-dot-halo: #efd05759;
+}
+
+.zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-warning {
+    --badge-dot-halo: #ebcb8b59;
+}
+
+.zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-warning {
+    --badge-dot-halo: #f1c89259;
+}
+
 .zx-badge__root.zx-a-color-error {
     --badge-fill: var(--color-error);
     --badge-ink: var(--color-error-content);
@@ -114,6 +296,26 @@
     --badge-dot-ring: var(--color-error-content);
 }
 
+.zx-root .zx-badge__dot.zx-a-color-error {
+    --badge-dot-halo: #ff627d59;
+}
+
+.zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-error {
+    --badge-dot-halo: #ff627d59;
+}
+
+.zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-error {
+    --badge-dot-halo: #ffae9b59;
+}
+
+.zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-error {
+    --badge-dot-halo: #bf616a59;
+}
+
+.zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-error {
+    --badge-dot-halo: #ffbbbd59;
+}
+
 .zx-badge__root.zx-a-size-xs {
     font-size: var(--text-xs);
     padding: 0 var(--space-sm);
@@ -133,3 +335,6 @@
     font-size: var(--text-md);
     padding: var(--space-xs) var(--space-xl);
 }
+@keyframes zero-daisy-badge-pulse {
+    from, to { opacity: 1; } 50% { opacity: 0.45; }
+}

package/dist/lynx/components/card.css

@@ -9,7 +9,7 @@
     color: var(--color-base-content);
     border-radius: var(--radius-box);
     box-shadow: var(--shadow-md);
-    overflow: hidden;
+    overflow: visible;
 }
 
 .zx-card__media {
@@ -19,6 +19,8 @@
     margin: 0;
     inline-size: 100%;
     object-fit: cover;
+    width: 100%;
+    overflow: hidden;
 }
 
 .zx-card__header {
@@ -72,6 +74,7 @@
     justify-content: flex-end;
     gap: var(--space-md);
     padding: 0 var(--card-pad) var(--card-pad);
+    flex-direction: row;
 }
 
 .zx-card__root.zx-a-color-primary {
@@ -121,3 +124,11 @@
 .zx-card__root.zx-a-size-xl {
     --card-pad: var(--space-2xl);
 }
+.zx-card__media.zx-m-first {
+    border-top-left-radius: var(--radius-box);
+    border-top-right-radius: var(--radius-box);
+}
+.zx-card__media.zx-m-last {
+    border-bottom-left-radius: var(--radius-box);
+    border-bottom-right-radius: var(--radius-box);
+}

package/dist/lynx/components/checkbox.css

@@ -35,7 +35,6 @@
     color: var(--checkbox-on-accent);
     box-shadow: 0 1px var(--depth-shade) inset, 0 0 #0000 inset, 0 0 #0000;
     background-size: auto, calc(var(--noise) * 100%);
-    background-image: none, var(--fx-noise);
     cursor: pointer;
     transition: background-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
 }
@@ -85,27 +84,59 @@
 
 .zx-checkbox__indicator {
     display: block;
-    width: 100%;
+    width: 50%;
     height: 100%;
     opacity: 0;
-    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;
+    background-color: transparent;
+    box-shadow: none;
     font-size: 16px;
     line-height: 0.75;
-    transition: clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), transform var(--duration-slow) var(--ease-standard) var(--duration-instant);
+    transition: opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), transform var(--duration-slow) var(--ease-standard) var(--duration-instant);
+    box-sizing: border-box;
+    margin-left: 20%;
+    border-style: solid;
+    border-color: var(--checkbox-on-accent);
+    border-top-width: 0;
+    border-left-width: 0;
+    border-right-width: calc(((var(--size-selector) * 6) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+    border-bottom-width: calc(((var(--size-selector) * 6) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+    transform-origin: 60% 50%;
     transform: rotate(45deg);
 }
 
+.zx-checkbox__indicator.zx-a-size-xs {
+    border-right-width: calc(((var(--size-selector) * 4) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+    border-bottom-width: calc(((var(--size-selector) * 4) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+}
+
+.zx-checkbox__indicator.zx-a-size-sm {
+    border-right-width: calc(((var(--size-selector) * 5) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+    border-bottom-width: calc(((var(--size-selector) * 5) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+}
+
+.zx-checkbox__indicator.zx-a-size-lg {
+    border-right-width: calc(((var(--size-selector) * 7) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+    border-bottom-width: calc(((var(--size-selector) * 7) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+}
+
+.zx-checkbox__indicator.zx-a-size-xl {
+    border-right-width: calc(((var(--size-selector) * 8) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+    border-bottom-width: calc(((var(--size-selector) * 8) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
+}
+
 .zx-checkbox__indicator.zx-s-checked {
-    clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
     opacity: 1;
 }
 
 .zx-checkbox__indicator.zx-s-indeterminate {
-    clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
     opacity: 1;
-    transform: translateY(-35%) rotate(0deg);
+    width: 60%;
+    height: 20%;
+    align-self: center;
+    border-right-width: 0;
+    border-bottom-width: 0;
+    background-color: var(--checkbox-on-accent);
+    transform: rotate(0deg);
 }
 
 .zx-checkbox__label {

package/dist/lynx/components/combobox.css

@@ -13,11 +13,12 @@
     flex-wrap: wrap;
     min-width: 208px;
     box-sizing: border-box;
-    height: calc(var(--size-field) * 12);
+    height: auto;
     background: var(--color-base-100);
     border: var(--border) solid var(--color-base-300);
     border-radius: var(--radius-field);
     box-shadow: var(--shadow-xs);
+    min-height: calc(var(--size-field) * 12);
     transition: border-color var(--duration-fast) var(--ease-standard);
 }
 
@@ -73,6 +74,11 @@
     line-height: var(--leading-none);
 }
 
+.zx-combobox__tag.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
 .zx-combobox__tag-label {
     white-space: nowrap;
 }

package/dist/lynx/components/divider.css

@@ -1,5 +1,6 @@
 .zx-divider__root {
     --divider-ink: var(--color-base-300);
+    --divider-fit: auto;
 }
 
 .zx-divider__root {
@@ -42,6 +43,31 @@
     font-size: var(--text-sm);
     white-space: nowrap;
     color: var(--color-base-content);
+    padding-left: var(--space-md);
+    padding-right: var(--space-md);
+}
+
+.zx-divider__label.zx-p-start {
+    padding-left: calc(var(--space-md) * 0);
+}
+
+.zx-divider__label.zx-p-end {
+    padding-right: calc(var(--space-md) * 0);
+}
+
+.zx-divider__label.zx-o-vertical {
+    padding-left: calc(var(--space-md) * 0);
+    padding-right: calc(var(--space-md) * 0);
+    padding-top: var(--space-sm);
+    padding-bottom: var(--space-sm);
+}
+
+.zx-divider__label.zx-o-vertical.zx-p-start {
+    padding-top: calc(var(--space-sm) * 0);
+}
+
+.zx-divider__label.zx-o-vertical.zx-p-end {
+    padding-bottom: calc(var(--space-sm) * 0);
 }
 
 .zx-divider__root.zx-a-color-primary {
@@ -75,3 +101,22 @@
 .zx-divider__root.zx-a-color-error {
     --divider-ink: var(--color-error);
 }
+.zx-divider__root.zx-m-labelled {
+    --divider-ink: transparent;
+}
+.zx-divider__root.zx-m-labelled.zx-o-horizontal {
+    flex-direction: row;
+    block-size: var(--divider-fit);
+}
+.zx-divider__root.zx-m-labelled.zx-o-vertical {
+    inline-size: var(--divider-fit);
+}
+.zx-divider__root.zx-m-segment {
+    flex: 1 1 0;
+}
+.zx-divider__root.zx-m-segment.zx-o-horizontal {
+    min-width: 0;
+}
+.zx-divider__root.zx-m-segment.zx-o-vertical {
+    min-height: 0;
+}

package/dist/lynx/components/empty-state.css

@@ -39,6 +39,7 @@
     color: var(--empty-accent);
     font-size: var(--text-2xl);
     line-height: var(--leading-none);
+    margin-bottom: var(--space-xs);
 }
 
 .zx-empty-state__title {
@@ -46,12 +47,15 @@
     font-size: var(--text-lg);
     font-weight: var(--weight-bold);
     line-height: var(--leading-tight);
+    color: var(--color-base-content);
+    text-align: center;
 }
 
 .zx-empty-state__description {
-    max-inline-size: 36ch;
+    max-inline-size: 100%;
     font-size: var(--text-sm);
     line-height: var(--leading-normal);
+    text-align: center;
 }
 
 .zx-root .zx-empty-state__description {
@@ -79,6 +83,8 @@
     flex-wrap: wrap;
     justify-content: center;
     gap: var(--space-sm);
+    flex-direction: row;
+    margin-top: var(--space-sm);
 }
 
 .zx-empty-state__root.zx-a-color-primary {

package/dist/lynx/components/kbd.css

@@ -11,13 +11,26 @@
     padding: calc(var(--space-2xs) - var(--border)) calc(var(--space-md) - var(--border));
     background: var(--kbd-fill);
     color: var(--kbd-ink);
-    border: var(--border) solid var(--color-base-300);
+    border: 0 solid transparent;
     border-block-end-width: calc(var(--border) * 2);
     border-radius: var(--radius-field);
     font-size: var(--text-xs);
     font-weight: var(--weight-semibold);
     line-height: var(--leading-normal);
     white-space: nowrap;
+    width: max-content;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    min-width: 1.75em;
+    border-top-width: var(--border);
+    border-right-width: var(--border);
+    border-left-width: var(--border);
+    border-bottom-width: calc(var(--border) * 2);
+    border-top-color: var(--color-base-300);
+    border-right-color: var(--color-base-300);
+    border-bottom-color: var(--color-base-300);
+    border-left-color: var(--color-base-300);
 }
 
 .zx-kbd__root.zx-a-color-primary {
@@ -64,6 +77,7 @@
     font-size: var(--text-xs);
     padding: 0 var(--space-xs);
     min-inline-size: 1.5em;
+    min-width: 1.5em;
 }
 
 .zx-kbd__root.zx-a-size-sm {

package/dist/lynx/components/number-input.css

@@ -81,6 +81,26 @@
     flex-grow: 1;
 }
 
+.zx-root .zx-number-input__input {
+    -x-placeholder-color: #18181b99;
+}
+
+.zx-root.zx-theme-dark .zx-number-input__input {
+    -x-placeholder-color: #ecf9ff99;
+}
+
+.zx-root.zx-theme-dim .zx-number-input__input {
+    -x-placeholder-color: #b2ccd699;
+}
+
+.zx-root.zx-theme-nord .zx-number-input__input {
+    -x-placeholder-color: #2e344099;
+}
+
+.zx-root.zx-theme-sunset .zx-number-input__input {
+    -x-placeholder-color: #9fb9d099;
+}
+
 .zx-number-input__input.zx-f-disabled {
     cursor: not-allowed;
 }

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

@@ -100,7 +100,6 @@
     border-radius: 9999px;
     background-color: transparent;
     background-size: auto, calc(var(--noise) * 100%);
-    background-image: none, var(--fx-noise);
     transition: background-color var(--duration-instant) var(--ease-standard);
 }
 

package/dist/lynx/components/skeleton.css

@@ -190,5 +190,5 @@
     border-radius: var(--radius-box);
 }
 @keyframes zero-daisyui-skeleton {
-    from, to { opacity: 1; } 50% { opacity: 0.55; }
+    0% { opacity: 1; } 50% { opacity: 0.55; } 100% { opacity: 1; }
 }

package/dist/lynx/components/spinner.css

@@ -4,34 +4,54 @@
 }
 
 .zx-spinner__root {
-    display: inline-block;
-    inline-size: calc(var(--size-field) * 0.5);
-    block-size: calc(var(--size-field) * 0.5);
+    display: flex;
+    inline-size: calc(var(--size-selector) * 6);
+    block-size: calc(var(--size-selector) * 6);
     box-sizing: border-box;
     border-radius: 50%;
-    border: calc(var(--border) * 2) solid var(--spinner-track);
+    border: 0 solid transparent;
     border-block-start-color: var(--spinner-ink);
     animation: zero-daisyui-spin 0.7s linear infinite;
+    flex-shrink: 0;
+    width: calc(var(--size-selector) * 6);
+    height: calc(var(--size-selector) * 6);
+    border-style: solid;
+    border-top-width: calc(var(--border) * 2);
+    border-right-width: calc(var(--border) * 2);
+    border-bottom-width: calc(var(--border) * 2);
+    border-left-width: calc(var(--border) * 2);
+    border-right-color: var(--spinner-track);
+    border-bottom-color: var(--spinner-track);
+    border-left-color: var(--spinner-track);
+    border-top-color: var(--spinner-ink);
 }
 
 .zx-spinner__root.zx-a-size-xs {
-    inline-size: calc(var(--size-field) * 0.35);
-    block-size: calc(var(--size-field) * 0.35);
+    inline-size: calc(var(--size-selector) * 4);
+    block-size: calc(var(--size-selector) * 4);
+    width: calc(var(--size-selector) * 4);
+    height: calc(var(--size-selector) * 4);
 }
 
 .zx-spinner__root.zx-a-size-sm {
-    inline-size: calc(var(--size-field) * 0.42);
-    block-size: calc(var(--size-field) * 0.42);
+    inline-size: calc(var(--size-selector) * 5);
+    block-size: calc(var(--size-selector) * 5);
+    width: calc(var(--size-selector) * 5);
+    height: calc(var(--size-selector) * 5);
 }
 
 .zx-spinner__root.zx-a-size-lg {
-    inline-size: calc(var(--size-field) * 0.7);
-    block-size: calc(var(--size-field) * 0.7);
+    inline-size: calc(var(--size-selector) * 7);
+    block-size: calc(var(--size-selector) * 7);
+    width: calc(var(--size-selector) * 7);
+    height: calc(var(--size-selector) * 7);
 }
 
 .zx-spinner__root.zx-a-size-xl {
-    inline-size: calc(var(--size-field) * 0.9);
-    block-size: calc(var(--size-field) * 0.9);
+    inline-size: calc(var(--size-selector) * 8);
+    block-size: calc(var(--size-selector) * 8);
+    width: calc(var(--size-selector) * 8);
+    height: calc(var(--size-selector) * 8);
 }
 
 .zx-spinner__root.zx-a-color-primary {