@spark-web/design-system 5.1.14 → 5.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/design-system",
-  "version": "5.1.14",
+  "version": "5.1.16",
   "license": "MIT",
   "main": "dist/spark-web-design-system.cjs.js",
   "module": "dist/spark-web-design-system.esm.js",
@@ -20,13 +20,13 @@
     "@spark-web/button": "5.7.0",
     "@spark-web/checkbox": "5.1.2",
     "@spark-web/columns": "5.1.1",
-    "@spark-web/combobox": "6.2.0",
+    "@spark-web/combobox": "6.2.1",
     "@spark-web/container": "5.1.1",
     "@spark-web/control-label": "5.1.0",
     "@spark-web/core": "5.2.0",
     "@spark-web/currency-input": "6.0.1",
     "@spark-web/data-table": "5.2.3",
-    "@spark-web/date-picker": "5.3.1",
+    "@spark-web/date-picker": "5.3.2",
     "@spark-web/description-list": "0.1.0",
     "@spark-web/divider": "5.1.1",
     "@spark-web/dropzone": "6.0.1",
@@ -39,18 +39,18 @@
     "@spark-web/icon": "5.1.1",
     "@spark-web/inline": "5.1.0",
     "@spark-web/link": "5.1.0",
-    "@spark-web/meatball-menu": "0.1.0",
+    "@spark-web/meatball-menu": "0.1.1",
     "@spark-web/modal-dialog": "6.0.4",
     "@spark-web/multi-select": "6.0.2",
     "@spark-web/nav-link": "5.1.0",
     "@spark-web/next-utils": "5.1.0",
-    "@spark-web/page-header": "2.0.0",
+    "@spark-web/page-header": "2.0.1",
     "@spark-web/password-input": "6.0.0",
-    "@spark-web/portal-table": "^2.0.0",
+    "@spark-web/portal-table": "^2.0.1",
     "@spark-web/radio": "5.3.1",
     "@spark-web/row": "5.1.1",
     "@spark-web/section-card": "0.2.0",
-    "@spark-web/section-header": "0.2.0",
+    "@spark-web/section-header": "0.2.1",
     "@spark-web/select": "6.0.2",
     "@spark-web/spinner": "5.1.1",
     "@spark-web/ssr": "5.0.0",
@@ -60,7 +60,7 @@
     "@spark-web/tabs": "5.2.2",
     "@spark-web/text": "5.3.1",
     "@spark-web/text-area": "6.0.2",
-    "@spark-web/text-input": "6.1.0",
+    "@spark-web/text-input": "6.1.1",
     "@spark-web/text-link": "5.4.0",
     "@spark-web/text-list": "5.1.0",
     "@spark-web/theme": "5.13.3",

package/patterns/internal-admin/portal-hub.md

@@ -153,13 +153,13 @@ portal-hub supplies its own `TablePagination` component. It is the
 `TablePagination` referenced by both the list-page and detail-page patterns.
 Props used by the patterns:
 
-| Prop          | Notes                                             |
-| ------------- | ------------------------------------------------- |
-| `total`       | Total record count — from a dedicated count query |
-| `pageSize`    | 20 on list pages; 5 on detail-page section tables |
-| `dataShowing` | Number of rows on the current page                |
-| `onChange`    | Page change handler                               |
-| `current`     | Current page number                               |
+| Prop          | Notes                                                                    |
+| ------------- | ------------------------------------------------------------------------ |
+| `total`       | Total record count — from a dedicated count query                        |
+| `pageSize`    | 20 on list pages and embedded tab lists; 5 on detail-page section tables |
+| `dataShowing` | Number of rows on the current page                                       |
+| `onChange`    | Page change handler                                                      |
+| `current`     | Current page number                                                      |
 
 This is a confirmed COMPONENT GAP — no `@spark-web` pagination component exists
 yet. Until one ships, every consumer supplies its own pagination component.
@@ -341,3 +341,76 @@ Usage in Authority Contacts flows (portal-hub):
   component with the appropriate `variant`.
 - NEVER put visibility/eligibility logic inside the row list — the consumer
   gates it and owns pruning the field.
+
+---
+
+## Detail summary inside a modal (`DescriptionList`)
+
+When a modal shows a fetched record's fields for the operator to confirm before
+saving (e.g. a verified register lookup), render them as a key/value list with
+**`@spark-web/description-list`** `DescriptionList` — the first-party component
+for labelled data rows. Give each item `layout: 'auto'` for muted-label-left /
+value-right rows with a bottom divider; item `value` accepts any node (badges,
+chips). Also use it for detail-page sections.
+
+- Add a section heading (`<Text weight="semibold">…</Text>`) above the list if
+  the modal needs one — `DescriptionList` renders only the rows.
+- Tag-like values (classes/tags): `@spark-web/status-badge` `StatusBadge` (tone
+  `accent`) inside `<Inline gap="xsmall">` as the item `value` — not `Badge`.
+- One overall status → a single `Alert` (`positive`/`caution`) beneath the list,
+  not a badge per row.
+
+```tsx
+import { DescriptionList } from '@spark-web/description-list';
+import { StatusBadge } from '@spark-web/status-badge';
+import { Alert } from '@spark-web/alert';
+
+<Stack gap="medium">
+  <Stack gap="small">
+    <Text weight="semibold">Licence details</Text>
+    <DescriptionList
+      items={[
+        { label: 'Licensee', value: data.licenseeName ?? '—', layout: 'auto' },
+        { label: 'ABN', value: data.abn, layout: 'auto' },
+        {
+          label: 'Classes',
+          layout: 'auto',
+          value: (
+            <Inline gap="xsmall" alignY="center">
+              {classes.map(c => (
+                <StatusBadge key={c} tone="accent">
+                  {c}
+                </StatusBadge>
+              ))}
+            </Inline>
+          ),
+        },
+      ]}
+    />
+  </Stack>
+  <Alert tone={verified ? 'positive' : 'caution'}>…</Alert>
+</Stack>;
+```
+
+### Do NOTs
+
+- Don't hand-roll `<Box justifyContent="spaceBetween">` label/value rows — use
+  `DescriptionList` (proper `<dl>/<dt>/<dd>` semantics, right defaults).
+- Don't reach for portal-hub's `PortalTable`/`TableRow` for new key/value lists
+  — it is a **fork** of `@spark-web/description-list` (same tokens/layout,
+  weaker semantics) and is being migrated out. Prefer `DescriptionList`; use
+  `SectionCard` only for the surrounding card chrome. (`spaceBetween` on
+  `TableRow` == `layout: 'auto'` on a `DescriptionList` item.)
+- Don't use `@spark-web/badge` `Badge` for tag chips — use `StatusBadge` (tone
+  `accent`).
+- Don't scatter per-field status badges when one overall verdict suffices — use
+  a single `Alert`.
+
+### Reference implementation
+
+> **Note:** paths below are in the **portal-hub** consumer repo
+> (`brighte-labs/portal-hub`), not this repository.
+
+`apps/admin-portal/src/pages/Vendors/Licenses/NswLicensePreview.tsx` — the
+verify-then-save preview block (currently on the legacy `TableRow`; migrating to
+`@spark-web/description-list`).