feat(webkit): [ENG-47607] add DocCallout, the documentation admonition

[gabriel-lisboa-azion]

Summary

• Adds DocCallout — the admonition a documentation page interrupts itself with (Note, Info, Tip, Check, Warning, Danger), rendered on the webkit Message surface so the severity colour, border, icon and radius come from the design system rather than from this layer.
• The anatomy is a glyph and one row of inline prose. There is no title row and no title prop: the name repeated what the glyph and the tint already say, cost a line on every aside, and pushed the sentence the reader came for down the box.
• One kind carries no severity — tip takes the page's own surface and rule and spends its whole emphasis on the glyph, in --primary. That stops a friendly shortcut being painted the same green as a confirmed success.

How to test

1. pnpm storybook:dev → Components / Documentation / DocCallout. The Kinds story puts all six side by side; check in both themes that each fill, border and glyph actually paints, and that tip reads as neutral rather than as a severity.
2. cd packages/webkit && npx vitest run src/components/documentation/doc-callout/doc-callout.test.ts — 14/14 in Chromium, covering every kind's severity + glyph mapping, the neutral flag, the unknown-kind fallback, and the testid override.
3. node packages/webkit/scripts/check-size.mjs — doc-callout 5.68 KB against a 6.5 KB budget.
4. node packages/webkit/scripts/check-authoring.mjs — 0 new violations.

Notes

• Stacked on feat(webkit): [ENG-47606] add DocProse, the documentation typography contract #906 (DocProse) → feat(theme): [ENG-47561] add the docs measure and the prose + mono body registers #905 (theme) → chore: [ENG-47606] add the documentation component category #904 (category). Merge in that order; each retargets automatically.
• The testid was doc-callout-${kind}, an interpolated literal a consumer could not override. It is now the derived documentation-doc-callout with inheritAttrs: false + $attrs on the root, and the kind stays readable on data-kind so a test can still target one flavour.
• Two comment fixes were required, both of which break the Storybook build's second SFC parse: the JSDoc quoted <Highlight>/<Tip> as tags, and used <severity> as a placeholder. They are now prose.
• The test deliberately asserts no tint or colour: Vitest browser mode loads no Tailwind, so those pass identically in the broken and fixed states. Severity/glyph are asserted because they reach Message as props and land as real attributes; the paint is verified in the browser and by the visual gate.
• Related: ENG-47607.

---

Delivery

The Documentation family is delivered on the feature branch feat/docs-components-bundle, not piecemeal to main — so main takes the whole family as one merge, while review stays per-component.

Merge order, bottom-up — each PR's base is the one before it, and each retargets automatically as its parent lands:

#904 → #905 → #906 → #907 → #908 → #909 → #910 → #911 → #912 → #913 → #914 → #915 → #916 → #917 → #918 → feat/docs-components-bundle → main

#904	the documentation category (standards only)
#905	theme: the docs measure + the prose and mono body registers
#906–#918	DocProse · DocCallout · DocCard · DocCardGroup · DocItem · DocSteps + DocStep · DocFrame · DocUpdate · DocPrompt · DocTooltip · DocPagination · DocPageHeader · DocOnThisPage

[gabriel-lisboa-azion]

Summary

• Adds DocCallout — the admonition a documentation page interrupts itself with (Note, Info, Tip, Check, Warning, Danger), rendered on the webkit Message surface so the severity colour, border, icon and radius come from the design system rather than from this layer.
• The anatomy is a glyph and one row of inline prose. There is no title row and no title prop: the name repeated what the glyph and the tint already say, cost a line on every aside, and pushed the sentence the reader came for down the box.
• One kind carries no severity — tip takes the page's own surface and rule and spends its whole emphasis on the glyph, in --primary. That stops a friendly shortcut being painted the same green as a confirmed success.

How to test

