diff --git a/.agents/references/component-design.md b/.agents/references/component-design.md index 2a1ddd020..d878fd90d 100644 --- a/.agents/references/component-design.md +++ b/.agents/references/component-design.md @@ -431,16 +431,26 @@ Review whether component styling remains self-contained and consistent: Text that a component renders takes its size, line height, weight, and letter spacing from a typography role, not from a raw size + weight combination. The roles are listed in the Typography section of `docs/concepts/styling-theming.md`. -- Use the role utility (`astw:text-heading-md`, `astw:text-label-md`, ...) on the component's own element, or render `Text` when the element itself is the text. -- Do not write new raw combinations such as `astw:text-lg astw:font-semibold` or `astw:text-sm astw:font-medium`. Existing ones are being moved to roles. +- Render content text with `Text`: titles, descriptions, captions, hints, messages, error text, and key and value display. Pass a Base UI part, or an element that differs from the role's default tag, with `render`, and keep the part's `data-slot` on the render element. +- Use the role utility (`astw:text-heading-md`, `astw:text-label-md`, ...) for text that is part of a control or sits inside one (buttons, inputs, menu and list items, badges, toolbars, table cells), in cva strings, and on containers that set the size for their children. +- Do not write new raw combinations such as `astw:text-lg astw:font-semibold` or `astw:text-sm astw:font-medium`. `tests/typography-usage.test.ts` fails on a raw size. - Combine a role only with the four modifiers: `astw:leading-none` (single-line text), `astw:tabular-nums`, `astw:font-semibold` (emphasis on inline text), and `astw:uppercase`. Do not add other `leading-*`, `tracking-*`, or `text-[Npx]` values. 12px is the minimum size. - A role carries no color. Set the color with a token such as `astw:text-muted-foreground`. +- Show a selected item (active navigation or list item) with `astw:font-semibold` and its background. - A heading's level comes from the document structure, not from its size. Keep a title that is a heading in a heading element, and pick the role for its look. Do not change the element to get a different size, and do not turn a heading into a `div` to get a different line height. Under the `cream` and `bloom` palettes, `h1` to `h6` ignore `leading-none`; see the Typography section. ```tsx // Good -

{title}

+} +> + {title} + {updatedAt} + ``` ```tsx diff --git a/.changeset/component-typography-roles.md b/.changeset/component-typography-roles.md new file mode 100644 index 000000000..78acb367b --- /dev/null +++ b/.changeset/component-typography-roles.md @@ -0,0 +1,16 @@ +--- +"@tailor-platform/app-shell": minor +--- + +AppShell components now use the typography roles. Titles, descriptions, captions, messages, error text, and key and value display render with `Text`; controls such as buttons, inputs, menu items, badges, and table cells use the role classes. Most text looks the same. These values change: + +- Text below 12px moves to 12px: chat history group titles, tool status and section labels, tool JSON, command palette paths and descriptions, chain-of-thought search result badges, and `xs` and `sm` Avatar initials. +- Line heights outside the roles move to the role: chat messages (`body-md-relaxed`, 22.75 to 24px), attachment file names and upload text, the ActivityCard activity line, Appearance switcher options, and paragraphs in `Alert.Description`. +- Section labels use weight 500: the filter rail section legend, the ActivityCard day label, and `Menu.GroupLabel` (600 to 500). +- Key and value pairs use a 500 key and a 400 value: DescriptionCard values (500 to 400), and the AppInfo, DocumentProgressCard, and CsvImporter summary keys (400 to 500). +- The chat empty state title and the default sidebar app title use `heading-sm` (600). +- `Alert.Title` drops its letter spacing (-0.025em to 0). +- A selected item uses weight 600 (500 before): sidebar items, chat history, and the DataTable filter panel. +- Inline code and code blocks use `code-sm`, with an 18px line height. + +Element types do not change. Elements rendered with `Text` and no `data-slot` of their own get `data-slot="text"`. diff --git a/.changeset/text-children.md b/.changeset/text-children.md new file mode 100644 index 000000000..13df0cfea --- /dev/null +++ b/.changeset/text-children.md @@ -0,0 +1,5 @@ +--- +"@tailor-platform/app-shell": patch +--- + +`Text` passes `children` only when you give them. A `render` element that supplies its own content now keeps it, for example `} />` shows the validation message. diff --git a/decisions/typography-roles.md b/decisions/typography-roles.md index 39caa7c82..c4911e5c2 100644 --- a/decisions/typography-roles.md +++ b/decisions/typography-roles.md @@ -1,7 +1,7 @@ # Decision: typography role tokens -> Status: **Decided for the first two changes — add 10 typography role tokens as CSS variables with Tailwind `text-*` utilities, then a `Text` component on top of them. AppShell's own components do not use the roles yet.** -> Scope: role names and values, how they reach Tailwind, the rules for combining them, and the `Text` component (see "Second change" at the end). This does not cover applying roles to AppShell components or sizes below 12px. +> Status: **Decided — add 10 typography role tokens as CSS variables with Tailwind `text-*` utilities, a `Text` component on top of them, and use them in AppShell's own components (see "Third change" at the end).** +> Scope: role names and values, how they reach Tailwind, the rules for combining them, and the `Text` component (see "Second change" at the end). "Third change" covers applying the roles to AppShell components and moving sizes below 12px to 12px. ## Context @@ -81,7 +81,7 @@ Limit: this does not let a role replace a size that core sets on its own element ## Consequences and open questions -- **No visual change.** No component uses the roles yet. The default, cream, and bloom palettes render as before. +- **No visual change in the first change.** No component used the roles yet. The default, cream, and bloom palettes render as before. - **cream and bloom `h1` to `h6` rule.** Both palettes set `line-height: 1.2` and `letter-spacing: -0.03em` on `html :where(h1, h2, h3, h4, h5, h6)` outside any `@layer`. That rule wins over a role utility on those elements, so a heading role on an `h1` to `h6` gets the palette values for line height and letter spacing. It also wins over any `leading-*` or `tracking-*` class on those elements, including the `leading-none` in the card title pairing: an `h3` with `text-heading-md leading-none` has a line height of 1.2 under cream and bloom, and 1.0 under the default palette. The same classes on a `div` or `span` render as documented. This PR keeps the rule and documents the effect. Open question for the maintainers: what does this rule protect, and should it stay once heading roles exist? - **Keyboard hint.** The earlier pairing table listed "keyboard hint" with `font-mono text-xs`. The only keyboard hint in the code (the sidebar ⌘K hint) uses `text-xs font-normal`. The new table has no keyboard hint row. - **Follow-up changes** (not in this PR): apply the roles to core components; `overline`; migrate 10px and 11px text to 12px; a `Text` component (added in a second change, see below); numeric DataTable columns with `tabular-nums` and right alignment as the default; a MetricCard value role and a display role above 24px. @@ -98,3 +98,15 @@ Limit: this does not let a role replace a size that core sets on its own element - **No `textVariants` export.** tailor-inc/platform-planning#1580 asked for a variants export. It is descoped, not deferred. The `text-` utilities already apply the same role mappings, so a cva export would be a third way to do the same thing, and it would put `astw:`-prefixed classes into consumer code. Unlike `Button` and `Badge`, `Text` does not export its cva function. - **`code-sm` includes `font-mono`.** The utility cannot set the font family, but the component can. - **cream and bloom.** The `h1` to `h6` rule is unchanged. The default `h2` takes the palette's line height and letter spacing under these palettes, the same as existing headings in AppShell components today. + +## Third change: roles in AppShell components + +> Status: **Decided.** + +- **Text or the role utility.** Content text renders with `Text`: titles, descriptions, captions, hints, messages, error text, and key and value display. Text that is part of a control, or sits inside one, keeps the role utility: buttons, inputs, menu, listbox, palette and tab items and their group labels, badges, counters, toolbars, pagination, and table cells. cva strings, shared class strings, and containers that set the size for their children also keep the utility. Radix Themes, Primer, and the Atlassian Design System split their components the same way. Polaris uses its `Text` almost everywhere; Mantine and Chakra do not use theirs inside components. +- **`render` and `data-slot`.** A Base UI part, or an element whose tag differs from the role's default, is passed with `render`, for example `} />`. The `data-slot` stays on the render element, because its props win over the `data-slot="text"` that `Text` sets. +- **Lint.** Where `render` gets an empty `h1`, `h3`, `h4`, `a`, or `label`, the matching `jsx-a11y` rule is disabled on that line, as the `Text` documentation shows for apps. +- **`Text` passes children only when given.** A render part that supplies its own content keeps it. Base UI's `Field.Error` shows the validation message this way. +- **Value changes.** Text below 12px moves to 12px. Line heights outside the allowed modifiers move to the role's line height, or to a relaxed role for chat messages. The uppercase section labels, the ActivityCard day label, and the menu group label use `label-sm` at weight 500. `code-sm` adds 2px of line height. In key and value pairs, the key is `label-md` with a muted color and the value is `body-md`, the same as numbers in DataTable. An `h1` to `h6` element takes a heading role (chat empty state title, default sidebar app title). `Alert.Title` drops `tracking-tight`. A selected item (sidebar, chat history, DataTable filter panel) uses `font-semibold` with its background, as Primer and Polaris do. +- **Element types do not change.** Under the cream and bloom palettes, headings render as before. The open question about their `h1` to `h6` rule stays open. +- **Guard.** `tests/typography-usage.test.ts` fails on a raw Tailwind text size in a component, on a role class with an unknown name, and on `text-code-sm` without `font-mono`. diff --git a/docs-manifest.json b/docs-manifest.json index f983e302b..0589330d5 100644 --- a/docs-manifest.json +++ b/docs-manifest.json @@ -65,7 +65,7 @@ "hashes": { "typeSurface": "7cb8a34c1c36eb02", "outline": "797e012e34847b80", - "snapshot": "e43bea5b03d30595", + "snapshot": "a21f0e323ea4774e", "outputMd": "824d1aa36bb7f194", "examples": null } @@ -82,7 +82,7 @@ "hashes": { "typeSurface": "f28bf34ae1466912", "outline": "6138eac23571e177", - "snapshot": "202f4fa7806204a0", + "snapshot": "d795320d53bd9ddb", "outputMd": "db2c4388ca783a75", "examples": "65d5fc73550e395a" } @@ -140,7 +140,7 @@ "hashes": { "typeSurface": "0a9f0c3f82e57e02", "outline": "66aaf22c5067aef1", - "snapshot": "4cc22ecbb5ea4434", + "snapshot": "a5bfea8fbe1224ea", "outputMd": "35bebce540d6ac28", "examples": null } @@ -174,7 +174,7 @@ "hashes": { "typeSurface": "81040ce8342602bc", "outline": "b8d3f69b4adc4f13", - "snapshot": "70d538794b811717", + "snapshot": "714e29c5156e1f91", "outputMd": "bd6ae01bf39d1ad6", "examples": "63e2a53825a527a4" } @@ -191,7 +191,7 @@ "hashes": { "typeSurface": "d6ee5e809e0f0590", "outline": "e368c9ff0db15bb3", - "snapshot": "b70ad798aec94bc9", + "snapshot": "ef0699939dd47de5", "outputMd": "a874b74c176bcb47", "examples": "009005eeac70961d" } @@ -225,7 +225,7 @@ "hashes": { "typeSurface": "16df9927f8394548", "outline": "200f12eb4bec959a", - "snapshot": "aa2095c057e2cbee", + "snapshot": "f57af2cc49c8b4d8", "outputMd": "bce0e2fada1d1638", "examples": "1ee01b1e27764cd2" } @@ -242,7 +242,7 @@ "hashes": { "typeSurface": "6ce6f0fdf2450cec", "outline": "a8c217856c9c367a", - "snapshot": "31ad44b3faa1da06", + "snapshot": "e6783ef54e17e11e", "outputMd": "675dc665e5082ff0", "examples": "b20054836086ced0" } @@ -259,7 +259,7 @@ "hashes": { "typeSurface": "3886bf7012f24283", "outline": "916645fe8e5baf10", - "snapshot": "2d057b30b9401e12", + "snapshot": "8d4d6148a3df5d61", "outputMd": "14f7ba23f441df38", "examples": "e8f09fba5acb116f" } @@ -276,7 +276,7 @@ "hashes": { "typeSurface": "74ec02220321c626", "outline": "d56abfe9595252ba", - "snapshot": "dfb2af263b78cd70", + "snapshot": "b2d280c2ba21f456", "outputMd": "dfb775c7c4307409", "examples": "4c96b71b68808c66" } @@ -615,7 +615,7 @@ "hashes": { "typeSurface": "b1614970f950ceb6", "outline": "bda40376d6e3e008", - "snapshot": "ac70f5a7004d3bab", + "snapshot": "81a29fe2495df98d", "outputMd": "ec6a0ac098d1d87a", "examples": "934c52d4e8761404" } @@ -649,7 +649,7 @@ "hashes": { "typeSurface": "306ea2ad2a256b8d", "outline": "c1448e17cc81a142", - "snapshot": "57f1bbb52b30d78b", + "snapshot": "b2cfca0400f29ba0", "outputMd": "d0fb940f685f8869", "examples": "6962c6f28d09eb0a" } @@ -683,7 +683,7 @@ "hashes": { "typeSurface": "b795ce4e10be0653", "outline": "d9e8930edd2a191c", - "snapshot": "89321bc807b1eaa1", + "snapshot": "ddebbf9718587cff", "outputMd": "c6a48c4d8e8b0078", "examples": null } @@ -700,7 +700,7 @@ "hashes": { "typeSurface": "7b374d45d53d4535", "outline": "79c9b0f08ca38027", - "snapshot": "88a0c82baaaa2a08", + "snapshot": "5d7a7904c5256f29", "outputMd": "91d901b17aed7781", "examples": null } @@ -938,7 +938,7 @@ "hashes": { "typeSurface": "7c5b64c579f508ee", "outline": "9b273bc9e509f1fe", - "snapshot": "e9b20c2459b52b79", + "snapshot": "9e448d8e65418e9b", "outputMd": "a3a6c9679af99d37", "examples": "fc036f7af21b9dd4" } @@ -1023,7 +1023,7 @@ "hashes": { "typeSurface": "c7e8fec79020d657", "outline": "02ed5081ea465edf", - "snapshot": "2510afae99b97375", + "snapshot": "03dedb3cc14b1eaf", "outputMd": "66696139a46fabb0", "examples": "2a4aa694c4d48324" } @@ -1057,7 +1057,7 @@ "hashes": { "typeSurface": "943616def28cafb0", "outline": "8f06df28129676c8", - "snapshot": "6233cd9de511210f", + "snapshot": "44c485a38e8d9eb4", "outputMd": "ceb4a05822538d20", "examples": "cff0508bb5520ae6" } @@ -1210,7 +1210,7 @@ "hashes": { "typeSurface": "429710973dfa912b", "outline": "721e8995f53f0e8f", - "snapshot": "68fd61885280b114", + "snapshot": "2ef5b7324018ff8f", "outputMd": "ae287e2bb5abc1c6", "examples": "1ce89cec30045466" } @@ -1227,7 +1227,7 @@ "hashes": { "typeSurface": "e760949efcbe4c38", "outline": "464d91acc48f7c9d", - "snapshot": "2c9114c5a81198be", + "snapshot": "429bdb8c86bb2ad6", "outputMd": "1f81ebd562c50371", "examples": "b0eebb8c5e2219dc" } @@ -1345,9 +1345,9 @@ "symbols": [], "hashes": { "typeSurface": null, - "outline": "f7ca9d0f8db238e9", + "outline": "c76f789e50713de5", "snapshot": null, - "outputMd": "5c55865c499890a8", + "outputMd": "bea2c2be5e2ba53c", "examples": "4d19f4f688e0f0ac" } }, @@ -1363,7 +1363,7 @@ "hashes": { "typeSurface": "bc60676f880b485b", "outline": "9381eff2f7987a0e", - "snapshot": "54e27fa3789afbd2", + "snapshot": "18b98aa5db32996b", "outputMd": "f85ec64ceb7f4acf", "examples": "2b9d94065f2f77b7" } @@ -1380,7 +1380,7 @@ "hashes": { "typeSurface": "f6795191b952e110", "outline": "b73ba87ed529e09d", - "snapshot": "40acc0898ecb5e4f", + "snapshot": "655d96c1394a3ace", "outputMd": "30bb32e57fc78bd9", "examples": "b07f258088e81cac" } @@ -1396,9 +1396,9 @@ "symbols": ["Text", "TextProps"], "hashes": { "typeSurface": "ed54a16ca677dbe3", - "outline": "81e7ce4d7d73ba60", + "outline": "114c81c557b82a18", "snapshot": "cb5f569f7dd2ecfc", - "outputMd": "0e872fb19aff887a", + "outputMd": "5b6cf767868d6558", "examples": "4a832708dc79474b" } }, @@ -1465,7 +1465,7 @@ "hashes": { "typeSurface": "2d88f0306efcaa77", "outline": "1257a84ccd91d5c3", - "snapshot": "c85c431dcd58bc43", + "snapshot": "56d61f993125508c", "outputMd": "91d70b140c7bb747", "examples": null } @@ -1482,7 +1482,7 @@ "hashes": { "typeSurface": "d652b740db9471c7", "outline": "eea5aed5cf4c8f33", - "snapshot": "13ed55385962bf3a", + "snapshot": "22f8d6be85ad8f80", "outputMd": "113c95b2995917ed", "examples": "87b93974e65d3a07" } @@ -1734,7 +1734,7 @@ "packages/core/skills/app-shell-patterns/references/concepts/modules-and-resources.md": "bf15b5460f22d165", "packages/core/skills/app-shell-patterns/references/concepts/routing-navigation.md": "8034c7f885994b29", "packages/core/skills/app-shell-patterns/references/concepts/sidebar-navigation.md": "3670e37a3c78abe7", - "packages/core/skills/app-shell-patterns/references/concepts/styling-theming.md": "5c55865c499890a8", + "packages/core/skills/app-shell-patterns/references/concepts/styling-theming.md": "bea2c2be5e2ba53c", "packages/core/skills/app-shell-patterns/references/components/action-panel.md": "71794d4b561e4d4b", "packages/core/skills/app-shell-patterns/references/components/activity-card.md": "4f386e49380fb0b0", "packages/core/skills/app-shell-patterns/references/components/ai-chat.md": "824d1aa36bb7f194", @@ -1775,7 +1775,7 @@ "packages/core/skills/app-shell-patterns/references/components/spinner.md": "e05d94ba9c3d17da", "packages/core/skills/app-shell-patterns/references/components/table.md": "f85ec64ceb7f4acf", "packages/core/skills/app-shell-patterns/references/components/tabs.md": "30bb32e57fc78bd9", - "packages/core/skills/app-shell-patterns/references/components/text.md": "0e872fb19aff887a", + "packages/core/skills/app-shell-patterns/references/components/text.md": "5b6cf767868d6558", "packages/core/skills/app-shell-patterns/references/components/textarea.md": "c940bc01cd573334", "packages/core/skills/app-shell-patterns/references/components/timeline.md": "699249c9452485ab", "packages/core/skills/app-shell-patterns/references/components/toolbar.md": "91d70b140c7bb747", diff --git a/docs-src/components/text.docs.outline.md b/docs-src/components/text.docs.outline.md index 40f787722..b7bdfedbc 100644 --- a/docs-src/components/text.docs.outline.md +++ b/docs-src/components/text.docs.outline.md @@ -46,7 +46,7 @@ Some lint rules report this example; see [Lint](#lint). | `body-sm` | `p` | Caption, timestamp, metadata | | `body-md-relaxed` | `p` | Long text, such as a chat message or a document | | `body-sm-relaxed` | `p` | Long text at the small size | -| `label-md` | `span` | Field label, short UI text, figures in a table | +| `label-md` | `span` | Field label, short UI text | | `label-sm` | `span` | Small label, badge text | | `code-sm` | `span` | ID and code. `Text` adds `font-mono` for you | @@ -132,4 +132,4 @@ The `cream` and `bloom` palettes set the line height and letter spacing of `h1` - [Card](./card.md) - The table above lists `heading-md` for card titles - [Layout](./layout.md) - The table above lists `heading-lg` for the page title -AppShell's own components, including these two, still use the stock utilities. They will move to the roles in a later change. +AppShell's own components, including these two, render their titles and descriptions with `Text`. diff --git a/docs-src/concepts/styling-theming.docs.outline.md b/docs-src/concepts/styling-theming.docs.outline.md index 9a0bd1a7e..fc72d82af 100644 --- a/docs-src/concepts/styling-theming.docs.outline.md +++ b/docs-src/concepts/styling-theming.docs.outline.md @@ -266,7 +266,7 @@ There are 8 core roles and 2 relaxed body variants: | `heading-sm` | `text-heading-sm` | 14px / 20px | 600 | Sub-section heading | | `body-md` | `text-body-md` | 14px / 20px | 400 | Body copy, descriptions | | `body-sm` | `text-body-sm` | 12px / 16px | 400 | Caption, timestamp, metadata | -| `label-md` | `text-label-md` | 14px / 20px | 500 | Field label, short UI text, figures in a table | +| `label-md` | `text-label-md` | 14px / 20px | 500 | Field label, short UI text | | `label-sm` | `text-label-sm` | 12px / 16px | 500 | Small label, badge text | | `code-sm` | `text-code-sm` | 12px / 18px | 400 | ID and code. Use with `font-mono` | | `body-md-relaxed` | `text-body-md-relaxed` | 14px / 24px | 400 | Long text, such as a chat message or a document | @@ -284,7 +284,7 @@ Pair a role with a color token from the Color section above. These pairings are | Body copy | `text-body-md` | | Secondary copy, descriptions | `text-body-md text-muted-foreground` | | Caption, timestamp, metadata | `text-body-sm text-muted-foreground` | -| Numeric value in a table or field | `text-label-md tabular-nums` | +| Numeric value in a table or field | `text-body-md tabular-nums` | | ID, code | `font-mono text-code-sm text-muted-foreground` | @@ -302,7 +302,7 @@ The [`Text`](../components/text.md) component applies the same roles with a `var Description copy ``` -On an `h1` to `h6` element, the `cream` and `bloom` palettes replace the role's line height and letter spacing, including `leading-none`; see "Change a role" below. AppShell's own components still use the stock utilities (`text-sm`, `font-medium`, and so on) today. They will move to the roles in later changes, so the two sets can appear side by side for now. +On an `h1` to `h6` element, the `cream` and `bloom` palettes replace the role's line height and letter spacing, including `leading-none`; see "Change a role" below. AppShell's own components use the roles: content text renders with `Text`, and controls use the role utility. **Rules** diff --git a/docs/components/text.md b/docs/components/text.md index 987e4927c..39f2f6497 100644 --- a/docs/components/text.md +++ b/docs/components/text.md @@ -70,7 +70,7 @@ Some lint rules report this example; see [Lint](#lint). | `body-sm` | `p` | Caption, timestamp, metadata | | `body-md-relaxed` | `p` | Long text, such as a chat message or a document | | `body-sm-relaxed` | `p` | Long text at the small size | -| `label-md` | `span` | Field label, short UI text, figures in a table | +| `label-md` | `span` | Field label, short UI text | | `label-sm` | `span` | Small label, badge text | | `code-sm` | `span` | ID and code. `Text` adds `font-mono` for you | @@ -195,4 +195,4 @@ The `cream` and `bloom` palettes set the line height and letter spacing of `h1` - [Card](./card.md) - The table above lists `heading-md` for card titles - [Layout](./layout.md) - The table above lists `heading-lg` for the page title -AppShell's own components, including these two, still use the stock utilities. They will move to the roles in a later change. +AppShell's own components, including these two, render their titles and descriptions with `Text`. diff --git a/docs/concepts/styling-theming.md b/docs/concepts/styling-theming.md index 938830b9d..94c4e5f95 100644 --- a/docs/concepts/styling-theming.md +++ b/docs/concepts/styling-theming.md @@ -283,7 +283,7 @@ There are 8 core roles and 2 relaxed body variants: | `heading-sm` | `text-heading-sm` | 14px / 20px | 600 | Sub-section heading | | `body-md` | `text-body-md` | 14px / 20px | 400 | Body copy, descriptions | | `body-sm` | `text-body-sm` | 12px / 16px | 400 | Caption, timestamp, metadata | -| `label-md` | `text-label-md` | 14px / 20px | 500 | Field label, short UI text, figures in a table | +| `label-md` | `text-label-md` | 14px / 20px | 500 | Field label, short UI text | | `label-sm` | `text-label-sm` | 12px / 16px | 500 | Small label, badge text | | `code-sm` | `text-code-sm` | 12px / 18px | 400 | ID and code. Use with `font-mono` | | `body-md-relaxed` | `text-body-md-relaxed` | 14px / 24px | 400 | Long text, such as a chat message or a document | @@ -301,7 +301,7 @@ Pair a role with a color token from the Color section above. These pairings are | Body copy | `text-body-md` | | Secondary copy, descriptions | `text-body-md text-muted-foreground` | | Caption, timestamp, metadata | `text-body-sm text-muted-foreground` | -| Numeric value in a table or field | `text-label-md tabular-nums` | +| Numeric value in a table or field | `text-body-md tabular-nums` | | ID, code | `font-mono text-code-sm text-muted-foreground` | @@ -417,7 +417,7 @@ The [`Text`](../components/text.md) component applies the same roles with a `var Description copy ``` -On an `h1` to `h6` element, the `cream` and `bloom` palettes replace the role's line height and letter spacing, including `leading-none`; see "Change a role" below. AppShell's own components still use the stock utilities (`text-sm`, `font-medium`, and so on) today. They will move to the roles in later changes, so the two sets can appear side by side for now. +On an `h1` to `h6` element, the `cream` and `bloom` palettes replace the role's line height and letter spacing, including `leading-none`; see "Change a role" below. AppShell's own components use the roles: content text renders with `Text`, and controls use the role utility. **Rules** diff --git a/packages/core/__snapshots__/src__components__ai-chat__ai-chat.test.tsx.snap b/packages/core/__snapshots__/src__components__ai-chat__ai-chat.test.tsx.snap index 3a1eb5f83..609b177c5 100644 --- a/packages/core/__snapshots__/src__components__ai-chat__ai-chat.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__ai-chat__ai-chat.test.tsx.snap @@ -1,5 +1,5 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`AIChat > snapshots > default 1`] = `"

