@sigx/zero-daisyui 0.7.0 → 0.9.0

package/dist/lynx/components/accordion.css

@@ -42,8 +42,10 @@
 }
 
 .zx-accordion__trigger.zx-f-focus-visible {
-    outline: 2px solid var(--color-base-content);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: inset 0 0 0 2px var(--color-base-content);
+    border-radius: calc(var(--radius-box) - var(--border));
 }
 
 .zx-accordion__trigger.zx-f-pressed {

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

@@ -0,0 +1,97 @@
+.zx-avatar-group__root {
+    --avatar-group-text: var(--text-sm);
+    --avatar-group-ring: var(--color-primary);
+}
+
+.zx-avatar-group__root {
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+    isolation: isolate;
+}
+
+.zx-avatar-group__overflow {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    box-sizing: border-box;
+    min-width: calc(var(--size-selector) * 10);
+    height: calc(var(--size-selector) * 10);
+    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;
+}
+
+.zx-avatar-group__overflow.zx-a-size-xs {
+    min-width: calc(var(--size-selector) * 6);
+    height: calc(var(--size-selector) * 6);
+}
+
+.zx-avatar-group__overflow.zx-a-size-sm {
+    min-width: calc(var(--size-selector) * 8);
+    height: calc(var(--size-selector) * 8);
+}
+
+.zx-avatar-group__overflow.zx-a-size-lg {
+    min-width: calc(var(--size-selector) * 12);
+    height: calc(var(--size-selector) * 12);
+}
+
+.zx-avatar-group__overflow.zx-a-size-xl {
+    min-width: calc(var(--size-selector) * 16);
+    height: calc(var(--size-selector) * 16);
+}
+
+.zx-avatar-group__root.zx-a-color-primary {
+    --avatar-group-ring: var(--color-primary);
+}
+
+.zx-avatar-group__root.zx-a-color-secondary {
+    --avatar-group-ring: var(--color-secondary);
+}
+
+.zx-avatar-group__root.zx-a-color-accent {
+    --avatar-group-ring: var(--color-accent);
+}
+
+.zx-avatar-group__root.zx-a-color-neutral {
+    --avatar-group-ring: var(--color-neutral);
+}
+
+.zx-avatar-group__root.zx-a-color-info {
+    --avatar-group-ring: var(--color-info);
+}
+
+.zx-avatar-group__root.zx-a-color-success {
+    --avatar-group-ring: var(--color-success);
+}
+
+.zx-avatar-group__root.zx-a-color-warning {
+    --avatar-group-ring: var(--color-warning);
+}
+
+.zx-avatar-group__root.zx-a-color-error {
+    --avatar-group-ring: var(--color-error);
+}
+
+.zx-avatar-group__root.zx-a-size-xs {
+    --avatar-group-text: var(--text-xs);
+}
+
+.zx-avatar-group__root.zx-a-size-sm {
+    --avatar-group-text: var(--text-xs);
+}
+
+.zx-avatar-group__root.zx-a-size-lg {
+    --avatar-group-text: var(--text-md);
+}
+
+.zx-avatar-group__root.zx-a-size-xl {
+    --avatar-group-text: var(--text-lg);
+}

package/dist/lynx/components/breadcrumbs.css

@@ -84,6 +84,50 @@
     color: #9fb9d066;
 }
 
+.zx-breadcrumbs__ellipsis {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+}
+
+.zx-breadcrumbs__ellipsis-trigger {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0 var(--space-2xs);
+    margin: 0;
+    font: inherit;
+    line-height: inherit;
+    border-radius: var(--radius-selector);
+    cursor: pointer;
+    transition: color var(--duration-fast) var(--ease-standard);
+}
+
+.zx-root .zx-breadcrumbs__ellipsis-trigger {
+    color: #18181bbf;
+}
+
+.zx-root.zx-theme-dark .zx-breadcrumbs__ellipsis-trigger {
+    color: #ecf9ffbf;
+}
+
+.zx-root.zx-theme-dim .zx-breadcrumbs__ellipsis-trigger {
+    color: #b2ccd6bf;
+}
+
+.zx-root.zx-theme-nord .zx-breadcrumbs__ellipsis-trigger {
+    color: #2e3440bf;
+}
+
+.zx-root.zx-theme-sunset .zx-breadcrumbs__ellipsis-trigger {
+    color: #9fb9d0bf;
+}
+
+.zx-breadcrumbs__ellipsis-trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
 .zx-root .zx-breadcrumbs__root.zx-a-color-primary {
     --bc-accent: #3f2bcb;
 }

