@zvk/composite 0.1.1

package/dist/styles.css

@@ -0,0 +1,1220 @@
+/* src/styles.css */
+@layer zvk-composite-components;
+
+/* src/layout/page-scaffold.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-page-scaffold) {
+    --zvk-composite-page-scaffold-max-width: 80rem;
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    font-family: var(--zvk-ui-font-family-sans);
+    gap: var(--zvk-ui-space-5);
+    inline-size: min(100%, var(--zvk-composite-page-scaffold-max-width));
+    margin-inline: auto;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-page-scaffold[data-max-width="sm"]) {
+    --zvk-composite-page-scaffold-max-width: 40rem;
+  }
+
+  :where(.zvk-composite-page-scaffold[data-max-width="md"]) {
+    --zvk-composite-page-scaffold-max-width: 56rem;
+  }
+
+  :where(.zvk-composite-page-scaffold[data-max-width="lg"]) {
+    --zvk-composite-page-scaffold-max-width: 68rem;
+  }
+
+  :where(.zvk-composite-page-scaffold[data-max-width="xl"]) {
+    --zvk-composite-page-scaffold-max-width: 80rem;
+  }
+
+  :where(.zvk-composite-page-scaffold[data-max-width="full"]) {
+    --zvk-composite-page-scaffold-max-width: 100%;
+  }
+
+  :where(.zvk-composite-page-scaffold__header) {
+    border-block-end: 1px solid var(--zvk-ui-color-border);
+    padding-block-end: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-page-scaffold__header--controls-only) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    justify-content: space-between;
+  }
+
+  :where(.zvk-composite-page-scaffold__toolbar),
+  :where(.zvk-composite-page-scaffold__actions) {
+    align-items: center;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-page-scaffold__state) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-page-scaffold__grid) {
+    align-items: start;
+    display: grid;
+    gap: var(--zvk-ui-space-5);
+    grid-template-columns: minmax(0, 1fr);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-page-scaffold[data-with-aside="true"] .zvk-composite-page-scaffold__grid) {
+    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
+  }
+
+  :where(.zvk-composite-page-scaffold__main) {
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-page-scaffold__aside) {
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--zvk-ui-color-primary) 5%, transparent), transparent 10rem),
+      var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-md);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-page-scaffold__footer) {
+    border-block-start: 1px solid var(--zvk-ui-color-border);
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    padding-block-start: var(--zvk-ui-space-4);
+  }
+
+  @media (max-width: 64rem) {
+    :where(.zvk-composite-page-scaffold[data-with-aside="true"] .zvk-composite-page-scaffold__grid) {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+
+/* src/navigation/app-workspace-shell.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-app-workspace-shell) {
+    background:
+      linear-gradient(135deg, color-mix(in srgb, var(--zvk-ui-color-primary) 6%, transparent), transparent 32rem),
+      var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-sm);
+    color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-sans);
+    gap: var(--zvk-ui-space-5);
+    min-block-size: 100%;
+    overflow: clip;
+  }
+
+  :where(.zvk-composite-app-workspace-shell__sidebar) {
+    align-content: start;
+    background: color-mix(in srgb, var(--zvk-ui-color-muted) 68%, transparent);
+    border-inline-end: 1px solid var(--zvk-ui-color-border-subtle);
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    padding: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-app-workspace-shell__brand) {
+    align-items: center;
+    border-block-end: 1px solid var(--zvk-ui-color-border);
+    color: var(--zvk-ui-color-foreground);
+    display: flex;
+    font-size: var(--zvk-ui-font-size-lg);
+    font-weight: 700;
+    gap: var(--zvk-ui-space-2);
+    letter-spacing: 0;
+    min-block-size: var(--zvk-ui-control-height-lg);
+    min-inline-size: 0;
+    padding-block-end: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-app-workspace-shell__workspace-switcher),
+  :where(.zvk-composite-app-workspace-shell__navigation) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-app-workspace-shell__main) {
+    gap: var(--zvk-ui-space-4);
+    min-block-size: 0;
+    padding: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-app-workspace-shell__header) {
+    align-items: center;
+    background:
+      linear-gradient(90deg, color-mix(in srgb, var(--zvk-ui-color-primary) 7%, transparent), transparent 60%),
+      color-mix(in srgb, var(--zvk-ui-color-surface-raised) 92%, transparent);
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-md);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: minmax(0, 1fr) minmax(12rem, 24rem) auto;
+    padding: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-app-workspace-shell__header-content),
+  :where(.zvk-composite-app-workspace-shell__command-palette),
+  :where(.zvk-composite-app-workspace-shell__account-menu) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-app-workspace-shell__account-menu) {
+    justify-self: end;
+  }
+
+  :where(.zvk-composite-app-workspace-shell__content) {
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-app-workspace-shell__footer) {
+    border-block-start: 1px solid var(--zvk-ui-color-border);
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    padding-block-start: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-app-workspace-shell__mobile-nav) {
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-md);
+    display: none;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-app-workspace-shell__mobile-nav-summary) {
+    color: var(--zvk-ui-color-foreground);
+    cursor: pointer;
+    font-size: var(--zvk-ui-font-size-sm);
+    font-weight: 700;
+    list-style: none;
+    padding: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-app-workspace-shell__mobile-nav-summary::-webkit-details-marker) {
+    display: none;
+  }
+
+  :where(.zvk-composite-app-workspace-shell__mobile-nav-summary:focus-visible) {
+    box-shadow: var(--zvk-ui-focus-ring);
+    outline: 0;
+  }
+
+  :where(.zvk-composite-app-workspace-shell__mobile-nav-content) {
+    border-block-start: 1px solid var(--zvk-ui-color-border);
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    padding: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-app-workspace-shell__mobile-nav-context) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+  }
+
+  @media (max-width: 48rem) {
+    :where(.zvk-composite-app-workspace-shell__sidebar) {
+      display: none;
+    }
+
+    :where(.zvk-composite-app-workspace-shell__mobile-nav) {
+      display: block;
+    }
+
+    :where(.zvk-composite-app-workspace-shell__header) {
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-app-workspace-shell__main) {
+      padding: var(--zvk-ui-space-3);
+    }
+
+    :where(.zvk-composite-app-workspace-shell__account-menu) {
+      justify-self: start;
+    }
+  }
+}
+
+
+/* src/navigation/sectioned-workspace-shell.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-sectioned-workspace-shell) {
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    font-family: var(--zvk-ui-font-family-sans);
+    gap: var(--zvk-ui-space-5);
+    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
+    min-block-size: 100%;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__sidebar) {
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--zvk-ui-color-primary) 5%, transparent), transparent 12rem),
+      var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-md);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    min-inline-size: 0;
+    padding: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__body) {
+    display: grid;
+    gap: var(--zvk-ui-space-5);
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__header) {
+    border-block-end: 1px solid var(--zvk-ui-color-border);
+    padding-block-end: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__content) {
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-block-size: 0;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__footer) {
+    border-block-start: 1px solid var(--zvk-ui-color-border);
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    padding-block-start: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__nav-item-content) {
+    display: grid;
+    gap: var(--zvk-ui-space-1);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__nav-item-label),
+  :where(.zvk-composite-sectioned-workspace-shell__nav-item-description) {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where(.zvk-composite-sectioned-workspace-shell__nav-item-description) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    line-height: var(--zvk-ui-line-height-tight);
+  }
+
+  @media (max-width: 56rem) {
+    :where(.zvk-composite-sectioned-workspace-shell) {
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-sectioned-workspace-shell__body) {
+      order: 1;
+    }
+
+    :where(.zvk-composite-sectioned-workspace-shell__sidebar) {
+      order: 2;
+    }
+  }
+}
+
+
+/* src/navigation/workspace-header.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-workspace-header) {
+    align-items: start;
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    grid-template-columns: minmax(0, 1fr) auto;
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-workspace-header[data-align="center"]) {
+    align-items: center;
+  }
+
+  :where(.zvk-composite-workspace-header__content) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-workspace-header__kicker) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-workspace-header__eyebrow) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    font-weight: 700;
+    letter-spacing: 0;
+    line-height: var(--zvk-ui-line-height-tight);
+    text-transform: uppercase;
+  }
+
+  :where(.zvk-composite-workspace-header__status) {
+    align-items: center;
+    background: color-mix(in srgb, var(--zvk-ui-color-primary) 10%, var(--zvk-ui-color-surface));
+    border: 1px solid color-mix(in srgb, var(--zvk-ui-color-primary) 26%, var(--zvk-ui-color-border));
+    border-radius: var(--zvk-ui-radius-full);
+    color: var(--zvk-ui-color-foreground);
+    display: inline-flex;
+    font-size: var(--zvk-ui-font-size-xs);
+    font-weight: 600;
+    line-height: var(--zvk-ui-line-height-tight);
+    min-block-size: 1.5rem;
+    padding-inline: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-composite-workspace-header__title) {
+    color: var(--zvk-ui-color-foreground);
+    font-size: clamp(var(--zvk-ui-font-size-xl), 2vw, var(--zvk-ui-font-size-2xl));
+    font-weight: 800;
+    letter-spacing: 0;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  :where(.zvk-composite-workspace-header__body) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    max-inline-size: 72ch;
+  }
+
+  :where(.zvk-composite-workspace-header__description) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    line-height: var(--zvk-ui-line-height-relaxed);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-workspace-header__meta) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-workspace-header__controls) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    justify-content: end;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-workspace-header__toolbar),
+  :where(.zvk-composite-workspace-header__actions) {
+    align-items: center;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-breadcrumb-page-header) {
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    min-inline-size: 0;
+  }
+
+  @media (max-width: 48rem) {
+    :where(.zvk-composite-workspace-header) {
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-workspace-header__controls) {
+      justify-content: start;
+    }
+  }
+}
+
+
+/* src/state/state-surface.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-state-surface) {
+    --zvk-composite-state-surface-accent: var(--zvk-ui-color-muted-foreground);
+    align-items: center;
+    background:
+      radial-gradient(circle at top right, color-mix(in srgb, var(--zvk-composite-state-surface-accent) 13%, transparent), transparent 14rem),
+      var(--zvk-ui-color-surface);
+    border: 1px solid color-mix(in srgb, var(--zvk-composite-state-surface-accent) 24%, var(--zvk-ui-color-border));
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    justify-items: center;
+    min-block-size: 12rem;
+    overflow: clip;
+    padding: var(--zvk-ui-space-6);
+    position: relative;
+  }
+
+  :where(.zvk-composite-state-surface)::before {
+    background: var(--zvk-composite-state-surface-accent);
+    block-size: 0.1875rem;
+    content: "";
+    inline-size: 100%;
+    inset-block-start: 0;
+    inset-inline: 0;
+    opacity: 0.74;
+    position: absolute;
+  }
+
+  :where(.zvk-composite-state-surface[data-align="start"]) {
+    justify-items: start;
+    text-align: start;
+  }
+
+  :where(.zvk-composite-state-surface[data-size="sm"]) {
+    gap: var(--zvk-ui-space-3);
+    min-block-size: 9rem;
+    padding: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-state-surface[data-size="lg"]) {
+    gap: var(--zvk-ui-space-5);
+    min-block-size: 16rem;
+    padding: var(--zvk-ui-space-8);
+  }
+
+  :where(.zvk-composite-state-surface__empty-state) {
+    inline-size: min(100%, 34rem);
+  }
+
+  :where(.zvk-composite-state-surface__empty-state .zvk-ui-empty-state__icon) {
+    color: var(--zvk-composite-state-surface-accent, var(--zvk-ui-color-muted-foreground));
+  }
+
+  :where(.zvk-composite-state-surface[data-tone="success"]) {
+    --zvk-composite-state-surface-accent: var(--zvk-ui-color-success);
+  }
+
+  :where(.zvk-composite-state-surface[data-tone="warning"]) {
+    --zvk-composite-state-surface-accent: var(--zvk-ui-color-warning);
+  }
+
+  :where(.zvk-composite-state-surface[data-tone="destructive"]) {
+    --zvk-composite-state-surface-accent: var(--zvk-ui-color-destructive);
+  }
+
+  :where(.zvk-composite-state-surface[data-tone="info"]) {
+    --zvk-composite-state-surface-accent: var(--zvk-ui-color-info);
+  }
+
+  :where(.zvk-composite-state-surface__footer) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    max-inline-size: 34rem;
+  }
+}
+
+
+/* src/lists/entity-card.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-entity-card) {
+    align-items: start;
+    background:
+      linear-gradient(90deg, color-mix(in srgb, var(--zvk-ui-color-primary) 0%, transparent), transparent),
+      var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-card-border);
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    inline-size: 100%;
+    min-block-size: 4.5rem;
+    padding: var(--zvk-ui-space-3);
+    position: relative;
+    text-align: start;
+    text-decoration: none;
+    transition:
+      background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard),
+      border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard),
+      box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard),
+      transform var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+  }
+
+  :where(.zvk-composite-entity-card:is(a, button)) {
+    appearance: none;
+    cursor: pointer;
+    font: inherit;
+  }
+
+  :where(.zvk-composite-entity-card[data-interactive]:hover) {
+    border-color: var(--zvk-ui-control-border-strong);
+    box-shadow: var(--zvk-ui-shadow-sm);
+    transform: translateY(-1px);
+  }
+
+  :where(.zvk-composite-entity-card:focus-visible) {
+    outline: 2px solid var(--zvk-ui-color-ring);
+    outline-offset: 2px;
+  }
+
+  :where(.zvk-composite-entity-card[data-selected]) {
+    background:
+      linear-gradient(90deg, color-mix(in srgb, var(--zvk-ui-color-primary) 13%, transparent), transparent 70%),
+      var(--zvk-ui-color-primary-soft);
+    border-color: var(--zvk-ui-color-primary-border);
+  }
+
+  :where(.zvk-composite-entity-card[data-selected])::before {
+    background: var(--zvk-ui-color-primary);
+    border-radius: var(--zvk-ui-radius-full);
+    block-size: calc(100% - var(--zvk-ui-space-4));
+    content: "";
+    inline-size: 0.1875rem;
+    inset-block: var(--zvk-ui-space-2);
+    inset-inline-start: var(--zvk-ui-space-2);
+    position: absolute;
+  }
+
+  :where(.zvk-composite-entity-card[data-disabled]) {
+    cursor: not-allowed;
+    opacity: 0.58;
+  }
+
+  :where(.zvk-composite-entity-card__icon) {
+    align-items: center;
+    background: color-mix(in srgb, var(--zvk-ui-color-primary) 10%, var(--zvk-ui-color-muted));
+    border: 1px solid color-mix(in srgb, var(--zvk-ui-color-primary) 20%, var(--zvk-ui-color-border-subtle));
+    border-radius: var(--zvk-ui-radius-md);
+    color: var(--zvk-ui-color-primary);
+    display: inline-flex;
+    min-block-size: 2rem;
+    min-inline-size: 2rem;
+    justify-content: center;
+  }
+
+  :where(.zvk-composite-entity-card__body) {
+    display: grid;
+    gap: var(--zvk-ui-space-1);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-entity-card__heading) {
+    align-items: center;
+    display: flex;
+    gap: var(--zvk-ui-space-2);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-entity-card__title) {
+    font-size: var(--zvk-ui-font-size-sm);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  :where(.zvk-composite-entity-card__description) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    line-height: var(--zvk-ui-line-height-normal);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-entity-card__badges, .zvk-composite-entity-card__actions, .zvk-composite-entity-card__status) {
+    align-items: center;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-composite-entity-card__badges) {
+    flex: 0 0 auto;
+  }
+
+  :where(.zvk-composite-entity-card__meta) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+  }
+
+  :where(.zvk-composite-entity-card__error) {
+    color: var(--zvk-ui-color-destructive);
+    font-size: var(--zvk-ui-font-size-xs);
+    font-weight: 600;
+  }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-composite-entity-card) {
+      grid-template-columns: auto minmax(0, 1fr);
+    }
+
+    :where(.zvk-composite-entity-card__status, .zvk-composite-entity-card__actions) {
+      grid-column: 2;
+      justify-content: start;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.zvk-composite-entity-card) {
+      transition: none;
+    }
+
+    :where(.zvk-composite-entity-card[data-interactive]:hover) {
+      transform: none;
+    }
+  }
+}
+
+
+/* src/lists/entity-list-section.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-entity-list-section) {
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-entity-list-section__header) {
+    align-items: end;
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  :where(.zvk-composite-entity-list-section__copy) {
+    display: grid;
+    gap: var(--zvk-ui-space-1);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-entity-list-section__title) {
+    color: var(--zvk-ui-color-foreground);
+    font-size: var(--zvk-ui-font-size-lg);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-entity-list-section__description) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-entity-list-section__actions, .zvk-composite-entity-list-section__toolbar) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-composite-entity-list-section__actions) {
+    justify-content: end;
+  }
+
+  :where(.zvk-composite-entity-list-section__toolbar) {
+    background: var(--zvk-ui-color-muted);
+    border: 1px solid var(--zvk-ui-color-border-subtle);
+    border-radius: var(--zvk-ui-radius-md);
+    padding: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-composite-entity-list-section__list) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  :where(.zvk-composite-entity-list-section__item) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-entity-list-section__state) {
+    min-block-size: 10rem;
+  }
+
+  :where(.zvk-composite-entity-list-section__footer) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+  }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-composite-entity-list-section__header) {
+      align-items: start;
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-entity-list-section__actions) {
+      justify-content: start;
+    }
+  }
+}
+
+
+/* src/lists/summary-metric-grid.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-summary-metric-grid) {
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-summary-metric-grid__header) {
+    align-items: end;
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  :where(.zvk-composite-summary-metric-grid__copy) {
+    display: grid;
+    gap: var(--zvk-ui-space-1);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-summary-metric-grid__title) {
+    color: var(--zvk-ui-color-foreground);
+    font-size: var(--zvk-ui-font-size-lg);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-summary-metric-grid__description) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-summary-metric-grid__actions) {
+    align-items: center;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    justify-content: end;
+  }
+
+  :where(.zvk-composite-summary-metric-grid__metrics) {
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: repeat(var(--zvk-composite-summary-metric-grid-columns, 4), minmax(0, 1fr));
+  }
+
+  :where(.zvk-composite-summary-metric-grid[data-columns="1"]) {
+    --zvk-composite-summary-metric-grid-columns: 1;
+  }
+
+  :where(.zvk-composite-summary-metric-grid[data-columns="2"]) {
+    --zvk-composite-summary-metric-grid-columns: 2;
+  }
+
+  :where(.zvk-composite-summary-metric-grid[data-columns="3"]) {
+    --zvk-composite-summary-metric-grid-columns: 3;
+  }
+
+  :where(.zvk-composite-summary-metric-grid[data-columns="4"]) {
+    --zvk-composite-summary-metric-grid-columns: 4;
+  }
+
+  :where(.zvk-composite-summary-metric-grid__card) {
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--zvk-ui-color-primary) 5%, transparent), transparent 62%),
+      var(--zvk-ui-color-surface);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    display: grid;
+    min-inline-size: 0;
+    position: relative;
+  }
+
+  :where(.zvk-composite-summary-metric-grid__stat) {
+    border: 0;
+  }
+
+  :where(.zvk-composite-summary-metric-grid__card:first-child) {
+    border-color: color-mix(in srgb, var(--zvk-ui-color-primary) 38%, var(--zvk-ui-card-border));
+  }
+
+  :where(.zvk-composite-summary-metric-grid__action) {
+    border-top: 1px solid var(--zvk-ui-color-border-subtle);
+    padding: 0 var(--zvk-ui-space-4) var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-composite-summary-metric-grid__card[data-action-position="top"] .zvk-composite-summary-metric-grid__stat) {
+    padding-inline-end: calc(var(--zvk-ui-space-4) + 2rem);
+  }
+
+  :where(.zvk-composite-summary-metric-grid__action[data-position="top"]) {
+    border-top: 0;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    padding: var(--zvk-ui-space-3);
+    position: absolute;
+  }
+
+  @media (max-width: 60rem) {
+    :where(.zvk-composite-summary-metric-grid__metrics) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-composite-summary-metric-grid__header) {
+      align-items: start;
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-summary-metric-grid__actions) {
+      justify-content: start;
+    }
+
+    :where(.zvk-composite-summary-metric-grid__metrics) {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+
+/* src/lists/settings-hub-list.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-settings-hub-list) {
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-composite-settings-hub-list__header) {
+    align-items: end;
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  :where(.zvk-composite-settings-hub-list__copy) {
+    display: grid;
+    gap: var(--zvk-ui-space-1);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-settings-hub-list__title) {
+    color: var(--zvk-ui-color-foreground);
+    font-size: var(--zvk-ui-font-size-lg);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-settings-hub-list__description) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-settings-hub-list__actions) {
+    align-items: center;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    justify-content: end;
+  }
+
+  :where(.zvk-composite-settings-hub-list__list) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  :where(.zvk-composite-settings-hub-list__item) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-settings-hub-list__empty) {
+    min-block-size: 10rem;
+  }
+
+  @media (max-width: 48rem) {
+    :where(.zvk-composite-settings-hub-list__header) {
+      align-items: start;
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-settings-hub-list__actions) {
+      justify-content: start;
+    }
+
+    :where(.zvk-composite-settings-hub-list__list) {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+
+/* src/forms/form-surface.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-form-surface) {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-form-surface__card) {
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--zvk-ui-color-primary) 4%, transparent), transparent 13rem),
+      var(--zvk-ui-color-surface);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    overflow: clip;
+  }
+
+  :where(.zvk-composite-form-surface__header) {
+    align-items: start;
+    border-block-end: 1px solid var(--zvk-ui-color-border-subtle);
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    grid-template-columns: minmax(0, 1fr) auto;
+    padding: var(--zvk-ui-space-4) var(--zvk-ui-space-5);
+  }
+
+  :where(.zvk-composite-form-surface__heading) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-form-surface__title) {
+    margin: 0;
+  }
+
+  :where(.zvk-composite-form-surface__description) {
+    margin-block-start: var(--zvk-ui-space-1);
+  }
+
+  :where(.zvk-composite-form-surface__actions) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    justify-content: flex-end;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-form-surface__alert) {
+    padding: var(--zvk-ui-space-4) var(--zvk-ui-space-5) 0;
+  }
+
+  :where(.zvk-composite-form-surface__content) {
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    padding: var(--zvk-ui-space-5);
+  }
+
+  :where(.zvk-composite-form-surface__footer) {
+    align-items: center;
+    background: color-mix(in srgb, var(--zvk-ui-color-muted) 72%, var(--zvk-ui-color-surface));
+    border-block-start: 1px solid var(--zvk-ui-color-border);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    justify-content: flex-end;
+    padding: var(--zvk-ui-space-4) var(--zvk-ui-space-5);
+  }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-composite-form-surface__header) {
+      grid-template-columns: 1fr;
+    }
+
+    :where(.zvk-composite-form-surface__actions),
+    :where(.zvk-composite-form-surface__footer) {
+      justify-content: flex-start;
+    }
+  }
+}
+
+
+/* src/forms/confirm-action-dialog.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-confirm-action-dialog) {
+    display: contents;
+  }
+
+  :where(.zvk-composite-confirm-action-dialog__trigger) {
+    max-inline-size: 100%;
+  }
+
+  :where(.zvk-composite-confirm-action-dialog__content) {
+    inline-size: min(100% - 2rem, 28rem);
+  }
+
+  :where(.zvk-composite-confirm-action-dialog__title) {
+    margin: 0;
+  }
+
+  :where(.zvk-composite-confirm-action-dialog__description) {
+    margin-block-start: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-composite-confirm-action-dialog__footer) {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    gap: var(--zvk-ui-space-2);
+    justify-content: flex-end;
+    margin-block-start: var(--zvk-ui-space-5);
+  }
+
+  :where(.zvk-composite-confirm-action-dialog[data-tone="warning"] .zvk-composite-confirm-action-dialog__confirm) {
+    --zvk-ui-button-bg: var(--zvk-ui-color-warning);
+    --zvk-ui-button-border: color-mix(in srgb, var(--zvk-ui-color-warning) 82%, black);
+    --zvk-ui-button-fg: white;
+  }
+
+  @media (max-width: 30rem) {
+    :where(.zvk-composite-confirm-action-dialog__footer) {
+      align-items: stretch;
+      flex-direction: column-reverse;
+    }
+  }
+}
+
+
+/* src/data/data-table-page-frame.css */
+@layer zvk-composite-components {
+  :where(.zvk-composite-data-table-page-frame) {
+    display: grid;
+    gap: var(--zvk-ui-space-4);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-data-table-page-frame__header) {
+    align-items: flex-end;
+    display: flex;
+    gap: var(--zvk-ui-space-4);
+    justify-content: space-between;
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-data-table-page-frame__heading) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-composite-data-table-page-frame__title) {
+    color: var(--zvk-ui-color-foreground);
+    font-size: var(--zvk-ui-font-size-lg);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+  }
+
+  :where(.zvk-composite-data-table-page-frame__description) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-sm);
+    line-height: var(--zvk-ui-line-height-normal);
+    margin: var(--zvk-ui-space-1) 0 0;
+    max-inline-size: 68ch;
+  }
+
+  :where(.zvk-composite-data-table-page-frame__card) {
+    background: var(--zvk-ui-color-surface);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    overflow: clip;
+  }
+
+  :where(.zvk-composite-data-table-page-frame__toolbar) {
+    align-items: center;
+    background: color-mix(in srgb, var(--zvk-ui-color-muted) 64%, var(--zvk-ui-color-surface));
+    border-block-end: 1px solid var(--zvk-ui-color-border-subtle);
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: minmax(14rem, 1fr) auto auto;
+    padding: var(--zvk-ui-space-3) var(--zvk-ui-space-4);
+  }
+
+  :where(
+    .zvk-composite-data-table-page-frame__search,
+    .zvk-composite-data-table-page-frame__filters,
+    .zvk-composite-data-table-page-frame__bulk-actions,
+    .zvk-composite-data-table-page-frame__footer-content,
+    .zvk-composite-data-table-page-frame__pagination
+  ) {
+    min-inline-size: 0;
+  }
+
+  :where(
+    .zvk-composite-data-table-page-frame__filters,
+    .zvk-composite-data-table-page-frame__bulk-actions,
+    .zvk-composite-data-table-page-frame__pagination
+  ) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--zvk-ui-space-2);
+    justify-content: flex-end;
+  }
+
+  :where(.zvk-composite-data-table-page-frame__content) {
+    padding: 0;
+  }
+
+  :where(.zvk-composite-data-table-page-frame__table) {
+    border: 0;
+  }
+
+  :where(.zvk-composite-data-table-page-frame__state) {
+    background:
+      radial-gradient(circle at center top, color-mix(in srgb, var(--zvk-ui-color-primary) 9%, transparent), transparent 16rem),
+      var(--zvk-ui-color-surface);
+    color: var(--zvk-ui-color-muted-foreground);
+    display: grid;
+    min-block-size: 12rem;
+    padding: var(--zvk-ui-space-6);
+    place-items: center;
+    text-align: center;
+  }
+
+  :where(.zvk-composite-data-table-page-frame__footer) {
+    align-items: center;
+    background: color-mix(in srgb, var(--zvk-ui-color-muted) 72%, var(--zvk-ui-color-surface));
+    border-block-start: 1px solid var(--zvk-ui-color-border-subtle);
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+    padding: var(--zvk-ui-space-3) var(--zvk-ui-space-4);
+  }
+
+  @media (max-width: 45rem) {
+    :where(.zvk-composite-data-table-page-frame__toolbar),
+    :where(.zvk-composite-data-table-page-frame__footer) {
+      grid-template-columns: 1fr;
+    }
+
+    :where(
+      .zvk-composite-data-table-page-frame__filters,
+      .zvk-composite-data-table-page-frame__bulk-actions,
+      .zvk-composite-data-table-page-frame__pagination
+    ) {
+      justify-content: flex-start;
+    }
+  }
+}
+
+
+