@sigx/zero-daisyui 0.15.0 → 0.16.0

package/dist/lynx/components/carousel.css

@@ -6,8 +6,9 @@
 
 .zx-carousel__root {
     position: relative;
-    display: grid;
+    display: flex;
     gap: var(--space-sm);
+    flex-direction: column;
 }
 
 .zx-carousel__viewport {
@@ -29,7 +30,7 @@
     position: absolute;
     width: var(--carousel-nav);
     height: var(--carousel-nav);
-    display: grid;
+    display: flex;
     place-items: center;
     font-size: var(--text-sm);
     line-height: var(--leading-none);
@@ -41,6 +42,8 @@
     z-index: 1;
     top: calc(50% - var(--carousel-nav) / 2);
     left: var(--space-sm);
+    align-items: center;
+    justify-content: center;
 }
 
 .zx-carousel__prev-trigger.zx-f-disabled {
@@ -49,8 +52,14 @@
 }
 
 .zx-carousel__prev-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-carousel__prev-trigger.zx-f-pressed {
+    background: var(--color-base-300);
+    transform: translateY(1px);
 }
 
 .zx-carousel__next-trigger {
@@ -58,7 +67,7 @@
     position: absolute;
     width: var(--carousel-nav);
     height: var(--carousel-nav);
-    display: grid;
+    display: flex;
     place-items: center;
     font-size: var(--text-sm);
     line-height: var(--leading-none);
@@ -70,6 +79,8 @@
     z-index: 1;
     top: calc(50% - var(--carousel-nav) / 2);
     right: var(--space-sm);
+    align-items: center;
+    justify-content: center;
 }
 
 .zx-carousel__next-trigger.zx-f-disabled {
@@ -78,29 +89,69 @@
 }
 
 .zx-carousel__next-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-carousel__next-trigger.zx-f-pressed {
+    background: var(--color-base-300);
+    transform: translateY(1px);
 }
 
 .zx-carousel__indicator-group {
     display: flex;
     gap: var(--space-xs);
     justify-content: center;
+    flex-direction: row;
+    align-items: center;
 }
 
 .zx-carousel__indicator {
     appearance: none;
     padding: 0;
-    display: grid;
+    display: flex;
     place-items: center;
     background: transparent;
     border: none;
     cursor: pointer;
+    width: var(--carousel-dot);
+    height: var(--carousel-dot);
+    flex-shrink: 0;
+    border-width: calc(var(--border) * 2);
+    border-style: solid;
+    border-radius: 9999px;
+}
+
+.zx-root .zx-carousel__indicator {
+    border-color: #18181bb3;
+}
+
+.zx-root.zx-theme-dark .zx-carousel__indicator {
+    border-color: #ecf9ffb3;
+}
+
+.zx-root.zx-theme-dim .zx-carousel__indicator {
+    border-color: #b2ccd6b3;
+}
+
+.zx-root.zx-theme-nord .zx-carousel__indicator {
+    border-color: #2e3440b3;
+}
+
+.zx-root.zx-theme-sunset .zx-carousel__indicator {
+    border-color: #9fb9d0b3;
+}
+
+.zx-carousel__indicator.zx-s-active {
+    background: var(--carousel-accent);
+    border-color: var(--carousel-accent);
 }
 
 .zx-carousel__indicator.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-root .zx-carousel__root.zx-a-color-primary {

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

@@ -12,22 +12,29 @@
     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);
+    padding: 0;
+    overflow: hidden;
 }
 
 .zx-chat-log__root.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-chat-log__content {
     flex: none;
-    display: grid;
+    display: flex;
     row-gap: var(--space-xs);
+    flex-direction: column;
+    padding-top: var(--space-sm);
+    padding-bottom: var(--space-sm);
+    padding-left: var(--space-md);
+    padding-right: var(--space-md);
 }
 
 .zx-chat-log__jump-trigger {
-    position: sticky;
+    position: relative;
     align-self: center;
     flex: none;
     height: calc(var(--size-field) * 8);
@@ -46,6 +53,9 @@
     line-height: var(--leading-none);
     cursor: pointer;
     transition: background var(--duration-fast) var(--ease-standard);
+    flex-direction: row;
+    padding-left: var(--space-md);
+    padding-right: var(--space-md);
 }
 
 .zx-chat-log__jump-trigger.zx-a-size-xs {
@@ -65,8 +75,29 @@
 }
 
 .zx-chat-log__jump-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-root .zx-chat-log__jump-trigger.zx-f-pressed {
+    background: #3823b9;
+}
+
+.zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-f-pressed {
+    background: #5250de;
+}
+
+.zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-f-pressed {
+    background: #8aca7a;
+}
+
+.zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-f-pressed {
+    background: #516f95;
+}
+
+.zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-f-pressed {
+    background: #de744e;
 }
 
 .zx-chat-log__jump-trigger.zx-f-pressed {
@@ -79,41 +110,201 @@
     --chat-log-on-fill: var(--color-primary-content);
 }
 