1. pnpm storybook:dev → Components / Documentation / DocCallout. The Kinds story puts all six side by side; check in both themes that each fill, border and glyph actually paints, and that tip reads as neutral rather than as a severity.
2. cd packages/webkit && npx vitest run src/components/documentation/doc-callout/doc-callout.test.ts — 14/14 in Chromium, covering every kind's severity + glyph mapping, the neutral flag, the unknown-kind fallback, and the testid override.
3. node packages/webkit/scripts/check-size.mjs — doc-callout 5.68 KB against a 6.5 KB budget.
4. node packages/webkit/scripts/check-authoring.mjs — 0 new violations.

Notes

• Stacked on feat(webkit): [ENG-47606] add DocProse, the documentation typography contract #906 (DocProse) → feat(theme): [ENG-47561] add the docs measure and the prose + mono body registers #905 (theme) → chore: [ENG-47606] add the documentation component category #904 (category). Merge in that order; each retargets automatically.
• The testid was doc-callout-${kind}, an interpolated literal a consumer could not override. It is now the derived documentation-doc-callout with inheritAttrs: false + $attrs on the root, and the kind stays readable on data-kind so a test can still target one flavour.
• Two comment fixes were required, both of which break the Storybook build's second SFC parse: the JSDoc quoted <Highlight>/<Tip> as tags, and used <severity> as a placeholder. They are now prose.
• The test deliberately asserts no tint or colour: Vitest browser mode loads no Tailwind, so those pass identically in the broken and fixed states. Severity/glyph are asserted because they reach Message as props and land as real attributes; the paint is verified in the browser and by the visual gate.
• Related: ENG-47607.

---

Delivery

The Documentation family is delivered on the feature branch feat/docs-components-bundle, not piecemeal to main — so main takes the whole family as one merge, while review stays per-component.

Merge order, bottom-up — each PR's base is the one before it, and each retargets automatically as its parent lands:

#904 → #905 → #906 → #907 → #908 → #909 → #910 → #911 → #912 → #913 → #914 → #915 → #916 → #917 → #918 → feat/docs-components-bundle → main

#904	the documentation category (standards only)
#905	theme: the docs measure + the prose and mono body registers
#906–#918	DocProse · DocCallout · DocCard · DocCardGroup · DocItem · DocSteps + DocStep · DocFrame · DocUpdate · DocPrompt · DocTooltip · DocPagination · DocPageHeader · DocOnThisPage

[gabriel-lisboa-azion]

Summary

• Adds DocCallout — the admonition a documentation page interrupts itself with (Note, Info, Tip, Check, Warning, Danger), rendered on the webkit Message surface so the severity colour, border, icon and radius come from the design system rather than from this layer.
• The anatomy is a glyph and one row of inline prose. There is no title row and no title prop: the name repeated what the glyph and the tint already say, cost a line on every aside, and pushed the sentence the reader came for down the box.
• One kind carries no severity — tip takes the page's own surface and rule and spends its whole emphasis on the glyph, in --primary. That stops a friendly shortcut being painted the same green as a confirmed success.

How to test

1. pnpm storybook:dev → Components / Documentation / DocCallout. The Kinds story puts all six side by side; check in both themes that each fill, border and glyph actually paints, and that tip reads as neutral rather than as a severity.
2. cd packages/webkit && npx vitest run src/components/documentation/doc-callout/doc-callout.test.ts — 14/14 in Chromium, covering every kind's severity + glyph mapping, the neutral flag, the unknown-kind fallback, and the testid override.
3. node packages/webkit/scripts/check-size.mjs — doc-callout 5.68 KB against a 6.5 KB budget.
4. node packages/webkit/scripts/check-authoring.mjs — 0 new violations.

Notes

• Stacked on feat(webkit): [ENG-47606] add DocProse, the documentation typography contract #906 (DocProse) → feat(theme): [ENG-47561] add the docs measure and the prose + mono body registers #905 (theme) → chore: [ENG-47606] add the documentation component category #904 (category). Merge in that order; each retargets automatically.
• The testid was doc-callout-${kind}, an interpolated literal a consumer could not override. It is now the derived documentation-doc-callout with inheritAttrs: false + $attrs on the root, and the kind stays readable on data-kind so a test can still target one flavour.
• Two comment fixes were required, both of which break the Storybook build's second SFC parse: the JSDoc quoted <Highlight>/<Tip> as tags, and used <severity> as a placeholder. They are now prose.
• The test deliberately asserts no tint or colour: Vitest browser mode loads no Tailwind, so those pass identically in the broken and fixed states. Severity/glyph are asserted because they reach Message as props and land as real attributes; the paint is verified in the browser and by the visual gate.
• Related: ENG-47607.

