@sigx/zero-daisyui 0.7.0 → 0.8.0

package/dist/lynx/components/menu.css

@@ -174,6 +174,13 @@
     opacity: 0.6;
 }
 
+.zx-menu__shortcut {
+    font-size: var(--text-xs);
+    opacity: 0.75;
+    margin-left: auto;
+    padding-left: var(--space-lg);
+}
+
 .zx-menu__separator {
     height: var(--border);
     margin: var(--space-sm) var(--space-md);

package/dist/lynx/components/menubar.css

@@ -0,0 +1,199 @@
+.zx-menubar__root {
+    --menubar-surface: var(--color-base-200);
+}
+
+.zx-menubar__root {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-xs);
+    width: max-content;
+    max-width: 100%;
+    flex-wrap: wrap;
+    background: var(--menubar-surface);
+    border-radius: var(--radius-box);
+}
+
+.zx-menubar__root.zx-o-vertical {
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.zx-root .zx-menubar__root.zx-a-color-primary {
+    --menubar-surface: #dee2f7;
+}
+
+.zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-primary {
+    --menubar-surface: #1a283b;
+}
+
+.zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-primary {
+    --menubar-surface: #2d3c4c;
+}
+
+.zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-primary {
+    --menubar-surface: #d5dce8;
+}
+
+.zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-primary {
+    --menubar-surface: #1b2537;
+}
+
+.zx-root .zx-menubar__root.zx-a-color-secondary {
+    --menubar-surface: #fce4ec;
+}
+
+.zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-secondary {
+    --menubar-surface: #20293e;
+}
+
+.zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-secondary {
+    --menubar-surface: #33354a;
+}
+
+.zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-secondary {
+    --menubar-surface: #d9e0eb;
+}
+
+.zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-secondary {
+    --menubar-surface: #182537;
+}
+
+.zx-root .zx-menubar__root.zx-a-color-accent {
+    --menubar-surface: #e5f4f1;
+}
+
+.zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-accent {
+    --menubar-surface: #212f3b;
+}
+
+.zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-accent {
+    --menubar-surface: #303648;
+}
+
+.zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-accent {
+    --menubar-surface: #dce3ee;
+}
+
+.zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-accent {
+    --menubar-surface: #162636;
+}
+
+.zx-root .zx-menubar__root.zx-a-color-neutral {
+    --menubar-surface: #d7d7d7;
+}
+
+.zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-neutral {
+    --menubar-surface: #171b21;
+}
+
+.zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-neutral {
+    --menubar-surface: #232832;
+}
+
+.zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-neutral {
+    --menubar-surface: #d1d6df;
+}
+
+.zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-neutral {
+    --menubar-surface: #0f1920;
+}
+
+.zx-root .zx-menubar__root.zx-a-color-info {
+    --menubar-surface: #e3f1fa;
+}
+
+.zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-info {
+    --menubar-surface: #212e3b;
+}
+
+.zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-info {
+    --menubar-surface: #2f3b4d;
+}
+
+.zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-info {
+    --menubar-surface: #dbdfeb;
+}
+
+.zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-info {
+    --menubar-surface: #1b2a34;
+}
+
+.zx-root .zx-menubar__root.zx-a-color-success {
+    --menubar-surface: #e4f4eb;
+}
+
+.zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-success {
+    --menubar-surface: #1e2f3c;
+}
+
+.zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-success {
+    --menubar-surface: #2e3c4c;
+}
+
+.zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-success {
+    --menubar-surface: #d9e4ee;
+}
+
+.zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-success {
+    --menubar-surface: #1a2b33;
+}
+
+.zx-root .zx-menubar__root.zx-a-color-warning {
+    --menubar-surface: #f9f1e3;
+}
+
+.zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-warning {
+    --menubar-surface: #1d323c;
+}
+
+.zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-warning {
+    --menubar-surface: #2b3d4b;
+}
+
+.zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-warning {
+    --menubar-surface: #dbe8f2;
+}
+
+.zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-warning {
+    --menubar-surface: #192c32;
+}
+
+.zx-root .zx-menubar__root.zx-a-color-error {
+    --menubar-surface: #fce7e9;
+}
+
+.zx-root.zx-theme-dark .zx-menubar__root.zx-a-color-error {
+    --menubar-surface: #232b3d;
+}
+
+.zx-root.zx-theme-dim .zx-menubar__root.zx-a-color-error {
+    --menubar-surface: #363849;
+}
+
+.zx-root.zx-theme-nord .zx-menubar__root.zx-a-color-error {
+    --menubar-surface: #d7dbec;
+}
+
+.zx-root.zx-theme-sunset .zx-menubar__root.zx-a-color-error {
+    --menubar-surface: #202936;
+}
+
+.zx-menubar__root.zx-a-size-xs {
+    gap: 0;
+    padding: 0;
+}
+
+.zx-menubar__root.zx-a-size-sm {
+    padding: var(--space-2xs);
+}
+
+.zx-menubar__root.zx-a-size-lg {
+    gap: var(--space-sm);
+    padding: var(--space-sm);
+}
+
+.zx-menubar__root.zx-a-size-xl {
+    gap: var(--space-md);
+    padding: var(--space-sm);
+}

package/dist/lynx/components/pagination.css

@@ -28,6 +28,7 @@
     font-weight: var(--weight-semibold);
     font-variant-numeric: tabular-nums;
     appearance: none;
+    text-decoration: none;
     cursor: pointer;
     transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
     padding-left: var(--space-2xs);
@@ -123,6 +124,58 @@
     color: #9fb9d0a6;
 }
 