+.zx-root .zx-chat-log__jump-trigger.zx-a-color-primary.zx-f-pressed {
+    background: #3823b9;
+}
+
+.zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-primary.zx-f-pressed {
+    background: #5250de;
+}
+
+.zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-primary.zx-f-pressed {
+    background: #8aca7a;
+}
+
+.zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-primary.zx-f-pressed {
+    background: #516f95;
+}
+
+.zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-primary.zx-f-pressed {
+    background: #de744e;
+}
+
 .zx-chat-log__jump-trigger.zx-a-color-secondary {
     --chat-log-fill: var(--color-secondary);
     --chat-log-on-fill: var(--color-secondary-content);
 }
 
+.zx-root .zx-chat-log__jump-trigger.zx-a-color-secondary.zx-f-pressed {
+    background: #d42884;
+}
+
+.zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-secondary.zx-f-pressed {
+    background: #d42884;
+}
+
+.zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-secondary.zx-f-pressed {
+    background: #de6c50;
+}
+
+.zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-secondary.zx-f-pressed {
+    background: #6f8ba7;
+}
+
+.zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-secondary.zx-f-pressed {
+    background: #dc6087;
+}
+
 .zx-chat-log__jump-trigger.zx-a-color-accent {
     --chat-log-fill: var(--color-accent);
     --chat-log-on-fill: var(--color-accent-content);
 }
 
+.zx-root .zx-chat-log__jump-trigger.zx-a-color-accent.zx-f-pressed {
+    background: #00b7a2;
+}
+
+.zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-accent.zx-f-pressed {
+    background: #00b7a2;
+}
+
+.zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-accent.zx-f-pressed {
+    background: #ad7ecb;
+}
+
+.zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-accent.zx-f-pressed {
+    background: #75a7b5;
+}
+
+.zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-accent.zx-f-pressed {
+    background: #9b75d9;
+}
+
 .zx-chat-log__jump-trigger.zx-a-color-neutral {
     --chat-log-fill: var(--color-neutral);
     --chat-log-on-fill: var(--color-neutral-content);
 }
 
+.zx-root .zx-chat-log__jump-trigger.zx-a-color-neutral.zx-f-pressed {
+    background: #070708;
+}
+
+.zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-neutral.zx-f-pressed {
+    background: #070708;
+}
+
+.zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-neutral.zx-f-pressed {
+    background: #171b24;
+}
+
+.zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-neutral.zx-f-pressed {
+    background: #414a5b;
+}
+
+.zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-neutral.zx-f-pressed {
+    background: #162025;
+}
+
 .zx-chat-log__jump-trigger.zx-a-color-info {
     --chat-log-fill: var(--color-info);
     --chat-log-on-fill: var(--color-info-content);
 }
 
+.zx-root .zx-chat-log__jump-trigger.zx-a-color-info.zx-f-pressed {
+    background: #00a1dd;
+}
+
+.zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-info.zx-f-pressed {
+    background: #00a1dd;
+}
+
+.zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-info.zx-f-pressed {
+    background: #21ccde;
+}
+
+.zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-info.zx-f-pressed {
+    background: #9c7b96;
+}
+
+.zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-info.zx-f-pressed {
+    background: #76c3cc;
+}
+
 .zx-chat-log__jump-trigger.zx-a-color-success {
     --chat-log-fill: var(--color-success);
     --chat-log-on-fill: var(--color-success-content);
 }
 
+.zx-root .zx-chat-log__jump-trigger.zx-a-color-success.zx-f-pressed {
+    background: #00b77d;
+}
+
+.zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-success.zx-f-pressed {
+    background: #00b77d;
+}
+
+.zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-success.zx-f-pressed {
+    background: #54d0a4;
+}
+
+.zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-success.zx-f-pressed {
+    background: #8da57a;
+}
+
+.zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-success.zx-f-pressed {
+    background: #96c296;
+}
+
 .zx-chat-log__jump-trigger.zx-a-color-warning {
     --chat-log-fill: var(--color-warning);
     --chat-log-on-fill: var(--color-warning-content);
 }
 
