@sigx/zero-daisyui 0.7.0 → 0.9.0

package/dist/lynx/components/slider.css

@@ -79,7 +79,7 @@
 }
 
 .zx-slider__control.zx-f-focus-visible {
-    outline: 2px solid var(--slider-accent);
+    outline: none;
     outline-offset: 2px;
 }
 
@@ -242,8 +242,9 @@
 }
 
 .zx-slider__thumb.zx-f-focus-visible {
-    outline: 2px solid var(--slider-accent);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--slider-accent), 0 -1px var(--depth-shade) inset, 0 8px 0 -4px var(--depth-sheen) inset, 0 1px var(--depth-shade);
 }
 
 .zx-slider__thumb.zx-f-readonly {

package/dist/lynx/components/steps.css

@@ -77,6 +77,26 @@
     color: #9fb9d0a6;
 }
 
+.zx-root .zx-steps__item.zx-f-invalid {
+    color: #b34d5e;
+}
+
+.zx-root.zx-theme-dark .zx-steps__item.zx-f-invalid {
+    color: #ff95a3;
+}
+
+.zx-root.zx-theme-dim .zx-steps__item.zx-f-invalid {
+    color: #eab8ad;
+}
+
+.zx-root.zx-theme-nord .zx-steps__item.zx-f-invalid {
+    color: #92555e;
+}
+
+.zx-root.zx-theme-sunset .zx-steps__item.zx-f-invalid {
+    color: #e4bbc3;
+}
+
 .zx-steps__item.zx-f-disabled {
     opacity: var(--disabled-opacity);
     cursor: not-allowed;
@@ -158,6 +178,11 @@
     color: var(--color-base-content);
 }
 
+.zx-steps__indicator.zx-f-invalid {
+    background: var(--color-error);
+    color: var(--color-error-content);
+}
+
 .zx-steps__separator {
     position: absolute;
     pointer-events: none;
@@ -172,6 +197,10 @@
     background: var(--color-base-300);
 }
 
+.zx-steps__separator.zx-f-invalid {
+    background: var(--color-error);
+}
+
 .zx-steps__separator.zx-o-horizontal {
     inline-size: 100%;
     block-size: var(--border);
@@ -251,6 +280,80 @@
     color: #9fb9d0b3;
 }
 
+.zx-steps__content {
+    flex: 1 0 100%;
+    font-size: var(--text-md);
+    color: var(--color-base-content);
+}
+
+.zx-steps__prev-trigger {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    height: calc(var(--size-field) * 12);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+    color: var(--color-base-content);
+    background: var(--color-base-200);
+    border: var(--border) solid var(--color-base-300);
+    border-radius: var(--radius-field);
+    box-shadow: var(--shadow-xs);
+    cursor: pointer;
+    transition: background var(--duration-normal) var(--ease-standard);
+    flex: 0 0 auto;
+    align-self: flex-start;
+}
+
+.zx-steps__prev-trigger.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+}
+
+.zx-steps__prev-trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-steps__prev-trigger.zx-f-pressed {
+    transform: translateY(1px);
+}
+
+.zx-steps__next-trigger {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    height: calc(var(--size-field) * 12);
+    font-size: var(--text-sm);
+    font-weight: var(--weight-semibold);
+    color: var(--color-base-content);
+    background: var(--color-base-200);
+    border: var(--border) solid var(--color-base-300);
+    border-radius: var(--radius-field);
+    box-shadow: var(--shadow-xs);
+    cursor: pointer;
+    transition: background var(--duration-normal) var(--ease-standard);
+    flex: 0 0 auto;
+    align-self: flex-start;
+}
+
+.zx-steps__next-trigger.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+}
+
+.zx-steps__next-trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-steps__next-trigger.zx-f-pressed {
+    transform: translateY(1px);
+}
+
 .zx-steps__item.zx-a-color-primary {
     --steps-accent: var(--color-primary);
     --steps-accent-content: var(--color-primary-content);

package/dist/lynx/components/switch.css

@@ -92,8 +92,9 @@
 }
 
 .zx-switch__control.zx-f-focus-visible {
-    outline: 2px solid var(--switch-accent);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--switch-accent), 0 1px var(--depth-shade) inset;
 }
 
 .zx-switch__thumb {

package/dist/lynx/components/tabs.css

@@ -63,8 +63,9 @@
 }
 
 .zx-tabs__tab.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-tabs__tab.zx-f-pressed {
@@ -469,6 +470,11 @@
     box-shadow: var(--shadow-sm);
 }
 
+.zx-tabs__tab.zx-a-variant-box.zx-f-focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-base-200), 0 0 0 4px var(--color-base-content);
+}
+
 .zx-tabs__tab.zx-a-variant-box.zx-a-color-primary.zx-s-active {
     background: var(--color-primary);
     color: var(--color-primary-content);

package/dist/lynx/components/timeline.css

@@ -183,6 +183,38 @@
     flex-basis: 100%;
 }
 
