@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/data-table/data-table.css

@@ -0,0 +1,685 @@
+/* data-table — a toolbar (a 12 px search on surface-3, 12 px tool buttons with an accent count), the filter sentence
+   on accent-soft, then the table on a 20 px panel: a sticky muted header with sort buttons whose arrow turns, 3rem
+   rows on hairlines, chosen rows softly tinted with an accent edge (their data stays readable), 18 px checks that
+   draw themselves, an 8 px row menu button and shimmering bones while loading; the foot with the range, the rows
+   per page menu and the pager; the bar of the chosen rows takes the toolbar's place, so it never covers a row.
+   Panels and menus (columns, filters, rows per page, row actions) are anchored .mk-dialog (dialog.css) surfaces with
+   20 px corners and 8 px items. The table scrolls sideways inside its panel when it is wider; --mk-dt-max-height
+   lets it scroll down too. */
+.mk-data-table,
+mk-data-table {
+  --mk-dt-max-height: none;
+  position: relative;
+  display: grid;
+  gap: 0.75rem;
+  min-width: 0;
+  color: var(--mk-text);
+  font-size: 0.875rem;
+}
+
+/* ── The toolbar ─────────────────────────────────────────────────────────── */
+[data-mk-dt-bar] {
+  grid-row: 1;
+  grid-column: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+[data-mk-dt-search] {
+  display: flex;
+  flex: 1 1 14rem;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  height: 2.5rem;
+  padding: 0 0.875rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-muted);
+  cursor: text;
+}
+
+[data-mk-dt-search]:focus-within {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+[data-mk-dt-search] svg {
+  flex: none;
+}
+
+[data-mk-dt-search] input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: none;
+  color: var(--mk-text);
+  font: inherit;
+}
+
+[data-mk-dt-tools] {
+  display: flex;
+  gap: 0.375rem;
+}
+
+[data-mk-dt-tool] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 2.5rem;
+  padding: 0 0.875rem;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 12px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s;
+}
+
+[data-mk-dt-tool]:hover {
+  background: var(--mk-surface-2);
+}
+
+[data-mk-dt-tool]:focus-visible,
+[data-mk-dt-size-button]:focus-visible,
+[data-mk-dt-sort]:focus-visible,
+[data-mk-dt-row-menu]:focus-visible,
+[data-mk-dt-pager] button:focus-visible,
+[data-mk-dt-bulk] button:focus-visible,
+[data-mk-dt-clear]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+[data-mk-dt-count] {
+  display: inline-grid;
+  place-items: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.3rem;
+  border-radius: 999px;
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+  font-size: 0.6875rem;
+  font-weight: 700;
+}
+
+[data-mk-dt-count][hidden],
+[data-mk-dt-active][hidden],
+[data-mk-dt-empty][hidden],
+[data-mk-dt-bulk][hidden],
+[data-mk-dt-pager][hidden],
+[data-mk-dt-size][hidden],
+[data-mk-dt-select-all][hidden] {
+  display: none;
+}
+
+[data-mk-dt-active] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
+  border-radius: 12px;
+  background: var(--mk-accent-soft);
+  color: var(--mk-on-accent-soft, var(--mk-text));
+  font-size: 0.8125rem;
+}
+
+[data-mk-dt-active] > span {
+  flex: 1;
+  min-width: 0;
+}
+
+[data-mk-dt-clear] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 0.25rem;
+  height: 1.875rem;
+  padding: 0 0.625rem;
+  border: 0;
+  border-radius: 8px;
+  background: color-mix(in srgb, currentColor 12%, transparent);
+  color: inherit;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+/* ── The table ───────────────────────────────────────────────────────────── */
+/* A table wider than its panel scrolls sideways; a soft shadow at an edge says there is more past it (the covers
+   travel with the content, the shadows stay with the panel). */
+[data-mk-dt-scroll] {
+  max-height: var(--mk-dt-max-height);
+  overflow: auto;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 20px;
+  outline: none;
+  background:
+    linear-gradient(to right, var(--mk-surface-1) 40%, transparent) left center / 2.5rem 100% no-repeat local,
+    linear-gradient(to left, var(--mk-surface-1) 40%, transparent) right center / 2.5rem 100% no-repeat local,
+    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--mk-shadow-color, #000) 22%, transparent), transparent) left center / 1rem 100% no-repeat scroll,
+    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--mk-shadow-color, #000) 22%, transparent), transparent) right center / 1rem 100% no-repeat scroll,
+    var(--mk-surface-1);
+  overscroll-behavior-x: contain;
+}
+
+[data-mk-dt-scroll]:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+[data-mk-dt-table] {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+[data-mk-dt-table] :is(th, td) {
+  height: 3rem;
+  padding: 0 1rem;
+  border-bottom: 1px solid var(--mk-outline-soft);
+  text-align: start;
+  white-space: nowrap;
+}
+
+[data-mk-dt-table] :is(th, td)[data-align='end'] {
+  text-align: end;
+}
+
+[data-mk-dt-table] :is(th, td)[data-align='center'] {
+  text-align: center;
+}
+
+[data-mk-dt-table] thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  height: 2.75rem;
+  background: var(--mk-surface-2);
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+[data-mk-dt-table] thead th:is([data-direction='asc'], [data-direction='desc']) {
+  color: var(--mk-text);
+}
+
+[data-mk-dt-table] tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+[data-mk-dt-table] tbody tr {
+  transition: background-color 0.15s;
+}
+
+[data-mk-dt-table] tbody tr:hover {
+  background: color-mix(in srgb, var(--mk-text) 3%, transparent);
+}
+
+/* A chosen row: a light tint and an accent edge, never a fill that hides the data (on OLED the accent is white). */
+[data-mk-dt-table] tbody tr[data-selected] {
+  background: color-mix(in srgb, var(--mk-accent) 7%, transparent);
+}
+
+[data-mk-dt-table] tbody tr[data-selected]:hover {
+  background: color-mix(in srgb, var(--mk-accent) 11%, transparent);
+}
+
+[data-mk-dt-table] tbody tr[data-selected] > :first-child {
+  box-shadow: inset 3px 0 0 var(--mk-accent);
+}
+
+[data-mk-dt-table] td mark {
+  padding: 0 1px;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--mk-accent) 28%, transparent);
+  color: inherit;
+}
+
+[data-mk-dt-sort] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0 -0.375rem;
+  padding: 0.25rem 0.375rem;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  cursor: pointer;
+}
+
+[data-mk-dt-table] th[data-align='end'] [data-mk-dt-sort] {
+  flex-direction: row-reverse;
+}
+
+[data-mk-dt-sort]:hover {
+  background: color-mix(in srgb, var(--mk-text) 6%, transparent);
+}
+
+[data-mk-dt-sort] svg {
+  flex: none;
+  opacity: 0;
+  transition:
+    opacity 0.15s,
+    transform 0.3s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[data-mk-dt-sort]:hover svg {
+  opacity: 0.45;
+}
+
+th:is([data-direction='asc'], [data-direction='desc']) [data-mk-dt-sort] svg {
+  opacity: 1;
+}
+
+th[data-direction='desc'] [data-mk-dt-sort] svg {
+  transform: rotate(180deg);
+}
+
+[data-mk-dt-table] :is(th, td)[data-mk-dt-select] {
+  width: 1.125rem;
+  padding-right: 0.25rem;
+}
+
+[data-mk-dt-table] :is(th, td)[data-mk-dt-actions] {
+  width: 2rem;
+  padding: 0 0.5rem 0 0;
+  text-align: end;
+}
+
+/* The checks. */
+[data-mk-dt-check] {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  border: 2px solid var(--mk-outline);
+  border-radius: 5px;
+  color: transparent;
+  vertical-align: middle;
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    color 0.2s;
+}
+
+[data-mk-dt-check] input {
+  position: absolute;
+  inset: -0.375rem;
+  width: auto;
+  height: auto;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+[data-mk-dt-check] svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+[data-mk-dt-check]:is([data-state='true'], [data-state='mixed']) {
+  border-color: var(--mk-accent);
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+}
+
+[data-mk-dt-check] [data-mk-dt-dash],
+[data-mk-dt-check][data-state='mixed'] [data-mk-dt-tick] {
+  display: none;
+}
+
+[data-mk-dt-check][data-state='mixed'] [data-mk-dt-dash] {
+  display: inline;
+}
+
+[data-mk-dt-check]:has(input:focus-visible) {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+[data-mk-dt-row-menu] {
+  display: inline-grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: none;
+  color: var(--mk-muted);
+  vertical-align: middle;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+
+[data-mk-dt-row-menu]:hover,
+[data-mk-dt-row-menu][aria-expanded='true'] {
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+}
+
+[data-mk-dt-bool] {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: 8px;
+  background: var(--mk-surface-3);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+[data-mk-dt-bool][data-value='true'] {
+  background: var(--mk-accent-soft);
+  color: var(--mk-on-accent-soft, var(--mk-text));
+}
+
+[data-mk-dt-bone] {
+  display: block;
+  height: 0.75rem;
+  border-radius: 6px;
+  background: linear-gradient(90deg, var(--mk-surface-3) 0%, var(--mk-surface-2) 50%, var(--mk-surface-3) 100%);
+  background-size: 200% 100%;
+  animation: mk-dt-shimmer 1.2s linear infinite;
+}
+
+@keyframes mk-dt-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+
+  to {
+    background-position: -100% 0;
+  }
+}
+
+[data-mk-dt-empty] {
+  padding: 0.5rem 0 1rem;
+}
+
+/* ── The foot ────────────────────────────────────────────────────────────── */
+[data-mk-dt-foot] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 1rem;
+  min-width: 0;
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+}
+
+[data-mk-dt-range],
+[data-mk-dt-page] {
+  font-variant-numeric: tabular-nums;
+}
+
+[data-mk-dt-size] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: auto;
+}
+
+[data-mk-dt-size-button] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  height: 2rem;
+  padding: 0 0.375rem 0 0.75rem;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 8px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+[data-mk-dt-size-button]:hover,
+[data-mk-dt-size-button][aria-expanded='true'] {
+  background: var(--mk-surface-2);
+}
+
+[data-mk-dt-size-button] svg {
+  flex: none;
+  color: var(--mk-muted);
+  transition: transform 0.3s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[data-mk-dt-size-button][aria-expanded='true'] svg {
+  transform: rotate(180deg);
+}
+
+[data-mk-dt-pager] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+[data-mk-dt-pager] button {
+  display: inline-grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 8px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  cursor: pointer;
+}
+
+[data-mk-dt-pager] button:disabled {
+  opacity: 0.38;
+  cursor: default;
+}
+
+[data-mk-dt-page] {
+  min-width: 3.5rem;
+  color: var(--mk-text);
+  text-align: center;
+}
+
+/* ── The bar of the chosen rows ──────────────────────────────────────────── */
+/* It shares the toolbar's grid cell and covers it while rows are chosen: the rows stay in view. */
+[data-mk-dt-bulk] {
+  position: relative;
+  z-index: 2;
+  grid-row: 1;
+  grid-column: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  align-self: stretch;
+  gap: 0.25rem 0.5rem;
+  min-width: 0;
+  min-height: 2.5rem;
+  padding: 0.25rem 0.25rem 0.25rem 1rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+}
+
+.mk-data-table:has(> [data-mk-dt-bulk]:not([hidden])) > [data-mk-dt-bar],
+mk-data-table:has(> [data-mk-dt-bulk]:not([hidden])) > [data-mk-dt-bar] {
+  visibility: hidden;
+}
+
+[data-mk-dt-bulk-label] {
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+[data-mk-dt-bulk-count] {
+  display: inline-block;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+}
+
+[data-mk-dt-bulk-actions] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+[data-mk-dt-bulk] button {
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 0;
+  border-radius: 8px;
+  background: var(--mk-surface-1);
+  color: inherit;
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+[data-mk-dt-bulk] button:hover {
+  background: var(--mk-surface-2);
+}
+
+[data-mk-dt-bulk] button[data-danger] {
+  background: var(--mk-error);
+  color: var(--mk-on-error, #fff);
+}
+
+[data-mk-dt-bulk] [data-mk-dt-select-all] {
+  background: none;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+/* The close button is a square with its cross in the middle (the bar's button padding must not reach it). */
+[data-mk-dt-bulk] [data-mk-dt-bulk-close] {
+  display: inline-grid;
+  place-items: center;
+  width: 2rem;
+  margin-left: auto;
+  padding: 0;
+}
+
+[data-mk-dt-bulk-close] svg {
+  display: block;
+}
+
+/* ── Panels and the row menu ─────────────────────────────────────────────── */
+.mk-dialog.mk-dt-panel {
+  --mk-dialog-radius: 20px;
+  --mk-dialog-bg: var(--mk-surface-1);
+  /* A hairline keeps the panel apart from the table under it (on OLED both are near black). */
+  --mk-dialog-shadow: 0 0 0 1px var(--mk-outline-soft), 0 16px 48px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
+  gap: 0.5rem;
+  width: max-content;
+  min-width: min(14rem, calc(100vw - 32px));
+  max-width: min(22rem, calc(100vw - 32px));
+  padding: 0.75rem;
+}
+
+.mk-dialog.mk-dt-panel.mk-dt-filters {
+  width: min(38rem, calc(100vw - 32px));
+  max-width: min(38rem, calc(100vw - 32px));
+  padding: 1rem;
+}
+
+[data-mk-dt-panel-title] {
+  margin: 0 0 0.25rem;
+  padding: 0 0.25rem;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+[data-mk-dt-column-list] {
+  display: grid;
+  gap: 0.125rem;
+}
+
+[data-mk-dt-column] {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-height: 2.25rem;
+  padding: 0 0.5rem;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+[data-mk-dt-column]:hover {
+  background: var(--mk-surface-2);
+}
+
+/* The row menu and the rows per page menu look like the panels: 20 px surface, 8 px items, the same hover. */
+.mk-dialog.mk-dt-panel.mk-dt-menu {
+  gap: 0.125rem;
+  min-width: 9rem;
+  padding: 0.375rem;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item] {
+  gap: 0.625rem;
+  min-height: 2.25rem;
+  padding: 0 0.625rem;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: normal;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item]:hover,
+.mk-dialog.mk-dt-menu [data-mk-item]:focus-visible {
+  background: var(--mk-surface-2);
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item] svg {
+  flex: none;
+  margin-left: auto;
+  opacity: 0;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item][aria-checked='true'] {
+  font-weight: 600;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item][aria-checked='true'] svg {
+  opacity: 1;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item][data-danger] {
+  color: var(--mk-error);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-dt-bone] {
+    animation: none;
+  }
+
+  [data-mk-dt-sort] svg,
+  [data-mk-dt-size-button] svg,
+  [data-mk-dt-check] {
+    transition: none;
+  }
+}