@reliability-design/web 1.4.10 → 1.4.11

package/dist/styles/ag-grid.css

@@ -0,0 +1,274 @@
+/*
+ * Reliability Design System: AG Grid theme ("Data Table").
+ *
+ *   import "@reliability-design/web/vars.css";
+ *   import "@reliability-design/web/ag-grid.css";
+ *
+ *   <div class="rel-data-table" data-density="dense | comfortable">  (no attribute = default)
+ *     …toolbar… <ag-grid> …footer…
+ *   </div>
+ *
+ * AG Grid 33 and newer (the Theming API, its default theme themeQuartz), or 32.2–32.3
+ * when the app passes `theme: themeQuartz`. AG Grid's legacy CSS themes are not covered.
+ *
+ * Every theme param is an `--ag-*` custom property. A value set on an ancestor of the
+ * grid wins over the theme's own value, and every value here is one of our tokens, so
+ * light and dark follow vars.css (`.dark` / `[data-theme="dark"]`) with no AG Grid
+ * colour-scheme switching.
+ *
+ * Only grids inside `.rel-data-table` are themed; other grids keep AG Grid's look.
+ *
+ * Values come from the Published DS "Data Table" page (node 9300:2) and the rules
+ * decided for 1.5.0. Heights have no tokens (rows 40 / 56 / 64, header 48, with the
+ * row divider inside the row height).
+ */
+
+.rel-data-table {
+  /* ── Container: the Loads example's frame around toolbar + grid + footer ── */
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background-color: var(--rel-bg-surface);
+  border: 1px solid var(--rel-border-subtle);
+  border-radius: var(--rel-border-radius-md);
+  overflow: hidden;
+  color: var(--rel-text-default);
+  font-family: var(--rel-body-md-regular-font-family);
+
+  /* ── Type ── */
+  --ag-font-family: var(--rel-body-md-regular-font-family);
+  --ag-font-size: var(--rel-body-md-regular-font-size);
+  --ag-data-font-size: var(--rel-body-md-regular-font-size);
+  --ag-cell-font-size: var(--rel-body-md-regular-font-size);
+  --ag-cell-font-weight: var(--rel-body-md-regular-font-weight);
+  --ag-header-font-family: var(--rel-body-sm-semibold-font-family);
+  --ag-header-font-size: var(--rel-body-sm-semibold-font-size);
+  --ag-header-font-weight: var(--rel-body-sm-semibold-font-weight);
+
+  /* ── Colour ── */
+  --ag-text-color: var(--rel-text-default);
+  --ag-foreground-color: var(--rel-text-default);
+  --ag-cell-text-color: var(--rel-text-default);
+  --ag-subtle-text-color: var(--rel-text-caption);
+  --ag-background-color: var(--rel-bg-surface);
+  --ag-data-background-color: var(--rel-bg-surface);
+  --ag-odd-row-background-color: var(--rel-bg-surface);
+  --ag-chrome-background-color: var(--rel-bg-surface);
+  --ag-menu-background-color: var(--rel-bg-surface);
+  --ag-menu-text-color: var(--rel-text-default);
+  --ag-header-background-color: var(--rel-bg-neutral-elevated-1);
+  --ag-header-text-color: var(--rel-text-label);
+  --ag-header-cell-hover-background-color: transparent;
+  --ag-row-hover-color: var(--rel-bg-neutral-elevated-1);
+  --ag-selected-row-background-color: var(--rel-bg-info-light);
+  --ag-accent-color: var(--rel-border-focus);
+  --ag-range-selection-border-color: var(--rel-border-focus);
+  --ag-icon-button-hover-background-color: var(--rel-action-overlay-hover);
+  --ag-browser-color-scheme: light;
+
+  /* ── Size ── */
+  --ag-header-height: 48px;
+  --ag-row-height: 56px;
+  --ag-cell-horizontal-padding: var(--rel-spacing-md);
+  --ag-spacing: var(--rel-spacing-xs);
+  --ag-icon-size: 16px;
+  --ag-border-radius: var(--rel-border-radius-xs);
+
+  /* ── Lines: a divider under each row, none between columns ── */
+  --ag-border-color: var(--rel-border-subtle);
+  --ag-row-border: 1px solid var(--rel-border-subtle);
+  --ag-header-row-border: 1px solid var(--rel-border-subtle);
+  --ag-column-border: none;
+  --ag-header-column-border: none;
+  --ag-pinned-column-border: 1px solid var(--rel-border-subtle);
+  --ag-pinned-row-border: 1px solid var(--rel-border-subtle);
+  --ag-wrapper-border: none;
+  --ag-wrapper-border-radius: 0;
+
+  /* ── Focus: a 2px ring (AG Grid adds `inset` where the ring goes inside) ── */
+  --ag-focus-shadow: 0 0 0 2px var(--rel-border-focus);
+
+  /* ── Column resize: no handle at rest ── */
+  --ag-header-column-resize-handle-color: transparent;
+  --ag-header-column-resize-handle-width: 1px;
+  --ag-header-column-resize-handle-height: 100%;
+
+  /* ── Checkboxes, as rel-checkbox ── */
+  --ag-checkbox-checked-background-color: var(--rel-text-default);
+  --ag-checkbox-checked-border-color: var(--rel-text-default);
+  --ag-checkbox-checked-shape-color: var(--rel-text-inverse);
+  --ag-checkbox-indeterminate-background-color: var(--rel-text-default);
+  --ag-checkbox-indeterminate-border-color: var(--rel-text-default);
+  --ag-checkbox-indeterminate-shape-color: var(--rel-text-inverse);
+  --ag-checkbox-unchecked-background-color: transparent;
+  --ag-checkbox-unchecked-border-color: var(--rel-text-default);
+
+  /* ── Menus and tooltips, as rel-menu and rel-tooltip ── */
+  --ag-menu-border: 1px solid var(--rel-border-subtle);
+  --ag-menu-shadow: var(--rel-shadows-md);
+  --ag-popup-shadow: var(--rel-shadows-md);
+  --ag-tooltip-background-color: var(--rel-bg-neutral-inverse-2);
+  --ag-tooltip-text-color: var(--rel-text-inverse);
+  --ag-tooltip-border: none;
+}
+
+/* Scrollbars and native widgets follow dark mode. */
+:root[data-theme="dark"] .rel-data-table,
+.dark .rel-data-table,
+.rel-data-table.dark {
+  --ag-browser-color-scheme: dark;
+}
+
+/* ── Density. AG Grid measures --ag-row-height and lays the rows out again. ── */
+.rel-data-table[data-density="dense"] {
+  --ag-row-height: 40px;
+}
+
+.rel-data-table[data-density="comfortable"] {
+  --ag-row-height: 64px;
+}
+
+/* ── The grid fills the space between toolbar and footer ── */
+.rel-data-table .ag-root-wrapper {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* ── Line heights: header body-sm. Cells keep AG Grid's own line-height (the row height),
+      which is what centres one-line text vertically; the two-line stack sets body-md. ── */
+.rel-data-table .ag-header-cell-text {
+  line-height: var(--rel-body-sm-semibold-line-height);
+}
+
+/* ── Focused cell: a 2px ring inside, without moving the content, for keyboard focus only.
+      AG Grid exposes no keyboard-mode class, so the ring follows :focus-visible: a mouse click
+      focuses the cell (or its checkbox) without it, and AG Grid's focus() after an arrow key or
+      Tab matches it. AG Grid's own 1px focus border is hidden either way. ── */
+.rel-data-table .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
+  border-color: transparent;
+}
+
+.rel-data-table .ag-cell-focus:not(.ag-cell-range-selected):is(:focus-visible, :has(:focus-visible)) {
+  box-shadow: inset 0 0 0 2px var(--rel-border-focus);
+}
+
+/* AG Grid rings a checkbox on :focus-within / :active; keyboard only here too. */
+.rel-data-table .ag-checkbox-input-wrapper:is(:focus-within, :active):not(:has(:focus-visible)) {
+  box-shadow: none;
+}
+
+/* ── Column resize: a line on header hover, 2px in the focus colour while dragging ── */
+.rel-data-table .ag-header:hover {
+  --ag-header-column-resize-handle-color: var(--rel-border-default);
+}
+
+.rel-data-table .ag-header-cell.ag-column-resizing {
+  --ag-header-column-resize-handle-color: var(--rel-border-focus);
+  --ag-header-column-resize-handle-width: 2px;
+}
+
+/* ── Sort: a sortable header shows the unsorted icon at rest, and the arrow once sorted.
+      AG Grid (32–36) always renders the unsorted icon on sortable headers and hides it with
+      .ag-hidden (display: none !important) unless `unSortIcon` is set; this shows it in an
+      unsorted column, which is what `defaultColDef: { unSortIcon: true }` does. Columns with
+      `sortable: false` have no icon. ── */
+.rel-data-table .ag-header-cell-sorted-none .ag-sort-none-icon.ag-hidden {
+  display: inline !important;
+}
+
+/* ── Numbers and currency: right-aligned (columnType "rightAligned"), tabular figures ── */
+.rel-data-table .rel-data-table__cell--numeric {
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--rel-body-md-medium-font-weight);
+}
+
+/* ── Two-line cell: label over subtext (a date over its time window) ── */
+.rel-data-table .rel-data-table__stack {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  height: 100%;
+  line-height: var(--rel-body-md-regular-line-height);
+}
+
+.rel-data-table .rel-data-table__stack > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rel-data-table .rel-data-table__subtext {
+  color: var(--rel-text-caption);
+  font-size: var(--rel-body-sm-regular-font-size);
+  line-height: var(--rel-body-sm-regular-line-height);
+}
+
+/* ── Empty value: the dash in the caption colour ── */
+.rel-data-table .rel-data-table__empty {
+  color: var(--rel-text-caption);
+}
+
+/* ── Text for screen readers only (e.g. "No value" behind the dash) ── */
+.rel-data-table .rel-data-table__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Error row (rowClassRules "rel-data-table__row--error"): danger fill, which also
+      wins over hover and selection, and a 4px rule on the first displayed cell ── */
+.rel-data-table .ag-row.rel-data-table__row--error {
+  background-color: var(--rel-bg-danger-light);
+  --ag-row-hover-color: transparent;
+  --ag-selected-row-background-color: var(--rel-bg-danger-light);
+}
+
+.rel-data-table .ag-row.rel-data-table__row--error .ag-cell[aria-colindex="1"] {
+  box-shadow: inset 4px 0 0 var(--rel-bg-danger);
+}
+
+/* The keyboard focus ring still shows on the first cell of an error row. */
+.rel-data-table .ag-row.rel-data-table__row--error .ag-cell[aria-colindex="1"].ag-cell-focus:not(.ag-cell-range-selected):is(:focus-visible, :has(:focus-visible)) {
+  box-shadow: inset 4px 0 0 var(--rel-bg-danger), inset 0 0 0 2px var(--rel-border-focus);
+}
+
+/* ── Disabled row (rowClassRules "rel-data-table__row--disabled") ── */
+.rel-data-table .ag-row.rel-data-table__row--disabled {
+  opacity: 0.4;
+}
+
+/* ── AG Grid's tooltip, as rel-tooltip ── */
+.rel-data-table .ag-tooltip {
+  padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
+  border-radius: var(--rel-border-radius-sm);
+  font-family: var(--rel-body-md-regular-font-family);
+  font-size: var(--rel-body-md-regular-font-size);
+  font-weight: var(--rel-body-md-medium-font-weight);
+  line-height: var(--rel-body-md-regular-line-height);
+}
+
+/* ── Message block in place of the rows (empty, no results, failed load) ── */
+.rel-data-table .rel-data-table__message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--rel-spacing-xs);
+  padding: var(--rel-spacing-md);
+  text-align: center;
+  color: var(--rel-text-body);
+  pointer-events: auto;
+}
+
+.rel-data-table .rel-data-table__message-title {
+  color: var(--rel-text-default);
+  font-size: var(--rel-body-md-medium-font-size);
+  font-weight: var(--rel-body-md-medium-font-weight);
+  line-height: var(--rel-body-md-medium-line-height);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reliability-design/web",
-  "version": "1.4.10",
+  "version": "1.4.11",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -34,6 +34,7 @@
     },
     "./vars.css": "./dist/styles/vars.css",
     "./motion.css": "./dist/styles/motion.css",
+    "./ag-grid.css": "./dist/styles/ag-grid.css",
     "./motion.tokens.json": "./dist/styles/motion.tokens.json",
     "./custom-elements.json": "./custom-elements.json"
   },