@zeyos/zx 4.3.0 → 4.3.4

package/dist/zx.css

@@ -3399,29 +3399,30 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-message__toast {
   --zx-message-kind: var(--zx-color-info);
+  --zx-message-fallback-bg: var(--zx-color-info-bg);
   position: relative;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: start;
   gap: var(--zx-space-3);
   border: 1px solid var(--zx-color-overlay-border);
-  border-radius: var(--zx-radius-md);
-  background: var(--zx-color-info-bg);
+  border-radius: var(--zx-radius-lg);
+  background: var(--zx-message-fallback-bg);
   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);
 }
 .zx-message__toast[data-kind=success] {
   --zx-message-kind: var(--zx-color-success);
-  background: var(--zx-color-success-bg);
+  --zx-message-fallback-bg: var(--zx-color-success-bg);
 }
 .zx-message__toast[data-kind=warning] {
   --zx-message-kind: var(--zx-color-warning);
-  background: var(--zx-color-warning-bg);
+  --zx-message-fallback-bg: var(--zx-color-warning-bg);
 }
 .zx-message__toast[data-kind=error] {
   --zx-message-kind: var(--zx-color-danger);
-  background: var(--zx-color-danger-bg);
+  --zx-message-fallback-bg: var(--zx-color-danger-bg);
 }
 @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .zx-message__toast {
@@ -3431,28 +3432,17 @@ button.zx-panel__toggle:focus-visible {
     background-clip: padding-box;
     -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
     backdrop-filter: var(--zx-glass-filter-overlay);
-    box-shadow: var(--zx-glass-overlay-shadow);
+    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--zx-message-kind) 72%, var(--zx-color-glass-highlight-strong)), var(--zx-glass-overlay-shadow);
   }
 }
 @media (prefers-reduced-transparency: reduce) {
   .zx-message__toast {
     border-color: var(--zx-color-border);
+    background: var(--zx-message-fallback-bg);
     -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);
-  }
-  .zx-message__toast[data-kind=error] {
-    background: var(--zx-color-danger-bg);
-  }
 }
 .zx-message__icon {
   display: inline-grid;
@@ -6091,14 +6081,14 @@ body:has(.zx-modal:modal) {
   min-inline-size: 0;
   overflow: hidden;
   border: 1px solid var(--zx-color-border);
-  border-radius: var(--zx-radius-lg);
+  border-radius: 0;
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
   font-size: var(--zx-text-sm);
 }
 .zx-calendar__toolbar {
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--zx-space-3);
   min-inline-size: 0;
@@ -6121,7 +6111,12 @@ body:has(.zx-modal:modal) {
   gap: var(--zx-space-3);
 }
 .zx-calendar__views {
+  block-size: var(--zx-control-height);
+  gap: 2px;
   overflow-x: auto;
+  border-radius: 0;
+  background: var(--zx-color-bg-muted);
+  padding: 3px;
 }
 .zx-calendar__toolbar-button,
 .zx-calendar__view-button,
@@ -6146,24 +6141,20 @@ body:has(.zx-modal:modal) {
   padding-inline: var(--zx-space-2);
 }
 .zx-calendar__view-button {
-  border-inline-end-width: 0;
+  block-size: 100%;
+  min-block-size: 0;
+  border-color: transparent;
+  border-radius: 0;
+  background: transparent;
   padding-inline: var(--zx-space-3);
 }
-.zx-calendar__view-button:first-child {
-  border-start-start-radius: var(--zx-control-radius);
-  border-end-start-radius: var(--zx-control-radius);
-}
-.zx-calendar__view-button:last-child {
-  border-inline-end-width: 1px;
-  border-start-end-radius: var(--zx-control-radius);
-  border-end-end-radius: var(--zx-control-radius);
-}
 .zx-calendar__view-button[aria-pressed=true] {
   position: relative;
   z-index: 1;
-  border-color: var(--zx-color-accent);
-  background: var(--zx-color-bg-selected);
-  color: var(--zx-color-accent);
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+  box-shadow: var(--zx-shadow-2);
+  color: var(--zx-color-text);
 }
 .zx-calendar__new {
   gap: var(--zx-space-2);
@@ -6175,7 +6166,7 @@ body:has(.zx-modal:modal) {
   font-weight: 650;
 }
 .zx-calendar__toolbar-button:hover:not(:disabled),
-.zx-calendar__view-button:hover:not(:disabled) {
+.zx-calendar__view-button:hover:not(:disabled):not([aria-pressed=true]) {
   background: var(--zx-color-bg-hover);
 }
 .zx-calendar__new:hover:not(:disabled) {
@@ -6246,6 +6237,7 @@ body:has(.zx-modal:modal) {
   min-block-size: calc(var(--zx-control-height) + var(--zx-space-2));
   place-content: center;
   border: 0;
+  border-radius: 0;
   border-inline-end: 1px solid var(--zx-color-border);
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
@@ -6336,6 +6328,7 @@ body:has(.zx-modal:modal) {
 .zx-calendar__slot {
   min-inline-size: 0;
   border: 0;
+  border-radius: 0;
   border-block-start: 1px solid var(--zx-color-border);
   border-inline-end: 1px solid var(--zx-color-border);
   background: var(--zx-color-bg-surface);
@@ -7450,8 +7443,12 @@ body:has(.zx-modal:modal) {
 
 /* src/components/card-view/card-view.css */
 .zx-card-view {
-  --zx-card-view-min-card-width: 18rem;
+  --zx-card-view-min-card-width: 15rem;
   --zx-card-view-column-basis: 0%;
+  --zx-card-view-card-padding: var(--zx-space-3);
+  --zx-card-view-card-gap: var(--zx-space-2);
+  --zx-card-view-grid-gap: var(--zx-space-3);
+  --zx-card-view-preview-size: 1.75rem;
   inline-size: 100%;
   min-inline-size: 0;
   container-type: inline-size;
@@ -7488,18 +7485,19 @@ body:has(.zx-modal:modal) {
   min-inline-size: 0;
 }
 .zx-card-view__group + .zx-card-view__group {
-  margin-block-start: var(--zx-space-6);
+  margin-block-start: var(--zx-space-4);
 }
 .zx-card-view__group-heading {
-  margin: 0 0 var(--zx-space-3);
+  margin: 0 0 var(--zx-space-2);
   color: var(--zx-color-text);
-  font-size: var(--zx-text-lg);
-  line-height: 1.35;
+  font-size: var(--zx-text-sm);
+  font-weight: 600;
+  line-height: 1.3;
 }
 .zx-card-view__list {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--zx-card-view-min-card-width), calc(var(--zx-card-view-column-basis) - var(--zx-space-4)))), 1fr));
-  gap: var(--zx-space-4);
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--zx-card-view-min-card-width), calc(var(--zx-card-view-column-basis) - var(--zx-card-view-grid-gap)))), 1fr));
+  gap: var(--zx-card-view-grid-gap);
   min-inline-size: 0;
   margin: 0;
   padding: 0;