---

Delivery

The Documentation family is delivered on the feature branch feat/docs-components-bundle, not piecemeal to main — so main takes the whole family as one merge, while review stays per-component.

Merge order, bottom-up — each PR's base is the one before it, and each retargets automatically as its parent lands:

#904 → #905 → #906 → #907 → #908 → #909 → #910 → #911 → #912 → #913 → #914 → #915 → #916 → #917 → #918 → feat/docs-components-bundle → main

#904	the documentation category (standards only)
#905	theme: the docs measure + the prose and mono body registers
#906–#918	DocProse · DocCallout · DocCard · DocCardGroup · DocItem · DocSteps + DocStep · DocFrame · DocUpdate · DocPrompt · DocTooltip · DocPagination · DocPageHeader · DocOnThisPage

[gabriel-lisboa-azion]

Summary

• Adds DocCallout — the admonition a documentation page interrupts itself with (Note, Info, Tip, Check, Warning, Danger), rendered on the webkit Message surface so the severity colour, border, icon and radius come from the design system rather than from this layer.
• The anatomy is a glyph and one row of inline prose. There is no title row and no title prop: the name repeated what the glyph and the tint already say, cost a line on every aside, and pushed the sentence the reader came for down the box.
• One kind carries no severity — tip takes the page's own surface and rule and spends its whole emphasis on the glyph, in --primary. That stops a friendly shortcut being painted the same green as a confirmed success.

How to test

1. pnpm storybook:dev → Components / Documentation / DocCallout. The Kinds story puts all six side by side; check in both themes that each fill, border and glyph actually paints, and that tip reads as neutral rather than as a severity.
2. cd packages/webkit && npx vitest run src/components/documentation/doc-callout/doc-callout.test.ts — 14/14 in Chromium, covering every kind's severity + glyph mapping, the neutral flag, the unknown-kind fallback, and the testid override.
3. node packages/webkit/scripts/check-size.mjs — doc-callout 5.68 KB against a 6.5 KB budget.
4. node packages/webkit/scripts/check-authoring.mjs — 0 new violations.

Notes

• Stacked on feat(webkit): [ENG-47606] add DocProse, the documentation typography contract #906 (DocProse) → feat(theme): [ENG-47561] add the docs measure and the prose + mono body registers #905 (theme) → chore: [ENG-47606] add the documentation component category #904 (category). Merge in that order; each retargets automatically.
• The testid was doc-callout-${kind}, an interpolated literal a consumer could not override. It is now the derived documentation-doc-callout with inheritAttrs: false + $attrs on the root, and the kind stays readable on data-kind so a test can still target one flavour.
• Two comment fixes were required, both of which break the Storybook build's second SFC parse: the JSDoc quoted <Highlight>/<Tip> as tags, and used <severity> as a placeholder. They are now prose.
• The test deliberately asserts no tint or colour: Vitest browser mode loads no Tailwind, so those pass identically in the broken and fixed states. Severity/glyph are asserted because they reach Message as props and land as real attributes; the paint is verified in the browser and by the visual gate.
• Related: ENG-47607.

---

Delivery

The Documentation family is delivered on the feature branch feat/docs-components-bundle, not piecemeal to main — so main takes the whole family as one merge, while review stays per-component.

Merge order, bottom-up — each PR's base is the one before it, and each retargets automatically as its parent lands:

#904 → #905 → #906 → #907 → #908 → #909 → #910 → #911 → #912 → #913 → #914 → #915 → #916 → #917 → #918 → feat/docs-components-bundle → main

#904	the documentation category (standards only)
#905	theme: the docs measure + the prose and mono body registers
#906–#918	DocProse · DocCallout · DocCard · DocCardGroup · DocItem · DocSteps + DocStep · DocFrame · DocUpdate · DocPrompt · DocTooltip · DocPagination · DocPageHeader · DocOnThisPage