Hello there.

"`; +exports[`AIChat > snapshots > default 1`] = `"

Hello there.

"`; -exports[`AIChat > snapshots > with header 1`] = `"
Assistant
"`; +exports[`AIChat > snapshots > with header 1`] = `"
Assistant
"`; diff --git a/packages/core/__snapshots__/src__components__alert__alert.test.tsx.snap b/packages/core/__snapshots__/src__components__alert__alert.test.tsx.snap index 291c9732b..b76edd2f1 100644 --- a/packages/core/__snapshots__/src__components__alert__alert.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__alert__alert.test.tsx.snap @@ -1,17 +1,17 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Alert > snapshots > description only (dismissible=false) 1`] = `""`; +exports[`Alert > snapshots > description only (dismissible=false) 1`] = `""`; -exports[`Alert > snapshots > description only (dismissible=true) 1`] = `""`; +exports[`Alert > snapshots > description only (dismissible=true) 1`] = `""`; -exports[`Alert > snapshots > error variant 1`] = `""`; +exports[`Alert > snapshots > error variant 1`] = `""`; -exports[`Alert > snapshots > info variant 1`] = `""`; +exports[`Alert > snapshots > info variant 1`] = `""`; -exports[`Alert > snapshots > neutral variant (default) 1`] = `""`; +exports[`Alert > snapshots > neutral variant (default) 1`] = `""`; -exports[`Alert > snapshots > success variant 1`] = `""`; +exports[`Alert > snapshots > success variant 1`] = `""`; -exports[`Alert > snapshots > warning variant 1`] = `""`; +exports[`Alert > snapshots > warning variant 1`] = `""`; -exports[`Alert > snapshots > with dismissible 1`] = `""`; +exports[`Alert > snapshots > with dismissible 1`] = `""`; diff --git a/packages/core/__snapshots__/src__components__attachment__Attachment.test.tsx.snap b/packages/core/__snapshots__/src__components__attachment__Attachment.test.tsx.snap index 550bb6fbb..1e2f7ae9c 100644 --- a/packages/core/__snapshots__/src__components__attachment__Attachment.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__attachment__Attachment.test.tsx.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Attachment > snapshots > disabled 1`] = `"
shoe-red.png

