docs: show angular code examples without unnecessary brackets

[anneke]

Summary

After talking to a developer for MORIS, it was pointed out that in the Angular code examples, there is a lot of use of brackets for attributes that don't need logic settings (like button variants, sizes).

Related issue

N/A

Type of change

• Fix
• New feature / variant
• Breaking change
• Docs / repo tooling (no package code changed)
• Chore / refactor

Checklist

• pnpm build, pnpm lint, and pnpm format pass
• Storybook story added/updated to cover the change (variants, sizes, states)
• Changeset added (pnpm changeset) — required for any change to @surfnet/curve-react or @surfnet/curve-angular; N/A for docs/CI-only changes
• React and Angular kept in parity, if applicable (contract updated in @surfnet/curve-contracts)

[github-actions]

♿ Accessibility audit — WCAG 2.2 AA

⚠️ 114 finding(s) — 114 contrast (per theme·mode), 0 theme-independent · across 358 stories / 10024 audited combinations. Report-only — does not block merge.

⏭️ 37 story(ies) safe to skip in manual review — color-contrast only

• @surfnet/curve-angular → Alert → Danger
• @surfnet/curve-angular → Alert → Variants
• @surfnet/curve-angular → Badge → Default
• @surfnet/curve-angular → Badge → Status List
• @surfnet/curve-angular → Badge → Variants
• @surfnet/curve-angular → Button → Default
• @surfnet/curve-angular → Button → Sizes
• @surfnet/curve-angular → Button → Variants
• @surfnet/curve-angular → Button → With Icon
• @surfnet/curve-angular → Calendar → Default
• @surfnet/curve-angular → Calendar → Multiple
• @surfnet/curve-angular → DataTable → Custom Toolbar
• @surfnet/curve-angular → Empty → Default
• @surfnet/curve-angular → Empty → With Multiple Actions
• @surfnet/curve-angular → Item → With Header And Footer
• @surfnet/curve-angular → Pagination → Numbered Pagination
• @surfnet/curve-angular → Sidebar → Default
• @surfnet/curve-angular → Tabs → Default
• @surfnet/curve-react → Alert → Danger
• @surfnet/curve-react → Alert → Variants
• @surfnet/curve-react → Badge → Default
• @surfnet/curve-react → Badge → Status List
• @surfnet/curve-react → Badge → Variants
• @surfnet/curve-react → Button → Default
• @surfnet/curve-react → Button → Sizes
• @surfnet/curve-react → Button → Variants
• @surfnet/curve-react → Button → With Icon
• @surfnet/curve-react → Calendar → Dropdown Caption
• @surfnet/curve-react → Calendar → In Card
• @surfnet/curve-react → Calendar → Single
• @surfnet/curve-react → Card → Default
• @surfnet/curve-react → DataTable → Custom Toolbar
• @surfnet/curve-react → Empty → Default
• @surfnet/curve-react → Empty → With Multiple Actions
• @surfnet/curve-react → Item → With Header And Footer
• @surfnet/curve-react → Sidebar → Default
• @surfnet/curve-react → Tabs → Default

@surfnet/curve-angular — 90 finding(s)

Alert — 6 finding(s) · color-contrast only

Danger — 3 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • dark — #a3a3a3 on #721c18 · ratio 4.39 — color-contrast (1.4.3)
    
• shadcn-default
  • dark — #a3a3a3 on #721c18 · ratio 4.39 — color-contrast (1.4.3)
    
• shadcn-default-grey-background
  • dark — #a3a3a3 on #721c18 · ratio 4.39 — color-contrast (1.4.3)
    

Variants — 3 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • dark — #a3a3a3 on #01653d · ratio 2.84 — color-contrast (1.4.3)
    
• shadcn-default
  • dark — #a3a3a3 on #01653d · ratio 2.84 — color-contrast (1.4.3)
    
• shadcn-default-grey-background
  • dark — #a3a3a3 on #01653d · ratio 2.84 — color-contrast (1.4.3)
    

Badge — 3 finding(s) · color-contrast only

Default — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Status List — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Variants — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Button — 4 finding(s) · color-contrast only

Default — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Sizes — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Variants — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

With Icon — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Calendar — 56 finding(s) · color-contrast only

Default — 28 finding(s) · color-contrast only — skippable

• default
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• groenvermogen-nkph2
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
    
• shadcn-default
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
    
• shadcn-default-grey-background
  • light — #a4a4a4 on #f5f5f5 · ratio 2.28 — color-contrast (1.4.3)
    
  • dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
    
• surf-blue-purple
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-blue-turquoise
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-blue-yellow
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-green
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-orange
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-orange-turquoise
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-pilot
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-purple
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-purple-orange
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-yellow
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    