[gabriel-lisboa-azion]

Summary

• Adds DocCallout — the admonition a documentation page interrupts itself with (Note, Info, Tip, Check, Warning, Danger), rendered on the webkit Message surface so the severity colour, border, icon and radius come from the design system rather than from this layer.
• The anatomy is a glyph and one row of inline prose. There is no title row and no title prop: the name repeated what the glyph and the tint already say, cost a line on every aside, and pushed the sentence the reader came for down the box.
• One kind carries no severity — tip takes the page's own surface and rule and spends its whole emphasis on the glyph, in --primary. That stops a friendly shortcut being painted the same green as a confirmed success.

How to test

1. pnpm storybook:dev → Components / Documentation / DocCallout. The Kinds story puts all six side by side; check in both themes that each fill, border and glyph actually paints, and that tip reads as neutral rather than as a severity.
2. cd packages/webkit && npx vitest run src/components/documentation/doc-callout/doc-callout.test.ts — 14/14 in Chromium, covering every kind's severity + glyph mapping, the neutral flag, the unknown-kind fallback, and the testid override.
3. node packages/webkit/scripts/check-size.mjs — doc-callout 5.68 KB against a 6.5 KB budget.
4. node packages/webkit/scripts/check-authoring.mjs — 0 new violations.

Notes

• Stacked on feat(webkit): [ENG-47606] add DocProse, the documentation typography contract #906 (DocProse) → feat(theme): [ENG-47561] add the docs measure and the prose + mono body registers #905 (theme) → chore: [ENG-47606] add the documentation component category #904 (category). Merge in that order; each retargets automatically.
• The testid was doc-callout-${kind}, an interpolated literal a consumer could not override. It is now the derived documentation-doc-callout with inheritAttrs: false + $attrs on the root, and the kind stays readable on data-kind so a test can still target one flavour.
• Two comment fixes were required, both of which break the Storybook build's second SFC parse: the JSDoc quoted <Highlight>/<Tip> as tags, and used <severity> as a placeholder. They are now prose.
• The test deliberately asserts no tint or colour: Vitest browser mode loads no Tailwind, so those pass identically in the broken and fixed states. Severity/glyph are asserted because they reach Message as props and land as real attributes; the paint is verified in the browser and by the visual gate.
• Related: ENG-47607.

---

Delivery

The Documentation family is delivered on the feature branch feat/docs-components-bundle, not piecemeal to main — so main takes the whole family as one merge, while review stays per-component.

Merge order, bottom-up — each PR's base is the one before it, and each retargets automatically as its parent lands:

#904 → #905 → #906 → #907 → #908 → #909 → #910 → #911 → #912 → #913 → #914 → #915 → #916 → #917 → #918 → feat/docs-components-bundle → main

#904	the documentation category (standards only)
#905	theme: the docs measure + the prose and mono body registers
#906–#918	DocProse · DocCallout · DocCard · DocCardGroup · DocItem · DocSteps + DocStep · DocFrame · DocUpdate · DocPrompt · DocTooltip · DocPagination · DocPageHeader · DocOnThisPage

[gabriel-lisboa-azion]

Summary

• Adds DocCallout — the admonition a documentation page interrupts itself with (Note, Info, Tip, Check, Warning, Danger), rendered on the webkit Message surface so the severity colour, border, icon and radius come from the design system rather than from this layer.
• The anatomy is a glyph and one row of inline prose. There is no title row and no title prop: the name repeated what the glyph and the tint already say, cost a line on every aside, and pushed the sentence the reader came for down the box.
• One kind carries no severity — tip takes the page's own surface and rule and spends its whole emphasis on the glyph, in --primary. That stops a friendly shortcut being painted the same green as a confirmed success.

How to test

1. pnpm storybook:dev → Components / Documentation / DocCallout. The Kinds story puts all six side by side; check in both themes that each fill, border and glyph actually paints, and that tip reads as neutral rather than as a severity.
2. cd packages/webkit && npx vitest run src/components/documentation/doc-callout/doc-callout.test.ts — 14/14 in Chromium, covering every kind's severity + glyph mapping, the neutral flag, the unknown-kind fallback, and the testid override.
3. node packages/webkit/scripts/check-size.mjs — doc-callout 5.68 KB against a 6.5 KB budget.
4. node packages/webkit/scripts/check-authoring.mjs — 0 new violations.

