feat!: data tables, activity indicator + loading buttons, and category reorg

### Highlights

- **Data tables** — new `nldd-table` + `nldd-table-row` bring column-aligned layouts built on the existing cells. Columns are a CSS grid track list that every row shares through subgrid, a `header` slot pins the column headers, and rows are individually selectable. The table is always a boxed surface with a `base` or `tinted` background and full-bleed dividers; overflowing tables inside `nldd-rich-text` adopt the same look.
- **Activity indicator** — `nldd-progress` becomes `nldd-activity-indicator`, now defaulting to an inline, icon-sized `currentColor` ring that scales like an icon, with a `timing` choice between the 1000 ms anti-flash delay and an instant fade-in.
- **Loading buttons** — `nldd-button` and `nldd-icon-button` gain a `loading` state that overlays a centered `nldd-activity-indicator`: the label is hidden without a width jump, and the control stays focusable while it announces `aria-busy` and blocks activation.
- **Reorganized categories** — `menu` moves to **Actions** and **Lists & Menus** becomes **Lists & Tables**, making room for the new table family (import paths and Storybook nav change — see Breaking).
- **Two new icons** — `book` (aliases `guide`, `read`) and `lightbulb` (alias `idea`).

### Added

- **`nldd-table` + `nldd-table-row`**: a `columns` grid-track list applied once and shared by every row via subgrid for true column alignment; reuses `nldd-cell` (generic cells default to full width inside a table); a `header` slot rendered first with `columnheader` roles; per-row `selected` styling; an empty state ("Geen items"); and keyboard focus when the table scrolls horizontally. Always a boxed surface — `background="base"` (default) or `"tinted"`, full-bleed row dividers, inline padding on the rows.
- **`nldd-button` / `nldd-icon-button`**: a `loading` boolean that overlays a centered `nldd-activity-indicator`, hides the label without shifting width, sets `aria-busy`, blocks activation while staying focusable, and matches the control's size and color.
- **`nldd-activity-indicator`** (renamed from `nldd-progress`): a new default inline indicator — an icon-sized `currentColor` ring whose stroke scales with `size` (the `nldd-icon` scale, default `28`). A new `timing` (`'default' | 'instant'`, like `nldd-tooltip`) keeps the 1000 ms anti-flash delay or skips straight to the fade-in. `show-text` (default off) replaces `no-label`, with the accessible name always present via `aria-label`. `text`, `translations`, `complete`, and the overridable default slot are retained.
- **Cells**: `hide-below` / `hide-above` accept named breakpoints, resolved against the surrounding list/table width.
- **`nldd-rich-text`**: `<table>` elements are styled to match `nldd-table` (rounded boxed frame, full-bleed dividers, edge-inset cells).
- **Icons**: `book` (aliases `guide`, `read`) and `lightbulb` (alias `idea`).
- **Tokens**: a shared `--semantics-tables-*` range (border color/width, row padding, column gap, row min-height, selected-row colors) used by `nldd-table` and the rich-text tables.
- **`nldd-progress-bar` / `nldd-progress-circle`**: the indeterminate indicator now carries the same 1px token-colored highlight border as the determinate segment-indicators.

### Breaking

- **Component categories moved.** Import paths change: `…/lists-and-menus/*` → `…/lists-and-tables/*`, and `menu` moves to `…/actions/menu`. Storybook nav follows (`Components/Lists & Menus/*` → `Components/Lists & Tables/*`, `Menu` → `Components/Actions/Menu`).
- **`nldd-progress` → `nldd-activity-indicator`.** The element, class (`NLDDProgress` → `NLDDActivityIndicator`), and translation key are renamed with no alias. `no-label` is replaced by `show-text` (the label is now hidden by default).
- **Progress `segment` → `segment-indicator`.** `nldd-progress-bar-segment` → `nldd-progress-bar-segment-indicator` (and the circle equivalent); exported classes `NLDDProgress{Bar,Circle}Segment` → `…SegmentIndicator`; and the `--components-progress-*-segment-*` custom properties gain `-indicator`.
- **Surface tokens renamed** (same values) so the default variant is named alongside `tinted`:
  - `--semantics-surfaces-background-color` → `--semantics-surfaces-base-background-color`
  - `--semantics-surfaces-border-color` → `--semantics-surfaces-base-border-color`

### Fixed

- **`nldd-rich-text`**: the host now fills its container's width so a slotted grid resolves its `1fr` tracks in Firefox (Chrome/Safari already did).
- **`nldd-code-viewer`**: the copy button no longer sticks to the corner — it scrolls with the code.

Author: bartvandebiezen

.storybook/preview.css