Aug-Sep 2025_1234-12.pdf

"`; +exports[`Attachment > snapshots > disabled 1`] = `"
shoe-red.png

Aug-Sep 2025_1234-12.pdf

"`; -exports[`Attachment > snapshots > empty default 1`] = `"
"`; +exports[`Attachment > snapshots > empty default 1`] = `"
"`; -exports[`Attachment > snapshots > populated mixed items 1`] = `"
shoe-red.png

Aug-Sep 2025_1234-12.pdf

"`; +exports[`Attachment > snapshots > populated mixed items 1`] = `"
shoe-red.png

Aug-Sep 2025_1234-12.pdf

"`; diff --git a/packages/core/__snapshots__/src__components__autocomplete__autocomplete-standalone.test.tsx.snap b/packages/core/__snapshots__/src__components__autocomplete__autocomplete-standalone.test.tsx.snap index 0d86b8c04..3012a1e8e 100644 --- a/packages/core/__snapshots__/src__components__autocomplete__autocomplete-standalone.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__autocomplete__autocomplete-standalone.test.tsx.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Autocomplete (standalone) > snapshots > default with string items 1`] = `"
"`; +exports[`Autocomplete (standalone) > snapshots > default with string items 1`] = `"
"`; -exports[`Autocomplete (standalone) > snapshots > with custom className 1`] = `"
"`; +exports[`Autocomplete (standalone) > snapshots > with custom className 1`] = `"
"`; -exports[`Autocomplete (standalone) > snapshots > with custom mapItem 1`] = `"
"`; +exports[`Autocomplete (standalone) > snapshots > with custom mapItem 1`] = `"
"`; diff --git a/packages/core/__snapshots__/src__components__autocomplete__autocomplete.test.tsx.snap b/packages/core/__snapshots__/src__components__autocomplete__autocomplete.test.tsx.snap index f5ce574db..d28e508f5 100644 --- a/packages/core/__snapshots__/src__components__autocomplete__autocomplete.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__autocomplete__autocomplete.test.tsx.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Autocomplete.Parts > snapshots > closed autocomplete with placeholder 1`] = `"
"`; +exports[`Autocomplete.Parts > snapshots > closed autocomplete with placeholder 1`] = `"
"`; -exports[`Autocomplete.Parts > snapshots > open autocomplete 1`] = `"
"`; +exports[`Autocomplete.Parts > snapshots > open autocomplete 1`] = `"
"`; -exports[`Autocomplete.Parts > snapshots > with groups 1`] = `""`; +exports[`Autocomplete.Parts > snapshots > with groups 1`] = `""`; diff --git a/packages/core/__snapshots__/src__components__avatar__avatar.test.tsx.snap b/packages/core/__snapshots__/src__components__avatar__avatar.test.tsx.snap index 83aff7839..718b05531 100644 --- a/packages/core/__snapshots__/src__components__avatar__avatar.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__avatar__avatar.test.tsx.snap @@ -1,9 +1,9 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Avatar > snapshots > fallback only 1`] = `"AB"`; +exports[`Avatar > snapshots > fallback only 1`] = `"AB"`; -exports[`Avatar > snapshots > size lg 1`] = `"EF"`; +exports[`Avatar > snapshots > size lg 1`] = `"EF"`; -exports[`Avatar > snapshots > size sm 1`] = `"CD"`; +exports[`Avatar > snapshots > size sm 1`] = `"CD"`; -exports[`Avatar > snapshots > size xs 1`] = `"AB"`; +exports[`Avatar > snapshots > size xs 1`] = `"AB"`; diff --git a/packages/core/__snapshots__/src__components__button__button.test.tsx.snap b/packages/core/__snapshots__/src__components__button__button.test.tsx.snap index a7c88aa9a..d050a98e6 100644 --- a/packages/core/__snapshots__/src__components__button__button.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__button__button.test.tsx.snap @@ -1,25 +1,25 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Button > snapshots > default variant and size 1`] = `""`; +exports[`Button > snapshots > default variant and size 1`] = `""`; -exports[`Button > snapshots > destructive variant 1`] = `""`; +exports[`Button > snapshots > destructive variant 1`] = `""`; -exports[`Button > snapshots > disabled state 1`] = `""`; +exports[`Button > snapshots > disabled state 1`] = `""`; -exports[`Button > snapshots > extra-small size 1`] = `""`; +exports[`Button > snapshots > extra-small size 1`] = `""`; -exports[`Button > snapshots > ghost variant 1`] = `""`; +exports[`Button > snapshots > ghost variant 1`] = `""`; -exports[`Button > snapshots > icon size 1`] = `""`; +exports[`Button > snapshots > icon size 1`] = `""`; -exports[`Button > snapshots > large size 1`] = `""`; +exports[`Button > snapshots > large size 1`] = `""`; -exports[`Button > snapshots > link variant 1`] = `""`; +exports[`Button > snapshots > link variant 1`] = `""`; -exports[`Button > snapshots > outline variant 1`] = `""`; +exports[`Button > snapshots > outline variant 1`] = `""`; -exports[`Button > snapshots > secondary variant 1`] = `""`; +exports[`Button > snapshots > secondary variant 1`] = `""`; -exports[`Button > snapshots > small size 1`] = `""`; +exports[`Button > snapshots > small size 1`] = `""`; -exports[`Button > snapshots > with render prop (as link) 1`] = `"Link Button"`; +exports[`Button > snapshots > with render prop (as link) 1`] = `"Link Button"`; diff --git a/packages/core/__snapshots__/src__components__calendar__calendar.test.tsx.snap b/packages/core/__snapshots__/src__components__calendar__calendar.test.tsx.snap index 992ad9a87..0e07db5d2 100644 --- a/packages/core/__snapshots__/src__components__calendar__calendar.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__calendar__calendar.test.tsx.snap @@ -1,3 +1,3 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`snapshots > Calendar — pre-selected 1`] = `"
June 2025
"`; +exports[`snapshots > Calendar — pre-selected 1`] = `"
June 2025
"`; diff --git a/packages/core/__snapshots__/src__components__calendar__range-calendar.test.tsx.snap b/packages/core/__snapshots__/src__components__calendar__range-calendar.test.tsx.snap index 717ac1ba4..c1bea342d 100644 --- a/packages/core/__snapshots__/src__components__calendar__range-calendar.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__calendar__range-calendar.test.tsx.snap @@ -1,3 +1,3 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`snapshots > RangeCalendar — pre-selected range 1`] = `"
June 2025
"`; +exports[`snapshots > RangeCalendar — pre-selected range 1`] = `"
June 2025
"`; diff --git a/packages/core/__snapshots__/src__components__card__card.test.tsx.snap b/packages/core/__snapshots__/src__components__card__card.test.tsx.snap index 71a0a061c..8a3159faa 100644 --- a/packages/core/__snapshots__/src__components__card__card.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__card__card.test.tsx.snap @@ -1,5 +1,5 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Card > snapshots > basic card with header and content 1`] = `"