Multiple — 28 finding(s) · color-contrast only — skippable

• default
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• groenvermogen-nkph2
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
    
• shadcn-default
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
    
• shadcn-default-grey-background
  • light — #a4a4a4 on #f5f5f5 · ratio 2.28 — color-contrast (1.4.3)
    
  • dark — #575757 on #0a0a0a · ratio 2.73 — color-contrast (1.4.3)
    
• surf-blue-purple
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-blue-turquoise
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-blue-yellow
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-green
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-orange
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-orange-turquoise
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-pilot
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-purple
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-purple-orange
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    
• surf-yellow
  • light — #a9a9a9 on #ffffff · ratio 2.35 — color-contrast (1.4.3)
    
  • dark — #6f6f6f on #0a0a0a · ratio 3.94 — color-contrast (1.4.3)
    

DataTable — 1 finding(s) · color-contrast only

Custom Toolbar — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Empty — 2 finding(s) · color-contrast only

Default — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

With Multiple Actions — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Item — 1 finding(s) · color-contrast only

With Header And Footer — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Pagination — 14 finding(s) · color-contrast only

Numbered Pagination — 14 finding(s) · color-contrast only — skippable

• default
  • dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
    
• groenvermogen-nkph2
  • dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
    
• shadcn-default
  • dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
    
• shadcn-default-grey-background
  • dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
    
• surf-blue-purple
  • dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
    
• surf-blue-turquoise
  • dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
    
• surf-blue-yellow
  • dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
    
• surf-green
  • dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
    
• surf-orange
  • dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
    
• surf-orange-turquoise
  • dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
    
• surf-pilot
  • dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
    
• surf-purple
  • dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
    
• surf-purple-orange
  • dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
    
• surf-yellow
  • dark — #4a5565 on #0a0a0a · ratio 2.61 — color-contrast (1.4.3)
    

Sidebar — 2 finding(s) · color-contrast only

Default — 2 finding(s) · color-contrast only — skippable

• surf-blue-yellow
  • dark — #fafafa on #8a7900 · ratio 4.17 — color-contrast (1.4.3)
    
• surf-yellow
  • dark — #fafafa on #8a7900 · ratio 4.17 — color-contrast (1.4.3)
    

Tabs — 1 finding(s) · color-contrast only

Default — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

---

@surfnet/curve-react — 24 finding(s)

Alert — 6 finding(s) · color-contrast only

Danger — 3 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • dark — #a3a3a3 on #721c18 · ratio 4.39 — color-contrast (1.4.3)
    
• shadcn-default
  • dark — #a3a3a3 on #721c18 · ratio 4.39 — color-contrast (1.4.3)
    
• shadcn-default-grey-background
  • dark — #a3a3a3 on #721c18 · ratio 4.39 — color-contrast (1.4.3)
    

Variants — 3 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • dark — #a3a3a3 on #01653d · ratio 2.84 — color-contrast (1.4.3)
    
• shadcn-default
  • dark — #a3a3a3 on #01653d · ratio 2.84 — color-contrast (1.4.3)
    
• shadcn-default-grey-background
  • dark — #a3a3a3 on #01653d · ratio 2.84 — color-contrast (1.4.3)
    

Badge — 3 finding(s) · color-contrast only

Default — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Status List — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Variants — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Button — 4 finding(s) · color-contrast only

Default — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Sizes — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Variants — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

With Icon — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Calendar — 3 finding(s) · color-contrast only

Dropdown Caption — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

In Card — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Single — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Card — 1 finding(s) · color-contrast only

Default — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

DataTable — 1 finding(s) · color-contrast only

Custom Toolbar — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Empty — 2 finding(s) · color-contrast only

Default — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

With Multiple Actions — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Item — 1 finding(s) · color-contrast only

With Header And Footer — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Sidebar — 2 finding(s) · color-contrast only

Default — 2 finding(s) · color-contrast only — skippable

• surf-blue-yellow
  • dark — #fafafa on #8a7900 · ratio 4.17 — color-contrast (1.4.3)
    
• surf-yellow
  • dark — #fafafa on #8a7900 · ratio 4.17 — color-contrast (1.4.3)
    

Tabs — 1 finding(s) · color-contrast only

Default — 1 finding(s) · color-contrast only — skippable

• groenvermogen-nkph2
  • light — #fafafa on #84cc16 · ratio 1.89 — color-contrast (1.4.3)
    

Automated axe covers ~30–50% of WCAG 2.2 AA. Keyboard, screen-reader and reflow checks still need a manual pass. Full per-story JSON is in the run’s a11y-reports artifact.