@sigx/zero-daisyui 0.2.0-beta.6 → 0.4.0

package/dist/components.d.ts

@@ -6,6 +6,12 @@
 // import is needed or consulted. The rendered attributes are unchanged:
 // a routed vendor value renders the zero-spelled data-* attribute.
 import type { Adapted, AdaptedStatics } from '@sigx/zero/adapt';
+import type { Stack as ZStack } from '@sigx/zero/stack';
+import type { Spacer as ZSpacer } from '@sigx/zero/spacer';
+import type { Grid as ZGrid } from '@sigx/zero/grid';
+import type { Center as ZCenter } from '@sigx/zero/center';
+import type { Box as ZBox } from '@sigx/zero/box';
+import type { Container as ZContainer } from '@sigx/zero/container';
 import type { Tabs as ZTabs } from '@sigx/zero/tabs';
 import type { Collapsible as ZCollapsible } from '@sigx/zero/collapsible';
 import type { Switch as ZSwitch } from '@sigx/zero/switch';
@@ -31,9 +37,9 @@ import type { RatingGroup as ZRatingGroup } from '@sigx/zero/rating-group';
 import type { TreeView as ZTreeView } from '@sigx/zero/tree-view';
 import type { Input as ZInput } from '@sigx/zero/input';
 import type { Textarea as ZTextarea } from '@sigx/zero/textarea';
-import type { NativeSelect as ZNativeSelect } from '@sigx/zero/native-select';
 import type { Card as ZCard } from '@sigx/zero/card';
 import type { Alert as ZAlert } from '@sigx/zero/alert';
+import type { EmptyState as ZEmptyState } from '@sigx/zero/empty-state';
 import type { Badge as ZBadge } from '@sigx/zero/badge';
 import type { Divider as ZDivider } from '@sigx/zero/divider';
 import type { Skeleton as ZSkeleton } from '@sigx/zero/skeleton';
@@ -47,6 +53,7 @@ import type { Chat as ZChat } from '@sigx/zero/chat';
 import type { RadialProgress as ZRadialProgress } from '@sigx/zero/radial-progress';
 import type { Join as ZJoin } from '@sigx/zero/join';
 import type { Navbar as ZNavbar } from '@sigx/zero/navbar';
+import type { NavList as ZNavList } from '@sigx/zero/nav-list';
 import type { Breadcrumbs as ZBreadcrumbs } from '@sigx/zero/breadcrumbs';
 import type { Pagination as ZPagination } from '@sigx/zero/pagination';
 import type { Steps as ZSteps } from '@sigx/zero/steps';
@@ -60,6 +67,38 @@ import type { Diff as ZDiff } from '@sigx/zero/diff';
 
 type ZeroAxisProp = 'color' | 'size' | 'variant' | 'axes' | 'mods';
 