@@ -11,5 +11,5 @@
  *                   otherwise keeps Storybook's own white docs background) */
 body,
 .docs-story {
-	background-color: var(--semantics-surfaces-background-color);
+	background-color: var(--semantics-surfaces-base-background-color);
 }

CHANGELOG.md

@@ -9,6 +9,39 @@ the type of conventional-commit determines the release. Conventional types
 `chore`, `docs`, `ci`, `style`, `test`, `build` are intentionally omitted
 here; consult the commit history if you need that level of detail.
 
+### Highlights
+
+- **Data tables** — new `nldd-table` + `nldd-table-row` bring column-aligned layouts built on the existing cells. Columns are a CSS grid track list that every row shares through subgrid, a `header` slot pins the column headers, and rows are individually selectable. The table is always a boxed surface with a `base` or `tinted` background and full-bleed dividers; overflowing tables inside `nldd-rich-text` adopt the same look.
+- **Activity indicator** — `nldd-progress` becomes `nldd-activity-indicator`, now defaulting to an inline, icon-sized `currentColor` ring that scales like an icon, with a `timing` choice between the 1000 ms anti-flash delay and an instant fade-in.
+- **Loading buttons** — `nldd-button` and `nldd-icon-button` gain a `loading` state that overlays a centered `nldd-activity-indicator`: the label is hidden without a width jump, and the control stays focusable while it announces `aria-busy` and blocks activation.
+- **Reorganized categories** — `menu` moves to **Actions** and **Lists & Menus** becomes **Lists & Tables**, making room for the new table family (import paths and Storybook nav change — see Breaking).
+- **Two new icons** — `book` (aliases `guide`, `read`) and `lightbulb` (alias `idea`).
+
+### Added
+
+- **`nldd-table` + `nldd-table-row`**: a `columns` grid-track list applied once and shared by every row via subgrid for true column alignment; reuses `nldd-cell` (generic cells default to full width inside a table); a `header` slot rendered first with `columnheader` roles; per-row `selected` styling; an empty state ("Geen items"); and keyboard focus when the table scrolls horizontally. Always a boxed surface — `background="base"` (default) or `"tinted"`, full-bleed row dividers, inline padding on the rows.
+- **`nldd-button` / `nldd-icon-button`**: a `loading` boolean that overlays a centered `nldd-activity-indicator`, hides the label without shifting width, sets `aria-busy`, blocks activation while staying focusable, and matches the control's size and color.
+- **`nldd-activity-indicator`** (renamed from `nldd-progress`): a new default inline indicator — an icon-sized `currentColor` ring whose stroke scales with `size` (the `nldd-icon` scale, default `28`). A new `timing` (`'default' | 'instant'`, like `nldd-tooltip`) keeps the 1000 ms anti-flash delay or skips straight to the fade-in. `show-text` (default off) replaces `no-label`, with the accessible name always present via `aria-label`. `text`, `translations`, `complete`, and the overridable default slot are retained.
+- **Cells**: `hide-below` / `hide-above` accept named breakpoints, resolved against the surrounding list/table width.
+- **`nldd-rich-text`**: `<table>` elements are styled to match `nldd-table` (rounded boxed frame, full-bleed dividers, edge-inset cells).
+- **Icons**: `book` (aliases `guide`, `read`) and `lightbulb` (alias `idea`).
+- **Tokens**: a shared `--semantics-tables-*` range (border color/width, row padding, column gap, row min-height, selected-row colors) used by `nldd-table` and the rich-text tables.
+- **`nldd-progress-bar` / `nldd-progress-circle`**: the indeterminate indicator now carries the same 1px token-colored highlight border as the determinate segment-indicators.
+
+### Breaking
+
+- **Component categories moved.** Import paths change: `…/lists-and-menus/*` → `…/lists-and-tables/*`, and `menu` moves to `…/actions/menu`. Storybook nav follows (`Components/Lists & Menus/*` → `Components/Lists & Tables/*`, `Menu` → `Components/Actions/Menu`).
+- **`nldd-progress` → `nldd-activity-indicator`.** The element, class (`NLDDProgress` → `NLDDActivityIndicator`), and translation key are renamed with no alias. `no-label` is replaced by `show-text` (the label is now hidden by default).
+- **Progress `segment` → `segment-indicator`.** `nldd-progress-bar-segment` → `nldd-progress-bar-segment-indicator` (and the circle equivalent); exported classes `NLDDProgress{Bar,Circle}Segment` → `…SegmentIndicator`; and the `--components-progress-*-segment-*` custom properties gain `-indicator`.
+- **Surface tokens renamed** (same values) so the default variant is named alongside `tinted`:
+  - `--semantics-surfaces-background-color` → `--semantics-surfaces-base-background-color`
+  - `--semantics-surfaces-border-color` → `--semantics-surfaces-base-border-color`
+
+### Fixed
+
+- **`nldd-rich-text`**: the host now fills its container's width so a slotted grid resolves its `1fr` tracks in Firefox (Chrome/Safari already did).
+- **`nldd-code-viewer`**: the copy button no longer sticks to the corner — it scrolls with the code.
+
 ## <small>0.8.53 (2026-05-31)</small>
 
 * feat!: isolate slotted content, unify progress + corner-radius APIs, and refine components ([f84cfe2](https://github.com/MinBZK/storybook/commit/f84cfe2))

package-lock.json

@@ -31,6 +31,10 @@
       "types": "./dist/components/actions/toolbar/toolbar.d.ts",
       "default": "./dist/components/actions/toolbar/toolbar.js"
     },
+    "./menu": {
+      "types": "./dist/components/actions/menu/menu.d.ts",
+      "default": "./dist/components/actions/menu/menu.js"
+    },
     "./icon": {
       "types": "./dist/components/content/icon/icon.d.ts",
       "default": "./dist/components/content/icon/icon.js"
@@ -251,49 +255,49 @@
       "types": "./dist/components/layout/page-footer/page-footer.d.ts",
       "default": "./dist/components/layout/page-footer/page-footer.js"
     },
-    "./menu": {
-      "types": "./dist/components/lists-and-menus/menu/menu.d.ts",
-      "default": "./dist/components/lists-and-menus/menu/menu.js"
-    },
     "./list": {
-      "types": "./dist/components/lists-and-menus/list/list.d.ts",
-      "default": "./dist/components/lists-and-menus/list/list.js"
+      "types": "./dist/components/lists-and-tables/list/list.d.ts",
+      "default": "./dist/components/lists-and-tables/list/list.js"
     },
     "./list-item": {
-      "types": "./dist/components/lists-and-menus/list-item/list-item.d.ts",
-      "default": "./dist/components/lists-and-menus/list-item/list-item.js"
+      "types": "./dist/components/lists-and-tables/list-item/list-item.d.ts",
+      "default": "./dist/components/lists-and-tables/list-item/list-item.js"
+    },
+    "./table": {
+      "types": "./dist/components/lists-and-tables/table/table.d.ts",
+      "default": "./dist/components/lists-and-tables/table/table.js"
     },
     "./cell": {
-      "types": "./dist/components/lists-and-menus/cells/cell/cell.d.ts",
-      "default": "./dist/components/lists-and-menus/cells/cell/cell.js"
+      "types": "./dist/components/lists-and-tables/cells/cell/cell.d.ts",
+      "default": "./dist/components/lists-and-tables/cells/cell/cell.js"
     },
     "./spacer-cell": {
-      "types": "./dist/components/lists-and-menus/cells/spacer-cell/spacer-cell.d.ts",
-      "default": "./dist/components/lists-and-menus/cells/spacer-cell/spacer-cell.js"
+      "types": "./dist/components/lists-and-tables/cells/spacer-cell/spacer-cell.d.ts",
+      "default": "./dist/components/lists-and-tables/cells/spacer-cell/spacer-cell.js"
     },
     "./icon-cell": {
-      "types": "./dist/components/lists-and-menus/cells/icon-cell/icon-cell.d.ts",
-      "default": "./dist/components/lists-and-menus/cells/icon-cell/icon-cell.js"
+      "types": "./dist/components/lists-and-tables/cells/icon-cell/icon-cell.d.ts",
+      "default": "./dist/components/lists-and-tables/cells/icon-cell/icon-cell.js"
     },
     "./title-cell": {
-      "types": "./dist/components/lists-and-menus/cells/title-cell/title-cell.d.ts",
-      "default": "./dist/components/lists-and-menus/cells/title-cell/title-cell.js"
+      "types": "./dist/components/lists-and-tables/cells/title-cell/title-cell.d.ts",
+      "default": "./dist/components/lists-and-tables/cells/title-cell/title-cell.js"
     },
     "./text-cell": {
-      "types": "./dist/components/lists-and-menus/cells/text-cell/text-cell.d.ts",
-      "default": "./dist/components/lists-and-menus/cells/text-cell/text-cell.js"
+      "types": "./dist/components/lists-and-tables/cells/text-cell/text-cell.d.ts",
+      "default": "./dist/components/lists-and-tables/cells/text-cell/text-cell.js"
     },
     "./description-cell": {
-      "types": "./dist/components/lists-and-menus/cells/description-cell/description-cell.d.ts",
-      "default": "./dist/components/lists-and-menus/cells/description-cell/description-cell.js"
+      "types": "./dist/components/lists-and-tables/cells/description-cell/description-cell.d.ts",
+      "default": "./dist/components/lists-and-tables/cells/description-cell/description-cell.js"
     },
     "./drag-handle-cell": {
-      "types": "./dist/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.d.ts",
-      "default": "./dist/components/lists-and-menus/cells/drag-handle-cell/drag-handle-cell.js"
+      "types": "./dist/components/lists-and-tables/cells/drag-handle-cell/drag-handle-cell.d.ts",
+      "default": "./dist/components/lists-and-tables/cells/drag-handle-cell/drag-handle-cell.js"
     },
     "./timeline-track-cell": {
-      "types": "./dist/components/lists-and-menus/cells/timeline-track-cell/timeline-track-cell.d.ts",
-      "default": "./dist/components/lists-and-menus/cells/timeline-track-cell/timeline-track-cell.js"
+      "types": "./dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.d.ts",
+      "default": "./dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.js"
     },
     "./breadcrumbs": {
       "types": "./dist/components/navigation/breadcrumbs/breadcrumbs.d.ts",
@@ -359,9 +363,9 @@
       "types": "./dist/components/status-and-feedback/progress-circle/progress-circle.d.ts",
       "default": "./dist/components/status-and-feedback/progress-circle/progress-circle.js"
     },
-    "./progress": {
-      "types": "./dist/components/status-and-feedback/progress/progress.d.ts",
-      "default": "./dist/components/status-and-feedback/progress/progress.js"
+    "./activity-indicator": {
+      "types": "./dist/components/status-and-feedback/activity-indicator/activity-indicator.d.ts",
+      "default": "./dist/components/status-and-feedback/activity-indicator/activity-indicator.js"
     },
     "./styles": "./dist/css/global.css",
     "./styles/tokens": "./dist/css/settings.css",

package.json

@@ -869,8 +869,8 @@
 
 	/* ## Surfaces */
 
-	--semantics-surfaces-background-color: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-100));
-	--semantics-surfaces-border-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
+	--semantics-surfaces-base-background-color: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-100));
+	--semantics-surfaces-base-border-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
 	--semantics-surfaces-tinted-background-color: light-dark(var(--primitives-color-neutral-25), var(--primitives-color-neutral-75));
 	--semantics-surfaces-tinted-border-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
 	--semantics-surfaces-corner-radius: var(--primitives-corner-radius-lg);
