@spark-web/design-system 5.0.99 → 5.1.0

package/ai-context/layer-3-component.md

@@ -0,0 +1,271 @@
+# Layer 3 — Component CLAUDE.md files
+
+## What this layer is
+
+Every component package that an agent is expected to use gets its own
+`CLAUDE.md` inside `packages/[component]/`. This file is the agent's contract
+for that component: what it does, how its pieces fit together, what tokens to
+use, and what it must never do.
+
+This is the most granular layer. It is read last — only after the surface
+classifier, surface rules, and feature pattern have already been read. By the
+time the agent reaches this file it already knows _which_ components to use and
+_why_. This file tells it _how_.
+
+---
+
+## Where these files live
+
+```
+packages/
+  table/
+    CLAUDE.md        ← component rules for @spark-web/table
+    src/
+      Table.tsx
+      table.stories.tsx
+      table.test.tsx
+  status-badge/
+    CLAUDE.md
+  meatball/
+    CLAUDE.md
+  header/
+    CLAUDE.md
+  ...
+```
+
+One `CLAUDE.md` per package. Not one per sub-component — one per package.
+
+---
+
+## Anatomy of a component CLAUDE.md
+
+The sections below are the standard structure. Every component file should
+follow this shape. Use `@spark-web/table` as the reference example.
+
+---
+
+### Section 1 — What this package is
+
+One short paragraph. Plain language. States the component's purpose and its
+compositional structure (sub-components, if any).
+
+```markdown
+## What this package is
+
+A composable table component for displaying tabular data. Five sub-components
+used together: Table, TableHeaderRow, TableHeaderCell, TableRow, TableCell.
+Optional TablePagination is a separate compositional layer used OUTSIDE Table.
+```
+
+---
+
+### Section 2 — What this package is NOT
+
+Equally important. Explicitly rules out common misuses. This prevents the agent
+from reaching for this component when a different one is needed, and prevents it
+from adding features the component was never designed to have.
+
+```markdown
+## What this package is NOT
+
+- Not a data-grid. No virtual scrolling, column reordering, or column resizing.
+- Not a standalone component. TableRow and TableCell are meaningless outside
+  Table.
+- Not responsible for data fetching, sorting, or filtering.
+```
+
+---
+
+### Section 3 — Component hierarchy
+
+Shows the parent/child relationship between sub-components. For simple single-
+component packages this can be omitted. For composable packages it is essential.
+
+```markdown
+## Component hierarchy
+
+Table ← scroll container, layout owner TableHeaderRow ← always first child of
+Table TableHeaderCell ← one per column, owns sort state TableRow (× n) ← one per
+data row, owns row state TableCell (× n) ← one per column per row
+TableRow[state=loading] ← replaces data rows during fetch, no children
+
+TablePagination is always OUTSIDE and BELOW Table — never inside it.
+```
+
+---
+
+### Section 4 — Token usage
+
+All design token values the component uses, grouped by category. This is the
+most mechanical section and must be exhaustive — if a token is omitted the agent
+will either guess or use a raw value.
+
+Every token must reference `useTheme()` from `@spark-web/theme`. Raw hex values,
+pixel values, and Tailwind classes are never acceptable.
+
+```markdown
+## Token usage
+
+All values from useTheme() from @spark-web/theme.
+
+### Spacing tokens
+
+Cell padding all sides: theme.spacing.large Header cell padding horizontal:
+theme.spacing.large Pagination gap between buttons: theme.spacing.small
+
+### Color tokens
+
+Cell background default: theme.color.background.surface Cell background hover:
+theme.color.background.inputPressed Cell text default:
+theme.color.foreground.neutral Header cell background:
+theme.color.background.surface
+
+### Typography
+
+Use @spark-web/text for all text. Never raw <p> or <span>. Cell content:
+<Text tone="neutral"> using Body/Small scale Header cell label:
+<Text weight="semibold"> using xSmall scale
+```
+
+---
+
+### Section 5 — States (if applicable)
+
+For components with visual states, list every valid state, the prop that
+controls it, and the tokens that apply. Be specific about which states interact
+(e.g. hover must not apply when state is disabled).
+
+```markdown
+## Row states
+
+state prop on TableRow: 'default' | 'selected' | 'disabled' | 'loading' Hover is
+CSS :hover only — not a state prop.
+
+default: theme.color.background.surface, text theme.color.foreground.neutral
+hover: theme.color.background.inputPressed, text theme.color.foreground.neutral
+selected: theme.color.background.primarySoft, text
+theme.color.foreground.neutral disabled: theme.color.background.inputDisabled,
+text theme.color.foreground.disabled, pointer-events none loading:
+theme.color.background.surface, renders "Loading" + spinner, ignores children
+
+Hover must NOT apply when state is disabled or loading.
+```
+
+---
+
+### Section 6 — Composition rules
+
+Numbered constraints on how sub-components must be assembled. These prevent
+structural errors that would silently render incorrectly or break at runtime.
+
+```markdown
+## Composition rules
+
+1. Table must always contain exactly one TableHeaderRow as its first child.
+2. TableHeaderRow must contain one TableHeaderCell per column.
+3. TableRow must contain the same number of TableCell children as header
+   columns.
+4. A loading TableRow ignores all children.
+5. TablePagination is always a sibling of Table, never a child.
+```
+
+---
+
+### Section 7 — Do NOTs
+
+A bulleted list of the most common agent mistakes for this component, stated as
+explicit prohibitions. These should cover the things an agent would most likely
+get wrong if it had only read the component source code without this file.
+
+```markdown
+## Do NOTs
+
+- NEVER raw hex values e.g. #1a2a3a — always use theme color tokens
+- NEVER raw pixel values e.g. 16px — always use theme spacing/sizing tokens
+- NEVER Tailwind classes — use Emotion CSS-in-JS via useTheme()
+- NEVER TableCell state prop — state on TableRow only
+- NEVER TablePagination inside Table
+- NEVER raw <table> <tr> <th> <td> HTML elements
+- NEVER omit forwardRef
+- NEVER re-implement the status dot/pill inline — use StatusBadge
+```
+
+---
+
+## How this layer defers to surface rules
+
+A component CLAUDE.md defines _default_ behaviour. Surface rules override those
+defaults for a specific product context.
+
+Example: the table component has a hover state. The component CLAUDE.md defines
+the token to use for that hover state. The internal admin surface rules define
+_when_ hover is applied at all (only on clickable rows). The component file does
+not repeat the surface rule — it only documents what the hover state looks like
+when it is applied.
+
+If you find yourself writing a rule in a component CLAUDE.md that says "on admin
+pages, do X" — stop. That rule belongs in the surface rules file, not here.
+
+---
+
+## When to create a component CLAUDE.md
+
+Create one when any of the following are true:
+
+- The component has sub-components that must be assembled in a specific order
+- The component uses design tokens that an agent would otherwise guess at
+- There are common misuses that would be hard to catch from the component's
+  TypeScript types alone
+- The component has states or variants with non-obvious visual behaviour
+- The component depends on another package that must always be used alongside it
+
+Do NOT create one for simple, single-element components with no configuration
+surface. If the TypeScript types and stories are sufficient, a CLAUDE.md adds no
+value.
+
+---
+
+## Relationship to Storybook stories
+
+The component CLAUDE.md defines rules. The `.stories.tsx` file shows correct
+usage in real-world context. Both are required reading for the agent — the
+CLAUDE.md alone may not cover every prop combination, and stories alone do not
+explain why constraints exist.
+
+The reading order from the root file enforces this:
+
+```
+4. packages/[component]/CLAUDE.md          ← rules
+5. packages/[component]/src/[component].stories.tsx ← usage examples
+```
+
+Never reference a story in the CLAUDE.md and say "see stories for examples" as a
+substitute for writing out the composition rules. The rules must be explicit in
+this file.
+
+---
+
+## What happens if this layer is missing or incomplete
+
+- The agent uses raw values (`#1a2a3a`, `16px`) instead of theme tokens,
+  breaking dark mode support and responsive scaling.
+- Sub-components are assembled in the wrong order or at the wrong nesting level
+  (e.g. `TablePagination` inside `Table`).
+- State props are applied to the wrong sub-component.
+- The agent re-implements functionality that already exists in a dependency
+  (e.g. builds a custom status pill instead of using `@spark-web/status-badge`).
+
+---
+
+## Installed component context
+
+When `@spark-web/design-system` is installed, component-level CLAUDE.md files
+are available at `node_modules/@spark-web/{name}/CLAUDE.md`. Read the relevant
+file before working with any of the following components:
+
+- `node_modules/@spark-web/description-list/CLAUDE.md`
+- `node_modules/@spark-web/highlight-card/CLAUDE.md`
+- `node_modules/@spark-web/overflow-menu/CLAUDE.md`
+- `node_modules/@spark-web/section-card/CLAUDE.md`
+- `node_modules/@spark-web/section-header/CLAUDE.md`
+- `node_modules/@spark-web/tag/CLAUDE.md`

