@sigx/zero-daisyui 0.2.0-beta.5 → 0.3.0-beta.1

package/dist/css/index.d.ts

@@ -0,0 +1,2 @@
+// A stylesheet: imported for its side effect, it has no bindings.
+export {};

package/dist/css/tokens.css

@@ -65,6 +65,12 @@
         --space-lg: 0.75rem;
         --space-xl: 1rem;
         --space-2xl: 1.25rem;
+        --measure-xs: 20rem;
+        --measure-sm: 24rem;
+        --measure-md: 28rem;
+        --measure-lg: 32rem;
+        --measure-xl: 36rem;
+        --measure-prose: 65ch;
         --shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.08);
         --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.15);
         --shadow-md: 0 1px 2px oklch(0% 0 0 / 0.2);
@@ -82,6 +88,9 @@
         --depth-sheen: oklch(100% 0 0 / calc(var(--depth) * 0.1));
         --noise: 0;
         --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
+        --breakpoint-sm: 40rem;
+        --breakpoint-md: 48rem;
+        --breakpoint-lg: 64rem;
     }
 
     [data-theme="light"] {

package/dist/design-system.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design-system.d.ts","sourceRoot":"","sources":["../src/design-system.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAa,KAAK,EAAE,MAAM,EAAoC,MAAM,aAAa,CAAC;AA0CzF,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,OAAO,KAAK,EAAE,OAAO,MAAM,CAKvE,CAAC;eAEa,YAAY"}
+{"version":3,"file":"design-system.d.ts","sourceRoot":"","sources":["../src/design-system.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAiC,KAAK,EAAE,MAAM,EAAoC,MAAM,aAAa,CAAC;AA6C7G,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,OAAO,KAAK,EAAE,OAAO,MAAM,CASvE,CAAC;eAEa,YAAY"}

package/dist/design-system.js

@@ -1,5 +1,6 @@
 import { defineApi } from '@sigx/zero-kit/define';
-import { modifiers, tableModifiers, tokens, variants } from './tokens.js';
+import { countdownModifiers, modifiers, tableModifiers, tokens, variants } from './tokens.js';
+import { layoutCss, layoutRecipes } from '@sigx/zero-kit/define';
 import { recipes } from './recipes.js';
 /**
  * The daisy-native API (#332): the third api-declaring design system after
@@ -10,11 +11,13 @@ import { recipes } from './recipes.js';
  * modeling artifact rather than the real shape — so no axis is renamed and
  * no value respelled: `variant: {}` is the explicit `exact` claim. What the
  * api adds is the modifier surface: the old library's boolean props
- * (`wide`, `block`, `square`, `circle`, `active`, `loading`) surface under
- * their own names on the generated `./components` module, so
+ * (`wide`, `block`, `square`, `circle`, `active`) surface under their own
+ * names on the generated `./components` module, so
  * `<Button wide loading variant="dash" color="primary">` is fully typed from
- * one import. None of the six collides with `RESERVED_PROPS_BY_SCOPE` — the
- * validator checks exactly that for every identity-named modifier.
+ * one import — `loading` being zero's own Button prop since #50, which is
+ * why it is no modifier here: it would collide with
+ * `RESERVED_PROPS_BY_SCOPE`, and the validator checks exactly that for
+ * every identity-named modifier.
  *
  * `defineApi` from `@sigx/zero-kit/define`, the node:-free authoring
  * subpath (#318): this module is in the package's RUNTIME graph (the barrel
@@ -23,7 +26,7 @@ import { recipes } from './recipes.js';
  * zero-kit's `ds-runtime-imports.test.ts`. The two-argument form narrows
  * modifier names and any `values` keys against the declared vocabulary.
  */
-const api = defineApi({ variants, modifiers: [...modifiers, ...tableModifiers] }, {
+const api = defineApi({ variants, modifiers: [...modifiers, ...tableModifiers, ...countdownModifiers] }, {
     variant: {},
     modifiers: {
         wide: {},
@@ -31,15 +34,19 @@ const api = defineApi({ variants, modifiers: [...modifiers, ...tableModifiers] }
         square: {},
         circle: {},
         active: {},
-        loading: {},
         zebra: {},
         hover: {},
+        inline: {},
     },
 });
 export const designSystem = {
     name: 'daisyui',
     tokens,
-    recipes,
+    // The layout tier, generated from this design system's own spacing ramp
+    // and breakpoints. Composed HERE rather than in `recipes.ts`, which
+    // `@sigx/create-zero-ds` copies verbatim as a scaffold's frozen baseline.
+    recipes: [...layoutRecipes(tokens), ...recipes],
+    css: [layoutCss(tokens)],
     api,
 };
 export default designSystem;

package/dist/design-system.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system.js","sourceRoot":"","sources":["../src/design-system.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAiB,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACzF,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,GAAG,GAAG,SAAS,CACjB,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,GAAG,SAAS,EAAE,GAAG,cAAc,CAAC,EAAE,EAC1D;IACI,OAAO,EAAE,EAAE;IACX,SAAS,EAAE;QACP,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,EAAE;QACX,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;KACZ;CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAmD;IACxE,IAAI,EAAE,SAAS;IACf,MAAM;IACN,OAAO;IACP,GAAG;CACN,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"design-system.js","sourceRoot":"","sources":["../src/design-system.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAiB,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC7G,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,GAAG,GAAG,SAAS,CACjB,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,GAAG,SAAS,EAAE,GAAG,cAAc,EAAE,GAAG,kBAAkB,CAAC,EAAE,EACjF;IACI,OAAO,EAAE,EAAE;IACX,SAAS,EAAE;QACP,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;KACb;CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAmD;IACxE,IAAI,EAAE,SAAS;IACf,MAAM;IACN,wEAAwE;IACxE,oEAAoE;IACpE,0EAA0E;IAC1E,OAAO,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC,EAAE,GAAG,OAAO,CAAC;IAC/C,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,GAAG;CACN,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/lynx/components/avatar.css

@@ -54,6 +54,18 @@
     user-select: none;
 }
 
+.zx-avatar__root.zx-a-shape-circle {
+    border-radius: 9999px;
+}
+
+.zx-avatar__root.zx-a-shape-square {
+    border-radius: 0;
+}
+
+.zx-avatar__root.zx-a-shape-rounded {
+    border-radius: var(--radius-selector);
+}
+
 .zx-avatar__root.zx-a-color-primary {
     --avatar-ring: var(--color-primary);
 }

package/dist/lynx/components/badge.css

@@ -11,7 +11,7 @@
     color: var(--badge-ink);
     border: var(--border) solid transparent;
     border-radius: var(--radius-selector);
-    padding: 0.125rem 0.625rem;
+    padding: var(--space-2xs) var(--space-lg);
     font-size: var(--text-xs);
     font-weight: var(--weight-semibold);
     line-height: var(--leading-normal);
@@ -19,46 +19,101 @@
     text-decoration: none;
 }
 
+.zx-badge__dot {
+    display: inline-block;
+    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);
+}
+
+.zx-badge__dot.zx-s-running {
+    animation: zero-daisy-badge-pulse 1.6s ease-out infinite;
+}
+
 .zx-badge__root.zx-a-color-primary {
     --badge-fill: var(--color-primary);
     --badge-ink: var(--color-primary-content);
 }
 
+.zx-badge__dot.zx-a-color-primary {
+    --badge-dot: var(--color-primary);
+    --badge-dot-ring: var(--color-primary-content);
+}
+
 .zx-badge__root.zx-a-color-secondary {
     --badge-fill: var(--color-secondary);
     --badge-ink: var(--color-secondary-content);
 }
 
+.zx-badge__dot.zx-a-color-secondary {
+    --badge-dot: var(--color-secondary);
+    --badge-dot-ring: var(--color-secondary-content);
+}
+
 .zx-badge__root.zx-a-color-accent {
     --badge-fill: var(--color-accent);
     --badge-ink: var(--color-accent-content);
 }
 
+.zx-badge__dot.zx-a-color-accent {
+    --badge-dot: var(--color-accent);
+    --badge-dot-ring: var(--color-accent-content);
+}
+
 .zx-badge__root.zx-a-color-neutral {
     --badge-fill: var(--color-neutral);
     --badge-ink: var(--color-neutral-content);
 }
 
+.zx-badge__dot.zx-a-color-neutral {
+    --badge-dot: var(--color-neutral);
+    --badge-dot-ring: var(--color-neutral-content);
+}
+
 .zx-badge__root.zx-a-color-info {
     --badge-fill: var(--color-info);
     --badge-ink: var(--color-info-content);
 }
 
+.zx-badge__dot.zx-a-color-info {
+    --badge-dot: var(--color-info);
+    --badge-dot-ring: var(--color-info-content);
+}
+
 .zx-badge__root.zx-a-color-success {
     --badge-fill: var(--color-success);
     --badge-ink: var(--color-success-content);
 }
 
+.zx-badge__dot.zx-a-color-success {
+    --badge-dot: var(--color-success);
+    --badge-dot-ring: var(--color-success-content);
+}
+
 .zx-badge__root.zx-a-color-warning {
     --badge-fill: var(--color-warning);
     --badge-ink: var(--color-warning-content);
 }
 
+.zx-badge__dot.zx-a-color-warning {
+    --badge-dot: var(--color-warning);
+    --badge-dot-ring: var(--color-warning-content);
+}
+
 .zx-badge__root.zx-a-color-error {
     --badge-fill: var(--color-error);
     --badge-ink: var(--color-error-content);
 }
 
+.zx-badge__dot.zx-a-color-error {
+    --badge-dot: var(--color-error);
+    --badge-dot-ring: var(--color-error-content);
+}
+
 .zx-badge__root.zx-a-size-xs {
     font-size: var(--text-xs);
     padding: 0 var(--space-sm);

package/dist/lynx/components/box.css

@@ -0,0 +1,54 @@
+.zx-box__root {
+    --box-surface: var(--color-base-100);
+    --box-ink: var(--color-base-content);
+    --l-pad: 0;
+    --l-pad-x: var(--l-pad);
+    --l-pad-y: var(--l-pad);
+}
+
+.zx-box__root {
+    display: flow-root;
+    background: var(--box-surface);
+    color: var(--box-ink);
+    border-radius: var(--radius-box);
+}
+
+.zx-box__root.zx-a-color-primary {
+    --box-surface: var(--color-primary-soft);
+    --box-ink: var(--color-primary);
+}
+
+.zx-box__root.zx-a-color-secondary {
+    --box-surface: var(--color-secondary-soft);
+    --box-ink: var(--color-secondary);
+}
+
+.zx-box__root.zx-a-color-accent {
+    --box-surface: var(--color-accent-soft);
+    --box-ink: var(--color-accent);
+}
+
+.zx-box__root.zx-a-color-neutral {
+    --box-surface: var(--color-neutral-soft);
+    --box-ink: var(--color-neutral);
+}
+
+.zx-box__root.zx-a-color-info {
+    --box-surface: var(--color-info-soft);
+    --box-ink: var(--color-info);
+}
+
+.zx-box__root.zx-a-color-success {
+    --box-surface: var(--color-success-soft);
+    --box-ink: var(--color-success);
+}
+
+.zx-box__root.zx-a-color-warning {
+    --box-surface: var(--color-warning-soft);
+    --box-ink: var(--color-warning);
+}
+
+.zx-box__root.zx-a-color-error {
+    --box-surface: var(--color-error-soft);
+    --box-ink: var(--color-error);
+}

package/dist/lynx/components/breadcrumbs.css

@@ -30,23 +30,23 @@
 }
 
 .zx-root .zx-breadcrumbs__link {
-    color: #0d0d0fbf;
+    color: #18181bbf;
 }
 
 .zx-root.zx-theme-dark .zx-breadcrumbs__link {
-    color: #a0aaaebf;
+    color: #ecf9ffbf;
 }
 
 .zx-root.zx-theme-dim .zx-breadcrumbs__link {
-    color: #788a91bf;
+    color: #b2ccd6bf;
 }
 
 .zx-root.zx-theme-nord .zx-breadcrumbs__link {
-    color: #1c2028bf;
+    color: #2e3440bf;
 }
 
 .zx-root.zx-theme-sunset .zx-breadcrumbs__link {
-    color: #6b7d8dbf;
+    color: #9fb9d0bf;
 }
 
 .zx-breadcrumbs__link.zx-s-active {
@@ -65,23 +65,23 @@
 }
 
 .zx-root .zx-breadcrumbs__separator {
-    color: #02020266;
+    color: #18181b66;
 }
 
 .zx-root.zx-theme-dark .zx-breadcrumbs__separator {
-    color: #42464866;
+    color: #ecf9ff66;
 }
 
 .zx-root.zx-theme-dim .zx-breadcrumbs__separator {
-    color: #2f373b66;
+    color: #b2ccd666;
 }
 
 .zx-root.zx-theme-nord .zx-breadcrumbs__separator {
-    color: #06070b66;
+    color: #2e344066;
 }
 
 .zx-root.zx-theme-sunset .zx-breadcrumbs__separator {
-    color: #29313966;
+    color: #9fb9d066;
 }
 
 .zx-root .zx-breadcrumbs__root.zx-a-color-primary {

package/dist/lynx/components/button.css

@@ -24,8 +24,19 @@
     --btn-ink: #fb8a62;
 }
 
+.zx-button__spinner {
+    box-sizing: border-box;
+    inline-size: 1em;
+    block-size: 1em;
+    flex: none;
+    border-radius: 9999px;
+    border-block-start-color: transparent;
+    animation: zero-daisyui-btn-spin 0.7s linear infinite;
+}
+
 .zx-button__root {
     appearance: none;
+    text-decoration: none;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -40,6 +51,10 @@
     transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
 }
 
+.zx-button__root.zx-s-loading {
+    cursor: progress;
+}
+
 .zx-button__root.zx-f-disabled {
     opacity: var(--disabled-opacity);
     cursor: not-allowed;
@@ -334,14 +349,16 @@
 }
 
 .zx-button__root.zx-m-square {
-    padding-inline: 0;
     aspect-ratio: 1;
+    padding-left: 0;
+    padding-right: 0;
 }
 
 .zx-button__root.zx-m-circle {
-    padding-inline: 0;
     aspect-ratio: 1;
     border-radius: 9999px;
+    padding-left: 0;
+    padding-right: 0;
 }
 
 .zx-button__root.zx-m-active {
@@ -349,10 +366,6 @@
     box-shadow: none;
     filter: brightness(0.92);
 }
-
-.zx-button__root.zx-m-loading {
-    cursor: progress;
-}
 @keyframes zero-daisyui-btn-spin {
     to { transform: rotate(360deg) }
 }

package/dist/lynx/components/card.css

@@ -32,23 +32,23 @@
 }
 
 .zx-root .zx-card__description {
-    color: #0a0a0cb3;
+    color: #18181bb3;
 }
 
 .zx-root.zx-theme-dark .zx-card__description {
-    color: #929a9eb3;
+    color: #ecf9ffb3;
 }
 
 .zx-root.zx-theme-dim .zx-card__description {
-    color: #6d7e84b3;
+    color: #b2ccd6b3;
 }
 
 .zx-root.zx-theme-nord .zx-card__description {
-    color: #181c24b3;
+    color: #2e3440b3;
 }
 
 .zx-root.zx-theme-sunset .zx-card__description {
-    color: #617180b3;
+    color: #9fb9d0b3;
 }
 
 .zx-card__body {

package/dist/lynx/components/carousel.css

@@ -27,8 +27,6 @@
 .zx-carousel__prev-trigger {
     appearance: none;
     position: absolute;
-    inset-block-start: calc(50% - var(--carousel-nav) / 2);
-    inset-inline-start: var(--space-sm);
     inline-size: var(--carousel-nav);
     block-size: var(--carousel-nav);
     display: grid;
@@ -41,6 +39,8 @@
     border-radius: 9999px;
     cursor: pointer;
     z-index: 1;
+    top: calc(50% - var(--carousel-nav) / 2);
+    left: var(--space-sm);
 }
 
 .zx-carousel__prev-trigger.zx-f-disabled {
@@ -56,8 +56,6 @@
 .zx-carousel__next-trigger {
     appearance: none;
     position: absolute;
-    inset-block-start: calc(50% - var(--carousel-nav) / 2);
-    inset-inline-end: var(--space-sm);
     inline-size: var(--carousel-nav);
     block-size: var(--carousel-nav);
     display: grid;
@@ -70,6 +68,8 @@
     border-radius: 9999px;
     cursor: pointer;
     z-index: 1;
+    top: calc(50% - var(--carousel-nav) / 2);
+    right: var(--space-sm);
 }
 
 .zx-carousel__next-trigger.zx-f-disabled {

package/dist/lynx/components/center.css

@@ -0,0 +1,13 @@
+.zx-center__root {
+    --l-axis: center;
+    --l-gap: 0;
+    --l-pad: 0;
+    --l-pad-x: var(--l-pad);
+    --l-pad-y: var(--l-pad);
+}
+
+.zx-center__root {
+    display: grid;
+    place-items: var(--l-axis);
+    gap: var(--l-gap);
+}

package/dist/lynx/components/chat.css

@@ -7,7 +7,8 @@
     display: grid;
     column-gap: var(--space-sm);
     row-gap: var(--space-2xs);
-    padding-block: var(--space-2xs);
+    padding-top: var(--space-2xs);
+    padding-bottom: var(--space-2xs);
 }
 
 .zx-chat__root.zx-p-start {
@@ -32,23 +33,23 @@
 }
 
 .zx-root .zx-chat__header {
-    color: #0a0a0cb3;
+    color: #18181bb3;
 }
 
 .zx-root.zx-theme-dark .zx-chat__header {
-    color: #929a9eb3;
+    color: #ecf9ffb3;
 }
 
 .zx-root.zx-theme-dim .zx-chat__header {
-    color: #6d7e84b3;
+    color: #b2ccd6b3;
 }
 
 .zx-root.zx-theme-nord .zx-chat__header {
-    color: #181c24b3;
+    color: #2e3440b3;
 }
 
 .zx-root.zx-theme-sunset .zx-chat__header {
-    color: #617180b3;
+    color: #9fb9d0b3;
 }
 
 .zx-chat__bubble {
@@ -65,23 +66,23 @@
 }
 
 .zx-root .zx-chat__footer {
-    color: #0a0a0cb3;
+    color: #18181bb3;
 }
 
 .zx-root.zx-theme-dark .zx-chat__footer {
-    color: #929a9eb3;
+    color: #ecf9ffb3;
 }
 
 .zx-root.zx-theme-dim .zx-chat__footer {
-    color: #6d7e84b3;
+    color: #b2ccd6b3;
 }
 
 .zx-root.zx-theme-nord .zx-chat__footer {
-    color: #181c24b3;
+    color: #2e3440b3;
 }
 
 .zx-root.zx-theme-sunset .zx-chat__footer {
-    color: #617180b3;
+    color: #9fb9d0b3;
 }
 
 .zx-chat__bubble.zx-a-color-primary {

package/dist/lynx/components/checkbox.css

@@ -7,7 +7,7 @@
 .zx-checkbox__root {
     display: flex;
     align-items: center;
-    gap: 0.625rem;
+    gap: var(--space-md);
     cursor: pointer;
 }
 
@@ -78,13 +78,13 @@
     width: 100%;
     height: 100%;
     opacity: 0;
-    rotate: 45deg;
     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;
     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), rotate var(--duration-slow) var(--ease-standard) var(--duration-instant), translate var(--duration-slow) var(--ease-standard) var(--duration-instant);
+    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);
+    transform: rotate(45deg);
 }
 
 .zx-checkbox__indicator.zx-s-checked {
@@ -95,8 +95,7 @@
 .zx-checkbox__indicator.zx-s-indeterminate {
     clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
     opacity: 1;
-    translate: 0 -35%;
-    rotate: 0deg;
+    transform: translateY(-35%) rotate(0deg);
 }
 
 .zx-checkbox__label {

package/dist/lynx/components/combobox.css

@@ -10,6 +10,7 @@
 .zx-combobox__control {
     display: flex;
     align-items: stretch;
+    flex-wrap: wrap;
     min-width: 13rem;
     box-sizing: border-box;
     height: calc(var(--size-field) * 12);
@@ -57,6 +58,48 @@
     cursor: not-allowed;
 }
 
+.zx-combobox__tag {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    gap: var(--space-2xs);
+    margin: var(--space-2xs);
+    padding: var(--space-2xs) var(--space-sm);
+    background: var(--color-base-200);
+    color: var(--color-base-content);
+    border-radius: var(--radius-selector);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-medium);
+    line-height: var(--leading-none);
+}
+
+.zx-combobox__tag-label {
+    white-space: nowrap;
+}
+
+.zx-combobox__tag-remove {
+    appearance: none;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    border-radius: var(--radius-selector);
+    padding: 0 var(--space-2xs);
+    line-height: var(--leading-none);
+    cursor: pointer;
+    transition: background var(--duration-fast) var(--ease-standard);
+}
+
+.zx-combobox__tag-remove.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+}
+
+.zx-combobox__tag-remove.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
 .zx-combobox__trigger {
     appearance: none;
     border: none;
@@ -105,7 +148,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 0.625rem;
+    gap: var(--space-md);
     padding: var(--space-md) var(--space-lg);
     font-size: var(--text-sm);
     font-weight: var(--weight-medium);
@@ -171,7 +214,7 @@
 }
 
 .zx-combobox__control.zx-a-size-xs {
-    height: calc(var(--size-field) * 8);
+    min-height: calc(var(--size-field) * 8);
 }
 
 .zx-combobox__input.zx-a-size-xs {
@@ -180,7 +223,7 @@
 }
 
 .zx-combobox__control.zx-a-size-sm {
-    height: calc(var(--size-field) * 10);
+    min-height: calc(var(--size-field) * 10);
 }
 
 .zx-combobox__input.zx-a-size-sm {
@@ -189,7 +232,7 @@
 }
 
 .zx-combobox__control.zx-a-size-md {
-    height: calc(var(--size-field) * 12);
+    min-height: calc(var(--size-field) * 12);
 }
 
 .zx-combobox__input.zx-a-size-md {
@@ -198,7 +241,7 @@
 }
 
 .zx-combobox__control.zx-a-size-lg {
-    height: calc(var(--size-field) * 14);
+    min-height: calc(var(--size-field) * 14);
 }
 
 .zx-combobox__input.zx-a-size-lg {
@@ -207,7 +250,7 @@
 }
 
 .zx-combobox__control.zx-a-size-xl {
-    height: calc(var(--size-field) * 16);
+    min-height: calc(var(--size-field) * 16);
 }
 
 .zx-combobox__input.zx-a-size-xl {