@@ -1034,7 +1034,7 @@
 	--semantics-input-fields-border-thickness: var(--primitives-border-width-regular);
 	--semantics-input-fields-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
 	--semantics-input-fields-border: var(--semantics-input-fields-border-thickness) solid var(--semantics-input-fields-border-color);
-	--semantics-input-fields-background-color: var(--semantics-surfaces-background-color);
+	--semantics-input-fields-background-color: var(--semantics-surfaces-base-background-color);
 	--semantics-input-fields-placeholder-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
 	--semantics-input-fields-is-valid-border-color: light-dark(var(--primitives-color-success-550), var(--primitives-color-success-650));
 	--semantics-input-fields-is-valid-icon-color: light-dark(var(--primitives-color-success-550), var(--primitives-color-success-650));
@@ -1076,6 +1076,18 @@
 	--semantics-dividers-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
 	--semantics-dividers-thickness: var(--primitives-border-width-thin);
 
+	/* ## Tables */
+
+	--semantics-tables-corner-radius: var(--semantics-surfaces-corner-radius);
+	--semantics-tables-border-color: var(--semantics-dividers-color);
+	--semantics-tables-border-width: var(--semantics-dividers-thickness);
+	--semantics-tables-column-gap: var(--primitives-space-8);
+	--semantics-tables-row-min-height: var(--semantics-controls-md-min-size);
+	--semantics-tables-row-padding-block: var(--primitives-space-8);
+	--semantics-tables-row-padding-inline: var(--primitives-space-12);
+	--semantics-tables-row-is-selected-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
+	--semantics-tables-row-is-selected-content-color: var(--primitives-color-neutral-1000);
+
 	/* ## Page sections */
 
 	--semantics-page-sections-body-max-width: var(--primitives-area-1280);