package/dist/lynx/components/button.css

@@ -30,11 +30,18 @@
     block-size: 1em;
     flex: none;
     border-radius: 9999px;
-    border: calc(var(--border) * 2) solid var(--btn-ink);
+    border: 0 solid transparent;
     border-block-start-color: transparent;
     animation: zero-daisyui-btn-spin 0.7s linear infinite;
     width: 1em;
     height: 1em;
+    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(--btn-ink);
+    border-bottom-color: var(--btn-ink);
+    border-left-color: var(--btn-ink);
     border-top-color: transparent;
 }
 
@@ -45,7 +52,7 @@
     align-items: center;
     justify-content: center;
     gap: 0.5em;
-    border: var(--border) solid transparent;
+    border: 0 solid transparent;
     border-radius: var(--radius-field);
     box-shadow: var(--shadow-xs);
     font-family: inherit;
@@ -53,6 +60,13 @@
     line-height: var(--leading-none);
     cursor: pointer;
     transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
+    width: max-content;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    border-top-width: var(--border);
+    border-right-width: var(--border);
+    border-bottom-width: var(--border);
+    border-left-width: var(--border);
 }
 
 .zx-button__root.zx-s-loading {
@@ -92,8 +106,9 @@
 }
 
 .zx-button__root.zx-f-focus-visible {
-    outline: 2px solid var(--btn-ink);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--btn-ink);
 }
 
 .zx-button__root.zx-f-pressed {
@@ -315,14 +330,19 @@
 }
 
 .zx-button__spinner.zx-a-variant-solid {
-    border-color: var(--btn-on-accent);
-    border-top-color: transparent;
+    border-right-color: var(--btn-on-accent);
+    border-bottom-color: var(--btn-on-accent);
+    border-left-color: var(--btn-on-accent);
 }
 
 .zx-button__root.zx-a-variant-outline {
     background: transparent;
     color: var(--btn-ink);
-    border-color: var(--btn-ink);
+    border-color: transparent;
+    border-top-color: var(--btn-ink);
+    border-right-color: var(--btn-ink);
+    border-bottom-color: var(--btn-ink);
+    border-left-color: var(--btn-ink);
 }
 
 .zx-button__root.zx-a-variant-outline.zx-f-disabled {
@@ -346,8 +366,12 @@
 .zx-button__root.zx-a-variant-dash {
     background: transparent;
     color: var(--btn-ink);
-    border-color: var(--btn-ink);
+    border-color: transparent;
     border-style: dashed;
+    border-top-color: var(--btn-ink);
+    border-right-color: var(--btn-ink);
+    border-bottom-color: var(--btn-ink);
+    border-left-color: var(--btn-ink);
 }
 
 .zx-button__root.zx-a-variant-dash.zx-f-disabled {
@@ -366,47 +390,76 @@
     background: transparent;
 }
 
+.zx-button__root.zx-a-variant-link.zx-f-focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--btn-ink);
+}
+
 .zx-button__root.zx-a-size-xs {
     height: calc(var(--size-field) * 6);
-    padding: var(--space-2xs) var(--space-xs);
+    padding: 0;
     font-size: var(--text-xs);
+    padding-top: var(--space-2xs);
+    padding-bottom: var(--space-2xs);
+    padding-right: var(--space-xs);
+    padding-left: var(--space-xs);
 }
 
 .zx-button__root.zx-a-size-sm {
     height: calc(var(--size-field) * 8);
-    padding: var(--space-xs) var(--space-sm);
+    padding: 0;
     font-size: var(--text-sm);
+    padding-top: var(--space-xs);
+    padding-bottom: var(--space-xs);
+    padding-right: var(--space-sm);
+    padding-left: var(--space-sm);
 }
 
 .zx-button__root.zx-a-size-md {
     height: calc(var(--size-field) * 10);
-    padding: var(--space-sm) var(--space-lg);
+    padding: 0;
     font-size: var(--text-md);
+    padding-top: var(--space-sm);
+    padding-bottom: var(--space-sm);
+    padding-right: var(--space-lg);
+    padding-left: var(--space-lg);
 }
 
 .zx-button__root.zx-a-size-lg {
     height: calc(var(--size-field) * 12);
-    padding: var(--space-md) var(--space-xl);
+    padding: 0;
     font-size: var(--text-lg);
+    padding-top: var(--space-md);
+    padding-bottom: var(--space-md);
+    padding-right: var(--space-xl);
+    padding-left: var(--space-xl);
 }
 
 .zx-button__root.zx-a-size-xl {
     height: calc(var(--size-field) * 14);
-    padding: var(--space-lg) var(--space-2xl);
+    padding: 0;
     font-size: var(--text-xl);
+    padding-top: var(--space-lg);
+    padding-bottom: var(--space-lg);
+    padding-right: var(--space-2xl);
+    padding-left: var(--space-2xl);
 }
 
 .zx-button__root.zx-m-wide {
     inline-size: 100%;
     max-inline-size: 16rem;
+    width: 100%;
+    max-width: 16rem;
 }
 
 .zx-button__root.zx-m-block {
     inline-size: 100%;
+    width: 100%;
 }
 
 .zx-button__root.zx-m-square {
     aspect-ratio: 1;
+    width: auto;
     padding-left: 0;
     padding-right: 0;
 }
