@zeyos/zx 3.0.0 → 4.1.0

package/dist/zx.css

@@ -165,6 +165,18 @@
   --zx-control-font-weight: 500;
   --zx-overlay-shadow: var(--zx-shadow-3);
   --zx-overlay-blur: 8px;
+  --zx-color-glass-border: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
+  --zx-color-glass-highlight: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
+  --zx-color-glass-highlight-strong: color-mix(in srgb, var(--zx-gray-0) 38%, transparent);
+  --zx-color-glass-surface: color-mix(in srgb, var(--zx-color-bg-raised) 78%, transparent);
+  --zx-glass-blur: 8px;
+  --zx-glass-saturation: 130%;
+  --zx-glass-color-strength: 82%;
+  --zx-app-icon-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 28%, transparent),
+    inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 16%, transparent),
+    0 5px 14px color-mix(in srgb, var(--zx-app-icon-color) 28%, transparent);
+  --zx-glass-glyph-shadow: 0 1px 1px color-mix(in srgb, var(--zx-gray-950) 22%, transparent);
   --zx-header-bg: var(--zx-gray-900);
   --zx-header-text: var(--zx-gray-50);
 }
@@ -340,6 +352,7 @@
   --zx-module-linecoupon: var(--zx-module-line);
   --zx-module-logins: var(--zx-module-auth);
   --zx-module-mailservers: var(--zx-module-channels);
+  --zx-module-main: var(--zx-module-zeyos);
   --zx-module-notifications: var(--zx-module-messages);
   --zx-module-participants-campaigns: var(--zx-module-participants);
   --zx-module-participants-mailinglists: var(--zx-module-participants);
@@ -1391,6 +1404,133 @@ svg.zx-icon {
   }
 }
 
