@sigx/zero-daisyui 0.5.0 → 0.7.0

package/dist/lynx/components/timeline.css

@@ -13,11 +13,15 @@
 
 .zx-timeline__root.zx-o-horizontal {
     flex-direction: row;
+    overflow-x: auto;
 }
 
 .zx-timeline__item {
-    display: grid;
+    display: flex;
     position: relative;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
 }
 
 .zx-timeline__item.zx-o-vertical {
@@ -42,30 +46,42 @@
     align-items: center;
     justify-content: center;
     font-size: 0;
+    width: calc(var(--size-selector) * 3);
+    height: calc(var(--size-selector) * 3);
+    flex-grow: 0;
+    flex-shrink: 0;
 }
 
 .zx-timeline__marker.zx-a-size-xs {
     inline-size: calc(var(--size-selector) * 2);
     block-size: calc(var(--size-selector) * 2);
     border: calc((var(--size-selector) * 2) / 6) solid var(--timeline-ring);
+    width: calc(var(--size-selector) * 2);
+    height: calc(var(--size-selector) * 2);
 }
 
 .zx-timeline__marker.zx-a-size-sm {
     inline-size: calc(var(--size-selector) * 2.5);
     block-size: calc(var(--size-selector) * 2.5);
     border: calc((var(--size-selector) * 2.5) / 6) solid var(--timeline-ring);
+    width: calc(var(--size-selector) * 2.5);
+    height: calc(var(--size-selector) * 2.5);
 }
 
 .zx-timeline__marker.zx-a-size-lg {
     inline-size: calc(var(--size-selector) * 3.5);
     block-size: calc(var(--size-selector) * 3.5);
     border: calc((var(--size-selector) * 3.5) / 6) solid var(--timeline-ring);
+    width: calc(var(--size-selector) * 3.5);
+    height: calc(var(--size-selector) * 3.5);
 }
 
 .zx-timeline__marker.zx-a-size-xl {
     inline-size: calc(var(--size-selector) * 4);
     block-size: calc(var(--size-selector) * 4);
     border: calc((var(--size-selector) * 4) / 6) solid var(--timeline-ring);
+    width: calc(var(--size-selector) * 4);
+    height: calc(var(--size-selector) * 4);
 }
 
 .zx-timeline__connector {
@@ -79,6 +95,31 @@
     inline-size: var(--border);
     min-block-size: var(--space-lg);
     block-size: 100%;
+    flex-grow: 0;
+    flex-shrink: 1;
+    flex-basis: 100%;
+    height: var(--space-lg);
+    background: transparent;
+    border-left-width: var(--border);
+    border-left-style: solid;
+    border-left-color: var(--color-base-300);
+    margin-left: calc((var(--size-selector) * 3) / 2 - var(--border) / 2);
+}
+
+.zx-timeline__connector.zx-o-vertical.zx-a-size-xs {
+    margin-left: calc((var(--size-selector) * 2) / 2 - var(--border) / 2);
+}
+
+.zx-timeline__connector.zx-o-vertical.zx-a-size-sm {
+    margin-left: calc((var(--size-selector) * 2.5) / 2 - var(--border) / 2);
+}
+
+.zx-timeline__connector.zx-o-vertical.zx-a-size-lg {
+    margin-left: calc((var(--size-selector) * 3.5) / 2 - var(--border) / 2);
+}
+
+.zx-timeline__connector.zx-o-vertical.zx-a-size-xl {
+    margin-left: calc((var(--size-selector) * 4) / 2 - var(--border) / 2);
 }
 
 .zx-timeline__connector.zx-o-horizontal {
@@ -88,6 +129,12 @@
     block-size: var(--border);
     min-inline-size: var(--space-lg);
     inline-size: 100%;
+    order: 1;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    height: var(--border);
+    min-width: var(--space-lg);
 }
 
 .zx-timeline__content {
@@ -100,6 +147,42 @@
     color: var(--color-base-content);
 }
 