+.zx-root .zx-chat-log__jump-trigger.zx-a-color-warning.zx-f-pressed {
+    background: #db9f00;
+}
+
+.zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-warning.zx-f-pressed {
+    background: #db9f00;
+}
+
+.zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-warning.zx-f-pressed {
+    background: #d0b54b;
+}
+
+.zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-warning.zx-f-pressed {
+    background: #ccb078;
+}
+
+.zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-warning.zx-f-pressed {
+    background: #d2ae7e;
+}
+
 .zx-chat-log__jump-trigger.zx-a-color-error {
     --chat-log-fill: var(--color-error);
     --chat-log-on-fill: var(--color-error-content);
 }
 
+.zx-root .zx-chat-log__jump-trigger.zx-a-color-error.zx-f-pressed {
+    background: #de546c;
+}
+
+.zx-root.zx-theme-dark .zx-chat-log__jump-trigger.zx-a-color-error.zx-f-pressed {
+    background: #de546c;
+}
+
+.zx-root.zx-theme-dim .zx-chat-log__jump-trigger.zx-a-color-error.zx-f-pressed {
+    background: #de9786;
+}
+
+.zx-root.zx-theme-nord .zx-chat-log__jump-trigger.zx-a-color-error.zx-f-pressed {
+    background: #a6535b;
+}
+
+.zx-root.zx-theme-sunset .zx-chat-log__jump-trigger.zx-a-color-error.zx-f-pressed {
+    background: #dea2a4;
+}
+
 .zx-chat-log__content.zx-a-size-xs {
     row-gap: var(--space-2xs);
 }

package/dist/lynx/components/chat.css

@@ -4,9 +4,11 @@
 }
 
 .zx-chat__root {
-    display: grid;
+    display: flex;
     column-gap: var(--space-sm);
     row-gap: var(--space-2xs);
+    flex-direction: column;
+    align-items: flex-start;
     padding-top: var(--space-2xs);
     padding-bottom: var(--space-2xs);
 }
@@ -19,6 +21,7 @@
 .zx-chat__root.zx-p-end {
     grid-template-columns: minmax(0, 1fr) auto;
     justify-items: end;
+    align-items: flex-end;
 }
 
 .zx-chat__avatar {
@@ -144,3 +147,9 @@
     font-size: var(--text-lg);
     padding: var(--space-md) var(--space-xl);
 }
+.zx-chat__root.zx-p-start .zx-chat__bubble {
+    border-bottom-left-radius: 0;
+}
+.zx-chat__root.zx-p-end .zx-chat__bubble {
+    border-bottom-right-radius: 0;
+}

package/dist/lynx/components/combobox.css

@@ -5,13 +5,16 @@
 .zx-combobox__root {
     display: flex;
     flex-direction: column;
+    width: 320px;
+    max-width: 100%;
+    min-width: 48px;
 }
 
 .zx-combobox__control {
     display: flex;
     align-items: stretch;
     flex-wrap: wrap;
-    min-width: 208px;
+    min-width: 48px;
     box-sizing: border-box;
     height: auto;
     background: var(--color-base-100);
@@ -20,6 +23,7 @@
     box-shadow: var(--shadow-xs);
     min-height: calc(var(--size-field) * 12);
     transition: border-color var(--duration-fast) var(--ease-standard);
+    width: 100%;
 }
 
 .zx-combobox__control.zx-s-open {
@@ -35,8 +39,9 @@
 }
 
 .zx-combobox__control.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-combobox__input {
@@ -48,13 +53,33 @@
     border: none;
     outline: none;
     background: transparent;
-    color: inherit;
+    color: var(--color-base-content);
     font: inherit;
     font-size: var(--text-sm);
     font-weight: var(--weight-medium);
     padding: var(--space-sm) var(--space-lg);
 }
 
+.zx-root .zx-combobox__input {
+    -x-placeholder-color: #18181b99;
+}
+
+.zx-root.zx-theme-dark .zx-combobox__input {
+    -x-placeholder-color: #ecf9ff99;
+}
+
+.zx-root.zx-theme-dim .zx-combobox__input {
+    -x-placeholder-color: #b2ccd699;
+}
+
+.zx-root.zx-theme-nord .zx-combobox__input {
+    -x-placeholder-color: #2e344099;
+}
+
+.zx-root.zx-theme-sunset .zx-combobox__input {
+    -x-placeholder-color: #9fb9d099;
+}
+
 .zx-combobox__input.zx-f-disabled {
     cursor: not-allowed;
 }
