docs(core/content-header): Add docs for content-header responsive behavior

docs/components/application/code.mdx

@@ -18,6 +18,22 @@ The code snippet below shows an example of a combination of different components
 
 <ApplicationPlayground height="30rem" />
 
+## Skip link target
+
+`ix-application` includes a "Skip to main content" link with no configuration required. By default, it focuses the application's internal main region. The basic example above uses `skipLinkTargetId` to focus a specific content boundary instead:
+
+```html
+<ix-application skip-link-target-id="main-content">
+  <ix-application-header name="My Application"></ix-application-header>
+  <ix-menu>...</ix-menu>
+  <ix-content id="main-content">...</ix-content>
+</ix-application>
+```
+
+Pass the target as a bare ID, not as `#main-content` or another CSS selector. The target must be a unique, usable light-DOM descendant of the same `ix-application`. If it cannot be used, the component logs a warning and falls back to the internal main region.
+
+Use `i18nSkipToContent` to localize the link text. Set `disableSkipLink` only when an equivalent document-level bypass link is already available.
+
 ## Breakpoints
 
 <ApplicationBreakpointsPlayground height="30rem" />

docs/components/application/guide.md

@@ -9,7 +9,7 @@ Application is a technical and infrastructural component without a direct visual
 
 The component itself is designed with modularity in mind. It can be seamlessly integrated with other components such as [application header](/docs/components/application-header/guide.md), [application menu](/docs/components/application-menu/guide.md), [content](/docs/components/content/guide.md) and more. This modular approach allows you to mix and match components based on your specific application requirements, providing flexibility and customization options.
 
-It's important to note that the application component focuses solely on layouting and does not dictate visual design.
+The application component primarily manages layout and application-wide behavior.
 
 ## Application example
 
@@ -19,6 +19,23 @@ It's important to note that the application component focuses solely on layoutin
 2. [Application menu](/docs/components/application-menu/guide)
 3. [Content](/docs/components/content/guide)
 
+## Skip link
+
+Application provides a "Skip to main content" link by default. It is the first focusable element within the application shell, remains visually hidden until it receives keyboard focus and lets users bypass repeated content such as the header, search and navigation. Activating the link moves keyboard focus to the destination and scrolls it to the beginning without changing the URL fragment.
+
+Without additional configuration, the link targets the internal main region. Use `skipLinkTargetId` to target a more specific content boundary:
+
+- Provide a bare element ID, without `#` or other CSS selector syntax.
+- The ID must identify one visible, usable light-DOM descendant of the same `ix-application`.
+- Application makes a non-interactive destination programmatically focusable when necessary and preserves an existing `tabindex`.
+- An invalid target produces a console warning and falls back to the internal main region.
+
+The built-in link is the first focusable element owned by `ix-application`. Applications remain responsible for any focusable content rendered before the component in the document.
+
+Use `i18nSkipToContent` to localize the link text. An empty value falls back to "Skip to main content" so the link always has an accessible name.
+
+Only set `disableSkipLink` to `true` when the page provides an equivalent bypass mechanism outside `ix-application`. Disabling it without an alternative makes repeated application-shell content harder to bypass and can cause a WCAG 2.2 [Bypass Blocks](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html) failure.
+
 ## Application switch
 
 ![Application switch and modal](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?type=design&node-id=1665-19417&mode=design&t=I0iEEuzKJJPK4Sum-11)
@@ -40,6 +57,9 @@ We typically avoid opening the same application in multiple browser tabs. Instea
 ## Options
 
 - **forceBreakpoint:** Forces a specific breakpoint "lg", "md" or "sm". This can be used to force a specific application behavior that ignores the current browser viewport width.
+- **skipLinkTargetId:** Sets the ID of a custom light-DOM destination for the built-in skip link.
+- **i18nSkipToContent:** Localizes the built-in skip link text.
+- **disableSkipLink:** Disables the built-in skip link when an equivalent bypass mechanism is available.
 
 ## Behavior
 
@@ -48,3 +68,9 @@ The application component automatically adapts, by default, to three breakpoints
 - "lg" for large screens (min-width 62em)
 - "md" for medium screens (min-width 48em)
 - "sm" for small screens (min-width 36em)