+.zx-timeline__content.zx-o-vertical.zx-p-start {
+    grid-column: 1;
+    grid-row: 1;
+    justify-self: end;
+    text-align: end;
+    order: -1;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+}
+
+.zx-timeline__content.zx-o-vertical.zx-p-end {
+    grid-column: 3;
+    grid-row: 1;
+    justify-self: start;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+}
+
+.zx-timeline__content.zx-o-horizontal.zx-p-start {
+    grid-row: 1;
+    grid-column: 1;
+    align-self: end;
+    order: -1;
+    flex-basis: 100%;
+}
+
+.zx-timeline__content.zx-o-horizontal.zx-p-end {
+    grid-row: 3;
+    grid-column: 1;
+    align-self: start;
+    order: 2;
+    flex-basis: 100%;
+}
+
 .zx-timeline__marker.zx-a-color-primary {
     --timeline-accent: var(--color-primary);
     --timeline-ring: var(--color-primary-content);

package/dist/lynx/components/toast.css

@@ -12,52 +12,62 @@
     border: none;
     background: transparent;
     overflow: visible;
+    width: auto;
     list-style: none;
     flex-direction: column;
     gap: var(--space-sm);
     pointer-events: none;
+    display: flex;
 }
 
 .zx-toast__viewport.zx-p-top-start {
     top: 0;
     left: 0;
+    align-items: flex-start;
 }
 
 .zx-toast__viewport.zx-p-top {
     top: 0;
-    left: 50%;
-    transform: translateX(-50%);
+    left: 0;
+    transform: none;
+    right: 0;
+    align-items: center;
 }
 
 .zx-toast__viewport.zx-p-top-end {
     top: 0;
     right: 0;
+    align-items: flex-end;
 }
 
 .zx-toast__viewport.zx-p-bottom-start {
     bottom: 0;
     flex-direction: column-reverse;
     left: 0;
+    align-items: flex-start;
 }
 
 .zx-toast__viewport.zx-p-bottom {
     bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
+    left: 0;
+    transform: none;
     flex-direction: column-reverse;
+    right: 0;
+    align-items: center;
 }
 
 .zx-toast__viewport.zx-p-bottom-end {
     bottom: 0;
     flex-direction: column-reverse;
     right: 0;
+    align-items: flex-end;
 }
 
 .zx-toast__root {
     pointer-events: auto;
-    display: grid;
+    display: flex;
     grid-template-columns: 1fr auto auto;
-    align-items: center;
+    align-items: flex-start;
     column-gap: var(--space-md);
     padding: var(--space-md) var(--space-lg);
     background: var(--toast-bg);
@@ -68,6 +78,11 @@
     opacity: 0;
     transform: translateY(var(--toast-from));
     transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
+    flex-direction: column;
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 24rem;
 }
 
 .zx-toast__root.zx-s-open {
@@ -75,20 +90,36 @@
     transform: none;
 }
 
+.zx-toast__root.zx-p-top-start {
+    --toast-from: -8px;
+}
+
+.zx-toast__root.zx-p-top {
+    --toast-from: -8px;
+}
+
+.zx-toast__root.zx-p-top-end {
+    --toast-from: -8px;
+}
+
 .zx-toast__title {
     grid-column: 1;
     font-weight: var(--weight-semibold);
+    padding-right: 1.75em;
 }
 
 .zx-toast__description {
     grid-column: 1;
     font-size: var(--text-xs);
+    color: var(--toast-ink);
+    opacity: 0.75;
 }
 
 .zx-toast__action {
     grid-column: 2;
     grid-row: 1;
     appearance: none;
+    border: var(--border) solid var(--toast-ink);
     background: transparent;
     color: var(--toast-ink);
     border-radius: 9999px;
@@ -96,6 +127,7 @@
     font-size: var(--text-xs);
     font-weight: var(--weight-semibold);
     cursor: pointer;
+    margin-top: var(--space-xs);
 }
 
 .zx-toast__action.zx-f-disabled {
@@ -119,6 +151,9 @@
     padding: var(--space-2xs) var(--space-xs);
     font-size: var(--text-xs);
     cursor: pointer;
+    position: absolute;
+    top: var(--space-xs);
+    right: var(--space-xs);
 }
 
 .zx-toast__close.zx-f-disabled {

package/dist/lynx/components/toggle.css

@@ -38,6 +38,11 @@
     outline-offset: 2px;
 }
 
+.zx-toggle__root.zx-f-pressed {
+    transform: translateY(1px);
+    box-shadow: none;
+}
+
 .zx-toggle__root.zx-a-color-primary {
     --toggle-accent: var(--color-primary);
     --toggle-on-accent: var(--color-primary-content);

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

@@ -98,6 +98,10 @@
     transform: rotate(90deg);
 }
 
+.zx-tree-view__branch-indicator.zx-s-loading {
+    transform: rotate(45deg);
+}
+
 .zx-tree-view__branch-content {
     display: flex;
     flex-direction: column;