@zeyos/zx 4.1.0 → 4.2.0

package/src/components/launcher/launcher.css

@@ -1,14 +1,26 @@
 .zx-launcher {
   inline-size: min(760px, calc(100vw - (2 * var(--zx-space-4))));
   max-block-size: min(720px, calc(100vh - (2 * var(--zx-space-6))));
-  border: 1px solid var(--zx-color-border);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-xl);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  background: var(--zx-color-overlay-panel);
+  -webkit-backdrop-filter: var(--zx-glass-filter-panel);
+  backdrop-filter: var(--zx-glass-filter-panel);
+  box-shadow: var(--zx-glass-raised-shadow);
   color: var(--zx-color-text);
   padding: 0;
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  .zx-launcher {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
+
 .zx-launcher::backdrop {
   background: var(--zx-color-bg-backdrop);
 }
@@ -121,7 +133,8 @@
 }
 
 .zx-launcher__option[aria-current="page"] {
-  box-shadow: inset 2px 0 var(--zx-color-accent);
+  background: var(--zx-color-bg-selected);
+  color: var(--zx-color-accent);
 }
 
 .zx-launcher__option[data-kind="application"] {
@@ -135,7 +148,7 @@
 }
 
 .zx-launcher__option[data-kind="application"][aria-current="page"] {
-  box-shadow: inset 0 -2px var(--zx-color-accent);
+  background: var(--zx-color-bg-selected);
 }
 
 .zx-launcher__option[data-kind="application"] .zx-launcher__icon {

package/src/components/master-panel/master-panel.css

@@ -6,7 +6,7 @@
   overflow: hidden;
   border: 1px solid var(--zx-color-border);
   border-radius: var(--zx-radius-lg);
-  background: var(--zx-color-bg-surface);
+  background: var(--zx-color-glass-chrome);
 }
 
 .zx-master-panel__header {
@@ -15,9 +15,9 @@
   align-items: center;
   gap: var(--zx-space-4);
   min-block-size: calc(var(--zx-control-height) + var(--zx-space-4));
-  border-block-start: 4px solid var(--zx-master-panel-accent, var(--zx-module-default));
   border-block-end: 1px solid var(--zx-color-border);
-  background: var(--zx-color-bg-raised);
+  background: var(--zx-color-glass-chrome);
+  box-shadow: var(--zx-glass-chrome-shadow);
   padding: var(--zx-space-2) var(--zx-space-4);
 }
 
@@ -49,3 +49,14 @@
   padding: var(--zx-space-3) var(--zx-space-4);
   color: var(--zx-color-text-muted);
 }
+
+@media (prefers-reduced-transparency: reduce) {
+  .zx-master-panel {
+    background: var(--zx-color-bg-surface);
+  }
+
+  .zx-master-panel__header {
+    background: var(--zx-color-bg-raised);
+    box-shadow: none;
+  }
+}

package/src/components/menu-button/menu-button.css

@@ -16,8 +16,8 @@
   gap: var(--zx-space-2);
   inline-size: 100%;
   min-block-size: var(--zx-control-height);
-  border-color: var(--zx-color-bg-raised);
-  background: var(--zx-color-bg-raised);
+  border-color: transparent;
+  background: transparent;
   padding-inline: var(--zx-control-pad-x);
   text-align: start;
 }

package/src/components/message/message.css

@@ -32,11 +32,10 @@
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: start;
   gap: var(--zx-space-3);
-  border: 1px solid var(--zx-color-border);
-  border-inline-start: 4px solid var(--zx-message-kind);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
   background: var(--zx-color-info-bg);
-  box-shadow: var(--zx-overlay-shadow);
+  box-shadow: inset 0 0 0 1px var(--zx-message-kind), var(--zx-glass-raised-shadow);
   padding: var(--zx-space-3);
   color: var(--zx-color-text);
 }