Notes

• Stacked on feat(webkit): [ENG-47606] add DocProse, the documentation typography contract #906 (DocProse) → feat(theme): [ENG-47561] add the docs measure and the prose + mono body registers #905 (theme) → chore: [ENG-47606] add the documentation component category #904 (category). Merge in that order; each retargets automatically.
• The testid was doc-callout-${kind}, an interpolated literal a consumer could not override. It is now the derived documentation-doc-callout with inheritAttrs: false + $attrs on the root, and the kind stays readable on data-kind so a test can still target one flavour.
• Two comment fixes were required, both of which break the Storybook build's second SFC parse: the JSDoc quoted <Highlight>/<Tip> as tags, and used <severity> as a placeholder. They are now prose.
• The test deliberately asserts no tint or colour: Vitest browser mode loads no Tailwind, so those pass identically in the broken and fixed states. Severity/glyph are asserted because they reach Message as props and land as real attributes; the paint is verified in the browser and by the visual gate.
• Related: ENG-47607.

---

Delivery

The Documentation family is delivered on the feature branch feat/docs-components-bundle, not piecemeal to main — so main takes the whole family as one merge, while review stays per-component.

Merge order, bottom-up — each PR's base is the one before it, and each retargets automatically as its parent lands:

#904 → #905 → #906 → #907 → #908 → #909 → #910 → #911 → #912 → #913 → #914 → #915 → #916 → #917 → #918 → feat/docs-components-bundle → main

#904	the documentation category (standards only)
#905	theme: the docs measure + the prose and mono body registers
#906–#918	DocProse · DocCallout · DocCard · DocCardGroup · DocItem · DocSteps + DocStep · DocFrame · DocUpdate · DocPrompt · DocTooltip · DocPagination · DocPageHeader · DocOnThisPage

[gabriel-lisboa-azion]

Summary

• Adds DocCallout — the admonition a documentation page interrupts itself with (Note, Info, Tip, Check, Warning, Danger), rendered on the webkit Message surface so the severity colour, border, icon and radius come from the design system rather than from this layer.
• The anatomy is a glyph and one row of inline prose. There is no title row and no title prop: the name repeated what the glyph and the tint already say, cost a line on every aside, and pushed the sentence the reader came for down the box.
• One kind carries no severity — tip takes the page's own surface and rule and spends its whole emphasis on the glyph, in --primary. That stops a friendly shortcut being painted the same green as a confirmed success.

How to test

1. pnpm storybook:dev → Components / Documentation / DocCallout. The Kinds story puts all six side by side; check in both themes that each fill, border and glyph actually paints, and that tip reads as neutral rather than as a severity.
2. cd packages/webkit && npx vitest run src/components/documentation/doc-callout/doc-callout.test.ts — 14/14 in Chromium, covering every kind's severity + glyph mapping, the neutral flag, the unknown-kind fallback, and the testid override.
3. node packages/webkit/scripts/check-size.mjs — doc-callout 5.68 KB against a 6.5 KB budget.
4. node packages/webkit/scripts/check-authoring.mjs — 0 new violations.

Notes

• Stacked on feat(webkit): [ENG-47606] add DocProse, the documentation typography contract #906 (DocProse) → feat(theme): [ENG-47561] add the docs measure and the prose + mono body registers #905 (theme) → chore: [ENG-47606] add the documentation component category #904 (category). Merge in that order; each retargets automatically.
• The testid was doc-callout-${kind}, an interpolated literal a consumer could not override. It is now the derived documentation-doc-callout with inheritAttrs: false + $attrs on the root, and the kind stays readable on data-kind so a test can still target one flavour.
• Two comment fixes were required, both of which break the Storybook build's second SFC parse: the JSDoc quoted <Highlight>/<Tip> as tags, and used <severity> as a placeholder. They are now prose.
• The test deliberately asserts no tint or colour: Vitest browser mode loads no Tailwind, so those pass identically in the broken and fixed states. Severity/glyph are asserted because they reach Message as props and land as real attributes; the paint is verified in the browser and by the visual gate.
• Related: ENG-47607.