Title

Description
Content
"`; +exports[`Card > snapshots > basic card with header and content 1`] = `"

Title

Description
Content
"`; exports[`Card > snapshots > card with custom className 1`] = `"
Content
"`; diff --git a/packages/core/__snapshots__/src__components__checkbox__checkbox.test.tsx.snap b/packages/core/__snapshots__/src__components__checkbox__checkbox.test.tsx.snap index e8a585192..e9501457a 100644 --- a/packages/core/__snapshots__/src__components__checkbox__checkbox.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__checkbox__checkbox.test.tsx.snap @@ -8,4 +8,4 @@ exports[`Checkbox > snapshots > indeterminate 1`] = `""`; -exports[`Checkbox > snapshots > with label 1`] = `""`; +exports[`Checkbox > snapshots > with label 1`] = `""`; diff --git a/packages/core/__snapshots__/src__components__combobox__combobox-standalone.test.tsx.snap b/packages/core/__snapshots__/src__components__combobox__combobox-standalone.test.tsx.snap index b68aeaf97..1dd9c0420 100644 --- a/packages/core/__snapshots__/src__components__combobox__combobox-standalone.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__combobox__combobox-standalone.test.tsx.snap @@ -1,9 +1,9 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Combobox (standalone) > snapshots > default with string items 1`] = `"
"`; +exports[`Combobox (standalone) > snapshots > default with string items 1`] = `"
"`; -exports[`Combobox (standalone) > snapshots > disabled 1`] = `"
"`; +exports[`Combobox (standalone) > snapshots > disabled 1`] = `"
"`; -exports[`Combobox (standalone) > snapshots > multiple mode 1`] = `"
"`; +exports[`Combobox (standalone) > snapshots > multiple mode 1`] = `"
"`; -exports[`Combobox (standalone) > snapshots > with custom className 1`] = `"
"`; +exports[`Combobox (standalone) > snapshots > with custom className 1`] = `"
"`; diff --git a/packages/core/__snapshots__/src__components__combobox__combobox.test.tsx.snap b/packages/core/__snapshots__/src__components__combobox__combobox.test.tsx.snap index c606cf03d..315bce69e 100644 --- a/packages/core/__snapshots__/src__components__combobox__combobox.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__combobox__combobox.test.tsx.snap @@ -1,9 +1,9 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Combobox.Parts > snapshots > closed combobox with placeholder 1`] = `""`; +exports[`Combobox.Parts > snapshots > closed combobox with placeholder 1`] = `""`; -exports[`Combobox.Parts > snapshots > open combobox 1`] = `"
"`; +exports[`Combobox.Parts > snapshots > open combobox 1`] = `"
"`; -exports[`Combobox.Parts > snapshots > with InputGroup, Clear, and Trigger 1`] = `"
"`; +exports[`Combobox.Parts > snapshots > with InputGroup, Clear, and Trigger 1`] = `"
"`; -exports[`Combobox.Parts > snapshots > with groups 1`] = `""`; +exports[`Combobox.Parts > snapshots > with groups 1`] = `""`; diff --git a/packages/core/__snapshots__/src__components__dialog__dialog.test.tsx.snap b/packages/core/__snapshots__/src__components__dialog__dialog.test.tsx.snap index 2023c299b..dc615c9f7 100644 --- a/packages/core/__snapshots__/src__components__dialog__dialog.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__dialog__dialog.test.tsx.snap @@ -2,6 +2,6 @@ exports[`Dialog > snapshots > closed dialog (trigger only) 1`] = `""`; -exports[`Dialog > snapshots > open dialog with header 1`] = `"
"`; +exports[`Dialog > snapshots > open dialog with header 1`] = `"
"`; -exports[`Dialog > snapshots > open dialog with header and footer 1`] = `"
"`; +exports[`Dialog > snapshots > open dialog with header and footer 1`] = `"
"`; diff --git a/packages/core/__snapshots__/src__components__document-progress-card__DocumentProgressCard.test.tsx.snap b/packages/core/__snapshots__/src__components__document-progress-card__DocumentProgressCard.test.tsx.snap index 0d886bf3c..eb9802957 100644 --- a/packages/core/__snapshots__/src__components__document-progress-card__DocumentProgressCard.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__document-progress-card__DocumentProgressCard.test.tsx.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`DocumentProgressCard > snapshots > legend override distinct from bar segments 1`] = `"
30%
Received items
12
Returned items
2
Yet to receive
28
"`; +exports[`DocumentProgressCard > snapshots > legend override distinct from bar segments 1`] = `"
30%
Received items
12
Returned items
2
Yet to receive
28
"`; -exports[`DocumentProgressCard > snapshots > title, percent, and three segments 1`] = `"
Shipment status60%
Shipped
30
Returned
3
Pending
17
"`; +exports[`DocumentProgressCard > snapshots > title, percent, and three segments 1`] = `"
Shipment status60%
Shipped
30
Returned
3
Pending
17
"`; -exports[`DocumentProgressCard > snapshots > with an unfilled remainder via total 1`] = `"
25%
Done
10
"`; +exports[`DocumentProgressCard > snapshots > with an unfilled remainder via total 1`] = `"
25%
Done
10
"`; diff --git a/packages/core/__snapshots__/src__components__field__field.test.tsx.snap b/packages/core/__snapshots__/src__components__field__field.test.tsx.snap index b5f1466a1..143ff6308 100644 --- a/packages/core/__snapshots__/src__components__field__field.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__field__field.test.tsx.snap @@ -1,11 +1,11 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Field > snapshots > basic field with label and control 1`] = `"
"`; +exports[`Field > snapshots > basic field with label and control 1`] = `"
"`; -exports[`Field > snapshots > disabled field 1`] = `"
"`; +exports[`Field > snapshots > disabled field 1`] = `"
"`; -exports[`Field > snapshots > field with custom className 1`] = `"
"`; +exports[`Field > snapshots > field with custom className 1`] = `"
"`; -exports[`Field > snapshots > field with description 1`] = `"

