@sigx/zero-daisyui 0.7.0 → 0.9.0

package/dist/components.d.ts

@@ -18,7 +18,9 @@ import type { Switch as ZSwitch } from '@sigx/zero/switch';
 import type { Dialog as ZDialog } from '@sigx/zero/dialog';
 import type { Popover as ZPopover } from '@sigx/zero/popover';
 import type { Tooltip as ZTooltip } from '@sigx/zero/tooltip';
+import type { HoverCard as ZHoverCard } from '@sigx/zero/hover-card';
 import type { Menu as ZMenu } from '@sigx/zero/menu';
+import type { Menubar as ZMenubar } from '@sigx/zero/menubar';
 import type { Field as ZField } from '@sigx/zero/field';
 import type { Fieldset as ZFieldset } from '@sigx/zero/fieldset';
 import type { Checkbox as ZCheckbox } from '@sigx/zero/checkbox';
@@ -30,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';
@@ -52,6 +55,7 @@ import type { Indicator as ZIndicator } from '@sigx/zero/indicator';
 import type { Stats as ZStats } from '@sigx/zero/stats';
 import type { Timeline as ZTimeline } from '@sigx/zero/timeline';
 import type { Chat as ZChat } from '@sigx/zero/chat';
+import type { ChatLog as ZChatLog } from '@sigx/zero/chat-log';
 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';