@@ -414,6 +467,7 @@
 .zx-button__root.zx-m-circle {
     aspect-ratio: 1;
     border-radius: 9999px;
+    width: auto;
     padding-left: 0;
     padding-right: 0;
 }
@@ -423,6 +477,11 @@
     box-shadow: none;
     filter: brightness(0.92);
 }
+
+.zx-button__root.zx-m-active.zx-f-focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--btn-ink);
+}
 @keyframes zero-daisyui-btn-spin {
     to { transform: rotate(360deg) }
 }

package/dist/lynx/components/card.css

@@ -12,6 +12,15 @@
     overflow: hidden;
 }
 
+.zx-card__media {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    inline-size: 100%;
+    object-fit: cover;
+}
+
 .zx-card__header {
     display: flex;
     flex-direction: column;

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

@@ -0,0 +1,147 @@
+.zx-chat-log__root {
+    --chat-log-fill: var(--color-primary);
+    --chat-log-on-fill: var(--color-primary-content);
+}
+
+.zx-chat-log__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);
+}
+
+.zx-chat-log__root.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: -2px;
+}
+
+.zx-chat-log__content {
+    flex: none;
+    display: grid;
+    row-gap: var(--space-xs);
+}
+
+.zx-chat-log__jump-trigger {
+    position: sticky;
+    align-self: center;
+    flex: none;
+    block-size: calc(var(--size-field) * 8);
+    appearance: none;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2xs);
+    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);
+}
+
+.zx-chat-log__jump-trigger.zx-a-size-xs {
+    block-size: calc(var(--size-field) * 6);
+}
+
+.zx-chat-log__jump-trigger.zx-a-size-sm {
+    block-size: calc(var(--size-field) * 7);
+}
+
+.zx-chat-log__jump-trigger.zx-a-size-lg {
+    block-size: calc(var(--size-field) * 9);
+}
+
+.zx-chat-log__jump-trigger.zx-a-size-xl {
+    block-size: calc(var(--size-field) * 10);
+}
+
+.zx-chat-log__jump-trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-chat-log__jump-trigger.zx-f-pressed {
+    transform: translateY(1px);
+    box-shadow: none;
+}
+
+.zx-chat-log__jump-trigger.zx-a-color-primary {
+    --chat-log-fill: var(--color-primary);
+    --chat-log-on-fill: var(--color-primary-content);
+}
+
+.zx-chat-log__jump-trigger.zx-a-color-secondary {
+    --chat-log-fill: var(--color-secondary);
+    --chat-log-on-fill: var(--color-secondary-content);
+}
+
+.zx-chat-log__jump-trigger.zx-a-color-accent {
+    --chat-log-fill: var(--color-accent);
+    --chat-log-on-fill: var(--color-accent-content);
+}
+
+.zx-chat-log__jump-trigger.zx-a-color-neutral {
+    --chat-log-fill: var(--color-neutral);
+    --chat-log-on-fill: var(--color-neutral-content);
+}
+
+.zx-chat-log__jump-trigger.zx-a-color-info {
+    --chat-log-fill: var(--color-info);
+    --chat-log-on-fill: var(--color-info-content);
+}
+
+.zx-chat-log__jump-trigger.zx-a-color-success {
+    --chat-log-fill: var(--color-success);
+    --chat-log-on-fill: var(--color-success-content);
+}
+
+.zx-chat-log__jump-trigger.zx-a-color-warning {
+    --chat-log-fill: var(--color-warning);
+    --chat-log-on-fill: var(--color-warning-content);
+}
+
+.zx-chat-log__jump-trigger.zx-a-color-error {
+    --chat-log-fill: var(--color-error);
+    --chat-log-on-fill: var(--color-error-content);
+}
+
+.zx-chat-log__content.zx-a-size-xs {
+    row-gap: var(--space-2xs);
+}
+
+.zx-chat-log__jump-trigger.zx-a-size-xs {
+    font-size: var(--text-xs);
+}
+
+.zx-chat-log__content.zx-a-size-sm {
+    row-gap: var(--space-2xs);
+}
+
+.zx-chat-log__jump-trigger.zx-a-size-sm {
+    font-size: var(--text-xs);
+}
+
+.zx-chat-log__content.zx-a-size-lg {
+    row-gap: var(--space-sm);
+}
+
+.zx-chat-log__jump-trigger.zx-a-size-lg {
+    font-size: var(--text-sm);
+}
+
+.zx-chat-log__content.zx-a-size-xl {
+    row-gap: var(--space-md);
+}
+
+.zx-chat-log__jump-trigger.zx-a-size-xl {
+    font-size: var(--text-sm);
+}

