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 -
Hello there.
Hello there.

Aug-Sep 2025_1234-12.pdf

Aug-Sep 2025_1234-12.pdf

Aug-Sep 2025_1234-12.pdf

Aug-Sep 2025_1234-12.pdf
We will never share your email.
We will never share your email.
[]"`; +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`] = `""`;
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`] = `"| Name | Status |
|---|---|
| Item 1 | Active |
| Name | Status |
|---|---|
| Item 1 | Active |
| Name | Status |
|---|
| Name | Status |
|---|
| Name |
|---|
| Item |
| Name |
|---|
| Item |
| Name |
|---|
| Item |
| Name |
|---|
| Item |
| Product | Price |
|---|---|
| Widget | $10 |
| Total | $10 |
| Product | Price |
|---|---|
| Widget | $10 |
| Total | $10 |
+
+
No activities yet
+
+
+
+
{label}
- {description ?{description}
: null} +{description}
+}
>
{token.slice(1, -1)}
- ,
+ ,
);
} else {
const linkMatch = /^\[([^\]]{1,500})\]\(([^)]{1,2000})\)$/.exec(token);
diff --git a/packages/core/src/components/ai-chat/sources.tsx b/packages/core/src/components/ai-chat/sources.tsx
index 90e482877..568bf303b 100644
--- a/packages/core/src/components/ai-chat/sources.tsx
+++ b/packages/core/src/components/ai-chat/sources.tsx
@@ -34,7 +34,7 @@ type SourcesProps = Omit++ ); } @@ -128,9 +133,14 @@ function ToolInput({ input, className, ...props }: ToolInputProps) { return (} + > {text} -
{errorMessage}
+ ++
{baseName} @@ -192,7 +192,7 @@ export function Attachment({ aria-hidden data-testid="attachment-file-icon" /> -
+
{baseName} @@ -242,13 +242,9 @@ export function Attachment({ aria-hidden />
- {uploadLabel} -
+{uploadLabel}
{uploadHint ? ( -- {uploadHint} -
+{uploadHint}
) : null}