package/dist/declarations/src/index.d.ts

@@ -15,6 +15,7 @@ export * from '@spark-web/core';
 export * from '@spark-web/currency-input';
 export * from '@spark-web/data-table';
 export * from '@spark-web/date-picker';
+export * from '@spark-web/description-list';
 export * from '@spark-web/divider';
 export * from '@spark-web/dropzone';
 export * from '@spark-web/field';
@@ -22,19 +23,26 @@ export * from '@spark-web/fieldset';
 export * from '@spark-web/float-input';
 export * from '@spark-web/heading';
 export * from '@spark-web/hidden';
+export * from '@spark-web/highlight-card';
 export * from '@spark-web/icon';
 export * from '@spark-web/inline';
 export * from '@spark-web/link';
+export * from '@spark-web/meatball-menu';
 export * from '@spark-web/modal-dialog';
 export * from '@spark-web/multi-select';
 export * from '@spark-web/nav-link';
 export * from '@spark-web/toggle-group';
+export * from '@spark-web/page-header';
 export * from '@spark-web/password-input';
+export * from '@spark-web/portal-table';
 export * from '@spark-web/radio';
 export * from '@spark-web/row';
+export * from '@spark-web/section-card';
+export * from '@spark-web/section-header';
 export * from '@spark-web/select';
 export * from '@spark-web/spinner';
 export * from '@spark-web/stack';
