@zeyos/zx 2.2.1 → 2.3.0

package/dist/zx.css

@@ -18,6 +18,11 @@
   --zx-green-500: #009966;
   --zx-green-600: #007a55;
   --zx-green-700: #006045;
+  --zx-accent-300: var(--zx-green-300);
+  --zx-accent-400: var(--zx-green-400);
+  --zx-accent-500: var(--zx-green-500);
+  --zx-accent-600: var(--zx-green-600);
+  --zx-accent-700: var(--zx-green-700);
   --zx-red-400: #ff6467;
   --zx-red-500: #e7000b;
   --zx-red-600: #c10007;
@@ -75,6 +80,50 @@
   --zx-ease: cubic-bezier(.2, .6, .3, 1);
 }
 
+/* styles/tokens/themes.css */
+[data-zx-preset=zx] {
+  --zx-accent-300: #5ee9b5;
+  --zx-accent-400: #21cc75;
+  --zx-accent-500: #009966;
+  --zx-accent-600: #007a55;
+  --zx-accent-700: #006045;
+}
+[data-zx-preset=zeyos] {
+  --zx-accent-300: #ffd9a8;
+  --zx-accent-400: #f7bc60;
+  --zx-accent-500: #d0952f;
+  --zx-accent-600: #96690f;
+  --zx-accent-700: #6f4e0b;
+}
+[data-zx-preset=ocean] {
+  --zx-accent-300: #8ec5ff;
+  --zx-accent-400: #51a2ff;
+  --zx-accent-500: #2b7fff;
+  --zx-accent-600: #155dfc;
+  --zx-accent-700: #1447e6;
+}
+[data-zx-preset=violet] {
+  --zx-accent-300: #c4b4ff;
+  --zx-accent-400: #a684ff;
+  --zx-accent-500: #8e51ff;
+  --zx-accent-600: #7f22fe;
+  --zx-accent-700: #7008e7;
+}
+[data-zx-preset=rose] {
+  --zx-accent-300: #ffa1ad;
+  --zx-accent-400: #ff637e;
+  --zx-accent-500: #ff2056;
+  --zx-accent-600: #dc0039;
+  --zx-accent-700: #a80030;
+}
+[data-zx-preset=slate] {
+  --zx-accent-300: #cad5e2;
+  --zx-accent-400: #90a1b9;
+  --zx-accent-500: #62748e;
+  --zx-accent-600: #45556c;
+  --zx-accent-700: #314158;
+}
+
 /* styles/tokens/semantic.css */
 :root,
 [data-zx-theme=light] {
@@ -85,7 +134,7 @@
   --zx-color-bg-control: var(--zx-gray-0);
   --zx-color-bg-muted: var(--zx-gray-100);
   --zx-color-bg-hover: var(--zx-gray-100);
-  --zx-color-bg-selected: color-mix(in srgb, var(--zx-green-600) 10%, var(--zx-gray-0));
+  --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-600) 10%, var(--zx-gray-0));
   --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 50%, transparent);
   --zx-color-border: var(--zx-gray-200);
   --zx-color-border-strong: var(--zx-gray-300);
@@ -94,10 +143,10 @@
   --zx-color-text-muted: var(--zx-gray-500);
   --zx-color-text-placeholder: var(--zx-gray-400);
   --zx-color-text-invert: var(--zx-gray-50);
-  --zx-color-accent: var(--zx-green-600);
-  --zx-color-accent-hover: var(--zx-green-700);
-  --zx-color-accent-active: var(--zx-green-700);
-  --zx-color-accent-subtle: color-mix(in srgb, var(--zx-green-600) 10%, var(--zx-gray-0));
+  --zx-color-accent: var(--zx-accent-600);
+  --zx-color-accent-hover: var(--zx-accent-700);
+  --zx-color-accent-active: var(--zx-accent-700);
+  --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-600) 10%, var(--zx-gray-0));
   --zx-color-on-accent: var(--zx-gray-0);
   --zx-color-danger: var(--zx-red-500);
   --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-500) 10%, var(--zx-gray-0));
@@ -128,7 +177,7 @@
   --zx-color-bg-control: color-mix(in srgb, var(--zx-gray-0) 5%, transparent);
   --zx-color-bg-muted: var(--zx-gray-800);
   --zx-color-bg-hover: color-mix(in srgb, var(--zx-gray-0) 8%, transparent);
-  --zx-color-bg-selected: color-mix(in srgb, var(--zx-green-400) 18%, var(--zx-gray-900));
+  --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 18%, var(--zx-gray-900));
   --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 75%, transparent);
   --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 10%, transparent);
   --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 28%, transparent);