+/** stack — no vendor route; the wired surface keeps zero's names. */
+type StackProps = Record<never, never>;
+type StackAdapted = Adapted<typeof ZStack, ZeroAxisProp, StackProps>;
+export declare const Stack: StackAdapted & AdaptedStatics<typeof ZStack> & { Root: StackAdapted };
+
+/** spacer — no vendor route; the wired surface keeps zero's names. */
+type SpacerProps = Record<never, never>;
+type SpacerAdapted = Adapted<typeof ZSpacer, ZeroAxisProp, SpacerProps>;
+export declare const Spacer: SpacerAdapted & { Root: SpacerAdapted };
+
+/** grid — no vendor route; the wired surface keeps zero's names. */
+type GridProps = Record<never, never>;
+type GridAdapted = Adapted<typeof ZGrid, ZeroAxisProp, GridProps>;
+export declare const Grid: GridAdapted & AdaptedStatics<typeof ZGrid> & { Root: GridAdapted };
+
+/** center — no vendor route; the wired surface keeps zero's names. */
+type CenterProps = Record<never, never>;
+type CenterAdapted = Adapted<typeof ZCenter, ZeroAxisProp, CenterProps>;
+export declare const Center: CenterAdapted & { Root: CenterAdapted };
+
+/** box — no vendor route; the wired surface keeps zero's names. */
+type BoxProps = {
+    color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+};
+type BoxAdapted = Adapted<typeof ZBox, ZeroAxisProp, BoxProps>;
+export declare const Box: BoxAdapted & { Root: BoxAdapted };
+
+/** container — no vendor route; the wired surface keeps zero's names. */
+type ContainerProps = Record<never, never>;
+type ContainerAdapted = Adapted<typeof ZContainer, ZeroAxisProp, ContainerProps>;
+export declare const Container: ContainerAdapted & { Root: ContainerAdapted };
+
 /** tabs — variant ← variant. Attributes stay zero-spelled. */
 type TabsProps = {
     color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
@@ -173,7 +212,7 @@ type SelectProps = {
 type SelectAdapted = Adapted<typeof ZSelect, ZeroAxisProp, SelectProps>;
 export declare const Select: SelectAdapted & AdaptedStatics<typeof ZSelect> & { Root: SelectAdapted };
 
-/** button — variant ← variant; active ← mods.active; block ← mods.block; circle ← mods.circle; loading ← mods.loading; square ← mods.square; wide ← mods.wide. Attributes stay zero-spelled. */
+/** button — variant ← variant; active ← mods.active; block ← mods.block; circle ← mods.circle; square ← mods.square; wide ← mods.wide. Attributes stay zero-spelled. */
 type ButtonProps = {
     color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -181,17 +220,17 @@ type ButtonProps = {
     'active'?: boolean;
     'block'?: boolean;
     'circle'?: boolean;
-    'loading'?: boolean;
     'square'?: boolean;
     'wide'?: boolean;
 };
-type ButtonAdapted = Adapted<typeof ZButton, ZeroAxisProp | 'active' | 'block' | 'circle' | 'loading' | 'square' | 'variant' | 'wide', ButtonProps>;
-export declare const Button: ButtonAdapted & { Root: ButtonAdapted };
+type ButtonAdapted = Adapted<typeof ZButton, ZeroAxisProp | 'active' | 'block' | 'circle' | 'square' | 'variant' | 'wide', ButtonProps>;
+export declare const Button: ButtonAdapted & AdaptedStatics<typeof ZButton> & { Root: ButtonAdapted };
 
 /** avatar — no vendor route; the wired surface keeps zero's names. */
 type AvatarProps = {
     color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    axes?: { 'shape'?: 'circle' | 'square' | 'rounded' };
 };
 type AvatarAdapted = Adapted<typeof ZAvatar, ZeroAxisProp, AvatarProps>;
 export declare const Avatar: AvatarAdapted & AdaptedStatics<typeof ZAvatar> & { Root: AvatarAdapted };
@@ -268,14 +307,6 @@ type TextareaProps = {
 type TextareaAdapted = Adapted<typeof ZTextarea, ZeroAxisProp, TextareaProps>;
 export declare const Textarea: TextareaAdapted & AdaptedStatics<typeof ZTextarea> & { Root: TextareaAdapted };
 
-/** native-select — no vendor route; the wired surface keeps zero's names. */
-type NativeSelectProps = {
-    color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-};
-type NativeSelectAdapted = Adapted<typeof ZNativeSelect, ZeroAxisProp, NativeSelectProps>;
-export declare const NativeSelect: NativeSelectAdapted & AdaptedStatics<typeof ZNativeSelect> & { Root: NativeSelectAdapted };
-
 /** card — no vendor route; the wired surface keeps zero's names. */
 type CardProps = {
     color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
@@ -292,13 +323,24 @@ type AlertProps = {
 type AlertAdapted = Adapted<typeof ZAlert, ZeroAxisProp, AlertProps>;
 export declare const Alert: AlertAdapted & AdaptedStatics<typeof ZAlert> & { Root: AlertAdapted };
 
+/** empty-state — no vendor route; the wired surface keeps zero's names. */
+type EmptyStateProps = {
+    color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+type EmptyStateAdapted = Adapted<typeof ZEmptyState, ZeroAxisProp, EmptyStateProps>;
+export declare const EmptyState: EmptyStateAdapted & AdaptedStatics<typeof ZEmptyState> & { Root: EmptyStateAdapted };
+
 /** badge — no vendor route; the wired surface keeps zero's names. */
 type BadgeProps = {
     color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 };
 type BadgeAdapted = Adapted<typeof ZBadge, ZeroAxisProp, BadgeProps>;
-export declare const Badge: BadgeAdapted & { Root: BadgeAdapted };
+type BadgeDotAdapted = Adapted<typeof ZBadge.Dot, 'color', {
+    color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+}>;
+export declare const Badge: BadgeAdapted & Omit<AdaptedStatics<typeof ZBadge>, 'Dot'> & { Root: BadgeAdapted; Dot: BadgeDotAdapted };
 
 /** divider — no vendor route; the wired surface keeps zero's names. */
 type DividerProps = {
@@ -362,7 +404,10 @@ type TimelineProps = {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 };
 type TimelineAdapted = Adapted<typeof ZTimeline, ZeroAxisProp, TimelineProps>;
-export declare const Timeline: TimelineAdapted & AdaptedStatics<typeof ZTimeline> & { Root: TimelineAdapted };
+type TimelineMarkerAdapted = Adapted<typeof ZTimeline.Marker, 'color', {
+    color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+}>;
+export declare const Timeline: TimelineAdapted & Omit<AdaptedStatics<typeof ZTimeline>, 'Marker'> & { Root: TimelineAdapted; Marker: TimelineMarkerAdapted };
 
 /** chat — no vendor route; the wired surface keeps zero's names. */
 type ChatProps = {
@@ -396,6 +441,14 @@ type NavbarProps = {
 type NavbarAdapted = Adapted<typeof ZNavbar, ZeroAxisProp, NavbarProps>;
 export declare const Navbar: NavbarAdapted & AdaptedStatics<typeof ZNavbar> & { Root: NavbarAdapted };
 
+/** nav-list — no vendor route; the wired surface keeps zero's names. */
+type NavListProps = {
+    color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+type NavListAdapted = Adapted<typeof ZNavList, ZeroAxisProp, NavListProps>;
+export declare const NavList: NavListAdapted & AdaptedStatics<typeof ZNavList> & { Root: NavListAdapted };
+
 /** breadcrumbs — no vendor route; the wired surface keeps zero's names. */
 type BreadcrumbsProps = {
     color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
@@ -418,7 +471,10 @@ type StepsProps = {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 };
 type StepsAdapted = Adapted<typeof ZSteps, ZeroAxisProp, StepsProps>;
-export declare const Steps: StepsAdapted & AdaptedStatics<typeof ZSteps> & { Root: StepsAdapted };
+type StepsItemAdapted = Adapted<typeof ZSteps.Item, 'color', {
+    color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+}>;
+export declare const Steps: StepsAdapted & Omit<AdaptedStatics<typeof ZSteps>, 'Item'> & { Root: StepsAdapted; Item: StepsItemAdapted };
 
 /** drawer — no vendor route; the wired surface keeps zero's names. */
 type DrawerProps = {
@@ -462,12 +518,13 @@ type SwapProps = {
 type SwapAdapted = Adapted<typeof ZSwap, ZeroAxisProp, SwapProps>;
 export declare const Swap: SwapAdapted & AdaptedStatics<typeof ZSwap> & { Root: SwapAdapted };
 
-/** countdown — no vendor route; the wired surface keeps zero's names. */
+/** countdown — inline ← mods.inline. Attributes stay zero-spelled. */
 type CountdownProps = {
     color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    'inline'?: boolean;
 };
-type CountdownAdapted = Adapted<typeof ZCountdown, ZeroAxisProp, CountdownProps>;
+type CountdownAdapted = Adapted<typeof ZCountdown, ZeroAxisProp | 'inline', CountdownProps>;
 export declare const Countdown: CountdownAdapted & AdaptedStatics<typeof ZCountdown> & { Root: CountdownAdapted };
 
 /** diff — no vendor route; the wired surface keeps zero's names. */

package/dist/components.js

@@ -5,13 +5,13 @@
 import { adapt } from '@sigx/zero/adapt';
 import { Button as ZButton } from '@sigx/zero/button';
 import { Table as ZTable } from '@sigx/zero/table';
+import { Countdown as ZCountdown } from '@sigx/zero/countdown';
 
 export const Button = /* @__PURE__ */ adapt(ZButton, {
     props: {
         'active': { modifier: 'active' },
         'block': { modifier: 'block' },
         'circle': { modifier: 'circle' },
-        'loading': { modifier: 'loading' },
         'square': { modifier: 'square' },
         'variant': { axis: 'variant' },
         'wide': { modifier: 'wide' },
@@ -25,6 +25,18 @@ export const Table = /* @__PURE__ */ adapt(ZTable, {
     },
 });
 
+export const Countdown = /* @__PURE__ */ adapt(ZCountdown, {
+    props: {
+        'inline': { modifier: 'inline' },
+    },
+});
+
+export { Stack } from '@sigx/zero/stack';
+export { Spacer } from '@sigx/zero/spacer';
+export { Grid } from '@sigx/zero/grid';
+export { Center } from '@sigx/zero/center';
+export { Box } from '@sigx/zero/box';
+export { Container } from '@sigx/zero/container';
 export { Tabs } from '@sigx/zero/tabs';
 export { Collapsible } from '@sigx/zero/collapsible';
 export { Switch } from '@sigx/zero/switch';
@@ -49,9 +61,9 @@ export { RatingGroup } from '@sigx/zero/rating-group';
 export { TreeView } from '@sigx/zero/tree-view';
 export { Input } from '@sigx/zero/input';
 export { Textarea } from '@sigx/zero/textarea';
-export { NativeSelect } from '@sigx/zero/native-select';
 export { Card } from '@sigx/zero/card';
 export { Alert } from '@sigx/zero/alert';
+export { EmptyState } from '@sigx/zero/empty-state';
 export { Badge } from '@sigx/zero/badge';
 export { Divider } from '@sigx/zero/divider';
 export { Skeleton } from '@sigx/zero/skeleton';
@@ -65,6 +77,7 @@ export { Chat } from '@sigx/zero/chat';
 export { RadialProgress } from '@sigx/zero/radial-progress';
 export { Join } from '@sigx/zero/join';
 export { Navbar } from '@sigx/zero/navbar';
+export { NavList } from '@sigx/zero/nav-list';
 export { Breadcrumbs } from '@sigx/zero/breadcrumbs';
 export { Pagination } from '@sigx/zero/pagination';
 export { Steps } from '@sigx/zero/steps';
@@ -72,5 +85,4 @@ export { Drawer } from '@sigx/zero/drawer';
 export { FileUpload } from '@sigx/zero/file-upload';
 export { Carousel } from '@sigx/zero/carousel';
 export { Swap } from '@sigx/zero/swap';
-export { Countdown } from '@sigx/zero/countdown';
 export { Diff } from '@sigx/zero/diff';

package/dist/css/breakpoints.css

@@ -0,0 +1,7 @@
+/* daisyui breakpoints — generated by @sigx/zero-kit. Do not edit. */
+@custom-media --above-sm (min-width: 40rem);
+@custom-media --below-sm (width < 40rem);
+@custom-media --above-md (min-width: 48rem);
+@custom-media --below-md (width < 48rem);
+@custom-media --above-lg (min-width: 64rem);
+@custom-media --below-lg (width < 64rem);

package/dist/css/components/avatar.css

@@ -40,6 +40,18 @@
         display: grid;
     }
 
+    [data-scope="avatar"][data-part="root"][data-shape="circle"] {
+        border-radius: 9999px;
+    }
+
+    [data-scope="avatar"][data-part="root"][data-shape="square"] {
+        border-radius: 0;
+    }
+
+    [data-scope="avatar"][data-part="root"][data-shape="rounded"] {
+        border-radius: var(--radius-selector);
+    }
+
     [data-scope="avatar"][data-part="root"][data-color="primary"] {
         --avatar-ring: var(--color-primary);
     }

package/dist/css/components/badge.css

@@ -1,5 +1,7 @@
 @layer zero.recipes {
     [data-scope="badge"][data-part="root"] {
+        --badge-dot: currentColor;
+        --badge-dot-ring: currentColor;
         --badge-fill: var(--color-base-200);
         --badge-ink: var(--color-base-content);
     }
@@ -12,7 +14,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);
@@ -20,6 +22,22 @@
         text-decoration: none;
     }
 
+    [data-scope="badge"][data-part="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);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-state="running"] {
+        box-shadow: 0 0 0 0.2em color-mix(in oklch, var(--badge-dot) 35%, transparent);
+        animation: zero-daisy-badge-pulse 1.6s ease-out infinite;
+    }
+
     [data-scope="badge"][data-part="root"][data-color="primary"] {
         --badge-fill: var(--color-primary);
         --badge-ink: var(--color-primary-content);
@@ -79,4 +97,115 @@
         font-size: var(--text-md);
         padding: var(--space-xs) var(--space-xl);
     }
+
+    [data-scope="badge"][data-part="dot"][data-color="primary"] {
+        --badge-dot: var(--color-primary);
+        --badge-dot-ring: var(--color-primary-content);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-color="secondary"] {
+        --badge-dot: var(--color-secondary);
+        --badge-dot-ring: var(--color-secondary-content);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-color="accent"] {
+        --badge-dot: var(--color-accent);
+        --badge-dot-ring: var(--color-accent-content);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-color="neutral"] {
+        --badge-dot: var(--color-neutral);
+        --badge-dot-ring: var(--color-neutral-content);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-color="info"] {
+        --badge-dot: var(--color-info);
+        --badge-dot-ring: var(--color-info-content);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-color="success"] {
+        --badge-dot: var(--color-success);
+        --badge-dot-ring: var(--color-success-content);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-color="warning"] {
+        --badge-dot: var(--color-warning);
+        --badge-dot-ring: var(--color-warning-content);
+    }
+
+    [data-scope="badge"][data-part="dot"][data-color="error"] {
+        --badge-dot: var(--color-error);
+        --badge-dot-ring: var(--color-error-content);
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="primary"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-primary);
+            --badge-dot-ring: var(--color-primary-content);
+        }
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="secondary"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-secondary);
+            --badge-dot-ring: var(--color-secondary-content);
+        }
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="accent"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-accent);
+            --badge-dot-ring: var(--color-accent-content);
+        }
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="neutral"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-neutral);
+            --badge-dot-ring: var(--color-neutral-content);
+        }
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="info"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-info);
+            --badge-dot-ring: var(--color-info-content);
+        }
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="success"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-success);
+            --badge-dot-ring: var(--color-success-content);
+        }
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="warning"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-warning);
+            --badge-dot-ring: var(--color-warning-content);
+        }
+    }
+
+    @scope ([data-scope="badge"][data-part="root"][data-color="error"]) to ([data-scope="badge"][data-part="root"]) {
+        [data-scope="badge"][data-part="dot"] {
+            --badge-dot: var(--color-error);
+            --badge-dot-ring: var(--color-error-content);
+        }
+    }
+
+    @media (forced-colors: active) {
+        [data-scope="badge"][data-part="dot"] {
+            border-width: 0.25em;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="badge"][data-part="dot"][data-state="running"] {
+            animation: none;
+        }
+    }
+}
+@keyframes zero-daisy-badge-pulse {
+    from { box-shadow: 0 0 0 0 color-mix(in oklch, var(--badge-dot) 45%, transparent); } to { box-shadow: 0 0 0 0.5em transparent; }
 }