+export * from '@spark-web/status-badge';
 export * from '@spark-web/switch';
 export * from '@spark-web/tabs';
 export * from '@spark-web/text';

package/dist/spark-web-design-system.cjs.dev.js

@@ -19,6 +19,7 @@ var core = require('@spark-web/core');
 var currencyInput = require('@spark-web/currency-input');
 var dataTable = require('@spark-web/data-table');
 var datePicker = require('@spark-web/date-picker');
+var descriptionList = require('@spark-web/description-list');
 var divider = require('@spark-web/divider');
 var dropzone = require('@spark-web/dropzone');
 var field = require('@spark-web/field');
@@ -26,19 +27,26 @@ var fieldset = require('@spark-web/fieldset');
 var floatInput = require('@spark-web/float-input');
 var heading = require('@spark-web/heading');
 var hidden = require('@spark-web/hidden');
+var highlightCard = require('@spark-web/highlight-card');
 var icon = require('@spark-web/icon');
 var inline = require('@spark-web/inline');
 var link = require('@spark-web/link');
+var meatballMenu = require('@spark-web/meatball-menu');
 var modalDialog = require('@spark-web/modal-dialog');
 var multiSelect = require('@spark-web/multi-select');
 var navLink = require('@spark-web/nav-link');
 var toggleGroup = require('@spark-web/toggle-group');
