@sigx/zero-daisyui 0.6.0 → 0.8.0

package/dist/lynx/components/accordion.css

@@ -42,8 +42,14 @@
 }
 
 .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 {
+    background: var(--color-base-200);
 }
 
 .zx-accordion__panel {

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,8 +30,19 @@
     block-size: 1em;
     flex: none;
     border-radius: 9999px;
+    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;
 }
 
 .zx-button__root {
@@ -41,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;
@@ -49,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 {
@@ -56,13 +74,41 @@
 }
 
 .zx-button__root.zx-f-disabled {
-    opacity: var(--disabled-opacity);
+    opacity: 1;
     cursor: not-allowed;
+    border-color: transparent;
+    box-shadow: none;
+}
+
+.zx-root .zx-button__root.zx-f-disabled {
+    background: #18181b19;
+    color: #18181b80;
+}
+
+.zx-root.zx-theme-dark .zx-button__root.zx-f-disabled {
+    background: #ecf9ff19;
+    color: #ecf9ff80;
+}
+
+.zx-root.zx-theme-dim .zx-button__root.zx-f-disabled {
+    background: #b2ccd619;
+    color: #b2ccd680;
+}
+
+.zx-root.zx-theme-nord .zx-button__root.zx-f-disabled {
+    background: #2e344019;
+    color: #2e344080;
+}
+
+.zx-root.zx-theme-sunset .zx-button__root.zx-f-disabled {
+    background: #9fb9d019;
+    color: #9fb9d080;
 }
 
 .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 {
@@ -283,10 +329,24 @@
     color: var(--btn-on-accent);
 }
 
+.zx-button__spinner.zx-a-variant-solid {
+    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 {
+    border-color: transparent;
 }
 
 .zx-button__root.zx-a-variant-soft {
@@ -299,11 +359,23 @@
     color: var(--btn-ink);
 }
 
+.zx-button__root.zx-a-variant-ghost.zx-f-disabled {
+    background: transparent;
+}
+
 .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 {
+    border-color: transparent;
 }
 
 .zx-button__root.zx-a-variant-link {
@@ -314,47 +386,80 @@
     box-shadow: none;
 }
 
+.zx-button__root.zx-a-variant-link.zx-f-disabled {
+    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;
 }
@@ -362,6 +467,7 @@
 .zx-button__root.zx-m-circle {
     aspect-ratio: 1;
     border-radius: 9999px;
+    width: auto;
     padding-left: 0;
     padding-right: 0;
 }
@@ -371,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,15 @@
 }
 
 .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 {
+    background: var(--color-base-300);
+    transform: translateY(1px);
+    box-shadow: none;
 }
 
 .zx-dialog__popup {
@@ -89,6 +99,7 @@
     justify-content: flex-end;
     gap: var(--space-md);
     margin-top: var(--space-2xl);
+    flex-direction: row;
 }
 
 .zx-dialog__close {
@@ -116,8 +127,15 @@
 }
 
 .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 {
+    background: var(--color-base-300);
+    transform: translateY(1px);
+    box-shadow: none;
 }
 
 .zx-dialog__cancel {
@@ -145,8 +163,15 @@
 }
 
 .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 {
+    background: var(--color-base-300);
+    transform: translateY(1px);
+    box-shadow: none;
 }
 
 .zx-dialog__trigger.zx-a-color-primary {

package/dist/lynx/components/divider.css

@@ -3,35 +3,26 @@
 }
 
 .zx-divider__root {
+    display: flex;
+    align-items: center;
     border: none;
-    background: var(--divider-ink);
     align-self: stretch;
 }
 
 .zx-divider__root.zx-o-horizontal {
     inline-size: 100%;
-    block-size: var(--border);
-}
-
-.zx-divider__root.zx-o-horizontal.zx-a-size-lg {
-    block-size: calc(var(--border) * 2);
-}
-
-.zx-divider__root.zx-o-horizontal.zx-a-size-xl {
-    block-size: calc(var(--border) * 3);
 }
 
 .zx-divider__root.zx-o-vertical {
-    inline-size: var(--border);
+    flex-direction: column;
     min-block-size: 1em;
 }
 
-.zx-divider__root.zx-o-vertical.zx-a-size-lg {
-    inline-size: calc(var(--border) * 2);
-}
-
-.zx-divider__root.zx-o-vertical.zx-a-size-xl {
-    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 {