@@ -1111,7 +1123,7 @@
 
 	--semantics-focus-ring-outline: var(--primitives-border-width-regular) solid var(--primitives-color-accent-600);
 	--semantics-focus-ring-outline-offset: var(--primitives-border-width-regular);
-	--semantics-focus-ring-box-shadow: 0 0 0 calc(var(--primitives-border-width-regular) * 3) var(--semantics-surfaces-background-color);
+	--semantics-focus-ring-box-shadow: 0 0 0 calc(var(--primitives-border-width-regular) * 3) var(--semantics-surfaces-base-background-color);
 
 
 	/* ## Categories — filled
@@ -1305,9 +1317,9 @@
 	/* ## Box */
 
 	--components-box-background-color: var(--semantics-surfaces-tinted-background-color);
-	--components-box-base-background-color: var(--semantics-surfaces-background-color);
+	--components-box-base-background-color: var(--semantics-surfaces-base-background-color);
 	--components-box-border-color: var(--semantics-surfaces-tinted-border-color);
-	--components-box-base-border-color: var(--semantics-surfaces-border-color);
+	--components-box-base-border-color: var(--semantics-surfaces-base-border-color);
 	--components-box-corner-radius: var(--semantics-surfaces-corner-radius);
 	--components-box-padding: var(--primitives-space-16);
 
