@godxjp/ui 28.9.0 → 28.12.0

package/dist/styles/table-layout.css

@@ -88,12 +88,14 @@
 
   .ui-table-row[data-tone] > [data-slot="table-cell"]:first-child {
     border-inline-start: var(--table-row-tone-rail-width) solid hsl(var(--table-row-tone-color));
-    padding-inline-start: calc(var(--table-cell-space-x) - var(--table-row-tone-rail-width));
+    padding-inline-start: calc(
+      var(--table-cell-space-x, var(--space-section-active)) - var(--table-row-tone-rail-width)
+    );
   }
 
   [data-slot="table-head"] {
     height: var(--table-row-height);
-    padding: var(--table-cell-padding-y) var(--table-cell-space-x);
+    padding: var(--table-cell-padding-y) var(--table-cell-space-x, var(--space-section-active));
     text-align: start;
     vertical-align: middle;
     background: var(--table-header-background, hsl(var(--muted)));
@@ -113,7 +115,7 @@
   }
 
   [data-slot="table-cell"] {
-    padding: var(--table-cell-padding-y) var(--table-cell-space-x);
+    padding: var(--table-cell-padding-y) var(--table-cell-space-x, var(--space-section-active));
     vertical-align: middle;
 
     white-space: nowrap;
@@ -146,7 +148,7 @@
 
   [data-slot="table-cell"][data-indent] {
     padding-inline-start: calc(
-      var(--table-cell-space-x) + var(--table-cell-indent-level, 0) *
+      var(--table-cell-space-x, var(--space-section-active)) + var(--table-cell-indent-level, 0) *
         var(--table-cell-indent-space-step)
     );
   }
@@ -207,7 +209,10 @@
     justify-content: flex-end;
     gap: var(--space-inline-sm);
     padding-block: var(--table-pagination-padding-y, var(--space-stack-sm));
-    padding-inline: var(--table-pagination-padding-x, var(--table-cell-space-x));
+    padding-inline: var(
+      --table-pagination-padding-x,
+      var(--table-cell-space-x, var(--space-section-active))
+    );
   }
 
   .ui-data-table-pagination--numbered {
@@ -634,7 +639,16 @@
       white-space: normal;
     }
 