@@ -7535,7 +7533,7 @@ body:has(.zx-modal:modal) {
   outline: none;
   box-shadow: var(--zx-focus-ring);
 }
-.zx-record-card[aria-selected=true] {
+.zx-record-card[data-selected=true] {
   border-color: var(--zx-color-accent);
   box-shadow: inset 0 0 0 1px var(--zx-color-accent);
 }
@@ -7602,6 +7600,35 @@ body:has(.zx-modal:modal) {
   flex: 1 1 auto;
   min-inline-size: 0;
 }
+.zx-record-card__eyebrow {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+.zx-record-card__eyebrow-group,
+.zx-record-card__title-prefix {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--zx-space-1);
+  min-inline-size: 0;
+  margin: 0;
+}
+.zx-record-card__eyebrow-group[data-card-slot=eyebrow-end] {
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+.zx-record-card__title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+.zx-record-card__title-row > .zx-record-card__heading {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
 .zx-record-card__heading {
   margin: 0;
   overflow-wrap: anywhere;
@@ -7781,13 +7808,154 @@ body:has(.zx-modal:modal) {
       box-shadow var(--zx-dur-fast) var(--zx-ease);
   }
 }
+.zx-card-view .zx-record-card {
+  border-radius: var(--zx-radius-md);
+}
+.zx-card-view .zx-record-card:has(> .zx-record-card__preview) {
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+}
+.zx-card-view .zx-record-card__preview {
+  inline-size: var(--zx-card-view-preview-size);
+  block-size: var(--zx-card-view-preview-size);
+  margin-block-start: var(--zx-card-view-card-padding);
+  margin-inline-start: var(--zx-card-view-card-padding);
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  aspect-ratio: 1;
+}
+.zx-card-view .zx-record-card__preview .zx-icon {
+  inline-size: .875rem;
+  block-size: .875rem;
+}
+.zx-card-view .zx-record-card__body {
+  gap: var(--zx-card-view-card-gap);
+  padding: var(--zx-card-view-card-padding);
+}
+.zx-card-view .zx-record-card:has(> .zx-record-card__preview) .zx-record-card__body {
+  padding-inline-start: var(--zx-card-view-card-gap);
+}
+.zx-card-view .zx-record-card__header {
+  gap: var(--zx-space-2);
+}
+.zx-card-view .zx-record-card__selection {
+  min-block-size: 1.25rem;
+}
+.zx-card-view .zx-record-card__heading {
+  font-size: var(--zx-text-md);
+  font-weight: 600;
+  line-height: 1.3;
+}
+.zx-card-view .zx-record-card__primary,
+.zx-card-view .zx-record-card__title {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.zx-card-view .zx-record-card__subtitle {
+  margin-block-start: calc(var(--zx-space-1) / 2);
+  overflow: hidden;
+  font-size: var(--zx-text-xs);
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-card-view .zx-record-card__actions {
+  flex-wrap: nowrap;
+  gap: calc(var(--zx-space-1) / 2);
+}
+.zx-card-view .zx-record-card__action {
+  min-block-size: 1.75rem;
+  border-color: transparent;
+  background: transparent;
+  padding-inline: var(--zx-space-2);
+  font-size: var(--zx-text-xs);
+}
+.zx-card-view .zx-record-card__metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zx-space-1);
+}
+.zx-card-view .zx-record-card__field {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: var(--zx-space-1);
+  max-inline-size: 100%;
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-bg-muted);
+  padding: calc(var(--zx-space-1) / 2) var(--zx-space-2);
+}
+.zx-card-view .zx-record-card__label {
+  flex: none;
+  font-size: var(--zx-text-xs);
+  font-weight: 500;
+  line-height: 1.2;
+}
+.zx-card-view .zx-record-card__value {
+  overflow: hidden;
+  font-size: var(--zx-text-xs);
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-card-view .zx-card-view__group-empty {
+  padding: var(--zx-space-3);
+  font-size: var(--zx-text-sm);
+}
+.zx-card-view .zx-card-view__empty {
+  min-block-size: 6rem;
+  border-radius: var(--zx-radius-md);
+  padding: var(--zx-space-4);
+  font-size: var(--zx-text-sm);
+}
+.zx-card-view .zx-card-view__skeleton {
+  grid-template-columns: var(--zx-card-view-preview-size) minmax(0, 1fr);
+  gap: var(--zx-card-view-card-gap);
+  padding: var(--zx-card-view-card-padding);
+}
+.zx-card-view .zx-card-view__skeleton-preview {
+  grid-row: 1 / span 2;
+  inline-size: var(--zx-card-view-preview-size);
+  margin: 0;
+  aspect-ratio: 1;
+  border-radius: var(--zx-radius-sm);
+}
+.zx-card-view .zx-card-view__skeleton-line {
+  min-inline-size: 0;
+  block-size: .625rem;
+}
+.zx-card-view .zx-card-view__skeleton-line:nth-child(3) {
+  inline-size: 62%;
+}
+.zx-card-view .zx-card-view__skeleton-line:nth-child(4) {
+  grid-column: 1 / -1;
+  inline-size: 42%;
+}
+@media (pointer: coarse) {
+  .zx-card-view .zx-record-card__selection,
+  .zx-card-view .zx-record-card__action {
+    min-inline-size: 44px;
+    min-block-size: 44px;
+  }
+}
 
 /* src/components/kanban-view/kanban-view.css */
 .zx-kanban-view {
+  --zx-kanban-column-width: 18.5rem;
+  --zx-kanban-thumbnail-size: 2rem;
+  --zx-kanban-card-padding-block: var(--zx-space-2);
+  --zx-kanban-card-padding-inline: var(--zx-space-3);
+  --zx-kanban-card-gap: var(--zx-space-2);
   inline-size: 100%;
   min-inline-size: 0;
   container-type: inline-size;
 }
+.zx-kanban-view__toolbar {
+  margin-block-end: var(--zx-space-1);
+}
 .zx-kanban-view__toolbar:empty {
   display: none;
 }
@@ -7795,53 +7963,56 @@ body:has(.zx-modal:modal) {
   min-inline-size: 0;
   overflow: auto;
   overscroll-behavior-inline: contain;
-  border: 1px solid var(--zx-color-border);
-  border-radius: var(--zx-radius-lg);
-  background: var(--zx-color-bg-muted);
-  padding: var(--zx-space-3);
   scrollbar-gutter: stable;
 }
 .zx-kanban-view__lane + .zx-kanban-view__lane {
-  margin-block-start: var(--zx-space-4);
+  margin-block-start: var(--zx-space-3);
   border-block-start: 1px solid var(--zx-color-border);
-  padding-block-start: var(--zx-space-3);
+  padding-block-start: var(--zx-space-2);
 }
 .zx-kanban-view__lane-heading,
 .zx-kanban-view__column-heading {
   display: flex;
   align-items: center;
-  gap: var(--zx-space-2);
+  min-inline-size: 0;
   margin: 0;
   color: var(--zx-color-text);
-  font-size: var(--zx-text-md);
+  font-size: var(--zx-text-sm);
   font-weight: var(--zx-control-font-weight);
-  line-height: 1.3;
+  line-height: 1.25;
 }
 .zx-kanban-view__lane-heading {
+  min-block-size: 2rem;
+  gap: var(--zx-space-1);
+  margin-block-end: var(--zx-space-1);
+}
+.zx-kanban-view__column-heading {
+  min-block-size: 2rem;
+  gap: var(--zx-space-1);
   margin-block-end: var(--zx-space-2);
 }
 .zx-kanban-view__columns {
   display: grid;
   grid-auto-flow: column;
-  grid-auto-columns: minmax(260px, min(82vw, 340px));
+  grid-auto-columns: minmax(18rem, var(--zx-kanban-column-width));
   align-items: start;
-  gap: var(--zx-space-3);
+  gap: var(--zx-space-4);
   min-inline-size: max-content;
 }
+.zx-kanban-view__columns[hidden],
+.zx-kanban-view__cards[hidden] {
+  display: none;
+}
 .zx-kanban-view__column {
   display: grid;
-  grid-template-rows: auto minmax(64px, auto);
-  gap: var(--zx-space-2);
+  grid-template-rows: auto minmax(4rem, auto);
   min-inline-size: 0;
-  border: 1px solid var(--zx-color-border);
-  border-radius: var(--zx-radius-md);
-  background: var(--zx-color-bg-surface);
-  padding: var(--zx-space-2);
 }
 .zx-kanban-view__column[data-collapsed=true] {
   grid-template-rows: auto;
 }
 .zx-kanban-view__column-label {
+  order: 1;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -7849,6 +8020,7 @@ body:has(.zx-modal:modal) {
 }
 .zx-kanban-view__collapse,
 .zx-kanban-view__move-handle {
+  position: relative;
   display: inline-grid;
   flex: 0 0 auto;
   place-items: center;
@@ -7859,12 +8031,14 @@ body:has(.zx-modal:modal) {
   cursor: pointer;
 }
 .zx-kanban-view__collapse {
-  inline-size: 26px;
-  block-size: 26px;
+  order: 3;
+  inline-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  margin-inline-start: auto;
 }
 .zx-kanban-view__move-handle {
-  inline-size: 28px;
-  block-size: 28px;
+  inline-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  block-size: calc(var(--zx-control-height) - var(--zx-space-1));
   cursor: grab;
   touch-action: none;
 }
@@ -7885,38 +8059,222 @@ body:has(.zx-modal:modal) {
   box-shadow: var(--zx-focus-ring);
 }
 .zx-kanban-view__count {
+  order: 2;
   flex: 0 0 auto;
-  margin-inline-start: auto;
-  border-radius: var(--zx-radius-sm);
-  background: var(--zx-color-bg-muted);
-  padding: var(--zx-space-1) var(--zx-space-2);
   color: var(--zx-color-text-muted);
-  font-size: var(--zx-control-font-size);
-  font-weight: var(--zx-control-font-weight);
+  font-size: var(--zx-text-xs);
+  font-weight: 400;
+  line-height: 1.25;
   white-space: nowrap;
 }
 .zx-kanban-view__column[data-wip=limit] .zx-kanban-view__count {
-  background: var(--zx-color-warning-bg);
   color: var(--zx-color-warning);
+  font-weight: 600;
 }
 .zx-kanban-view__column[data-wip=exceeded] .zx-kanban-view__count {
-  background: var(--zx-color-danger-bg);
   color: var(--zx-color-danger);
+  font-weight: 600;
+}
+.zx-kanban-view__lane[data-wip=limit] > .zx-kanban-view__lane-heading .zx-kanban-view__count {
+  color: var(--zx-color-warning);
+  font-weight: 600;
+}
+.zx-kanban-view__lane[data-wip=exceeded] > .zx-kanban-view__lane-heading .zx-kanban-view__count {
+  color: var(--zx-color-danger);
+  font-weight: 600;
 }
 .zx-kanban-view__cards {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--zx-space-2);
-  min-block-size: 64px;
+  min-block-size: 4rem;
   margin: 0;
-  border-radius: var(--zx-radius-sm);
-  padding: var(--zx-space-1);
+  padding: 0;
   list-style: none;
 }
 .zx-kanban-view__cards > .zx-record-card {
   inline-size: 100%;
   min-inline-size: 0;
+  overflow: visible;
+  border-radius: var(--zx-radius-md);
+}
+.zx-kanban-view :where(.zx-record-card[data-variant=outlined]) {
+  box-shadow: var(--zx-shadow-1);
+}
+.zx-kanban-view .zx-record-card:has(> .zx-record-card__preview) {
+  grid-template-columns: var(--zx-kanban-thumbnail-size) minmax(0, 1fr);
+  align-items: start;
+  column-gap: var(--zx-space-2);
+  padding-block: var(--zx-kanban-card-padding-block);
+  padding-inline: var(--zx-kanban-card-padding-inline);
+}
+.zx-kanban-view .zx-record-card > .zx-record-card__preview {
+  inline-size: var(--zx-kanban-thumbnail-size);
+  block-size: var(--zx-kanban-thumbnail-size);
+  aspect-ratio: 1;
+  align-self: start;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+}
+.zx-kanban-view .zx-record-card:has(> .zx-record-card__preview) > .zx-record-card__body {
+  padding: 0;
+}
+.zx-kanban-view .zx-record-card:not(:has(> .zx-record-card__preview)) > .zx-record-card__body {
+  padding-block: var(--zx-kanban-card-padding-block);
+  padding-inline: var(--zx-kanban-card-padding-inline);
+}
+.zx-kanban-view .zx-record-card__body {
+  gap: var(--zx-kanban-card-gap);
+}
+.zx-kanban-view .zx-record-card__header {
+  gap: var(--zx-space-2);
+}
+.zx-kanban-view .zx-record-card__selection {
+  min-block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+}
+.zx-kanban-view .zx-record-card__heading {
+  display: -webkit-box;
+  overflow: hidden;
+  font-size: var(--zx-text-md);
+  font-weight: 600;
+  line-height: 1.3;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.zx-kanban-view .zx-record-card__subtitle {
+  margin-block-start: var(--zx-space-1);
+  overflow: hidden;
+  font-size: var(--zx-text-xs);
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-kanban-view .zx-record-card__actions {
+  gap: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.zx-kanban-view .zx-record-card:hover .zx-record-card__actions,
+.zx-kanban-view .zx-record-card:focus-within .zx-record-card__actions,
+.zx-kanban-view .zx-record-card[data-selected=true] .zx-record-card__actions,
+.zx-kanban-view .zx-record-card[data-grabbed=true] .zx-record-card__actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+.zx-kanban-view .zx-record-card__action {
+  inline-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  min-block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  padding: 0;
+}
+.zx-kanban-view .zx-record-card__action-label {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.zx-kanban-view .zx-record-card__metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zx-space-2);
+}
+.zx-kanban-view .zx-record-card__field {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  min-block-size: 0;
+  border: 0;
+  padding: 0;
+}
+.zx-kanban-view .zx-record-card__label,
+.zx-kanban-view .zx-record-card__value {
+  overflow: hidden;
+  font-size: var(--zx-text-xs);
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-kanban-view .zx-record-card__label {
+  flex: none;
+  color: var(--zx-color-text-muted);
+  font-weight: 500;
+}
+.zx-kanban-view .zx-record-card__value {
+  min-inline-size: 0;
+}
+.zx-kanban-view .zx-record-card__eyebrow {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-block-size: 1.25rem;
+  min-inline-size: 0;
+}
+.zx-kanban-view .zx-record-card__eyebrow-group,
+.zx-kanban-view .zx-record-card__title-prefix {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+  min-inline-size: 0;
+  margin: 0;
+}
+.zx-kanban-view .zx-record-card__eyebrow-group[data-card-slot=eyebrow-end] {
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+.zx-kanban-view .zx-record-card__eyebrow-group .zx-record-card__label,
+.zx-kanban-view .zx-record-card__title-prefix .zx-record-card__label {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.zx-kanban-view .zx-record-card__eyebrow-group[data-card-slot=eyebrow-start] .zx-record-card__field {
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-bg-muted);
+  padding: calc(var(--zx-space-1) / 2) var(--zx-space-2);
+}
+.zx-kanban-view .zx-record-card__eyebrow-group .zx-record-card__value {
+  color: var(--zx-color-text-muted);
+}
+.zx-kanban-view .zx-record-card__eyebrow-group .zx-record-card__value > :only-child {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+  min-inline-size: 0;
+}
+.zx-kanban-view .zx-record-card__title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+.zx-kanban-view .zx-record-card__title-row .zx-record-card__heading {
+  min-inline-size: 0;
+}
+.zx-kanban-view .zx-record-card__title-prefix {
+  flex: none;
+  padding-block-start: calc(var(--zx-space-1) + 1px);
+}
+.zx-kanban-view .zx-record-card__title-prefix .zx-record-card__value {
+  display: grid;
+  place-items: center;
+  color: var(--zx-color-accent);
+  line-height: 1;
+}
+.zx-kanban-view .zx-record-card__title-prefix .zx-icon {
+  inline-size: .5rem;
+  block-size: .5rem;
+}
+.zx-kanban-view .zx-record-card__title-prefix .zx-badge {
+  border: 0;
+  background: transparent;
+  padding: 0;
 }
 .zx-kanban-view__cards[data-drop=append],
 .zx-kanban-view__cards[data-keyboard-target=append] {
@@ -7939,7 +8297,7 @@ body:has(.zx-modal:modal) {
 .zx-kanban-view__empty {
   display: grid;
   place-items: center;
-  min-block-size: 160px;
+  min-block-size: 6rem;
   color: var(--zx-color-text-muted);
   text-align: center;
 }
@@ -7955,14 +8313,38 @@ body:has(.zx-modal:modal) {
   pointer-events: none;
 }
 @container (max-width: 420px) {
-  .zx-kanban-view__columns {
-    grid-auto-columns: minmax(240px, 88vw);
+  .zx-kanban-view .zx-record-card__label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
   }
 }
+@media (hover: none), (pointer: coarse) {
+  .zx-kanban-view .zx-record-card__actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+@media (pointer: coarse) {
+  .zx-kanban-view__collapse,
+  .zx-kanban-view__move-handle,
+  .zx-kanban-view .zx-record-card__action,
+  .zx-kanban-view .zx-record-card__selection {
+    inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+  }
+}
+[data-zx-density=compact] .zx-kanban-view {
+  --zx-kanban-card-padding-inline: var(--zx-space-2);
+}
 @media (prefers-reduced-motion: no-preference) {
   .zx-kanban-view__collapse,
   .zx-kanban-view__move-handle,
-  .zx-kanban-view .zx-record-card {
+  .zx-kanban-view .zx-record-card,
+  .zx-kanban-view .zx-record-card__actions {
     transition:
       color var(--zx-dur-fast) var(--zx-ease),
       background var(--zx-dur-fast) var(--zx-ease),
@@ -7970,6 +8352,143 @@ body:has(.zx-modal:modal) {
       opacity var(--zx-dur-fast) var(--zx-ease);
   }
 }
+.zx-kanban-view__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--zx-space-2);
+}
+.zx-kanban-view__search {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+  min-inline-size: 0;
+}
+.zx-kanban-view__search > .zx-icon {
+  position: absolute;
+  inset-inline-start: var(--zx-control-pad-x);
+  color: var(--zx-color-text-muted);
+  pointer-events: none;
+}
+.zx-kanban-view__search-input {
+  min-inline-size: 12rem;
+  max-inline-size: 100%;
+  padding-inline-start: calc(var(--zx-control-pad-x) * 2 + 13px);
+}
+.zx-kanban-view__search-input::-webkit-search-cancel-button {
+  cursor: pointer;
+}
+.zx-kanban-view__history {
+  display: inline-flex;
+  gap: var(--zx-space-1);
+  margin-inline-start: auto;
+}
+.zx-kanban-view[data-column-scroll=true] .zx-kanban-view__cards {
+  max-block-size: var(--zx-kanban-column-height);
+  overflow-y: auto;
+  overscroll-behavior-block: contain;
+  scrollbar-gutter: stable;
+}
+.zx-kanban-view__add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--zx-space-1);
+  margin-block-start: var(--zx-space-2);
+  border: 1px dashed var(--zx-color-border);
+  border-radius: var(--zx-radius-md);
+  background: transparent;
+  padding-block: var(--zx-space-1);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  cursor: pointer;
+}
+.zx-kanban-view__add:hover {
+  border-color: var(--zx-color-border-strong);
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+.zx-kanban-view__add:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-kanban-view__add[hidden] {
+  display: none;
+}
+.zx-kanban-view__column-empty {
+  display: grid;
+  place-items: center;
+  min-block-size: 4rem;
+  padding: var(--zx-space-2);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  text-align: center;
+}
+.zx-kanban-view .zx-record-card[data-rule-tone] {
+  position: relative;
+  overflow: hidden;
+}
+.zx-kanban-view .zx-record-card[data-rule-tone]::before {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inline-size: 3px;
+  background: var(--zx-color-border-strong);
+  content: "";
+}
+.zx-kanban-view .zx-record-card[data-rule-tone=accent]::before {
+  background: var(--zx-color-accent);
+}
+.zx-kanban-view .zx-record-card[data-rule-tone=success]::before {
+  background: var(--zx-color-success);
+}
+.zx-kanban-view .zx-record-card[data-rule-tone=warning]::before {
+  background: var(--zx-color-warning);
+}
+.zx-kanban-view .zx-record-card[data-rule-tone=danger]::before {
+  background: var(--zx-color-danger);
+}
+.zx-kanban-view .zx-record-card[data-rule-tone=info]::before {
+  background: var(--zx-color-info);
+}
+.zx-kanban-view__rules {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zx-space-1);
+  margin: 0;
+}
+.zx-kanban-view__board[data-dragging=true] {
+  cursor: grabbing;
+  user-select: none;
+}
+.zx-kanban-view__board[data-dragging=true] .zx-record-card {
+  cursor: grabbing;
+}
+.zx-kanban-view__drag-preview {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: 2;
+  max-inline-size: var(--zx-kanban-column-width);
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-md);
+  background: var(--zx-color-bg-raised);
+  box-shadow: var(--zx-shadow-2);
+  padding: var(--zx-space-1) var(--zx-space-2);
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  translate: var(--zx-space-3) var(--zx-space-3);
+}
+@media (pointer: coarse) {
+  .zx-kanban-view__add {
+    min-block-size: 2.75rem;
+  }
+}
 
 /* src/components/grid/grid.css */
 .zx-table[data-preset=billing-items] tr.zx-grid-billing__summary > td {