package/dist/lynx/components/dialog.css

@@ -16,6 +16,9 @@
     transition: background var(--duration-normal) var(--ease-standard);
     padding-left: calc(var(--size-field) * 4);
     padding-right: calc(var(--size-field) * 4);
+    width: max-content;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
 }
 
 .zx-dialog__trigger.zx-f-disabled {
@@ -24,8 +27,9 @@
 }
 
 .zx-dialog__trigger.zx-f-focus-visible {
-    outline: 2px solid var(--color-base-content);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
 }
 
 .zx-dialog__trigger.zx-f-pressed {
@@ -123,8 +127,9 @@
 }
 
 .zx-dialog__close.zx-f-focus-visible {
-    outline: 2px solid var(--color-base-content);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
 }
 
 .zx-dialog__close.zx-f-pressed {
@@ -158,8 +163,9 @@
 }
 
 .zx-dialog__cancel.zx-f-focus-visible {
-    outline: 2px solid var(--color-base-content);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
 }
 
 .zx-dialog__cancel.zx-f-pressed {

package/dist/lynx/components/divider.css

@@ -3,9 +3,11 @@
 }
 
 .zx-divider__root {
+    display: flex;
+    align-items: center;
     border: none;
-    background: var(--divider-ink);
     align-self: stretch;
+    background: var(--divider-ink);
 }
 
 .zx-divider__root.zx-o-horizontal {
@@ -22,8 +24,9 @@
 }
 
 .zx-divider__root.zx-o-vertical {
-    inline-size: var(--border);
+    flex-direction: column;
     min-block-size: 1em;
+    inline-size: var(--border);
 }
 
 .zx-divider__root.zx-o-vertical.zx-a-size-lg {
@@ -34,6 +37,13 @@
     inline-size: calc(var(--border) * 3);
 }
 
+.zx-divider__label {
+    flex: none;
+    font-size: var(--text-sm);
+    white-space: nowrap;
+    color: var(--color-base-content);
+}
+
 .zx-divider__root.zx-a-color-primary {
     --divider-ink: var(--color-primary);
 }