flexdesk 0.4.7 → 0.5.0

package/dist/flexdesk.css

@@ -504,7 +504,9 @@
 .twm-preview-table th,
 .twm-preview-table td {
     border-bottom: 1px solid #2a2a2a;
-    padding: var(--space-sm) 8px;
+    /* 0.5.0: the row-geometry tokens (tokens.css). Unset, these fall back to
+     * exactly the 0.4 padding. */
+    padding: var(--twm-dt-cell-pad-block, var(--space-sm)) var(--twm-dt-cell-pad-inline, 8px);
     white-space: nowrap;
     /* Never spill text past the column. Once columns are locked to fixed
      * widths, over-long content is clipped with an ellipsis; the full
@@ -625,6 +627,125 @@ body.twm-dt-col-resizing {
 .twm-preview-table tbody tr.selected td {
     background: var(--state-selected, rgba(0, 122, 204, 0.15));
 }
+/* ── 0.5.0 DataTable options. Each rule below matches only a class or an
+ * attribute a 0.5.0 option sets, so a table that asks for none of them is
+ * styled exactly as in 0.4. ───────────────────────────────────────────── */
+
+/* The row-geometry tokens for the NORMAL density's line height. Compact
+ * declares its own on the cells (with the token in front), as 0.4 did; normal
+ * never declared one, so this one is NOT on the cells. It is on the ROW GROUPS,
+ * which only this component creates, and the cells inherit it. Unset, it
+ * computes to `unset` — inheritance from the table, which is exactly what no
+ * declaration gives. A declaration on the cells themselves, however weak
+ * (`:where()`), would beat any consumer rule for the cells that sits in a
+ * cascade LAYER (unlayered author styles outrank every layer, whatever their
+ * specificity) and any zero-specificity one loaded before this sheet; on the
+ * row groups, a consumer's rule for the cells, the rows or the table still
+ * wins, as it did in 0.4. */
+:where(.twm-preview-table) > :where(thead, tbody, tfoot) {
+    line-height: var(--twm-dt-cell-line-height);
+}
+/* `firstColumn: 'plain'` — the first column is a column like the others, not
+ * the time column this component was built around (120–150px, grey, 500).
+ * One class more than both time rules, so the order of the two sheets cannot
+ * matter. The header keeps the header's weight and colour. */
+.twm-preview-table.twm-dt--first-plain th:first-child,
+.twm-preview-table.twm-dt--first-plain td:first-child {
+    width: auto;
+    min-width: 80px;
+    max-width: none;
+}
+.twm-preview-table.twm-dt--first-plain td:first-child {
+    font-weight: inherit;
+    color: inherit;
+}
+.twm-preview-table.twm-dt--first-plain th:first-child {
+    font-weight: 600;
+    color: #aaa;
+}
+/* `onRowActivate` / `clickable` — a row that opens looks like it: a pointer,
+ * and a hover even on a readonly table. Never over a selected row, whose
+ * colour has to survive the pointer (see the selection rule's note), and never
+ * over the empty or failed state's row, which opens nothing. */
+.twm-preview-table.twm-dt--clickable tbody tr:not(.twm-dt-spacer):not(.data-table__empty-row) {
+    cursor: pointer;
+}
+.twm-preview-table.twm-dt--clickable tbody tr:not(.twm-dt-spacer):not(.data-table__empty-row):not(.selected):hover td {
+    background: var(--state-hover, rgba(255, 255, 255, 0.05));
+}
+/* `activeRow` — the row that is OPEN. A left edge, not a background: hover
+ * and selection keep theirs. */
+.twm-preview-table tbody tr.twm-dt-row--active > td:first-child {
+    box-shadow: inset 2px 0 0 0 var(--accent-bright, #007acc);
+}
+/* `rowIcon` — drawn from `data-twm-icon` so the icon's NAME is not cell
+ * text (not in a copy, not in the clipped-cell tooltip). The span carries the
+ * icon font's class; the pseudo-element inherits its font and ligatures. Top
+ * aligned on a line height of 1, so it cannot make its row taller. */
+.twm-preview-table td .twm-dt-row-icon {
+    display: inline-block;
+    font-size: 1.15em;
+    line-height: 1;
+    vertical-align: top;
+    margin-right: 4px;
+    opacity: 0.85;
+}
+.twm-preview-table td .twm-dt-row-icon::before {
+    content: attr(data-twm-icon);
+}
+.twm-preview-table td .twm-dt-row-icon--muted   { color: var(--text-muted, #888); }
+.twm-preview-table td .twm-dt-row-icon--info    { color: var(--color-info, #2196f3); }
+.twm-preview-table td .twm-dt-row-icon--success { color: var(--color-success, #3fb950); }
+.twm-preview-table td .twm-dt-row-icon--warn    { color: var(--color-warning, #ff9800); }
+.twm-preview-table td .twm-dt-row-icon--danger  { color: var(--color-danger, #c74e4e); }
+/* THESE CELLS ARE OFTEN A ROW'S FIRST CELL, and the first cell is the time
+ * column's: `.twm-preview-table td:first-child` (0,2,1, grey and weight 500,
+ * declared twice, the second copy far below), `firstColumn: 'plain'` (0,3,1,
+ * `color: inherit`) and the compact density's cell padding (0,2,1, in
+ * overrides.css) all reach them. A rule of the same weight LOSES to whichever
+ * comes later — which drew a failure in an empty list grey, exactly like an
+ * empty state, and gave both 2px of padding under compact. So each rule below
+ * is (0,3,2) or more: the wrapper and `tbody` in front of the cell's class,
+ * which no first-column or density rule matches, and the order of the sheets
+ * cannot matter. */
+/* `nullDisplay` — a NULL reads as one, not as the text "NULL". */
+.twm-data-table-component .twm-preview-table tbody td.twm-dt-cell--null {
+    color: var(--text-dim, #666);
+    font-style: italic;
+}
+/* `emptyState` and `setError` with no rows: the box's own words, which may
+ * wrap — muted for an empty state, red for a failure, in both densities. Quiet
+ * while loading — an empty table that is still loading is not empty. */
+.twm-data-table-component .twm-preview-table tbody td.twm-data-table__empty-cell.twm-data-table__empty-cell--state,
+.twm-data-table-component .twm-preview-table tbody td.twm-data-table__empty-cell.twm-data-table__empty-cell--error {
+    text-align: center;
+    padding: 16px;
+    white-space: normal;
+    font-weight: normal;
+    color: var(--text-muted, #888);
+}
+.twm-data-table-component .twm-preview-table tbody td.twm-data-table__empty-cell.twm-data-table__empty-cell--error {
+    color: var(--color-danger, #c74e4e);
+}
+.twm-data-table-component--loading .twm-preview-table td.twm-data-table__empty-cell--state {
+    visibility: hidden;
+}
+/* `setError` with rows: a banner over the rows that are KEPT. */
+.twm-data-table__error {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    font-size: var(--font-size-sm, 12px);
+    color: var(--color-danger, #c74e4e);
+    background: rgba(199, 78, 78, 0.12);
+    border-bottom: 1px solid rgba(199, 78, 78, 0.4);
+}
+.twm-data-table__error .twm-data-table__error-icon {
+    font-size: 16px;
+    line-height: 1;
+}
 /* Wizard mode: uniform column widths, no selection */
 .twm-preview-table-wrap--wizard .twm-preview-table {
     table-layout: auto;
@@ -1606,7 +1727,7 @@ body.twm-window-maximized .twm-resize-handle {
 }
 .twm-preview-table th, .twm-preview-table td { 
     border-bottom: 1px solid #2a2a2a; 
-    padding: var(--space-sm) 8px; 
+    padding: var(--twm-dt-cell-pad-block, var(--space-sm)) var(--twm-dt-cell-pad-inline, 8px); 
     white-space: nowrap;
 }
 .twm-preview-table th {
@@ -6617,8 +6738,10 @@ tr:hover .twm-row-action { opacity: 1; }
 }
 .twm-data-table-component--compact .twm-preview-table th,
 .twm-data-table-component--compact .twm-preview-table td {
-    padding: 2px 6px;
-    line-height: 1.35;
+    /* 0.5.0: the row-geometry tokens (tokens.css), falling back to exactly
+     * the 0.4 compact values. */
+    padding: var(--twm-dt-cell-pad-block, 2px) var(--twm-dt-cell-pad-inline, 6px);
+    line-height: var(--twm-dt-cell-line-height, 1.35);
 }
 .twm-data-table-component--compact .twm-pagination-controls {
     padding: 1px 6px !important;