+var pageHeader = require('@spark-web/page-header');
 var passwordInput = require('@spark-web/password-input');
+var portalTable = require('@spark-web/portal-table');
 var radio = require('@spark-web/radio');
 var row = require('@spark-web/row');
+var sectionCard = require('@spark-web/section-card');
+var sectionHeader = require('@spark-web/section-header');
 var select = require('@spark-web/select');
 var spinner = require('@spark-web/spinner');
 var stack = require('@spark-web/stack');
+var statusBadge = require('@spark-web/status-badge');
 var _switch = require('@spark-web/switch');
 var tabs = require('@spark-web/tabs');
 var text = require('@spark-web/text');
@@ -155,6 +163,12 @@ Object.keys(datePicker).forEach(function (k) {
 		get: function () { return datePicker[k]; }
 	});
 });
+Object.keys(descriptionList).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return descriptionList[k]; }
+	});
+});
 Object.keys(divider).forEach(function (k) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -197,6 +211,12 @@ Object.keys(hidden).forEach(function (k) {
 		get: function () { return hidden[k]; }
 	});
 });
+Object.keys(highlightCard).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return highlightCard[k]; }
+	});
+});
 Object.keys(icon).forEach(function (k) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -215,6 +235,12 @@ Object.keys(link).forEach(function (k) {
 		get: function () { return link[k]; }
 	});
 });
+Object.keys(meatballMenu).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return meatballMenu[k]; }
+	});
+});
 Object.keys(modalDialog).forEach(function (k) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -239,12 +265,24 @@ Object.keys(toggleGroup).forEach(function (k) {
 		get: function () { return toggleGroup[k]; }
 	});
 });
+Object.keys(pageHeader).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return pageHeader[k]; }
+	});
+});
 Object.keys(passwordInput).forEach(function (k) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
 		enumerable: true,
 		get: function () { return passwordInput[k]; }
 	});
 });
+Object.keys(portalTable).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return portalTable[k]; }
+	});
+});
 Object.keys(radio).forEach(function (k) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -257,6 +295,18 @@ Object.keys(row).forEach(function (k) {
 		get: function () { return row[k]; }
 	});
 });
+Object.keys(sectionCard).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return sectionCard[k]; }
+	});
+});
+Object.keys(sectionHeader).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return sectionHeader[k]; }
+	});
+});
 Object.keys(select).forEach(function (k) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -275,6 +325,12 @@ Object.keys(stack).forEach(function (k) {
 		get: function () { return stack[k]; }
 	});
 });
+Object.keys(statusBadge).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return statusBadge[k]; }
+	});
+});
 Object.keys(_switch).forEach(function (k) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/spark-web-design-system.cjs.prod.js

@@ -19,6 +19,7 @@ var core = require('@spark-web/core');
 var currencyInput = require('@spark-web/currency-input');
 var dataTable = require('@spark-web/data-table');
 var datePicker = require('@spark-web/date-picker');
+var descriptionList = require('@spark-web/description-list');
 var divider = require('@spark-web/divider');
 var dropzone = require('@spark-web/dropzone');
 var field = require('@spark-web/field');
@@ -26,19 +27,26 @@ var fieldset = require('@spark-web/fieldset');
 var floatInput = require('@spark-web/float-input');
 var heading = require('@spark-web/heading');
 var hidden = require('@spark-web/hidden');
+var highlightCard = require('@spark-web/highlight-card');
 var icon = require('@spark-web/icon');
 var inline = require('@spark-web/inline');
 var link = require('@spark-web/link');
+var meatballMenu = require('@spark-web/meatball-menu');
 var modalDialog = require('@spark-web/modal-dialog');
 var multiSelect = require('@spark-web/multi-select');
 var navLink = require('@spark-web/nav-link');
 var toggleGroup = require('@spark-web/toggle-group');
+var pageHeader = require('@spark-web/page-header');
 var passwordInput = require('@spark-web/password-input');
+var portalTable = require('@spark-web/portal-table');
 var radio = require('@spark-web/radio');
 var row = require('@spark-web/row');
+var sectionCard = require('@spark-web/section-card');
+var sectionHeader = require('@spark-web/section-header');
 var select = require('@spark-web/select');
 var spinner = require('@spark-web/spinner');
 var stack = require('@spark-web/stack');
+var statusBadge = require('@spark-web/status-badge');
 var _switch = require('@spark-web/switch');
 var tabs = require('@spark-web/tabs');
 var text = require('@spark-web/text');
@@ -155,6 +163,12 @@ Object.keys(datePicker).forEach(function (k) {
 		get: function () { return datePicker[k]; }
 	});
 });