+
+## Related
+
+- [Accessibility](../../guidelines/accessibility)
+- [WCAG 2.2: Bypass Blocks](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html)
+- [W3C Technique G1: Adding a link to main content](https://www.w3.org/WAI/WCAG22/Techniques/general/G1)

docs/components/content-header/code.mdx

@@ -6,6 +6,7 @@ import PropsApi from '@site/docs/autogenerated/api/ix-content-header/api.mdx';
 
 import ContentHeaderPlayground from '@site/docs/autogenerated/playground/content-header.mdx';
 import ContentHeaderNoBackPlayground from '@site/docs/autogenerated/playground/content-header-no-back.mdx';
+import ContentHeaderTruncatePlayground from '@site/docs/autogenerated/playground/content-header-truncate.mdx';
 import ContentHeaderWithSlotPlayground from '@site/docs/autogenerated/playground/content-header-with-slot.mdx';
 
 # Content header - Code
@@ -22,4 +23,10 @@ import ContentHeaderWithSlotPlayground from '@site/docs/autogenerated/playground
 
 <ContentHeaderWithSlotPlayground />
 
+## Truncated text
+
+Titles and subtitles wrap by default when space is limited. Use the explicit truncation option when the header must retain a compact height.
+
+<ContentHeaderTruncatePlayground />
+
 <PropsApi />

docs/components/content-header/guide.md

@@ -40,19 +40,40 @@ Our content header variants makes it easier to achieve a well-balanced visual hi
 	- Elements in the header slot are top aligned by default. Use top margin to center align it with the title.
 - **Cluster action buttons**: Action buttons are automatically aligned to the right. An example for the primary content header has the back button, title and subtitle at the left top corner of the whole page, and the action buttons at the right top corner of the page.
 
+### Responsive text
+
+The title and subtitle wrap onto multiple lines by default when their available space is limited. Wrapping responds to the width of the content header rather than a specific viewport breakpoint, so the same behavior applies in pages, panes, dialogs and other constrained containers.
+
+- Title and subtitle text remain fully visible and can use as many lines as needed.
+- Long text without natural break opportunities wraps when necessary to prevent horizontal overflow.
+- Content in the header slot remains beside the title and aligned with its first line.
+- The back button and action buttons remain aligned with the first title line.
+
+Set the `textOverflow` property to `truncate` only when the header must retain a compact height. In HTML, use `text-overflow="truncate"`. In this mode, the title and subtitle each use a single line and are truncated with an ellipsis when needed. The complete values remain available as native browser tooltips.
+
+### Responsive actions
+
+Action button labels remain on one line and continue to occupy their required width. The content header does not automatically prioritize actions or move them into an overflow menu.
+
+Keep the most important actions visible. When all actions do not fit comfortably, move secondary actions into a consumer-managed overflow menu, for example using the [dropdown](../dropdown) pattern. Test the resulting composition at all supported viewport and container widths to ensure that actions do not overlap the title or subtitle.
+
 ## Dos and Don’ts
 
 <div class="dos-and-donts">
   <div class="dos">
     <ul aria-label="Recommended practices">
       <li>Do use to provide quick access to common tasks for the whole content area</li>
       <li>Do place only items in the header slot that don’t take up too much space, such as a status or a counter</li>
+      <li>Do allow titles and subtitles to wrap when the available width is limited</li>
+      <li>Do move secondary actions into an overflow menu when they compete with important header text</li>
     </ul>
   </div>
   <div class="donts">
     <ul aria-label="Practices to avoid">
       <li>Don’t use a secondary content header as a page title</li>
       <li>Don’t use more than one primary headline in one page</li>
+      <li>Don’t use truncation by default when users need the complete title or subtitle for context</li>
+      <li>Don’t allow action labels to wrap or overlap header text</li>
     </ul>
   </div>
 </div>

docs/guidelines/accessibility/code.md

@@ -245,6 +245,8 @@ The `navigation` role can also be used instead of the `<nav>` element:
 </div>
 ```
 
+When using [Application](../../components/application/guide.md), a built-in "Skip to main content" link lets keyboard and screen reader users bypass repeated application-shell content. It is enabled by default and targets the internal main region. Configure `skipLinkTargetId` with the bare ID of a light-DOM descendant when another content boundary is more appropriate. Only disable the built-in link when the document provides an equivalent bypass mechanism.
+
 ### Lists
 
 Lists must be correctly structured to be recognized by screen readers. This means that parent (`<ul>` or `<ol>`) must be directly followed by `<li>` and no other content element is allowed to be in-between.

docs/guidelines/accessibility/overview.md

@@ -143,7 +143,7 @@ Navigation aids help users find content and understand their location within you
 - Use headings properly (`<h1>` ... `<h6>`)
 - Provide descriptive page titles
 - Provide clear link text
-- Provide links to skip blocks
+- Provide links to skip repeated blocks. [Application](../../components/application/guide.md) includes a "Skip to main content" link by default.
 - Provide a search function
 - Reduce the use of text styles and decorations