+.zx-timeline__title {
+    display: block;
+    margin: 0;
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-tight);
+}
+
+.zx-timeline__description {
+    display: block;
+    margin: 0;
+}
+
+.zx-root .zx-timeline__description {
+    color: #18181bb3;
+}
+
+.zx-root.zx-theme-dark .zx-timeline__description {
+    color: #ecf9ffb3;
+}
+
+.zx-root.zx-theme-dim .zx-timeline__description {
+    color: #b2ccd6b3;
+}
+
+.zx-root.zx-theme-nord .zx-timeline__description {
+    color: #2e3440b3;
+}
+
+.zx-root.zx-theme-sunset .zx-timeline__description {
+    color: #9fb9d0b3;
+}
+
 .zx-timeline__marker.zx-a-color-primary {
     --timeline-accent: var(--color-primary);
     --timeline-ring: var(--color-primary-content);

package/dist/lynx/components/toast.css

@@ -2,6 +2,7 @@
     --toast-bg: var(--color-base-200);
     --toast-ink: var(--color-base-content);
     --toast-from: 8px;
+    --toast-mark: 1rem;
 }
 
 .zx-toast__viewport {
@@ -102,6 +103,68 @@
     --toast-from: -8px;
 }
 
+.zx-toast__indicator {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    inline-size: var(--toast-mark);
+    block-size: var(--toast-mark);
+    box-sizing: border-box;
+}
+
+.zx-toast__indicator.zx-s-loading {
+    border-radius: 50%;
+    border-block-start-color: var(--toast-ink);
+    animation: zero-daisyui-toast-spin 0.75s linear infinite;
+}
+
+.zx-toast__indicator.zx-s-complete {
+    clip-path: polygon(15.1% 41.3%, 1% 55%, 37.6% 92.8%, 99% 19.8%, 83.9% 7.2%, 36.6% 63.5%);
+}
+
+.zx-root .zx-toast__indicator.zx-s-complete {
+    background: #2a7858;
+}
+
+.zx-root.zx-theme-dark .zx-toast__indicator.zx-s-complete {
+    background: #92e5c2;
+}
+
+.zx-root.zx-theme-dim .zx-toast__indicator.zx-s-complete {
+    background: #8ee0c9;
+}
+
+.zx-root.zx-theme-nord .zx-toast__indicator.zx-s-complete {
+    background: #6b7d6a;
+}
+
+.zx-root.zx-theme-sunset .zx-toast__indicator.zx-s-complete {
+    background: #a6cebe;
+}
+
+.zx-toast__indicator.zx-s-error {
+    clip-path: polygon(20% 8%, 50% 38%, 80% 8%, 92% 20%, 62% 50%, 92% 80%, 80% 92%, 50% 62%, 20% 92%, 8% 80%, 38% 50%, 8% 20%);
+}
+
+.zx-root .zx-toast__indicator.zx-s-error {
+    background: #8f424e;
+}
+
+.zx-root.zx-theme-dark .zx-toast__indicator.zx-s-error {
+    background: #ffabb6;
+}
+
+.zx-root.zx-theme-dim .zx-toast__indicator.zx-s-error {
+    background: #e0bdb6;
+}
+
+.zx-root.zx-theme-nord .zx-toast__indicator.zx-s-error {
+    background: #7c4e57;
+}
+
+.zx-root.zx-theme-sunset .zx-toast__indicator.zx-s-error {
+    background: #d6bbc6;
+}
+
 .zx-toast__title {
     grid-column: 1;
     font-weight: var(--weight-semibold);
@@ -136,8 +199,9 @@
 }
 
 .zx-toast__action.zx-f-focus-visible {
-    outline: 2px solid var(--color-base-content);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--toast-bg), 0 0 0 4px var(--color-base-content);
 }
 
 .zx-toast__close {
@@ -161,8 +225,9 @@
 }
 
 .zx-toast__close.zx-f-focus-visible {
-    outline: 2px solid var(--color-base-content);
+    outline: none;
     outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--toast-bg), 0 0 0 4px var(--color-base-content);
 }
 
 .zx-toast__root.zx-a-color-primary {
@@ -232,3 +297,6 @@
 .zx-toast__description.zx-a-size-xl {
     font-size: var(--text-md);
 }
+@keyframes zero-daisyui-toast-spin {
+    to { transform: rotate(360deg); }
+}

package/dist/lynx/components/tree-view.css

@@ -2,6 +2,8 @@
     --tree-accent: var(--color-primary);
     --tree-text: var(--text-sm);
     --tree-on-accent: var(--color-primary-content);
+    --tree-check: var(--tree-accent);
+    --tree-on-check: var(--tree-on-accent);
 }
 
 .zx-tree-view__root {
@@ -102,6 +104,32 @@
     transform: rotate(45deg);
 }
 
+.zx-tree-view__node-checkbox {
+    display: inline-block;
+    position: relative;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    width: 1.25em;
+    height: 1.25em;
+    border: var(--border) solid var(--tree-check);
+    border-radius: var(--radius-selector);
+    box-shadow: 0 1px var(--depth-shade) inset;
+    cursor: pointer;
+    transition: background-color var(--duration-normal) var(--ease-standard);
+}
+
+.zx-tree-view__node-checkbox.zx-s-checked {
+    background-color: var(--tree-check);
+}
+
+.zx-tree-view__node-checkbox.zx-s-indeterminate {
+    background-color: var(--tree-check);
+}
+
+.zx-tree-view__node-checkbox.zx-f-disabled {
+    cursor: not-allowed;
+}
+
 .zx-tree-view__branch-content {
     display: flex;
     flex-direction: column;