@@ -137,10 +186,10 @@
   --zx-color-text-muted: var(--zx-gray-400);
   --zx-color-text-placeholder: var(--zx-gray-500);
   --zx-color-text-invert: var(--zx-gray-950);
-  --zx-color-accent: var(--zx-green-400);
-  --zx-color-accent-hover: var(--zx-green-300);
-  --zx-color-accent-active: var(--zx-green-500);
-  --zx-color-accent-subtle: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-gray-900));
+  --zx-color-accent: var(--zx-accent-400);
+  --zx-color-accent-hover: var(--zx-accent-300);
+  --zx-color-accent-active: var(--zx-accent-500);
+  --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-gray-900));
   --zx-color-on-accent: var(--zx-gray-950);
   --zx-color-danger: var(--zx-red-400);
   --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 16%, var(--zx-gray-900));
@@ -165,7 +214,7 @@
     --zx-color-bg-control: color-mix(in srgb, var(--zx-gray-0) 5%, transparent);
     --zx-color-bg-muted: var(--zx-gray-800);
     --zx-color-bg-hover: color-mix(in srgb, var(--zx-gray-0) 8%, transparent);
-    --zx-color-bg-selected: color-mix(in srgb, var(--zx-green-400) 18%, var(--zx-gray-900));
+    --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 18%, var(--zx-gray-900));
     --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 75%, transparent);
     --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 10%, transparent);
     --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 28%, transparent);
@@ -174,10 +223,10 @@
     --zx-color-text-muted: var(--zx-gray-400);
     --zx-color-text-placeholder: var(--zx-gray-500);
     --zx-color-text-invert: var(--zx-gray-950);
-    --zx-color-accent: var(--zx-green-400);
-    --zx-color-accent-hover: var(--zx-green-300);
-    --zx-color-accent-active: var(--zx-green-500);
-    --zx-color-accent-subtle: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-gray-900));
+    --zx-color-accent: var(--zx-accent-400);
+    --zx-color-accent-hover: var(--zx-accent-300);
+    --zx-color-accent-active: var(--zx-accent-500);
+    --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-gray-900));
     --zx-color-on-accent: var(--zx-gray-950);
     --zx-color-danger: var(--zx-red-400);
     --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 16%, var(--zx-gray-900));
@@ -1670,9 +1719,13 @@ button.zx-panel__toggle:focus-visible {
   line-height: 1.25rem;
   text-align: center;
 }