@@ -150,6 +154,14 @@ type TooltipProps = {
 type TooltipAdapted = Adapted<typeof ZTooltip, ZeroAxisProp, TooltipProps>;
 export declare const Tooltip: TooltipAdapted & AdaptedStatics<typeof ZTooltip> & { Root: TooltipAdapted };
 
+/** hover-card — no vendor route; the wired surface keeps zero's names. */
+type HoverCardProps = {
+    color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+type HoverCardAdapted = Adapted<typeof ZHoverCard, ZeroAxisProp, HoverCardProps>;
+export declare const HoverCard: HoverCardAdapted & AdaptedStatics<typeof ZHoverCard> & { Root: HoverCardAdapted };
+
 /** menu — no vendor route; the wired surface keeps zero's names. */
 type MenuProps = {
     color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
@@ -158,6 +170,14 @@ type MenuProps = {
 type MenuAdapted = Adapted<typeof ZMenu, ZeroAxisProp, MenuProps>;
 export declare const Menu: MenuAdapted & AdaptedStatics<typeof ZMenu> & { Root: MenuAdapted };
 
+/** menubar — no vendor route; the wired surface keeps zero's names. */
+type MenubarProps = {
+    color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+type MenubarAdapted = Adapted<typeof ZMenubar, ZeroAxisProp, MenubarProps>;
+export declare const Menubar: MenubarAdapted & { Root: MenubarAdapted };
+
 /** field — no vendor route; the wired surface keeps zero's names. */
 type FieldProps = {
     color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
@@ -253,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';
@@ -366,7 +394,7 @@ type DividerProps = {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 };
 type DividerAdapted = Adapted<typeof ZDivider, ZeroAxisProp, DividerProps>;
-export declare const Divider: DividerAdapted & { Root: DividerAdapted };
+export declare const Divider: DividerAdapted & AdaptedStatics<typeof ZDivider> & { Root: DividerAdapted };
 
 /** skeleton — no vendor route; the wired surface keeps zero's names. */
 type SkeletonProps = {
@@ -438,6 +466,14 @@ type ChatProps = {
 type ChatAdapted = Adapted<typeof ZChat, ZeroAxisProp, ChatProps>;
 export declare const Chat: ChatAdapted & AdaptedStatics<typeof ZChat> & { Root: ChatAdapted };
 
+/** chat-log — no vendor route; the wired surface keeps zero's names. */
+type ChatLogProps = {
+    color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+type ChatLogAdapted = Adapted<typeof ZChatLog, ZeroAxisProp, ChatLogProps>;
+export declare const ChatLog: ChatLogAdapted & AdaptedStatics<typeof ZChatLog> & { Root: ChatLogAdapted };
+
 /** radial-progress — no vendor route; the wired surface keeps zero's names. */
 type RadialProgressProps = {
     color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';

package/dist/components.js

@@ -43,7 +43,9 @@ export { Switch } from '@sigx/zero/switch';
 export { Dialog } from '@sigx/zero/dialog';
 export { Popover } from '@sigx/zero/popover';
 export { Tooltip } from '@sigx/zero/tooltip';
+export { HoverCard } from '@sigx/zero/hover-card';
 export { Menu } from '@sigx/zero/menu';
+export { Menubar } from '@sigx/zero/menubar';
 export { Field } from '@sigx/zero/field';
 export { Fieldset } from '@sigx/zero/fieldset';
 export { Checkbox } from '@sigx/zero/checkbox';
@@ -54,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';
@@ -76,6 +79,7 @@ export { Indicator } from '@sigx/zero/indicator';
 export { Stats } from '@sigx/zero/stats';
 export { Timeline } from '@sigx/zero/timeline';
 export { Chat } from '@sigx/zero/chat';
+export { ChatLog } from '@sigx/zero/chat-log';
 export { RadialProgress } from '@sigx/zero/radial-progress';
 export { Join } from '@sigx/zero/join';
 export { Navbar } from '@sigx/zero/navbar';

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/components/breadcrumbs.css

@@ -54,6 +54,36 @@
         user-select: none;
     }
 
+    [data-scope="breadcrumbs"][data-part="ellipsis"] {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+    }
+
+    [data-scope="breadcrumbs"][data-part="ellipsis-trigger"] {
+        appearance: none;
+        background: transparent;
+        border: 0;
+        padding: 0 var(--space-2xs);
+        margin: 0;
+        font: inherit;
+        line-height: inherit;
+        color: color-mix(in oklch, var(--color-base-content) 75%, transparent);
+        border-radius: var(--radius-selector);
+        cursor: pointer;
+        transition: color var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="breadcrumbs"][data-part="ellipsis-trigger"]:hover:not([data-disabled]) {
+        color: var(--color-base-content);
+        text-decoration: underline;
+    }
+
+    [data-scope="breadcrumbs"][data-part="ellipsis-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+
     [data-scope="breadcrumbs"][data-part="root"][data-color="primary"] {
         --bc-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
     }

package/dist/css/components/card.css

@@ -15,6 +15,32 @@
         overflow: hidden;
     }
 
+    [data-scope="card"][data-part="media"] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        inline-size: 100%;
+        object-fit: cover;
+    }
+
+    [data-scope="card"][data-part="media"] > :is(img, picture, video, svg, canvas) {
+        display: block;
+        inline-size: 100%;
+        block-size: 100%;
+        object-fit: cover;
+    }
+
+    [data-scope="card"][data-part="media"]:first-child {
+        border-start-start-radius: var(--radius-box);
+        border-start-end-radius: var(--radius-box);
+    }
+
+    [data-scope="card"][data-part="media"]:last-child {
+        border-end-start-radius: var(--radius-box);
+        border-end-end-radius: var(--radius-box);
+    }
+
     [data-scope="card"][data-part="header"] {
         display: flex;
         flex-direction: column;

package/dist/css/components/chat-log.css

@@ -0,0 +1,172 @@
+@layer zero.fallback, zero.tokens, zero.recipes, zero.structure;
+
+@layer zero.recipes {
+    [data-scope="chat-log"][data-part="root"] {
+        --chat-log-fill: var(--color-primary);
+        --chat-log-on-fill: var(--color-primary-content);
+        --chat-log-jump-size: calc(var(--size-field) * 8);
+    }
+
+    [data-scope="chat-log"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        overscroll-behavior-y: contain;
+        border-radius: var(--radius-box);
+        background: var(--color-base-100);
+        color: var(--color-base-content);
+        border: var(--border) solid var(--color-base-300);
+        padding: var(--space-sm) var(--space-md);
+    }
+
+    [data-scope="chat-log"][data-part="root"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: -2px;
+    }
+
+    [data-scope="chat-log"][data-part="content"] {
+        margin-block-start: auto;
+        flex: none;
+        display: grid;
+        row-gap: var(--space-xs);
+    }
+
+    [data-scope="chat-log"][data-part="jump-trigger"] {
+        position: sticky;
+        inset-block-end: var(--space-sm);
+        align-self: center;
+        flex: none;
+        margin-block-start: calc(var(--chat-log-jump-size) * -1);
+        block-size: var(--chat-log-jump-size);
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2xs);
+        padding-inline: var(--space-md);
+        border: var(--border) solid transparent;
+        border-radius: 9999px;
+        background: var(--chat-log-fill);
+        color: var(--chat-log-on-fill);
+        box-shadow: var(--shadow-xs);
+        font-family: inherit;
+        font-size: var(--text-xs);
+        font-weight: var(--weight-semibold);
+        line-height: var(--leading-none);
+        cursor: pointer;
+        transition: background var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="chat-log"][data-part="jump-trigger"]:hover:not([data-disabled]) {
+        background: color-mix(in oklab, var(--chat-log-fill) 90%, black);
+    }
+
+    [data-scope="chat-log"][data-part="jump-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="chat-log"][data-part="jump-trigger"][data-pressed]:not([data-disabled]) {
+        transform: translateY(1px);
+        box-shadow: none;
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="primary"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-primary);
+            --chat-log-on-fill: var(--color-primary-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="secondary"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-secondary);
+            --chat-log-on-fill: var(--color-secondary-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="accent"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-accent);
+            --chat-log-on-fill: var(--color-accent-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="neutral"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-neutral);
+            --chat-log-on-fill: var(--color-neutral-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="info"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-info);
+            --chat-log-on-fill: var(--color-info-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="success"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-success);
+            --chat-log-on-fill: var(--color-success-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="warning"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-warning);
+            --chat-log-on-fill: var(--color-warning-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="error"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-error);
+            --chat-log-on-fill: var(--color-error-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-size="xs"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="content"] {
+            row-gap: var(--space-2xs);
+        }
+
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-jump-size: calc(var(--size-field) * 6);
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-size="sm"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="content"] {
+            row-gap: var(--space-2xs);
+        }
+
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-jump-size: calc(var(--size-field) * 7);
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-size="lg"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="content"] {
+            row-gap: var(--space-sm);
+        }
+
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-jump-size: calc(var(--size-field) * 9);
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-size="xl"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="content"] {
+            row-gap: var(--space-md);
+        }
+
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-jump-size: calc(var(--size-field) * 10);
+            font-size: var(--text-sm);
+        }
+    }
+}

package/dist/css/components/divider.css

@@ -7,21 +7,86 @@
     }
 
     [data-scope="divider"][data-part="root"] {
+        display: flex;
+        align-items: center;
         border: none;
-        background: var(--divider-ink);
         align-self: stretch;
     }
 
+    [data-scope="divider"][data-part="root"]::before {
+        content: "";
+        flex: 1 1 0;
+        min-inline-size: 0;
+    }
+
+    [data-scope="divider"][data-part="root"]::after {
+        content: "";
+        flex: 1 1 0;
+        min-inline-size: 0;
+    }
+
     [data-scope="divider"][data-part="root"][data-orientation="horizontal"] {
         inline-size: 100%;
-        block-size: var(--divider-thickness);
+    }
+
+    [data-scope="divider"][data-part="root"][data-orientation="horizontal"]::before {
+        border-block-start: var(--divider-thickness) solid var(--divider-ink);
+    }
+
+    [data-scope="divider"][data-part="root"][data-orientation="horizontal"]::after {
+        border-block-start: var(--divider-thickness) solid var(--divider-ink);
     }
 
     [data-scope="divider"][data-part="root"][data-orientation="vertical"] {
-        inline-size: var(--divider-thickness);
+        flex-direction: column;
         min-block-size: 1em;
     }
 
+    [data-scope="divider"][data-part="root"][data-orientation="vertical"]::before {
+        border-inline-start: var(--divider-thickness) solid var(--divider-ink);
+    }
+
+    [data-scope="divider"][data-part="root"][data-orientation="vertical"]::after {
+        border-inline-start: var(--divider-thickness) solid var(--divider-ink);
+    }
+
+    [data-scope="divider"][data-part="root"]:has(> [data-scope="divider"][data-part="label"][data-placement="start"])::before {
+        display: none;
+    }
+
+    [data-scope="divider"][data-part="root"]:has(> [data-scope="divider"][data-part="label"][data-placement="end"])::after {
+        display: none;
+    }
+
+    [data-scope="divider"][data-part="label"] {
+        flex: none;
+        padding-inline: var(--space-md);
+        font-size: var(--text-sm);
+        white-space: nowrap;
+        color: var(--color-base-content);
+    }
+
+    [data-scope="divider"][data-part="root"][data-orientation="vertical"] > [data-scope="divider"][data-part="label"] {
+        padding-inline: 0;
+        padding-block: var(--space-sm);
+    }
+
+    [data-scope="divider"][data-part="label"][data-placement="start"] {
+        padding-inline-start: 0;
+    }
+
+    [data-scope="divider"][data-part="label"][data-placement="end"] {
+        padding-inline-end: 0;
+    }
+
+    [data-scope="divider"][data-part="root"][data-orientation="vertical"] > [data-scope="divider"][data-part="label"][data-placement="start"] {
+        padding-block-start: 0;
+    }
+
+    [data-scope="divider"][data-part="root"][data-orientation="vertical"] > [data-scope="divider"][data-part="label"][data-placement="end"] {
+        padding-block-end: 0;
+    }
+
     [data-scope="divider"][data-part="root"][data-color="primary"] {
         --divider-ink: var(--color-primary);
     }