+Object.keys(descriptionList).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return descriptionList[k]; }
+	});
+});
 Object.keys(divider).forEach(function (k) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -197,6 +211,12 @@ Object.keys(hidden).forEach(function (k) {
 		get: function () { return hidden[k]; }
 	});
 });
+Object.keys(highlightCard).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return highlightCard[k]; }
+	});
+});
 Object.keys(icon).forEach(function (k) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -215,6 +235,12 @@ Object.keys(link).forEach(function (k) {
 		get: function () { return link[k]; }
 	});
 });
+Object.keys(meatballMenu).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return meatballMenu[k]; }
+	});
+});
 Object.keys(modalDialog).forEach(function (k) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -239,12 +265,24 @@ Object.keys(toggleGroup).forEach(function (k) {
 		get: function () { return toggleGroup[k]; }
 	});
 });
+Object.keys(pageHeader).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return pageHeader[k]; }
+	});
+});
 Object.keys(passwordInput).forEach(function (k) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
 		enumerable: true,
 		get: function () { return passwordInput[k]; }
 	});
 });
+Object.keys(portalTable).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return portalTable[k]; }
+	});
+});
 Object.keys(radio).forEach(function (k) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -257,6 +295,18 @@ Object.keys(row).forEach(function (k) {
 		get: function () { return row[k]; }
 	});
 });
+Object.keys(sectionCard).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return sectionCard[k]; }
+	});
+});
+Object.keys(sectionHeader).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return sectionHeader[k]; }
+	});
+});
 Object.keys(select).forEach(function (k) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -275,6 +325,12 @@ Object.keys(stack).forEach(function (k) {
 		get: function () { return stack[k]; }
 	});
 });