+.zx-pagination__first-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: calc(var(--size-field) * 10);
+    block-size: calc(var(--size-field) * 10);
+    background: var(--color-base-200);
+    color: var(--color-base-content);
+    border: none;
+    border-radius: var(--radius-field);
+    font-size: calc(var(--pg-font) * 1.2);
+    line-height: var(--leading-none);
+    appearance: none;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background var(--duration-fast) var(--ease-standard);
+}
+
+.zx-pagination__first-trigger.zx-a-size-xs {
+    min-inline-size: calc(var(--size-field) * 7);
+    block-size: calc(var(--size-field) * 7);
+}
+
+.zx-pagination__first-trigger.zx-a-size-sm {
+    min-inline-size: calc(var(--size-field) * 9);
+    block-size: calc(var(--size-field) * 9);
+}
+
+.zx-pagination__first-trigger.zx-a-size-lg {
+    min-inline-size: calc(var(--size-field) * 12);
+    block-size: calc(var(--size-field) * 12);
+}
+
+.zx-pagination__first-trigger.zx-a-size-xl {
+    min-inline-size: calc(var(--size-field) * 14);
+    block-size: calc(var(--size-field) * 14);
+}
+
+.zx-pagination__first-trigger.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+}
+
+.zx-pagination__first-trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-pagination__first-trigger.zx-f-pressed {
+    transform: translateY(1px);
+}
+
 .zx-pagination__prev-trigger {
     display: flex;
     align-items: center;
@@ -136,6 +189,7 @@
     font-size: calc(var(--pg-font) * 1.2);
     line-height: var(--leading-none);
     appearance: none;
+    text-decoration: none;
     cursor: pointer;
     transition: background var(--duration-fast) var(--ease-standard);
 }
@@ -187,6 +241,7 @@
     font-size: calc(var(--pg-font) * 1.2);
     line-height: var(--leading-none);
     appearance: none;
+    text-decoration: none;
     cursor: pointer;
     transition: background var(--duration-fast) var(--ease-standard);
 }
@@ -225,6 +280,58 @@
     transform: translateY(1px);
 }
 