We will never share your email.

"`; +exports[`Field > snapshots > field with description 1`] = `"

We will never share your email.

"`; -exports[`Field > snapshots > field with error 1`] = `"
Please enter a valid URL.
"`; +exports[`Field > snapshots > field with error 1`] = `"
Please enter a valid URL.
"`; diff --git a/packages/core/__snapshots__/src__components__fieldset__fieldset.test.tsx.snap b/packages/core/__snapshots__/src__components__fieldset__fieldset.test.tsx.snap index b10857ba2..38152299f 100644 --- a/packages/core/__snapshots__/src__components__fieldset__fieldset.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__fieldset__fieldset.test.tsx.snap @@ -1,5 +1,5 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Fieldset > snapshots > basic fieldset with legend 1`] = `"
Billing details
Field content
"`; +exports[`Fieldset > snapshots > basic fieldset with legend 1`] = `"
Billing details
Field content
"`; -exports[`Fieldset > snapshots > fieldset with custom className 1`] = `"
Section
"`; +exports[`Fieldset > snapshots > fieldset with custom className 1`] = `"
Section
"`; diff --git a/packages/core/__snapshots__/src__components__filter-rail__filter-rail.test.tsx.snap b/packages/core/__snapshots__/src__components__filter-rail__filter-rail.test.tsx.snap index a4a98b79f..b49d9b261 100644 --- a/packages/core/__snapshots__/src__components__filter-rail__filter-rail.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__filter-rail__filter-rail.test.tsx.snap @@ -1,15 +1,15 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`FilterRail > snapshots > checkbox section 1`] = `"
[]
"`; +exports[`FilterRail > snapshots > checkbox section 1`] = `"
[]
"`; -exports[`FilterRail > snapshots > comfortable density 1`] = `"
[]
"`; +exports[`FilterRail > snapshots > comfortable density 1`] = `"
[]
"`; -exports[`FilterRail > snapshots > compact density 1`] = `"
[]
"`; +exports[`FilterRail > snapshots > compact density 1`] = `"
[]
"`; -exports[`FilterRail > snapshots > numberRange section 1`] = `"
[{"field":"price","operator":"between","value":{"min":10,"max":200}}]
"`; +exports[`FilterRail > snapshots > numberRange section 1`] = `"
[{"field":"price","operator":"between","value":{"min":10,"max":200}}]
"`; -exports[`FilterRail > snapshots > radio and boolean sections 1`] = `"
[{"field":"status","operator":"eq","value":"active"}]
"`; +exports[`FilterRail > snapshots > radio and boolean sections 1`] = `"
[{"field":"status","operator":"eq","value":"active"}]
"`; -exports[`FilterRail > snapshots > text section 1`] = `"
[]
"`; +exports[`FilterRail > snapshots > text section 1`] = `"
[]
"`; -exports[`FilterRail > snapshots > with Header and ClearAll 1`] = `"
[{"field":"category","operator":"in","value":["apparel"]}]
"`; +exports[`FilterRail > snapshots > with Header and ClearAll 1`] = `"
[{"field":"category","operator":"in","value":["apparel"]}]
"`; diff --git a/packages/core/__snapshots__/src__components__form__form.test.tsx.snap b/packages/core/__snapshots__/src__components__form__form.test.tsx.snap index dcaa909e0..53bc3c3e2 100644 --- a/packages/core/__snapshots__/src__components__form__form.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__form__form.test.tsx.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Form > snapshots > basic form with a field 1`] = `"
"`; +exports[`Form > snapshots > basic form with a field 1`] = `"
"`; exports[`Form > snapshots > form with custom className 1`] = `"
Content
"`; diff --git a/packages/core/__snapshots__/src__components__input__input.test.tsx.snap b/packages/core/__snapshots__/src__components__input__input.test.tsx.snap index ad30b2e2d..5c3addf05 100644 --- a/packages/core/__snapshots__/src__components__input__input.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__input__input.test.tsx.snap @@ -1,13 +1,13 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Input > snapshots > default text input 1`] = `""`; +exports[`Input > snapshots > default text input 1`] = `""`; -exports[`Input > snapshots > disabled input 1`] = `""`; +exports[`Input > snapshots > disabled input 1`] = `""`; -exports[`Input > snapshots > email input 1`] = `""`; +exports[`Input > snapshots > email input 1`] = `""`; -exports[`Input > snapshots > file input 1`] = `""`; +exports[`Input > snapshots > file input 1`] = `""`; -exports[`Input > snapshots > password input 1`] = `""`; +exports[`Input > snapshots > password input 1`] = `""`; -exports[`Input > snapshots > with custom className 1`] = `""`; +exports[`Input > snapshots > with custom className 1`] = `""`; diff --git a/packages/core/__snapshots__/src__components__layout__Layout.test.tsx.snap b/packages/core/__snapshots__/src__components__layout__Layout.test.tsx.snap index 4a5619faf..c0f68898c 100644 --- a/packages/core/__snapshots__/src__components__layout__Layout.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__layout__Layout.test.tsx.snap @@ -12,10 +12,10 @@ exports[`Layout > snapshots > 3-column area-based layout 1`] = `"
Left
Center
Right
"`; -exports[`Layout > snapshots > Layout.Header with title 1`] = `"

