fix(sw): widen the step header text logo to its content

- SWProcessHeader logoText: at least 58px and as wide as the text,
  instead of a fixed 58px place that cut longer words (home >= 106px)
- Align JSDoc (SWHeader, SWViewerHeader, SWProcessHeader) and docs with
  the content-width logo slot: DESIGN_RULES §1 common rule and §14,
  COMPONENT_CATALOG, VIEWER.md, SW Header / Step Header specs
- No prop or public API change

packages/sw/src/components/sw-header/types.ts

@@ -348,7 +348,8 @@ export interface SWHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"
   defaultHomeMenuOpen?: boolean
   onHomeMenuOpenChange?: (open: boolean, reason: SWHeaderHomeMenuChangeReason) => void
   /**
-   * Logo image URL of the SW program, contained in the 32 x 17 logo slot.
+   * Logo image URL of the SW program, 17px high at its own ratio in the logo slot (32 x 17 is the Figma example, not a
+   * fixed size); the home and its slant follow the logo width (12 + logo + 36).
    * The logo is decided by each program: none is rendered when omitted.
    */
   logoSrc?: string

packages/sw/src/components/sw-process-header/types.ts

@@ -84,7 +84,7 @@ export interface SWProcessHeaderProps extends Omit<HTMLAttributes<HTMLElement>,
   onDocumentClick?: () => void
   /** Logo element in the SWHeader logo slot (17px high, as wide as the logo: 32 x 17 -> home 80px). Takes precedence over `logoText` and `logoSrc`. */
   logo?: ReactNode
-  /** Text logo (e.g. `StrAna`): 18px 700 with the SW text outline in a 58px place (home 106px). */
+  /** Text logo (e.g. `StrAna`): 18px 700 with the SW text outline in a place of at least 58px (home at least 106px); a longer text widens the place and the home to its own width, never cut. */
   logoText?: string
   /** Logo image URL, contained (ratio kept, centered) in the logo slot. */
   logoSrc?: string

packages/sw/src/components/sw-viewer/SWViewerHeader.tsx

@@ -13,8 +13,9 @@ import "../../theme/sw-viewer.css"
 
 export interface SWViewerHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
   /**
-   * Logo image URL of the program (same prop as SWHeader), contained in the SWHeader 32 x 17 logo slot, 12px from
-   * the header's left edge and vertically centered on the slanted green cap.
+   * Logo image URL of the program (same prop as SWHeader), 17px high at its own ratio in the SWHeader logo slot (32 x 17
+   * is an example, not a fixed size), 12px from the header's left edge and vertically centered on the slanted green
+   * cap, which follows the logo width.
    * The logo belongs to each program: nothing is rendered when omitted (no default text or icon) and there is no cap
    * either (2026-10-23, also with `onHomeClick` / `logoMenu`, which then have no trigger).
    */

packages/sw/src/theme/sw-process-header.css

@@ -111,12 +111,15 @@
 /* Logo and file name follow SWHeader (2026-11-03, both appearances): SWHeaderHome as it is (logo slot as wide as the
    logo, 32 x 17 example -> home 80, 12px padding, slant), the file name 2px after the home overlap (SWHeader bar gap)
    with the SW padding 5 / 12 and font. Only the file-name width stays per appearance. The text logo (`logoText`) is
-   18px 700 in a 58px place; a wider word overflows that place evenly on both sides, like the Strana centered content. */
+   18px 700 in a place of at least 58px (-> home 106); a wider word widens the place to its own width (2026-11-05, was
+   a fixed 58px that a longer word overflowed on both sides and the home cut on the left), so the home, its slant and
+   the file name follow it like any wider logo. */
 .hm-sw-process-header__bar > .hm-sw-header__home { margin-right: -15px; }
 .hm-sw-process-header__wordmark {
   display: flex;
   justify-content: center;
-  width: 58px;
+  width: max-content;
+  min-width: 58px;
   color: var(--hm-sw-header-text-color);
   font-size: 18px;
   font-weight: 700;