@@ -75,8 +100,9 @@
 }
 
 .zx-combobox__tag.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-combobox__tag-label {
@@ -87,7 +113,7 @@
     appearance: none;
     border: none;
     background: transparent;
-    color: inherit;
+    color: var(--color-base-content);
     font: inherit;
     border-radius: var(--radius-selector);
     padding: 0 var(--space-2xs);
@@ -102,8 +128,9 @@
 }
 
 .zx-combobox__tag-remove.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-root .zx-combobox__tag-remove.zx-f-pressed {
@@ -130,11 +157,14 @@
     appearance: none;
     border: none;
     background: transparent;
-    color: inherit;
+    color: var(--color-base-content);
     opacity: 0.6;
     padding: 0 var(--space-lg);
     cursor: pointer;
     transition: transform var(--duration-normal) var(--ease-standard);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .zx-combobox__trigger.zx-s-open {
@@ -145,17 +175,24 @@
     cursor: not-allowed;
 }
 
+.zx-combobox__trigger.zx-f-pressed {
+    opacity: 1;
+}
+
 .zx-combobox__clear-trigger {
     appearance: none;
     border: none;
     background: transparent;
-    color: inherit;
+    color: var(--color-base-content);
     font: inherit;
     opacity: 0.6;
     padding: 0 var(--space-xs);
     line-height: var(--leading-none);
     cursor: pointer;
     transition: opacity var(--duration-fast) var(--ease-standard);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .zx-combobox__popup {
@@ -169,6 +206,7 @@
     box-shadow: var(--shadow-lg);
     padding: var(--space-md);
     min-width: 208px;
+    --combobox-accent: var(--color-primary);
 }
 
 .zx-combobox__popup.zx-s-open {
@@ -216,6 +254,10 @@
     cursor: not-allowed;
 }
 
+.zx-combobox__item.zx-f-pressed {
+    background: var(--color-base-200);
+}
+
 .zx-combobox__item-indicator {
     font-size: var(--text-xs);
 }
@@ -244,34 +286,66 @@
     --combobox-accent: var(--color-primary);
 }
 
+.zx-combobox__popup.zx-a-color-primary {
+    --combobox-accent: var(--color-primary);
+}
+
 .zx-combobox__root.zx-a-color-secondary {
     --combobox-accent: var(--color-secondary);
 }
 
+.zx-combobox__popup.zx-a-color-secondary {
+    --combobox-accent: var(--color-secondary);
+}
+
 .zx-combobox__root.zx-a-color-accent {
     --combobox-accent: var(--color-accent);
 }
 
+.zx-combobox__popup.zx-a-color-accent {
+    --combobox-accent: var(--color-accent);
+}
+
 .zx-combobox__root.zx-a-color-neutral {
     --combobox-accent: var(--color-neutral);
 }
 
+.zx-combobox__popup.zx-a-color-neutral {
+    --combobox-accent: var(--color-neutral);
+}
+
 .zx-combobox__root.zx-a-color-info {
     --combobox-accent: var(--color-info);
 }
 
+.zx-combobox__popup.zx-a-color-info {
+    --combobox-accent: var(--color-info);
+}
+
 .zx-combobox__root.zx-a-color-success {
     --combobox-accent: var(--color-success);
 }
 
+.zx-combobox__popup.zx-a-color-success {
+    --combobox-accent: var(--color-success);
+}
+
 .zx-combobox__root.zx-a-color-warning {
     --combobox-accent: var(--color-warning);
 }
 
+.zx-combobox__popup.zx-a-color-warning {
+    --combobox-accent: var(--color-warning);
+}
+
 .zx-combobox__root.zx-a-color-error {
     --combobox-accent: var(--color-error);
 }
 
+.zx-combobox__popup.zx-a-color-error {
+    --combobox-accent: var(--color-error);
+}
+
 .zx-combobox__control.zx-a-size-xs {
     min-height: calc(var(--size-field) * 8);
 }

package/dist/lynx/components/divider.css

@@ -113,6 +113,7 @@
 }
 .zx-divider__root.zx-m-segment {
     flex: 1 1 0;
+    align-self: center;
 }
 .zx-divider__root.zx-m-segment.zx-o-horizontal {
     min-width: 0;