-    [data-collapse-below="sm"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+    [data-collapse-below="sm"]
+      [data-slot="table"]:has(
+        [data-slot="table-head"]:nth-child(7),
+        [data-slot="table-head"][data-priority="primary"]
+          ~ [data-slot="table-head"][data-priority="primary"],
+        [data-slot="table-head"][data-priority="secondary"]
+          ~ [data-slot="table-head"][data-priority="secondary"],
+        [data-slot="table-head"][data-priority="meta"]
+          ~ [data-slot="table-head"][data-priority="meta"]
+      ) {
       --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
       --table-action-collection-secondary-width: var(
         --table-action-collection-secondary-width-floor
@@ -664,7 +678,16 @@
       white-space: normal;
     }
 
-    [data-collapse-below="md"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+    [data-collapse-below="md"]
+      [data-slot="table"]:has(
+        [data-slot="table-head"]:nth-child(7),
+        [data-slot="table-head"][data-priority="primary"]
+          ~ [data-slot="table-head"][data-priority="primary"],
+        [data-slot="table-head"][data-priority="secondary"]
+          ~ [data-slot="table-head"][data-priority="secondary"],
+        [data-slot="table-head"][data-priority="meta"]
+          ~ [data-slot="table-head"][data-priority="meta"]
+      ) {
       --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
       --table-action-collection-secondary-width: var(
         --table-action-collection-secondary-width-floor
@@ -694,7 +717,16 @@
       white-space: normal;
     }
 
-    [data-collapse-below="lg"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+    [data-collapse-below="lg"]
+      [data-slot="table"]:has(
+        [data-slot="table-head"]:nth-child(7),
+        [data-slot="table-head"][data-priority="primary"]
+          ~ [data-slot="table-head"][data-priority="primary"],
+        [data-slot="table-head"][data-priority="secondary"]
+          ~ [data-slot="table-head"][data-priority="secondary"],
+        [data-slot="table-head"][data-priority="meta"]
+          ~ [data-slot="table-head"][data-priority="meta"]
+      ) {
       --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
       --table-action-collection-secondary-width: var(
         --table-action-collection-secondary-width-floor
@@ -724,7 +756,16 @@
       white-space: normal;
     }
 
-    [data-collapse-below="xl"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+    [data-collapse-below="xl"]
+      [data-slot="table"]:has(
+        [data-slot="table-head"]:nth-child(7),
+        [data-slot="table-head"][data-priority="primary"]
+          ~ [data-slot="table-head"][data-priority="primary"],
+        [data-slot="table-head"][data-priority="secondary"]
+          ~ [data-slot="table-head"][data-priority="secondary"],
+        [data-slot="table-head"][data-priority="meta"]
+          ~ [data-slot="table-head"][data-priority="meta"]
+      ) {
       --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
       --table-action-collection-secondary-width: var(
         --table-action-collection-secondary-width-floor

package/dist/tokens/components/attachments.css

@@ -1,15 +1,24 @@
 
 :root {
+
   --attachments-gap: var(--space-2);
-  --attachments-card-size: var(--upload-tile-size);
-  --attachments-card-radius: var(--upload-tile-radius);
-  --attachments-card-gap: var(--upload-tile-space-gap);
-  --attachments-placeholder-space-inset: var(--upload-dropzone-space-inset);
-  --attachments-placeholder-radius: var(--upload-dropzone-radius);
-  --attachments-placeholder-icon-size: var(--upload-dropzone-icon-size);
-  --attachments-placeholder-title-font-size: var(--font-size-sm, var(--font-size-base));
-  --attachments-placeholder-description-font-size: var(--upload-dropzone-meta-font-size);
-  --attachments-placeholder-gap: var(--space-2);
+
+  --attachments-card-size: 16.75rem;
+  --attachments-card-block-size: 4.25rem;
+  --attachments-card-radius: var(--radius-lg);
+  --attachments-card-gap: var(--space-3);
+
+  --attachments-placeholder-space-inset: var(--space-4);
+  --attachments-placeholder-radius: var(
+    --radius-lg
+  );
+
+  --attachments-placeholder-icon-size: var(--icon-size-3xl);
+  --attachments-placeholder-title-font-size: var(--font-size-base);
+  --attachments-placeholder-description-font-size: var(--font-size-sm, var(--font-size-base));
+  --attachments-placeholder-gap: var(--space-1);
+
   --attachments-drop-overlay-background: initial;
+
   --attachments-remove-icon-size: var(--upload-remove-icon-size);
 }

package/dist/tokens/components/segmented.css

@@ -4,7 +4,7 @@
 
   --segmented-track-padding: calc(var(--space-1) / 2);
 
-  --segmented-track-background: var(--muted);
+  --segmented-track-background: initial;
 
   --segmented-track-radius: var(--radius);
   --segmented-item-radius: var(--radius-md);
@@ -27,8 +27,12 @@
   --segmented-item-hover-background: initial;
   --segmented-item-active-background: var(--secondary);
 
-  --segmented-item-selected-background: var(--background);
-  --segmented-item-selected-shadow: var(--shadow-sm);
+  --segmented-item-selected-background: initial;
+  --segmented-item-selected-shadow: var(--shadow-md);
+
+  --segmented-item-selected-font-weight: var(--font-weight-medium);
+
+  --segmented-item-selected-border-color: initial;
 
   --segmented-count-min-width: var(--button-count-min-width);
   --segmented-count-space-inline: var(--button-count-space-inline);

package/dist/tokens/components/table.css

@@ -6,7 +6,8 @@
   --table-row-height-comfortable: var(--band-height-xl);
   --table-row-height: calc(var(--table-row-height-default) * var(--scaling));
   --table-cell-padding-y: var(--space-2);
-  --table-cell-space-x: var(--control-padding-x);
+
+  --table-cell-space-x: initial;
 
   --table-cell-indent-space-step: var(--space-4);
 

package/docs/COMPOSITION-VS-COMPONENT.md

@@ -84,6 +84,7 @@ new UI need
 | **PricingTable** / feature grid                         | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | **Composition** — `ResponsiveGrid` + `Card`                              |
 | Dashboard **page layout**                               | ❌  | ❌  | ❌  | ❌  | ➖  | ❌  | ❌  | **Composition** — `AppShell` + `PageContainer` + `ResponsiveGrid`        |
 | "Icon medallion"                                        | ❌  | ❌  | ❌  | ❌  | ✅  | ❌  | ❌  | **Composition** — `Avatar` (square) + a Lucide glyph                     |
+| **Section** / **Band** (full-bleed + measured column)   | ❌  | ❌  | ❌  | ❌  | ✅  | ❌  | ❌  | **Composition** — `<section>` + `Flex measure` + `pad`; see §3.1         |
 
 `✅ pass · ❌ fail · ➖ borderline`. **StatCard** is the instructive borderline: C2 is weak (it owns little behavior), but it is a universal KPI tile with a controlled API, fully tokenized, broadly reused — so it earns its place. A **Hero** fails six of seven; it is unambiguously a composition.
 
@@ -106,6 +107,46 @@ C2 rather than C7.
 
 **ServiceLauncherCard is the ONE recorded exception, and it is recorded so that it stays one.** It shipped before the test was run against it, and when the test was run it came back with two hard FAILs: **C2** — no state, no keyboard handling, no focus management, its only ARIA three static attributes — and **C3** — its own imports are `Card` + `CardContent` + `Badge` + a Lucide glyph, so "could I build this right now from primitives?" is yes. By §2 that makes it a composition pattern. It is kept anyway because `src/components/layout/app-launcher.tsx` consumes it: it is an internal building block of a component that **does** pass, so the question was never "should it exist" but "should it be PUBLIC", and removing a public export is breaking. Keeping it public was the cheaper call and the ledger lives on gh#814 and at the top of `src/components/data-display/service-launcher-card.tsx`. **Consumers should compose `Card` + `Badge` for a service tile** — reach for `ServiceLauncherCard` only to match `AppLauncher`'s own tiles — and this row is not precedent for adding another static tile to `src/components/`.
 
+### 3.1 "Full-bleed outside, measured column inside" — the case that was answered with a PROP (gh#839)
+
+This row exists because the question it settles was asked the other way round, and the right answer
+turned out to be neither "add a component" nor "do nothing".
+
+**A `Section` component is refused, and it is refused for Hero's reasons.** It owns no state, no
+keyboard, no focus and no ARIA a `<section aria-labelledby>` does not already have (**C2**); it is
+`<section>` + `Flex` + padding + a max-width, i.e. buildable today (**C3**); its API would be the
+grab-bag `band` / `measure` / `glow` / `surface` / `bleed` that **C4** names by name; and a JP
+business-software library would be shipping a marketing band to every consumer (**C7**). One
+criterion of seven passes. Nothing about that is close.
+
+**But "do nothing" was also refused, and that is the part worth remembering.** The doctrine's own
+remedy for a composition is a TOKEN (§4.3), and `--page-measure-wide` shipped in 28.8.0 — so on
+paper the gap was already closed. It was not. A token is only closed when something can READ it,
+and three unrelated pages had each hand-written the identical four declarations to do so:
+`docs/showcase/marketing-page.tsx` as an inline `style` constant, `acme-website.tsx` as `.tx-shell`,
+`futurelastic-web.tsx` as `.fl-shell` — one shape, three spellings, two of them page-local CSS
+classes on the pages whose entire claim is that they need none. `docs/TOKENS.md` calls a value that
+appears in more than one place tier 1, and the same logic reads on a SHAPE.
+
+**The third move is a prop on a primitive that already passes the test.** `Flex measure` (narrow |
+medium | wide) centres the box and caps it at `var(--page-measure-*)`; it adds no gutter, because
+`pad` owns that. A full-bleed band is now `<section>` — carrying the edge-to-edge paint — around one
+`<Flex direction="col" measure="wide" pad={{ inline: 6, block: 20 }}>`. Measured on
+`marketing-page.tsx`: seven bands, 7 inline `style` spreads and 3 `CSSProperties` constants gone,
+the metric that page defends (0 bespoke classes, 0 raw px/rem literals) unchanged at 0/0, and the
+geometry byte-identical (1440: section 1440px, column 1152px, band 96/80px, gutter 24px).
+
+**`PageContainer measure="wide"` stays refused, and for the original reason.** A marketing page is
+full-bleed `<section>`s; `PageContainer` owns page padding and a header/toolbar/footer scaffold, so
+the two pages that are the prop's proof still cannot consume it. The prop went to the primitive
+those pages CAN put inside a `<section>`, which is the distinction the earlier deferral was missing
+rather than a reversal of it.
+
+**The rule this leaves behind:** when a composition repeats a shape, ask whether an existing
+primitive is missing ONE AXIS before you ask whether a new component is missing. A component that
+fails C1–C7 and a prop that closes the same gap are not the same proposal, and the test above is
+only asking about the first.
+
 ---
 
 ## 4. How to build a composition pattern correctly

package/docs/DESIGN-AUTHORITY.md

@@ -449,6 +449,58 @@ expandable.expandedRowKeys` / `onExpandedRowsChange`. This library already mappe
   (`role="toolbar"`, `aria-pressed`); the prop there only keeps the last item selected.
   Divergence from Radix's markup is the point of the change, not a side effect of it.
 
+- **`Input addonBefore` / `addonAfter` stay, although antd DEPRECATED them (gh#841).** Verified in
+  `ant-design@master` rather than on the docs page: `components/input/Input.tsx` carries
+  `@deprecated Use Space.Compact instead` on both props and fires a dev-time
+  `devUseWarning('Input').deprecated(…)` for each, while still rendering them; both locale tables
+  strike the rows through and the `addon` demo is flagged `debug`, so it no longer appears on the
+  published page. The deprecation is a REFACTOR onto `Space.Compact`, and this library has no
+  `Space` — so following it would delete the joined control and put nothing in its place, which is
+  a breaking change bought for nothing. `addonBefore` IS the joined control here: it renders
+  `.ui-input-group`, and gh#841 squared its seam. The steer that IS followed is the one antd's own
+  live surface gives: a GLYPH belongs in `prefix`, inside the field, where there is one box, one
+  border and no seam; an addon is for a label segment. Written on the prop
+  (`src/props/components/data-entry.prop.ts`) and in the MCP catalog. Revisit if a `Space`/compact
+  primitive is ever ported — then antd's steer is followable and this becomes a migration.
+
+- **`Attachments` is Ant Design X's card and tray, with five measured departures (gh#855).** The
+  component had shipped with NO stylesheet at all — fifteen slot classes, one rule, twelve tokens
+  read by nothing — so the port below is the first time it followed anything. Geometry was taken
+  from `@ant-design/x@2.9.0` (`es/attachments/style/index.js` for root/placeholder/drop-area,
+  `es/file-card/style/index.js` for list/card/overflow/remove), not from a screenshot. What was
+  NOT followed, and why:
+
+  1. **The card's 268px is a CEILING, not a fixed width.** Ant X writes `width: 268` flat. At the
+     320px viewport this repo sweeps, 268 plus the page gutter spills, and `check:frame-overflow`
+     is the gate that would have to be baselined around it. `inline-size` + `max-inline-size: 100%`
+     keeps Ant's box everywhere it fits and gives ground only where the alternative is a clip.
+  2. **One leading box for a thumbnail AND a glyph.** Ant X has two card types — a 268x68 overview
+     card and a separate 68x68 image card — so a tray mixing a `.png` with a `.pdf` gets two
+     shapes. This library already decided that question for `Upload` (gh#720: "the image rows draw
+     their previewUrl as a thumbnail and every other row draws the glyph for its kind, on one row
+     height"), and a second answer in the same group would be the defect.
+  3. **The remove ✕ is always visible, and in flow.** Ant X pins it absolutely outside the card
+     corner at `opacity: 0` until the card is hovered. A hover-only control has no touch
+     equivalent — worse, an `opacity: 0` button is still hit-testable, so a tablet user taps a
+     control they cannot see. `.ui-upload-tile-remove` already made this call. Always-visible in
+     turn removes the reason to position it outside the box, so it is the row's trailing item.
+  4. **The placeholder mark is the icon scale's 40px step, not `fontSizeHeading2` (30px).** 30 is
+     not one of the nine steps gh#326 fixed, and its neighbours are 24 and 36 — equidistant. The
+     token keeps the value the frozen table in `src/tokens/__tests__/icon-size-scale.test.ts`
+     already records for it, which is `--upload-dropzone-icon-size`: the mark a reader meets this
+     surface beside. Same reasoning holds `--attachments-remove-icon-size` at 14px against Ant's
+     `fontSizeLG` = 16.
+  5. **The placeholder carries a dashed border at rest; Ant X's is `transparent`.** Ant X's
+     placeholder sits INSIDE a `Sender`, which already draws the boundary. Here `Attachments` is
+     also used standalone, where a target with no edge is not a target — so it takes
+     `.ui-upload-dropzone`'s dashed edge.
+
+  Not ported, and named here so the gap is a decision rather than an oversight: Ant X's 8px
+  `::before`/`::after` scroll-edge gradients and their `ping-start`/`ping-end` state (they need a
+  scroll listener, and the clipped card already reads as "more this way"), and its full-screen
+  drop area — `getDropContainer` positions the layer `fixed`, but activation is still the
+  control's own dragenter, not the document's.
+
 **A knob that only a fork could reach is not parity either.** antd's `components`,
 `filterDropdown`, `classNames`/`styles` semantic maps and `prefixCls` all exist to let a consumer
 replace the rendered markup. This library answers that layer with tokens (cardinal rule #45), so

package/docs/DEVELOPMENT.md

@@ -112,16 +112,91 @@ A change isn't done until its documentation reflects it:
 
 ---
 
-## 5. Verify before finishing
+## 5. Verify before finishing — scope the checks to the DIFF
+
+> **Read §5.0 before you run anything.** This section was rewritten after the owner watched a
+> two-file change take six minutes of gates and asked, correctly, _"bản chất chỉ sửa rất ít, check
+> diff đéo được hay sao? có phải release đâu mà run hết thế?"_ — it is not a release, so stop
+> running a release's worth of checks.
+
+### 5.0 MEASURE FIRST, THEN COMPLAIN — the real cost table
+
+Every number below was measured on this repo, on an M-series Mac, warm. **Measure again before you
+believe them; a cost you assumed is how you end up optimising the wrong thing.**
+
+| command                    | cost            | scope                                      |
+| -------------------------- | --------------- | ------------------------------------------ |
+| `check:token-tiers`        | **0.2s**        | whole repo                                 |
+| `audit`                    | **0.5s**        | whole repo (~600 files)                    |
+| `typecheck:docs`           | **0.7s**        | whole `docs/` program                      |
+| `typecheck`                | **1.3s**        | whole `src/` program                       |
+| `build`                    | **1.5s**        | whole package                              |
+| `preview:build`            | **1.9s**        | whole preview                              |
+| `lint`                     | **12.9s**       | whole repo                                 |
+| **`check:frame-overflow`** | **52s** (was 339s before it was parallelised, gh#851) | **199 frames x 2 viewports, in a browser** |
+
+**The lesson is the opposite of the intuition.** "Typecheck the whole system" sounds wasteful and
+costs **1.3 seconds** — typescript-7 is the native compiler, there is nothing to save there, and
+scoping it to changed files would cost more in ceremony than it saves in wall clock. Meanwhile the
+one command that _does_ cost real time is the browser sweep, and it is the one that looks innocent
+in a shell script.
+
+`check:frame-overflow` alone was **~96% of the wall clock** of a full local pass. It ran all 398
+navigations down a SINGLE page, in series. It now runs a pool of one page per core (capped at 8):
+**339s -> 52.3s, 6.5x**, byte-identical output, and a planted overflow is still caught at both
+viewports by both. `FRAME_CONCURRENCY=1` restores the serial run for debugging.
+
+> **Never argue about the cost of a gate you have not timed.** Time it:
+> `st=$(date +%s); pnpm <gate> >/dev/null 2>&1; echo $(( $(date +%s) - st ))s`
+
+### 5.1 What to run, by what you touched
+
+Find the row that matches your diff. Run that row. Do not run the rows below it.
+
+| you changed                        | run                                                                                              | why                                                       |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------- |
+| a `.css` file only                 | `audit` · `check:token-tiers` · the component's own tests · `check:frame-overflow --only <slug>` | no TS changed, so `typecheck` has nothing to say          |
+| a `.tsx`/`.ts` in `src/`           | `typecheck` · `lint` · `audit` · that group's tests                                              | 1.3s + 12.9s, both worth it                               |
+| a file in `docs/`                  | `typecheck:docs` · `audit` · `check:example-imports`                                             | `typecheck` covers `src/`, not `docs/`                    |
+| a token in `src/tokens/`           | + `check:token-tiers` · `src/tokens/__tests__` · `pnpm regen` twice (gh#847)                     | frozen tier tables go stale instantly                     |
+| a public export / prop             | + `pnpm ship:surface`                                                                            | 8 stacked generators; the list is derived, not remembered |
+| anything that moves LAYOUT         | `check:frame-overflow --only <slug>` while you work; the FULL sweep once, before the PR          | 17.5s vs 339s                                             |
+| opening the PR / cutting a release | the full sweep, `verify:ci:static`, the full suite in CI                                         | the only place "run everything" is right                  |
+
+### 5.2 `--only` — the diff-scoped browser sweep
+
+Added in gh#851 for exactly this. The sweep had no filter at all: 199 frames or nothing.
+
+```bash
+pnpm check:frame-overflow --only table                       # 9 frames,  17.5s
+pnpm check:frame-overflow --only '/^data-entry-(switch|segmented)/'   # 3 frames
+pnpm check:frame-overflow                                    # all 199,   52s
+```
+
+Measured: `--only table` is **17.5s against the full sweep's 52.3s**. Both matter — the pool cut
+the full sweep 6.5x, and `--only` cuts what is left to the frames a diff can actually reach.
+
+Two guards, both deliberate:
+
+- **`--only` refuses `--update-baseline`.** A partial sweep does not know whether the frames it
+  skipped are still clean, and recording that as the whole truth is how a baseline stops meaning
+  anything. Rebaselining needs the full sweep.
+- **Its success line says `PARTIAL, not a release gate`** and prints how many frames it skipped, so
+  a filtered green can never be pasted into a PR as if it were the real thing.
+
+### 5.3 The commands, for reference
 
 ```bash
-pnpm lint                 # eslint — self-contained flat config
-pnpm typecheck            # tsc --noEmit
+pnpm lint                 # eslint — self-contained flat config                    12.9s
+pnpm typecheck            # tsc --noEmit over src/                                  1.3s
+pnpm typecheck:docs       # tsc --noEmit over docs/                                 0.7s
+pnpm audit                # godxjp-ui-audit — 0 errors for touched files            0.5s
+pnpm check:mcp-sync       # MCP registry <-> library export drift guard
 pnpm vitest run src/components/<group>/__tests__ --maxWorkers=2   # ONLY what you touched
+pnpm check:frame-overflow --only <slug>   # the frames your change can reach       ~18s
+pnpm check:frame-overflow                 # all 199 — pre-PR and CI only             52s
+pnpm preview:build        # integration test: examples + docs must build            1.9s
 pnpm test                 # FULL suite — CI only, never from an agent loop
-pnpm preview:build        # integration test: examples + docs must build — at most once, pre-PR
-pnpm audit                # godxjp-ui-audit — 0 errors for touched files
-pnpm check:mcp-sync       # MCP registry ↔ library export drift guard
 pnpm check:frame-axe      # WCAG 2.2 AA over every frame — LOCAL ONLY, never in CI (FRAME-A11Y-CI.md)
 ```
 

package/docs/assets/service-mark-rose.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="240" height="96" viewBox="0 0 240 96" role="img">
+  <rect width="240" height="96" rx="12" fill="hsl(348 32% 42%)"/>
+  <rect x="24" y="30" width="36" height="36" rx="8" fill="hsl(348 32% 88%)"/>
+  <rect x="76" y="36" width="140" height="10" rx="5" fill="hsl(348 32% 88%)"/>
+  <rect x="76" y="54" width="96" height="10" rx="5" fill="hsl(348 32% 74%)"/>
+</svg>

package/docs/assets/service-mark-teal.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128" role="img">
+  <rect width="128" height="128" rx="28" fill="hsl(178 38% 34%)"/>
+  <path d="M40 78 L64 34 L88 78 Z" fill="hsl(178 38% 88%)"/>
+  <circle cx="64" cy="90" r="9" fill="hsl(178 38% 88%)"/>
+</svg>