This section is controlled by the tediPrint directive.
+
+
This section is always printed.
+ `,
+ moduleMetadata: {
+ imports: [PrintDirective],
+ },
+ }),
+};
+
+/**
+ * Buttons and the layout components hide themselves when printing.
+ * `tediPrint="show"` puts one back on the page.
+ */
+export const Visibility: StoryObj = {
+ render: () => ({
+ template: `
+
+
+
+
+
+
This paragraph prints on screen only.
+
+ This paragraph has no no-print to cancel, so
+ show changes nothing for it.
+
+
+ `,
+ moduleMetadata: {
+ imports: [PrintDirective, ButtonComponent],
+ },
+ }),
+};
diff --git a/src/tedi/directives/print/printing.mdx b/src/tedi/directives/print/printing.mdx
new file mode 100644
index 000000000..24441b4d1
--- /dev/null
+++ b/src/tedi/directives/print/printing.mdx
@@ -0,0 +1,82 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+import * as PrintStories from "./print.stories";
+
+
+
+# Printing in TEDI-Ready
+
+TEDI components include print styles for browser printing and saving as PDF.
+These styles apply automatically. Use the `tediPrint` directive to customise
+print visibility and page breaks.
+
+## What happens automatically
+
+Global, from `@tedi-design-system/core`:
+
+- Base font size is set to **14px**, with headings, spacing and line heights
+ scaling with it.
+- The page uses a light neutral background. Core sets `print-color-adjust: exact`
+ to ask browsers to preserve the colours defined by the print styles.
+- Links and body text are greyscaled. Links are still printed: they usually carry
+ the content itself, and a page saved as PDF keeps them clickable.
+
+**Hidden when printing** — action controls and page navigation:
+
+- Buttons: `tedi-button`, button group buttons, `tedi-collapse-button`,
+ `tedi-closing-button`, `tedi-info-button`
+- `header[tedi-header]`, `tedi-footer`, `nav[tedi-sidenav]`
+
+**Visible when printing** — components whose content remains useful in print:
+
+- `tedi-card-button` — keeps the card content visible.
+- `a[tedi-link]` — preserves linked text within the content.
+- `tedi-breadcrumbs` — the trail shows where the printed page came from.
+- Tabs, including the tab list. Hide it with `printVisibility="hide"` on
+ `tedi-tabs-list` if the tabs are pure navigation.
+
+**Expanded when printing** — collapsed content is shown automatically:
+
+- `tedi-accordion` items
+- `tedi-collapse` — the content prints, the toggle button does not
+
+Cards, card headers and alerts print, switching to neutral borders and
+backgrounds rather than disappearing.
+
+**Browser support and page breaks**
+
+Modern browsers support CSS page-break controls, but complex layouts can still
+paginate differently. Firefox continues to track
+[flex layout pagination issues](https://bugzilla.mozilla.org/show_bug.cgi?id=939897).
+Check multi-page content in both Firefox and Chrome print preview, especially
+long flex layouts and tables. If content is clipped or breaks in an awkward
+place, consider simplifying the layout for print or applying break controls to
+smaller sections. See [MDN's `break-inside` reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/break-inside)
+for how break rules are resolved.
+
+## Overriding: the `tediPrint` directive
+
+Apply `tediPrint` directly to an element. It adds the core print classes without
+rendering an additional element.
+
+```html
+
+
Filters, toolbars, anything interactive
+
+
+
+
+
+
+
Stays on one page
+
+```
+
+Note the bare `tediPrint` in the last example: the break inputs only apply when
+the attribute is present.
+
+- `tediPrint`: `show` or `hide` adds `show-print` or `no-print` to the element.
+ `show` overrides `no-print` on the same element; it cannot reveal content inside
+ a hidden parent or make content visible only when printing.
+- `breakBefore`, `breakAfter` and `breakInside` control breaks before, after and
+ inside the element. Supported values are `auto`, `avoid`, `avoid-column`,
+ `avoid-page` and `avoid-region`. These inputs cannot force a new page.