+/* src/components/card/card.css */
+.zx-card {
+  --zx-card-media-size: 8rem;
+  position: relative;
+  inline-size: 100%;
+  container-type: inline-size;
+  overflow: hidden;
+  border-radius: var(--zx-radius-lg);
+  color: var(--zx-color-text);
+}
+.zx-card[data-variant=outlined] {
+  border: 1px solid var(--zx-color-border);
+  background: var(--zx-color-bg-surface);
+}
+.zx-card[data-variant=raised] {
+  border: 1px solid transparent;
+  background: var(--zx-color-bg-surface);
+  box-shadow: var(--zx-overlay-shadow);
+}
+.zx-card[data-variant=filled] {
+  border: 1px solid transparent;
+  background: var(--zx-color-bg-muted);
+}
+.zx-card[data-linked=true]:hover {
+  background: var(--zx-color-bg-hover);
+}
+.zx-card:has(.zx-card__primary:focus-visible) {
+  outline: 0;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-card__layout,
+.zx-card__inner {
+  min-inline-size: 0;
+}
+.zx-card__inner {
+  display: grid;
+  gap: var(--zx-space-3);
+  padding: var(--zx-space-5);
+}
+.zx-card[data-orientation=horizontal] .zx-card__layout {
+  display: grid;
+  grid-template-columns: var(--zx-card-media-size) minmax(0, 1fr);
+  align-items: stretch;
+}
+.zx-card__media {
+  min-inline-size: 0;
+  overflow: hidden;
+}
+.zx-card[data-orientation=horizontal] .zx-card__media {
+  min-block-size: var(--zx-card-media-size);
+}
+.zx-card__media > :is(img, video, svg) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+.zx-card__header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: var(--zx-space-3);
+}
+.zx-card__header[hidden],
+.zx-card__media[hidden],
+.zx-card__content[hidden],
+.zx-card__footer[hidden],
+.zx-card__actions[hidden] {
+  display: none;
+}
+.zx-card__heading {
+  min-inline-size: 0;
+  margin: 0;
+  font-size: var(--zx-text-lg);
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: -0.012em;
+}
+.zx-card__primary,
+.zx-card__title {
+  color: inherit;
+}
+.zx-card__primary {
+  text-decoration: none;
+}
+.zx-card[data-linked=true] .zx-card__primary::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+.zx-card__primary:focus-visible {
+  outline: 0;
+}
+.zx-card__actions,
+.zx-card__content :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])),
+.zx-card__footer :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])) {
+  position: relative;
+  z-index: 2;
+}
+.zx-card__actions {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: end;
+  gap: var(--zx-space-2);
+}
+.zx-card__content {
+  color: var(--zx-color-text-muted);
+  line-height: 1.6;
+}
+.zx-card__footer {
+  padding-block-start: var(--zx-space-3);
+  border-block-start: 1px solid var(--zx-color-border);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+}
+@container (max-width: 28rem) {
+  .zx-card[data-orientation=horizontal] .zx-card__layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .zx-card[data-orientation=horizontal] .zx-card__media {
+    min-block-size: 0;
+  }
+}
+
 /* src/components/panel/panel.css */
 .zx-panel {
   overflow: hidden;
@@ -1923,9 +2063,114 @@ button.zx-panel__toggle:focus-visible {
   display: none;
 }
 
+/* src/components/app-icon/app-icon.css */
+.zx-app-icon {
+  --zx-app-icon-size: 36px;
+  --zx-app-icon-glyph-size: 52%;
+  --zx-app-icon-color: var(--zx-color-accent);
+  position: relative;
+  isolation: isolate;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  inline-size: var(--zx-app-icon-size);
+  block-size: var(--zx-app-icon-size);
+  overflow: hidden;
+  border: 1px solid var(--zx-color-glass-border);
+  border-radius: max(var(--zx-radius-md), calc(var(--zx-app-icon-size) * .22));
+  background: var(--zx-app-icon-color);
+  box-shadow: var(--zx-app-icon-shadow);
+  color: var(--zx-app-icon-glyph, var(--zx-color-text-invert));
+  font-size: var(--zx-app-icon-size);
+  vertical-align: middle;
+}
+.zx-app-icon[data-glass=subtle],
+.zx-app-icon[data-glass=strong] {
+  background:
+    linear-gradient(
+      145deg,
+      var(--zx-color-glass-highlight),
+      transparent 44%),
+    color-mix(in srgb, var(--zx-app-icon-color) var(--zx-glass-color-strength), transparent);
+}
+.zx-app-icon[data-glass=strong] {
+  backdrop-filter: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
+}
+.zx-app-icon[data-glass=none] {
+  border-color: var(--zx-color-border);
+  box-shadow: none;
+}
+.zx-app-icon[data-glass=none] .zx-app-icon__shine {
+  display: none;
+}
+.zx-app-icon[data-selected] {
+  outline: 2px solid var(--zx-color-bg-page);
+  box-shadow: 0 0 0 3px var(--zx-color-ring), var(--zx-overlay-shadow);
+}
+.zx-app-icon__shine {
+  position: absolute;
+  z-index: -1;
+  inset: 1px 12% auto;
+  block-size: 42%;
+  border-radius: 999px;
+  background:
+    linear-gradient(
+      to bottom,
+      var(--zx-color-glass-highlight-strong),
+      transparent);
+  filter: blur(2px);
+  pointer-events: none;
+}
+.zx-app-icon__glyph {
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--zx-app-icon-glyph-size);
+  block-size: var(--zx-app-icon-glyph-size);
+  font-size: var(--zx-app-icon-glyph-size);
+  line-height: 1;
+  filter: drop-shadow(var(--zx-glass-glyph-shadow));
+}
+.zx-app-icon__glyph > .zx-icon,
+.zx-app-icon__glyph > svg,
+.zx-app-icon__glyph > i {
+  inline-size: 1em;
+  block-size: 1em;
+}
+.zx-app-icon__badge {
+  position: absolute;
+  inset-block-end: 1px;
+  inset-inline-end: 1px;
+  display: grid;
+  place-items: center;
+  min-inline-size: 14px;
+  block-size: 14px;
+  padding-inline: 3px;
+  border: 1px solid var(--zx-color-bg-raised);
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-danger);
+  color: var(--zx-color-text-invert);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+}
+@media (prefers-reduced-transparency: reduce) {
+  .zx-app-icon[data-glass=strong] {
+    background: var(--zx-app-icon-color);
+    backdrop-filter: none;
+  }
+}
+@media (forced-colors: active) {
+  .zx-app-icon {
+    border-color: ButtonText;
+    background: ButtonFace;
+    color: ButtonText;
+    box-shadow: none;
+  }
+}
+
 /* src/components/launcher/launcher.css */
 .zx-launcher {
-  inline-size: min(680px, calc(100vw - (2 * var(--zx-space-4))));
+  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-radius: var(--zx-radius-xl);
@@ -1939,17 +2184,20 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-launcher__surface {
   display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr);
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
   max-block-size: inherit;
 }
 .zx-launcher__search {
   display: grid;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
   align-items: center;
   gap: var(--zx-space-3);
   border-block-end: 1px solid var(--zx-color-border);
   padding: var(--zx-space-3) var(--zx-space-4);
 }
