feat(theme): lighten heading and body type, and align the Message icon to the first line by gabriel-lisboa-azion · Pull Request #876 · aziontech/webkit

gabriel-lisboa-azion · 2026-08-10T20:28:25Z

Summary

text-heading-* and every text-body-* step drop from weight 400 to 300, and the body steps tighten from 1.5 to 1.375 leading; text-tag-* drops from 600 to 400. The four body steps plus text-body-xxs now emit a --text-*-font-weight custom property they previously lacked, so the utilities set a weight instead of inheriting one.
Message kept its icon on the root's items-center row, so wrapped copy dragged the icon to the vertical middle of the block. The icon and the copy now share an items-start block, with the icon on an alignment box the height of the copy's line box (h-5.25 medium / h-4.5 small).
packages/theme/dist/v4/* and packages/webkit/catalog.json are regenerated from the token sources.

How to test

pnpm --filter @aziontech/webkit test -- src/components/feedback/message/message.test.ts → 33 passing.
pnpm storybook:dev, open Components/Feedback/Message. Widen the label until it wraps to two lines at both small and medium: the icon stays beside the first line instead of drifting to the middle. Measured line boxes are 21px (medium, text-label-md) and 18px (small, text-label-sm), matching the alignment box.
In the same Storybook, check Foundations/Typography: headings and body copy render at 300, tags at 400, and body steps sit on 1.375 leading.
cd packages/theme && node src/scripts/build-tokens.mjs then git diff --exit-code packages/theme/dist → no drift. Same for pnpm --filter @aziontech/webkit run catalog:check.

Notes

Not breaking: no token is renamed or removed. The added --text-body-*-font-weight properties are new surface, hence the feat type.
The typography change alters rendered weight system-wide, so the visual-regression baselines will need regenerating once CI reports the diff — baselines are CI-only.

Headings (2xl → xxs) and every body step now render at 300 instead of 400, and the body steps tighten from 1.5 to 1.375 leading. The four `text-body-*` steps plus `text-body-xxs` gain a `--text-*-font-weight` custom property that did not exist before, so the utilities emit a weight rather than inheriting one. Tag steps drop from 600 to 400. `text-body-xxs` moves next to its siblings so the generated block reads in order; `dist/v4` and the webkit token catalog are regenerated.

The icon and the copy were siblings of the root's `items-center` row, so a message whose text wrapped to two or more lines drifted the icon to the vertical middle of the block instead of leaving it beside the first line. The icon and the copy now share an `items-start` block, and the icon rides an alignment box the height of the copy's line box — `h-5.25` (21px) at medium, `h-4.5` (18px) at small — so it centers on the first line and stays there at any wrap depth.

…e and Message icon alignment

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--variants--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--muted.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-icon-media.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--light-tablet.png

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement.png

…lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* feat(theme): add semantic/layouts — the container system Ten tokens and nine `@utility` classes: how far content sits from the app chrome (BOUNDARY), how far things sit from each other (RHYTHM), and how wide a reading column may get (MEASURE). A DERIVED group: every token is a var() reference to --spacing-* / --container-*, never a literal length. That is why none carries a breakpoint map — the spacing scale is already fluid and var() is substituted at use time on the element, so a layout token follows the override for free. Duplicating the scale into layout would only let the two drift. Emitting them as `@utility` rather than `@layer components` is what gives them variants (`md:layout-column`), the same reason the typography utilities are emitted that way. Generalizes the utility emitter into emitUtilities(map) with a thin emitLayoutUtilities caller, so the shape is reusable. Regenerating dist also picks up one line main was stale on: an emitted comment that still read `bg-[var(--x)]` where the source has said `bg-(--x)` since ENG-47001. * chore(webkit): regenerate the catalog for the layout tokens The catalog's token allowlists are scraped from the built theme, so adding semantic/layouts adds ten --layout-* entries. Regenerated rather than hand-edited, which is what catalog:check verifies. * test(storybook): regenerate the avatar dark-desktop baseline for the lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: Isaque Böck <isaque.santos@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Brings the three commits demo lacked, so the deployed sample exercises them alongside the four fixes carved out of this branch (#899–#902), whose content was already here: - feat(webkit): chip's three kinds (#883) - feat(theme): the semantic/layouts container system (#884) - feat(theme): lightened heading and body type (#876) Conflict resolutions worth knowing: `build-tokens.mjs` — main has no illustration tokens, so main's side of all six hunks was empty. Taking it would have silently deleted this branch's illustration wiring; ours was kept. The merge then produced a DUPLICATE `emitUtilities` and `emitLayoutUtilities` with no conflict at all (both sides had added an identical helper in different places), which is a syntax error the merge itself reported as clean — the second copy is removed and `emitIllustrationUtilities` reuses the first. `texts.data.js` — the five conflicts were all `text-body-*` weight, resolved to main's `light` since that is the change being previewed. Resolved in place rather than with `--theirs`, which would have discarded the file's auto-merged hunks. Entry count held at 144. `.size-limit.json` — union, not a side: main's `chip` plus this branch's `footer-root` and `resizable-panel-root`. `dist/v4/globals.*` are generated, so they were rebuilt from the merged sources rather than hand-merged. The 466 conflicting visual baselines took main's copies; neither side is valid for a merged tree, and this branch opens no PR the visual gate guards. Verified after: no `undefined` in the built CSS, illustration tokens still emitted, main's layout utilities present, body weights now 300, no token data file lost entries, and 154 tests pass across toast, table, sidebar, resizable-panel and chip.

…pe scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved.

* feat(webkit): [ENG-47357] add footer composition component * test(storybook): regenerate linux baselines for the footer story * fix(webkit): [ENG-47357] address footer code review findings - token the social-bar border-top width (--border-width-default) instead of the implicit 1px - add active and visited states to Footer.Link per the Design task's state scope - add a size-limit budget for footer-root - cover both single-slot branches of the social bar's conditional render * test(storybook): regenerate linux baselines for the footer border/link-state fix * fix(webkit): [ENG-47357] match footer anatomy to the Figma Default frame - add the column divider borders and fix the social-bar border token (--border-default, not --border-muted), per node 5467:1642 - remove the outer columns padding/gap in favor of per-column padding, matching Figma's flex-1 + 0 column-gap layout - fix the social-bar right-cluster gap (status <-> language) to --spacing-lg, and lock the bar to h-14 at md+ - enrich the story: all 7 social icons, the language Select (with an explicit aria-label so the combobox has an accessible name distinct from its displayed value), matching the frame's anatomy * test(storybook): regenerate linux baselines for the Figma-parity fixes * fix(webkit): [ENG-47357] scope divider borders to the correct side border-(length:--border-width-default) sets width on ALL FOUR sides, not just the paired border-r/border-t. Combined with border-r/border-t, every column and the social bar picked up unwanted left/top/bottom borders too — visible as a doubled line at each column seam and an inconsistent right edge. Switched to the per-side border-r-(length:...) / border-t-(length:...) form already used in panel-header.vue / table-row.vue, with border-0 to zero every side first. * test(storybook): regenerate linux baselines for the divider-border fix * test(webkit): correct the footer axe comment — this env is unstyled The suite loads no theme CSS and runs no Tailwind (src/test/setup.ts), so axe here checks semantics only. The comment claimed a styled tree, which reads as though contrast were covered; contrast lives in Storybook + visual regression. * test(storybook): regenerate footer linux baselines for the lighter type scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved. * feat(webkit): rebuild the footer on the framed-band design The Figma set (5467:1638) moved the brand out of the social bar into its own framed signature band beside a tagline, and wrapped the footer in page material: two hatched gutters flanking the measure and a hatched band closing it below. The four bands are cells of ONE grid, so each stays a single element in a single place in the DOM while their order changes — `order-*` when stacked, explicit row/column placement from `md` — instead of a desktop-only wrapper row that would duplicate the consumer's slot content. Three breakpoints, each for its own reason: the column grid folds below `md`; the bands recombine at `md`, which the social row now fits because the brand left it; the gutters wait for `xl`, the first breakpoint past the 1192px measure, since earlier they resolve to zero width and still paint their corner marks on the measure's own edges. The slot set is reshaped with it: `social-start` / `social-end` become `social`, `status`, `language`, `brand` and `tagline`. `language` and `status` are separate slots because they swap order between the two Figma variants, and every name is now a single word, so the spec's Slots table carries all of them instead of needing a prose note for the hyphenated keys. This is not a breaking change — the footer landed on this branch and has never been released, so the slots it is replacing have no consumer. The bundle budget for `footer-root` goes 1.1 KB -> 4 KB: the footer now composes `FrameBox` (1.93 KB on its own), which is the design's own frame rather than growth to trim away. * refactor(webkit): draw the footer frame from each box's own edges The gutters draw only the rule they share with the measure (`left` / `right`), the signature keeps just its `top`, and the closing band carries `all` four — so every rule in the footer is drawn once, by the box that owns it, instead of neighbours meeting on the same line. * test(storybook): regenerate linux baselines for the framed-band footer All six modes moved: the brand left the social bar for its own signature band, the bands recombine at md, and the gutters and closing band are new. Only components-layout-footer--default-footer changed — 6 files, no additions or deletions — which is the whole scope of the redesign. * docs(storybook): point the footer's Reddit link at r/aziontech The story used r/azion; the community is r/aziontech. The href feeds both the canvas and the "Show code" snippet from the same const, so the copy a consumer pastes is corrected with it. --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com>

gabriel-lisboa-azion · 2026-08-10T20:28:25Z

Summary

text-heading-* and every text-body-* step drop from weight 400 to 300, and the body steps tighten from 1.5 to 1.375 leading; text-tag-* drops from 600 to 400. The four body steps plus text-body-xxs now emit a --text-*-font-weight custom property they previously lacked, so the utilities set a weight instead of inheriting one.
Message kept its icon on the root's items-center row, so wrapped copy dragged the icon to the vertical middle of the block. The icon and the copy now share an items-start block, with the icon on an alignment box the height of the copy's line box (h-5.25 medium / h-4.5 small).
packages/theme/dist/v4/* and packages/webkit/catalog.json are regenerated from the token sources.

How to test

pnpm --filter @aziontech/webkit test -- src/components/feedback/message/message.test.ts → 33 passing.
pnpm storybook:dev, open Components/Feedback/Message. Widen the label until it wraps to two lines at both small and medium: the icon stays beside the first line instead of drifting to the middle. Measured line boxes are 21px (medium, text-label-md) and 18px (small, text-label-sm), matching the alignment box.
In the same Storybook, check Foundations/Typography: headings and body copy render at 300, tags at 400, and body steps sit on 1.375 leading.
cd packages/theme && node src/scripts/build-tokens.mjs then git diff --exit-code packages/theme/dist → no drift. Same for pnpm --filter @aziontech/webkit run catalog:check.

Notes

Not breaking: no token is renamed or removed. The added --text-body-*-font-weight properties are new surface, hence the feat type.
The typography change alters rendered weight system-wide, so the visual-regression baselines will need regenerating once CI reports the diff — baselines are CI-only.

Headings (2xl → xxs) and every body step now render at 300 instead of 400, and the body steps tighten from 1.5 to 1.375 leading. The four `text-body-*` steps plus `text-body-xxs` gain a `--text-*-font-weight` custom property that did not exist before, so the utilities emit a weight rather than inheriting one. Tag steps drop from 600 to 400. `text-body-xxs` moves next to its siblings so the generated block reads in order; `dist/v4` and the webkit token catalog are regenerated.

The icon and the copy were siblings of the root's `items-center` row, so a message whose text wrapped to two or more lines drifted the icon to the vertical middle of the block instead of leaving it beside the first line. The icon and the copy now share an `items-start` block, and the icon rides an alignment box the height of the copy's line box — `h-5.25` (21px) at medium, `h-4.5` (18px) at small — so it centers on the first line and stays there at any wrap depth.

…e and Message icon alignment

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--variants--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--muted.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-icon-media.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--light-tablet.png

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement.png

…lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* feat(theme): add semantic/layouts — the container system Ten tokens and nine `@utility` classes: how far content sits from the app chrome (BOUNDARY), how far things sit from each other (RHYTHM), and how wide a reading column may get (MEASURE). A DERIVED group: every token is a var() reference to --spacing-* / --container-*, never a literal length. That is why none carries a breakpoint map — the spacing scale is already fluid and var() is substituted at use time on the element, so a layout token follows the override for free. Duplicating the scale into layout would only let the two drift. Emitting them as `@utility` rather than `@layer components` is what gives them variants (`md:layout-column`), the same reason the typography utilities are emitted that way. Generalizes the utility emitter into emitUtilities(map) with a thin emitLayoutUtilities caller, so the shape is reusable. Regenerating dist also picks up one line main was stale on: an emitted comment that still read `bg-[var(--x)]` where the source has said `bg-(--x)` since ENG-47001. * chore(webkit): regenerate the catalog for the layout tokens The catalog's token allowlists are scraped from the built theme, so adding semantic/layouts adds ten --layout-* entries. Regenerated rather than hand-edited, which is what catalog:check verifies. * test(storybook): regenerate the avatar dark-desktop baseline for the lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: Isaque Böck <isaque.santos@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Brings the three commits demo lacked, so the deployed sample exercises them alongside the four fixes carved out of this branch (#899–#902), whose content was already here: - feat(webkit): chip's three kinds (#883) - feat(theme): the semantic/layouts container system (#884) - feat(theme): lightened heading and body type (#876) Conflict resolutions worth knowing: `build-tokens.mjs` — main has no illustration tokens, so main's side of all six hunks was empty. Taking it would have silently deleted this branch's illustration wiring; ours was kept. The merge then produced a DUPLICATE `emitUtilities` and `emitLayoutUtilities` with no conflict at all (both sides had added an identical helper in different places), which is a syntax error the merge itself reported as clean — the second copy is removed and `emitIllustrationUtilities` reuses the first. `texts.data.js` — the five conflicts were all `text-body-*` weight, resolved to main's `light` since that is the change being previewed. Resolved in place rather than with `--theirs`, which would have discarded the file's auto-merged hunks. Entry count held at 144. `.size-limit.json` — union, not a side: main's `chip` plus this branch's `footer-root` and `resizable-panel-root`. `dist/v4/globals.*` are generated, so they were rebuilt from the merged sources rather than hand-merged. The 466 conflicting visual baselines took main's copies; neither side is valid for a merged tree, and this branch opens no PR the visual gate guards. Verified after: no `undefined` in the built CSS, illustration tokens still emitted, main's layout utilities present, body weights now 300, no token data file lost entries, and 154 tests pass across toast, table, sidebar, resizable-panel and chip.

…pe scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved.

* feat(webkit): [ENG-47357] add footer composition component * test(storybook): regenerate linux baselines for the footer story * fix(webkit): [ENG-47357] address footer code review findings - token the social-bar border-top width (--border-width-default) instead of the implicit 1px - add active and visited states to Footer.Link per the Design task's state scope - add a size-limit budget for footer-root - cover both single-slot branches of the social bar's conditional render * test(storybook): regenerate linux baselines for the footer border/link-state fix * fix(webkit): [ENG-47357] match footer anatomy to the Figma Default frame - add the column divider borders and fix the social-bar border token (--border-default, not --border-muted), per node 5467:1642 - remove the outer columns padding/gap in favor of per-column padding, matching Figma's flex-1 + 0 column-gap layout - fix the social-bar right-cluster gap (status <-> language) to --spacing-lg, and lock the bar to h-14 at md+ - enrich the story: all 7 social icons, the language Select (with an explicit aria-label so the combobox has an accessible name distinct from its displayed value), matching the frame's anatomy * test(storybook): regenerate linux baselines for the Figma-parity fixes * fix(webkit): [ENG-47357] scope divider borders to the correct side border-(length:--border-width-default) sets width on ALL FOUR sides, not just the paired border-r/border-t. Combined with border-r/border-t, every column and the social bar picked up unwanted left/top/bottom borders too — visible as a doubled line at each column seam and an inconsistent right edge. Switched to the per-side border-r-(length:...) / border-t-(length:...) form already used in panel-header.vue / table-row.vue, with border-0 to zero every side first. * test(storybook): regenerate linux baselines for the divider-border fix * test(webkit): correct the footer axe comment — this env is unstyled The suite loads no theme CSS and runs no Tailwind (src/test/setup.ts), so axe here checks semantics only. The comment claimed a styled tree, which reads as though contrast were covered; contrast lives in Storybook + visual regression. * test(storybook): regenerate footer linux baselines for the lighter type scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved. * feat(webkit): rebuild the footer on the framed-band design The Figma set (5467:1638) moved the brand out of the social bar into its own framed signature band beside a tagline, and wrapped the footer in page material: two hatched gutters flanking the measure and a hatched band closing it below. The four bands are cells of ONE grid, so each stays a single element in a single place in the DOM while their order changes — `order-*` when stacked, explicit row/column placement from `md` — instead of a desktop-only wrapper row that would duplicate the consumer's slot content. Three breakpoints, each for its own reason: the column grid folds below `md`; the bands recombine at `md`, which the social row now fits because the brand left it; the gutters wait for `xl`, the first breakpoint past the 1192px measure, since earlier they resolve to zero width and still paint their corner marks on the measure's own edges. The slot set is reshaped with it: `social-start` / `social-end` become `social`, `status`, `language`, `brand` and `tagline`. `language` and `status` are separate slots because they swap order between the two Figma variants, and every name is now a single word, so the spec's Slots table carries all of them instead of needing a prose note for the hyphenated keys. This is not a breaking change — the footer landed on this branch and has never been released, so the slots it is replacing have no consumer. The bundle budget for `footer-root` goes 1.1 KB -> 4 KB: the footer now composes `FrameBox` (1.93 KB on its own), which is the design's own frame rather than growth to trim away. * refactor(webkit): draw the footer frame from each box's own edges The gutters draw only the rule they share with the measure (`left` / `right`), the signature keeps just its `top`, and the closing band carries `all` four — so every rule in the footer is drawn once, by the box that owns it, instead of neighbours meeting on the same line. * test(storybook): regenerate linux baselines for the framed-band footer All six modes moved: the brand left the social bar for its own signature band, the bands recombine at md, and the gutters and closing band are new. Only components-layout-footer--default-footer changed — 6 files, no additions or deletions — which is the whole scope of the redesign. * docs(storybook): point the footer's Reddit link at r/aziontech The story used r/azion; the community is r/aziontech. The href feeds both the canvas and the "Show code" snippet from the same const, so the copy a consumer pastes is corrected with it. --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com>

gabriel-lisboa-azion · 2026-08-10T20:28:25Z

Summary

text-heading-* and every text-body-* step drop from weight 400 to 300, and the body steps tighten from 1.5 to 1.375 leading; text-tag-* drops from 600 to 400. The four body steps plus text-body-xxs now emit a --text-*-font-weight custom property they previously lacked, so the utilities set a weight instead of inheriting one.
Message kept its icon on the root's items-center row, so wrapped copy dragged the icon to the vertical middle of the block. The icon and the copy now share an items-start block, with the icon on an alignment box the height of the copy's line box (h-5.25 medium / h-4.5 small).
packages/theme/dist/v4/* and packages/webkit/catalog.json are regenerated from the token sources.

How to test

pnpm --filter @aziontech/webkit test -- src/components/feedback/message/message.test.ts → 33 passing.
pnpm storybook:dev, open Components/Feedback/Message. Widen the label until it wraps to two lines at both small and medium: the icon stays beside the first line instead of drifting to the middle. Measured line boxes are 21px (medium, text-label-md) and 18px (small, text-label-sm), matching the alignment box.
In the same Storybook, check Foundations/Typography: headings and body copy render at 300, tags at 400, and body steps sit on 1.375 leading.
cd packages/theme && node src/scripts/build-tokens.mjs then git diff --exit-code packages/theme/dist → no drift. Same for pnpm --filter @aziontech/webkit run catalog:check.

Notes

Not breaking: no token is renamed or removed. The added --text-body-*-font-weight properties are new surface, hence the feat type.
The typography change alters rendered weight system-wide, so the visual-regression baselines will need regenerating once CI reports the diff — baselines are CI-only.

Headings (2xl → xxs) and every body step now render at 300 instead of 400, and the body steps tighten from 1.5 to 1.375 leading. The four `text-body-*` steps plus `text-body-xxs` gain a `--text-*-font-weight` custom property that did not exist before, so the utilities emit a weight rather than inheriting one. Tag steps drop from 600 to 400. `text-body-xxs` moves next to its siblings so the generated block reads in order; `dist/v4` and the webkit token catalog are regenerated.

The icon and the copy were siblings of the root's `items-center` row, so a message whose text wrapped to two or more lines drifted the icon to the vertical middle of the block instead of leaving it beside the first line. The icon and the copy now share an `items-start` block, and the icon rides an alignment box the height of the copy's line box — `h-5.25` (21px) at medium, `h-4.5` (18px) at small — so it centers on the first line and stays there at any wrap depth.

…e and Message icon alignment

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--variants--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--muted.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-icon-media.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--light-tablet.png

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement.png

…lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* feat(theme): add semantic/layouts — the container system Ten tokens and nine `@utility` classes: how far content sits from the app chrome (BOUNDARY), how far things sit from each other (RHYTHM), and how wide a reading column may get (MEASURE). A DERIVED group: every token is a var() reference to --spacing-* / --container-*, never a literal length. That is why none carries a breakpoint map — the spacing scale is already fluid and var() is substituted at use time on the element, so a layout token follows the override for free. Duplicating the scale into layout would only let the two drift. Emitting them as `@utility` rather than `@layer components` is what gives them variants (`md:layout-column`), the same reason the typography utilities are emitted that way. Generalizes the utility emitter into emitUtilities(map) with a thin emitLayoutUtilities caller, so the shape is reusable. Regenerating dist also picks up one line main was stale on: an emitted comment that still read `bg-[var(--x)]` where the source has said `bg-(--x)` since ENG-47001. * chore(webkit): regenerate the catalog for the layout tokens The catalog's token allowlists are scraped from the built theme, so adding semantic/layouts adds ten --layout-* entries. Regenerated rather than hand-edited, which is what catalog:check verifies. * test(storybook): regenerate the avatar dark-desktop baseline for the lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: Isaque Böck <isaque.santos@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Brings the three commits demo lacked, so the deployed sample exercises them alongside the four fixes carved out of this branch (#899–#902), whose content was already here: - feat(webkit): chip's three kinds (#883) - feat(theme): the semantic/layouts container system (#884) - feat(theme): lightened heading and body type (#876) Conflict resolutions worth knowing: `build-tokens.mjs` — main has no illustration tokens, so main's side of all six hunks was empty. Taking it would have silently deleted this branch's illustration wiring; ours was kept. The merge then produced a DUPLICATE `emitUtilities` and `emitLayoutUtilities` with no conflict at all (both sides had added an identical helper in different places), which is a syntax error the merge itself reported as clean — the second copy is removed and `emitIllustrationUtilities` reuses the first. `texts.data.js` — the five conflicts were all `text-body-*` weight, resolved to main's `light` since that is the change being previewed. Resolved in place rather than with `--theirs`, which would have discarded the file's auto-merged hunks. Entry count held at 144. `.size-limit.json` — union, not a side: main's `chip` plus this branch's `footer-root` and `resizable-panel-root`. `dist/v4/globals.*` are generated, so they were rebuilt from the merged sources rather than hand-merged. The 466 conflicting visual baselines took main's copies; neither side is valid for a merged tree, and this branch opens no PR the visual gate guards. Verified after: no `undefined` in the built CSS, illustration tokens still emitted, main's layout utilities present, body weights now 300, no token data file lost entries, and 154 tests pass across toast, table, sidebar, resizable-panel and chip.

…pe scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved.

* feat(webkit): [ENG-47357] add footer composition component * test(storybook): regenerate linux baselines for the footer story * fix(webkit): [ENG-47357] address footer code review findings - token the social-bar border-top width (--border-width-default) instead of the implicit 1px - add active and visited states to Footer.Link per the Design task's state scope - add a size-limit budget for footer-root - cover both single-slot branches of the social bar's conditional render * test(storybook): regenerate linux baselines for the footer border/link-state fix * fix(webkit): [ENG-47357] match footer anatomy to the Figma Default frame - add the column divider borders and fix the social-bar border token (--border-default, not --border-muted), per node 5467:1642 - remove the outer columns padding/gap in favor of per-column padding, matching Figma's flex-1 + 0 column-gap layout - fix the social-bar right-cluster gap (status <-> language) to --spacing-lg, and lock the bar to h-14 at md+ - enrich the story: all 7 social icons, the language Select (with an explicit aria-label so the combobox has an accessible name distinct from its displayed value), matching the frame's anatomy * test(storybook): regenerate linux baselines for the Figma-parity fixes * fix(webkit): [ENG-47357] scope divider borders to the correct side border-(length:--border-width-default) sets width on ALL FOUR sides, not just the paired border-r/border-t. Combined with border-r/border-t, every column and the social bar picked up unwanted left/top/bottom borders too — visible as a doubled line at each column seam and an inconsistent right edge. Switched to the per-side border-r-(length:...) / border-t-(length:...) form already used in panel-header.vue / table-row.vue, with border-0 to zero every side first. * test(storybook): regenerate linux baselines for the divider-border fix * test(webkit): correct the footer axe comment — this env is unstyled The suite loads no theme CSS and runs no Tailwind (src/test/setup.ts), so axe here checks semantics only. The comment claimed a styled tree, which reads as though contrast were covered; contrast lives in Storybook + visual regression. * test(storybook): regenerate footer linux baselines for the lighter type scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved. * feat(webkit): rebuild the footer on the framed-band design The Figma set (5467:1638) moved the brand out of the social bar into its own framed signature band beside a tagline, and wrapped the footer in page material: two hatched gutters flanking the measure and a hatched band closing it below. The four bands are cells of ONE grid, so each stays a single element in a single place in the DOM while their order changes — `order-*` when stacked, explicit row/column placement from `md` — instead of a desktop-only wrapper row that would duplicate the consumer's slot content. Three breakpoints, each for its own reason: the column grid folds below `md`; the bands recombine at `md`, which the social row now fits because the brand left it; the gutters wait for `xl`, the first breakpoint past the 1192px measure, since earlier they resolve to zero width and still paint their corner marks on the measure's own edges. The slot set is reshaped with it: `social-start` / `social-end` become `social`, `status`, `language`, `brand` and `tagline`. `language` and `status` are separate slots because they swap order between the two Figma variants, and every name is now a single word, so the spec's Slots table carries all of them instead of needing a prose note for the hyphenated keys. This is not a breaking change — the footer landed on this branch and has never been released, so the slots it is replacing have no consumer. The bundle budget for `footer-root` goes 1.1 KB -> 4 KB: the footer now composes `FrameBox` (1.93 KB on its own), which is the design's own frame rather than growth to trim away. * refactor(webkit): draw the footer frame from each box's own edges The gutters draw only the rule they share with the measure (`left` / `right`), the signature keeps just its `top`, and the closing band carries `all` four — so every rule in the footer is drawn once, by the box that owns it, instead of neighbours meeting on the same line. * test(storybook): regenerate linux baselines for the framed-band footer All six modes moved: the brand left the social bar for its own signature band, the bands recombine at md, and the gutters and closing band are new. Only components-layout-footer--default-footer changed — 6 files, no additions or deletions — which is the whole scope of the redesign. * docs(storybook): point the footer's Reddit link at r/aziontech The story used r/azion; the community is r/aziontech. The href feeds both the canvas and the "Show code" snippet from the same const, so the copy a consumer pastes is corrected with it. --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com>

gabriel-lisboa-azion · 2026-08-10T20:28:25Z

Summary

text-heading-* and every text-body-* step drop from weight 400 to 300, and the body steps tighten from 1.5 to 1.375 leading; text-tag-* drops from 600 to 400. The four body steps plus text-body-xxs now emit a --text-*-font-weight custom property they previously lacked, so the utilities set a weight instead of inheriting one.
Message kept its icon on the root's items-center row, so wrapped copy dragged the icon to the vertical middle of the block. The icon and the copy now share an items-start block, with the icon on an alignment box the height of the copy's line box (h-5.25 medium / h-4.5 small).
packages/theme/dist/v4/* and packages/webkit/catalog.json are regenerated from the token sources.

How to test

pnpm --filter @aziontech/webkit test -- src/components/feedback/message/message.test.ts → 33 passing.
pnpm storybook:dev, open Components/Feedback/Message. Widen the label until it wraps to two lines at both small and medium: the icon stays beside the first line instead of drifting to the middle. Measured line boxes are 21px (medium, text-label-md) and 18px (small, text-label-sm), matching the alignment box.
In the same Storybook, check Foundations/Typography: headings and body copy render at 300, tags at 400, and body steps sit on 1.375 leading.
cd packages/theme && node src/scripts/build-tokens.mjs then git diff --exit-code packages/theme/dist → no drift. Same for pnpm --filter @aziontech/webkit run catalog:check.

Notes

Not breaking: no token is renamed or removed. The added --text-body-*-font-weight properties are new surface, hence the feat type.
The typography change alters rendered weight system-wide, so the visual-regression baselines will need regenerating once CI reports the diff — baselines are CI-only.

Headings (2xl → xxs) and every body step now render at 300 instead of 400, and the body steps tighten from 1.5 to 1.375 leading. The four `text-body-*` steps plus `text-body-xxs` gain a `--text-*-font-weight` custom property that did not exist before, so the utilities emit a weight rather than inheriting one. Tag steps drop from 600 to 400. `text-body-xxs` moves next to its siblings so the generated block reads in order; `dist/v4` and the webkit token catalog are regenerated.

The icon and the copy were siblings of the root's `items-center` row, so a message whose text wrapped to two or more lines drifted the icon to the vertical middle of the block instead of leaving it beside the first line. The icon and the copy now share an `items-start` block, and the icon rides an alignment box the height of the copy's line box — `h-5.25` (21px) at medium, `h-4.5` (18px) at small — so it centers on the first line and stays there at any wrap depth.

…e and Message icon alignment

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--variants--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--muted.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-icon-media.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--light-tablet.png

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement.png

…lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* feat(theme): add semantic/layouts — the container system Ten tokens and nine `@utility` classes: how far content sits from the app chrome (BOUNDARY), how far things sit from each other (RHYTHM), and how wide a reading column may get (MEASURE). A DERIVED group: every token is a var() reference to --spacing-* / --container-*, never a literal length. That is why none carries a breakpoint map — the spacing scale is already fluid and var() is substituted at use time on the element, so a layout token follows the override for free. Duplicating the scale into layout would only let the two drift. Emitting them as `@utility` rather than `@layer components` is what gives them variants (`md:layout-column`), the same reason the typography utilities are emitted that way. Generalizes the utility emitter into emitUtilities(map) with a thin emitLayoutUtilities caller, so the shape is reusable. Regenerating dist also picks up one line main was stale on: an emitted comment that still read `bg-[var(--x)]` where the source has said `bg-(--x)` since ENG-47001. * chore(webkit): regenerate the catalog for the layout tokens The catalog's token allowlists are scraped from the built theme, so adding semantic/layouts adds ten --layout-* entries. Regenerated rather than hand-edited, which is what catalog:check verifies. * test(storybook): regenerate the avatar dark-desktop baseline for the lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: Isaque Böck <isaque.santos@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Brings the three commits demo lacked, so the deployed sample exercises them alongside the four fixes carved out of this branch (#899–#902), whose content was already here: - feat(webkit): chip's three kinds (#883) - feat(theme): the semantic/layouts container system (#884) - feat(theme): lightened heading and body type (#876) Conflict resolutions worth knowing: `build-tokens.mjs` — main has no illustration tokens, so main's side of all six hunks was empty. Taking it would have silently deleted this branch's illustration wiring; ours was kept. The merge then produced a DUPLICATE `emitUtilities` and `emitLayoutUtilities` with no conflict at all (both sides had added an identical helper in different places), which is a syntax error the merge itself reported as clean — the second copy is removed and `emitIllustrationUtilities` reuses the first. `texts.data.js` — the five conflicts were all `text-body-*` weight, resolved to main's `light` since that is the change being previewed. Resolved in place rather than with `--theirs`, which would have discarded the file's auto-merged hunks. Entry count held at 144. `.size-limit.json` — union, not a side: main's `chip` plus this branch's `footer-root` and `resizable-panel-root`. `dist/v4/globals.*` are generated, so they were rebuilt from the merged sources rather than hand-merged. The 466 conflicting visual baselines took main's copies; neither side is valid for a merged tree, and this branch opens no PR the visual gate guards. Verified after: no `undefined` in the built CSS, illustration tokens still emitted, main's layout utilities present, body weights now 300, no token data file lost entries, and 154 tests pass across toast, table, sidebar, resizable-panel and chip.

…pe scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved.

* feat(webkit): [ENG-47357] add footer composition component * test(storybook): regenerate linux baselines for the footer story * fix(webkit): [ENG-47357] address footer code review findings - token the social-bar border-top width (--border-width-default) instead of the implicit 1px - add active and visited states to Footer.Link per the Design task's state scope - add a size-limit budget for footer-root - cover both single-slot branches of the social bar's conditional render * test(storybook): regenerate linux baselines for the footer border/link-state fix * fix(webkit): [ENG-47357] match footer anatomy to the Figma Default frame - add the column divider borders and fix the social-bar border token (--border-default, not --border-muted), per node 5467:1642 - remove the outer columns padding/gap in favor of per-column padding, matching Figma's flex-1 + 0 column-gap layout - fix the social-bar right-cluster gap (status <-> language) to --spacing-lg, and lock the bar to h-14 at md+ - enrich the story: all 7 social icons, the language Select (with an explicit aria-label so the combobox has an accessible name distinct from its displayed value), matching the frame's anatomy * test(storybook): regenerate linux baselines for the Figma-parity fixes * fix(webkit): [ENG-47357] scope divider borders to the correct side border-(length:--border-width-default) sets width on ALL FOUR sides, not just the paired border-r/border-t. Combined with border-r/border-t, every column and the social bar picked up unwanted left/top/bottom borders too — visible as a doubled line at each column seam and an inconsistent right edge. Switched to the per-side border-r-(length:...) / border-t-(length:...) form already used in panel-header.vue / table-row.vue, with border-0 to zero every side first. * test(storybook): regenerate linux baselines for the divider-border fix * test(webkit): correct the footer axe comment — this env is unstyled The suite loads no theme CSS and runs no Tailwind (src/test/setup.ts), so axe here checks semantics only. The comment claimed a styled tree, which reads as though contrast were covered; contrast lives in Storybook + visual regression. * test(storybook): regenerate footer linux baselines for the lighter type scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved. * feat(webkit): rebuild the footer on the framed-band design The Figma set (5467:1638) moved the brand out of the social bar into its own framed signature band beside a tagline, and wrapped the footer in page material: two hatched gutters flanking the measure and a hatched band closing it below. The four bands are cells of ONE grid, so each stays a single element in a single place in the DOM while their order changes — `order-*` when stacked, explicit row/column placement from `md` — instead of a desktop-only wrapper row that would duplicate the consumer's slot content. Three breakpoints, each for its own reason: the column grid folds below `md`; the bands recombine at `md`, which the social row now fits because the brand left it; the gutters wait for `xl`, the first breakpoint past the 1192px measure, since earlier they resolve to zero width and still paint their corner marks on the measure's own edges. The slot set is reshaped with it: `social-start` / `social-end` become `social`, `status`, `language`, `brand` and `tagline`. `language` and `status` are separate slots because they swap order between the two Figma variants, and every name is now a single word, so the spec's Slots table carries all of them instead of needing a prose note for the hyphenated keys. This is not a breaking change — the footer landed on this branch and has never been released, so the slots it is replacing have no consumer. The bundle budget for `footer-root` goes 1.1 KB -> 4 KB: the footer now composes `FrameBox` (1.93 KB on its own), which is the design's own frame rather than growth to trim away. * refactor(webkit): draw the footer frame from each box's own edges The gutters draw only the rule they share with the measure (`left` / `right`), the signature keeps just its `top`, and the closing band carries `all` four — so every rule in the footer is drawn once, by the box that owns it, instead of neighbours meeting on the same line. * test(storybook): regenerate linux baselines for the framed-band footer All six modes moved: the brand left the social bar for its own signature band, the bands recombine at md, and the gutters and closing band are new. Only components-layout-footer--default-footer changed — 6 files, no additions or deletions — which is the whole scope of the redesign. * docs(storybook): point the footer's Reddit link at r/aziontech The story used r/azion; the community is r/aziontech. The href feeds both the canvas and the "Show code" snippet from the same const, so the copy a consumer pastes is corrected with it. --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com>

gabriel-lisboa-azion · 2026-08-10T20:28:25Z

Summary

text-heading-* and every text-body-* step drop from weight 400 to 300, and the body steps tighten from 1.5 to 1.375 leading; text-tag-* drops from 600 to 400. The four body steps plus text-body-xxs now emit a --text-*-font-weight custom property they previously lacked, so the utilities set a weight instead of inheriting one.
Message kept its icon on the root's items-center row, so wrapped copy dragged the icon to the vertical middle of the block. The icon and the copy now share an items-start block, with the icon on an alignment box the height of the copy's line box (h-5.25 medium / h-4.5 small).
packages/theme/dist/v4/* and packages/webkit/catalog.json are regenerated from the token sources.

How to test

pnpm --filter @aziontech/webkit test -- src/components/feedback/message/message.test.ts → 33 passing.
pnpm storybook:dev, open Components/Feedback/Message. Widen the label until it wraps to two lines at both small and medium: the icon stays beside the first line instead of drifting to the middle. Measured line boxes are 21px (medium, text-label-md) and 18px (small, text-label-sm), matching the alignment box.
In the same Storybook, check Foundations/Typography: headings and body copy render at 300, tags at 400, and body steps sit on 1.375 leading.
cd packages/theme && node src/scripts/build-tokens.mjs then git diff --exit-code packages/theme/dist → no drift. Same for pnpm --filter @aziontech/webkit run catalog:check.

Notes

Not breaking: no token is renamed or removed. The added --text-body-*-font-weight properties are new surface, hence the feat type.
The typography change alters rendered weight system-wide, so the visual-regression baselines will need regenerating once CI reports the diff — baselines are CI-only.

Headings (2xl → xxs) and every body step now render at 300 instead of 400, and the body steps tighten from 1.5 to 1.375 leading. The four `text-body-*` steps plus `text-body-xxs` gain a `--text-*-font-weight` custom property that did not exist before, so the utilities emit a weight rather than inheriting one. Tag steps drop from 600 to 400. `text-body-xxs` moves next to its siblings so the generated block reads in order; `dist/v4` and the webkit token catalog are regenerated.

The icon and the copy were siblings of the root's `items-center` row, so a message whose text wrapped to two or more lines drifted the icon to the vertical middle of the block instead of leaving it beside the first line. The icon and the copy now share an `items-start` block, and the icon rides an alignment box the height of the copy's line box — `h-5.25` (21px) at medium, `h-4.5` (18px) at small — so it centers on the first line and stays there at any wrap depth.

…e and Message icon alignment

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--variants--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--muted.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-icon-media.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--light-tablet.png

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement.png

…lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* feat(theme): add semantic/layouts — the container system Ten tokens and nine `@utility` classes: how far content sits from the app chrome (BOUNDARY), how far things sit from each other (RHYTHM), and how wide a reading column may get (MEASURE). A DERIVED group: every token is a var() reference to --spacing-* / --container-*, never a literal length. That is why none carries a breakpoint map — the spacing scale is already fluid and var() is substituted at use time on the element, so a layout token follows the override for free. Duplicating the scale into layout would only let the two drift. Emitting them as `@utility` rather than `@layer components` is what gives them variants (`md:layout-column`), the same reason the typography utilities are emitted that way. Generalizes the utility emitter into emitUtilities(map) with a thin emitLayoutUtilities caller, so the shape is reusable. Regenerating dist also picks up one line main was stale on: an emitted comment that still read `bg-[var(--x)]` where the source has said `bg-(--x)` since ENG-47001. * chore(webkit): regenerate the catalog for the layout tokens The catalog's token allowlists are scraped from the built theme, so adding semantic/layouts adds ten --layout-* entries. Regenerated rather than hand-edited, which is what catalog:check verifies. * test(storybook): regenerate the avatar dark-desktop baseline for the lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: Isaque Böck <isaque.santos@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Brings the three commits demo lacked, so the deployed sample exercises them alongside the four fixes carved out of this branch (#899–#902), whose content was already here: - feat(webkit): chip's three kinds (#883) - feat(theme): the semantic/layouts container system (#884) - feat(theme): lightened heading and body type (#876) Conflict resolutions worth knowing: `build-tokens.mjs` — main has no illustration tokens, so main's side of all six hunks was empty. Taking it would have silently deleted this branch's illustration wiring; ours was kept. The merge then produced a DUPLICATE `emitUtilities` and `emitLayoutUtilities` with no conflict at all (both sides had added an identical helper in different places), which is a syntax error the merge itself reported as clean — the second copy is removed and `emitIllustrationUtilities` reuses the first. `texts.data.js` — the five conflicts were all `text-body-*` weight, resolved to main's `light` since that is the change being previewed. Resolved in place rather than with `--theirs`, which would have discarded the file's auto-merged hunks. Entry count held at 144. `.size-limit.json` — union, not a side: main's `chip` plus this branch's `footer-root` and `resizable-panel-root`. `dist/v4/globals.*` are generated, so they were rebuilt from the merged sources rather than hand-merged. The 466 conflicting visual baselines took main's copies; neither side is valid for a merged tree, and this branch opens no PR the visual gate guards. Verified after: no `undefined` in the built CSS, illustration tokens still emitted, main's layout utilities present, body weights now 300, no token data file lost entries, and 154 tests pass across toast, table, sidebar, resizable-panel and chip.

…pe scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved.

* feat(webkit): [ENG-47357] add footer composition component * test(storybook): regenerate linux baselines for the footer story * fix(webkit): [ENG-47357] address footer code review findings - token the social-bar border-top width (--border-width-default) instead of the implicit 1px - add active and visited states to Footer.Link per the Design task's state scope - add a size-limit budget for footer-root - cover both single-slot branches of the social bar's conditional render * test(storybook): regenerate linux baselines for the footer border/link-state fix * fix(webkit): [ENG-47357] match footer anatomy to the Figma Default frame - add the column divider borders and fix the social-bar border token (--border-default, not --border-muted), per node 5467:1642 - remove the outer columns padding/gap in favor of per-column padding, matching Figma's flex-1 + 0 column-gap layout - fix the social-bar right-cluster gap (status <-> language) to --spacing-lg, and lock the bar to h-14 at md+ - enrich the story: all 7 social icons, the language Select (with an explicit aria-label so the combobox has an accessible name distinct from its displayed value), matching the frame's anatomy * test(storybook): regenerate linux baselines for the Figma-parity fixes * fix(webkit): [ENG-47357] scope divider borders to the correct side border-(length:--border-width-default) sets width on ALL FOUR sides, not just the paired border-r/border-t. Combined with border-r/border-t, every column and the social bar picked up unwanted left/top/bottom borders too — visible as a doubled line at each column seam and an inconsistent right edge. Switched to the per-side border-r-(length:...) / border-t-(length:...) form already used in panel-header.vue / table-row.vue, with border-0 to zero every side first. * test(storybook): regenerate linux baselines for the divider-border fix * test(webkit): correct the footer axe comment — this env is unstyled The suite loads no theme CSS and runs no Tailwind (src/test/setup.ts), so axe here checks semantics only. The comment claimed a styled tree, which reads as though contrast were covered; contrast lives in Storybook + visual regression. * test(storybook): regenerate footer linux baselines for the lighter type scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved. * feat(webkit): rebuild the footer on the framed-band design The Figma set (5467:1638) moved the brand out of the social bar into its own framed signature band beside a tagline, and wrapped the footer in page material: two hatched gutters flanking the measure and a hatched band closing it below. The four bands are cells of ONE grid, so each stays a single element in a single place in the DOM while their order changes — `order-*` when stacked, explicit row/column placement from `md` — instead of a desktop-only wrapper row that would duplicate the consumer's slot content. Three breakpoints, each for its own reason: the column grid folds below `md`; the bands recombine at `md`, which the social row now fits because the brand left it; the gutters wait for `xl`, the first breakpoint past the 1192px measure, since earlier they resolve to zero width and still paint their corner marks on the measure's own edges. The slot set is reshaped with it: `social-start` / `social-end` become `social`, `status`, `language`, `brand` and `tagline`. `language` and `status` are separate slots because they swap order between the two Figma variants, and every name is now a single word, so the spec's Slots table carries all of them instead of needing a prose note for the hyphenated keys. This is not a breaking change — the footer landed on this branch and has never been released, so the slots it is replacing have no consumer. The bundle budget for `footer-root` goes 1.1 KB -> 4 KB: the footer now composes `FrameBox` (1.93 KB on its own), which is the design's own frame rather than growth to trim away. * refactor(webkit): draw the footer frame from each box's own edges The gutters draw only the rule they share with the measure (`left` / `right`), the signature keeps just its `top`, and the closing band carries `all` four — so every rule in the footer is drawn once, by the box that owns it, instead of neighbours meeting on the same line. * test(storybook): regenerate linux baselines for the framed-band footer All six modes moved: the brand left the social bar for its own signature band, the bands recombine at md, and the gutters and closing band are new. Only components-layout-footer--default-footer changed — 6 files, no additions or deletions — which is the whole scope of the redesign. * docs(storybook): point the footer's Reddit link at r/aziontech The story used r/azion; the community is r/aziontech. The href feeds both the canvas and the "Show code" snippet from the same const, so the copy a consumer pastes is corrected with it. --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com>

gabriel-lisboa-azion · 2026-08-10T20:28:25Z

Summary

text-heading-* and every text-body-* step drop from weight 400 to 300, and the body steps tighten from 1.5 to 1.375 leading; text-tag-* drops from 600 to 400. The four body steps plus text-body-xxs now emit a --text-*-font-weight custom property they previously lacked, so the utilities set a weight instead of inheriting one.
Message kept its icon on the root's items-center row, so wrapped copy dragged the icon to the vertical middle of the block. The icon and the copy now share an items-start block, with the icon on an alignment box the height of the copy's line box (h-5.25 medium / h-4.5 small).
packages/theme/dist/v4/* and packages/webkit/catalog.json are regenerated from the token sources.

How to test

pnpm --filter @aziontech/webkit test -- src/components/feedback/message/message.test.ts → 33 passing.
pnpm storybook:dev, open Components/Feedback/Message. Widen the label until it wraps to two lines at both small and medium: the icon stays beside the first line instead of drifting to the middle. Measured line boxes are 21px (medium, text-label-md) and 18px (small, text-label-sm), matching the alignment box.
In the same Storybook, check Foundations/Typography: headings and body copy render at 300, tags at 400, and body steps sit on 1.375 leading.
cd packages/theme && node src/scripts/build-tokens.mjs then git diff --exit-code packages/theme/dist → no drift. Same for pnpm --filter @aziontech/webkit run catalog:check.

Notes

Not breaking: no token is renamed or removed. The added --text-body-*-font-weight properties are new surface, hence the feat type.
The typography change alters rendered weight system-wide, so the visual-regression baselines will need regenerating once CI reports the diff — baselines are CI-only.

Headings (2xl → xxs) and every body step now render at 300 instead of 400, and the body steps tighten from 1.5 to 1.375 leading. The four `text-body-*` steps plus `text-body-xxs` gain a `--text-*-font-weight` custom property that did not exist before, so the utilities emit a weight rather than inheriting one. Tag steps drop from 600 to 400. `text-body-xxs` moves next to its siblings so the generated block reads in order; `dist/v4` and the webkit token catalog are regenerated.

The icon and the copy were siblings of the root's `items-center` row, so a message whose text wrapped to two or more lines drifted the icon to the vertical middle of the block instead of leaving it beside the first line. The icon and the copy now share an `items-start` block, and the icon rides an alignment box the height of the copy's line box — `h-5.25` (21px) at medium, `h-4.5` (18px) at small — so it centers on the first line and stays there at any wrap depth.

…e and Message icon alignment

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--variants--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--muted.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-icon-media.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--light-tablet.png

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement.png

…lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* feat(theme): add semantic/layouts — the container system Ten tokens and nine `@utility` classes: how far content sits from the app chrome (BOUNDARY), how far things sit from each other (RHYTHM), and how wide a reading column may get (MEASURE). A DERIVED group: every token is a var() reference to --spacing-* / --container-*, never a literal length. That is why none carries a breakpoint map — the spacing scale is already fluid and var() is substituted at use time on the element, so a layout token follows the override for free. Duplicating the scale into layout would only let the two drift. Emitting them as `@utility` rather than `@layer components` is what gives them variants (`md:layout-column`), the same reason the typography utilities are emitted that way. Generalizes the utility emitter into emitUtilities(map) with a thin emitLayoutUtilities caller, so the shape is reusable. Regenerating dist also picks up one line main was stale on: an emitted comment that still read `bg-[var(--x)]` where the source has said `bg-(--x)` since ENG-47001. * chore(webkit): regenerate the catalog for the layout tokens The catalog's token allowlists are scraped from the built theme, so adding semantic/layouts adds ten --layout-* entries. Regenerated rather than hand-edited, which is what catalog:check verifies. * test(storybook): regenerate the avatar dark-desktop baseline for the lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: Isaque Böck <isaque.santos@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Brings the three commits demo lacked, so the deployed sample exercises them alongside the four fixes carved out of this branch (#899–#902), whose content was already here: - feat(webkit): chip's three kinds (#883) - feat(theme): the semantic/layouts container system (#884) - feat(theme): lightened heading and body type (#876) Conflict resolutions worth knowing: `build-tokens.mjs` — main has no illustration tokens, so main's side of all six hunks was empty. Taking it would have silently deleted this branch's illustration wiring; ours was kept. The merge then produced a DUPLICATE `emitUtilities` and `emitLayoutUtilities` with no conflict at all (both sides had added an identical helper in different places), which is a syntax error the merge itself reported as clean — the second copy is removed and `emitIllustrationUtilities` reuses the first. `texts.data.js` — the five conflicts were all `text-body-*` weight, resolved to main's `light` since that is the change being previewed. Resolved in place rather than with `--theirs`, which would have discarded the file's auto-merged hunks. Entry count held at 144. `.size-limit.json` — union, not a side: main's `chip` plus this branch's `footer-root` and `resizable-panel-root`. `dist/v4/globals.*` are generated, so they were rebuilt from the merged sources rather than hand-merged. The 466 conflicting visual baselines took main's copies; neither side is valid for a merged tree, and this branch opens no PR the visual gate guards. Verified after: no `undefined` in the built CSS, illustration tokens still emitted, main's layout utilities present, body weights now 300, no token data file lost entries, and 154 tests pass across toast, table, sidebar, resizable-panel and chip.

…pe scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved.

* feat(webkit): [ENG-47357] add footer composition component * test(storybook): regenerate linux baselines for the footer story * fix(webkit): [ENG-47357] address footer code review findings - token the social-bar border-top width (--border-width-default) instead of the implicit 1px - add active and visited states to Footer.Link per the Design task's state scope - add a size-limit budget for footer-root - cover both single-slot branches of the social bar's conditional render * test(storybook): regenerate linux baselines for the footer border/link-state fix * fix(webkit): [ENG-47357] match footer anatomy to the Figma Default frame - add the column divider borders and fix the social-bar border token (--border-default, not --border-muted), per node 5467:1642 - remove the outer columns padding/gap in favor of per-column padding, matching Figma's flex-1 + 0 column-gap layout - fix the social-bar right-cluster gap (status <-> language) to --spacing-lg, and lock the bar to h-14 at md+ - enrich the story: all 7 social icons, the language Select (with an explicit aria-label so the combobox has an accessible name distinct from its displayed value), matching the frame's anatomy * test(storybook): regenerate linux baselines for the Figma-parity fixes * fix(webkit): [ENG-47357] scope divider borders to the correct side border-(length:--border-width-default) sets width on ALL FOUR sides, not just the paired border-r/border-t. Combined with border-r/border-t, every column and the social bar picked up unwanted left/top/bottom borders too — visible as a doubled line at each column seam and an inconsistent right edge. Switched to the per-side border-r-(length:...) / border-t-(length:...) form already used in panel-header.vue / table-row.vue, with border-0 to zero every side first. * test(storybook): regenerate linux baselines for the divider-border fix * test(webkit): correct the footer axe comment — this env is unstyled The suite loads no theme CSS and runs no Tailwind (src/test/setup.ts), so axe here checks semantics only. The comment claimed a styled tree, which reads as though contrast were covered; contrast lives in Storybook + visual regression. * test(storybook): regenerate footer linux baselines for the lighter type scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved. * feat(webkit): rebuild the footer on the framed-band design The Figma set (5467:1638) moved the brand out of the social bar into its own framed signature band beside a tagline, and wrapped the footer in page material: two hatched gutters flanking the measure and a hatched band closing it below. The four bands are cells of ONE grid, so each stays a single element in a single place in the DOM while their order changes — `order-*` when stacked, explicit row/column placement from `md` — instead of a desktop-only wrapper row that would duplicate the consumer's slot content. Three breakpoints, each for its own reason: the column grid folds below `md`; the bands recombine at `md`, which the social row now fits because the brand left it; the gutters wait for `xl`, the first breakpoint past the 1192px measure, since earlier they resolve to zero width and still paint their corner marks on the measure's own edges. The slot set is reshaped with it: `social-start` / `social-end` become `social`, `status`, `language`, `brand` and `tagline`. `language` and `status` are separate slots because they swap order between the two Figma variants, and every name is now a single word, so the spec's Slots table carries all of them instead of needing a prose note for the hyphenated keys. This is not a breaking change — the footer landed on this branch and has never been released, so the slots it is replacing have no consumer. The bundle budget for `footer-root` goes 1.1 KB -> 4 KB: the footer now composes `FrameBox` (1.93 KB on its own), which is the design's own frame rather than growth to trim away. * refactor(webkit): draw the footer frame from each box's own edges The gutters draw only the rule they share with the measure (`left` / `right`), the signature keeps just its `top`, and the closing band carries `all` four — so every rule in the footer is drawn once, by the box that owns it, instead of neighbours meeting on the same line. * test(storybook): regenerate linux baselines for the framed-band footer All six modes moved: the brand left the social bar for its own signature band, the bands recombine at md, and the gutters and closing band are new. Only components-layout-footer--default-footer changed — 6 files, no additions or deletions — which is the whole scope of the redesign. * docs(storybook): point the footer's Reddit link at r/aziontech The story used r/azion; the community is r/aziontech. The href feeds both the canvas and the "Show code" snippet from the same const, so the copy a consumer pastes is corrected with it. --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com>

gabriel-lisboa-azion · 2026-08-10T20:28:25Z

Summary

text-heading-* and every text-body-* step drop from weight 400 to 300, and the body steps tighten from 1.5 to 1.375 leading; text-tag-* drops from 600 to 400. The four body steps plus text-body-xxs now emit a --text-*-font-weight custom property they previously lacked, so the utilities set a weight instead of inheriting one.
Message kept its icon on the root's items-center row, so wrapped copy dragged the icon to the vertical middle of the block. The icon and the copy now share an items-start block, with the icon on an alignment box the height of the copy's line box (h-5.25 medium / h-4.5 small).
packages/theme/dist/v4/* and packages/webkit/catalog.json are regenerated from the token sources.

How to test

pnpm --filter @aziontech/webkit test -- src/components/feedback/message/message.test.ts → 33 passing.
pnpm storybook:dev, open Components/Feedback/Message. Widen the label until it wraps to two lines at both small and medium: the icon stays beside the first line instead of drifting to the middle. Measured line boxes are 21px (medium, text-label-md) and 18px (small, text-label-sm), matching the alignment box.
In the same Storybook, check Foundations/Typography: headings and body copy render at 300, tags at 400, and body steps sit on 1.375 leading.
cd packages/theme && node src/scripts/build-tokens.mjs then git diff --exit-code packages/theme/dist → no drift. Same for pnpm --filter @aziontech/webkit run catalog:check.

Notes

Not breaking: no token is renamed or removed. The added --text-body-*-font-weight properties are new surface, hence the feat type.
The typography change alters rendered weight system-wide, so the visual-regression baselines will need regenerating once CI reports the diff — baselines are CI-only.

Headings (2xl → xxs) and every body step now render at 300 instead of 400, and the body steps tighten from 1.5 to 1.375 leading. The four `text-body-*` steps plus `text-body-xxs` gain a `--text-*-font-weight` custom property that did not exist before, so the utilities emit a weight rather than inheriting one. Tag steps drop from 600 to 400. `text-body-xxs` moves next to its siblings so the generated block reads in order; `dist/v4` and the webkit token catalog are regenerated.

The icon and the copy were siblings of the root's `items-center` row, so a message whose text wrapped to two or more lines drifted the icon to the vertical middle of the block instead of leaving it beside the first line. The icon and the copy now share an `items-start` block, and the icon rides an alignment box the height of the copy's line box — `h-5.25` (21px) at medium, `h-4.5` (18px) at small — so it centers on the first line and stays there at any wrap depth.

…e and Message icon alignment

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--variants--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--muted.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-icon-media.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--light-tablet.png

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement.png

…lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* feat(theme): add semantic/layouts — the container system Ten tokens and nine `@utility` classes: how far content sits from the app chrome (BOUNDARY), how far things sit from each other (RHYTHM), and how wide a reading column may get (MEASURE). A DERIVED group: every token is a var() reference to --spacing-* / --container-*, never a literal length. That is why none carries a breakpoint map — the spacing scale is already fluid and var() is substituted at use time on the element, so a layout token follows the override for free. Duplicating the scale into layout would only let the two drift. Emitting them as `@utility` rather than `@layer components` is what gives them variants (`md:layout-column`), the same reason the typography utilities are emitted that way. Generalizes the utility emitter into emitUtilities(map) with a thin emitLayoutUtilities caller, so the shape is reusable. Regenerating dist also picks up one line main was stale on: an emitted comment that still read `bg-[var(--x)]` where the source has said `bg-(--x)` since ENG-47001. * chore(webkit): regenerate the catalog for the layout tokens The catalog's token allowlists are scraped from the built theme, so adding semantic/layouts adds ten --layout-* entries. Regenerated rather than hand-edited, which is what catalog:check verifies. * test(storybook): regenerate the avatar dark-desktop baseline for the lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: Isaque Böck <isaque.santos@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Brings the three commits demo lacked, so the deployed sample exercises them alongside the four fixes carved out of this branch (#899–#902), whose content was already here: - feat(webkit): chip's three kinds (#883) - feat(theme): the semantic/layouts container system (#884) - feat(theme): lightened heading and body type (#876) Conflict resolutions worth knowing: `build-tokens.mjs` — main has no illustration tokens, so main's side of all six hunks was empty. Taking it would have silently deleted this branch's illustration wiring; ours was kept. The merge then produced a DUPLICATE `emitUtilities` and `emitLayoutUtilities` with no conflict at all (both sides had added an identical helper in different places), which is a syntax error the merge itself reported as clean — the second copy is removed and `emitIllustrationUtilities` reuses the first. `texts.data.js` — the five conflicts were all `text-body-*` weight, resolved to main's `light` since that is the change being previewed. Resolved in place rather than with `--theirs`, which would have discarded the file's auto-merged hunks. Entry count held at 144. `.size-limit.json` — union, not a side: main's `chip` plus this branch's `footer-root` and `resizable-panel-root`. `dist/v4/globals.*` are generated, so they were rebuilt from the merged sources rather than hand-merged. The 466 conflicting visual baselines took main's copies; neither side is valid for a merged tree, and this branch opens no PR the visual gate guards. Verified after: no `undefined` in the built CSS, illustration tokens still emitted, main's layout utilities present, body weights now 300, no token data file lost entries, and 154 tests pass across toast, table, sidebar, resizable-panel and chip.

…pe scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved.

* feat(webkit): [ENG-47357] add footer composition component * test(storybook): regenerate linux baselines for the footer story * fix(webkit): [ENG-47357] address footer code review findings - token the social-bar border-top width (--border-width-default) instead of the implicit 1px - add active and visited states to Footer.Link per the Design task's state scope - add a size-limit budget for footer-root - cover both single-slot branches of the social bar's conditional render * test(storybook): regenerate linux baselines for the footer border/link-state fix * fix(webkit): [ENG-47357] match footer anatomy to the Figma Default frame - add the column divider borders and fix the social-bar border token (--border-default, not --border-muted), per node 5467:1642 - remove the outer columns padding/gap in favor of per-column padding, matching Figma's flex-1 + 0 column-gap layout - fix the social-bar right-cluster gap (status <-> language) to --spacing-lg, and lock the bar to h-14 at md+ - enrich the story: all 7 social icons, the language Select (with an explicit aria-label so the combobox has an accessible name distinct from its displayed value), matching the frame's anatomy * test(storybook): regenerate linux baselines for the Figma-parity fixes * fix(webkit): [ENG-47357] scope divider borders to the correct side border-(length:--border-width-default) sets width on ALL FOUR sides, not just the paired border-r/border-t. Combined with border-r/border-t, every column and the social bar picked up unwanted left/top/bottom borders too — visible as a doubled line at each column seam and an inconsistent right edge. Switched to the per-side border-r-(length:...) / border-t-(length:...) form already used in panel-header.vue / table-row.vue, with border-0 to zero every side first. * test(storybook): regenerate linux baselines for the divider-border fix * test(webkit): correct the footer axe comment — this env is unstyled The suite loads no theme CSS and runs no Tailwind (src/test/setup.ts), so axe here checks semantics only. The comment claimed a styled tree, which reads as though contrast were covered; contrast lives in Storybook + visual regression. * test(storybook): regenerate footer linux baselines for the lighter type scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved. * feat(webkit): rebuild the footer on the framed-band design The Figma set (5467:1638) moved the brand out of the social bar into its own framed signature band beside a tagline, and wrapped the footer in page material: two hatched gutters flanking the measure and a hatched band closing it below. The four bands are cells of ONE grid, so each stays a single element in a single place in the DOM while their order changes — `order-*` when stacked, explicit row/column placement from `md` — instead of a desktop-only wrapper row that would duplicate the consumer's slot content. Three breakpoints, each for its own reason: the column grid folds below `md`; the bands recombine at `md`, which the social row now fits because the brand left it; the gutters wait for `xl`, the first breakpoint past the 1192px measure, since earlier they resolve to zero width and still paint their corner marks on the measure's own edges. The slot set is reshaped with it: `social-start` / `social-end` become `social`, `status`, `language`, `brand` and `tagline`. `language` and `status` are separate slots because they swap order between the two Figma variants, and every name is now a single word, so the spec's Slots table carries all of them instead of needing a prose note for the hyphenated keys. This is not a breaking change — the footer landed on this branch and has never been released, so the slots it is replacing have no consumer. The bundle budget for `footer-root` goes 1.1 KB -> 4 KB: the footer now composes `FrameBox` (1.93 KB on its own), which is the design's own frame rather than growth to trim away. * refactor(webkit): draw the footer frame from each box's own edges The gutters draw only the rule they share with the measure (`left` / `right`), the signature keeps just its `top`, and the closing band carries `all` four — so every rule in the footer is drawn once, by the box that owns it, instead of neighbours meeting on the same line. * test(storybook): regenerate linux baselines for the framed-band footer All six modes moved: the brand left the social bar for its own signature band, the bands recombine at md, and the gutters and closing band are new. Only components-layout-footer--default-footer changed — 6 files, no additions or deletions — which is the whole scope of the redesign. * docs(storybook): point the footer's Reddit link at r/aziontech The story used r/azion; the community is r/aziontech. The href feeds both the canvas and the "Show code" snippet from the same const, so the copy a consumer pastes is corrected with it. --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com>

gabriel-lisboa-azion · 2026-08-10T20:28:25Z

Summary

text-heading-* and every text-body-* step drop from weight 400 to 300, and the body steps tighten from 1.5 to 1.375 leading; text-tag-* drops from 600 to 400. The four body steps plus text-body-xxs now emit a --text-*-font-weight custom property they previously lacked, so the utilities set a weight instead of inheriting one.
Message kept its icon on the root's items-center row, so wrapped copy dragged the icon to the vertical middle of the block. The icon and the copy now share an items-start block, with the icon on an alignment box the height of the copy's line box (h-5.25 medium / h-4.5 small).
packages/theme/dist/v4/* and packages/webkit/catalog.json are regenerated from the token sources.

How to test

pnpm --filter @aziontech/webkit test -- src/components/feedback/message/message.test.ts → 33 passing.
pnpm storybook:dev, open Components/Feedback/Message. Widen the label until it wraps to two lines at both small and medium: the icon stays beside the first line instead of drifting to the middle. Measured line boxes are 21px (medium, text-label-md) and 18px (small, text-label-sm), matching the alignment box.
In the same Storybook, check Foundations/Typography: headings and body copy render at 300, tags at 400, and body steps sit on 1.375 leading.
cd packages/theme && node src/scripts/build-tokens.mjs then git diff --exit-code packages/theme/dist → no drift. Same for pnpm --filter @aziontech/webkit run catalog:check.

Notes

Not breaking: no token is renamed or removed. The added --text-body-*-font-weight properties are new surface, hence the feat type.
The typography change alters rendered weight system-wide, so the visual-regression baselines will need regenerating once CI reports the diff — baselines are CI-only.

Headings (2xl → xxs) and every body step now render at 300 instead of 400, and the body steps tighten from 1.5 to 1.375 leading. The four `text-body-*` steps plus `text-body-xxs` gain a `--text-*-font-weight` custom property that did not exist before, so the utilities emit a weight rather than inheriting one. Tag steps drop from 600 to 400. `text-body-xxs` moves next to its siblings so the generated block reads in order; `dist/v4` and the webkit token catalog are regenerated.

The icon and the copy were siblings of the root's `items-center` row, so a message whose text wrapped to two or more lines drifted the icon to the vertical middle of the block instead of leaving it beside the first line. The icon and the copy now share an `items-start` block, and the icon rides an alignment box the height of the copy's line box — `h-5.25` (21px) at medium, `h-4.5` (18px) at small — so it centers on the first line and stays there at any wrap depth.

…e and Message icon alignment

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--arrow-position.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--multiple.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--sizes.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-accordion--with-log-view--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-avatar--types--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--flush.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--footer.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardbox--header.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--slots.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--variants--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-cardpricing--with-tag--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--muted.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--outline.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--small.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-avatar--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-icon-media.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list-as-child.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-content-item--with-list.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-table--empty.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--bordered--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-feedback-emptystate--no-adornment--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-boxgridselection--with-tag.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckbox--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldcheckboxblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldradio--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextarea--disabled.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--orientations.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-sidebar--resizable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-dropdown--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--default.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-navigation-tabview--scrollable--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-tooltip--auto-placement--light-tablet.png

…n-type-weights # Conflicts: # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--dark-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-desktop.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-mobile.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement--light-tablet.png # apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-overlay-popover--auto-placement.png

…lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* feat(theme): add semantic/layouts — the container system Ten tokens and nine `@utility` classes: how far content sits from the app chrome (BOUNDARY), how far things sit from each other (RHYTHM), and how wide a reading column may get (MEASURE). A DERIVED group: every token is a var() reference to --spacing-* / --container-*, never a literal length. That is why none carries a breakpoint map — the spacing scale is already fluid and var() is substituted at use time on the element, so a layout token follows the override for free. Duplicating the scale into layout would only let the two drift. Emitting them as `@utility` rather than `@layer components` is what gives them variants (`md:layout-column`), the same reason the typography utilities are emitted that way. Generalizes the utility emitter into emitUtilities(map) with a thin emitLayoutUtilities caller, so the shape is reusable. Regenerating dist also picks up one line main was stale on: an emitted comment that still read `bg-[var(--x)]` where the source has said `bg-(--x)` since ENG-47001. * chore(webkit): regenerate the catalog for the layout tokens The catalog's token allowlists are scraped from the built theme, so adding semantic/layouts adds ten --layout-* entries. Regenerated rather than hand-edited, which is what catalog:check verifies. * test(storybook): regenerate the avatar dark-desktop baseline for the lighter type scale `Avatar › VariantGrid` failed the visual shard on `dark-desktop` only, at 1.0301% / 1354px against a 1% threshold — deterministically, byte-identical across two runs. The cause is not this branch. That baseline was last regenerated on 2026-07-22 by #768 and has missed two theme changes since: #889 (opaque neutral border tokens) and #876 (headings and body steps to font-weight 300, body leading 1.5 → 1.375). #876 regenerated 548 baselines across three rounds and updated this story's `--dark-tablet` file, but never the dark-desktop one — which alone keeps the bare story id instead of a `--mode` suffix (see .storybook/visual-modes.js), so it is the easy file to miss in a partial regeneration. Aligning baseline to render needs a zero shift (dx=0, dy=0); what differs is ink — text -9%, icons -7% — the lighter weight. This branch only adds tokens, and is simply the first PR to run the suite with #876 merged in. Regenerated via the app-storybook-generate-baseline workflow on linux. The `-u` path could not rewrite it on its own: stale-baseline vs clean render is 0.9875%, under the threshold, so the snapshot passed and was left alone. The file had to be deleted so it was written as a missing snapshot. Against the render CI actually produced, the new baseline is 0.0426% (56px). Still stale and left alone, since both currently pass: this story's `--dark-mobile` baseline (also 2026-07-22). Worth noting separately that the Avatar stories source their photo from a live Unsplash URL, which contributed the residual noise here and is what kept this story on the 1% boundary. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: Isaque Böck <isaque.santos@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Brings the three commits demo lacked, so the deployed sample exercises them alongside the four fixes carved out of this branch (#899–#902), whose content was already here: - feat(webkit): chip's three kinds (#883) - feat(theme): the semantic/layouts container system (#884) - feat(theme): lightened heading and body type (#876) Conflict resolutions worth knowing: `build-tokens.mjs` — main has no illustration tokens, so main's side of all six hunks was empty. Taking it would have silently deleted this branch's illustration wiring; ours was kept. The merge then produced a DUPLICATE `emitUtilities` and `emitLayoutUtilities` with no conflict at all (both sides had added an identical helper in different places), which is a syntax error the merge itself reported as clean — the second copy is removed and `emitIllustrationUtilities` reuses the first. `texts.data.js` — the five conflicts were all `text-body-*` weight, resolved to main's `light` since that is the change being previewed. Resolved in place rather than with `--theirs`, which would have discarded the file's auto-merged hunks. Entry count held at 144. `.size-limit.json` — union, not a side: main's `chip` plus this branch's `footer-root` and `resizable-panel-root`. `dist/v4/globals.*` are generated, so they were rebuilt from the merged sources rather than hand-merged. The 466 conflicting visual baselines took main's copies; neither side is valid for a merged tree, and this branch opens no PR the visual gate guards. Verified after: no `undefined` in the built CSS, illustration tokens still emitted, main's layout utilities present, body weights now 300, no token data file lost entries, and 154 tests pass across toast, table, sidebar, resizable-panel and chip.

…pe scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved.

* feat(webkit): [ENG-47357] add footer composition component * test(storybook): regenerate linux baselines for the footer story * fix(webkit): [ENG-47357] address footer code review findings - token the social-bar border-top width (--border-width-default) instead of the implicit 1px - add active and visited states to Footer.Link per the Design task's state scope - add a size-limit budget for footer-root - cover both single-slot branches of the social bar's conditional render * test(storybook): regenerate linux baselines for the footer border/link-state fix * fix(webkit): [ENG-47357] match footer anatomy to the Figma Default frame - add the column divider borders and fix the social-bar border token (--border-default, not --border-muted), per node 5467:1642 - remove the outer columns padding/gap in favor of per-column padding, matching Figma's flex-1 + 0 column-gap layout - fix the social-bar right-cluster gap (status <-> language) to --spacing-lg, and lock the bar to h-14 at md+ - enrich the story: all 7 social icons, the language Select (with an explicit aria-label so the combobox has an accessible name distinct from its displayed value), matching the frame's anatomy * test(storybook): regenerate linux baselines for the Figma-parity fixes * fix(webkit): [ENG-47357] scope divider borders to the correct side border-(length:--border-width-default) sets width on ALL FOUR sides, not just the paired border-r/border-t. Combined with border-r/border-t, every column and the social bar picked up unwanted left/top/bottom borders too — visible as a doubled line at each column seam and an inconsistent right edge. Switched to the per-side border-r-(length:...) / border-t-(length:...) form already used in panel-header.vue / table-row.vue, with border-0 to zero every side first. * test(storybook): regenerate linux baselines for the divider-border fix * test(webkit): correct the footer axe comment — this env is unstyled The suite loads no theme CSS and runs no Tailwind (src/test/setup.ts), so axe here checks semantics only. The comment claimed a styled tree, which reads as though contrast were covered; contrast lives in Storybook + visual regression. * test(storybook): regenerate footer linux baselines for the lighter type scale The footer baselines were generated before #876 lightened the heading and body weights (400 → 300) and tightened the body leading, so every one of the six footer modes drifted ~1% against them. Regenerated on linux via the Storybook Regenerate Baseline workflow; the full matrix reports these six files as the only ones that moved. * feat(webkit): rebuild the footer on the framed-band design The Figma set (5467:1638) moved the brand out of the social bar into its own framed signature band beside a tagline, and wrapped the footer in page material: two hatched gutters flanking the measure and a hatched band closing it below. The four bands are cells of ONE grid, so each stays a single element in a single place in the DOM while their order changes — `order-*` when stacked, explicit row/column placement from `md` — instead of a desktop-only wrapper row that would duplicate the consumer's slot content. Three breakpoints, each for its own reason: the column grid folds below `md`; the bands recombine at `md`, which the social row now fits because the brand left it; the gutters wait for `xl`, the first breakpoint past the 1192px measure, since earlier they resolve to zero width and still paint their corner marks on the measure's own edges. The slot set is reshaped with it: `social-start` / `social-end` become `social`, `status`, `language`, `brand` and `tagline`. `language` and `status` are separate slots because they swap order between the two Figma variants, and every name is now a single word, so the spec's Slots table carries all of them instead of needing a prose note for the hyphenated keys. This is not a breaking change — the footer landed on this branch and has never been released, so the slots it is replacing have no consumer. The bundle budget for `footer-root` goes 1.1 KB -> 4 KB: the footer now composes `FrameBox` (1.93 KB on its own), which is the design's own frame rather than growth to trim away. * refactor(webkit): draw the footer frame from each box's own edges The gutters draw only the rule they share with the measure (`left` / `right`), the signature keeps just its `top`, and the closing band carries `all` four — so every rule in the footer is drawn once, by the box that owns it, instead of neighbours meeting on the same line. * test(storybook): regenerate linux baselines for the framed-band footer All six modes moved: the brand left the social bar for its own signature band, the bands recombine at md, and the gutters and closing band are new. Only components-layout-footer--default-footer changed — 6 files, no additions or deletions — which is the whole scope of the redesign. * docs(storybook): point the footer's Reddit link at r/aziontech The story used r/azion; the community is r/aziontech. The href feeds both the canvas and the "Show code" snippet from the same const, so the copy a consumer pastes is corrected with it. --------- Co-authored-by: Herbert Vicente Cotta Julio <herbert.julio@azion.com> Co-authored-by: robson-junior-azion <robson.junior@azion.com>

gabriel-lisboa-azion added 2 commits August 10, 2026 17:27

gabriel-lisboa-azion requested a review from a team as a code owner August 10, 2026 20:28

github-actionsBot assigned gabriel-lisboa-azion Aug 10, 2026

gabriel-lisboa-azion added 3 commits August 10, 2026 18:00

test(storybook): regenerate linux baselines for the lighter type scal…
10c85a9
…e and Message icon alignment

test(storybook): regenerate linux baselines after the main merge
26b196c

herbert-julio-azion approved these changes Aug 13, 2026
View reviewed changes

gabriel-lisboa-azion added 2 commits August 14, 2026 15:42

test(storybook): regenerate linux baselines after the main merge
a712b24

robson-junior-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion merged commit 3182ff9 into mainAug 14, 2026
23 checks passed

isaque-bock-azion deleted the fix/message-icon-align-type-weights branch August 14, 2026 20:52

gabriel-lisboa-azion added 2 commits August 10, 2026 17:27

gabriel-lisboa-azion requested a review from a team as a code owner August 10, 2026 20:28

github-actionsBot assigned gabriel-lisboa-azion Aug 10, 2026

gabriel-lisboa-azion added 3 commits August 10, 2026 18:00

test(storybook): regenerate linux baselines for the lighter type scal…
10c85a9
…e and Message icon alignment

test(storybook): regenerate linux baselines after the main merge
26b196c

herbert-julio-azion approved these changes Aug 13, 2026
View reviewed changes

gabriel-lisboa-azion added 2 commits August 14, 2026 15:42

test(storybook): regenerate linux baselines after the main merge
a712b24

robson-junior-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion merged commit 3182ff9 into mainAug 14, 2026
23 checks passed

isaque-bock-azion deleted the fix/message-icon-align-type-weights branch August 14, 2026 20:52

gabriel-lisboa-azion added 2 commits August 10, 2026 17:27

gabriel-lisboa-azion requested a review from a team as a code owner August 10, 2026 20:28

github-actionsBot assigned gabriel-lisboa-azion Aug 10, 2026

gabriel-lisboa-azion added 3 commits August 10, 2026 18:00

test(storybook): regenerate linux baselines for the lighter type scal…
10c85a9
…e and Message icon alignment

test(storybook): regenerate linux baselines after the main merge
26b196c

herbert-julio-azion approved these changes Aug 13, 2026
View reviewed changes

gabriel-lisboa-azion added 2 commits August 14, 2026 15:42

test(storybook): regenerate linux baselines after the main merge
a712b24

robson-junior-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion merged commit 3182ff9 into mainAug 14, 2026
23 checks passed

isaque-bock-azion deleted the fix/message-icon-align-type-weights branch August 14, 2026 20:52

gabriel-lisboa-azion added 2 commits August 10, 2026 17:27

gabriel-lisboa-azion requested a review from a team as a code owner August 10, 2026 20:28

github-actionsBot assigned gabriel-lisboa-azion Aug 10, 2026

gabriel-lisboa-azion added 3 commits August 10, 2026 18:00

test(storybook): regenerate linux baselines for the lighter type scal…
10c85a9
…e and Message icon alignment

test(storybook): regenerate linux baselines after the main merge
26b196c

herbert-julio-azion approved these changes Aug 13, 2026
View reviewed changes

gabriel-lisboa-azion added 2 commits August 14, 2026 15:42

test(storybook): regenerate linux baselines after the main merge
a712b24

robson-junior-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion merged commit 3182ff9 into mainAug 14, 2026
23 checks passed

isaque-bock-azion deleted the fix/message-icon-align-type-weights branch August 14, 2026 20:52

gabriel-lisboa-azion added 2 commits August 10, 2026 17:27

gabriel-lisboa-azion requested a review from a team as a code owner August 10, 2026 20:28

github-actionsBot assigned gabriel-lisboa-azion Aug 10, 2026

gabriel-lisboa-azion added 3 commits August 10, 2026 18:00

test(storybook): regenerate linux baselines for the lighter type scal…
10c85a9
…e and Message icon alignment

test(storybook): regenerate linux baselines after the main merge
26b196c

herbert-julio-azion approved these changes Aug 13, 2026
View reviewed changes

gabriel-lisboa-azion added 2 commits August 14, 2026 15:42

test(storybook): regenerate linux baselines after the main merge
a712b24

robson-junior-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion merged commit 3182ff9 into mainAug 14, 2026
23 checks passed

isaque-bock-azion deleted the fix/message-icon-align-type-weights branch August 14, 2026 20:52

gabriel-lisboa-azion added 2 commits August 10, 2026 17:27

gabriel-lisboa-azion requested a review from a team as a code owner August 10, 2026 20:28

github-actionsBot assigned gabriel-lisboa-azion Aug 10, 2026

gabriel-lisboa-azion added 3 commits August 10, 2026 18:00

test(storybook): regenerate linux baselines for the lighter type scal…
10c85a9
…e and Message icon alignment

test(storybook): regenerate linux baselines after the main merge
26b196c

herbert-julio-azion approved these changes Aug 13, 2026
View reviewed changes

gabriel-lisboa-azion added 2 commits August 14, 2026 15:42

test(storybook): regenerate linux baselines after the main merge
a712b24

robson-junior-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion merged commit 3182ff9 into mainAug 14, 2026
23 checks passed

isaque-bock-azion deleted the fix/message-icon-align-type-weights branch August 14, 2026 20:52

gabriel-lisboa-azion added 2 commits August 10, 2026 17:27

gabriel-lisboa-azion requested a review from a team as a code owner August 10, 2026 20:28

github-actionsBot assigned gabriel-lisboa-azion Aug 10, 2026

gabriel-lisboa-azion added 3 commits August 10, 2026 18:00

test(storybook): regenerate linux baselines for the lighter type scal…
10c85a9
…e and Message icon alignment

test(storybook): regenerate linux baselines after the main merge
26b196c

herbert-julio-azion approved these changes Aug 13, 2026
View reviewed changes

gabriel-lisboa-azion added 2 commits August 14, 2026 15:42

test(storybook): regenerate linux baselines after the main merge
a712b24

robson-junior-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion merged commit 3182ff9 into mainAug 14, 2026
23 checks passed

isaque-bock-azion deleted the fix/message-icon-align-type-weights branch August 14, 2026 20:52

gabriel-lisboa-azion added 2 commits August 10, 2026 17:27

gabriel-lisboa-azion requested a review from a team as a code owner August 10, 2026 20:28

github-actionsBot assigned gabriel-lisboa-azion Aug 10, 2026

gabriel-lisboa-azion added 3 commits August 10, 2026 18:00

test(storybook): regenerate linux baselines for the lighter type scal…
10c85a9
…e and Message icon alignment

test(storybook): regenerate linux baselines after the main merge
26b196c

herbert-julio-azion approved these changes Aug 13, 2026
View reviewed changes

gabriel-lisboa-azion added 2 commits August 14, 2026 15:42

test(storybook): regenerate linux baselines after the main merge
a712b24

robson-junior-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion approved these changes Aug 14, 2026
View reviewed changes

isaque-bock-azion merged commit 3182ff9 into mainAug 14, 2026
23 checks passed

isaque-bock-azion deleted the fix/message-icon-align-type-weights branch August 14, 2026 20:52

Uh oh!

Conversation

gabriel-lisboa-azion commented Aug 10, 2026

Summary

How to test

Notes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

gabriel-lisboa-azion commented Aug 10, 2026

Summary

How to test

Notes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

gabriel-lisboa-azion commented Aug 10, 2026

Summary

How to test

Notes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

gabriel-lisboa-azion commented Aug 10, 2026

Summary

How to test

Notes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

gabriel-lisboa-azion commented Aug 10, 2026

Summary

How to test

Notes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

gabriel-lisboa-azion commented Aug 10, 2026

Summary

How to test