Page Title

Content
"`; +exports[`Layout > snapshots > Layout.Header with title 1`] = `"

Page Title

Content
"`; -exports[`Layout > snapshots > Layout.Header with title, actions, and children 1`] = `"

Edit

Tabs
Content
"`; +exports[`Layout > snapshots > Layout.Header with title, actions, and children 1`] = `"

Edit

Tabs
Content
"`; exports[`Layout > snapshots > className passthrough 1`] = `"
Content
"`; -exports[`Layout > snapshots > legacy title and actions props 1`] = `"

Legacy Title

Content
"`; +exports[`Layout > snapshots > legacy title and actions props 1`] = `"

Legacy Title

Content
"`; diff --git a/packages/core/__snapshots__/src__components__menu__menu.test.tsx.snap b/packages/core/__snapshots__/src__components__menu__menu.test.tsx.snap index 8577e5238..ae1941530 100644 --- a/packages/core/__snapshots__/src__components__menu__menu.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__menu__menu.test.tsx.snap @@ -2,14 +2,14 @@ exports[`Menu > snapshots > closed menu (trigger only) 1`] = `""`; -exports[`Menu > snapshots > open menu with items 1`] = `"
"`; +exports[`Menu > snapshots > open menu with items 1`] = `"
"`; -exports[`Menu > snapshots > with checkbox items 1`] = `"
"`; +exports[`Menu > snapshots > with checkbox items 1`] = `"
"`; -exports[`Menu > snapshots > with disabled item 1`] = `"
"`; +exports[`Menu > snapshots > with disabled item 1`] = `"
"`; -exports[`Menu > snapshots > with groups and group labels 1`] = `"
"`; +exports[`Menu > snapshots > with groups and group labels 1`] = `"
"`; -exports[`Menu > snapshots > with radio group 1`] = `"
"`; +exports[`Menu > snapshots > with radio group 1`] = `"
"`; exports[`Menu > snapshots > with submenu 1`] = `""`; diff --git a/packages/core/__snapshots__/src__components__select__select-standalone.test.tsx.snap b/packages/core/__snapshots__/src__components__select__select-standalone.test.tsx.snap index 53f2eb55a..d580063fe 100644 --- a/packages/core/__snapshots__/src__components__select__select-standalone.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__select__select-standalone.test.tsx.snap @@ -1,9 +1,9 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Select (standalone) > snapshots > default with string items 1`] = `"
"`; +exports[`Select (standalone) > snapshots > default with string items 1`] = `"
"`; -exports[`Select (standalone) > snapshots > disabled 1`] = `"
"`; +exports[`Select (standalone) > snapshots > disabled 1`] = `"
"`; -exports[`Select (standalone) > snapshots > multiple mode 1`] = `"
"`; +exports[`Select (standalone) > snapshots > multiple mode 1`] = `"
"`; -exports[`Select (standalone) > snapshots > with custom mapItem 1`] = `"
"`; +exports[`Select (standalone) > snapshots > with custom mapItem 1`] = `"
"`; diff --git a/packages/core/__snapshots__/src__components__select__select.test.tsx.snap b/packages/core/__snapshots__/src__components__select__select.test.tsx.snap index 1f515f07d..22fab4578 100644 --- a/packages/core/__snapshots__/src__components__select__select.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__select__select.test.tsx.snap @@ -1,11 +1,11 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Select > snapshots > closed select with placeholder 1`] = `""`; +exports[`Select > snapshots > closed select with placeholder 1`] = `""`; -exports[`Select > snapshots > disabled item 1`] = `"
Apple
Banana
"`; +exports[`Select > snapshots > disabled item 1`] = `"
Apple
Banana
"`; -exports[`Select > snapshots > disabled select 1`] = `""`; +exports[`Select > snapshots > disabled select 1`] = `""`; -exports[`Select > snapshots > open select 1`] = `"
Apple
Banana
"`; +exports[`Select > snapshots > open select 1`] = `"
Apple
Banana
"`; -exports[`Select > snapshots > with groups and separator 1`] = `"
Apple
Carrot
"`; +exports[`Select > snapshots > with groups and separator 1`] = `"
Apple
Carrot
"`; diff --git a/packages/core/__snapshots__/src__components__sheet__sheet.test.tsx.snap b/packages/core/__snapshots__/src__components__sheet__sheet.test.tsx.snap index 10e75cc78..58aba05b6 100644 --- a/packages/core/__snapshots__/src__components__sheet__sheet.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__sheet__sheet.test.tsx.snap @@ -2,10 +2,10 @@ exports[`Sheet > snapshots > closed sheet (trigger only) 1`] = `""`; -exports[`Sheet > snapshots > open non-modal sheet without backdrop 1`] = `"
"`; +exports[`Sheet > snapshots > open non-modal sheet without backdrop 1`] = `"
"`; -exports[`Sheet > snapshots > open sheet (left side) 1`] = `"
"`; +exports[`Sheet > snapshots > open sheet (left side) 1`] = `"
"`; -exports[`Sheet > snapshots > open sheet (right side, default) 1`] = `"
"`; +exports[`Sheet > snapshots > open sheet (right side, default) 1`] = `"
"`; -exports[`Sheet > snapshots > open sheet with header and footer 1`] = `"
"`; +exports[`Sheet > snapshots > open sheet with header and footer 1`] = `"
"`; diff --git a/packages/core/__snapshots__/src__components__table__table.test.tsx.snap b/packages/core/__snapshots__/src__components__table__table.test.tsx.snap index 6905bf962..0dcfece77 100644 --- a/packages/core/__snapshots__/src__components__table__table.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__table__table.test.tsx.snap @@ -1,11 +1,11 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Table > snapshots > basic table with header and body 1`] = `"
NameStatus
Item 1Active
"`; +exports[`Table > snapshots > basic table with header and body 1`] = `"
NameStatus
Item 1Active
"`; -exports[`Table > snapshots > empty table 1`] = `"
NameStatus
"`; +exports[`Table > snapshots > empty table 1`] = `"
NameStatus
"`; -exports[`Table > snapshots > table with caption 1`] = `"
A list of items
Name
Item
"`; +exports[`Table > snapshots > table with caption 1`] = `"
A list of items
Name
Item
"`; -exports[`Table > snapshots > table with containerClassName 1`] = `"
Name
Item
"`; +exports[`Table > snapshots > table with containerClassName 1`] = `"
Name
Item
"`; -exports[`Table > snapshots > table with footer 1`] = `"
ProductPrice
Widget$10
Total$10
"`; +exports[`Table > snapshots > table with footer 1`] = `"
ProductPrice
Widget$10
Total$10
"`; diff --git a/packages/core/__snapshots__/src__components__tabs__tabs.test.tsx.snap b/packages/core/__snapshots__/src__components__tabs__tabs.test.tsx.snap index ef1322123..6aa49e275 100644 --- a/packages/core/__snapshots__/src__components__tabs__tabs.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__tabs__tabs.test.tsx.snap @@ -1,19 +1,19 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Tabs > snapshots > capsule variant 1`] = `"
Content 1
"`; +exports[`Tabs > snapshots > capsule variant 1`] = `"
Content 1
"`; -exports[`Tabs > snapshots > capsule variant with icon-only tabs (square) 1`] = `"
Table content
"`; +exports[`Tabs > snapshots > capsule variant with icon-only tabs (square) 1`] = `"
Table content
"`; -exports[`Tabs > snapshots > capsule variant with lg size 1`] = `"
Content 1
"`; +exports[`Tabs > snapshots > capsule variant with lg size 1`] = `"
Content 1
"`; -exports[`Tabs > snapshots > capsule variant with sm size 1`] = `"
Content 1
"`; +exports[`Tabs > snapshots > capsule variant with sm size 1`] = `"
Content 1
"`; -exports[`Tabs > snapshots > capsule variant with xs size 1`] = `"
Content 1
"`; +exports[`Tabs > snapshots > capsule variant with xs size 1`] = `"
Content 1
"`; -exports[`Tabs > snapshots > default tabs 1`] = `"
Content 1
"`; +exports[`Tabs > snapshots > default tabs 1`] = `"
Content 1
"`; -exports[`Tabs > snapshots > line variant 1`] = `"
Content 1
"`; +exports[`Tabs > snapshots > line variant 1`] = `"
Content 1
"`; -exports[`Tabs > snapshots > tabs with disabled tab 1`] = `"
Content 1
"`; +exports[`Tabs > snapshots > tabs with disabled tab 1`] = `"
Content 1
"`; -exports[`Tabs > snapshots > tabs with three tabs 1`] = `"
Overview content
"`; +exports[`Tabs > snapshots > tabs with three tabs 1`] = `"
Overview content
"`; diff --git a/packages/core/__snapshots__/src__components__toolbar__toolbar.test.tsx.snap b/packages/core/__snapshots__/src__components__toolbar__toolbar.test.tsx.snap index 8534f44c3..e2b379276 100644 --- a/packages/core/__snapshots__/src__components__toolbar__toolbar.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__toolbar__toolbar.test.tsx.snap @@ -1,3 +1,3 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Toolbar > renders grouped controls and a separator 1`] = `"
"`; +exports[`Toolbar > renders grouped controls and a separator 1`] = `"
"`; diff --git a/packages/core/__snapshots__/src__components__tooltip__tooltip.test.tsx.snap b/packages/core/__snapshots__/src__components__tooltip__tooltip.test.tsx.snap index 0e5630b8b..78330a289 100644 --- a/packages/core/__snapshots__/src__components__tooltip__tooltip.test.tsx.snap +++ b/packages/core/__snapshots__/src__components__tooltip__tooltip.test.tsx.snap @@ -2,6 +2,6 @@ exports[`Tooltip > snapshots > closed tooltip (trigger only) 1`] = `""`; -exports[`Tooltip > snapshots > open tooltip 1`] = `"
Helpful information
"`; +exports[`Tooltip > snapshots > open tooltip 1`] = `"
Helpful information
"`; exports[`Tooltip > snapshots > tooltip with provider 1`] = `""`; diff --git a/packages/core/src/components/action-panel/ActionPanel.tsx b/packages/core/src/components/action-panel/ActionPanel.tsx index 1883f6b57..9e15a5456 100644 --- a/packages/core/src/components/action-panel/ActionPanel.tsx +++ b/packages/core/src/components/action-panel/ActionPanel.tsx @@ -3,6 +3,7 @@ import { Card } from "../card"; import { Spinner } from "../spinner"; import { useRegisterCommandPaletteActions } from "../../contexts/command-palette-context"; import type { ActionPanelProps, ActionItem } from "./types"; +import { Text } from "../text"; const iconSlotClasses = "astw:flex astw:size-4 astw:items-center astw:justify-center"; @@ -12,7 +13,7 @@ const iconSlotClasses = "astw:flex astw:size-4 astw:items-center astw:justify-ce const actionRowBaseClasses = cn( "astw:flex astw:items-center astw:gap-2 astw:w-full astw:rounded-md astw:px-3 astw:py-2", - "astw:text-sm astw:font-medium astw:transition-colors astw:border astw:border-transparent", + "astw:text-label-md astw:transition-colors astw:border astw:border-transparent", "astw:bg-transparent astw:text-left astw:cursor-pointer astw:[&_svg]:size-4 astw:[&_svg]:shrink-0", ); @@ -115,9 +116,9 @@ export function ActionPanel({ title, actions, className }: ActionPanelProps) { {actions.length === 0 ? ( -

+ No actions available -

+
) : (