+.zx-launcher__search[data-shortcut=false] {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+}
 .zx-launcher__input {
   min-inline-size: 0;
   border: 0;
@@ -1964,6 +2212,21 @@ button.zx-panel__toggle:focus-visible {
 .zx-launcher__input::-webkit-search-cancel-button {
   display: none;
 }
+.zx-launcher__shortcut,
+.zx-launcher__hints kbd {
+  border: 1px solid var(--zx-color-border-control);
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-color-bg-muted);
+  color: var(--zx-color-text-muted);
+  font-family: var(--zx-font-mono);
+  font-size: var(--zx-text-xs);
+  font-weight: 600;
+  line-height: 1.5;
+}
+.zx-launcher__shortcut {
+  padding-inline: var(--zx-space-2);
+  white-space: nowrap;
+}
 .zx-launcher__status {
   margin: 0;
   padding: var(--zx-space-5);
@@ -1986,6 +2249,16 @@ button.zx-panel__toggle:focus-visible {
   letter-spacing: .04em;
   text-transform: uppercase;
 }
+.zx-launcher__group[data-layout=grid] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
+  gap: var(--zx-space-2);
+  padding: 0 var(--zx-space-1) var(--zx-space-2);
+}
+.zx-launcher__group[data-layout=grid] .zx-launcher__group-label {
+  grid-column: 1 / -1;
+  padding-inline: var(--zx-space-2);
+}
 .zx-launcher__option {
   display: flex;
   align-items: center;
@@ -2004,6 +2277,35 @@ button.zx-panel__toggle:focus-visible {
 .zx-launcher__option:hover {
   background: var(--zx-color-bg-hover);
 }
+.zx-launcher__option[aria-current=page] {
+  box-shadow: inset 2px 0 var(--zx-color-accent);
+}
+.zx-launcher__option[data-kind=application] {
+  display: grid;
+  grid-template-rows: auto minmax(0, auto);
+  justify-items: center;
+  align-content: center;
+  min-block-size: 92px;
+  padding: var(--zx-space-3) var(--zx-space-2);
+  text-align: center;
+}
+.zx-launcher__option[data-kind=application][aria-current=page] {
+  box-shadow: inset 0 -2px var(--zx-color-accent);
+}
+.zx-launcher__option[data-kind=application] .zx-launcher__icon {
+  min-block-size: 36px;
+  align-items: center;
+}
+.zx-launcher__option[data-kind=application] .zx-launcher__copy {
+  inline-size: 100%;
+}
+.zx-launcher__option[data-kind=application] .zx-launcher__description,
+.zx-launcher__option[data-kind=application] .zx-launcher__badge {
+  display: none;
+}
+.zx-launcher__option[data-kind=application] .zx-launcher__label {
+  font-size: var(--zx-text-sm);
+}
 .zx-launcher__option[aria-disabled=true] {
   color: var(--zx-color-text-muted);
   cursor: not-allowed;
@@ -2036,6 +2338,40 @@ button.zx-panel__toggle:focus-visible {
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
 }
+.zx-launcher__hints {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: end;
+  gap: var(--zx-space-4);
+  padding: var(--zx-space-2) var(--zx-space-4);
+  border-block-start: 1px solid var(--zx-color-border);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+}
+.zx-launcher__hints span {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+}
+.zx-launcher__hints kbd {
+  min-inline-size: 1.5rem;
+  padding-inline: 4px;
+  text-align: center;
+}
+@media (max-width: 520px) {
+  .zx-launcher__group[data-layout=grid] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .zx-launcher__shortcut {
+    display: none;
+  }
+  .zx-launcher__search {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+  .zx-launcher__hints {
+    justify-content: center;
+  }
+}
 
 /* src/components/avatar/avatar.css */
 .zx-avatar {
@@ -2348,6 +2684,15 @@ button.zx-panel__toggle:focus-visible {
   background: var(--zx-color-bg-raised);
   color: var(--zx-color-text);
 }
+.zx-app-sidebar[data-orientation=horizontal] {
+  inline-size: 100%;
+}
+.zx-app-sidebar[data-orientation=horizontal] > .zx-app-sidebar__rail {
+  inline-size: 100%;
+}
+.zx-app-sidebar__rail.zx-app-rail {
+  border: 0;
+}
 .zx-app-sidebar__expanded {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
@@ -2449,11 +2794,14 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-message-region {
   position: fixed;
-  inset-block: var(--zx-space-4) auto;
-  inset-inline: var(--zx-space-4);
+  inset-block-start: var(--zx-space-4);
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: var(--zx-space-4);
   inline-size: min(420px, calc(100% - (2 * var(--zx-space-4))));
+  block-size: max-content;
   max-block-size: calc(100% - (2 * var(--zx-space-4)));
-  margin: 0 auto;
+  margin: 0;
   overflow: visible;
   border: 0;
   background: none;
@@ -2461,6 +2809,8 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-message-region:popover-open {
   display: grid;
+  grid-auto-rows: max-content;
+  align-content: start;
 }
 .zx-message__toast {
   --zx-message-kind: var(--zx-color-info);
@@ -2489,6 +2839,39 @@ button.zx-panel__toggle:focus-visible {
   --zx-message-kind: var(--zx-color-danger);
   background: var(--zx-color-danger-bg);
 }
+@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);
+  }
+  .zx-message__toast[data-kind=success] {
+    background: color-mix(in srgb, var(--zx-color-success-bg) 38%, var(--zx-color-glass-surface));
+  }
+  .zx-message__toast[data-kind=warning] {
+    background: color-mix(in srgb, var(--zx-color-warning-bg) 38%, var(--zx-color-glass-surface));
+  }
+  .zx-message__toast[data-kind=error] {
+    background: color-mix(in srgb, var(--zx-color-danger-bg) 38%, var(--zx-color-glass-surface));
+  }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .zx-message__toast {
+    backdrop-filter: none;
+  }
+  .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);
+  }
+  .zx-message__toast[data-kind=error] {
+    background: var(--zx-color-danger-bg);
+  }
+}
 .zx-message__icon {
   display: inline-grid;
   place-items: center;
@@ -3375,7 +3758,7 @@ body:has(> .zx-modal:modal) {
 }
 .zx-select__control {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto auto;
+  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
   align-items: center;
   min-block-size: var(--zx-control-height);
   overflow: hidden;
@@ -3383,10 +3766,23 @@ body:has(> .zx-modal:modal) {
   border-radius: var(--zx-control-radius);
   background: var(--zx-color-bg-control);
 }
+.zx-select__value-adornment {
+  display: inline-flex;
+  grid-column: 1;
+  align-items: center;
+  padding-inline-start: var(--zx-control-pad-x);
+}
+.zx-select__value-adornment[hidden] {
+  display: none;
+}
+.zx-select__value-adornment:not([hidden]) + .zx-select__input {
+  padding-inline-start: var(--zx-space-2) !important;
+}
 .zx-select__control:has(.zx-select__input:focus-visible) {
   box-shadow: var(--zx-focus-ring);
 }
 .zx-select__input {
+  grid-column: 2;
   inline-size: 100%;
   min-inline-size: 0;
   min-block-size: calc(var(--zx-control-height) - 2px) !important;
@@ -3410,6 +3806,20 @@ body:has(> .zx-modal:modal) {
   color: var(--zx-color-text-muted);
   padding: 0 !important;
 }
+.zx-select__clear {
+  grid-column: 3;
+}
+.zx-select__loading {
+  grid-column: 4;
+  justify-self: center;
+}
+.zx-select__toggle {
+  grid-column: 5;
+  align-self: stretch;
+}
+.zx-select__toggle > .zx-icon {
+  display: block;
+}
 .zx-select__clear:hover,
 .zx-select__toggle:hover {
   color: var(--zx-color-text);
@@ -3501,19 +3911,177 @@ body:has(> .zx-modal:modal) {
   gap: var(--zx-space-2);
 }
 .zx-select__priority-icon {
-  inline-size: 10px;
-  block-size: 10px;
+  display: inline-flex;
+  gap: 2px;
   flex: none;
-  border-radius: var(--zx-radius-sm);
-  background: var(--zx-color-warning);
+  color: var(--zx-color-warning);
+}
+.zx-select__priority-icon > span {
+  inline-size: 7px;
+  block-size: 7px;
+  border: 1px solid currentColor;
+  border-radius: 2px;
+}
+.zx-select__priority-icon > span[data-filled=true] {
+  background: currentColor;
+}
+.zx-select__priority-icon[data-level="0"] {
+  color: var(--zx-color-success);
 }
-.zx-select__priority-icon[data-level="0"],
 .zx-select__priority-icon[data-level="1"] {
-  background: var(--zx-color-success);
+  color: color-mix(in srgb, var(--zx-color-success) 35%, var(--zx-color-warning));
+}
+.zx-select__priority-icon[data-level="2"] {
+  color: var(--zx-color-warning);
+}
+.zx-select__priority-icon[data-level="3"] {
+  color: color-mix(in srgb, var(--zx-color-warning) 35%, var(--zx-color-danger));
 }
-.zx-select__priority-icon[data-level="3"],
 .zx-select__priority-icon[data-level="4"] {
-  background: var(--zx-color-danger);
+  color: var(--zx-color-danger);
+}
+.zx-select__status {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--zx-space-2);
+}
+.zx-select__entity-glyph {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 20px;
+  block-size: 20px;
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-select-entity-color, var(--zx-color-accent-subtle));
+  color: var(--zx-color-text-invert);
+}
+.zx-select__status-copy,
+.zx-select__action-copy {
+  display: grid;
+  min-inline-size: 0;
+}
+.zx-select__status-description,
+.zx-select__action-description {
+  overflow: hidden;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-select__status-shortcut {
+  border: 0;
+  background: transparent;
+  color: var(--zx-color-text-muted);
+  font-family: var(--zx-font-mono);
+  font-size: var(--zx-text-xs);
+}
+.zx-select__status-indicator {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  inline-size: 14px;
+  block-size: 14px;
+  flex: none;
+  border: 2px solid currentColor;
+  border-radius: var(--zx-radius-full);
+  color: var(--zx-color-text-muted);
+}
+.zx-select__status-indicator[data-tone=neutral] {
+  color: var(--zx-color-border-strong);
+}
+.zx-select__status-indicator[data-tone=warning] {
+  color: var(--zx-color-warning);
+}
+.zx-select__status-indicator[data-tone=info] {
+  color: var(--zx-color-info);
+}
+.zx-select__status-indicator[data-tone=accent] {
+  color: var(--zx-color-accent);
+}
+.zx-select__status-indicator[data-tone=success] {
+  color: var(--zx-color-success);
+}
+.zx-select__status-indicator[data-tone=danger] {
+  color: var(--zx-color-danger);
+}
+.zx-select__status-indicator[data-indicator=dotted] {
+  border-style: dotted;
+}
+.zx-select__status-indicator[data-indicator=progress]::after {
+  content: "";
+  inline-size: 4px;
+  block-size: 4px;
+  border-radius: inherit;
+  background: currentColor;
+}
+.zx-select__status-indicator[data-indicator=review] {
+  background:
+    linear-gradient(
+      90deg,
+      currentColor 50%,
+      transparent 50%);
+}
+.zx-select__status-indicator[data-indicator=ready] {
+  background: conic-gradient(currentColor 0 35%, transparent 35% 100%);
+}
+.zx-select__status-indicator[data-indicator=waiting] {
+  background: conic-gradient(currentColor 0 70%, transparent 70% 100%);
+}
+.zx-select__status-indicator:is([data-indicator=done], [data-indicator=canceled]) {
+  background: currentColor;
+}
+.zx-select__status-indicator:is([data-indicator=done], [data-indicator=canceled]) > .zx-icon {
+  color: var(--zx-color-bg-raised);
+}
+.zx-select__status-indicator[data-indicator=duplicate]::after {
+  content: "";
+  inline-size: 8px;
+  block-size: 2px;
+  border-radius: var(--zx-radius-full);
+  background: currentColor;
+  transform: rotate(-45deg);
+}
+.zx-select__action-content {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+}
+.zx-select__action-icon {
+  display: inline-flex;
+  color: var(--zx-color-text-muted);
+}
+.zx-select__entity,
+.zx-select__entity-none {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+}
+.zx-select__entity-icon {
+  display: inline-flex;
+  flex: none;
+}
+.zx-select__entity-copy {
+  display: grid;
+  min-inline-size: 0;
+}
+.zx-select__entity-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-select__entity-subtitle {
+  overflow: hidden;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-select__entity-none-icon {
+  inline-size: 14px;
+  block-size: 14px;
+  flex: none;
+  border: 2px dotted var(--zx-color-text-muted);
+  border-radius: var(--zx-radius-full);
 }
 @media (prefers-reduced-motion: no-preference) {
   .zx-select__loading {
@@ -3625,6 +4193,20 @@ body:has(> .zx-modal:modal) {
   font-size: var(--zx-text-sm);
   line-height: 1.5;
 }
+.zx-tag-picker__tag[data-colored=true] {
+  border-color: color-mix(in srgb, var(--zx-tag-color) 48%, var(--zx-color-border));
+  background: color-mix(in srgb, var(--zx-tag-color) 14%, var(--zx-color-bg-muted));
+}
+.zx-tag-picker__visual {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  inline-size: 18px;
+  block-size: 18px;
+  border-radius: var(--zx-radius-sm);
+  background: color-mix(in srgb, var(--zx-tag-color, var(--zx-color-accent)) 16%, transparent);
+  color: var(--zx-tag-color, var(--zx-color-accent));
+}
 .zx-tag-picker__tag:not(:has(.zx-tag-picker__remove)) {
   padding-inline-end: var(--zx-space-2);
 }
@@ -3715,6 +4297,9 @@ body:has(> .zx-modal:modal) {
   color: var(--zx-color-accent);
 }
 .zx-tag-picker__option-label {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -4785,6 +5370,88 @@ body:has(> .zx-modal:modal) {
 .zx-table {
   min-inline-size: 0;
 }
+.zx-table__column-controls {
+  position: relative;
+  inline-size: max-content;
+  margin: 0 0 var(--zx-space-2) auto;
+}
+.zx-table__reorder-status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+.zx-table__column-controls > summary {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  list-style: none;
+  cursor: pointer;
+}
+.zx-table__column-controls > summary::-webkit-details-marker {
+  display: none;
+}
+.zx-table__column-list {
+  position: absolute;
+  z-index: 4;
+  inset-block-start: calc(100% + var(--zx-space-1));
+  inset-inline-end: 0;
+  display: grid;
+  min-inline-size: 190px;
+  border: 1px solid var(--zx-color-border-strong);
+  border-radius: var(--zx-radius-md);
+  background: var(--zx-color-bg-raised);
+  box-shadow: var(--zx-overlay-shadow);
+  padding: var(--zx-space-2);
+}
+.zx-table__column-option {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-block-size: var(--zx-control-height);
+  border-radius: var(--zx-radius-sm);
+  padding-inline: var(--zx-space-2);
+}
+.zx-table__column-option:hover {
+  background: var(--zx-color-bg-hover);
+}
+.zx-table__reorder-column,
+.zx-table__reorder-header,
+.zx-table__reorder-cell {
+  inline-size: var(--zx-control-height);
+  text-align: center;
+}
+.zx-table__row-handle {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 26px;
+  block-size: 26px;
+  min-block-size: 0;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: transparent;
+  padding: 0;
+  color: var(--zx-color-text-muted);
+  cursor: grab;
+}
+.zx-table__row-handle:hover,
+.zx-table__row-handle[aria-pressed=true] {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+.zx-table__row-handle:active {
+  cursor: grabbing;
+}
+.zx-table__body tr[data-dragging] {
+  opacity: .55;
+}
+.zx-table__body tr[data-drop=before] {
+  box-shadow: inset 0 2px 0 var(--zx-color-accent);
+}
+.zx-table__body tr[data-drop=after] {
+  box-shadow: inset 0 -2px 0 var(--zx-color-accent);
+}
 .zx-table__scroll {
   position: relative;
   max-inline-size: 100%;
@@ -5074,6 +5741,9 @@ body:has(> .zx-modal:modal) {
 .zx-table[data-stacked] .zx-table__selection-cell {
   justify-content: flex-start;
 }
+.zx-table[data-stacked] .zx-table__reorder-cell {
+  justify-content: flex-start;
+}
 .zx-table[data-stacked] .zx-table__empty-row {
   display: block;
 }
@@ -5094,7 +5764,7 @@ body:has(> .zx-modal:modal) {
 
 /* src/components/grid/grid.css */
 .zx-table[data-preset=billing-items] tr.zx-grid-billing__summary > td {
-  background: var(--zx-color-bg-subtle);
+  background: var(--zx-color-bg-muted);
   font-weight: 700;
 }
 
@@ -5387,6 +6057,135 @@ body:has(> .zx-modal:modal) {
   display: none;
 }
 
+/* src/components/filter/filter.css */
+.zx-filter {
+  display: grid;
+  gap: var(--zx-space-3);
+  color: var(--zx-color-text);
+}
+.zx-filter__status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+.zx-filter__group,
+.zx-filter__group > fieldset {
+  min-inline-size: 0;
+  margin: 0;
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-lg);
+  background: var(--zx-color-bg-surface);
+  padding: var(--zx-space-3);
+}
+.zx-filter__group .zx-filter__group {
+  border: 0;
+  border-inline-start: 3px solid var(--zx-color-border-strong);
+  border-radius: 0;
+  background: transparent;
+  padding: 0 0 0 var(--zx-space-3);
+}
+.zx-filter__legend {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  padding-inline: var(--zx-space-1);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+}
+.zx-filter__logic,
+.zx-filter__field,
+.zx-filter__operator,
+.zx-filter__value input,
+.zx-filter__value select {
+  min-block-size: var(--zx-control-height);
+  border: 1px solid var(--zx-color-border-control);
+  border-radius: var(--zx-control-radius);
+  background: var(--zx-color-bg-control);
+  padding-inline: var(--zx-control-pad-x);
+  color: var(--zx-color-text);
+  font: inherit;
+}
+.zx-filter__logic {
+  inline-size: auto;
+  min-block-size: 28px;
+  font-size: var(--zx-text-sm);
+}
+.zx-filter__children {
+  display: grid;
+  gap: var(--zx-space-2);
+  margin: var(--zx-space-2) 0;
+  padding: 0;
+  list-style: none;
+}
+.zx-filter__condition {
+  display: grid;
+  grid-template-columns: minmax(9rem, 1fr) minmax(9rem, 1fr) minmax(10rem, 1.4fr) auto;
+  align-items: start;
+  gap: var(--zx-space-2);
+  border-radius: var(--zx-radius-md);
+}
+.zx-filter__condition[data-invalid] {
+  outline: 1px solid var(--zx-color-danger);
+  outline-offset: var(--zx-space-1);
+}
+.zx-filter__value {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+.zx-filter__value-control,
+.zx-filter__value-control > input {
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+.zx-filter__value > :only-child,
+.zx-filter__value--empty {
+  grid-column: 1 / -1;
+}
+.zx-filter__value--empty {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--zx-control-height);
+  padding-inline: var(--zx-control-pad-x);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+}
+.zx-filter__group-actions,
+.zx-filter__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zx-space-2);
+}
+.zx-filter__actions {
+  justify-content: flex-end;
+}
+.zx-filter[data-readonly] .zx-filter__group-actions,
+.zx-filter[data-readonly] .zx-filter__actions,
+.zx-filter[data-disabled] .zx-filter__group-actions,
+.zx-filter[data-disabled] .zx-filter__actions {
+  display: none;
+}
+@media (max-width: 680px) {
+  .zx-filter__condition {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .zx-filter__group .zx-filter__group {
+    padding-inline-start: var(--zx-space-2);
+  }
+  .zx-filter__value {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+@media (forced-colors: active) {
+  .zx-filter__group,
+  .zx-filter__condition[data-invalid] {
+    border-color: CanvasText;
+  }
+}
+
 /* src/components/pagination/pagination.css */
 .zx-pagination {
   display: flex;