+.zx-pagination__last-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: calc(var(--size-field) * 10);
+    block-size: calc(var(--size-field) * 10);
+    background: var(--color-base-200);
+    color: var(--color-base-content);
+    border: none;
+    border-radius: var(--radius-field);
+    font-size: calc(var(--pg-font) * 1.2);
+    line-height: var(--leading-none);
+    appearance: none;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background var(--duration-fast) var(--ease-standard);
+}
+
+.zx-pagination__last-trigger.zx-a-size-xs {
+    min-inline-size: calc(var(--size-field) * 7);
+    block-size: calc(var(--size-field) * 7);
+}
+
+.zx-pagination__last-trigger.zx-a-size-sm {
+    min-inline-size: calc(var(--size-field) * 9);
+    block-size: calc(var(--size-field) * 9);
+}
+
+.zx-pagination__last-trigger.zx-a-size-lg {
+    min-inline-size: calc(var(--size-field) * 12);
+    block-size: calc(var(--size-field) * 12);
+}
+
+.zx-pagination__last-trigger.zx-a-size-xl {
+    min-inline-size: calc(var(--size-field) * 14);
+    block-size: calc(var(--size-field) * 14);
+}
+
+.zx-pagination__last-trigger.zx-f-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+}
+
+.zx-pagination__last-trigger.zx-f-focus-visible {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+}
+
+.zx-pagination__last-trigger.zx-f-pressed {
+    transform: translateY(1px);
+}
+
 .zx-pagination__root.zx-a-color-primary {
     --pg-accent: var(--color-primary);
     --pg-accent-content: var(--color-primary-content);

package/dist/lynx/components/popover.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-popover__trigger.zx-f-disabled {
@@ -28,8 +31,9 @@
 }
 
 .zx-popover__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-popover__trigger.zx-f-pressed {
@@ -112,8 +116,9 @@
 }
 
 .zx-popover__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-popover__close.zx-f-pressed {

package/dist/lynx/components/select.css

@@ -6,7 +6,9 @@
     display: flex;
     flex-direction: column;
     position: relative;
+    width: 20rem;
     max-width: 100%;
+    min-width: 3rem;
 }
 
 .zx-select__trigger {
@@ -29,7 +31,7 @@
     min-width: 3rem;
     padding-left: calc(var(--size-field) * 4);
     padding-right: calc(var(--size-field) * 4);
-    width: 20rem;
+    width: 100%;
     max-width: 100%;
 }
 
@@ -51,8 +53,9 @@
 }
 
 .zx-select__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-select__trigger.zx-f-pressed {
@@ -131,8 +134,9 @@
 }
 
 .zx-select__clear-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-select__popup {
@@ -146,6 +150,7 @@
     box-shadow: var(--shadow-lg);
     padding: var(--space-md);
     min-width: 13rem;
+    --select-accent: var(--color-primary);
 }
 
 .zx-select__popup.zx-s-open {
@@ -213,34 +218,66 @@
     --select-accent: var(--color-primary);
 }
 
+.zx-select__popup.zx-a-color-primary {
+    --select-accent: var(--color-primary);
+}
+
 .zx-select__root.zx-a-color-secondary {
     --select-accent: var(--color-secondary);
 }
 
+.zx-select__popup.zx-a-color-secondary {
+    --select-accent: var(--color-secondary);
+}
+
 .zx-select__root.zx-a-color-accent {
     --select-accent: var(--color-accent);
 }
 
+.zx-select__popup.zx-a-color-accent {
+    --select-accent: var(--color-accent);
+}
+
 .zx-select__root.zx-a-color-neutral {
     --select-accent: var(--color-neutral);
 }
 
+.zx-select__popup.zx-a-color-neutral {
+    --select-accent: var(--color-neutral);
+}
+
 .zx-select__root.zx-a-color-info {
     --select-accent: var(--color-info);
 }
 
+.zx-select__popup.zx-a-color-info {
+    --select-accent: var(--color-info);
+}
+
 .zx-select__root.zx-a-color-success {
     --select-accent: var(--color-success);
 }
 
+.zx-select__popup.zx-a-color-success {
+    --select-accent: var(--color-success);
+}
+
 .zx-select__root.zx-a-color-warning {
     --select-accent: var(--color-warning);
 }
 
+.zx-select__popup.zx-a-color-warning {
+    --select-accent: var(--color-warning);
+}
+
 .zx-select__root.zx-a-color-error {
     --select-accent: var(--color-error);
 }
 
+.zx-select__popup.zx-a-color-error {
+    --select-accent: var(--color-error);
+}
+
 .zx-select__trigger.zx-a-size-xs {
     height: calc(var(--size-field) * 8);
     font-size: var(--text-xs);

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);