-.zx-tabbox__close {
-  margin-inline-start: calc(-1 * var(--zx-space-1));
-  color: var(--zx-color-text-muted);
+.zx-tabbox .zx-tabbox__close {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  margin-inline: calc(-1 * var(--zx-space-1));
+}
+.zx-tabbox .zx-tabbox__close:hover {
+  background: color-mix(in srgb, var(--zx-color-text) 12%, transparent);
 }
 .zx-tabbox__panel {
   padding-block-start: var(--zx-space-4);
@@ -1698,6 +1751,7 @@ button.zx-panel__toggle:focus-visible {
 .zx-navigation-bar {
   min-inline-size: 0;
   container-type: inline-size;
+  inline-size: 100%;
 }
 .zx-navigation-bar__bar {
   display: flex;
@@ -1827,10 +1881,12 @@ button.zx-panel__toggle:focus-visible {
   background: none;
   padding-inline: var(--zx-control-pad-x) var(--zx-control-height);
 }
-.zx-search__input:focus-visible,
+.zx-search__input:focus-visible {
+  box-shadow: none;
+}
 .zx-search__clear:focus-visible,
 .zx-search__submit:focus-visible {
-  box-shadow: var(--zx-focus-ring);
+  box-shadow: inset var(--zx-focus-ring);
 }
 .zx-search__input::-webkit-search-cancel-button {
   appearance: none;
@@ -2437,6 +2493,11 @@ body:has(> .zx-modal[open]) {
   padding: var(--zx-space-2) var(--zx-control-pad-x) var(--zx-space-1);
   text-transform: uppercase;
 }
+.zx-select__separator {
+  block-size: 1px;
+  margin: var(--zx-space-1) var(--zx-control-pad-x);
+  background: var(--zx-color-border);
+}
 .zx-select__empty {
   color: var(--zx-color-text-muted);
   padding: var(--zx-space-3) var(--zx-control-pad-x);
@@ -3419,6 +3480,7 @@ body:has(> .zx-modal[open]) {
 .zx-date-range-picker {
   display: block;
   container-type: inline-size;
+  inline-size: 100%;
   color: var(--zx-color-text);
   font-size: var(--zx-control-font-size);
 }
@@ -4474,6 +4536,12 @@ button.zx-stepper__control:disabled {
   flex: 0 1 auto;
   gap: var(--zx-space-2);
 }
+.zx-stepper[data-orientation=horizontal] .zx-stepper__step:not(:last-child) {
+  flex: 1 1 auto;
+}
+.zx-stepper[data-orientation=horizontal] .zx-stepper__control {
+  flex: 0 1 auto;
+}
 .zx-stepper[data-orientation=horizontal] .zx-stepper__step:not(:last-child)::after {
   content: "";
   flex: 1 1 var(--zx-space-6);
@@ -4717,6 +4785,7 @@ button.zx-stepper__control:disabled {
   border-radius: var(--zx-radius-lg);
   background: var(--zx-color-bg-surface);
   container-type: inline-size;
+  inline-size: 100%;
 }
 .zx-fieldset__legend {
   padding-inline: var(--zx-space-2);
@@ -4749,6 +4818,9 @@ button.zx-stepper__control:disabled {
   gap: var(--zx-space-5);
   min-inline-size: 0;
 }
+.zx-form {
+  inline-size: 100%;
+}
 .zx-form__actions {
   display: flex;
   flex-wrap: wrap;
@@ -4870,49 +4942,103 @@ button.zx-stepper__control:disabled {
   display: grid;
   gap: var(--zx-space-3);
   min-inline-size: 0;
+  inline-size: 100%;
   padding: var(--zx-space-3);
   border: 1px solid var(--zx-color-border);
   border-radius: var(--zx-radius-lg);
   background: var(--zx-color-bg-surface);
-  container-type: inline-size;
 }
 .zx-multi-value-editor__rows {
   display: grid;
   gap: var(--zx-space-2);
 }
 .zx-multi-value-editor__row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  min-inline-size: 0;
   gap: var(--zx-space-2);
   align-items: center;
 }
 .zx-multi-value-editor__value {
-  inline-size: 100%;
+  flex: 1 1 11rem;
+  min-inline-size: 0;
 }
 .zx-multi-value-editor__controls {
   display: inline-flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  min-inline-size: 0;
   gap: var(--zx-space-1);
+  margin-inline-start: auto;
 }
 .zx-multi-value-editor__controls .zx-btn {
   min-inline-size: var(--zx-control-height);
   padding-inline: var(--zx-space-2);
 }
-.zx-multi-value-editor__controls .zx-btn:last-child {
+.zx-multi-value-editor__controls .zx-btn[data-action=remove] {
   color: var(--zx-color-danger);
 }
+.zx-multi-value-editor__controls .zx-btn[aria-disabled=true] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.zx-multi-value-editor__controls .zx-btn[aria-disabled=true]:hover {
+  background: var(--zx-color-bg-control);
+}
+.zx-multi-value-editor__handle {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-block-size: var(--zx-control-height);
+  min-inline-size: var(--zx-space-6);
+  padding: 0;
+  border: 0;
+  border-radius: var(--zx-control-radius);
+  background: none;
+  color: var(--zx-color-text-muted);
+  cursor: grab;
+  touch-action: none;
+  transition: color var(--zx-dur-fast) var(--zx-ease), background-color var(--zx-dur-fast) var(--zx-ease);
+}
+.zx-multi-value-editor__handle:hover:not(:disabled) {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+.zx-multi-value-editor__handle:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-multi-value-editor__handle:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+.zx-multi-value-editor[data-state=dragging] .zx-multi-value-editor__handle {
+  cursor: grabbing;
+}
+.zx-multi-value-editor__row[data-dragging=true] {
+  opacity: 0.45;
+}
+.zx-multi-value-editor__row[data-drop]::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  block-size: 2px;
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-accent);
+}
+.zx-multi-value-editor__row[data-drop=before]::after {
+  inset-block-start: calc(var(--zx-space-2) / -2 - 1px);
+}
+.zx-multi-value-editor__row[data-drop=after]::after {
+  inset-block-end: calc(var(--zx-space-2) / -2 - 1px);
+}
 .zx-multi-value-editor__add {
   justify-self: start;
   border-color: var(--zx-color-accent);
   color: var(--zx-color-accent);
 }
-@container (max-width: 24rem) {
-  .zx-multi-value-editor__row {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .zx-multi-value-editor__controls {
-    justify-self: end;
-  }
-}
 
 /* src/components/field-upload/field-upload.css */
 .zx-field-upload {