@@ -1331,7 +1343,7 @@
 
 	--components-checkbox-border-thickness: var(--primitives-border-width-regular);
 	--components-checkbox-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
-	--components-checkbox-background-color: var(--semantics-surfaces-background-color);
+	--components-checkbox-background-color: var(--semantics-surfaces-base-background-color);
 	--components-checkbox-is-hovered-border-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-700));
 	--components-checkbox-is-active-border-color: light-dark(var(--primitives-color-neutral-650), var(--primitives-color-neutral-750));
 	--components-checkbox-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
@@ -1500,9 +1512,9 @@
 	--components-progress-bar-track-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
 	--components-progress-bar-track-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
 	--components-progress-bar-track-border-width: var(--primitives-border-width-thin);
-	--components-progress-bar-progress-segment-gap: var(--primitives-space-1);
-	--components-progress-bar-distribution-segment-gap: var(--primitives-space-2);
-	--components-progress-bar-segment-min-width: var(--primitives-space-2);
+	--components-progress-bar-progress-segment-indicator-gap: var(--primitives-space-1);
+	--components-progress-bar-distribution-segment-indicator-gap: var(--primitives-space-2);
+	--components-progress-bar-segment-indicator-min-width: var(--primitives-space-2);
 	--components-progress-bar-sm-height: var(--primitives-space-4);
 	--components-progress-bar-md-height: var(--primitives-space-8);
 	--components-progress-bar-lg-height: var(--primitives-space-16);
@@ -1514,7 +1526,7 @@
 
 	/* ### Progress bar — semantic variants */
 
-	--components-progress-bar-segment-border-width: var(--primitives-border-width-thin);
+	--components-progress-bar-segment-indicator-border-width: var(--primitives-border-width-thin);
 
 	--components-progress-bar-neutral-background-color: var(--semantics-categories-filled-neutral-background-color);
 	--components-progress-bar-neutral-border-color: var(--semantics-categories-filled-neutral-border-color);
@@ -1642,7 +1654,7 @@
 
 	--components-radio-button-border-thickness: var(--primitives-border-width-regular);
 	--components-radio-button-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
-	--components-radio-button-background-color: var(--semantics-surfaces-background-color);
+	--components-radio-button-background-color: var(--semantics-surfaces-base-background-color);
 	--components-radio-button-is-hovered-border-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-700));
 	--components-radio-button-is-active-border-color: light-dark(var(--primitives-color-neutral-650), var(--primitives-color-neutral-750));
 	--components-radio-button-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
@@ -1671,10 +1683,10 @@
 
 	--components-switch-border-thickness: var(--primitives-border-width-regular);
 	--components-switch-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
-	--components-switch-background-color: var(--semantics-surfaces-background-color);
+	--components-switch-background-color: var(--semantics-surfaces-base-background-color);
 	--components-switch-thumb-border-thickness: var(--primitives-border-width-regular);
 	--components-switch-thumb-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
-	--components-switch-thumb-background-color: var(--semantics-surfaces-background-color);
+	--components-switch-thumb-background-color: var(--semantics-surfaces-base-background-color);
 	--components-switch-icon-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
 	--components-switch-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
 	--components-switch-is-selected-thumb-background-color: var(--semantics-controls-is-highlighted-contrast-color);
@@ -1739,7 +1751,7 @@
 	/* ## Timeline track cell */
 
 	--components-timeline-track-cell-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
-	--components-timeline-track-cell-future-background-color: var(--semantics-surfaces-background-color);
+	--components-timeline-track-cell-future-background-color: var(--semantics-surfaces-base-background-color);
 
 	/* ## Title */