. At ≤480px of available width the same markup renders as a
card list (container query) using each cell's data-label. */
.ks-table {
container: ks-table / inline-size;
display: flex;
flex-direction: column;
min-width: 0;
}
.ks-table__scroll {
overflow-x: auto;
background: var(--ks-surface-card);
border: var(--ks-border-w) solid var(--ks-border);
border-radius: var(--ks-radius-xl);
}
.ks-filterbar + .ks-table__scroll,
.ks-filterbar + .ks-table__bulk + .ks-table__scroll,
.ks-table__bulk + .ks-table__scroll { border-top-left-radius: 0; border-top-right-radius: 0; }
.ks-table__table {
width: 100%;
border-collapse: collapse;
font-size: var(--ks-text-dense);
line-height: var(--ks-lh-dense);
color: var(--ks-text-default);
}
.ks-table--comfy .ks-table__table { font-size: var(--ks-text-small); line-height: var(--ks-lh-small); }
.ks-table__table thead th {
height: calc(var(--ks-row-h) - var(--ks-space-3)); /* 38px header */
padding: 0 var(--ks-space-5);
background: var(--ks-surface-sunken);
border-bottom: var(--ks-border-w) solid var(--ks-border);
text-align: left;
white-space: nowrap;
vertical-align: middle;
font-size: var(--ks-text-caption);
line-height: var(--ks-lh-caption);
font-weight: var(--ks-weight-semibold);
letter-spacing: var(--ks-tracking-caps);
text-transform: uppercase;
color: var(--ksc-text-muted-on-tint);
}
.ks-table--sticky thead th { position: sticky; top: 0; z-index: 1; }
.ks-table__table th[aria-sort] { color: var(--ks-text-strong); }
.ks-table__sort {
display: inline-flex;
align-items: center;
gap: var(--ks-space-2);
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
cursor: pointer;
}
.ks-table__sort:hover { color: var(--ks-text-strong); text-decoration: none; }
.ks-table__sort .ks-icon { width: var(--ksc-icon-xs); height: var(--ksc-icon-xs); color: var(--ks-text-muted); }
th[aria-sort] .ks-table__sort .ks-icon { color: var(--ks-text-link); }
/* One sprite glyph per direction: show the one that matches aria-sort. */
.ks-table__sort-asc,
.ks-table__sort-desc { display: none; }
th[aria-sort="ascending"] .ks-table__sort-none,
th[aria-sort="descending"] .ks-table__sort-none { display: none; }
th[aria-sort="ascending"] .ks-table__sort-asc,
th[aria-sort="descending"] .ks-table__sort-desc { display: inline-block; }
.ks-table__table tbody td {
height: var(--ks-row-h);
padding: var(--ks-space-3) var(--ks-space-5);
border-bottom: var(--ks-border-w) solid var(--ks-border);
vertical-align: middle;
white-space: nowrap;
max-width: calc(var(--ks-space-12) * 4.25);
overflow: hidden;
text-overflow: ellipsis;
}
/* A cell's overflow: hidden (for the ellipsis) also clips any tooltip bubble inside it, so a cell
holding ClientMarker's strip lets its bubbles out and moves the ellipsis onto its other children. */
.ks-table__table tbody td:has(.ks-markers) { overflow: visible; }
.ks-table__table tbody td:has(.ks-markers) > .ks-table__primary {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.ks-table--comfy .ks-table__table tbody td { height: var(--ks-row-h-comfy); }
.ks-table__table tbody tr:last-child td { border-bottom: 0; }
.ks-table__table tbody tr { transition: background-color var(--ks-duration-instant) var(--ks-ease-standard); }
.ks-table__table tbody tr:hover { background: var(--ks-surface-hover); }
.ks-table__table tbody tr:has(.ks-table__select :checked),
.ks-table__table tbody tr[aria-selected="true"] { background: var(--ks-surface-selected); }
.ks-table__table tbody tr:focus-within { background: var(--ks-surface-hover); }
.ks-table__select { width: calc(var(--ks-space-9) + var(--ks-space-4)); padding-left: var(--ks-space-6) !important; padding-right: 0 !important; }
.ks-table__cell--num { text-align: right; font-family: var(--ks-font-mono); font-variant-numeric: tabular-nums; }
.ks-table__cell--mono { font-family: var(--ks-font-mono); }
.ks-table__cell--wrap { white-space: normal !important; }
.ks-table__cell--actions { width: 1%; text-align: right; overflow: visible !important; }
.ks-table__cell--muted { color: var(--ks-text-muted); }
.ks-table__table th.ks-table__cell--num { text-align: right; }
.ks-table__primary { color: var(--ks-text-strong); font-weight: var(--ks-weight-medium); }
a.ks-table__primary:hover { color: var(--ks-text-link); }
.ks-table__sub { display: block; color: var(--ks-text-muted); font-size: var(--ks-text-caption); line-height: var(--ks-lh-caption); }
.ks-table__stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ks-space-1); white-space: normal; }
/* Bulk selection bar — visible only while a row checkbox is checked (CSS :has). */
.ks-table__bulk {
display: none;
align-items: center;
gap: var(--ks-space-5);
padding: calc(var(--ks-space-4) + var(--ks-space-1) / 2) var(--ks-space-6);
background: var(--ks-surface-selected);
border: var(--ks-border-w) solid var(--ks-blue-200);
border-bottom: 0;
font-size: var(--ks-text-small);
color: var(--ks-text-link);
}
.ks-table:has(tbody .ks-table__select :checked) .ks-table__bulk,
.ks-table__bulk[data-state="open"] { display: flex; }
.ks-filterbar + .ks-table__bulk { border-top: 0; }
.ks-table__bulk-count { font-weight: var(--ks-weight-medium); }
/* State rows: loading / empty / error inside the same frame. */
.ks-table__table tbody td.ks-table__state {
height: auto;
padding: var(--ks-space-4);
white-space: normal;
max-width: none;
}
.ks-table__state .ks-empty,
.ks-table__state .ks-banner { border-radius: var(--ks-radius-lg); }
.ks-table__skeleton td { overflow: visible; }
/* Group header row: caption cell spanning the table when grouped (Grupuj).
DRAFT — under review with the founders, not yet in the component README. */
.ks-table__table tbody tr.ks-table__group-row { background: var(--ks-surface-sunken); }
.ks-table__table tbody td.ks-table__group {
height: calc(var(--ks-row-h) - var(--ks-space-3));
padding: 0 var(--ks-space-6);
font-size: var(--ks-text-caption);
line-height: var(--ks-lh-caption);
font-weight: var(--ks-weight-semibold);
letter-spacing: var(--ks-tracking-caps);
text-transform: uppercase;
color: var(--ks-text-muted);
}
.ks-table__group-count {
margin-left: var(--ks-space-2);
padding: 0 calc(var(--ks-space-2) + var(--ks-border-w));
border-radius: var(--ks-radius-pill);
background: var(--ks-surface-card);
color: var(--ks-text-strong);
font-weight: var(--ks-weight-semibold);
text-transform: none;
letter-spacing: normal;
}
/* The loading body of a table: hidden until htmx marks it while its request is in flight. */
tbody.htmx-indicator { display: none; }
tbody.htmx-indicator.htmx-request { display: table-row-group; }
/* And while it shows, the rows give way to it, as the component's Loading example draws the table:
one body at a time. Both at once pushed the rows down the page for the length of the request and
snapped them back when the answer landed. */
.ks-table__table tbody.htmx-indicator.htmx-request ~ tbody { display: none; }
/* A cell icon stands in for the text label in the card list only (data-icon on the | ); in the
table proper the column header carries the meaning, so the glyph is not shown. */
.ks-table__cellicon { display: none; }
/* Card list at narrow widths */
@container ks-table (max-width: 480px) {
.ks-table__scroll { background: transparent; border: 0; overflow: visible; }
.ks-table__table,
.ks-table__table tbody,
.ks-table__table tr,
.ks-table__table td { display: block; width: 100%; }
.ks-table__table thead {
position: absolute;
width: var(--ks-border-w);
height: var(--ks-border-w);
overflow: hidden;
clip-path: inset(50%);
}
.ks-table__table tbody { display: flex; flex-direction: column; gap: var(--ks-space-4); }
/* tbody.htmx-indicator[.htmx-request] (0,2,1 / 0,1,1 at equal source position) outranks or ties the
rule above depending on state: restate both states here so a skeleton body neither shows outside
a request (plain page load) nor loses the card-list layout while one is in flight. */
.ks-table__table tbody.htmx-indicator:not(.htmx-request) { display: none; }
.ks-table__table tbody.htmx-indicator.htmx-request { display: flex; flex-direction: column; gap: var(--ks-space-4); }
.ks-table__table tbody tr {
display: grid;
gap: var(--ks-space-2);
padding: var(--ks-space-5);
background: var(--ks-surface-card);
border: var(--ks-border-w) solid var(--ks-border);
border-radius: var(--ks-radius-xl);
}
.ks-table__table tbody td,
.ks-table--comfy .ks-table__table tbody td {
display: grid;
grid-template-columns: minmax(calc(var(--ks-space-12) * 1.5), 38%) minmax(0, 1fr);
gap: var(--ks-space-4);
height: auto;
max-width: none;
padding: 0;
border: 0;
white-space: normal;
overflow-wrap: anywhere;
/* The desktop cell clips for its ellipsis; a card wraps instead, and clipping would cut the
44px hit areas of the links inside it (70-touch.css). */
overflow: visible;
text-align: left;
}
.ks-table__table tbody td::before {
content: attr(data-label);
overflow-wrap: normal;
font-family: var(--ks-font-sans);
font-variant-numeric: normal;
font-size: var(--ks-text-caption);
line-height: var(--ks-lh-dense);
font-weight: var(--ks-weight-semibold);
letter-spacing: var(--ks-tracking-caps);
text-transform: uppercase;
color: var(--ks-text-muted);
}
.ks-table__table tbody td > * { justify-self: start; min-width: 0; max-width: 100%; }
/* Icon label: a glyph column instead of the uppercase text. The text stays as the cell's
accessible name (visually hidden, not removed), so nothing is lost to a screen reader. */
.ks-table__table tbody td[data-icon] { grid-template-columns: var(--ksc-icon-md) minmax(0, 1fr); align-items: start; }
.ks-table__table tbody td[data-icon]::before {
position: absolute;
width: var(--ks-border-w);
height: var(--ks-border-w);
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Short labels (NIP, ZUS, VAT): a narrow label column, and the icon rows use the same width so every
value in the card starts on one line, without the 38% gap the long labels need. */
.ks-table--short-labels .ks-table__table tbody td,
.ks-table--short-labels .ks-table__table tbody td[data-icon] { grid-template-columns: var(--ks-space-10) minmax(0, 1fr); }
/* A profile badge in a cell takes the icon form (see ProfileBadge) by itself at card-list width, so
the server renders one markup for every width and needs no viewport knowledge. */
.ks-table__table tbody td .ks-profile .ks-profile__badge {
justify-content: center;
width: calc(var(--ksc-icon-md) + var(--ks-space-4));
height: calc(var(--ksc-icon-md) + var(--ks-space-4));
padding: 0;
background: transparent;
}
.ks-table__table tbody td .ks-profile--out .ks-profile__badge { background: var(--ks-status-neutral-bg); }
.ks-table__table tbody td .ks-profile .ks-profile__label,
.ks-table__table tbody td .ks-profile .ks-profile__reason {
position: absolute;
width: var(--ks-border-w);
height: var(--ks-border-w);
margin: calc(var(--ks-border-w) * -1);
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ClientMarker's strip in a card: a 224px bubble does not fit a ~205px value column at 375px, and
no left/right alignment on the item can fix that. The bubble anchors to the strip (stretched to
the column) instead of the item, and is capped at the column's width, so it wraps rather than
being cut. */
.ks-table__table tbody td .ks-markers { position: relative; justify-self: stretch; }
/* The name's own ellipsis clip is for the table proper; a card wraps it, and the clip would cut
the link's 44px hit area (70-touch.css). */
.ks-table__table tbody td:has(.ks-markers) > .ks-table__primary { overflow: visible; }
.ks-table__table tbody td .ks-markers .ks-tooltip { position: static; }
.ks-table__table tbody td .ks-markers .ks-tooltip__bubble {
left: 0;
transform: none;
text-align: left;
max-width: min(calc(var(--ks-space-12) * 3.5), 100%);
}
.ks-table__table tbody td[data-icon] > .ks-table__cellicon {
display: block;
width: var(--ksc-icon-md);
height: var(--ksc-icon-md);
margin-top: calc(var(--ks-space-1) / 2);
color: var(--ks-text-muted);
}
.ks-table__table tbody td:not([data-label])::before,
.ks-table__table tbody td[data-label=""]::before { content: none; }
.ks-table__table tbody td:not([data-label]),
.ks-table__table tbody td[data-label=""] { display: block; }
.ks-table__table tbody td[data-primary] {
display: block;
font-size: var(--ks-text-small);
line-height: var(--ks-lh-small);
}
.ks-table__table tbody td[data-primary]::before { content: none; }
tbody .ks-table__select { position: absolute; padding: 0 !important; }
/* Only the name moves aside for the checkbox; the rows under it use the card's full width. */
.ks-table__table tbody tr:has(.ks-table__select) { position: relative; }
.ks-table__table tbody tr:has(.ks-table__select) td[data-primary] { padding-left: var(--ks-space-9); }
.ks-table__table tbody tr .ks-table__select { left: var(--ks-space-5); top: var(--ks-space-5); width: auto; }
/* A cell holding a form or a copy block needs the whole card width, label above. */
.ks-table__table tbody td:has(.ks-table__cellform),
.ks-table__table tbody td:has(.ks-copy) { display: block; }
.ks-table__table tbody td:has(.ks-table__cellform)::before,
.ks-table__table tbody td:has(.ks-copy)::before { display: block; margin-bottom: var(--ks-space-2); }
.ks-table__cellform { width: 100%; }
.ks-table__cellform .ks-field { flex: 1 1 100%; width: auto; }
.ks-table__cellform .ks-btn { width: 100%; justify-content: center; }
.ks-table__cell--num { font-family: var(--ks-font-mono); }
.ks-table__cell--actions { width: auto; }
.ks-table__table tbody td.ks-table__state { display: block; padding: 0; }
.ks-table__table tbody tr:has(.ks-table__state) { padding: 0; border: 0; background: transparent; }
/* Group header row (DRAFT, see the FilterBar note above): a flush label, not a card. */
.ks-table__table tbody td.ks-table__group { display: block; padding: var(--ks-space-3) var(--ks-space-1); }
.ks-table__table tbody tr:has(.ks-table__group) { padding: 0; border: 0; background: transparent; }
.ks-table__bulk { flex-wrap: wrap; border-radius: var(--ks-radius-lg); border-bottom: var(--ks-border-w) solid var(--ks-blue-200); }
}
/* ---- Inline form in a cell (save an issue number next to the row) ------------- */
.ks-table__cellform { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ks-space-4); margin: 0; }
.ks-table__cellform .ks-field { width: calc(var(--ks-space-12) * 2.5); }
.ks-table__cellform .ks-btn { flex: none; }
/* ---- Pager ------------------------------------------------------------------ */
.ks-pager {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ks-space-5);
padding: calc(var(--ks-space-4) + var(--ks-space-1)) var(--ks-space-2) 0;
font-size: var(--ks-text-dense);
color: var(--ks-text-muted);
}
.ks-pager__nav { display: flex; align-items: center; gap: var(--ks-space-2); margin-left: auto; }
.ks-pager__page { padding: 0 var(--ks-space-4); color: var(--ks-text-default); }
.ks-pager__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--ksc-square-sm);
height: var(--ksc-square-sm);
background: var(--ks-surface-card);
border: var(--ks-border-w) solid var(--ks-border-strong);
border-radius: var(--ks-radius-md);
color: var(--ks-text-default);
cursor: pointer;
}
.ks-pager__btn:hover { background: var(--ks-surface-hover); color: var(--ks-text-strong); text-decoration: none; }
.ks-pager__btn .ks-icon { width: var(--ksc-icon-sm); height: var(--ksc-icon-sm); }
.ks-pager__btn:disabled,
.ks-pager__btn[aria-disabled="true"] { color: var(--ks-text-subtle); cursor: not-allowed; background: var(--ks-surface-card); }
/* ---- SkeletonRows ------------------------------------------------------------ */
.ks-skeleton {
display: block;
height: var(--ks-space-3);
border-radius: var(--ks-radius-sm);
background: linear-gradient(90deg, var(--ks-surface-sunken) 25%, var(--ks-gray-100) 37%, var(--ks-surface-sunken) 63%);
background-size: 200% 100%;
animation: ks-shimmer var(--ksc-shimmer) linear infinite;
}
[data-theme="dark"] .ks-skeleton {
background-image: linear-gradient(90deg, var(--ks-surface-sunken) 25%, var(--ks-surface-hover) 37%, var(--ks-surface-sunken) 63%);
}
@media (prefers-color-scheme: dark) { :where(:root:not([data-ks-theme-fixed])):not([data-theme]) .ks-skeleton {
background-image: linear-gradient(90deg, var(--ks-surface-sunken) 25%, var(--ks-surface-hover) 37%, var(--ks-surface-sunken) 63%);
} }
.ks-skeleton--head { height: var(--ks-space-4); opacity: 0.8; }
.ks-skeleton--block { height: calc(var(--ks-space-12) + var(--ks-space-6)); border-radius: var(--ks-radius-xl); }
.ks-skeleton--w20 { width: 20%; }
.ks-skeleton--w30 { width: 30%; }
.ks-skeleton--w40 { width: 40%; }
.ks-skeleton--w50 { width: 50%; }
.ks-skeleton--w60 { width: 60%; }
.ks-skeleton--w70 { width: 70%; }
.ks-skeleton--w80 { width: 80%; }
.ks-skeleton--w90 { width: 90%; }
.ks-skeleton-rows {
background: var(--ks-surface-card);
border: var(--ks-border-w) solid var(--ks-border);
border-radius: var(--ks-radius-xl);
overflow: hidden;
}
.ks-skeleton-rows__head,
.ks-skeleton-rows__row {
display: grid;
grid-template-columns: 26fr 18fr 14fr 16fr 12fr;
gap: var(--ks-space-8);
align-items: center;
height: var(--ks-row-h);
padding: 0 var(--ks-space-6);
border-bottom: var(--ks-border-w) solid var(--ks-border);
}
.ks-skeleton-rows__head { height: calc(var(--ks-row-h) - var(--ks-space-2)); background: var(--ks-surface-sunken); }
.ks-skeleton-rows__row:last-child { border-bottom: 0; }
/* ---- FilterBar ------------------------------------------------------------- */
.ks-filterbar {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
gap: var(--ks-space-4);
margin: 0;
padding: var(--ks-space-5) var(--ks-space-6);
background: var(--ks-surface-card);
border: var(--ks-border-w) solid var(--ks-border);
border-bottom: 0;
border-radius: var(--ks-radius-xl) var(--ks-radius-xl) 0 0;
}
.ks-filterbar--standalone { border-bottom: var(--ks-border-w) solid var(--ks-border); border-radius: var(--ks-radius-xl); }
/* Grupuj/Widok (__actions) stay put in the top-right corner: the outer row never wraps, so
__actions can never be pushed to a line of its own. __filters is the one flex item allowed to
shrink (flex: 1 1 auto, min-width: 0) and it wraps its own chips internally when they no longer
fit — the chips grow a second (or third) line under the search field while search and __actions
hold their position on the first line (founders 2026-09-29, reported against Klienci). */
.ks-filterbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ks-space-4); flex: 1 1 auto; min-width: 0; }
.ks-filterbar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ks-space-4); margin-left: auto; flex: 0 0 auto; }
.ks-filterbar__status { font-size: var(--ks-text-caption); color: var(--ks-text-muted); }
.ks-filterbar .htmx-indicator { display: none; }
.ks-filterbar .htmx-request .htmx-indicator,
.ks-filterbar.htmx-request .htmx-indicator { display: inline-flex; }
/* Medium (a tablet, or a narrow desktop window): search and __actions keep the first row, with
__actions in the top-right corner, and __filters takes a full-width second row of its own.
Squeezed into one row the search shrank to a few letters and the chips stacked one per line. */
@container ks-table (max-width: 900px) {
.ks-filterbar { flex-wrap: wrap; }
.ks-filterbar .ks-search { flex: 1 1 auto; }
.ks-filterbar__filters { order: 3; flex: 1 1 100%; }
}
@media (max-width: 1100px) {
.ks-filterbar--standalone { flex-wrap: wrap; }
.ks-filterbar--standalone .ks-search { flex: 1 1 auto; }
.ks-filterbar--standalone .ks-filterbar__filters { order: 3; flex: 1 1 100%; }
}
/* Phone: search, then __actions (each control a full line), then the chips, wrapping so every
chip and "+ Dodaj filtr" stay in view (a sideways-scrolling row hid them past the edge). */
@container ks-table (max-width: 480px) {
.ks-filterbar .ks-search { flex: 1 1 100%; width: 100%; }
.ks-filterbar__actions { margin-left: 0; flex: 1 1 100%; min-width: 0; }
.ks-filterbar__actions > * { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 480px) {
.ks-filterbar--standalone .ks-search { flex: 1 1 100%; width: 100%; }
.ks-filterbar--standalone .ks-filterbar__actions { margin-left: 0; flex: 1 1 100%; min-width: 0; }
.ks-filterbar--standalone .ks-filterbar__actions > * { flex: 1 1 auto; min-width: 0; }
}
/* A compact |