@sigx/zero-daisyui 0.13.0 → 0.15.0

package/dist/lynx/components/toast.css

@@ -106,55 +106,109 @@
 .zx-toast__indicator {
     grid-column: 1;
     grid-row: 1 / span 2;
-    inline-size: var(--toast-mark);
-    block-size: var(--toast-mark);
+    width: var(--toast-mark);
+    height: var(--toast-mark);
     box-sizing: border-box;
+    position: absolute;
+    left: var(--space-lg);
+    top: var(--space-md);
 }
 
 .zx-toast__indicator.zx-s-loading {
     border-radius: 50%;
+    border: 0 solid transparent;
     border-block-start-color: var(--toast-ink);
     animation: zero-daisyui-toast-spin 0.75s linear infinite;
+    border-style: solid;
+    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-top-color: var(--toast-ink);
+}
+
+.zx-root .zx-toast__indicator.zx-s-loading {
+    border-right-color: #18181b40;
+    border-bottom-color: #18181b40;
+    border-left-color: #18181b40;
+}
+
+.zx-root.zx-theme-dark .zx-toast__indicator.zx-s-loading {
+    border-right-color: #ecf9ff40;
+    border-bottom-color: #ecf9ff40;
+    border-left-color: #ecf9ff40;
+}
+
+.zx-root.zx-theme-dim .zx-toast__indicator.zx-s-loading {
+    border-right-color: #b2ccd640;
+    border-bottom-color: #b2ccd640;
+    border-left-color: #b2ccd640;
+}
+
+.zx-root.zx-theme-nord .zx-toast__indicator.zx-s-loading {
+    border-right-color: #2e344040;
+    border-bottom-color: #2e344040;
+    border-left-color: #2e344040;
+}
+
+.zx-root.zx-theme-sunset .zx-toast__indicator.zx-s-loading {
+    border-right-color: #9fb9d040;
+    border-bottom-color: #9fb9d040;
+    border-left-color: #9fb9d040;
+}
+
+.zx-toast__indicator.zx-s-complete {
+    background: transparent;
+    box-sizing: border-box;
+    width: calc(var(--toast-mark) * 0.375);
+    height: calc(var(--toast-mark) * 0.75);
+    margin-left: calc(var(--toast-mark) * 0.3125);
+    border-style: solid;
+    border-top-width: 0;
+    border-left-width: 0;
+    border-right-width: calc(var(--border) * 2);
+    border-bottom-width: calc(var(--border) * 2);
+    transform: rotate(45deg);
 }
 
 .zx-root .zx-toast__indicator.zx-s-complete {
-    background: #2a7858;
+    border-color: #2a7858;
 }
 
 .zx-root.zx-theme-dark .zx-toast__indicator.zx-s-complete {
-    background: #92e5c2;
+    border-color: #92e5c2;
 }
 
 .zx-root.zx-theme-dim .zx-toast__indicator.zx-s-complete {
-    background: #8ee0c9;
+    border-color: #8ee0c9;
 }
 
 .zx-root.zx-theme-nord .zx-toast__indicator.zx-s-complete {
-    background: #6b7d6a;
+    border-color: #6b7d6a;
 }
 
 .zx-root.zx-theme-sunset .zx-toast__indicator.zx-s-complete {
-    background: #a6cebe;
+    border-color: #a6cebe;
 }
 
 .zx-root .zx-toast__indicator.zx-s-error {
-    background: #8f424e;
+    background: linear-gradient(45deg, transparent 41%, #8f424e 41%, #8f424e 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #8f424e 41%, #8f424e 59%, transparent 59%);
 }
 
 .zx-root.zx-theme-dark .zx-toast__indicator.zx-s-error {
-    background: #ffabb6;
+    background: linear-gradient(45deg, transparent 41%, #ffabb6 41%, #ffabb6 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #ffabb6 41%, #ffabb6 59%, transparent 59%);
 }
 
 .zx-root.zx-theme-dim .zx-toast__indicator.zx-s-error {
-    background: #e0bdb6;
+    background: linear-gradient(45deg, transparent 41%, #e0bdb6 41%, #e0bdb6 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #e0bdb6 41%, #e0bdb6 59%, transparent 59%);
 }
 
 .zx-root.zx-theme-nord .zx-toast__indicator.zx-s-error {
-    background: #7c4e57;
+    background: linear-gradient(45deg, transparent 41%, #7c4e57 41%, #7c4e57 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #7c4e57 41%, #7c4e57 59%, transparent 59%);
 }
 
 .zx-root.zx-theme-sunset .zx-toast__indicator.zx-s-error {
-    background: #d6bbc6;
+    background: linear-gradient(45deg, transparent 41%, #d6bbc6 41%, #d6bbc6 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #d6bbc6 41%, #d6bbc6 59%, transparent 59%);
 }
 
 .zx-toast__title {
@@ -227,51 +281,301 @@
     --toast-ink: var(--color-primary);
 }
 
+.zx-root .zx-toast__indicator.zx-a-color-primary.zx-s-loading {
+    border-right-color: #422ad540;
+    border-bottom-color: #422ad540;
+    border-left-color: #422ad540;
+}
+
+.zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-primary.zx-s-loading {
+    border-right-color: #605dff40;
+    border-bottom-color: #605dff40;
+    border-left-color: #605dff40;
+}
+
+.zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-primary.zx-s-loading {
+    border-right-color: #9fe88d40;
+    border-bottom-color: #9fe88d40;
+    border-left-color: #9fe88d40;
+}
+
+.zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-primary.zx-s-loading {
+    border-right-color: #5e81ac40;
+    border-bottom-color: #5e81ac40;
+    border-left-color: #5e81ac40;
+}
+
+.zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-primary.zx-s-loading {
+    border-right-color: #ff865b40;
+    border-bottom-color: #ff865b40;
+    border-left-color: #ff865b40;
+}
+
 .zx-toast__root.zx-a-color-secondary {
     --toast-bg: var(--color-secondary-soft);
     --toast-ink: var(--color-secondary);
 }
 
+.zx-root .zx-toast__indicator.zx-a-color-secondary.zx-s-loading {
+    border-right-color: #f4309840;
+    border-bottom-color: #f4309840;
+    border-left-color: #f4309840;
+}
+
+.zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-secondary.zx-s-loading {
+    border-right-color: #f4309840;
+    border-bottom-color: #f4309840;
+    border-left-color: #f4309840;
+}
+
+.zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-secondary.zx-s-loading {
+    border-right-color: #ff7d5d40;
+    border-bottom-color: #ff7d5d40;
+    border-left-color: #ff7d5d40;
+}
+
+.zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-secondary.zx-s-loading {
+    border-right-color: #81a1c140;
+    border-bottom-color: #81a1c140;
+    border-left-color: #81a1c140;
+}
+
+.zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-secondary.zx-s-loading {
+    border-right-color: #fd6f9c40;
+    border-bottom-color: #fd6f9c40;
+    border-left-color: #fd6f9c40;
+}
+
 .zx-toast__root.zx-a-color-accent {
     --toast-bg: var(--color-accent-soft);
     --toast-ink: var(--color-accent);
 }
 
+.zx-root .zx-toast__indicator.zx-a-color-accent.zx-s-loading {
+    border-right-color: #00d3bb40;
+    border-bottom-color: #00d3bb40;
+    border-left-color: #00d3bb40;
+}
+
+.zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-accent.zx-s-loading {
+    border-right-color: #00d3bb40;
+    border-bottom-color: #00d3bb40;
+    border-left-color: #00d3bb40;
+}
+
+.zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-accent.zx-s-loading {
+    border-right-color: #c792e940;
+    border-bottom-color: #c792e940;
+    border-left-color: #c792e940;
+}
+
+.zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-accent.zx-s-loading {
+    border-right-color: #88c0d040;
+    border-bottom-color: #88c0d040;
+    border-left-color: #88c0d040;
+}
+
+.zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-accent.zx-s-loading {
+    border-right-color: #b387fa40;
+    border-bottom-color: #b387fa40;
+    border-left-color: #b387fa40;
+}
+
 .zx-toast__root.zx-a-color-neutral {
     --toast-bg: var(--color-neutral-soft);
     --toast-ink: var(--color-neutral);
 }
 
+.zx-root .zx-toast__indicator.zx-a-color-neutral.zx-s-loading {
+    border-right-color: #09090b40;
+    border-bottom-color: #09090b40;
+    border-left-color: #09090b40;
+}
+
+.zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-neutral.zx-s-loading {
+    border-right-color: #09090b40;
+    border-bottom-color: #09090b40;
+    border-left-color: #09090b40;
+}
+
+.zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-neutral.zx-s-loading {
+    border-right-color: #1c212b40;
+    border-bottom-color: #1c212b40;
+    border-left-color: #1c212b40;
+}
+
+.zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-neutral.zx-s-loading {
+    border-right-color: #4c566a40;
+    border-bottom-color: #4c566a40;
+    border-left-color: #4c566a40;
+}
+
+.zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-neutral.zx-s-loading {
+    border-right-color: #1b262c40;
+    border-bottom-color: #1b262c40;
+    border-left-color: #1b262c40;
+}
+
 .zx-toast__root.zx-a-color-info {
     --toast-bg: var(--color-info-soft);
     --toast-ink: var(--color-info);
 }
 
+.zx-root .zx-toast__indicator.zx-a-color-info.zx-s-loading {
+    border-right-color: #00bafe40;
+    border-bottom-color: #00bafe40;
+    border-left-color: #00bafe40;
+}
+
+.zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-info.zx-s-loading {
+    border-right-color: #00bafe40;
+    border-bottom-color: #00bafe40;
+    border-left-color: #00bafe40;
+}
+
+.zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-info.zx-s-loading {
+    border-right-color: #28ebff40;
+    border-bottom-color: #28ebff40;
+    border-left-color: #28ebff40;
+}
+
+.zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-info.zx-s-loading {
+    border-right-color: #b48ead40;
+    border-bottom-color: #b48ead40;
+    border-left-color: #b48ead40;
+}
+
+.zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-info.zx-s-loading {
+    border-right-color: #89e0eb40;
+    border-bottom-color: #89e0eb40;
+    border-left-color: #89e0eb40;
+}
+
 .zx-toast__root.zx-a-color-success {
     --toast-bg: var(--color-success-soft);
     --toast-ink: var(--color-success);
 }
 
+.zx-root .zx-toast__indicator.zx-a-color-success.zx-s-loading {
+    border-right-color: #00d39040;
+    border-bottom-color: #00d39040;
+    border-left-color: #00d39040;
+}
+
+.zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-success.zx-s-loading {
+    border-right-color: #00d39040;
+    border-bottom-color: #00d39040;
+    border-left-color: #00d39040;
+}
+
+.zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-success.zx-s-loading {
+    border-right-color: #62efbd40;
+    border-bottom-color: #62efbd40;
+    border-left-color: #62efbd40;
+}
+
+.zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-success.zx-s-loading {
+    border-right-color: #a3be8d40;
+    border-bottom-color: #a3be8d40;
+    border-left-color: #a3be8d40;
+}
+
+.zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-success.zx-s-loading {
+    border-right-color: #addfad40;
+    border-bottom-color: #addfad40;
+    border-left-color: #addfad40;
+}
+
 .zx-toast__root.zx-a-color-warning {
     --toast-bg: var(--color-warning-soft);
     --toast-ink: var(--color-warning);
 }
 
+.zx-root .zx-toast__indicator.zx-a-color-warning.zx-s-loading {
+    border-right-color: #fcb70040;
+    border-bottom-color: #fcb70040;
+    border-left-color: #fcb70040;
+}
+
+.zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-warning.zx-s-loading {
+    border-right-color: #fcb70040;
+    border-bottom-color: #fcb70040;
+    border-left-color: #fcb70040;
+}
+
+.zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-warning.zx-s-loading {
+    border-right-color: #efd05740;
+    border-bottom-color: #efd05740;
+    border-left-color: #efd05740;
+}
+
+.zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-warning.zx-s-loading {
+    border-right-color: #ebcb8b40;
+    border-bottom-color: #ebcb8b40;
+    border-left-color: #ebcb8b40;
+}
+
+.zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-warning.zx-s-loading {
+    border-right-color: #f1c89240;
+    border-bottom-color: #f1c89240;
+    border-left-color: #f1c89240;
+}
+
 .zx-toast__root.zx-a-color-error {
     --toast-bg: var(--color-error-soft);
     --toast-ink: var(--color-error);
 }
 
+.zx-root .zx-toast__indicator.zx-a-color-error.zx-s-loading {
+    border-right-color: #ff627d40;
+    border-bottom-color: #ff627d40;
+    border-left-color: #ff627d40;
+}
+
+.zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-error.zx-s-loading {
+    border-right-color: #ff627d40;
+    border-bottom-color: #ff627d40;
+    border-left-color: #ff627d40;
+}
+
+.zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-error.zx-s-loading {
+    border-right-color: #ffae9b40;
+    border-bottom-color: #ffae9b40;
+    border-left-color: #ffae9b40;
+}
+
+.zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-error.zx-s-loading {
+    border-right-color: #bf616a40;
+    border-bottom-color: #bf616a40;
+    border-left-color: #bf616a40;
+}
+
+.zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-error.zx-s-loading {
+    border-right-color: #ffbbbd40;
+    border-bottom-color: #ffbbbd40;
+    border-left-color: #ffbbbd40;
+}
+
 .zx-toast__root.zx-a-size-xs {
     padding: var(--space-xs) var(--space-md);
     font-size: var(--text-xs);
 }
 
+.zx-toast__indicator.zx-a-size-xs {
+    left: var(--space-md);
+    top: var(--space-xs);
+}
+
 .zx-toast__root.zx-a-size-sm {
     padding: var(--space-sm) var(--space-md);
     font-size: var(--text-sm);
 }
 
+.zx-toast__indicator.zx-a-size-sm {
+    left: var(--space-md);
+    top: var(--space-sm);
+}
+
 .zx-toast__root.zx-a-size-lg {
     padding: var(--space-lg) var(--space-xl);
     font-size: var(--text-md);
@@ -281,6 +585,11 @@
     font-size: var(--text-sm);
 }
 
+.zx-toast__indicator.zx-a-size-lg {
+    left: var(--space-xl);
+    top: var(--space-lg);
+}
+
 .zx-toast__root.zx-a-size-xl {
     padding: var(--space-xl) var(--space-2xl);
     font-size: var(--text-lg);
@@ -289,6 +598,16 @@
 .zx-toast__description.zx-a-size-xl {
     font-size: var(--text-md);
 }
+
+.zx-toast__indicator.zx-a-size-xl {
+    left: var(--space-2xl);
+    top: var(--space-xl);
+}
+.zx-toast__title.zx-m-marked,
+.zx-toast__description.zx-m-marked,
+.zx-toast__action.zx-m-marked {
+    margin-left: calc(var(--toast-mark) + var(--space-md));
+}
 @keyframes zero-daisyui-toast-spin {
     to { transform: rotate(360deg); }
 }

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

@@ -43,6 +43,8 @@
 .zx-tree-view__item.zx-f-selected {
     background: var(--tree-accent);
     color: var(--tree-on-accent);
+    --tree-check: var(--tree-on-accent);
+    --tree-on-check: var(--tree-accent);
 }
 
 .zx-tree-view__item.zx-f-disabled {
@@ -51,8 +53,17 @@
 }
 
 .zx-tree-view__item.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);
+}
+
+.zx-tree-view__item.zx-f-pressed {
+    background: var(--color-base-300);
+}
+
+.zx-tree-view__item.zx-f-selected.zx-f-pressed {
+    background: var(--tree-accent);
 }
 
 .zx-tree-view__branch {
@@ -78,6 +89,8 @@
 .zx-tree-view__branch-trigger.zx-f-selected {
     background: var(--tree-accent);
     color: var(--tree-on-accent);
+    --tree-check: var(--tree-on-accent);
+    --tree-on-check: var(--tree-accent);
 }
 
 .zx-tree-view__branch-trigger.zx-f-disabled {
@@ -86,14 +99,25 @@
 }
 
 .zx-tree-view__branch-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);
+}
+
+.zx-tree-view__branch-trigger.zx-f-pressed {
+    background: var(--color-base-300);
+}
+
+.zx-tree-view__branch-trigger.zx-f-selected.zx-f-pressed {
+    background: var(--tree-accent);
 }
 
 .zx-tree-view__branch-indicator {
-    display: inline-block;
+    display: flex;
     opacity: 0.6;
     transition: transform var(--duration-fast) var(--ease-standard);
+    width: 1em;
+    text-align: center;
 }
 
 .zx-tree-view__branch-indicator.zx-s-open {
@@ -105,7 +129,7 @@
 }
 
 .zx-tree-view__node-checkbox {
-    display: inline-block;
+    display: flex;
     position: relative;
     flex-shrink: 0;
     box-sizing: border-box;
@@ -116,6 +140,9 @@
     box-shadow: 0 1px var(--depth-shade) inset;
     cursor: pointer;
     transition: background-color var(--duration-normal) var(--ease-standard);
+    align-items: center;
+    justify-content: center;
+    color: var(--tree-on-check);
 }
 
 .zx-tree-view__node-checkbox.zx-s-checked {