+Object.keys(statusBadge).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return statusBadge[k]; }
+	});
+});
 Object.keys(_switch).forEach(function (k) {
 	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/spark-web-design-system.esm.js

@@ -15,6 +15,7 @@ export * from '@spark-web/core';
 export * from '@spark-web/currency-input';
 export * from '@spark-web/data-table';
 export * from '@spark-web/date-picker';
+export * from '@spark-web/description-list';
 export * from '@spark-web/divider';
 export * from '@spark-web/dropzone';
 export * from '@spark-web/field';
@@ -22,19 +23,26 @@ export * from '@spark-web/fieldset';
 export * from '@spark-web/float-input';
 export * from '@spark-web/heading';
 export * from '@spark-web/hidden';
+export * from '@spark-web/highlight-card';
 export * from '@spark-web/icon';
 export * from '@spark-web/inline';
 export * from '@spark-web/link';
+export * from '@spark-web/meatball-menu';
 export * from '@spark-web/modal-dialog';
 export * from '@spark-web/multi-select';
 export * from '@spark-web/nav-link';
 export * from '@spark-web/toggle-group';
+export * from '@spark-web/page-header';
 export * from '@spark-web/password-input';
+export * from '@spark-web/portal-table';
 export * from '@spark-web/radio';
 export * from '@spark-web/row';
+export * from '@spark-web/section-card';
+export * from '@spark-web/section-header';
 export * from '@spark-web/select';
 export * from '@spark-web/spinner';
 export * from '@spark-web/stack';
+export * from '@spark-web/status-badge';
 export * from '@spark-web/switch';
 export * from '@spark-web/tabs';
 export * from '@spark-web/text';

package/package.json

@@ -1,56 +1,67 @@
 {
   "name": "@spark-web/design-system",
-  "version": "5.0.99",
+  "version": "5.1.0",
   "license": "MIT",
   "main": "dist/spark-web-design-system.cjs.js",
   "module": "dist/spark-web-design-system.esm.js",
   "files": [
+    "CLAUDE.md",
+    "ai-context",
+    "patterns",
     "dist"
   ],
   "dependencies": {
     "@spark-web/a11y": "5.3.0",
     "@spark-web/accordion": "5.2.0",
-    "@spark-web/action-dropdown": "1.3.2",
+    "@spark-web/action-dropdown": "2.0.0",
     "@spark-web/alert": "5.2.0",
     "@spark-web/analytics": "5.1.0",
-    "@spark-web/badge": "^5.1.0",
-    "@spark-web/box": "6.0.0",
-    "@spark-web/button": "5.6.0",
+    "@spark-web/badge": "^5.1.1",
+    "@spark-web/box": "6.0.1",
+    "@spark-web/button": "5.6.1",
     "@spark-web/checkbox": "5.1.0",
-    "@spark-web/columns": "5.1.0",
+    "@spark-web/columns": "5.1.1",
     "@spark-web/combobox": "6.0.0",
     "@spark-web/container": "5.1.0",
     "@spark-web/control-label": "5.1.0",
     "@spark-web/core": "5.2.0",
     "@spark-web/currency-input": "6.0.0",
-    "@spark-web/data-table": "5.2.0",
+    "@spark-web/data-table": "5.2.1",
     "@spark-web/date-picker": "5.2.0",
+    "@spark-web/description-list": "0.1.0",
     "@spark-web/divider": "5.1.0",
     "@spark-web/dropzone": "6.0.0",
-    "@spark-web/field": "5.3.0",
+    "@spark-web/field": "5.3.1",
     "@spark-web/fieldset": "5.1.0",
     "@spark-web/float-input": "6.0.0",
     "@spark-web/heading": "5.2.0",
     "@spark-web/hidden": "5.1.0",
+    "@spark-web/highlight-card": "0.1.0",
     "@spark-web/icon": "5.1.0",
     "@spark-web/inline": "5.1.0",
     "@spark-web/link": "5.1.0",
+    "@spark-web/meatball-menu": "0.1.0",
     "@spark-web/modal-dialog": "6.0.2",
     "@spark-web/multi-select": "6.0.1",
     "@spark-web/nav-link": "5.1.0",
     "@spark-web/next-utils": "5.1.0",
+    "@spark-web/page-header": "1.0.0",
     "@spark-web/password-input": "6.0.0",
+    "@spark-web/portal-table": "^1.0.0",
     "@spark-web/radio": "5.3.0",
-    "@spark-web/row": "5.1.0",
-    "@spark-web/select": "6.0.0",
-    "@spark-web/spinner": "5.1.0",
+    "@spark-web/row": "5.1.1",
+    "@spark-web/section-card": "0.1.0",
+    "@spark-web/section-header": "0.1.0",
+    "@spark-web/select": "6.0.1",
+    "@spark-web/spinner": "5.1.1",
     "@spark-web/ssr": "5.0.0",
-    "@spark-web/stack": "5.1.0",
+    "@spark-web/stack": "5.1.1",
+    "@spark-web/status-badge": "0.1.0",
     "@spark-web/switch": "5.0.3",
     "@spark-web/tabs": "5.2.1",
-    "@spark-web/text": "5.3.0",
+    "@spark-web/text": "5.3.1",
     "@spark-web/text-area": "6.0.0",
-    "@spark-web/text-input": "6.0.0",
+    "@spark-web/text-input": "6.0.1",
     "@spark-web/text-link": "5.4.0",
     "@spark-web/text-list": "5.1.0",
     "@spark-web/theme": "5.13.1",