@@ -58,26 +57,32 @@
 
 @supports (backdrop-filter: blur(1px)) {
   .zx-message__toast {
-    background: color-mix(in srgb, var(--zx-color-info-bg) 38%, var(--zx-color-glass-surface));
-    backdrop-filter: blur(var(--zx-overlay-blur)) saturate(var(--zx-glass-saturation));
-    box-shadow: inset 0 1px 0 var(--zx-color-glass-highlight), var(--zx-overlay-shadow);
+    background: color-mix(in srgb, var(--zx-color-info-bg) 34%, var(--zx-color-overlay-surface));
+    -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
+    backdrop-filter: var(--zx-glass-filter-overlay);
+    box-shadow: inset 0 0 0 1px var(--zx-message-kind), var(--zx-glass-raised-shadow);
   }
 
   .zx-message__toast[data-kind="success"] {
-    background: color-mix(in srgb, var(--zx-color-success-bg) 38%, var(--zx-color-glass-surface));
+    background: color-mix(in srgb, var(--zx-color-success-bg) 34%, var(--zx-color-overlay-surface));
   }
 
   .zx-message__toast[data-kind="warning"] {
-    background: color-mix(in srgb, var(--zx-color-warning-bg) 38%, var(--zx-color-glass-surface));
+    background: color-mix(in srgb, var(--zx-color-warning-bg) 34%, var(--zx-color-overlay-surface));
   }
 
   .zx-message__toast[data-kind="error"] {
-    background: color-mix(in srgb, var(--zx-color-danger-bg) 38%, var(--zx-color-glass-surface));
+    background: color-mix(in srgb, var(--zx-color-danger-bg) 34%, var(--zx-color-overlay-surface));
   }
 }
 
 @media (prefers-reduced-transparency: reduce) {
-  .zx-message__toast { backdrop-filter: none; }
+  .zx-message__toast {
+    border-color: var(--zx-color-border);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
   .zx-message__toast[data-kind="info"] { background: var(--zx-color-info-bg); }
   .zx-message__toast[data-kind="success"] { background: var(--zx-color-success-bg); }
   .zx-message__toast[data-kind="warning"] { background: var(--zx-color-warning-bg); }

package/src/components/modal/modal.css

@@ -2,14 +2,26 @@
   max-inline-size: calc(100vw - (2 * var(--zx-space-4)));
   max-block-size: calc(100vh - (2 * var(--zx-space-4)));
   overflow: auto;
-  border: 1px solid var(--zx-color-border);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-lg);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  background: var(--zx-color-overlay-panel);
+  -webkit-backdrop-filter: var(--zx-glass-filter-panel);
+  backdrop-filter: var(--zx-glass-filter-panel);
+  box-shadow: var(--zx-glass-raised-shadow);
   color: var(--zx-color-text);
   padding: 0;
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  .zx-modal {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
+
 .zx-modal::backdrop {
   background: var(--zx-color-bg-backdrop);
 }

package/src/components/navigation-bar/navigation-bar.css

@@ -15,11 +15,13 @@
   min-inline-size: 0;
   align-items: center;
   gap: var(--zx-space-3);
-  border: 1px solid var(--zx-color-border);
+  border: 1px solid var(--zx-color-glass-border);
   border-radius: var(--zx-radius-lg);
-  background: var(--zx-color-bg-raised);
+  background: var(--zx-color-glass-chrome);
   padding: var(--zx-space-2) var(--zx-space-3);
-  box-shadow: var(--zx-overlay-shadow);
+  -webkit-backdrop-filter: var(--zx-glass-filter-chrome);
+  backdrop-filter: var(--zx-glass-filter-chrome);
+  box-shadow: var(--zx-glass-chrome-shadow);
 }
 
 .zx-navigation-bar__brand {
@@ -113,9 +115,19 @@
 
 .zx-navigation-bar__panels {
   border: 1px solid var(--zx-color-border);
-  border-block-start: 0;
-  border-radius: 0 0 var(--zx-radius-lg) var(--zx-radius-lg);
+  border-radius: var(--zx-radius-lg);
   background: var(--zx-color-bg-surface);
+  margin-block-start: var(--zx-space-2);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .zx-navigation-bar__bar {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
 }
 
 .zx-navigation-bar__panel {

package/src/components/panel/panel.css

@@ -3,7 +3,7 @@
   border: 1px solid var(--zx-color-border);
   border-radius: var(--zx-radius-lg);
   background: var(--zx-color-bg-surface);
-  box-shadow: var(--zx-overlay-shadow);
+  box-shadow: var(--zx-shadow-1);
 }
 
 /* The header is a row, not one big button: the collapse control takes the title area and the
@@ -13,7 +13,15 @@
   align-items: center;
   gap: var(--zx-space-2);
   min-block-size: var(--zx-control-height);
-  background: var(--zx-panel-header-bg, var(--zx-color-bg-raised));
+  background: var(--zx-panel-header-bg, var(--zx-color-glass-chrome));
+  box-shadow: var(--zx-glass-chrome-shadow);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .zx-panel__header {
+    background: var(--zx-panel-header-bg, var(--zx-color-bg-raised));
+    box-shadow: none;
+  }
 }
 
 .zx-panel__toggle {

package/src/components/select/select.css

@@ -96,10 +96,12 @@
   inline-size: max-content;
   max-inline-size: calc(100vw - var(--zx-space-4));
   overflow: hidden;
-  border: 1px solid var(--zx-color-border-strong);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  background: var(--zx-color-overlay-surface);
+  -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
+  backdrop-filter: var(--zx-glass-filter-overlay);
+  box-shadow: var(--zx-glass-raised-shadow);
   color: var(--zx-color-text);
   padding: var(--zx-space-1);
 }
@@ -146,7 +148,7 @@
   position: sticky;
   z-index: 1;
   inset-block-start: 0;
-  background: var(--zx-color-bg-raised);
+  background: var(--zx-color-overlay-surface);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
   font-weight: 700;
@@ -155,6 +157,20 @@
   text-transform: uppercase;
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  .zx-select__panel,
+  .zx-select__group {
+    background: var(--zx-color-bg-raised);
+  }
+
+  .zx-select__panel {
+    border-color: var(--zx-color-border-strong);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
+
 .zx-select__separator {
   block-size: 1px;
   margin: var(--zx-space-1) var(--zx-control-pad-x);

package/src/components/sheet/sheet.css

@@ -12,7 +12,7 @@
   border-radius: 0;
   /* The header and footer stay put; `.zx-dialog__body` is what scrolls. */
   overflow: hidden;
-  box-shadow: var(--zx-overlay-shadow);
+  box-shadow: var(--zx-glass-raised-shadow);
 }
 
 /* Horizontal sheets: full height, sized across the inline axis. */
@@ -156,6 +156,9 @@
   min-inline-size: 0;
   min-block-size: 0;
   border-radius: 0;
+  background: var(--zx-color-bg-raised);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
   box-shadow: none;
 }
 

package/src/components/table/table.css

@@ -33,15 +33,30 @@
   inset-inline-end: 0;
   display: grid;
   min-inline-size: 190px;
-  border: 1px solid var(--zx-color-border-strong);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  background: var(--zx-color-overlay-surface);
+  -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
+  backdrop-filter: var(--zx-glass-filter-overlay);
+  box-shadow: var(--zx-glass-raised-shadow);
   padding: var(--zx-space-2);
+  max-block-size: min(360px, 70vh);
+  overflow: auto;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .zx-table__column-list {
+    border-color: var(--zx-color-border-strong);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
 }
 
 .zx-table__column-option {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--zx-space-2);
   min-block-size: var(--zx-control-height);
@@ -51,6 +66,67 @@
 
 .zx-table__column-option:hover { background: var(--zx-color-bg-hover); }
 
+.zx-table__column-option > label,
+.zx-table__column-label {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+
+.zx-table__column-option > label > span,
+.zx-table__column-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zx-table__column-order {
+  display: inline-flex;
+}
+
+.zx-table__column-move {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 26px;
+  block-size: 26px;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: transparent;
+  color: var(--zx-color-text-muted);
+  cursor: pointer;
+}
+
+.zx-table__column-move:hover:not(:disabled) {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+
+.zx-table__column-move:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-table__column-move:disabled {
+  opacity: .35;
+  cursor: not-allowed;
+}
+
+.zx-table__column-status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .zx-table__column-move {
+    transition: color var(--zx-dur-fast) var(--zx-ease),
+      background var(--zx-dur-fast) var(--zx-ease), opacity var(--zx-dur-fast) var(--zx-ease);
+  }
+}
+
 .zx-table__reorder-column,
 .zx-table__reorder-header,
 .zx-table__reorder-cell {