feat(fp): WP-10 — CIBG button fidelity

Fix button atom's dead .btn-outline-primary → .btn-secondary; add 'ghost'
variant (.btn-ghost, CIBG-documented). RTE toolbar drops invented
.btn-outline-secondary/.btn-sm for .btn-ghost. file-input already used the
correct vendored .btn-upload pattern from the earlier CIBG UI fidelity
pass — no change needed there (documented as a deviation).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

docs/backlog/WP-10-button-fidelity.md

@@ -1,8 +1,17 @@
 # WP-10 — CIBG button fidelity
 
-Status: todo
+Status: done (<pending commit>)
 Phase: 2 — CIBG fidelity
 
+> **Deviation:** file-input's label-button was already reworked to `.btn-primary
+> .btn-upload` by the earlier out-of-order "CIBG UI fidelity pass" (WP-11/12) — the
+> vendored upload vocabulary (`.btn-upload`) supersedes this WP's original
+> `.btn-secondary` assumption, so no change was needed there. Icon affordances
+> (chevron/pijl classes) are verified present in the vendored CSS, but no in-scope
+> button (atom, file-input, RTE toolbar) currently has a next/previous affordance to
+> attach one to — skipped as not applicable, not recorded as a gap (nothing hand-rolled
+> to mark).
+
 ## Why
 
 The vendored CIBG build ships `.btn-primary / .btn-secondary / .btn-danger / .btn-ghost /
@@ -46,9 +55,9 @@ and render as unstyled Bootstrap defaults instead of CIBG buttons.
 
 ## Acceptance criteria
 
-- [ ] `grep -rn "btn-outline\|btn-sm" src/app` → empty.
-- [ ] Button story shows all CIBG variants incl. ghost; visuals match the design system.
-- [ ] Axe still green (contrast can change with real button styles).
+- [x] `grep -rn "btn-outline\|btn-sm" src/app` → empty.
+- [x] Button story shows all CIBG variants incl. ghost; visuals match the design system.
+- [x] Axe still green (contrast can change with real button styles).
 
 ## Verification
 

src/app/shared/ui/button/button.component.ts

@@ -1,6 +1,6 @@
 import { Component, input } from '@angular/core';
 
-type Variant = 'primary' | 'secondary' | 'subtle' | 'danger';
+type Variant = 'primary' | 'secondary' | 'subtle' | 'danger' | 'ghost';
 
 /** Atom: button. Thin wrapper over the CIBG/Bootstrap button CSS. */
 @Component({
@@ -11,9 +11,10 @@ type Variant = 'primary' | 'secondary' | 'subtle' | 'danger';
       [disabled]="disabled()"
       class="btn"
       [class.btn-primary]="variant() === 'primary'"
-      [class.btn-outline-primary]="variant() === 'secondary'"
+      [class.btn-secondary]="variant() === 'secondary'"
       [class.btn-link]="variant() === 'subtle'"
       [class.btn-danger]="variant() === 'danger'"
+      [class.btn-ghost]="variant() === 'ghost'"
     >
       <ng-content />
     </button>

src/app/shared/ui/button/button.stories.ts

@@ -16,4 +16,5 @@ export const Primary: Story = { args: { variant: 'primary' } };
 export const Secondary: Story = { args: { variant: 'secondary' } };
 export const Subtle: Story = { args: { variant: 'subtle' } };
 export const Danger: Story = { args: { variant: 'danger' } };
+export const Ghost: Story = { args: { variant: 'ghost' } };
 export const Disabled: Story = { args: { variant: 'primary', disabled: true } };

src/app/shared/ui/rich-text-editor/rich-text-editor.component.ts

@@ -95,7 +95,7 @@ export interface PlaceholderOption {
       <div class="rte-toolbar" role="toolbar" [attr.aria-label]="toolbarLabel()">
         <button
           type="button"
-          class="btn btn-outline-secondary btn-sm"
+          class="btn btn-ghost"
           (mousedown)="$event.preventDefault()"
           (click)="format('bold')"
           [attr.aria-label]="boldLabel()"
@@ -104,7 +104,7 @@ export interface PlaceholderOption {
         </button>
         <button
           type="button"
-          class="btn btn-outline-secondary btn-sm"
+          class="btn btn-ghost"
           (mousedown)="$event.preventDefault()"
           (click)="format('italic')"
           [attr.aria-label]="italicLabel()"
@@ -113,7 +113,7 @@ export interface PlaceholderOption {
         </button>
         <button
           type="button"
-          class="btn btn-outline-secondary btn-sm"
+          class="btn btn-ghost"
           (mousedown)="$event.preventDefault()"
           (click)="format('underline')"
           [attr.aria-label]="underlineLabel()"
@@ -123,7 +123,7 @@ export interface PlaceholderOption {
         <span class="rte-sep" aria-hidden="true"></span>
         <button
           type="button"
-          class="btn btn-outline-secondary btn-sm"
+          class="btn btn-ghost"
           (mousedown)="$event.preventDefault()"
           (click)="list('bullet')"
           [attr.aria-label]="bulletListLabel()"
@@ -132,7 +132,7 @@ export interface PlaceholderOption {
         </button>
         <button
           type="button"
-          class="btn btn-outline-secondary btn-sm"
+          class="btn btn-ghost"
           (mousedown)="$event.preventDefault()"
           (click)="list('number')"
           [attr.aria-label]="numberListLabel()"