package/dist/css/components/box.css

@@ -0,0 +1,58 @@
+@layer zero.recipes {
+    [data-scope="box"][data-part="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);
+    }
+
+    [data-scope="box"][data-part="root"] {
+        display: flow-root;
+        background: var(--box-surface);
+        color: var(--box-ink);
+        border-radius: var(--radius-box);
+        padding-inline: var(--l-pad-x);
+        padding-block: var(--l-pad-y);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="primary"] {
+        --box-surface: var(--color-primary-soft);
+        --box-ink: var(--color-primary);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="secondary"] {
+        --box-surface: var(--color-secondary-soft);
+        --box-ink: var(--color-secondary);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="accent"] {
+        --box-surface: var(--color-accent-soft);
+        --box-ink: var(--color-accent);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="neutral"] {
+        --box-surface: var(--color-neutral-soft);
+        --box-ink: var(--color-neutral);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="info"] {
+        --box-surface: var(--color-info-soft);
+        --box-ink: var(--color-info);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="success"] {
+        --box-surface: var(--color-success-soft);
+        --box-ink: var(--color-success);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="warning"] {
+        --box-surface: var(--color-warning-soft);
+        --box-ink: var(--color-warning);
+    }
+
+    [data-scope="box"][data-part="root"][data-color="error"] {
+        --box-surface: var(--color-error-soft);
+        --box-ink: var(--color-error);
+    }
+}