---

Delivery

The Documentation family is delivered on the feature branch feat/docs-components-bundle, not piecemeal to main — so main takes the whole family as one merge, while review stays per-component.

Merge order, bottom-up — each PR's base is the one before it, and each retargets automatically as its parent lands:

#904 → #905 → #906 → #907 → #908 → #909 → #910 → #911 → #912 → #913 → #914 → #915 → #916 → #917 → #918 → feat/docs-components-bundle → main

#904	the documentation category (standards only)
#905	theme: the docs measure + the prose and mono body registers
#906–#918	DocProse · DocCallout · DocCard · DocCardGroup · DocItem · DocSteps + DocStep · DocFrame · DocUpdate · DocPrompt · DocTooltip · DocPagination · DocPageHeader · DocOnThisPage

[gabriel-lisboa-azion]

Summary

• Adds DocCallout — the admonition a documentation page interrupts itself with (Note, Info, Tip, Check, Warning, Danger), rendered on the webkit Message surface so the severity colour, border, icon and radius come from the design system rather than from this layer.
• The anatomy is a glyph and one row of inline prose. There is no title row and no title prop: the name repeated what the glyph and the tint already say, cost a line on every aside, and pushed the sentence the reader came for down the box.
• One kind carries no severity — tip takes the page's own surface and rule and spends its whole emphasis on the glyph, in --primary. That stops a friendly shortcut being painted the same green as a confirmed success.

How to test

1. pnpm storybook:dev → Components / Documentation / DocCallout. The Kinds story puts all six side by side; check in both themes that each fill, border and glyph actually paints, and that tip reads as neutral rather than as a severity.
2. cd packages/webkit && npx vitest run src/components/documentation/doc-callout/doc-callout.test.ts — 14/14 in Chromium, covering every kind's severity + glyph mapping, the neutral flag, the unknown-kind fallback, and the testid override.
3. node packages/webkit/scripts/check-size.mjs — doc-callout 5.68 KB against a 6.5 KB budget.
4. node packages/webkit/scripts/check-authoring.mjs — 0 new violations.

Notes

• Stacked on feat(webkit): [ENG-47606] add DocProse, the documentation typography contract #906 (DocProse) → feat(theme): [ENG-47561] add the docs measure and the prose + mono body registers #905 (theme) → chore: [ENG-47606] add the documentation component category #904 (category). Merge in that order; each retargets automatically.
• The testid was doc-callout-${kind}, an interpolated literal a consumer could not override. It is now the derived documentation-doc-callout with inheritAttrs: false + $attrs on the root, and the kind stays readable on data-kind so a test can still target one flavour.
• Two comment fixes were required, both of which break the Storybook build's second SFC parse: the JSDoc quoted <Highlight>/<Tip> as tags, and used <severity> as a placeholder. They are now prose.
• The test deliberately asserts no tint or colour: Vitest browser mode loads no Tailwind, so those pass identically in the broken and fixed states. Severity/glyph are asserted because they reach Message as props and land as real attributes; the paint is verified in the browser and by the visual gate.
• Related: ENG-47607.

---

Delivery

The Documentation family is delivered on the feature branch feat/docs-components-bundle, not piecemeal to main — so main takes the whole family as one merge, while review stays per-component.

Merge order, bottom-up — each PR's base is the one before it, and each retargets automatically as its parent lands:

#904 → #905 → #906 → #907 → #908 → #909 → #910 → #911 → #912 → #913 → #914 → #915 → #916 → #917 → #918 → feat/docs-components-bundle → main

#904	the documentation category (standards only)
#905	theme: the docs measure + the prose and mono body registers
#906–#918	DocProse · DocCallout · DocCard · DocCardGroup · DocItem · DocSteps + DocStep · DocFrame · DocUpdate · DocPrompt · DocTooltip · DocPagination · DocPageHeader · DocOnThisPage