package/dist/css/components/button.css

@@ -6,8 +6,20 @@
         --btn-ink: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
     }
 
+    [data-scope="button"][data-part="spinner"] {
+        box-sizing: border-box;
+        inline-size: 1em;
+        block-size: 1em;
+        flex: none;
+        border-radius: 9999px;
+        border: calc(var(--border) * 2) solid currentColor;
+        border-block-start-color: transparent;
+        animation: zero-daisyui-btn-spin 0.7s linear infinite;
+    }
+
     [data-scope="button"][data-part="root"] {
         appearance: none;
+        text-decoration: none;
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -22,6 +34,10 @@
         transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
     }
 
+    [data-scope="button"][data-part="root"][data-state="loading"] {
+        cursor: progress;
+    }
+
     [data-scope="button"][data-part="root"][data-disabled] {
         opacity: var(--disabled-opacity);
         cursor: not-allowed;
@@ -231,24 +247,8 @@
         filter: brightness(0.92);
     }
 
-    [data-scope="button"][data-part="root"][data-mod-loading] {
-        cursor: progress;
-    }
-
-    [data-scope="button"][data-part="root"][data-mod-loading]::before {
-        content: "";
-        box-sizing: border-box;
-        inline-size: 1em;
-        block-size: 1em;
-        flex: none;
-        border-radius: 9999px;
-        border: calc(var(--border) * 2) solid currentColor;
-        border-block-start-color: transparent;
-        animation: zero-daisyui-btn-spin 0.7s linear infinite;
-    }
-
     @media (prefers-reduced-motion: reduce) {
-        [data-scope="button"][data-part="root"][data-mod-loading]::before {
+        [data-scope="button"][data-part="spinner"] {
             animation: none;
         }
     }

package/dist/css/components/center.css

@@ -0,0 +1,17 @@
+@layer zero.recipes {
+    [data-scope="center"][data-part="root"] {
+        --l-axis: center;
+        --l-gap: 0;
+        --l-pad: 0;
+        --l-pad-x: var(--l-pad);
+        --l-pad-y: var(--l-pad);
+    }
+
+    [data-scope="center"][data-part="root"] {
+        display: grid;
+        place-items: var(--l-axis);
+        gap: var(--l-gap);
+        padding-inline: var(--l-pad-x);
+        padding-block: var(--l-pad-y);
+    }
+}

package/dist/css/components/checkbox.css

@@ -9,7 +9,7 @@
     [data-scope="checkbox"][data-part="root"] {
         display: inline-flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         cursor: pointer;
     }