From c30dabd1fa6a338f1a8be6b8bcfc062cd2a445df Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Tue, 28 Jul 2026 10:59:44 +0200
Subject: [PATCH 01/42] chore: create component development skill

---
 .../CONTRACT.md                               | 211 +++++
 .../catalyst-component-development/SKILL.md   | 178 ++++
 .../stenciljs-component-development/SKILL.md  | 866 ++++++++++++++++++
 3 files changed, 1255 insertions(+)
 create mode 100644 .agents/skills/catalyst-component-development/CONTRACT.md
 create mode 100644 .agents/skills/catalyst-component-development/SKILL.md
 create mode 100644 .agents/skills/stenciljs-component-development/SKILL.md

diff --git a/.agents/skills/catalyst-component-development/CONTRACT.md b/.agents/skills/catalyst-component-development/CONTRACT.md
new file mode 100644
index 00000000..27a43c56
--- /dev/null
+++ b/.agents/skills/catalyst-component-development/CONTRACT.md
@@ -0,0 +1,211 @@
+# Catalyst Component Contract
+
+Every rule here is part of the **contract** — the public API surface that
+propagates into Angular and all consumer apps the moment it ships.
+
+---
+
+## Props (@Prop)
+
+- Every prop has a JSDoc comment describing what it does (not what type it is —
+  TypeScript already says that).
+- Boolean props default to `false`. Never default to `true`.
+- Use union string literals for enums: `'xs' | 's' | 'm' | 'l' | 'xl'`.
+  Do not use TypeScript enums — they don't serialize cleanly to HTML attributes.
+- Accessibility props use the `a11y-` attribute prefix:
+  `@Prop({ attribute: 'a11y-label' }) a11yLabel?: string`
+- Pass-through props for native element attributes use `nativeAttributes`:
+  `@Prop() nativeAttributes?: { [key: string]: string }`. Never add a new prop
+  just to expose a single native attribute — use `nativeAttributes` instead.
+- `testId` is a standard prop on every interactive component. It maps to
+  `data-test` on the native element. Copy the pattern from `cat-button`.
+- Props that depend on a breakpoint accept `boolean | Breakpoint`. See
+  `cat-button`'s `iconOnly` prop for the full pattern including `@Watch` and
+  `MediaMatcher` teardown.
+- Never make a prop `mutable: true` unless there is no alternative. Prefer
+  emitting an event and letting the parent update the prop.
+
+## Events (@Event)
+
+- All event names are prefixed `cat`: `catClick`, `catChange`, `catFocus`, `catBlur`.
+- Event payload is typed, never `any`: `EventEmitter<MouseEvent>`, `EventEmitter<string>`, etc.
+- Focus/blur events use `FocusEvent` as payload. Click uses `MouseEvent`.
+- Change events on form inputs carry the new value: `EventEmitter<string | boolean | number>`.
+- Every event has a JSDoc comment.
+
+## CSS Parts (@part)
+
+- Declare every exposed part in the component-level JSDoc with `@part <name> - description`.
+- Add `part="<name>"` to the corresponding element in the render output.
+- Parts are the official theming extension point. Expose at minimum:
+  the root interactive element (e.g. `button`, `input`) and any significant
+  sub-regions consumers might need to target.
+- Never expose internal implementation details as parts. Only expose stable,
+  intentional extension points.
+
+## Slots
+
+- Declare named slots in the component JSDoc with `@slot <name> - description`.
+- The default slot requires no `@slot` declaration unless its purpose is non-obvious.
+- Check `this.hostElement.hasChildNodes()` in `componentWillRender()` to detect
+  slotted content presence. Store in a `@State` to trigger re-render.
+  See `cat-button`'s `hasSlottedContent` pattern.
+
+## Public methods (@Method)
+
+- All `@Method()` functions are `async` and return `Promise<void>` or a typed Promise.
+- Use `do` prefix for imperative actions: `doFocus()`, `doBlur()`, `doClick()`.
+- Document with JSDoc including what the method does and any caveats.
+
+## Shadow DOM
+
+- Always `shadow: true`. Never `scoped: true` for Catalyst components.
+- Use `shadow: { delegatesFocus: true }` for any component that wraps a native
+  focusable element (`input`, `button`, `a`, `textarea`, `select`).
+- `@Element() hostElement!: HTMLElement` — always name it `hostElement`.
+- Set `tabIndex` on the host element in `render()` for keyboard-navigable
+  components. Copy the pattern from `cat-button`:
+  `this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0`
+
+## SCSS and tokens
+
+**Imports** — every component SCSS starts with:
+```scss
+@use 'variables' as *;
+@use 'mixins' as *;
+```
+Never use `@import`. Never use a relative path to `_variables.tokens.scss` directly.
+
+**Token accessor** — use `cat-token('dot.separated.path')` for all design tokens:
+```scss
+color: cat-token('color.ui.font.default');
+border-radius: cat-border-radius('m');  // 'xs'|'s'|'m'|'l'|'xl'|'full'|0
+```
+
+**RGB partial tokens** — color tokens resolve to bare RGB partials, not `#hex`.
+Wrap them correctly:
+```scss
+// Direct use (results in rgb(...)):
+background: cat-token('color.theme.primary.bg');
+
+// With opacity:
+background: cat-token('color.theme.primary.bg', 0.5);
+
+// In CSS custom property chains (avoid wrapping prematurely):
+--bg: #{cat-token('color.theme.primary.bg', $wrap: false)};
+background: cat-token-wrap(var(--bg));
+```
+
+**Typography** — use mixins, never hardcode font-size or line-height:
+```scss
+@include cat-body('m');     // body text, medium size
+@include cat-body('s');     // body text, small
+@include cat-head('l');     // heading, large
+```
+
+**Available mixins quick-reference:**
+| mixin | use |
+|---|---|
+| `cat-body($size)` | body font-size + line-height + weight |
+| `cat-head($size)` | heading font-size + line-height + weight |
+| `cat-ellipsis()` / `cat-ellipsis($n)` | single-line / multi-line truncation |
+| `cat-break-word` | word-wrap for long strings |
+| `cat-visually-hidden` | accessible hide (screen-reader visible) |
+| `cat-select(none)` | disable user selection |
+| `cat-font-smooth` | antialiasing for filled/inverted text |
+| `cat-border-radius($size)` | border-radius from token scale |
+
+**`:host` display** — set `display` on `:host` to whatever the component needs
+(`block`, `inline-block`, `flex`). The bootstrap skeleton in SKILL.md Step 2
+defaults to `block`; change it if the component requires otherwise.
+
+Use `:host(.<class>)` selectors for consumer-applied variant classes (see
+`cat-button`'s `.cat-tab`, `.cat-nav-item` patterns).
+
+**No hardcoded values** — never write:
+- A hex color or `rgb()` — use `cat-token('color.*')`
+- A border-radius pixel value — use `cat-border-radius()`
+- A transition duration literal — use `cat-token('time.transition.*')`
+
+## Three test files
+
+**`cat-<name>.spec.tsx`** — unit test using `@stencil/vitest` + `vitest`.
+Tests shadow DOM render output for the default state and key prop combinations.
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { render } from '@stencil/vitest';
+import { h } from '@stencil/core';
+import './cat-<name>';
+
+describe('cat-<name>', () => {
+  it('renders', async () => {
+    const { root } = await render(<cat-<name> />);
+    await expect(root.shadowRoot).toEqualHtml(`...`);
+  });
+});
+```
+
+**`cat-<name>.e2e.tsx`** — integration test using `@stencil/vitest`.
+Tests hydration and user interactions (clicks, events, keyboard).
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { render, h } from '@stencil/vitest';
+
+describe('cat-<name>', () => {
+  it('renders', async () => {
+    const { root } = await render(<cat-<name> />);
+    await expect.element(root).toHaveClass('hydrated');
+  });
+});
+```
+
+**`cat-<name>.screenshot.tsx`** — visual regression using `@vitest/browser/context`.
+Tests all meaningful visual states: default, hover, active, disabled, each
+variant/color combination. Use `toMatchScreenshot()`.
+
+```typescript
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, h } from '@stencil/vitest';
+import { page } from '@vitest/browser/context';
+
+describe('cat-<name>', () => {
+  afterEach(async () => {
+    await page.elementLocator(document.body).hover(); // reset hover state
+  });
+
+  it('default', async () => {
+    const { root } = await render(
+      <div style={{ padding: '10px', display: 'inline-block' }}>
+        <cat-<name> />
+      </div>
+    );
+    await expect(root).toMatchScreenshot();
+  });
+});
+```
+
+Screenshot tests always wrap the component in a `<div style={{ padding: '10px', display: 'inline-block' }}>`.
+Always reset hover state in `afterEach`.
+
+## Angular binding side-effects
+
+The Angular output target (`angular/`) is generated by the Stencil build from
+`core/`. Never edit files in `angular/` by hand.
+
+**Breaking contract changes** (require a major version bump):
+- Removing a prop
+- Renaming a prop
+- Changing a prop's type in a non-additive way
+- Removing or renaming an event
+- Removing a CSS part
+
+**Non-breaking additions** (minor version bump, handled by release-please):
+- New prop with a default value
+- New event
+- New CSS part
+- New slot
+
+When making a breaking change: flag it in the PR description and in the commit
+message with `BREAKING CHANGE:`.
diff --git a/.agents/skills/catalyst-component-development/SKILL.md b/.agents/skills/catalyst-component-development/SKILL.md
new file mode 100644
index 00000000..4a81b6bc
--- /dev/null
+++ b/.agents/skills/catalyst-component-development/SKILL.md
@@ -0,0 +1,178 @@
+---
+name: catalyst-component-development
+description: >
+  Use when creating a new cat-* component, modifying an existing one, adding or
+  changing props or events, or touching component styles in
+  core/src/components/.
+---
+
+# Catalyst Component Development
+
+> **Requires:** load the `stenciljs-component-development` skill alongside this
+> one. This skill covers Catalyst-specific rules only — Stencil decorator syntax,
+> lifecycle methods, and JSX are assumed knowledge from that skill. Both skills
+> are available in `.agents/skills/`.
+
+The **contract** is the leading word for this skill. Every `cat-*` component
+exposes a public contract — props, events, CSS parts, slots — that propagates
+into Angular bindings and all consumer apps the moment it ships. Work that
+respects the contract is safe. Work that breaks it requires a major version bump
+across all five packages. Keep this in mind on every decision below.
+
+---
+
+## Entry point
+
+**Creating a new component** → start at Step 1.  
+**Modifying an existing component** → skip to Step 3. Steps 1–2 don't apply.
+
+---
+
+## Step 1 — Scaffold the component directory
+
+Create `core/src/components/cat-<name>/` with exactly these six files:
+
+```
+cat-<name>/
+  cat-<name>.tsx           # component implementation
+  cat-<name>.scss          # styles
+  cat-<name>.spec.tsx      # unit test (shadow DOM render assertions)
+  cat-<name>.e2e.tsx       # integration test (hydration, interaction)
+  cat-<name>.screenshot.tsx # visual regression test (toMatchScreenshot)
+  readme.md                # auto-generated — leave as empty placeholder
+```
+
+No other files. No `.css`. No subdirectories. No `index.ts`.
+
+**Naming rules:**
+- Tag: `cat-<name>` (kebab-case, always `cat-` prefix)
+- Class: `Cat<Name>` (PascalCase)
+- Files: match the tag exactly
+
+**Completion criterion:** all six files exist, no extras.
+
+---
+
+## Step 2 — Bootstrap the component skeleton
+
+Start `.tsx` from this skeleton, preserving member order exactly:
+
+```typescript
+import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';
+
+/**
+ * One-sentence description of what this component is for.
+ *
+ * @part <part-name> - Description of each exposed CSS part.
+ * @slot <slot-name> - Description of each named slot (omit if default slot only).
+ */
+@Component({
+  tag: 'cat-<name>',
+  styleUrl: 'cat-<name>.scss',
+  shadow: true
+})
+export class Cat<Name> {
+  // 1. Private instance fields
+  // 2. @Element() hostElement!: HTMLElement;
+  // 3. @State() (alphabetical)
+  // 4. @Prop() + immediate @Watch() (alphabetical)
+  // 5. @Event() (alphabetical)
+  // 6. Lifecycle methods (natural order)
+  // 7. @Listen()
+  // 8. @Method() (alphabetical)
+  // 9. Private methods
+  // 10. render() — always last
+
+  render() {
+    return (
+      <Host>
+        <slot></slot>
+      </Host>
+    );
+  }
+}
+```
+
+Bootstrap `.scss` with the standard imports and `:host` block:
+
+```scss
+@use 'variables' as *;
+@use 'mixins' as *;
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+```
+
+**Completion criterion:** skeleton compiles (`pnpm --filter @haiilo/catalyst build` exits 0).
+
+---
+
+## Step 3 — Implement the contract
+
+Implement props, events, slots, and methods according to the requirements. Apply
+every rule in [CONTRACT.md](CONTRACT.md) while writing. The contract rules are
+not optional — each one is a hard constraint, not a suggestion.
+
+**Completion criterion:** run `pnpm --filter @haiilo/catalyst build`. It must
+exit 0 with no TypeScript errors. Every prop and event in the requirements has
+an implementation, a JSDoc comment, and a matching entry in the done checklist.
+
+---
+
+## Step 4 — Style with SCSS and tokens
+
+Write styles in `cat-<name>.scss`. Apply every rule in [CONTRACT.md](CONTRACT.md)
+under the SCSS section while writing.
+
+**Completion criterion:** no hardcoded colors, no hardcoded radii, no hardcoded
+transition durations. Every value that has a token uses the token.
+Run `pnpm --filter @haiilo/catalyst build` to confirm no SCSS errors.
+
+---
+
+## Step 5 — Write three tests
+
+Every component requires all three test files. See [CONTRACT.md](CONTRACT.md)
+for what belongs in each.
+
+Run `pnpm --filter @haiilo/catalyst test` and confirm all three files pass.
+
+**Completion criterion:** spec, e2e, and screenshot tests all pass. Zero skipped tests.
+
+---
+
+## Step 6 — Verify Angular bindings
+
+Run both builds regardless of whether you think the contract changed:
+
+1. `pnpm --filter @haiilo/catalyst build`
+2. `pnpm --filter @haiilo/catalyst-angular build`
+
+Inspect `angular/projects/catalyst-components/src/directives/` — any new or
+modified props and events must appear in the generated directive. Never edit
+files in `angular/` by hand. For breaking change rules see [CONTRACT.md](CONTRACT.md).
+
+**Completion criterion:** both builds exit 0. Generated directive reflects the
+current component contract.
+
+---
+
+## Step 7 — Done checklist
+
+Before considering the work complete, verify every item:
+
+- [ ] Six files present, no extras
+- [ ] Member order matches the skeleton (props before events, lifecycle before methods, render last)
+- [ ] Every public prop and event has a JSDoc comment
+- [ ] `@part` declarations in the component JSDoc match every `part="..."` in the render output
+- [ ] No hardcoded color, radius, or transition value in SCSS — all via tokens
+- [ ] `:host([hidden]) { display: none; }` present in SCSS
+- [ ] Three test files pass (`pnpm --filter @haiilo/catalyst test`)
+- [ ] Angular build passes (`pnpm --filter @haiilo/catalyst-angular build`)
+- [ ] No `as any`, `@ts-ignore`, or empty catch blocks introduced
+- [ ] `readme.md` is present (content auto-generated on build; placeholder is fine)
diff --git a/.agents/skills/stenciljs-component-development/SKILL.md b/.agents/skills/stenciljs-component-development/SKILL.md
new file mode 100644
index 00000000..4765c44b
--- /dev/null
+++ b/.agents/skills/stenciljs-component-development/SKILL.md
@@ -0,0 +1,866 @@
+---
+name: stenciljs-component-development
+description: Use when creating or modifying Stencil.js web components. Ensures components follow Stencil best practices, proper decorator usage, lifecycle methods, and TypeScript conventions.
+allowed-tools:
+  - Read
+  - Write
+  - Edit
+  - Bash
+  - Grep
+  - Glob
+---
+
+# Stencil.js - Component Development
+
+Build scalable, enterprise-ready web components using Stencil.js with TypeScript and Web Component standards. Stencil components are framework-agnostic and can be distributed to React, Angular, Vue, and traditional web applications.
+
+## Key Concepts
+
+### Component Structure
+
+A Stencil component is a TypeScript class decorated with `@Component()`:
+
+```typescript
+import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';
+
+@Component({
+  tag: 'my-component',
+  styleUrl: 'my-component.css',
+  shadow: true,
+})
+export class MyComponent {
+  @Prop() name: string;
+  @State() isActive: boolean = false;
+  
+  render() {
+    return (
+      <div>
+        <p>Hello, {this.name}!</p>
+      </div>
+    );
+  }
+}
+```
+
+### Component Decorator Options
+
+```typescript
+@Component({
+  tag: 'my-component',              // Required: Custom element tag name (must contain hyphen)
+  styleUrl: 'my-component.css',     // Single stylesheet
+  styleUrls: {                      // Multiple stylesheets for different modes
+    ios: 'my-component.ios.css',
+    md: 'my-component.md.css'
+  },
+  shadow: true,                     // Use Shadow DOM (recommended)
+  scoped: false,                    // Scoped CSS without Shadow DOM
+  assetsDirs: ['assets'],           // Asset directories to copy
+  formAssociated: false,            // Form-associated custom element
+})
+```
+
+## Decorators
+
+### @Prop() - Component Properties
+
+Public properties exposed as attributes:
+
+```typescript
+// Basic prop
+@Prop() name: string;
+
+// With default value
+@Prop() size: 'small' | 'medium' | 'large' = 'medium';
+
+// Mutable prop (can be changed internally)
+@Prop({ mutable: true }) value: string;
+
+// Reflect to attribute (sync prop changes to DOM attribute)
+@Prop({ reflect: true }) active: boolean;
+
+// Attribute name different from property name
+@Prop({ attribute: 'data-id' }) dataId: string;
+```
+
+**Best Practices:**
+- Always type your props
+- Use JSDoc comments for public API documentation
+- Set sensible defaults when appropriate
+- Use `reflect: true` sparingly (performance cost)
+
+### @State() - Internal State
+
+Private state that triggers re-renders when changed:
+
+```typescript
+@State() isOpen: boolean = false;
+@State() items: string[] = [];
+
+// Updating state triggers re-render
+this.isOpen = true;
+```
+
+**Important:**
+- State is internal only, not exposed as attributes
+- Mutating arrays/objects directly won't trigger re-render
+- Use immutable patterns for complex state
+
+### @Watch() - Property Change Handlers
+
+Watch for prop or state changes:
+
+```typescript
+@Prop() value: string;
+
+@Watch('value')
+valueChanged(newValue: string, oldValue: string) {
+  console.log(`Value changed from ${oldValue} to ${newValue}`);
+  this.validateValue(newValue);
+}
+
+// Place @Watch() immediately after the prop it watches
+@Prop() swipeEnabled: boolean = true;
+
+@Watch('swipeEnabled')
+swipeEnabledChanged(newSwipeEnabled: boolean, oldSwipeEnabled: boolean) {
+  this.updateState();
+}
+```
+
+### @Event() - Custom Events
+
+Emit custom events:
+
+```typescript
+@Event() itemSelected: EventEmitter<string>;
+@Event() formSubmit: EventEmitter<{value: string}>;
+
+handleClick() {
+  this.itemSelected.emit('item-1');
+}
+```
+
+**Best Practices:**
+- Use descriptive event names
+- Type the event payload
+- Document event details with JSDoc
+
+### @Listen() - Event Listeners
+
+Listen to DOM events:
+
+```typescript
+@Listen('click')
+handleClick(event: MouseEvent) {
+  console.log('Component clicked', event);
+}
+
+@Listen('scroll', { target: 'window' })
+handleScroll(event: Event) {
+  console.log('Window scrolled');
+}
+
+@Listen('resize', { target: 'window', passive: true })
+handleResize() {
+  this.updateDimensions();
+}
+```
+
+### @Element() - Host Element Reference
+
+Reference to the host element:
+
+```typescript
+@Element() el: HTMLElement;
+
+componentDidLoad() {
+  console.log('Host element:', this.el);
+  this.el.classList.add('loaded');
+}
+```
+
+### @Method() - Public Methods
+
+Expose public async methods:
+
+```typescript
+@Method()
+async open(): Promise<void> {
+  this.isOpen = true;
+}
+
+@Method()
+async getValue(): Promise<string> {
+  return this.value;
+}
+```
+
+**Important:**
+- All public methods must be async
+- Document with JSDoc for public API
+
+## Lifecycle Methods
+
+Lifecycle methods in order of execution:
+
+```typescript
+export class MyComponent {
+  // 1. Called when component is connected to DOM (can be called multiple times)
+  connectedCallback() {
+    console.log('Component connected to DOM');
+  }
+
+  // 2. Called once before first render (good for async data loading)
+  componentWillLoad() {
+    console.log('Component will load');
+    // Can return Promise to delay first render
+  }
+
+  // 3. Called once after first render
+  componentDidLoad() {
+    console.log('Component loaded');
+  }
+
+  // 4. Called before every render (after first)
+  componentWillRender() {
+    console.log('Component will render');
+  }
+
+  // 5. Called after every render (after first)
+  componentDidRender() {
+    console.log('Component rendered');
+  }
+
+  // 6. Called when component will update (not on first render)
+  componentWillUpdate() {
+    console.log('Component will update');
+  }
+
+  // 7. Called after component updates (not on first render)
+  componentDidUpdate() {
+    console.log('Component updated');
+  }
+
+  // 8. Determine if component should re-render
+  componentShouldUpdate(newVal: any, oldVal: any, propName: string): boolean {
+    return newVal !== oldVal;
+  }
+
+  // 9. Called when disconnected from DOM (can be called multiple times)
+  disconnectedCallback() {
+    console.log('Component disconnected');
+  }
+}
+```
+
+**Lifecycle Best Practices:**
+- Use `componentWillLoad()` for async data fetching
+- Use `componentDidLoad()` for DOM manipulation
+- Use `connectedCallback()` for logic that runs every time element is attached
+- Clean up in `disconnectedCallback()` (remove listeners, clear timers)
+
+## JSX and Rendering
+
+### render() Method
+
+The `render()` method returns JSX:
+
+```typescript
+import { h } from '@stencil/core';
+
+render() {
+  return (
+    <div class="container">
+      <h1>Hello, {this.name}!</h1>
+      {this.isActive && <p>Active!</p>}
+      <button onClick={() => this.handleClick()}>
+        Click me
+      </button>
+    </div>
+  );
+}
+```
+
+### Host Element
+
+Use `<Host>` to set attributes on the host element:
+
+```typescript
+import { Host } from '@stencil/core';
+
+render() {
+  return (
+    <Host
+      class={{
+        'is-active': this.isActive,
+        'is-disabled': this.disabled
+      }}
+      aria-label={this.label}
+    >
+      <slot></slot>
+    </Host>
+  );
+}
+```
+
+### Slots
+
+Use slots for content projection:
+
+```typescript
+render() {
+  return (
+    <div>
+      <header>
+        <slot name="header"></slot>
+      </header>
+      <main>
+        <slot></slot>  {/* Default slot */}
+      </main>
+      <footer>
+        <slot name="footer"></slot>
+      </footer>
+    </div>
+  );
+}
+```
+
+### Conditional Rendering
+
+```typescript
+render() {
+  return (
+    <div>
+      {this.loading ? (
+        <div class="spinner">Loading...</div>
+      ) : (
+        <div class="content">{this.content}</div>
+      )}
+      
+      {this.error && <div class="error">{this.error}</div>}
+    </div>
+  );
+}
+```
+
+### Lists
+
+```typescript
+render() {
+  return (
+    <ul>
+      {this.items.map(item => (
+        <li key={item.id}>
+          {item.name}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+## File Structure & Naming
+
+### Directory Structure
+
+One component per directory:
+
+```
+src/
+├── components/
+│   ├── my-button/
+│   │   ├── my-button.tsx          # Component implementation
+│   │   ├── my-button.css          # Styles
+│   │   ├── my-button.spec.ts      # Unit tests
+│   │   ├── my-button.e2e.ts       # E2E tests
+│   │   └── readme.md              # Component documentation
+│   ├── my-card/
+│   │   ├── my-card.tsx
+│   │   ├── my-card.ios.css        # iOS-specific styles
+│   │   ├── my-card.md.css         # Material Design styles
+│   │   └── my-card.css            # Base styles
+```
+
+### Naming Conventions
+
+- **Tag names**: kebab-case with hyphen (required): `my-component`, `app-header`
+- **Component class**: PascalCase: `MyComponent`, `AppHeader`
+- **File names**: Match tag name: `my-component.tsx`
+- **Props**: camelCase: `firstName`, `isActive`
+- **Events**: camelCase: `itemSelected`, `formSubmit`
+- **CSS classes**: kebab-case: `button-primary`, `is-active`
+
+## Code Organization
+
+Follow this order in component class:
+
+```typescript
+@Component({
+  tag: 'my-component',
+  styleUrl: 'my-component.css',
+  shadow: true,
+})
+export class MyComponent {
+  // 1. Own Properties (private, not decorated)
+  private internalValue: number;
+  someText = 'default';
+
+  // 2. Reference to host element
+  @Element() el: HTMLElement;
+
+  // 3. State() variables (alphabetical)
+  @State() isValidated: boolean;
+  @State() status = 0;
+
+  // 4. Public Property API - @Prop() (alphabetical)
+  @Prop() content: string;
+  @Prop() enabled: boolean;
+  @Prop() type = 'default';
+
+  // 5. Prop lifecycle events (@Watch) - immediately after related @Prop
+  @Prop() value: string;
+  
+  @Watch('value')
+  valueChanged(newValue: string, oldValue: string) {
+    this.validate(newValue);
+  }
+
+  // 6. Events section (alphabetical)
+  @Event() itemSelected: EventEmitter<string>;
+  @Event() statusChanged: EventEmitter<number>;
+
+  // 7. Component lifecycle events (in natural order)
+  connectedCallback() {}
+  disconnectedCallback() {}
+  componentWillLoad() {}
+  componentDidLoad() {}
+  componentShouldUpdate() {}
+  componentWillRender() {}
+  componentDidRender() {}
+  componentWillUpdate() {}
+  componentDidUpdate() {}
+
+  // 8. Listeners
+  @Listen('click')
+  onClick(event: MouseEvent) {
+    console.log('Clicked');
+  }
+
+  // 9. Public methods API (alphabetical)
+  @Method()
+  async open(): Promise<void> {
+    this.isOpen = true;
+  }
+
+  @Method()
+  async close(): Promise<void> {
+    this.isOpen = false;
+  }
+
+  // 10. Local methods (private business logic)
+  private validate(value: string): boolean {
+    return value.length > 0;
+  }
+
+  private updateState() {
+    // Internal logic
+  }
+
+  // 11. render() function (always last)
+  render() {
+    return (
+      <Host>
+        <div class="container">
+          <slot></slot>
+        </div>
+      </Host>
+    );
+  }
+}
+```
+
+## Best Practices
+
+### 1. Use TypeScript Strictly
+
+```typescript
+// Good - Fully typed
+@Prop() items: Array<{id: string; name: string}>;
+@State() count: number = 0;
+
+// Bad - Any types
+@Prop() items: any;
+@State() count;
+```
+
+### 2. Immutable State Updates
+
+```typescript
+// Bad - Direct mutation won't trigger re-render
+this.items.push(newItem);
+
+// Good - Create new array
+this.items = [...this.items, newItem];
+
+// Bad - Direct object mutation
+this.user.name = 'New Name';
+
+// Good - Create new object
+this.user = { ...this.user, name: 'New Name' };
+```
+
+### 3. Use Shadow DOM When Possible
+
+```typescript
+@Component({
+  tag: 'my-component',
+  styleUrl: 'my-component.css',
+  shadow: true,  // Encapsulation and style isolation
+})
+```
+
+### 4. Document Public API
+
+```typescript
+/**
+ * The button component for user interactions
+ */
+@Component({
+  tag: 'my-button',
+})
+export class MyButton {
+  /**
+   * The button label text
+   */
+  @Prop() label: string;
+
+  /**
+   * Emitted when the button is clicked
+   */
+  @Event() buttonClick: EventEmitter<void>;
+
+  /**
+   * Opens the button's associated menu
+   */
+  @Method()
+  async openMenu(): Promise<void> {
+    // ...
+  }
+}
+```
+
+### 5. Handle Async Operations Properly
+
+```typescript
+async componentWillLoad() {
+  try {
+    this.data = await this.fetchData();
+  } catch (error) {
+    console.error('Failed to load data:', error);
+    this.error = 'Failed to load';
+  }
+}
+```
+
+### 6. Clean Up Resources
+
+```typescript
+private intervalId: number;
+
+componentDidLoad() {
+  this.intervalId = window.setInterval(() => {
+    this.updateTime();
+  }, 1000);
+}
+
+disconnectedCallback() {
+  if (this.intervalId) {
+    clearInterval(this.intervalId);
+  }
+}
+```
+
+### 7. Use Functional Components for Simple Cases
+
+```typescript
+import { h, FunctionalComponent } from '@stencil/core';
+
+interface IconProps {
+  name: string;
+  size?: number;
+}
+
+export const Icon: FunctionalComponent<IconProps> = ({ name, size = 24 }) => (
+  <svg width={size} height={size}>
+    <use xlinkHref={`#icon-${name}`} />
+  </svg>
+);
+```
+
+## Anti-Patterns
+
+### ❌ Don't Mutate Props
+
+```typescript
+// Bad
+@Prop() value: string;
+
+handleChange() {
+  this.value = 'new value';  // Error if not mutable
+}
+
+// Good
+@Prop({ mutable: true }) value: string;
+// Or better: emit event and let parent handle
+@Event() valueChange: EventEmitter<string>;
+
+handleChange() {
+  this.valueChange.emit('new value');
+}
+```
+
+### ❌ Don't Use Constructor for Initialization
+
+```typescript
+// Bad
+constructor() {
+  this.data = this.fetchData();  // Won't work properly
+}
+
+// Good
+async componentWillLoad() {
+  this.data = await this.fetchData();
+}
+```
+
+### ❌ Don't Access DOM in render()
+
+```typescript
+// Bad
+render() {
+  const width = this.el.offsetWidth;  // Can cause issues
+  return <div style={{ width: `${width}px` }}></div>;
+}
+
+// Good
+componentDidLoad() {
+  this.width = this.el.offsetWidth;
+}
+
+render() {
+  return <div style={{ width: `${this.width}px` }}></div>;
+}
+```
+
+### ❌ Don't Forget Keys in Lists
+
+```typescript
+// Bad
+render() {
+  return (
+    <ul>
+      {this.items.map(item => <li>{item.name}</li>)}
+    </ul>
+  );
+}
+
+// Good
+render() {
+  return (
+    <ul>
+      {this.items.map(item => <li key={item.id}>{item.name}</li>)}
+    </ul>
+  );
+}
+```
+
+### ❌ Don't Use Arrow Functions in render() for Handlers
+
+```typescript
+// Bad - Creates new function on every render
+render() {
+  return <button onClick={() => this.handleClick()}>Click</button>;
+}
+
+// Good - Bind in class or use arrow function property
+private handleClick = () => {
+  console.log('Clicked');
+}
+
+render() {
+  return <button onClick={this.handleClick}>Click</button>;
+}
+```
+
+## Testing
+
+### Unit Tests
+
+```typescript
+import { newSpecPage } from '@stencil/core/testing';
+import { MyComponent } from './my-component';
+
+describe('my-component', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [MyComponent],
+      html: `<my-component></my-component>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <my-component>
+        <mock:shadow-root>
+          <div>
+            Hello, World!
+          </div>
+        </mock:shadow-root>
+      </my-component>
+    `);
+  });
+
+  it('renders with props', async () => {
+    const page = await newSpecPage({
+      components: [MyComponent],
+      html: `<my-component name="Stencil"></my-component>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <my-component name="Stencil">
+        <mock:shadow-root>
+          <div>
+            Hello, Stencil!
+          </div>
+        </mock:shadow-root>
+      </my-component>
+    `);
+  });
+});
+```
+
+### E2E Tests
+
+```typescript
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('my-component', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<my-component></my-component>');
+    
+    const element = await page.find('my-component');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('emits event on click', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<my-component></my-component>');
+    
+    const itemSelected = await page.spyOnEvent('itemSelected');
+    const button = await page.find('my-component >>> button');
+    await button.click();
+    
+    expect(itemSelected).toHaveReceivedEvent();
+  });
+});
+```
+
+## Common Patterns
+
+### Form-Associated Components
+
+```typescript
+@Component({
+  tag: 'my-input',
+  formAssociated: true,
+})
+export class MyInput {
+  @Element() el: HTMLElement;
+  
+  private internals: ElementInternals;
+
+  componentWillLoad() {
+    this.internals = (this.el as any).attachInternals();
+  }
+
+  @Prop() value: string = '';
+  
+  @Watch('value')
+  valueChanged(newValue: string) {
+    this.internals.setFormValue(newValue);
+  }
+}
+```
+
+### Loading States
+
+```typescript
+@State() loading: boolean = false;
+@State() error: string | null = null;
+@State() data: any = null;
+
+async componentWillLoad() {
+  await this.loadData();
+}
+
+private async loadData() {
+  this.loading = true;
+  this.error = null;
+  
+  try {
+    this.data = await fetch('/api/data').then(r => r.json());
+  } catch (e) {
+    this.error = 'Failed to load data';
+  } finally {
+    this.loading = false;
+  }
+}
+
+render() {
+  if (this.loading) return <div>Loading...</div>;
+  if (this.error) return <div class="error">{this.error}</div>;
+  return <div>{JSON.stringify(this.data)}</div>;
+}
+```
+
+### Controlled vs Uncontrolled
+
+```typescript
+// Controlled - value managed by parent
+@Prop() value: string;
+@Event() valueChange: EventEmitter<string>;
+
+handleInput(event: Event) {
+  const value = (event.target as HTMLInputElement).value;
+  this.valueChange.emit(value);
+}
+
+render() {
+  return <input value={this.value} onInput={e => this.handleInput(e)} />;
+}
+
+// Uncontrolled - internal state
+@State() internalValue: string = '';
+
+handleInput(event: Event) {
+  this.internalValue = (event.target as HTMLInputElement).value;
+}
+
+render() {
+  return <input value={this.internalValue} onInput={e => this.handleInput(e)} />;
+}
+```
+
+## Performance Tips
+
+1. **Use `componentShouldUpdate()` to prevent unnecessary renders**
+2. **Avoid complex computations in render()**
+3. **Use `memoize` for expensive calculations**
+4. **Lazy load components with `import()`**
+5. **Use Shadow DOM for style encapsulation**
+6. **Minimize prop changes from parent**
+7. **Use event delegation for lists**
+
+## Related Resources
+
+- [Stencil.js Official Documentation](https://stenciljs.com/docs/introduction)
+- [Stencil Component API](https://stenciljs.com/docs/api)
+- [Stencil Style Guide](https://stenciljs.com/docs/style-guide)
+- [Web Components Standards](https://developer.mozilla.org/en-US/docs/Web/Web_Components)

From 8c56359b70ec87159e45968eb04e5e3e00f307e1 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Tue, 28 Jul 2026 11:48:25 +0200
Subject: [PATCH 02/42] chore: create onboarding skill

---
 .../catalyst-onboarding/COMPONENT-ANATOMY.md  | 192 ++++++++++++++++++
 .../skills/catalyst-onboarding/GLOSSARY.md    |  48 +++++
 .../skills/catalyst-onboarding/PR-REVIEW.md   |  88 ++++++++
 .../catalyst-onboarding/REPO-STRUCTURE.md     |  48 +++++
 .agents/skills/catalyst-onboarding/SKILL.md   |  71 +++++++
 .agents/skills/catalyst-onboarding/TOKENS.md  | 181 +++++++++++++++++
 .../catalyst-onboarding/TROUBLESHOOTING.md    |  50 +++++
 7 files changed, 678 insertions(+)
 create mode 100644 .agents/skills/catalyst-onboarding/COMPONENT-ANATOMY.md
 create mode 100644 .agents/skills/catalyst-onboarding/GLOSSARY.md
 create mode 100644 .agents/skills/catalyst-onboarding/PR-REVIEW.md
 create mode 100644 .agents/skills/catalyst-onboarding/REPO-STRUCTURE.md
 create mode 100644 .agents/skills/catalyst-onboarding/SKILL.md
 create mode 100644 .agents/skills/catalyst-onboarding/TOKENS.md
 create mode 100644 .agents/skills/catalyst-onboarding/TROUBLESHOOTING.md

diff --git a/.agents/skills/catalyst-onboarding/COMPONENT-ANATOMY.md b/.agents/skills/catalyst-onboarding/COMPONENT-ANATOMY.md
new file mode 100644
index 00000000..970e6318
--- /dev/null
+++ b/.agents/skills/catalyst-onboarding/COMPONENT-ANATOMY.md
@@ -0,0 +1,192 @@
+# Catalyst Component Anatomy
+
+## File structure
+
+Every component lives in `core/src/components/cat-<name>/` with exactly six files:
+
+```
+cat-<name>/
+  cat-<name>.tsx            # component implementation
+  cat-<name>.scss           # styles
+  cat-<name>.spec.tsx       # unit test (shadow DOM render assertions)
+  cat-<name>.e2e.tsx        # integration test (hydration, interaction)
+  cat-<name>.screenshot.tsx # visual regression (toMatchScreenshot)
+  readme.md                 # auto-generated on build
+```
+
+## Decorator map
+
+| decorator | what it does |
+|---|---|
+| `@Component` | Registers the custom element. `shadow: true` always. `shadow: { delegatesFocus: true }` for any component wrapping a native focusable element (`input`, `button`, `a`, `textarea`, `select`). |
+| `@Element() hostElement!: HTMLElement` | Ref to the outer `<cat-*>` DOM element. Always named `hostElement`. |
+| `@Prop()` | Public API. Becomes `@Input()` in Angular, a prop in React. Every prop requires a JSDoc comment. |
+| `@State()` | Internal reactive state. Changes trigger re-render. Not visible outside the component. |
+| `@Watch('propName')` | Fires when a prop or state changes. Place immediately after the prop it watches. |
+| `@Event()` | Declares a custom DOM event emitter. All events prefixed `cat`. Becomes `@Output()` in Angular. |
+| `@Listen('event')` | Intercepts a DOM event on the host or a specified target. |
+| `@Method()` | Public imperative API. Always `async`, returns `Promise<void>`. |
+
+## Member order (enforced by convention)
+
+```typescript
+// 1. Private instance fields
+// 2. @Element() hostElement
+// 3. @State() — alphabetical
+// 4. @Prop() + immediate @Watch() — alphabetical
+// 5. @Event() — alphabetical
+// 6. Lifecycle methods — natural order
+// 7. @Listen()
+// 8. @Method() — alphabetical
+// 9. Private methods
+// 10. render() — always last
+```
+
+Tag name: `cat-*` kebab-case. Class name: `Cat*` PascalCase.
+Internal state fields: `_camelCase` prefix. CSS classes: `cat-{tag}-{modifier}`.
+Events: `cat*` camelCase (`catClick`, `catChange`, `catBlur`).
+Methods: `do*` for native wraps (`doFocus`, `doBlur`), no prefix for state transitions (`open`, `close`).
+A11y props: `a11y*` camelCase → `a11y-*` attribute (`a11yLabel` → `a11y-label`).
+CSS parts: semantic nouns (`part="button"`, `part="content"`).
+
+## Key render() patterns
+
+```tsx
+// Host wrapper — sets attributes on the host element
+<Host data-button-group={this.buttonGroupPosition}>
+  <button part="button">...</button>
+</Host>
+
+// CSS parts — exposes shadow internals for consumer styling
+<button part="button">
+  <span part="content">...</span>
+</button>
+// Consumer: cat-button::part(button) { ... }
+
+// Spread nativeAttributes — arbitrary passthrough to inner element
+<button {...this.nativeAttributes} data-test={this.testId}>
+
+// Dynamic class object
+class={{
+  'cat-button': true,
+  'cat-button-loading': this.loading,
+  [`cat-button-${this.variant}`]: Boolean(this.variant),
+}}
+
+// Conditional render — use null, not undefined
+{this.loading ? <cat-spinner /> : null}
+
+// Slot — renders consumer-provided content
+<slot></slot>
+```
+
+## SCSS conventions
+
+Every component SCSS starts with:
+
+```scss
+@use 'variables' as *;
+@use 'mixins' as *;
+```
+
+Token access:
+
+```scss
+// Color token
+outline: 2px solid cat-token('color.ui.border.focus');
+
+// Border radius
+border-radius: cat-border-radius('m');  // 'xs'|'s'|'m'|'l'|'xl'|'full'|0
+
+// Typography — never hardcode font-size or line-height
+@include cat-body('m');
+@include cat-head('l');
+
+// Transition
+transition: color cat-token('time.transition.s') linear;
+```
+
+`:host` rules:
+
+```scss
+:host {
+  display: inline-block;  // or block, flex — whatever the component needs
+}
+
+:host([hidden]) {
+  display: none;  // always present
+}
+```
+
+## Shadow DOM utilities
+
+| utility | why | when |
+|---|---|---|
+| `findClosest(selector, el)` from `core/src/utils/find-closest` | `el.closest()` stops at shadow boundaries | Finding ancestor elements (e.g. parent `<form>`) |
+| `shadow: { delegatesFocus: true }` | Focus on host delegates to first focusable element in shadow root | All interactive components |
+| `event.composedPath()` | `event.target` is retargeted at shadow boundaries | Outside-click detection, drag-drop |
+| Slot detection in `componentWillRender` | Slots can't be queried inside shadow root synchronously | `this.hostElement.hasChildNodes()` to detect slotted content |
+| Manual `tabIndex` in `render()` | Host must stay in tab order when `delegatesFocus` is used | `this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) \|\| 0` |
+
+## Three test files
+
+**`cat-<name>.spec.tsx`** — unit test, JSDOM, no browser needed.
+Tests shadow DOM render output for default state and key prop combinations.
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { render } from '@stencil/vitest';
+import { h } from '@stencil/core';
+import './cat-<name>';
+
+describe('cat-<name>', () => {
+  it('renders', async () => {
+    const { root } = await render(<cat-<name> />);
+    await expect(root.shadowRoot).toEqualHtml(`...`);
+  });
+});
+```
+
+**`cat-<name>.e2e.tsx`** — integration test, real browser (Playwright).
+Tests hydration and user interactions.
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { render, h } from '@stencil/vitest';
+
+describe('cat-<name>', () => {
+  it('renders', async () => {
+    const { root } = await render(<cat-<name> />);
+    await expect.element(root).toHaveClass('hydrated');
+  });
+});
+```
+
+**`cat-<name>.screenshot.tsx`** — visual regression, real browser (Playwright).
+Tests all meaningful visual states. PNG baselines committed to `__screenshots__/`
+as both `-darwin` and `-linux` variants.
+
+```typescript
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, h } from '@stencil/vitest';
+import { page } from '@vitest/browser/context';
+
+describe('cat-<name>', () => {
+  afterEach(async () => {
+    await page.elementLocator(document.body).hover(); // reset hover state
+  });
+
+  it('default', async () => {
+    const { root } = await render(
+      <div style={{ padding: '10px', display: 'inline-block' }}>
+        <cat-<name> />
+      </div>
+    );
+    await expect(root).toMatchScreenshot();
+  });
+});
+```
+
+Always wrap in `<div style={{ padding: '10px', display: 'inline-block' }}>`.
+Always reset hover state in `afterEach`.
+Use `it.each` for variant × color × state matrices.
diff --git a/.agents/skills/catalyst-onboarding/GLOSSARY.md b/.agents/skills/catalyst-onboarding/GLOSSARY.md
new file mode 100644
index 00000000..b78341e1
--- /dev/null
+++ b/.agents/skills/catalyst-onboarding/GLOSSARY.md
@@ -0,0 +1,48 @@
+# Glossary
+
+**`@haiilo/catalyst`** — the core npm package. Contains all Stencil web
+components. Source of truth for component logic and markup.
+
+**`@haiilo/catalyst-tokens`** — the tokens npm package. Style Dictionary source
+compiled into CSS custom properties, SCSS variables, JSON, and JS exports.
+
+**`cat-*`** — the tag name prefix for all Catalyst web components
+(`cat-button`, `cat-input`, etc.).
+
+**`cssProp`** — a Catalyst custom extension to the W3C design token format.
+Marks a token as themeable and sets the CSS custom property name consumers
+can override at runtime (e.g. `"cssProp": "primary-bg"` → `--cat-primary-bg`).
+See TOKENS.md for the full theming mechanism.
+
+**`delegatesFocus`** — `shadow: { delegatesFocus: true }` in `@Component`.
+Makes focus on the host element automatically delegate to the first focusable
+element inside the shadow root. Required on all interactive components.
+
+**`findClosest(selector, el)`** — utility in `core/src/utils/find-closest`.
+Like `el.closest()` but traverses shadow boundaries. Use instead of native
+`closest()` whenever searching for an ancestor from inside a shadow root.
+
+**`hostElement`** — the conventional name for `@Element() hostElement!: HTMLElement`.
+The ref to the outer custom element in the DOM.
+
+**`nativeAttributes`** — standard prop (`{ [key: string]: string }`) spread
+onto the native inner element. Lets consumers pass arbitrary HTML attributes
+without requiring a dedicated prop for each one.
+
+**`proxies.ts`** — auto-generated Angular wrapper file at
+`angular/projects/catalyst/src/lib/directives/proxies.ts`. Regenerated on
+every `pnpm run build:core`. Never edit by hand.
+
+**`release-please`** — Google OSS tool that automates versioning and changelog
+generation from conventional commit messages. All five Catalyst packages version
+together (linked-versions plugin).
+
+**Shadow DOM** — browser-native encapsulation for web components. Styles and
+DOM inside a shadow root are isolated from the page. Catalyst components always
+use `shadow: true`.
+
+**Style Dictionary** — Amazon OSS token pipeline tool. Reads the token source
+JSON in `tokens/src/` and compiles it into CSS, SCSS, JS, and JSON outputs.
+
+**`testId`** — standard prop (`string | undefined`) on every interactive
+component. Rendered as `data-test` on the native inner element for test selectors.
diff --git a/.agents/skills/catalyst-onboarding/PR-REVIEW.md b/.agents/skills/catalyst-onboarding/PR-REVIEW.md
new file mode 100644
index 00000000..361e1dba
--- /dev/null
+++ b/.agents/skills/catalyst-onboarding/PR-REVIEW.md
@@ -0,0 +1,88 @@
+# Catalyst PR Review
+
+## What CI catches (you don't need to check)
+
+| job | what it runs | what it catches |
+|---|---|---|
+| build | `build:tokens` → `build:core` | Type errors, broken imports, SCSS compile failures |
+| lint | prettier, ESLint, stylelint | Formatting drift, ESLint violations, SCSS violations |
+| test | spec, screenshot, e2e | HTML regression, visual regression, interaction regression |
+
+**Note:** commitlint runs as a Husky pre-commit hook, not in CI. A contributor
+who used `--no-verify` bypasses it. Always check commit messages on PRs from
+external contributors.
+
+---
+
+## Checklist (human review)
+
+**Commit message**
+- [ ] Format: `type(scope): description`
+- [ ] Scope is one of: `core` `angular` `angular-formly` `react` `tokens` `release`
+- [ ] `feat(core)` triggers a minor bump across all five packages — confirm scope is intentional
+
+```
+✓  feat(core): add clearable prop to cat-input
+✗  feat(cat-input): add prop     — component name is not a valid scope
+✗  fix: typo in readme            — missing scope
+```
+
+**Props**
+- [ ] Booleans default to `false`, not `undefined`: `disabled = false` not `disabled?: boolean`
+- [ ] String unions use established scales only — no invented size or color names
+  - sizes: `'xs' | 's' | 'm' | 'l' | 'xl'`
+  - colors: `'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'`
+- [ ] Multi-word props are camelCase: `iconOnly`, `labelHidden`
+- [ ] Every `@Prop()` has a JSDoc comment
+- [ ] Deprecated props have `@deprecated reason. Use X instead.` in JSDoc — never removed
+
+**Events**
+- [ ] All events prefixed `cat`: `catClick`, `catChange`, `catFocus`, `catBlur`
+- [ ] Payload typed to the event: `EventEmitter<FocusEvent>`, `EventEmitter<MouseEvent>`
+- [ ] Value-change events carry the value type: `EventEmitter<string>` not `EventEmitter<Event>`
+- [ ] Definite assignment: `catChange!: EventEmitter<string>`
+
+**Methods**
+- [ ] Native wraps use `do` prefix: `doFocus()`, `doBlur()`, `doClick()`
+- [ ] JSDoc on `do*` methods says "Use this instead of calling `.focus()` directly"
+- [ ] State transitions have no prefix: `open()`, `close()`, `clear()`
+- [ ] All `@Method()` are `async` and return `Promise<void>`
+
+**Boilerplate — every interactive component**
+- [ ] Has `testId?: string` prop — applied as `data-test` on the native inner element
+- [ ] Has `nativeAttributes?: { [key: string]: string }` prop — spread on the native inner element
+
+**CSS parts**
+- [ ] Every part declared in component JSDoc: `@part button - The native button element.`
+- [ ] Every declared part applied in render: `part="button"`
+- [ ] Parts cover: native interactive element, visible sub-regions (label, prefix, suffix, content)
+- [ ] Parts do NOT expose: internal layout wrappers, state-only elements
+
+**SCSS**
+- [ ] Starts with `@use 'variables' as *;` and `@use 'mixins' as *;`
+- [ ] No hardcoded color hex or `rgb()` — all via `cat-token('color.*')`
+- [ ] No raw `font-size` / `line-height` — use `@include cat-body()` / `@include cat-head()`
+- [ ] No hardcoded `border-radius` px/rem — use `cat-border-radius()` (exception: `10rem` for pill)
+- [ ] Vendor-prefix blocks wrapped in `/* stylelint-disable/enable property-no-vendor-prefix */`
+- [ ] `:host` is the top-level layout selector — no wrapping div for host layout
+- [ ] `:host([hidden]) { display: none; }` present
+
+Token access patterns — three forms, all valid:
+```scss
+// 1. Standard
+outline: 2px solid cat-token('color.ui.border.focus');
+// 2. Raw RGB triplet for CSS custom property chain
+--my-color: #{cat-token('color.ui.border.dark', $wrap: false)};
+// 3. Re-wrap at consumption point
+background: cat-token-wrap(var(--my-color));
+```
+
+**Tests**
+- [ ] New prop with render impact → spec test added
+- [ ] New interaction (focus, value, event) → e2e test added
+- [ ] New visual variant or state → screenshot test added and baselines committed
+
+**Shadow DOM**
+- [ ] Ancestor traversal uses `findClosest(selector, el)` from `core/src/utils/find-closest` — not `el.closest()`
+- [ ] Outside-click / inside detection uses `event.composedPath()` — not `event.target`
+- [ ] Any component wrapping a focusable element uses `shadow: { delegatesFocus: true }`
diff --git a/.agents/skills/catalyst-onboarding/REPO-STRUCTURE.md b/.agents/skills/catalyst-onboarding/REPO-STRUCTURE.md
new file mode 100644
index 00000000..ffa06612
--- /dev/null
+++ b/.agents/skills/catalyst-onboarding/REPO-STRUCTURE.md
@@ -0,0 +1,48 @@
+# Catalyst Repo Structure & Package Map
+
+## The five packages
+
+| npm name | directory | what it is |
+|---|---|---|
+| `@haiilo/catalyst-tokens` | `tokens/` | Style Dictionary source → CSS custom properties, SCSS vars, JSON, JS exports |
+| `@haiilo/catalyst` | `core/` | Stencil web components — source of truth for all component logic and markup |
+| `@haiilo/catalyst-angular` | `angular/projects/catalyst/` | Angular wrappers — auto-generated by Stencil's angular-output-target during core build |
+| `@haiilo/catalyst-angular-formly` | `angular/projects/catalyst-formly/` | ngx-formly field types for Catalyst components |
+| `@haiilo/catalyst-react` | `react/` | React wrappers — auto-generated by Stencil's react-output-target during core build |
+
+## Dependency graph
+
+Build order is strict. `core` must be built before Angular or React wrappers
+because Stencil's build writes the wrapper source files.
+
+```
+tokens/
+  └─→ core/                    (consumes token SCSS variables)
+        ├─→ angular/            (proxies.ts auto-generated by stencil build)
+        │     └─→ angular-formly/
+        └─→ react/              (stencil-generated/index.ts auto-generated)
+```
+
+## Auto-generated files — never edit by hand
+
+```
+angular/projects/catalyst/src/lib/directives/proxies.ts
+react/src/components/stencil-generated/index.ts
+```
+
+Both are regenerated on every `pnpm run build:core`. Edits will be overwritten.
+
+Every `@Prop()`, `@Event()`, and `@Method()` in a Stencil component
+automatically becomes an Angular `@Input()` / `@Output()` and a React prop —
+no manual wiring required.
+
+## Key build commands
+
+| command | what it does |
+|---|---|
+| `pnpm run build` | Full pipeline: tokens → core → angular → angular-formly → react |
+| `pnpm run build:tokens` | Tokens only |
+| `pnpm run build:core` | Core only — also regenerates Angular and React proxy files |
+| `pnpm --filter @haiilo/catalyst run start` | Stencil dev server with hot reload at `localhost:3333` |
+| `pnpm --filter @haiilo/catalyst run test` | Unit tests (Vitest, no browser) |
+| `pnpm --filter @haiilo/catalyst run test:screenshot` | Visual regression (Playwright + pixelmatch) |
diff --git a/.agents/skills/catalyst-onboarding/SKILL.md b/.agents/skills/catalyst-onboarding/SKILL.md
new file mode 100644
index 00000000..915afe55
--- /dev/null
+++ b/.agents/skills/catalyst-onboarding/SKILL.md
@@ -0,0 +1,71 @@
+---
+name: catalyst-onboarding
+description: >
+  Use when orienting to the Catalyst repo, when a contributor asks where to
+  start or where to find something, or when mapping unfamiliar territory before
+  doing work in components, tokens, or review.
+---
+
+# Catalyst Onboarding
+
+The **map**: what exists and where to look.
+
+## On load
+
+Read the user's message and branch:
+
+**No clear goal, or "getting started", or "I'm new"** → give this opening,
+then ask what to dive into first:
+
+> Catalyst is a design system monorepo — five published packages (tokens, core
+> web components, Angular bindings, Angular Formly, React bindings) that all
+> version together. Everything flows from one place: the Stencil components in
+> `core/` consume tokens from `tokens/`, and the Angular/React wrappers are
+> auto-generated from core on every build.
+>
+> To work here confidently you need four things: how the repo is structured,
+> how components are built, how to review a PR, and how the token system works.
+> I have a guide for each. Want to start at the beginning (repo structure), or
+> is there something specific you're trying to do?
+
+**Specific goal stated** (e.g. "I want to review a PR", "how do tokens work",
+"I need to add a component") → skip the intro, go straight to the knowledge
+map below and load the relevant file.
+
+---
+
+**New contributor starting from zero** → work through the Orientation path
+below in order.
+
+**Looking up a specific topic** → jump to the Knowledge map.
+
+---
+
+## Orientation path
+
+| Step | Read | You can work independently when you can… |
+|---|---|---|
+| 1 | [REPO-STRUCTURE.md](REPO-STRUCTURE.md) | Name all 5 packages, their directories, build order, and which generated files must never be edited |
+| 2 | [COMPONENT-ANATOMY.md](COMPONENT-ANATOMY.md) | Read any `cat-*.tsx` and explain every decorator, the SCSS conventions, and the purpose of all three test file types |
+| 3 | [PR-REVIEW.md](PR-REVIEW.md) | Run through the full PR checklist unaided |
+| 4 | [TOKENS.md](TOKENS.md) | Trace a token from source JSON to a `cat-token()` call in SCSS, and explain how a consumer overrides a theme color at runtime |
+
+**Ready to build?** Load the `catalyst-component-development` skill — it walks through the full implementation contract step by step.
+
+**Setup** — before or alongside Step 1: install Node 20+ (use `.nvmrc`), install
+pnpm 9+ (`npm install -g pnpm@9`), then run `pnpm install` from the repo root.
+
+---
+
+## Knowledge map
+
+| Topic | Go to |
+|---|---|
+| Packages, build order, generated files | [REPO-STRUCTURE.md](REPO-STRUCTURE.md) |
+| Component decorators, lifecycle, naming, tests | [COMPONENT-ANATOMY.md](COMPONENT-ANATOMY.md) |
+| PR review checklist, commit message rules | [PR-REVIEW.md](PR-REVIEW.md) |
+| Token source structure, `cat-token()`, theming | [TOKENS.md](TOKENS.md) |
+| Creating or modifying a component end-to-end | `catalyst-component-development` skill |
+| CI workflows, local checks | [REPO-STRUCTURE.md](REPO-STRUCTURE.md) → Key build commands |
+| Troubleshooting | [TROUBLESHOOTING.md](TROUBLESHOOTING.md) |
+| Term definitions | [GLOSSARY.md](GLOSSARY.md) |
diff --git a/.agents/skills/catalyst-onboarding/TOKENS.md b/.agents/skills/catalyst-onboarding/TOKENS.md
new file mode 100644
index 00000000..aa2a82b4
--- /dev/null
+++ b/.agents/skills/catalyst-onboarding/TOKENS.md
@@ -0,0 +1,181 @@
+# Catalyst Design Token System
+
+## Source file structure
+
+The token source is a directory tree of JSON files that Style Dictionary merges
+at build time via `source: ['src/**/*.json']`.
+
+```
+tokens/src/
+├── color/
+│   ├── base.json       ← Layer 1: primitive palette (raw hex values)
+│   ├── theme.json      ← Layer 2: semantic role colors (primary, danger, …)
+│   └── ui.json         ← Layer 3: UI-specific semantics (background, border, font)
+├── size/
+│   ├── border.json     ← Border radius scale
+│   ├── font.json       ← Font sizes + line heights
+│   └── spacing.json    ← Spacing scale
+├── font.json           ← Font family, weight, decoration
+├── opacity.json        ← Opacity values
+├── time.json           ← Animation durations and transitions
+└── z-index.json        ← Z-index values
+```
+
+The top-level JSON key becomes the first segment of the token path. A token at
+`color/base.json` → `color.base.brand.400` is accessed as
+`cat-token('color.base.brand.400')`.
+
+## The three color layers
+
+```
+LAYER 1 — Primitives  (color.base.*)
+  color.base.brand.400  = #008194   ← raw hex, no semantic meaning
+
+        ↓ referenced by
+
+LAYER 2 — Theme semantics  (color.theme.*)
+  color.theme.primary.bg   → color.base.brand.400
+  color.theme.danger.bg    → color.base.red.400
+
+        ↓ referenced by
+
+LAYER 3 — UI semantics  (color.ui.*)
+  color.ui.background.canvas  → color.base.neutral.100
+  color.ui.border.default     → color.base.neutral.200
+```
+
+**Three rules:**
+1. Layer 1 never references anything — only raw values
+2. Layers 2 and 3 reference Layer 1 only — never each other
+3. Component SCSS always consumes Layer 2 or 3 — never Layer 1 directly
+
+**Flag in PR review:** `cat-token('color.base.*')` in a component SCSS file is
+reaching past the semantic layer. Correct paths are `color.theme.*` or `color.ui.*`.
+
+## Token value formats
+
+**Form 1 — Primitive:**
+```json
+{ "$type": "color", "$value": "#008194" }
+```
+
+**Form 2 — Reference (alias):**
+```json
+{ "$type": "color", "$value": "{color.base.brand.400}" }
+```
+
+**Form 3 — Themeable reference (with `cssProp`):**
+```json
+{
+  "$type": "color",
+  "$value": { "value": "{color.base.brand.400}" },
+  "cssProp": "primary-bg"
+}
+```
+
+`cssProp` is a Catalyst custom extension. It marks a token as themeable and
+controls the CSS custom property name consumers can override.
+
+## Build pipeline
+
+`pnpm run build:tokens` runs Style Dictionary and produces seven outputs:
+
+| output | format | used by |
+|---|---|---|
+| `dist/css/variables.css` | CSS custom properties, colors as R,G,B triplets | browser consumers |
+| `dist/css/variables-hex.css` | CSS custom properties, colors as hex | design tools |
+| `dist/scss/_variables.scss` | SCSS variables + `$tokens` map | `core/` components |
+| `dist/js/variables.js` / `.d.ts` | ES module + TypeScript declarations | JS/TS consumers |
+
+**Why colors are R,G,B triplets in CSS:**
+
+```css
+:root {
+  --cat-color-theme-primary-bg: 0, 129, 148;
+}
+```
+
+This allows alpha composition without repeating the color:
+```css
+background: rgba(var(--cat-color-theme-primary-bg), 0.2);
+```
+
+## Consuming tokens in SCSS
+
+Every component SCSS starts with:
+```scss
+@use 'variables' as *;
+@use 'mixins' as *;
+```
+
+**`cat-token($key)` — primary accessor:**
+
+```scss
+// Color token → rgb(var(--cat-*, r, g, b))
+background-color: cat-token('color.ui.background.canvas');
+
+// With alpha → rgba(var(--cat-*, r, g, b), 0.2)
+background-color: cat-token('color.theme.primary.bg', 0.2);
+
+// Raw RGB triplet (for CSS custom property chains)
+--my-color: #{cat-token('color.ui.border.dark', $wrap: false)};
+background: cat-token-wrap(var(--my-color));
+
+// Non-color token — returns value directly
+transition-duration: cat-token('time.transition.s');  // → 125ms
+font-size: cat-token('size.font.body.m');
+```
+
+**`cat-border-radius($size)` — shorthand:**
+
+```scss
+border-radius: cat-border-radius('s');    // small
+border-radius: cat-border-radius('m');    // medium
+border-radius: cat-border-radius('full'); // → 100rem (pill)
+border-radius: cat-border-radius(0);      // → 0 (square)
+```
+
+Always use this over the raw `cat-token('size.border.radius.*')` path.
+
+**Typography mixins — never hardcode font-size or line-height:**
+
+```scss
+@include cat-body('m');   // body text medium — sets font-size + line-height together
+@include cat-body('s');   // body text small
+@include cat-head('l');   // heading large
+```
+
+## Theming
+
+Theming is CSS custom property overrides. No JavaScript, no theme provider, no
+class switching.
+
+A Form 3 token with `"cssProp": "primary-bg"` emits this SCSS variable:
+
+```scss
+$cat-color-theme-primary-bg: var(--cat-primary-bg, 0, 129, 148) !default;
+```
+
+The `--cat-primary-bg` slot is the override. Any ancestor element can set it:
+
+```css
+/* Consumer app — override primary color per tenant */
+.tenant-a {
+  --cat-primary-bg: 91, 94, 219;
+}
+```
+
+All components using `cat-token('color.theme.primary.bg')` pick up the override
+automatically — no component code changes needed.
+
+## After changing tokens
+
+Any token change requires a dual build before the change is visible in components:
+
+```bash
+pnpm run build:tokens   # regenerates dist/scss/_variables.scss
+pnpm run build:core     # picks up the new variables
+```
+
+Skipping the dual build is the most common token-related mistake. Flag it in
+PR review if the token source changed but `build:tokens` wasn't run.
diff --git a/.agents/skills/catalyst-onboarding/TROUBLESHOOTING.md b/.agents/skills/catalyst-onboarding/TROUBLESHOOTING.md
new file mode 100644
index 00000000..a9dd2559
--- /dev/null
+++ b/.agents/skills/catalyst-onboarding/TROUBLESHOOTING.md
@@ -0,0 +1,50 @@
+# Troubleshooting
+
+## Build fails with "not found" or missing module error
+
+**Cause:** dependency build order violated.
+
+**Fix:** `pnpm run build` runs the full pipeline in correct order. If building
+selectively, follow the graph in REPO-STRUCTURE.md: tokens first, then core,
+then angular/react.
+
+## Screenshot test fails locally but passes in CI (or vice versa)
+
+**Cause:** macOS screenshots (`-darwin`) differ from Linux (`-linux`). Both
+variants are committed to `__screenshots__/`. CI uses the Linux baseline.
+
+**Fix:** if the difference is intentional, update the correct baseline:
+- Local (macOS): `pnpm --filter @haiilo/catalyst run test:screenshot:update`
+- CI (Linux): trigger the "Update Screenshots" workflow on GitHub Actions
+
+If the difference is a bug, fix the component.
+
+## Commit hook rejects message
+
+**Cause:** message doesn't follow conventional commits format or uses an
+invalid scope.
+
+**Fix:**
+```bash
+git commit --amend -m "feat(core): correct description"
+```
+
+Valid scopes: `core` `angular` `angular-formly` `react` `tokens` `release`
+
+## Token change not reflected in component styles
+
+**Cause:** `build:tokens` was run but `build:core` was not. Core picks up new
+token variables only when rebuilt.
+
+**Fix:**
+```bash
+pnpm run build:tokens
+pnpm run build:core
+```
+
+## `pnpm install` fails or packages not found
+
+**Cause:** wrong Node or pnpm version.
+
+**Fix:** check `.nvmrc` for the required Node version (`nvm use`), and ensure
+pnpm 9+ is installed (`pnpm --version`).

From efde4668b6f672679df1f0de85bcfd3541b06c4d Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Tue, 28 Jul 2026 11:56:37 +0200
Subject: [PATCH 03/42] chore: create agents.md

---
 AGENTS.md | 554 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 554 insertions(+)
 create mode 100644 AGENTS.md

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000..856fa583
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,554 @@
+# Catalyst Design System — AI Agent Instructions
+
+This guide enables AI agents (and developers) to work effectively in the Catalyst monorepo.
+
+## Skills
+
+Two skills are available for deeper guidance. Load them when needed:
+
+- **`catalyst-onboarding`** — orientation to repo structure, component anatomy, tokens, PR review, and troubleshooting. Load first if unfamiliar with the codebase.
+- **`catalyst-component-development`** — full step-by-step workflow for creating or modifying a component. Load when ready to build.
+
+## About Catalyst
+
+**Catalyst** is a design system built as a monorepo with five published packages:
+
+| Package | Type | Purpose |
+|---------|------|---------|
+| `@haiilo/catalyst-tokens` | NPM | Design tokens (Style Dictionary) |
+| `@haiilo/catalyst` | NPM | Core web components (Stencil) |
+| `@haiilo/catalyst-angular` | NPM | Angular bindings for core components |
+| `@haiilo/catalyst-angular-formly` | NPM | Angular Formly custom field types |
+| `@haiilo/catalyst-react` | NPM | React bindings for core components |
+
+**Tech stack:**
+- **Package manager:** pnpm (v9+)
+- **Node:** v20+
+- **Component framework:** Stencil (TypeScript)
+- **Styling:** SCSS + Style Dictionary tokens
+- **Testing:** Vitest, Playwright (screenshot + e2e)
+- **CI/CD:** GitHub Actions + release-please
+- **Release strategy:** Semantic versioning, all packages bumped together
+
+## Setup
+
+### Prerequisites
+
+```bash
+# Install Node 20+ (or use .nvmrc)
+nvm use
+
+# Install pnpm 9+
+npm install -g pnpm@9
+
+# Install workspace dependencies
+pnpm install
+```
+
+### Useful aliases (optional)
+
+```bash
+alias pn='pnpm'
+alias pnr='pnpm run'
+alias pni='pnpm install'
+alias pnb='pnpm build'
+alias pnt='pnpm test'
+```
+
+### Build order
+
+Packages must be built in dependency order:
+
+```bash
+pnpm run build:tokens   # First: design tokens
+pnpm run build:core     # Second: web components (depend on tokens)
+pnpm run build:angular  # Third: Angular bindings
+pnpm run build:angular-formly  # Fourth: Angular Formly types
+pnpm run build:react    # Fifth: React bindings
+```
+
+Or build all at once:
+
+```bash
+pnpm run build
+```
+
+## File Structure
+
+```
+catalyst/
+├── tokens/                    # Design tokens (Style Dictionary)
+│   └── src/tokens.json
+├── core/                      # Core web components (Stencil)
+│   └── src/components/
+│       ├── cat-button/
+│       │   ├── cat-button.tsx
+│       │   ├── cat-button.spec.tsx        # Unit tests
+│       │   ├── cat-button.e2e.tsx         # Interaction tests
+│       │   ├── cat-button.screenshot.tsx  # Visual regression
+│       │   ├── cat-button.scss
+│       │   └── __screenshots__/           # Reference images
+│       └── [other components]/
+├── angular/                   # Angular bindings
+├── react/                     # React bindings
+├── .github/workflows/         # CI/CD jobs
+│   ├── core.yml              # Test + lint for core package
+│   ├── angular.yml
+│   ├── react.yml
+│   ├── tokens.yml
+│   └── release.yml           # Automated release via release-please
+├── .commitlintrc.json         # Commit message validation
+├── .husky/                    # Git hooks (pre-commit, commit-msg)
+└── README.md
+```
+
+## Guardrails — Core Patterns to Follow
+
+These rules are **derived from the existing codebase** and are enforced by CI or convention.
+
+### 1. Commit Messages (enforced by commitlint)
+
+All commits must follow [Conventional Commits](https://www.conventionalcommits.org/):
+
+```
+<type>(<scope>): <description>
+
+[optional body]
+[optional footer]
+```
+
+**Valid types:** `feat`, `fix`, `chore`, `docs`, `style`, `refactor`, `perf`, `test`
+
+**Valid scopes** (only these allowed):
+- `core` — core web components
+- `angular` — Angular bindings
+- `angular-formly` — Angular Formly types
+- `react` — React bindings
+- `tokens` — design tokens
+- `release` — release-related changes
+
+**Examples:**
+```bash
+feat(core): add clearable prop to cat-input
+fix(angular): correct CVA for cat-select
+chore(tokens): update color palette
+```
+
+**Why it matters:** scope selection triggers version bumps in release-please. A `feat(core)` commits bumps **all packages** (minor version), while `chore(tokens)` may not trigger a release.
+
+**Pre-commit enforcement:** Husky runs commitlint on every commit. To bypass (not recommended): `git commit --no-verify`.
+
+### 2. Component API Design
+
+**Props:**
+- Boolean props **must default to `false`**, never optional: `active = false`, not `active?: boolean`
+- String unions use established scales only:
+  - Sizes: `'xs' | 's' | 'm' | 'l' | 'xl'`
+  - Colors: `'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'`
+- Multi-word props use camelCase: `iconOnly`, `labelHidden`
+- Every `@Prop()` **must have JSDoc** (becomes API documentation)
+- Deprecated props: add `@deprecated` note in JSDoc; never remove
+
+**Events:**
+- All events prefixed `cat`: `catClick`, `catChange`, `catFocus`, `catBlur`
+- Payload typed to match event type: `EventEmitter<MouseEvent>`, `EventEmitter<string>`
+- Use definite assignment: `catChange!: EventEmitter<string>` (not optional)
+
+**Methods:**
+- Native wraps: `doFocus()`, `doBlur()`, `doClick()` — JSDoc explains "use instead of native"
+- State transitions (no `do`): `open()`, `close()`, `clear()`
+- **All methods must be `async` and return `Promise<void>`**
+
+**Required boilerplate** (every interactive component):
+```tsx
+@Element() el!: HTMLElement;
+
+@Prop() testId?: string;
+@Prop() nativeAttributes?: { [key: string]: string };
+
+render() {
+  return (
+    <button
+      data-test={this.testId}
+      {...this.nativeAttributes}
+    >
+      {/* content */}
+    </button>
+  );
+}
+```
+
+**CSS Parts:**
+- Declared in JSDoc: `@part button - The native button element.`
+- Applied in render: `<button part="button">`
+- Cover: interactive native element, visible sub-regions (label, prefix, suffix)
+- Skip: layout wrappers, state-only elements
+
+**Example:**
+```tsx
+/**
+ * A clickable button for triggering actions.
+ *
+ * @part button - The native button element.
+ * @part content - The button text.
+ * @part icon - The optional icon.
+ */
+@Component({
+  tag: 'cat-button',
+  styleUrl: 'cat-button.scss',
+  shadow: { delegatesFocus: true }
+})
+export class CatButton {
+  @Prop() disabled = false;
+  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';
+  @Prop() testId?: string;
+  @Prop() nativeAttributes?: { [key: string]: string };
+
+  @Event() catClick!: EventEmitter<MouseEvent>;
+
+  @Method() async doFocus(): Promise<void> {
+    this.button?.focus();
+  }
+}
+```
+
+### 3. SCSS Styling
+
+**Imports:**
+```scss
+@use 'variables' as *;
+@use 'mixins' as *;
+```
+
+**No hardcoded values:**
+- Colors: **always use `cat-token('color.*')`**
+- Border-radius: **use `cat-border-radius('s' | 'm' | 'l')`** (exception: `10rem` for pill shapes)
+- Font sizing: **use `@include cat-body()`, `@include cat-head()` mixins**
+- Transitions: **use `cat-token('time.transition.*')`**
+
+**Shadow DOM:**
+- `:host` is the top-level layout selector — no wrapping div for layout
+- Include `:host([hidden]) { display: none; }` if component affects display
+- Vendor prefixes: wrap with `/* stylelint-disable property-no-vendor-prefix */ ... /* stylelint-enable */`
+
+**Example:**
+```scss
+@use 'variables' as *;
+@use 'mixins' as *;
+
+:host {
+  display: inline-block;
+  max-width: 100%;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.button {
+  border-radius: cat-border-radius('m');
+  color: cat-token('color.text.primary');
+  transition: background-color cat-token('time.transition.s') linear;
+
+  &:focus-visible {
+    outline: 2px solid cat-token('color.ui.border.focus');
+  }
+}
+```
+
+### 4. Shadow DOM Utilities
+
+These utils exist because Shadow DOM breaks native APIs. Use them:
+
+| Utility | Why | When |
+|---------|-----|------|
+| `findClosest(selector, el)` | Native `closest()` stops at shadow boundaries | Finding ancestors (parent form, wrapper) |
+| `delegatesFocus: true` in `@Component()` | Focus on host auto-delegates to first focusable element | All interactive components |
+| `event.composedPath()` | `event.target` is retargeted at shadow boundaries | Outside-click detection, drag-drop |
+| Slot detection in `componentWillRender` | Can't query slots inside shadow root synchronously | Detect if label/icon/etc. was slotted |
+
+**Example:**
+```tsx
+import { findClosest } from '../../utils/find-closest';
+
+export class CatInput {
+  @Element() el!: HTMLElement;
+
+  componentWillLoad() {
+    // Find parent form
+    const form = findClosest('form', this.el);
+  }
+
+  handleClick(event: MouseEvent) {
+    // Check if click happened outside the component
+    const path = event.composedPath();
+    const isInside = path.includes(this.el);
+  }
+}
+```
+
+### 5. Testing Requirements
+
+All components must have three test files:
+
+| File | Runner | What | Minimum bar |
+|------|--------|------|------------|
+| `*.spec.tsx` | Vitest + JSDOM | HTML structure, prop → render, event emission | Renders without error. Structure matches for key prop combinations. |
+| `*.e2e.tsx` | Vitest + Playwright | User interactions, focus, form behavior | `.toHaveClass('hydrated')`. Plus interactions needing real browser (typing, clicking, focus). |
+| `*.screenshot.tsx` | Vitest + Playwright | Visual appearance per variant | Only for visual variants. Cover all variant × color × state combos. Reset hover in `afterEach`. |
+
+**CI runs all three:**
+```yaml
+pnpm run test          # spec + e2e
+pnpm run test:screenshot
+```
+
+**Screenshot references:**
+- macOS local: `__screenshots__/*-darwin.png`
+- CI (Linux): `__screenshots__/*-linux.png`
+- Both committed to repo
+
+**When screenshot test fails in CI:**
+1. Download `screenshot-diffs` artifact from workflow
+2. Review actual vs expected
+3. If intentional: run `pnpm run test:screenshot:update` locally (updates `-darwin` images) or trigger "Update Screenshots" workflow (updates `-linux` images)
+
+**Example:**
+```tsx
+// cat-button.spec.tsx
+describe('cat-button', () => {
+  it('renders with disabled prop', async () => {
+    const { root } = await render(<cat-button disabled />);
+    expect(root.querySelector('button')).toHaveAttribute('disabled');
+  });
+});
+
+// cat-button.e2e.tsx
+describe('cat-button e2e', () => {
+  it('emits catClick on click', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<cat-button>Click me</cat-button>');
+    const spy = await page.spyOnEvent('catClick');
+    await page.click('cat-button');
+    expect(spy).toHaveReceivedEvent();
+  });
+});
+
+// cat-button.screenshot.tsx
+describe('cat-button screenshot', () => {
+  it('renders all sizes', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <cat-button size="xs">XS</cat-button>
+      <cat-button size="m">M</cat-button>
+      <cat-button size="xl">XL</cat-button>
+    `);
+    expect(await page.screenshot()).toMatchScreenshot();
+  });
+});
+```
+
+## CI/CD
+
+### Local checks before pushing
+
+```bash
+# Format all files (run from core/)
+pnpm --filter @haiilo/catalyst run prettier
+
+# Lint and fix (run from core/)
+pnpm --filter @haiilo/catalyst run lint --fix
+pnpm --filter @haiilo/catalyst run lint:style --fix
+
+# Build all packages
+pnpm run build
+
+# Run all tests
+pnpm run test
+```
+
+### GitHub Actions Workflows
+
+Push triggers automatic CI. All three jobs must pass to merge:
+
+**`.github/workflows/core.yml` (on changes to `core/`)**
+1. **build** — `pnpm run build:tokens && pnpm run build:core`
+2. **lint** — prettier, ESLint, stylelint
+3. **test** — spec, screenshot, e2e tests
+
+Similar workflows exist for `angular.yml`, `react.yml`, `tokens.yml`.
+
+**`.github/workflows/release.yml` (merge to `main` or `beta`)**
+- Triggered by release-please PR merge
+- Updates CHANGELOG, creates git tag, publishes to npm
+
+### Release Process
+
+**Automated (recommended):**
+
+1. Merge commits with valid conventional commit messages to `main`
+2. release-please creates/updates a Release PR automatically
+3. Review and merge the Release PR
+4. release-please tags, creates GitHub release, and publishes to npm
+
+**For pre-releases (beta):**
+
+1. Ensure `beta` branch is up-to-date with `main`
+2. Create feature branch from `beta`
+3. Push and merge PR to `beta`
+4. release-please creates pre-release PR on `beta`
+5. Merge pre-release PR
+6. When ready: create PR from `beta` → `main` (with conventional commit message)
+7. Merge to `main` to trigger regular release
+
+**Check manifest for current version:**
+- `.release-please-manifest.json` — prod versions
+- `.release-please-manifest.beta.json` — beta versions
+
+## Common Tasks
+
+### Add a new component to core
+
+1. **Create directory:**
+   ```bash
+   mkdir core/src/components/cat-mycomponent
+   ```
+
+2. **Create files:**
+   ```
+   cat-mycomponent.tsx         # Component
+   cat-mycomponent.spec.tsx    # Unit tests
+   cat-mycomponent.e2e.tsx     # E2E tests
+   cat-mycomponent.screenshot.tsx  # Visual tests
+   cat-mycomponent.scss        # Styles
+   ```
+
+3. **Implement component:**
+   - Follow component API design (props, events, methods, parts)
+   - Use Shadow DOM utilities (`findClosest`, `delegatesFocus`)
+   - Use token-based styling (no hardcoded colors)
+   - Include JSDoc for all public props/events/methods
+
+4. **Write tests:**
+   - spec: HTML structure for key prop combinations
+   - e2e: user interactions
+   - screenshot: all visual variants
+
+5. **Build and test:**
+   ```bash
+   pnpm run build
+   pnpm run test
+   ```
+
+6. **Commit:**
+   ```bash
+   git add .
+   git commit -m "feat(core): add cat-mycomponent"
+   ```
+
+### Add a new design token
+
+1. **Edit `tokens/src/tokens.json`**
+2. **Build:**
+   ```bash
+   pnpm run build:tokens
+   pnpm run build:core
+   ```
+3. **Commit:**
+   ```bash
+   git commit -m "chore(tokens): add new color token"
+   ```
+
+### Update a component
+
+1. **Make changes** in the component, styles, and tests
+2. **Update tests** if behavior changed
+3. **Update screenshots** if appearance changed:
+   ```bash
+   pnpm run test:screenshot:update  # Local (macOS)
+   ```
+   Or trigger "Update Screenshots" workflow for CI reference
+4. **Build and test:**
+   ```bash
+   pnpm run build
+   pnpm run test
+   ```
+5. **Commit:**
+   ```bash
+   git commit -m "fix(core): correct focus behavior in cat-input"
+   ```
+
+### Review a PR
+
+#### Automated (CI catches these)
+- [ ] Build passes (no type errors, no SCSS compile failures)
+- [ ] Lint passes (prettier, ESLint, stylelint)
+- [ ] All tests pass (spec, screenshot, e2e)
+
+#### Manual (human review catches these)
+- [ ] Commit message: valid type, valid scope, clear description
+- [ ] Component API:
+  - [ ] Boolean props default to `false`
+  - [ ] String unions use established scales (sizes, colors)
+  - [ ] Multi-word props are camelCase
+  - [ ] All `@Prop()` have JSDoc
+  - [ ] All `@Event()` prefixed `cat*`, typed correctly
+  - [ ] All `@Method()` are `async`, return `Promise<void>`
+  - [ ] Interactive components have `testId` + `nativeAttributes`
+- [ ] SCSS:
+  - [ ] No hardcoded colors (use `cat-token()`)
+  - [ ] No raw font-size (use `@include cat-body()` / `@include cat-head()`)
+  - [ ] No hardcoded border-radius (use `cat-border-radius()`)
+  - [ ] `:host` is layout root, not wrapped in div
+  - [ ] `:host([hidden]) { display: none; }` present
+- [ ] Tests:
+  - [ ] New visual variant → screenshot test added
+  - [ ] New interaction → e2e test added
+  - [ ] New prop → spec test added
+- [ ] Shadow DOM:
+  - [ ] Ancestor traversal uses `findClosest()`, not native `closest()`
+  - [ ] Outside-click detection uses `event.composedPath()`
+
+## Troubleshooting
+
+### Build fails with "not found" error
+**Cause:** Dependency order wrong. Always build in order: tokens → core → angular/react
+
+**Fix:**
+```bash
+pnpm run build:tokens
+pnpm run build:core
+pnpm run build:angular
+```
+
+### Screenshot test fails locally but passes in CI
+**Cause:** macOS screenshots (`-darwin`) differ from Linux (`-linux`). Both are committed; CI uses Linux.
+
+**Fix:** Run the test again locally, or manually verify it's an OS-specific rendering difference (not a bug).
+
+### Commit hook rejects message
+**Cause:** Message doesn't follow conventional commits or uses invalid scope.
+
+**Fix:**
+```bash
+git commit --amend -m "feat(core): description"
+```
+
+### release-please doesn't trigger a release
+**Cause:** No commits with valid conventional commit messages since last release.
+
+**Fix:** Ensure PR has commits like `feat(core): ...` or `fix(angular): ...`
+
+## Resources
+
+- **[Conventional Commits](https://www.conventionalcommits.org/)** — commit message format
+- **[release-please](https://github.com/googleapis/release-please)** — automated versioning
+- **[Stencil docs](https://stenciljs.com/)** — web component framework
+- **[Style Dictionary](https://amzn.github.io/style-dictionary/)** — design token system
+- **[Vitest](https://vitest.dev/)** — test runner
+- **[Playwright](https://playwright.dev/)** — E2E testing
+
+## Questions or Issues?
+
+For questions about this guide, ask the tech lead or open an issue on GitHub.
+

From bbd37c45e735b34d71318a99a2802ddd4fca1427 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Tue, 28 Jul 2026 12:07:06 +0200
Subject: [PATCH 04/42] chore: create pr review skill

---
 .../skills/catalyst-pr-review/CHECKLIST.md    | 85 +++++++++++++++++++
 .agents/skills/catalyst-pr-review/SKILL.md    | 36 ++++++++
 AGENTS.md                                     | 32 +------
 3 files changed, 124 insertions(+), 29 deletions(-)
 create mode 100644 .agents/skills/catalyst-pr-review/CHECKLIST.md
 create mode 100644 .agents/skills/catalyst-pr-review/SKILL.md

diff --git a/.agents/skills/catalyst-pr-review/CHECKLIST.md b/.agents/skills/catalyst-pr-review/CHECKLIST.md
new file mode 100644
index 00000000..7eba79ef
--- /dev/null
+++ b/.agents/skills/catalyst-pr-review/CHECKLIST.md
@@ -0,0 +1,85 @@
+# PR Review Checklist
+
+## Commit message
+
+- [ ] Format: `type(scope): description`
+- [ ] Scope is one of: `core` `angular` `angular-formly` `react` `tokens` `release`
+- [ ] `feat(core)` triggers a minor bump across all five packages — confirm scope is intentional
+
+```
+✓  feat(core): add clearable prop to cat-input
+✗  feat(cat-input): add prop      — component name is not a valid scope
+✗  fix: typo in readme             — missing scope
+```
+
+## Props
+
+- [ ] Booleans default to `false`, not `undefined`: `disabled = false` not `disabled?: boolean`
+- [ ] String unions use established scales only — no invented size or color names
+  - sizes: `'xs' | 's' | 'm' | 'l' | 'xl'`
+  - colors: `'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'`
+- [ ] Multi-word props are camelCase: `iconOnly`, `labelHidden`
+- [ ] Every `@Prop()` has a JSDoc comment
+- [ ] Deprecated props have `@deprecated reason. Use X instead.` in JSDoc — never removed
+
+## Events
+
+- [ ] All events prefixed `cat`: `catClick`, `catChange`, `catFocus`, `catBlur`
+- [ ] Payload typed to the event: `EventEmitter<FocusEvent>`, `EventEmitter<MouseEvent>`
+- [ ] Value-change events carry the value type: `EventEmitter<string>` not `EventEmitter<Event>`
+- [ ] Definite assignment: `catChange!: EventEmitter<string>`
+
+## Methods
+
+- [ ] Native wraps use `do` prefix: `doFocus()`, `doBlur()`, `doClick()`
+- [ ] JSDoc on `do*` methods says "Use this instead of calling `.focus()` directly"
+- [ ] State transitions have no prefix: `open()`, `close()`, `clear()`
+- [ ] All `@Method()` are `async` and return `Promise<void>`
+
+## Boilerplate
+
+Every interactive component must have:
+
+- [ ] `@Element() el!: HTMLElement`
+- [ ] `testId?: string` prop — applied as `data-test` on the native inner element
+- [ ] `nativeAttributes?: { [key: string]: string }` prop — spread on the native inner element
+
+## CSS parts
+
+- [ ] Every part declared in component JSDoc: `@part button - The native button element.`
+- [ ] Every declared part applied in render: `part="button"`
+- [ ] Parts cover: native interactive element, visible sub-regions (label, prefix, suffix, content)
+- [ ] Parts do NOT expose: internal layout wrappers, state-only elements
+
+## SCSS
+
+- [ ] Starts with `@use 'variables' as *;` and `@use 'mixins' as *;`
+- [ ] No hardcoded color hex or `rgb()` — all via `cat-token('color.*')`
+- [ ] No raw `font-size` / `line-height` — use `@include cat-body()` / `@include cat-head()`
+- [ ] No hardcoded `border-radius` px/rem — use `cat-border-radius()` (exception: `10rem` for pill)
+- [ ] Vendor-prefix blocks wrapped in `/* stylelint-disable/enable property-no-vendor-prefix */`
+- [ ] `:host` is the top-level layout selector — no wrapping div for host layout
+- [ ] `:host([hidden]) { display: none; }` present
+
+Token access patterns — three forms, all valid:
+
+```scss
+// 1. Standard
+outline: 2px solid cat-token('color.ui.border.focus');
+// 2. Raw RGB triplet for CSS custom property chain
+--my-color: #{cat-token('color.ui.border.dark', $wrap: false)};
+// 3. Re-wrap at consumption point
+background: cat-token-wrap(var(--my-color));
+```
+
+## Tests
+
+- [ ] New prop with render impact → spec test added
+- [ ] New interaction (focus, value, event) → e2e test added
+- [ ] New visual variant or state → screenshot test added and baselines committed
+
+## Shadow DOM
+
+- [ ] Ancestor traversal uses `findClosest(selector, el)` from `core/src/utils/find-closest` — not `el.closest()`
+- [ ] Outside-click / inside detection uses `event.composedPath()` — not `event.target`
+- [ ] Any component wrapping a focusable element uses `shadow: { delegatesFocus: true }`
diff --git a/.agents/skills/catalyst-pr-review/SKILL.md b/.agents/skills/catalyst-pr-review/SKILL.md
new file mode 100644
index 00000000..d50e1152
--- /dev/null
+++ b/.agents/skills/catalyst-pr-review/SKILL.md
@@ -0,0 +1,36 @@
+# Skill: catalyst-pr-review
+
+Act as a **reviewer**: confirm CI coverage, then apply the manual checklist exhaustively. Every item must be checked or explicitly marked N/A before the review is done.
+
+## Step 1 — Identify the PR and check CI
+
+Ask the user which PR to review if not already specified. Fetch the diff and CI status.
+
+All three CI jobs must be green. If any are red, report the failing job and ask the user whether to wait for a fix or proceed anyway — do not silently continue.
+
+| Job | Runs | Catches |
+|-----|------|---------|
+| build | `build:tokens` → `build:core` | Type errors, broken imports, SCSS compile failures |
+| lint | prettier, ESLint, stylelint | Formatting drift, lint violations |
+| test | spec, screenshot, e2e | HTML regression, visual regression, interaction regression |
+
+**Note:** commitlint runs as a Husky pre-commit hook, not in CI. A contributor who used `--no-verify` bypasses it — always check commit messages manually, especially on PRs from external contributors.
+
+Completion criterion: CI status confirmed; any red job surfaced and disposition agreed with user.
+
+## Step 2 — Manual checklist
+
+Work through every section in [CHECKLIST.md](CHECKLIST.md). Mark each item ✅ (pass), ❌ (fail — note the file/line), or N/A (not applicable — one-word reason).
+
+Collect all failures before writing the review so the author gets one complete pass, not a drip of comments.
+
+Completion criterion: every item marked, all ❌ failures documented with file and line.
+
+## Step 3 — Write the review
+
+- Lead with a one-sentence summary of what the PR does.
+- List every ❌ as a required change with file, line, and the specific rule it breaks.
+- List non-blocking observations as optional suggestions, clearly labelled.
+- If all items are ✅ or N/A, approve.
+
+Completion criterion: review drafted for the user to post.
diff --git a/AGENTS.md b/AGENTS.md
index 856fa583..2cc5898d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -4,10 +4,11 @@ This guide enables AI agents (and developers) to work effectively in the Catalys
 
 ## Skills
 
-Two skills are available for deeper guidance. Load them when needed:
+The following skills are available for deeper guidance. Load them when needed:
 
 - **`catalyst-onboarding`** — orientation to repo structure, component anatomy, tokens, PR review, and troubleshooting. Load first if unfamiliar with the codebase.
 - **`catalyst-component-development`** — full step-by-step workflow for creating or modifying a component. Load when ready to build.
+- **`catalyst-pr-review`** — step-by-step PR review workflow with full checklist. Load when reviewing a PR.
 
 ## About Catalyst
 
@@ -480,34 +481,7 @@ Similar workflows exist for `angular.yml`, `react.yml`, `tokens.yml`.
 
 ### Review a PR
 
-#### Automated (CI catches these)
-- [ ] Build passes (no type errors, no SCSS compile failures)
-- [ ] Lint passes (prettier, ESLint, stylelint)
-- [ ] All tests pass (spec, screenshot, e2e)
-
-#### Manual (human review catches these)
-- [ ] Commit message: valid type, valid scope, clear description
-- [ ] Component API:
-  - [ ] Boolean props default to `false`
-  - [ ] String unions use established scales (sizes, colors)
-  - [ ] Multi-word props are camelCase
-  - [ ] All `@Prop()` have JSDoc
-  - [ ] All `@Event()` prefixed `cat*`, typed correctly
-  - [ ] All `@Method()` are `async`, return `Promise<void>`
-  - [ ] Interactive components have `testId` + `nativeAttributes`
-- [ ] SCSS:
-  - [ ] No hardcoded colors (use `cat-token()`)
-  - [ ] No raw font-size (use `@include cat-body()` / `@include cat-head()`)
-  - [ ] No hardcoded border-radius (use `cat-border-radius()`)
-  - [ ] `:host` is layout root, not wrapped in div
-  - [ ] `:host([hidden]) { display: none; }` present
-- [ ] Tests:
-  - [ ] New visual variant → screenshot test added
-  - [ ] New interaction → e2e test added
-  - [ ] New prop → spec test added
-- [ ] Shadow DOM:
-  - [ ] Ancestor traversal uses `findClosest()`, not native `closest()`
-  - [ ] Outside-click detection uses `event.composedPath()`
+Load the `catalyst-pr-review` skill. It walks through CI verification and the full manual checklist step by step.
 
 ## Troubleshooting
 

From 71adb1a5d50654544930e801618bae942f2c31cb Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Tue, 28 Jul 2026 12:12:48 +0200
Subject: [PATCH 05/42] chore: create release skill

---
 .agents/skills/catalyst-release/SKILL.md | 63 ++++++++++++++++++++++++
 AGENTS.md                                | 22 +--------
 2 files changed, 65 insertions(+), 20 deletions(-)
 create mode 100644 .agents/skills/catalyst-release/SKILL.md

diff --git a/.agents/skills/catalyst-release/SKILL.md b/.agents/skills/catalyst-release/SKILL.md
new file mode 100644
index 00000000..1502418e
--- /dev/null
+++ b/.agents/skills/catalyst-release/SKILL.md
@@ -0,0 +1,63 @@
+# Skill: catalyst-release
+
+Perform a **release** of the Catalyst design system. All five packages share a single version via the `linked-versions` plugin — one Release PR bumps them all.
+
+Ask the user: **stable or beta?** Then follow the matching track below.
+
+Release-please monitors `main` (stable) and `beta` (pre-release). When it sees releasable commits it creates or updates a Release PR — changelog + manifest bump. Merging that PR triggers `release.yml`, which builds and publishes all five packages to npm.
+
+| Branch | Config | Manifest | npm tag |
+|--------|--------|----------|---------|
+| `main` | `release-please-config.json` | `.release-please-manifest.json` | `latest` |
+| `beta` | `release-please-config.beta.json` | `.release-please-manifest.beta.json` | `beta` |
+
+## Version bump rules
+
+The bump is the highest-impact commit since the last release. Scope determines which changelog gets the entry; all five packages bump regardless.
+
+| Commit type | Bump |
+|-------------|------|
+| `feat(*)` | minor |
+| `fix(*)`, `perf(*)` | patch |
+| `BREAKING CHANGE` footer | major |
+| `chore(*)`, `docs(*)`, `style(*)` | no release |
+
+## Stable release
+
+1. Confirm all feature/fix commits are on `main` with valid conventional commit messages.
+2. Find the open Release PR (title: `chore(main): release X.Y.Z`).
+3. Check before merging:
+   - [ ] CHANGELOG entries match the commits and are readable
+   - [ ] Version in `.release-please-manifest.json` matches the intended bump level
+   - [ ] No unintended commits in the diff
+   - [ ] CI on the Release PR is green
+4. Merge the Release PR.
+5. Confirm the `release` job completes and `publish` job runs — all five packages on npm at the new version.
+
+Completion criterion: all five packages published at the new version under the `latest` tag.
+
+## Beta release
+
+1. Ensure `beta` is up-to-date with `main`: `git checkout beta && git merge main`.
+2. Create a feature branch from `beta`, make changes, merge PR to `beta`.
+3. Find the Release PR release-please created on `beta` (title: `chore(beta): release X.Y.Z-beta.N`).
+4. Apply the same pre-merge checks as stable, then merge.
+5. Confirm packages are published under the `beta` tag.
+
+Completion criterion: all five packages published at `X.Y.Z-beta.N` under the `beta` tag.
+
+**Promoting beta to stable:** open a PR from `beta` → `main` with a conventional commit message — release-please detects it and creates a stable Release PR. Then follow the stable track.
+
+## Troubleshooting
+
+**Release PR not appearing**
+No releasable commits since last release. `chore(*)` alone does not trigger a release — at least one `feat` or `fix` must be present.
+
+**`publish` job skipped**
+`releases_created` was false — Release PR was not merged, or release-please found no new releasable commits. Re-check the Release PR state.
+
+**Beta and stable manifests out of sync**
+Sync `beta` with `main` after every stable release (`git merge main` into `beta`).
+
+**Wrong version bumped**
+linked-versions means packages cannot bump independently. Add a `fix` commit to force a patch bump if only `chore` commits exist.
diff --git a/AGENTS.md b/AGENTS.md
index 2cc5898d..dd3da8f1 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -9,6 +9,7 @@ The following skills are available for deeper guidance. Load them when needed:
 - **`catalyst-onboarding`** — orientation to repo structure, component anatomy, tokens, PR review, and troubleshooting. Load first if unfamiliar with the codebase.
 - **`catalyst-component-development`** — full step-by-step workflow for creating or modifying a component. Load when ready to build.
 - **`catalyst-pr-review`** — step-by-step PR review workflow with full checklist. Load when reviewing a PR.
+- **`catalyst-release`** — stable and beta release workflow via release-please. Load when preparing or troubleshooting a release.
 
 ## About Catalyst
 
@@ -385,26 +386,7 @@ Similar workflows exist for `angular.yml`, `react.yml`, `tokens.yml`.
 
 ### Release Process
 
-**Automated (recommended):**
-
-1. Merge commits with valid conventional commit messages to `main`
-2. release-please creates/updates a Release PR automatically
-3. Review and merge the Release PR
-4. release-please tags, creates GitHub release, and publishes to npm
-
-**For pre-releases (beta):**
-
-1. Ensure `beta` branch is up-to-date with `main`
-2. Create feature branch from `beta`
-3. Push and merge PR to `beta`
-4. release-please creates pre-release PR on `beta`
-5. Merge pre-release PR
-6. When ready: create PR from `beta` → `main` (with conventional commit message)
-7. Merge to `main` to trigger regular release
-
-**Check manifest for current version:**
-- `.release-please-manifest.json` — prod versions
-- `.release-please-manifest.beta.json` — beta versions
+Load the `catalyst-release` skill. It covers stable and beta release workflows, version bump rules, pre-merge checks, and troubleshooting.
 
 ## Common Tasks
 

From 2eb9f2db65249020426768c0e5807ac5bb5144bc Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Wed, 5 Aug 2026 13:46:42 +0200
Subject: [PATCH 06/42] chore: remove release skill

---
 .agents/skills/catalyst-release/SKILL.md | 63 ------------------------
 1 file changed, 63 deletions(-)
 delete mode 100644 .agents/skills/catalyst-release/SKILL.md

diff --git a/.agents/skills/catalyst-release/SKILL.md b/.agents/skills/catalyst-release/SKILL.md
deleted file mode 100644
index 1502418e..00000000
--- a/.agents/skills/catalyst-release/SKILL.md
+++ /dev/null
@@ -1,63 +0,0 @@
-# Skill: catalyst-release
-
-Perform a **release** of the Catalyst design system. All five packages share a single version via the `linked-versions` plugin — one Release PR bumps them all.
-
-Ask the user: **stable or beta?** Then follow the matching track below.
-
-Release-please monitors `main` (stable) and `beta` (pre-release). When it sees releasable commits it creates or updates a Release PR — changelog + manifest bump. Merging that PR triggers `release.yml`, which builds and publishes all five packages to npm.
-
-| Branch | Config | Manifest | npm tag |
-|--------|--------|----------|---------|
-| `main` | `release-please-config.json` | `.release-please-manifest.json` | `latest` |
-| `beta` | `release-please-config.beta.json` | `.release-please-manifest.beta.json` | `beta` |
-
-## Version bump rules
-
-The bump is the highest-impact commit since the last release. Scope determines which changelog gets the entry; all five packages bump regardless.
-
-| Commit type | Bump |
-|-------------|------|
-| `feat(*)` | minor |
-| `fix(*)`, `perf(*)` | patch |
-| `BREAKING CHANGE` footer | major |
-| `chore(*)`, `docs(*)`, `style(*)` | no release |
-
-## Stable release
-
-1. Confirm all feature/fix commits are on `main` with valid conventional commit messages.
-2. Find the open Release PR (title: `chore(main): release X.Y.Z`).
-3. Check before merging:
-   - [ ] CHANGELOG entries match the commits and are readable
-   - [ ] Version in `.release-please-manifest.json` matches the intended bump level
-   - [ ] No unintended commits in the diff
-   - [ ] CI on the Release PR is green
-4. Merge the Release PR.
-5. Confirm the `release` job completes and `publish` job runs — all five packages on npm at the new version.
-
-Completion criterion: all five packages published at the new version under the `latest` tag.
-
-## Beta release
-
-1. Ensure `beta` is up-to-date with `main`: `git checkout beta && git merge main`.
-2. Create a feature branch from `beta`, make changes, merge PR to `beta`.
-3. Find the Release PR release-please created on `beta` (title: `chore(beta): release X.Y.Z-beta.N`).
-4. Apply the same pre-merge checks as stable, then merge.
-5. Confirm packages are published under the `beta` tag.
-
-Completion criterion: all five packages published at `X.Y.Z-beta.N` under the `beta` tag.
-
-**Promoting beta to stable:** open a PR from `beta` → `main` with a conventional commit message — release-please detects it and creates a stable Release PR. Then follow the stable track.
-
-## Troubleshooting
-
-**Release PR not appearing**
-No releasable commits since last release. `chore(*)` alone does not trigger a release — at least one `feat` or `fix` must be present.
-
-**`publish` job skipped**
-`releases_created` was false — Release PR was not merged, or release-please found no new releasable commits. Re-check the Release PR state.
-
-**Beta and stable manifests out of sync**
-Sync `beta` with `main` after every stable release (`git merge main` into `beta`).
-
-**Wrong version bumped**
-linked-versions means packages cannot bump independently. Add a `fix` commit to force a patch bump if only `chore` commits exist.

From d007e572798501c2ddeb3159fb713609553a8b50 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Wed, 5 Aug 2026 13:47:10 +0200
Subject: [PATCH 07/42] chore: condense AGENTS.md

---
 AGENTS.md | 594 +++++++++++++++---------------------------------------
 1 file changed, 166 insertions(+), 428 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index dd3da8f1..7693c260 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,510 +1,248 @@
-# Catalyst Design System — AI Agent Instructions
+# AGENTS.md
 
-This guide enables AI agents (and developers) to work effectively in the Catalyst monorepo.
+Agent instructions for Catalyst Design System. This file complements package READMEs; use the closest nested `AGENTS.md` if one is added later.
 
-## Skills
+## Project overview
 
-The following skills are available for deeper guidance. Load them when needed:
+Catalyst is a pnpm monorepo that publishes five related packages:
 
-- **`catalyst-onboarding`** — orientation to repo structure, component anatomy, tokens, PR review, and troubleshooting. Load first if unfamiliar with the codebase.
-- **`catalyst-component-development`** — full step-by-step workflow for creating or modifying a component. Load when ready to build.
-- **`catalyst-pr-review`** — step-by-step PR review workflow with full checklist. Load when reviewing a PR.
-- **`catalyst-release`** — stable and beta release workflow via release-please. Load when preparing or troubleshooting a release.
+| Directory                           | Package                           | Purpose                        |
+|-------------------------------------|-----------------------------------|--------------------------------|
+| `tokens/`                           | `@haiilo/catalyst-tokens`         | Style Dictionary design tokens |
+| `core/`                             | `@haiilo/catalyst`                | Stencil web components         |
+| `angular/`                          | `@haiilo/catalyst-angular`        | Angular bindings               |
+| `angular/projects/catalyst-formly/` | `@haiilo/catalyst-angular-formly` | Angular Formly types           |
+| `react/`                            | `@haiilo/catalyst-react`          | React bindings                 |
 
-## About Catalyst
+Technology: TypeScript, Stencil, Angular, React, SCSS, Style Dictionary, Vitest, Playwright, pnpm, and GitHub Actions. Build dependencies in this order:
 
-**Catalyst** is a design system built as a monorepo with five published packages:
+```text
+tokens -> core -> angular -> angular-formly
+tokens -> core -> react
+```
 
-| Package | Type | Purpose |
-|---------|------|---------|
-| `@haiilo/catalyst-tokens` | NPM | Design tokens (Style Dictionary) |
-| `@haiilo/catalyst` | NPM | Core web components (Stencil) |
-| `@haiilo/catalyst-angular` | NPM | Angular bindings for core components |
-| `@haiilo/catalyst-angular-formly` | NPM | Angular Formly custom field types |
-| `@haiilo/catalyst-react` | NPM | React bindings for core components |
+## Repository skills
 
-**Tech stack:**
-- **Package manager:** pnpm (v9+)
-- **Node:** v20+
-- **Component framework:** Stencil (TypeScript)
-- **Styling:** SCSS + Style Dictionary tokens
-- **Testing:** Vitest, Playwright (screenshot + e2e)
-- **CI/CD:** GitHub Actions + release-please
-- **Release strategy:** Semantic versioning, all packages bumped together
+Use these optional skills for deeper guidance when working in this repository:
 
-## Setup
+- `catalyst-onboarding` — orient to repository structure and package workflows.
+- `catalyst-component-development` — create or modify Catalyst components.
+- `catalyst-pr-review` — review changes against repository standards.
+- `stenciljs-component-development` — apply Stencil implementation patterns.
 
-### Prerequisites
+Skill files live under `.agents/skills/`. Follow this file and package documentation when a skill is unavailable.
 
-```bash
-# Install Node 20+ (or use .nvmrc)
-nvm use
+## Repository navigation
 
-# Install pnpm 9+
-npm install -g pnpm@9
+- Tokens: `tokens/src/`, `tokens/config.js`
+- Core components/utilities: `core/src/components/cat-*/`, `core/src/utils/`
+- Angular source/demos: `angular/projects/`
+- React bindings: `react/src/`
+- CI: `.github/workflows/`; releases: `release-please-config*.json`, `.release-please-manifest*.json`
+- Package documentation: each package's `README.md`
 
-# Install workspace dependencies
-pnpm install
-```
+Do not edit generated output under `dist/`, `core/loader/`, `core/www/`, or
+`.stencil/` unless a workflow explicitly requires it. Generated files are normally recreated by package scripts.
 
-### Useful aliases (optional)
+## Setup
+
+Requirements are declared in the root `package.json`: Node `>=20`, pnpm `>=9`. CI uses the Node version in `.nvmrc` (`24`) and pnpm 9; use those versions locally.
 
 ```bash
-alias pn='pnpm'
-alias pnr='pnpm run'
-alias pni='pnpm install'
-alias pnb='pnpm build'
-alias pnt='pnpm test'
+nvm use
+pnpm --version
+pnpm install
 ```
 
-### Build order
+Run commands from repository root unless a command says otherwise. Keep
+`pnpm-lock.yaml` synchronized with dependency changes. Do not use npm or Yarn for workspace installation.
 
-Packages must be built in dependency order:
+## Development commands
+
+### Build
 
 ```bash
-pnpm run build:tokens   # First: design tokens
-pnpm run build:core     # Second: web components (depend on tokens)
-pnpm run build:angular  # Third: Angular bindings
-pnpm run build:angular-formly  # Fourth: Angular Formly types
-pnpm run build:react    # Fifth: React bindings
+pnpm run build                 # all packages, in dependency order
+pnpm run build:tokens
+pnpm run build:core
+pnpm run build:angular
+pnpm run build:angular-formly
+pnpm run build:react
 ```
 
-Or build all at once:
+Core development server and watch mode:
 
 ```bash
-pnpm run build
+pnpm --filter @haiilo/catalyst run start
+pnpm --filter @haiilo/catalyst run build:watch
 ```
 
-## File Structure
+Angular development server and watch mode:
 
-```
-catalyst/
-├── tokens/                    # Design tokens (Style Dictionary)
-│   └── src/tokens.json
-├── core/                      # Core web components (Stencil)
-│   └── src/components/
-│       ├── cat-button/
-│       │   ├── cat-button.tsx
-│       │   ├── cat-button.spec.tsx        # Unit tests
-│       │   ├── cat-button.e2e.tsx         # Interaction tests
-│       │   ├── cat-button.screenshot.tsx  # Visual regression
-│       │   ├── cat-button.scss
-│       │   └── __screenshots__/           # Reference images
-│       └── [other components]/
-├── angular/                   # Angular bindings
-├── react/                     # React bindings
-├── .github/workflows/         # CI/CD jobs
-│   ├── core.yml              # Test + lint for core package
-│   ├── angular.yml
-│   ├── react.yml
-│   ├── tokens.yml
-│   └── release.yml           # Automated release via release-please
-├── .commitlintrc.json         # Commit message validation
-├── .husky/                    # Git hooks (pre-commit, commit-msg)
-└── README.md
+```bash
+pnpm --filter @haiilo/catalyst-angular-workspace run start
+pnpm --filter @haiilo/catalyst-angular-workspace run watch
 ```
 
-## Guardrails — Core Patterns to Follow
+Build output is package-specific: tokens use `tokens/dist`, core uses
+`core/dist`, Angular uses `angular/dist`, and React uses `react/dist`.
 
-These rules are **derived from the existing codebase** and are enforced by CI or convention.
+### Formatting and linting
 
-### 1. Commit Messages (enforced by commitlint)
-
-All commits must follow [Conventional Commits](https://www.conventionalcommits.org/):
+CI checks core with Prettier, ESLint, and Stylelint:
 
+```bash
+pnpm --filter @haiilo/catalyst run prettier:check
+pnpm --filter @haiilo/catalyst run lint
+pnpm --filter @haiilo/catalyst run lint:style
 ```
-<type>(<scope>): <description>
 
-[optional body]
-[optional footer]
+To format or autofix during development, use `prettier`, `lint -- --fix`, and
+`lint:style -- --fix` on the core filter. Angular exposes `prettier:check`.
+
+```bash
+pnpm --filter @haiilo/catalyst run prettier
+pnpm --filter @haiilo/catalyst run lint -- --fix
+pnpm --filter @haiilo/catalyst run lint:style -- --fix
+pnpm --filter @haiilo/catalyst-angular-workspace run prettier:check
 ```
 
-**Valid types:** `feat`, `fix`, `chore`, `docs`, `style`, `refactor`, `perf`, `test`
+Run the applicable formatter and linter after changes. Do not suppress lint rules without a repository-specific reason.
+
+## Testing
 
-**Valid scopes** (only these allowed):
-- `core` — core web components
-- `angular` — Angular bindings
-- `angular-formly` — Angular Formly types
-- `react` — React bindings
-- `tokens` — design tokens
-- `release` — release-related changes
+### Core
+
+Core tests are configured in `core/vitest.config.mts`:
+
+- `*.spec.tsx`: Stencil/Vitest plugin tests
+- `*.e2e.tsx`: headless Chromium browser interaction tests
+- `*.screenshot.tsx`: headless Chromium visual regression tests
 
-**Examples:**
 ```bash
-feat(core): add clearable prop to cat-input
-fix(angular): correct CVA for cat-select
-chore(tokens): update color palette
+pnpm --filter @haiilo/catalyst run test
+pnpm --filter @haiilo/catalyst run test:e2e
+pnpm --filter @haiilo/catalyst run test:screenshot
+pnpm --filter @haiilo/catalyst run test:watch
 ```
 
-**Why it matters:** scope selection triggers version bumps in release-please. A `feat(core)` commits bumps **all packages** (minor version), while `chore(tokens)` may not trigger a release.
-
-**Pre-commit enforcement:** Husky runs commitlint on every commit. To bypass (not recommended): `git commit --no-verify`.
-
-### 2. Component API Design
-
-**Props:**
-- Boolean props **must default to `false`**, never optional: `active = false`, not `active?: boolean`
-- String unions use established scales only:
-  - Sizes: `'xs' | 's' | 'm' | 'l' | 'xl'`
-  - Colors: `'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'`
-- Multi-word props use camelCase: `iconOnly`, `labelHidden`
-- Every `@Prop()` **must have JSDoc** (becomes API documentation)
-- Deprecated props: add `@deprecated` note in JSDoc; never remove
-
-**Events:**
-- All events prefixed `cat`: `catClick`, `catChange`, `catFocus`, `catBlur`
-- Payload typed to match event type: `EventEmitter<MouseEvent>`, `EventEmitter<string>`
-- Use definite assignment: `catChange!: EventEmitter<string>` (not optional)
-
-**Methods:**
-- Native wraps: `doFocus()`, `doBlur()`, `doClick()` — JSDoc explains "use instead of native"
-- State transitions (no `do`): `open()`, `close()`, `clear()`
-- **All methods must be `async` and return `Promise<void>`**
-
-**Required boilerplate** (every interactive component):
-```tsx
-@Element() el!: HTMLElement;
-
-@Prop() testId?: string;
-@Prop() nativeAttributes?: { [key: string]: string };
-
-render() {
-  return (
-    <button
-      data-test={this.testId}
-      {...this.nativeAttributes}
-    >
-      {/* content */}
-    </button>
-  );
-}
-```
+Install browser dependencies when needed:
 
-**CSS Parts:**
-- Declared in JSDoc: `@part button - The native button element.`
-- Applied in render: `<button part="button">`
-- Cover: interactive native element, visible sub-regions (label, prefix, suffix)
-- Skip: layout wrappers, state-only elements
-
-**Example:**
-```tsx
-/**
- * A clickable button for triggering actions.
- *
- * @part button - The native button element.
- * @part content - The button text.
- * @part icon - The optional icon.
- */
-@Component({
-  tag: 'cat-button',
-  styleUrl: 'cat-button.scss',
-  shadow: { delegatesFocus: true }
-})
-export class CatButton {
-  @Prop() disabled = false;
-  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';
-  @Prop() testId?: string;
-  @Prop() nativeAttributes?: { [key: string]: string };
-
-  @Event() catClick!: EventEmitter<MouseEvent>;
-
-  @Method() async doFocus(): Promise<void> {
-    this.button?.focus();
-  }
-}
+```bash
+pnpm --dir core exec playwright install --with-deps
 ```
 
-### 3. SCSS Styling
+Run one test file or test name through Vitest from `core/`, for example:
 
-**Imports:**
-```scss
-@use 'variables' as *;
-@use 'mixins' as *;
+```bash
+pnpm --dir core exec vitest run src/components/cat-button/cat-button.spec.tsx
+pnpm --dir core exec vitest run -t "renders with disabled prop"
 ```
 
-**No hardcoded values:**
-- Colors: **always use `cat-token('color.*')`**
-- Border-radius: **use `cat-border-radius('s' | 'm' | 'l')`** (exception: `10rem` for pill shapes)
-- Font sizing: **use `@include cat-body()`, `@include cat-head()` mixins**
-- Transitions: **use `cat-token('time.transition.*')`**
-
-**Shadow DOM:**
-- `:host` is the top-level layout selector — no wrapping div for layout
-- Include `:host([hidden]) { display: none; }` if component affects display
-- Vendor prefixes: wrap with `/* stylelint-disable property-no-vendor-prefix */ ... /* stylelint-enable */`
-
-**Example:**
-```scss
-@use 'variables' as *;
-@use 'mixins' as *;
-
-:host {
-  display: inline-block;
-  max-width: 100%;
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-.button {
-  border-radius: cat-border-radius('m');
-  color: cat-token('color.text.primary');
-  transition: background-color cat-token('time.transition.s') linear;
-
-  &:focus-visible {
-    outline: 2px solid cat-token('color.ui.border.focus');
-  }
-}
+Screenshot references live in component `__screenshots__/` directories. Local macOS references end in `-darwin`; CI Linux references end in `-linux`. After an intentional visual change:
+
+```bash
+pnpm run test:screenshot:update
 ```
 
-### 4. Shadow DOM Utilities
+This updates local references. Use the manually triggered **Update Screenshots**
+workflow to regenerate Linux references. Do not update snapshots to hide an unexplained rendering or behavior regression.
 
-These utils exist because Shadow DOM breaks native APIs. Use them:
+### Angular
 
-| Utility | Why | When |
-|---------|-----|------|
-| `findClosest(selector, el)` | Native `closest()` stops at shadow boundaries | Finding ancestors (parent form, wrapper) |
-| `delegatesFocus: true` in `@Component()` | Focus on host auto-delegates to first focusable element | All interactive components |
-| `event.composedPath()` | `event.target` is retargeted at shadow boundaries | Outside-click detection, drag-drop |
-| Slot detection in `componentWillRender` | Can't query slots inside shadow root synchronously | Detect if label/icon/etc. was slotted |
+```bash
+pnpm --filter @haiilo/catalyst-angular-workspace run test
+pnpm --filter @haiilo/catalyst-angular-workspace run test:ci
+```
 
-**Example:**
-```tsx
-import { findClosest } from '../../utils/find-closest';
+`test:ci` runs both `catalyst` and `catalyst-formly` with ChromiumHeadless.
 
-export class CatInput {
-  @Element() el!: HTMLElement;
+### React and tokens
 
-  componentWillLoad() {
-    // Find parent form
-    const form = findClosest('form', this.el);
-  }
+React exposes build/type checking rather than a test script:
 
-  handleClick(event: MouseEvent) {
-    // Check if click happened outside the component
-    const path = event.composedPath();
-    const isInside = path.includes(this.el);
-  }
-}
+```bash
+pnpm --filter @haiilo/catalyst-react run build
+pnpm --filter @haiilo/catalyst-react run tsc
 ```
 
-### 5. Testing Requirements
+Tokens are validated through their build:
 
-All components must have three test files:
-
-| File | Runner | What | Minimum bar |
-|------|--------|------|------------|
-| `*.spec.tsx` | Vitest + JSDOM | HTML structure, prop → render, event emission | Renders without error. Structure matches for key prop combinations. |
-| `*.e2e.tsx` | Vitest + Playwright | User interactions, focus, form behavior | `.toHaveClass('hydrated')`. Plus interactions needing real browser (typing, clicking, focus). |
-| `*.screenshot.tsx` | Vitest + Playwright | Visual appearance per variant | Only for visual variants. Cover all variant × color × state combos. Reset hover in `afterEach`. |
-
-**CI runs all three:**
-```yaml
-pnpm run test          # spec + e2e
-pnpm run test:screenshot
+```bash
+pnpm run build:tokens
 ```
 
-**Screenshot references:**
-- macOS local: `__screenshots__/*-darwin.png`
-- CI (Linux): `__screenshots__/*-linux.png`
-- Both committed to repo
-
-**When screenshot test fails in CI:**
-1. Download `screenshot-diffs` artifact from workflow
-2. Review actual vs expected
-3. If intentional: run `pnpm run test:screenshot:update` locally (updates `-darwin` images) or trigger "Update Screenshots" workflow (updates `-linux` images)
-
-**Example:**
-```tsx
-// cat-button.spec.tsx
-describe('cat-button', () => {
-  it('renders with disabled prop', async () => {
-    const { root } = await render(<cat-button disabled />);
-    expect(root.querySelector('button')).toHaveAttribute('disabled');
-  });
-});
-
-// cat-button.e2e.tsx
-describe('cat-button e2e', () => {
-  it('emits catClick on click', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<cat-button>Click me</cat-button>');
-    const spy = await page.spyOnEvent('catClick');
-    await page.click('cat-button');
-    expect(spy).toHaveReceivedEvent();
-  });
-});
-
-// cat-button.screenshot.tsx
-describe('cat-button screenshot', () => {
-  it('renders all sizes', async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
-      <cat-button size="xs">XS</cat-button>
-      <cat-button size="m">M</cat-button>
-      <cat-button size="xl">XL</cat-button>
-    `);
-    expect(await page.screenshot()).toMatchScreenshot();
-  });
-});
-```
+Always add or update tests for behavior changes. Keep component tests beside their implementation under `core/src/components/`.
 
-## CI/CD
+## Implementation conventions
 
-### Local checks before pushing
+### Core components
 
-```bash
-# Format all files (run from core/)
-pnpm --filter @haiilo/catalyst run prettier
+For a new or changed component, inspect a nearby component with similar behavior first. Keep implementation, styles, documentation, and applicable
+`*.spec.tsx`, `*.e2e.tsx`, and `*.screenshot.tsx` files together.
 
-# Lint and fix (run from core/)
-pnpm --filter @haiilo/catalyst run lint --fix
-pnpm --filter @haiilo/catalyst run lint:style --fix
+Follow these project conventions:
 
-# Build all packages
-pnpm run build
+- Use `cat-*` tags and PascalCase class names.
+- Document public `@Prop`, `@Event`, and `@Method` APIs with JSDoc.
+- Boolean props have explicit `false` defaults.
+- Use camelCase for multi-word props and `cat` prefixes for custom events.
+- Type event payloads with `EventEmitter<T>` and definite assignment.
+- Public Stencil methods are asynchronous and return `Promise<void>`.
+- Use `delegatesFocus: true` for interactive shadow components where focus should enter the native control.
+- Use `findClosest` across shadow boundaries and `event.composedPath()` for retargeted events/outside-click handling.
+- Expose CSS parts only for meaningful public sub-elements; document each part in component JSDoc and apply its `part` attribute in render output.
+- Use `:host` for component layout and token/mixin helpers for colors, typography, radius, and transitions. Avoid hardcoded design values.
+- Use `@use 'variables' as *;` and `@use 'mixins' as *;` in component SCSS.
 
-# Run all tests
-pnpm run test
-```
+Do not introduce `as any`, TypeScript ignore directives, empty catch blocks, placeholder implementations, or unrelated refactors.
 
-### GitHub Actions Workflows
-
-Push triggers automatic CI. All three jobs must pass to merge:
-
-**`.github/workflows/core.yml` (on changes to `core/`)**
-1. **build** — `pnpm run build:tokens && pnpm run build:core`
-2. **lint** — prettier, ESLint, stylelint
-3. **test** — spec, screenshot, e2e tests
-
-Similar workflows exist for `angular.yml`, `react.yml`, `tokens.yml`.
-
-**`.github/workflows/release.yml` (merge to `main` or `beta`)**
-- Triggered by release-please PR merge
-- Updates CHANGELOG, creates git tag, publishes to npm
-
-### Release Process
-
-Load the `catalyst-release` skill. It covers stable and beta release workflows, version bump rules, pre-merge checks, and troubleshooting.
-
-## Common Tasks
-
-### Add a new component to core
-
-1. **Create directory:**
-   ```bash
-   mkdir core/src/components/cat-mycomponent
-   ```
-
-2. **Create files:**
-   ```
-   cat-mycomponent.tsx         # Component
-   cat-mycomponent.spec.tsx    # Unit tests
-   cat-mycomponent.e2e.tsx     # E2E tests
-   cat-mycomponent.screenshot.tsx  # Visual tests
-   cat-mycomponent.scss        # Styles
-   ```
-
-3. **Implement component:**
-   - Follow component API design (props, events, methods, parts)
-   - Use Shadow DOM utilities (`findClosest`, `delegatesFocus`)
-   - Use token-based styling (no hardcoded colors)
-   - Include JSDoc for all public props/events/methods
-
-4. **Write tests:**
-   - spec: HTML structure for key prop combinations
-   - e2e: user interactions
-   - screenshot: all visual variants
-
-5. **Build and test:**
-   ```bash
-   pnpm run build
-   pnpm run test
-   ```
-
-6. **Commit:**
-   ```bash
-   git add .
-   git commit -m "feat(core): add cat-mycomponent"
-   ```
-
-### Add a new design token
-
-1. **Edit `tokens/src/tokens.json`**
-2. **Build:**
-   ```bash
-   pnpm run build:tokens
-   pnpm run build:core
-   ```
-3. **Commit:**
-   ```bash
-   git commit -m "chore(tokens): add new color token"
-   ```
-
-### Update a component
-
-1. **Make changes** in the component, styles, and tests
-2. **Update tests** if behavior changed
-3. **Update screenshots** if appearance changed:
-   ```bash
-   pnpm run test:screenshot:update  # Local (macOS)
-   ```
-   Or trigger "Update Screenshots" workflow for CI reference
-4. **Build and test:**
-   ```bash
-   pnpm run build
-   pnpm run test
-   ```
-5. **Commit:**
-   ```bash
-   git commit -m "fix(core): correct focus behavior in cat-input"
-   ```
-
-### Review a PR
-
-Load the `catalyst-pr-review` skill. It walks through CI verification and the full manual checklist step by step.
+### Tokens and bindings
 
-## Troubleshooting
+- Add or update source tokens, then run `pnpm run build:tokens`.
+- Rebuild core after token changes: `pnpm run build:tokens && pnpm run build:core`.
+- Build Angular and Formly after core changes before testing consumers.
+- Build React after core changes; React depends on the workspace core package.
+- Do not hand-edit generated bindings or package `dist` output.
 
-### Build fails with "not found" error
-**Cause:** Dependency order wrong. Always build in order: tokens → core → angular/react
+## Git and pull requests
 
-**Fix:**
-```bash
-pnpm run build:tokens
-pnpm run build:core
-pnpm run build:angular
-```
+- Work on a feature branch; do not commit directly to `main` or `beta`.
+- Never force-push shared branches or rewrite shared history.
+- Never commit secrets, `.env` files, generated credentials, or agent-tooling configuration directories.
+- Keep unrelated working-tree changes untouched.
+- Commit messages must use Conventional Commits with one of these scopes:
+  `angular`, `angular-formly`, `core`, `react`, `tokens`, or `release`.
 
-### Screenshot test fails locally but passes in CI
-**Cause:** macOS screenshots (`-darwin`) differ from Linux (`-linux`). Both are committed; CI uses Linux.
+Examples:
 
-**Fix:** Run the test again locally, or manually verify it's an OS-specific rendering difference (not a bug).
+```text
+feat(core): add segmented control
+fix(angular): correct value accessor
+chore(tokens): update color token
+```
 
-### Commit hook rejects message
-**Cause:** Message doesn't follow conventional commits or uses invalid scope.
+Before opening a PR, run relevant build, tests, formatter, and linters.
 
-**Fix:**
-```bash
-git commit --amend -m "feat(core): description"
-```
+Address critical and major findings before requesting review. PR descriptions should explain why change is needed and mention visual, API, or generated-output.
 
-### release-please doesn't trigger a release
-**Cause:** No commits with valid conventional commit messages since last release.
+## CI and releases
 
-**Fix:** Ensure PR has commits like `feat(core): ...` or `fix(angular): ...`
+Workflows are path-sensitive. Core CI runs build, lint, unit, screenshot, and e2e checks. Angular CI builds tokens/core/bindings and runs Angular tests. React CI builds tokens/core/React. Tokens CI builds tokens and commits generated token output. Main-branch deployment publishes core documentation to GitHub Pages.
 
-## Resources
+Releases are managed by release-please on `main` (stable) and `beta`
+(prerelease), followed by automated npm publishing. Do not publish packages or modify release configuration unless explicitly requested.
 
-- **[Conventional Commits](https://www.conventionalcommits.org/)** — commit message format
-- **[release-please](https://github.com/googleapis/release-please)** — automated versioning
-- **[Stencil docs](https://stenciljs.com/)** — web component framework
-- **[Style Dictionary](https://amzn.github.io/style-dictionary/)** — design token system
-- **[Vitest](https://vitest.dev/)** — test runner
-- **[Playwright](https://playwright.dev/)** — E2E testing
+## Troubleshooting
 
-## Questions or Issues?
+- **Workspace package not found:** run `pnpm install`, then rebuild in order:
+  `pnpm run build:tokens && pnpm run build:core`.
+- **Browser test cannot launch:** run the Playwright install command above.
+- **Screenshot mismatch:** inspect actual/diff artifacts before updating references; macOS and Linux references are intentionally separate.
+- **Angular consumer testing:** run the full build, then use packages from
+  `angular/dist/catalyst` or `angular/dist/catalyst-formly` as documented in the root README.
+- **Commit rejected:** check Conventional Commit type and allowed lowercase scope in `.commitlintrc.json`.
 
-For questions about this guide, ask the tech lead or open an issue on GitHub.
+## Documentation
 
+Read root/package `README.md` files for consumer setup and release details. Design documentation: https://design.haiilo.com

From bbf8a892bac5737eb2f95c6a64893fb120131a6d Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Mon, 10 Aug 2026 08:42:31 +0200
Subject: [PATCH 08/42] feat(core): add segmented control component

---
 core/src/components.d.ts                      |  231 ++
 core/src/components/cat-icon/readme.md        |    2 +
 .../cat-segment/cat-segment.e2e.tsx           |   53 +
 .../components/cat-segment/cat-segment.scss   |   95 +
 .../cat-segment/cat-segment.spec.tsx          |  161 +
 .../components/cat-segment/cat-segment.tsx    |  101 +
 core/src/components/cat-segment/readme.md     |   69 +
 .../cat-segmented-control.e2e.tsx             |    9 +
 .../cat-segmented-control.scss                |   19 +
 .../cat-segmented-control.spec.tsx            |   13 +
 .../cat-segmented-control.tsx                 |  125 +
 .../cat-segmented-control/readme.md           |   40 +
 core/src/index.html                           | 3483 +++++++++--------
 .../src/components/stencil-generated/index.ts |    2 +
 14 files changed, 2732 insertions(+), 1671 deletions(-)
 create mode 100644 core/src/components/cat-segment/cat-segment.e2e.tsx
 create mode 100644 core/src/components/cat-segment/cat-segment.scss
 create mode 100644 core/src/components/cat-segment/cat-segment.spec.tsx
 create mode 100644 core/src/components/cat-segment/cat-segment.tsx
 create mode 100644 core/src/components/cat-segment/readme.md
 create mode 100644 core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx
 create mode 100644 core/src/components/cat-segmented-control/cat-segmented-control.scss
 create mode 100644 core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
 create mode 100644 core/src/components/cat-segmented-control/cat-segmented-control.tsx
 create mode 100644 core/src/components/cat-segmented-control/readme.md

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index c7c49227..94a8def1 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1435,6 +1435,84 @@ export namespace Components {
          */
         "scrolledBuffer": number;
     }
+    /**
+     * A single segment within a cat-segmented-control.
+     */
+    interface CatSegment {
+        /**
+          * @default false
+         */
+        "active": boolean;
+        /**
+          * Whether this segment is disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Removes focus from the segment button.
+         */
+        "doBlur": () => Promise<void>;
+        /**
+          * Sets focus on the segment button.
+         */
+        "doFocus": () => Promise<void>;
+        /**
+          * Icon name to display (same registry as cat-button).
+         */
+        "icon"?: string;
+        /**
+          * When true, hides the label and shows the icon only. Requires icon.
+          * @default false
+         */
+        "iconOnly": boolean;
+        /**
+          * Spread onto the native button element.
+         */
+        "nativeAttributes"?: { [key: string]: string };
+        /**
+          * @default 'm'
+         */
+        "size": Size;
+        /**
+          * Renders as data-test on the button element.
+         */
+        "testId"?: string;
+        /**
+          * The unique value of this segment within the group.
+         */
+        "value": string;
+    }
+    /**
+     * A segmented control for selecting one option from a mutually-exclusive set.
+     */
+    interface CatSegmentedControl {
+        /**
+          * Accessible label for the group (screen readers only).
+         */
+        "a11yLabel"?: string;
+        /**
+          * Whether the entire control is disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Spread onto the root element.
+         */
+        "nativeAttributes"?: { [key: string]: string };
+        /**
+          * The size of the control, propagated to all child segments.
+          * @default 'm'
+         */
+        "size": 'xs' | 's' | 'm' | 'l' | 'xl';
+        /**
+          * Renders as data-test on the root element.
+         */
+        "testId"?: string;
+        /**
+          * The value of the currently selected segment.
+         */
+        "value"?: string;
+    }
     /**
      * Select lets user choose one option from an options' menu.
      * Consider using select when you have 6 or more options. Select component supports any content type.
@@ -2246,6 +2324,14 @@ export interface CatScrollableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatScrollableElement;
 }
+export interface CatSegmentCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCatSegmentElement;
+}
+export interface CatSegmentedControlCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCatSegmentedControlElement;
+}
 export interface CatSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatSelectElement;
@@ -2662,6 +2748,46 @@ declare global {
         prototype: HTMLCatScrollableElement;
         new (): HTMLCatScrollableElement;
     };
+    interface HTMLCatSegmentElementEventMap {
+        "catSegmentClick": string;
+    }
+    /**
+     * A single segment within a cat-segmented-control.
+     */
+    interface HTMLCatSegmentElement extends Components.CatSegment, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCatSegmentElementEventMap>(type: K, listener: (this: HTMLCatSegmentElement, ev: CatSegmentCustomEvent<HTMLCatSegmentElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCatSegmentElementEventMap>(type: K, listener: (this: HTMLCatSegmentElement, ev: CatSegmentCustomEvent<HTMLCatSegmentElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCatSegmentElement: {
+        prototype: HTMLCatSegmentElement;
+        new (): HTMLCatSegmentElement;
+    };
+    interface HTMLCatSegmentedControlElementEventMap {
+        "catChange": string;
+    }
+    /**
+     * A segmented control for selecting one option from a mutually-exclusive set.
+     */
+    interface HTMLCatSegmentedControlElement extends Components.CatSegmentedControl, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCatSegmentedControlElementEventMap>(type: K, listener: (this: HTMLCatSegmentedControlElement, ev: CatSegmentedControlCustomEvent<HTMLCatSegmentedControlElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCatSegmentedControlElementEventMap>(type: K, listener: (this: HTMLCatSegmentedControlElement, ev: CatSegmentedControlCustomEvent<HTMLCatSegmentedControlElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCatSegmentedControlElement: {
+        prototype: HTMLCatSegmentedControlElement;
+        new (): HTMLCatSegmentedControlElement;
+    };
     interface HTMLCatSelectElementEventMap {
         "catOpen": FocusEvent;
         "catClose": FocusEvent;
@@ -2875,6 +3001,8 @@ declare global {
         "cat-radio": HTMLCatRadioElement;
         "cat-radio-group": HTMLCatRadioGroupElement;
         "cat-scrollable": HTMLCatScrollableElement;
+        "cat-segment": HTMLCatSegmentElement;
+        "cat-segmented-control": HTMLCatSegmentedControlElement;
         "cat-select": HTMLCatSelectElement;
         "cat-select-demo": HTMLCatSelectDemoElement;
         "cat-skeleton": HTMLCatSkeletonElement;
@@ -2889,6 +3017,8 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };
+
     /**
      * Informs user about important changes or conditions in the interface. Use this
      * component if you need to capture user’s attention in a prominent way.
@@ -4333,6 +4463,81 @@ declare namespace LocalJSX {
          */
         "scrolledBuffer"?: number;
     }
+    /**
+     * A single segment within a cat-segmented-control.
+     */
+    interface CatSegment {
+        /**
+          * @default false
+         */
+        "active"?: boolean;
+        /**
+          * Whether this segment is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Icon name to display (same registry as cat-button).
+         */
+        "icon"?: string;
+        /**
+          * When true, hides the label and shows the icon only. Requires icon.
+          * @default false
+         */
+        "iconOnly"?: boolean;
+        /**
+          * Spread onto the native button element.
+         */
+        "nativeAttributes"?: { [key: string]: string };
+        "onCatSegmentClick"?: (event: CatSegmentCustomEvent<string>) => void;
+        /**
+          * @default 'm'
+         */
+        "size"?: Size;
+        /**
+          * Renders as data-test on the button element.
+         */
+        "testId"?: string;
+        /**
+          * The unique value of this segment within the group.
+         */
+        "value": string;
+    }
+    /**
+     * A segmented control for selecting one option from a mutually-exclusive set.
+     */
+    interface CatSegmentedControl {
+        /**
+          * Accessible label for the group (screen readers only).
+         */
+        "a11yLabel"?: string;
+        /**
+          * Whether the entire control is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Spread onto the root element.
+         */
+        "nativeAttributes"?: { [key: string]: string };
+        /**
+          * Emitted when the selected segment changes. Payload is the new segment value.
+         */
+        "onCatChange"?: (event: CatSegmentedControlCustomEvent<string>) => void;
+        /**
+          * The size of the control, propagated to all child segments.
+          * @default 'm'
+         */
+        "size"?: 'xs' | 's' | 'm' | 'l' | 'xl';
+        /**
+          * Renders as data-test on the root element.
+         */
+        "testId"?: string;
+        /**
+          * The value of the currently selected segment.
+         */
+        "value"?: string;
+    }
     /**
      * Select lets user choose one option from an options' menu.
      * Consider using select when you have 6 or more options. Select component supports any content type.
@@ -5377,6 +5582,22 @@ declare namespace LocalJSX {
         "noScrolledInit": boolean;
         "scrolledBuffer": number;
     }
+    interface CatSegmentAttributes {
+        "active": boolean;
+        "disabled": boolean;
+        "icon": string;
+        "iconOnly": boolean;
+        "size": Size;
+        "testId": string;
+        "value": string;
+    }
+    interface CatSegmentedControlAttributes {
+        "value": string;
+        "size": 'xs' | 's' | 'm' | 'l' | 'xl';
+        "disabled": boolean;
+        "a11yLabel": string;
+        "testId": string;
+    }
     interface CatSelectAttributes {
         "requiredMarker": 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
         "horizontal": boolean;
@@ -5548,6 +5769,8 @@ declare namespace LocalJSX {
         "cat-radio": Omit<CatRadio, keyof CatRadioAttributes> & { [K in keyof CatRadio & keyof CatRadioAttributes]?: CatRadio[K] } & { [K in keyof CatRadio & keyof CatRadioAttributes as `attr:${K}`]?: CatRadioAttributes[K] } & { [K in keyof CatRadio & keyof CatRadioAttributes as `prop:${K}`]?: CatRadio[K] };
         "cat-radio-group": Omit<CatRadioGroup, keyof CatRadioGroupAttributes> & { [K in keyof CatRadioGroup & keyof CatRadioGroupAttributes]?: CatRadioGroup[K] } & { [K in keyof CatRadioGroup & keyof CatRadioGroupAttributes as `attr:${K}`]?: CatRadioGroupAttributes[K] } & { [K in keyof CatRadioGroup & keyof CatRadioGroupAttributes as `prop:${K}`]?: CatRadioGroup[K] };
         "cat-scrollable": Omit<CatScrollable, keyof CatScrollableAttributes> & { [K in keyof CatScrollable & keyof CatScrollableAttributes]?: CatScrollable[K] } & { [K in keyof CatScrollable & keyof CatScrollableAttributes as `attr:${K}`]?: CatScrollableAttributes[K] } & { [K in keyof CatScrollable & keyof CatScrollableAttributes as `prop:${K}`]?: CatScrollable[K] };
+        "cat-segment": Omit<CatSegment, keyof CatSegmentAttributes> & { [K in keyof CatSegment & keyof CatSegmentAttributes]?: CatSegment[K] } & { [K in keyof CatSegment & keyof CatSegmentAttributes as `attr:${K}`]?: CatSegmentAttributes[K] } & { [K in keyof CatSegment & keyof CatSegmentAttributes as `prop:${K}`]?: CatSegment[K] } & OneOf<"value", CatSegment["value"], CatSegmentAttributes["value"]>;
+        "cat-segmented-control": Omit<CatSegmentedControl, keyof CatSegmentedControlAttributes> & { [K in keyof CatSegmentedControl & keyof CatSegmentedControlAttributes]?: CatSegmentedControl[K] } & { [K in keyof CatSegmentedControl & keyof CatSegmentedControlAttributes as `attr:${K}`]?: CatSegmentedControlAttributes[K] } & { [K in keyof CatSegmentedControl & keyof CatSegmentedControlAttributes as `prop:${K}`]?: CatSegmentedControl[K] };
         "cat-select": Omit<CatSelect, keyof CatSelectAttributes> & { [K in keyof CatSelect & keyof CatSelectAttributes]?: CatSelect[K] } & { [K in keyof CatSelect & keyof CatSelectAttributes as `attr:${K}`]?: CatSelectAttributes[K] } & { [K in keyof CatSelect & keyof CatSelectAttributes as `prop:${K}`]?: CatSelect[K] };
         "cat-select-demo": CatSelectDemo;
         "cat-skeleton": Omit<CatSkeleton, keyof CatSkeletonAttributes> & { [K in keyof CatSkeleton & keyof CatSkeletonAttributes]?: CatSkeleton[K] } & { [K in keyof CatSkeleton & keyof CatSkeletonAttributes as `attr:${K}`]?: CatSkeletonAttributes[K] } & { [K in keyof CatSkeleton & keyof CatSkeletonAttributes as `prop:${K}`]?: CatSkeleton[K] };
@@ -5661,6 +5884,14 @@ declare module "@stencil/core" {
              * An element to display scrollable content.
              */
             "cat-scrollable": LocalJSX.IntrinsicElements["cat-scrollable"] & JSXBase.HTMLAttributes<HTMLCatScrollableElement>;
+            /**
+             * A single segment within a cat-segmented-control.
+             */
+            "cat-segment": LocalJSX.IntrinsicElements["cat-segment"] & JSXBase.HTMLAttributes<HTMLCatSegmentElement>;
+            /**
+             * A segmented control for selecting one option from a mutually-exclusive set.
+             */
+            "cat-segmented-control": LocalJSX.IntrinsicElements["cat-segmented-control"] & JSXBase.HTMLAttributes<HTMLCatSegmentedControlElement>;
             /**
              * Select lets user choose one option from an options' menu.
              * Consider using select when you have 6 or more options. Select component supports any content type.
diff --git a/core/src/components/cat-icon/readme.md b/core/src/components/cat-icon/readme.md
index 27d474e9..ce20c84c 100644
--- a/core/src/components/cat-icon/readme.md
+++ b/core/src/components/cat-icon/readme.md
@@ -41,6 +41,7 @@ doesn't fit.
  - [cat-badge](../cat-badge)
  - [cat-button](../cat-button)
  - [cat-input](../cat-input)
+ - [cat-segment](../cat-segment)
  - [cat-select](../cat-select)
  - [cat-tag](../cat-tag)
  - [cat-textarea](../cat-textarea)
@@ -53,6 +54,7 @@ graph TD;
   cat-badge --> cat-icon
   cat-button --> cat-icon
   cat-input --> cat-icon
+  cat-segment --> cat-icon
   cat-select --> cat-icon
   cat-tag --> cat-icon
   cat-textarea --> cat-icon
diff --git a/core/src/components/cat-segment/cat-segment.e2e.tsx b/core/src/components/cat-segment/cat-segment.e2e.tsx
new file mode 100644
index 00000000..665915e8
--- /dev/null
+++ b/core/src/components/cat-segment/cat-segment.e2e.tsx
@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest';
+import { render, h } from '@stencil/vitest';
+
+describe('cat-segment', () => {
+  it('renders hydrated', async () => {
+    const { root } = await render(<cat-segment value="a">Day</cat-segment>);
+    await expect.element(root).toHaveClass('hydrated');
+  });
+
+  it('delegates focus to its native button', async () => {
+    const { root } = await render(<cat-segment value="day">Day</cat-segment>);
+    const button = root.shadowRoot?.querySelector<HTMLButtonElement>('button');
+
+    button?.focus();
+
+    expect(document.activeElement).toBe(root);
+    expect(root.shadowRoot?.activeElement).toBe(button);
+  });
+
+  it('focuses and blurs through public methods', async () => {
+    const { root } = await render<HTMLCatSegmentElement>(<cat-segment value="day">Day</cat-segment>);
+    const button = root.shadowRoot?.querySelector<HTMLButtonElement>('button');
+
+    await root.doFocus();
+    expect(root.shadowRoot?.activeElement).toBe(button);
+
+    await root.doBlur();
+    expect(root.shadowRoot?.activeElement).toBeNull();
+  });
+
+  it('emits catSegmentClick on click', async () => {
+    const { root } = await render(<cat-segment value="day">Day</cat-segment>);
+    const events: CustomEvent[] = [];
+    root.addEventListener('catSegmentClick', (e: Event) => events.push(e as CustomEvent));
+    root.shadowRoot?.querySelector<HTMLButtonElement>('button')?.click();
+    expect(events).toHaveLength(1);
+    expect(events[0].detail).toBe('day');
+    expect(events[0].bubbles).toBe(true);
+    expect(events[0].composed).toBe(true);
+  });
+
+  it('does not emit catSegmentClick when disabled', async () => {
+    const { root } = await render(
+      <cat-segment value="day" disabled>
+        Day
+      </cat-segment>
+    );
+    const events: Event[] = [];
+    root.addEventListener('catSegmentClick', e => events.push(e));
+    root.shadowRoot?.querySelector<HTMLButtonElement>('button')?.click();
+    expect(events).toHaveLength(0);
+  });
+});
diff --git a/core/src/components/cat-segment/cat-segment.scss b/core/src/components/cat-segment/cat-segment.scss
new file mode 100644
index 00000000..63fc77d3
--- /dev/null
+++ b/core/src/components/cat-segment/cat-segment.scss
@@ -0,0 +1,95 @@
+@use 'variables' as *;
+@use 'mixins' as *;
+@use 'sass:map';
+
+$segment-heights: (
+  'xl': 3.25rem,
+  'l': 2.75rem,
+  'm': 2rem,
+  's': 1.75rem,
+  'xs': 1.5rem
+);
+
+// TODO: a11y (create skill/add to review skill?)
+// -> add a11y label (e.g. for icon only)
+
+:host {
+  display: contents;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.cat-segment {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  white-space: nowrap;
+  color: cat-token('color.theme.secondary.text');
+  border-radius: cat-border-radius('l');
+  transition: background cat-token('time.transition.s') linear,
+  box-shadow cat-token('time.transition.s') linear,
+  color cat-token('time.transition.s') linear;
+
+  &.cat-segment-active {
+    background: cat-token('color.ui.background.surface');
+    color: cat-token('color.theme.primary.text');
+    font-weight: 700;
+    @include cat-elevation(3);
+  }
+
+  &:focus-visible {
+    outline: 2px solid cat-token('color.ui.border.focus');
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    color: cat-token('color.ui.font.muted', 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &:not(:disabled) {
+    &:hover {
+      background: cat-token('color.ui.background.surface', 0.5);
+    }
+  }
+}
+
+.cat-segment-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin size($size, $fontSize, $padding, $gap: 0.25rem) {
+  $-line-height: cat-token('size.line.body.#{$fontSize}');
+
+  $-total-height: map.get($segment-heights, $size);
+  $-padding-v: ($-total-height - $-line-height) * 0.5;
+  $-padding-h: $padding;
+
+  .cat-segment-#{$size} {
+    width: 12.5em; // TODO wait for final size from UX
+    padding: $-padding-v $-padding-h;
+    @include cat-body($fontSize, null);
+    gap: $gap;
+
+    &.cat-segment-icon-only {
+      height: $-total-height;
+    }
+  }
+}
+
+@include size('xs', 's', 0.25rem);
+@include size('s', 'm', 0.5rem);
+@include size('m', 'm', 0.75rem);
+@include size('l', 'm', 1rem, 0.5rem);
+@include size('xl', 'l', 1.25rem, 0.75rem);
diff --git a/core/src/components/cat-segment/cat-segment.spec.tsx b/core/src/components/cat-segment/cat-segment.spec.tsx
new file mode 100644
index 00000000..fa760911
--- /dev/null
+++ b/core/src/components/cat-segment/cat-segment.spec.tsx
@@ -0,0 +1,161 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from '@stencil/vitest';
+import { h } from '@stencil/core';
+import './cat-segment';
+
+describe('cat-segment', () => {
+  it('renders', async () => {
+    const { root } = await render<HTMLCatSegmentElement>(<cat-segment value="testValue">Label</cat-segment>);
+
+    expect(root.innerHTML).toBe('Label');
+    expect(root.value).toBe('testValue');
+  });
+
+  it('renders button in shadow root', async () => {
+    const { root } = await render(<cat-segment value="testValue">Day</cat-segment>);
+    const btn = root.shadowRoot?.querySelector('button');
+
+    expect(btn).toHaveClass('cat-segment-m');
+    expect(btn).not.toHaveClass('cat-segment-active');
+    expect(btn?.getAttribute('aria-pressed')).toBe('false');
+  });
+
+  it('applies size class', async () => {
+    const { root } = await render(
+      <cat-segment value="testValue" size="xl">
+        Day
+      </cat-segment>
+    );
+    const btn = root.shadowRoot?.querySelector('button');
+    expect(btn).toHaveClass('cat-segment-xl');
+  });
+
+  it('applies active class when active', async () => {
+    const { root } = await render(
+      <cat-segment value="a" active>
+        Day
+      </cat-segment>
+    );
+    const btn = root.shadowRoot?.querySelector('button');
+    expect(btn).toHaveClass('cat-segment-active');
+    expect(btn?.getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('renders disabled attribute when disabled', async () => {
+    const { root } = await render(
+      <cat-segment value="testValue" disabled>
+        Day
+      </cat-segment>
+    );
+    const btn = root.shadowRoot?.querySelector('button');
+    expect(btn).toHaveAttribute('disabled');
+  });
+
+  it('renders an icon and hides its label in icon-only mode', async () => {
+    const { root } = await render(
+      <cat-segment value="testValue" icon="check" iconOnly>
+        Day
+      </cat-segment>
+    );
+    const btn = root.shadowRoot?.querySelector('button');
+
+    expect(root.shadowRoot?.querySelector('cat-icon')).toBeTruthy();
+    expect(root.shadowRoot?.querySelector('.cat-segment-label')).toBeNull();
+    expect(btn).toHaveClass('cat-segment-icon-only');
+  });
+
+  it('keeps the label when icon-only is set without an icon', async () => {
+    const { root } = await render(
+      <cat-segment value="testValue" iconOnly>
+        Day
+      </cat-segment>
+    );
+
+    expect(root.shadowRoot?.querySelector('.cat-segment-label')).toBeTruthy();
+    expect(root.shadowRoot?.querySelector('button')).not.toHaveClass('cat-segment-icon-only');
+  });
+
+  it.each([
+    ['xs', 's'],
+    ['s', 's'],
+    ['m', 's'],
+    ['l', 'm'],
+    ['xl', 'l']
+  ] as const)('maps %s segment size to %s icon size', async (size, iconSize) => {
+    const { root } = await render(
+      <cat-segment value="testValue" icon="check" size={size}>
+        Day
+      </cat-segment>
+    );
+
+    expect(root.shadowRoot?.querySelector('cat-icon')?.getAttribute('size')).toBe(iconSize);
+  });
+
+  it('applies test id and native attributes to the button', async () => {
+    const { root } = await render(
+      <cat-segment value="testValue" testId="segment" nativeAttributes={{ 'aria-label': 'Day segment', name: 'day' }}>
+        Day
+      </cat-segment>
+    );
+    const btn = root.shadowRoot?.querySelector('button');
+
+    expect(btn?.getAttribute('data-test')).toBe('segment');
+    expect(btn?.getAttribute('aria-label')).toBe('Day segment');
+    expect(btn?.getAttribute('name')).toBe('day');
+  });
+
+  it('emits its value when an inactive segment is clicked', async () => {
+    const { root } = await render(<cat-segment value="day">Day</cat-segment>);
+    const listener = vi.fn();
+    root.addEventListener('catSegmentClick', listener);
+
+    root.shadowRoot?.querySelector<HTMLButtonElement>('button')?.click();
+
+    expect(listener).toHaveBeenCalledOnce();
+    expect(listener.mock.calls[0][0]).toMatchObject({ detail: 'day' });
+  });
+
+  it.each([
+    ['active', { active: true }],
+    ['disabled', { disabled: true }]
+  ] as const)('does not emit when clicked while %s', async (_state, props) => {
+    const { root } = await render(
+      <cat-segment value="day" {...props}>
+        Day
+      </cat-segment>
+    );
+    const listener = vi.fn();
+    root.addEventListener('catSegmentClick', listener);
+
+    root.shadowRoot?.querySelector<HTMLButtonElement>('button')?.click();
+
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it('updates button state when mutable props change', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentElement>(<cat-segment value="day">Day</cat-segment>);
+
+    root.active = true;
+    root.size = 'xl';
+    root.disabled = true;
+    await waitForChanges();
+
+    const btn = root.shadowRoot?.querySelector('button');
+    expect(btn).toHaveClasses(['cat-segment-active', 'cat-segment-xl']);
+    expect(btn?.getAttribute('aria-pressed')).toBe('true');
+    expect(btn).toHaveAttribute('disabled');
+  });
+
+  it('focuses and blurs its native button through public methods', async () => {
+    const { root } = await render<HTMLCatSegmentElement>(<cat-segment value="day">Day</cat-segment>);
+    const btn = root.shadowRoot?.querySelector<HTMLButtonElement>('button');
+    const focus = vi.spyOn(btn!, 'focus');
+    const blur = vi.spyOn(btn!, 'blur');
+
+    await root.doFocus();
+    expect(focus).toHaveBeenCalledOnce();
+
+    await root.doBlur();
+    expect(blur).toHaveBeenCalledOnce();
+  });
+});
diff --git a/core/src/components/cat-segment/cat-segment.tsx b/core/src/components/cat-segment/cat-segment.tsx
new file mode 100644
index 00000000..cc8eabb4
--- /dev/null
+++ b/core/src/components/cat-segment/cat-segment.tsx
@@ -0,0 +1,101 @@
+import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
+
+type Size = 'xs' | 's' | 'm' | 'l' | 'xl';
+
+/**
+ * A single segment within a cat-segmented-control.
+ *
+ * @part button - The native button element.
+ */
+@Component({
+  tag: 'cat-segment',
+  styleUrl: 'cat-segment.scss',
+  shadow: { delegatesFocus: true }
+})
+export class CatSegment {
+  private button?: HTMLButtonElement;
+
+  @Element() el!: HTMLElement;
+
+  /** @internal Set by cat-segmented-control. Whether this segment is the active selection. */
+  @Prop({ mutable: true }) active = false;
+
+  /** Whether this segment is disabled. */
+  @Prop({ mutable: true }) disabled = false;
+
+  /** Icon name to display (same registry as cat-button). */
+  @Prop() icon?: string;
+
+  /** When true, hides the label and shows the icon only. Requires icon. */
+  @Prop() iconOnly = false;
+
+  /** @internal Set by cat-segmented-control. Size of the segment. */
+  @Prop({ mutable: true }) size: Size = 'm';
+
+  /** Renders as data-test on the button element. */
+  @Prop() testId?: string;
+
+  /** The unique value of this segment within the group. */
+  @Prop() value!: string;
+
+  /** Spread onto the native button element. */
+  @Prop() nativeAttributes?: { [key: string]: string };
+
+  /** @internal Emitted when clicked. Consumed by cat-segmented-control. */
+  @Event() catSegmentClick!: EventEmitter<string>;
+
+  /** Sets focus on the segment button. */
+  @Method()
+  async doFocus(): Promise<void> {
+    this.button?.focus();
+  }
+
+  /** Removes focus from the segment button. */
+  @Method()
+  async doBlur(): Promise<void> {
+    this.button?.blur();
+  }
+
+  render() {
+    const showIcon = !!this.icon;
+    const showLabel = !this.iconOnly || !this.icon;
+
+    return (
+      <Host>
+        <button
+          part="button"
+          ref={el => (this.button = el)}
+          class={{
+            'cat-segment': true,
+            [`cat-segment-${this.size}`]: true,
+            'cat-segment-active': this.active,
+            'cat-segment-icon-only': this.iconOnly && showIcon
+          }}
+          disabled={this.disabled}
+          aria-pressed={String(this.active)}
+          data-test={this.testId}
+          onClick={this.handleClick.bind(this)}
+          {...this.nativeAttributes}
+        >
+          {showIcon && <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>}
+          {showLabel && (
+            <span class="cat-segment-label">
+              <slot></slot>
+            </span>
+          )}
+        </button>
+      </Host>
+    );
+  }
+
+  private get iconSize(): Size {
+    const sizes: Record<Size, Size> = { xs: 's', s: 's', m: 's', l: 'm', xl: 'l' };
+    return sizes[this.size] ?? 's';
+  }
+
+  private handleClick() {
+    if (!this.disabled && !this.active) {
+      this.catSegmentClick.emit(this.value);
+    }
+  }
+}
diff --git a/core/src/components/cat-segment/readme.md b/core/src/components/cat-segment/readme.md
new file mode 100644
index 00000000..b0a7cc9d
--- /dev/null
+++ b/core/src/components/cat-segment/readme.md
@@ -0,0 +1,69 @@
+# cat-segment
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+A single segment within a cat-segmented-control.
+
+## Properties
+
+| Property             | Attribute   | Description                                                        | Type                                      | Default     |
+| -------------------- | ----------- | ------------------------------------------------------------------ | ----------------------------------------- | ----------- |
+| `disabled`           | `disabled`  | Whether this segment is disabled.                                  | `boolean`                                 | `false`     |
+| `icon`               | `icon`      | Icon name to display (same registry as cat-button).                | `string \| undefined`                     | `undefined` |
+| `iconOnly`           | `icon-only` | When true, hides the label and shows the icon only. Requires icon. | `boolean`                                 | `false`     |
+| `nativeAttributes`   | --          | Spread onto the native button element.                             | `undefined \| { [key: string]: string; }` | `undefined` |
+| `testId`             | `test-id`   | Renders as data-test on the button element.                        | `string \| undefined`                     | `undefined` |
+| `value` _(required)_ | `value`     | The unique value of this segment within the group.                 | `string`                                  | `undefined` |
+
+
+## Methods
+
+### `doBlur() => Promise<void>`
+
+Removes focus from the segment button.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `doFocus() => Promise<void>`
+
+Sets focus on the segment button.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
+## Shadow Parts
+
+| Part       | Description                |
+| ---------- | -------------------------- |
+| `"button"` | The native button element. |
+
+
+## Dependencies
+
+### Depends on
+
+- [cat-icon](../cat-icon)
+
+### Graph
+```mermaid
+graph TD;
+  cat-segment --> cat-icon
+  style cat-segment fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+Made with love in Hamburg, Germany
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx
new file mode 100644
index 00000000..db8d44d5
--- /dev/null
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx
@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import { render, h } from '@stencil/vitest';
+
+describe('cat-segmented-control', () => {
+  it('renders hydrated', async () => {
+    const { root } = await render(<cat-segmented-control />);
+    await expect.element(root).toHaveClass('hydrated');
+  });
+});
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.scss b/core/src/components/cat-segmented-control/cat-segmented-control.scss
new file mode 100644
index 00000000..77d9c575
--- /dev/null
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.scss
@@ -0,0 +1,19 @@
+@use 'variables' as *;
+@use 'mixins' as *;
+
+:host {
+  display: inline-flex;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.cat-segmented-control {
+  display: inline-flex;
+  align-items: center;
+  background: cat-token('color.ui.background.muted');
+  border-radius: cat-border-radius('l');
+  padding: 0.25rem;
+  gap: 0.25rem;
+}
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
new file mode 100644
index 00000000..8737913a
--- /dev/null
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
@@ -0,0 +1,13 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@stencil/vitest';
+import { h } from '@stencil/core';
+import './cat-segmented-control';
+
+describe('cat-segmented-control', () => {
+  it('renders', async () => {
+    const { root } = await render(<cat-segmented-control />);
+    await expect(root).toEqualLightHtml(`
+      <cat-segmented-control class="hydrated"></cat-segmented-control>
+    `);
+  });
+});
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
new file mode 100644
index 00000000..bc2c4e6d
--- /dev/null
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
@@ -0,0 +1,125 @@
+import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, Watch } from '@stencil/core';
+
+/**
+ * A segmented control for selecting one option from a mutually-exclusive set.
+ *
+ * @part control - The tray wrapper element.
+ */
+@Component({
+  tag: 'cat-segmented-control',
+  styleUrl: 'cat-segmented-control.scss',
+  shadow: true
+})
+export class CatSegmentedControl {
+  private segments: HTMLCatSegmentElement[] = [];
+  private mutationObserver?: MutationObserver;
+
+  @Element() el!: HTMLElement;
+
+  /**
+   * The value of the currently selected segment.
+   */
+  @Prop({ mutable: true }) value?: string;
+
+  /**
+   * The size of the control, propagated to all child segments.
+   */
+  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';
+
+  /**
+   * Whether the entire control is disabled.
+   */
+  @Prop() disabled = false;
+
+  /**
+   * Accessible label for the group (screen readers only).
+   */
+  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;
+
+  /**
+   * Renders as data-test on the root element.
+   */
+  @Prop() testId?: string;
+
+  /**
+   * Spread onto the root element.
+   */
+  @Prop() nativeAttributes?: { [key: string]: string };
+
+  /**
+   * Emitted when the selected segment changes. Payload is the new segment value.
+   */
+  @Event() catChange!: EventEmitter<string>;
+
+  @Watch('value')
+  onValueChange(newValue?: string) {
+    this.segments.forEach(s => (s.active = s.value === newValue));
+  }
+
+  @Watch('size')
+  onSizeChange(newSize: CatSegmentedControl['size']) {
+    this.segments.forEach(s => (s.size = newSize));
+  }
+
+  @Watch('disabled')
+  onDisabledChange(disabled: boolean) {
+    this.segments.forEach(s => (s.disabled = s.disabled || disabled));
+  }
+
+  componentDidLoad() {
+    this.sync();
+    this.mutationObserver = new MutationObserver(mutations => {
+      if (mutations.some(m => m.target.nodeName === 'CAT-SEGMENT')) {
+        this.sync();
+      }
+    });
+    this.mutationObserver.observe(this.el, { childList: true, attributes: true, subtree: true });
+  }
+
+  disconnectedCallback() {
+    this.mutationObserver?.disconnect();
+  }
+
+  @Listen('catSegmentClick')
+  onSegmentClick(event: CustomEvent<string>) {
+    this.value = event.detail;
+    this.catChange.emit(this.value);
+  }
+
+  @Listen('keydown')
+  onKeydown(event: KeyboardEvent) {
+    const keys = ['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'];
+    if (!keys.includes(event.key)) return;
+
+    const enabled = this.segments.filter(s => !s.disabled);
+    const idx = enabled.indexOf(document.activeElement as HTMLCatSegmentElement);
+    const offset = ['ArrowRight', 'ArrowDown'].includes(event.key) ? 1 : -1;
+    const target = enabled[(idx + offset + enabled.length) % enabled.length];
+    target?.doFocus();
+    event.preventDefault();
+  }
+
+  render() {
+    return (
+      <Host>
+        <div
+          part="control"
+          role="group"
+          aria-label={this.a11yLabel}
+          class={{ 'cat-segmented-control': true }}
+          data-test={this.testId}
+          {...this.nativeAttributes}
+        >
+          <slot></slot>
+        </div>
+      </Host>
+    );
+  }
+
+  private sync() {
+    this.segments = Array.from(this.el.querySelectorAll('cat-segment'));
+    this.onValueChange(this.value);
+    this.onSizeChange(this.size);
+    this.onDisabledChange(this.disabled);
+  }
+}
diff --git a/core/src/components/cat-segmented-control/readme.md b/core/src/components/cat-segmented-control/readme.md
new file mode 100644
index 00000000..a5e2d444
--- /dev/null
+++ b/core/src/components/cat-segmented-control/readme.md
@@ -0,0 +1,40 @@
+# cat-segmented-control
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+A segmented control for selecting one option from a mutually-exclusive set.
+
+## Properties
+
+| Property           | Attribute    | Description                                                | Type                                      | Default     |
+| ------------------ | ------------ | ---------------------------------------------------------- | ----------------------------------------- | ----------- |
+| `a11yLabel`        | `a11y-label` | Accessible label for the group (screen readers only).      | `string \| undefined`                     | `undefined` |
+| `disabled`         | `disabled`   | Whether the entire control is disabled.                    | `boolean`                                 | `false`     |
+| `nativeAttributes` | --           | Spread onto the root element.                              | `undefined \| { [key: string]: string; }` | `undefined` |
+| `size`             | `size`       | The size of the control, propagated to all child segments. | `"l" \| "m" \| "s" \| "xl" \| "xs"`       | `'m'`       |
+| `testId`           | `test-id`    | Renders as data-test on the root element.                  | `string \| undefined`                     | `undefined` |
+| `value`            | `value`      | The value of the currently selected segment.               | `string \| undefined`                     | `undefined` |
+
+
+## Events
+
+| Event       | Description                                                                  | Type                  |
+| ----------- | ---------------------------------------------------------------------------- | --------------------- |
+| `catChange` | Emitted when the selected segment changes. Payload is the new segment value. | `CustomEvent<string>` |
+
+
+## Shadow Parts
+
+| Part        | Description               |
+| ----------- | ------------------------- |
+| `"control"` | The tray wrapper element. |
+
+
+----------------------------------------------
+
+Made with love in Hamburg, Germany
diff --git a/core/src/index.html b/core/src/index.html
index 3fbb5657..d988e2d3 100644
--- a/core/src/index.html
+++ b/core/src/index.html
@@ -1,859 +1,725 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <title>Catalyst | StencilJS</title>
-    <script type="module" src="/build/catalyst.esm.js"></script>
-    <script type="module">
-      import { ci } from '/build/assets/icons/js/icons.object.js';
-      import { catI18nRegistry, catIconRegistry } from '/build/index.esm.js';
-
-      /**
-       * WARNING: Keep in sync with ./index.cdn.js
-       */
-      catIconRegistry.addIcons(ci);
-      catI18nRegistry.set({
-        'datepicker.prevYear': 'Previous year',
-        'datepicker.nextYear': 'Next year',
-        'datepicker.prevMonth': 'Previous month',
-        'datepicker.nextMonth': 'Next month',
-        'datepicker.arrowKeys': 'Arrow keys can navigate dates.',
-        'datepicker.today': 'Today',
-        'datepicker.change': 'Change date',
-        'datepicker.choose': 'Choose date',
-        'timepicker.change': 'Change time',
-        'timepicker.choose': 'Choose time',
-        // 'datepicker.nextYear': 'Year',
-        'datepicker.year': 'Year',
-        'datepicker.month': 'Month',
-        'datepicker.hour': 'Hour',
-        'datepicker.minute': 'Minute',
-        'datepicker.scroll': 'Scroll to increment',
-        'datepicker.toggle': 'Click to toggle',
-        'datepicker.clear': 'Clear',
-        'dialog.close': 'Close',
-        'input.clear': 'Clear',
-        'input.optional': 'Optional',
-        'input.required': 'Required',
-        'input.showPassword': 'Show password',
-        'input.hidePassword': 'Hide password',
-        'notification.dismiss': 'Dismiss',
-        'pagination.ariaLabel': 'Pagination',
-        'pagination.prev': 'Previous',
-        'pagination.page': 'Go to page {{page}}',
-        'pagination.next': 'Next',
-        'select.close': 'Close',
-        'select.deselect': 'Deselect',
-        'select.empty': 'No items',
-        'select.open': 'Open',
-        'tabs.more': 'More'
-      });
-    </script>
-    <script nomodule src="/build/catalyst.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vanillajs-scrollspy@2.2.0/dist/vanillajs-scrollspy.min.js"></script>
-    <link rel="stylesheet" href="/build/catalyst.css" />
-    <style>
-      html,
-      body {
-        background: #fff;
-      }
-
-      body {
-        padding: 2rem 4rem;
-      }
-
-      body.ss3 {
-        --cat-font-family-base: 'Source Sans 3';
-        --cat-font-family-head: 'Source Sans 3';
-      }
-
-      body.custom-theme {
-        --cat-primary-bg: 91, 94, 219;
-        --cat-primary-bg-hover: 78, 81, 191;
-        --cat-primary-bg-active: 65, 67, 159;
-
-        --cat-primary-bg-outlined: 253, 212, 212;
-
-        --cat-primary-fill: 255, 255, 255;
-        --cat-primary-fill-hover: 255, 255, 255;
-        --cat-primary-fill-active: 255, 255, 255;
-
-        --cat-primary-text: 91, 94, 219;
-        --cat-primary-text-hover: 78, 81, 191;
-        --cat-primary-text-active: 65, 67, 159;
-      }
-
-      .wrapper {
-        display: flex;
-        flex-direction: row;
-        gap: 8rem;
-      }
-
-      .toolbar {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        background: #fff;
-        border-bottom: 1px solid #ebecf0;
-        position: sticky;
-        top: 0;
-        z-index: 3;
-      }
-
-      .tabs {
-        box-shadow: none;
-      }
-
-      #nav {
-        align-self: flex-start;
-        position: sticky;
-        top: 8rem;
-        width: 300px;
-        margin: 4rem 0;
-        border-right: 1px solid #ebecf0;
-      }
-
-      #nav ul {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-      }
-
-      #nav .active {
-        font-weight: bold;
-      }
-
-      .content {
-        max-width: 600px;
-        padding: 2rem 0;
-      }
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"/>
+  <title>Catalyst | StencilJS</title>
+  <script type="module" src="/build/catalyst.esm.js"></script>
+  <script type="module">
+    import {ci} from '/build/assets/icons/js/icons.object.js';
+    import {catI18nRegistry, catIconRegistry} from '/build/index.esm.js';
+
+    /**
+     * WARNING: Keep in sync with ./index.cdn.js
+     */
+    catIconRegistry.addIcons(ci);
+    catI18nRegistry.set({
+      'datepicker.prevYear': 'Previous year',
+      'datepicker.nextYear': 'Next year',
+      'datepicker.prevMonth': 'Previous month',
+      'datepicker.nextMonth': 'Next month',
+      'datepicker.arrowKeys': 'Arrow keys can navigate dates.',
+      'datepicker.today': 'Today',
+      'datepicker.change': 'Change date',
+      'datepicker.choose': 'Choose date',
+      'timepicker.change': 'Change time',
+      'timepicker.choose': 'Choose time',
+      // 'datepicker.nextYear': 'Year',
+      'datepicker.year': 'Year',
+      'datepicker.month': 'Month',
+      'datepicker.hour': 'Hour',
+      'datepicker.minute': 'Minute',
+      'datepicker.scroll': 'Scroll to increment',
+      'datepicker.toggle': 'Click to toggle',
+      'datepicker.clear': 'Clear',
+      'dialog.close': 'Close',
+      'input.clear': 'Clear',
+      'input.optional': 'Optional',
+      'input.required': 'Required',
+      'input.showPassword': 'Show password',
+      'input.hidePassword': 'Hide password',
+      'notification.dismiss': 'Dismiss',
+      'pagination.ariaLabel': 'Pagination',
+      'pagination.prev': 'Previous',
+      'pagination.page': 'Go to page {{page}}',
+      'pagination.next': 'Next',
+      'select.close': 'Close',
+      'select.deselect': 'Deselect',
+      'select.empty': 'No items',
+      'select.open': 'Open',
+      'tabs.more': 'More'
+    });
+  </script>
+  <script nomodule src="/build/catalyst.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vanillajs-scrollspy@2.2.0/dist/vanillajs-scrollspy.min.js"></script>
+  <link rel="stylesheet" href="/build/catalyst.css"/>
+  <style>
+    html,
+    body {
+      background: #fff;
+    }
+
+    body {
+      padding: 2rem 4rem;
+    }
+
+    body.ss3 {
+      --cat-font-family-base: 'Source Sans 3';
+      --cat-font-family-head: 'Source Sans 3';
+    }
+
+    body.custom-theme {
+      --cat-primary-bg: 91, 94, 219;
+      --cat-primary-bg-hover: 78, 81, 191;
+      --cat-primary-bg-active: 65, 67, 159;
+
+      --cat-primary-bg-outlined: 253, 212, 212;
+
+      --cat-primary-fill: 255, 255, 255;
+      --cat-primary-fill-hover: 255, 255, 255;
+      --cat-primary-fill-active: 255, 255, 255;
+
+      --cat-primary-text: 91, 94, 219;
+      --cat-primary-text-hover: 78, 81, 191;
+      --cat-primary-text-active: 65, 67, 159;
+    }
+
+    .wrapper {
+      display: flex;
+      flex-direction: row;
+      gap: 8rem;
+    }
+
+    .toolbar {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      background: #fff;
+      border-bottom: 1px solid #ebecf0;
+      position: sticky;
+      top: 0;
+      z-index: 3;
+    }
+
+    .tabs {
+      box-shadow: none;
+    }
+
+    #nav {
+      align-self: flex-start;
+      position: sticky;
+      top: 8rem;
+      width: 300px;
+      margin: 4rem 0;
+      border-right: 1px solid #ebecf0;
+    }
+
+    #nav ul {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    #nav .active {
+      font-weight: bold;
+    }
+
+    .content {
+      max-width: 600px;
+      padding: 2rem 0;
+    }
+
+    .canvas-fake {
+      background: #f2f4f7;
+      border-radius: 0.5rem;
+      padding: 3.5rem;
+    }
+
+    section {
+      flex: 0 1 auto;
+      padding: 5rem 0;
+    }
+
+    section:not(:last-of-type) {
+      border-bottom: 1px solid rgba(0, 0, 0, 10%);
+    }
+
+    section > h2:not(:first-child),
+    section > h3:not(:first-child) {
+      margin-top: 2rem;
+    }
+
+    section > h2:not(:last-child),
+    section > h3:not(:last-child) {
+      margin-bottom: 1rem;
+    }
+
+    section.typography {
+      display: flex;
+      gap: 5rem;
+    }
+
+    /* Text page stylings */
+
+    section.typography .example {
+      max-width: 600px;
+      margin: 0 auto;
+    }
+
+    figure img {
+      max-width: 100%;
+    }
+
+    section.typography aside {
+      display: flex;
+      flex-direction: column;
+      gap: 7rem;
+      max-width: 450px;
+      box-sizing: content-box;
+      padding-right: 5rem;
+      border-right: 1px solid #ebecf0;
+    }
+
+    .switches {
+      position: fixed;
+      bottom: 1rem;
+      right: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      align-items: end;
+    }
+
+    .switches cat-button {
+      width: fit-content;
+    }
+  </style>
+</head>
+<body>
+<div class="body">
+  <h1>Catalyst Web Components</h1>
+
+  <!-- TOP TABS & BUTTONS -->
+  <div class="toolbar">
+    <cat-tabs class="tabs" active-tab="tab-comp" id="tabs-top">
+      <cat-tab label="Components" id="tab-comp"></cat-tab>
+      <cat-tab label="Text" id="tab-text"></cat-tab>
+      <cat-tab label="Icons" id="tab-icon"></cat-tab>
+    </cat-tabs>
+    <div class="cat-flex cat-items-center cat-gap-s">
+      <cat-button
+        url="https://github.com/haiilo/catalyst"
+        url-target="_blank"
+        size="s"
+        class="cat-elevation-1"
+        icon="github"
+      >
+        View on GitHub
+      </cat-button>
+      <cat-button
+        url="https://app.slack.com/client/T03BH7BHD/C02JFK9BM0F"
+        url-target="_blank"
+        size="s"
+        class="cat-elevation-1"
+        icon="slack"
+      >
+        Join us on Slack
+      </cat-button>
+    </div>
+  </div>
+
+  <!-- CATALYST COMPONENTS -->
+  <div id="tab-comp-content">
+    <div class="wrapper">
+      <nav id="nav">
+        <ul>
+          <li><a href="#alert">Alert</a></li>
+          <li><a href="#avatar">Avatar</a></li>
+          <li><a href="#badge">Badge</a></li>
+          <li><a href="#button">Button</a></li>
+          <li><a href="#group-button">Group Button</a></li>
+          <li><a href="#card">Card</a></li>
+          <li><a href="#checkbox">Checkbox</a></li>
+          <li><a href="#divider">Divider</a></li>
+          <li><a href="#dropdown">Dropdown</a></li>
+          <li><a href="#menu">Menu</a></li>
+          <li><a href="#form">Form</a></li>
+          <li><a href="#form-group">Form Group</a></li>
+          <li><a href="#icon">Icon</a></li>
+          <li><a href="#input">Input</a></li>
+          <li><a href="#datepicker">Datepicker</a></li>
+          <li><a href="#notification">Notification</a></li>
+          <li><a href="#pagination">Pagination</a></li>
+          <li><a href="#radio">Radio</a></li>
+          <li><a href="#scrollable">Scrollable</a></li>
+          <li><a href="#segmented-control">Segmented Control</a></li>
+          <li><a href="#select">Select</a></li>
+          <li><a href="#skeleton">Skeleton</a></li>
+          <li><a href="#spinner">Spinner</a></li>
+          <li><a href="#tabs">Tabs</a></li>
+          <li><a href="#tags">Tags</a></li>
+          <li><a href="#textarea">Textarea</a></li>
+          <li><a href="#toggle">Toggle</a></li>
+          <li><a href="#tooltip">Tooltip</a></li>
+        </ul>
+      </nav>
+      <div class="content">
+        <section id="alert" class="cat-article">
+          <h2>Alert</h2>
+          <cat-alert tabindex="3">
+            <p>
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+              labore et <a href="https://google.de">dolore magna</a> aliquyam erat, sed diam voluptua.
+            </p>
+          </cat-alert>
+          <h3>Color</h3>
+          <cat-alert color="secondary">
+            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+          </cat-alert>
+          <cat-alert color="info">
+            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+          </cat-alert>
+          <cat-alert color="success">
+            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+          </cat-alert>
+          <cat-alert color="warning">
+            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+          </cat-alert>
+          <cat-alert color="danger">
+            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+          </cat-alert>
+          <h3>Variations</h3>
+          <cat-alert color="primary" no-icon>
+            <p>
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+              labore et dolore magna aliquyam erat, sed diam voluptua.
+            </p>
+          </cat-alert>
+          <cat-alert color="secondary" icon="cross-circle-filled">
+            <h5 class="cat-strong">Lorem ipsum dolor sit amet.</h5>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+          </cat-alert>
+        </section>
 
-      .canvas-fake {
-        background: #f2f4f7;
-        border-radius: 0.5rem;
-        padding: 3.5rem;
-      }
+        <section id="avatar">
+          <h2>Avatar</h2>
+          <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
+          <h3>Variations</h3>
+          <cat-avatar label="John Doe" size="xs" icon="sparkle-filled"></cat-avatar>
+          <cat-avatar label="John Doe" size="s" round></cat-avatar>
+          <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
+          <cat-avatar
+            label="John Doe"
+            size="l"
+            round
+            url="http://google.com"
+            src="invalidSrc"
+            icon="sparkle-filled"
+          ></cat-avatar>
+          <cat-avatar label="John Doe" size="xl" initials="Init"></cat-avatar>
+        </section>
 
-      section {
-        flex: 0 1 auto;
-        padding: 5rem 0;
-      }
+        <section id="badge">
+          <h2>Badge</h2>
+          <cat-badge>Default</cat-badge>
+
+          <h3>Variant</h3>
+          <cat-badge variant="filled">Filled</cat-badge>
+          <cat-badge variant="outlined">Outlined</cat-badge>
+
+          <h3>Color</h3>
+          <cat-badge icon="sparkle-filled" color="primary">Primary</cat-badge>
+          <cat-badge icon="sparkle-filled" color="secondary">Secondary</cat-badge>
+          <cat-badge icon="sparkle-filled" color="info">Info</cat-badge>
+          <cat-badge icon="sparkle-filled" color="success">Success</cat-badge>
+          <cat-badge icon="sparkle-filled" color="warning">Warning</cat-badge>
+          <cat-badge icon="sparkle-filled" color="danger">Danger</cat-badge>
+          <br/>
+          <br/>
+          <cat-badge icon="sparkle-filled" icon-right color="primary">Primary</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right color="secondary">Secondary</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right color="info">Info</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right color="success">Success</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right color="warning">Warning</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right color="danger">Danger</cat-badge>
+
+          <h3>Size</h3>
+          <cat-badge icon="sparkle-filled" size="xs">Size XS</cat-badge>
+          <cat-badge icon="sparkle-filled" size="s">Size S</cat-badge>
+          <cat-badge icon="sparkle-filled" size="m">Size M</cat-badge>
+          <cat-badge icon="sparkle-filled" size="l">Size L</cat-badge>
+          <cat-badge icon="sparkle-filled" size="xl">Size XL</cat-badge>
+          <br/>
+          <br/>
+          <cat-badge icon="sparkle-filled" icon-right size="xs">Size XS</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right size="s">Size S</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right size="m">Size M</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right size="l">Size L</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right size="xl">Size XL</cat-badge>
+          <br/>
+          <br/>
+          <cat-badge icon="sparkle-filled" icon-only="xs" size="xs">sdfdsf sdfsdf</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-only="s" size="s">sdfdsf sdfsdf</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-only="m" size="m">sdfdsf sdfsdf</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-only="l" size="l">sdfdsf sdfsdf</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-only="xl" size="xl">sdfdsf sdfsdf</cat-badge>
+
+          <h3>Round</h3>
+          <cat-badge round="true">Round</cat-badge>
+          <cat-badge round="true" color="danger" size="xs"></cat-badge>
+
+          <h3>Pulse</h3>
+          <cat-badge pulse="true">Pulse</cat-badge>
+          <cat-badge pulse="true" variant="outlined">Pulse</cat-badge>
+          <cat-badge pulse="true" round="true" color="danger" size="xs"></cat-badge>
+
+          <h3>Layout</h3>
+          <cat-badge
+          >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+            labore et dolore magna aliquyam erat, sed diam voluptua.
+          </cat-badge>
+        </section>
 
-      section:not(:last-of-type) {
-        border-bottom: 1px solid rgba(0, 0, 0, 10%);
-      }
+        <section id="button">
+          <h2>Button</h2>
+          <cat-button test-id="data-test">Button</cat-button>
+
+          <h3>Color & Variant</h3>
+          <cat-button icon="sparkle-filled" variant="filled" color="primary">Primary</cat-button>
+          <cat-button icon="sparkle-filled" variant="outlined" color="primary">Primary</cat-button>
+          <cat-button icon="sparkle-filled" variant="text" color="primary">Primary</cat-button>
+          <cat-button icon="sparkle-filled" variant="link" color="primary">Primary</cat-button>
+          <br/><br/>
+          <cat-button icon="sparkle-filled" variant="filled" color="secondary">Secondary</cat-button>
+          <cat-button icon="sparkle-filled" variant="outlined" color="secondary">Secondary</cat-button>
+          <cat-button icon="sparkle-filled" variant="text" color="secondary">Secondary</cat-button>
+          <cat-button icon="sparkle-filled" variant="link" color="secondary">Secondary</cat-button>
+          <br/><br/>
+          <cat-button icon="sparkle-filled" variant="filled" color="info">Info</cat-button>
+          <cat-button icon="sparkle-filled" variant="outlined" color="info">Info</cat-button>
+          <cat-button icon="sparkle-filled" variant="text" color="info">Info</cat-button>
+          <cat-button icon="sparkle-filled" variant="link" color="info">Info</cat-button>
+          <br/><br/>
+          <cat-button icon="sparkle-filled" variant="filled" color="success">Success</cat-button>
+          <cat-button icon="sparkle-filled" variant="outlined" color="success">Success</cat-button>
+          <cat-button icon="sparkle-filled" variant="text" color="success">Success</cat-button>
+          <cat-button icon="sparkle-filled" variant="link" color="success">Success</cat-button>
+          <br/><br/>
+          <cat-button icon="sparkle-filled" variant="filled" color="warning">Warning</cat-button>
+          <cat-button icon="sparkle-filled" variant="outlined" color="warning">Warning</cat-button>
+          <cat-button icon="sparkle-filled" variant="text" color="warning">Warning</cat-button>
+          <cat-button icon="sparkle-filled" variant="link" color="warning">Warning</cat-button>
+          <br/><br/>
+          <cat-button icon="sparkle-filled" variant="filled" color="danger">Danger</cat-button>
+          <cat-button icon="sparkle-filled" variant="outlined" color="danger">Danger</cat-button>
+          <cat-button icon="sparkle-filled" variant="text" color="danger">Danger</cat-button>
+          <cat-button icon="sparkle-filled" variant="link" color="danger">Danger</cat-button>
+
+          <h3>Size</h3>
+          <cat-button size="xs" icon="sparkle-filled">Size XS</cat-button>
+          <cat-button size="s" icon="sparkle-filled">Size S</cat-button>
+          <cat-button size="m" icon="sparkle-filled">Size M</cat-button>
+          <cat-button size="l" icon="sparkle-filled">Size L</cat-button>
+          <cat-button size="xl" icon="sparkle-filled">Size XL</cat-button>
+
+          <h3>Icons</h3>
+          <cat-button icon="sparkle-filled">Prefix</cat-button>
+          <cat-button icon="sparkle-filled" icon-suffix="true">Suffix</cat-button>
+          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA">Suffix</cat-button>
+
+          <h3>Icon buttons</h3>
+          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xs"></cat-button>
+          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="s"></cat-button>
+          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="m"></cat-button>
+          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="l"></cat-button>
+          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xl"></cat-button>
+
+          <h3>Icons (Responsive)</h3>
+          <cat-button icon="sparkle-filled" icon-only="xs" a11y-label="ARIA">xs</cat-button>
+          <cat-button icon="sparkle-filled" icon-only="s" a11y-label="ARIA">s</cat-button>
+          <cat-button icon="sparkle-filled" icon-only="m" a11y-label="ARIA">m</cat-button>
+          <cat-button icon="sparkle-filled" icon-only="l" a11y-label="ARIA">l</cat-button>
+          <cat-button icon="sparkle-filled" icon-only="xl" a11y-label="ARIA">xl</cat-button>
+
+          <h3>Links</h3>
+          <cat-button url="http://www.google.de">Google</cat-button>
+          <cat-button url="http://www.google.de" url-target="_blank">Google (ext.)</cat-button>
+
+          <div class="cat-mt-s">
+            <cat-button inline="true" variant="link" url="http://www.google.de">Link 1
+            </cat-button
+            >
+            <cat-button inline="true" variant="link" url="http://www.google.de">Link 2</cat-button>
+          </div>
 
-      section > h2:not(:first-child),
-      section > h3:not(:first-child) {
-        margin-top: 2rem;
-      }
+          <h3>Active</h3>
+          <cat-button icon="sparkle-filled" active="true" variant="filled" color="primary">Primary</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="primary">Primary</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="text" color="primary">Primary</cat-button>
+          <br/><br/>
+          <cat-button icon="sparkle-filled" active="true" variant="filled" color="secondary">Secondary</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="secondary"
+          >Secondary
+          </cat-button
+          >
+          <cat-button icon="sparkle-filled" active="true" variant="text" color="secondary">Secondary</cat-button>
+          <br/><br/>
+          <cat-button icon="sparkle-filled" active="true" variant="filled" color="info">Info</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="info">Info</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="text" color="info">Info</cat-button>
+          <br/><br/>
+          <cat-button icon="sparkle-filled" active="true" variant="filled" color="success">Success</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="success">Success</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="text" color="success">Success</cat-button>
+          <br/><br/>
+          <cat-button icon="sparkle-filled" active="true" variant="filled" color="warning">Warning</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="warning">Warning</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="text" color="warning">Warning</cat-button>
+          <br/><br/>
+          <cat-button icon="sparkle-filled" active="true" variant="filled" color="danger">Danger</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="danger">Danger</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="text" color="danger">Danger</cat-button>
+
+          <h3>Disabled</h3>
+          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="primary">Primary</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="primary">Primary</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="primary">Primary</cat-button>
+          <br/><br/>
+          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="secondary"
+          >Secondary
+          </cat-button
+          >
+          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="secondary"
+          >Secondary
+          </cat-button
+          >
+          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="secondary">Secondary</cat-button>
+          <br/><br/>
+          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="info">Info</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="info">Info</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="info">Info</cat-button>
+          <br/><br/>
+          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="success">Success</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="success">Success</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="success">Success</cat-button>
+          <br/><br/>
+          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="warning">Warning</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="warning">Warning</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="warning">Warning</cat-button>
+          <br/><br/>
+          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="danger">Danger</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="danger">Danger</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="danger">Danger</cat-button>
+
+          <h3>Loading</h3>
+          <cat-button loading="true" variant="filled" color="primary">Primary</cat-button>
+          <cat-button loading="true" variant="outlined" color="primary">Primary</cat-button>
+          <cat-button loading="true" variant="text" color="primary">Primary</cat-button>
+          <br/><br/>
+          <cat-button loading="true" variant="filled" color="secondary">Secondary</cat-button>
+          <cat-button loading="true" variant="outlined" color="secondary">Secondary</cat-button>
+          <cat-button loading="true" variant="text" color="secondary">Secondary</cat-button>
+          <br/><br/>
+          <cat-button loading="true" variant="filled" color="info">Info</cat-button>
+          <cat-button loading="true" variant="outlined" color="info">Info</cat-button>
+          <cat-button loading="true" variant="text" color="info">Info</cat-button>
+          <br/><br/>
+          <cat-button loading="true" variant="filled" color="success">Success</cat-button>
+          <cat-button loading="true" variant="outlined" color="success">Success</cat-button>
+          <cat-button loading="true" variant="text" color="success">Success</cat-button>
+          <br/><br/>
+          <cat-button loading="true" variant="filled" color="warning">Warning</cat-button>
+          <cat-button loading="true" variant="outlined" color="warning">Warning</cat-button>
+          <cat-button loading="true" variant="text" color="warning">Warning</cat-button>
+          <br/><br/>
+          <cat-button loading="true" variant="filled" color="danger">Danger</cat-button>
+          <cat-button loading="true" variant="outlined" color="danger">Danger</cat-button>
+          <cat-button loading="true" variant="text" color="danger">Danger</cat-button>
+
+          <h3>Layout</h3>
+          <div style="width: 200px; border: 1px solid gray">
+            <cat-button icon="sparkle-filled">Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
+            <br/>
+            <cat-button icon="sparkle-filled" no-ellipsis>Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
+            <br/>
+            <cat-button icon="sparkle-filled" class="cat-block">Block</cat-button>
+            <cat-button icon="sparkle-filled" class="cat-block cat-text-left">Block (left)</cat-button>
+            <cat-button icon="sparkle-filled" class="cat-block cat-text-right">Block (right)</cat-button>
+          </div>
+        </section>
 
-      section > h2:not(:last-child),
-      section > h3:not(:last-child) {
-        margin-bottom: 1rem;
-      }
+        <section id="group-button">
+          <h2>Group button</h2>
+
+          <div style="display: flex; flex-direction: column; gap: 8px">
+            <cat-button-group a11y-label="Group button outlined">
+              <cat-button>Left</cat-button>
+              <cat-button>Middle</cat-button>
+              <cat-button>Middle1</cat-button>
+              <cat-button>Right</cat-button>
+            </cat-button-group>
+
+            <cat-button-group a11y-label="Group button filled">
+              <cat-button variant="filled">Left</cat-button>
+              <cat-button variant="filled">Middle</cat-button>
+              <cat-button variant="filled">Right</cat-button>
+            </cat-button-group>
+
+            <cat-button-group a11y-label="Group button text">
+              <cat-button variant="text">Left</cat-button>
+              <cat-button variant="text">Middle</cat-button>
+              <cat-button variant="text">Right</cat-button>
+            </cat-button-group>
+          </div>
+        </section>
 
-      section.typography {
-        display: flex;
-        gap: 5rem;
-      }
+        <section id="card">
+          <h2>Card</h2>
 
-      /* Text page stylings */
+          <div class="canvas-fake">
+            <cat-card>
+              <h3>Lorem ipsum dolor sit amet</h3>
+              <p>
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                labore et dolore magna aliquyam erat, sed diam voluptua.
+              </p>
+              <p>
+                At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+                diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+              </p>
+            </cat-card>
+          </div>
+          <h3>Navigation</h3>
+          <div class="canvas-fake">
+            <cat-card>
+              <nav>
+                <ul>
+                  <li class="cat-nav-head">Headline</li>
+                  <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
+                  <li>
+                    <cat-button class="cat-nav-item" color="primary">Nav item 1</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" active>Nav item 2</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" color="warning">Nav item 3</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" disabled>Nav item 4</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item">Nav item 5 (long)</cat-button>
+                  </li>
+                  <li class="cat-hr"></li>
+                  <li>
+                    <cat-button class="cat-nav-item" color="danger" onclick="console.log(6)" active
+                    >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f
+                    </cat-button>
+                  </li>
+                </ul>
+                <hr/>
+                <ul>
+                  <li>
+                    <cat-button class="cat-nav-item" variant="outlined" color="secondary" onclick="console.log(3)"
+                    >Nav item 3
+                    </cat-button
+                    >
+                  </li>
+                </ul>
+              </nav>
+            </cat-card>
+          </div>
+        </section>
 
-      section.typography .example {
-        max-width: 600px;
-        margin: 0 auto;
-      }
+        <section id="checkbox" class="cat-form">
+          <h2>Checkbox</h2>
+          <cat-checkbox label="Label"></cat-checkbox>
+
+          <h3>State</h3>
+          <cat-checkbox label="Disabled" disabled></cat-checkbox>
+          <cat-checkbox label="Checked" checked></cat-checkbox>
+          <cat-checkbox label="Checked disabled" checked disabled></cat-checkbox>
+          <cat-checkbox label="Indeterminate" indeterminate="true" id="indeterminate"></cat-checkbox>
+          <cat-button id="indeterminate-true">Set inteterminate true</cat-button>
+          <cat-button id="indeterminate-false">Set inteterminate false</cat-button>
+          <cat-button id="value-true">Set value true</cat-button>
+          <cat-button id="value-false">Set value false</cat-button>
+          <script>
+            document.querySelector('#indeterminate-true').addEventListener('click', () => {
+              document.querySelector('#indeterminate').indeterminate = true;
+            });
+            document.querySelector('#indeterminate-false').addEventListener('click', () => {
+              document.querySelector('#indeterminate').indeterminate = false;
+            });
+            document.querySelector('#value-true').addEventListener('click', () => {
+              document.querySelector('#indeterminate').checked = true;
+            });
+            document.querySelector('#value-false').addEventListener('click', () => {
+              document.querySelector('#indeterminate').checked = false;
+            });
+          </script>
 
-      figure img {
-        max-width: 100%;
-      }
+          <h3>Alignment</h3>
+          <cat-checkbox label="Label" label-left></cat-checkbox>
 
-      section.typography aside {
-        display: flex;
-        flex-direction: column;
-        gap: 7rem;
-        max-width: 450px;
-        box-sizing: content-box;
-        padding-right: 5rem;
-        border-right: 1px solid #ebecf0;
-      }
+          <h3>Slots</h3>
+          <cat-checkbox hint="This is a hint!">
+            <span slot="label">This is the <b>label</b></span>
+            <span slot="hint">This is another!</span>
+          </cat-checkbox>
+        </section>
 
-      .switches {
-        position: fixed;
-        bottom: 1rem;
-        right: 1rem;
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        align-items: end;
-      }
+        <section id="divider">
+          <h2>Divider</h2>
+        </section>
 
-      .switches cat-button {
-        width: fit-content;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="body">
-      <h1>Catalyst Web Components</h1>
-
-      <!-- TOP TABS & BUTTONS -->
-      <div class="toolbar">
-        <cat-tabs class="tabs" active-tab="tab-comp" id="tabs-top">
-          <cat-tab label="Components" id="tab-comp"></cat-tab>
-          <cat-tab label="Text" id="tab-text"></cat-tab>
-          <cat-tab label="Icons" id="tab-icon"></cat-tab>
-        </cat-tabs>
-        <div class="cat-flex cat-items-center cat-gap-s">
-          <cat-button
-            url="https://github.com/haiilo/catalyst"
-            url-target="_blank"
-            size="s"
-            class="cat-elevation-1"
-            icon="github"
-          >
-            View on GitHub
-          </cat-button>
-          <cat-button
-            url="https://app.slack.com/client/T03BH7BHD/C02JFK9BM0F"
-            url-target="_blank"
-            size="s"
-            class="cat-elevation-1"
-            icon="slack"
-          >
-            Join us on Slack
-          </cat-button>
-        </div>
-      </div>
+        <section id="dropdown">
+          <h2>Dropdown</h2>
 
-      <!-- CATALYST COMPONENTS -->
-      <div id="tab-comp-content">
-        <div class="wrapper">
-          <nav id="nav">
-            <ul>
-              <li><a href="#alert">Alert</a></li>
-              <li><a href="#avatar">Avatar</a></li>
-              <li><a href="#badge">Badge</a></li>
-              <li><a href="#button">Button</a></li>
-              <li><a href="#group-button">Group Button</a></li>
-              <li><a href="#card">Card</a></li>
-              <li><a href="#checkbox">Checkbox</a></li>
-              <li><a href="#divider">Divider</a></li>
-              <li><a href="#dropdown">Dropdown</a></li>
-              <li><a href="#menu">Menu</a></li>
-              <li><a href="#form">Form</a></li>
-              <li><a href="#form-group">Form Group</a></li>
-              <li><a href="#icon">Icon</a></li>
-              <li><a href="#input">Input</a></li>
-              <li><a href="#datepicker">Datepicker</a></li>
-              <li><a href="#notification">Notification</a></li>
-              <li><a href="#pagination">Pagination</a></li>
-              <li><a href="#radio">Radio</a></li>
-              <li><a href="#scrollable">Scrollable</a></li>
-              <li><a href="#select">Select</a></li>
-              <li><a href="#skeleton">Skeleton</a></li>
-              <li><a href="#spinner">Spinner</a></li>
-              <li><a href="#tabs">Tabs</a></li>
-              <li><a href="#tags">Tags</a></li>
-              <li><a href="#textarea">Textarea</a></li>
-              <li><a href="#toggle">Toggle</a></li>
-              <li><a href="#tooltip">Tooltip</a></li>
-            </ul>
-          </nav>
-          <div class="content">
-            <section id="alert" class="cat-article">
-              <h2>Alert</h2>
-              <cat-alert tabindex="3">
-                <p>
-                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                  labore et <a href="https://google.de">dolore magna</a> aliquyam erat, sed diam voluptua.
-                </p>
-              </cat-alert>
-              <h3>Color</h3>
-              <cat-alert color="secondary">
-                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-              </cat-alert>
-              <cat-alert color="info">
-                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-              </cat-alert>
-              <cat-alert color="success">
-                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-              </cat-alert>
-              <cat-alert color="warning">
-                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-              </cat-alert>
-              <cat-alert color="danger">
-                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-              </cat-alert>
-              <h3>Variations</h3>
-              <cat-alert color="primary" no-icon>
-                <p>
-                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                  labore et dolore magna aliquyam erat, sed diam voluptua.
-                </p>
-              </cat-alert>
-              <cat-alert color="secondary" icon="cross-circle-filled">
-                <h5 class="cat-strong">Lorem ipsum dolor sit amet.</h5>
-                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-              </cat-alert>
-            </section>
-
-            <section id="avatar">
-              <h2>Avatar</h2>
-              <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
-              <h3>Variations</h3>
-              <cat-avatar label="John Doe" size="xs" icon="sparkle-filled"></cat-avatar>
-              <cat-avatar label="John Doe" size="s" round></cat-avatar>
-              <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
-              <cat-avatar
-                label="John Doe"
-                size="l"
-                round
-                url="http://google.com"
-                src="invalidSrc"
-                icon="sparkle-filled"
-              ></cat-avatar>
-              <cat-avatar label="John Doe" size="xl" initials="Init"></cat-avatar>
-            </section>
-
-            <section id="badge">
-              <h2>Badge</h2>
-              <cat-badge>Default</cat-badge>
-
-              <h3>Variant</h3>
-              <cat-badge variant="filled">Filled</cat-badge>
-              <cat-badge variant="outlined">Outlined</cat-badge>
-
-              <h3>Color</h3>
-              <cat-badge icon="sparkle-filled" color="primary">Primary</cat-badge>
-              <cat-badge icon="sparkle-filled" color="secondary">Secondary</cat-badge>
-              <cat-badge icon="sparkle-filled" color="info">Info</cat-badge>
-              <cat-badge icon="sparkle-filled" color="success">Success</cat-badge>
-              <cat-badge icon="sparkle-filled" color="warning">Warning</cat-badge>
-              <cat-badge icon="sparkle-filled" color="danger">Danger</cat-badge>
-              <br />
-              <br />
-              <cat-badge icon="sparkle-filled" icon-right color="primary">Primary</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right color="secondary">Secondary</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right color="info">Info</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right color="success">Success</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right color="warning">Warning</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right color="danger">Danger</cat-badge>
-
-              <h3>Size</h3>
-              <cat-badge icon="sparkle-filled" size="xs">Size XS</cat-badge>
-              <cat-badge icon="sparkle-filled" size="s">Size S</cat-badge>
-              <cat-badge icon="sparkle-filled" size="m">Size M</cat-badge>
-              <cat-badge icon="sparkle-filled" size="l">Size L</cat-badge>
-              <cat-badge icon="sparkle-filled" size="xl">Size XL</cat-badge>
-              <br />
-              <br />
-              <cat-badge icon="sparkle-filled" icon-right size="xs">Size XS</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right size="s">Size S</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right size="m">Size M</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right size="l">Size L</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right size="xl">Size XL</cat-badge>
-              <br />
-              <br />
-              <cat-badge icon="sparkle-filled" icon-only="xs" size="xs">sdfdsf sdfsdf </cat-badge>
-              <cat-badge icon="sparkle-filled" icon-only="s" size="s">sdfdsf sdfsdf </cat-badge>
-              <cat-badge icon="sparkle-filled" icon-only="m" size="m">sdfdsf sdfsdf </cat-badge>
-              <cat-badge icon="sparkle-filled" icon-only="l" size="l">sdfdsf sdfsdf </cat-badge>
-              <cat-badge icon="sparkle-filled" icon-only="xl" size="xl">sdfdsf sdfsdf </cat-badge>
-
-              <h3>Round</h3>
-              <cat-badge round="true">Round</cat-badge>
-              <cat-badge round="true" color="danger" size="xs"></cat-badge>
-
-              <h3>Pulse</h3>
-              <cat-badge pulse="true">Pulse</cat-badge>
-              <cat-badge pulse="true" variant="outlined">Pulse</cat-badge>
-              <cat-badge pulse="true" round="true" color="danger" size="xs"></cat-badge>
-
-              <h3>Layout</h3>
-              <cat-badge
-                >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                labore et dolore magna aliquyam erat, sed diam voluptua.
-              </cat-badge>
-            </section>
-
-            <section id="button">
-              <h2>Button</h2>
-              <cat-button test-id="data-test">Button</cat-button>
-
-              <h3>Color & Variant</h3>
-              <cat-button icon="sparkle-filled" variant="filled" color="primary">Primary</cat-button>
-              <cat-button icon="sparkle-filled" variant="outlined" color="primary">Primary</cat-button>
-              <cat-button icon="sparkle-filled" variant="text" color="primary">Primary</cat-button>
-              <cat-button icon="sparkle-filled" variant="link" color="primary">Primary</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" variant="filled" color="secondary">Secondary</cat-button>
-              <cat-button icon="sparkle-filled" variant="outlined" color="secondary">Secondary</cat-button>
-              <cat-button icon="sparkle-filled" variant="text" color="secondary">Secondary</cat-button>
-              <cat-button icon="sparkle-filled" variant="link" color="secondary">Secondary</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" variant="filled" color="info">Info</cat-button>
-              <cat-button icon="sparkle-filled" variant="outlined" color="info">Info</cat-button>
-              <cat-button icon="sparkle-filled" variant="text" color="info">Info</cat-button>
-              <cat-button icon="sparkle-filled" variant="link" color="info">Info</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" variant="filled" color="success">Success</cat-button>
-              <cat-button icon="sparkle-filled" variant="outlined" color="success">Success</cat-button>
-              <cat-button icon="sparkle-filled" variant="text" color="success">Success</cat-button>
-              <cat-button icon="sparkle-filled" variant="link" color="success">Success</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" variant="filled" color="warning">Warning</cat-button>
-              <cat-button icon="sparkle-filled" variant="outlined" color="warning">Warning</cat-button>
-              <cat-button icon="sparkle-filled" variant="text" color="warning">Warning</cat-button>
-              <cat-button icon="sparkle-filled" variant="link" color="warning">Warning</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" variant="filled" color="danger">Danger</cat-button>
-              <cat-button icon="sparkle-filled" variant="outlined" color="danger">Danger</cat-button>
-              <cat-button icon="sparkle-filled" variant="text" color="danger">Danger</cat-button>
-              <cat-button icon="sparkle-filled" variant="link" color="danger">Danger</cat-button>
-
-              <h3>Size</h3>
-              <cat-button size="xs" icon="sparkle-filled">Size XS</cat-button>
-              <cat-button size="s" icon="sparkle-filled">Size S</cat-button>
-              <cat-button size="m" icon="sparkle-filled">Size M</cat-button>
-              <cat-button size="l" icon="sparkle-filled">Size L</cat-button>
-              <cat-button size="xl" icon="sparkle-filled">Size XL</cat-button>
-
-              <h3>Icons</h3>
-              <cat-button icon="sparkle-filled">Prefix</cat-button>
-              <cat-button icon="sparkle-filled" icon-suffix="true">Suffix</cat-button>
-              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA">Suffix</cat-button>
-
-              <h3>Icon buttons</h3>
-              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xs"></cat-button>
-              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="s"></cat-button>
-              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="m"></cat-button>
-              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="l"></cat-button>
-              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xl"></cat-button>
-
-              <h3>Icons (Responsive)</h3>
-              <cat-button icon="sparkle-filled" icon-only="xs" a11y-label="ARIA">xs</cat-button>
-              <cat-button icon="sparkle-filled" icon-only="s" a11y-label="ARIA">s</cat-button>
-              <cat-button icon="sparkle-filled" icon-only="m" a11y-label="ARIA">m</cat-button>
-              <cat-button icon="sparkle-filled" icon-only="l" a11y-label="ARIA">l</cat-button>
-              <cat-button icon="sparkle-filled" icon-only="xl" a11y-label="ARIA">xl</cat-button>
-
-              <h3>Links</h3>
-              <cat-button url="http://www.google.de">Google</cat-button>
-              <cat-button url="http://www.google.de" url-target="_blank">Google (ext.)</cat-button>
-
-              <div class="cat-mt-s">
-                <cat-button inline="true" variant="link" url="http://www.google.de">Link 1</cat-button
-                ><cat-button inline="true" variant="link" url="http://www.google.de">Link 2</cat-button>
-              </div>
-
-              <h3>Active</h3>
-              <cat-button icon="sparkle-filled" active="true" variant="filled" color="primary">Primary</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="primary">Primary</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="text" color="primary">Primary</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" active="true" variant="filled" color="secondary">Secondary</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="secondary"
-                >Secondary</cat-button
-              >
-              <cat-button icon="sparkle-filled" active="true" variant="text" color="secondary">Secondary</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" active="true" variant="filled" color="info">Info</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="info">Info</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="text" color="info">Info</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" active="true" variant="filled" color="success">Success</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="success">Success</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="text" color="success">Success</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" active="true" variant="filled" color="warning">Warning</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="warning">Warning</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="text" color="warning">Warning</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" active="true" variant="filled" color="danger">Danger</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="danger">Danger</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="text" color="danger">Danger</cat-button>
-
-              <h3>Disabled</h3>
-              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="primary">Primary</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="primary">Primary</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="primary">Primary</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="secondary"
-                >Secondary</cat-button
+          <div class="cat-flex cat-item-center cat-gap-s cat-mb-m">
+            <!-- Wide dropdown -->
+            <cat-dropdown justify focus-trap="true">
+              <cat-button slot="trigger" color="primary" variant="filled"
+              >Button with very long content so that it is very wide
+              </cat-button
               >
-              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="secondary"
-                >Secondary</cat-button
-              >
-              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="secondary">Secondary</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="info">Info</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="info">Info</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="info">Info</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="success">Success</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="success">Success</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="success">Success</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="warning">Warning</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="warning">Warning</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="warning">Warning</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="danger">Danger</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="danger">Danger</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="danger">Danger</cat-button>
-
-              <h3>Loading</h3>
-              <cat-button loading="true" variant="filled" color="primary">Primary</cat-button>
-              <cat-button loading="true" variant="outlined" color="primary">Primary</cat-button>
-              <cat-button loading="true" variant="text" color="primary">Primary</cat-button>
-              <br /><br />
-              <cat-button loading="true" variant="filled" color="secondary">Secondary</cat-button>
-              <cat-button loading="true" variant="outlined" color="secondary">Secondary</cat-button>
-              <cat-button loading="true" variant="text" color="secondary">Secondary</cat-button>
-              <br /><br />
-              <cat-button loading="true" variant="filled" color="info">Info</cat-button>
-              <cat-button loading="true" variant="outlined" color="info">Info</cat-button>
-              <cat-button loading="true" variant="text" color="info">Info</cat-button>
-              <br /><br />
-              <cat-button loading="true" variant="filled" color="success">Success</cat-button>
-              <cat-button loading="true" variant="outlined" color="success">Success</cat-button>
-              <cat-button loading="true" variant="text" color="success">Success</cat-button>
-              <br /><br />
-              <cat-button loading="true" variant="filled" color="warning">Warning</cat-button>
-              <cat-button loading="true" variant="outlined" color="warning">Warning</cat-button>
-              <cat-button loading="true" variant="text" color="warning">Warning</cat-button>
-              <br /><br />
-              <cat-button loading="true" variant="filled" color="danger">Danger</cat-button>
-              <cat-button loading="true" variant="outlined" color="danger">Danger</cat-button>
-              <cat-button loading="true" variant="text" color="danger">Danger</cat-button>
-
-              <h3>Layout</h3>
-              <div style="width: 200px; border: 1px solid gray">
-                <cat-button icon="sparkle-filled">Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
-                <br />
-                <cat-button icon="sparkle-filled" no-ellipsis>Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
-                <br />
-                <cat-button icon="sparkle-filled" class="cat-block">Block</cat-button>
-                <cat-button icon="sparkle-filled" class="cat-block cat-text-left">Block (left)</cat-button>
-                <cat-button icon="sparkle-filled" class="cat-block cat-text-right">Block (right)</cat-button>
-              </div>
-            </section>
-
-            <section id="group-button">
-              <h2>Group button</h2>
-
-              <div style="display: flex; flex-direction: column; gap: 8px">
-                <cat-button-group a11y-label="Group button outlined">
-                  <cat-button>Left</cat-button>
-                  <cat-button>Middle</cat-button>
-                  <cat-button>Middle1</cat-button>
-                  <cat-button>Right</cat-button>
-                </cat-button-group>
-
-                <cat-button-group a11y-label="Group button filled">
-                  <cat-button variant="filled">Left</cat-button>
-                  <cat-button variant="filled">Middle</cat-button>
-                  <cat-button variant="filled">Right</cat-button>
-                </cat-button-group>
-
-                <cat-button-group a11y-label="Group button text">
-                  <cat-button variant="text">Left</cat-button>
-                  <cat-button variant="text">Middle</cat-button>
-                  <cat-button variant="text">Right</cat-button>
-                </cat-button-group>
-              </div>
-            </section>
-
-            <section id="card">
-              <h2>Card</h2>
-
-              <div class="canvas-fake">
-                <cat-card>
-                  <h3>Lorem ipsum dolor sit amet</h3>
-                  <p>
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                    labore et dolore magna aliquyam erat, sed diam voluptua.
-                  </p>
-                  <p>
-                    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
-                    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
-                    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-                  </p>
-                </cat-card>
-              </div>
-              <h3>Navigation</h3>
-              <div class="canvas-fake">
-                <cat-card>
-                  <nav>
-                    <ul>
-                      <li class="cat-nav-head">Headline</li>
-                      <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
-                      <li>
-                        <cat-button class="cat-nav-item" color="primary">Nav item 1</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" active>Nav item 2</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" color="warning">Nav item 3</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" disabled>Nav item 4</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item">Nav item 5 (long)</cat-button>
-                      </li>
-                      <li class="cat-hr"></li>
-                      <li>
-                        <cat-button class="cat-nav-item" color="danger" onclick="console.log(6)" active
-                          >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f
-                        </cat-button>
-                      </li>
-                    </ul>
-                    <hr />
-                    <ul>
-                      <li>
-                        <cat-button class="cat-nav-item" variant="outlined" color="secondary" onclick="console.log(3)"
-                          >Nav item 3</cat-button
-                        >
-                      </li>
-                    </ul>
-                  </nav>
-                </cat-card>
-              </div>
-            </section>
-
-            <section id="checkbox" class="cat-form">
-              <h2>Checkbox</h2>
-              <cat-checkbox label="Label"></cat-checkbox>
-
-              <h3>State</h3>
-              <cat-checkbox label="Disabled" disabled></cat-checkbox>
-              <cat-checkbox label="Checked" checked></cat-checkbox>
-              <cat-checkbox label="Checked disabled" checked disabled></cat-checkbox>
-              <cat-checkbox label="Indeterminate" indeterminate="true" id="indeterminate"></cat-checkbox>
-              <cat-button id="indeterminate-true">Set inteterminate true</cat-button>
-              <cat-button id="indeterminate-false">Set inteterminate false</cat-button>
-              <cat-button id="value-true">Set value true</cat-button>
-              <cat-button id="value-false">Set value false</cat-button>
-              <script>
-                document.querySelector('#indeterminate-true').addEventListener('click', () => {
-                  document.querySelector('#indeterminate').indeterminate = true;
-                });
-                document.querySelector('#indeterminate-false').addEventListener('click', () => {
-                  document.querySelector('#indeterminate').indeterminate = false;
-                });
-                document.querySelector('#value-true').addEventListener('click', () => {
-                  document.querySelector('#indeterminate').checked = true;
-                });
-                document.querySelector('#value-false').addEventListener('click', () => {
-                  document.querySelector('#indeterminate').checked = false;
-                });
-              </script>
-
-              <h3>Alignment</h3>
-              <cat-checkbox label="Label" label-left></cat-checkbox>
-
-              <h3>Slots</h3>
-              <cat-checkbox hint="This is a hint!">
-                <span slot="label">This is the <b>label</b></span>
-                <span slot="hint">This is another!</span>
-              </cat-checkbox>
-            </section>
-
-            <section id="divider">
-              <h2>Divider</h2>
-            </section>
-
-            <section id="dropdown">
-              <h2>Dropdown</h2>
-
-              <div class="cat-flex cat-item-center cat-gap-s cat-mb-m">
-                <!-- Wide dropdown -->
-                <cat-dropdown justify focus-trap="true">
-                  <cat-button slot="trigger" color="primary" variant="filled"
-                    >Button with very long content so that it is very wide</cat-button
-                  >
-                  <nav slot="content">
-                    <ul>
-                      <li class="cat-nav-head">Headline</li>
-                      <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="sparkle-filled" color="warning">Nav item 3</cat-button>
-                      </li>
-                    </ul>
-                  </nav>
-                </cat-dropdown>
-
-                <!-- Example: User menu -->
-                <cat-dropdown overflow>
-                  <cat-button slot="trigger" variant="filled" color="primary" size="m">Example User Menu</cat-button>
-                  <nav slot="content" style="min-width: 240px">
-                    <ul>
-                      <li>
-                        <cat-button class="cat-nav-item">
-                          <div class="cat-flex cat-items-center cat-gap-s">
-                            <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
-                            <div class="cat-flex cat-flex-col cat-items-start">
-                              <span>Max Mustermann</span>
-                              <span class="cat-text-s cat-muted">Open profile</span>
-                            </div>
-                          </div>
-                        </cat-button>
-                      </li>
-                      <li>
-                        <cat-dropdown placement="right-start">
-                          <cat-button slot="trigger" class="cat-nav-item" icon="status-available">Available</cat-button>
-                          <nav slot="content">
-                            <ul>
-                              <li class="cat-nav-head">Headline</li>
-                              <li class="cat-nav-text cat-muted">
-                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-                              </li>
-                              <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
-                                >Nav item 1</cat-button
-                              >
-                            </ul>
-                          </nav>
-                        </cat-dropdown>
-                      </li>
-                      <li><cat-button class="cat-nav-item" icon="bookmark-outlined">Saved</cat-button></li>
-                      <li><cat-button class="cat-nav-item" icon="w-document-outlined">Files</cat-button></li>
-                      <hr />
-                      <li class="cat-nav-head">Platform</li>
-                      <li><cat-button class="cat-nav-item" icon="settings-outlined">Administration</cat-button></li>
-                      <li><cat-button class="cat-nav-item" icon="bar-chart-outlined">Analytics</cat-button></li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="w-hero-teaser-outlined">Manage hero teaser</cat-button>
-                      </li>
-                      <li><cat-button class="cat-nav-item" icon="w-alert-outlined">Reported content</cat-button></li>
-                      <hr />
-                      <li class="cat-nav-head">Settings</li>
-                      <li><cat-button class="cat-nav-item" icon="sliders-outlined">Account</cat-button></li>
-                      <li><cat-button class="cat-nav-item" icon="bell-outlined">Notifications</cat-button></li>
-                      <hr />
-                      <li class="cat-nav-head">Support</li>
-                      <li><cat-button class="cat-nav-item" icon="restart-outlined">Restart tour</cat-button></li>
-                      <li><cat-button class="cat-nav-item" icon="question-mark-circle-outlined">Help</cat-button></li>
-                      <li><cat-button class="cat-nav-item" icon="info-circle-outlined">About</cat-button></li>
-                      <hr />
-                      <li><cat-button class="cat-nav-item" icon="sign-out-outlined">Log out</cat-button></li>
-                    </ul>
-                  </nav>
-                </cat-dropdown>
-              </div>
-
-              <cat-card class="cat-flex cat-items-center cat-gap-m cat-border cat-pv-s">
-                Dropdown inside a card
-                <cat-dropdown>
-                  <cat-button slot="trigger">Click me</cat-button>
-                  <nav slot="content">
-                    <ul>
-                      <li><cat-button class="cat-nav-item">Item A</cat-button></li>
-                      <li><cat-button class="cat-nav-item">Item B</cat-button></li>
-                    </ul>
-                  </nav>
-                </cat-dropdown>
-              </cat-card>
-
-              <cat-dropdown no-auto-close>
-                <cat-button slot="trigger">Button (keep open)</cat-button>
-                <div slot="content" class="cat-flex cat-flex-col cat-p-m">
-                  <p>Here is some content.</p>
-                  <cat-button>Action</cat-button>
-                </div>
-              </cat-dropdown>
-
-              <cat-dropdown overflow>
-                <cat-button slot="trigger" color="primary" variant="filled">Nested dropdown</cat-button>
-                <nav slot="content">
-                  <ul>
-                    <li class="cat-nav-head">Headline</li>
-                    <li>
-                      <cat-dropdown placement="right-start">
-                        <cat-button slot="trigger" class="cat-nav-item" icon="sparkle-filled" color="primary"
-                          >Click one more time</cat-button
-                        >
-                        <nav slot="content">
-                          <ul>
-                            <li class="cat-nav-head">Headline</li>
-                            <li class="cat-nav-text cat-muted">
-                              Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-                            </li>
-                            <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
-                              >Nav item 1</cat-button
-                            >
-                          </ul>
-                        </nav>
-                      </cat-dropdown>
-                    </li>
-                    <li>
-                      <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
-                    </li>
-                  </ul>
-                </nav>
-              </cat-dropdown>
-            </section>
-
-            <section id="menu">
-              <h2>Menu</h2>
-
-              <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
-                <!-- Basic menu -->
-                <cat-menu>
-                  <cat-menu-item icon="edit-outlined">Edit</cat-menu-item>
-                  <cat-menu-item icon="copy-outlined">Duplicate</cat-menu-item>
-                  <cat-menu-item icon="archive-outlined">Archive</cat-menu-item>
-                  <hr />
-                  <cat-menu-item icon="trash-outlined" color="danger">Delete</cat-menu-item>
-                </cat-menu>
-
-                <!-- Menu with custom trigger -->
-                <cat-menu trigger-icon="settings-outlined" trigger-a11y-label="Settings menu">
-                  <cat-menu-item icon="user-outlined">Profile</cat-menu-item>
-                  <cat-menu-item icon="sliders-outlined">Preferences</cat-menu-item>
-                  <cat-menu-item icon="bell-outlined">Notifications</cat-menu-item>
-                  <hr />
-                  <cat-menu-item icon="sign-out-outlined">Sign out</cat-menu-item>
-                </cat-menu>
-
-                <cat-menu trigger-color="primary" trigger-variant="filled" trigger-label="Actions menu">
+              <nav slot="content">
+                <ul>
                   <li class="cat-nav-head">Headline</li>
                   <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
-                  <cat-menu-item icon="sparkle-filled" color="primary">Nav item 1</cat-menu-item>
-                  <cat-menu-item icon="sparkle-filled">Nav item 2</cat-menu-item>
-                  <cat-menu-item icon="sparkle-filled" color="warning">Nav item 3</cat-menu-item>
-                  <cat-menu-item icon="sparkle-filled" disabled>Nav item 4</cat-menu-item>
-                  <cat-menu-item>Nav item 5 (long)</cat-menu-item>
-                  <li class="cat-hr"></li>
-                  <cat-menu-item color="danger" onclick="console.log(6)"
-                    >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f</cat-menu-item
-                  >
-                  <hr />
-                  <cat-menu-item variant="outlined" onclick="console.log(3)">Nav item 3</cat-menu-item>
-                </cat-menu>
-
-                <cat-menu overflow trigger-variant="filled" trigger-label="Example User Menu">
-                  <cat-menu-item>
-                    <div class="cat-flex cat-items-center cat-gap-s">
-                      <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
-                      <div class="cat-flex cat-flex-col cat-items-start">
-                        <span>Max Mustermann</span>
-                        <span class="cat-text-s cat-muted">Open profile</span>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="sparkle-filled" color="warning">Nav item 3</cat-button>
+                  </li>
+                </ul>
+              </nav>
+            </cat-dropdown>
+
+            <!-- Example: User menu -->
+            <cat-dropdown overflow>
+              <cat-button slot="trigger" variant="filled" color="primary" size="m">Example User Menu</cat-button>
+              <nav slot="content" style="min-width: 240px">
+                <ul>
+                  <li>
+                    <cat-button class="cat-nav-item">
+                      <div class="cat-flex cat-items-center cat-gap-s">
+                        <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
+                        <div class="cat-flex cat-flex-col cat-items-start">
+                          <span>Max Mustermann</span>
+                          <span class="cat-text-s cat-muted">Open profile</span>
+                        </div>
                       </div>
-                    </div>
-                  </cat-menu-item>
-                  <cat-menu-item sub-menu>
+                    </cat-button>
+                  </li>
+                  <li>
                     <cat-dropdown placement="right-start">
                       <cat-button slot="trigger" class="cat-nav-item" icon="status-available">Available</cat-button>
                       <nav slot="content">
@@ -862,696 +728,971 @@ <h2>Menu</h2>
                           <li class="cat-nav-text cat-muted">
                             Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                           </li>
-                          <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
+                          <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
+                          >Nav item 1
+                          </cat-button
+                          >
                         </ul>
                       </nav>
                     </cat-dropdown>
-                  </cat-menu-item>
-                  <cat-menu-item icon="bookmark-outlined">Saved</cat-menu-item>
-                </cat-menu>
-              </div>
-
-              <h3>Menu Placement Examples</h3>
-              <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
-                <cat-menu placement="bottom-start" trigger-label="Bottom start menu">
-                  <cat-menu-item icon="align-left">Bottom start (default)</cat-menu-item>
-                  <cat-menu-item>Item 2</cat-menu-item>
-                  <cat-menu-item>Item 3</cat-menu-item>
-                </cat-menu>
-
-                <cat-menu placement="bottom-end" trigger-label="Bottom end menu">
-                  <cat-menu-item icon="align-right">Bottom end</cat-menu-item>
-                  <cat-menu-item>Item 2</cat-menu-item>
-                  <cat-menu-item>Item 3</cat-menu-item>
-                </cat-menu>
-
-                <cat-menu placement="top-start" trigger-label="Top start menu">
-                  <cat-menu-item icon="arrow-up">Top start</cat-menu-item>
-                  <cat-menu-item>Item 2</cat-menu-item>
-                  <cat-menu-item>Item 3</cat-menu-item>
-                </cat-menu>
-              </div>
-
-              <h3>Arrow Navigation Modes</h3>
-              <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
-                <!-- Vertical navigation (default) -->
-                <cat-menu
-                  arrow-navigation="vertical"
-                  trigger-label="Vertical navigation (default)"
-                  trigger-icon="arrows-vertical"
-                >
-                  <cat-menu-item icon="arrow-up-down-filled">Arrow Up/Down navigation</cat-menu-item>
-                  <cat-menu-item icon="list-outlined">Default for dropdown menus</cat-menu-item>
-                  <cat-menu-item icon="menu-outlined">Vertical orientation (ARIA)</cat-menu-item>
-                  <cat-menu-item icon="keyboard-outlined">Standard menu pattern</cat-menu-item>
-                </cat-menu>
-
-                <!-- Horizontal navigation -->
-                <cat-menu
-                  arrow-navigation="horizontal"
-                  trigger-label="Horizontal navigation"
-                  trigger-icon="arrows-horizontal"
-                  placement="bottom-start"
-                >
-                  <cat-menu-item icon="arrow-left-right-filled">Arrow Left/Right navigation</cat-menu-item>
-                  <cat-menu-item icon="columns-outlined">Ideal for toolbar menus</cat-menu-item>
-                  <cat-menu-item icon="layout-outlined">Horizontal orientation (ARIA)</cat-menu-item>
-                  <cat-menu-item icon="keyboard-outlined">Alternative menu pattern</cat-menu-item>
-                </cat-menu>
-              </div>
-            </section>
-
-            <section id="form">
-              <h2>Form</h2>
-              <form class="cat-form" action="." method="GET">
-                <cat-input name="field1" label="Field 1" value="value1"></cat-input>
-                <cat-textarea name="field2" label="Field 2" value="value2"></cat-textarea>
-                <cat-checkbox name="field3" label="Field 3" value="value3" checked></cat-checkbox>
-                <cat-toggle name="field4" label="Field 4" value="value4" checked></cat-toggle>
-                <cat-button submit="true">Submit</cat-button>
-              </form>
-            </section>
-
-            <section id="form-group" class="cat-form">
-              <h2>Form Group</h2>
-              <cat-form-group>
-                <cat-input label="Field 1" max-length="30"></cat-input>
-                <cat-input label="Field 2" required></cat-input>
-              </cat-form-group>
-
-              <h3>Alignment (horizontal)</h3>
-              <cat-form-group label-size="40%" horizontal>
-                <cat-input hint="This is a hint" required max-length="98">
-                  <span slot="label">This is the <b>label</b></span>
-                </cat-input>
-                <cat-input hint="NO LABEL" required></cat-input>
-                <cat-input label="Label" label-hidden="true" hint="NO LABEL" required></cat-input>
-                <cat-input label="Field 1" hint="This is a hint"></cat-input>
-                <cat-input
-                  label="Field 1"
-                  hint="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
-                ></cat-input>
-                <cat-input
-                  label="This is a very long label with some more text"
-                  required
-                  hint="This is a hint"
-                ></cat-input>
-                <cat-textarea max-length="50" label="Label" hint="This is a hint"></cat-textarea>
-                <cat-select label="Field 3"></cat-select>
-                <cat-datepicker clearable="true" a11y-label="ARIA" label="Date picker"></cat-datepicker>
-              </cat-form-group>
-
-              <h3>Auto (more required)</h3>
-              <cat-form-group>
-                <cat-input label="Field 1"></cat-input>
-                <cat-input label="Field 2" required></cat-input>
-                <cat-textarea label="Field 3" required></cat-textarea>
-              </cat-form-group>
-
-              <h3>Auto (more optional)</h3>
-              <cat-form-group>
-                <cat-input label="Field 1"></cat-input>
-                <cat-input label="Field 2"></cat-input>
-                <cat-textarea label="Field 3" required></cat-textarea>
-              </cat-form-group>
-
-              <h3>None marker</h3>
-              <cat-form-group required-marker="none">
-                <cat-input label="Field 1"></cat-input>
-                <cat-input label="Field 2"></cat-input>
-                <cat-textarea label="Field 3" required></cat-textarea>
-              </cat-form-group>
-
-              <h3>Only mark optional</h3>
-              <cat-form-group required-marker="optional">
-                <cat-input label="Field 1"></cat-input>
-                <cat-input label="Field 2"></cat-input>
-                <cat-textarea label="Field 3" required></cat-textarea>
-              </cat-form-group>
-
-              <h3>Only mark required</h3>
-              <cat-form-group required-marker="required">
-                <cat-input label="Field 1"></cat-input>
-                <cat-input label="Field 2" required></cat-input>
-                <cat-textarea label="Field 3" required></cat-textarea>
-              </cat-form-group>
-
-              <h3>Dynamic field added</h3>
-              <cat-form-group id="form-group-1">
-                <cat-input id="cat-input-1" label="Field 1"></cat-input>
-                <cat-input label="Field 2" required></cat-input>
-              </cat-form-group>
-
-              <script>
-                let input = document.getElementById('cat-input-1');
-                input.addEventListener('input', () => {
-                  let elementById = document.getElementById('time2');
-                  elementById.value = '13:58';
-                });
-                const formElem = document.getElementById('form-group-1');
-                setTimeout(() => {
-                  const htmlElement = document.createElement('cat-input');
-                  htmlElement.setAttribute('label', 'Field 3');
-                  formElem.appendChild(htmlElement);
-                }, 5000);
-              </script>
-            </section>
-
-            <section id="icon">
-              <h2>Icon</h2>
-              <cat-icon icon="sparkle-filled"></cat-icon>
-
-              <h3>Color</h3>
-              <cat-icon icon="sparkle-filled" style="color: red"></cat-icon>
-              <cat-icon icon="sparkle-filled" style="color: blue"></cat-icon>
-              <cat-icon icon="sparkle-filled" style="color: green"></cat-icon>
-
-              <h3>Size</h3>
-              <cat-icon icon="sparkle-filled" size="xs"></cat-icon>
-              <cat-icon icon="sparkle-filled" size="s"></cat-icon>
-              <cat-icon icon="sparkle-filled" size="m"></cat-icon>
-              <cat-icon icon="sparkle-filled" size="l"></cat-icon>
-              <cat-icon icon="sparkle-filled" size="xl"></cat-icon>
-              <cat-icon icon="sparkle-filled" size="inline" style="font-size: 2.5rem"></cat-icon>
-
-              <h3>Ratio</h3>
-              <cat-icon icon="sp-grid-3-cols" style="--cat-icon-ratio: 2.5"></cat-icon>
-            </section>
-
-            <section id="input" class="cat-form">
-              <h2>Input</h2>
-              <cat-input label="Label" hint="This is a hint!" placeholder="I am the placeholder">
-                <span slot="hint">This is another!</span>
-              </cat-input>
-              <cat-input label="Label" max-length="100">
-                <span slot="label">Priority Label</span>
-              </cat-input>
-              <cat-input label="Label" loading>
-                <span slot="label">Loading</span>
-              </cat-input>
-              <h3>Types</h3>
-              <cat-input label="Color" type="color"></cat-input>
-              <cat-input label="Color" type="color" clearable="true"></cat-input>
-              <cat-input label="Email" type="email"></cat-input>
-              <cat-input label="File" type="file" accept="image/png, image/jpeg" multiple></cat-input>
-              <cat-input label="Number" type="number"></cat-input>
-              <cat-input label="Password" type="password"></cat-input>
-              <cat-input label="Range" type="range"></cat-input>
-              <cat-input label="Search" type="search"></cat-input>
-              <cat-input label="Tel" type="tel"></cat-input>
-              <cat-input label="Text" type="text"></cat-input>
-              <cat-input label="Url" type="url"></cat-input>
-              <h3>Slotted Counter</h3>
-              <cat-input label="Custom counter">
-                <span slot="counter">Show any text here</span>
-              </cat-input>
-            </section>
-
-            <section id="datepicker" class="cat-form">
-              <h2>Datepicker</h2>
-              <cat-date label="New Datepicker"></cat-date>
-              <cat-time id="time2" label="New Timepicker" value="12:00"></cat-time>
-              <cat-datepicker mode="date">
-                <span slot="label">Priority Label</span>
-                <span slot="hint">Priority Hint</span>
-              </cat-datepicker>
-              <cat-datepicker mode="datetime" label="Datetime" disabled></cat-datepicker>
-              <cat-datepicker mode="time" label="Time"></cat-datepicker>
-              <cat-datepicker mode="week" label="Week"></cat-datepicker>
-              <cat-datepicker mode="daterange" label="Daterange"></cat-datepicker>
-              <h3>Inline Datepicker (new)</h3>
-              <cat-date-inline
-                value="2022-06-21"
-                label="test this is"
-                a11y-label="This is an Aria test"
-              ></cat-date-inline>
-              <h3>Inline Datepicker</h3>
-              <cat-card class="cat-inline-flex cat-flex-col cat-border">
-                <h4>Datetime</h4>
-                <cat-datepicker-inline value="2022-06-21T00:00:000Z"></cat-datepicker-inline>
-              </cat-card>
-              <h3>Nested Datepicker</h3>
-              <cat-dropdown>
-                <cat-button slot="trigger" color="primary" variant="filled">Button</cat-button>
-                <div slot="content" class="cat-p-m">
-                  <cat-input></cat-input>
-                  <cat-datepicker mode="date" label="Date"></cat-datepicker>
-                  <cat-datepicker mode="date" label="Date"></cat-datepicker>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="bookmark-outlined">Saved</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="w-document-outlined">Files</cat-button>
+                  </li>
+                  <hr/>
+                  <li class="cat-nav-head">Platform</li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="settings-outlined">Administration</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="bar-chart-outlined">Analytics</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="w-hero-teaser-outlined">Manage hero teaser</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="w-alert-outlined">Reported content</cat-button>
+                  </li>
+                  <hr/>
+                  <li class="cat-nav-head">Settings</li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="sliders-outlined">Account</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="bell-outlined">Notifications</cat-button>
+                  </li>
+                  <hr/>
+                  <li class="cat-nav-head">Support</li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="restart-outlined">Restart tour</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="question-mark-circle-outlined">Help</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="info-circle-outlined">About</cat-button>
+                  </li>
+                  <hr/>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="sign-out-outlined">Log out</cat-button>
+                  </li>
+                </ul>
+              </nav>
+            </cat-dropdown>
+          </div>
+
+          <cat-card class="cat-flex cat-items-center cat-gap-m cat-border cat-pv-s">
+            Dropdown inside a card
+            <cat-dropdown>
+              <cat-button slot="trigger">Click me</cat-button>
+              <nav slot="content">
+                <ul>
+                  <li>
+                    <cat-button class="cat-nav-item">Item A</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item">Item B</cat-button>
+                  </li>
+                </ul>
+              </nav>
+            </cat-dropdown>
+          </cat-card>
+
+          <cat-dropdown no-auto-close>
+            <cat-button slot="trigger">Button (keep open)</cat-button>
+            <div slot="content" class="cat-flex cat-flex-col cat-p-m">
+              <p>Here is some content.</p>
+              <cat-button>Action</cat-button>
+            </div>
+          </cat-dropdown>
+
+          <cat-dropdown overflow>
+            <cat-button slot="trigger" color="primary" variant="filled">Nested dropdown</cat-button>
+            <nav slot="content">
+              <ul>
+                <li class="cat-nav-head">Headline</li>
+                <li>
+                  <cat-dropdown placement="right-start">
+                    <cat-button slot="trigger" class="cat-nav-item" icon="sparkle-filled" color="primary"
+                    >Click one more time
+                    </cat-button
+                    >
+                    <nav slot="content">
+                      <ul>
+                        <li class="cat-nav-head">Headline</li>
+                        <li class="cat-nav-text cat-muted">
+                          Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+                        </li>
+                        <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
+                        >Nav item 1
+                        </cat-button
+                        >
+                      </ul>
+                    </nav>
+                  </cat-dropdown>
+                </li>
+                <li>
+                  <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
+                </li>
+              </ul>
+            </nav>
+          </cat-dropdown>
+        </section>
+
+        <section id="menu">
+          <h2>Menu</h2>
+
+          <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
+            <!-- Basic menu -->
+            <cat-menu>
+              <cat-menu-item icon="edit-outlined">Edit</cat-menu-item>
+              <cat-menu-item icon="copy-outlined">Duplicate</cat-menu-item>
+              <cat-menu-item icon="archive-outlined">Archive</cat-menu-item>
+              <hr/>
+              <cat-menu-item icon="trash-outlined" color="danger">Delete</cat-menu-item>
+            </cat-menu>
+
+            <!-- Menu with custom trigger -->
+            <cat-menu trigger-icon="settings-outlined" trigger-a11y-label="Settings menu">
+              <cat-menu-item icon="user-outlined">Profile</cat-menu-item>
+              <cat-menu-item icon="sliders-outlined">Preferences</cat-menu-item>
+              <cat-menu-item icon="bell-outlined">Notifications</cat-menu-item>
+              <hr/>
+              <cat-menu-item icon="sign-out-outlined">Sign out</cat-menu-item>
+            </cat-menu>
+
+            <cat-menu trigger-color="primary" trigger-variant="filled" trigger-label="Actions menu">
+              <li class="cat-nav-head">Headline</li>
+              <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
+              <cat-menu-item icon="sparkle-filled" color="primary">Nav item 1</cat-menu-item>
+              <cat-menu-item icon="sparkle-filled">Nav item 2</cat-menu-item>
+              <cat-menu-item icon="sparkle-filled" color="warning">Nav item 3</cat-menu-item>
+              <cat-menu-item icon="sparkle-filled" disabled>Nav item 4</cat-menu-item>
+              <cat-menu-item>Nav item 5 (long)</cat-menu-item>
+              <li class="cat-hr"></li>
+              <cat-menu-item color="danger" onclick="console.log(6)"
+              >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f
+              </cat-menu-item
+              >
+              <hr/>
+              <cat-menu-item variant="outlined" onclick="console.log(3)">Nav item 3</cat-menu-item>
+            </cat-menu>
+
+            <cat-menu overflow trigger-variant="filled" trigger-label="Example User Menu">
+              <cat-menu-item>
+                <div class="cat-flex cat-items-center cat-gap-s">
+                  <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
+                  <div class="cat-flex cat-flex-col cat-items-start">
+                    <span>Max Mustermann</span>
+                    <span class="cat-text-s cat-muted">Open profile</span>
+                  </div>
                 </div>
-              </cat-dropdown>
-            </section>
-
-            <section id="notification">
-              <h2>Notification</h2>
-              <cat-button id="notification-trigger">Show Notifications</cat-button>
-              <script type="module">
-                import { catNotificationService } from '/build/index.esm.js';
-                document.getElementById('notification-trigger').onclick = function () {
-                  catNotificationService.show('Item saved', {
-                    autoClose: false,
-                    closeButton: true,
-                    action: 'Show saved items'
-                  });
-                  catNotificationService.show('This is light', {
-                    mode: 'light',
-                    closeButton: true,
-                    icon: 'globe-outlined',
-                    action: 'Seite neu laden'
-                  });
-                  catNotificationService.show('Article was saved', {
-                    action: 'Undo'
-                  });
-                  catNotificationService.show('Es scheint als hättest du keine Internetverbindung mehr', {
-                    icon: 'globe-outlined',
-                    action: 'Seite neu laden'
-                  });
-                };
-              </script>
-            </section>
-
-            <section id="pagination">
-              <h2>Pagination</h2>
-              <cat-pagination page-count="10" compact></cat-pagination>
-              <br />
-              <br />
-              <cat-pagination page-count="10" size="s"></cat-pagination>
-              <br />
-              <br />
-              <cat-pagination page-count="10"></cat-pagination>
-              <br />
-              <br />
-              <cat-pagination page-count="10" variant="outlined"></cat-pagination>
-              <br />
-              <br />
-              <span>Change event demo (See console)</span>
-              <cat-pagination id="change-demo" page-count="10" variant="outlined" round></cat-pagination>
-              <script>
-                var paginationDemo = document.getElementById('change-demo');
-
-                paginationDemo.addEventListener('catChange', function (event) {
-                  console.log('Page changed!', event.detail);
-                });
-              </script>
-            </section>
-
-            <section id="radio" class="cat-form">
-              <h2>Radio</h2>
-              <cat-radio label="Label"></cat-radio>
-
-              <h3>Group</h3>
-              <cat-radio-group a11y-label="Radio Group 1" label-left>
-                <cat-radio value="one" label="Option 1 - Group 1" hint="This is a hint" checked></cat-radio>
-                <cat-radio value="two" label="Option 2 - Group 1" hint="This is a hint"></cat-radio>
-                <cat-radio value="three" label="Option 3 - Group 1" hint="This is a hint" disabled></cat-radio>
-              </cat-radio-group>
-
-              <h3>State</h3>
-              <cat-radio label="Disabled" disabled></cat-radio>
-              <cat-radio label="Checked" checked></cat-radio>
-              <cat-radio label="Checked disabled" checked disabled></cat-radio>
-
-              <h3>Alignment</h3>
-              <cat-radio label="Label" label-left></cat-radio>
-
-              <h3>Slots</h3>
-              <cat-radio hint="This is a hint!">
-                <span slot="label">This is the <b>label</b></span>
-                <span slot="hint">This is another!</span>
-              </cat-radio>
-            </section>
-
-            <section id="scrollable">
-              <h2>Scrollable</h2>
-              <cat-scrollable style="max-height: 8rem; width: 25vw">
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-              </cat-scrollable>
-            </section>
-
-            <section id="select">
-              <h2>Select</h2>
-              <cat-select-demo></cat-select-demo>
-            </section>
-
-            <section id="skeleton">
-              <h2>Skeleton</h2>
-              <cat-skeleton></cat-skeleton>
-
-              <h3>Effect</h3>
-              <cat-skeleton effect="plain"></cat-skeleton>
-              <br />
-              <cat-skeleton effect="sheen"></cat-skeleton>
-              <br />
-              <cat-skeleton effect="pulse"></cat-skeleton>
-
-              <h3>Variant</h3>
-              <cat-skeleton variant="square"></cat-skeleton>
-              <cat-skeleton variant="circle"></cat-skeleton>
-              <cat-skeleton variant="rectangle"></cat-skeleton>
-              <cat-skeleton variant="head"></cat-skeleton>
-              <cat-skeleton variant="body"></cat-skeleton>
-            </section>
-
-            <section id="spinner">
-              <h2>Spinner</h2>
-              <cat-spinner></cat-spinner>
-
-              <h3>Color</h3>
-              <cat-spinner style="color: red"></cat-spinner>
-              <cat-spinner style="color: blue"></cat-spinner>
-              <cat-spinner style="color: green"></cat-spinner>
-
-              <h3>Size</h3>
-              <cat-spinner size="xs"></cat-spinner>
-              <cat-spinner size="s"></cat-spinner>
-              <cat-spinner size="m"></cat-spinner>
-              <cat-spinner size="l"></cat-spinner>
-              <cat-spinner size="xl"></cat-spinner>
-              <cat-spinner size="inline" style="font-size: 2.5rem"></cat-spinner>
-            </section>
-
-            <section id="tabs">
-              <h2>Tabs</h2>
-              <cat-tabs>
-                <cat-tab id="tab1" label="First"></cat-tab>
-                <cat-tab label="Second"></cat-tab>
-                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-              </cat-tabs>
-              <h3>Alignment</h3>
-              <cat-tabs tabs-align="center">
-                <cat-tab label="First"></cat-tab>
-                <cat-tab label="Second"></cat-tab>
-                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-              </cat-tabs>
-              <br />
-              <br />
-              <cat-tabs tabs-align="right">
-                <cat-tab label="First"></cat-tab>
-                <cat-tab label="Second"></cat-tab>
-                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-              </cat-tabs>
-              <br />
-              <br />
-              <cat-tabs tabs-align="justify" active-tab="second">
-                <cat-tab label="First" deactivate></cat-tab>
-                <cat-tab label="Second" id="second"></cat-tab>
-                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-              </cat-tabs>
-              <script>
-                const tab = document.querySelector('#tab1');
-                setInterval(() => {
-                  tab.deactivated = true;
-                }, 5000);
-              </script>
-              <h3>More</h3>
-              <cat-tabs>
-                <cat-tab id="tab1" label="First"></cat-tab>
-                <cat-tab label="Second"></cat-tab>
-                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-                <cat-dropdown slot="more">
-                  <cat-button class="cat-tab cat-ml-auto" slot="trigger" variant="text">More</cat-button>
+              </cat-menu-item>
+              <cat-menu-item sub-menu>
+                <cat-dropdown placement="right-start">
+                  <cat-button slot="trigger" class="cat-nav-item" icon="status-available">Available</cat-button>
                   <nav slot="content">
                     <ul>
-                      <cat-button class="cat-nav-item">Nav item 1</cat-button>
-                      <cat-button class="cat-nav-item">Nav item 1</cat-button>
+                      <li class="cat-nav-head">Headline</li>
+                      <li class="cat-nav-text cat-muted">
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+                      </li>
+                      <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
                     </ul>
                   </nav>
                 </cat-dropdown>
-              </cat-tabs>
-
-              <cat-tabs adaptive active-tab-always-visible tabs-align="justify">
-                <cat-tab id="tab2" label="First"></cat-tab>
-                <cat-tab label="Second"></cat-tab>
-                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-                <cat-tab label="Fourth Fourth" icon="sparkle-filled"></cat-tab>
-                <cat-tab label="Fifth" icon="sparkle-filled"></cat-tab>
-                <cat-tab label="Sixth" icon="sparkle-filled"></cat-tab>
-                <cat-tab label="Seventh Seventh" icon="sparkle-filled"></cat-tab>
-                <cat-tab label="Eighth" icon="sparkle-filled"></cat-tab>
-                <cat-tab sticky label="Ninth" icon="sparkle-filled"></cat-tab>
-                <cat-tab label="Tenth" icon="sparkle-filled"></cat-tab>
-              </cat-tabs>
-            </section>
-
-            <section id="tags">
-              <h2>Tags</h2>
-              <cat-tag label="Tag Input" placeholder="Placeholder" hint="this is a hint"></cat-tag>
-              <cat-tag label="Tag Input" placeholder="Placeholder" disabled="true"></cat-tag>
-            </section>
-
-            <section id="textarea">
-              <h2>Textarea</h2>
-              <cat-textarea label="Label" max-length="100"></cat-textarea>
-              <h3>Slotted Counter</h3>
-              <cat-textarea label="Custom counter">
-                <span slot="counter">Show any text here</span>
-              </cat-textarea>
-              <h3>Counter w/o label</h3>
-              <cat-textarea max-length="100"></cat-textarea>
-            </section>
-
-            <section id="toggle" class="cat-form">
-              <h2>Toggle</h2>
-              <cat-toggle label="Toggle" hint="This is a hint!" label-left style="width: 500px">
-                <span slot="hint">This is another!</span>
-              </cat-toggle>
-              <cat-toggle label="Toggle"></cat-toggle>
-              <cat-toggle><label slot="label">Slotted Label</label></cat-toggle>
-              <cat-toggle label="Disabled" disabled></cat-toggle>
-              <cat-toggle label="Checked" checked></cat-toggle>
-              <cat-toggle label="Checked disabled" checked disabled></cat-toggle>
-              <cat-toggle label="Not priority label"><label slot="label">Priority Label</label></cat-toggle>
-              <cat-toggle label="Hidden label" label-hidden="true"></cat-toggle>
-            </section>
-
-            <section id="tooltip">
-              <h2>Tooltip</h2>
-              <cat-tooltip content="This is a tooltip">
-                <cat-button>Button</cat-button>
-              </cat-tooltip>
-              <cat-tooltip>
-                <cat-button>Button</cat-button>
-                <div slot="content">
-                  <h2>Tooltip</h2>
-                  <p>This is a <b>fancy</b> tooltip<br />with some more lines.</p>
-                </div>
-              </cat-tooltip>
-              <h3>Size</h3>
-              <cat-tooltip size="s" content="This is a small tooltip">
-                <p class="cat-inline-flex">Hover Me (S)</p>
-              </cat-tooltip>
-              <br />
-              <cat-tooltip size="s" round="true" content="This is a small tooltip">
-                <p class="cat-inline-flex">Hover Me (S round)</p>
-              </cat-tooltip>
-              <br />
-              <cat-tooltip size="m" content="This is a regular tooltip">
-                <p class="cat-inline-flex">Hover Me (M)</p>
-              </cat-tooltip>
-              <br />
-              <cat-tooltip size="m" round="true" content="This is a regular tooltip">
-                <p class="cat-inline-flex">Hover Me (M round)</p>
-              </cat-tooltip>
-              <br />
-              <cat-tooltip size="l" content="This is a large tooltip">
-                <p class="cat-inline-flex">Hover Me (L)</p>
-              </cat-tooltip>
-              <br />
-              <cat-tooltip size="l" round="true" content="This is a large tooltip">
-                <p class="cat-inline-flex">Hover Me (L round)</p>
-              </cat-tooltip>
-              <h3>Round</h3>
-              <cat-tooltip round="true" content="This is a round tooltip">
-                <p class="cat-inline-flex">Hover Me (round)</p>
-              </cat-tooltip>
-              <h3>Async</h3>
-              <cat-tooltip id="async-tooltip" placement="bottom-end">
-                <p class="cat-inline-flex">Hover Me (async)</p>
-              </cat-tooltip>
-              <script>
-                const tooltipElem = document.getElementById('async-tooltip');
-                setInterval(() => {
-                  tooltipElem.content = 'This is an async tooltip';
-                }, 1000);
-              </script>
-            </section>
+              </cat-menu-item>
+              <cat-menu-item icon="bookmark-outlined">Saved</cat-menu-item>
+            </cat-menu>
+          </div>
+
+          <h3>Menu Placement Examples</h3>
+          <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
+            <cat-menu placement="bottom-start" trigger-label="Bottom start menu">
+              <cat-menu-item icon="align-left">Bottom start (default)</cat-menu-item>
+              <cat-menu-item>Item 2</cat-menu-item>
+              <cat-menu-item>Item 3</cat-menu-item>
+            </cat-menu>
+
+            <cat-menu placement="bottom-end" trigger-label="Bottom end menu">
+              <cat-menu-item icon="align-right">Bottom end</cat-menu-item>
+              <cat-menu-item>Item 2</cat-menu-item>
+              <cat-menu-item>Item 3</cat-menu-item>
+            </cat-menu>
+
+            <cat-menu placement="top-start" trigger-label="Top start menu">
+              <cat-menu-item icon="arrow-up">Top start</cat-menu-item>
+              <cat-menu-item>Item 2</cat-menu-item>
+              <cat-menu-item>Item 3</cat-menu-item>
+            </cat-menu>
+          </div>
+
+          <h3>Arrow Navigation Modes</h3>
+          <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
+            <!-- Vertical navigation (default) -->
+            <cat-menu
+              arrow-navigation="vertical"
+              trigger-label="Vertical navigation (default)"
+              trigger-icon="arrows-vertical"
+            >
+              <cat-menu-item icon="arrow-up-down-filled">Arrow Up/Down navigation</cat-menu-item>
+              <cat-menu-item icon="list-outlined">Default for dropdown menus</cat-menu-item>
+              <cat-menu-item icon="menu-outlined">Vertical orientation (ARIA)</cat-menu-item>
+              <cat-menu-item icon="keyboard-outlined">Standard menu pattern</cat-menu-item>
+            </cat-menu>
+
+            <!-- Horizontal navigation -->
+            <cat-menu
+              arrow-navigation="horizontal"
+              trigger-label="Horizontal navigation"
+              trigger-icon="arrows-horizontal"
+              placement="bottom-start"
+            >
+              <cat-menu-item icon="arrow-left-right-filled">Arrow Left/Right navigation</cat-menu-item>
+              <cat-menu-item icon="columns-outlined">Ideal for toolbar menus</cat-menu-item>
+              <cat-menu-item icon="layout-outlined">Horizontal orientation (ARIA)</cat-menu-item>
+              <cat-menu-item icon="keyboard-outlined">Alternative menu pattern</cat-menu-item>
+            </cat-menu>
           </div>
+        </section>
+
+        <section id="form">
+          <h2>Form</h2>
+          <form class="cat-form" action="." method="GET">
+            <cat-input name="field1" label="Field 1" value="value1"></cat-input>
+            <cat-textarea name="field2" label="Field 2" value="value2"></cat-textarea>
+            <cat-checkbox name="field3" label="Field 3" value="value3" checked></cat-checkbox>
+            <cat-toggle name="field4" label="Field 4" value="value4" checked></cat-toggle>
+            <cat-button submit="true">Submit</cat-button>
+          </form>
+        </section>
+
+        <section id="form-group" class="cat-form">
+          <h2>Form Group</h2>
+          <cat-form-group>
+            <cat-input label="Field 1" max-length="30"></cat-input>
+            <cat-input label="Field 2" required></cat-input>
+          </cat-form-group>
+
+          <h3>Alignment (horizontal)</h3>
+          <cat-form-group label-size="40%" horizontal>
+            <cat-input hint="This is a hint" required max-length="98">
+              <span slot="label">This is the <b>label</b></span>
+            </cat-input>
+            <cat-input hint="NO LABEL" required></cat-input>
+            <cat-input label="Label" label-hidden="true" hint="NO LABEL" required></cat-input>
+            <cat-input label="Field 1" hint="This is a hint"></cat-input>
+            <cat-input
+              label="Field 1"
+              hint="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+            ></cat-input>
+            <cat-input
+              label="This is a very long label with some more text"
+              required
+              hint="This is a hint"
+            ></cat-input>
+            <cat-textarea max-length="50" label="Label" hint="This is a hint"></cat-textarea>
+            <cat-select label="Field 3"></cat-select>
+            <cat-datepicker clearable="true" a11y-label="ARIA" label="Date picker"></cat-datepicker>
+          </cat-form-group>
+
+          <h3>Auto (more required)</h3>
+          <cat-form-group>
+            <cat-input label="Field 1"></cat-input>
+            <cat-input label="Field 2" required></cat-input>
+            <cat-textarea label="Field 3" required></cat-textarea>
+          </cat-form-group>
+
+          <h3>Auto (more optional)</h3>
+          <cat-form-group>
+            <cat-input label="Field 1"></cat-input>
+            <cat-input label="Field 2"></cat-input>
+            <cat-textarea label="Field 3" required></cat-textarea>
+          </cat-form-group>
+
+          <h3>None marker</h3>
+          <cat-form-group required-marker="none">
+            <cat-input label="Field 1"></cat-input>
+            <cat-input label="Field 2"></cat-input>
+            <cat-textarea label="Field 3" required></cat-textarea>
+          </cat-form-group>
+
+          <h3>Only mark optional</h3>
+          <cat-form-group required-marker="optional">
+            <cat-input label="Field 1"></cat-input>
+            <cat-input label="Field 2"></cat-input>
+            <cat-textarea label="Field 3" required></cat-textarea>
+          </cat-form-group>
+
+          <h3>Only mark required</h3>
+          <cat-form-group required-marker="required">
+            <cat-input label="Field 1"></cat-input>
+            <cat-input label="Field 2" required></cat-input>
+            <cat-textarea label="Field 3" required></cat-textarea>
+          </cat-form-group>
+
+          <h3>Dynamic field added</h3>
+          <cat-form-group id="form-group-1">
+            <cat-input id="cat-input-1" label="Field 1"></cat-input>
+            <cat-input label="Field 2" required></cat-input>
+          </cat-form-group>
+
           <script>
-            // --- init navigation
-            const navbar = document.getElementById('nav');
-            const scrollspy = VanillaScrollspy(navbar);
-            scrollspy.init();
+            let input = document.getElementById('cat-input-1');
+            input.addEventListener('input', () => {
+              let elementById = document.getElementById('time2');
+              elementById.value = '13:58';
+            });
+            const formElem = document.getElementById('form-group-1');
+            setTimeout(() => {
+              const htmlElement = document.createElement('cat-input');
+              htmlElement.setAttribute('label', 'Field 3');
+              formElem.appendChild(htmlElement);
+            }, 5000);
           </script>
-        </div>
-      </div>
+        </section>
+
+        <section id="icon">
+          <h2>Icon</h2>
+          <cat-icon icon="sparkle-filled"></cat-icon>
+
+          <h3>Color</h3>
+          <cat-icon icon="sparkle-filled" style="color: red"></cat-icon>
+          <cat-icon icon="sparkle-filled" style="color: blue"></cat-icon>
+          <cat-icon icon="sparkle-filled" style="color: green"></cat-icon>
+
+          <h3>Size</h3>
+          <cat-icon icon="sparkle-filled" size="xs"></cat-icon>
+          <cat-icon icon="sparkle-filled" size="s"></cat-icon>
+          <cat-icon icon="sparkle-filled" size="m"></cat-icon>
+          <cat-icon icon="sparkle-filled" size="l"></cat-icon>
+          <cat-icon icon="sparkle-filled" size="xl"></cat-icon>
+          <cat-icon icon="sparkle-filled" size="inline" style="font-size: 2.5rem"></cat-icon>
+
+          <h3>Ratio</h3>
+          <cat-icon icon="sp-grid-3-cols" style="--cat-icon-ratio: 2.5"></cat-icon>
+        </section>
 
-      <!-- CATALYST TEXT -->
-      <div id="tab-text-content" style="display: none">
-        <section id="typo" class="typography">
-          <!-- Sidebar -->
-          <aside>
-            <!-- Headings -->
-            <div class="cat-flex cat-flex-col cat-gap-s">
-              <h6 class="cat-muted cat-mb-l">Headline styles</h6>
-              <h1>Whereas recognition of the inherent dignity</h1>
-              <span class="cat-mono-s cat-muted">h1, .cat-h1</span>
-              <hr />
-              <h2>Whereas recognition of the inherent dignity</h2>
-              <span class="cat-mono-s cat-muted">h2, .cat-h2</span>
-              <hr />
-              <h3>Whereas recognition of the inherent dignity</h3>
-              <span class="cat-mono-s cat-muted">h3, .cat-h3</span>
-              <hr />
-              <h4>Whereas recognition of the inherent dignity</h4>
-              <span class="cat-mono-s cat-muted">h4, .cat-h4</span>
-              <hr />
-              <h5>Whereas recognition of the inherent dignity</h5>
-              <span class="cat-mono-s cat-muted">h5, .cat-h5</span>
-              <hr />
-              <h6>Whereas recognition of the inherent dignity</h6>
-              <span class="cat-mono-s cat-muted">h6, .cat-h6</span>
+        <section id="input" class="cat-form">
+          <h2>Input</h2>
+          <cat-input label="Label" hint="This is a hint!" placeholder="I am the placeholder">
+            <span slot="hint">This is another!</span>
+          </cat-input>
+          <cat-input label="Label" max-length="100">
+            <span slot="label">Priority Label</span>
+          </cat-input>
+          <cat-input label="Label" loading>
+            <span slot="label">Loading</span>
+          </cat-input>
+          <h3>Types</h3>
+          <cat-input label="Color" type="color"></cat-input>
+          <cat-input label="Color" type="color" clearable="true"></cat-input>
+          <cat-input label="Email" type="email"></cat-input>
+          <cat-input label="File" type="file" accept="image/png, image/jpeg" multiple></cat-input>
+          <cat-input label="Number" type="number"></cat-input>
+          <cat-input label="Password" type="password"></cat-input>
+          <cat-input label="Range" type="range"></cat-input>
+          <cat-input label="Search" type="search"></cat-input>
+          <cat-input label="Tel" type="tel"></cat-input>
+          <cat-input label="Text" type="text"></cat-input>
+          <cat-input label="Url" type="url"></cat-input>
+          <h3>Slotted Counter</h3>
+          <cat-input label="Custom counter">
+            <span slot="counter">Show any text here</span>
+          </cat-input>
+        </section>
+
+        <section id="datepicker" class="cat-form">
+          <h2>Datepicker</h2>
+          <cat-date label="New Datepicker"></cat-date>
+          <cat-time id="time2" label="New Timepicker" value="12:00"></cat-time>
+          <cat-datepicker mode="date">
+            <span slot="label">Priority Label</span>
+            <span slot="hint">Priority Hint</span>
+          </cat-datepicker>
+          <cat-datepicker mode="datetime" label="Datetime" disabled></cat-datepicker>
+          <cat-datepicker mode="time" label="Time"></cat-datepicker>
+          <cat-datepicker mode="week" label="Week"></cat-datepicker>
+          <cat-datepicker mode="daterange" label="Daterange"></cat-datepicker>
+          <h3>Inline Datepicker (new)</h3>
+          <cat-date-inline
+            value="2022-06-21"
+            label="test this is"
+            a11y-label="This is an Aria test"
+          ></cat-date-inline>
+          <h3>Inline Datepicker</h3>
+          <cat-card class="cat-inline-flex cat-flex-col cat-border">
+            <h4>Datetime</h4>
+            <cat-datepicker-inline value="2022-06-21T00:00:000Z"></cat-datepicker-inline>
+          </cat-card>
+          <h3>Nested Datepicker</h3>
+          <cat-dropdown>
+            <cat-button slot="trigger" color="primary" variant="filled">Button</cat-button>
+            <div slot="content" class="cat-p-m">
+              <cat-input></cat-input>
+              <cat-datepicker mode="date" label="Date"></cat-datepicker>
+              <cat-datepicker mode="date" label="Date"></cat-datepicker>
             </div>
-            <!-- Body styles -->
-            <div class="cat-flex cat-flex-col cat-gap-s">
-              <h6 class="cat-muted cat-mb-l">Body styles</h6>
-
-              <p class="cat-ellipsis-2 cat-lead">
-                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-                reputation. Everyone has the right to the protection of the law against such interference or attacks.
-              </p>
-              <span class="cat-mono-s cat-muted">Lead, .cat-lead</span>
-              <hr />
-              <p class="cat-ellipsis-2 cat-text-xl">
-                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-                reputation. Everyone has the right to the protection of the law against such interference or attacks.
-              </p>
-              <span class="cat-mono-s cat-muted">Body XL, .cat-text-xl</span>
-              <hr />
-              <p class="cat-ellipsis-2 cat-text-l">
-                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-                reputation. Everyone has the right to the protection of the law against such interference or attacks.
-              </p>
-              <span class="cat-mono-s cat-muted">Body L, .cat-text-l</span>
-              <hr />
-              <p class="cat-ellipsis-2">
-                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-                reputation. Everyone has the right to the protection of the law against such interference or attacks.
-              </p>
-              <span class="cat-mono-s cat-muted">Body M (Default), .cat-text-m</span>
-              <hr />
-              <p class="cat-ellipsis-2 cat-text-s">
-                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-                reputation. Everyone has the right to the protection of the law against such interference or attacks.
-              </p>
-              <span class="cat-mono-s cat-muted">Body S, .cat-text-s</span>
-              <hr />
-              <p class="cat-ellipsis-2 cat-text-xs">
-                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-                reputation. Everyone has the right to the protection of the law against such interference or attacks.
-              </p>
-              <span class="cat-mono-s cat-muted">Body XS, .cat-text-xs</span>
+          </cat-dropdown>
+        </section>
+
+        <section id="notification">
+          <h2>Notification</h2>
+          <cat-button id="notification-trigger">Show Notifications</cat-button>
+          <script type="module">
+            import {catNotificationService} from '/build/index.esm.js';
+
+            document.getElementById('notification-trigger').onclick = function () {
+              catNotificationService.show('Item saved', {
+                autoClose: false,
+                closeButton: true,
+                action: 'Show saved items'
+              });
+              catNotificationService.show('This is light', {
+                mode: 'light',
+                closeButton: true,
+                icon: 'globe-outlined',
+                action: 'Seite neu laden'
+              });
+              catNotificationService.show('Article was saved', {
+                action: 'Undo'
+              });
+              catNotificationService.show('Es scheint als hättest du keine Internetverbindung mehr', {
+                icon: 'globe-outlined',
+                action: 'Seite neu laden'
+              });
+            };
+          </script>
+        </section>
+
+        <section id="pagination">
+          <h2>Pagination</h2>
+          <cat-pagination page-count="10" compact></cat-pagination>
+          <br/>
+          <br/>
+          <cat-pagination page-count="10" size="s"></cat-pagination>
+          <br/>
+          <br/>
+          <cat-pagination page-count="10"></cat-pagination>
+          <br/>
+          <br/>
+          <cat-pagination page-count="10" variant="outlined"></cat-pagination>
+          <br/>
+          <br/>
+          <span>Change event demo (See console)</span>
+          <cat-pagination id="change-demo" page-count="10" variant="outlined" round></cat-pagination>
+          <script>
+            var paginationDemo = document.getElementById('change-demo');
+
+            paginationDemo.addEventListener('catChange', function (event) {
+              console.log('Page changed!', event.detail);
+            });
+          </script>
+        </section>
+
+        <section id="radio" class="cat-form">
+          <h2>Radio</h2>
+          <cat-radio label="Label"></cat-radio>
+
+          <h3>Group</h3>
+          <cat-radio-group a11y-label="Radio Group 1" label-left>
+            <cat-radio value="one" label="Option 1 - Group 1" hint="This is a hint" checked></cat-radio>
+            <cat-radio value="two" label="Option 2 - Group 1" hint="This is a hint"></cat-radio>
+            <cat-radio value="three" label="Option 3 - Group 1" hint="This is a hint" disabled></cat-radio>
+          </cat-radio-group>
+
+          <h3>State</h3>
+          <cat-radio label="Disabled" disabled></cat-radio>
+          <cat-radio label="Checked" checked></cat-radio>
+          <cat-radio label="Checked disabled" checked disabled></cat-radio>
+
+          <h3>Alignment</h3>
+          <cat-radio label="Label" label-left></cat-radio>
+
+          <h3>Slots</h3>
+          <cat-radio hint="This is a hint!">
+            <span slot="label">This is the <b>label</b></span>
+            <span slot="hint">This is another!</span>
+          </cat-radio>
+        </section>
+
+        <section id="scrollable">
+          <h2>Scrollable</h2>
+          <cat-scrollable style="max-height: 8rem; width: 25vw">
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+          </cat-scrollable>
+        </section>
+
+        <section id="segmented-control">
+          <h2>Segmented Control</h2>
+
+          <h3>Default</h3>
+          <cat-segmented-control>
+            <cat-segment value="one">Option 1</cat-segment>
+            <cat-segment value="two">Option 2</cat-segment>
+            <cat-segment value="three">Option 3 with overflowing content</cat-segment>
+          </cat-segmented-control>
+
+          <h3>Sizes</h3>
+          <cat-segmented-control size="xs">
+            <cat-segment value="one">XS Option 1</cat-segment>
+            <cat-segment value="two">XS Option 2</cat-segment>
+            <cat-segment value="three">XS Option 3</cat-segment>
+          </cat-segmented-control>
+          <br/>
+          <br/>
+          <cat-segmented-control size="s">
+            <cat-segment value="one">S Option 1</cat-segment>
+            <cat-segment value="two">S Option 2</cat-segment>
+            <cat-segment value="three">S Option 3</cat-segment>
+          </cat-segmented-control>
+          <br/>
+          <br/>
+          <cat-segmented-control size="m">
+            <cat-segment value="one">M Option 1</cat-segment>
+            <cat-segment value="two">M Option 2</cat-segment>
+            <cat-segment value="three">M Option 3</cat-segment>
+          </cat-segmented-control>
+          <br/>
+          <br/>
+          <cat-segmented-control size="l">
+            <cat-segment value="one">L Option 1</cat-segment>
+            <cat-segment value="two">L Option 2</cat-segment>
+            <cat-segment value="three">L Option 3</cat-segment>
+          </cat-segmented-control>
+          <br/>
+          <br/>
+          <cat-segmented-control size="xl">
+            <cat-segment value="one">XL Option 1</cat-segment>
+            <cat-segment value="two">XL Option 2</cat-segment>
+            <cat-segment value="three">XL Option 3</cat-segment>
+          </cat-segmented-control>
+
+          <h3>Disabled</h3>
+          <cat-segmented-control disabled>
+            <cat-segment value="one">Option 1</cat-segment>
+            <cat-segment value="two">Option 2</cat-segment>
+            <cat-segment value="three">Option 3</cat-segment>
+          </cat-segmented-control>
+          <br/>
+          <br/>
+          <cat-segmented-control>
+            <cat-segment value="one">Option 1</cat-segment>
+            <cat-segment value="two" disabled>Option 2</cat-segment>
+            <cat-segment value="three">Option 3</cat-segment>
+          </cat-segmented-control>
+
+          <h3>Icons</h3>
+          <cat-segmented-control>
+            <cat-segment value="home" icon="bookmark-filled">Option 1</cat-segment>
+            <cat-segment value="settings" icon="camera-filled">Option 2</cat-segment>
+            <cat-segment value="star" icon="star-filled">Option 3</cat-segment>
+          </cat-segmented-control>
+
+          <h3>Icon Only</h3>
+          <cat-segmented-control size="xs">
+            <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
+            <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
+            <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
+          </cat-segmented-control>
+          <br/>
+          <br/>
+          <cat-segmented-control size="s">
+            <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
+            <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
+            <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
+          </cat-segmented-control>
+          <br/>
+          <br/>
+          <cat-segmented-control size="m">
+            <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
+            <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
+            <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
+          </cat-segmented-control>
+          <br/>
+          <br/>
+          <cat-segmented-control size="l">
+            <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
+            <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
+            <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
+          </cat-segmented-control>
+          <br/>
+          <br/>
+          <cat-segmented-control size="xl">
+            <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
+            <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
+            <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
+          </cat-segmented-control>
+        </section>
+
+        <section id="select">
+          <h2>Select</h2>
+          <cat-select-demo></cat-select-demo>
+        </section>
+
+        <section id="skeleton">
+          <h2>Skeleton</h2>
+          <cat-skeleton></cat-skeleton>
+
+          <h3>Effect</h3>
+          <cat-skeleton effect="plain"></cat-skeleton>
+          <br/>
+          <cat-skeleton effect="sheen"></cat-skeleton>
+          <br/>
+          <cat-skeleton effect="pulse"></cat-skeleton>
+
+          <h3>Variant</h3>
+          <cat-skeleton variant="square"></cat-skeleton>
+          <cat-skeleton variant="circle"></cat-skeleton>
+          <cat-skeleton variant="rectangle"></cat-skeleton>
+          <cat-skeleton variant="head"></cat-skeleton>
+          <cat-skeleton variant="body"></cat-skeleton>
+        </section>
+
+        <section id="spinner">
+          <h2>Spinner</h2>
+          <cat-spinner></cat-spinner>
+
+          <h3>Color</h3>
+          <cat-spinner style="color: red"></cat-spinner>
+          <cat-spinner style="color: blue"></cat-spinner>
+          <cat-spinner style="color: green"></cat-spinner>
+
+          <h3>Size</h3>
+          <cat-spinner size="xs"></cat-spinner>
+          <cat-spinner size="s"></cat-spinner>
+          <cat-spinner size="m"></cat-spinner>
+          <cat-spinner size="l"></cat-spinner>
+          <cat-spinner size="xl"></cat-spinner>
+          <cat-spinner size="inline" style="font-size: 2.5rem"></cat-spinner>
+        </section>
+
+        <section id="tabs">
+          <h2>Tabs</h2>
+          <cat-tabs>
+            <cat-tab id="tab1" label="First"></cat-tab>
+            <cat-tab label="Second"></cat-tab>
+            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+          </cat-tabs>
+          <h3>Alignment</h3>
+          <cat-tabs tabs-align="center">
+            <cat-tab label="First"></cat-tab>
+            <cat-tab label="Second"></cat-tab>
+            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+          </cat-tabs>
+          <br/>
+          <br/>
+          <cat-tabs tabs-align="right">
+            <cat-tab label="First"></cat-tab>
+            <cat-tab label="Second"></cat-tab>
+            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+          </cat-tabs>
+          <br/>
+          <br/>
+          <cat-tabs tabs-align="justify" active-tab="second">
+            <cat-tab label="First" deactivate></cat-tab>
+            <cat-tab label="Second" id="second"></cat-tab>
+            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+          </cat-tabs>
+          <script>
+            const tab = document.querySelector('#tab1');
+            setInterval(() => {
+              tab.deactivated = true;
+            }, 5000);
+          </script>
+          <h3>More</h3>
+          <cat-tabs>
+            <cat-tab id="tab1" label="First"></cat-tab>
+            <cat-tab label="Second"></cat-tab>
+            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+            <cat-dropdown slot="more">
+              <cat-button class="cat-tab cat-ml-auto" slot="trigger" variant="text">More</cat-button>
+              <nav slot="content">
+                <ul>
+                  <cat-button class="cat-nav-item">Nav item 1</cat-button>
+                  <cat-button class="cat-nav-item">Nav item 1</cat-button>
+                </ul>
+              </nav>
+            </cat-dropdown>
+          </cat-tabs>
+
+          <cat-tabs adaptive active-tab-always-visible tabs-align="justify">
+            <cat-tab id="tab2" label="First"></cat-tab>
+            <cat-tab label="Second"></cat-tab>
+            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+            <cat-tab label="Fourth Fourth" icon="sparkle-filled"></cat-tab>
+            <cat-tab label="Fifth" icon="sparkle-filled"></cat-tab>
+            <cat-tab label="Sixth" icon="sparkle-filled"></cat-tab>
+            <cat-tab label="Seventh Seventh" icon="sparkle-filled"></cat-tab>
+            <cat-tab label="Eighth" icon="sparkle-filled"></cat-tab>
+            <cat-tab sticky label="Ninth" icon="sparkle-filled"></cat-tab>
+            <cat-tab label="Tenth" icon="sparkle-filled"></cat-tab>
+          </cat-tabs>
+        </section>
+
+        <section id="tags">
+          <h2>Tags</h2>
+          <cat-tag label="Tag Input" placeholder="Placeholder" hint="this is a hint"></cat-tag>
+          <cat-tag label="Tag Input" placeholder="Placeholder" disabled="true"></cat-tag>
+        </section>
+
+        <section id="textarea">
+          <h2>Textarea</h2>
+          <cat-textarea label="Label" max-length="100"></cat-textarea>
+          <h3>Slotted Counter</h3>
+          <cat-textarea label="Custom counter">
+            <span slot="counter">Show any text here</span>
+          </cat-textarea>
+          <h3>Counter w/o label</h3>
+          <cat-textarea max-length="100"></cat-textarea>
+        </section>
+
+        <section id="toggle" class="cat-form">
+          <h2>Toggle</h2>
+          <cat-toggle label="Toggle" hint="This is a hint!" label-left style="width: 500px">
+            <span slot="hint">This is another!</span>
+          </cat-toggle>
+          <cat-toggle label="Toggle"></cat-toggle>
+          <cat-toggle><label slot="label">Slotted Label</label></cat-toggle>
+          <cat-toggle label="Disabled" disabled></cat-toggle>
+          <cat-toggle label="Checked" checked></cat-toggle>
+          <cat-toggle label="Checked disabled" checked disabled></cat-toggle>
+          <cat-toggle label="Not priority label"><label slot="label">Priority Label</label></cat-toggle>
+          <cat-toggle label="Hidden label" label-hidden="true"></cat-toggle>
+        </section>
+
+        <section id="tooltip">
+          <h2>Tooltip</h2>
+          <cat-tooltip content="This is a tooltip">
+            <cat-button>Button</cat-button>
+          </cat-tooltip>
+          <cat-tooltip>
+            <cat-button>Button</cat-button>
+            <div slot="content">
+              <h2>Tooltip</h2>
+              <p>This is a <b>fancy</b> tooltip<br/>with some more lines.</p>
             </div>
-          </aside>
-          <!-- Example typesetting -->
-          <article class="cat-article example">
-            <h6 class="cat-muted cat-mb-l">Example article</h6>
-            <h1>Typesetting test</h1>
-            <p class="cat-lead">
-              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-              et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-              Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
-              amet.
-            </p>
-            <figure>
-              <img
-                src="https://cdn.sanity.io/images/599r6htc/localized/10e55cde1be89fb32aa3d7414fa3cd83b0859a51-3264x1836.jpg"
-                alt=""
-              />
-            </figure>
-            <h2>Dolor Vero</h2>
-            <h3>Consetetur sadipscing elitr</h3>
-            <p>
-              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
-              sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-              nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
-              accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
-              ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
-              consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
-              qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor
-              sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
-              aliquam erat volutpat.
-            </p>
-            <p>
-              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
-              sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
-            </p>
-            <h2>Lorem Ipsum</h2>
-            <p>
-              Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
-              ea commodo consequat.
-            </p>
-            <h3>Vulputate velit esse</h3>
-            <p>
-              Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
-              eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
-              zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
-              option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
-            </p>
-            <ol>
-              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-              <li>Integer nec odio. Praesent libero.</li>
-              <li>Sed cursus ante dapibus diam. Sed nisi.</li>
-              <li>Nulla quis sem at nibh elementum imperdiet.</li>
-              <li>Duis sagittis ipsum. Praesent mauris.</li>
-              <li>Fusce nec tellus sed augue semper porta.</li>
-              <li>Mauris massa. Vestibulum lacinia arcu eget nulla.</li>
-              <li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
-              <li>Curabitur sodales ligula in libero.</li>
-              <li>Sed dignissim lacinia nunc. Curabitur tortor.</li>
-            </ol>
-            <hr />
-            <h2>What does all of that mean for us?</h2>
-            <p>
-              Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
-              amet, consetetur sadipscing elitr.
-            </p>
-            <blockquote>
-              "The only way to do great work is to love what you do."
-              <span>– Steve Jobs</span>
-            </blockquote>
-            <h3>Understanding Employee Engagement</h3>
-            <figure>
-              <iframe
-                width="100%"
-                height="350px"
-                src="https://www.youtube-nocookie.com/embed/2t2BBU0gdO0?controls=0"
-                title="YouTube video player"
-                frameborder="0"
-                allow="
+          </cat-tooltip>
+          <h3>Size</h3>
+          <cat-tooltip size="s" content="This is a small tooltip">
+            <p class="cat-inline-flex">Hover Me (S)</p>
+          </cat-tooltip>
+          <br/>
+          <cat-tooltip size="s" round="true" content="This is a small tooltip">
+            <p class="cat-inline-flex">Hover Me (S round)</p>
+          </cat-tooltip>
+          <br/>
+          <cat-tooltip size="m" content="This is a regular tooltip">
+            <p class="cat-inline-flex">Hover Me (M)</p>
+          </cat-tooltip>
+          <br/>
+          <cat-tooltip size="m" round="true" content="This is a regular tooltip">
+            <p class="cat-inline-flex">Hover Me (M round)</p>
+          </cat-tooltip>
+          <br/>
+          <cat-tooltip size="l" content="This is a large tooltip">
+            <p class="cat-inline-flex">Hover Me (L)</p>
+          </cat-tooltip>
+          <br/>
+          <cat-tooltip size="l" round="true" content="This is a large tooltip">
+            <p class="cat-inline-flex">Hover Me (L round)</p>
+          </cat-tooltip>
+          <h3>Round</h3>
+          <cat-tooltip round="true" content="This is a round tooltip">
+            <p class="cat-inline-flex">Hover Me (round)</p>
+          </cat-tooltip>
+          <h3>Async</h3>
+          <cat-tooltip id="async-tooltip" placement="bottom-end">
+            <p class="cat-inline-flex">Hover Me (async)</p>
+          </cat-tooltip>
+          <script>
+            const tooltipElem = document.getElementById('async-tooltip');
+            setInterval(() => {
+              tooltipElem.content = 'This is an async tooltip';
+            }, 1000);
+          </script>
+        </section>
+      </div>
+      <script>
+        // --- init navigation
+        const navbar = document.getElementById('nav');
+        const scrollspy = VanillaScrollspy(navbar);
+        scrollspy.init();
+      </script>
+    </div>
+  </div>
+
+  <!-- CATALYST TEXT -->
+  <div id="tab-text-content" style="display: none">
+    <section id="typo" class="typography">
+      <!-- Sidebar -->
+      <aside>
+        <!-- Headings -->
+        <div class="cat-flex cat-flex-col cat-gap-s">
+          <h6 class="cat-muted cat-mb-l">Headline styles</h6>
+          <h1>Whereas recognition of the inherent dignity</h1>
+          <span class="cat-mono-s cat-muted">h1, .cat-h1</span>
+          <hr/>
+          <h2>Whereas recognition of the inherent dignity</h2>
+          <span class="cat-mono-s cat-muted">h2, .cat-h2</span>
+          <hr/>
+          <h3>Whereas recognition of the inherent dignity</h3>
+          <span class="cat-mono-s cat-muted">h3, .cat-h3</span>
+          <hr/>
+          <h4>Whereas recognition of the inherent dignity</h4>
+          <span class="cat-mono-s cat-muted">h4, .cat-h4</span>
+          <hr/>
+          <h5>Whereas recognition of the inherent dignity</h5>
+          <span class="cat-mono-s cat-muted">h5, .cat-h5</span>
+          <hr/>
+          <h6>Whereas recognition of the inherent dignity</h6>
+          <span class="cat-mono-s cat-muted">h6, .cat-h6</span>
+        </div>
+        <!-- Body styles -->
+        <div class="cat-flex cat-flex-col cat-gap-s">
+          <h6 class="cat-muted cat-mb-l">Body styles</h6>
+
+          <p class="cat-ellipsis-2 cat-lead">
+            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+            reputation. Everyone has the right to the protection of the law against such interference or attacks.
+          </p>
+          <span class="cat-mono-s cat-muted">Lead, .cat-lead</span>
+          <hr/>
+          <p class="cat-ellipsis-2 cat-text-xl">
+            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+            reputation. Everyone has the right to the protection of the law against such interference or attacks.
+          </p>
+          <span class="cat-mono-s cat-muted">Body XL, .cat-text-xl</span>
+          <hr/>
+          <p class="cat-ellipsis-2 cat-text-l">
+            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+            reputation. Everyone has the right to the protection of the law against such interference or attacks.
+          </p>
+          <span class="cat-mono-s cat-muted">Body L, .cat-text-l</span>
+          <hr/>
+          <p class="cat-ellipsis-2">
+            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+            reputation. Everyone has the right to the protection of the law against such interference or attacks.
+          </p>
+          <span class="cat-mono-s cat-muted">Body M (Default), .cat-text-m</span>
+          <hr/>
+          <p class="cat-ellipsis-2 cat-text-s">
+            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+            reputation. Everyone has the right to the protection of the law against such interference or attacks.
+          </p>
+          <span class="cat-mono-s cat-muted">Body S, .cat-text-s</span>
+          <hr/>
+          <p class="cat-ellipsis-2 cat-text-xs">
+            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+            reputation. Everyone has the right to the protection of the law against such interference or attacks.
+          </p>
+          <span class="cat-mono-s cat-muted">Body XS, .cat-text-xs</span>
+        </div>
+      </aside>
+      <!-- Example typesetting -->
+      <article class="cat-article example">
+        <h6 class="cat-muted cat-mb-l">Example article</h6>
+        <h1>Typesetting test</h1>
+        <p class="cat-lead">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+          et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+          Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+          amet.
+        </p>
+        <figure>
+          <img
+            src="https://cdn.sanity.io/images/599r6htc/localized/10e55cde1be89fb32aa3d7414fa3cd83b0859a51-3264x1836.jpg"
+            alt=""
+          />
+        </figure>
+        <h2>Dolor Vero</h2>
+        <h3>Consetetur sadipscing elitr</h3>
+        <p>
+          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+          accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+          ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
+          consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
+          qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor
+          sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
+          aliquam erat volutpat.
+        </p>
+        <p>
+          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
+        </p>
+        <h2>Lorem Ipsum</h2>
+        <p>
+          Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+          ea commodo consequat.
+        </p>
+        <h3>Vulputate velit esse</h3>
+        <p>
+          Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
+          eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
+          zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
+          option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
+        </p>
+        <ol>
+          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li>Integer nec odio. Praesent libero.</li>
+          <li>Sed cursus ante dapibus diam. Sed nisi.</li>
+          <li>Nulla quis sem at nibh elementum imperdiet.</li>
+          <li>Duis sagittis ipsum. Praesent mauris.</li>
+          <li>Fusce nec tellus sed augue semper porta.</li>
+          <li>Mauris massa. Vestibulum lacinia arcu eget nulla.</li>
+          <li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
+          <li>Curabitur sodales ligula in libero.</li>
+          <li>Sed dignissim lacinia nunc. Curabitur tortor.</li>
+        </ol>
+        <hr/>
+        <h2>What does all of that mean for us?</h2>
+        <p>
+          Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+          amet, consetetur sadipscing elitr.
+        </p>
+        <blockquote>
+          "The only way to do great work is to love what you do."
+          <span>– Steve Jobs</span>
+        </blockquote>
+        <h3>Understanding Employee Engagement</h3>
+        <figure>
+          <iframe
+            width="100%"
+            height="350px"
+            src="https://www.youtube-nocookie.com/embed/2t2BBU0gdO0?controls=0"
+            title="YouTube video player"
+            frameborder="0"
+            allow="
                   accelerometer;
                   autoplay;
                   clipboard-write;
@@ -1560,23 +1701,39 @@ <h3>Understanding Employee Engagement</h3>
                   picture-in-picture;
                   web-share;
                 "
-                allowfullscreen
-              ></iframe>
-            </figure>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Employee engagement is crucial for an
-              organization's growth and productivity. It's more than just job satisfaction; it's the enthusiasm and
-              involvement an employee has towards their work and the organization's mission.
-            </p>
-
-            <h4>The Benefits of High Engagement</h4>
-            <p>
-              Engaged employees tend to be more productive, have higher job satisfaction, and are more likely to stay
-              with their current employer. They contribute positively to the organizational culture and foster
-              collaboration amongst peers.
-            </p>
-
-            <h5>Key Benefits Include:</h5>
+            allowfullscreen
+          ></iframe>
+        </figure>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Employee engagement is crucial for an
+          organization's growth and productivity. It's more than just job satisfaction; it's the enthusiasm and
+          involvement an employee has towards their work and the organization's mission.
+        </p>
+
+        <h4>The Benefits of High Engagement</h4>
+        <p>
+          Engaged employees tend to be more productive, have higher job satisfaction, and are more likely to stay
+          with their current employer. They contribute positively to the organizational culture and foster
+          collaboration amongst peers.
+        </p>
+
+        <h5>Key Benefits Include:</h5>
+        <ul>
+          <li>Increased productivity and performance</li>
+          <li>Higher retention rates</li>
+          <li>Improved workplace morale</li>
+          <li>Enhanced company reputation</li>
+          <li>Higher customer satisfaction</li>
+        </ul>
+
+        <dl>
+          <dt>Employee Engagement</dt>
+          <dd>
+            Refers to the enthusiasm and involvement an employee has towards their work and the organization's
+            mission.
+          </dd>
+          <dt>Benefits of High Engagement</dt>
+          <dd>
             <ul>
               <li>Increased productivity and performance</li>
               <li>Higher retention rates</li>
@@ -1584,148 +1741,132 @@ <h5>Key Benefits Include:</h5>
               <li>Enhanced company reputation</li>
               <li>Higher customer satisfaction</li>
             </ul>
-
-            <dl>
-              <dt>Employee Engagement</dt>
-              <dd>
-                Refers to the enthusiasm and involvement an employee has towards their work and the organization's
-                mission.
-              </dd>
-              <dt>Benefits of High Engagement</dt>
-              <dd>
-                <ul>
-                  <li>Increased productivity and performance</li>
-                  <li>Higher retention rates</li>
-                  <li>Improved workplace morale</li>
-                  <li>Enhanced company reputation</li>
-                  <li>Higher customer satisfaction</li>
-                </ul>
-              </dd>
-              <dt>Strategies to Enhance Engagement</dt>
-              <dd>
-                Building a strong engagement strategy requires a deep understanding of the employees' needs,
-                aspirations, and concerns. Regular feedback, transparent communication, and consistent recognition play
-                pivotal roles.
-              </dd>
-            </dl>
-
-            <h4>Strategies to Enhance Engagement</h4>
-            <p>
-              Building a strong engagement strategy requires a deep understanding of the employees' needs, aspirations,
-              and concerns. Regular feedback, transparent communication, and consistent recognition play pivotal roles
-              in this aspect.
-            </p>
-
-            <h5>Tips for Effective Engagement:</h5>
-            <ul>
-              <li>Regular one-on-one meetings</li>
-              <li>Provide growth opportunities</li>
-              <li>Recognize and reward achievements</li>
-              <li>Promote work-life balance</li>
-              <li>Encourage team collaborations and events</li>
-            </ul>
-
-            <h3>Measuring Employee Engagement</h3>
-            <p>
-              Understanding the level of engagement in an organization is essential for its continual improvement.
-              Surveys, feedback sessions, and monitoring key performance indicators can provide valuable insights.
-            </p>
-          </article>
-        </section>
-      </div>
-
-      <!-- CATALYST ICONS -->
-      <div id="tab-icon-content" style="display: none">
-        <iframe
-          src="https://haiilo.github.io/catalyst-icons/"
-          frameborder="0"
-          scrolling="no"
-          width="100%"
-          height="26500px"
-        ></iframe>
-      </div>
-
-      <!-- Switches -->
-      <div class="switches">
-        <cat-button size="s" class="cat-elevation-1" id="toggleSS3">Switch to Source Sans 3</cat-button>
-        <cat-button size="s" class="cat-elevation-1" id="toggleTheme">Use custom theme</cat-button>
-      </div>
-
-      <script>
-        document.getElementById('tabs-top').addEventListener('catChange', function (e) {
-          document.getElementById('tab-comp-content').style.display = e.detail.index === 0 ? 'block' : 'none';
-          document.getElementById('tab-text-content').style.display = e.detail.index === 1 ? 'block' : 'none';
-          document.getElementById('tab-icon-content').style.display = e.detail.index === 2 ? 'block' : 'none';
-        });
-      </script>
-
-      <script>
-        const body = document.body;
-        const font = document.getElementById('toggleSS3');
-        font.addEventListener('click', function () {
-          if (body.classList.contains('ss3')) {
-            body.classList.remove('ss3');
-            font.innerHTML = 'Switch to Source Sans 3';
-          } else {
-            body.classList.add('ss3');
-            font.innerHTML = 'Switch to Lato';
-          }
-        });
-        const theme = document.getElementById('toggleTheme');
-        theme.addEventListener('click', function () {
-          if (body.classList.contains('custom-theme')) {
-            body.classList.remove('custom-theme');
-            theme.innerHTML = 'Use custom theme';
-          } else {
-            body.classList.add('custom-theme');
-            theme.innerHTML = 'Use default theme';
+          </dd>
+          <dt>Strategies to Enhance Engagement</dt>
+          <dd>
+            Building a strong engagement strategy requires a deep understanding of the employees' needs,
+            aspirations, and concerns. Regular feedback, transparent communication, and consistent recognition play
+            pivotal roles.
+          </dd>
+        </dl>
+
+        <h4>Strategies to Enhance Engagement</h4>
+        <p>
+          Building a strong engagement strategy requires a deep understanding of the employees' needs, aspirations,
+          and concerns. Regular feedback, transparent communication, and consistent recognition play pivotal roles
+          in this aspect.
+        </p>
+
+        <h5>Tips for Effective Engagement:</h5>
+        <ul>
+          <li>Regular one-on-one meetings</li>
+          <li>Provide growth opportunities</li>
+          <li>Recognize and reward achievements</li>
+          <li>Promote work-life balance</li>
+          <li>Encourage team collaborations and events</li>
+        </ul>
+
+        <h3>Measuring Employee Engagement</h3>
+        <p>
+          Understanding the level of engagement in an organization is essential for its continual improvement.
+          Surveys, feedback sessions, and monitoring key performance indicators can provide valuable insights.
+        </p>
+      </article>
+    </section>
+  </div>
+
+  <!-- CATALYST ICONS -->
+  <div id="tab-icon-content" style="display: none">
+    <iframe
+      src="https://haiilo.github.io/catalyst-icons/"
+      frameborder="0"
+      scrolling="no"
+      width="100%"
+      height="26500px"
+    ></iframe>
+  </div>
+
+  <!-- Switches -->
+  <div class="switches">
+    <cat-button size="s" class="cat-elevation-1" id="toggleSS3">Switch to Source Sans 3</cat-button>
+    <cat-button size="s" class="cat-elevation-1" id="toggleTheme">Use custom theme</cat-button>
+  </div>
+
+  <script>
+    document.getElementById('tabs-top').addEventListener('catChange', function (e) {
+      document.getElementById('tab-comp-content').style.display = e.detail.index === 0 ? 'block' : 'none';
+      document.getElementById('tab-text-content').style.display = e.detail.index === 1 ? 'block' : 'none';
+      document.getElementById('tab-icon-content').style.display = e.detail.index === 2 ? 'block' : 'none';
+    });
+  </script>
+
+  <script>
+    const body = document.body;
+    const font = document.getElementById('toggleSS3');
+    font.addEventListener('click', function () {
+      if (body.classList.contains('ss3')) {
+        body.classList.remove('ss3');
+        font.innerHTML = 'Switch to Source Sans 3';
+      } else {
+        body.classList.add('ss3');
+        font.innerHTML = 'Switch to Lato';
+      }
+    });
+    const theme = document.getElementById('toggleTheme');
+    theme.addEventListener('click', function () {
+      if (body.classList.contains('custom-theme')) {
+        body.classList.remove('custom-theme');
+        theme.innerHTML = 'Use custom theme';
+      } else {
+        body.classList.add('custom-theme');
+        theme.innerHTML = 'Use default theme';
+      }
+    });
+  </script>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const headings = [
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        '.cat-h1',
+        '.cat-h2',
+        '.cat-h3',
+        '.cat-h4',
+        '.cat-h5',
+        '.cat-h6'
+      ];
+
+      headings.forEach(selector => {
+        document.querySelectorAll(selector).forEach(element => {
+          const nextSibling = element.nextElementSibling;
+
+          if (nextSibling) {
+            // For the first condition
+            if (headings.some(heading => nextSibling.matches(heading))) {
+              element.classList.add('type-space-small');
+            }
+
+            // For the second condition
+            const secondConditionSelectors = [
+              ...['h3', 'h4', 'h5', 'h6', '.cat-h3', '.cat-h4', '.cat-h5', '.cat-h6'].filter(sel =>
+                element.matches(sel)
+              ),
+              ...(element.matches('p') && nextSibling.matches('p') ? ['p'] : [])
+            ];
+
+            if (secondConditionSelectors.length && ['ul', 'ol', 'p'].some(sel => nextSibling.matches(sel))) {
+              element.classList.add('type-space-medium');
+            }
           }
         });
-      </script>
-
-      <script>
-        document.addEventListener('DOMContentLoaded', function () {
-          const headings = [
-            'h1',
-            'h2',
-            'h3',
-            'h4',
-            'h5',
-            'h6',
-            '.cat-h1',
-            '.cat-h2',
-            '.cat-h3',
-            '.cat-h4',
-            '.cat-h5',
-            '.cat-h6'
-          ];
-
-          headings.forEach(selector => {
-            document.querySelectorAll(selector).forEach(element => {
-              const nextSibling = element.nextElementSibling;
-
-              if (nextSibling) {
-                // For the first condition
-                if (headings.some(heading => nextSibling.matches(heading))) {
-                  element.classList.add('type-space-small');
-                }
-
-                // For the second condition
-                const secondConditionSelectors = [
-                  ...['h3', 'h4', 'h5', 'h6', '.cat-h3', '.cat-h4', '.cat-h5', '.cat-h6'].filter(sel =>
-                    element.matches(sel)
-                  ),
-                  ...(element.matches('p') && nextSibling.matches('p') ? ['p'] : [])
-                ];
-
-                if (secondConditionSelectors.length && ['ul', 'ol', 'p'].some(sel => nextSibling.matches(sel))) {
-                  element.classList.add('type-space-medium');
-                }
-              }
-            });
-          });
-        });
-      </script>
-    </div>
-  </body>
+      });
+    });
+  </script>
+</div>
+</body>
 </html>
diff --git a/react/src/components/stencil-generated/index.ts b/react/src/components/stencil-generated/index.ts
index b1632e9a..0f4cdd91 100644
--- a/react/src/components/stencil-generated/index.ts
+++ b/react/src/components/stencil-generated/index.ts
@@ -28,6 +28,8 @@ export const CatPagination = /*@__PURE__*/createReactComponent<JSX.CatPagination
 export const CatRadio = /*@__PURE__*/createReactComponent<JSX.CatRadio, HTMLCatRadioElement>('cat-radio');
 export const CatRadioGroup = /*@__PURE__*/createReactComponent<JSX.CatRadioGroup, HTMLCatRadioGroupElement>('cat-radio-group');
 export const CatScrollable = /*@__PURE__*/createReactComponent<JSX.CatScrollable, HTMLCatScrollableElement>('cat-scrollable');
+export const CatSegment = /*@__PURE__*/createReactComponent<JSX.CatSegment, HTMLCatSegmentElement>('cat-segment');
+export const CatSegmentedControl = /*@__PURE__*/createReactComponent<JSX.CatSegmentedControl, HTMLCatSegmentedControlElement>('cat-segmented-control');
 export const CatSelect = /*@__PURE__*/createReactComponent<JSX.CatSelect, HTMLCatSelectElement>('cat-select');
 export const CatSelectDemo = /*@__PURE__*/createReactComponent<JSX.CatSelectDemo, HTMLCatSelectDemoElement>('cat-select-demo');
 export const CatSkeleton = /*@__PURE__*/createReactComponent<JSX.CatSkeleton, HTMLCatSkeletonElement>('cat-skeleton');

From 20ace6c57fe790ca731beb8d90354819de119c89 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Mon, 10 Aug 2026 08:50:37 +0200
Subject: [PATCH 09/42] chore: fix prettier

---
 .../components/cat-segment/cat-segment.scss   |    7 +-
 core/src/index.html                           | 3617 ++++++++---------
 2 files changed, 1807 insertions(+), 1817 deletions(-)

diff --git a/core/src/components/cat-segment/cat-segment.scss b/core/src/components/cat-segment/cat-segment.scss
index 63fc77d3..089836b4 100644
--- a/core/src/components/cat-segment/cat-segment.scss
+++ b/core/src/components/cat-segment/cat-segment.scss
@@ -34,9 +34,10 @@ $segment-heights: (
   white-space: nowrap;
   color: cat-token('color.theme.secondary.text');
   border-radius: cat-border-radius('l');
-  transition: background cat-token('time.transition.s') linear,
-  box-shadow cat-token('time.transition.s') linear,
-  color cat-token('time.transition.s') linear;
+  transition:
+    background cat-token('time.transition.s') linear,
+    box-shadow cat-token('time.transition.s') linear,
+    color cat-token('time.transition.s') linear;
 
   &.cat-segment-active {
     background: cat-token('color.ui.background.surface');
diff --git a/core/src/index.html b/core/src/index.html
index d988e2d3..ac1d07b9 100644
--- a/core/src/index.html
+++ b/core/src/index.html
@@ -1,725 +1,886 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"/>
-  <title>Catalyst | StencilJS</title>
-  <script type="module" src="/build/catalyst.esm.js"></script>
-  <script type="module">
-    import {ci} from '/build/assets/icons/js/icons.object.js';
-    import {catI18nRegistry, catIconRegistry} from '/build/index.esm.js';
-
-    /**
-     * WARNING: Keep in sync with ./index.cdn.js
-     */
-    catIconRegistry.addIcons(ci);
-    catI18nRegistry.set({
-      'datepicker.prevYear': 'Previous year',
-      'datepicker.nextYear': 'Next year',
-      'datepicker.prevMonth': 'Previous month',
-      'datepicker.nextMonth': 'Next month',
-      'datepicker.arrowKeys': 'Arrow keys can navigate dates.',
-      'datepicker.today': 'Today',
-      'datepicker.change': 'Change date',
-      'datepicker.choose': 'Choose date',
-      'timepicker.change': 'Change time',
-      'timepicker.choose': 'Choose time',
-      // 'datepicker.nextYear': 'Year',
-      'datepicker.year': 'Year',
-      'datepicker.month': 'Month',
-      'datepicker.hour': 'Hour',
-      'datepicker.minute': 'Minute',
-      'datepicker.scroll': 'Scroll to increment',
-      'datepicker.toggle': 'Click to toggle',
-      'datepicker.clear': 'Clear',
-      'dialog.close': 'Close',
-      'input.clear': 'Clear',
-      'input.optional': 'Optional',
-      'input.required': 'Required',
-      'input.showPassword': 'Show password',
-      'input.hidePassword': 'Hide password',
-      'notification.dismiss': 'Dismiss',
-      'pagination.ariaLabel': 'Pagination',
-      'pagination.prev': 'Previous',
-      'pagination.page': 'Go to page {{page}}',
-      'pagination.next': 'Next',
-      'select.close': 'Close',
-      'select.deselect': 'Deselect',
-      'select.empty': 'No items',
-      'select.open': 'Open',
-      'tabs.more': 'More'
-    });
-  </script>
-  <script nomodule src="/build/catalyst.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vanillajs-scrollspy@2.2.0/dist/vanillajs-scrollspy.min.js"></script>
-  <link rel="stylesheet" href="/build/catalyst.css"/>
-  <style>
-    html,
-    body {
-      background: #fff;
-    }
-
-    body {
-      padding: 2rem 4rem;
-    }
-
-    body.ss3 {
-      --cat-font-family-base: 'Source Sans 3';
-      --cat-font-family-head: 'Source Sans 3';
-    }
-
-    body.custom-theme {
-      --cat-primary-bg: 91, 94, 219;
-      --cat-primary-bg-hover: 78, 81, 191;
-      --cat-primary-bg-active: 65, 67, 159;
-
-      --cat-primary-bg-outlined: 253, 212, 212;
-
-      --cat-primary-fill: 255, 255, 255;
-      --cat-primary-fill-hover: 255, 255, 255;
-      --cat-primary-fill-active: 255, 255, 255;
-
-      --cat-primary-text: 91, 94, 219;
-      --cat-primary-text-hover: 78, 81, 191;
-      --cat-primary-text-active: 65, 67, 159;
-    }
-
-    .wrapper {
-      display: flex;
-      flex-direction: row;
-      gap: 8rem;
-    }
-
-    .toolbar {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      background: #fff;
-      border-bottom: 1px solid #ebecf0;
-      position: sticky;
-      top: 0;
-      z-index: 3;
-    }
-
-    .tabs {
-      box-shadow: none;
-    }
-
-    #nav {
-      align-self: flex-start;
-      position: sticky;
-      top: 8rem;
-      width: 300px;
-      margin: 4rem 0;
-      border-right: 1px solid #ebecf0;
-    }
-
-    #nav ul {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-
-    #nav .active {
-      font-weight: bold;
-    }
-
-    .content {
-      max-width: 600px;
-      padding: 2rem 0;
-    }
-
-    .canvas-fake {
-      background: #f2f4f7;
-      border-radius: 0.5rem;
-      padding: 3.5rem;
-    }
-
-    section {
-      flex: 0 1 auto;
-      padding: 5rem 0;
-    }
-
-    section:not(:last-of-type) {
-      border-bottom: 1px solid rgba(0, 0, 0, 10%);
-    }
-
-    section > h2:not(:first-child),
-    section > h3:not(:first-child) {
-      margin-top: 2rem;
-    }
-
-    section > h2:not(:last-child),
-    section > h3:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-
-    section.typography {
-      display: flex;
-      gap: 5rem;
-    }
-
-    /* Text page stylings */
-
-    section.typography .example {
-      max-width: 600px;
-      margin: 0 auto;
-    }
-
-    figure img {
-      max-width: 100%;
-    }
-
-    section.typography aside {
-      display: flex;
-      flex-direction: column;
-      gap: 7rem;
-      max-width: 450px;
-      box-sizing: content-box;
-      padding-right: 5rem;
-      border-right: 1px solid #ebecf0;
-    }
-
-    .switches {
-      position: fixed;
-      bottom: 1rem;
-      right: 1rem;
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-      align-items: end;
-    }
-
-    .switches cat-button {
-      width: fit-content;
-    }
-  </style>
-</head>
-<body>
-<div class="body">
-  <h1>Catalyst Web Components</h1>
-
-  <!-- TOP TABS & BUTTONS -->
-  <div class="toolbar">
-    <cat-tabs class="tabs" active-tab="tab-comp" id="tabs-top">
-      <cat-tab label="Components" id="tab-comp"></cat-tab>
-      <cat-tab label="Text" id="tab-text"></cat-tab>
-      <cat-tab label="Icons" id="tab-icon"></cat-tab>
-    </cat-tabs>
-    <div class="cat-flex cat-items-center cat-gap-s">
-      <cat-button
-        url="https://github.com/haiilo/catalyst"
-        url-target="_blank"
-        size="s"
-        class="cat-elevation-1"
-        icon="github"
-      >
-        View on GitHub
-      </cat-button>
-      <cat-button
-        url="https://app.slack.com/client/T03BH7BHD/C02JFK9BM0F"
-        url-target="_blank"
-        size="s"
-        class="cat-elevation-1"
-        icon="slack"
-      >
-        Join us on Slack
-      </cat-button>
-    </div>
-  </div>
-
-  <!-- CATALYST COMPONENTS -->
-  <div id="tab-comp-content">
-    <div class="wrapper">
-      <nav id="nav">
-        <ul>
-          <li><a href="#alert">Alert</a></li>
-          <li><a href="#avatar">Avatar</a></li>
-          <li><a href="#badge">Badge</a></li>
-          <li><a href="#button">Button</a></li>
-          <li><a href="#group-button">Group Button</a></li>
-          <li><a href="#card">Card</a></li>
-          <li><a href="#checkbox">Checkbox</a></li>
-          <li><a href="#divider">Divider</a></li>
-          <li><a href="#dropdown">Dropdown</a></li>
-          <li><a href="#menu">Menu</a></li>
-          <li><a href="#form">Form</a></li>
-          <li><a href="#form-group">Form Group</a></li>
-          <li><a href="#icon">Icon</a></li>
-          <li><a href="#input">Input</a></li>
-          <li><a href="#datepicker">Datepicker</a></li>
-          <li><a href="#notification">Notification</a></li>
-          <li><a href="#pagination">Pagination</a></li>
-          <li><a href="#radio">Radio</a></li>
-          <li><a href="#scrollable">Scrollable</a></li>
-          <li><a href="#segmented-control">Segmented Control</a></li>
-          <li><a href="#select">Select</a></li>
-          <li><a href="#skeleton">Skeleton</a></li>
-          <li><a href="#spinner">Spinner</a></li>
-          <li><a href="#tabs">Tabs</a></li>
-          <li><a href="#tags">Tags</a></li>
-          <li><a href="#textarea">Textarea</a></li>
-          <li><a href="#toggle">Toggle</a></li>
-          <li><a href="#tooltip">Tooltip</a></li>
-        </ul>
-      </nav>
-      <div class="content">
-        <section id="alert" class="cat-article">
-          <h2>Alert</h2>
-          <cat-alert tabindex="3">
-            <p>
-              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-              labore et <a href="https://google.de">dolore magna</a> aliquyam erat, sed diam voluptua.
-            </p>
-          </cat-alert>
-          <h3>Color</h3>
-          <cat-alert color="secondary">
-            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-          </cat-alert>
-          <cat-alert color="info">
-            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-          </cat-alert>
-          <cat-alert color="success">
-            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-          </cat-alert>
-          <cat-alert color="warning">
-            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-          </cat-alert>
-          <cat-alert color="danger">
-            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-          </cat-alert>
-          <h3>Variations</h3>
-          <cat-alert color="primary" no-icon>
-            <p>
-              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-              labore et dolore magna aliquyam erat, sed diam voluptua.
-            </p>
-          </cat-alert>
-          <cat-alert color="secondary" icon="cross-circle-filled">
-            <h5 class="cat-strong">Lorem ipsum dolor sit amet.</h5>
-            Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-          </cat-alert>
-        </section>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>Catalyst | StencilJS</title>
+    <script type="module" src="/build/catalyst.esm.js"></script>
+    <script type="module">
+      import { ci } from '/build/assets/icons/js/icons.object.js';
+      import { catI18nRegistry, catIconRegistry } from '/build/index.esm.js';
+
+      /**
+       * WARNING: Keep in sync with ./index.cdn.js
+       */
+      catIconRegistry.addIcons(ci);
+      catI18nRegistry.set({
+        'datepicker.prevYear': 'Previous year',
+        'datepicker.nextYear': 'Next year',
+        'datepicker.prevMonth': 'Previous month',
+        'datepicker.nextMonth': 'Next month',
+        'datepicker.arrowKeys': 'Arrow keys can navigate dates.',
+        'datepicker.today': 'Today',
+        'datepicker.change': 'Change date',
+        'datepicker.choose': 'Choose date',
+        'timepicker.change': 'Change time',
+        'timepicker.choose': 'Choose time',
+        // 'datepicker.nextYear': 'Year',
+        'datepicker.year': 'Year',
+        'datepicker.month': 'Month',
+        'datepicker.hour': 'Hour',
+        'datepicker.minute': 'Minute',
+        'datepicker.scroll': 'Scroll to increment',
+        'datepicker.toggle': 'Click to toggle',
+        'datepicker.clear': 'Clear',
+        'dialog.close': 'Close',
+        'input.clear': 'Clear',
+        'input.optional': 'Optional',
+        'input.required': 'Required',
+        'input.showPassword': 'Show password',
+        'input.hidePassword': 'Hide password',
+        'notification.dismiss': 'Dismiss',
+        'pagination.ariaLabel': 'Pagination',
+        'pagination.prev': 'Previous',
+        'pagination.page': 'Go to page {{page}}',
+        'pagination.next': 'Next',
+        'select.close': 'Close',
+        'select.deselect': 'Deselect',
+        'select.empty': 'No items',
+        'select.open': 'Open',
+        'tabs.more': 'More'
+      });
+    </script>
+    <script nomodule src="/build/catalyst.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanillajs-scrollspy@2.2.0/dist/vanillajs-scrollspy.min.js"></script>
+    <link rel="stylesheet" href="/build/catalyst.css" />
+    <style>
+      html,
+      body {
+        background: #fff;
+      }
 
-        <section id="avatar">
-          <h2>Avatar</h2>
-          <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
-          <h3>Variations</h3>
-          <cat-avatar label="John Doe" size="xs" icon="sparkle-filled"></cat-avatar>
-          <cat-avatar label="John Doe" size="s" round></cat-avatar>
-          <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
-          <cat-avatar
-            label="John Doe"
-            size="l"
-            round
-            url="http://google.com"
-            src="invalidSrc"
-            icon="sparkle-filled"
-          ></cat-avatar>
-          <cat-avatar label="John Doe" size="xl" initials="Init"></cat-avatar>
-        </section>
+      body {
+        padding: 2rem 4rem;
+      }
 
-        <section id="badge">
-          <h2>Badge</h2>
-          <cat-badge>Default</cat-badge>
-
-          <h3>Variant</h3>
-          <cat-badge variant="filled">Filled</cat-badge>
-          <cat-badge variant="outlined">Outlined</cat-badge>
-
-          <h3>Color</h3>
-          <cat-badge icon="sparkle-filled" color="primary">Primary</cat-badge>
-          <cat-badge icon="sparkle-filled" color="secondary">Secondary</cat-badge>
-          <cat-badge icon="sparkle-filled" color="info">Info</cat-badge>
-          <cat-badge icon="sparkle-filled" color="success">Success</cat-badge>
-          <cat-badge icon="sparkle-filled" color="warning">Warning</cat-badge>
-          <cat-badge icon="sparkle-filled" color="danger">Danger</cat-badge>
-          <br/>
-          <br/>
-          <cat-badge icon="sparkle-filled" icon-right color="primary">Primary</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right color="secondary">Secondary</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right color="info">Info</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right color="success">Success</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right color="warning">Warning</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right color="danger">Danger</cat-badge>
-
-          <h3>Size</h3>
-          <cat-badge icon="sparkle-filled" size="xs">Size XS</cat-badge>
-          <cat-badge icon="sparkle-filled" size="s">Size S</cat-badge>
-          <cat-badge icon="sparkle-filled" size="m">Size M</cat-badge>
-          <cat-badge icon="sparkle-filled" size="l">Size L</cat-badge>
-          <cat-badge icon="sparkle-filled" size="xl">Size XL</cat-badge>
-          <br/>
-          <br/>
-          <cat-badge icon="sparkle-filled" icon-right size="xs">Size XS</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right size="s">Size S</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right size="m">Size M</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right size="l">Size L</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right size="xl">Size XL</cat-badge>
-          <br/>
-          <br/>
-          <cat-badge icon="sparkle-filled" icon-only="xs" size="xs">sdfdsf sdfsdf</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-only="s" size="s">sdfdsf sdfsdf</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-only="m" size="m">sdfdsf sdfsdf</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-only="l" size="l">sdfdsf sdfsdf</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-only="xl" size="xl">sdfdsf sdfsdf</cat-badge>
-
-          <h3>Round</h3>
-          <cat-badge round="true">Round</cat-badge>
-          <cat-badge round="true" color="danger" size="xs"></cat-badge>
-
-          <h3>Pulse</h3>
-          <cat-badge pulse="true">Pulse</cat-badge>
-          <cat-badge pulse="true" variant="outlined">Pulse</cat-badge>
-          <cat-badge pulse="true" round="true" color="danger" size="xs"></cat-badge>
-
-          <h3>Layout</h3>
-          <cat-badge
-          >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-            labore et dolore magna aliquyam erat, sed diam voluptua.
-          </cat-badge>
-        </section>
+      body.ss3 {
+        --cat-font-family-base: 'Source Sans 3';
+        --cat-font-family-head: 'Source Sans 3';
+      }
 
-        <section id="button">
-          <h2>Button</h2>
-          <cat-button test-id="data-test">Button</cat-button>
-
-          <h3>Color & Variant</h3>
-          <cat-button icon="sparkle-filled" variant="filled" color="primary">Primary</cat-button>
-          <cat-button icon="sparkle-filled" variant="outlined" color="primary">Primary</cat-button>
-          <cat-button icon="sparkle-filled" variant="text" color="primary">Primary</cat-button>
-          <cat-button icon="sparkle-filled" variant="link" color="primary">Primary</cat-button>
-          <br/><br/>
-          <cat-button icon="sparkle-filled" variant="filled" color="secondary">Secondary</cat-button>
-          <cat-button icon="sparkle-filled" variant="outlined" color="secondary">Secondary</cat-button>
-          <cat-button icon="sparkle-filled" variant="text" color="secondary">Secondary</cat-button>
-          <cat-button icon="sparkle-filled" variant="link" color="secondary">Secondary</cat-button>
-          <br/><br/>
-          <cat-button icon="sparkle-filled" variant="filled" color="info">Info</cat-button>
-          <cat-button icon="sparkle-filled" variant="outlined" color="info">Info</cat-button>
-          <cat-button icon="sparkle-filled" variant="text" color="info">Info</cat-button>
-          <cat-button icon="sparkle-filled" variant="link" color="info">Info</cat-button>
-          <br/><br/>
-          <cat-button icon="sparkle-filled" variant="filled" color="success">Success</cat-button>
-          <cat-button icon="sparkle-filled" variant="outlined" color="success">Success</cat-button>
-          <cat-button icon="sparkle-filled" variant="text" color="success">Success</cat-button>
-          <cat-button icon="sparkle-filled" variant="link" color="success">Success</cat-button>
-          <br/><br/>
-          <cat-button icon="sparkle-filled" variant="filled" color="warning">Warning</cat-button>
-          <cat-button icon="sparkle-filled" variant="outlined" color="warning">Warning</cat-button>
-          <cat-button icon="sparkle-filled" variant="text" color="warning">Warning</cat-button>
-          <cat-button icon="sparkle-filled" variant="link" color="warning">Warning</cat-button>
-          <br/><br/>
-          <cat-button icon="sparkle-filled" variant="filled" color="danger">Danger</cat-button>
-          <cat-button icon="sparkle-filled" variant="outlined" color="danger">Danger</cat-button>
-          <cat-button icon="sparkle-filled" variant="text" color="danger">Danger</cat-button>
-          <cat-button icon="sparkle-filled" variant="link" color="danger">Danger</cat-button>
-
-          <h3>Size</h3>
-          <cat-button size="xs" icon="sparkle-filled">Size XS</cat-button>
-          <cat-button size="s" icon="sparkle-filled">Size S</cat-button>
-          <cat-button size="m" icon="sparkle-filled">Size M</cat-button>
-          <cat-button size="l" icon="sparkle-filled">Size L</cat-button>
-          <cat-button size="xl" icon="sparkle-filled">Size XL</cat-button>
-
-          <h3>Icons</h3>
-          <cat-button icon="sparkle-filled">Prefix</cat-button>
-          <cat-button icon="sparkle-filled" icon-suffix="true">Suffix</cat-button>
-          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA">Suffix</cat-button>
-
-          <h3>Icon buttons</h3>
-          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xs"></cat-button>
-          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="s"></cat-button>
-          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="m"></cat-button>
-          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="l"></cat-button>
-          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xl"></cat-button>
-
-          <h3>Icons (Responsive)</h3>
-          <cat-button icon="sparkle-filled" icon-only="xs" a11y-label="ARIA">xs</cat-button>
-          <cat-button icon="sparkle-filled" icon-only="s" a11y-label="ARIA">s</cat-button>
-          <cat-button icon="sparkle-filled" icon-only="m" a11y-label="ARIA">m</cat-button>
-          <cat-button icon="sparkle-filled" icon-only="l" a11y-label="ARIA">l</cat-button>
-          <cat-button icon="sparkle-filled" icon-only="xl" a11y-label="ARIA">xl</cat-button>
-
-          <h3>Links</h3>
-          <cat-button url="http://www.google.de">Google</cat-button>
-          <cat-button url="http://www.google.de" url-target="_blank">Google (ext.)</cat-button>
-
-          <div class="cat-mt-s">
-            <cat-button inline="true" variant="link" url="http://www.google.de">Link 1
-            </cat-button
-            >
-            <cat-button inline="true" variant="link" url="http://www.google.de">Link 2</cat-button>
-          </div>
+      body.custom-theme {
+        --cat-primary-bg: 91, 94, 219;
+        --cat-primary-bg-hover: 78, 81, 191;
+        --cat-primary-bg-active: 65, 67, 159;
 
-          <h3>Active</h3>
-          <cat-button icon="sparkle-filled" active="true" variant="filled" color="primary">Primary</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="primary">Primary</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="text" color="primary">Primary</cat-button>
-          <br/><br/>
-          <cat-button icon="sparkle-filled" active="true" variant="filled" color="secondary">Secondary</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="secondary"
-          >Secondary
-          </cat-button
-          >
-          <cat-button icon="sparkle-filled" active="true" variant="text" color="secondary">Secondary</cat-button>
-          <br/><br/>
-          <cat-button icon="sparkle-filled" active="true" variant="filled" color="info">Info</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="info">Info</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="text" color="info">Info</cat-button>
-          <br/><br/>
-          <cat-button icon="sparkle-filled" active="true" variant="filled" color="success">Success</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="success">Success</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="text" color="success">Success</cat-button>
-          <br/><br/>
-          <cat-button icon="sparkle-filled" active="true" variant="filled" color="warning">Warning</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="warning">Warning</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="text" color="warning">Warning</cat-button>
-          <br/><br/>
-          <cat-button icon="sparkle-filled" active="true" variant="filled" color="danger">Danger</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="danger">Danger</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="text" color="danger">Danger</cat-button>
-
-          <h3>Disabled</h3>
-          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="primary">Primary</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="primary">Primary</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="primary">Primary</cat-button>
-          <br/><br/>
-          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="secondary"
-          >Secondary
-          </cat-button
-          >
-          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="secondary"
-          >Secondary
-          </cat-button
-          >
-          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="secondary">Secondary</cat-button>
-          <br/><br/>
-          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="info">Info</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="info">Info</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="info">Info</cat-button>
-          <br/><br/>
-          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="success">Success</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="success">Success</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="success">Success</cat-button>
-          <br/><br/>
-          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="warning">Warning</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="warning">Warning</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="warning">Warning</cat-button>
-          <br/><br/>
-          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="danger">Danger</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="danger">Danger</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="danger">Danger</cat-button>
-
-          <h3>Loading</h3>
-          <cat-button loading="true" variant="filled" color="primary">Primary</cat-button>
-          <cat-button loading="true" variant="outlined" color="primary">Primary</cat-button>
-          <cat-button loading="true" variant="text" color="primary">Primary</cat-button>
-          <br/><br/>
-          <cat-button loading="true" variant="filled" color="secondary">Secondary</cat-button>
-          <cat-button loading="true" variant="outlined" color="secondary">Secondary</cat-button>
-          <cat-button loading="true" variant="text" color="secondary">Secondary</cat-button>
-          <br/><br/>
-          <cat-button loading="true" variant="filled" color="info">Info</cat-button>
-          <cat-button loading="true" variant="outlined" color="info">Info</cat-button>
-          <cat-button loading="true" variant="text" color="info">Info</cat-button>
-          <br/><br/>
-          <cat-button loading="true" variant="filled" color="success">Success</cat-button>
-          <cat-button loading="true" variant="outlined" color="success">Success</cat-button>
-          <cat-button loading="true" variant="text" color="success">Success</cat-button>
-          <br/><br/>
-          <cat-button loading="true" variant="filled" color="warning">Warning</cat-button>
-          <cat-button loading="true" variant="outlined" color="warning">Warning</cat-button>
-          <cat-button loading="true" variant="text" color="warning">Warning</cat-button>
-          <br/><br/>
-          <cat-button loading="true" variant="filled" color="danger">Danger</cat-button>
-          <cat-button loading="true" variant="outlined" color="danger">Danger</cat-button>
-          <cat-button loading="true" variant="text" color="danger">Danger</cat-button>
-
-          <h3>Layout</h3>
-          <div style="width: 200px; border: 1px solid gray">
-            <cat-button icon="sparkle-filled">Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
-            <br/>
-            <cat-button icon="sparkle-filled" no-ellipsis>Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
-            <br/>
-            <cat-button icon="sparkle-filled" class="cat-block">Block</cat-button>
-            <cat-button icon="sparkle-filled" class="cat-block cat-text-left">Block (left)</cat-button>
-            <cat-button icon="sparkle-filled" class="cat-block cat-text-right">Block (right)</cat-button>
-          </div>
-        </section>
+        --cat-primary-bg-outlined: 253, 212, 212;
 
-        <section id="group-button">
-          <h2>Group button</h2>
-
-          <div style="display: flex; flex-direction: column; gap: 8px">
-            <cat-button-group a11y-label="Group button outlined">
-              <cat-button>Left</cat-button>
-              <cat-button>Middle</cat-button>
-              <cat-button>Middle1</cat-button>
-              <cat-button>Right</cat-button>
-            </cat-button-group>
-
-            <cat-button-group a11y-label="Group button filled">
-              <cat-button variant="filled">Left</cat-button>
-              <cat-button variant="filled">Middle</cat-button>
-              <cat-button variant="filled">Right</cat-button>
-            </cat-button-group>
-
-            <cat-button-group a11y-label="Group button text">
-              <cat-button variant="text">Left</cat-button>
-              <cat-button variant="text">Middle</cat-button>
-              <cat-button variant="text">Right</cat-button>
-            </cat-button-group>
-          </div>
-        </section>
+        --cat-primary-fill: 255, 255, 255;
+        --cat-primary-fill-hover: 255, 255, 255;
+        --cat-primary-fill-active: 255, 255, 255;
 
-        <section id="card">
-          <h2>Card</h2>
+        --cat-primary-text: 91, 94, 219;
+        --cat-primary-text-hover: 78, 81, 191;
+        --cat-primary-text-active: 65, 67, 159;
+      }
 
-          <div class="canvas-fake">
-            <cat-card>
-              <h3>Lorem ipsum dolor sit amet</h3>
-              <p>
-                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                labore et dolore magna aliquyam erat, sed diam voluptua.
-              </p>
-              <p>
-                At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
-                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
-                diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-              </p>
-            </cat-card>
-          </div>
-          <h3>Navigation</h3>
-          <div class="canvas-fake">
-            <cat-card>
-              <nav>
-                <ul>
-                  <li class="cat-nav-head">Headline</li>
-                  <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
-                  <li>
-                    <cat-button class="cat-nav-item" color="primary">Nav item 1</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" active>Nav item 2</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" color="warning">Nav item 3</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" disabled>Nav item 4</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item">Nav item 5 (long)</cat-button>
-                  </li>
-                  <li class="cat-hr"></li>
-                  <li>
-                    <cat-button class="cat-nav-item" color="danger" onclick="console.log(6)" active
-                    >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f
-                    </cat-button>
-                  </li>
-                </ul>
-                <hr/>
-                <ul>
-                  <li>
-                    <cat-button class="cat-nav-item" variant="outlined" color="secondary" onclick="console.log(3)"
-                    >Nav item 3
-                    </cat-button
-                    >
-                  </li>
-                </ul>
-              </nav>
-            </cat-card>
-          </div>
-        </section>
+      .wrapper {
+        display: flex;
+        flex-direction: row;
+        gap: 8rem;
+      }
 
-        <section id="checkbox" class="cat-form">
-          <h2>Checkbox</h2>
-          <cat-checkbox label="Label"></cat-checkbox>
-
-          <h3>State</h3>
-          <cat-checkbox label="Disabled" disabled></cat-checkbox>
-          <cat-checkbox label="Checked" checked></cat-checkbox>
-          <cat-checkbox label="Checked disabled" checked disabled></cat-checkbox>
-          <cat-checkbox label="Indeterminate" indeterminate="true" id="indeterminate"></cat-checkbox>
-          <cat-button id="indeterminate-true">Set inteterminate true</cat-button>
-          <cat-button id="indeterminate-false">Set inteterminate false</cat-button>
-          <cat-button id="value-true">Set value true</cat-button>
-          <cat-button id="value-false">Set value false</cat-button>
-          <script>
-            document.querySelector('#indeterminate-true').addEventListener('click', () => {
-              document.querySelector('#indeterminate').indeterminate = true;
-            });
-            document.querySelector('#indeterminate-false').addEventListener('click', () => {
-              document.querySelector('#indeterminate').indeterminate = false;
-            });
-            document.querySelector('#value-true').addEventListener('click', () => {
-              document.querySelector('#indeterminate').checked = true;
-            });
-            document.querySelector('#value-false').addEventListener('click', () => {
-              document.querySelector('#indeterminate').checked = false;
-            });
-          </script>
+      .toolbar {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        background: #fff;
+        border-bottom: 1px solid #ebecf0;
+        position: sticky;
+        top: 0;
+        z-index: 3;
+      }
 
-          <h3>Alignment</h3>
-          <cat-checkbox label="Label" label-left></cat-checkbox>
+      .tabs {
+        box-shadow: none;
+      }
 
-          <h3>Slots</h3>
-          <cat-checkbox hint="This is a hint!">
-            <span slot="label">This is the <b>label</b></span>
-            <span slot="hint">This is another!</span>
-          </cat-checkbox>
-        </section>
+      #nav {
+        align-self: flex-start;
+        position: sticky;
+        top: 8rem;
+        width: 300px;
+        margin: 4rem 0;
+        border-right: 1px solid #ebecf0;
+      }
 
-        <section id="divider">
-          <h2>Divider</h2>
-        </section>
+      #nav ul {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+      }
 
-        <section id="dropdown">
-          <h2>Dropdown</h2>
-
-          <div class="cat-flex cat-item-center cat-gap-s cat-mb-m">
-            <!-- Wide dropdown -->
-            <cat-dropdown justify focus-trap="true">
-              <cat-button slot="trigger" color="primary" variant="filled"
-              >Button with very long content so that it is very wide
-              </cat-button
-              >
-              <nav slot="content">
-                <ul>
+      #nav .active {
+        font-weight: bold;
+      }
+
+      .content {
+        max-width: 600px;
+        padding: 2rem 0;
+      }
+
+      .canvas-fake {
+        background: #f2f4f7;
+        border-radius: 0.5rem;
+        padding: 3.5rem;
+      }
+
+      section {
+        flex: 0 1 auto;
+        padding: 5rem 0;
+      }
+
+      section:not(:last-of-type) {
+        border-bottom: 1px solid rgba(0, 0, 0, 10%);
+      }
+
+      section > h2:not(:first-child),
+      section > h3:not(:first-child) {
+        margin-top: 2rem;
+      }
+
+      section > h2:not(:last-child),
+      section > h3:not(:last-child) {
+        margin-bottom: 1rem;
+      }
+
+      section.typography {
+        display: flex;
+        gap: 5rem;
+      }
+
+      /* Text page stylings */
+
+      section.typography .example {
+        max-width: 600px;
+        margin: 0 auto;
+      }
+
+      figure img {
+        max-width: 100%;
+      }
+
+      section.typography aside {
+        display: flex;
+        flex-direction: column;
+        gap: 7rem;
+        max-width: 450px;
+        box-sizing: content-box;
+        padding-right: 5rem;
+        border-right: 1px solid #ebecf0;
+      }
+
+      .switches {
+        position: fixed;
+        bottom: 1rem;
+        right: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        align-items: end;
+      }
+
+      .switches cat-button {
+        width: fit-content;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="body">
+      <h1>Catalyst Web Components</h1>
+
+      <!-- TOP TABS & BUTTONS -->
+      <div class="toolbar">
+        <cat-tabs class="tabs" active-tab="tab-comp" id="tabs-top">
+          <cat-tab label="Components" id="tab-comp"></cat-tab>
+          <cat-tab label="Text" id="tab-text"></cat-tab>
+          <cat-tab label="Icons" id="tab-icon"></cat-tab>
+        </cat-tabs>
+        <div class="cat-flex cat-items-center cat-gap-s">
+          <cat-button
+            url="https://github.com/haiilo/catalyst"
+            url-target="_blank"
+            size="s"
+            class="cat-elevation-1"
+            icon="github"
+          >
+            View on GitHub
+          </cat-button>
+          <cat-button
+            url="https://app.slack.com/client/T03BH7BHD/C02JFK9BM0F"
+            url-target="_blank"
+            size="s"
+            class="cat-elevation-1"
+            icon="slack"
+          >
+            Join us on Slack
+          </cat-button>
+        </div>
+      </div>
+
+      <!-- CATALYST COMPONENTS -->
+      <div id="tab-comp-content">
+        <div class="wrapper">
+          <nav id="nav">
+            <ul>
+              <li><a href="#alert">Alert</a></li>
+              <li><a href="#avatar">Avatar</a></li>
+              <li><a href="#badge">Badge</a></li>
+              <li><a href="#button">Button</a></li>
+              <li><a href="#group-button">Group Button</a></li>
+              <li><a href="#card">Card</a></li>
+              <li><a href="#checkbox">Checkbox</a></li>
+              <li><a href="#divider">Divider</a></li>
+              <li><a href="#dropdown">Dropdown</a></li>
+              <li><a href="#menu">Menu</a></li>
+              <li><a href="#form">Form</a></li>
+              <li><a href="#form-group">Form Group</a></li>
+              <li><a href="#icon">Icon</a></li>
+              <li><a href="#input">Input</a></li>
+              <li><a href="#datepicker">Datepicker</a></li>
+              <li><a href="#notification">Notification</a></li>
+              <li><a href="#pagination">Pagination</a></li>
+              <li><a href="#radio">Radio</a></li>
+              <li><a href="#scrollable">Scrollable</a></li>
+              <li><a href="#segmented-control">Segmented Control</a></li>
+              <li><a href="#select">Select</a></li>
+              <li><a href="#skeleton">Skeleton</a></li>
+              <li><a href="#spinner">Spinner</a></li>
+              <li><a href="#tabs">Tabs</a></li>
+              <li><a href="#tags">Tags</a></li>
+              <li><a href="#textarea">Textarea</a></li>
+              <li><a href="#toggle">Toggle</a></li>
+              <li><a href="#tooltip">Tooltip</a></li>
+            </ul>
+          </nav>
+          <div class="content">
+            <section id="alert" class="cat-article">
+              <h2>Alert</h2>
+              <cat-alert tabindex="3">
+                <p>
+                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                  labore et <a href="https://google.de">dolore magna</a> aliquyam erat, sed diam voluptua.
+                </p>
+              </cat-alert>
+              <h3>Color</h3>
+              <cat-alert color="secondary">
+                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+              </cat-alert>
+              <cat-alert color="info">
+                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+              </cat-alert>
+              <cat-alert color="success">
+                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+              </cat-alert>
+              <cat-alert color="warning">
+                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+              </cat-alert>
+              <cat-alert color="danger">
+                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+              </cat-alert>
+              <h3>Variations</h3>
+              <cat-alert color="primary" no-icon>
+                <p>
+                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                  labore et dolore magna aliquyam erat, sed diam voluptua.
+                </p>
+              </cat-alert>
+              <cat-alert color="secondary" icon="cross-circle-filled">
+                <h5 class="cat-strong">Lorem ipsum dolor sit amet.</h5>
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+              </cat-alert>
+            </section>
+
+            <section id="avatar">
+              <h2>Avatar</h2>
+              <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
+              <h3>Variations</h3>
+              <cat-avatar label="John Doe" size="xs" icon="sparkle-filled"></cat-avatar>
+              <cat-avatar label="John Doe" size="s" round></cat-avatar>
+              <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
+              <cat-avatar
+                label="John Doe"
+                size="l"
+                round
+                url="http://google.com"
+                src="invalidSrc"
+                icon="sparkle-filled"
+              ></cat-avatar>
+              <cat-avatar label="John Doe" size="xl" initials="Init"></cat-avatar>
+            </section>
+
+            <section id="badge">
+              <h2>Badge</h2>
+              <cat-badge>Default</cat-badge>
+
+              <h3>Variant</h3>
+              <cat-badge variant="filled">Filled</cat-badge>
+              <cat-badge variant="outlined">Outlined</cat-badge>
+
+              <h3>Color</h3>
+              <cat-badge icon="sparkle-filled" color="primary">Primary</cat-badge>
+              <cat-badge icon="sparkle-filled" color="secondary">Secondary</cat-badge>
+              <cat-badge icon="sparkle-filled" color="info">Info</cat-badge>
+              <cat-badge icon="sparkle-filled" color="success">Success</cat-badge>
+              <cat-badge icon="sparkle-filled" color="warning">Warning</cat-badge>
+              <cat-badge icon="sparkle-filled" color="danger">Danger</cat-badge>
+              <br />
+              <br />
+              <cat-badge icon="sparkle-filled" icon-right color="primary">Primary</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right color="secondary">Secondary</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right color="info">Info</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right color="success">Success</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right color="warning">Warning</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right color="danger">Danger</cat-badge>
+
+              <h3>Size</h3>
+              <cat-badge icon="sparkle-filled" size="xs">Size XS</cat-badge>
+              <cat-badge icon="sparkle-filled" size="s">Size S</cat-badge>
+              <cat-badge icon="sparkle-filled" size="m">Size M</cat-badge>
+              <cat-badge icon="sparkle-filled" size="l">Size L</cat-badge>
+              <cat-badge icon="sparkle-filled" size="xl">Size XL</cat-badge>
+              <br />
+              <br />
+              <cat-badge icon="sparkle-filled" icon-right size="xs">Size XS</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right size="s">Size S</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right size="m">Size M</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right size="l">Size L</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right size="xl">Size XL</cat-badge>
+              <br />
+              <br />
+              <cat-badge icon="sparkle-filled" icon-only="xs" size="xs">sdfdsf sdfsdf</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-only="s" size="s">sdfdsf sdfsdf</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-only="m" size="m">sdfdsf sdfsdf</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-only="l" size="l">sdfdsf sdfsdf</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-only="xl" size="xl">sdfdsf sdfsdf</cat-badge>
+
+              <h3>Round</h3>
+              <cat-badge round="true">Round</cat-badge>
+              <cat-badge round="true" color="danger" size="xs"></cat-badge>
+
+              <h3>Pulse</h3>
+              <cat-badge pulse="true">Pulse</cat-badge>
+              <cat-badge pulse="true" variant="outlined">Pulse</cat-badge>
+              <cat-badge pulse="true" round="true" color="danger" size="xs"></cat-badge>
+
+              <h3>Layout</h3>
+              <cat-badge
+                >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                labore et dolore magna aliquyam erat, sed diam voluptua.
+              </cat-badge>
+            </section>
+
+            <section id="button">
+              <h2>Button</h2>
+              <cat-button test-id="data-test">Button</cat-button>
+
+              <h3>Color & Variant</h3>
+              <cat-button icon="sparkle-filled" variant="filled" color="primary">Primary</cat-button>
+              <cat-button icon="sparkle-filled" variant="outlined" color="primary">Primary</cat-button>
+              <cat-button icon="sparkle-filled" variant="text" color="primary">Primary</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="primary">Primary</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" variant="filled" color="secondary">Secondary</cat-button>
+              <cat-button icon="sparkle-filled" variant="outlined" color="secondary">Secondary</cat-button>
+              <cat-button icon="sparkle-filled" variant="text" color="secondary">Secondary</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="secondary">Secondary</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" variant="filled" color="info">Info</cat-button>
+              <cat-button icon="sparkle-filled" variant="outlined" color="info">Info</cat-button>
+              <cat-button icon="sparkle-filled" variant="text" color="info">Info</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="info">Info</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" variant="filled" color="success">Success</cat-button>
+              <cat-button icon="sparkle-filled" variant="outlined" color="success">Success</cat-button>
+              <cat-button icon="sparkle-filled" variant="text" color="success">Success</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="success">Success</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" variant="filled" color="warning">Warning</cat-button>
+              <cat-button icon="sparkle-filled" variant="outlined" color="warning">Warning</cat-button>
+              <cat-button icon="sparkle-filled" variant="text" color="warning">Warning</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="warning">Warning</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" variant="filled" color="danger">Danger</cat-button>
+              <cat-button icon="sparkle-filled" variant="outlined" color="danger">Danger</cat-button>
+              <cat-button icon="sparkle-filled" variant="text" color="danger">Danger</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="danger">Danger</cat-button>
+
+              <h3>Size</h3>
+              <cat-button size="xs" icon="sparkle-filled">Size XS</cat-button>
+              <cat-button size="s" icon="sparkle-filled">Size S</cat-button>
+              <cat-button size="m" icon="sparkle-filled">Size M</cat-button>
+              <cat-button size="l" icon="sparkle-filled">Size L</cat-button>
+              <cat-button size="xl" icon="sparkle-filled">Size XL</cat-button>
+
+              <h3>Icons</h3>
+              <cat-button icon="sparkle-filled">Prefix</cat-button>
+              <cat-button icon="sparkle-filled" icon-suffix="true">Suffix</cat-button>
+              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA">Suffix</cat-button>
+
+              <h3>Icon buttons</h3>
+              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xs"></cat-button>
+              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="s"></cat-button>
+              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="m"></cat-button>
+              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="l"></cat-button>
+              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xl"></cat-button>
+
+              <h3>Icons (Responsive)</h3>
+              <cat-button icon="sparkle-filled" icon-only="xs" a11y-label="ARIA">xs</cat-button>
+              <cat-button icon="sparkle-filled" icon-only="s" a11y-label="ARIA">s</cat-button>
+              <cat-button icon="sparkle-filled" icon-only="m" a11y-label="ARIA">m</cat-button>
+              <cat-button icon="sparkle-filled" icon-only="l" a11y-label="ARIA">l</cat-button>
+              <cat-button icon="sparkle-filled" icon-only="xl" a11y-label="ARIA">xl</cat-button>
+
+              <h3>Links</h3>
+              <cat-button url="http://www.google.de">Google</cat-button>
+              <cat-button url="http://www.google.de" url-target="_blank">Google (ext.)</cat-button>
+
+              <div class="cat-mt-s">
+                <cat-button inline="true" variant="link" url="http://www.google.de">Link 1 </cat-button>
+                <cat-button inline="true" variant="link" url="http://www.google.de">Link 2</cat-button>
+              </div>
+
+              <h3>Active</h3>
+              <cat-button icon="sparkle-filled" active="true" variant="filled" color="primary">Primary</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="primary">Primary</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="text" color="primary">Primary</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" active="true" variant="filled" color="secondary">Secondary</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="secondary"
+                >Secondary
+              </cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="text" color="secondary">Secondary</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" active="true" variant="filled" color="info">Info</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="info">Info</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="text" color="info">Info</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" active="true" variant="filled" color="success">Success</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="success">Success</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="text" color="success">Success</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" active="true" variant="filled" color="warning">Warning</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="warning">Warning</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="text" color="warning">Warning</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" active="true" variant="filled" color="danger">Danger</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="danger">Danger</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="text" color="danger">Danger</cat-button>
+
+              <h3>Disabled</h3>
+              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="primary">Primary</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="primary">Primary</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="primary">Primary</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="secondary"
+                >Secondary
+              </cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="secondary"
+                >Secondary
+              </cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="secondary">Secondary</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="info">Info</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="info">Info</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="info">Info</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="success">Success</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="success">Success</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="success">Success</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="warning">Warning</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="warning">Warning</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="warning">Warning</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="danger">Danger</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="danger">Danger</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="danger">Danger</cat-button>
+
+              <h3>Loading</h3>
+              <cat-button loading="true" variant="filled" color="primary">Primary</cat-button>
+              <cat-button loading="true" variant="outlined" color="primary">Primary</cat-button>
+              <cat-button loading="true" variant="text" color="primary">Primary</cat-button>
+              <br /><br />
+              <cat-button loading="true" variant="filled" color="secondary">Secondary</cat-button>
+              <cat-button loading="true" variant="outlined" color="secondary">Secondary</cat-button>
+              <cat-button loading="true" variant="text" color="secondary">Secondary</cat-button>
+              <br /><br />
+              <cat-button loading="true" variant="filled" color="info">Info</cat-button>
+              <cat-button loading="true" variant="outlined" color="info">Info</cat-button>
+              <cat-button loading="true" variant="text" color="info">Info</cat-button>
+              <br /><br />
+              <cat-button loading="true" variant="filled" color="success">Success</cat-button>
+              <cat-button loading="true" variant="outlined" color="success">Success</cat-button>
+              <cat-button loading="true" variant="text" color="success">Success</cat-button>
+              <br /><br />
+              <cat-button loading="true" variant="filled" color="warning">Warning</cat-button>
+              <cat-button loading="true" variant="outlined" color="warning">Warning</cat-button>
+              <cat-button loading="true" variant="text" color="warning">Warning</cat-button>
+              <br /><br />
+              <cat-button loading="true" variant="filled" color="danger">Danger</cat-button>
+              <cat-button loading="true" variant="outlined" color="danger">Danger</cat-button>
+              <cat-button loading="true" variant="text" color="danger">Danger</cat-button>
+
+              <h3>Layout</h3>
+              <div style="width: 200px; border: 1px solid gray">
+                <cat-button icon="sparkle-filled">Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
+                <br />
+                <cat-button icon="sparkle-filled" no-ellipsis>Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
+                <br />
+                <cat-button icon="sparkle-filled" class="cat-block">Block</cat-button>
+                <cat-button icon="sparkle-filled" class="cat-block cat-text-left">Block (left)</cat-button>
+                <cat-button icon="sparkle-filled" class="cat-block cat-text-right">Block (right)</cat-button>
+              </div>
+            </section>
+
+            <section id="group-button">
+              <h2>Group button</h2>
+
+              <div style="display: flex; flex-direction: column; gap: 8px">
+                <cat-button-group a11y-label="Group button outlined">
+                  <cat-button>Left</cat-button>
+                  <cat-button>Middle</cat-button>
+                  <cat-button>Middle1</cat-button>
+                  <cat-button>Right</cat-button>
+                </cat-button-group>
+
+                <cat-button-group a11y-label="Group button filled">
+                  <cat-button variant="filled">Left</cat-button>
+                  <cat-button variant="filled">Middle</cat-button>
+                  <cat-button variant="filled">Right</cat-button>
+                </cat-button-group>
+
+                <cat-button-group a11y-label="Group button text">
+                  <cat-button variant="text">Left</cat-button>
+                  <cat-button variant="text">Middle</cat-button>
+                  <cat-button variant="text">Right</cat-button>
+                </cat-button-group>
+              </div>
+            </section>
+
+            <section id="card">
+              <h2>Card</h2>
+
+              <div class="canvas-fake">
+                <cat-card>
+                  <h3>Lorem ipsum dolor sit amet</h3>
+                  <p>
+                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                    labore et dolore magna aliquyam erat, sed diam voluptua.
+                  </p>
+                  <p>
+                    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+                    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+                    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+                  </p>
+                </cat-card>
+              </div>
+              <h3>Navigation</h3>
+              <div class="canvas-fake">
+                <cat-card>
+                  <nav>
+                    <ul>
+                      <li class="cat-nav-head">Headline</li>
+                      <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
+                      <li>
+                        <cat-button class="cat-nav-item" color="primary">Nav item 1</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" active>Nav item 2</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" color="warning">Nav item 3</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" disabled>Nav item 4</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item">Nav item 5 (long)</cat-button>
+                      </li>
+                      <li class="cat-hr"></li>
+                      <li>
+                        <cat-button class="cat-nav-item" color="danger" onclick="console.log(6)" active
+                          >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f
+                        </cat-button>
+                      </li>
+                    </ul>
+                    <hr />
+                    <ul>
+                      <li>
+                        <cat-button class="cat-nav-item" variant="outlined" color="secondary" onclick="console.log(3)"
+                          >Nav item 3
+                        </cat-button>
+                      </li>
+                    </ul>
+                  </nav>
+                </cat-card>
+              </div>
+            </section>
+
+            <section id="checkbox" class="cat-form">
+              <h2>Checkbox</h2>
+              <cat-checkbox label="Label"></cat-checkbox>
+
+              <h3>State</h3>
+              <cat-checkbox label="Disabled" disabled></cat-checkbox>
+              <cat-checkbox label="Checked" checked></cat-checkbox>
+              <cat-checkbox label="Checked disabled" checked disabled></cat-checkbox>
+              <cat-checkbox label="Indeterminate" indeterminate="true" id="indeterminate"></cat-checkbox>
+              <cat-button id="indeterminate-true">Set inteterminate true</cat-button>
+              <cat-button id="indeterminate-false">Set inteterminate false</cat-button>
+              <cat-button id="value-true">Set value true</cat-button>
+              <cat-button id="value-false">Set value false</cat-button>
+              <script>
+                document.querySelector('#indeterminate-true').addEventListener('click', () => {
+                  document.querySelector('#indeterminate').indeterminate = true;
+                });
+                document.querySelector('#indeterminate-false').addEventListener('click', () => {
+                  document.querySelector('#indeterminate').indeterminate = false;
+                });
+                document.querySelector('#value-true').addEventListener('click', () => {
+                  document.querySelector('#indeterminate').checked = true;
+                });
+                document.querySelector('#value-false').addEventListener('click', () => {
+                  document.querySelector('#indeterminate').checked = false;
+                });
+              </script>
+
+              <h3>Alignment</h3>
+              <cat-checkbox label="Label" label-left></cat-checkbox>
+
+              <h3>Slots</h3>
+              <cat-checkbox hint="This is a hint!">
+                <span slot="label">This is the <b>label</b></span>
+                <span slot="hint">This is another!</span>
+              </cat-checkbox>
+            </section>
+
+            <section id="divider">
+              <h2>Divider</h2>
+            </section>
+
+            <section id="dropdown">
+              <h2>Dropdown</h2>
+
+              <div class="cat-flex cat-item-center cat-gap-s cat-mb-m">
+                <!-- Wide dropdown -->
+                <cat-dropdown justify focus-trap="true">
+                  <cat-button slot="trigger" color="primary" variant="filled"
+                    >Button with very long content so that it is very wide
+                  </cat-button>
+                  <nav slot="content">
+                    <ul>
+                      <li class="cat-nav-head">Headline</li>
+                      <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="sparkle-filled" color="warning">Nav item 3</cat-button>
+                      </li>
+                    </ul>
+                  </nav>
+                </cat-dropdown>
+
+                <!-- Example: User menu -->
+                <cat-dropdown overflow>
+                  <cat-button slot="trigger" variant="filled" color="primary" size="m">Example User Menu</cat-button>
+                  <nav slot="content" style="min-width: 240px">
+                    <ul>
+                      <li>
+                        <cat-button class="cat-nav-item">
+                          <div class="cat-flex cat-items-center cat-gap-s">
+                            <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
+                            <div class="cat-flex cat-flex-col cat-items-start">
+                              <span>Max Mustermann</span>
+                              <span class="cat-text-s cat-muted">Open profile</span>
+                            </div>
+                          </div>
+                        </cat-button>
+                      </li>
+                      <li>
+                        <cat-dropdown placement="right-start">
+                          <cat-button slot="trigger" class="cat-nav-item" icon="status-available">Available</cat-button>
+                          <nav slot="content">
+                            <ul>
+                              <li class="cat-nav-head">Headline</li>
+                              <li class="cat-nav-text cat-muted">
+                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+                              </li>
+                              <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
+                                >Nav item 1
+                              </cat-button>
+                            </ul>
+                          </nav>
+                        </cat-dropdown>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="bookmark-outlined">Saved</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="w-document-outlined">Files</cat-button>
+                      </li>
+                      <hr />
+                      <li class="cat-nav-head">Platform</li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="settings-outlined">Administration</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="bar-chart-outlined">Analytics</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="w-hero-teaser-outlined">Manage hero teaser</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="w-alert-outlined">Reported content</cat-button>
+                      </li>
+                      <hr />
+                      <li class="cat-nav-head">Settings</li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="sliders-outlined">Account</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="bell-outlined">Notifications</cat-button>
+                      </li>
+                      <hr />
+                      <li class="cat-nav-head">Support</li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="restart-outlined">Restart tour</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="question-mark-circle-outlined">Help</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="info-circle-outlined">About</cat-button>
+                      </li>
+                      <hr />
+                      <li>
+                        <cat-button class="cat-nav-item" icon="sign-out-outlined">Log out</cat-button>
+                      </li>
+                    </ul>
+                  </nav>
+                </cat-dropdown>
+              </div>
+
+              <cat-card class="cat-flex cat-items-center cat-gap-m cat-border cat-pv-s">
+                Dropdown inside a card
+                <cat-dropdown>
+                  <cat-button slot="trigger">Click me</cat-button>
+                  <nav slot="content">
+                    <ul>
+                      <li>
+                        <cat-button class="cat-nav-item">Item A</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item">Item B</cat-button>
+                      </li>
+                    </ul>
+                  </nav>
+                </cat-dropdown>
+              </cat-card>
+
+              <cat-dropdown no-auto-close>
+                <cat-button slot="trigger">Button (keep open)</cat-button>
+                <div slot="content" class="cat-flex cat-flex-col cat-p-m">
+                  <p>Here is some content.</p>
+                  <cat-button>Action</cat-button>
+                </div>
+              </cat-dropdown>
+
+              <cat-dropdown overflow>
+                <cat-button slot="trigger" color="primary" variant="filled">Nested dropdown</cat-button>
+                <nav slot="content">
+                  <ul>
+                    <li class="cat-nav-head">Headline</li>
+                    <li>
+                      <cat-dropdown placement="right-start">
+                        <cat-button slot="trigger" class="cat-nav-item" icon="sparkle-filled" color="primary"
+                          >Click one more time
+                        </cat-button>
+                        <nav slot="content">
+                          <ul>
+                            <li class="cat-nav-head">Headline</li>
+                            <li class="cat-nav-text cat-muted">
+                              Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+                            </li>
+                            <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
+                              >Nav item 1
+                            </cat-button>
+                          </ul>
+                        </nav>
+                      </cat-dropdown>
+                    </li>
+                    <li>
+                      <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
+                    </li>
+                  </ul>
+                </nav>
+              </cat-dropdown>
+            </section>
+
+            <section id="menu">
+              <h2>Menu</h2>
+
+              <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
+                <!-- Basic menu -->
+                <cat-menu>
+                  <cat-menu-item icon="edit-outlined">Edit</cat-menu-item>
+                  <cat-menu-item icon="copy-outlined">Duplicate</cat-menu-item>
+                  <cat-menu-item icon="archive-outlined">Archive</cat-menu-item>
+                  <hr />
+                  <cat-menu-item icon="trash-outlined" color="danger">Delete</cat-menu-item>
+                </cat-menu>
+
+                <!-- Menu with custom trigger -->
+                <cat-menu trigger-icon="settings-outlined" trigger-a11y-label="Settings menu">
+                  <cat-menu-item icon="user-outlined">Profile</cat-menu-item>
+                  <cat-menu-item icon="sliders-outlined">Preferences</cat-menu-item>
+                  <cat-menu-item icon="bell-outlined">Notifications</cat-menu-item>
+                  <hr />
+                  <cat-menu-item icon="sign-out-outlined">Sign out</cat-menu-item>
+                </cat-menu>
+
+                <cat-menu trigger-color="primary" trigger-variant="filled" trigger-label="Actions menu">
                   <li class="cat-nav-head">Headline</li>
                   <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="sparkle-filled" color="warning">Nav item 3</cat-button>
-                  </li>
-                </ul>
-              </nav>
-            </cat-dropdown>
-
-            <!-- Example: User menu -->
-            <cat-dropdown overflow>
-              <cat-button slot="trigger" variant="filled" color="primary" size="m">Example User Menu</cat-button>
-              <nav slot="content" style="min-width: 240px">
-                <ul>
-                  <li>
-                    <cat-button class="cat-nav-item">
-                      <div class="cat-flex cat-items-center cat-gap-s">
-                        <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
-                        <div class="cat-flex cat-flex-col cat-items-start">
-                          <span>Max Mustermann</span>
-                          <span class="cat-text-s cat-muted">Open profile</span>
-                        </div>
+                  <cat-menu-item icon="sparkle-filled" color="primary">Nav item 1</cat-menu-item>
+                  <cat-menu-item icon="sparkle-filled">Nav item 2</cat-menu-item>
+                  <cat-menu-item icon="sparkle-filled" color="warning">Nav item 3</cat-menu-item>
+                  <cat-menu-item icon="sparkle-filled" disabled>Nav item 4</cat-menu-item>
+                  <cat-menu-item>Nav item 5 (long)</cat-menu-item>
+                  <li class="cat-hr"></li>
+                  <cat-menu-item color="danger" onclick="console.log(6)"
+                    >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f
+                  </cat-menu-item>
+                  <hr />
+                  <cat-menu-item variant="outlined" onclick="console.log(3)">Nav item 3</cat-menu-item>
+                </cat-menu>
+
+                <cat-menu overflow trigger-variant="filled" trigger-label="Example User Menu">
+                  <cat-menu-item>
+                    <div class="cat-flex cat-items-center cat-gap-s">
+                      <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
+                      <div class="cat-flex cat-flex-col cat-items-start">
+                        <span>Max Mustermann</span>
+                        <span class="cat-text-s cat-muted">Open profile</span>
                       </div>
-                    </cat-button>
-                  </li>
-                  <li>
+                    </div>
+                  </cat-menu-item>
+                  <cat-menu-item sub-menu>
                     <cat-dropdown placement="right-start">
                       <cat-button slot="trigger" class="cat-nav-item" icon="status-available">Available</cat-button>
                       <nav slot="content">
@@ -728,971 +889,799 @@ <h2>Dropdown</h2>
                           <li class="cat-nav-text cat-muted">
                             Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                           </li>
-                          <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
-                          >Nav item 1
-                          </cat-button
-                          >
+                          <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
                         </ul>
                       </nav>
                     </cat-dropdown>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="bookmark-outlined">Saved</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="w-document-outlined">Files</cat-button>
-                  </li>
-                  <hr/>
-                  <li class="cat-nav-head">Platform</li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="settings-outlined">Administration</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="bar-chart-outlined">Analytics</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="w-hero-teaser-outlined">Manage hero teaser</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="w-alert-outlined">Reported content</cat-button>
-                  </li>
-                  <hr/>
-                  <li class="cat-nav-head">Settings</li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="sliders-outlined">Account</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="bell-outlined">Notifications</cat-button>
-                  </li>
-                  <hr/>
-                  <li class="cat-nav-head">Support</li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="restart-outlined">Restart tour</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="question-mark-circle-outlined">Help</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="info-circle-outlined">About</cat-button>
-                  </li>
-                  <hr/>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="sign-out-outlined">Log out</cat-button>
-                  </li>
-                </ul>
-              </nav>
-            </cat-dropdown>
-          </div>
-
-          <cat-card class="cat-flex cat-items-center cat-gap-m cat-border cat-pv-s">
-            Dropdown inside a card
-            <cat-dropdown>
-              <cat-button slot="trigger">Click me</cat-button>
-              <nav slot="content">
-                <ul>
-                  <li>
-                    <cat-button class="cat-nav-item">Item A</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item">Item B</cat-button>
-                  </li>
-                </ul>
-              </nav>
-            </cat-dropdown>
-          </cat-card>
-
-          <cat-dropdown no-auto-close>
-            <cat-button slot="trigger">Button (keep open)</cat-button>
-            <div slot="content" class="cat-flex cat-flex-col cat-p-m">
-              <p>Here is some content.</p>
-              <cat-button>Action</cat-button>
-            </div>
-          </cat-dropdown>
-
-          <cat-dropdown overflow>
-            <cat-button slot="trigger" color="primary" variant="filled">Nested dropdown</cat-button>
-            <nav slot="content">
-              <ul>
-                <li class="cat-nav-head">Headline</li>
-                <li>
-                  <cat-dropdown placement="right-start">
-                    <cat-button slot="trigger" class="cat-nav-item" icon="sparkle-filled" color="primary"
-                    >Click one more time
-                    </cat-button
-                    >
-                    <nav slot="content">
-                      <ul>
-                        <li class="cat-nav-head">Headline</li>
-                        <li class="cat-nav-text cat-muted">
-                          Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-                        </li>
-                        <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
-                        >Nav item 1
-                        </cat-button
-                        >
-                      </ul>
-                    </nav>
-                  </cat-dropdown>
-                </li>
-                <li>
-                  <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
-                </li>
-              </ul>
-            </nav>
-          </cat-dropdown>
-        </section>
-
-        <section id="menu">
-          <h2>Menu</h2>
-
-          <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
-            <!-- Basic menu -->
-            <cat-menu>
-              <cat-menu-item icon="edit-outlined">Edit</cat-menu-item>
-              <cat-menu-item icon="copy-outlined">Duplicate</cat-menu-item>
-              <cat-menu-item icon="archive-outlined">Archive</cat-menu-item>
-              <hr/>
-              <cat-menu-item icon="trash-outlined" color="danger">Delete</cat-menu-item>
-            </cat-menu>
-
-            <!-- Menu with custom trigger -->
-            <cat-menu trigger-icon="settings-outlined" trigger-a11y-label="Settings menu">
-              <cat-menu-item icon="user-outlined">Profile</cat-menu-item>
-              <cat-menu-item icon="sliders-outlined">Preferences</cat-menu-item>
-              <cat-menu-item icon="bell-outlined">Notifications</cat-menu-item>
-              <hr/>
-              <cat-menu-item icon="sign-out-outlined">Sign out</cat-menu-item>
-            </cat-menu>
-
-            <cat-menu trigger-color="primary" trigger-variant="filled" trigger-label="Actions menu">
-              <li class="cat-nav-head">Headline</li>
-              <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
-              <cat-menu-item icon="sparkle-filled" color="primary">Nav item 1</cat-menu-item>
-              <cat-menu-item icon="sparkle-filled">Nav item 2</cat-menu-item>
-              <cat-menu-item icon="sparkle-filled" color="warning">Nav item 3</cat-menu-item>
-              <cat-menu-item icon="sparkle-filled" disabled>Nav item 4</cat-menu-item>
-              <cat-menu-item>Nav item 5 (long)</cat-menu-item>
-              <li class="cat-hr"></li>
-              <cat-menu-item color="danger" onclick="console.log(6)"
-              >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f
-              </cat-menu-item
-              >
-              <hr/>
-              <cat-menu-item variant="outlined" onclick="console.log(3)">Nav item 3</cat-menu-item>
-            </cat-menu>
-
-            <cat-menu overflow trigger-variant="filled" trigger-label="Example User Menu">
-              <cat-menu-item>
-                <div class="cat-flex cat-items-center cat-gap-s">
-                  <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
-                  <div class="cat-flex cat-flex-col cat-items-start">
-                    <span>Max Mustermann</span>
-                    <span class="cat-text-s cat-muted">Open profile</span>
-                  </div>
+                  </cat-menu-item>
+                  <cat-menu-item icon="bookmark-outlined">Saved</cat-menu-item>
+                </cat-menu>
+              </div>
+
+              <h3>Menu Placement Examples</h3>
+              <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
+                <cat-menu placement="bottom-start" trigger-label="Bottom start menu">
+                  <cat-menu-item icon="align-left">Bottom start (default)</cat-menu-item>
+                  <cat-menu-item>Item 2</cat-menu-item>
+                  <cat-menu-item>Item 3</cat-menu-item>
+                </cat-menu>
+
+                <cat-menu placement="bottom-end" trigger-label="Bottom end menu">
+                  <cat-menu-item icon="align-right">Bottom end</cat-menu-item>
+                  <cat-menu-item>Item 2</cat-menu-item>
+                  <cat-menu-item>Item 3</cat-menu-item>
+                </cat-menu>
+
+                <cat-menu placement="top-start" trigger-label="Top start menu">
+                  <cat-menu-item icon="arrow-up">Top start</cat-menu-item>
+                  <cat-menu-item>Item 2</cat-menu-item>
+                  <cat-menu-item>Item 3</cat-menu-item>
+                </cat-menu>
+              </div>
+
+              <h3>Arrow Navigation Modes</h3>
+              <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
+                <!-- Vertical navigation (default) -->
+                <cat-menu
+                  arrow-navigation="vertical"
+                  trigger-label="Vertical navigation (default)"
+                  trigger-icon="arrows-vertical"
+                >
+                  <cat-menu-item icon="arrow-up-down-filled">Arrow Up/Down navigation</cat-menu-item>
+                  <cat-menu-item icon="list-outlined">Default for dropdown menus</cat-menu-item>
+                  <cat-menu-item icon="menu-outlined">Vertical orientation (ARIA)</cat-menu-item>
+                  <cat-menu-item icon="keyboard-outlined">Standard menu pattern</cat-menu-item>
+                </cat-menu>
+
+                <!-- Horizontal navigation -->
+                <cat-menu
+                  arrow-navigation="horizontal"
+                  trigger-label="Horizontal navigation"
+                  trigger-icon="arrows-horizontal"
+                  placement="bottom-start"
+                >
+                  <cat-menu-item icon="arrow-left-right-filled">Arrow Left/Right navigation</cat-menu-item>
+                  <cat-menu-item icon="columns-outlined">Ideal for toolbar menus</cat-menu-item>
+                  <cat-menu-item icon="layout-outlined">Horizontal orientation (ARIA)</cat-menu-item>
+                  <cat-menu-item icon="keyboard-outlined">Alternative menu pattern</cat-menu-item>
+                </cat-menu>
+              </div>
+            </section>
+
+            <section id="form">
+              <h2>Form</h2>
+              <form class="cat-form" action="." method="GET">
+                <cat-input name="field1" label="Field 1" value="value1"></cat-input>
+                <cat-textarea name="field2" label="Field 2" value="value2"></cat-textarea>
+                <cat-checkbox name="field3" label="Field 3" value="value3" checked></cat-checkbox>
+                <cat-toggle name="field4" label="Field 4" value="value4" checked></cat-toggle>
+                <cat-button submit="true">Submit</cat-button>
+              </form>
+            </section>
+
+            <section id="form-group" class="cat-form">
+              <h2>Form Group</h2>
+              <cat-form-group>
+                <cat-input label="Field 1" max-length="30"></cat-input>
+                <cat-input label="Field 2" required></cat-input>
+              </cat-form-group>
+
+              <h3>Alignment (horizontal)</h3>
+              <cat-form-group label-size="40%" horizontal>
+                <cat-input hint="This is a hint" required max-length="98">
+                  <span slot="label">This is the <b>label</b></span>
+                </cat-input>
+                <cat-input hint="NO LABEL" required></cat-input>
+                <cat-input label="Label" label-hidden="true" hint="NO LABEL" required></cat-input>
+                <cat-input label="Field 1" hint="This is a hint"></cat-input>
+                <cat-input
+                  label="Field 1"
+                  hint="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+                ></cat-input>
+                <cat-input
+                  label="This is a very long label with some more text"
+                  required
+                  hint="This is a hint"
+                ></cat-input>
+                <cat-textarea max-length="50" label="Label" hint="This is a hint"></cat-textarea>
+                <cat-select label="Field 3"></cat-select>
+                <cat-datepicker clearable="true" a11y-label="ARIA" label="Date picker"></cat-datepicker>
+              </cat-form-group>
+
+              <h3>Auto (more required)</h3>
+              <cat-form-group>
+                <cat-input label="Field 1"></cat-input>
+                <cat-input label="Field 2" required></cat-input>
+                <cat-textarea label="Field 3" required></cat-textarea>
+              </cat-form-group>
+
+              <h3>Auto (more optional)</h3>
+              <cat-form-group>
+                <cat-input label="Field 1"></cat-input>
+                <cat-input label="Field 2"></cat-input>
+                <cat-textarea label="Field 3" required></cat-textarea>
+              </cat-form-group>
+
+              <h3>None marker</h3>
+              <cat-form-group required-marker="none">
+                <cat-input label="Field 1"></cat-input>
+                <cat-input label="Field 2"></cat-input>
+                <cat-textarea label="Field 3" required></cat-textarea>
+              </cat-form-group>
+
+              <h3>Only mark optional</h3>
+              <cat-form-group required-marker="optional">
+                <cat-input label="Field 1"></cat-input>
+                <cat-input label="Field 2"></cat-input>
+                <cat-textarea label="Field 3" required></cat-textarea>
+              </cat-form-group>
+
+              <h3>Only mark required</h3>
+              <cat-form-group required-marker="required">
+                <cat-input label="Field 1"></cat-input>
+                <cat-input label="Field 2" required></cat-input>
+                <cat-textarea label="Field 3" required></cat-textarea>
+              </cat-form-group>
+
+              <h3>Dynamic field added</h3>
+              <cat-form-group id="form-group-1">
+                <cat-input id="cat-input-1" label="Field 1"></cat-input>
+                <cat-input label="Field 2" required></cat-input>
+              </cat-form-group>
+
+              <script>
+                let input = document.getElementById('cat-input-1');
+                input.addEventListener('input', () => {
+                  let elementById = document.getElementById('time2');
+                  elementById.value = '13:58';
+                });
+                const formElem = document.getElementById('form-group-1');
+                setTimeout(() => {
+                  const htmlElement = document.createElement('cat-input');
+                  htmlElement.setAttribute('label', 'Field 3');
+                  formElem.appendChild(htmlElement);
+                }, 5000);
+              </script>
+            </section>
+
+            <section id="icon">
+              <h2>Icon</h2>
+              <cat-icon icon="sparkle-filled"></cat-icon>
+
+              <h3>Color</h3>
+              <cat-icon icon="sparkle-filled" style="color: red"></cat-icon>
+              <cat-icon icon="sparkle-filled" style="color: blue"></cat-icon>
+              <cat-icon icon="sparkle-filled" style="color: green"></cat-icon>
+
+              <h3>Size</h3>
+              <cat-icon icon="sparkle-filled" size="xs"></cat-icon>
+              <cat-icon icon="sparkle-filled" size="s"></cat-icon>
+              <cat-icon icon="sparkle-filled" size="m"></cat-icon>
+              <cat-icon icon="sparkle-filled" size="l"></cat-icon>
+              <cat-icon icon="sparkle-filled" size="xl"></cat-icon>
+              <cat-icon icon="sparkle-filled" size="inline" style="font-size: 2.5rem"></cat-icon>
+
+              <h3>Ratio</h3>
+              <cat-icon icon="sp-grid-3-cols" style="--cat-icon-ratio: 2.5"></cat-icon>
+            </section>
+
+            <section id="input" class="cat-form">
+              <h2>Input</h2>
+              <cat-input label="Label" hint="This is a hint!" placeholder="I am the placeholder">
+                <span slot="hint">This is another!</span>
+              </cat-input>
+              <cat-input label="Label" max-length="100">
+                <span slot="label">Priority Label</span>
+              </cat-input>
+              <cat-input label="Label" loading>
+                <span slot="label">Loading</span>
+              </cat-input>
+              <h3>Types</h3>
+              <cat-input label="Color" type="color"></cat-input>
+              <cat-input label="Color" type="color" clearable="true"></cat-input>
+              <cat-input label="Email" type="email"></cat-input>
+              <cat-input label="File" type="file" accept="image/png, image/jpeg" multiple></cat-input>
+              <cat-input label="Number" type="number"></cat-input>
+              <cat-input label="Password" type="password"></cat-input>
+              <cat-input label="Range" type="range"></cat-input>
+              <cat-input label="Search" type="search"></cat-input>
+              <cat-input label="Tel" type="tel"></cat-input>
+              <cat-input label="Text" type="text"></cat-input>
+              <cat-input label="Url" type="url"></cat-input>
+              <h3>Slotted Counter</h3>
+              <cat-input label="Custom counter">
+                <span slot="counter">Show any text here</span>
+              </cat-input>
+            </section>
+
+            <section id="datepicker" class="cat-form">
+              <h2>Datepicker</h2>
+              <cat-date label="New Datepicker"></cat-date>
+              <cat-time id="time2" label="New Timepicker" value="12:00"></cat-time>
+              <cat-datepicker mode="date">
+                <span slot="label">Priority Label</span>
+                <span slot="hint">Priority Hint</span>
+              </cat-datepicker>
+              <cat-datepicker mode="datetime" label="Datetime" disabled></cat-datepicker>
+              <cat-datepicker mode="time" label="Time"></cat-datepicker>
+              <cat-datepicker mode="week" label="Week"></cat-datepicker>
+              <cat-datepicker mode="daterange" label="Daterange"></cat-datepicker>
+              <h3>Inline Datepicker (new)</h3>
+              <cat-date-inline
+                value="2022-06-21"
+                label="test this is"
+                a11y-label="This is an Aria test"
+              ></cat-date-inline>
+              <h3>Inline Datepicker</h3>
+              <cat-card class="cat-inline-flex cat-flex-col cat-border">
+                <h4>Datetime</h4>
+                <cat-datepicker-inline value="2022-06-21T00:00:000Z"></cat-datepicker-inline>
+              </cat-card>
+              <h3>Nested Datepicker</h3>
+              <cat-dropdown>
+                <cat-button slot="trigger" color="primary" variant="filled">Button</cat-button>
+                <div slot="content" class="cat-p-m">
+                  <cat-input></cat-input>
+                  <cat-datepicker mode="date" label="Date"></cat-datepicker>
+                  <cat-datepicker mode="date" label="Date"></cat-datepicker>
                 </div>
-              </cat-menu-item>
-              <cat-menu-item sub-menu>
-                <cat-dropdown placement="right-start">
-                  <cat-button slot="trigger" class="cat-nav-item" icon="status-available">Available</cat-button>
+              </cat-dropdown>
+            </section>
+
+            <section id="notification">
+              <h2>Notification</h2>
+              <cat-button id="notification-trigger">Show Notifications</cat-button>
+              <script type="module">
+                import { catNotificationService } from '/build/index.esm.js';
+
+                document.getElementById('notification-trigger').onclick = function () {
+                  catNotificationService.show('Item saved', {
+                    autoClose: false,
+                    closeButton: true,
+                    action: 'Show saved items'
+                  });
+                  catNotificationService.show('This is light', {
+                    mode: 'light',
+                    closeButton: true,
+                    icon: 'globe-outlined',
+                    action: 'Seite neu laden'
+                  });
+                  catNotificationService.show('Article was saved', {
+                    action: 'Undo'
+                  });
+                  catNotificationService.show('Es scheint als hättest du keine Internetverbindung mehr', {
+                    icon: 'globe-outlined',
+                    action: 'Seite neu laden'
+                  });
+                };
+              </script>
+            </section>
+
+            <section id="pagination">
+              <h2>Pagination</h2>
+              <cat-pagination page-count="10" compact></cat-pagination>
+              <br />
+              <br />
+              <cat-pagination page-count="10" size="s"></cat-pagination>
+              <br />
+              <br />
+              <cat-pagination page-count="10"></cat-pagination>
+              <br />
+              <br />
+              <cat-pagination page-count="10" variant="outlined"></cat-pagination>
+              <br />
+              <br />
+              <span>Change event demo (See console)</span>
+              <cat-pagination id="change-demo" page-count="10" variant="outlined" round></cat-pagination>
+              <script>
+                var paginationDemo = document.getElementById('change-demo');
+
+                paginationDemo.addEventListener('catChange', function (event) {
+                  console.log('Page changed!', event.detail);
+                });
+              </script>
+            </section>
+
+            <section id="radio" class="cat-form">
+              <h2>Radio</h2>
+              <cat-radio label="Label"></cat-radio>
+
+              <h3>Group</h3>
+              <cat-radio-group a11y-label="Radio Group 1" label-left>
+                <cat-radio value="one" label="Option 1 - Group 1" hint="This is a hint" checked></cat-radio>
+                <cat-radio value="two" label="Option 2 - Group 1" hint="This is a hint"></cat-radio>
+                <cat-radio value="three" label="Option 3 - Group 1" hint="This is a hint" disabled></cat-radio>
+              </cat-radio-group>
+
+              <h3>State</h3>
+              <cat-radio label="Disabled" disabled></cat-radio>
+              <cat-radio label="Checked" checked></cat-radio>
+              <cat-radio label="Checked disabled" checked disabled></cat-radio>
+
+              <h3>Alignment</h3>
+              <cat-radio label="Label" label-left></cat-radio>
+
+              <h3>Slots</h3>
+              <cat-radio hint="This is a hint!">
+                <span slot="label">This is the <b>label</b></span>
+                <span slot="hint">This is another!</span>
+              </cat-radio>
+            </section>
+
+            <section id="scrollable">
+              <h2>Scrollable</h2>
+              <cat-scrollable style="max-height: 8rem; width: 25vw">
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+              </cat-scrollable>
+            </section>
+
+            <section id="segmented-control">
+              <h2>Segmented Control</h2>
+
+              <h3>Default</h3>
+              <cat-segmented-control>
+                <cat-segment value="one">Option 1</cat-segment>
+                <cat-segment value="two">Option 2</cat-segment>
+                <cat-segment value="three">Option 3 with overflowing content</cat-segment>
+              </cat-segmented-control>
+
+              <h3>Sizes</h3>
+              <cat-segmented-control size="xs">
+                <cat-segment value="one">XS Option 1</cat-segment>
+                <cat-segment value="two">XS Option 2</cat-segment>
+                <cat-segment value="three">XS Option 3</cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="s">
+                <cat-segment value="one">S Option 1</cat-segment>
+                <cat-segment value="two">S Option 2</cat-segment>
+                <cat-segment value="three">S Option 3</cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="m">
+                <cat-segment value="one">M Option 1</cat-segment>
+                <cat-segment value="two">M Option 2</cat-segment>
+                <cat-segment value="three">M Option 3</cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="l">
+                <cat-segment value="one">L Option 1</cat-segment>
+                <cat-segment value="two">L Option 2</cat-segment>
+                <cat-segment value="three">L Option 3</cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="xl">
+                <cat-segment value="one">XL Option 1</cat-segment>
+                <cat-segment value="two">XL Option 2</cat-segment>
+                <cat-segment value="three">XL Option 3</cat-segment>
+              </cat-segmented-control>
+
+              <h3>Disabled</h3>
+              <cat-segmented-control disabled>
+                <cat-segment value="one">Option 1</cat-segment>
+                <cat-segment value="two">Option 2</cat-segment>
+                <cat-segment value="three">Option 3</cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control>
+                <cat-segment value="one">Option 1</cat-segment>
+                <cat-segment value="two" disabled>Option 2</cat-segment>
+                <cat-segment value="three">Option 3</cat-segment>
+              </cat-segmented-control>
+
+              <h3>Icons</h3>
+              <cat-segmented-control>
+                <cat-segment value="home" icon="bookmark-filled">Option 1</cat-segment>
+                <cat-segment value="settings" icon="camera-filled">Option 2</cat-segment>
+                <cat-segment value="star" icon="star-filled">Option 3</cat-segment>
+              </cat-segmented-control>
+
+              <h3>Icon Only</h3>
+              <cat-segmented-control size="xs">
+                <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
+                <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
+                <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="s">
+                <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
+                <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
+                <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="m">
+                <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
+                <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
+                <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="l">
+                <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
+                <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
+                <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="xl">
+                <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
+                <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
+                <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
+              </cat-segmented-control>
+            </section>
+
+            <section id="select">
+              <h2>Select</h2>
+              <cat-select-demo></cat-select-demo>
+            </section>
+
+            <section id="skeleton">
+              <h2>Skeleton</h2>
+              <cat-skeleton></cat-skeleton>
+
+              <h3>Effect</h3>
+              <cat-skeleton effect="plain"></cat-skeleton>
+              <br />
+              <cat-skeleton effect="sheen"></cat-skeleton>
+              <br />
+              <cat-skeleton effect="pulse"></cat-skeleton>
+
+              <h3>Variant</h3>
+              <cat-skeleton variant="square"></cat-skeleton>
+              <cat-skeleton variant="circle"></cat-skeleton>
+              <cat-skeleton variant="rectangle"></cat-skeleton>
+              <cat-skeleton variant="head"></cat-skeleton>
+              <cat-skeleton variant="body"></cat-skeleton>
+            </section>
+
+            <section id="spinner">
+              <h2>Spinner</h2>
+              <cat-spinner></cat-spinner>
+
+              <h3>Color</h3>
+              <cat-spinner style="color: red"></cat-spinner>
+              <cat-spinner style="color: blue"></cat-spinner>
+              <cat-spinner style="color: green"></cat-spinner>
+
+              <h3>Size</h3>
+              <cat-spinner size="xs"></cat-spinner>
+              <cat-spinner size="s"></cat-spinner>
+              <cat-spinner size="m"></cat-spinner>
+              <cat-spinner size="l"></cat-spinner>
+              <cat-spinner size="xl"></cat-spinner>
+              <cat-spinner size="inline" style="font-size: 2.5rem"></cat-spinner>
+            </section>
+
+            <section id="tabs">
+              <h2>Tabs</h2>
+              <cat-tabs>
+                <cat-tab id="tab1" label="First"></cat-tab>
+                <cat-tab label="Second"></cat-tab>
+                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+              </cat-tabs>
+              <h3>Alignment</h3>
+              <cat-tabs tabs-align="center">
+                <cat-tab label="First"></cat-tab>
+                <cat-tab label="Second"></cat-tab>
+                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+              </cat-tabs>
+              <br />
+              <br />
+              <cat-tabs tabs-align="right">
+                <cat-tab label="First"></cat-tab>
+                <cat-tab label="Second"></cat-tab>
+                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+              </cat-tabs>
+              <br />
+              <br />
+              <cat-tabs tabs-align="justify" active-tab="second">
+                <cat-tab label="First" deactivate></cat-tab>
+                <cat-tab label="Second" id="second"></cat-tab>
+                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+              </cat-tabs>
+              <script>
+                const tab = document.querySelector('#tab1');
+                setInterval(() => {
+                  tab.deactivated = true;
+                }, 5000);
+              </script>
+              <h3>More</h3>
+              <cat-tabs>
+                <cat-tab id="tab1" label="First"></cat-tab>
+                <cat-tab label="Second"></cat-tab>
+                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+                <cat-dropdown slot="more">
+                  <cat-button class="cat-tab cat-ml-auto" slot="trigger" variant="text">More</cat-button>
                   <nav slot="content">
                     <ul>
-                      <li class="cat-nav-head">Headline</li>
-                      <li class="cat-nav-text cat-muted">
-                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-                      </li>
-                      <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
+                      <cat-button class="cat-nav-item">Nav item 1</cat-button>
+                      <cat-button class="cat-nav-item">Nav item 1</cat-button>
                     </ul>
                   </nav>
                 </cat-dropdown>
-              </cat-menu-item>
-              <cat-menu-item icon="bookmark-outlined">Saved</cat-menu-item>
-            </cat-menu>
-          </div>
-
-          <h3>Menu Placement Examples</h3>
-          <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
-            <cat-menu placement="bottom-start" trigger-label="Bottom start menu">
-              <cat-menu-item icon="align-left">Bottom start (default)</cat-menu-item>
-              <cat-menu-item>Item 2</cat-menu-item>
-              <cat-menu-item>Item 3</cat-menu-item>
-            </cat-menu>
-
-            <cat-menu placement="bottom-end" trigger-label="Bottom end menu">
-              <cat-menu-item icon="align-right">Bottom end</cat-menu-item>
-              <cat-menu-item>Item 2</cat-menu-item>
-              <cat-menu-item>Item 3</cat-menu-item>
-            </cat-menu>
-
-            <cat-menu placement="top-start" trigger-label="Top start menu">
-              <cat-menu-item icon="arrow-up">Top start</cat-menu-item>
-              <cat-menu-item>Item 2</cat-menu-item>
-              <cat-menu-item>Item 3</cat-menu-item>
-            </cat-menu>
-          </div>
-
-          <h3>Arrow Navigation Modes</h3>
-          <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
-            <!-- Vertical navigation (default) -->
-            <cat-menu
-              arrow-navigation="vertical"
-              trigger-label="Vertical navigation (default)"
-              trigger-icon="arrows-vertical"
-            >
-              <cat-menu-item icon="arrow-up-down-filled">Arrow Up/Down navigation</cat-menu-item>
-              <cat-menu-item icon="list-outlined">Default for dropdown menus</cat-menu-item>
-              <cat-menu-item icon="menu-outlined">Vertical orientation (ARIA)</cat-menu-item>
-              <cat-menu-item icon="keyboard-outlined">Standard menu pattern</cat-menu-item>
-            </cat-menu>
-
-            <!-- Horizontal navigation -->
-            <cat-menu
-              arrow-navigation="horizontal"
-              trigger-label="Horizontal navigation"
-              trigger-icon="arrows-horizontal"
-              placement="bottom-start"
-            >
-              <cat-menu-item icon="arrow-left-right-filled">Arrow Left/Right navigation</cat-menu-item>
-              <cat-menu-item icon="columns-outlined">Ideal for toolbar menus</cat-menu-item>
-              <cat-menu-item icon="layout-outlined">Horizontal orientation (ARIA)</cat-menu-item>
-              <cat-menu-item icon="keyboard-outlined">Alternative menu pattern</cat-menu-item>
-            </cat-menu>
+              </cat-tabs>
+
+              <cat-tabs adaptive active-tab-always-visible tabs-align="justify">
+                <cat-tab id="tab2" label="First"></cat-tab>
+                <cat-tab label="Second"></cat-tab>
+                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+                <cat-tab label="Fourth Fourth" icon="sparkle-filled"></cat-tab>
+                <cat-tab label="Fifth" icon="sparkle-filled"></cat-tab>
+                <cat-tab label="Sixth" icon="sparkle-filled"></cat-tab>
+                <cat-tab label="Seventh Seventh" icon="sparkle-filled"></cat-tab>
+                <cat-tab label="Eighth" icon="sparkle-filled"></cat-tab>
+                <cat-tab sticky label="Ninth" icon="sparkle-filled"></cat-tab>
+                <cat-tab label="Tenth" icon="sparkle-filled"></cat-tab>
+              </cat-tabs>
+            </section>
+
+            <section id="tags">
+              <h2>Tags</h2>
+              <cat-tag label="Tag Input" placeholder="Placeholder" hint="this is a hint"></cat-tag>
+              <cat-tag label="Tag Input" placeholder="Placeholder" disabled="true"></cat-tag>
+            </section>
+
+            <section id="textarea">
+              <h2>Textarea</h2>
+              <cat-textarea label="Label" max-length="100"></cat-textarea>
+              <h3>Slotted Counter</h3>
+              <cat-textarea label="Custom counter">
+                <span slot="counter">Show any text here</span>
+              </cat-textarea>
+              <h3>Counter w/o label</h3>
+              <cat-textarea max-length="100"></cat-textarea>
+            </section>
+
+            <section id="toggle" class="cat-form">
+              <h2>Toggle</h2>
+              <cat-toggle label="Toggle" hint="This is a hint!" label-left style="width: 500px">
+                <span slot="hint">This is another!</span>
+              </cat-toggle>
+              <cat-toggle label="Toggle"></cat-toggle>
+              <cat-toggle><label slot="label">Slotted Label</label></cat-toggle>
+              <cat-toggle label="Disabled" disabled></cat-toggle>
+              <cat-toggle label="Checked" checked></cat-toggle>
+              <cat-toggle label="Checked disabled" checked disabled></cat-toggle>
+              <cat-toggle label="Not priority label"><label slot="label">Priority Label</label></cat-toggle>
+              <cat-toggle label="Hidden label" label-hidden="true"></cat-toggle>
+            </section>
+
+            <section id="tooltip">
+              <h2>Tooltip</h2>
+              <cat-tooltip content="This is a tooltip">
+                <cat-button>Button</cat-button>
+              </cat-tooltip>
+              <cat-tooltip>
+                <cat-button>Button</cat-button>
+                <div slot="content">
+                  <h2>Tooltip</h2>
+                  <p>This is a <b>fancy</b> tooltip<br />with some more lines.</p>
+                </div>
+              </cat-tooltip>
+              <h3>Size</h3>
+              <cat-tooltip size="s" content="This is a small tooltip">
+                <p class="cat-inline-flex">Hover Me (S)</p>
+              </cat-tooltip>
+              <br />
+              <cat-tooltip size="s" round="true" content="This is a small tooltip">
+                <p class="cat-inline-flex">Hover Me (S round)</p>
+              </cat-tooltip>
+              <br />
+              <cat-tooltip size="m" content="This is a regular tooltip">
+                <p class="cat-inline-flex">Hover Me (M)</p>
+              </cat-tooltip>
+              <br />
+              <cat-tooltip size="m" round="true" content="This is a regular tooltip">
+                <p class="cat-inline-flex">Hover Me (M round)</p>
+              </cat-tooltip>
+              <br />
+              <cat-tooltip size="l" content="This is a large tooltip">
+                <p class="cat-inline-flex">Hover Me (L)</p>
+              </cat-tooltip>
+              <br />
+              <cat-tooltip size="l" round="true" content="This is a large tooltip">
+                <p class="cat-inline-flex">Hover Me (L round)</p>
+              </cat-tooltip>
+              <h3>Round</h3>
+              <cat-tooltip round="true" content="This is a round tooltip">
+                <p class="cat-inline-flex">Hover Me (round)</p>
+              </cat-tooltip>
+              <h3>Async</h3>
+              <cat-tooltip id="async-tooltip" placement="bottom-end">
+                <p class="cat-inline-flex">Hover Me (async)</p>
+              </cat-tooltip>
+              <script>
+                const tooltipElem = document.getElementById('async-tooltip');
+                setInterval(() => {
+                  tooltipElem.content = 'This is an async tooltip';
+                }, 1000);
+              </script>
+            </section>
           </div>
-        </section>
-
-        <section id="form">
-          <h2>Form</h2>
-          <form class="cat-form" action="." method="GET">
-            <cat-input name="field1" label="Field 1" value="value1"></cat-input>
-            <cat-textarea name="field2" label="Field 2" value="value2"></cat-textarea>
-            <cat-checkbox name="field3" label="Field 3" value="value3" checked></cat-checkbox>
-            <cat-toggle name="field4" label="Field 4" value="value4" checked></cat-toggle>
-            <cat-button submit="true">Submit</cat-button>
-          </form>
-        </section>
-
-        <section id="form-group" class="cat-form">
-          <h2>Form Group</h2>
-          <cat-form-group>
-            <cat-input label="Field 1" max-length="30"></cat-input>
-            <cat-input label="Field 2" required></cat-input>
-          </cat-form-group>
-
-          <h3>Alignment (horizontal)</h3>
-          <cat-form-group label-size="40%" horizontal>
-            <cat-input hint="This is a hint" required max-length="98">
-              <span slot="label">This is the <b>label</b></span>
-            </cat-input>
-            <cat-input hint="NO LABEL" required></cat-input>
-            <cat-input label="Label" label-hidden="true" hint="NO LABEL" required></cat-input>
-            <cat-input label="Field 1" hint="This is a hint"></cat-input>
-            <cat-input
-              label="Field 1"
-              hint="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
-            ></cat-input>
-            <cat-input
-              label="This is a very long label with some more text"
-              required
-              hint="This is a hint"
-            ></cat-input>
-            <cat-textarea max-length="50" label="Label" hint="This is a hint"></cat-textarea>
-            <cat-select label="Field 3"></cat-select>
-            <cat-datepicker clearable="true" a11y-label="ARIA" label="Date picker"></cat-datepicker>
-          </cat-form-group>
-
-          <h3>Auto (more required)</h3>
-          <cat-form-group>
-            <cat-input label="Field 1"></cat-input>
-            <cat-input label="Field 2" required></cat-input>
-            <cat-textarea label="Field 3" required></cat-textarea>
-          </cat-form-group>
-
-          <h3>Auto (more optional)</h3>
-          <cat-form-group>
-            <cat-input label="Field 1"></cat-input>
-            <cat-input label="Field 2"></cat-input>
-            <cat-textarea label="Field 3" required></cat-textarea>
-          </cat-form-group>
-
-          <h3>None marker</h3>
-          <cat-form-group required-marker="none">
-            <cat-input label="Field 1"></cat-input>
-            <cat-input label="Field 2"></cat-input>
-            <cat-textarea label="Field 3" required></cat-textarea>
-          </cat-form-group>
-
-          <h3>Only mark optional</h3>
-          <cat-form-group required-marker="optional">
-            <cat-input label="Field 1"></cat-input>
-            <cat-input label="Field 2"></cat-input>
-            <cat-textarea label="Field 3" required></cat-textarea>
-          </cat-form-group>
-
-          <h3>Only mark required</h3>
-          <cat-form-group required-marker="required">
-            <cat-input label="Field 1"></cat-input>
-            <cat-input label="Field 2" required></cat-input>
-            <cat-textarea label="Field 3" required></cat-textarea>
-          </cat-form-group>
-
-          <h3>Dynamic field added</h3>
-          <cat-form-group id="form-group-1">
-            <cat-input id="cat-input-1" label="Field 1"></cat-input>
-            <cat-input label="Field 2" required></cat-input>
-          </cat-form-group>
-
           <script>
-            let input = document.getElementById('cat-input-1');
-            input.addEventListener('input', () => {
-              let elementById = document.getElementById('time2');
-              elementById.value = '13:58';
-            });
-            const formElem = document.getElementById('form-group-1');
-            setTimeout(() => {
-              const htmlElement = document.createElement('cat-input');
-              htmlElement.setAttribute('label', 'Field 3');
-              formElem.appendChild(htmlElement);
-            }, 5000);
+            // --- init navigation
+            const navbar = document.getElementById('nav');
+            const scrollspy = VanillaScrollspy(navbar);
+            scrollspy.init();
           </script>
-        </section>
-
-        <section id="icon">
-          <h2>Icon</h2>
-          <cat-icon icon="sparkle-filled"></cat-icon>
-
-          <h3>Color</h3>
-          <cat-icon icon="sparkle-filled" style="color: red"></cat-icon>
-          <cat-icon icon="sparkle-filled" style="color: blue"></cat-icon>
-          <cat-icon icon="sparkle-filled" style="color: green"></cat-icon>
-
-          <h3>Size</h3>
-          <cat-icon icon="sparkle-filled" size="xs"></cat-icon>
-          <cat-icon icon="sparkle-filled" size="s"></cat-icon>
-          <cat-icon icon="sparkle-filled" size="m"></cat-icon>
-          <cat-icon icon="sparkle-filled" size="l"></cat-icon>
-          <cat-icon icon="sparkle-filled" size="xl"></cat-icon>
-          <cat-icon icon="sparkle-filled" size="inline" style="font-size: 2.5rem"></cat-icon>
-
-          <h3>Ratio</h3>
-          <cat-icon icon="sp-grid-3-cols" style="--cat-icon-ratio: 2.5"></cat-icon>
-        </section>
-
-        <section id="input" class="cat-form">
-          <h2>Input</h2>
-          <cat-input label="Label" hint="This is a hint!" placeholder="I am the placeholder">
-            <span slot="hint">This is another!</span>
-          </cat-input>
-          <cat-input label="Label" max-length="100">
-            <span slot="label">Priority Label</span>
-          </cat-input>
-          <cat-input label="Label" loading>
-            <span slot="label">Loading</span>
-          </cat-input>
-          <h3>Types</h3>
-          <cat-input label="Color" type="color"></cat-input>
-          <cat-input label="Color" type="color" clearable="true"></cat-input>
-          <cat-input label="Email" type="email"></cat-input>
-          <cat-input label="File" type="file" accept="image/png, image/jpeg" multiple></cat-input>
-          <cat-input label="Number" type="number"></cat-input>
-          <cat-input label="Password" type="password"></cat-input>
-          <cat-input label="Range" type="range"></cat-input>
-          <cat-input label="Search" type="search"></cat-input>
-          <cat-input label="Tel" type="tel"></cat-input>
-          <cat-input label="Text" type="text"></cat-input>
-          <cat-input label="Url" type="url"></cat-input>
-          <h3>Slotted Counter</h3>
-          <cat-input label="Custom counter">
-            <span slot="counter">Show any text here</span>
-          </cat-input>
-        </section>
+        </div>
+      </div>
 
-        <section id="datepicker" class="cat-form">
-          <h2>Datepicker</h2>
-          <cat-date label="New Datepicker"></cat-date>
-          <cat-time id="time2" label="New Timepicker" value="12:00"></cat-time>
-          <cat-datepicker mode="date">
-            <span slot="label">Priority Label</span>
-            <span slot="hint">Priority Hint</span>
-          </cat-datepicker>
-          <cat-datepicker mode="datetime" label="Datetime" disabled></cat-datepicker>
-          <cat-datepicker mode="time" label="Time"></cat-datepicker>
-          <cat-datepicker mode="week" label="Week"></cat-datepicker>
-          <cat-datepicker mode="daterange" label="Daterange"></cat-datepicker>
-          <h3>Inline Datepicker (new)</h3>
-          <cat-date-inline
-            value="2022-06-21"
-            label="test this is"
-            a11y-label="This is an Aria test"
-          ></cat-date-inline>
-          <h3>Inline Datepicker</h3>
-          <cat-card class="cat-inline-flex cat-flex-col cat-border">
-            <h4>Datetime</h4>
-            <cat-datepicker-inline value="2022-06-21T00:00:000Z"></cat-datepicker-inline>
-          </cat-card>
-          <h3>Nested Datepicker</h3>
-          <cat-dropdown>
-            <cat-button slot="trigger" color="primary" variant="filled">Button</cat-button>
-            <div slot="content" class="cat-p-m">
-              <cat-input></cat-input>
-              <cat-datepicker mode="date" label="Date"></cat-datepicker>
-              <cat-datepicker mode="date" label="Date"></cat-datepicker>
+      <!-- CATALYST TEXT -->
+      <div id="tab-text-content" style="display: none">
+        <section id="typo" class="typography">
+          <!-- Sidebar -->
+          <aside>
+            <!-- Headings -->
+            <div class="cat-flex cat-flex-col cat-gap-s">
+              <h6 class="cat-muted cat-mb-l">Headline styles</h6>
+              <h1>Whereas recognition of the inherent dignity</h1>
+              <span class="cat-mono-s cat-muted">h1, .cat-h1</span>
+              <hr />
+              <h2>Whereas recognition of the inherent dignity</h2>
+              <span class="cat-mono-s cat-muted">h2, .cat-h2</span>
+              <hr />
+              <h3>Whereas recognition of the inherent dignity</h3>
+              <span class="cat-mono-s cat-muted">h3, .cat-h3</span>
+              <hr />
+              <h4>Whereas recognition of the inherent dignity</h4>
+              <span class="cat-mono-s cat-muted">h4, .cat-h4</span>
+              <hr />
+              <h5>Whereas recognition of the inherent dignity</h5>
+              <span class="cat-mono-s cat-muted">h5, .cat-h5</span>
+              <hr />
+              <h6>Whereas recognition of the inherent dignity</h6>
+              <span class="cat-mono-s cat-muted">h6, .cat-h6</span>
             </div>
-          </cat-dropdown>
-        </section>
-
-        <section id="notification">
-          <h2>Notification</h2>
-          <cat-button id="notification-trigger">Show Notifications</cat-button>
-          <script type="module">
-            import {catNotificationService} from '/build/index.esm.js';
-
-            document.getElementById('notification-trigger').onclick = function () {
-              catNotificationService.show('Item saved', {
-                autoClose: false,
-                closeButton: true,
-                action: 'Show saved items'
-              });
-              catNotificationService.show('This is light', {
-                mode: 'light',
-                closeButton: true,
-                icon: 'globe-outlined',
-                action: 'Seite neu laden'
-              });
-              catNotificationService.show('Article was saved', {
-                action: 'Undo'
-              });
-              catNotificationService.show('Es scheint als hättest du keine Internetverbindung mehr', {
-                icon: 'globe-outlined',
-                action: 'Seite neu laden'
-              });
-            };
-          </script>
-        </section>
-
-        <section id="pagination">
-          <h2>Pagination</h2>
-          <cat-pagination page-count="10" compact></cat-pagination>
-          <br/>
-          <br/>
-          <cat-pagination page-count="10" size="s"></cat-pagination>
-          <br/>
-          <br/>
-          <cat-pagination page-count="10"></cat-pagination>
-          <br/>
-          <br/>
-          <cat-pagination page-count="10" variant="outlined"></cat-pagination>
-          <br/>
-          <br/>
-          <span>Change event demo (See console)</span>
-          <cat-pagination id="change-demo" page-count="10" variant="outlined" round></cat-pagination>
-          <script>
-            var paginationDemo = document.getElementById('change-demo');
-
-            paginationDemo.addEventListener('catChange', function (event) {
-              console.log('Page changed!', event.detail);
-            });
-          </script>
-        </section>
-
-        <section id="radio" class="cat-form">
-          <h2>Radio</h2>
-          <cat-radio label="Label"></cat-radio>
-
-          <h3>Group</h3>
-          <cat-radio-group a11y-label="Radio Group 1" label-left>
-            <cat-radio value="one" label="Option 1 - Group 1" hint="This is a hint" checked></cat-radio>
-            <cat-radio value="two" label="Option 2 - Group 1" hint="This is a hint"></cat-radio>
-            <cat-radio value="three" label="Option 3 - Group 1" hint="This is a hint" disabled></cat-radio>
-          </cat-radio-group>
-
-          <h3>State</h3>
-          <cat-radio label="Disabled" disabled></cat-radio>
-          <cat-radio label="Checked" checked></cat-radio>
-          <cat-radio label="Checked disabled" checked disabled></cat-radio>
-
-          <h3>Alignment</h3>
-          <cat-radio label="Label" label-left></cat-radio>
-
-          <h3>Slots</h3>
-          <cat-radio hint="This is a hint!">
-            <span slot="label">This is the <b>label</b></span>
-            <span slot="hint">This is another!</span>
-          </cat-radio>
-        </section>
-
-        <section id="scrollable">
-          <h2>Scrollable</h2>
-          <cat-scrollable style="max-height: 8rem; width: 25vw">
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-          </cat-scrollable>
-        </section>
-
-        <section id="segmented-control">
-          <h2>Segmented Control</h2>
-
-          <h3>Default</h3>
-          <cat-segmented-control>
-            <cat-segment value="one">Option 1</cat-segment>
-            <cat-segment value="two">Option 2</cat-segment>
-            <cat-segment value="three">Option 3 with overflowing content</cat-segment>
-          </cat-segmented-control>
-
-          <h3>Sizes</h3>
-          <cat-segmented-control size="xs">
-            <cat-segment value="one">XS Option 1</cat-segment>
-            <cat-segment value="two">XS Option 2</cat-segment>
-            <cat-segment value="three">XS Option 3</cat-segment>
-          </cat-segmented-control>
-          <br/>
-          <br/>
-          <cat-segmented-control size="s">
-            <cat-segment value="one">S Option 1</cat-segment>
-            <cat-segment value="two">S Option 2</cat-segment>
-            <cat-segment value="three">S Option 3</cat-segment>
-          </cat-segmented-control>
-          <br/>
-          <br/>
-          <cat-segmented-control size="m">
-            <cat-segment value="one">M Option 1</cat-segment>
-            <cat-segment value="two">M Option 2</cat-segment>
-            <cat-segment value="three">M Option 3</cat-segment>
-          </cat-segmented-control>
-          <br/>
-          <br/>
-          <cat-segmented-control size="l">
-            <cat-segment value="one">L Option 1</cat-segment>
-            <cat-segment value="two">L Option 2</cat-segment>
-            <cat-segment value="three">L Option 3</cat-segment>
-          </cat-segmented-control>
-          <br/>
-          <br/>
-          <cat-segmented-control size="xl">
-            <cat-segment value="one">XL Option 1</cat-segment>
-            <cat-segment value="two">XL Option 2</cat-segment>
-            <cat-segment value="three">XL Option 3</cat-segment>
-          </cat-segmented-control>
-
-          <h3>Disabled</h3>
-          <cat-segmented-control disabled>
-            <cat-segment value="one">Option 1</cat-segment>
-            <cat-segment value="two">Option 2</cat-segment>
-            <cat-segment value="three">Option 3</cat-segment>
-          </cat-segmented-control>
-          <br/>
-          <br/>
-          <cat-segmented-control>
-            <cat-segment value="one">Option 1</cat-segment>
-            <cat-segment value="two" disabled>Option 2</cat-segment>
-            <cat-segment value="three">Option 3</cat-segment>
-          </cat-segmented-control>
-
-          <h3>Icons</h3>
-          <cat-segmented-control>
-            <cat-segment value="home" icon="bookmark-filled">Option 1</cat-segment>
-            <cat-segment value="settings" icon="camera-filled">Option 2</cat-segment>
-            <cat-segment value="star" icon="star-filled">Option 3</cat-segment>
-          </cat-segmented-control>
-
-          <h3>Icon Only</h3>
-          <cat-segmented-control size="xs">
-            <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
-            <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
-            <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
-          </cat-segmented-control>
-          <br/>
-          <br/>
-          <cat-segmented-control size="s">
-            <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
-            <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
-            <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
-          </cat-segmented-control>
-          <br/>
-          <br/>
-          <cat-segmented-control size="m">
-            <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
-            <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
-            <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
-          </cat-segmented-control>
-          <br/>
-          <br/>
-          <cat-segmented-control size="l">
-            <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
-            <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
-            <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
-          </cat-segmented-control>
-          <br/>
-          <br/>
-          <cat-segmented-control size="xl">
-            <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
-            <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
-            <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
-          </cat-segmented-control>
-        </section>
-
-        <section id="select">
-          <h2>Select</h2>
-          <cat-select-demo></cat-select-demo>
-        </section>
-
-        <section id="skeleton">
-          <h2>Skeleton</h2>
-          <cat-skeleton></cat-skeleton>
-
-          <h3>Effect</h3>
-          <cat-skeleton effect="plain"></cat-skeleton>
-          <br/>
-          <cat-skeleton effect="sheen"></cat-skeleton>
-          <br/>
-          <cat-skeleton effect="pulse"></cat-skeleton>
-
-          <h3>Variant</h3>
-          <cat-skeleton variant="square"></cat-skeleton>
-          <cat-skeleton variant="circle"></cat-skeleton>
-          <cat-skeleton variant="rectangle"></cat-skeleton>
-          <cat-skeleton variant="head"></cat-skeleton>
-          <cat-skeleton variant="body"></cat-skeleton>
-        </section>
-
-        <section id="spinner">
-          <h2>Spinner</h2>
-          <cat-spinner></cat-spinner>
-
-          <h3>Color</h3>
-          <cat-spinner style="color: red"></cat-spinner>
-          <cat-spinner style="color: blue"></cat-spinner>
-          <cat-spinner style="color: green"></cat-spinner>
-
-          <h3>Size</h3>
-          <cat-spinner size="xs"></cat-spinner>
-          <cat-spinner size="s"></cat-spinner>
-          <cat-spinner size="m"></cat-spinner>
-          <cat-spinner size="l"></cat-spinner>
-          <cat-spinner size="xl"></cat-spinner>
-          <cat-spinner size="inline" style="font-size: 2.5rem"></cat-spinner>
-        </section>
-
-        <section id="tabs">
-          <h2>Tabs</h2>
-          <cat-tabs>
-            <cat-tab id="tab1" label="First"></cat-tab>
-            <cat-tab label="Second"></cat-tab>
-            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-          </cat-tabs>
-          <h3>Alignment</h3>
-          <cat-tabs tabs-align="center">
-            <cat-tab label="First"></cat-tab>
-            <cat-tab label="Second"></cat-tab>
-            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-          </cat-tabs>
-          <br/>
-          <br/>
-          <cat-tabs tabs-align="right">
-            <cat-tab label="First"></cat-tab>
-            <cat-tab label="Second"></cat-tab>
-            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-          </cat-tabs>
-          <br/>
-          <br/>
-          <cat-tabs tabs-align="justify" active-tab="second">
-            <cat-tab label="First" deactivate></cat-tab>
-            <cat-tab label="Second" id="second"></cat-tab>
-            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-          </cat-tabs>
-          <script>
-            const tab = document.querySelector('#tab1');
-            setInterval(() => {
-              tab.deactivated = true;
-            }, 5000);
-          </script>
-          <h3>More</h3>
-          <cat-tabs>
-            <cat-tab id="tab1" label="First"></cat-tab>
-            <cat-tab label="Second"></cat-tab>
-            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-            <cat-dropdown slot="more">
-              <cat-button class="cat-tab cat-ml-auto" slot="trigger" variant="text">More</cat-button>
-              <nav slot="content">
-                <ul>
-                  <cat-button class="cat-nav-item">Nav item 1</cat-button>
-                  <cat-button class="cat-nav-item">Nav item 1</cat-button>
-                </ul>
-              </nav>
-            </cat-dropdown>
-          </cat-tabs>
-
-          <cat-tabs adaptive active-tab-always-visible tabs-align="justify">
-            <cat-tab id="tab2" label="First"></cat-tab>
-            <cat-tab label="Second"></cat-tab>
-            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-            <cat-tab label="Fourth Fourth" icon="sparkle-filled"></cat-tab>
-            <cat-tab label="Fifth" icon="sparkle-filled"></cat-tab>
-            <cat-tab label="Sixth" icon="sparkle-filled"></cat-tab>
-            <cat-tab label="Seventh Seventh" icon="sparkle-filled"></cat-tab>
-            <cat-tab label="Eighth" icon="sparkle-filled"></cat-tab>
-            <cat-tab sticky label="Ninth" icon="sparkle-filled"></cat-tab>
-            <cat-tab label="Tenth" icon="sparkle-filled"></cat-tab>
-          </cat-tabs>
-        </section>
-
-        <section id="tags">
-          <h2>Tags</h2>
-          <cat-tag label="Tag Input" placeholder="Placeholder" hint="this is a hint"></cat-tag>
-          <cat-tag label="Tag Input" placeholder="Placeholder" disabled="true"></cat-tag>
-        </section>
-
-        <section id="textarea">
-          <h2>Textarea</h2>
-          <cat-textarea label="Label" max-length="100"></cat-textarea>
-          <h3>Slotted Counter</h3>
-          <cat-textarea label="Custom counter">
-            <span slot="counter">Show any text here</span>
-          </cat-textarea>
-          <h3>Counter w/o label</h3>
-          <cat-textarea max-length="100"></cat-textarea>
-        </section>
-
-        <section id="toggle" class="cat-form">
-          <h2>Toggle</h2>
-          <cat-toggle label="Toggle" hint="This is a hint!" label-left style="width: 500px">
-            <span slot="hint">This is another!</span>
-          </cat-toggle>
-          <cat-toggle label="Toggle"></cat-toggle>
-          <cat-toggle><label slot="label">Slotted Label</label></cat-toggle>
-          <cat-toggle label="Disabled" disabled></cat-toggle>
-          <cat-toggle label="Checked" checked></cat-toggle>
-          <cat-toggle label="Checked disabled" checked disabled></cat-toggle>
-          <cat-toggle label="Not priority label"><label slot="label">Priority Label</label></cat-toggle>
-          <cat-toggle label="Hidden label" label-hidden="true"></cat-toggle>
-        </section>
-
-        <section id="tooltip">
-          <h2>Tooltip</h2>
-          <cat-tooltip content="This is a tooltip">
-            <cat-button>Button</cat-button>
-          </cat-tooltip>
-          <cat-tooltip>
-            <cat-button>Button</cat-button>
-            <div slot="content">
-              <h2>Tooltip</h2>
-              <p>This is a <b>fancy</b> tooltip<br/>with some more lines.</p>
+            <!-- Body styles -->
+            <div class="cat-flex cat-flex-col cat-gap-s">
+              <h6 class="cat-muted cat-mb-l">Body styles</h6>
+
+              <p class="cat-ellipsis-2 cat-lead">
+                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+                reputation. Everyone has the right to the protection of the law against such interference or attacks.
+              </p>
+              <span class="cat-mono-s cat-muted">Lead, .cat-lead</span>
+              <hr />
+              <p class="cat-ellipsis-2 cat-text-xl">
+                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+                reputation. Everyone has the right to the protection of the law against such interference or attacks.
+              </p>
+              <span class="cat-mono-s cat-muted">Body XL, .cat-text-xl</span>
+              <hr />
+              <p class="cat-ellipsis-2 cat-text-l">
+                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+                reputation. Everyone has the right to the protection of the law against such interference or attacks.
+              </p>
+              <span class="cat-mono-s cat-muted">Body L, .cat-text-l</span>
+              <hr />
+              <p class="cat-ellipsis-2">
+                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+                reputation. Everyone has the right to the protection of the law against such interference or attacks.
+              </p>
+              <span class="cat-mono-s cat-muted">Body M (Default), .cat-text-m</span>
+              <hr />
+              <p class="cat-ellipsis-2 cat-text-s">
+                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+                reputation. Everyone has the right to the protection of the law against such interference or attacks.
+              </p>
+              <span class="cat-mono-s cat-muted">Body S, .cat-text-s</span>
+              <hr />
+              <p class="cat-ellipsis-2 cat-text-xs">
+                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+                reputation. Everyone has the right to the protection of the law against such interference or attacks.
+              </p>
+              <span class="cat-mono-s cat-muted">Body XS, .cat-text-xs</span>
             </div>
-          </cat-tooltip>
-          <h3>Size</h3>
-          <cat-tooltip size="s" content="This is a small tooltip">
-            <p class="cat-inline-flex">Hover Me (S)</p>
-          </cat-tooltip>
-          <br/>
-          <cat-tooltip size="s" round="true" content="This is a small tooltip">
-            <p class="cat-inline-flex">Hover Me (S round)</p>
-          </cat-tooltip>
-          <br/>
-          <cat-tooltip size="m" content="This is a regular tooltip">
-            <p class="cat-inline-flex">Hover Me (M)</p>
-          </cat-tooltip>
-          <br/>
-          <cat-tooltip size="m" round="true" content="This is a regular tooltip">
-            <p class="cat-inline-flex">Hover Me (M round)</p>
-          </cat-tooltip>
-          <br/>
-          <cat-tooltip size="l" content="This is a large tooltip">
-            <p class="cat-inline-flex">Hover Me (L)</p>
-          </cat-tooltip>
-          <br/>
-          <cat-tooltip size="l" round="true" content="This is a large tooltip">
-            <p class="cat-inline-flex">Hover Me (L round)</p>
-          </cat-tooltip>
-          <h3>Round</h3>
-          <cat-tooltip round="true" content="This is a round tooltip">
-            <p class="cat-inline-flex">Hover Me (round)</p>
-          </cat-tooltip>
-          <h3>Async</h3>
-          <cat-tooltip id="async-tooltip" placement="bottom-end">
-            <p class="cat-inline-flex">Hover Me (async)</p>
-          </cat-tooltip>
-          <script>
-            const tooltipElem = document.getElementById('async-tooltip');
-            setInterval(() => {
-              tooltipElem.content = 'This is an async tooltip';
-            }, 1000);
-          </script>
-        </section>
-      </div>
-      <script>
-        // --- init navigation
-        const navbar = document.getElementById('nav');
-        const scrollspy = VanillaScrollspy(navbar);
-        scrollspy.init();
-      </script>
-    </div>
-  </div>
-
-  <!-- CATALYST TEXT -->
-  <div id="tab-text-content" style="display: none">
-    <section id="typo" class="typography">
-      <!-- Sidebar -->
-      <aside>
-        <!-- Headings -->
-        <div class="cat-flex cat-flex-col cat-gap-s">
-          <h6 class="cat-muted cat-mb-l">Headline styles</h6>
-          <h1>Whereas recognition of the inherent dignity</h1>
-          <span class="cat-mono-s cat-muted">h1, .cat-h1</span>
-          <hr/>
-          <h2>Whereas recognition of the inherent dignity</h2>
-          <span class="cat-mono-s cat-muted">h2, .cat-h2</span>
-          <hr/>
-          <h3>Whereas recognition of the inherent dignity</h3>
-          <span class="cat-mono-s cat-muted">h3, .cat-h3</span>
-          <hr/>
-          <h4>Whereas recognition of the inherent dignity</h4>
-          <span class="cat-mono-s cat-muted">h4, .cat-h4</span>
-          <hr/>
-          <h5>Whereas recognition of the inherent dignity</h5>
-          <span class="cat-mono-s cat-muted">h5, .cat-h5</span>
-          <hr/>
-          <h6>Whereas recognition of the inherent dignity</h6>
-          <span class="cat-mono-s cat-muted">h6, .cat-h6</span>
-        </div>
-        <!-- Body styles -->
-        <div class="cat-flex cat-flex-col cat-gap-s">
-          <h6 class="cat-muted cat-mb-l">Body styles</h6>
-
-          <p class="cat-ellipsis-2 cat-lead">
-            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-            reputation. Everyone has the right to the protection of the law against such interference or attacks.
-          </p>
-          <span class="cat-mono-s cat-muted">Lead, .cat-lead</span>
-          <hr/>
-          <p class="cat-ellipsis-2 cat-text-xl">
-            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-            reputation. Everyone has the right to the protection of the law against such interference or attacks.
-          </p>
-          <span class="cat-mono-s cat-muted">Body XL, .cat-text-xl</span>
-          <hr/>
-          <p class="cat-ellipsis-2 cat-text-l">
-            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-            reputation. Everyone has the right to the protection of the law against such interference or attacks.
-          </p>
-          <span class="cat-mono-s cat-muted">Body L, .cat-text-l</span>
-          <hr/>
-          <p class="cat-ellipsis-2">
-            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-            reputation. Everyone has the right to the protection of the law against such interference or attacks.
-          </p>
-          <span class="cat-mono-s cat-muted">Body M (Default), .cat-text-m</span>
-          <hr/>
-          <p class="cat-ellipsis-2 cat-text-s">
-            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-            reputation. Everyone has the right to the protection of the law against such interference or attacks.
-          </p>
-          <span class="cat-mono-s cat-muted">Body S, .cat-text-s</span>
-          <hr/>
-          <p class="cat-ellipsis-2 cat-text-xs">
-            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-            reputation. Everyone has the right to the protection of the law against such interference or attacks.
-          </p>
-          <span class="cat-mono-s cat-muted">Body XS, .cat-text-xs</span>
-        </div>
-      </aside>
-      <!-- Example typesetting -->
-      <article class="cat-article example">
-        <h6 class="cat-muted cat-mb-l">Example article</h6>
-        <h1>Typesetting test</h1>
-        <p class="cat-lead">
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-          et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-          Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
-          amet.
-        </p>
-        <figure>
-          <img
-            src="https://cdn.sanity.io/images/599r6htc/localized/10e55cde1be89fb32aa3d7414fa3cd83b0859a51-3264x1836.jpg"
-            alt=""
-          />
-        </figure>
-        <h2>Dolor Vero</h2>
-        <h3>Consetetur sadipscing elitr</h3>
-        <p>
-          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
-          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
-          accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
-          ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
-          consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
-          qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor
-          sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
-          aliquam erat volutpat.
-        </p>
-        <p>
-          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
-          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
-        </p>
-        <h2>Lorem Ipsum</h2>
-        <p>
-          Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
-          ea commodo consequat.
-        </p>
-        <h3>Vulputate velit esse</h3>
-        <p>
-          Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
-          eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
-          zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
-          option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
-        </p>
-        <ol>
-          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-          <li>Integer nec odio. Praesent libero.</li>
-          <li>Sed cursus ante dapibus diam. Sed nisi.</li>
-          <li>Nulla quis sem at nibh elementum imperdiet.</li>
-          <li>Duis sagittis ipsum. Praesent mauris.</li>
-          <li>Fusce nec tellus sed augue semper porta.</li>
-          <li>Mauris massa. Vestibulum lacinia arcu eget nulla.</li>
-          <li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
-          <li>Curabitur sodales ligula in libero.</li>
-          <li>Sed dignissim lacinia nunc. Curabitur tortor.</li>
-        </ol>
-        <hr/>
-        <h2>What does all of that mean for us?</h2>
-        <p>
-          Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
-          amet, consetetur sadipscing elitr.
-        </p>
-        <blockquote>
-          "The only way to do great work is to love what you do."
-          <span>– Steve Jobs</span>
-        </blockquote>
-        <h3>Understanding Employee Engagement</h3>
-        <figure>
-          <iframe
-            width="100%"
-            height="350px"
-            src="https://www.youtube-nocookie.com/embed/2t2BBU0gdO0?controls=0"
-            title="YouTube video player"
-            frameborder="0"
-            allow="
+          </aside>
+          <!-- Example typesetting -->
+          <article class="cat-article example">
+            <h6 class="cat-muted cat-mb-l">Example article</h6>
+            <h1>Typesetting test</h1>
+            <p class="cat-lead">
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+              et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+              Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+              amet.
+            </p>
+            <figure>
+              <img
+                src="https://cdn.sanity.io/images/599r6htc/localized/10e55cde1be89fb32aa3d7414fa3cd83b0859a51-3264x1836.jpg"
+                alt=""
+              />
+            </figure>
+            <h2>Dolor Vero</h2>
+            <h3>Consetetur sadipscing elitr</h3>
+            <p>
+              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+              sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+              nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+              accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+              ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
+              consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
+              qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor
+              sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
+              aliquam erat volutpat.
+            </p>
+            <p>
+              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+              sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
+            </p>
+            <h2>Lorem Ipsum</h2>
+            <p>
+              Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+              ea commodo consequat.
+            </p>
+            <h3>Vulputate velit esse</h3>
+            <p>
+              Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
+              eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
+              zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
+              option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
+            </p>
+            <ol>
+              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+              <li>Integer nec odio. Praesent libero.</li>
+              <li>Sed cursus ante dapibus diam. Sed nisi.</li>
+              <li>Nulla quis sem at nibh elementum imperdiet.</li>
+              <li>Duis sagittis ipsum. Praesent mauris.</li>
+              <li>Fusce nec tellus sed augue semper porta.</li>
+              <li>Mauris massa. Vestibulum lacinia arcu eget nulla.</li>
+              <li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
+              <li>Curabitur sodales ligula in libero.</li>
+              <li>Sed dignissim lacinia nunc. Curabitur tortor.</li>
+            </ol>
+            <hr />
+            <h2>What does all of that mean for us?</h2>
+            <p>
+              Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+              amet, consetetur sadipscing elitr.
+            </p>
+            <blockquote>
+              "The only way to do great work is to love what you do."
+              <span>– Steve Jobs</span>
+            </blockquote>
+            <h3>Understanding Employee Engagement</h3>
+            <figure>
+              <iframe
+                width="100%"
+                height="350px"
+                src="https://www.youtube-nocookie.com/embed/2t2BBU0gdO0?controls=0"
+                title="YouTube video player"
+                frameborder="0"
+                allow="
                   accelerometer;
                   autoplay;
                   clipboard-write;
@@ -1701,39 +1690,23 @@ <h3>Understanding Employee Engagement</h3>
                   picture-in-picture;
                   web-share;
                 "
-            allowfullscreen
-          ></iframe>
-        </figure>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Employee engagement is crucial for an
-          organization's growth and productivity. It's more than just job satisfaction; it's the enthusiasm and
-          involvement an employee has towards their work and the organization's mission.
-        </p>
-
-        <h4>The Benefits of High Engagement</h4>
-        <p>
-          Engaged employees tend to be more productive, have higher job satisfaction, and are more likely to stay
-          with their current employer. They contribute positively to the organizational culture and foster
-          collaboration amongst peers.
-        </p>
-
-        <h5>Key Benefits Include:</h5>
-        <ul>
-          <li>Increased productivity and performance</li>
-          <li>Higher retention rates</li>
-          <li>Improved workplace morale</li>
-          <li>Enhanced company reputation</li>
-          <li>Higher customer satisfaction</li>
-        </ul>
-
-        <dl>
-          <dt>Employee Engagement</dt>
-          <dd>
-            Refers to the enthusiasm and involvement an employee has towards their work and the organization's
-            mission.
-          </dd>
-          <dt>Benefits of High Engagement</dt>
-          <dd>
+                allowfullscreen
+              ></iframe>
+            </figure>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Employee engagement is crucial for an
+              organization's growth and productivity. It's more than just job satisfaction; it's the enthusiasm and
+              involvement an employee has towards their work and the organization's mission.
+            </p>
+
+            <h4>The Benefits of High Engagement</h4>
+            <p>
+              Engaged employees tend to be more productive, have higher job satisfaction, and are more likely to stay
+              with their current employer. They contribute positively to the organizational culture and foster
+              collaboration amongst peers.
+            </p>
+
+            <h5>Key Benefits Include:</h5>
             <ul>
               <li>Increased productivity and performance</li>
               <li>Higher retention rates</li>
@@ -1741,132 +1714,148 @@ <h5>Key Benefits Include:</h5>
               <li>Enhanced company reputation</li>
               <li>Higher customer satisfaction</li>
             </ul>
-          </dd>
-          <dt>Strategies to Enhance Engagement</dt>
-          <dd>
-            Building a strong engagement strategy requires a deep understanding of the employees' needs,
-            aspirations, and concerns. Regular feedback, transparent communication, and consistent recognition play
-            pivotal roles.
-          </dd>
-        </dl>
-
-        <h4>Strategies to Enhance Engagement</h4>
-        <p>
-          Building a strong engagement strategy requires a deep understanding of the employees' needs, aspirations,
-          and concerns. Regular feedback, transparent communication, and consistent recognition play pivotal roles
-          in this aspect.
-        </p>
-
-        <h5>Tips for Effective Engagement:</h5>
-        <ul>
-          <li>Regular one-on-one meetings</li>
-          <li>Provide growth opportunities</li>
-          <li>Recognize and reward achievements</li>
-          <li>Promote work-life balance</li>
-          <li>Encourage team collaborations and events</li>
-        </ul>
-
-        <h3>Measuring Employee Engagement</h3>
-        <p>
-          Understanding the level of engagement in an organization is essential for its continual improvement.
-          Surveys, feedback sessions, and monitoring key performance indicators can provide valuable insights.
-        </p>
-      </article>
-    </section>
-  </div>
-
-  <!-- CATALYST ICONS -->
-  <div id="tab-icon-content" style="display: none">
-    <iframe
-      src="https://haiilo.github.io/catalyst-icons/"
-      frameborder="0"
-      scrolling="no"
-      width="100%"
-      height="26500px"
-    ></iframe>
-  </div>
-
-  <!-- Switches -->
-  <div class="switches">
-    <cat-button size="s" class="cat-elevation-1" id="toggleSS3">Switch to Source Sans 3</cat-button>
-    <cat-button size="s" class="cat-elevation-1" id="toggleTheme">Use custom theme</cat-button>
-  </div>
-
-  <script>
-    document.getElementById('tabs-top').addEventListener('catChange', function (e) {
-      document.getElementById('tab-comp-content').style.display = e.detail.index === 0 ? 'block' : 'none';
-      document.getElementById('tab-text-content').style.display = e.detail.index === 1 ? 'block' : 'none';
-      document.getElementById('tab-icon-content').style.display = e.detail.index === 2 ? 'block' : 'none';
-    });
-  </script>
-
-  <script>
-    const body = document.body;
-    const font = document.getElementById('toggleSS3');
-    font.addEventListener('click', function () {
-      if (body.classList.contains('ss3')) {
-        body.classList.remove('ss3');
-        font.innerHTML = 'Switch to Source Sans 3';
-      } else {
-        body.classList.add('ss3');
-        font.innerHTML = 'Switch to Lato';
-      }
-    });
-    const theme = document.getElementById('toggleTheme');
-    theme.addEventListener('click', function () {
-      if (body.classList.contains('custom-theme')) {
-        body.classList.remove('custom-theme');
-        theme.innerHTML = 'Use custom theme';
-      } else {
-        body.classList.add('custom-theme');
-        theme.innerHTML = 'Use default theme';
-      }
-    });
-  </script>
-
-  <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      const headings = [
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-        '.cat-h1',
-        '.cat-h2',
-        '.cat-h3',
-        '.cat-h4',
-        '.cat-h5',
-        '.cat-h6'
-      ];
-
-      headings.forEach(selector => {
-        document.querySelectorAll(selector).forEach(element => {
-          const nextSibling = element.nextElementSibling;
-
-          if (nextSibling) {
-            // For the first condition
-            if (headings.some(heading => nextSibling.matches(heading))) {
-              element.classList.add('type-space-small');
-            }
-
-            // For the second condition
-            const secondConditionSelectors = [
-              ...['h3', 'h4', 'h5', 'h6', '.cat-h3', '.cat-h4', '.cat-h5', '.cat-h6'].filter(sel =>
-                element.matches(sel)
-              ),
-              ...(element.matches('p') && nextSibling.matches('p') ? ['p'] : [])
-            ];
-
-            if (secondConditionSelectors.length && ['ul', 'ol', 'p'].some(sel => nextSibling.matches(sel))) {
-              element.classList.add('type-space-medium');
-            }
+
+            <dl>
+              <dt>Employee Engagement</dt>
+              <dd>
+                Refers to the enthusiasm and involvement an employee has towards their work and the organization's
+                mission.
+              </dd>
+              <dt>Benefits of High Engagement</dt>
+              <dd>
+                <ul>
+                  <li>Increased productivity and performance</li>
+                  <li>Higher retention rates</li>
+                  <li>Improved workplace morale</li>
+                  <li>Enhanced company reputation</li>
+                  <li>Higher customer satisfaction</li>
+                </ul>
+              </dd>
+              <dt>Strategies to Enhance Engagement</dt>
+              <dd>
+                Building a strong engagement strategy requires a deep understanding of the employees' needs,
+                aspirations, and concerns. Regular feedback, transparent communication, and consistent recognition play
+                pivotal roles.
+              </dd>
+            </dl>
+
+            <h4>Strategies to Enhance Engagement</h4>
+            <p>
+              Building a strong engagement strategy requires a deep understanding of the employees' needs, aspirations,
+              and concerns. Regular feedback, transparent communication, and consistent recognition play pivotal roles
+              in this aspect.
+            </p>
+
+            <h5>Tips for Effective Engagement:</h5>
+            <ul>
+              <li>Regular one-on-one meetings</li>
+              <li>Provide growth opportunities</li>
+              <li>Recognize and reward achievements</li>
+              <li>Promote work-life balance</li>
+              <li>Encourage team collaborations and events</li>
+            </ul>
+
+            <h3>Measuring Employee Engagement</h3>
+            <p>
+              Understanding the level of engagement in an organization is essential for its continual improvement.
+              Surveys, feedback sessions, and monitoring key performance indicators can provide valuable insights.
+            </p>
+          </article>
+        </section>
+      </div>
+
+      <!-- CATALYST ICONS -->
+      <div id="tab-icon-content" style="display: none">
+        <iframe
+          src="https://haiilo.github.io/catalyst-icons/"
+          frameborder="0"
+          scrolling="no"
+          width="100%"
+          height="26500px"
+        ></iframe>
+      </div>
+
+      <!-- Switches -->
+      <div class="switches">
+        <cat-button size="s" class="cat-elevation-1" id="toggleSS3">Switch to Source Sans 3</cat-button>
+        <cat-button size="s" class="cat-elevation-1" id="toggleTheme">Use custom theme</cat-button>
+      </div>
+
+      <script>
+        document.getElementById('tabs-top').addEventListener('catChange', function (e) {
+          document.getElementById('tab-comp-content').style.display = e.detail.index === 0 ? 'block' : 'none';
+          document.getElementById('tab-text-content').style.display = e.detail.index === 1 ? 'block' : 'none';
+          document.getElementById('tab-icon-content').style.display = e.detail.index === 2 ? 'block' : 'none';
+        });
+      </script>
+
+      <script>
+        const body = document.body;
+        const font = document.getElementById('toggleSS3');
+        font.addEventListener('click', function () {
+          if (body.classList.contains('ss3')) {
+            body.classList.remove('ss3');
+            font.innerHTML = 'Switch to Source Sans 3';
+          } else {
+            body.classList.add('ss3');
+            font.innerHTML = 'Switch to Lato';
           }
         });
-      });
-    });
-  </script>
-</div>
-</body>
+        const theme = document.getElementById('toggleTheme');
+        theme.addEventListener('click', function () {
+          if (body.classList.contains('custom-theme')) {
+            body.classList.remove('custom-theme');
+            theme.innerHTML = 'Use custom theme';
+          } else {
+            body.classList.add('custom-theme');
+            theme.innerHTML = 'Use default theme';
+          }
+        });
+      </script>
+
+      <script>
+        document.addEventListener('DOMContentLoaded', function () {
+          const headings = [
+            'h1',
+            'h2',
+            'h3',
+            'h4',
+            'h5',
+            'h6',
+            '.cat-h1',
+            '.cat-h2',
+            '.cat-h3',
+            '.cat-h4',
+            '.cat-h5',
+            '.cat-h6'
+          ];
+
+          headings.forEach(selector => {
+            document.querySelectorAll(selector).forEach(element => {
+              const nextSibling = element.nextElementSibling;
+
+              if (nextSibling) {
+                // For the first condition
+                if (headings.some(heading => nextSibling.matches(heading))) {
+                  element.classList.add('type-space-small');
+                }
+
+                // For the second condition
+                const secondConditionSelectors = [
+                  ...['h3', 'h4', 'h5', 'h6', '.cat-h3', '.cat-h4', '.cat-h5', '.cat-h6'].filter(sel =>
+                    element.matches(sel)
+                  ),
+                  ...(element.matches('p') && nextSibling.matches('p') ? ['p'] : [])
+                ];
+
+                if (secondConditionSelectors.length && ['ul', 'ol', 'p'].some(sel => nextSibling.matches(sel))) {
+                  element.classList.add('type-space-medium');
+                }
+              }
+            });
+          });
+        });
+      </script>
+    </div>
+  </body>
 </html>

From db2b9e5c2fc8fc7c8d59678c23c6198cc9e0dfda Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Tue, 11 Aug 2026 12:06:56 +0200
Subject: [PATCH 10/42] feat(core): add segmented control screenshot tests

---
 README.md                                     |   4 +-
 core/.gitignore                               |   1 +
 ...nshot-disabled-group-1-chromium-darwin.png | Bin 0 -> 4470 bytes
 ...hot-disabled-segment-1-chromium-darwin.png | Bin 0 -> 4922 bytes
 ...hot-focus-on-segment-1-chromium-darwin.png | Bin 0 -> 5585 bytes
 ...hot-hover-on-segment-1-chromium-darwin.png | Bin 0 -> 5289 bytes
 ...l-screenshot-renders-1-chromium-darwin.png | Bin 0 -> 4997 bytes
 ...-with-active-segment-1-chromium-darwin.png | Bin 0 -> 9220 bytes
 ...hot-size-l-with-icon-1-chromium-darwin.png | Bin 0 -> 10815 bytes
 ...ize-l-with-icon-only-1-chromium-darwin.png | Bin 0 -> 3464 bytes
 ...l-with-text-and-icon-1-chromium-darwin.png | Bin 0 -> 10815 bytes
 ...-with-active-segment-1-chromium-darwin.png | Bin 0 -> 9705 bytes
 ...hot-size-m-with-icon-1-chromium-darwin.png | Bin 0 -> 10903 bytes
 ...ize-m-with-icon-only-1-chromium-darwin.png | Bin 0 -> 2984 bytes
 ...m-with-text-and-icon-1-chromium-darwin.png | Bin 0 -> 10903 bytes
 ...-with-active-segment-1-chromium-darwin.png | Bin 0 -> 9830 bytes
 ...hot-size-s-with-icon-1-chromium-darwin.png | Bin 0 -> 10983 bytes
 ...ize-s-with-icon-only-1-chromium-darwin.png | Bin 0 -> 2965 bytes
 ...s-with-text-and-icon-1-chromium-darwin.png | Bin 0 -> 10983 bytes
 ...-with-active-segment-1-chromium-darwin.png | Bin 0 -> 12366 bytes
 ...ot-size-xl-with-icon-1-chromium-darwin.png | Bin 0 -> 14224 bytes
 ...ze-xl-with-icon-only-1-chromium-darwin.png | Bin 0 -> 3966 bytes
 ...l-with-text-and-icon-1-chromium-darwin.png | Bin 0 -> 14224 bytes
 ...-with-active-segment-1-chromium-darwin.png | Bin 0 -> 10100 bytes
 ...ot-size-xs-with-icon-1-chromium-darwin.png | Bin 0 -> 11135 bytes
 ...ze-xs-with-icon-only-1-chromium-darwin.png | Bin 0 -> 2919 bytes
 ...s-with-text-and-icon-1-chromium-darwin.png | Bin 0 -> 11135 bytes
 ...-with-active-segment-1-chromium-darwin.png | Bin 0 -> 5970 bytes
 ...h-overflowing-labels-1-chromium-darwin.png | Bin 0 -> 9071 bytes
 .../cat-segmented-control.screenshot.tsx      | 179 ++++++++++++++++++
 30 files changed, 182 insertions(+), 2 deletions(-)
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-disabled-group-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-disabled-segment-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-segment-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-hover-on-segment-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-renders-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-active-segment-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-icon-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-icon-only-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-text-and-icon-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-active-segment-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-icon-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-icon-only-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-text-and-icon-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-active-segment-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-icon-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-icon-only-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-text-and-icon-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-active-segment-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-icon-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-icon-only-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-text-and-icon-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-active-segment-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-icon-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-icon-only-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-text-and-icon-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-with-active-segment-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-with-overflowing-labels-1-chromium-darwin.png
 create mode 100644 core/src/components/cat-segmented-control/cat-segmented-control.screenshot.tsx

diff --git a/README.md b/README.md
index 8b5a9447..6b029d7c 100644
--- a/README.md
+++ b/README.md
@@ -117,13 +117,13 @@ Both local and CI reference screenshots are committed to the repository so that
 Screenshot tests are intentionally excluded from `pnpm run test`. To run them locally:
 
 ```
-pnpm run test:screenshot        # from core/
+pnpm run test:screenshot        # from repo root
 ```
 
 To update the local (macOS) reference screenshots after an intentional visual change:
 
 ```
-pnpm run test:screenshot:update # from core/
+pnpm run test:screenshot:update # from repo root
 ```
 
 This regenerates the `-darwin` screenshots and commits them alongside your changes.
diff --git a/core/.gitignore b/core/.gitignore
index 5cd374b7..6e75b111 100644
--- a/core/.gitignore
+++ b/core/.gitignore
@@ -2,6 +2,7 @@ dist/
 www/
 loader/
 coverage/
+.vitest-attachments/
 
 *~
 *.sw[mnpcod]
diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-disabled-group-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-disabled-group-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..e7641a6ed45a3f71886c6740e2f9bc0e1938b20b
GIT binary patch
literal 4470
zcmd5=dpy(a`!6kr4p<J&AvEWnJ>(F^9C~b(=g}mIMM-l?M3yoct>o}*rX|F}gGy3k
z)N%^NhQyK{jGPZk)EGG?-+RyZ`}_O%`u+a;?vGuc`*YvBU)O!z*Y$p1?<F6@9^Sc4
zb=#&*n|3-KK_B0=Nn#m1ACr~@-yx#SPMbDCZJp2uPeg70`g+CV#M0~Lxux}voRl12
zwZ)^#O3=*gdmOt^EW>BjaihCPu#ouN$=Uq%ufsQ79UNRClKedZRad`}qPxs&?`ofP
zJC-{)AC3EIuLT!>bYK6+HvYHS$=gaOxn{#*qFt_FL>ss&+Q{4r!|&(9)n%cklJvr+
zN%;wp5wRJAMx!5`Sax_lZxA(HxfSlq2x>Ys{<sVY$rYrvPR_+>LZMLl@r<k9pME1p
zncpx`h6@=Z@>Ul&^OnF2bVWWYH+4)|9=UCY)YD<&_@3S3^>R*wm*!BK^riOj2KA!r
zNl8g9i3Y;Tq}s5AEt5nIaqKkVym=^bNc^i6FrO5Ygc@=jCz*+#TgbB{^q|d6@pIDM
z9sjGXC2ZwsXSNaEf0)|y!A4~;{f1z#h#gUd+R7W#BIfe?Rwe6%gkBU+o6$b9W(N-|
z1fE6^WlveZa*Wn*tQod4qK#?64>M9~%?K{JrUz{Q&|_$y#U&)HLbMy34Jpk;wF}c~
z=r_Lm_Pv#f%H<8!t&<z_HWs90)5ffRM3Jc9Q;ydC7~M4&wS(TnZ}qDrEp7hAxO<kA
z>VQ&ySYMj>t>emI!gTe6lifk*FFptobt2N-%<jWJ7uJ_D8i%Wm@GteF>h6x_A!y$(
zn_e!^r1xZ96WuMI!kO~bH@BIZf7FMm*kN&~j($(CA+24qZmzD_hWVJEi(lm+KYtY2
zhkIstoK&f?J!q7vEuV^6X|L+i3BDjtFKpHlHl<o}D+$8QT-fSbG)zPF!Lx_SAKz}T
zTV35}e6okAW}h;IA6YTQa6Qc}K6c&@8Q%Z!s%Z>~co!T>!VX^gvYP$c!^cPWh3E!5
zLoXpwa!NS;8rGO|O>TLPYZZo{;HX;0RySTu&JKRtHu|yqB*8Pb+V=JQL&at(+NHTS
zxa_o@sBF@^nX#gz89}oe{!`V`Cj5?dlI;$;ogcbCpo1s2`jANJyGy2PQ}Vb%)@)1`
z9FI^{`x1n;2=`?BJW_dOcc{g}+v;j|g|_4PypcWiXS{%z)Y6I9PW;x|we@)M?&mLb
zkT$0ACJ8>55Bh}d9*T)eVc@T>h$uW0?yTMwQ{>|6cwvS5qpx2xz3U=!94-*<+~Vk>
z&lC+4KP^wml7}`H;qK|_iaQs-?~fJOx$IUZqBf{Zn#Ca6I>)#45jXnh>>3Y=AU6A6
zGUTuZjU-p2r9r&r>f_e4IUN7!>OLrc`v2z3N+54@-XFV-<tZ4MN@m+Ya$>D>QSp<f
zXf#b(4S88kU(*+tKp#<n;d`Gwd2;7<orVUMHydM!@%rOVN#V=KB_*85)4A`AhpV^V
zIlA+{y;)NSHlt=qb97C^ELDK>#<ILfr*GsdtV2Kyt4K?M-QAWlI>99>Ds~6`F-Wp_
zk7v*HGTTiyLg*kO+JcVzZ(xmQSe|#gGxQ{-qKS2t@7|2=f|pj*KL5=q6JJ)E`Q+{I
zSIoHKs~<1r+WG`U1SfzH9si}|lWKkQEkaS1&D`y0Uqj(^>A*ynJI)s28zbhad8jQh
zMm|;CGhq9I@&fgtC8GISd={TrUWMokx;w~}U8P0(;*^Wi-7kVv^!seJ6dQX46rgHK
z#J6{bs?!QHO6<_sxGA`j(u5)|;}#2nUYrjXK{Nb8QIJg%2A(|Gr!q4=GP1CPmw6my
zLX~wirMmi*ch5xY4+*B17XM?zikaigj9=BYjlFe3lliDz&V*vk-#xl8>rR)mYyR2&
zSK|UgNofuR>}(M56DRK~RDwPF`hp|)>hnBhndcUkVqd5xGm%e=(wK`U&#??JOgAlg
znZy4SS>oGy6e!imWYv)VN%uQPze6luvSnuc%$%|9W!2Rk?~`MzZTdY=VJ``P>d=qe
zLl-1CfGha5RqxcDqtA61y@S|_I+l}`&?;trz`(2D7)c7go%`*|$sUX4$r@J?&GD>0
z!*{h)z2CTtx<j*w#iHHf_y+_Ci0R>0@A&k+Z$~eo2b;Lv7Gys++tPFW7QhwYP_AH1
z2_;%Vc^nR-gX@@FaFXb`m;!+Paq$x!4GJ{K$)fX4NP#XNjYDy{lgiBLT~YfFG_Fgz
znOo?9=pIC<jtE-MYdE*d&u-ILiOE&NUkwTin;4&q^=|fGScT;ZSegE~6YlQksQE$X
z&)>S?p_LWl;AhO6Z}B61)D12RWq3GQ{H@UYsZXygt$jc8K;xG$){gqCQ{O`H=aHOO
zYiVe>@2+H3iFBn25Qu*}bnco>`zlwDTst<~ezh<pw0?Y{_+WH(Kkjt@Fhh8#)kc<_
z6Ou4>m=IF$Y-SpBpUbsYR?f`I$`QC1(4{9P{2?GGol*Bj1+9lKM?QyAFi-%6hh*I?
z{((on3qnKtHdc5{k;1K9m^uu@Lp_Ij{eJS{f!MqUFKccB;8mTT{w$n+6!fhXg&`1J
z=18e7_H_<NBbCSr)sUWxG&36;-mrr)SyXP7Y4_^7KkoU<7qgl5u}8mf_K}*a<yXR9
zITy(^oikZfNX5wb5paKY<fs(9dXeQo#HoPmC@(8(Vhv(}pWt{801Xrb@-hJjz=zlD
z+`0(nA9by4OwoUp6sFXZuB8`GAtl$M4XVQz&42y%C<JhEYq83iM_nh}Pl~LwoHGE{
z85&c%{^rwK&hWiyfOY)sSy5C6Kya=I)v*snn!Z%bSrR^NC6IC-NxC!mP4>~F!1GT_
z#RODPr9ZFO-fqiTvb9@ZmN@XYJ4E%%F7Fy-$IJ}s=9X6w0PEhX3lbUrorB$Pe15JT
zDBfMNuxENS@}kR+cUWu3miW&>VF%GPy_@P!q7aA9>ZkeJ1E(A?L?os&2!coaxhwfp
z%ur+G>A|MeN#zXx$HmNo$4q8M0~lf0d${EYiM@COW6Fq?EL<wTpy0lP9>d?>CJRCK
zH2)nO;NfF7JG-Ina<=81>8mZv<_9dwyxj1%!)b%9#}sMthEJGJwQlojYOzL{f|?S`
zGAgHNH%|fdIj=@pFmjG_#=4&=PC{v7LJ?C4rLqiu*9o2@$@N4M6{Z<po*DU%s{bqi
zfFS`!iu^0EwsPrsYJM#u0g$_X+>Zf4%nC;r<Y?W-h-8(w1{4{+BjPclt>7u5<4d0;
zZA`R}@`s_s0r&J7eMY;;0>x`wvfY+@m~N7AUAUH1yB*9xlrv98DK%dL8T{8%1kEJD
zqje$zf*7O<i4YO9@!}N&bi-0i>@#m8-o!73R<y=2`?aL<D0R9A3qdI_w<@`yW<_f&
zK^Q%h{&>Q@JTJtet$!9JH?(9BrGeqXB<h6o7yK%aB4T1e6pB0hUW?3ms0fc(fQ`T3
zqiH3%OdZMs{lb<0-cRSgbmGr-!dm^b*KkDEp_X`1qH(NV4|n&i<nP~){@LAQDFf0<
zOJt<OP))|*oo%!6cmibr#S8q=0U0*y9cqgOSqs@$vM)+uLTLh$k?B*`9}%4HK*Xrj
zA2P}l)Mzr(+L1qa0!>$(E3IW({r}~_>;*AV3u7y3!ZpQ*T{e&qoA@MkTZ@R#eO?S=
zby*8&FyiWC(%Ibs1ta^x&7r(JA&6MQMHt98fWG&#NY0Uw2i(jEAes(w#^ka+l8B59
z4}g44+inFtbt&@-^N>mn$PFjV7;PchUgwQ3sGsfZ8t5o}v2L0Inzb$!2?oP!JOa7z
zm$$4?HTnRRwcK9i%lr|Q*5<+N9PD!jaDZ&~_4TDMU=z4pN$b8-y<Z2{ov?Y<9bhQ;
zD1e1<JnXfd3@&hZKE#*qZRFzNVN-L9nh)x_d7f9f(skOpFFPxa-7?v&ob&ZrJar_r
zirKd0QCd-vmJiTEKr!@mh9(`-z8uNkTkdh~f|<BA0j;7iv-CrEpR>7o0Es{e+)la9
z3G3L2r(!z6MrIYM#Y|>EaDZ&{CD>=7t~|T(I_HCE8^}Y?eEF2`GFPU*ei`n3r*M%r
z;Qv>t)NI!M+${)zuPX-t6-NMyDzt2#nhMcRYd5_V_vdYy&iBU>#jzJ*V<JWn;uhI<
z{vH5HiM<L1EEbvWcJnT0Y$l-JqRVU^KwU#YO+^kFKLDY!KHGP<e=Niu3Zr!m{CyBl
zx-l?12g^H+;`Qdpe8Zx&#Leo=C=t+?gtBr5r+)6&GZ$tSA=7FM#nbhXj0QoT_g_Y?
zH(SmCKKr@M3H(&IbQ{DZ*9fu8;1>!3^dW#(`EBLHZ&NL$oA9o7HBqwtY?<dTEX>xH
z4PSDFzWo*{J0oETi42Z0Hb-4+HY%13I=_Yja071oQp>kE_Bdq>*K|g}pVtNAK?1~=
zUs6)BlkTxH{suRhi}H`2G;!;yfc&P1#^bkW7fAv=z;9=VJ_?*{oh-kOxf*D*rMX%L
zhVP7f$|ycuK^;^tswuh2U4_(e#!P@ixhxxnPdQNzS{f7)pED0a1wkMXl(;dknUa?^
zY2Jgr!O^r6U$&A#bJdZ9bTZ!suvDXMLrV7j6>Cauu3)8dYvvKFcO^03zbd`S-(O#|
zU_xx(8`AHY!8ya6mQZHz8IAOQc|FyomklJ9h<0;Nxe51N>BEOg%mGzFS1Qjf^Kt&M
zS?R>kGrEj+z=kU>KpX*N1_Et9=F^Qobkrx^>sA-HjU2l-bb9q(?U+0}6w!9hxF>S+
z_I}wpYo=F2vwldwI%H_6HGlvJ`?q}g^7^+T7+jc^QcK`^qMh$qLS+*9siFO~GX1i9
zBTfLZG#GCpiQlo7%qgf%4l=*d;(C^fX^JN*(8KSo_p;j=Wnbl`TFVh2AplVETj*W<
z?%xgk<X7I`P3L?Lx{#01a2$91&r9e^7+7KUzUO93;$zSZ10et;BWS|qp-5>-u@Z$E
zs{D^l*b;yfOUIboi0$;Hj_?Mm$v?v+V8s$t*;KreF6Y_;Ll0UuZr+~g`0x2QBl2Q-
zdtIdsuF4YcxpEt=?MwCFE2>kGJ*X3cr``e!TM`>!lp|L0;6PS76LSXivJ~+4h#@6D
z^zE1{nzoJMsF>2*%YJ=n8xY3=;<9-29~=Hafl*n~iH`BqgX0D)q~Bh=G-jt*3&SIp
jcl=|IoBp@ipK_CDh0|uo{Al3+lub?;ESmY-*&F`?st;bf

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-disabled-segment-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-disabled-segment-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..26df3ff21c4cd84eb0f7e9223a13c017040f31bf
GIT binary patch
literal 4922
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
R0ditg`Z`9CGHu%z{{bwJZoB{h

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-segment-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-segment-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..21ddde9c2d7515702d8f031505dbd9db7a6649f2
GIT binary patch
literal 5585
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-hover-on-segment-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-hover-on-segment-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..8204e53d32b733133d80b599a721f61332a76abf
GIT binary patch
literal 5289
zcmd5=`6JX_+b`Moi5S^OwmaDgS;AN=q(vBexW!<UC2M7wp<#?AF_@I4Qbg8-Y%?;J
z8%cI!L?QdWzQ^-E??3RozdYX`=FH6Zoa>x(o$LBspYw^gvM}LbJ<EFH#0d^FQ@Hhs
z6Lj0)yA?Ad`1DylX?EfSufG{w|7OU^KTRwlH#hP~)QO#*%*%{%1sUh=nLm1|Rwlnd
zFn#TFlHsnb*iHKD`g{yVVkcuie0t%|@f7CDfIMS&F{l7xrNDR2$Ka`Btnmx_y8_H<
zot?EhmX~l!lB%IR@%>8?7iO2ZA>hHkcK&zk^553p=rEuv?(B#+yP*9wu+bO{rkyK;
z0qUkmYM$SiRAR)Jw-)jq{4q#o+tG)E=Vk1vm}VCPmv*i=%*t@u(=v$cc^`9qjRpV3
zeTL?wV*{qDb;+XVpsWykc}6!mxco&!S<svL5+@8iM=W5beP?ET`Io|&*k%{`X(k9h
z%H0-BMJfLv$3`)jW@<uxK?w<w#d$et8W>Y?{?+IZBp2xp24SHtDW|6wgV{fiBOea{
zeaYot%H_T^Lk(qwq<C2+U=t6-^-OmH9O3fPgwuSSXb8U4mhVRulbbCDeu_dj;->h_
zNRhW0#f^_*MGGG<j)g5&7(VSyf@0mpPb0BqiX<_Z6Wb*h@GcsYc9v4U42?FeScOKr
zi^GnlH86-EMu@DMh?@(rc!5HPQvy34a^c2XyV>%=db`Wz;PCtfMU3g2GC4N<-=5%4
zm~{{op8xF*AMAQhIX48a+$whL3fT1)v57io#rChM(z0G?&WNvg3G_|_eY8Hj;eD#K
z<!N?CS+geRWQV$-)0}8oWS$kqjhsZ);Dk*WD?+EIzow>D7@`}d+wm>oqTSh=EkhqY
zA^7qx<A#frjK=P4Ta}?I<oS}CnvmftZ<Co;vsSY7GIC+Oo~^O*wA#IIU(T>IdfjQ1
zFHztUEl|zT346A;B>2VNuc7HEGBWud3WY&*I34ZUkP?L{a|6X1q3bdwj2vf||5>K4
z|LRTklTc8=ap~<R-+pfgDRXY36A@9$uC=ut4O@yxi~Iapo8*z7nw}m@S=v(ZxT+-~
z8o`UdV%xAEIMbQ+wF+sEYHMrjuX4DgENubP)qU*ewzcT6eUSe8`YXl~XGPPN-9S{t
z!)=)YcgoQ|mqeUi`{G!g|3K-)qoMmBYYuk>x$)&>73z|VK8TO@#<N<}C#5W)mWf$v
z(9KE1^@RaKObmUlea)jb1-X~E=D#CQZRxy&3VWmR3g1oYLpM+YZrkhq2ctKOIK907
z$X+l>5}HY}s9u{8JbL8)E1Ju?%++Xm$_Gc)a|qfD%2M@h6+PO9oMPf|oqVA`8gPZ}
zaDP@$$$RE%z+s9ZIZ0Tyq>FH|pT<8XpcbkM0mpU_b*K_NHjvTU3O8?Qk%&`?It=&d
z%58bw`|2dRh!~kbJX|kAL>+AG7qP`Q|NnQup{c1^;Wdzwf7Yz?YgUhN@B^2&)xn2<
zsvD_~n+!ozPu!Fz8BYh4<E^*86a1F@QuqawA3#%!uC~xtCg+Ae@*nJSy)arUWEW9Q
zP9%(z=Qpf{h!ML2v0a45<i7QtSz^EVdybMO!#KQJusSRQ#Aj{rm-?E`g`Jq<(%Lu-
z6C;<DP6WG(XQ$YO3yJa$b=E>moZ<Q|U0G^wEu!kyc65(Vu<^^^9j=guYWRzlNL|ZX
z-kUheO<#JK@7d#s;obaC)>U_g!a`5?d3DbF=6ky{HsiJTNBc_^oWc(^D@z;BLS*fI
z^1tcqbv~GyntHgf!V;n_!ur;sPMxMAt-MNw`21KFL5@_>aw8+WzU8xc_GJGokbJ5c
zv;ZB8>W%iY)NZ4;pfi<aQ%6T%$vxM@ReBFvS@jooL3O8G5WwSD3bdv08o^)9Z#?_!
z4dRQ?jk%h|--8)if%B+^JMvF+qd0Arbc2-whj~Kk9a*2^aI^e6p~??_M8C7I<HJXJ
zw#0EP3|FQKsCc3_)CR4R$uyVdn5&MqRoLJC#KJ3sB|bytv5&VVde)xu;Wb^fy$4Gq
zC4XvpbY`1To?XaXDRx@fe>n?0@ZisIY_mt_b2Dq}(@C@sAuDWhh!4qsM)YRl1by%R
zb1E9DIO!-yaRsB;KOaTr=IZ9K&_q4wzrP>#Z%ORz>UfEwk$7+C88GM$)#38<&%v-t
zt*x!jSp8|&+z1aX6lz6#bDLgUgo|OI#DTDq$s@3{%&hJcf~!J~pe!33RPXi0eDv&I
z?MrDBx)g+6Z2Z+!A)Pz5Ol`TEnP%p@c%844NFJ{AmU->f@4+s*qF9ohEktt1y7U)b
ztI4|P*FF8l(yBf*5V5sBe<kPBhDMNFhEb0mx;U6v_gw1_%V$T0*s-xvy|GWhMfV2Y
z!s#uDq+12%X8_zPnZ99-HSig!O8@rlX1J~>fB)38n~1&5#kRm-%i_j~;W0Sf;pSGe
z8&ItUalXb6nBSIqX6YU2UO!$#O48DJ`}&4cpMB4*sMuT>#b4Xp#Gx4IPFnlbX6Dod
zDIa8d3TWSznI9~D<^FVrp6(<9%_-_S`s2ao(nL>o?b@%tN<p?6&y|ky0>sr=)-%sF
zyjWLOSTMX~>9Ebodzo1sZQJ3xc2)bD_SL?UQ1*bs{fC>22Qd{vNUxD9;l_hM-ZjIO
z$d(lv*{pU^>)yb-_+mpe=YwDWJmwVEvXYRE4<3&sT%J@dsl7k5`~{%T@Z4?3h>eSg
z^pG=#j9ebw3qv*CM7^HzdZPaxQux=vyv0lxu_vC#skh$VW_4{%wi9ajXSi}Dv>xs=
zT7w5}AFe<~o4SCC0%AWUD=VRAmgZ_Vnv&o>F<xK8DXiQ28joA<HL*Y5iy>O4b&8))
z>EO5Y8|zwS4nei%^pq3>JG-!dyDjHZ`PcD7rIO2Hm**~A{CI!RqEK&5E*j15ey|%@
z;nSOaS?tmLKU71kAffy4U@uc8Sj6E|kXzHf90>EYr*Ce)Ic?*Rj+w`aB3)*%PD;K$
zTCd3YYfb}i#bNHa#I(0GGLCA#zk-uB4>zDYjvCn9w>OkN_fppp^_-<&1^}R+ecp!Q
za6S1w3VX_--(FRiBF&D%7`ayf%EgELOfQ(85pn<dRt-VO#ul5U7FJk#x0JgpsQ6Ew
zs>xDCb{yNn=D8Jh@B6j|sQZn>C+haZSC0ZGCr=`55Dz7dYFFQ$M+xgiW@99;I8IfK
z_>phvywSQwP^G@F9?y4bJoFh}p9tTkqL0fT{GDTc*1LCd2&(^c79LW6@nFu?94!u;
zj1mX0kwUf1OdhEAU1o@1<Hr<r<nW|c@S-*s4%+=#p<!~)yM$_;B%;%ybFkO@&Q>LK
z{a3uH3mGTclD<t7y^*#ZLw^iA@NaK!WE4;w+p3US6TPtu3xDJut{91k63vKCo9^qc
zO}y~KDTiC^Vp9c@3a3{(&R_Z3rPI-I%ezKhQ@|!w>Y5kvdz?GP(PQ!plfRnRaN4mg
zs3F-RXJ;(or_cE3_=eyunzcxnkDTb|Bi;D;_y=?0OfYM8f&81diuus<3QSzqX%Z%!
zG;?!v7>t^5{sWSL0qh`!5S9jNe}Y@j;#g~2+kIq!GGt?JkX-4x<qP}ErsRndV+L|$
ze_?lCGjNU<CYg7;%MJwGZpzE>%r(gpkk=3hG5K<9;>Gcp`7e)8@tRmza6Z2L$liX;
zT>rgYr4%=Fa%!p}JpHd*7*h)iQlOT9))h_E6n&0X&^aloIGd<7d!G^G{15jAru+|n
zPU<HFOt-rr%*@Q-=MX4{DkM+u3w^_Y`?!>h3=`DCP(1<gqmpYDQZF43c0nl{zXt!=
zaZ8ajS&k$S9inuKEOMqMZ0kLAh!K&G?CtUc?)Q_jHBfXA*)VqNw^$`rpKqAJ`R@TU
zodWV6En!Pj<{*U=QV0Y}HHzBI044%uGJZL<z6RtWWJedV^^r)mYxLFOzYm6de`kA*
zMoL@>(MEKF^hen~GeS+z&eF6Z=2RKlNTjKbo}O7(Im*<8=EK!<)f3+zgEI8ap*k0E
z8@N0PYS?0&c&FO;f@gO&)m8oTmV8Ote90@B+S=N1L4J9J*u^awz(kl!2cMqT(<3fT
zwZ`*gYXv4?z@9;@#LsgHjvK-|M55C^;U!EU%=GO-M;c(jlfw!>(Hliq3oUX!<rh}v
zA7h`Sk`jd2V-iEt;FZ+WWEe~m9)d6Yz$eZRd#8eZ<rfxOSNrOKlHT4>A0{gUWncYK
zQwG3NB;o<D(Zi@U55yqiK1bX2SH>KOrG_nehWcu%4nocQ`*fW~#I9<N)_8YQG?Q)h
zp~G97(xmnRtdM2`0F;?+G7Dog?|M<h-g7N?<-oabl4_NbMz)QS7eG(~T!jgd^JKn$
zm8}U{XqR#&C;1=-9SNPmy|pyt`r^PTG76)y+{Rx6iUQ1f^M~mh?+L2<?)Vsvfo*1G
zWfS>e{(H{bTT!imTt3(FmWpg70(yBI%WB0oW$QnkQnOQ<0r;)_K0MG?I}kwV61f^D
zdg_)+q%}2T1Ae;x{o}O~!^UDix+piB^g%pYV5Qv@oY&BAOWM}n@3A7TiCZ9mi!6y#
zlTD{;Hvf!}!8yON{m2Il;h*@7cpN_2sqh_0Aoza5qvN<{NrHaUtv1qk%3L)?!<SDU
z>~0jf6<P4AD&40`m9q4h?asMM&`RIl4$%s3IAyajX9iq+`#s{Tjda6Hz@d2Wj;Q|@
z5IF9Gmk`anQPll;XGZXyU2RIQ8_9V@ed4yGqe#xBz`KA2Xsd>6fP<BuYK&Z$_!PL5
zWa{$g(x@>&KEUR+b;lbLeaAlCsGP(7s1M`+=-Jf@h<unYA4s7xkBz^cHSBw*+_1j0
z-we|oYa|vG>P1s#*Qi^254XlP&Pf+pl_1zbsVICg9<jUpEwvx2epgXKL?GVXR{PR{
z*M6j4{oXpY4hk6P)>s%<OC0A+_oY4m=~5GDhEg2h%vtJn0wBqJro)sx7qufJz0a4=
zbbECEx?Xddho`o9X$(tDHVY4@V;FdQ>nX$9EIy}RxN*WVlyqmY&QDB!q{^%ZYGS<m
z_xQuT3(6#2V~{DbGV=1d!MER2@o2Qli=(lcxk0}#mx{l0ixMAE+_a%?GVRco0<4Hy
zO7(bnG$yIKl3e-wfUEX*p%#Ysc9Dg{W_Wo9Su_m$v$V0hQ$WRE&3E*<Q{%p}PUw2R
zA_aQ(;=Pz+{b)uxr!qQX54srK*0ihr#e+wCGl~1t(yHD;Dk3<h40qcaWo449Eg$fy
z>*hP#?SsfZ6=hS)o-gj$CU>kjxXfNZK2j#p@JHS=SOMP6>cufg?Q_lhvny-%_Q&Mg
z%^265{``5nL&TEDe$3S=8js9ta1A>qsGt=5%OELWBH|QksOnlMNkh5MWUYI|53jVT
zbXNV|ReeC^K7YK&fz#H`K6$W2y44tYYTULmZhM;^Awp|{8tRjv34I?2bHX<UP*Rpz
z?N_ciwhnv>6wD33rv-r506+$1=aRYA<if-0z9&s$ASzpyw(cu={jsBM*-TXq+Hf<|
zzqZPwBSBdy6iN%!aA);rZQ9yw4^4x!tgNhks~CYz48I}9EvBx{H&P|*13<6>*`L+5
z6m=Qg%`}1+h0dJ6J?(0dt)UOjcPH2)SKAECoZPoj&8Gh!&6!3|MjbQCj`U(~9-e64
zE~h+gSVn4M_>#{EX=&?*5J>%(08bKLh3~9l($0XNQ_CURH{adCzXTVH^r_d@1*|al
z$H)=j-UP7S8@vDxQE3WJxhZ#T`G8A-4B#o@Zn3qfgGo#@irf}rl4FxC1fguKyDJ00
zs+|i>6O()qwk6U^BEev*NA8+YCM>MkIylUJ^x&p5Hr7;?4K2JHEe@X+-9OVI5uhmm
zWP=!CCj8(0K|=p0E3lxOfdp`!f)YE{J7DhUycnP{tXgt%v&KT=Z|7MtLw2&<#RG-}
z%%3YULU!zcG9nbj9j{LPU?{Tyv<(%KSU@d!Nru9w31GG-d5THV?OeIE%Zj{GdQby+
z!&f(USO(!5%UY-oqMZu{o8V=QWkI)uV4KS2<S5PM+&lXILjFQbWE6933s_75#IckK
zPw6U*5um(8V7n&d=^=Q(03qhMW+0BN%ktCOfcTL?$m4Ad0Se2p2DW4Aj5WdzMw{9?
z%SfJar9fzv$4Xhehms?Kwd^PNv8r^v7AiQRK0S+OMhiDn75}9l=^^->u}x66(!pr3
z{*KcG>lr0ROU+~534=+~{ofYO@n6;^9-X@A7k0C4wW1D4kSENHEZ`*u&QJaa>I*o#

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-renders-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-renders-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..9855eadc1d33b6ffc3cd48552a057e85cf6bc4a3
GIT binary patch
literal 4997
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-active-segment-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-active-segment-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..22faba7789f2f56b58d87132eea20ced38821f95
GIT binary patch
literal 9220
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
G{=Wc_Z>k*t

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-icon-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-icon-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..7254141dbf9d7bc7d4af89a0b57d0a8a923f4de4
GIT binary patch
literal 10815
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-icon-only-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-icon-only-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e91c6981547a9b5d9027ad84909e0bc703cb869
GIT binary patch
literal 3464
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
F{|4P3kLUmZ

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-text-and-icon-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-text-and-icon-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..7254141dbf9d7bc7d4af89a0b57d0a8a923f4de4
GIT binary patch
literal 10815
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-active-segment-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-active-segment-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..79d936cc08cfd545d25fa22682479dfbbb2cc716
GIT binary patch
literal 9705
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
MSzGC|f>p@>09dP{%m4rY

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-icon-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-icon-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..5cad833038ba5d3c6e7aeb0538b1bafd599ad95a
GIT binary patch
literal 10903
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
E2Y@g#Jpcdz

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-icon-only-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-icon-only-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b0fed5714da0ff27ff4d1cdb6af5da098d12c01
GIT binary patch
literal 2984
zcmcgu`#;lf8<*xw4%HH}63rS*(U+y1O~bZk$*Ck$NS0HPLpeRuBP557Xv(3S!z4*f
z4kffSV;!W0e3hI>%5melSFhLe7d)@$m(S;OU!UuK-`DBB-dB=6$yPxYCMzK!p@7F>
z9V8?q7s0o^%wOQ?|6?6qLP9PGkHt7etebi+SD6<Y-7+f>teFdp%&Jn``czB0yV%8+
z$!*lKM+G6|&B$#UsnmbD%2N+Lzt7Gx3c7u9?&0Nr#G&t&_UTkvxkn)|l)WvyDnR<i
z5e{!RuJ|OC+_log4Kml%+R31V83l2TxGSP4c&sd*j=)#hrz7z6cQC2ni(~)ah0<Ze
zGQTU0>q2wih1$XKbabqgJ>hO<0e`9+B}LIK-*zuLBN`bQ4J`Zwr()a<%I@~6@BdJ>
zO}!$0<ofkpWfR`q0sJ@-Arg2adH&aB5F)PK{PIuf^~m-P?cM1<Zf%=?F0U6Wgfo)R
z*=La}icsA0<<MLpZSUAq)aUYd>tCT9@9MOo{A|W0!d(-W9#p)8EEG3qg?tyvDPWHM
z`b&O1C()9}CC)Ejs@PZz;rZXcb*6DZ0&kJQKr7z}RoxDZDU=z#B%4b*Q|VR{^pM-c
z-kAcnI0Dm^Z-mo)9NXk8CSdrZY$9QUvhKFhOw04hvo+TPoj*2)(^(|AB;LL^3C))^
z@VD3Em30#JGi>U|?FkxncBuHk_jhRw;9XfotxZmV6#lRyVZZqY>+=<}HM&r0QK>ha
z!-^|Xy~#l9X9T{-oNuTJOn6g7W8mmM$1%JcokW;(>D6~(xg-DsWFA1qCYFGBqom5G
zjEn7i4>;;8;(3!OT+T5D-iOY>YSfXj>EK945`q%uTy|jkM01|P_G!=I_Q*10wXEtx
zS<V$M7lj-2Y+AD!qb&{JsDe2@*CMlqbcV&oa99azxxH$Sx2i=j@K_DJ@ys5yVCqv{
z@)5nKx2mImAxj#Du2pv*T3F~BE>vI9QQmj*-y83|!M4^;byy4)h6j9|Tln1B)4aS_
zIZUU7-#=0Nt0(u=qhM9Rl`+Cbvr&d`guWstkHx$^LzVV@_T@pVcCiNKlCv*)Whhlm
z_(6x{!+#t=G@6`gWfONseOU+Vjha1g81VTOD<~@CoawMC0LZZMxi_@j8uYm>M0wxW
ztdOH#v4Kw(b`6L)f|+;&a?&*&gCrUKj6}=Uh3>1HelWwCXGF_<qs1>*DW*SOX;zvq
zZ8aCt(rUcfTM#LEvK+tf`LVj-ST9z1^NN`_Qsvp0X^DS7E537J-i0ar{JrPGS!4=u
za;{O`wEcLOd0wHiMY72CnQvSOvsp>uxDW3Y5iY4P$njW%`3=MvWmmhlo~wRBKc`0~
zdUd4QK3%?F5%FHf<GGgk5{fL!>4j4sIr$EpY?wC`r)SKCX_{)#6}3JkE&8XX|EEVZ
zRB!ask;=;*Ca#YswJ&KvV9cX~jf}Qr<i~uqqtm<K-4CRUF9beanmBcZ-S%0SR{t<+
zNj7ZyGh1bKdJatjDGXWS_g;A2>CvTHZIP?Pd_q6oJW_{)sVU{uf2eXlGJKgExl^$A
zc2n?6sO^QXw9Z>UxP!}v3;p4G3xly1u|GOuU(QeQUF*a4b!Mr>gNV{>?0mLBeV>F0
z1~}ic8&mw4jj7){kI!6HH+|7b4u<QvR2Ixq7n;*d4n`&1)JYq@Ur{}@Fc<~BZ5VXc
z(^C>(c-Ly~Lsv%(&TD0U%0F`POqcP5f5}8x!(NZ3IJdwi#uUH)ZN%tZ=^iSL;rm3_
zEXK%oUySlfZD<Fn>6d8Dvh^mzvS6rTm8BQ*164ZnFoSgO;#<3e!NLt%7pAhAg|iJo
zrU|zLS+x3R-#lHa%^4Xa<D~6P!Dioc*N}*mYjGo0Qi_VirIwY!&br<xT4}?$pt(hQ
zZE`)4O+?Rudt{+!&_k`c;2DRK(?Y%?mS7=tn<JRH4?_v+&o8;v2M&!*HwefjCZLFD
z2#&|O+~|$lr&$>$f+tto%S-dx1M2%<t3UhYpxgM>Gq7RGg=F>%4VwsR&TSB^s&pBz
z>_DWX0xRB<OmfGv_PP?h`dM|AZuMF1^x`9oEzmn*%M)VUWaWMTjQcgcj90nC9pMZP
zryt%p)TIzUcTYux)Ved{IsN&<!Gs;bGPex_zP^y_`u<7JgBvF$myR~xgANk4%aL0c
z=bEV7gM`vBvC+j^c`aG{Zc}!Iya^^p{gXsA5(p1o9KD+W$L9>Dn$5>Yjlazwsyujy
z&DU+Xaj<Fjl<t!mILsu>^mVDluMOt2vuSgT=B2&1>e2Eb9`Pe}&B8^kzDE?zO%}ra
zu`5q?7=fKx9RI$DjP@Q|_11({VJj}+;$%o3M`^JCwW_UYzUb+yhr0K-=gG8BBhJ+^
z3iV8p)<Dfj@W8^r!i*m`TK8&9K7h}3t~fgKICSvz7_S%yGox9w$zKt&8%J9{)%mGp
zlY{^ESQ)ny!d1vWeawG;SN9ou5$}6Q+z#jr(C$y$*DfC4Xw_OHZbf?2i@FP|Gq#i5
z8t!Gopjft?YjC$g&&*_mzY6H4nO4}%P&Bx+9`3zDzG%UbF!Z2xlNP*t^76<%DO_#2
z)!YC^TJ7a~k7rr@pf$t6z6aFE=_TD^FRvXdFK$+zY|I%>jf6Vzh0A(tTVh2l$8<>X
z*3?sv<?-j8$_}_xo#fniuAm|CywN?l<=AAI7#fRI^tfW;t4fj#0xwO*@a(Y=QH*-|
z)UwDNN<~ltwQ)HYp_sy6b&WdrYKsCW^iRJ}M?}s~A3k6E29Ra6B}mzJS%bZjlp<?L
zN@4*sqa#0JOL^7KSkHr@xmX~wgq?-rYMJ|62`F6Q9=I<S0>xk-L~_lqG@3i`e=bMQ
zPxjja-~Z@37jFeDdh1NCLpsodSSXp!7rL9SzRbV{%q}V({qeEO-E#9fVBTnE9Gbt!
z=R`gK%)?$=*a0ZUN8cS4Pb~9`_=jya*;ktuuP9f>Qu6A*?jXyH0=$&bXf7h>_eaj_
zm-!LK#Dl?$x7HAz_IQ{HuC~ha+D#ci;q!L$G@E1C{qCiXzSx%2`%m`{A590j6z9`U
z(||TYPb@e_*ag?#ohU;<T{2dK1Df6iPn3bj0Z*NWz1#_a(JQva)dX6Dm@yS8PSy}d
z!iI5H_ZX!3oi{SnJ%iyLc8kuyg<!DzcT2+Kz<7Yc{y_vFrwLe%lpF`JUz(y@wvBGB
zI6QfK(x7ibGv#`s#%~%yK{2Rw)prLnC5yL;YYon^hGH~<4f>#pPyp2(K-{YdY+F1L
zk3Q}s-?Mna+F9wpb5Wfepkpk=5gzvjVUVQlZ3Xd0rpUY^7ClA4Uwv%`d2rD9?U2o%
ziY%X!)GoFsbWeqeW1j6K?^?Rmcvy;(>5X*!Q|e$;u<?<^{0Yw&6dv21C<6mdftR>r
z74<pqqO@B>7<f%MprtrqKWN-wQ=(;#A6ycsKF>@9<wX=1Vr{jRxDZp`AmAVKfx?7X
zAN;qZqr;tWu=^ke6fA@nr35tvZsK#?_8=78K_LG~w}KiSVanpAov;rqz=(Dm%tAaN
xIG!ZNrmt4Zf*F;5vQPtzr{xF!M~h*Lb!l#l=bJp!Jir7lfwv}MnO3Lc{sVDznNa`$

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-text-and-icon-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-text-and-icon-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..5cad833038ba5d3c6e7aeb0538b1bafd599ad95a
GIT binary patch
literal 10903
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
E2Y@g#Jpcdz

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-active-segment-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-active-segment-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..766c30a96de8123d1349f539cd029ab8d4b2ba40
GIT binary patch
literal 9830
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
Rf&Q^e>dHDwrHWP|{{viGIQswq

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-icon-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-icon-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc77e261c0d0d6d3231a5bd698c875c39e326016
GIT binary patch
literal 10983
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
KWeTMXKl~4sHi8!b

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-icon-only-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-icon-only-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba9b1a6da4aef6dcb34551238ff9a2bda47fe41b
GIT binary patch
literal 2965
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
J_l}=S{0Gfsj$Z%(

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-text-and-icon-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-text-and-icon-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc77e261c0d0d6d3231a5bd698c875c39e326016
GIT binary patch
literal 10983
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
KWeTMXKl~4sHi8!b

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-active-segment-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-active-segment-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..b331e4e3299cb0a407acc57c9433e448b0beb5d3
GIT binary patch
literal 12366
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
PxTGYnDpw?H`0l>}`l$o|

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-icon-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-icon-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc43c5c7cfe7bc74bb5c5489d9f155a5f3611022
GIT binary patch
literal 14224
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
NkX4o`eqsFK{{p>T*Jc0!

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-icon-only-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-icon-only-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..b18f92d606014d1bc96732ab4356ca82ce857021
GIT binary patch
literal 3966
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
T75g;?)YUu~JrguT*DmDW>MWOe

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-text-and-icon-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-text-and-icon-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc43c5c7cfe7bc74bb5c5489d9f155a5f3611022
GIT binary patch
literal 14224
zcmd73bySq?7cT7kqJW5i(hVZQ2+|>~QZfu69nuY>z);eNq;xY#Nev=hGAJQ2bVzqM
zNFyEJJ^p@Q{PV4K)>-SUbJo&{XCCh7&b{|_U3-6gr7VA!fQI14jT?6rUdpK5xbg1^
z_-u}k3tkVXW%h5}5Y|?Zd9LC1&sHOz&alh%?%wh7yWW4y@k5xDc`&ITbqQ8FV?KSF
zP7s=^*dFTacUUg65z?=jsFClA;D5s3OqXwCvmJ;-qRZDOGP`>1c{N(Yz{TLey5W6M
zYY4q24j_4f&m2Hv*Z2(k_5y!ii17cu)ck+^r9v{^;6VkuVw^nnMQ73e|BL`(#r~6r
zkWkvBLbsF(ce@pOud}x-E)FjL_verwez<hXY(#8J6ZCFlg>D`?2sW+I_k;Nz-JOm3
zf-gd@ee~b~B-c{8WZ<)%NR8`nB0P+^1P@`LSgG1g$1S2%J(hrzozGQr_=v^I5&Z}?
z0_K+KzV#t&gP=7$Ejw(dl#A)XWfgb?hNskBr;G|W$mBC<(f1kLK{V}Ys<NXKJ$Q{*
z!)M;cKIDzoouJGUd#h!Nt{xYr0Q3)=B3^g*vEAL$2LWi8_<zGNKTUaeOLaTIP}1VU
z6d-{l3)=~C@V2hOR$noWYUJR$3_jv`K+lXl@ExxTp)_*<yIwkjRw0EyNAkFJkt&oq
z04*kxM)S_tAxtEd2J}rH9x*}_*JIhp1Nt@D44OYIH675)#t!TlVavAt^BF!ug_kfe
zFZeEV%hvL`iS*y6<_cmr%luL02(ofytdJsr<Xup3&j--f2n~2D0q%<sPwcm0)93gI
zD;-YUM@51!@KrUyzOqw-M}!ToxA1_^?}9KqU@FkoMfYBWyzco=i`GT`dfA{mVlt4x
z5t<@F>{4X0Q{gjDC4$CVrorEnyqJPw9}$GTkd_O2%N!c(N77UTX3Pe(HAVloWBAN1
zMV3qf4xV~&7`Bynpn?BS2SZ-qBk~~F#;L&y-2Qt9-v86jV?yvTL`)I;G%{8WJ1#M?
z6mpKlgXY$|bYl$}gLx{M@mVhdd2A(iZ#-dyV@Oq;e_B>B2Z;6SISHS>InF?y4Hq>I
zdwn}sfn9ElJPYvzqX8QVAHku6FryVJv}*sXE#k64cDgltjdy;0-Ix`42VJ7Zit-Ui
zLn$%J;v?YR=cB6iQf}cc@+xL}&T~B46~`|gpnBN)_MNMs&V`25*yE}%)#ZDISN%%4
zIPFJcz`M4+&i7Y2IXMnblDLglHd({=_V#jpF4<esfQbmr%VXQ-<lwlIH~0}_I`29N
zmb$fVGHi0WOTxF`<&>CxuKwpjz?p~Blg#=V>^q-GgzgWbSD9!=7bu=nLGJ2OY+_tk
zbq`b(+Sg&xT*iOmHpafa-k27h7}u4MsvkODs9)k?<ki*dv{zZ876TWF`_#L$O3H3D
zMJWxrN=a2#$UeOw*YE7kQVryrBBD+nrwV!j2~;D<C3}=h_AYdA{h{Tb$MqNcck0i;
z|Lg77u3J+d2iNE7p$V^`%-gj?LmJ`|5(q0@UEQZ?%A6E;-i77`CtSN~P5lC+=bfM4
zBg=6=ps+3)uXQJN7fDl=BlNvfFx=E&#PGAovU*a)^^jewAYnI@yiA9aETQPNZ>we1
zJ#zY<G-L3i@0Iw~)fE}HVe01IY6f0N@ik9b!&Z)5#3y|vHMRSmM;FS?K@q!$hdJy^
zD=V?_&bOO+@QH{rnUwS5T3T)vYSFSn<A2&!JFTldU|>kUiHjSXF}R-d+*#tg%Vs0o
zAJ>Un$7zXd{>tZKZ)a6?iYjkJ11Xw>WMNy^%%iDpnz{3la2g$9u)3ho(c8Ejv!6+5
ze?k%^AAqPx)r*UP=OKGSWg+^XdS3T}8P-Wy*iZ4^`%{V#ds?;9Y;?@Cy=suNx?)=X
z7!!@_LN!?_$w1-X)IIqwByDwJ+)2_;WkLw^Dzqt8rSEgoPz^FYU+bg2*f$ir`8fT}
z`fCwgB0Q8gw`3bm?uT~xcD?kWPT6hs20Zw#%@5Sg+G`QWxX2Lq>(H&b4CaPx1;}s7
zjGy&)J|2b_%6%yjK8^)zv(lH++)X_w;(5d=loIh(v%qAc)Q7&pQkjjDGyDq2DD!nS
zgPW(Py2fu;v9?GCjBV9@!?FhyVS!oYE}MO0g+f_b*)`LSPEI233pd9_#sh-2TSiBd
z{uiwVi(NXoaD~sb-lJNv^bhR0RL9#lD@O!EzREujs{8YZSn`DAPj(iX{99Y={?R1M
z7z3@Mq0%P-i>7nNR~42|>_+OnJ#P~{R;Y1Yb~ru%#XRxNCeY?OBN+eAokiEssD_sf
zl6Ba9NIK)0afM?z?-5SJOQ&v~|Ef6GKEv?MRB3v3&|RyO5LL3k@NmLULUu3p_31Kv
z_sIJskHt?ftq$2y%E_?mZ3!grff*6QMVNfn=HPyrmREzb$SHNub2pu*_E9v?SGf$p
zCTyHG=<I&L`I8tE!5^RHc-xoD!V<v|et{5Mtlma3P4?=4-dY$w^en~A_y+InS^IW@
zN3ku{eb%e8tCPErPE}HBGavmFt}j;4AY>Q(eACxtB2ucot5|Ty{yZ&!BiZXzhM(Y|
zx9<m!gnAuckeYrE=8#Z7(m*-$i<|Bf7<@3qr@*&q$ZFWq^>95z(L<SwyXfk6ToR@!
z_zA6X=QlAPkt!6EQghdWMOpN+1CMtbW4Jv9rfy+JI@tQ$4Zg6*Jy2%GX1F$x@JQ*C
zX_X%D^2*Bo;)+stGJlG25Ru85yt-}~Ur^`0dsEO!Gc)(|t$S~xB3Mhn-F)+x#9wqP
zD1_m&^>sIICFJPWIHE7S*GS$@RyI{$_elo?1|oiV9gVYvQ(p?%*w~;C8F`}1cEZ~%
zD-eR&a)fPUdXMAb>yvquw8Dj}MJCPElBQ&`%q%Sas0iBol$33&MqZeTJ_!|{Yifzm
zeDz0zMV`c#-4{rIyz7OSwX;gELh@N|17)8e6A}iB-pOpaUp0!9AN-|Bgxh{b<mBb?
zf4=S_TNz(X&jZF}s8BadxldC5d8#rScf-YlnwpvmQayNUBz2G3law+Ep+qpI{fW<w
z*j|2Fv;Owx^dqk7AEbyGjqv8)NK~2emH0jZ=e>}O493Pr=9AM?gxFg!72ka%gzRTp
zBF5@GDWxt-W1jm5lW3Gb9KC=4{)c>-S0u8S+1U&cCraZDFi<w-RHl+Yn<IQKo#v0_
zWp-!I86E2keHWj=jJ&R>7mjq_9SVS*)4IGIY+HU5cvQG^akFH|^F~si&vjg%>vc!Z
z$<}XK0=_)yI~xIs=4xH?_<NAnt?2k<OeMXqv8_g?K+^1*bknaH4Wh%g!{Hf!^Q8$$
zds!ERt}gXMzLmLPF)Lr?L!8awEIEhUmXb38SwpLhG(!XsKbzGWw?szK$gbU<GIJ3+
zWW8G!HAX@L%@Cwk`>KEd<$g|tC^<Rk!x2ByaVpf}kg^-^OsZHNsCB;szHtG|)23Ht
z*}qVt+h9UEJ}y#ey~mD6e1$3cTxIzi*)Kj)P7OAY%|H&M<Sq^D`X8K+p^=tdi5b=;
zno-I8C`1K={Uz0%l|Gh|pZER1?B1iJ`v9i8x+`_uh}U_S2^tv0XS1(?>O;!*e5wM=
zBD&LX%%xr7dCcW=V#4B&OU(SmT%nlt;lrEiA3rmNhBh=vIjwO09I95~R!)8T+;DTW
z$YLYDLnAU|uI^ZB$)oP7^)<5o<buDYr(!`ak<+jR6Gq7%l9WVwP0de{1U9PK_`ps_
zPY-JYOE59kVog-}en=4nOZUj<<R9YEf;P4cFJ+m8$4gcAvxXi=Yptc#GY^@VqI(U#
zJF;-GK8j6Dl=ER`&VA~#Liea(xN~d2gRR2NY>njN;$m%gsX?dAi+Xf(P(`x!(DC{o
z{U~aFDa(tK+wu4WS?t46p{6bE)zngUoZLs7V8pbgdPOamv|R1JZKP#ia&Sor_bA8r
z=QuQiw%y_DgH!@;?1qMh=pS{I_iaSqQ45>x1j;;+R@_&yo?8}_n&0o?FIv;7<Kv3b
zeB5W2&^c&_AVg`8zRk5tvmGP!|FHBl)lG+RUo1Hl`kbLaBfaghL|4(m5REjX*m7}?
zAKmR)&iapGI#N!^Cxn4R$mHyNz+xi+H*PjmnvKU@m$MRGLU$@s)%q&57FA`}Ej9o5
zPi6l(xE_veS7~THT-eC4e$ASy-eCiqEn`%7u6ZRo`n4%y?VfHz$q~cSn+ft>6iU4q
z&ArXZwarOCQJw8ovtOuBE)5nF2CPT-ClUWT&tv1z@WSS<OT4+&Re5KB+&9;6+33@)
z+eo)2_7Aux*$uuEUbhTE;*wA1@x=8@7&5%}Meb>SjUEMFV|_fEwt2=Q?*02`qVLu_
zBhc~4mwI|Mr-1?S3q#3HNU)8on-e&+sdz7*eAOyyUCHoi9UY|{<fj+gd)BkzB@TbY
zA|HX`$?)0dMJ1gR&v|qsPk9&HR6b*mdA^SZ8H-$f&k4fJz0Amdq;UHEuq`VXN}Y#m
zn}BDpxR<wgjbZ;?nqOa3%`9OVt)CmE_xAT+Og-hWGrv4@L2Hy4`pc&XX4?+iY7}Ut
z*$x*huC4|vCi7W{xQj;m`(9!i{e2O;bI*OIYCi%K*i?yF#QnP^W1>m=)~e-A&uovx
zo0^*1OI){Jf-NGSEuVFIta!P0_}gjhjgV-=E}e;q$>H{3)a}LD`8Gyh;N^q!GS=I7
z?`4C{<#jw=&H4IF0%c#X+td-q*3J#W2a{&`1;?dblh!EOu5^ipxOAVuc2O59o?UVV
z?@DSe^*os6^mjq8(_y+9YOx?q4(+*R&2V4{Oq)CzNk~YZnOt~Xx*gT5QlIxe^_i_p
zA@52;NYD}CDN=A}$%ZAyKPC@_@bkwhkV+Y^5A4*q&HpQCJCbA7HzR)i!U_iNG9Abv
zP8Qr$2QiBKI;Q^j*dFaI-EUsxU?gK(t|)JT1SC?EPSh<Ln(!FwA3ToN!_-2X2&vCR
zQ-t1{d%od}V^cEUjm|v$-5*g|DIl3DkUUYvQlqLOaY^{P`l`D)P0VKO%e^e?w<6SS
zAD0ARMI4%+&Hi*QjS4+T_0_D4vIvfhTXra2X@`hT8O0ohnT_3h7h^B_&9bZGspa;R
zikI9Y^3e10we>c)950*t%T4w;(__<78uci0saIJ@%2U~(MDxZ5y@m2keesf_+0JdJ
z+rYqTK<@o)VEozvSFJ+WG&~KWM^GkDXNq)POZHxP`+_IFVnN>wOZN!JgWgh&#$8rC
zu$e@~A09mr|4E!=3M?*B9*Rk<*PvzS(E~zh2rPeG1RKWMUx`DZu0*-sb?%v3<gLPC
zO@pS)rf2_hSy}Mcni$~9%kOu7&(N*B#=o_$U5&dV6xMXOzAcsf-J3g@i*?bW?AJxT
zqu0o`YUj!6E968jbl-HE#_RjJ$^t)MGTo1)DtVQ8zH6f=Xw|zM@r_@}T#LrNCH)*R
z-UzG9vqL!uW<zijA0PjxGlVy$HG;-rrJEX>#N`hG2xFxut*7s`FDo$9P+UCH3RekY
z391go%d>J*O+sM~X6E#M`>2+~;ot5ca)>e7nuzI6=Z}($k~!E(I_qB_Uo9Pf<Lomp
z0=D?tbRHvVYeRFC)Ky4H39*XQV9Y#=oJp15>GltM-EW7UuvxE)fH*dlXd@jRs^*}m
zmgV;O=5R*gL<vtHHi=7u7?%wm<2erTGi!c*5bt$=cY&Ym7l_pIyAl>?760ripo*%p
z#RMEnGBGi||KR4~QEqcU@dBFA1PnrwDJIn9v0?4gK*UozPTkrNiYIz%Up3fK-QBQ9
zN*C{Q6&qF;0`Clc(Tz)&@I1J<lg9f5+@%mFX+Bb@0^Ht8F6DW-S(`nX`S`vj7^_M3
zWb#qJhN-C*Vr}mEW6iJF@DmJ?8ww%dH(%R)Gf^3{RaOQ|7l>(;4jQPC7akZGIB^&-
zw;hdKl9Tvz$p2>gjQ@x0c8*E5TnMcdCgP&Zo{{V0$B(u98}N88gP<nhP*qEOyf=nR
z`c4m4PqruR9meb6l){^9G1<ro@tMTZQXT^JAFdAt;Ufz_{Vr3*5g$SxYd%F>Je9gc
zCzm8~GPARXSoWk;JhBudmAbeQ+}wyPTYP$P%nV}WJL*tJ0$)Z^8N(m%cCsvc^ayDs
z?++Fmh}n!(@}j<NO)PG1c6~w)W25gVsnc-aAWfk!Lsm!MPJTK5<?rTBp1q#kqf_O0
z>kef%n;1t}$x3%NPudUXT&JYsi;`*m5;XcL%w&EZ9q!{vmf<BHhmF;S)Kv}+`d+)0
z88L1Q7pUZRCMdvQOKUMKIjCGy0wSW7tMh_|*!0BK#3xdJ*9+ClE#5XE$a@nn_!lr0
zN54<g8vPAfnVJ27nR`VAJoKtjH|qINbGWA!;rY>)1+X4(8SE7se7F((o!VdCum8&Q
z7kD#-|BjMcFE-=*by!Nj^ETgA{%jxH93T7R*e1frQ1kK3MWhg&m{RaLhvQ?`gp+WX
zUia%r1Gv6&9%|6xNKLtRAi_vFW3?I`h6bQ;&dUQ=`(WCrZS7=QbYC<zzWejthTX-E
zibA*ICn$ADev6g)fa{*^{uw{>$1?!)bA`|5-d4mKoi5ZL7QFVqFpW%Y$+hixMo_-$
z^#B!e{|YVsr$<jH?P*xo=^^1G%r<6r&|fuzamC#6v1^e?hR?0R@gWW@9l!)^2GXNs
zs$1KWcp-M#fds(h1XR!JRCM}H4|g>r@oUMZCMlx0^pvjGDW(YbAA8Lj1c$3~kk8>6
z#Cht2<DSehM911K25)s5A_1yjIpD5;z{GSTX?;*?0U(HOqtXx}m8(00q03!s6U(<y
zD%T;`;qG|q&z{}b38(D~yF4qk86+04pZSo2IBZviVJ91$*T8%OvDi<7aKzkCALaC?
z&q0Wl`qU>i!)K~{R56i+j7+9trAL>v;?qY)pZCr4#@%BGx~p>%5N!rRSVaOGi0L1c
zO#gVN3gBYUUB-_#qs3_g@ChpQN!P8tKYuKgx^0E*bo$ydyyO6i<7Iu=a<KXB?U3i%
z^V-_b{=<IDLcN*~fp=Eo(h@M*PAjS;1;fx`+u?Q&;HZvgJ(B_g+~n#m83{-!DT5)L
z;&e&CY%Rn^Sq<bUsHb~u*!Wzz-vKe3be+eae2p4Da17}r90P_bHDHa6jZ?n9n)(BS
z17qdOY%maTwhf&IuIl`F6f`$S^4(>p5ja_Xw_gPhA3o%HbAnG`229#T*tkH52NJOp
zZUT@NfM2;ii*MIQcUbM@P6^0)=tZ5QgCb~{?NZ5wV^h7TlTJ>;D&dnsN-5RA1OFU;
z$i_BU{FW9#y#>d!Lx|nTe6z3FSB?DpqiR*QnnZMCef`<;Az##Pse@n$2e-bdbe@Gb
zO~fgPX80?Q#r{KFV)ry)T>HNuNCDQCo%P|~A1R$*(wwTM;?jc$5qpvjmXjA)&(z*R
zEw)9Go<6%f<K~V3cCv~MyA^<K+~3Q~SlrrDf<g(FyMp$o-_7p#A0}e~6o)~5YCt}q
z^z<pXkn+nR_*#XbjXZ>~)xL~u=XE}^r8LA&?C7R+aH&O?3O3mC^Ybe-AZ-R`xbp32
z`sp1CVDb^7X;`lS=!D36?{ihYr^qH?Q+Zt`2tAH}_kK;_*gZHf1BUk%6ddBjCt(l>
z<hJUePeb&3#j3ey1nO1hOk8ZS>Ky=eH`9#dzDu($l=Ap=1@~<|ocT5ldpjI50@^sq
z8b+=-TPw$vmZP0@zxlnj;+k`06;4VAvGC)q&7RKHiTfLyJ>Z<^qOW;4h%?N$`qeA*
z>EsL-8H)PUhadB9ReO7tpR1J95ouj`e^`afIY<z-u<`ChHSoF=Yu+*<roB}YpB%Ve
z|I8Qb%-@J2C<b?fT&T~jy@^_kO!xd)2tz}2nD{3IR?_4*7YCd$k6hEk+P;$cXW5c^
z9{p>yB@vRZZ7w(izo+zV`gt99{W35u*}i8HHbu1RR8qvW{0#Q6DDo7C+mBZ;?XAR!
zil%=ro~C_LzDOXP8W*1RQd%FdSQ}f{-4}IS!q0^U?#l$TA>6Z?;{YOAXpdo88ZH~G
z2&WPGuv32-w9@n1fuD%+idH=rnt)COw38z^u8|B9FTim{0tbZ+60yf`9aw^)FIs_+
zI5u9l_Dw=Y-cY%SlwaSJIL?kdV*nY$R<cl!ap>3M_Zmw<CKl<)9;`g!p_lSWZO60S
zZQYc%o-CI5=bwMjmDc^SQBs$5_V)H_YHI98Lh(EG=ZR6MzLvheDERtJ6@ORa6O4dY
z3wscucUqJF|E9f#a3Y)v0ik~hK#ha>i|R{DORtcHg`DZ`X9|&Yk}yNSTc#u=qy=_#
zb%nvpCf*<&9Ua@@W4kfvcy6O~tZx(rcvpB~s^%#m!3F?a_#|xa*X4aYE#K9q7Xv`$
z?~=)O_*_BB{MJ@P2cQ>#hcy%RJR+>t^UxDT@mX|6kM^_3hg|;A)(62?^Pe#^0w=?V
zFYHLg`Sa^z2BcQ8zF)po$qa~~%gf8#J32De^Q?F;U3R&PS@~ITl0cjs8ykz(wdjn;
z#3v?(vU^b1xax=M7LlQlJuggXG}(K8^kjV@TkGp09?gP&yaAI+4{7eQ&D2L2=|j)Y
zNEqhi-QF|K|KoEq_GYPS>+sfqlN0Y<xK2`VXTU3f@dovTn=Am?xinmBDk3M~5n{`V
z<6iA9z!l8R>LdY3w0^G{N7z+51I&I9*`(jmfgxMj35IlS|Fq}}yvdbg_3DR)!VH`t
zq9i!tL;T)BCSWscZzj!Is}YFxVa(17FSCKCvYM%vM%V7O`vY*xp1Ve^dv~xeuNU#;
zwl-e}2P;R)2}kl&Vdy^?URDds#opgFHSD?UA!?x)Z?tG{sY2(SMQe0*$90jlwY6x9
zf}S7<8(VNKc1J6o?k}%T<#M2;@rWH+deg$pK%fvoBZvYdIC|>ctT&dK0+6-k>U%^j
zZv7d}%*+h(;_}i4Y-Ci0RiA?dGzp>zFg?$c%PTPei^7_6@^Z}{tD^|r>4B>lGxEjc
z0{f>Q6+tV!yUtc&eJz6roP(duawj>`<7gvd+K!EbBP=zQPSnMNV$cZiVS0T0d=3hV
ziYySw#}rKzOc!A0{E!qgOhiB;mlCk-?trYa=x@4pxHca4fm5F+gTCQX&IhdUvZZD*
zo!|ONnVEhUfPFlH+J)`I8ecW22Wy-VQz3C|%BElGsTF*{04*1T{?JMJgcsbtbEhpn
zEv=^r75|_CFkXDF-PRM8b_!rjYyAb32H%~VCnr-16kspsa(%pS6A{g4N1+xSL39i2
z6aVw@mWb~*own0_lRKb%aZ$z7-}!xK^bI{-m<mP<r6HIIps1-qnL`b?)L3<0*PfzS
z6guJ$iE^3b<J27Tsqf1erc>N;2e@j<L5**9px7b%sLiNpxqsIY9nZcZYhz^Jn`h;~
zB>AzH>{{h>5}Q_TDO^d;j%zeFJx<Y|yMaxTg|tBJ&H5hqzjfk}@agpybM`<;OCD7M
z&ZUTlNFV??>UN!U3|yp5o;}$%T4kWKk`n%_^{=DWJI*-<_{(Wf-jv+)YA!1;u#`#b
za7(U%$rwrphJ8|m0sO3Rs(Ye$>y%A^=H19w7urOw%XCZ_#Xyasw*G?$53rFghc;(k
za~weNUgK(9hPBURWNx}Y(L=uvqvZYtunt-`fkWO{)aN(VsN??9ZP+|HhofM^W6f6Q
zZGAf7g{6;iNLzWiSfgyYh;g)uL|YW&qAdVMycSkgP7*Vo*EleM2R@HyE4iJ{a+jHn
z?vTkqWPJcjW&y~!N}FkHeAS<=&HdeZJ*c``SUV0G{S!d3`*d_o@{CGt%fA}^k?HOm
z3IvW<QzFGHO@Rl5o||`J20vV^u4-#)k2aoZmFNbmh0^9$wdTaXn4;sb%Q?cS5^+4?
zIR)JeZ3+kqQi}#$!G8ua@!f@Ee0&@LDYfXXB<>0cAquSDsG(`*;Sotywv*9vrNH8+
z{e$D<w)o^^Oxl9>6!GAAg%yJO?2LBkt7cfA<avAq?Fc`xjrAwL`Gqdgx1^+`2>2b0
zeed62(EVmg&g$=vD03g<!4w)q_1LmB01CxP(7tX@6r4q@+hLYAvRaL#$ATrmEG(Q-
ziaKS3)7!kXs!gYQ2*|R9a_ei8tgb+{=)iO0#rwKnAC5L}J3D6cIc=d&Jl&&{GJ^3|
zJD4W7=d{|(#jM4xAi;65yl>Yg`~XmP6udG_2VwPsGn9twwWp+PhGxn~5l4bSpc)Be
zG<+EDtImBZ^Ym8#vtU+UKmgn%KQNsEw7`NzmGOSL&f4p0(NoR41WUFaMPmU5a9GL@
zDTQmn*JF$sE#J-Zu*`4~pjYJ56qMS?=9WK-d0qwfc4tT>WlH0!mKb_J_^Qz;;4oL<
zRcFp?@T2w_;Ek}{B|z2t%U%572Q-!?5jJFeF^G!7vbJ_w%boX--|VKLuC7Aq>FH!k
z;6@N#Vl?vAEQ(t}7)F#AM;iki6_%m70QQU5!qQTejKKrVP<MW~+{G=q+VYW9qfjU2
z;v)3i1UMj0E@>lQf4wT(y>Y9IazwL75D`NQWrlYvim@6?*qPuG{Z@JLLcB|>Fw5M5
zhf9c<7KN<ZEYp3vq+R6UQoK?mY{>THNdyQtc>(VIJyqrpV1;GJf-IH}vKs;h2??IX
zVi)O0Ycu@)?yY>CJxTr8xHtu6<yO{OQ(1xmRL|m6Ap!a0U57f4hYwr$-)+Ak;P;-;
zfNf>0y$77Bw$sH4FU*Aeu>(s}a})2|nM0gYOzTx>{(|>0BJbv{TPC93XJqbGw$nj7
zNnESH=CcLhBdOBCMCI$j5oDG#Qz9*ehO&UZwgCaJyR3{xBUZ%#dI2D)0JMMfSo9P4
z0wxR6{k;mV^Zn2h%ku+S0WfetXQm(g#q1A=$M%R&F;5EhmoM?N)~Wz?3S1r1^7m99
z&~4jyo_XC@2NV+66xQ0TsRgHtrVmh1){7cdL22k*`La13m#!-wcIRn6p>CH-*mNE+
zy>dL#f7w!5s7}jpm%FP9z&BITnAA{3pb-{i*vl_$*14Ae_iD5)^3vqdo9P~~Cy`nb
zvlJjI<ifVfcUl$%gHIztsK{UBVuqz~v96t`fGESfd5{0EYAHwF$#dL6fp#{!!Vw{2
z6W#!T5=D|>ivH2pa6({j&nW8Z71|PT6ZV`{vD|EwK`z`Y1sH%3yI=3`vCLYYM^4{N
z;QR>TW%g61&uHo^d79yKb?aItkbv9`Z72cGaI)Atp}=Ixw~tXEQ27ZY$N~|c3o2A8
z0Xh2KyvaOL$o|al!qm(cqp??ie!`ac<TBm%SljY=+h8d#z9~L77WVwZhYvhylHQ@U
zdR2DK$BIc#YrCqz()DIa<BcCS%MtL~Z_}A-m1JGN_rt=@+6NE58WTJrhiW(rsP^~E
z$jXzF(<^~5SVh`$dP0!X;7lTc<$>GVU&e2QXw{`YMcS-IKi7xCmgF#L5@8UaHelnu
zc2fFutp2q`36xa@1%+^W{!gEVck(R%oKuTg3V<uXp(bB|GdjQbZ40dng*;OJ^uY%B
z!|voua;#*If~B{#5KH|Ou)DaqulO>gZCTCq!NE#zBZzHnhvCM2@qX)_3C_i+7dlix
zeoB3c_(000JQoX`FpAOVr$+U*^b`aeuYvp3*;E!5oJA23brh$B=bu*dcTd^d%goxS
zeqGOM6zN4&%SSOcv__;Df8sTxaTlQ@ili5lGf`7lU%%dO;O+VJ2LhA?B#rn!KA>P&
z!Fh~f33kd>&XA1A_xQ6BlC^49vFCm+kH|ki6|SvE&~8SiTY|g<!r9t1y$sIQVnI}L
zlyD|G56}HFIa=l-0R{uxXz5q3ISi=kCXX$v7O=!fOE_maJrTjcXD^#VsL7`?C#i8D
zh4=YhlP0-pHl4Di>K(K!P<>0Qd7r<Db8M#Pv-Y%$n4WE=U4hSWi!8@3*%*cm2Xwtp
z9)fp#fN4^q#9v;P=kkzO=&`pKJMD#^AjD9B`FQYMpWVGG>`MrwYu<P_$mrKai3H{S
zwJJwa5N@hR1Nqe;>1~U-W+>=(qXwG*vbXB1acEz=d3PfHQW7$z;~W3#xa*4eWN)g~
zWb(mpQOc;U<alS8i(>HHHh`3Eox{BP%Fry;W^322iH{v%34~{9T4PHZEE=0IwWlLI
zK=9$&I@uDY5e$DM_#|SO7Y@NH6#;6YALCHQG@@=KPL{s1SY&`jNqf!2JQ1`~eiz_O
zAZmcIsI74VAU0d?4-Jyg!uY!*Yg$1*35A@413nNG=YSDLn_F2`tOqml3>Te~T+8IE
zWwu~2djLDN_x848MF=Bq-SBn5hp9yabg;0x+Lj;3h5*PJ9S>1YOt14WD;J|9TN*1f
zBV4<-$BG}5*=^BAi>*pLJxJb&TEN)1Mbc;U<mcxf`ku}rEql($xVgDucNyFR0AK+^
zS8IDrbB$`AN=B<jorg<HPuYT8C^<)KxNgSo66ux$1kj~sR|i5yK6@e{jRXz5*u?=N
zh+Ibf<?i0zd}jg&lCatM>`)g(2>U8S`3FquC}p!>@RHrmpI5MC@fcAThL(Bfa`-CI
z!omU;(NBcy{&hWi0&wWHUx_ihzix%4F^!Pd!}|JqBsNC~C3}bRJ`GJLP<xvSqoi1Q
zc%o~;A!dZ7%Jgj;xYxQU8oK`x6c-oQt+f8<_U*mevk9iA=H}BpfX8%dt(o=UM_ZF&
zHh>5`IXN+<!UeI9JVf?6jj#>0dqeY~!S?`=W^#lhh{dPa<bfIyk#NRiBGi{J*878c
zgC+LdFyfJ-u8UJA1n_W&zlT$-L|si+!q>a6HWUHAvL5~_n4b^fL`r4g;2k;5l{DnP
z%KY~<!qbWq^yYAVG75N-eH#8FdaYue-lkgz?wL-MK<*3gnvw8a8!W&(trK#?2ZZed
zK(51v;X^W04D<!smNMBgt@hIqHm1J~AGL0?HjHkJqO{X&m)?O8wmi;C9cU7J)XB(N
zPKqGG!mxahweTU-9RcAF1GxlQvl|&}<hl{u8P-6$l*CX0_94iArq>=px#xYXUR$Vz
zMRJ;ud(UR^3Jz4luWax(Bhy+ft{8p!ucI0|;HF*jRQKr>e4^sHdq#a3ES6{49ITao
zC*P?wy6>OwGp@Gul<s#;bjW(mCr$R3qZYJ?<Wd)5M!QM>u9h~2%<JYVYlHlML7SFm
zk(XZe=iG%s&pqt8P<Pg;3*9p%PVY{VDFS^1^)X7~MTiQoKC05TeH1U!c=Xdd-*Kf9
z(P4l}qq=~OL(^*rHPp&&r~kv(kSZAk0;)fqi3^6WvgMS7u69|jJ<26|J_)U?=VfFn
zR&NW~43HHJheCvflNg2VO#x2ATK?s(q}5<XpBzV-o7FGUM2Yz<HUx0%jtEK!fA__A
zkmjqeJ_lKiAkb#w;vxdUD5?i3iwPy~D3Pr|9WtH}1o0sS;kYQQh_<;ImOp|+Y^+!5
zz?_+xd9mNc-F<eV{x1$rN0(*AUSo^G;qRG*w%6553ED=@&CPMLVHD9o*DENw`#@Yg
z)%O9Ada*ox72MRVQh`NO{FIxIuXq=;ngIxbR`ebzyH+7ppv_bcgttID#(Diduq6}3
zL!aONI1)dfI#^m+;_;ahLuO@Vb*R9V8tUtKBy_5|4p#dx7|W{u3T^xJ^|6mYhvz>p
z;8uV_vos4va!{yJ<0~&LL+ICVg?bT4uq3>lRtBP~!905@5bt!ryT{(?)R>9@)_ygx
z*T8z{3on=F@$XEP5{9MYi8*F$&INL~fJd`Ll@#Grh)%Zb`NZ!yWZhcFkE?EL`<UMf
zmd6ClK{rw|qITwdP8#cTs$c9#dfQB)Z<Ef@%fI<uf?Ws{uq6XkuipXmjZOSve+j5u
zYG5@{fHi%joc;nZ^z&-9ZipEMi6CG>`F<A(e+(~_2I*sfF<d%69PFFhTx|Xl!{T-j
zG0L0p<aHwPBjqfkh9n1&k%j~rZSK@T3wp6}-24tdyOyd<Px-Vsje^#}n1C=!wv-&1
z7NT1h3h3H_>RH9wy%ip;@W>iQY4VlsUgK9}RXm4w<OPUB$7{^+ux6*!dj8-2jqw6u
zkYzOtAKA<3&pz?!FvT_s;VUN!OY)KiVNbjL&WwcD{vHhYkgmT5_vK5-Oxms_4qk2d
z`y``<<GOQ%0?<iP?CT#jDECQ3<pr~)2-{}?wg%)FHcsCH5Ms2(EfwUSVj>)@d-`+8
zHj<uTig>pB*+HIJawctc84w*o3K`Ptt<Xk1R|nn`8WK&e_zx$Z9>#)%K-1$LCV(`S
zTQRcz>LN`7(I2n%B{xtUOv`l%3HS?53_2-~E!u<Lf=jXKDPbV7=uXwwUDZuFDyT_0
z4eldp2!W{}Awl`Mm-uLGGCYq77@(B|m)9MRPj!G}j%e=u^~djAxAvN+0b|gz1h3dL
z>B6lnxv%^jAoMw)lKyD+Q*_i4LM8N7TO6v0A@Bc4;ta;2BPxXUpZc9APkd!QrLT|g
z#%8yCC0G04_lJS0#CXRPW;YzIJ@OWVO)EIbgyR*rb*G*44&!q@2jG93Tywi2W7hSm
z_rt9NB<~hW{q>a?u>6_@S}fpz1C}}_E>7Cb?P=U26|BMplH;5>{%j8>ftZMAej3rz
zdeu3QJ8Sk;r|bb1@B(TMyTBi?oO7l>o(a&FOcs_PhnvUuxxk)S-Rd_(^0`02<`%TK
zi#}v!y+=j$(nm$=lCWM<63dqg&$`j8kC$7V8ZSIN`{Q|=G7R&f!?Y|q$%MTaNT!rV
zy(@LM7n3EoSioV6$_M(Q*Y5nobl*&V?E_ewGC&-d1<alG$sN`iHz%q=$xofJm@ppA
z$Pi=AZav^T<$XFjIsjV283Y-vI+YIpxc~V*OdE!20%Gh*-<m2G6LKVSH<MB824fWK
zGqFdx`rQtL<f+>ui>}0FFo1UMhdE?B%5E8cIEI!#ySVqxXD-p;s2}tQ8^syrt){mP
zHplg(2>0g?RseU%WEVMb?f;s63rg|M|9Cd#=a0qN=kT6Cr8=CoV)GJLm-{zDp@8tG
z2)kuuWJEB?^pydR=r^071Zi;dbEqR9>xU2QFn~L$si{H2rlSNOA0MD0nSt2)Lsm`>
z_g+F1M7R85!_IUR#<VdWm@|q3a$jFxyIdf?)Yf@pV+L1R$=^!YL<(^JfccKk$^lG7
zl^i?*q&m+#+^1XW+uC1FZ&<6?khjH6VrriZqrK<L8t4Bp>9pLN-(xtxwJ7mZn*a2A
zjtnn1!NE_quyMu=nXu61v9T(g+tkT`x^$Z?BwJZXAcT5QHfNEIE<)|F$m=<#7X4Zv
z^-=<x-Y1K3eDizapSbDuCH)C<FYz}3)-Py5+uI+G&OaO)rIm)*<#E*1+^jtoaV<)o
z`Ob^8F`V^<RUg`D%F9EDlS>ALz@U(Avb@2Lpg)@@du@y$L-`>T0s;}6nJm_xl<H>?
z%vN-4><2Ir01`EUOvyGsoO1=GJ}}DY*i;zEk0FRlOH%^V28^A46v%1>0SwUKKeK~u
zT|h0pkBZ{PZc`6)b8`|^NNOyr;yzei9Zm|ELK2rrnI0%^Sk(f0Y}@1{9wQ^8UG;qP
zjCt#!O<}06B2ZduNH4r<L6$s5sSbp)4_H{-|0MXOicz)=Pig1h=eP8NHOob?Ljh!(
z!Vkl|0R1U$9ULT8QBf&Q0@M;9Kc|#x>*}Z_EI9#TYC77RHWU@wr15|~B#Q*lO=)w^
zqRC=bLOq`Z^AzGxQ+GT@^OX@Q#Mn%VJ#D_4doh`;)Pt4S&<4d$c6>M|cgvG<Q4f0R
z=EUOlMhN`de#BVm79elw+eggS`!{C^1P!-*r9xknzT@4Fk7(;P9;NYBAwC-^>aFYK
zA=ImOPaS#7u&TTd1}+EY0ebTmLJ&|OAoz5w16|!aIzoM+3VIIo5cECJ|8NHWL~!uS
z;H%0T^0Fq6?~%!<g6z+EWspkWoyMO6+}a=z|FDT<tythWBSlo|xJ)2aXw;U0M+9;p
zY~s~GR&7qNKk-1Jt`kVw`4<EmXeW=uHCao!N5n(L5kL3{{ehH`0|3^PqNr90tZgIV
z)PBjN%z@kXm1MkO%y0-7WoRbZb|J=ldEFq7rl+ZE-lmMHW%{dpl%ct$`Tn!52{cDD
z&x!RJ?5lQ3<cU@M730(k8|`uuVQvu-YOLt`0-Ny&67wrZz|No}VrzVU6|%WFM01z@
z=PLqcyTAZN2&fzYH52h5KO9s$pua6GnZtngg0D*UpFJQurTOo_|AJ}&dcs`rYVh}q
zewyEZ>RFoJf}(-Hg)CD+|D%_ho<IQWK9~<`2&jQV&IASZ0Sj8ZpmF|qH6T!6YZj*M
z<UtVxC<?$~ZjpEn351MpgDMFtQ2T+z)^f<GVsDogNY)+4XSS0n5(FRK|E*AHe1ZaX
z4L`!w2;$TT^3>xJeQtrGiiE^;zrlP}s0rYhLD2_$;A<W<h7c6qAdX*QFJ^+_%gR{_
zx&8pp+lql#$0a9#f|LKARnQ^gW*!GT+-f9-2Rt_|UX2}d{p#T(*1yfm^g|UJnsRf<
zo@J7;W9KN1GssV@)G=)Q4TYoQ7N~m=&n44?@ADDj6g92~9C9R^TUss}bl)lH2@UQE
zH32hdmkv_$*+wHJMwR6(DTwk&n@f$cr7Y1If2&>^Ei2}T3a3ni)IjA6C{1AjH74x2
z?Onj2KyDEQ`^Q&0V;2|{awzAKVyiD&svx;M)Iok~1kJD5bAi<X?ne!mA`D!>j_GeX
z3`07D5MizZ9;nI*?tvChg9!pFA`!2KrV46W7bw*s3!0a~+E(x~LZM$dg3n9<NEcZM
zm@z6`&<G#)!++aD{~fq{P$sCIaiG)+1%bLsxzq2Zr3uic2ozE|!k+s}Z!s&riRT$S
zaPW4}KVZ-OwchxM%Xl@gsNi=R!seempnLm&S4r&uEgOo?3nniZW)dC+eFPBJI)J1)
zMU9|H5DL+cSNmJb67M(inasL~7jg?*Vls+~e*wSZ2GtJDH~ur;zYpMnU{}Y70L(}8
ztFbo}V3~fDskMMN%pi7m*%TrA^~|uPIl!%ef4F4Wl9~{>I&`l=;IGvNhWl@4{|+}K
z%NP`p0F^lt+zcKFHVh?pp}`&4;ex6W#$2+`;GqtGH{N_!JSYJR4J8LV8dUfwfcrxW
z{?-eD`2pkjZ=05&%|6xtwh8J}Ai3=-*rPB-q!mDN{4kdcNbsN=U<x9^-UvWX7lIAu
z4uup0KS;80oritMwh*{?fd;$G;Jv~BfAnPjEm8ZQInw|Ce|W*ToE~<If0a89RNCE8
NkX4o`eqsFK{{p>T*Jc0!

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-active-segment-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-active-segment-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e2e0496b9f4d1ac7d2f2ef89b0dfa684ea48b19
GIT binary patch
literal 10100
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
Oc_yzWS0-!r`hNgi!j@<N

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-icon-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-icon-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb87042480093ea1ded86e2576e5024b8f3b9e3b
GIT binary patch
literal 11135
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-icon-only-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-icon-only-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f338ed6e90a64cfb43438070560e6bc2633b0e1
GIT binary patch
literal 2919
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-text-and-icon-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-text-and-icon-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb87042480093ea1ded86e2576e5024b8f3b9e3b
GIT binary patch
literal 11135
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-with-active-segment-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-with-active-segment-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f26101b1a7f35ff2937df8198813731908d87ed
GIT binary patch
literal 5970
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-with-overflowing-labels-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-with-overflowing-labels-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..0fc325fbdc27e8ca0045cb5c46559f5eac82eb17
GIT binary patch
literal 9071
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
DHndv{

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.screenshot.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.screenshot.tsx
new file mode 100644
index 00000000..79109754
--- /dev/null
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.screenshot.tsx
@@ -0,0 +1,179 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { h, render } from '@stencil/vitest';
+import { page, userEvent } from '@vitest/browser/context';
+
+describe('cat-segmented-control screenshot', () => {
+  const SIZES = ['xs', 's', 'm', 'l', 'xl'] as const;
+
+  const WRAPPER_STYLE = {
+    padding: '20px',
+    width: '760px',
+    display: 'inline-block',
+    backgroundColor: 'white'
+  };
+
+  beforeEach(async () => {
+    await page.viewport(800, 200);
+  });
+
+  afterEach(async () => {
+    // Reset mouse position after each test to prevent hover state leaking into the next test.
+    await page.elementLocator(document.body).hover();
+  });
+
+  it('renders', async () => {
+    const { root } = await render(
+      <div style={WRAPPER_STYLE}>
+        <cat-segmented-control>
+          <cat-segment value="one">Option 1</cat-segment>
+          <cat-segment value="two">Option 2</cat-segment>
+          <cat-segment value="three">Option 3</cat-segment>
+        </cat-segmented-control>
+      </div>
+    );
+    await expect(root).toMatchScreenshot();
+  });
+
+  it('with overflowing labels', async () => {
+    const { root } = await render(
+      <div style={WRAPPER_STYLE}>
+        <cat-segmented-control>
+          <cat-segment value="one">Lorem ipsum dolor sit amet consetetur sadipscing elitr</cat-segment>
+          <cat-segment value="two">Averylongtextwithoutwhitespace</cat-segment>
+          <cat-segment value="three">Short enough</cat-segment>
+        </cat-segmented-control>
+      </div>
+    );
+    await expect(root).toMatchScreenshot();
+  });
+
+  it('with active segment', async () => {
+    const { root } = await render(
+      <div style={WRAPPER_STYLE}>
+        <cat-segmented-control value="two">
+          <cat-segment value="one">Option 1</cat-segment>
+          <cat-segment value="two">Option 2</cat-segment>
+          <cat-segment value="three">Option 3</cat-segment>
+        </cat-segmented-control>
+      </div>
+    );
+    await expect(root).toMatchScreenshot();
+  });
+
+  it('hover on segment', async () => {
+    const { root } = await render<HTMLCatSegmentedControlElement>(
+      <div style={WRAPPER_STYLE}>
+        <cat-segmented-control>
+          <cat-segment value="one">Option 1</cat-segment>
+          <cat-segment value="two" testId="two-segment">Option 2</cat-segment>
+          <cat-segment value="three">Option 3</cat-segment>
+        </cat-segmented-control>
+      </div>
+    );
+
+    for (const segment of root.querySelectorAll('cat-segment')) {
+      const button = segment.shadowRoot?.querySelector('button[data-test="two-segment"]');
+      if (button) {
+        await page.elementLocator(button!).hover();
+        break;
+      }
+    }
+
+    await expect(root).toMatchScreenshot();
+  });
+
+  it('focus on segment', async () => {
+    const { root } = await render<HTMLCatSegmentedControlElement>(
+      <div style={WRAPPER_STYLE}>
+        <cat-segmented-control>
+          <cat-segment value="one">Option 1</cat-segment>
+          <cat-segment value="two">Option 2</cat-segment>
+          <cat-segment value="three">Option 3</cat-segment>
+        </cat-segmented-control>
+      </div>
+    );
+
+    // tab twice to focus the second segment (two)
+    await userEvent.tab();
+    await userEvent.tab();
+
+    await expect(root).toMatchScreenshot();
+  });
+
+  it('disabled group', async () => {
+    const { root } = await render<HTMLCatSegmentedControlElement>(
+      <div style={WRAPPER_STYLE}>
+        <cat-segmented-control disabled>
+          <cat-segment value="one">Option 1</cat-segment>
+          <cat-segment value="two">Option 2</cat-segment>
+          <cat-segment value="three">Option 3</cat-segment>
+        </cat-segmented-control>
+      </div>
+    );
+
+    await expect(root).toMatchScreenshot();
+  });
+
+  it('disabled segment', async () => {
+    const { root } = await render<HTMLCatSegmentedControlElement>(
+      <div style={WRAPPER_STYLE}>
+        <cat-segmented-control>
+          <cat-segment value="one">Option 1</cat-segment>
+          <cat-segment value="two" disabled>Option 2</cat-segment>
+          <cat-segment value="three">Option 3</cat-segment>
+        </cat-segmented-control>
+      </div>
+    );
+
+    await expect(root).toMatchScreenshot();
+  });
+
+  it.each(SIZES)('size %s with active segment', async size => {
+    const { root } = await render<HTMLCatSegmentedControlElement>(
+      <div style={WRAPPER_STYLE}>
+        <cat-segmented-control size={size} value="two">
+          <cat-segment value="one">Option 1 (size {size.toLocaleUpperCase()})</cat-segment>
+          <cat-segment value="two">Option 2 (size {size.toLocaleUpperCase()})</cat-segment>
+          <cat-segment value="three">Option 3 (size {size.toLocaleUpperCase()})</cat-segment>
+        </cat-segmented-control>
+      </div>
+    );
+
+    await expect(root).toMatchScreenshot();
+  });
+
+  it.each(SIZES)('size %s with text and icon', async size => {
+    const { root } = await render<HTMLCatSegmentedControlElement>(
+      <div style={WRAPPER_STYLE}>
+        <cat-segmented-control size={size} value="two">
+          <cat-segment value="one" icon="$cat:alert-primary">
+            Option 1 (size {size.toLocaleUpperCase()})
+          </cat-segment>
+          <cat-segment value="two" icon="$cat:datepicker-calendar">
+            Option 2 (size {size.toLocaleUpperCase()})
+          </cat-segment>
+          <cat-segment value="three" icon="$cat:input-password-show">
+            Option 3 (size {size.toLocaleUpperCase()})
+          </cat-segment>
+        </cat-segmented-control>
+      </div>
+    );
+
+    await expect(root).toMatchScreenshot();
+  });
+
+  it.each(SIZES)('size %s with icon only', async size => {
+    const { root } = await render<HTMLCatSegmentedControlElement>(
+      <div style={WRAPPER_STYLE}>
+        <cat-segmented-control size={size} value="two">
+          <cat-segment value="one" icon="$cat:alert-primary" iconOnly></cat-segment>
+          <cat-segment value="two" icon="$cat:datepicker-calendar" iconOnly></cat-segment>
+          <cat-segment value="three" icon="$cat:input-password-show" iconOnly></cat-segment>
+        </cat-segmented-control>
+      </div>
+    );
+
+    await expect(root).toMatchScreenshot();
+  });
+
+});

From 97737e06f4427c77a3fbe1f577112383186eca86 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Tue, 11 Aug 2026 12:09:19 +0200
Subject: [PATCH 11/42] chore: fix prettier

---
 .../cat-segmented-control.screenshot.tsx                 | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.screenshot.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.screenshot.tsx
index 79109754..8291feba 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.screenshot.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.screenshot.tsx
@@ -65,7 +65,9 @@ describe('cat-segmented-control screenshot', () => {
       <div style={WRAPPER_STYLE}>
         <cat-segmented-control>
           <cat-segment value="one">Option 1</cat-segment>
-          <cat-segment value="two" testId="two-segment">Option 2</cat-segment>
+          <cat-segment value="two" testId="two-segment">
+            Option 2
+          </cat-segment>
           <cat-segment value="three">Option 3</cat-segment>
         </cat-segmented-control>
       </div>
@@ -119,7 +121,9 @@ describe('cat-segmented-control screenshot', () => {
       <div style={WRAPPER_STYLE}>
         <cat-segmented-control>
           <cat-segment value="one">Option 1</cat-segment>
-          <cat-segment value="two" disabled>Option 2</cat-segment>
+          <cat-segment value="two" disabled>
+            Option 2
+          </cat-segment>
           <cat-segment value="three">Option 3</cat-segment>
         </cat-segmented-control>
       </div>
@@ -175,5 +179,4 @@ describe('cat-segmented-control screenshot', () => {
 
     await expect(root).toMatchScreenshot();
   });
-
 });

From c23820e9befde4880bce88513a51e815c1332077 Mon Sep 17 00:00:00 2001
From: GitHub Actions <actions@github.com>
Date: Tue, 11 Aug 2026 10:14:35 +0000
Subject: [PATCH 12/42] chore: update reference screenshots

---
 ...reenshot-disabled-group-1-chromium-linux.png | Bin 0 -> 3871 bytes
 ...enshot-disabled-segment-1-chromium-linux.png | Bin 0 -> 4345 bytes
 ...enshot-focus-on-segment-1-chromium-linux.png | Bin 0 -> 4913 bytes
 ...enshot-hover-on-segment-1-chromium-linux.png | Bin 0 -> 4613 bytes
 ...trol-screenshot-renders-1-chromium-linux.png | Bin 0 -> 4290 bytes
 ...e-l-with-active-segment-1-chromium-linux.png | Bin 0 -> 8512 bytes
 ...t-size-l-with-icon-only-1-chromium-linux.png | Bin 0 -> 3464 bytes
 ...ze-l-with-text-and-icon-1-chromium-linux.png | Bin 0 -> 10085 bytes
 ...e-m-with-active-segment-1-chromium-linux.png | Bin 0 -> 9026 bytes
 ...t-size-m-with-icon-only-1-chromium-linux.png | Bin 0 -> 2984 bytes
 ...ze-m-with-text-and-icon-1-chromium-linux.png | Bin 0 -> 10296 bytes
 ...e-s-with-active-segment-1-chromium-linux.png | Bin 0 -> 8932 bytes
 ...t-size-s-with-icon-only-1-chromium-linux.png | Bin 0 -> 2965 bytes
 ...ze-s-with-text-and-icon-1-chromium-linux.png | Bin 0 -> 10140 bytes
 ...-xl-with-active-segment-1-chromium-linux.png | Bin 0 -> 11174 bytes
 ...-size-xl-with-icon-only-1-chromium-linux.png | Bin 0 -> 3966 bytes
 ...e-xl-with-text-and-icon-1-chromium-linux.png | Bin 0 -> 13087 bytes
 ...-xs-with-active-segment-1-chromium-linux.png | Bin 0 -> 9488 bytes
 ...-size-xs-with-icon-only-1-chromium-linux.png | Bin 0 -> 2919 bytes
 ...e-xs-with-text-and-icon-1-chromium-linux.png | Bin 0 -> 10610 bytes
 ...hot-with-active-segment-1-chromium-linux.png | Bin 0 -> 5477 bytes
 ...with-overflowing-labels-1-chromium-linux.png | Bin 0 -> 7638 bytes
 22 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-disabled-group-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-disabled-segment-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-segment-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-hover-on-segment-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-renders-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-active-segment-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-icon-only-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-text-and-icon-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-active-segment-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-icon-only-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-text-and-icon-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-active-segment-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-icon-only-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-text-and-icon-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-active-segment-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-icon-only-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-text-and-icon-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-active-segment-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-icon-only-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-text-and-icon-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-with-active-segment-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-with-overflowing-labels-1-chromium-linux.png

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-disabled-group-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-disabled-group-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4dd5d6bb9187fe891f66094be16ab196dffa968
GIT binary patch
literal 3871
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
REF-=OK3@LFhP~Je{{o@nFBAX(

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-disabled-segment-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-disabled-segment-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..abf474da6b110cf9784f5bc727f92a914e0bacfe
GIT binary patch
literal 4345
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
Lp=Q|~``7;h_6P=r

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-segment-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-segment-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..f87e2a368929e7297c9cf499e897db9fcae6323f
GIT binary patch
literal 4913
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-hover-on-segment-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-hover-on-segment-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..8dc429e1992aa289229d0ddf98760a6979a5f7bd
GIT binary patch
literal 4613
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-renders-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-renders-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d024c0d13d1a36f6254ba8b5b403e7c0c6cb10c
GIT binary patch
literal 4290
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
A^Z)<=

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-active-segment-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-active-segment-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..8427deea035c2cca4a520a5fd23badcf7c97e8ea
GIT binary patch
literal 8512
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
bMnXBG%lsbqqYB{72sAlqWvOzQVc@?3v0Umb

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-icon-only-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-icon-only-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e91c6981547a9b5d9027ad84909e0bc703cb869
GIT binary patch
literal 3464
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
F{|4P3kLUmZ

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-text-and-icon-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-l-with-text-and-icon-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..a4ea467f2fd2896bf6ad0c9d85883033f4341d65
GIT binary patch
literal 10085
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-active-segment-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-active-segment-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..9096b4b61ec759b83fbcc9635963ad95772c025f
GIT binary patch
literal 9026
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%0Dhyr-
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-icon-only-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-icon-only-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b0fed5714da0ff27ff4d1cdb6af5da098d12c01
GIT binary patch
literal 2984
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-text-and-icon-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-m-with-text-and-icon-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d3414f5ade67999a7d5b5bba9ce0460fa63761e
GIT binary patch
literal 10296
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-active-segment-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-active-segment-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..b50ea1bd03bc414398f4573ec0f378499651c179
GIT binary patch
literal 8932
zcmc(lcQBk^y#I;l!Ya{wS$wgqC3^2Hf)tkMHR>X)nnYVQ5xqtyMTzLqvr6<JQ9_hu
z^{9zn?jzrO@67Mt-^{&t#+YaJIp=*o?K$T>&+Ek8HPE_6#!QBXhj&XyTiqBB@5V83
z4JRQ2{xhy%-s0hLzt>S$xrf64)p^VJ9<Ft5alRR5e@N|H-|#jl(96O0C3xK!YyrhL
zBsJy>PRakx%gy(Oq>uz*r2dL5%#_ra&>+?Jwg$dCk3iZnwW2V{Le={RVR$P)sWa^D
zlOfdZC#{a{=Y1{d_yxg2b9Ysbm0peoaYcYsNw^}MX(|4_0J%p!|N9H5a7gUm3)NaC
zqU$yw)#y7I<-ZpsqmGRKUU2=OAoy29J==!!KgD4Gdt&Sc)hqT%3PD*qV97pvnuKeU
zyE66gqin1hWBq=OX#=)6>&xe;?)@b7+tK-J;phYBe3{H*8PXt{q2h*v1^pvVb=Sp3
zI&HAzQ-A;DZ_Hd>eWM7TuJz&+Rg%4-UvtTvqqBqUsBtJoB&aMKZDMU$m{~kQ!u6uG
zPBVG}?m84BPy$kAg=Bu)(vesK<hs^Z3L+)>legxQl}V7&6_PGdD$TxBE>X{I7zH9h
zPB$yKGT~!6@Q+T0u%SL)UBL*@)rTO%Fu&Il6lz>u>&pd^zoy6IL0FF3iQ<g)U)qL%
zW~R2FwjS*I&vTWlO-?2Fh}}5Fn1t(arj`Hsx;q+FmW-xPgM+D6x60~z#OPKtECDff
z^F{rmufuk`CC%CP#zlZf_<hBi(c?q;fPs>#IlpQroGWx(R&_99bgH$IQ8r(PlQm-}
zm@BUDCCSDB4nGHBQvlbcTG>=<@6Y}AyLNV~47l${q#8|MQU}&>)t575R;_)q{%h<j
zBDt_m6G+0k180OY65(nr@8Uu-I#E)>RP0<qtxAGCWg_81#7|@qB=zw|*>I|xr#mw8
zChJgsMesy`u)m=oCrSR=7e7Aex#GT670E7pfkzQVb(*dT#?cSl8CdSLjD+<(s(oOv
z+@9Hb$-_)ri_jIkb^=HlLh1kM$r*9%Cm-F)%A6)@zm4U)_i*w<s#~SNmWs=CE(KF!
zc(+cphrP~|oO3MuP55C9griTg=<!-ze(bbHs6mPIAJHb<idIbOgX+`0%8VRkUqV`s
z_PFE5+btjxFN@K6pMjSiMFovvQXD(aHOPH7&BO!b$J5L0Hp{$J{MaMAmr!2VI#h%F
zz!X2cKV3oZmHzwEx|Km%r*Yz^wsR}siQtypQxr3PGY`Q*SbQtDavD0h=D<^Us+R5P
zcFFId-9&8YxuSyAIqj26kMgD_@?3=+=IyHwTdfF3&&RgEDjnVO^yeWbDgNXOM_%yl
zUap?XOWI+FI|MatFT1OoUJX$MBNbd_E&Ao8j*6X#5fj7h(5j6PN6$E84q~gIxM2oI
z@xylmeWyOrq&wYj4`v3N8x@?$DkOCU5mM+V9C>CliuC(;NjJW1A+n&m2tR%`qGf9&
zO(Bb!F&lq-BQbt*Na28%_s|>WK#@1Ley{ROJ}2C5U1NafHRt>wBDN}HPl?a$30FJ#
zApK&E3_Kgku!j^vae)>Z3)@%IIDTrXAqhPd=Lq8HS0-xg_fe&yX1x=Ji(y;xWO2QF
z3tg^z9sz09h8ZcML22A9TwOZ*UiEPv%Y8GRwt)g2YrPz+bpZiW>eI#-!s8rk{j(?I
zD4Whl%jUs61{iKf1$X1Q_t!SgHj-DyZF-Y6NeF+6%bRPBu0S?MR4vgUe(OCziirLu
z^Wv^#!920+vZX{Kvef=8XJ_2a9cmqME9PA@ZeEt5fB2C0#UnkVs#m`QvEWkCAMnLS
zdH66Z!WAL8$^$<4AcPeTovXnXooRg@NK`MpWPt5NxiaP~E@pcxUOp4t2~{<G3JHP9
z7dLvaHZaY0r8kmxs15k=q_j826Bn&|A3dd5%$=2(xF=FH-|RWAO}gWI1p#aQ=+08|
zaNuDY+(?S)Cgr7RB#q|JLb}+*jF|2An9uI*oxs~|80}zf%ee`4gL8*`mA!f%>6{@~
zn~y@z=BzRjpD>xRBls#Lol@2`U$<O<OVKytL(h?x+39Hg6p`;E;up^=2XmDY80cp;
z+PbB%62i6<<6vBCAV_SwH=%jqQzN8IJ0dl?%I=tkLyi4}tsNpU{c)KAj#>a?{chL9
zowE+{)vl$NV-c2Xw-?kcq@p%^qPtnKwG!x!J}GE{Y<5uIw6@OI62Cql;mS%dYjawm
zCC~bwE`7LFZRTfWKn4kyK@_?s3)A20VW;c<Y`;N>k*#)0RQd9mR)C^4tazSRQy~Yl
zA=6rYEDNdj%E-vZ6x=8wKgmxq`BHGWo_)N&9JtSa$sef)HX4}p+BCaA{p^uMf&o3h
zJ(0(9>PwI1l<3N(lYW5{S|P?qbetuq!72fE%)_u0`f1?`3mr^`d>FVQYa)xTLb3vZ
z^`UQR%3>OI-2EZ{byYX&QO@%`(YLPW(bMmxcAH1)p&R;2xdZ!O{_Ni3jdt^o_LAPj
zzIMx+O*ZL!Qg5=_x3DtzGt+xIAVYZs(&T%wM0Dr8DW=C`o^KMf=;z^NwnW*&ls-1O
zv#35u-uz)@^^x@LS#7oh#n}YW#DN9!8N0wAu-z;U*e-M1*sD&4(u1B}bF-yoabb*_
zYe}7^VB`dI30+0{|4+2|5txBg%AXu>tv9~nfkBM0gtd2ygB28ubSKr)Vdf+6`iZs*
zU3@=EbHTiLs)Bua%G7<?MjmSR<(YP_72*kY+l6ZEF}BeZ*M4zy!Ra#hEK^HRtLEIK
za;n+YeQm|Qk~Ee{L5g7QBeNV)C^3ZEpQuh4Zs|jX7$v=EC|cS7Vc2)nC#V$Fu7bic
z6(HGPFD9YE9?^_K>rWR=SbNNsPdMH&vPmF|HZy{*ii9oiV<s5w{Westkg!ZdR(PM~
z=<WCosn@9K1e8!77WYG7Zt#XK_>v!YJ-Z}nIPPkeUe-TLIwu)V->sYVivDAiy{#c*
zTHGih{4@p4VczvlgtE<`RWMsRnV9&dSnd;fuRolR2i~DvE!ao-!q*htWT2D|Cj0$F
zmW&I%x2mkSm#ucs-!W%dWE*Ix1$gzS(GkO6V0(~{&`}#h5qbnS;V-O_I!07me4B4>
z&FhHu7T1kmFMg$U-aJnR&%C6p_mp*%`b9lPLM=Z%nusK1V&^`XthsZJPp&xZ5NoD2
zf3g{45iCRCf^C?or(I$Fv|>5jav9)z7~JWZ4zV-6pu~2>i7NHRu?`=3KCD@f;z-2d
zPo6|i->(yPo;3(zb+aN0Y4$B@F~@5sp8eu@I&5XQj2&S5qBZ#5Ke{AWFK_svc-07>
zeSmcQdV4$}4`k_XWitVK$tTxviY|P1_Jw`Gl+bXg{tj%hwW9pQP0I0%;?!@r?EKwM
zGA>wo-f6<vfiU1{SE^}t+Gv1AiZpsN@DJw%FgHnaKygDyC+<aRjWP*2FBqT&hK5m(
z)^OS$+%E{aK4)isT(l_lB~QdHf>yuE@Dt3VDP8M(nbH;uB**@45Ck>e(_8i(3}7sb
zWs|v7;&{wDH=D|S3q}cBeL0P36?7ylA~Faom{h~5&Xv1#{2^SIbOhJ*I?#T)l8qX<
zMQz7-AsQTuL6HkwsogFL2YdLk`RqJR>3;usiaC7HKw(YE18kz_BQ`DcDa`1ihgP(i
z+7oBeV!_g#ZKmAUbyXbf%ucWMp$Zpy<s*XjiNP<OTsHkbsTy@)iy0stC!;SZ(Ip(#
z8fMBGmuGE*-=@L!j)gV0=DBHfdftc3eK?^>I0)g(;4gnC30*TOzOz@?;$o?Bm8yU`
z`ISkB*jl<buW{7Lb%>NYIRBtB=uLF@^0ekRSz`o!!s?3|V(NnjP|s(1A+tnjicMib
z^!KVIN$L#eyV<DD<E=l$j;bW{Oh-<d^jI21cz(W+P|v_q6BjX_{aO>>8YDCAGqFF3
zf2TSNS03BMs+V6I)}FSXN|M@ew3znehHe<WbatlP26)Ar2UpduUchGaJvkYL`erg!
zHLKOuy|{HFmRxw-G??JwH+o}ntm3xFrha|5$^%FI>GGmQ69#W!EsdS{hbHDOF-mSl
zT=>0$miPq&^q==pbsVzgC%fdcdedcXp+c`XjvV##fMv3ENaU&I$OlTM^7Zjool+^*
zA{F`bd5bGtYNlS*>2zh)S+7MSotK5=u6k0sJz<#Y#^x)|346(d;f>p~`yPBx_MW%+
z=xf0b-&b9ctoBZRSkH1yyI-;JTB*{;O)J|WcVwvx>-J+-UBT;nNha|8=-Qw8G3%5$
z_4<h6m+gfRU0seOPG;-#Kt9L1;n<FX&)Hura5b0<dPp528=iJ7oVW(?gi<z5$Yg9^
ziJc{UAB@f!`JJRfF?^ilaDPX9!~Z>0>$l?v+~QqFG{wiU{I==EZhxVGJ%u>MrgSJS
zOK*LmlK{2rl=Cvr@XgF6-`Cd@I>=J5tjEsLW;cTftEK6cIzQhCj#IrSB~9l<Pz@4Q
zvVq|;$x4a1YS$p!C^udzrz(fJCD(xQme@<7pxyl$m|*Qx@7uPx?QpfNC6AR8oA3-A
zMgI98r}f)jq$12CYz<W0D;2hLcuHrDw}eBy36F%|*t&uq=e5Pju^%&aT3<hAy{j}8
z^Kf?@tvm;%c%UXIuBa(5iiFl$yHq2VB`~epUz9&+7;!1v0e(=Eb03;+N1F0rchb0x
zreOb2an{&eS?B8wCzy}c&n^p(;`2Z00<}Elf!;J!F9XTWQqR6LNas9KMn3Omi}PHF
z{h_L>IosRn(Arlo{iR=+Gy91|@P_J(7!WoaCLPz!hGtZRe1N~`bv@go=2>anS}i(j
zbcu)bch>s|FvF5ZI~g~HT%-5@<b36(N4x2=XX==#;LQvdI1j?NMWR1G-qZaIvDzCA
z!NS>v|8`=BCT-7&eJ>CY;o4S@K67*9IBOgQ=}-Cg*F&Mz<dtRR0>sI*<f3_95xN4|
z&;;zWm>LIay-k7?{R^2ALi{b|hyCC=ozUO+)7+5Ku}t}Horp985k8p3&;XT1?`;Oe
z`R?{Z7q96NC!gmdIFnu+yr8aB(&wk6MThuE=e`$(<#}2<UGL9?fl$jcnjXKyWQUOS
z&WAYUeP*}0L+U4xdDCJfj9ii640{9YdkG007+G-LZyF|Nk@{Zk!cQFV%i_9I>gcP^
zN0+y=f4ZG|$x-qr<?n?{#{Xy`*zt!r=&tVAdKcf^9+sxGJZEcB4%1%t;eNIh{5%=&
z=>!#HT96``Kk+!s;XP2ml!xs&7+-_JEBCq-w12YybZUJ61;mUAKk8za`=g&Ew911R
zf`-8$HvRWAZyxK;7Cb%(tPBp6Ip8KWh96j*yDW71jc2)3$k2BE4`z!Wd++6H7DRz*
z-%H_ywhYSaj1)%ltIj&volW&7L^*#hHK|XCiFxFu;GiLskz<NF;RWAQosM?_*7F>Z
zI8y{izT3u#pa_XI@h9Uudj|VORUhr+Fh+xT4&)ObeIE;EE<UylU68G8{E9{Ux9f%v
zgeqo}2Sf5?A*#{ION+uQb@1S>Xc<T^tv{>n@va&8EOS9p=1XngphS$MMod$1g{fM`
z8!6>bV9qPmFLTRA=_}-Y0&#ZVtm;!KWf+gh*aY%<m51GO@P3y1R0u;5(zrT*U}_Pp
zz~jNDqho`YyySza630EqS%?*e32KBI+b)Xf=S5{a`E!)fUEro$2<f#a5@2pfETpC~
zYJJRA16JyMcR~eiXpElLpkE-QjrP$TMT{dd9ht!kjaFFRj-5pkB)35h-2fc3{LB}A
z2$RdvOCxplmsPjuSZ2`%#e^Ert!3HRROh+8*76`mVNP;B<&u6vN{lac-kep3L3)$(
zk>ig~FGE@Ww8fzcmURRD7BVcdbf7wW3r9|g-TZEpo(ui_SL%~F0~xy*P6AQ4k!n8Y
za`TahQ_+G8jlu0ay)^#L(zR9f=W874$V(2H_&TA^(H7rL#b=*p#SSJW#H%2>Au!NY
z#Qsqhqv?K#@Jn<E4JksXLNZ^P79~Q<0kwTGu=lsLg46m!!6<!7ad&Z;zOBBIEyPM_
z0tDW;m6+#_OmrC+oB>;!jFdrcYC}6+y%X2FCAd~TH9qUBHj9LrU9A?BS6Ot;_Dw>0
z4~eQ0`Y_8R$U||Nj{f%4#pjB%2Ri}6kha&<4KIp|#h&%;H7!2O-0$#)FdB8Ha4QJ{
zFD0dhYJ;Cng9fp8@9-I=+ldp<C75fEMx)<Y)+L%H=UIP0M`xH@bZv2y?}m|f0lQ{k
zdWH(s5Kp&7y1l)%M7e9{&5JJm0fNeD+thbgcgOVNi=yz;Jvq0rpCH!WKaSxoNMfns
z&<78<FVuMWBsWn$dp>ZEsnip@e^9?(v754nvpB9Vqu)@@_6i*xcGxP7|Hclmc9bjK
zyZhM3yPTCwkAtt>gi`G^f&Uw*N93c}64VyDd+J<QJCUPv9;(z7{JE$7dv!iEeLrr-
zM?h+yVMTJAXt=;<!2({$TEQgMY3Z_1a9bPn)_kO6-m_>fePC0{s#|#gvzPH&BA<!B
zQ}Mw>sxZq<yN8o|Jx<NjrdRx-`+E#6Awe9c-W0=D8ODDYKIdSDLO#K!_VGw}19y`&
z8|I{T4H^!hCys;hcy@X>;vE=V-~F@RjFhWnLEl^mjhUf9$>-?QP6(7ZyO$5L+n>>Y
zEV&ae*YUFN6>HXGwXQAB$Z7gsdVY4|mIXqKw&#s;o1dQP48W>yJQ8G24zIFdQ%fr^
zwozwSNyeP~4}}l}Bs09mEI)dY;D&^7U|7i?h?e)J6|PU?k3Id%;^v`h85`AGkj!b7
zV6fEy1Bo?lX?@=!r&NDhl)#)aB}2x!$?+Den-n~GX`hPzd6+AcLRnZkKatD3;8YRH
z-i5Ib_VVNJeNbLKxy$CP%L5b(ao=kc=@w_i^=YeIY-i}f3$iwfPeeYtlaGqSuS()i
z8+<!#dd3<ucU2;^!&<T5zF)kuX*VDF0ld>T#ee#s(2JFwafuI?!hk22S@stiMtX_3
zXV_Q|eSV6*nIX+sP5$1AX`r4yR3u2h%p7Wq3uxW?hX}#`VkG?gBC9Y~!sCi2osP<^
zDN>jPmNeqo9Ge~TtU0_Vm-Iz_oc~1INL(}L>ezdM5rvl*^2adYa|x3po16Td4PRf+
zK8qwgh7I@b0}GA;kIQk$dNe&q!1nkV-mSRT)-J6BuVzml26!7OWOnncd-%8+WZVtc
zbMyn{^-b;*-k6Gb>+UW6CE;TUSFBVbh7im@^fn;+y=Z&d30JyWQzPrkk>O51jD!s2
z%9>iBF>Tc6A5?&CVrl=wX{;9o<d$9!tW_3G>@=&>)~(Vuh}UMSu&GAfCNeIumj$kO
zx4BVCyJ9lQJyQ>)lr_92OJlUl3M%{Ih1}_*0gTWlQU^&|b<U@DdJ+Fe#$P<hmP(j1
z+PL{x=D~Nl#?b`fP!x@*93cfq7Md`lp32sy&<O4Ih8>MDJ5duP?=h7Ppox2rQ7`&a
z9vmodI5GA6A0ck*eM1{ZqP{~7z%gy4DtW+u)9r{yhu+SQqir1-5?#FM8bY~f*=OKo
zT8_r_5;7@FEw4YG3&e3Sj+|$aEYMVhrd2m6b@dBq#X#C$LDH#gxBCNGC;1TVFS=hU
z^asx4MKKU*$4Gty9TKjmxNsw)SLLJrv`5Xf6Lb{~qTB`NgSK40@r>++$KE=J5Y>*@
z&pkQuy(1&A9sD`#rT^k~{0D1yHWnFl=Oa<BNsJ}1V;Flb{o;TyVMeJ}$BXXi1NQKC
zf<<@96wgx*Zi9&V%1T^<wC}GRy#~r038{~nHhOAqZbY^-$9=O-cVEgU1TMRL%lTeD
z-Dgxzku99{mfW)!Kj)>A_2-Q%$7J%fRF%q1BDP`v$$c+gCvy=ysU18kNX=O=M>{(F
z+$<eB6}5(DVQdyuwO?g$o4PmDapGBR9Tdi+QD0GT5YNEaq6p7r;oskT&_91hZnV=b
z{*Nd@vUI}Jvm60S?~7GVMA-jAPQAy<x8|0ECZUUm&89To9SL_Ye!I`s2xx|yQBQ-l
zps;ZJv%+t8WQwH=BIQqJ$v#7ZWF#cjp*7@RBxGXE+Y?D&x|fdgzy!&&So<j~4b4JR
zx~bxwLiKNY#XL|Nn400Rbx0{vPoLLLA0USMJ1D%^q^Yp##rCp0w0h!U$O($Om>-jz
zh57bhf1Y8ba*}H%HnFnOJK`fZlfAlA$@oBxHq*jrD*SVd=UvMm*=})asOk`#l}p|@
zE`8(|VcY(=b{qAtynHn%-iy`wu3bozg)xf9WL3XN4lQ=T*p`3e=yDIfmaa#!>qswt
z4!m?w?jE=|6<F;rap+^)v0Du#{0xJU<hqvFR)(tH6_N+|7v%8Ldr@Ao=cayl+BRky
zZMU9u?Tx-&UOf*S{&N%Ffdf(29pu^GH=&K+7$ht@)=dnWdo=JZOkPvT1pmm;_Vhag
zk}Bwgj8Sn_YI%mW8xokZABD~kFNe|EZsBlAmOPnt*324rf@C5dMCMyFtB{W-mG8hj
zyEsoh-r1R5@ViC3l_?@A146T3%P>HXKkBVH21vt$<#2HfURtn3KZw*-BgX+m4w$l*
z{hD%E6jAB(t@k@wOlKABIZfnQE7i362Tm8C9)vhvwS~!S;p!R}H*6jKH=_v~bK-9%
z%xsv_u1@)ds_=Fi4aUQXez2f+mtIcQ9&mg6Z|5V;*{;r7{dM|CE&7EfAL$s<PW5s5
zRofg`y>Y5CWxIG?ZrAQx*?dTp_GJ4@3QKJDy9wA?MM?0E2<I=0%KlFzuu%%sG5V$l
z)<X7d+^nWPiKAse5&z6KG(^o`^F$$WYB)=i_{XaF*Ln6))h%{-NQlVKbYc7Tb0E~F
zxAg73HEgKJ_}f$hTs%LDP%d^KMrNKR3r9(GbJau(ie5%ht0bokVqg8vdrFIGUiQ{m
zOn~P~C2X^P9<)0SBbz<zg%wyqpdHy}Uv{1T$&l?BX|Vlcz2PZDB7aB@K0iBRq(s%k
z0m-?w&6b7kgPIcl78T1hX8J6+Z#O-C{LXVJwtAAfSF0>3?_g7Al2!~qT}}Gi@YC4)
z`ubw;U<~nCA(ia_e-RV%eZ~to;jB{3`a`QOg)N+r^>NO8qNfjC^O{jV3%hOqhhcbh
zb$Ys9V1oTbm<!$X77m2C9Tw(tQzQb!ue09jtRm;vRBHx&Dm)!^m-uPk?b@(n?d|CE
zu6O)uTdc?`Am$@$^2C=4t1lu-A+dup_Xh=PornIVN6B!oi-*B}?!gFv!klD*>8lO+
zT*p<!lC9~>HL1punD22RF5BK5-g#y8Ic#9KNYb16{rZV9NrN7g<&^k?b4ZfTkW=1M
z6-3rG<}10YTaZ$yA6;qv4ZuX}bN^U2OA;r;vP~3TU;3k&F8cLSa2d6l9v7+}C+jBm
z!*6Xh3%WB`W)H!tIR-@7atGXepF(coy$5KdOM*q#yL8%Lz8pmdBEu58f;2HV3+wh1
zXHLAMPOxsryFRRlqMHdEp{lt@R+(Sxc<3ukxL+v?MoPm>PyD?N%LG!t+gKoY(n~jR
z>T*AO*Mi9b#CgCuZ0Y!H%;}xL9ep^0Cwa@<3R_VCF70E|5F~Uy<jvAC^h7(C$l8nJ
zqVT03XbB^DsB)i9y_A&sDg%6uuHzqt#~PC%iNpv}6iqa$U2MmgGwtV3X*_R9LiHm+
z^I>B_qhWqq-qcvP;%j_&%@l`*hKlXaML7VFh;UUrJ0~|D8ymY0l&WB)F&Wpe=4!nZ
zHP%<$*+!SE%S>NTBi1<9-nhnY6%yh6-f!zX=^9~jYX|}i6;=Ym*20`^0EE~zt$W>)
ztb|Tiu<bl3M<Iv?AdXu)yvNNfTGzrQbb<h5l{RMr;C5NI3c21jq0R>eJv0tJ42Wlw
z^9ML-H86_eSvyp@fbN=bDrW)0*BrObHN9tBfiyyTMxf*?!bboj_LVtFXR2v)=lo&^
zIefxEYbZyx{!5+_5O)f*7w-ca(*)53pZKS**wbLNF=7-Hm<8=?16Tm9sB45w?<f!{
z^;0d_{|4Z*t{`P<nqy)iorIJW?MyXog(N^|UG>E?c{N-UKov2@v2+-*ySg@vfFDsd
ziD_w3#zZbIM7n}0#@AKG)ivFpJx8eq=>L?@xdB)LQ0Qd%W58d*66p>xy1rtdBtMHK
z0h||{3~*A}1cKTLl2K-X5@}_@Yu#%p@&6p)T9p+DO>|9yjlkGU375L-!Xll^m8d1Q
znf97zN7n!Wy+(w!6F|GqV#=->;-pakaL>O6!GOK50DG@9QA>mo6QhVUj#U!`QstI1
zHykeYGaOVAi8lF?z1_J4ovJCzv^NGGyHS$SdO;wzMJZUk5;}w{u;X{gmlPlb;Bm?g
z07Tb<0X0VsAd6A>|9Y)$1k}vmI&jauL4g6B{Pm;c6>unFGz%r&Jw_2OQ3WIeh$J!K
z^ff-dX4C-HzI)A}3nh(otMfGf7S~@(0gQg_@-?)^sgR6fQ;dOLzz6_v=>`V8egV-2
zM1Y`7XbKVv{M#HD{rV<w<RK@NJpxn~0l0k~76WylIxBLGV+sCCRef_&g#@X4?O}2u
zAOcG@j^zPjqDnIQ2?ccb1`6Q6ZoLAYf(TGWIx$z563~qHzt156ry2&rL525?bpIZ=
n*mDOc`rqRg|0f49j-NV{w>XiB+&TbGui)uu7^qjOT8I4yeJ9h!

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-icon-only-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-icon-only-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba9b1a6da4aef6dcb34551238ff9a2bda47fe41b
GIT binary patch
literal 2965
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
J_l}=S{0Gfsj$Z%(

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-text-and-icon-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-s-with-text-and-icon-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..8d2a7613721b4bf08a82f22ed0bcbef6effe67d8
GIT binary patch
literal 10140
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-active-segment-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-active-segment-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..927965fc150272974982b511812f0f36b291f743
GIT binary patch
literal 11174
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
To#_Dl?Gr^gHQ6$0laK!g(8(jb

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-icon-only-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-icon-only-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..b18f92d606014d1bc96732ab4356ca82ce857021
GIT binary patch
literal 3966
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
T75g;?)YUu~JrguT*DmDW>MWOe

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-text-and-icon-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xl-with-text-and-icon-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..6cd4fd3b2d1de99eb0c9de76cab9ecde5301cd81
GIT binary patch
literal 13087
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-active-segment-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-active-segment-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..13618d5df0d0aa908ca04c9de18b210033bfab83
GIT binary patch
literal 9488
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
D!5ZZ2

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-icon-only-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-icon-only-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f338ed6e90a64cfb43438070560e6bc2633b0e1
GIT binary patch
literal 2919
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

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-text-and-icon-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-size-xs-with-text-and-icon-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..285661bbc9b1b7b112c26a855a48fa79fdf9addf
GIT binary patch
literal 10610
zcmd6Ng;N|~5GFs|J;9wI0fNge!QI`0y99TK;O@3aa0n7KVR6?0izYyDNpN?9+>l&d
z-5+pucU4<kU9)fcb@zPxrsa!PRhGd*Cq;*YgTs=Ol~jj=gTDb}SyW`;JJjn#7aSZj
zNKR5r)BC@}9yAlp%e?N><0s1$A9AilHZHwV$c{LEEJT$TFa5u_@b7vpMVTW*Or(;&
z6~3qx6_sL*ED%>ML<UKsy`cGo`$fDcyktKGjyGBp!g^rE^n(QCkC5s!IxG!>pO>F3
z>6(zy8=?-w6-T8Bv%%&0C*Wd5MEt#iThuf8PY~xJCVgImD;|X`A@Ns0oiefcC(w{$
zVm<$aN+TIs_)iG4;rPF&jBiiZLtt#G_<LC2%XMdBjK5~OX#|(q+GNv$!7)rq5~wbY
ze0!=VvQcz0|E#|+W-S1dmw_>5B)<1cF4hgr<BI3z#e;FN_5Cd=Y3%h-Piw~-Si=PJ
z)6@ZRZ+Hr~aL<l(!F-Y@9Jk1mZ?AhwmDhAsJSqYPtZGhT9o?`8R!${__q_yE&YRn#
z(%4yVzOBNJ1i1pCz=BxnN!pT5aq<=MU@6V0qSFN8W+1IQXYDy>70XmrU`MLS(@08q
zY}rKF=o4m_0oK3<eLOF0c*S`%Gc556ha?FI%q60z5K5_E%hLfLhM&@aKWoXwl1!zz
zMKoYw7so_tR2MMWww?gFbX3G}11pcxlrFT`7TB!%0NB}qG;*8{2$DQ=n2k-ZDF%(?
zArGu^uPz)HE80>|H$zJD3mdwU2I{GKIbdoN6D{j#FW{YxY_B%)^V%@n)#x(j1I{T_
zHRE~nqQ4ef=%LcUx}_1$#7t@Qo9?3>79TP6H3>(K2;WlTRM^hZ_KWm2umYNBe_Cyd
z>s^mHPO~S{G01O9%2f7k1-+Al@|~id8um-dm?9?@r2+c^VFbW9U(}GW{uc16Kl~*s
zA~BykYAS>9x3cReSsy(Ts-SzKm7u4@_67lz+PTqq{$)i)Ma*prU*=(-l+#U0tFdOZ
zG2;iCpo%Ye*XK<F9-Z7XZ6CfP(Y%qf{{Z8(0>$1L^chwKi9_QEG08moRZiR6c7FOX
z2v1Nuw$BbiwAAWOESvb{XbQvQe`c+`!ffqi9HoFx%`C%{twzf2_Aa)R{eeHZ_}!}D
z(YbEem$WZ<T0J2#L8f2$hmSjG%MjDY1aY&RjsE%}PqS@W)??x1w{_z^dp$iP>HH_Z
z=jXWyAW6#bZtUq5!Bca(%<8iE3S*mIQ%6W{3YV+=w_#@H&G4tCk^2pb`{SNIgN3tI
z=N(Vj>kFh~!hm6keRPsXZ5loOZ%h{yWwxUk^t?@{hLAvZjHmmq`FBQ&)$!)or?AQw
zUwq6_tPE(O#C$NunXb(6{Z-4goMX<t4t(w7t72$#n&-HE?(c%kQx=RHw?=Ju4zo}3
zLD%^^Z=J9bAH2-D0)M2uBwg*JSqXAO%Iq+bRn~I5d-V`jMrzDmCEsj$^g4p@xO{oy
z4c*Gp_?VUxr?bO<<||K8xfD-Idd-}3{d|@xyHq4MJ*G8sHgXv8U=IM$c=F6?>IOCd
z_ElcLzPUf2uzhrTicpUUirOuu-j*9o^vmMhWZ($8jJz+MmR_1z+?c(EDIOzh6NNR?
z*CT<4vVO7dxnX&Ienea5Qs=PG4SIBSEstMYDZJ*g+JirPd@ll<-IwFApRI`r31@HY
zkV8jfv!5Njcw;(wDWrGQ9RKm?<@}AXqCC+GjCYwRxSW5^u<{)1m^8v*HQG9W(syMZ
zeHjY5r8_noMxY}WaiD2AJ}&v0E?qeq!7q~YD=7LEXsUZK+&r<KCQKkN-q-PI^>J{V
z-(#b3LbzBuCk&Bw)NGD1AGh9rL0!Jdf$nKpWcrJ(2CV<0#?-&dIJq3h>~7}$u(C7m
zMS2Rq1L1Owac@?x4snjviQ!F5=E>Mk$`VhNe(GL&VjfOTG<BWI;e2<Z>#;Y~CSGoD
z9z*mLjkc`qTVW(f_lWQeh>D#e6khp5kh)5i#&R|q^8qG&_k;@Cpeso}Fmk>B!B^t4
z%q6*EUBVsM1=N@(9Y15-_hSex`-4!uz=gak<9LbEPqz}m3hoR`H9B(aVp~!Vhu*fJ
z-h~p*{X1)CzAE8ImS>O-bU3anj#W}%209SbBHd`8!0mel_TS~@yLu%W*A*DLxx-#b
zey>R!zJn`c{92gj7^=$qsLHDuN`n5MCoCt_Xpnu>yoN;PYPpZN`q=Vf14?rCE^5Be
zu;u$2B2AOSVsCC2rPayzTq)F4bMf!~K}tJIyWpdxuOH^VJ@sEKXL6K#5TFK(>?u*z
zSAZh~ojMcra{_xp2FQlF7VCU1sD9?8v(8`O9i!Oq@O9sZunDq2J`&5o(#JossAWq7
zhvEzma1e<z4}_o08MfVw_iZw<vaYQ@J*-B5s;n$BFNcj~fygpP2U@aLc;k+*S<WuR
z6oY)R7SOOmI@Qn0;)@n96^K*M(amQtJ28w;@jvP<hRz;E6H8_xhB7cPi0uXMzPe5p
zB-Yro>fQM4?v{4`M-GSEw>dS8Upl$KjWno-m4W??o6m4N4n7e6KLU7$)%=9EiA_b_
z@97IO8A<hKglOO)&14ZjS~7}IUE!;Dm@^7TC2Fkb?$&pUwMp`5qgFyHV#%40A9cxn
zU$vxKO*0&Vrt?r~0!{e#TEs%{&KIonU5cU!7|r!wdad#%kqUYpnOuYx>o)IL+FAOJ
z<XpVZK>E|*e~CGrM{ezIv4c@tjC1sD2PMD%{0dVY3)Vxw_PHPPj7=yU&q;?fq*Yz&
z(aG0!f-CP)MMU(pdOSBTGaiFq^e)!j*+sh5kI?CmV!+3|WHRWR#Mafvfvu%C?Qc2o
z8rOUpeu)3Z*gPRN@#Sx97v0XtjU09+3y!Ui^*f25HN9|I5xe^7`nC^$szNZs(p2wd
zhGik4N6qXts3kz-c46RYaKT`y1kbD5Kav~$As%TT-G>bh+Zx}^(bMgHmDO79M&9Re
zO!m`8?}tC`j^Fco*z9u+dD{X|PQu@8kTqFdw7H=^2s|lv<-dNwr)+N_=rcbQB@a!-
zG@5@m5>qL$WXH2kR+jkU)t?@p7k!&K&J5D+kq(Kz0#0$G!>#N1D+?zgtlrSHp3gOO
zffF(o=~RR3d!j$m$2qUtCqg>D_Z#O)`t>D<kqxdcM4Xaa)0aB$qmbzuHe@c#jYmP%
z7}L~sGs1zFK2vEk?%9tT)1`UNI1>H@A|nIY*jRRk4X2>Rq3Kr&JFcTjZ~rWvyLVjj
z!G<qV_;=@6F|I6c_ee?vL9m_SNg^W|s-^TP9O3BgLy{8G+)%l0{b-UceP49Cl^Qcd
z4|>(!L3Bp*-@-#tJP5KDV@|R20^V#$D}HjavmnU->4$|UexGDNYfi>jy&c*su6%Kx
zZ!A^20wv(|`=KZ=-=wyAIj7BWR2bQ^5tHxodZrEX3yGnkD*!GrHFY=Ioopd<;o(PJ
zwKsVM8q$5kwSoXQe#Mx+f>=0}jGZyVSYD4RRBk0yh@|0D8nsvQ(#0EPLVkCla5q6S
zIICNE1`)1QEu_)|x`eHZP79$2;@vkC?JT#J$C=Jn^y-kdr1*5tjknia0kBOA`n_Bj
zHO<3+4Je-F2nstQiH+wk>+RYStSxAf@dD*Dl`ZbSydu2AOqoGRxx6qh+0P*fTx1H-
z;7fWzEETzaizp!0i%{+7gglb2Fr3Yk+8%-qkIfH_%k9Z^p>S~p(>V}pMAVc#ePJAS
zTUGc~Qku0p!9^pKQ43+P>K?r^V}Im92-Vnm11=GS<U=9fK19>+<a%XTo=QM;+Vf&_
zcsA@GJ$G2r)N`YQR7gO6RXvnLA%cQa6LqIwb%{dTcoBl$NVE&Pe(NmIxqstm*pBe<
zjeg@gXmGCsr64-B$FPk<2u-{8-2nS24gv}>*Ar5NbJ5GU=T(Z*LqAV+0u+DTCF<4>
zCDwu?`W4u%{pYYT9W95J&Kbe%D<1+a@lUlZS+6L1Zc_yYz1pIuPL%|bS6+v|kkGi%
z#(nCc3y#--JicDJmYJ#vc%R}<?H<Jz^v2>ICBJ?bw>j4(t`qn}<z%?*7qO*%J?d=|
zWG}9CesQ?EsFFk=Y1msu=QlID)U)G3RquQJpZ`_tj<4lww^k#ulz4)9SvxO^O$BYv
z9%yK_2-%laJ!zk`RO{BJS0l)es<;Fv887O)zeA>U_++*b2VY&pI*q+=6EV;6K{{1x
zF?l||r402lp&7|^5vkWd1nC*uZvU)4!8UR;qjy${8O;Y1iqGTur>m^JjQm|_44pcj
zGq`b9b`H6RLj>>KTt$_V#o^AeBWQ%>z^1Gc(^_VSaW5oU)^g<?`s;fE^*>yuN0<?<
zN@tV@BS})Fh%K>OWnL~t&4v5Sxr=xR9HTm1x5<#|*G!gFF7)Nsul9F`WW9FR3`f}g
zy27~WlD{p5+gE=f*lx+(b)#gYQ`_c&QL^5c<0#`}!XvlBcH5<@f7Wc0K%&IL@~2A)
zNJJda!i7V(E<XGP^qp12DqqZ68kPl;^pvT$@PEolz-x9TN6hsXegnfeeQiNVaNjr^
zoi&HGflO{LOqOggt&n9`<Phy_=~^9R%WQSms3@EG>wQ@?$w@=Ue5}ZL_ZneqEcUMQ
z?`?-NR})$^uy_<zQoJu~P#-ewyRUWwvy5fQSy{5`(=TSdj~~X<(gPHId_bv`f7tx4
z4rqW?HO(8=xvy1QATb58ico^Q84@(grG!i-wo6k6(Mg@|hI`2dx27ZqcC)J!<K#<O
z+6t$)l7mZ^tmOpe{)zRDQpN_7-Xn)|;pI0$kDuT2`V;Qw;v_$;=QM{(jRkGZEpacI
zER*4^BZqXtpUJl+b!>1qFq>V4cA4Gt;8eu=t!-(7Yc9l^;TqH2&U9X?$-yHSAmdq0
ziA$@nl&ioTS6p)lx3@R9B|Qxg=1x`-Krkpo#&=n)kTDOD?|e1@M<eNki9KjOvpL}Q
zE%&bJprA3MUjas*28p*ctRN^5=jb>c#}~W+GIVy$J(8#EbKrVRzH%Qv>=Wt=h{M~B
z-kF_@c4OSo)ePfzW=8{i043jEYUOJx%V2KdXjnvi>U{PL=+(<eXo^G7<@z7ytnV`O
z@0#+BAj>1u*IbWZmBtLA(N~`xi;b-qemDHWT-e<D^{17)IUGx%e{U{h#*b*|R>bn6
z;aXRbd;y`=t?F}1wN?)C**jcw8zM)fu{}Eb<zMAG6T%h?!j?Dh^@$s6vaTcqXN<PT
zu#c=SkNQly!eDF%xx-znLq~Rk9R}l*A1V#QFBVTo<oGW)f@)i$Dh<;$Njy<q;K>fb
zOVJA-YPAk^RsM(^^e%n@)gQdt9~XBO&#YhjX!M2Oi|cM&3A2fJGp{Do%o$!NW1S!R
z%KBD$#s64n1+k{15FymuL2^e)A9wUkd*ovzT97U*S1EJy_~-s`E5plBR6)5+qp;!w
zjBod1Hg@GTx)}rEt~V#9gK>dLziK;`T^q>qYh%c2-X|^|GHjeyXxuoDY6m`^SLrsm
zgZhq0#7D03c<g4QG>~5NYv8#j?|K%wf$4fe7f<m^ONGY}QSZ=oGxB9UVJ{mFrN$^9
zSsEzi=r7|VhqKx~{&F{qJLdfHc_%g&mA&Pm^@Q+gqAR^TBGD}GoTfp<pTMgw>NfE{
z+b@Ew+HaF)34pJtku6b!j=waY)L7t&PF((P8V?to+}!Zp@*;QcQLE1%E=ZO(W<lv)
z4N>y=#A{qp9I-FCeBXfrTs_Y-7E1&~s6-eWHc6W!o+yW1I>+Bm?_;A2?b6pl%8&fA
zLc(NxZu>g>4@b8lKqk0y3tm7l+{yjc&FzZ(aPH?ERO>%EGXmQUN!@hUAtiB4Jx%;l
zF5yUZbbDwXC#xb^9-*8oh&NP3+y22%ZW4I;2J`IIcLjCkM+x~|oh+2+r{o?mfWg_M
zQ&UsGNw{!1!g#RI7#Y>|=t1<A6X8Ea@_vxJoh84`?j+g`d{*!>rOfYHncdBV0mytP
zng+^LgFiyJQR;DTR{*n*5kFnoTTx##R%I`oK}8Z-gIjs+^t<RfLHuE2{y29p;5tzR
zwzIi5q3Z6oAI4oJM;>!O=;mFwPOtE?RPHF8P{!<0C~z3g!c=;yBlQNT%M$nD2NdRs
zcZTOHt~cc327ZzBXBEDYcjH&JRTs2|r-Y`ib;7l_VN@vRIqfjVd3z8nNC;&Ov{+m^
z%8ZV-ae%sFNPQLfmHiLSb7o(RHbm92#$wo7*m3FQO%Ly-No$w$G=NK!zca^IE8ALl
z$kSD6kkYBA*0aWPbK+<bAezO;atP#^689sNk@Rl~=<E~TeRWj!uc9A>a#QOL>@7!v
zptx;b#}=0~%}s`W$V2>eom%*twVq}onj;~GC>$Wzi`9&t&p8BCs}Vh?oNKESd_hs%
z=s*$T#edpc$kgh&C))Lruk%Iku}H8;C8wNHaWL-VLty2nvb}SJtR{vpZD;6?4yK!N
z*uIcXTOuP;x9f4{{^PqSB;g%@2hvb|Ub>1)tvDwK>%{~Ld(g0L+)Wdv*Vz*$_({eM
zGhs%bKH1|l0m{&=@DtVV&aW|7PJ!}TQRepjP0gsqcc_*q60^Mj;?nx%>~d~rwuPJD
zeMhu^@4Hh{cE%u;cI`S&)!efPT)~~HH)jO9?{rr#rOysxB67IkZckREFBg<bFs@;k
zz<c_ULo}#L69r#do8d4hQb>-TVG;T&bz(eSm2UYg$7P+t?MBxNEDI5HTT;9HV$svu
zW9&VWr8ZyUm|h018xn)N<Mq@;OY<8!nDc(5zjtg+wT>}dnr6f*huMa7zE-qGcfsy_
zd6HhI;)S=(C7Sr^>mTZAL-5yg4UT<NZO*9O%~sJ<d_H6_m*-xGH@>-x4>G6Kr`YKw
zEY0j$7$kV;kiMBc_~=NyQe&G8NP&%(C9hO*tX$scbu3PuoxM?n)fPppOve*Y{kdlV
zUUV7pzKTw>QKX3~<3(Ck+V>4laLQk{(gzg%&Rpz(j+cXbBmxE12kNgF*@*CK&fv+@
z4>iU6VBU)iG=T-t0bv4s5K3zBoI<xO{X&ICpK~d0d2LC<G$Ld9Wc@xen1Nw6Gujrp
z=SXy0!1`y$lDN*Dv6ejazdmBl26oC!F^793Zb&W$ggvfrlc(aux1ySL?XhXRC7*zv
z5trk?yqTNWkJg?>!SA`+2<8P+t<k3;sg$GqafHZY%c8&MKX0-5rc^K7j^%fx{P$6f
zey3m`*;5f-Y%dKcECA~Riuj{@VJ*9@6nS*BlOWiQ95?yRLI6ipbe>zqS%6$H@kU<!
zRCJx`mu6H1s<!LEXp&LpqRDzO4_*dq*C?+awWY=*|Ed36=?{7TMta-AiUW~nu+Ak8
zt5^zSV?jl31o_RPT7TZ*3~`VHS;{A+BsP6$-I|;8t0qR4UE0c(hY+~$)j{t;du*NG
zOGr~^v<_cee!z)}39%EwSYb0iS!SkRfYT>%Jp38i&?K1kcqFssje`sKO(90l#euxo
z+`*)=n4p)ZszL#1i2*gBJoB3`gYl$l#V*CtfO}Y_gw{oZ<U2R0h!uvD^tf=5GanLg
z+$jv_Dhi>B-6P1auOLaope)38BY0`r5#>D62$pbxfLH113<99=1VjEwPEHUR#kJF1
zqmViG{>yP7slZ9S8^q@_$nEau2{rL5aLeUBG;%Ctd8mC|x)^L4N4!9kI9kB>7y?m*
zg^v*puDfJwdUt4QzjO{-{Jk`RmO_A<6%4bzmzv-fWbfvMETh@yj&LLGj>#qdB9lf(
z`0YsTcA$OsQb_K{f&cFbqY=0Xpc^ykfgs56ff~SL7La(+&?FNaF13Veq^AdrMW>{s
ze2S;5p+md!k74m&^8~6U9eJtl4~vJA<smbOO0)<5{9?3<W7HyW6z+nEN}cNm!?`#j
zn;%2`GuX1_p7wRPe#g&|>~B~AxfQo9bB{1P7oX5ej{1EtYzxKv_HWUcqt|;jf^pmb
zz_kDSs$iq%O&sLnEu=zajZ+}{s5L`a!<eyWA=L3)z5-P=1RLmNxF2}F!IcWYC)=k-
zqtbdrxQTw1k$U?O=!qcr`Q2I^xZ75ohSvSj2V8JIf!^@h8R6k^M#X>eP4&@2gg04v
z<6^Mg7_M=w(q4Crarcgrr9F6S`zsD#-FV#kLlr1qPfPko#slJ^i(*#`)+yh~Vo~tm
z(p;Aa#=AujiyQmQDqHc}ZzJ3Y>J{(uhi3d@hkv?|u>9mLmbR~Afw*0#kAZf8{?Xgt
zft0<NS_pioTITSrlv2y;2225WD?MW*D(CAcRL&1r{3o%-7AH4ptbsyy^xwaKuQq<d
z*3-zRE~+aC-q@i1ZP_L2K<+{zSGTQUu#NzY)qr%WzlO(Na%2R*$Yrp>H{EVS!#6cU
z20ghW=)A*`ZVn+_y&?7~)v{<dyUoCEr3hhIb@sG?MdrJxhzXCr94~pgWFa{p+>i5c
z;d;{k2>Fs`l21gELy3_!??GXGhR}Zhx63llYI?gB?!OV3=Hce2dTK&6sObA~Y?kqa
zI9JlkP$9pfHg)Yl4C+&=iAXJmLXb)g_7r?ZkF-!m@>Cu{i@~Yn*0vM1NDu;E&5gGm
zQ|a)|O6t#@nuLq%dFI?}e562SE1=l}4O7|h<)G%x_=(sqrMVZ~yy*^8DlZ)k?=$XU
z6iy`#bV5rn6EnzFHgpp(pL%%Vt<+gMw4qGZKLe`e?lJ7CY<E>u-YWN=lGKI-K!j^B
zlxf|`Ya|ak@ncw&VB;mU*K$^w46YMtV$E1YBwYbfnyca;-)V=)9lEzA^sV>XZoe<9
zCGT2}o|(ie=YIE!^JbdKzirfem1={&klnkhBt|qXwZ}ofz^&5G^A9#|0jFGj{1gbP
zYt2ngZVEl-V8ElPyrL?IVcKAKh=7UE_8(Ck&m4C=_1q*X|AX4sI#V8pIJJN*uEy-m
zgD-8rtyZYKsHj#yN}{X&5>YJ3P7Uw0xNMWEu1zT19;ev(-itgR<-s>JV%p@>)xBjO
zVt-qZgp@BK-?mRoer)Dm{-ar-_kB)`&o=c?*hvme=hPR_VLWjikQh`@pstH}6LVK`
z*0;t-6v?GBuo`xT^myTz{kc*Pyqn2CThB17>AWMIp04@T$2M?(Q7%$iVnG&qOxa&m
z`&n|%!>+guJiTgO?!2Nvcmsm$zH(Z@7mnWV37*xpBRF}fR>8QDFazSx%XmYC9fXvB
zqiA>2@k%or*~JC?#1z!ix8%Isv2}ZsfyRKl<&JI5+S&zQI|9AXUD^%x25);XG_&ZY
z>m-as-xIQD55I0?pBeJ#kqb-cOOIOC5qBvaX@O{N36C61OCCYEP@(Izn^2tOJ^f*g
zQF)GvJjXc~fn0$@|M83TO{ky?>2sZ!AuV)8^;v(W?fP(bzQqk?4yr=e=%vEtcfECY
zW$S;R*`;c}R?rp|8(Xa18XH%kGRb!G_Q6j?(WoUKbq1O)b$z+^_%_rp@S3Rt*%$-)
z^?bAQt5RW+&Z1X}AGL#p0;r+Q?zEU~3A^VF6WgUlOE?USoGB<N>#waJOSVVYYkPHC
zBdi(NOS$UVA&#M~R{f=TM6BDX@~NoCJqlw+tuLsC5Zg6xDCnEbr*1R!TEj+S;oWn<
z*omo5#3KR2&goo#k{O4uvrT+Q@;%u5wjBm0nA^#`?S5M2B2Zc@W{ZV=oX_M$FeIGF
z9<FpHIGz@4z8h3yWvT4tdC(+eU9Y$;?Z-M$Xz1Z&_z;5*597fnp9PIJeDbm<;%;B`
zxF|_kuXQjR_$VQng;F)Fcm1-jW3ur*Bl6JCPikL-*!Azl?)^MD0*3xOfYBpE?ckf3
z%yNDf-l1xt;57O@(Tw3T*5OgDW*8}%>^HG(9XzHi`+duL%oh$(+8|!Jqjm2TeEMjH
z+|?56+Wluv$$-;=(r)kV>}=-F<u*IVt+sva%YJE!vg$n!hPBm>(B1I-20;tDPALqt
zL$!XWO#*jJs^;Mx!RC`MVmV9v?qPPZn}NN*zAwmRKOaM{?hmfjj>3x1HQQas{=fuu
ztdgst>40&5i>txW*$l4!^UScTlvqJrHO_11hx0}Hal?Tf2Q5uV<b2a1-R}coakG7T
zFd4bV_)&-P8kD!V!?e6c52*H1Ql=BOx5vvT4m%(s$DnLJ+ur5SNayP{8Xmh6?&DkQ
zmSPo#bE0<9#U>qB>HiD32}(;|qXE^WOkE4f)KBzZI9OeUCf2JRi$8tQRkr;908{_7
zfp7g=SVnGyPx#?NBe2VchVf^;xuBq@J!6r>A`9g40uv_fb!iDBQ-0gRqQ}=xaGmK}
z&seg4in;j<ijus}_sJA0=!`h$`lQum<p=lELU?pk!*`9ow_v>cL$g~@-?)fhG`56w
zk`QlrD)AhbX^&f0F%{kUUUYCCAM|ba@wRZV{&xPxL{}zuN2dCSOE^F8Hi;jpUXa0r
zE)*u0YimJ2VWE|r>9-U;PXSJkJt`S@rkW=h&b=d_;Wof!+HPiNHu{p(`wbo4&sdso
zXhEoJGn8MNlV)4W+nM%Z5k`yp<sy#GPYfNIvGVVHYHxXjat<$)6!~LvVhY5MNJUA1
zw6%phOPw?36lys5AlCg+6q?MQBE*A~he|bYYh*w|5k1pl0t~N}G-iSH5X0!+hOq;m
zecN99(UM5y={gofCd3EyF|oAM4$KBxwJ@(K;AAksL&mU>M~B_HRuZs@tHESfY~Vx&
zJ{&o$sk)gv{R%w9Q~2=J5uEN|+RLIad>5VLb)>vbKlp2m#F^l(l`SsN5>2f8m;LzY
zGI(aR&XjUX5WT+bUV~3dBbM#}8xfSeLYn|n5}_^kXV;oDKt$;>Q5eb3I$2p1HE%Uq
zj((A6Hud0l`-7$_O>^THu@jAsBFol$rFZ970frE_ZKa+4CXUB+@<BN4$W$YpP!f21
z(H#u!cK!alJ*L)`q;H=i;%gVOXR0*xf48fD`yt|Fc{rXq*)l*>t=kyW@?M~fGfy2{
zU-X{L3^cejv1f=fX<l1osIjLgV1FvHGkvMOvQU>CIT&v$|HI-<%Y}NS1kKgqVr02F
z<B#nw1%Lmy+eK}6T-#WTAD7Zu$yTEOD0IvdOrLm1oSrR)0%M!mx<v|skoPT5mBx)i
za1LDgzkV?bIpdp7TCIsLwRElj&hL<nEaV>knB6NE_a0KW1{#}6O!m2y>{iavr(C;s
zqw4;Ap6GUEau<{7Z8uGDzabJRfr~Oi(&v5qJyO=o6>LpPGQzE=we^eAi`Fwz`B#yk
zE%y@26(U!;@X!S&5#l${kwOd+TS;9*NbgE!^0<rV#PQ8qyqe;$4<2Q%>{C-CDm<Ie
z=CDyxNKZ5{E)`0S_w{NR^5`#!_+Y(NZ1H<#Kx5`dgX0lqnP!~Xy+fu;5N;jgq{CLM
z1&)#!W3P-$Cy|b{%!Ydyt_X)EMW2uRTGGg0<^jk|;Qfk$k^?eMOXRM~M1jlZU@p;0
z`u$lGqjP6nG>9_v?puyv)Z%uF?#UoQ3F$1E)vnt`S8ebZFwsr=q(StTMDh2lvZ{~g
z{m-bZEStS)>qqw6WfZE@(?@oJ9013IMswJio3x$mZWH-7Pk$0mpdIlJkW6#c{IGfL
z<``Ix$^CK%@#;6_0JX21Y(JlRWVRQ%M_L+4Jbn!)7yJ91uoM;Xq^UENs>&CpZHS{q
z_GzYN0;609e0)`TmlYqKv(d$m-M76Azr8W{Se%Zi9rL%%ddO6g>{OkyN++hCI^nt8
zj7&v~VBxN61Qay=yY@T)979V-jY<nlxb>m->s^ogbO)TAC13u4J|<AK>{V9bmAhHK
z?VtS0&0NDH$Lqd_lKQQP_8?$zicM`>986jX%tW(W-62zP2ab7otLgEchw8gJ>cdSB
zVm6lLfv63OUT|+bxWN@99=kT5vZ=DmZ0QYMkT#YKNN_ma4;6tVQynYsuBW8o6RKan
zi@U-s&;dKK=b@%lk$L+uA?jFG#k7Cp)hs(0tuN!`HBt6}j#Uyvyhnec;>;+7n+Mwv
zsunbF8|21dNi*p%OETJU^9_@B4-c4a#%8K^?a*WD_f`Q%FKe0y=Jr%iA45hs?q&8r
zCX4_%139*aAw^j-<+zkm4z*;!$*&I*Sv|#)QUI+eqRbW;?5P5joq#ez9*1f=fCn(>
zQ)Wvl&Vwk=O#AOSxZG4x%OpnNZVVmSF!k$L;g%9UQy>2EbtZYR{?Ts$c2ZP?G;_E*
zdGXDCEF20pC6ISjA)w%#-mW49i!(oOB0*4U`;Si)n~<;paFN7kt>u{k&XHtxnW-Kw
zc3+Q#@#%LRF;f2Nda1>z=%zxzl6&0Vbq<+?2viCzmm8MUJ!fL2Sn(Mi9;Ho9fB^LA
zxTv@o&;ziH%9z821_3e=D$Sl?DIsG_%yg70dSz7=8o5A}r5?Z+0*Z6&$mlv&44S<Z
z^%zuuz9e60i(U%Ql<;1>2v;XnQzLzL>|a16OcJA|HP8X)>}Nk@*^mKjC_u&ExYz-F
zEb<>wG3qw&h({YxBm15wq*7`CKPc=IhCH(!6OueLkCFrs3qT)_Qem1nAjSZ4*ry2|
zB|HL(aNLbC``KiM_yfemFo9=Y)n&3e`e=iyJkUJgO;fia)y<$KM^-{mngJSxsG|+I
z8{(?+cz+dHet71C0mJ`jfMBGyI`F@dzAO^!O&e{=h2AL%*aM!{;}$*s)%a{uDd6_=
z27L{p%+ESYyPvI90HPmT%Ul{Y$@Bbw17=cT>OepMYD?HB6~Y2r((JORgalgo8Gy%?
z6Ayk_YAd<G8}_M|b+jnrZ|mlHG7NM$!YuWIX`eY(&l(dN|Jq9X*K5>LLcpPCCe#f;
zC4<Q`|C=QP*8Keeh#c@Fo(-dsG}Ms)FXrER09&5`b5LpeyO7DmqukWx|Fu<M0KjmG
zvi}AX@Co4Roz@Nj$Q0Cgj@+}^H}$|V@w$`{xcBiAAj92Dq^ZyTb(m26p7?*>G7j95
zUzWCE4~*fW&gB4|;;1fsd||jA&-$OY4KMkBKmhz-)WppvIHO>4=Y$-VXD%h2oRqR;
Jjkrn3{{SyBP!j+E

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-with-active-segment-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-with-active-segment-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9ea58ceee0a795dcb5af3ba42b1d34e9d1e179d
GIT binary patch
literal 5477
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
WjVwp$T>zglm>5~WYyP_a_kRHbyL8L|

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-with-overflowing-labels-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-with-overflowing-labels-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef8fb4f9cfc1c80889629d30bb2fc63883b0c711
GIT binary patch
literal 7638
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
FKLAwqMP2{^

literal 0
HcmV?d00001


From 0f792d5ea530cb6a670a95576d15e7a532e7535c Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Tue, 11 Aug 2026 15:54:35 +0200
Subject: [PATCH 13/42] feat(core): add segmented control tests, a11y labels
 and events

---
 core/src/components.d.ts                      |  44 +++++-
 .../components/cat-segment/cat-segment.scss   |   5 +-
 .../cat-segment/cat-segment.spec.tsx          |  36 +++++
 .../components/cat-segment/cat-segment.tsx    |  47 +++++-
 .../cat-segmented-control.e2e.tsx             |  70 ++++++++
 .../cat-segmented-control.spec.tsx            | 149 +++++++++++++++++-
 .../cat-segmented-control.tsx                 |  26 ++-
 7 files changed, 355 insertions(+), 22 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 94a8def1..f87332eb 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -12,6 +12,7 @@ import { CatDatepickerMode } from "./components/cat-datepicker/cat-datepicker.mo
 import { BaseOptions } from "flatpickr/dist/types/options";
 import { InputType } from "./components/cat-input/input-type";
 import { FormatDateMaskOptions, FormatTimeMaskOptions } from "./components/cat-input/cat-input";
+import { SegmentSize } from "./components/cat-segment/cat-segment";
 import { CatSelectConnector, CatSelectValue, Item } from "./components/cat-select/cat-select";
 import { Observable } from "rxjs";
 import { TooltipPlacement } from "./components/cat-tooltip/cat-tooltip";
@@ -22,6 +23,7 @@ export { CatDatepickerMode } from "./components/cat-datepicker/cat-datepicker.mo
 export { BaseOptions } from "flatpickr/dist/types/options";
 export { InputType } from "./components/cat-input/input-type";
 export { FormatDateMaskOptions, FormatTimeMaskOptions } from "./components/cat-input/cat-input";
+export { SegmentSize } from "./components/cat-segment/cat-segment";
 export { CatSelectConnector, CatSelectValue, Item } from "./components/cat-select/cat-select";
 export { Observable } from "rxjs";
 export { TooltipPlacement } from "./components/cat-tooltip/cat-tooltip";
@@ -1439,6 +1441,14 @@ export namespace Components {
      * A single segment within a cat-segmented-control.
      */
     interface CatSegment {
+        /**
+          * Refers to the element that is controlled (e.g. displayed or hidden) by this segment. Typically, this is the ID of a tab panel that is shown when this segment is active.
+         */
+        "a11yControls"?: string;
+        /**
+          * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
+         */
+        "a11yLabel"?: string;
         /**
           * @default false
          */
@@ -1461,7 +1471,7 @@ export namespace Components {
          */
         "icon"?: string;
         /**
-          * When true, hides the label and shows the icon only. Requires icon.
+          * When true, hides the label and shows the icon only. Requires icon and a11y-label.
           * @default false
          */
         "iconOnly": boolean;
@@ -1472,7 +1482,7 @@ export namespace Components {
         /**
           * @default 'm'
          */
-        "size": Size;
+        "size": SegmentSize;
         /**
           * Renders as data-test on the button element.
          */
@@ -2750,6 +2760,8 @@ declare global {
     };
     interface HTMLCatSegmentElementEventMap {
         "catSegmentClick": string;
+        "catSegmentFocus": string;
+        "catSegmentBlur": string;
     }
     /**
      * A single segment within a cat-segmented-control.
@@ -2770,6 +2782,8 @@ declare global {
     };
     interface HTMLCatSegmentedControlElementEventMap {
         "catChange": string;
+        "catFocus": string;
+        "catBlur": string;
     }
     /**
      * A segmented control for selecting one option from a mutually-exclusive set.
@@ -4467,6 +4481,14 @@ declare namespace LocalJSX {
      * A single segment within a cat-segmented-control.
      */
     interface CatSegment {
+        /**
+          * Refers to the element that is controlled (e.g. displayed or hidden) by this segment. Typically, this is the ID of a tab panel that is shown when this segment is active.
+         */
+        "a11yControls"?: string;
+        /**
+          * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
+         */
+        "a11yLabel"?: string;
         /**
           * @default false
          */
@@ -4481,7 +4503,7 @@ declare namespace LocalJSX {
          */
         "icon"?: string;
         /**
-          * When true, hides the label and shows the icon only. Requires icon.
+          * When true, hides the label and shows the icon only. Requires icon and a11y-label.
           * @default false
          */
         "iconOnly"?: boolean;
@@ -4489,11 +4511,13 @@ declare namespace LocalJSX {
           * Spread onto the native button element.
          */
         "nativeAttributes"?: { [key: string]: string };
+        "onCatSegmentBlur"?: (event: CatSegmentCustomEvent<string>) => void;
         "onCatSegmentClick"?: (event: CatSegmentCustomEvent<string>) => void;
+        "onCatSegmentFocus"?: (event: CatSegmentCustomEvent<string>) => void;
         /**
           * @default 'm'
          */
-        "size"?: Size;
+        "size"?: SegmentSize;
         /**
           * Renders as data-test on the button element.
          */
@@ -4520,10 +4544,18 @@ declare namespace LocalJSX {
           * Spread onto the root element.
          */
         "nativeAttributes"?: { [key: string]: string };
+        /**
+          * Emitted when a segment loses focus. Payload is the segment value.
+         */
+        "onCatBlur"?: (event: CatSegmentedControlCustomEvent<string>) => void;
         /**
           * Emitted when the selected segment changes. Payload is the new segment value.
          */
         "onCatChange"?: (event: CatSegmentedControlCustomEvent<string>) => void;
+        /**
+          * Emitted when a segment gains focus. Payload is the segment value.
+         */
+        "onCatFocus"?: (event: CatSegmentedControlCustomEvent<string>) => void;
         /**
           * The size of the control, propagated to all child segments.
           * @default 'm'
@@ -5587,7 +5619,9 @@ declare namespace LocalJSX {
         "disabled": boolean;
         "icon": string;
         "iconOnly": boolean;
-        "size": Size;
+        "a11yLabel": string;
+        "a11yControls": string;
+        "size": SegmentSize;
         "testId": string;
         "value": string;
     }
diff --git a/core/src/components/cat-segment/cat-segment.scss b/core/src/components/cat-segment/cat-segment.scss
index 089836b4..9e552ee3 100644
--- a/core/src/components/cat-segment/cat-segment.scss
+++ b/core/src/components/cat-segment/cat-segment.scss
@@ -10,9 +10,6 @@ $segment-heights: (
   'xs': 1.5rem
 );
 
-// TODO: a11y (create skill/add to review skill?)
-// -> add a11y label (e.g. for icon only)
-
 :host {
   display: contents;
 }
@@ -78,7 +75,7 @@ $segment-heights: (
   $-padding-h: $padding;
 
   .cat-segment-#{$size} {
-    width: 12.5em; // TODO wait for final size from UX
+    width: 12.5em;
     padding: $-padding-v $-padding-h;
     @include cat-body($fontSize, null);
     gap: $gap;
diff --git a/core/src/components/cat-segment/cat-segment.spec.tsx b/core/src/components/cat-segment/cat-segment.spec.tsx
index fa760911..370ccb36 100644
--- a/core/src/components/cat-segment/cat-segment.spec.tsx
+++ b/core/src/components/cat-segment/cat-segment.spec.tsx
@@ -158,4 +158,40 @@ describe('cat-segment', () => {
     await root.doBlur();
     expect(blur).toHaveBeenCalledOnce();
   });
+
+  it('emits focus and blur events with its value', async () => {
+    const { root } = await render(<cat-segment value="day">Day</cat-segment>);
+    const focusListener = vi.fn();
+    const blurListener = vi.fn();
+    root.addEventListener('catSegmentFocus', focusListener);
+    root.addEventListener('catSegmentBlur', blurListener);
+
+    root.shadowRoot?.querySelector<HTMLButtonElement>('button')?.focus();
+    expect(focusListener).toHaveBeenCalledOnce();
+    expect(focusListener.mock.calls[0][0]).toMatchObject({ detail: 'day' });
+
+    root.shadowRoot?.querySelector<HTMLButtonElement>('button')?.blur();
+    expect(blurListener).toHaveBeenCalledOnce();
+    expect(blurListener.mock.calls[0][0]).toMatchObject({ detail: 'day' });
+  });
+
+  it('sets aria-label', async () => {
+    const { root } = await render<HTMLCatSegmentElement>(
+      <cat-segment value="day" a11yLabel="Test aria label">
+        Day
+      </cat-segment>
+    );
+    const btn = root.shadowRoot?.querySelector<HTMLButtonElement>('button');
+    expect(btn?.getAttribute('aria-label')).toBe('Test aria label');
+  });
+
+  it('sets aria-controls', async () => {
+    const { root } = await render<HTMLCatSegmentElement>(
+      <cat-segment value="day" a11yControls="panel1">
+        Day
+      </cat-segment>
+    );
+    const btn = root.shadowRoot?.querySelector<HTMLButtonElement>('button');
+    expect(btn?.getAttribute('aria-controls')).toBe('panel1');
+  });
 });
diff --git a/core/src/components/cat-segment/cat-segment.tsx b/core/src/components/cat-segment/cat-segment.tsx
index cc8eabb4..db45c9e5 100644
--- a/core/src/components/cat-segment/cat-segment.tsx
+++ b/core/src/components/cat-segment/cat-segment.tsx
@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
 
-type Size = 'xs' | 's' | 'm' | 'l' | 'xl';
+export type SegmentSize = 'xs' | 's' | 'm' | 'l' | 'xl';
 
 /**
  * A single segment within a cat-segmented-control.
@@ -15,7 +15,7 @@ type Size = 'xs' | 's' | 'm' | 'l' | 'xl';
 export class CatSegment {
   private button?: HTMLButtonElement;
 
-  @Element() el!: HTMLElement;
+  @Element() hostElement!: HTMLElement;
 
   /** @internal Set by cat-segmented-control. Whether this segment is the active selection. */
   @Prop({ mutable: true }) active = false;
@@ -26,11 +26,24 @@ export class CatSegment {
   /** Icon name to display (same registry as cat-button). */
   @Prop() icon?: string;
 
-  /** When true, hides the label and shows the icon only. Requires icon. */
+  /** When true, hides the label and shows the icon only. Requires icon and a11y-label. */
   @Prop() iconOnly = false;
 
+  /**
+   * Adds accessible label for the button that is only shown for screen
+   * readers. Typically, this label text replaces the visible text on the
+   * button for users who use assistive technology.
+   */
+  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;
+
+  /**
+   * Refers to the element that is controlled (e.g. displayed or hidden) by this segment. Typically, this is the ID of
+   * a tab panel that is shown when this segment is active.
+   */
+  @Prop({ attribute: 'a11y-controls' }) a11yControls?: string;
+
   /** @internal Set by cat-segmented-control. Size of the segment. */
-  @Prop({ mutable: true }) size: Size = 'm';
+  @Prop({ mutable: true }) size: SegmentSize = 'm';
 
   /** Renders as data-test on the button element. */
   @Prop() testId?: string;
@@ -44,6 +57,12 @@ export class CatSegment {
   /** @internal Emitted when clicked. Consumed by cat-segmented-control. */
   @Event() catSegmentClick!: EventEmitter<string>;
 
+  /** @internal Emitted when segment receives focus. Consumed by cat-segmented-control. */
+  @Event() catSegmentFocus!: EventEmitter<string>;
+
+  /** @internal Emitted when segment loses focus. Consumed by cat-segmented-control. */
+  @Event() catSegmentBlur!: EventEmitter<string>;
+
   /** Sets focus on the segment button. */
   @Method()
   async doFocus(): Promise<void> {
@@ -72,9 +91,13 @@ export class CatSegment {
             'cat-segment-icon-only': this.iconOnly && showIcon
           }}
           disabled={this.disabled}
+          aria-label={this.a11yLabel}
           aria-pressed={String(this.active)}
+          aria-controls={this.a11yControls}
           data-test={this.testId}
           onClick={this.handleClick.bind(this)}
+          onFocus={this.handleFocus.bind(this)}
+          onBlur={this.handleBlur.bind(this)}
           {...this.nativeAttributes}
         >
           {showIcon && <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>}
@@ -88,8 +111,8 @@ export class CatSegment {
     );
   }
 
-  private get iconSize(): Size {
-    const sizes: Record<Size, Size> = { xs: 's', s: 's', m: 's', l: 'm', xl: 'l' };
+  private get iconSize(): SegmentSize {
+    const sizes: Record<SegmentSize, SegmentSize> = { xs: 's', s: 's', m: 's', l: 'm', xl: 'l' };
     return sizes[this.size] ?? 's';
   }
 
@@ -98,4 +121,16 @@ export class CatSegment {
       this.catSegmentClick.emit(this.value);
     }
   }
+
+  private handleFocus() {
+    if (!this.disabled) {
+      this.catSegmentFocus.emit(this.value);
+    }
+  }
+
+  private handleBlur() {
+    if (!this.disabled) {
+      this.catSegmentBlur.emit(this.value);
+    }
+  }
 }
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx
index db8d44d5..054472b2 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx
@@ -6,4 +6,74 @@ describe('cat-segmented-control', () => {
     const { root } = await render(<cat-segmented-control />);
     await expect.element(root).toHaveClass('hydrated');
   });
+
+  it('moves focus with arrow keys and wraps at control boundaries', async () => {
+    const { root } = await render(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two">Option 2</cat-segment>
+        <cat-segment value="three">Option 3</cat-segment>
+      </cat-segmented-control>
+    );
+    const segments = Array.from(root.querySelectorAll<HTMLCatSegmentElement>('cat-segment'));
+    const buttons = segments.map(segment => segment.shadowRoot?.querySelector<HTMLButtonElement>('button'));
+
+    buttons[0]?.focus();
+    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true }));
+    await Promise.resolve();
+    expect(segments[1].shadowRoot?.activeElement).toBe(buttons[1]);
+
+    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, composed: true }));
+    await Promise.resolve();
+    expect(segments[0].shadowRoot?.activeElement).toBe(buttons[0]);
+
+    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, composed: true }));
+    await Promise.resolve();
+    expect(segments[2].shadowRoot?.activeElement).toBe(buttons[2]);
+  });
+
+  it('skips disabled segments during keyboard navigation', async () => {
+    const { root } = await render(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two" disabled>
+          Option 2
+        </cat-segment>
+        <cat-segment value="three">Option 3</cat-segment>
+      </cat-segmented-control>
+    );
+    const segments = Array.from(root.querySelectorAll<HTMLCatSegmentElement>('cat-segment'));
+    const buttons = segments.map(segment => segment.shadowRoot?.querySelector<HTMLButtonElement>('button'));
+
+    buttons[0]?.focus();
+    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true }));
+    await Promise.resolve();
+
+    expect(segments[2].shadowRoot?.activeElement).toBe(buttons[2]);
+    expect(segments[1].shadowRoot?.activeElement).not.toBe(buttons[1]);
+  });
+
+  it('forwards focus and blur events from segments', async () => {
+    const { root } = await render(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+      </cat-segmented-control>
+    );
+    const events: { type: string; detail: string }[] = [];
+    root.addEventListener('catFocus', event => {
+      events.push({ type: 'focus', detail: (event as CustomEvent<string>).detail });
+    });
+    root.addEventListener('catBlur', event => {
+      events.push({ type: 'blur', detail: (event as CustomEvent<string>).detail });
+    });
+    const button = root.querySelector('cat-segment')?.shadowRoot?.querySelector<HTMLButtonElement>('button');
+
+    button?.focus();
+    button?.blur();
+
+    expect(events).toEqual([
+      { type: 'focus', detail: 'one' },
+      { type: 'blur', detail: 'one' }
+    ]);
+  });
 });
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
index 8737913a..8e5c2213 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
@@ -1,13 +1,154 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { render } from '@stencil/vitest';
 import { h } from '@stencil/core';
 import './cat-segmented-control';
 
 describe('cat-segmented-control', () => {
   it('renders', async () => {
-    const { root } = await render(<cat-segmented-control />);
-    await expect(root).toEqualLightHtml(`
-      <cat-segmented-control class="hydrated"></cat-segmented-control>
+    const { root } = await render(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two">Option 2</cat-segment>
+      </cat-segmented-control>
+    );
+
+    expect(root).toEqualLightHtml(`
+      <cat-segmented-control class="hydrated">
+         <cat-segment value="one">
+           Option 1
+         </cat-segment>
+         <cat-segment value="two">
+           Option 2
+         </cat-segment>
+      </cat-segmented-control>
     `);
   });
+
+  it('emits an event when a segment selection is changed', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two" testId="optionTwo">
+          Option 2
+        </cat-segment>
+      </cat-segmented-control>
+    );
+
+    const changeListener = vi.fn();
+    root.addEventListener('catChange', changeListener);
+
+    const segment = root.querySelector<HTMLCatSegmentElement>('[testid="optionTwo"]');
+
+    expect(segment).not.toBeNull();
+    segment?.dispatchEvent(new CustomEvent('catSegmentClick', { detail: 'two', bubbles: true, composed: true }));
+    await waitForChanges();
+
+    expect(changeListener).toHaveBeenCalledWith(expect.objectContaining({ detail: 'two' }));
+  });
+
+  it('emits the focused segment value', async () => {
+    const { root } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+      </cat-segmented-control>
+    );
+    const focusListener = vi.fn();
+    root.addEventListener('catFocus', focusListener);
+
+    root.querySelector('cat-segment')?.dispatchEvent(
+      new CustomEvent('catSegmentFocus', {
+        detail: 'one',
+        bubbles: true,
+        composed: true
+      })
+    );
+
+    expect(focusListener).toHaveBeenCalledOnce();
+    expect(focusListener.mock.calls[0][0]).toMatchObject({ detail: 'one' });
+  });
+
+  it('emits the blurred segment value', async () => {
+    const { root } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+      </cat-segmented-control>
+    );
+    const blurListener = vi.fn();
+    root.addEventListener('catBlur', blurListener);
+
+    root.querySelector('cat-segment')?.dispatchEvent(
+      new CustomEvent('catSegmentBlur', {
+        detail: 'one',
+        bubbles: true,
+        composed: true
+      })
+    );
+
+    expect(blurListener).toHaveBeenCalledOnce();
+    expect(blurListener.mock.calls[0][0]).toMatchObject({ detail: 'one' });
+  });
+
+  it('renders group accessibility and native attributes', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control
+        a11yLabel="Test aria label"
+        testId="test-id"
+        nativeAttributes={{ 'data-context': 'settings' }}
+      >
+        <cat-segment value="one">Option 1</cat-segment>
+      </cat-segmented-control>
+    );
+
+    await waitForChanges();
+    const group = root.shadowRoot?.querySelector('[role="group"]');
+
+    expect(group?.getAttribute('aria-label')).toBe('Test aria label');
+    expect(group?.getAttribute('data-test')).toBe('test-id');
+    expect(group?.getAttribute('data-context')).toBe('settings');
+  });
+
+  it('propagates size to all segments', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control size="xl">
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two">Option 2</cat-segment>
+      </cat-segmented-control>
+    );
+
+    await waitForChanges();
+
+    const sizes = Array.from(root.querySelectorAll<HTMLCatSegmentElement>('cat-segment')).map(segment => segment.size);
+    expect(sizes).toEqual(['xl', 'xl']);
+  });
+
+  it('disables all segments when control is disabled', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control disabled>
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two">Option 2</cat-segment>
+      </cat-segmented-control>
+    );
+
+    await waitForChanges();
+
+    expect(
+      Array.from(root.querySelectorAll<HTMLCatSegmentElement>('cat-segment')).every(segment => segment.disabled)
+    ).toBe(true);
+  });
+
+  it('does not emit selection change for focus or blur events', async () => {
+    const { root } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+      </cat-segmented-control>
+    );
+    const changeListener = vi.fn();
+    root.addEventListener('catChange', changeListener);
+    const segment = root.querySelector('cat-segment');
+
+    segment?.dispatchEvent(new CustomEvent('catSegmentFocus', { detail: 'one', bubbles: true, composed: true }));
+    segment?.dispatchEvent(new CustomEvent('catSegmentBlur', { detail: 'one', bubbles: true, composed: true }));
+
+    expect(changeListener).not.toHaveBeenCalled();
+  });
 });
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
index bc2c4e6d..b01724ed 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
@@ -14,7 +14,7 @@ export class CatSegmentedControl {
   private segments: HTMLCatSegmentElement[] = [];
   private mutationObserver?: MutationObserver;
 
-  @Element() el!: HTMLElement;
+  @Element() hostElement!: HTMLElement;
 
   /**
    * The value of the currently selected segment.
@@ -51,6 +51,16 @@ export class CatSegmentedControl {
    */
   @Event() catChange!: EventEmitter<string>;
 
+  /**
+   * Emitted when a segment gains focus. Payload is the segment value.
+   */
+  @Event() catFocus!: EventEmitter<string>;
+
+  /**
+   * Emitted when a segment loses focus. Payload is the segment value.
+   */
+  @Event() catBlur!: EventEmitter<string>;
+
   @Watch('value')
   onValueChange(newValue?: string) {
     this.segments.forEach(s => (s.active = s.value === newValue));
@@ -73,7 +83,7 @@ export class CatSegmentedControl {
         this.sync();
       }
     });
-    this.mutationObserver.observe(this.el, { childList: true, attributes: true, subtree: true });
+    this.mutationObserver.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
   }
 
   disconnectedCallback() {
@@ -86,6 +96,16 @@ export class CatSegmentedControl {
     this.catChange.emit(this.value);
   }
 
+  @Listen('catSegmentFocus')
+  onSegmentFocus(event: CustomEvent<string>) {
+    this.catFocus.emit(event.detail);
+  }
+
+  @Listen('catSegmentBlur')
+  onSegmentBlur(event: CustomEvent<string>) {
+    this.catBlur.emit(event.detail);
+  }
+
   @Listen('keydown')
   onKeydown(event: KeyboardEvent) {
     const keys = ['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'];
@@ -117,7 +137,7 @@ export class CatSegmentedControl {
   }
 
   private sync() {
-    this.segments = Array.from(this.el.querySelectorAll('cat-segment'));
+    this.segments = Array.from(this.hostElement.querySelectorAll('cat-segment'));
     this.onValueChange(this.value);
     this.onSizeChange(this.size);
     this.onDisabledChange(this.disabled);

From 0ea36a9b95ad905c161846fa568027d75062a2c2 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Tue, 11 Aug 2026 15:54:35 +0200
Subject: [PATCH 14/42] feat(core): add segmented control tests, a11y labels
 and events

---
 core/src/components.d.ts                      |  44 +++++-
 .../components/cat-segment/cat-segment.scss   |   5 +-
 .../cat-segment/cat-segment.spec.tsx          |  36 +++++
 .../components/cat-segment/cat-segment.tsx    |  47 +++++-
 core/src/components/cat-segment/readme.md     |  18 ++-
 .../cat-segmented-control.e2e.tsx             |  70 ++++++++
 .../cat-segmented-control.spec.tsx            | 149 +++++++++++++++++-
 .../cat-segmented-control.tsx                 |  26 ++-
 .../cat-segmented-control/readme.md           |   2 +
 9 files changed, 367 insertions(+), 30 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 94a8def1..f87332eb 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -12,6 +12,7 @@ import { CatDatepickerMode } from "./components/cat-datepicker/cat-datepicker.mo
 import { BaseOptions } from "flatpickr/dist/types/options";
 import { InputType } from "./components/cat-input/input-type";
 import { FormatDateMaskOptions, FormatTimeMaskOptions } from "./components/cat-input/cat-input";
+import { SegmentSize } from "./components/cat-segment/cat-segment";
 import { CatSelectConnector, CatSelectValue, Item } from "./components/cat-select/cat-select";
 import { Observable } from "rxjs";
 import { TooltipPlacement } from "./components/cat-tooltip/cat-tooltip";
@@ -22,6 +23,7 @@ export { CatDatepickerMode } from "./components/cat-datepicker/cat-datepicker.mo
 export { BaseOptions } from "flatpickr/dist/types/options";
 export { InputType } from "./components/cat-input/input-type";
 export { FormatDateMaskOptions, FormatTimeMaskOptions } from "./components/cat-input/cat-input";
+export { SegmentSize } from "./components/cat-segment/cat-segment";
 export { CatSelectConnector, CatSelectValue, Item } from "./components/cat-select/cat-select";
 export { Observable } from "rxjs";
 export { TooltipPlacement } from "./components/cat-tooltip/cat-tooltip";
@@ -1439,6 +1441,14 @@ export namespace Components {
      * A single segment within a cat-segmented-control.
      */
     interface CatSegment {
+        /**
+          * Refers to the element that is controlled (e.g. displayed or hidden) by this segment. Typically, this is the ID of a tab panel that is shown when this segment is active.
+         */
+        "a11yControls"?: string;
+        /**
+          * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
+         */
+        "a11yLabel"?: string;
         /**
           * @default false
          */
@@ -1461,7 +1471,7 @@ export namespace Components {
          */
         "icon"?: string;
         /**
-          * When true, hides the label and shows the icon only. Requires icon.
+          * When true, hides the label and shows the icon only. Requires icon and a11y-label.
           * @default false
          */
         "iconOnly": boolean;
@@ -1472,7 +1482,7 @@ export namespace Components {
         /**
           * @default 'm'
          */
-        "size": Size;
+        "size": SegmentSize;
         /**
           * Renders as data-test on the button element.
          */
@@ -2750,6 +2760,8 @@ declare global {
     };
     interface HTMLCatSegmentElementEventMap {
         "catSegmentClick": string;
+        "catSegmentFocus": string;
+        "catSegmentBlur": string;
     }
     /**
      * A single segment within a cat-segmented-control.
@@ -2770,6 +2782,8 @@ declare global {
     };
     interface HTMLCatSegmentedControlElementEventMap {
         "catChange": string;
+        "catFocus": string;
+        "catBlur": string;
     }
     /**
      * A segmented control for selecting one option from a mutually-exclusive set.
@@ -4467,6 +4481,14 @@ declare namespace LocalJSX {
      * A single segment within a cat-segmented-control.
      */
     interface CatSegment {
+        /**
+          * Refers to the element that is controlled (e.g. displayed or hidden) by this segment. Typically, this is the ID of a tab panel that is shown when this segment is active.
+         */
+        "a11yControls"?: string;
+        /**
+          * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
+         */
+        "a11yLabel"?: string;
         /**
           * @default false
          */
@@ -4481,7 +4503,7 @@ declare namespace LocalJSX {
          */
         "icon"?: string;
         /**
-          * When true, hides the label and shows the icon only. Requires icon.
+          * When true, hides the label and shows the icon only. Requires icon and a11y-label.
           * @default false
          */
         "iconOnly"?: boolean;
@@ -4489,11 +4511,13 @@ declare namespace LocalJSX {
           * Spread onto the native button element.
          */
         "nativeAttributes"?: { [key: string]: string };
+        "onCatSegmentBlur"?: (event: CatSegmentCustomEvent<string>) => void;
         "onCatSegmentClick"?: (event: CatSegmentCustomEvent<string>) => void;
+        "onCatSegmentFocus"?: (event: CatSegmentCustomEvent<string>) => void;
         /**
           * @default 'm'
          */
-        "size"?: Size;
+        "size"?: SegmentSize;
         /**
           * Renders as data-test on the button element.
          */
@@ -4520,10 +4544,18 @@ declare namespace LocalJSX {
           * Spread onto the root element.
          */
         "nativeAttributes"?: { [key: string]: string };
+        /**
+          * Emitted when a segment loses focus. Payload is the segment value.
+         */
+        "onCatBlur"?: (event: CatSegmentedControlCustomEvent<string>) => void;
         /**
           * Emitted when the selected segment changes. Payload is the new segment value.
          */
         "onCatChange"?: (event: CatSegmentedControlCustomEvent<string>) => void;
+        /**
+          * Emitted when a segment gains focus. Payload is the segment value.
+         */
+        "onCatFocus"?: (event: CatSegmentedControlCustomEvent<string>) => void;
         /**
           * The size of the control, propagated to all child segments.
           * @default 'm'
@@ -5587,7 +5619,9 @@ declare namespace LocalJSX {
         "disabled": boolean;
         "icon": string;
         "iconOnly": boolean;
-        "size": Size;
+        "a11yLabel": string;
+        "a11yControls": string;
+        "size": SegmentSize;
         "testId": string;
         "value": string;
     }
diff --git a/core/src/components/cat-segment/cat-segment.scss b/core/src/components/cat-segment/cat-segment.scss
index 089836b4..9e552ee3 100644
--- a/core/src/components/cat-segment/cat-segment.scss
+++ b/core/src/components/cat-segment/cat-segment.scss
@@ -10,9 +10,6 @@ $segment-heights: (
   'xs': 1.5rem
 );
 
-// TODO: a11y (create skill/add to review skill?)
-// -> add a11y label (e.g. for icon only)
-
 :host {
   display: contents;
 }
@@ -78,7 +75,7 @@ $segment-heights: (
   $-padding-h: $padding;
 
   .cat-segment-#{$size} {
-    width: 12.5em; // TODO wait for final size from UX
+    width: 12.5em;
     padding: $-padding-v $-padding-h;
     @include cat-body($fontSize, null);
     gap: $gap;
diff --git a/core/src/components/cat-segment/cat-segment.spec.tsx b/core/src/components/cat-segment/cat-segment.spec.tsx
index fa760911..370ccb36 100644
--- a/core/src/components/cat-segment/cat-segment.spec.tsx
+++ b/core/src/components/cat-segment/cat-segment.spec.tsx
@@ -158,4 +158,40 @@ describe('cat-segment', () => {
     await root.doBlur();
     expect(blur).toHaveBeenCalledOnce();
   });
+
+  it('emits focus and blur events with its value', async () => {
+    const { root } = await render(<cat-segment value="day">Day</cat-segment>);
+    const focusListener = vi.fn();
+    const blurListener = vi.fn();
+    root.addEventListener('catSegmentFocus', focusListener);
+    root.addEventListener('catSegmentBlur', blurListener);
+
+    root.shadowRoot?.querySelector<HTMLButtonElement>('button')?.focus();
+    expect(focusListener).toHaveBeenCalledOnce();
+    expect(focusListener.mock.calls[0][0]).toMatchObject({ detail: 'day' });
+
+    root.shadowRoot?.querySelector<HTMLButtonElement>('button')?.blur();
+    expect(blurListener).toHaveBeenCalledOnce();
+    expect(blurListener.mock.calls[0][0]).toMatchObject({ detail: 'day' });
+  });
+
+  it('sets aria-label', async () => {
+    const { root } = await render<HTMLCatSegmentElement>(
+      <cat-segment value="day" a11yLabel="Test aria label">
+        Day
+      </cat-segment>
+    );
+    const btn = root.shadowRoot?.querySelector<HTMLButtonElement>('button');
+    expect(btn?.getAttribute('aria-label')).toBe('Test aria label');
+  });
+
+  it('sets aria-controls', async () => {
+    const { root } = await render<HTMLCatSegmentElement>(
+      <cat-segment value="day" a11yControls="panel1">
+        Day
+      </cat-segment>
+    );
+    const btn = root.shadowRoot?.querySelector<HTMLButtonElement>('button');
+    expect(btn?.getAttribute('aria-controls')).toBe('panel1');
+  });
 });
diff --git a/core/src/components/cat-segment/cat-segment.tsx b/core/src/components/cat-segment/cat-segment.tsx
index cc8eabb4..db45c9e5 100644
--- a/core/src/components/cat-segment/cat-segment.tsx
+++ b/core/src/components/cat-segment/cat-segment.tsx
@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
 
-type Size = 'xs' | 's' | 'm' | 'l' | 'xl';
+export type SegmentSize = 'xs' | 's' | 'm' | 'l' | 'xl';
 
 /**
  * A single segment within a cat-segmented-control.
@@ -15,7 +15,7 @@ type Size = 'xs' | 's' | 'm' | 'l' | 'xl';
 export class CatSegment {
   private button?: HTMLButtonElement;
 
-  @Element() el!: HTMLElement;
+  @Element() hostElement!: HTMLElement;
 
   /** @internal Set by cat-segmented-control. Whether this segment is the active selection. */
   @Prop({ mutable: true }) active = false;
@@ -26,11 +26,24 @@ export class CatSegment {
   /** Icon name to display (same registry as cat-button). */
   @Prop() icon?: string;
 
-  /** When true, hides the label and shows the icon only. Requires icon. */
+  /** When true, hides the label and shows the icon only. Requires icon and a11y-label. */
   @Prop() iconOnly = false;
 
+  /**
+   * Adds accessible label for the button that is only shown for screen
+   * readers. Typically, this label text replaces the visible text on the
+   * button for users who use assistive technology.
+   */
+  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;
+
+  /**
+   * Refers to the element that is controlled (e.g. displayed or hidden) by this segment. Typically, this is the ID of
+   * a tab panel that is shown when this segment is active.
+   */
+  @Prop({ attribute: 'a11y-controls' }) a11yControls?: string;
+
   /** @internal Set by cat-segmented-control. Size of the segment. */
-  @Prop({ mutable: true }) size: Size = 'm';
+  @Prop({ mutable: true }) size: SegmentSize = 'm';
 
   /** Renders as data-test on the button element. */
   @Prop() testId?: string;
@@ -44,6 +57,12 @@ export class CatSegment {
   /** @internal Emitted when clicked. Consumed by cat-segmented-control. */
   @Event() catSegmentClick!: EventEmitter<string>;
 
+  /** @internal Emitted when segment receives focus. Consumed by cat-segmented-control. */
+  @Event() catSegmentFocus!: EventEmitter<string>;
+
+  /** @internal Emitted when segment loses focus. Consumed by cat-segmented-control. */
+  @Event() catSegmentBlur!: EventEmitter<string>;
+
   /** Sets focus on the segment button. */
   @Method()
   async doFocus(): Promise<void> {
@@ -72,9 +91,13 @@ export class CatSegment {
             'cat-segment-icon-only': this.iconOnly && showIcon
           }}
           disabled={this.disabled}
+          aria-label={this.a11yLabel}
           aria-pressed={String(this.active)}
+          aria-controls={this.a11yControls}
           data-test={this.testId}
           onClick={this.handleClick.bind(this)}
+          onFocus={this.handleFocus.bind(this)}
+          onBlur={this.handleBlur.bind(this)}
           {...this.nativeAttributes}
         >
           {showIcon && <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>}
@@ -88,8 +111,8 @@ export class CatSegment {
     );
   }
 
-  private get iconSize(): Size {
-    const sizes: Record<Size, Size> = { xs: 's', s: 's', m: 's', l: 'm', xl: 'l' };
+  private get iconSize(): SegmentSize {
+    const sizes: Record<SegmentSize, SegmentSize> = { xs: 's', s: 's', m: 's', l: 'm', xl: 'l' };
     return sizes[this.size] ?? 's';
   }
 
@@ -98,4 +121,16 @@ export class CatSegment {
       this.catSegmentClick.emit(this.value);
     }
   }
+
+  private handleFocus() {
+    if (!this.disabled) {
+      this.catSegmentFocus.emit(this.value);
+    }
+  }
+
+  private handleBlur() {
+    if (!this.disabled) {
+      this.catSegmentBlur.emit(this.value);
+    }
+  }
 }
diff --git a/core/src/components/cat-segment/readme.md b/core/src/components/cat-segment/readme.md
index b0a7cc9d..cf7f8df3 100644
--- a/core/src/components/cat-segment/readme.md
+++ b/core/src/components/cat-segment/readme.md
@@ -11,14 +11,16 @@ A single segment within a cat-segmented-control.
 
 ## Properties
 
-| Property             | Attribute   | Description                                                        | Type                                      | Default     |
-| -------------------- | ----------- | ------------------------------------------------------------------ | ----------------------------------------- | ----------- |
-| `disabled`           | `disabled`  | Whether this segment is disabled.                                  | `boolean`                                 | `false`     |
-| `icon`               | `icon`      | Icon name to display (same registry as cat-button).                | `string \| undefined`                     | `undefined` |
-| `iconOnly`           | `icon-only` | When true, hides the label and shows the icon only. Requires icon. | `boolean`                                 | `false`     |
-| `nativeAttributes`   | --          | Spread onto the native button element.                             | `undefined \| { [key: string]: string; }` | `undefined` |
-| `testId`             | `test-id`   | Renders as data-test on the button element.                        | `string \| undefined`                     | `undefined` |
-| `value` _(required)_ | `value`     | The unique value of this segment within the group.                 | `string`                                  | `undefined` |
+| Property             | Attribute       | Description                                                                                                                                                                            | Type                                      | Default     |
+| -------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- |
+| `a11yControls`       | `a11y-controls` | Refers to the element that is controlled (e.g. displayed or hidden) by this segment. Typically, this is the ID of a tab panel that is shown when this segment is active.               | `string \| undefined`                     | `undefined` |
+| `a11yLabel`          | `a11y-label`    | Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology. | `string \| undefined`                     | `undefined` |
+| `disabled`           | `disabled`      | Whether this segment is disabled.                                                                                                                                                      | `boolean`                                 | `false`     |
+| `icon`               | `icon`          | Icon name to display (same registry as cat-button).                                                                                                                                    | `string \| undefined`                     | `undefined` |
+| `iconOnly`           | `icon-only`     | When true, hides the label and shows the icon only. Requires icon and a11y-label.                                                                                                      | `boolean`                                 | `false`     |
+| `nativeAttributes`   | --              | Spread onto the native button element.                                                                                                                                                 | `undefined \| { [key: string]: string; }` | `undefined` |
+| `testId`             | `test-id`       | Renders as data-test on the button element.                                                                                                                                            | `string \| undefined`                     | `undefined` |
+| `value` _(required)_ | `value`         | The unique value of this segment within the group.                                                                                                                                     | `string`                                  | `undefined` |
 
 
 ## Methods
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx
index db8d44d5..054472b2 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx
@@ -6,4 +6,74 @@ describe('cat-segmented-control', () => {
     const { root } = await render(<cat-segmented-control />);
     await expect.element(root).toHaveClass('hydrated');
   });
+
+  it('moves focus with arrow keys and wraps at control boundaries', async () => {
+    const { root } = await render(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two">Option 2</cat-segment>
+        <cat-segment value="three">Option 3</cat-segment>
+      </cat-segmented-control>
+    );
+    const segments = Array.from(root.querySelectorAll<HTMLCatSegmentElement>('cat-segment'));
+    const buttons = segments.map(segment => segment.shadowRoot?.querySelector<HTMLButtonElement>('button'));
+
+    buttons[0]?.focus();
+    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true }));
+    await Promise.resolve();
+    expect(segments[1].shadowRoot?.activeElement).toBe(buttons[1]);
+
+    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, composed: true }));
+    await Promise.resolve();
+    expect(segments[0].shadowRoot?.activeElement).toBe(buttons[0]);
+
+    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, composed: true }));
+    await Promise.resolve();
+    expect(segments[2].shadowRoot?.activeElement).toBe(buttons[2]);
+  });
+
+  it('skips disabled segments during keyboard navigation', async () => {
+    const { root } = await render(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two" disabled>
+          Option 2
+        </cat-segment>
+        <cat-segment value="three">Option 3</cat-segment>
+      </cat-segmented-control>
+    );
+    const segments = Array.from(root.querySelectorAll<HTMLCatSegmentElement>('cat-segment'));
+    const buttons = segments.map(segment => segment.shadowRoot?.querySelector<HTMLButtonElement>('button'));
+
+    buttons[0]?.focus();
+    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true }));
+    await Promise.resolve();
+
+    expect(segments[2].shadowRoot?.activeElement).toBe(buttons[2]);
+    expect(segments[1].shadowRoot?.activeElement).not.toBe(buttons[1]);
+  });
+
+  it('forwards focus and blur events from segments', async () => {
+    const { root } = await render(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+      </cat-segmented-control>
+    );
+    const events: { type: string; detail: string }[] = [];
+    root.addEventListener('catFocus', event => {
+      events.push({ type: 'focus', detail: (event as CustomEvent<string>).detail });
+    });
+    root.addEventListener('catBlur', event => {
+      events.push({ type: 'blur', detail: (event as CustomEvent<string>).detail });
+    });
+    const button = root.querySelector('cat-segment')?.shadowRoot?.querySelector<HTMLButtonElement>('button');
+
+    button?.focus();
+    button?.blur();
+
+    expect(events).toEqual([
+      { type: 'focus', detail: 'one' },
+      { type: 'blur', detail: 'one' }
+    ]);
+  });
 });
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
index 8737913a..8e5c2213 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
@@ -1,13 +1,154 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { render } from '@stencil/vitest';
 import { h } from '@stencil/core';
 import './cat-segmented-control';
 
 describe('cat-segmented-control', () => {
   it('renders', async () => {
-    const { root } = await render(<cat-segmented-control />);
-    await expect(root).toEqualLightHtml(`
-      <cat-segmented-control class="hydrated"></cat-segmented-control>
+    const { root } = await render(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two">Option 2</cat-segment>
+      </cat-segmented-control>
+    );
+
+    expect(root).toEqualLightHtml(`
+      <cat-segmented-control class="hydrated">
+         <cat-segment value="one">
+           Option 1
+         </cat-segment>
+         <cat-segment value="two">
+           Option 2
+         </cat-segment>
+      </cat-segmented-control>
     `);
   });
+
+  it('emits an event when a segment selection is changed', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two" testId="optionTwo">
+          Option 2
+        </cat-segment>
+      </cat-segmented-control>
+    );
+
+    const changeListener = vi.fn();
+    root.addEventListener('catChange', changeListener);
+
+    const segment = root.querySelector<HTMLCatSegmentElement>('[testid="optionTwo"]');
+
+    expect(segment).not.toBeNull();
+    segment?.dispatchEvent(new CustomEvent('catSegmentClick', { detail: 'two', bubbles: true, composed: true }));
+    await waitForChanges();
+
+    expect(changeListener).toHaveBeenCalledWith(expect.objectContaining({ detail: 'two' }));
+  });
+
+  it('emits the focused segment value', async () => {
+    const { root } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+      </cat-segmented-control>
+    );
+    const focusListener = vi.fn();
+    root.addEventListener('catFocus', focusListener);
+
+    root.querySelector('cat-segment')?.dispatchEvent(
+      new CustomEvent('catSegmentFocus', {
+        detail: 'one',
+        bubbles: true,
+        composed: true
+      })
+    );
+
+    expect(focusListener).toHaveBeenCalledOnce();
+    expect(focusListener.mock.calls[0][0]).toMatchObject({ detail: 'one' });
+  });
+
+  it('emits the blurred segment value', async () => {
+    const { root } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+      </cat-segmented-control>
+    );
+    const blurListener = vi.fn();
+    root.addEventListener('catBlur', blurListener);
+
+    root.querySelector('cat-segment')?.dispatchEvent(
+      new CustomEvent('catSegmentBlur', {
+        detail: 'one',
+        bubbles: true,
+        composed: true
+      })
+    );
+
+    expect(blurListener).toHaveBeenCalledOnce();
+    expect(blurListener.mock.calls[0][0]).toMatchObject({ detail: 'one' });
+  });
+
+  it('renders group accessibility and native attributes', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control
+        a11yLabel="Test aria label"
+        testId="test-id"
+        nativeAttributes={{ 'data-context': 'settings' }}
+      >
+        <cat-segment value="one">Option 1</cat-segment>
+      </cat-segmented-control>
+    );
+
+    await waitForChanges();
+    const group = root.shadowRoot?.querySelector('[role="group"]');
+
+    expect(group?.getAttribute('aria-label')).toBe('Test aria label');
+    expect(group?.getAttribute('data-test')).toBe('test-id');
+    expect(group?.getAttribute('data-context')).toBe('settings');
+  });
+
+  it('propagates size to all segments', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control size="xl">
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two">Option 2</cat-segment>
+      </cat-segmented-control>
+    );
+
+    await waitForChanges();
+
+    const sizes = Array.from(root.querySelectorAll<HTMLCatSegmentElement>('cat-segment')).map(segment => segment.size);
+    expect(sizes).toEqual(['xl', 'xl']);
+  });
+
+  it('disables all segments when control is disabled', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control disabled>
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two">Option 2</cat-segment>
+      </cat-segmented-control>
+    );
+
+    await waitForChanges();
+
+    expect(
+      Array.from(root.querySelectorAll<HTMLCatSegmentElement>('cat-segment')).every(segment => segment.disabled)
+    ).toBe(true);
+  });
+
+  it('does not emit selection change for focus or blur events', async () => {
+    const { root } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+      </cat-segmented-control>
+    );
+    const changeListener = vi.fn();
+    root.addEventListener('catChange', changeListener);
+    const segment = root.querySelector('cat-segment');
+
+    segment?.dispatchEvent(new CustomEvent('catSegmentFocus', { detail: 'one', bubbles: true, composed: true }));
+    segment?.dispatchEvent(new CustomEvent('catSegmentBlur', { detail: 'one', bubbles: true, composed: true }));
+
+    expect(changeListener).not.toHaveBeenCalled();
+  });
 });
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
index bc2c4e6d..b01724ed 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
@@ -14,7 +14,7 @@ export class CatSegmentedControl {
   private segments: HTMLCatSegmentElement[] = [];
   private mutationObserver?: MutationObserver;
 
-  @Element() el!: HTMLElement;
+  @Element() hostElement!: HTMLElement;
 
   /**
    * The value of the currently selected segment.
@@ -51,6 +51,16 @@ export class CatSegmentedControl {
    */
   @Event() catChange!: EventEmitter<string>;
 
+  /**
+   * Emitted when a segment gains focus. Payload is the segment value.
+   */
+  @Event() catFocus!: EventEmitter<string>;
+
+  /**
+   * Emitted when a segment loses focus. Payload is the segment value.
+   */
+  @Event() catBlur!: EventEmitter<string>;
+
   @Watch('value')
   onValueChange(newValue?: string) {
     this.segments.forEach(s => (s.active = s.value === newValue));
@@ -73,7 +83,7 @@ export class CatSegmentedControl {
         this.sync();
       }
     });
-    this.mutationObserver.observe(this.el, { childList: true, attributes: true, subtree: true });
+    this.mutationObserver.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
   }
 
   disconnectedCallback() {
@@ -86,6 +96,16 @@ export class CatSegmentedControl {
     this.catChange.emit(this.value);
   }
 
+  @Listen('catSegmentFocus')
+  onSegmentFocus(event: CustomEvent<string>) {
+    this.catFocus.emit(event.detail);
+  }
+
+  @Listen('catSegmentBlur')
+  onSegmentBlur(event: CustomEvent<string>) {
+    this.catBlur.emit(event.detail);
+  }
+
   @Listen('keydown')
   onKeydown(event: KeyboardEvent) {
     const keys = ['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'];
@@ -117,7 +137,7 @@ export class CatSegmentedControl {
   }
 
   private sync() {
-    this.segments = Array.from(this.el.querySelectorAll('cat-segment'));
+    this.segments = Array.from(this.hostElement.querySelectorAll('cat-segment'));
     this.onValueChange(this.value);
     this.onSizeChange(this.size);
     this.onDisabledChange(this.disabled);
diff --git a/core/src/components/cat-segmented-control/readme.md b/core/src/components/cat-segmented-control/readme.md
index a5e2d444..ef333274 100644
--- a/core/src/components/cat-segmented-control/readme.md
+++ b/core/src/components/cat-segmented-control/readme.md
@@ -25,7 +25,9 @@ A segmented control for selecting one option from a mutually-exclusive set.
 
 | Event       | Description                                                                  | Type                  |
 | ----------- | ---------------------------------------------------------------------------- | --------------------- |
+| `catBlur`   | Emitted when a segment loses focus. Payload is the segment value.            | `CustomEvent<string>` |
 | `catChange` | Emitted when the selected segment changes. Payload is the new segment value. | `CustomEvent<string>` |
+| `catFocus`  | Emitted when a segment gains focus. Payload is the segment value.            | `CustomEvent<string>` |
 
 
 ## Shadow Parts

From 12876dea4e2cb6d78c7e39c07f0f51dd31b52e6e Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Wed, 12 Aug 2026 11:56:02 +0200
Subject: [PATCH 15/42] chore: update readme

---
 README.md | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6b029d7c..c0d6793b 100644
--- a/README.md
+++ b/README.md
@@ -69,7 +69,17 @@ Steps:
 1. Make changes;
 2. Run `pnpm build`;
 
-Extra steps for testing the changes in angular package:
+`pnpm run build:core` regenerates Angular and React binding files through
+Stencil output targets. Review and commit generated changes with component:
+
+- `angular/projects/catalyst/src/lib/directives/proxies.ts`
+- `react/src/components/stencil-generated/index.ts`
+
+`pnpm run build:angular` and `pnpm run build:react` validate and compile those
+bindings. CI does not commit generated binding changes. Do not edit generated
+files manually.
+
+Extra steps for testing the changes in Angular package:
 1.  Run `pnpm install` again;
 2. For 
    - [angular](angular/projects/catalyst) Go to `/angular/dist/catalyst`;

From 9b01c9edf096da965e5cf53773c8c618614d0278 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Wed, 12 Aug 2026 11:56:39 +0200
Subject: [PATCH 16/42] feat(core): add new components to catalyst.module.ts

---
 angular/projects/catalyst/src/lib/catalyst.module.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/angular/projects/catalyst/src/lib/catalyst.module.ts b/angular/projects/catalyst/src/lib/catalyst.module.ts
index 771613ac..5c518edc 100644
--- a/angular/projects/catalyst/src/lib/catalyst.module.ts
+++ b/angular/projects/catalyst/src/lib/catalyst.module.ts
@@ -36,6 +36,8 @@ const CatComponents = [
   Components.CatRadio,
   Components.CatRadioGroup,
   Components.CatScrollable,
+  Components.CatSegment,
+  Components.CatSegmentedControl,
   Components.CatSelect,
   Components.CatSkeleton,
   Components.CatSpinner,

From e503c4918d9734efdbb42683d2f8669012e60d45 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Wed, 12 Aug 2026 12:46:36 +0200
Subject: [PATCH 17/42] chore: improve skill

---
 .../catalyst-component-development/SKILL.md   | 55 +++++++++++++++----
 1 file changed, 45 insertions(+), 10 deletions(-)

diff --git a/.agents/skills/catalyst-component-development/SKILL.md b/.agents/skills/catalyst-component-development/SKILL.md
index 4a81b6bc..c92cc88c 100644
--- a/.agents/skills/catalyst-component-development/SKILL.md
+++ b/.agents/skills/catalyst-component-development/SKILL.md
@@ -146,23 +146,54 @@ Run `pnpm --filter @haiilo/catalyst test` and confirm all three files pass.
 
 ---
 
-## Step 6 — Verify Angular bindings
+## Step 6 — Register Angular exports
 
-Run both builds regardless of whether you think the contract changed:
+Stencil generates Angular proxies but does not register them in
+`CatalystModule`. Add every new public component to `CatComponents` in
+`angular/projects/catalyst/src/lib/catalyst.module.ts`; composed components
+need entries for the parent and each public child.
+
+**Completion criterion:** every new public component has a corresponding
+`Components.Cat<Name>` entry in `CatComponents`, which the existing spreads
+include in both `declarations` and `exports`.
+
+## Step 7 — Verify Angular bindings
+
+Run both builds:
 
 1. `pnpm --filter @haiilo/catalyst build`
-2. `pnpm --filter @haiilo/catalyst-angular build`
+2. `pnpm run build:angular`
 
-Inspect `angular/projects/catalyst-components/src/directives/` — any new or
-modified props and events must appear in the generated directive. Never edit
-files in `angular/` by hand. For breaking change rules see [CONTRACT.md](CONTRACT.md).
+Inspect the generated directive at
+`angular/projects/catalyst/src/lib/directives/proxies.ts`; new or modified
+props and events must appear there. Never edit generated files. See
+[CONTRACT.md](CONTRACT.md) for breaking changes.
 
-**Completion criterion:** both builds exit 0. Generated directive reflects the
-current component contract.
+`pnpm run build:core` generates this Angular proxy and the React proxy at
+`react/src/components/stencil-generated/index.ts`. Review both files and commit
+their changes with the component. CI regenerates them for validation but does
+not commit them. Never discard generated binding changes or edit them manually.
+
+**Completion criterion:** both builds exit 0. Generated Angular directive and
+React proxy reflect the current component contract, and their tracked changes
+are included in the component change.
 
 ---
 
-## Step 7 — Done checklist
+## Step 8 — Verify React bindings
+
+After the core build, verify every new public component has a `Cat<Name>` export
+in the generated
+`react/src/components/stencil-generated/index.ts`, then run:
+
+```bash
+pnpm run build:react
+```
+
+**Completion criterion:** React proxy exports exist for every new public
+component and `pnpm run build:react` exits 0.
+
+## Step 9 — Done checklist
 
 Before considering the work complete, verify every item:
 
@@ -173,6 +204,10 @@ Before considering the work complete, verify every item:
 - [ ] No hardcoded color, radius, or transition value in SCSS — all via tokens
 - [ ] `:host([hidden]) { display: none; }` present in SCSS
 - [ ] Three test files pass (`pnpm --filter @haiilo/catalyst test`)
-- [ ] Angular build passes (`pnpm --filter @haiilo/catalyst-angular build`)
+- [ ] Every new public component is registered in `CatComponents` in `CatalystModule`
+- [ ] Angular build passes (`pnpm run build:angular`)
+- [ ] React proxy export exists for every new public component
+- [ ] React build passes (`pnpm run build:react`)
+- [ ] Generated Angular and React binding changes are reviewed and committed
 - [ ] No `as any`, `@ts-ignore`, or empty catch blocks introduced
 - [ ] `readme.md` is present (content auto-generated on build; placeholder is fine)

From bfc7a9bdb5d26b84878d307011d1c136c427fde0 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Wed, 12 Aug 2026 12:53:53 +0200
Subject: [PATCH 18/42] feat(core): generate proxies.ts with new components

---
 .../catalyst/src/lib/directives/proxies.ts    | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)

diff --git a/angular/projects/catalyst/src/lib/directives/proxies.ts b/angular/projects/catalyst/src/lib/directives/proxies.ts
index 9b6c9364..9f4aae4b 100644
--- a/angular/projects/catalyst/src/lib/directives/proxies.ts
+++ b/angular/projects/catalyst/src/lib/directives/proxies.ts
@@ -1193,6 +1193,83 @@ export declare interface CatScrollable extends Components.CatScrollable {
   scrolledBottom: EventEmitter<CustomEvent<void>>;
 }
 
+@ProxyCmp({
+  inputs: ['a11yControls', 'a11yLabel', 'disabled', 'icon', 'iconOnly', 'nativeAttributes', 'testId', 'value'],
+  methods: ['doFocus', 'doBlur']
+})
+@Component({
+  selector: 'cat-segment',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [
+    'a11yControls',
+    'a11yLabel',
+    'disabled',
+    'icon',
+    'iconOnly',
+    'nativeAttributes',
+    'testId',
+    { name: 'value', required: true }
+  ],
+  standalone: false
+})
+export class CatSegment {
+  protected el: HTMLCatSegmentElement;
+  constructor(
+    c: ChangeDetectorRef,
+    r: ElementRef,
+    protected z: NgZone
+  ) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+export declare interface CatSegment extends Components.CatSegment {}
+
+@ProxyCmp({
+  inputs: ['a11yLabel', 'disabled', 'nativeAttributes', 'size', 'testId', 'value']
+})
+@Component({
+  selector: 'cat-segmented-control',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['a11yLabel', 'disabled', 'nativeAttributes', 'size', 'testId', 'value'],
+  outputs: ['catChange', 'catFocus', 'catBlur'],
+  standalone: false
+})
+export class CatSegmentedControl {
+  protected el: HTMLCatSegmentedControlElement;
+  @Output() catChange = new EventEmitter<CustomEvent<string>>();
+  @Output() catFocus = new EventEmitter<CustomEvent<string>>();
+  @Output() catBlur = new EventEmitter<CustomEvent<string>>();
+  constructor(
+    c: ChangeDetectorRef,
+    r: ElementRef,
+    protected z: NgZone
+  ) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+export declare interface CatSegmentedControl extends Components.CatSegmentedControl {
+  /**
+   * Emitted when the selected segment changes. Payload is the new segment value.
+   */
+  catChange: EventEmitter<CustomEvent<string>>;
+  /**
+   * Emitted when a segment gains focus. Payload is the segment value.
+   */
+  catFocus: EventEmitter<CustomEvent<string>>;
+  /**
+   * Emitted when a segment loses focus. Payload is the segment value.
+   */
+  catBlur: EventEmitter<CustomEvent<string>>;
+}
+
 @ProxyCmp({
   inputs: [
     'autoComplete',

From 2170916c402f30c78ed49df0b593b8c9209afc6c Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Wed, 12 Aug 2026 15:55:31 +0200
Subject: [PATCH 19/42] chore: remove agents instructions (to be introduced
 separately)

---
 .../CONTRACT.md                               | 211 -----
 .../catalyst-component-development/SKILL.md   | 213 -----
 .../catalyst-onboarding/COMPONENT-ANATOMY.md  | 192 ----
 .../skills/catalyst-onboarding/GLOSSARY.md    |  48 -
 .../skills/catalyst-onboarding/PR-REVIEW.md   |  88 --
 .../catalyst-onboarding/REPO-STRUCTURE.md     |  48 -
 .agents/skills/catalyst-onboarding/SKILL.md   |  71 --
 .agents/skills/catalyst-onboarding/TOKENS.md  | 181 ----
 .../catalyst-onboarding/TROUBLESHOOTING.md    |  50 -
 .../skills/catalyst-pr-review/CHECKLIST.md    |  85 --
 .agents/skills/catalyst-pr-review/SKILL.md    |  36 -
 .../stenciljs-component-development/SKILL.md  | 866 ------------------
 12 files changed, 2089 deletions(-)
 delete mode 100644 .agents/skills/catalyst-component-development/CONTRACT.md
 delete mode 100644 .agents/skills/catalyst-component-development/SKILL.md
 delete mode 100644 .agents/skills/catalyst-onboarding/COMPONENT-ANATOMY.md
 delete mode 100644 .agents/skills/catalyst-onboarding/GLOSSARY.md
 delete mode 100644 .agents/skills/catalyst-onboarding/PR-REVIEW.md
 delete mode 100644 .agents/skills/catalyst-onboarding/REPO-STRUCTURE.md
 delete mode 100644 .agents/skills/catalyst-onboarding/SKILL.md
 delete mode 100644 .agents/skills/catalyst-onboarding/TOKENS.md
 delete mode 100644 .agents/skills/catalyst-onboarding/TROUBLESHOOTING.md
 delete mode 100644 .agents/skills/catalyst-pr-review/CHECKLIST.md
 delete mode 100644 .agents/skills/catalyst-pr-review/SKILL.md
 delete mode 100644 .agents/skills/stenciljs-component-development/SKILL.md

diff --git a/.agents/skills/catalyst-component-development/CONTRACT.md b/.agents/skills/catalyst-component-development/CONTRACT.md
deleted file mode 100644
index 27a43c56..00000000
--- a/.agents/skills/catalyst-component-development/CONTRACT.md
+++ /dev/null
@@ -1,211 +0,0 @@
-# Catalyst Component Contract
-
-Every rule here is part of the **contract** — the public API surface that
-propagates into Angular and all consumer apps the moment it ships.
-
----
-
-## Props (@Prop)
-
-- Every prop has a JSDoc comment describing what it does (not what type it is —
-  TypeScript already says that).
-- Boolean props default to `false`. Never default to `true`.
-- Use union string literals for enums: `'xs' | 's' | 'm' | 'l' | 'xl'`.
-  Do not use TypeScript enums — they don't serialize cleanly to HTML attributes.
-- Accessibility props use the `a11y-` attribute prefix:
-  `@Prop({ attribute: 'a11y-label' }) a11yLabel?: string`
-- Pass-through props for native element attributes use `nativeAttributes`:
-  `@Prop() nativeAttributes?: { [key: string]: string }`. Never add a new prop
-  just to expose a single native attribute — use `nativeAttributes` instead.
-- `testId` is a standard prop on every interactive component. It maps to
-  `data-test` on the native element. Copy the pattern from `cat-button`.
-- Props that depend on a breakpoint accept `boolean | Breakpoint`. See
-  `cat-button`'s `iconOnly` prop for the full pattern including `@Watch` and
-  `MediaMatcher` teardown.
-- Never make a prop `mutable: true` unless there is no alternative. Prefer
-  emitting an event and letting the parent update the prop.
-
-## Events (@Event)
-
-- All event names are prefixed `cat`: `catClick`, `catChange`, `catFocus`, `catBlur`.
-- Event payload is typed, never `any`: `EventEmitter<MouseEvent>`, `EventEmitter<string>`, etc.
-- Focus/blur events use `FocusEvent` as payload. Click uses `MouseEvent`.
-- Change events on form inputs carry the new value: `EventEmitter<string | boolean | number>`.
-- Every event has a JSDoc comment.
-
-## CSS Parts (@part)
-
-- Declare every exposed part in the component-level JSDoc with `@part <name> - description`.
-- Add `part="<name>"` to the corresponding element in the render output.
-- Parts are the official theming extension point. Expose at minimum:
-  the root interactive element (e.g. `button`, `input`) and any significant
-  sub-regions consumers might need to target.
-- Never expose internal implementation details as parts. Only expose stable,
-  intentional extension points.
-
-## Slots
-
-- Declare named slots in the component JSDoc with `@slot <name> - description`.
-- The default slot requires no `@slot` declaration unless its purpose is non-obvious.
-- Check `this.hostElement.hasChildNodes()` in `componentWillRender()` to detect
-  slotted content presence. Store in a `@State` to trigger re-render.
-  See `cat-button`'s `hasSlottedContent` pattern.
-
-## Public methods (@Method)
-
-- All `@Method()` functions are `async` and return `Promise<void>` or a typed Promise.
-- Use `do` prefix for imperative actions: `doFocus()`, `doBlur()`, `doClick()`.
-- Document with JSDoc including what the method does and any caveats.
-
-## Shadow DOM
-
-- Always `shadow: true`. Never `scoped: true` for Catalyst components.
-- Use `shadow: { delegatesFocus: true }` for any component that wraps a native
-  focusable element (`input`, `button`, `a`, `textarea`, `select`).
-- `@Element() hostElement!: HTMLElement` — always name it `hostElement`.
-- Set `tabIndex` on the host element in `render()` for keyboard-navigable
-  components. Copy the pattern from `cat-button`:
-  `this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0`
-
-## SCSS and tokens
-
-**Imports** — every component SCSS starts with:
-```scss
-@use 'variables' as *;
-@use 'mixins' as *;
-```
-Never use `@import`. Never use a relative path to `_variables.tokens.scss` directly.
-
-**Token accessor** — use `cat-token('dot.separated.path')` for all design tokens:
-```scss
-color: cat-token('color.ui.font.default');
-border-radius: cat-border-radius('m');  // 'xs'|'s'|'m'|'l'|'xl'|'full'|0
-```
-
-**RGB partial tokens** — color tokens resolve to bare RGB partials, not `#hex`.
-Wrap them correctly:
-```scss
-// Direct use (results in rgb(...)):
-background: cat-token('color.theme.primary.bg');
-
-// With opacity:
-background: cat-token('color.theme.primary.bg', 0.5);
-
-// In CSS custom property chains (avoid wrapping prematurely):
---bg: #{cat-token('color.theme.primary.bg', $wrap: false)};
-background: cat-token-wrap(var(--bg));
-```
-
-**Typography** — use mixins, never hardcode font-size or line-height:
-```scss
-@include cat-body('m');     // body text, medium size
-@include cat-body('s');     // body text, small
-@include cat-head('l');     // heading, large
-```
-
-**Available mixins quick-reference:**
-| mixin | use |
-|---|---|
-| `cat-body($size)` | body font-size + line-height + weight |
-| `cat-head($size)` | heading font-size + line-height + weight |
-| `cat-ellipsis()` / `cat-ellipsis($n)` | single-line / multi-line truncation |
-| `cat-break-word` | word-wrap for long strings |
-| `cat-visually-hidden` | accessible hide (screen-reader visible) |
-| `cat-select(none)` | disable user selection |
-| `cat-font-smooth` | antialiasing for filled/inverted text |
-| `cat-border-radius($size)` | border-radius from token scale |
-
-**`:host` display** — set `display` on `:host` to whatever the component needs
-(`block`, `inline-block`, `flex`). The bootstrap skeleton in SKILL.md Step 2
-defaults to `block`; change it if the component requires otherwise.
-
-Use `:host(.<class>)` selectors for consumer-applied variant classes (see
-`cat-button`'s `.cat-tab`, `.cat-nav-item` patterns).
-
-**No hardcoded values** — never write:
-- A hex color or `rgb()` — use `cat-token('color.*')`
-- A border-radius pixel value — use `cat-border-radius()`
-- A transition duration literal — use `cat-token('time.transition.*')`
-
-## Three test files
-
-**`cat-<name>.spec.tsx`** — unit test using `@stencil/vitest` + `vitest`.
-Tests shadow DOM render output for the default state and key prop combinations.
-
-```typescript
-import { describe, it, expect } from 'vitest';
-import { render } from '@stencil/vitest';
-import { h } from '@stencil/core';
-import './cat-<name>';
-
-describe('cat-<name>', () => {
-  it('renders', async () => {
-    const { root } = await render(<cat-<name> />);
-    await expect(root.shadowRoot).toEqualHtml(`...`);
-  });
-});
-```
-
-**`cat-<name>.e2e.tsx`** — integration test using `@stencil/vitest`.
-Tests hydration and user interactions (clicks, events, keyboard).
-
-```typescript
-import { describe, it, expect } from 'vitest';
-import { render, h } from '@stencil/vitest';
-
-describe('cat-<name>', () => {
-  it('renders', async () => {
-    const { root } = await render(<cat-<name> />);
-    await expect.element(root).toHaveClass('hydrated');
-  });
-});
-```
-
-**`cat-<name>.screenshot.tsx`** — visual regression using `@vitest/browser/context`.
-Tests all meaningful visual states: default, hover, active, disabled, each
-variant/color combination. Use `toMatchScreenshot()`.
-
-```typescript
-import { describe, it, expect, afterEach } from 'vitest';
-import { render, h } from '@stencil/vitest';
-import { page } from '@vitest/browser/context';
-
-describe('cat-<name>', () => {
-  afterEach(async () => {
-    await page.elementLocator(document.body).hover(); // reset hover state
-  });
-
-  it('default', async () => {
-    const { root } = await render(
-      <div style={{ padding: '10px', display: 'inline-block' }}>
-        <cat-<name> />
-      </div>
-    );
-    await expect(root).toMatchScreenshot();
-  });
-});
-```
-
-Screenshot tests always wrap the component in a `<div style={{ padding: '10px', display: 'inline-block' }}>`.
-Always reset hover state in `afterEach`.
-
-## Angular binding side-effects
-
-The Angular output target (`angular/`) is generated by the Stencil build from
-`core/`. Never edit files in `angular/` by hand.
-
-**Breaking contract changes** (require a major version bump):
-- Removing a prop
-- Renaming a prop
-- Changing a prop's type in a non-additive way
-- Removing or renaming an event
-- Removing a CSS part
-
-**Non-breaking additions** (minor version bump, handled by release-please):
-- New prop with a default value
-- New event
-- New CSS part
-- New slot
-
-When making a breaking change: flag it in the PR description and in the commit
-message with `BREAKING CHANGE:`.
diff --git a/.agents/skills/catalyst-component-development/SKILL.md b/.agents/skills/catalyst-component-development/SKILL.md
deleted file mode 100644
index c92cc88c..00000000
--- a/.agents/skills/catalyst-component-development/SKILL.md
+++ /dev/null
@@ -1,213 +0,0 @@
----
-name: catalyst-component-development
-description: >
-  Use when creating a new cat-* component, modifying an existing one, adding or
-  changing props or events, or touching component styles in
-  core/src/components/.
----
-
-# Catalyst Component Development
-
-> **Requires:** load the `stenciljs-component-development` skill alongside this
-> one. This skill covers Catalyst-specific rules only — Stencil decorator syntax,
-> lifecycle methods, and JSX are assumed knowledge from that skill. Both skills
-> are available in `.agents/skills/`.
-
-The **contract** is the leading word for this skill. Every `cat-*` component
-exposes a public contract — props, events, CSS parts, slots — that propagates
-into Angular bindings and all consumer apps the moment it ships. Work that
-respects the contract is safe. Work that breaks it requires a major version bump
-across all five packages. Keep this in mind on every decision below.
-
----
-
-## Entry point
-
-**Creating a new component** → start at Step 1.  
-**Modifying an existing component** → skip to Step 3. Steps 1–2 don't apply.
-
----
-
-## Step 1 — Scaffold the component directory
-
-Create `core/src/components/cat-<name>/` with exactly these six files:
-
-```
-cat-<name>/
-  cat-<name>.tsx           # component implementation
-  cat-<name>.scss          # styles
-  cat-<name>.spec.tsx      # unit test (shadow DOM render assertions)
-  cat-<name>.e2e.tsx       # integration test (hydration, interaction)
-  cat-<name>.screenshot.tsx # visual regression test (toMatchScreenshot)
-  readme.md                # auto-generated — leave as empty placeholder
-```
-
-No other files. No `.css`. No subdirectories. No `index.ts`.
-
-**Naming rules:**
-- Tag: `cat-<name>` (kebab-case, always `cat-` prefix)
-- Class: `Cat<Name>` (PascalCase)
-- Files: match the tag exactly
-
-**Completion criterion:** all six files exist, no extras.
-
----
-
-## Step 2 — Bootstrap the component skeleton
-
-Start `.tsx` from this skeleton, preserving member order exactly:
-
-```typescript
-import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';
-
-/**
- * One-sentence description of what this component is for.
- *
- * @part <part-name> - Description of each exposed CSS part.
- * @slot <slot-name> - Description of each named slot (omit if default slot only).
- */
-@Component({
-  tag: 'cat-<name>',
-  styleUrl: 'cat-<name>.scss',
-  shadow: true
-})
-export class Cat<Name> {
-  // 1. Private instance fields
-  // 2. @Element() hostElement!: HTMLElement;
-  // 3. @State() (alphabetical)
-  // 4. @Prop() + immediate @Watch() (alphabetical)
-  // 5. @Event() (alphabetical)
-  // 6. Lifecycle methods (natural order)
-  // 7. @Listen()
-  // 8. @Method() (alphabetical)
-  // 9. Private methods
-  // 10. render() — always last
-
-  render() {
-    return (
-      <Host>
-        <slot></slot>
-      </Host>
-    );
-  }
-}
-```
-
-Bootstrap `.scss` with the standard imports and `:host` block:
-
-```scss
-@use 'variables' as *;
-@use 'mixins' as *;
-
-:host {
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
-```
-
-**Completion criterion:** skeleton compiles (`pnpm --filter @haiilo/catalyst build` exits 0).
-
----
-
-## Step 3 — Implement the contract
-
-Implement props, events, slots, and methods according to the requirements. Apply
-every rule in [CONTRACT.md](CONTRACT.md) while writing. The contract rules are
-not optional — each one is a hard constraint, not a suggestion.
-
-**Completion criterion:** run `pnpm --filter @haiilo/catalyst build`. It must
-exit 0 with no TypeScript errors. Every prop and event in the requirements has
-an implementation, a JSDoc comment, and a matching entry in the done checklist.
-
----
-
-## Step 4 — Style with SCSS and tokens
-
-Write styles in `cat-<name>.scss`. Apply every rule in [CONTRACT.md](CONTRACT.md)
-under the SCSS section while writing.
-
-**Completion criterion:** no hardcoded colors, no hardcoded radii, no hardcoded
-transition durations. Every value that has a token uses the token.
-Run `pnpm --filter @haiilo/catalyst build` to confirm no SCSS errors.
-
----
-
-## Step 5 — Write three tests
-
-Every component requires all three test files. See [CONTRACT.md](CONTRACT.md)
-for what belongs in each.
-
-Run `pnpm --filter @haiilo/catalyst test` and confirm all three files pass.
-
-**Completion criterion:** spec, e2e, and screenshot tests all pass. Zero skipped tests.
-
----
-
-## Step 6 — Register Angular exports
-
-Stencil generates Angular proxies but does not register them in
-`CatalystModule`. Add every new public component to `CatComponents` in
-`angular/projects/catalyst/src/lib/catalyst.module.ts`; composed components
-need entries for the parent and each public child.
-
-**Completion criterion:** every new public component has a corresponding
-`Components.Cat<Name>` entry in `CatComponents`, which the existing spreads
-include in both `declarations` and `exports`.
-
-## Step 7 — Verify Angular bindings
-
-Run both builds:
-
-1. `pnpm --filter @haiilo/catalyst build`
-2. `pnpm run build:angular`
-
-Inspect the generated directive at
-`angular/projects/catalyst/src/lib/directives/proxies.ts`; new or modified
-props and events must appear there. Never edit generated files. See
-[CONTRACT.md](CONTRACT.md) for breaking changes.
-
-`pnpm run build:core` generates this Angular proxy and the React proxy at
-`react/src/components/stencil-generated/index.ts`. Review both files and commit
-their changes with the component. CI regenerates them for validation but does
-not commit them. Never discard generated binding changes or edit them manually.
-
-**Completion criterion:** both builds exit 0. Generated Angular directive and
-React proxy reflect the current component contract, and their tracked changes
-are included in the component change.
-
----
-
-## Step 8 — Verify React bindings
-
-After the core build, verify every new public component has a `Cat<Name>` export
-in the generated
-`react/src/components/stencil-generated/index.ts`, then run:
-
-```bash
-pnpm run build:react
-```
-
-**Completion criterion:** React proxy exports exist for every new public
-component and `pnpm run build:react` exits 0.
-
-## Step 9 — Done checklist
-
-Before considering the work complete, verify every item:
-
-- [ ] Six files present, no extras
-- [ ] Member order matches the skeleton (props before events, lifecycle before methods, render last)
-- [ ] Every public prop and event has a JSDoc comment
-- [ ] `@part` declarations in the component JSDoc match every `part="..."` in the render output
-- [ ] No hardcoded color, radius, or transition value in SCSS — all via tokens
-- [ ] `:host([hidden]) { display: none; }` present in SCSS
-- [ ] Three test files pass (`pnpm --filter @haiilo/catalyst test`)
-- [ ] Every new public component is registered in `CatComponents` in `CatalystModule`
-- [ ] Angular build passes (`pnpm run build:angular`)
-- [ ] React proxy export exists for every new public component
-- [ ] React build passes (`pnpm run build:react`)
-- [ ] Generated Angular and React binding changes are reviewed and committed
-- [ ] No `as any`, `@ts-ignore`, or empty catch blocks introduced
-- [ ] `readme.md` is present (content auto-generated on build; placeholder is fine)
diff --git a/.agents/skills/catalyst-onboarding/COMPONENT-ANATOMY.md b/.agents/skills/catalyst-onboarding/COMPONENT-ANATOMY.md
deleted file mode 100644
index 970e6318..00000000
--- a/.agents/skills/catalyst-onboarding/COMPONENT-ANATOMY.md
+++ /dev/null
@@ -1,192 +0,0 @@
-# Catalyst Component Anatomy
-
-## File structure
-
-Every component lives in `core/src/components/cat-<name>/` with exactly six files:
-
-```
-cat-<name>/
-  cat-<name>.tsx            # component implementation
-  cat-<name>.scss           # styles
-  cat-<name>.spec.tsx       # unit test (shadow DOM render assertions)
-  cat-<name>.e2e.tsx        # integration test (hydration, interaction)
-  cat-<name>.screenshot.tsx # visual regression (toMatchScreenshot)
-  readme.md                 # auto-generated on build
-```
-
-## Decorator map
-
-| decorator | what it does |
-|---|---|
-| `@Component` | Registers the custom element. `shadow: true` always. `shadow: { delegatesFocus: true }` for any component wrapping a native focusable element (`input`, `button`, `a`, `textarea`, `select`). |
-| `@Element() hostElement!: HTMLElement` | Ref to the outer `<cat-*>` DOM element. Always named `hostElement`. |
-| `@Prop()` | Public API. Becomes `@Input()` in Angular, a prop in React. Every prop requires a JSDoc comment. |
-| `@State()` | Internal reactive state. Changes trigger re-render. Not visible outside the component. |
-| `@Watch('propName')` | Fires when a prop or state changes. Place immediately after the prop it watches. |
-| `@Event()` | Declares a custom DOM event emitter. All events prefixed `cat`. Becomes `@Output()` in Angular. |
-| `@Listen('event')` | Intercepts a DOM event on the host or a specified target. |
-| `@Method()` | Public imperative API. Always `async`, returns `Promise<void>`. |
-
-## Member order (enforced by convention)
-
-```typescript
-// 1. Private instance fields
-// 2. @Element() hostElement
-// 3. @State() — alphabetical
-// 4. @Prop() + immediate @Watch() — alphabetical
-// 5. @Event() — alphabetical
-// 6. Lifecycle methods — natural order
-// 7. @Listen()
-// 8. @Method() — alphabetical
-// 9. Private methods
-// 10. render() — always last
-```
-
-Tag name: `cat-*` kebab-case. Class name: `Cat*` PascalCase.
-Internal state fields: `_camelCase` prefix. CSS classes: `cat-{tag}-{modifier}`.
-Events: `cat*` camelCase (`catClick`, `catChange`, `catBlur`).
-Methods: `do*` for native wraps (`doFocus`, `doBlur`), no prefix for state transitions (`open`, `close`).
-A11y props: `a11y*` camelCase → `a11y-*` attribute (`a11yLabel` → `a11y-label`).
-CSS parts: semantic nouns (`part="button"`, `part="content"`).
-
-## Key render() patterns
-
-```tsx
-// Host wrapper — sets attributes on the host element
-<Host data-button-group={this.buttonGroupPosition}>
-  <button part="button">...</button>
-</Host>
-
-// CSS parts — exposes shadow internals for consumer styling
-<button part="button">
-  <span part="content">...</span>
-</button>
-// Consumer: cat-button::part(button) { ... }
-
-// Spread nativeAttributes — arbitrary passthrough to inner element
-<button {...this.nativeAttributes} data-test={this.testId}>
-
-// Dynamic class object
-class={{
-  'cat-button': true,
-  'cat-button-loading': this.loading,
-  [`cat-button-${this.variant}`]: Boolean(this.variant),
-}}
-
-// Conditional render — use null, not undefined
-{this.loading ? <cat-spinner /> : null}
-
-// Slot — renders consumer-provided content
-<slot></slot>
-```
-
-## SCSS conventions
-
-Every component SCSS starts with:
-
-```scss
-@use 'variables' as *;
-@use 'mixins' as *;
-```
-
-Token access:
-
-```scss
-// Color token
-outline: 2px solid cat-token('color.ui.border.focus');
-
-// Border radius
-border-radius: cat-border-radius('m');  // 'xs'|'s'|'m'|'l'|'xl'|'full'|0
-
-// Typography — never hardcode font-size or line-height
-@include cat-body('m');
-@include cat-head('l');
-
-// Transition
-transition: color cat-token('time.transition.s') linear;
-```
-
-`:host` rules:
-
-```scss
-:host {
-  display: inline-block;  // or block, flex — whatever the component needs
-}
-
-:host([hidden]) {
-  display: none;  // always present
-}
-```
-
-## Shadow DOM utilities
-
-| utility | why | when |
-|---|---|---|
-| `findClosest(selector, el)` from `core/src/utils/find-closest` | `el.closest()` stops at shadow boundaries | Finding ancestor elements (e.g. parent `<form>`) |
-| `shadow: { delegatesFocus: true }` | Focus on host delegates to first focusable element in shadow root | All interactive components |
-| `event.composedPath()` | `event.target` is retargeted at shadow boundaries | Outside-click detection, drag-drop |
-| Slot detection in `componentWillRender` | Slots can't be queried inside shadow root synchronously | `this.hostElement.hasChildNodes()` to detect slotted content |
-| Manual `tabIndex` in `render()` | Host must stay in tab order when `delegatesFocus` is used | `this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) \|\| 0` |
-
-## Three test files
-
-**`cat-<name>.spec.tsx`** — unit test, JSDOM, no browser needed.
-Tests shadow DOM render output for default state and key prop combinations.
-
-```typescript
-import { describe, it, expect } from 'vitest';
-import { render } from '@stencil/vitest';
-import { h } from '@stencil/core';
-import './cat-<name>';
-
-describe('cat-<name>', () => {
-  it('renders', async () => {
-    const { root } = await render(<cat-<name> />);
-    await expect(root.shadowRoot).toEqualHtml(`...`);
-  });
-});
-```
-
-**`cat-<name>.e2e.tsx`** — integration test, real browser (Playwright).
-Tests hydration and user interactions.
-
-```typescript
-import { describe, it, expect } from 'vitest';
-import { render, h } from '@stencil/vitest';
-
-describe('cat-<name>', () => {
-  it('renders', async () => {
-    const { root } = await render(<cat-<name> />);
-    await expect.element(root).toHaveClass('hydrated');
-  });
-});
-```
-
-**`cat-<name>.screenshot.tsx`** — visual regression, real browser (Playwright).
-Tests all meaningful visual states. PNG baselines committed to `__screenshots__/`
-as both `-darwin` and `-linux` variants.
-
-```typescript
-import { describe, it, expect, afterEach } from 'vitest';
-import { render, h } from '@stencil/vitest';
-import { page } from '@vitest/browser/context';
-
-describe('cat-<name>', () => {
-  afterEach(async () => {
-    await page.elementLocator(document.body).hover(); // reset hover state
-  });
-
-  it('default', async () => {
-    const { root } = await render(
-      <div style={{ padding: '10px', display: 'inline-block' }}>
-        <cat-<name> />
-      </div>
-    );
-    await expect(root).toMatchScreenshot();
-  });
-});
-```
-
-Always wrap in `<div style={{ padding: '10px', display: 'inline-block' }}>`.
-Always reset hover state in `afterEach`.
-Use `it.each` for variant × color × state matrices.
diff --git a/.agents/skills/catalyst-onboarding/GLOSSARY.md b/.agents/skills/catalyst-onboarding/GLOSSARY.md
deleted file mode 100644
index b78341e1..00000000
--- a/.agents/skills/catalyst-onboarding/GLOSSARY.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# Glossary
-
-**`@haiilo/catalyst`** — the core npm package. Contains all Stencil web
-components. Source of truth for component logic and markup.
-
-**`@haiilo/catalyst-tokens`** — the tokens npm package. Style Dictionary source
-compiled into CSS custom properties, SCSS variables, JSON, and JS exports.
-
-**`cat-*`** — the tag name prefix for all Catalyst web components
-(`cat-button`, `cat-input`, etc.).
-
-**`cssProp`** — a Catalyst custom extension to the W3C design token format.
-Marks a token as themeable and sets the CSS custom property name consumers
-can override at runtime (e.g. `"cssProp": "primary-bg"` → `--cat-primary-bg`).
-See TOKENS.md for the full theming mechanism.
-
-**`delegatesFocus`** — `shadow: { delegatesFocus: true }` in `@Component`.
-Makes focus on the host element automatically delegate to the first focusable
-element inside the shadow root. Required on all interactive components.
-
-**`findClosest(selector, el)`** — utility in `core/src/utils/find-closest`.
-Like `el.closest()` but traverses shadow boundaries. Use instead of native
-`closest()` whenever searching for an ancestor from inside a shadow root.
-
-**`hostElement`** — the conventional name for `@Element() hostElement!: HTMLElement`.
-The ref to the outer custom element in the DOM.
-
-**`nativeAttributes`** — standard prop (`{ [key: string]: string }`) spread
-onto the native inner element. Lets consumers pass arbitrary HTML attributes
-without requiring a dedicated prop for each one.
-
-**`proxies.ts`** — auto-generated Angular wrapper file at
-`angular/projects/catalyst/src/lib/directives/proxies.ts`. Regenerated on
-every `pnpm run build:core`. Never edit by hand.
-
-**`release-please`** — Google OSS tool that automates versioning and changelog
-generation from conventional commit messages. All five Catalyst packages version
-together (linked-versions plugin).
-
-**Shadow DOM** — browser-native encapsulation for web components. Styles and
-DOM inside a shadow root are isolated from the page. Catalyst components always
-use `shadow: true`.
-
-**Style Dictionary** — Amazon OSS token pipeline tool. Reads the token source
-JSON in `tokens/src/` and compiles it into CSS, SCSS, JS, and JSON outputs.
-
-**`testId`** — standard prop (`string | undefined`) on every interactive
-component. Rendered as `data-test` on the native inner element for test selectors.
diff --git a/.agents/skills/catalyst-onboarding/PR-REVIEW.md b/.agents/skills/catalyst-onboarding/PR-REVIEW.md
deleted file mode 100644
index 361e1dba..00000000
--- a/.agents/skills/catalyst-onboarding/PR-REVIEW.md
+++ /dev/null
@@ -1,88 +0,0 @@
-# Catalyst PR Review
-
-## What CI catches (you don't need to check)
-
-| job | what it runs | what it catches |
-|---|---|---|
-| build | `build:tokens` → `build:core` | Type errors, broken imports, SCSS compile failures |
-| lint | prettier, ESLint, stylelint | Formatting drift, ESLint violations, SCSS violations |
-| test | spec, screenshot, e2e | HTML regression, visual regression, interaction regression |
-
-**Note:** commitlint runs as a Husky pre-commit hook, not in CI. A contributor
-who used `--no-verify` bypasses it. Always check commit messages on PRs from
-external contributors.
-
----
-
-## Checklist (human review)
-
-**Commit message**
-- [ ] Format: `type(scope): description`
-- [ ] Scope is one of: `core` `angular` `angular-formly` `react` `tokens` `release`
-- [ ] `feat(core)` triggers a minor bump across all five packages — confirm scope is intentional
-
-```
-✓  feat(core): add clearable prop to cat-input
-✗  feat(cat-input): add prop     — component name is not a valid scope
-✗  fix: typo in readme            — missing scope
-```
-
-**Props**
-- [ ] Booleans default to `false`, not `undefined`: `disabled = false` not `disabled?: boolean`
-- [ ] String unions use established scales only — no invented size or color names
-  - sizes: `'xs' | 's' | 'm' | 'l' | 'xl'`
-  - colors: `'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'`
-- [ ] Multi-word props are camelCase: `iconOnly`, `labelHidden`
-- [ ] Every `@Prop()` has a JSDoc comment
-- [ ] Deprecated props have `@deprecated reason. Use X instead.` in JSDoc — never removed
-
-**Events**
-- [ ] All events prefixed `cat`: `catClick`, `catChange`, `catFocus`, `catBlur`
-- [ ] Payload typed to the event: `EventEmitter<FocusEvent>`, `EventEmitter<MouseEvent>`
-- [ ] Value-change events carry the value type: `EventEmitter<string>` not `EventEmitter<Event>`
-- [ ] Definite assignment: `catChange!: EventEmitter<string>`
-
-**Methods**
-- [ ] Native wraps use `do` prefix: `doFocus()`, `doBlur()`, `doClick()`
-- [ ] JSDoc on `do*` methods says "Use this instead of calling `.focus()` directly"
-- [ ] State transitions have no prefix: `open()`, `close()`, `clear()`
-- [ ] All `@Method()` are `async` and return `Promise<void>`
-
-**Boilerplate — every interactive component**
-- [ ] Has `testId?: string` prop — applied as `data-test` on the native inner element
-- [ ] Has `nativeAttributes?: { [key: string]: string }` prop — spread on the native inner element
-
-**CSS parts**
-- [ ] Every part declared in component JSDoc: `@part button - The native button element.`
-- [ ] Every declared part applied in render: `part="button"`
-- [ ] Parts cover: native interactive element, visible sub-regions (label, prefix, suffix, content)
-- [ ] Parts do NOT expose: internal layout wrappers, state-only elements
-
-**SCSS**
-- [ ] Starts with `@use 'variables' as *;` and `@use 'mixins' as *;`
-- [ ] No hardcoded color hex or `rgb()` — all via `cat-token('color.*')`
-- [ ] No raw `font-size` / `line-height` — use `@include cat-body()` / `@include cat-head()`
-- [ ] No hardcoded `border-radius` px/rem — use `cat-border-radius()` (exception: `10rem` for pill)
-- [ ] Vendor-prefix blocks wrapped in `/* stylelint-disable/enable property-no-vendor-prefix */`
-- [ ] `:host` is the top-level layout selector — no wrapping div for host layout
-- [ ] `:host([hidden]) { display: none; }` present
-
-Token access patterns — three forms, all valid:
-```scss
-// 1. Standard
-outline: 2px solid cat-token('color.ui.border.focus');
-// 2. Raw RGB triplet for CSS custom property chain
---my-color: #{cat-token('color.ui.border.dark', $wrap: false)};
-// 3. Re-wrap at consumption point
-background: cat-token-wrap(var(--my-color));
-```
-
-**Tests**
-- [ ] New prop with render impact → spec test added
-- [ ] New interaction (focus, value, event) → e2e test added
-- [ ] New visual variant or state → screenshot test added and baselines committed
-
-**Shadow DOM**
-- [ ] Ancestor traversal uses `findClosest(selector, el)` from `core/src/utils/find-closest` — not `el.closest()`
-- [ ] Outside-click / inside detection uses `event.composedPath()` — not `event.target`
-- [ ] Any component wrapping a focusable element uses `shadow: { delegatesFocus: true }`
diff --git a/.agents/skills/catalyst-onboarding/REPO-STRUCTURE.md b/.agents/skills/catalyst-onboarding/REPO-STRUCTURE.md
deleted file mode 100644
index ffa06612..00000000
--- a/.agents/skills/catalyst-onboarding/REPO-STRUCTURE.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# Catalyst Repo Structure & Package Map
-
-## The five packages
-
-| npm name | directory | what it is |
-|---|---|---|
-| `@haiilo/catalyst-tokens` | `tokens/` | Style Dictionary source → CSS custom properties, SCSS vars, JSON, JS exports |
-| `@haiilo/catalyst` | `core/` | Stencil web components — source of truth for all component logic and markup |
-| `@haiilo/catalyst-angular` | `angular/projects/catalyst/` | Angular wrappers — auto-generated by Stencil's angular-output-target during core build |
-| `@haiilo/catalyst-angular-formly` | `angular/projects/catalyst-formly/` | ngx-formly field types for Catalyst components |
-| `@haiilo/catalyst-react` | `react/` | React wrappers — auto-generated by Stencil's react-output-target during core build |
-
-## Dependency graph
-
-Build order is strict. `core` must be built before Angular or React wrappers
-because Stencil's build writes the wrapper source files.
-
-```
-tokens/
-  └─→ core/                    (consumes token SCSS variables)
-        ├─→ angular/            (proxies.ts auto-generated by stencil build)
-        │     └─→ angular-formly/
-        └─→ react/              (stencil-generated/index.ts auto-generated)
-```
-
-## Auto-generated files — never edit by hand
-
-```
-angular/projects/catalyst/src/lib/directives/proxies.ts
-react/src/components/stencil-generated/index.ts
-```
-
-Both are regenerated on every `pnpm run build:core`. Edits will be overwritten.
-
-Every `@Prop()`, `@Event()`, and `@Method()` in a Stencil component
-automatically becomes an Angular `@Input()` / `@Output()` and a React prop —
-no manual wiring required.
-
-## Key build commands
-
-| command | what it does |
-|---|---|
-| `pnpm run build` | Full pipeline: tokens → core → angular → angular-formly → react |
-| `pnpm run build:tokens` | Tokens only |
-| `pnpm run build:core` | Core only — also regenerates Angular and React proxy files |
-| `pnpm --filter @haiilo/catalyst run start` | Stencil dev server with hot reload at `localhost:3333` |
-| `pnpm --filter @haiilo/catalyst run test` | Unit tests (Vitest, no browser) |
-| `pnpm --filter @haiilo/catalyst run test:screenshot` | Visual regression (Playwright + pixelmatch) |
diff --git a/.agents/skills/catalyst-onboarding/SKILL.md b/.agents/skills/catalyst-onboarding/SKILL.md
deleted file mode 100644
index 915afe55..00000000
--- a/.agents/skills/catalyst-onboarding/SKILL.md
+++ /dev/null
@@ -1,71 +0,0 @@
----
-name: catalyst-onboarding
-description: >
-  Use when orienting to the Catalyst repo, when a contributor asks where to
-  start or where to find something, or when mapping unfamiliar territory before
-  doing work in components, tokens, or review.
----
-
-# Catalyst Onboarding
-
-The **map**: what exists and where to look.
-
-## On load
-
-Read the user's message and branch:
-
-**No clear goal, or "getting started", or "I'm new"** → give this opening,
-then ask what to dive into first:
-
-> Catalyst is a design system monorepo — five published packages (tokens, core
-> web components, Angular bindings, Angular Formly, React bindings) that all
-> version together. Everything flows from one place: the Stencil components in
-> `core/` consume tokens from `tokens/`, and the Angular/React wrappers are
-> auto-generated from core on every build.
->
-> To work here confidently you need four things: how the repo is structured,
-> how components are built, how to review a PR, and how the token system works.
-> I have a guide for each. Want to start at the beginning (repo structure), or
-> is there something specific you're trying to do?
-
-**Specific goal stated** (e.g. "I want to review a PR", "how do tokens work",
-"I need to add a component") → skip the intro, go straight to the knowledge
-map below and load the relevant file.
-
----
-
-**New contributor starting from zero** → work through the Orientation path
-below in order.
-
-**Looking up a specific topic** → jump to the Knowledge map.
-
----
-
-## Orientation path
-
-| Step | Read | You can work independently when you can… |
-|---|---|---|
-| 1 | [REPO-STRUCTURE.md](REPO-STRUCTURE.md) | Name all 5 packages, their directories, build order, and which generated files must never be edited |
-| 2 | [COMPONENT-ANATOMY.md](COMPONENT-ANATOMY.md) | Read any `cat-*.tsx` and explain every decorator, the SCSS conventions, and the purpose of all three test file types |
-| 3 | [PR-REVIEW.md](PR-REVIEW.md) | Run through the full PR checklist unaided |
-| 4 | [TOKENS.md](TOKENS.md) | Trace a token from source JSON to a `cat-token()` call in SCSS, and explain how a consumer overrides a theme color at runtime |
-
-**Ready to build?** Load the `catalyst-component-development` skill — it walks through the full implementation contract step by step.
-
-**Setup** — before or alongside Step 1: install Node 20+ (use `.nvmrc`), install
-pnpm 9+ (`npm install -g pnpm@9`), then run `pnpm install` from the repo root.
-
----
-
-## Knowledge map
-
-| Topic | Go to |
-|---|---|
-| Packages, build order, generated files | [REPO-STRUCTURE.md](REPO-STRUCTURE.md) |
-| Component decorators, lifecycle, naming, tests | [COMPONENT-ANATOMY.md](COMPONENT-ANATOMY.md) |
-| PR review checklist, commit message rules | [PR-REVIEW.md](PR-REVIEW.md) |
-| Token source structure, `cat-token()`, theming | [TOKENS.md](TOKENS.md) |
-| Creating or modifying a component end-to-end | `catalyst-component-development` skill |
-| CI workflows, local checks | [REPO-STRUCTURE.md](REPO-STRUCTURE.md) → Key build commands |
-| Troubleshooting | [TROUBLESHOOTING.md](TROUBLESHOOTING.md) |
-| Term definitions | [GLOSSARY.md](GLOSSARY.md) |
diff --git a/.agents/skills/catalyst-onboarding/TOKENS.md b/.agents/skills/catalyst-onboarding/TOKENS.md
deleted file mode 100644
index aa2a82b4..00000000
--- a/.agents/skills/catalyst-onboarding/TOKENS.md
+++ /dev/null
@@ -1,181 +0,0 @@
-# Catalyst Design Token System
-
-## Source file structure
-
-The token source is a directory tree of JSON files that Style Dictionary merges
-at build time via `source: ['src/**/*.json']`.
-
-```
-tokens/src/
-├── color/
-│   ├── base.json       ← Layer 1: primitive palette (raw hex values)
-│   ├── theme.json      ← Layer 2: semantic role colors (primary, danger, …)
-│   └── ui.json         ← Layer 3: UI-specific semantics (background, border, font)
-├── size/
-│   ├── border.json     ← Border radius scale
-│   ├── font.json       ← Font sizes + line heights
-│   └── spacing.json    ← Spacing scale
-├── font.json           ← Font family, weight, decoration
-├── opacity.json        ← Opacity values
-├── time.json           ← Animation durations and transitions
-└── z-index.json        ← Z-index values
-```
-
-The top-level JSON key becomes the first segment of the token path. A token at
-`color/base.json` → `color.base.brand.400` is accessed as
-`cat-token('color.base.brand.400')`.
-
-## The three color layers
-
-```
-LAYER 1 — Primitives  (color.base.*)
-  color.base.brand.400  = #008194   ← raw hex, no semantic meaning
-
-        ↓ referenced by
-
-LAYER 2 — Theme semantics  (color.theme.*)
-  color.theme.primary.bg   → color.base.brand.400
-  color.theme.danger.bg    → color.base.red.400
-
-        ↓ referenced by
-
-LAYER 3 — UI semantics  (color.ui.*)
-  color.ui.background.canvas  → color.base.neutral.100
-  color.ui.border.default     → color.base.neutral.200
-```
-
-**Three rules:**
-1. Layer 1 never references anything — only raw values
-2. Layers 2 and 3 reference Layer 1 only — never each other
-3. Component SCSS always consumes Layer 2 or 3 — never Layer 1 directly
-
-**Flag in PR review:** `cat-token('color.base.*')` in a component SCSS file is
-reaching past the semantic layer. Correct paths are `color.theme.*` or `color.ui.*`.
-
-## Token value formats
-
-**Form 1 — Primitive:**
-```json
-{ "$type": "color", "$value": "#008194" }
-```
-
-**Form 2 — Reference (alias):**
-```json
-{ "$type": "color", "$value": "{color.base.brand.400}" }
-```
-
-**Form 3 — Themeable reference (with `cssProp`):**
-```json
-{
-  "$type": "color",
-  "$value": { "value": "{color.base.brand.400}" },
-  "cssProp": "primary-bg"
-}
-```
-
-`cssProp` is a Catalyst custom extension. It marks a token as themeable and
-controls the CSS custom property name consumers can override.
-
-## Build pipeline
-
-`pnpm run build:tokens` runs Style Dictionary and produces seven outputs:
-
-| output | format | used by |
-|---|---|---|
-| `dist/css/variables.css` | CSS custom properties, colors as R,G,B triplets | browser consumers |
-| `dist/css/variables-hex.css` | CSS custom properties, colors as hex | design tools |
-| `dist/scss/_variables.scss` | SCSS variables + `$tokens` map | `core/` components |
-| `dist/js/variables.js` / `.d.ts` | ES module + TypeScript declarations | JS/TS consumers |
-
-**Why colors are R,G,B triplets in CSS:**
-
-```css
-:root {
-  --cat-color-theme-primary-bg: 0, 129, 148;
-}
-```
-
-This allows alpha composition without repeating the color:
-```css
-background: rgba(var(--cat-color-theme-primary-bg), 0.2);
-```
-
-## Consuming tokens in SCSS
-
-Every component SCSS starts with:
-```scss
-@use 'variables' as *;
-@use 'mixins' as *;
-```
-
-**`cat-token($key)` — primary accessor:**
-
-```scss
-// Color token → rgb(var(--cat-*, r, g, b))
-background-color: cat-token('color.ui.background.canvas');
-
-// With alpha → rgba(var(--cat-*, r, g, b), 0.2)
-background-color: cat-token('color.theme.primary.bg', 0.2);
-
-// Raw RGB triplet (for CSS custom property chains)
---my-color: #{cat-token('color.ui.border.dark', $wrap: false)};
-background: cat-token-wrap(var(--my-color));
-
-// Non-color token — returns value directly
-transition-duration: cat-token('time.transition.s');  // → 125ms
-font-size: cat-token('size.font.body.m');
-```
-
-**`cat-border-radius($size)` — shorthand:**
-
-```scss
-border-radius: cat-border-radius('s');    // small
-border-radius: cat-border-radius('m');    // medium
-border-radius: cat-border-radius('full'); // → 100rem (pill)
-border-radius: cat-border-radius(0);      // → 0 (square)
-```
-
-Always use this over the raw `cat-token('size.border.radius.*')` path.
-
-**Typography mixins — never hardcode font-size or line-height:**
-
-```scss
-@include cat-body('m');   // body text medium — sets font-size + line-height together
-@include cat-body('s');   // body text small
-@include cat-head('l');   // heading large
-```
-
-## Theming
-
-Theming is CSS custom property overrides. No JavaScript, no theme provider, no
-class switching.
-
-A Form 3 token with `"cssProp": "primary-bg"` emits this SCSS variable:
-
-```scss
-$cat-color-theme-primary-bg: var(--cat-primary-bg, 0, 129, 148) !default;
-```
-
-The `--cat-primary-bg` slot is the override. Any ancestor element can set it:
-
-```css
-/* Consumer app — override primary color per tenant */
-.tenant-a {
-  --cat-primary-bg: 91, 94, 219;
-}
-```
-
-All components using `cat-token('color.theme.primary.bg')` pick up the override
-automatically — no component code changes needed.
-
-## After changing tokens
-
-Any token change requires a dual build before the change is visible in components:
-
-```bash
-pnpm run build:tokens   # regenerates dist/scss/_variables.scss
-pnpm run build:core     # picks up the new variables
-```
-
-Skipping the dual build is the most common token-related mistake. Flag it in
-PR review if the token source changed but `build:tokens` wasn't run.
diff --git a/.agents/skills/catalyst-onboarding/TROUBLESHOOTING.md b/.agents/skills/catalyst-onboarding/TROUBLESHOOTING.md
deleted file mode 100644
index a9dd2559..00000000
--- a/.agents/skills/catalyst-onboarding/TROUBLESHOOTING.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# Troubleshooting
-
-## Build fails with "not found" or missing module error
-
-**Cause:** dependency build order violated.
-
-**Fix:** `pnpm run build` runs the full pipeline in correct order. If building
-selectively, follow the graph in REPO-STRUCTURE.md: tokens first, then core,
-then angular/react.
-
-## Screenshot test fails locally but passes in CI (or vice versa)
-
-**Cause:** macOS screenshots (`-darwin`) differ from Linux (`-linux`). Both
-variants are committed to `__screenshots__/`. CI uses the Linux baseline.
-
-**Fix:** if the difference is intentional, update the correct baseline:
-- Local (macOS): `pnpm --filter @haiilo/catalyst run test:screenshot:update`
-- CI (Linux): trigger the "Update Screenshots" workflow on GitHub Actions
-
-If the difference is a bug, fix the component.
-
-## Commit hook rejects message
-
-**Cause:** message doesn't follow conventional commits format or uses an
-invalid scope.
-
-**Fix:**
-```bash
-git commit --amend -m "feat(core): correct description"
-```
-
-Valid scopes: `core` `angular` `angular-formly` `react` `tokens` `release`
-
-## Token change not reflected in component styles
-
-**Cause:** `build:tokens` was run but `build:core` was not. Core picks up new
-token variables only when rebuilt.
-
-**Fix:**
-```bash
-pnpm run build:tokens
-pnpm run build:core
-```
-
-## `pnpm install` fails or packages not found
-
-**Cause:** wrong Node or pnpm version.
-
-**Fix:** check `.nvmrc` for the required Node version (`nvm use`), and ensure
-pnpm 9+ is installed (`pnpm --version`).
diff --git a/.agents/skills/catalyst-pr-review/CHECKLIST.md b/.agents/skills/catalyst-pr-review/CHECKLIST.md
deleted file mode 100644
index 7eba79ef..00000000
--- a/.agents/skills/catalyst-pr-review/CHECKLIST.md
+++ /dev/null
@@ -1,85 +0,0 @@
-# PR Review Checklist
-
-## Commit message
-
-- [ ] Format: `type(scope): description`
-- [ ] Scope is one of: `core` `angular` `angular-formly` `react` `tokens` `release`
-- [ ] `feat(core)` triggers a minor bump across all five packages — confirm scope is intentional
-
-```
-✓  feat(core): add clearable prop to cat-input
-✗  feat(cat-input): add prop      — component name is not a valid scope
-✗  fix: typo in readme             — missing scope
-```
-
-## Props
-
-- [ ] Booleans default to `false`, not `undefined`: `disabled = false` not `disabled?: boolean`
-- [ ] String unions use established scales only — no invented size or color names
-  - sizes: `'xs' | 's' | 'm' | 'l' | 'xl'`
-  - colors: `'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'`
-- [ ] Multi-word props are camelCase: `iconOnly`, `labelHidden`
-- [ ] Every `@Prop()` has a JSDoc comment
-- [ ] Deprecated props have `@deprecated reason. Use X instead.` in JSDoc — never removed
-
-## Events
-
-- [ ] All events prefixed `cat`: `catClick`, `catChange`, `catFocus`, `catBlur`
-- [ ] Payload typed to the event: `EventEmitter<FocusEvent>`, `EventEmitter<MouseEvent>`
-- [ ] Value-change events carry the value type: `EventEmitter<string>` not `EventEmitter<Event>`
-- [ ] Definite assignment: `catChange!: EventEmitter<string>`
-
-## Methods
-
-- [ ] Native wraps use `do` prefix: `doFocus()`, `doBlur()`, `doClick()`
-- [ ] JSDoc on `do*` methods says "Use this instead of calling `.focus()` directly"
-- [ ] State transitions have no prefix: `open()`, `close()`, `clear()`
-- [ ] All `@Method()` are `async` and return `Promise<void>`
-
-## Boilerplate
-
-Every interactive component must have:
-
-- [ ] `@Element() el!: HTMLElement`
-- [ ] `testId?: string` prop — applied as `data-test` on the native inner element
-- [ ] `nativeAttributes?: { [key: string]: string }` prop — spread on the native inner element
-
-## CSS parts
-
-- [ ] Every part declared in component JSDoc: `@part button - The native button element.`
-- [ ] Every declared part applied in render: `part="button"`
-- [ ] Parts cover: native interactive element, visible sub-regions (label, prefix, suffix, content)
-- [ ] Parts do NOT expose: internal layout wrappers, state-only elements
-
-## SCSS
-
-- [ ] Starts with `@use 'variables' as *;` and `@use 'mixins' as *;`
-- [ ] No hardcoded color hex or `rgb()` — all via `cat-token('color.*')`
-- [ ] No raw `font-size` / `line-height` — use `@include cat-body()` / `@include cat-head()`
-- [ ] No hardcoded `border-radius` px/rem — use `cat-border-radius()` (exception: `10rem` for pill)
-- [ ] Vendor-prefix blocks wrapped in `/* stylelint-disable/enable property-no-vendor-prefix */`
-- [ ] `:host` is the top-level layout selector — no wrapping div for host layout
-- [ ] `:host([hidden]) { display: none; }` present
-
-Token access patterns — three forms, all valid:
-
-```scss
-// 1. Standard
-outline: 2px solid cat-token('color.ui.border.focus');
-// 2. Raw RGB triplet for CSS custom property chain
---my-color: #{cat-token('color.ui.border.dark', $wrap: false)};
-// 3. Re-wrap at consumption point
-background: cat-token-wrap(var(--my-color));
-```
-
-## Tests
-
-- [ ] New prop with render impact → spec test added
-- [ ] New interaction (focus, value, event) → e2e test added
-- [ ] New visual variant or state → screenshot test added and baselines committed
-
-## Shadow DOM
-
-- [ ] Ancestor traversal uses `findClosest(selector, el)` from `core/src/utils/find-closest` — not `el.closest()`
-- [ ] Outside-click / inside detection uses `event.composedPath()` — not `event.target`
-- [ ] Any component wrapping a focusable element uses `shadow: { delegatesFocus: true }`
diff --git a/.agents/skills/catalyst-pr-review/SKILL.md b/.agents/skills/catalyst-pr-review/SKILL.md
deleted file mode 100644
index d50e1152..00000000
--- a/.agents/skills/catalyst-pr-review/SKILL.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# Skill: catalyst-pr-review
-
-Act as a **reviewer**: confirm CI coverage, then apply the manual checklist exhaustively. Every item must be checked or explicitly marked N/A before the review is done.
-
-## Step 1 — Identify the PR and check CI
-
-Ask the user which PR to review if not already specified. Fetch the diff and CI status.
-
-All three CI jobs must be green. If any are red, report the failing job and ask the user whether to wait for a fix or proceed anyway — do not silently continue.
-
-| Job | Runs | Catches |
-|-----|------|---------|
-| build | `build:tokens` → `build:core` | Type errors, broken imports, SCSS compile failures |
-| lint | prettier, ESLint, stylelint | Formatting drift, lint violations |
-| test | spec, screenshot, e2e | HTML regression, visual regression, interaction regression |
-
-**Note:** commitlint runs as a Husky pre-commit hook, not in CI. A contributor who used `--no-verify` bypasses it — always check commit messages manually, especially on PRs from external contributors.
-
-Completion criterion: CI status confirmed; any red job surfaced and disposition agreed with user.
-
-## Step 2 — Manual checklist
-
-Work through every section in [CHECKLIST.md](CHECKLIST.md). Mark each item ✅ (pass), ❌ (fail — note the file/line), or N/A (not applicable — one-word reason).
-
-Collect all failures before writing the review so the author gets one complete pass, not a drip of comments.
-
-Completion criterion: every item marked, all ❌ failures documented with file and line.
-
-## Step 3 — Write the review
-
-- Lead with a one-sentence summary of what the PR does.
-- List every ❌ as a required change with file, line, and the specific rule it breaks.
-- List non-blocking observations as optional suggestions, clearly labelled.
-- If all items are ✅ or N/A, approve.
-
-Completion criterion: review drafted for the user to post.
diff --git a/.agents/skills/stenciljs-component-development/SKILL.md b/.agents/skills/stenciljs-component-development/SKILL.md
deleted file mode 100644
index 4765c44b..00000000
--- a/.agents/skills/stenciljs-component-development/SKILL.md
+++ /dev/null
@@ -1,866 +0,0 @@
----
-name: stenciljs-component-development
-description: Use when creating or modifying Stencil.js web components. Ensures components follow Stencil best practices, proper decorator usage, lifecycle methods, and TypeScript conventions.
-allowed-tools:
-  - Read
-  - Write
-  - Edit
-  - Bash
-  - Grep
-  - Glob
----
-
-# Stencil.js - Component Development
-
-Build scalable, enterprise-ready web components using Stencil.js with TypeScript and Web Component standards. Stencil components are framework-agnostic and can be distributed to React, Angular, Vue, and traditional web applications.
-
-## Key Concepts
-
-### Component Structure
-
-A Stencil component is a TypeScript class decorated with `@Component()`:
-
-```typescript
-import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';
-
-@Component({
-  tag: 'my-component',
-  styleUrl: 'my-component.css',
-  shadow: true,
-})
-export class MyComponent {
-  @Prop() name: string;
-  @State() isActive: boolean = false;
-  
-  render() {
-    return (
-      <div>
-        <p>Hello, {this.name}!</p>
-      </div>
-    );
-  }
-}
-```
-
-### Component Decorator Options
-
-```typescript
-@Component({
-  tag: 'my-component',              // Required: Custom element tag name (must contain hyphen)
-  styleUrl: 'my-component.css',     // Single stylesheet
-  styleUrls: {                      // Multiple stylesheets for different modes
-    ios: 'my-component.ios.css',
-    md: 'my-component.md.css'
-  },
-  shadow: true,                     // Use Shadow DOM (recommended)
-  scoped: false,                    // Scoped CSS without Shadow DOM
-  assetsDirs: ['assets'],           // Asset directories to copy
-  formAssociated: false,            // Form-associated custom element
-})
-```
-
-## Decorators
-
-### @Prop() - Component Properties
-
-Public properties exposed as attributes:
-
-```typescript
-// Basic prop
-@Prop() name: string;
-
-// With default value
-@Prop() size: 'small' | 'medium' | 'large' = 'medium';
-
-// Mutable prop (can be changed internally)
-@Prop({ mutable: true }) value: string;
-
-// Reflect to attribute (sync prop changes to DOM attribute)
-@Prop({ reflect: true }) active: boolean;
-
-// Attribute name different from property name
-@Prop({ attribute: 'data-id' }) dataId: string;
-```
-
-**Best Practices:**
-- Always type your props
-- Use JSDoc comments for public API documentation
-- Set sensible defaults when appropriate
-- Use `reflect: true` sparingly (performance cost)
-
-### @State() - Internal State
-
-Private state that triggers re-renders when changed:
-
-```typescript
-@State() isOpen: boolean = false;
-@State() items: string[] = [];
-
-// Updating state triggers re-render
-this.isOpen = true;
-```
-
-**Important:**
-- State is internal only, not exposed as attributes
-- Mutating arrays/objects directly won't trigger re-render
-- Use immutable patterns for complex state
-
-### @Watch() - Property Change Handlers
-
-Watch for prop or state changes:
-
-```typescript
-@Prop() value: string;
-
-@Watch('value')
-valueChanged(newValue: string, oldValue: string) {
-  console.log(`Value changed from ${oldValue} to ${newValue}`);
-  this.validateValue(newValue);
-}
-
-// Place @Watch() immediately after the prop it watches
-@Prop() swipeEnabled: boolean = true;
-
-@Watch('swipeEnabled')
-swipeEnabledChanged(newSwipeEnabled: boolean, oldSwipeEnabled: boolean) {
-  this.updateState();
-}
-```
-
-### @Event() - Custom Events
-
-Emit custom events:
-
-```typescript
-@Event() itemSelected: EventEmitter<string>;
-@Event() formSubmit: EventEmitter<{value: string}>;
-
-handleClick() {
-  this.itemSelected.emit('item-1');
-}
-```
-
-**Best Practices:**
-- Use descriptive event names
-- Type the event payload
-- Document event details with JSDoc
-
-### @Listen() - Event Listeners
-
-Listen to DOM events:
-
-```typescript
-@Listen('click')
-handleClick(event: MouseEvent) {
-  console.log('Component clicked', event);
-}
-
-@Listen('scroll', { target: 'window' })
-handleScroll(event: Event) {
-  console.log('Window scrolled');
-}
-
-@Listen('resize', { target: 'window', passive: true })
-handleResize() {
-  this.updateDimensions();
-}
-```
-
-### @Element() - Host Element Reference
-
-Reference to the host element:
-
-```typescript
-@Element() el: HTMLElement;
-
-componentDidLoad() {
-  console.log('Host element:', this.el);
-  this.el.classList.add('loaded');
-}
-```
-
-### @Method() - Public Methods
-
-Expose public async methods:
-
-```typescript
-@Method()
-async open(): Promise<void> {
-  this.isOpen = true;
-}
-
-@Method()
-async getValue(): Promise<string> {
-  return this.value;
-}
-```
-
-**Important:**
-- All public methods must be async
-- Document with JSDoc for public API
-
-## Lifecycle Methods
-
-Lifecycle methods in order of execution:
-
-```typescript
-export class MyComponent {
-  // 1. Called when component is connected to DOM (can be called multiple times)
-  connectedCallback() {
-    console.log('Component connected to DOM');
-  }
-
-  // 2. Called once before first render (good for async data loading)
-  componentWillLoad() {
-    console.log('Component will load');
-    // Can return Promise to delay first render
-  }
-
-  // 3. Called once after first render
-  componentDidLoad() {
-    console.log('Component loaded');
-  }
-
-  // 4. Called before every render (after first)
-  componentWillRender() {
-    console.log('Component will render');
-  }
-
-  // 5. Called after every render (after first)
-  componentDidRender() {
-    console.log('Component rendered');
-  }
-
-  // 6. Called when component will update (not on first render)
-  componentWillUpdate() {
-    console.log('Component will update');
-  }
-
-  // 7. Called after component updates (not on first render)
-  componentDidUpdate() {
-    console.log('Component updated');
-  }
-
-  // 8. Determine if component should re-render
-  componentShouldUpdate(newVal: any, oldVal: any, propName: string): boolean {
-    return newVal !== oldVal;
-  }
-
-  // 9. Called when disconnected from DOM (can be called multiple times)
-  disconnectedCallback() {
-    console.log('Component disconnected');
-  }
-}
-```
-
-**Lifecycle Best Practices:**
-- Use `componentWillLoad()` for async data fetching
-- Use `componentDidLoad()` for DOM manipulation
-- Use `connectedCallback()` for logic that runs every time element is attached
-- Clean up in `disconnectedCallback()` (remove listeners, clear timers)
-
-## JSX and Rendering
-
-### render() Method
-
-The `render()` method returns JSX:
-
-```typescript
-import { h } from '@stencil/core';
-
-render() {
-  return (
-    <div class="container">
-      <h1>Hello, {this.name}!</h1>
-      {this.isActive && <p>Active!</p>}
-      <button onClick={() => this.handleClick()}>
-        Click me
-      </button>
-    </div>
-  );
-}
-```
-
-### Host Element
-
-Use `<Host>` to set attributes on the host element:
-
-```typescript
-import { Host } from '@stencil/core';
-
-render() {
-  return (
-    <Host
-      class={{
-        'is-active': this.isActive,
-        'is-disabled': this.disabled
-      }}
-      aria-label={this.label}
-    >
-      <slot></slot>
-    </Host>
-  );
-}
-```
-
-### Slots
-
-Use slots for content projection:
-
-```typescript
-render() {
-  return (
-    <div>
-      <header>
-        <slot name="header"></slot>
-      </header>
-      <main>
-        <slot></slot>  {/* Default slot */}
-      </main>
-      <footer>
-        <slot name="footer"></slot>
-      </footer>
-    </div>
-  );
-}
-```
-
-### Conditional Rendering
-
-```typescript
-render() {
-  return (
-    <div>
-      {this.loading ? (
-        <div class="spinner">Loading...</div>
-      ) : (
-        <div class="content">{this.content}</div>
-      )}
-      
-      {this.error && <div class="error">{this.error}</div>}
-    </div>
-  );
-}
-```
-
-### Lists
-
-```typescript
-render() {
-  return (
-    <ul>
-      {this.items.map(item => (
-        <li key={item.id}>
-          {item.name}
-        </li>
-      ))}
-    </ul>
-  );
-}
-```
-
-## File Structure & Naming
-
-### Directory Structure
-
-One component per directory:
-
-```
-src/
-├── components/
-│   ├── my-button/
-│   │   ├── my-button.tsx          # Component implementation
-│   │   ├── my-button.css          # Styles
-│   │   ├── my-button.spec.ts      # Unit tests
-│   │   ├── my-button.e2e.ts       # E2E tests
-│   │   └── readme.md              # Component documentation
-│   ├── my-card/
-│   │   ├── my-card.tsx
-│   │   ├── my-card.ios.css        # iOS-specific styles
-│   │   ├── my-card.md.css         # Material Design styles
-│   │   └── my-card.css            # Base styles
-```
-
-### Naming Conventions
-
-- **Tag names**: kebab-case with hyphen (required): `my-component`, `app-header`
-- **Component class**: PascalCase: `MyComponent`, `AppHeader`
-- **File names**: Match tag name: `my-component.tsx`
-- **Props**: camelCase: `firstName`, `isActive`
-- **Events**: camelCase: `itemSelected`, `formSubmit`
-- **CSS classes**: kebab-case: `button-primary`, `is-active`
-
-## Code Organization
-
-Follow this order in component class:
-
-```typescript
-@Component({
-  tag: 'my-component',
-  styleUrl: 'my-component.css',
-  shadow: true,
-})
-export class MyComponent {
-  // 1. Own Properties (private, not decorated)
-  private internalValue: number;
-  someText = 'default';
-
-  // 2. Reference to host element
-  @Element() el: HTMLElement;
-
-  // 3. State() variables (alphabetical)
-  @State() isValidated: boolean;
-  @State() status = 0;
-
-  // 4. Public Property API - @Prop() (alphabetical)
-  @Prop() content: string;
-  @Prop() enabled: boolean;
-  @Prop() type = 'default';
-
-  // 5. Prop lifecycle events (@Watch) - immediately after related @Prop
-  @Prop() value: string;
-  
-  @Watch('value')
-  valueChanged(newValue: string, oldValue: string) {
-    this.validate(newValue);
-  }
-
-  // 6. Events section (alphabetical)
-  @Event() itemSelected: EventEmitter<string>;
-  @Event() statusChanged: EventEmitter<number>;
-
-  // 7. Component lifecycle events (in natural order)
-  connectedCallback() {}
-  disconnectedCallback() {}
-  componentWillLoad() {}
-  componentDidLoad() {}
-  componentShouldUpdate() {}
-  componentWillRender() {}
-  componentDidRender() {}
-  componentWillUpdate() {}
-  componentDidUpdate() {}
-
-  // 8. Listeners
-  @Listen('click')
-  onClick(event: MouseEvent) {
-    console.log('Clicked');
-  }
-
-  // 9. Public methods API (alphabetical)
-  @Method()
-  async open(): Promise<void> {
-    this.isOpen = true;
-  }
-
-  @Method()
-  async close(): Promise<void> {
-    this.isOpen = false;
-  }
-
-  // 10. Local methods (private business logic)
-  private validate(value: string): boolean {
-    return value.length > 0;
-  }
-
-  private updateState() {
-    // Internal logic
-  }
-
-  // 11. render() function (always last)
-  render() {
-    return (
-      <Host>
-        <div class="container">
-          <slot></slot>
-        </div>
-      </Host>
-    );
-  }
-}
-```
-
-## Best Practices
-
-### 1. Use TypeScript Strictly
-
-```typescript
-// Good - Fully typed
-@Prop() items: Array<{id: string; name: string}>;
-@State() count: number = 0;
-
-// Bad - Any types
-@Prop() items: any;
-@State() count;
-```
-
-### 2. Immutable State Updates
-
-```typescript
-// Bad - Direct mutation won't trigger re-render
-this.items.push(newItem);
-
-// Good - Create new array
-this.items = [...this.items, newItem];
-
-// Bad - Direct object mutation
-this.user.name = 'New Name';
-
-// Good - Create new object
-this.user = { ...this.user, name: 'New Name' };
-```
-
-### 3. Use Shadow DOM When Possible
-
-```typescript
-@Component({
-  tag: 'my-component',
-  styleUrl: 'my-component.css',
-  shadow: true,  // Encapsulation and style isolation
-})
-```
-
-### 4. Document Public API
-
-```typescript
-/**
- * The button component for user interactions
- */
-@Component({
-  tag: 'my-button',
-})
-export class MyButton {
-  /**
-   * The button label text
-   */
-  @Prop() label: string;
-
-  /**
-   * Emitted when the button is clicked
-   */
-  @Event() buttonClick: EventEmitter<void>;
-
-  /**
-   * Opens the button's associated menu
-   */
-  @Method()
-  async openMenu(): Promise<void> {
-    // ...
-  }
-}
-```
-
-### 5. Handle Async Operations Properly
-
-```typescript
-async componentWillLoad() {
-  try {
-    this.data = await this.fetchData();
-  } catch (error) {
-    console.error('Failed to load data:', error);
-    this.error = 'Failed to load';
-  }
-}
-```
-
-### 6. Clean Up Resources
-
-```typescript
-private intervalId: number;
-
-componentDidLoad() {
-  this.intervalId = window.setInterval(() => {
-    this.updateTime();
-  }, 1000);
-}
-
-disconnectedCallback() {
-  if (this.intervalId) {
-    clearInterval(this.intervalId);
-  }
-}
-```
-
-### 7. Use Functional Components for Simple Cases
-
-```typescript
-import { h, FunctionalComponent } from '@stencil/core';
-
-interface IconProps {
-  name: string;
-  size?: number;
-}
-
-export const Icon: FunctionalComponent<IconProps> = ({ name, size = 24 }) => (
-  <svg width={size} height={size}>
-    <use xlinkHref={`#icon-${name}`} />
-  </svg>
-);
-```
-
-## Anti-Patterns
-
-### ❌ Don't Mutate Props
-
-```typescript
-// Bad
-@Prop() value: string;
-
-handleChange() {
-  this.value = 'new value';  // Error if not mutable
-}
-
-// Good
-@Prop({ mutable: true }) value: string;
-// Or better: emit event and let parent handle
-@Event() valueChange: EventEmitter<string>;
-
-handleChange() {
-  this.valueChange.emit('new value');
-}
-```
-
-### ❌ Don't Use Constructor for Initialization
-
-```typescript
-// Bad
-constructor() {
-  this.data = this.fetchData();  // Won't work properly
-}
-
-// Good
-async componentWillLoad() {
-  this.data = await this.fetchData();
-}
-```
-
-### ❌ Don't Access DOM in render()
-
-```typescript
-// Bad
-render() {
-  const width = this.el.offsetWidth;  // Can cause issues
-  return <div style={{ width: `${width}px` }}></div>;
-}
-
-// Good
-componentDidLoad() {
-  this.width = this.el.offsetWidth;
-}
-
-render() {
-  return <div style={{ width: `${this.width}px` }}></div>;
-}
-```
-
-### ❌ Don't Forget Keys in Lists
-
-```typescript
-// Bad
-render() {
-  return (
-    <ul>
-      {this.items.map(item => <li>{item.name}</li>)}
-    </ul>
-  );
-}
-
-// Good
-render() {
-  return (
-    <ul>
-      {this.items.map(item => <li key={item.id}>{item.name}</li>)}
-    </ul>
-  );
-}
-```
-
-### ❌ Don't Use Arrow Functions in render() for Handlers
-
-```typescript
-// Bad - Creates new function on every render
-render() {
-  return <button onClick={() => this.handleClick()}>Click</button>;
-}
-
-// Good - Bind in class or use arrow function property
-private handleClick = () => {
-  console.log('Clicked');
-}
-
-render() {
-  return <button onClick={this.handleClick}>Click</button>;
-}
-```
-
-## Testing
-
-### Unit Tests
-
-```typescript
-import { newSpecPage } from '@stencil/core/testing';
-import { MyComponent } from './my-component';
-
-describe('my-component', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [MyComponent],
-      html: `<my-component></my-component>`,
-    });
-    expect(page.root).toEqualHtml(`
-      <my-component>
-        <mock:shadow-root>
-          <div>
-            Hello, World!
-          </div>
-        </mock:shadow-root>
-      </my-component>
-    `);
-  });
-
-  it('renders with props', async () => {
-    const page = await newSpecPage({
-      components: [MyComponent],
-      html: `<my-component name="Stencil"></my-component>`,
-    });
-    expect(page.root).toEqualHtml(`
-      <my-component name="Stencil">
-        <mock:shadow-root>
-          <div>
-            Hello, Stencil!
-          </div>
-        </mock:shadow-root>
-      </my-component>
-    `);
-  });
-});
-```
-
-### E2E Tests
-
-```typescript
-import { newE2EPage } from '@stencil/core/testing';
-
-describe('my-component', () => {
-  it('renders', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<my-component></my-component>');
-    
-    const element = await page.find('my-component');
-    expect(element).toHaveClass('hydrated');
-  });
-
-  it('emits event on click', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<my-component></my-component>');
-    
-    const itemSelected = await page.spyOnEvent('itemSelected');
-    const button = await page.find('my-component >>> button');
-    await button.click();
-    
-    expect(itemSelected).toHaveReceivedEvent();
-  });
-});
-```
-
-## Common Patterns
-
-### Form-Associated Components
-
-```typescript
-@Component({
-  tag: 'my-input',
-  formAssociated: true,
-})
-export class MyInput {
-  @Element() el: HTMLElement;
-  
-  private internals: ElementInternals;
-
-  componentWillLoad() {
-    this.internals = (this.el as any).attachInternals();
-  }
-
-  @Prop() value: string = '';
-  
-  @Watch('value')
-  valueChanged(newValue: string) {
-    this.internals.setFormValue(newValue);
-  }
-}
-```
-
-### Loading States
-
-```typescript
-@State() loading: boolean = false;
-@State() error: string | null = null;
-@State() data: any = null;
-
-async componentWillLoad() {
-  await this.loadData();
-}
-
-private async loadData() {
-  this.loading = true;
-  this.error = null;
-  
-  try {
-    this.data = await fetch('/api/data').then(r => r.json());
-  } catch (e) {
-    this.error = 'Failed to load data';
-  } finally {
-    this.loading = false;
-  }
-}
-
-render() {
-  if (this.loading) return <div>Loading...</div>;
-  if (this.error) return <div class="error">{this.error}</div>;
-  return <div>{JSON.stringify(this.data)}</div>;
-}
-```
-
-### Controlled vs Uncontrolled
-
-```typescript
-// Controlled - value managed by parent
-@Prop() value: string;
-@Event() valueChange: EventEmitter<string>;
-
-handleInput(event: Event) {
-  const value = (event.target as HTMLInputElement).value;
-  this.valueChange.emit(value);
-}
-
-render() {
-  return <input value={this.value} onInput={e => this.handleInput(e)} />;
-}
-
-// Uncontrolled - internal state
-@State() internalValue: string = '';
-
-handleInput(event: Event) {
-  this.internalValue = (event.target as HTMLInputElement).value;
-}
-
-render() {
-  return <input value={this.internalValue} onInput={e => this.handleInput(e)} />;
-}
-```
-
-## Performance Tips
-
-1. **Use `componentShouldUpdate()` to prevent unnecessary renders**
-2. **Avoid complex computations in render()**
-3. **Use `memoize` for expensive calculations**
-4. **Lazy load components with `import()`**
-5. **Use Shadow DOM for style encapsulation**
-6. **Minimize prop changes from parent**
-7. **Use event delegation for lists**
-
-## Related Resources
-
-- [Stencil.js Official Documentation](https://stenciljs.com/docs/introduction)
-- [Stencil Component API](https://stenciljs.com/docs/api)
-- [Stencil Style Guide](https://stenciljs.com/docs/style-guide)
-- [Web Components Standards](https://developer.mozilla.org/en-US/docs/Web/Web_Components)

From 3a9930d6469518f0dcd7b0dd62d77bf6857ad3fd Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Thu, 13 Aug 2026 08:50:32 +0200
Subject: [PATCH 20/42] chore: remove agents instructions (to be introduced
 separately)

---
 AGENTS.md | 248 ------------------------------------------------------
 1 file changed, 248 deletions(-)
 delete mode 100644 AGENTS.md

diff --git a/AGENTS.md b/AGENTS.md
deleted file mode 100644
index 7693c260..00000000
--- a/AGENTS.md
+++ /dev/null
@@ -1,248 +0,0 @@
-# AGENTS.md
-
-Agent instructions for Catalyst Design System. This file complements package READMEs; use the closest nested `AGENTS.md` if one is added later.
-
-## Project overview
-
-Catalyst is a pnpm monorepo that publishes five related packages:
-
-| Directory                           | Package                           | Purpose                        |
-|-------------------------------------|-----------------------------------|--------------------------------|
-| `tokens/`                           | `@haiilo/catalyst-tokens`         | Style Dictionary design tokens |
-| `core/`                             | `@haiilo/catalyst`                | Stencil web components         |
-| `angular/`                          | `@haiilo/catalyst-angular`        | Angular bindings               |
-| `angular/projects/catalyst-formly/` | `@haiilo/catalyst-angular-formly` | Angular Formly types           |
-| `react/`                            | `@haiilo/catalyst-react`          | React bindings                 |
-
-Technology: TypeScript, Stencil, Angular, React, SCSS, Style Dictionary, Vitest, Playwright, pnpm, and GitHub Actions. Build dependencies in this order:
-
-```text
-tokens -> core -> angular -> angular-formly
-tokens -> core -> react
-```
-
-## Repository skills
-
-Use these optional skills for deeper guidance when working in this repository:
-
-- `catalyst-onboarding` — orient to repository structure and package workflows.
-- `catalyst-component-development` — create or modify Catalyst components.
-- `catalyst-pr-review` — review changes against repository standards.
-- `stenciljs-component-development` — apply Stencil implementation patterns.
-
-Skill files live under `.agents/skills/`. Follow this file and package documentation when a skill is unavailable.
-
-## Repository navigation
-
-- Tokens: `tokens/src/`, `tokens/config.js`
-- Core components/utilities: `core/src/components/cat-*/`, `core/src/utils/`
-- Angular source/demos: `angular/projects/`
-- React bindings: `react/src/`
-- CI: `.github/workflows/`; releases: `release-please-config*.json`, `.release-please-manifest*.json`
-- Package documentation: each package's `README.md`
-
-Do not edit generated output under `dist/`, `core/loader/`, `core/www/`, or
-`.stencil/` unless a workflow explicitly requires it. Generated files are normally recreated by package scripts.
-
-## Setup
-
-Requirements are declared in the root `package.json`: Node `>=20`, pnpm `>=9`. CI uses the Node version in `.nvmrc` (`24`) and pnpm 9; use those versions locally.
-
-```bash
-nvm use
-pnpm --version
-pnpm install
-```
-
-Run commands from repository root unless a command says otherwise. Keep
-`pnpm-lock.yaml` synchronized with dependency changes. Do not use npm or Yarn for workspace installation.
-
-## Development commands
-
-### Build
-
-```bash
-pnpm run build                 # all packages, in dependency order
-pnpm run build:tokens
-pnpm run build:core
-pnpm run build:angular
-pnpm run build:angular-formly
-pnpm run build:react
-```
-
-Core development server and watch mode:
-
-```bash
-pnpm --filter @haiilo/catalyst run start
-pnpm --filter @haiilo/catalyst run build:watch
-```
-
-Angular development server and watch mode:
-
-```bash
-pnpm --filter @haiilo/catalyst-angular-workspace run start
-pnpm --filter @haiilo/catalyst-angular-workspace run watch
-```
-
-Build output is package-specific: tokens use `tokens/dist`, core uses
-`core/dist`, Angular uses `angular/dist`, and React uses `react/dist`.
-
-### Formatting and linting
-
-CI checks core with Prettier, ESLint, and Stylelint:
-
-```bash
-pnpm --filter @haiilo/catalyst run prettier:check
-pnpm --filter @haiilo/catalyst run lint
-pnpm --filter @haiilo/catalyst run lint:style
-```
-
-To format or autofix during development, use `prettier`, `lint -- --fix`, and
-`lint:style -- --fix` on the core filter. Angular exposes `prettier:check`.
-
-```bash
-pnpm --filter @haiilo/catalyst run prettier
-pnpm --filter @haiilo/catalyst run lint -- --fix
-pnpm --filter @haiilo/catalyst run lint:style -- --fix
-pnpm --filter @haiilo/catalyst-angular-workspace run prettier:check
-```
-
-Run the applicable formatter and linter after changes. Do not suppress lint rules without a repository-specific reason.
-
-## Testing
-
-### Core
-
-Core tests are configured in `core/vitest.config.mts`:
-
-- `*.spec.tsx`: Stencil/Vitest plugin tests
-- `*.e2e.tsx`: headless Chromium browser interaction tests
-- `*.screenshot.tsx`: headless Chromium visual regression tests
-
-```bash
-pnpm --filter @haiilo/catalyst run test
-pnpm --filter @haiilo/catalyst run test:e2e
-pnpm --filter @haiilo/catalyst run test:screenshot
-pnpm --filter @haiilo/catalyst run test:watch
-```
-
-Install browser dependencies when needed:
-
-```bash
-pnpm --dir core exec playwright install --with-deps
-```
-
-Run one test file or test name through Vitest from `core/`, for example:
-
-```bash
-pnpm --dir core exec vitest run src/components/cat-button/cat-button.spec.tsx
-pnpm --dir core exec vitest run -t "renders with disabled prop"
-```
-
-Screenshot references live in component `__screenshots__/` directories. Local macOS references end in `-darwin`; CI Linux references end in `-linux`. After an intentional visual change:
-
-```bash
-pnpm run test:screenshot:update
-```
-
-This updates local references. Use the manually triggered **Update Screenshots**
-workflow to regenerate Linux references. Do not update snapshots to hide an unexplained rendering or behavior regression.
-
-### Angular
-
-```bash
-pnpm --filter @haiilo/catalyst-angular-workspace run test
-pnpm --filter @haiilo/catalyst-angular-workspace run test:ci
-```
-
-`test:ci` runs both `catalyst` and `catalyst-formly` with ChromiumHeadless.
-
-### React and tokens
-
-React exposes build/type checking rather than a test script:
-
-```bash
-pnpm --filter @haiilo/catalyst-react run build
-pnpm --filter @haiilo/catalyst-react run tsc
-```
-
-Tokens are validated through their build:
-
-```bash
-pnpm run build:tokens
-```
-
-Always add or update tests for behavior changes. Keep component tests beside their implementation under `core/src/components/`.
-
-## Implementation conventions
-
-### Core components
-
-For a new or changed component, inspect a nearby component with similar behavior first. Keep implementation, styles, documentation, and applicable
-`*.spec.tsx`, `*.e2e.tsx`, and `*.screenshot.tsx` files together.
-
-Follow these project conventions:
-
-- Use `cat-*` tags and PascalCase class names.
-- Document public `@Prop`, `@Event`, and `@Method` APIs with JSDoc.
-- Boolean props have explicit `false` defaults.
-- Use camelCase for multi-word props and `cat` prefixes for custom events.
-- Type event payloads with `EventEmitter<T>` and definite assignment.
-- Public Stencil methods are asynchronous and return `Promise<void>`.
-- Use `delegatesFocus: true` for interactive shadow components where focus should enter the native control.
-- Use `findClosest` across shadow boundaries and `event.composedPath()` for retargeted events/outside-click handling.
-- Expose CSS parts only for meaningful public sub-elements; document each part in component JSDoc and apply its `part` attribute in render output.
-- Use `:host` for component layout and token/mixin helpers for colors, typography, radius, and transitions. Avoid hardcoded design values.
-- Use `@use 'variables' as *;` and `@use 'mixins' as *;` in component SCSS.
-
-Do not introduce `as any`, TypeScript ignore directives, empty catch blocks, placeholder implementations, or unrelated refactors.
-
-### Tokens and bindings
-
-- Add or update source tokens, then run `pnpm run build:tokens`.
-- Rebuild core after token changes: `pnpm run build:tokens && pnpm run build:core`.
-- Build Angular and Formly after core changes before testing consumers.
-- Build React after core changes; React depends on the workspace core package.
-- Do not hand-edit generated bindings or package `dist` output.
-
-## Git and pull requests
-
-- Work on a feature branch; do not commit directly to `main` or `beta`.
-- Never force-push shared branches or rewrite shared history.
-- Never commit secrets, `.env` files, generated credentials, or agent-tooling configuration directories.
-- Keep unrelated working-tree changes untouched.
-- Commit messages must use Conventional Commits with one of these scopes:
-  `angular`, `angular-formly`, `core`, `react`, `tokens`, or `release`.
-
-Examples:
-
-```text
-feat(core): add segmented control
-fix(angular): correct value accessor
-chore(tokens): update color token
-```
-
-Before opening a PR, run relevant build, tests, formatter, and linters.
-
-Address critical and major findings before requesting review. PR descriptions should explain why change is needed and mention visual, API, or generated-output.
-
-## CI and releases
-
-Workflows are path-sensitive. Core CI runs build, lint, unit, screenshot, and e2e checks. Angular CI builds tokens/core/bindings and runs Angular tests. React CI builds tokens/core/React. Tokens CI builds tokens and commits generated token output. Main-branch deployment publishes core documentation to GitHub Pages.
-
-Releases are managed by release-please on `main` (stable) and `beta`
-(prerelease), followed by automated npm publishing. Do not publish packages or modify release configuration unless explicitly requested.
-
-## Troubleshooting
-
-- **Workspace package not found:** run `pnpm install`, then rebuild in order:
-  `pnpm run build:tokens && pnpm run build:core`.
-- **Browser test cannot launch:** run the Playwright install command above.
-- **Screenshot mismatch:** inspect actual/diff artifacts before updating references; macOS and Linux references are intentionally separate.
-- **Angular consumer testing:** run the full build, then use packages from
-  `angular/dist/catalyst` or `angular/dist/catalyst-formly` as documented in the root README.
-- **Commit rejected:** check Conventional Commit type and allowed lowercase scope in `.commitlintrc.json`.
-
-## Documentation
-
-Read root/package `README.md` files for consumer setup and release details. Design documentation: https://design.haiilo.com

From 0bd61d4b6e7c659646a5ef93615b3507074de1ac Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Fri, 14 Aug 2026 13:46:34 +0200
Subject: [PATCH 21/42] chore: copy pr review skills for copilot

---
 .github/skills/code-review/CHECKLIST.md | 73 +++++++++++++++++++++++++
 .github/skills/code-review/SKILL.md     | 46 ++++++++++++++++
 2 files changed, 119 insertions(+)
 create mode 100644 .github/skills/code-review/CHECKLIST.md
 create mode 100644 .github/skills/code-review/SKILL.md

diff --git a/.github/skills/code-review/CHECKLIST.md b/.github/skills/code-review/CHECKLIST.md
new file mode 100644
index 00000000..9dc61263
--- /dev/null
+++ b/.github/skills/code-review/CHECKLIST.md
@@ -0,0 +1,73 @@
+# Catalyst Code Review Checklist
+
+Apply only sections relevant to changed paths. Mark every applicable rule ✅, ❌, or N/A with a reason.
+
+## Repository-wide
+
+- [ ] PR description explains user-facing or maintenance intent and scope.
+- [ ] Commit messages follow Conventional Commits. If a scope is present, it is one of `core`, `angular`, `angular-formly`, `react`, `tokens`, or `release`; scope is review policy, not enforced as required by current commitlint config.
+- [ ] Commit-message validation is absent from CI. Local commitlint runs from Husky's `commit-msg` hook and can be bypassed; inspect commits when relevant.
+- [ ] No secrets, credentials, `.env` files, or sensitive infrastructure information are added.
+- [ ] Dependency, lockfile, CI, release, deployment, or infrastructure changes are intentional, minimal, and documented. Escalate shared-infrastructure changes for platform review.
+- [ ] No generated output is hand-edited: `dist/`, `core/loader/`, `core/www/`, `.stencil/`, generated Angular proxies, or generated React bindings.
+
+## Tokens (`tokens/**`)
+
+- [ ] Token source follows existing design-token structure.
+- [ ] Token build output is regenerated and reviewed; affected Core consumers are rebuilt when token names or values change.
+- [ ] Token changes preserve consumer compatibility or include a deprecation/migration path.
+
+## Core public contract (`core/src/components/**`)
+
+- [ ] Public props, events, methods, slots, CSS parts, and form behavior remain backward compatible; removals or semantic changes include deprecation and migration guidance.
+- [ ] Public API changes regenerate and review `angular/projects/catalyst/src/lib/directives/proxies.ts` and `react/src/components/stencil-generated/index.ts`; Angular and React builds pass.
+- [ ] Changes to `cat-input`, `cat-textarea`, `cat-datepicker`, `cat-datepicker-inline`, `cat-checkbox`, `cat-toggle`, `cat-radio`, `cat-radio-group`, `cat-select`, or `cat-tag` preserve or deliberately update value-accessor bindings in `core/stencil.config.ts`.
+
+### Props, events, and methods
+
+- [ ] Boolean props use explicit `false` defaults when false is their default behavior.
+- [ ] Multi-word props are camelCase; string unions reuse established scales unless an intentional contract addition is documented.
+- [ ] Public `@Prop()`, `@Event()`, and `@Method()` members have accurate JSDoc.
+- [ ] Deprecated APIs remain available and their JSDoc gives actionable replacement or migration guidance.
+- [ ] Events use `cat` prefix and precise `EventEmitter<T>` payloads; value-change events emit their value type.
+- [ ] Native-element wrappers expose `doFocus`, `doBlur`, or `doClick` as appropriate; documentation directs consumers away from inner-element access.
+- [ ] Public `@Method()` members are asynchronous and return `Promise<void>` unless an established contract requires another return type.
+
+### Native controls and parts
+
+- [ ] Components wrapping a native control expose `@Element()`, `testId`, and `nativeAttributes` when an inner native element can receive them; `testId` maps to `data-test` and `nativeAttributes` is forwarded.
+- [ ] Component JSDoc declares every exposed CSS part; every declared part appears in render output.
+- [ ] Parts expose consumer-meaningful surfaces, not internal layout or state-only wrappers.
+
+### SCSS and Shadow DOM
+
+- [ ] Component SCSS uses established imports, token helpers, mixins, `:host` layout, and `:host([hidden]) { display: none; }` where applicable.
+- [ ] Colors, typography, radii, and transitions use existing token or mixin patterns. Hardcoded color values are rejected; token-backed CSS custom-property and RGB consumption is allowed.
+- [ ] Vendor-prefix exceptions use narrow paired Stylelint disable/enable comments.
+- [ ] Shadow-boundary ancestor traversal uses `findClosest`; outside-click detection uses `event.composedPath()`.
+- [ ] Focusable wrappers use `shadow: { delegatesFocus: true }` when this matches established component behavior.
+
+### Accessibility and tests
+
+- [ ] Keyboard behavior, focus movement/restoration, disabled behavior, labels, semantic roles, and ARIA state remain correct.
+- [ ] Render-affecting prop changes have spec coverage.
+- [ ] Interaction, focus, value, or event changes have e2e coverage.
+- [ ] Visual variants or state changes have screenshot coverage; baseline changes are intentional and reviewed.
+
+## Angular and Formly (`angular/**`)
+
+- [ ] Public Angular or Formly API changes preserve compatibility or include deprecation and migration guidance.
+- [ ] Changes are covered by relevant Angular or Formly tests and `build:angular` / `build:angular-formly` validation.
+- [ ] Generated Core proxies are not hand-edited.
+
+## React (`react/**`)
+
+- [ ] Public wrapper API changes preserve compatibility or include deprecation and migration guidance.
+- [ ] Generated Stencil bindings are not hand-edited.
+- [ ] React build passes; add targeted tests when test infrastructure exists or behavior changes warrant coverage.
+
+## Tooling and release
+
+- [ ] CI changes map correctly to affected paths and preserve required build order: tokens → core → Angular/Formly and tokens → core → React.
+- [ ] Public breaking changes are explicitly flagged with consumer migration path; linked release versions do not eliminate compatibility review.
+- [ ] Formatter, linter, builds, and relevant tests were run or CI status proves their applicable execution.
diff --git a/.github/skills/code-review/SKILL.md b/.github/skills/code-review/SKILL.md
new file mode 100644
index 00000000..d813d1de
--- /dev/null
+++ b/.github/skills/code-review/SKILL.md
@@ -0,0 +1,46 @@
+---
+name: code-review
+description: Review Catalyst pull requests. Use for pull request and code review, especially changes to Catalyst components, tokens, Angular, Angular Formly, React bindings, generated bindings, CI checks, or public API contracts.
+---
+
+# Catalyst Code Review
+
+The **gate**: approve only when every applicable check passes or is explicitly N/A. Report all blocking findings in one review.
+
+## Step 1 — Establish review context
+
+Use current pull request context. If unavailable, ask for its URL or number. Inspect the description, base and head commits, changed files, commits, existing review threads, and check runs.
+
+Map changed paths to applicable workflows:
+
+| Changed path | Workflow | Checks            |
+|--------------|----------|-------------------|
+| `tokens/**`  | Tokens   | build             |
+| `core/**`    | Core     | build, lint, test |
+| `angular/**` | Angular  | build, test       |
+| `react/**`   | React    | build             |
+
+Workflow paths are authoritative; check `.github/workflows/` when they change. React and Tokens have no dedicated lint or test workflow. If a public Core contract changes, also require generated binding review and Angular and React consumer builds: their workflows do not run for `core/**` alone.
+
+Record failed applicable checks. Continue static review, but do not approve while required applicable checks fail.
+
+Completion criterion: changed areas and applicable checks identified; every failed check recorded.
+
+## Step 2 — Apply applicable checks
+
+Load [CHECKLIST.md](CHECKLIST.md). Select sections by changed area. Mark every applicable item ✅, ❌, or N/A with a short reason. For every ❌, record exact file, line, evidence, and required correction.
+
+Inspect changed source, tests, generated bindings, public contracts, and dependency or tooling changes; do not infer correctness from green CI.
+
+Completion criterion: every applicable checklist item accounted for; every blocking finding has actionable evidence.
+
+## Step 3 — Publish one review
+
+- Lead with one sentence describing PR effect.
+- List ❌ items as required changes with file, line, evidence, and rule.
+- Label non-blocking observations as suggestions.
+- Request changes for any blocking finding.
+- Approve only when no blocking findings exist and all required applicable checks pass.
+- Otherwise leave a comment review describing pending failed or missing checks.
+
+Completion criterion: one complete review published or drafted, with no unreported blocking finding.

From 5cb8e8ef3f1981233bddabd89a22ea5c6505a9d4 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Fri, 14 Aug 2026 14:18:37 +0200
Subject: [PATCH 22/42] feat(core): fix review remarks

---
 .../cat-segmented-control.spec.tsx            | 37 +++++++++++++++++++
 .../cat-segmented-control.tsx                 |  4 +-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
index 8e5c2213..26bbe62c 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
@@ -136,6 +136,43 @@ describe('cat-segmented-control', () => {
     ).toBe(true);
   });
 
+  it('does not prevent arrow-key default when all segments are disabled', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control disabled>
+        <cat-segment value="one">Option 1</cat-segment>
+      </cat-segmented-control>
+    );
+
+    await waitForChanges();
+    const event = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true });
+
+    root.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(false);
+  });
+
+  it('does not prevent arrow-key default when focus is outside enabled segments', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+      </cat-segmented-control>
+    );
+
+    await waitForChanges();
+    const segment = root.querySelector<HTMLCatSegmentElement>('cat-segment');
+    segment!.doFocus = vi.fn();
+    const outside = document.createElement('button');
+    document.body.append(outside);
+    outside.focus();
+    const event = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true });
+
+    root.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(false);
+    expect(segment!.doFocus).not.toHaveBeenCalled();
+    outside.remove();
+  });
+
   it('does not emit selection change for focus or blur events', async () => {
     const { root } = await render<HTMLCatSegmentedControlElement>(
       <cat-segmented-control>
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
index b01724ed..1f4adc99 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
@@ -113,9 +113,11 @@ export class CatSegmentedControl {
 
     const enabled = this.segments.filter(s => !s.disabled);
     const idx = enabled.indexOf(document.activeElement as HTMLCatSegmentElement);
+    if (enabled.length === 0 || idx === -1) return;
+
     const offset = ['ArrowRight', 'ArrowDown'].includes(event.key) ? 1 : -1;
     const target = enabled[(idx + offset + enabled.length) % enabled.length];
-    target?.doFocus();
+    target.doFocus();
     event.preventDefault();
   }
 

From 57237472693fed5323ea39ab17c2738199477c54 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Fri, 14 Aug 2026 14:29:58 +0200
Subject: [PATCH 23/42] feat(core): fix review remarks

---
 .../cat-segmented-control/cat-segmented-control.tsx           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
index 1f4adc99..91065efa 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
@@ -79,7 +79,9 @@ export class CatSegmentedControl {
   componentDidLoad() {
     this.sync();
     this.mutationObserver = new MutationObserver(mutations => {
-      if (mutations.some(m => m.target.nodeName === 'CAT-SEGMENT')) {
+      if (
+        mutations.some(m => m.type === 'childList' || (m.type === 'attributes' && m.target.nodeName === 'CAT-SEGMENT'))
+      ) {
         this.sync();
       }
     });

From 8cb57ba9df6afc322aa4886666035396b832e240 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Mon, 17 Aug 2026 09:34:01 +0200
Subject: [PATCH 24/42] chore: run prettier after other test tasks as well

---
 core/package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/core/package.json b/core/package.json
index 30507f8e..aa99c721 100644
--- a/core/package.json
+++ b/core/package.json
@@ -33,6 +33,8 @@
     "test": "stencil-test --project plugin",
     "test:screenshot": "stencil-test --project browser",
     "test:e2e": "stencil-test --project e2e",
+    "posttest": "node replace && pnpm --filter @haiilo/catalyst-angular-workspace run prettier",
+    "posttest:screenshot": "node replace && pnpm --filter @haiilo/catalyst-angular-workspace run prettier",
     "posttest:e2e": "node replace && pnpm --filter @haiilo/catalyst-angular-workspace run prettier",
     "test:watch": "stencil-test watch",
     "generate": "stencil generate",

From be0a102ee2409c88b33ae2172d42d69fd6d6b42d Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Mon, 17 Aug 2026 09:38:03 +0200
Subject: [PATCH 25/42] feat(core): refactor for a11y

---
 core/src/components.d.ts                      |  9 +++++
 .../cat-segment/cat-segment.spec.tsx          |  6 +--
 .../components/cat-segment/cat-segment.tsx    |  7 +++-
 .../cat-segmented-control.spec.tsx            | 39 ++++++++++++++++++-
 .../cat-segmented-control.tsx                 | 22 +++++++++--
 5 files changed, 75 insertions(+), 8 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index f87332eb..63b7d7ad 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1479,6 +1479,10 @@ export namespace Components {
           * Spread onto the native button element.
          */
         "nativeAttributes"?: { [key: string]: string };
+        /**
+          * @default 0
+         */
+        "rovingTabIndex": number;
         /**
           * @default 'm'
          */
@@ -4514,6 +4518,10 @@ declare namespace LocalJSX {
         "onCatSegmentBlur"?: (event: CatSegmentCustomEvent<string>) => void;
         "onCatSegmentClick"?: (event: CatSegmentCustomEvent<string>) => void;
         "onCatSegmentFocus"?: (event: CatSegmentCustomEvent<string>) => void;
+        /**
+          * @default 0
+         */
+        "rovingTabIndex"?: number;
         /**
           * @default 'm'
          */
@@ -5622,6 +5630,7 @@ declare namespace LocalJSX {
         "a11yLabel": string;
         "a11yControls": string;
         "size": SegmentSize;
+        "rovingTabIndex": number;
         "testId": string;
         "value": string;
     }
diff --git a/core/src/components/cat-segment/cat-segment.spec.tsx b/core/src/components/cat-segment/cat-segment.spec.tsx
index 370ccb36..2c8e5616 100644
--- a/core/src/components/cat-segment/cat-segment.spec.tsx
+++ b/core/src/components/cat-segment/cat-segment.spec.tsx
@@ -17,7 +17,7 @@ describe('cat-segment', () => {
 
     expect(btn).toHaveClass('cat-segment-m');
     expect(btn).not.toHaveClass('cat-segment-active');
-    expect(btn?.getAttribute('aria-pressed')).toBe('false');
+    expect(btn?.getAttribute('aria-checked')).toBe('false');
   });
 
   it('applies size class', async () => {
@@ -38,7 +38,7 @@ describe('cat-segment', () => {
     );
     const btn = root.shadowRoot?.querySelector('button');
     expect(btn).toHaveClass('cat-segment-active');
-    expect(btn?.getAttribute('aria-pressed')).toBe('true');
+    expect(btn?.getAttribute('aria-checked')).toBe('true');
   });
 
   it('renders disabled attribute when disabled', async () => {
@@ -142,7 +142,7 @@ describe('cat-segment', () => {
 
     const btn = root.shadowRoot?.querySelector('button');
     expect(btn).toHaveClasses(['cat-segment-active', 'cat-segment-xl']);
-    expect(btn?.getAttribute('aria-pressed')).toBe('true');
+    expect(btn?.getAttribute('aria-checked')).toBe('true');
     expect(btn).toHaveAttribute('disabled');
   });
 
diff --git a/core/src/components/cat-segment/cat-segment.tsx b/core/src/components/cat-segment/cat-segment.tsx
index db45c9e5..1d18d362 100644
--- a/core/src/components/cat-segment/cat-segment.tsx
+++ b/core/src/components/cat-segment/cat-segment.tsx
@@ -45,6 +45,9 @@ export class CatSegment {
   /** @internal Set by cat-segmented-control. Size of the segment. */
   @Prop({ mutable: true }) size: SegmentSize = 'm';
 
+  /** @internal Set by cat-segmented-control for radio roving tabindex. */
+  @Prop({ mutable: true }) rovingTabIndex = 0;
+
   /** Renders as data-test on the button element. */
   @Prop() testId?: string;
 
@@ -83,6 +86,7 @@ export class CatSegment {
       <Host>
         <button
           part="button"
+          role="radio"
           ref={el => (this.button = el)}
           class={{
             'cat-segment': true,
@@ -91,8 +95,9 @@ export class CatSegment {
             'cat-segment-icon-only': this.iconOnly && showIcon
           }}
           disabled={this.disabled}
+          tabIndex={this.rovingTabIndex}
           aria-label={this.a11yLabel}
-          aria-pressed={String(this.active)}
+          aria-checked={String(this.active)}
           aria-controls={this.a11yControls}
           data-test={this.testId}
           onClick={this.handleClick.bind(this)}
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
index 26bbe62c..9e07b0f4 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
@@ -100,13 +100,50 @@ describe('cat-segmented-control', () => {
     );
 
     await waitForChanges();
-    const group = root.shadowRoot?.querySelector('[role="group"]');
+    const group = root.shadowRoot?.querySelector('[role="radiogroup"]');
 
     expect(group?.getAttribute('aria-label')).toBe('Test aria label');
     expect(group?.getAttribute('data-test')).toBe('test-id');
     expect(group?.getAttribute('data-context')).toBe('settings');
   });
 
+  it('renders radio state and roving tabindex', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control value="two">
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two">Option 2</cat-segment>
+      </cat-segmented-control>
+    );
+
+    await waitForChanges();
+
+    const segments = Array.from(root.querySelectorAll<HTMLCatSegmentElement>('cat-segment'));
+    expect(root.value).toBe('two');
+    expect(segments).toHaveLength(2);
+  });
+
+  it('selects and focuses the next enabled segment with ArrowRight', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control value="one">
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two">Option 2</cat-segment>
+      </cat-segmented-control>
+    );
+
+    await waitForChanges();
+    const segments = Array.from(root.querySelectorAll<HTMLCatSegmentElement>('cat-segment'));
+    segments[1].doFocus = vi.fn();
+    segments[0].shadowRoot?.querySelector('button')?.focus();
+    const event = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true, composed: true });
+
+    segments[0].dispatchEvent(event);
+    await waitForChanges();
+
+    expect(segments[1].active).toBe(true);
+    expect(segments[1].doFocus).toHaveBeenCalledOnce();
+    expect(event.defaultPrevented).toBe(true);
+  });
+
   it('propagates size to all segments', async () => {
     const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
       <cat-segmented-control size="xl">
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
index 91065efa..84bcc697 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
@@ -64,6 +64,7 @@ export class CatSegmentedControl {
   @Watch('value')
   onValueChange(newValue?: string) {
     this.segments.forEach(s => (s.active = s.value === newValue));
+    this.updateTabIndex();
   }
 
   @Watch('size')
@@ -94,7 +95,7 @@ export class CatSegmentedControl {
 
   @Listen('catSegmentClick')
   onSegmentClick(event: CustomEvent<string>) {
-    this.value = event.detail;
+    this.selectSegment(event.detail);
     this.catChange.emit(this.value);
   }
 
@@ -114,11 +115,13 @@ export class CatSegmentedControl {
     if (!keys.includes(event.key)) return;
 
     const enabled = this.segments.filter(s => !s.disabled);
-    const idx = enabled.indexOf(document.activeElement as HTMLCatSegmentElement);
+    const activeSegment = this.segments.find(segment => event.composedPath().includes(segment));
+    const idx = enabled.indexOf(activeSegment!);
     if (enabled.length === 0 || idx === -1) return;
 
     const offset = ['ArrowRight', 'ArrowDown'].includes(event.key) ? 1 : -1;
     const target = enabled[(idx + offset + enabled.length) % enabled.length];
+    this.selectSegment(target.value);
     target.doFocus();
     event.preventDefault();
   }
@@ -128,7 +131,7 @@ export class CatSegmentedControl {
       <Host>
         <div
           part="control"
-          role="group"
+          role="radiogroup"
           aria-label={this.a11yLabel}
           class={{ 'cat-segmented-control': true }}
           data-test={this.testId}
@@ -146,4 +149,17 @@ export class CatSegmentedControl {
     this.onSizeChange(this.size);
     this.onDisabledChange(this.disabled);
   }
+
+  private updateTabIndex() {
+    const enabled = this.segments.filter(s => !s.disabled);
+    const active = enabled.find(s => s.active) ?? enabled[0];
+
+    this.segments.forEach(segment => (segment.rovingTabIndex = segment === active ? 0 : -1));
+  }
+
+  private selectSegment(value: string) {
+    this.value = value;
+    this.segments.forEach(segment => (segment.active = segment.value === value));
+    this.updateTabIndex();
+  }
 }

From 899d46570ad9f38f14d2494647981b3ea593f1de Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Mon, 17 Aug 2026 09:42:17 +0200
Subject: [PATCH 26/42] feat(core): fix a11y issues in demo page

---
 core/src/index.html | 3602 +++++++++++++++++++++----------------------
 1 file changed, 1801 insertions(+), 1801 deletions(-)

diff --git a/core/src/index.html b/core/src/index.html
index ac1d07b9..66835583 100644
--- a/core/src/index.html
+++ b/core/src/index.html
@@ -1,886 +1,718 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <title>Catalyst | StencilJS</title>
-    <script type="module" src="/build/catalyst.esm.js"></script>
-    <script type="module">
-      import { ci } from '/build/assets/icons/js/icons.object.js';
-      import { catI18nRegistry, catIconRegistry } from '/build/index.esm.js';
-
-      /**
-       * WARNING: Keep in sync with ./index.cdn.js
-       */
-      catIconRegistry.addIcons(ci);
-      catI18nRegistry.set({
-        'datepicker.prevYear': 'Previous year',
-        'datepicker.nextYear': 'Next year',
-        'datepicker.prevMonth': 'Previous month',
-        'datepicker.nextMonth': 'Next month',
-        'datepicker.arrowKeys': 'Arrow keys can navigate dates.',
-        'datepicker.today': 'Today',
-        'datepicker.change': 'Change date',
-        'datepicker.choose': 'Choose date',
-        'timepicker.change': 'Change time',
-        'timepicker.choose': 'Choose time',
-        // 'datepicker.nextYear': 'Year',
-        'datepicker.year': 'Year',
-        'datepicker.month': 'Month',
-        'datepicker.hour': 'Hour',
-        'datepicker.minute': 'Minute',
-        'datepicker.scroll': 'Scroll to increment',
-        'datepicker.toggle': 'Click to toggle',
-        'datepicker.clear': 'Clear',
-        'dialog.close': 'Close',
-        'input.clear': 'Clear',
-        'input.optional': 'Optional',
-        'input.required': 'Required',
-        'input.showPassword': 'Show password',
-        'input.hidePassword': 'Hide password',
-        'notification.dismiss': 'Dismiss',
-        'pagination.ariaLabel': 'Pagination',
-        'pagination.prev': 'Previous',
-        'pagination.page': 'Go to page {{page}}',
-        'pagination.next': 'Next',
-        'select.close': 'Close',
-        'select.deselect': 'Deselect',
-        'select.empty': 'No items',
-        'select.open': 'Open',
-        'tabs.more': 'More'
-      });
-    </script>
-    <script nomodule src="/build/catalyst.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vanillajs-scrollspy@2.2.0/dist/vanillajs-scrollspy.min.js"></script>
-    <link rel="stylesheet" href="/build/catalyst.css" />
-    <style>
-      html,
-      body {
-        background: #fff;
-      }
-
-      body {
-        padding: 2rem 4rem;
-      }
-
-      body.ss3 {
-        --cat-font-family-base: 'Source Sans 3';
-        --cat-font-family-head: 'Source Sans 3';
-      }
-
-      body.custom-theme {
-        --cat-primary-bg: 91, 94, 219;
-        --cat-primary-bg-hover: 78, 81, 191;
-        --cat-primary-bg-active: 65, 67, 159;
-
-        --cat-primary-bg-outlined: 253, 212, 212;
-
-        --cat-primary-fill: 255, 255, 255;
-        --cat-primary-fill-hover: 255, 255, 255;
-        --cat-primary-fill-active: 255, 255, 255;
-
-        --cat-primary-text: 91, 94, 219;
-        --cat-primary-text-hover: 78, 81, 191;
-        --cat-primary-text-active: 65, 67, 159;
-      }
-
-      .wrapper {
-        display: flex;
-        flex-direction: row;
-        gap: 8rem;
-      }
-
-      .toolbar {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        background: #fff;
-        border-bottom: 1px solid #ebecf0;
-        position: sticky;
-        top: 0;
-        z-index: 3;
-      }
-
-      .tabs {
-        box-shadow: none;
-      }
-
-      #nav {
-        align-self: flex-start;
-        position: sticky;
-        top: 8rem;
-        width: 300px;
-        margin: 4rem 0;
-        border-right: 1px solid #ebecf0;
-      }
-
-      #nav ul {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-      }
-
-      #nav .active {
-        font-weight: bold;
-      }
-
-      .content {
-        max-width: 600px;
-        padding: 2rem 0;
-      }
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+  <title>Catalyst | StencilJS</title>
+  <script type="module" src="/build/catalyst.esm.js"></script>
+  <script type="module">
+    import { ci } from '/build/assets/icons/js/icons.object.js';
+    import { catI18nRegistry, catIconRegistry } from '/build/index.esm.js';
+
+    /**
+     * WARNING: Keep in sync with ./index.cdn.js
+     */
+    catIconRegistry.addIcons(ci);
+    catI18nRegistry.set({
+      'datepicker.prevYear': 'Previous year',
+      'datepicker.nextYear': 'Next year',
+      'datepicker.prevMonth': 'Previous month',
+      'datepicker.nextMonth': 'Next month',
+      'datepicker.arrowKeys': 'Arrow keys can navigate dates.',
+      'datepicker.today': 'Today',
+      'datepicker.change': 'Change date',
+      'datepicker.choose': 'Choose date',
+      'timepicker.change': 'Change time',
+      'timepicker.choose': 'Choose time',
+      // 'datepicker.nextYear': 'Year',
+      'datepicker.year': 'Year',
+      'datepicker.month': 'Month',
+      'datepicker.hour': 'Hour',
+      'datepicker.minute': 'Minute',
+      'datepicker.scroll': 'Scroll to increment',
+      'datepicker.toggle': 'Click to toggle',
+      'datepicker.clear': 'Clear',
+      'dialog.close': 'Close',
+      'input.clear': 'Clear',
+      'input.optional': 'Optional',
+      'input.required': 'Required',
+      'input.showPassword': 'Show password',
+      'input.hidePassword': 'Hide password',
+      'notification.dismiss': 'Dismiss',
+      'pagination.ariaLabel': 'Pagination',
+      'pagination.prev': 'Previous',
+      'pagination.page': 'Go to page {{page}}',
+      'pagination.next': 'Next',
+      'select.close': 'Close',
+      'select.deselect': 'Deselect',
+      'select.empty': 'No items',
+      'select.open': 'Open',
+      'tabs.more': 'More'
+    });
+  </script>
+  <script nomodule src="/build/catalyst.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vanillajs-scrollspy@2.2.0/dist/vanillajs-scrollspy.min.js"></script>
+  <link rel="stylesheet" href="/build/catalyst.css" />
+  <style>
+    html,
+    body {
+      background: #fff;
+    }
+
+    body {
+      padding: 2rem 4rem;
+    }
+
+    body.ss3 {
+      --cat-font-family-base: 'Source Sans 3';
+      --cat-font-family-head: 'Source Sans 3';
+    }
+
+    body.custom-theme {
+      --cat-primary-bg: 91, 94, 219;
+      --cat-primary-bg-hover: 78, 81, 191;
+      --cat-primary-bg-active: 65, 67, 159;
+
+      --cat-primary-bg-outlined: 253, 212, 212;
+
+      --cat-primary-fill: 255, 255, 255;
+      --cat-primary-fill-hover: 255, 255, 255;
+      --cat-primary-fill-active: 255, 255, 255;
+
+      --cat-primary-text: 91, 94, 219;
+      --cat-primary-text-hover: 78, 81, 191;
+      --cat-primary-text-active: 65, 67, 159;
+    }
+
+    .wrapper {
+      display: flex;
+      flex-direction: row;
+      gap: 8rem;
+    }
+
+    .toolbar {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      background: #fff;
+      border-bottom: 1px solid #ebecf0;
+      position: sticky;
+      top: 0;
+      z-index: 3;
+    }
+
+    .tabs {
+      box-shadow: none;
+    }
+
+    #nav {
+      align-self: flex-start;
+      position: sticky;
+      top: 8rem;
+      width: 300px;
+      margin: 4rem 0;
+      border-right: 1px solid #ebecf0;
+    }
+
+    #nav ul {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    #nav .active {
+      font-weight: bold;
+    }
+
+    .content {
+      max-width: 600px;
+      padding: 2rem 0;
+    }
+
+    .canvas-fake {
+      background: #f2f4f7;
+      border-radius: 0.5rem;
+      padding: 3.5rem;
+    }
+
+    section {
+      flex: 0 1 auto;
+      padding: 5rem 0;
+    }
+
+    section:not(:last-of-type) {
+      border-bottom: 1px solid rgba(0, 0, 0, 10%);
+    }
+
+    section > h2:not(:first-child),
+    section > h3:not(:first-child) {
+      margin-top: 2rem;
+    }
+
+    section > h2:not(:last-child),
+    section > h3:not(:last-child) {
+      margin-bottom: 1rem;
+    }
+
+    section.typography {
+      display: flex;
+      gap: 5rem;
+    }
+
+    /* Text page stylings */
+
+    section.typography .example {
+      max-width: 600px;
+      margin: 0 auto;
+    }
+
+    figure img {
+      max-width: 100%;
+    }
+
+    section.typography aside {
+      display: flex;
+      flex-direction: column;
+      gap: 7rem;
+      max-width: 450px;
+      box-sizing: content-box;
+      padding-right: 5rem;
+      border-right: 1px solid #ebecf0;
+    }
+
+    .switches {
+      position: fixed;
+      bottom: 1rem;
+      right: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      align-items: end;
+    }
+
+    .switches cat-button {
+      width: fit-content;
+    }
+  </style>
+</head>
+<body>
+<div class="body">
+  <h1>Catalyst Web Components</h1>
+
+  <!-- TOP TABS & BUTTONS -->
+  <div class="toolbar">
+    <cat-tabs class="tabs" active-tab="tab-comp" id="tabs-top">
+      <cat-tab label="Components" id="tab-comp"></cat-tab>
+      <cat-tab label="Text" id="tab-text"></cat-tab>
+      <cat-tab label="Icons" id="tab-icon"></cat-tab>
+    </cat-tabs>
+    <div class="cat-flex cat-items-center cat-gap-s">
+      <cat-button
+        url="https://github.com/haiilo/catalyst"
+        url-target="_blank"
+        size="s"
+        class="cat-elevation-1"
+        icon="github"
+      >
+        View on GitHub
+      </cat-button>
+      <cat-button
+        url="https://app.slack.com/client/T03BH7BHD/C02JFK9BM0F"
+        url-target="_blank"
+        size="s"
+        class="cat-elevation-1"
+        icon="slack"
+      >
+        Join us on Slack
+      </cat-button>
+    </div>
+  </div>
+
+  <!-- CATALYST COMPONENTS -->
+  <div id="tab-comp-content">
+    <div class="wrapper">
+      <nav id="nav">
+        <ul>
+          <li><a href="#alert">Alert</a></li>
+          <li><a href="#avatar">Avatar</a></li>
+          <li><a href="#badge">Badge</a></li>
+          <li><a href="#button">Button</a></li>
+          <li><a href="#group-button">Group Button</a></li>
+          <li><a href="#card">Card</a></li>
+          <li><a href="#checkbox">Checkbox</a></li>
+          <li><a href="#divider">Divider</a></li>
+          <li><a href="#dropdown">Dropdown</a></li>
+          <li><a href="#menu">Menu</a></li>
+          <li><a href="#form">Form</a></li>
+          <li><a href="#form-group">Form Group</a></li>
+          <li><a href="#icon">Icon</a></li>
+          <li><a href="#input">Input</a></li>
+          <li><a href="#datepicker">Datepicker</a></li>
+          <li><a href="#notification">Notification</a></li>
+          <li><a href="#pagination">Pagination</a></li>
+          <li><a href="#radio">Radio</a></li>
+          <li><a href="#scrollable">Scrollable</a></li>
+          <li><a href="#segmented-control">Segmented Control</a></li>
+          <li><a href="#select">Select</a></li>
+          <li><a href="#skeleton">Skeleton</a></li>
+          <li><a href="#spinner">Spinner</a></li>
+          <li><a href="#tabs">Tabs</a></li>
+          <li><a href="#tags">Tags</a></li>
+          <li><a href="#textarea">Textarea</a></li>
+          <li><a href="#toggle">Toggle</a></li>
+          <li><a href="#tooltip">Tooltip</a></li>
+        </ul>
+      </nav>
+      <div class="content">
+        <section id="alert" class="cat-article">
+          <h2>Alert</h2>
+          <cat-alert tabindex="3">
+            <p>
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+              labore et <a href="https://google.de">dolore magna</a> aliquyam erat, sed diam voluptua.
+            </p>
+          </cat-alert>
+          <h3>Color</h3>
+          <cat-alert color="secondary">
+            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+          </cat-alert>
+          <cat-alert color="info">
+            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+          </cat-alert>
+          <cat-alert color="success">
+            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+          </cat-alert>
+          <cat-alert color="warning">
+            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+          </cat-alert>
+          <cat-alert color="danger">
+            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+          </cat-alert>
+          <h3>Variations</h3>
+          <cat-alert color="primary" no-icon>
+            <p>
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+              labore et dolore magna aliquyam erat, sed diam voluptua.
+            </p>
+          </cat-alert>
+          <cat-alert color="secondary" icon="cross-circle-filled">
+            <h5 class="cat-strong">Lorem ipsum dolor sit amet.</h5>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+          </cat-alert>
+        </section>
 
-      .canvas-fake {
-        background: #f2f4f7;
-        border-radius: 0.5rem;
-        padding: 3.5rem;
-      }
+        <section id="avatar">
+          <h2>Avatar</h2>
+          <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
+          <h3>Variations</h3>
+          <cat-avatar label="John Doe" size="xs" icon="sparkle-filled"></cat-avatar>
+          <cat-avatar label="John Doe" size="s" round></cat-avatar>
+          <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
+          <cat-avatar
+            label="John Doe"
+            size="l"
+            round
+            url="http://google.com"
+            src="invalidSrc"
+            icon="sparkle-filled"
+          ></cat-avatar>
+          <cat-avatar label="John Doe" size="xl" initials="Init"></cat-avatar>
+        </section>
 
-      section {
-        flex: 0 1 auto;
-        padding: 5rem 0;
-      }
+        <section id="badge">
+          <h2>Badge</h2>
+          <cat-badge>Default</cat-badge>
+
+          <h3>Variant</h3>
+          <cat-badge variant="filled">Filled</cat-badge>
+          <cat-badge variant="outlined">Outlined</cat-badge>
+
+          <h3>Color</h3>
+          <cat-badge icon="sparkle-filled" color="primary">Primary</cat-badge>
+          <cat-badge icon="sparkle-filled" color="secondary">Secondary</cat-badge>
+          <cat-badge icon="sparkle-filled" color="info">Info</cat-badge>
+          <cat-badge icon="sparkle-filled" color="success">Success</cat-badge>
+          <cat-badge icon="sparkle-filled" color="warning">Warning</cat-badge>
+          <cat-badge icon="sparkle-filled" color="danger">Danger</cat-badge>
+          <br />
+          <br />
+          <cat-badge icon="sparkle-filled" icon-right color="primary">Primary</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right color="secondary">Secondary</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right color="info">Info</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right color="success">Success</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right color="warning">Warning</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right color="danger">Danger</cat-badge>
+
+          <h3>Size</h3>
+          <cat-badge icon="sparkle-filled" size="xs">Size XS</cat-badge>
+          <cat-badge icon="sparkle-filled" size="s">Size S</cat-badge>
+          <cat-badge icon="sparkle-filled" size="m">Size M</cat-badge>
+          <cat-badge icon="sparkle-filled" size="l">Size L</cat-badge>
+          <cat-badge icon="sparkle-filled" size="xl">Size XL</cat-badge>
+          <br />
+          <br />
+          <cat-badge icon="sparkle-filled" icon-right size="xs">Size XS</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right size="s">Size S</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right size="m">Size M</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right size="l">Size L</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-right size="xl">Size XL</cat-badge>
+          <br />
+          <br />
+          <cat-badge icon="sparkle-filled" icon-only="xs" size="xs">sdfdsf sdfsdf</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-only="s" size="s">sdfdsf sdfsdf</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-only="m" size="m">sdfdsf sdfsdf</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-only="l" size="l">sdfdsf sdfsdf</cat-badge>
+          <cat-badge icon="sparkle-filled" icon-only="xl" size="xl">sdfdsf sdfsdf</cat-badge>
+
+          <h3>Round</h3>
+          <cat-badge round="true">Round</cat-badge>
+          <cat-badge round="true" color="danger" size="xs"></cat-badge>
+
+          <h3>Pulse</h3>
+          <cat-badge pulse="true">Pulse</cat-badge>
+          <cat-badge pulse="true" variant="outlined">Pulse</cat-badge>
+          <cat-badge pulse="true" round="true" color="danger" size="xs"></cat-badge>
+
+          <h3>Layout</h3>
+          <cat-badge
+          >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+            labore et dolore magna aliquyam erat, sed diam voluptua.
+          </cat-badge>
+        </section>
 
-      section:not(:last-of-type) {
-        border-bottom: 1px solid rgba(0, 0, 0, 10%);
-      }
+        <section id="button">
+          <h2>Button</h2>
+          <cat-button test-id="data-test">Button</cat-button>
+
+          <h3>Color & Variant</h3>
+          <cat-button icon="sparkle-filled" variant="filled" color="primary">Primary</cat-button>
+          <cat-button icon="sparkle-filled" variant="outlined" color="primary">Primary</cat-button>
+          <cat-button icon="sparkle-filled" variant="text" color="primary">Primary</cat-button>
+          <cat-button icon="sparkle-filled" variant="link" color="primary">Primary</cat-button>
+          <br /><br />
+          <cat-button icon="sparkle-filled" variant="filled" color="secondary">Secondary</cat-button>
+          <cat-button icon="sparkle-filled" variant="outlined" color="secondary">Secondary</cat-button>
+          <cat-button icon="sparkle-filled" variant="text" color="secondary">Secondary</cat-button>
+          <cat-button icon="sparkle-filled" variant="link" color="secondary">Secondary</cat-button>
+          <br /><br />
+          <cat-button icon="sparkle-filled" variant="filled" color="info">Info</cat-button>
+          <cat-button icon="sparkle-filled" variant="outlined" color="info">Info</cat-button>
+          <cat-button icon="sparkle-filled" variant="text" color="info">Info</cat-button>
+          <cat-button icon="sparkle-filled" variant="link" color="info">Info</cat-button>
+          <br /><br />
+          <cat-button icon="sparkle-filled" variant="filled" color="success">Success</cat-button>
+          <cat-button icon="sparkle-filled" variant="outlined" color="success">Success</cat-button>
+          <cat-button icon="sparkle-filled" variant="text" color="success">Success</cat-button>
+          <cat-button icon="sparkle-filled" variant="link" color="success">Success</cat-button>
+          <br /><br />
+          <cat-button icon="sparkle-filled" variant="filled" color="warning">Warning</cat-button>
+          <cat-button icon="sparkle-filled" variant="outlined" color="warning">Warning</cat-button>
+          <cat-button icon="sparkle-filled" variant="text" color="warning">Warning</cat-button>
+          <cat-button icon="sparkle-filled" variant="link" color="warning">Warning</cat-button>
+          <br /><br />
+          <cat-button icon="sparkle-filled" variant="filled" color="danger">Danger</cat-button>
+          <cat-button icon="sparkle-filled" variant="outlined" color="danger">Danger</cat-button>
+          <cat-button icon="sparkle-filled" variant="text" color="danger">Danger</cat-button>
+          <cat-button icon="sparkle-filled" variant="link" color="danger">Danger</cat-button>
+
+          <h3>Size</h3>
+          <cat-button size="xs" icon="sparkle-filled">Size XS</cat-button>
+          <cat-button size="s" icon="sparkle-filled">Size S</cat-button>
+          <cat-button size="m" icon="sparkle-filled">Size M</cat-button>
+          <cat-button size="l" icon="sparkle-filled">Size L</cat-button>
+          <cat-button size="xl" icon="sparkle-filled">Size XL</cat-button>
+
+          <h3>Icons</h3>
+          <cat-button icon="sparkle-filled">Prefix</cat-button>
+          <cat-button icon="sparkle-filled" icon-suffix="true">Suffix</cat-button>
+          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA">Suffix</cat-button>
+
+          <h3>Icon buttons</h3>
+          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xs"></cat-button>
+          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="s"></cat-button>
+          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="m"></cat-button>
+          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="l"></cat-button>
+          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xl"></cat-button>
+
+          <h3>Icons (Responsive)</h3>
+          <cat-button icon="sparkle-filled" icon-only="xs" a11y-label="ARIA">xs</cat-button>
+          <cat-button icon="sparkle-filled" icon-only="s" a11y-label="ARIA">s</cat-button>
+          <cat-button icon="sparkle-filled" icon-only="m" a11y-label="ARIA">m</cat-button>
+          <cat-button icon="sparkle-filled" icon-only="l" a11y-label="ARIA">l</cat-button>
+          <cat-button icon="sparkle-filled" icon-only="xl" a11y-label="ARIA">xl</cat-button>
+
+          <h3>Links</h3>
+          <cat-button url="http://www.google.de">Google</cat-button>
+          <cat-button url="http://www.google.de" url-target="_blank">Google (ext.)</cat-button>
+
+          <div class="cat-mt-s">
+            <cat-button inline="true" variant="link" url="http://www.google.de">Link 1</cat-button>
+            <cat-button inline="true" variant="link" url="http://www.google.de">Link 2</cat-button>
+          </div>
 
-      section > h2:not(:first-child),
-      section > h3:not(:first-child) {
-        margin-top: 2rem;
-      }
+          <h3>Active</h3>
+          <cat-button icon="sparkle-filled" active="true" variant="filled" color="primary">Primary</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="primary">Primary</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="text" color="primary">Primary</cat-button>
+          <br /><br />
+          <cat-button icon="sparkle-filled" active="true" variant="filled" color="secondary">Secondary</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="secondary"
+          >Secondary
+          </cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="text" color="secondary">Secondary</cat-button>
+          <br /><br />
+          <cat-button icon="sparkle-filled" active="true" variant="filled" color="info">Info</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="info">Info</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="text" color="info">Info</cat-button>
+          <br /><br />
+          <cat-button icon="sparkle-filled" active="true" variant="filled" color="success">Success</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="success">Success</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="text" color="success">Success</cat-button>
+          <br /><br />
+          <cat-button icon="sparkle-filled" active="true" variant="filled" color="warning">Warning</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="warning">Warning</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="text" color="warning">Warning</cat-button>
+          <br /><br />
+          <cat-button icon="sparkle-filled" active="true" variant="filled" color="danger">Danger</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="danger">Danger</cat-button>
+          <cat-button icon="sparkle-filled" active="true" variant="text" color="danger">Danger</cat-button>
+
+          <h3>Disabled</h3>
+          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="primary">Primary</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="primary">Primary</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="primary">Primary</cat-button>
+          <br /><br />
+          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="secondary"
+          >Secondary
+          </cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="secondary"
+          >Secondary
+          </cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="secondary">Secondary</cat-button>
+          <br /><br />
+          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="info">Info</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="info">Info</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="info">Info</cat-button>
+          <br /><br />
+          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="success">Success</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="success">Success</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="success">Success</cat-button>
+          <br /><br />
+          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="warning">Warning</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="warning">Warning</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="warning">Warning</cat-button>
+          <br /><br />
+          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="danger">Danger</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="danger">Danger</cat-button>
+          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="danger">Danger</cat-button>
+
+          <h3>Loading</h3>
+          <cat-button loading="true" variant="filled" color="primary">Primary</cat-button>
+          <cat-button loading="true" variant="outlined" color="primary">Primary</cat-button>
+          <cat-button loading="true" variant="text" color="primary">Primary</cat-button>
+          <br /><br />
+          <cat-button loading="true" variant="filled" color="secondary">Secondary</cat-button>
+          <cat-button loading="true" variant="outlined" color="secondary">Secondary</cat-button>
+          <cat-button loading="true" variant="text" color="secondary">Secondary</cat-button>
+          <br /><br />
+          <cat-button loading="true" variant="filled" color="info">Info</cat-button>
+          <cat-button loading="true" variant="outlined" color="info">Info</cat-button>
+          <cat-button loading="true" variant="text" color="info">Info</cat-button>
+          <br /><br />
+          <cat-button loading="true" variant="filled" color="success">Success</cat-button>
+          <cat-button loading="true" variant="outlined" color="success">Success</cat-button>
+          <cat-button loading="true" variant="text" color="success">Success</cat-button>
+          <br /><br />
+          <cat-button loading="true" variant="filled" color="warning">Warning</cat-button>
+          <cat-button loading="true" variant="outlined" color="warning">Warning</cat-button>
+          <cat-button loading="true" variant="text" color="warning">Warning</cat-button>
+          <br /><br />
+          <cat-button loading="true" variant="filled" color="danger">Danger</cat-button>
+          <cat-button loading="true" variant="outlined" color="danger">Danger</cat-button>
+          <cat-button loading="true" variant="text" color="danger">Danger</cat-button>
+
+          <h3>Layout</h3>
+          <div style="width: 200px; border: 1px solid gray">
+            <cat-button icon="sparkle-filled">Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
+            <br />
+            <cat-button icon="sparkle-filled" no-ellipsis>Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
+            <br />
+            <cat-button icon="sparkle-filled" class="cat-block">Block</cat-button>
+            <cat-button icon="sparkle-filled" class="cat-block cat-text-left">Block (left)</cat-button>
+            <cat-button icon="sparkle-filled" class="cat-block cat-text-right">Block (right)</cat-button>
+          </div>
+        </section>
 
-      section > h2:not(:last-child),
-      section > h3:not(:last-child) {
-        margin-bottom: 1rem;
-      }
+        <section id="group-button">
+          <h2>Group button</h2>
+
+          <div style="display: flex; flex-direction: column; gap: 8px">
+            <cat-button-group a11y-label="Group button outlined">
+              <cat-button>Left</cat-button>
+              <cat-button>Middle</cat-button>
+              <cat-button>Middle1</cat-button>
+              <cat-button>Right</cat-button>
+            </cat-button-group>
+
+            <cat-button-group a11y-label="Group button filled">
+              <cat-button variant="filled">Left</cat-button>
+              <cat-button variant="filled">Middle</cat-button>
+              <cat-button variant="filled">Right</cat-button>
+            </cat-button-group>
+
+            <cat-button-group a11y-label="Group button text">
+              <cat-button variant="text">Left</cat-button>
+              <cat-button variant="text">Middle</cat-button>
+              <cat-button variant="text">Right</cat-button>
+            </cat-button-group>
+          </div>
+        </section>
 
-      section.typography {
-        display: flex;
-        gap: 5rem;
-      }
+        <section id="card">
+          <h2>Card</h2>
 
-      /* Text page stylings */
+          <div class="canvas-fake">
+            <cat-card>
+              <h3>Lorem ipsum dolor sit amet</h3>
+              <p>
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                labore et dolore magna aliquyam erat, sed diam voluptua.
+              </p>
+              <p>
+                At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+                diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+              </p>
+            </cat-card>
+          </div>
+          <h3>Navigation</h3>
+          <div class="canvas-fake">
+            <cat-card>
+              <nav>
+                <ul>
+                  <li class="cat-nav-head">Headline</li>
+                  <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
+                  <li>
+                    <cat-button class="cat-nav-item" color="primary">Nav item 1</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" active>Nav item 2</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" color="warning">Nav item 3</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" disabled>Nav item 4</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item">Nav item 5 (long)</cat-button>
+                  </li>
+                  <li class="cat-hr"></li>
+                  <li>
+                    <cat-button class="cat-nav-item" color="danger" onclick="console.log(6)" active
+                    >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f
+                    </cat-button>
+                  </li>
+                </ul>
+                <hr />
+                <ul>
+                  <li>
+                    <cat-button class="cat-nav-item" variant="outlined" color="secondary" onclick="console.log(3)"
+                    >Nav item 3
+                    </cat-button>
+                  </li>
+                </ul>
+              </nav>
+            </cat-card>
+          </div>
+        </section>
 
-      section.typography .example {
-        max-width: 600px;
-        margin: 0 auto;
-      }
+        <section id="checkbox" class="cat-form">
+          <h2>Checkbox</h2>
+          <cat-checkbox label="Label"></cat-checkbox>
+
+          <h3>State</h3>
+          <cat-checkbox label="Disabled" disabled></cat-checkbox>
+          <cat-checkbox label="Checked" checked></cat-checkbox>
+          <cat-checkbox label="Checked disabled" checked disabled></cat-checkbox>
+          <cat-checkbox label="Indeterminate" indeterminate="true" id="indeterminate"></cat-checkbox>
+          <cat-button id="indeterminate-true">Set inteterminate true</cat-button>
+          <cat-button id="indeterminate-false">Set inteterminate false</cat-button>
+          <cat-button id="value-true">Set value true</cat-button>
+          <cat-button id="value-false">Set value false</cat-button>
+          <script>
+            document.querySelector('#indeterminate-true').addEventListener('click', () => {
+              document.querySelector('#indeterminate').indeterminate = true;
+            });
+            document.querySelector('#indeterminate-false').addEventListener('click', () => {
+              document.querySelector('#indeterminate').indeterminate = false;
+            });
+            document.querySelector('#value-true').addEventListener('click', () => {
+              document.querySelector('#indeterminate').checked = true;
+            });
+            document.querySelector('#value-false').addEventListener('click', () => {
+              document.querySelector('#indeterminate').checked = false;
+            });
+          </script>
 
-      figure img {
-        max-width: 100%;
-      }
+          <h3>Alignment</h3>
+          <cat-checkbox label="Label" label-left></cat-checkbox>
 
-      section.typography aside {
-        display: flex;
-        flex-direction: column;
-        gap: 7rem;
-        max-width: 450px;
-        box-sizing: content-box;
-        padding-right: 5rem;
-        border-right: 1px solid #ebecf0;
-      }
+          <h3>Slots</h3>
+          <cat-checkbox hint="This is a hint!">
+            <span slot="label">This is the <b>label</b></span>
+            <span slot="hint">This is another!</span>
+          </cat-checkbox>
+        </section>
 
-      .switches {
-        position: fixed;
-        bottom: 1rem;
-        right: 1rem;
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        align-items: end;
-      }
+        <section id="divider">
+          <h2>Divider</h2>
+        </section>
 
-      .switches cat-button {
-        width: fit-content;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="body">
-      <h1>Catalyst Web Components</h1>
-
-      <!-- TOP TABS & BUTTONS -->
-      <div class="toolbar">
-        <cat-tabs class="tabs" active-tab="tab-comp" id="tabs-top">
-          <cat-tab label="Components" id="tab-comp"></cat-tab>
-          <cat-tab label="Text" id="tab-text"></cat-tab>
-          <cat-tab label="Icons" id="tab-icon"></cat-tab>
-        </cat-tabs>
-        <div class="cat-flex cat-items-center cat-gap-s">
-          <cat-button
-            url="https://github.com/haiilo/catalyst"
-            url-target="_blank"
-            size="s"
-            class="cat-elevation-1"
-            icon="github"
-          >
-            View on GitHub
-          </cat-button>
-          <cat-button
-            url="https://app.slack.com/client/T03BH7BHD/C02JFK9BM0F"
-            url-target="_blank"
-            size="s"
-            class="cat-elevation-1"
-            icon="slack"
-          >
-            Join us on Slack
-          </cat-button>
-        </div>
-      </div>
+        <section id="dropdown">
+          <h2>Dropdown</h2>
 
-      <!-- CATALYST COMPONENTS -->
-      <div id="tab-comp-content">
-        <div class="wrapper">
-          <nav id="nav">
-            <ul>
-              <li><a href="#alert">Alert</a></li>
-              <li><a href="#avatar">Avatar</a></li>
-              <li><a href="#badge">Badge</a></li>
-              <li><a href="#button">Button</a></li>
-              <li><a href="#group-button">Group Button</a></li>
-              <li><a href="#card">Card</a></li>
-              <li><a href="#checkbox">Checkbox</a></li>
-              <li><a href="#divider">Divider</a></li>
-              <li><a href="#dropdown">Dropdown</a></li>
-              <li><a href="#menu">Menu</a></li>
-              <li><a href="#form">Form</a></li>
-              <li><a href="#form-group">Form Group</a></li>
-              <li><a href="#icon">Icon</a></li>
-              <li><a href="#input">Input</a></li>
-              <li><a href="#datepicker">Datepicker</a></li>
-              <li><a href="#notification">Notification</a></li>
-              <li><a href="#pagination">Pagination</a></li>
-              <li><a href="#radio">Radio</a></li>
-              <li><a href="#scrollable">Scrollable</a></li>
-              <li><a href="#segmented-control">Segmented Control</a></li>
-              <li><a href="#select">Select</a></li>
-              <li><a href="#skeleton">Skeleton</a></li>
-              <li><a href="#spinner">Spinner</a></li>
-              <li><a href="#tabs">Tabs</a></li>
-              <li><a href="#tags">Tags</a></li>
-              <li><a href="#textarea">Textarea</a></li>
-              <li><a href="#toggle">Toggle</a></li>
-              <li><a href="#tooltip">Tooltip</a></li>
-            </ul>
-          </nav>
-          <div class="content">
-            <section id="alert" class="cat-article">
-              <h2>Alert</h2>
-              <cat-alert tabindex="3">
-                <p>
-                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                  labore et <a href="https://google.de">dolore magna</a> aliquyam erat, sed diam voluptua.
-                </p>
-              </cat-alert>
-              <h3>Color</h3>
-              <cat-alert color="secondary">
-                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-              </cat-alert>
-              <cat-alert color="info">
-                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-              </cat-alert>
-              <cat-alert color="success">
-                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-              </cat-alert>
-              <cat-alert color="warning">
-                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-              </cat-alert>
-              <cat-alert color="danger">
-                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-              </cat-alert>
-              <h3>Variations</h3>
-              <cat-alert color="primary" no-icon>
-                <p>
-                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                  labore et dolore magna aliquyam erat, sed diam voluptua.
-                </p>
-              </cat-alert>
-              <cat-alert color="secondary" icon="cross-circle-filled">
-                <h5 class="cat-strong">Lorem ipsum dolor sit amet.</h5>
-                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-              </cat-alert>
-            </section>
-
-            <section id="avatar">
-              <h2>Avatar</h2>
-              <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
-              <h3>Variations</h3>
-              <cat-avatar label="John Doe" size="xs" icon="sparkle-filled"></cat-avatar>
-              <cat-avatar label="John Doe" size="s" round></cat-avatar>
-              <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
-              <cat-avatar
-                label="John Doe"
-                size="l"
-                round
-                url="http://google.com"
-                src="invalidSrc"
-                icon="sparkle-filled"
-              ></cat-avatar>
-              <cat-avatar label="John Doe" size="xl" initials="Init"></cat-avatar>
-            </section>
-
-            <section id="badge">
-              <h2>Badge</h2>
-              <cat-badge>Default</cat-badge>
-
-              <h3>Variant</h3>
-              <cat-badge variant="filled">Filled</cat-badge>
-              <cat-badge variant="outlined">Outlined</cat-badge>
-
-              <h3>Color</h3>
-              <cat-badge icon="sparkle-filled" color="primary">Primary</cat-badge>
-              <cat-badge icon="sparkle-filled" color="secondary">Secondary</cat-badge>
-              <cat-badge icon="sparkle-filled" color="info">Info</cat-badge>
-              <cat-badge icon="sparkle-filled" color="success">Success</cat-badge>
-              <cat-badge icon="sparkle-filled" color="warning">Warning</cat-badge>
-              <cat-badge icon="sparkle-filled" color="danger">Danger</cat-badge>
-              <br />
-              <br />
-              <cat-badge icon="sparkle-filled" icon-right color="primary">Primary</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right color="secondary">Secondary</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right color="info">Info</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right color="success">Success</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right color="warning">Warning</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right color="danger">Danger</cat-badge>
-
-              <h3>Size</h3>
-              <cat-badge icon="sparkle-filled" size="xs">Size XS</cat-badge>
-              <cat-badge icon="sparkle-filled" size="s">Size S</cat-badge>
-              <cat-badge icon="sparkle-filled" size="m">Size M</cat-badge>
-              <cat-badge icon="sparkle-filled" size="l">Size L</cat-badge>
-              <cat-badge icon="sparkle-filled" size="xl">Size XL</cat-badge>
-              <br />
-              <br />
-              <cat-badge icon="sparkle-filled" icon-right size="xs">Size XS</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right size="s">Size S</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right size="m">Size M</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right size="l">Size L</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-right size="xl">Size XL</cat-badge>
-              <br />
-              <br />
-              <cat-badge icon="sparkle-filled" icon-only="xs" size="xs">sdfdsf sdfsdf</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-only="s" size="s">sdfdsf sdfsdf</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-only="m" size="m">sdfdsf sdfsdf</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-only="l" size="l">sdfdsf sdfsdf</cat-badge>
-              <cat-badge icon="sparkle-filled" icon-only="xl" size="xl">sdfdsf sdfsdf</cat-badge>
-
-              <h3>Round</h3>
-              <cat-badge round="true">Round</cat-badge>
-              <cat-badge round="true" color="danger" size="xs"></cat-badge>
-
-              <h3>Pulse</h3>
-              <cat-badge pulse="true">Pulse</cat-badge>
-              <cat-badge pulse="true" variant="outlined">Pulse</cat-badge>
-              <cat-badge pulse="true" round="true" color="danger" size="xs"></cat-badge>
-
-              <h3>Layout</h3>
-              <cat-badge
-                >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                labore et dolore magna aliquyam erat, sed diam voluptua.
-              </cat-badge>
-            </section>
-
-            <section id="button">
-              <h2>Button</h2>
-              <cat-button test-id="data-test">Button</cat-button>
-
-              <h3>Color & Variant</h3>
-              <cat-button icon="sparkle-filled" variant="filled" color="primary">Primary</cat-button>
-              <cat-button icon="sparkle-filled" variant="outlined" color="primary">Primary</cat-button>
-              <cat-button icon="sparkle-filled" variant="text" color="primary">Primary</cat-button>
-              <cat-button icon="sparkle-filled" variant="link" color="primary">Primary</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" variant="filled" color="secondary">Secondary</cat-button>
-              <cat-button icon="sparkle-filled" variant="outlined" color="secondary">Secondary</cat-button>
-              <cat-button icon="sparkle-filled" variant="text" color="secondary">Secondary</cat-button>
-              <cat-button icon="sparkle-filled" variant="link" color="secondary">Secondary</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" variant="filled" color="info">Info</cat-button>
-              <cat-button icon="sparkle-filled" variant="outlined" color="info">Info</cat-button>
-              <cat-button icon="sparkle-filled" variant="text" color="info">Info</cat-button>
-              <cat-button icon="sparkle-filled" variant="link" color="info">Info</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" variant="filled" color="success">Success</cat-button>
-              <cat-button icon="sparkle-filled" variant="outlined" color="success">Success</cat-button>
-              <cat-button icon="sparkle-filled" variant="text" color="success">Success</cat-button>
-              <cat-button icon="sparkle-filled" variant="link" color="success">Success</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" variant="filled" color="warning">Warning</cat-button>
-              <cat-button icon="sparkle-filled" variant="outlined" color="warning">Warning</cat-button>
-              <cat-button icon="sparkle-filled" variant="text" color="warning">Warning</cat-button>
-              <cat-button icon="sparkle-filled" variant="link" color="warning">Warning</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" variant="filled" color="danger">Danger</cat-button>
-              <cat-button icon="sparkle-filled" variant="outlined" color="danger">Danger</cat-button>
-              <cat-button icon="sparkle-filled" variant="text" color="danger">Danger</cat-button>
-              <cat-button icon="sparkle-filled" variant="link" color="danger">Danger</cat-button>
-
-              <h3>Size</h3>
-              <cat-button size="xs" icon="sparkle-filled">Size XS</cat-button>
-              <cat-button size="s" icon="sparkle-filled">Size S</cat-button>
-              <cat-button size="m" icon="sparkle-filled">Size M</cat-button>
-              <cat-button size="l" icon="sparkle-filled">Size L</cat-button>
-              <cat-button size="xl" icon="sparkle-filled">Size XL</cat-button>
-
-              <h3>Icons</h3>
-              <cat-button icon="sparkle-filled">Prefix</cat-button>
-              <cat-button icon="sparkle-filled" icon-suffix="true">Suffix</cat-button>
-              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA">Suffix</cat-button>
-
-              <h3>Icon buttons</h3>
-              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xs"></cat-button>
-              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="s"></cat-button>
-              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="m"></cat-button>
-              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="l"></cat-button>
-              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xl"></cat-button>
-
-              <h3>Icons (Responsive)</h3>
-              <cat-button icon="sparkle-filled" icon-only="xs" a11y-label="ARIA">xs</cat-button>
-              <cat-button icon="sparkle-filled" icon-only="s" a11y-label="ARIA">s</cat-button>
-              <cat-button icon="sparkle-filled" icon-only="m" a11y-label="ARIA">m</cat-button>
-              <cat-button icon="sparkle-filled" icon-only="l" a11y-label="ARIA">l</cat-button>
-              <cat-button icon="sparkle-filled" icon-only="xl" a11y-label="ARIA">xl</cat-button>
-
-              <h3>Links</h3>
-              <cat-button url="http://www.google.de">Google</cat-button>
-              <cat-button url="http://www.google.de" url-target="_blank">Google (ext.)</cat-button>
-
-              <div class="cat-mt-s">
-                <cat-button inline="true" variant="link" url="http://www.google.de">Link 1 </cat-button>
-                <cat-button inline="true" variant="link" url="http://www.google.de">Link 2</cat-button>
-              </div>
-
-              <h3>Active</h3>
-              <cat-button icon="sparkle-filled" active="true" variant="filled" color="primary">Primary</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="primary">Primary</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="text" color="primary">Primary</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" active="true" variant="filled" color="secondary">Secondary</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="secondary"
-                >Secondary
-              </cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="text" color="secondary">Secondary</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" active="true" variant="filled" color="info">Info</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="info">Info</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="text" color="info">Info</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" active="true" variant="filled" color="success">Success</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="success">Success</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="text" color="success">Success</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" active="true" variant="filled" color="warning">Warning</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="warning">Warning</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="text" color="warning">Warning</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" active="true" variant="filled" color="danger">Danger</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="danger">Danger</cat-button>
-              <cat-button icon="sparkle-filled" active="true" variant="text" color="danger">Danger</cat-button>
-
-              <h3>Disabled</h3>
-              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="primary">Primary</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="primary">Primary</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="primary">Primary</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="secondary"
-                >Secondary
-              </cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="secondary"
-                >Secondary
+          <div class="cat-flex cat-item-center cat-gap-s cat-mb-m">
+            <!-- Wide dropdown -->
+            <cat-dropdown justify focus-trap="true">
+              <cat-button slot="trigger" color="primary" variant="filled"
+              >Button with very long content so that it is very wide
               </cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="secondary">Secondary</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="info">Info</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="info">Info</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="info">Info</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="success">Success</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="success">Success</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="success">Success</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="warning">Warning</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="warning">Warning</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="warning">Warning</cat-button>
-              <br /><br />
-              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="danger">Danger</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="danger">Danger</cat-button>
-              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="danger">Danger</cat-button>
-
-              <h3>Loading</h3>
-              <cat-button loading="true" variant="filled" color="primary">Primary</cat-button>
-              <cat-button loading="true" variant="outlined" color="primary">Primary</cat-button>
-              <cat-button loading="true" variant="text" color="primary">Primary</cat-button>
-              <br /><br />
-              <cat-button loading="true" variant="filled" color="secondary">Secondary</cat-button>
-              <cat-button loading="true" variant="outlined" color="secondary">Secondary</cat-button>
-              <cat-button loading="true" variant="text" color="secondary">Secondary</cat-button>
-              <br /><br />
-              <cat-button loading="true" variant="filled" color="info">Info</cat-button>
-              <cat-button loading="true" variant="outlined" color="info">Info</cat-button>
-              <cat-button loading="true" variant="text" color="info">Info</cat-button>
-              <br /><br />
-              <cat-button loading="true" variant="filled" color="success">Success</cat-button>
-              <cat-button loading="true" variant="outlined" color="success">Success</cat-button>
-              <cat-button loading="true" variant="text" color="success">Success</cat-button>
-              <br /><br />
-              <cat-button loading="true" variant="filled" color="warning">Warning</cat-button>
-              <cat-button loading="true" variant="outlined" color="warning">Warning</cat-button>
-              <cat-button loading="true" variant="text" color="warning">Warning</cat-button>
-              <br /><br />
-              <cat-button loading="true" variant="filled" color="danger">Danger</cat-button>
-              <cat-button loading="true" variant="outlined" color="danger">Danger</cat-button>
-              <cat-button loading="true" variant="text" color="danger">Danger</cat-button>
-
-              <h3>Layout</h3>
-              <div style="width: 200px; border: 1px solid gray">
-                <cat-button icon="sparkle-filled">Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
-                <br />
-                <cat-button icon="sparkle-filled" no-ellipsis>Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
-                <br />
-                <cat-button icon="sparkle-filled" class="cat-block">Block</cat-button>
-                <cat-button icon="sparkle-filled" class="cat-block cat-text-left">Block (left)</cat-button>
-                <cat-button icon="sparkle-filled" class="cat-block cat-text-right">Block (right)</cat-button>
-              </div>
-            </section>
-
-            <section id="group-button">
-              <h2>Group button</h2>
-
-              <div style="display: flex; flex-direction: column; gap: 8px">
-                <cat-button-group a11y-label="Group button outlined">
-                  <cat-button>Left</cat-button>
-                  <cat-button>Middle</cat-button>
-                  <cat-button>Middle1</cat-button>
-                  <cat-button>Right</cat-button>
-                </cat-button-group>
-
-                <cat-button-group a11y-label="Group button filled">
-                  <cat-button variant="filled">Left</cat-button>
-                  <cat-button variant="filled">Middle</cat-button>
-                  <cat-button variant="filled">Right</cat-button>
-                </cat-button-group>
-
-                <cat-button-group a11y-label="Group button text">
-                  <cat-button variant="text">Left</cat-button>
-                  <cat-button variant="text">Middle</cat-button>
-                  <cat-button variant="text">Right</cat-button>
-                </cat-button-group>
-              </div>
-            </section>
-
-            <section id="card">
-              <h2>Card</h2>
-
-              <div class="canvas-fake">
-                <cat-card>
-                  <h3>Lorem ipsum dolor sit amet</h3>
-                  <p>
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                    labore et dolore magna aliquyam erat, sed diam voluptua.
-                  </p>
-                  <p>
-                    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
-                    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
-                    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-                  </p>
-                </cat-card>
-              </div>
-              <h3>Navigation</h3>
-              <div class="canvas-fake">
-                <cat-card>
-                  <nav>
-                    <ul>
-                      <li class="cat-nav-head">Headline</li>
-                      <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
-                      <li>
-                        <cat-button class="cat-nav-item" color="primary">Nav item 1</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" active>Nav item 2</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" color="warning">Nav item 3</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" disabled>Nav item 4</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item">Nav item 5 (long)</cat-button>
-                      </li>
-                      <li class="cat-hr"></li>
-                      <li>
-                        <cat-button class="cat-nav-item" color="danger" onclick="console.log(6)" active
-                          >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f
-                        </cat-button>
-                      </li>
-                    </ul>
-                    <hr />
-                    <ul>
-                      <li>
-                        <cat-button class="cat-nav-item" variant="outlined" color="secondary" onclick="console.log(3)"
-                          >Nav item 3
-                        </cat-button>
-                      </li>
-                    </ul>
-                  </nav>
-                </cat-card>
-              </div>
-            </section>
-
-            <section id="checkbox" class="cat-form">
-              <h2>Checkbox</h2>
-              <cat-checkbox label="Label"></cat-checkbox>
-
-              <h3>State</h3>
-              <cat-checkbox label="Disabled" disabled></cat-checkbox>
-              <cat-checkbox label="Checked" checked></cat-checkbox>
-              <cat-checkbox label="Checked disabled" checked disabled></cat-checkbox>
-              <cat-checkbox label="Indeterminate" indeterminate="true" id="indeterminate"></cat-checkbox>
-              <cat-button id="indeterminate-true">Set inteterminate true</cat-button>
-              <cat-button id="indeterminate-false">Set inteterminate false</cat-button>
-              <cat-button id="value-true">Set value true</cat-button>
-              <cat-button id="value-false">Set value false</cat-button>
-              <script>
-                document.querySelector('#indeterminate-true').addEventListener('click', () => {
-                  document.querySelector('#indeterminate').indeterminate = true;
-                });
-                document.querySelector('#indeterminate-false').addEventListener('click', () => {
-                  document.querySelector('#indeterminate').indeterminate = false;
-                });
-                document.querySelector('#value-true').addEventListener('click', () => {
-                  document.querySelector('#indeterminate').checked = true;
-                });
-                document.querySelector('#value-false').addEventListener('click', () => {
-                  document.querySelector('#indeterminate').checked = false;
-                });
-              </script>
-
-              <h3>Alignment</h3>
-              <cat-checkbox label="Label" label-left></cat-checkbox>
-
-              <h3>Slots</h3>
-              <cat-checkbox hint="This is a hint!">
-                <span slot="label">This is the <b>label</b></span>
-                <span slot="hint">This is another!</span>
-              </cat-checkbox>
-            </section>
-
-            <section id="divider">
-              <h2>Divider</h2>
-            </section>
-
-            <section id="dropdown">
-              <h2>Dropdown</h2>
-
-              <div class="cat-flex cat-item-center cat-gap-s cat-mb-m">
-                <!-- Wide dropdown -->
-                <cat-dropdown justify focus-trap="true">
-                  <cat-button slot="trigger" color="primary" variant="filled"
-                    >Button with very long content so that it is very wide
-                  </cat-button>
-                  <nav slot="content">
-                    <ul>
-                      <li class="cat-nav-head">Headline</li>
-                      <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="sparkle-filled" color="warning">Nav item 3</cat-button>
-                      </li>
-                    </ul>
-                  </nav>
-                </cat-dropdown>
-
-                <!-- Example: User menu -->
-                <cat-dropdown overflow>
-                  <cat-button slot="trigger" variant="filled" color="primary" size="m">Example User Menu</cat-button>
-                  <nav slot="content" style="min-width: 240px">
-                    <ul>
-                      <li>
-                        <cat-button class="cat-nav-item">
-                          <div class="cat-flex cat-items-center cat-gap-s">
-                            <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
-                            <div class="cat-flex cat-flex-col cat-items-start">
-                              <span>Max Mustermann</span>
-                              <span class="cat-text-s cat-muted">Open profile</span>
-                            </div>
-                          </div>
-                        </cat-button>
-                      </li>
-                      <li>
-                        <cat-dropdown placement="right-start">
-                          <cat-button slot="trigger" class="cat-nav-item" icon="status-available">Available</cat-button>
-                          <nav slot="content">
-                            <ul>
-                              <li class="cat-nav-head">Headline</li>
-                              <li class="cat-nav-text cat-muted">
-                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-                              </li>
-                              <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
-                                >Nav item 1
-                              </cat-button>
-                            </ul>
-                          </nav>
-                        </cat-dropdown>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="bookmark-outlined">Saved</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="w-document-outlined">Files</cat-button>
-                      </li>
-                      <hr />
-                      <li class="cat-nav-head">Platform</li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="settings-outlined">Administration</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="bar-chart-outlined">Analytics</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="w-hero-teaser-outlined">Manage hero teaser</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="w-alert-outlined">Reported content</cat-button>
-                      </li>
-                      <hr />
-                      <li class="cat-nav-head">Settings</li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="sliders-outlined">Account</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="bell-outlined">Notifications</cat-button>
-                      </li>
-                      <hr />
-                      <li class="cat-nav-head">Support</li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="restart-outlined">Restart tour</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="question-mark-circle-outlined">Help</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item" icon="info-circle-outlined">About</cat-button>
-                      </li>
-                      <hr />
-                      <li>
-                        <cat-button class="cat-nav-item" icon="sign-out-outlined">Log out</cat-button>
-                      </li>
-                    </ul>
-                  </nav>
-                </cat-dropdown>
-              </div>
-
-              <cat-card class="cat-flex cat-items-center cat-gap-m cat-border cat-pv-s">
-                Dropdown inside a card
-                <cat-dropdown>
-                  <cat-button slot="trigger">Click me</cat-button>
-                  <nav slot="content">
-                    <ul>
-                      <li>
-                        <cat-button class="cat-nav-item">Item A</cat-button>
-                      </li>
-                      <li>
-                        <cat-button class="cat-nav-item">Item B</cat-button>
-                      </li>
-                    </ul>
-                  </nav>
-                </cat-dropdown>
-              </cat-card>
-
-              <cat-dropdown no-auto-close>
-                <cat-button slot="trigger">Button (keep open)</cat-button>
-                <div slot="content" class="cat-flex cat-flex-col cat-p-m">
-                  <p>Here is some content.</p>
-                  <cat-button>Action</cat-button>
-                </div>
-              </cat-dropdown>
-
-              <cat-dropdown overflow>
-                <cat-button slot="trigger" color="primary" variant="filled">Nested dropdown</cat-button>
-                <nav slot="content">
-                  <ul>
-                    <li class="cat-nav-head">Headline</li>
-                    <li>
-                      <cat-dropdown placement="right-start">
-                        <cat-button slot="trigger" class="cat-nav-item" icon="sparkle-filled" color="primary"
-                          >Click one more time
-                        </cat-button>
-                        <nav slot="content">
-                          <ul>
-                            <li class="cat-nav-head">Headline</li>
-                            <li class="cat-nav-text cat-muted">
-                              Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-                            </li>
-                            <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
-                              >Nav item 1
-                            </cat-button>
-                          </ul>
-                        </nav>
-                      </cat-dropdown>
-                    </li>
-                    <li>
-                      <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
-                    </li>
-                  </ul>
-                </nav>
-              </cat-dropdown>
-            </section>
-
-            <section id="menu">
-              <h2>Menu</h2>
-
-              <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
-                <!-- Basic menu -->
-                <cat-menu>
-                  <cat-menu-item icon="edit-outlined">Edit</cat-menu-item>
-                  <cat-menu-item icon="copy-outlined">Duplicate</cat-menu-item>
-                  <cat-menu-item icon="archive-outlined">Archive</cat-menu-item>
-                  <hr />
-                  <cat-menu-item icon="trash-outlined" color="danger">Delete</cat-menu-item>
-                </cat-menu>
-
-                <!-- Menu with custom trigger -->
-                <cat-menu trigger-icon="settings-outlined" trigger-a11y-label="Settings menu">
-                  <cat-menu-item icon="user-outlined">Profile</cat-menu-item>
-                  <cat-menu-item icon="sliders-outlined">Preferences</cat-menu-item>
-                  <cat-menu-item icon="bell-outlined">Notifications</cat-menu-item>
-                  <hr />
-                  <cat-menu-item icon="sign-out-outlined">Sign out</cat-menu-item>
-                </cat-menu>
-
-                <cat-menu trigger-color="primary" trigger-variant="filled" trigger-label="Actions menu">
+              <nav slot="content">
+                <ul>
                   <li class="cat-nav-head">Headline</li>
                   <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
-                  <cat-menu-item icon="sparkle-filled" color="primary">Nav item 1</cat-menu-item>
-                  <cat-menu-item icon="sparkle-filled">Nav item 2</cat-menu-item>
-                  <cat-menu-item icon="sparkle-filled" color="warning">Nav item 3</cat-menu-item>
-                  <cat-menu-item icon="sparkle-filled" disabled>Nav item 4</cat-menu-item>
-                  <cat-menu-item>Nav item 5 (long)</cat-menu-item>
-                  <li class="cat-hr"></li>
-                  <cat-menu-item color="danger" onclick="console.log(6)"
-                    >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f
-                  </cat-menu-item>
-                  <hr />
-                  <cat-menu-item variant="outlined" onclick="console.log(3)">Nav item 3</cat-menu-item>
-                </cat-menu>
-
-                <cat-menu overflow trigger-variant="filled" trigger-label="Example User Menu">
-                  <cat-menu-item>
-                    <div class="cat-flex cat-items-center cat-gap-s">
-                      <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
-                      <div class="cat-flex cat-flex-col cat-items-start">
-                        <span>Max Mustermann</span>
-                        <span class="cat-text-s cat-muted">Open profile</span>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="sparkle-filled" color="warning">Nav item 3</cat-button>
+                  </li>
+                </ul>
+              </nav>
+            </cat-dropdown>
+
+            <!-- Example: User menu -->
+            <cat-dropdown overflow>
+              <cat-button slot="trigger" variant="filled" color="primary" size="m">Example User Menu</cat-button>
+              <nav slot="content" style="min-width: 240px">
+                <ul>
+                  <li>
+                    <cat-button class="cat-nav-item">
+                      <div class="cat-flex cat-items-center cat-gap-s">
+                        <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
+                        <div class="cat-flex cat-flex-col cat-items-start">
+                          <span>Max Mustermann</span>
+                          <span class="cat-text-s cat-muted">Open profile</span>
+                        </div>
                       </div>
-                    </div>
-                  </cat-menu-item>
-                  <cat-menu-item sub-menu>
+                    </cat-button>
+                  </li>
+                  <li>
                     <cat-dropdown placement="right-start">
                       <cat-button slot="trigger" class="cat-nav-item" icon="status-available">Available</cat-button>
                       <nav slot="content">
@@ -889,799 +721,967 @@ <h2>Menu</h2>
                           <li class="cat-nav-text cat-muted">
                             Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                           </li>
-                          <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
+                          <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
+                          >Nav item 1
+                          </cat-button>
                         </ul>
                       </nav>
                     </cat-dropdown>
-                  </cat-menu-item>
-                  <cat-menu-item icon="bookmark-outlined">Saved</cat-menu-item>
-                </cat-menu>
-              </div>
-
-              <h3>Menu Placement Examples</h3>
-              <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
-                <cat-menu placement="bottom-start" trigger-label="Bottom start menu">
-                  <cat-menu-item icon="align-left">Bottom start (default)</cat-menu-item>
-                  <cat-menu-item>Item 2</cat-menu-item>
-                  <cat-menu-item>Item 3</cat-menu-item>
-                </cat-menu>
-
-                <cat-menu placement="bottom-end" trigger-label="Bottom end menu">
-                  <cat-menu-item icon="align-right">Bottom end</cat-menu-item>
-                  <cat-menu-item>Item 2</cat-menu-item>
-                  <cat-menu-item>Item 3</cat-menu-item>
-                </cat-menu>
-
-                <cat-menu placement="top-start" trigger-label="Top start menu">
-                  <cat-menu-item icon="arrow-up">Top start</cat-menu-item>
-                  <cat-menu-item>Item 2</cat-menu-item>
-                  <cat-menu-item>Item 3</cat-menu-item>
-                </cat-menu>
-              </div>
-
-              <h3>Arrow Navigation Modes</h3>
-              <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
-                <!-- Vertical navigation (default) -->
-                <cat-menu
-                  arrow-navigation="vertical"
-                  trigger-label="Vertical navigation (default)"
-                  trigger-icon="arrows-vertical"
-                >
-                  <cat-menu-item icon="arrow-up-down-filled">Arrow Up/Down navigation</cat-menu-item>
-                  <cat-menu-item icon="list-outlined">Default for dropdown menus</cat-menu-item>
-                  <cat-menu-item icon="menu-outlined">Vertical orientation (ARIA)</cat-menu-item>
-                  <cat-menu-item icon="keyboard-outlined">Standard menu pattern</cat-menu-item>
-                </cat-menu>
-
-                <!-- Horizontal navigation -->
-                <cat-menu
-                  arrow-navigation="horizontal"
-                  trigger-label="Horizontal navigation"
-                  trigger-icon="arrows-horizontal"
-                  placement="bottom-start"
-                >
-                  <cat-menu-item icon="arrow-left-right-filled">Arrow Left/Right navigation</cat-menu-item>
-                  <cat-menu-item icon="columns-outlined">Ideal for toolbar menus</cat-menu-item>
-                  <cat-menu-item icon="layout-outlined">Horizontal orientation (ARIA)</cat-menu-item>
-                  <cat-menu-item icon="keyboard-outlined">Alternative menu pattern</cat-menu-item>
-                </cat-menu>
-              </div>
-            </section>
-
-            <section id="form">
-              <h2>Form</h2>
-              <form class="cat-form" action="." method="GET">
-                <cat-input name="field1" label="Field 1" value="value1"></cat-input>
-                <cat-textarea name="field2" label="Field 2" value="value2"></cat-textarea>
-                <cat-checkbox name="field3" label="Field 3" value="value3" checked></cat-checkbox>
-                <cat-toggle name="field4" label="Field 4" value="value4" checked></cat-toggle>
-                <cat-button submit="true">Submit</cat-button>
-              </form>
-            </section>
-
-            <section id="form-group" class="cat-form">
-              <h2>Form Group</h2>
-              <cat-form-group>
-                <cat-input label="Field 1" max-length="30"></cat-input>
-                <cat-input label="Field 2" required></cat-input>
-              </cat-form-group>
-
-              <h3>Alignment (horizontal)</h3>
-              <cat-form-group label-size="40%" horizontal>
-                <cat-input hint="This is a hint" required max-length="98">
-                  <span slot="label">This is the <b>label</b></span>
-                </cat-input>
-                <cat-input hint="NO LABEL" required></cat-input>
-                <cat-input label="Label" label-hidden="true" hint="NO LABEL" required></cat-input>
-                <cat-input label="Field 1" hint="This is a hint"></cat-input>
-                <cat-input
-                  label="Field 1"
-                  hint="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
-                ></cat-input>
-                <cat-input
-                  label="This is a very long label with some more text"
-                  required
-                  hint="This is a hint"
-                ></cat-input>
-                <cat-textarea max-length="50" label="Label" hint="This is a hint"></cat-textarea>
-                <cat-select label="Field 3"></cat-select>
-                <cat-datepicker clearable="true" a11y-label="ARIA" label="Date picker"></cat-datepicker>
-              </cat-form-group>
-
-              <h3>Auto (more required)</h3>
-              <cat-form-group>
-                <cat-input label="Field 1"></cat-input>
-                <cat-input label="Field 2" required></cat-input>
-                <cat-textarea label="Field 3" required></cat-textarea>
-              </cat-form-group>
-
-              <h3>Auto (more optional)</h3>
-              <cat-form-group>
-                <cat-input label="Field 1"></cat-input>
-                <cat-input label="Field 2"></cat-input>
-                <cat-textarea label="Field 3" required></cat-textarea>
-              </cat-form-group>
-
-              <h3>None marker</h3>
-              <cat-form-group required-marker="none">
-                <cat-input label="Field 1"></cat-input>
-                <cat-input label="Field 2"></cat-input>
-                <cat-textarea label="Field 3" required></cat-textarea>
-              </cat-form-group>
-
-              <h3>Only mark optional</h3>
-              <cat-form-group required-marker="optional">
-                <cat-input label="Field 1"></cat-input>
-                <cat-input label="Field 2"></cat-input>
-                <cat-textarea label="Field 3" required></cat-textarea>
-              </cat-form-group>
-
-              <h3>Only mark required</h3>
-              <cat-form-group required-marker="required">
-                <cat-input label="Field 1"></cat-input>
-                <cat-input label="Field 2" required></cat-input>
-                <cat-textarea label="Field 3" required></cat-textarea>
-              </cat-form-group>
-
-              <h3>Dynamic field added</h3>
-              <cat-form-group id="form-group-1">
-                <cat-input id="cat-input-1" label="Field 1"></cat-input>
-                <cat-input label="Field 2" required></cat-input>
-              </cat-form-group>
-
-              <script>
-                let input = document.getElementById('cat-input-1');
-                input.addEventListener('input', () => {
-                  let elementById = document.getElementById('time2');
-                  elementById.value = '13:58';
-                });
-                const formElem = document.getElementById('form-group-1');
-                setTimeout(() => {
-                  const htmlElement = document.createElement('cat-input');
-                  htmlElement.setAttribute('label', 'Field 3');
-                  formElem.appendChild(htmlElement);
-                }, 5000);
-              </script>
-            </section>
-
-            <section id="icon">
-              <h2>Icon</h2>
-              <cat-icon icon="sparkle-filled"></cat-icon>
-
-              <h3>Color</h3>
-              <cat-icon icon="sparkle-filled" style="color: red"></cat-icon>
-              <cat-icon icon="sparkle-filled" style="color: blue"></cat-icon>
-              <cat-icon icon="sparkle-filled" style="color: green"></cat-icon>
-
-              <h3>Size</h3>
-              <cat-icon icon="sparkle-filled" size="xs"></cat-icon>
-              <cat-icon icon="sparkle-filled" size="s"></cat-icon>
-              <cat-icon icon="sparkle-filled" size="m"></cat-icon>
-              <cat-icon icon="sparkle-filled" size="l"></cat-icon>
-              <cat-icon icon="sparkle-filled" size="xl"></cat-icon>
-              <cat-icon icon="sparkle-filled" size="inline" style="font-size: 2.5rem"></cat-icon>
-
-              <h3>Ratio</h3>
-              <cat-icon icon="sp-grid-3-cols" style="--cat-icon-ratio: 2.5"></cat-icon>
-            </section>
-
-            <section id="input" class="cat-form">
-              <h2>Input</h2>
-              <cat-input label="Label" hint="This is a hint!" placeholder="I am the placeholder">
-                <span slot="hint">This is another!</span>
-              </cat-input>
-              <cat-input label="Label" max-length="100">
-                <span slot="label">Priority Label</span>
-              </cat-input>
-              <cat-input label="Label" loading>
-                <span slot="label">Loading</span>
-              </cat-input>
-              <h3>Types</h3>
-              <cat-input label="Color" type="color"></cat-input>
-              <cat-input label="Color" type="color" clearable="true"></cat-input>
-              <cat-input label="Email" type="email"></cat-input>
-              <cat-input label="File" type="file" accept="image/png, image/jpeg" multiple></cat-input>
-              <cat-input label="Number" type="number"></cat-input>
-              <cat-input label="Password" type="password"></cat-input>
-              <cat-input label="Range" type="range"></cat-input>
-              <cat-input label="Search" type="search"></cat-input>
-              <cat-input label="Tel" type="tel"></cat-input>
-              <cat-input label="Text" type="text"></cat-input>
-              <cat-input label="Url" type="url"></cat-input>
-              <h3>Slotted Counter</h3>
-              <cat-input label="Custom counter">
-                <span slot="counter">Show any text here</span>
-              </cat-input>
-            </section>
-
-            <section id="datepicker" class="cat-form">
-              <h2>Datepicker</h2>
-              <cat-date label="New Datepicker"></cat-date>
-              <cat-time id="time2" label="New Timepicker" value="12:00"></cat-time>
-              <cat-datepicker mode="date">
-                <span slot="label">Priority Label</span>
-                <span slot="hint">Priority Hint</span>
-              </cat-datepicker>
-              <cat-datepicker mode="datetime" label="Datetime" disabled></cat-datepicker>
-              <cat-datepicker mode="time" label="Time"></cat-datepicker>
-              <cat-datepicker mode="week" label="Week"></cat-datepicker>
-              <cat-datepicker mode="daterange" label="Daterange"></cat-datepicker>
-              <h3>Inline Datepicker (new)</h3>
-              <cat-date-inline
-                value="2022-06-21"
-                label="test this is"
-                a11y-label="This is an Aria test"
-              ></cat-date-inline>
-              <h3>Inline Datepicker</h3>
-              <cat-card class="cat-inline-flex cat-flex-col cat-border">
-                <h4>Datetime</h4>
-                <cat-datepicker-inline value="2022-06-21T00:00:000Z"></cat-datepicker-inline>
-              </cat-card>
-              <h3>Nested Datepicker</h3>
-              <cat-dropdown>
-                <cat-button slot="trigger" color="primary" variant="filled">Button</cat-button>
-                <div slot="content" class="cat-p-m">
-                  <cat-input></cat-input>
-                  <cat-datepicker mode="date" label="Date"></cat-datepicker>
-                  <cat-datepicker mode="date" label="Date"></cat-datepicker>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="bookmark-outlined">Saved</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="w-document-outlined">Files</cat-button>
+                  </li>
+                  <hr />
+                  <li class="cat-nav-head">Platform</li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="settings-outlined">Administration</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="bar-chart-outlined">Analytics</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="w-hero-teaser-outlined">Manage hero teaser</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="w-alert-outlined">Reported content</cat-button>
+                  </li>
+                  <hr />
+                  <li class="cat-nav-head">Settings</li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="sliders-outlined">Account</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="bell-outlined">Notifications</cat-button>
+                  </li>
+                  <hr />
+                  <li class="cat-nav-head">Support</li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="restart-outlined">Restart tour</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="question-mark-circle-outlined">Help</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item" icon="info-circle-outlined">About</cat-button>
+                  </li>
+                  <hr />
+                  <li>
+                    <cat-button class="cat-nav-item" icon="sign-out-outlined">Log out</cat-button>
+                  </li>
+                </ul>
+              </nav>
+            </cat-dropdown>
+          </div>
+
+          <cat-card class="cat-flex cat-items-center cat-gap-m cat-border cat-pv-s">
+            Dropdown inside a card
+            <cat-dropdown>
+              <cat-button slot="trigger">Click me</cat-button>
+              <nav slot="content">
+                <ul>
+                  <li>
+                    <cat-button class="cat-nav-item">Item A</cat-button>
+                  </li>
+                  <li>
+                    <cat-button class="cat-nav-item">Item B</cat-button>
+                  </li>
+                </ul>
+              </nav>
+            </cat-dropdown>
+          </cat-card>
+
+          <cat-dropdown no-auto-close>
+            <cat-button slot="trigger">Button (keep open)</cat-button>
+            <div slot="content" class="cat-flex cat-flex-col cat-p-m">
+              <p>Here is some content.</p>
+              <cat-button>Action</cat-button>
+            </div>
+          </cat-dropdown>
+
+          <cat-dropdown overflow>
+            <cat-button slot="trigger" color="primary" variant="filled">Nested dropdown</cat-button>
+            <nav slot="content">
+              <ul>
+                <li class="cat-nav-head">Headline</li>
+                <li>
+                  <cat-dropdown placement="right-start">
+                    <cat-button slot="trigger" class="cat-nav-item" icon="sparkle-filled" color="primary"
+                    >Click one more time
+                    </cat-button>
+                    <nav slot="content">
+                      <ul>
+                        <li class="cat-nav-head">Headline</li>
+                        <li class="cat-nav-text cat-muted">
+                          Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+                        </li>
+                        <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
+                        >Nav item 1
+                        </cat-button>
+                      </ul>
+                    </nav>
+                  </cat-dropdown>
+                </li>
+                <li>
+                  <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
+                </li>
+              </ul>
+            </nav>
+          </cat-dropdown>
+        </section>
+
+        <section id="menu">
+          <h2>Menu</h2>
+
+          <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
+            <!-- Basic menu -->
+            <cat-menu>
+              <cat-menu-item icon="edit-outlined">Edit</cat-menu-item>
+              <cat-menu-item icon="copy-outlined">Duplicate</cat-menu-item>
+              <cat-menu-item icon="archive-outlined">Archive</cat-menu-item>
+              <hr />
+              <cat-menu-item icon="trash-outlined" color="danger">Delete</cat-menu-item>
+            </cat-menu>
+
+            <!-- Menu with custom trigger -->
+            <cat-menu trigger-icon="settings-outlined" trigger-a11y-label="Settings menu">
+              <cat-menu-item icon="user-outlined">Profile</cat-menu-item>
+              <cat-menu-item icon="sliders-outlined">Preferences</cat-menu-item>
+              <cat-menu-item icon="bell-outlined">Notifications</cat-menu-item>
+              <hr />
+              <cat-menu-item icon="sign-out-outlined">Sign out</cat-menu-item>
+            </cat-menu>
+
+            <cat-menu trigger-color="primary" trigger-variant="filled" trigger-label="Actions menu">
+              <li class="cat-nav-head">Headline</li>
+              <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
+              <cat-menu-item icon="sparkle-filled" color="primary">Nav item 1</cat-menu-item>
+              <cat-menu-item icon="sparkle-filled">Nav item 2</cat-menu-item>
+              <cat-menu-item icon="sparkle-filled" color="warning">Nav item 3</cat-menu-item>
+              <cat-menu-item icon="sparkle-filled" disabled>Nav item 4</cat-menu-item>
+              <cat-menu-item>Nav item 5 (long)</cat-menu-item>
+              <li class="cat-hr"></li>
+              <cat-menu-item color="danger" onclick="console.log(6)"
+              >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f
+              </cat-menu-item>
+              <hr />
+              <cat-menu-item variant="outlined" onclick="console.log(3)">Nav item 3</cat-menu-item>
+            </cat-menu>
+
+            <cat-menu overflow trigger-variant="filled" trigger-label="Example User Menu">
+              <cat-menu-item>
+                <div class="cat-flex cat-items-center cat-gap-s">
+                  <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
+                  <div class="cat-flex cat-flex-col cat-items-start">
+                    <span>Max Mustermann</span>
+                    <span class="cat-text-s cat-muted">Open profile</span>
+                  </div>
                 </div>
-              </cat-dropdown>
-            </section>
-
-            <section id="notification">
-              <h2>Notification</h2>
-              <cat-button id="notification-trigger">Show Notifications</cat-button>
-              <script type="module">
-                import { catNotificationService } from '/build/index.esm.js';
-
-                document.getElementById('notification-trigger').onclick = function () {
-                  catNotificationService.show('Item saved', {
-                    autoClose: false,
-                    closeButton: true,
-                    action: 'Show saved items'
-                  });
-                  catNotificationService.show('This is light', {
-                    mode: 'light',
-                    closeButton: true,
-                    icon: 'globe-outlined',
-                    action: 'Seite neu laden'
-                  });
-                  catNotificationService.show('Article was saved', {
-                    action: 'Undo'
-                  });
-                  catNotificationService.show('Es scheint als hättest du keine Internetverbindung mehr', {
-                    icon: 'globe-outlined',
-                    action: 'Seite neu laden'
-                  });
-                };
-              </script>
-            </section>
-
-            <section id="pagination">
-              <h2>Pagination</h2>
-              <cat-pagination page-count="10" compact></cat-pagination>
-              <br />
-              <br />
-              <cat-pagination page-count="10" size="s"></cat-pagination>
-              <br />
-              <br />
-              <cat-pagination page-count="10"></cat-pagination>
-              <br />
-              <br />
-              <cat-pagination page-count="10" variant="outlined"></cat-pagination>
-              <br />
-              <br />
-              <span>Change event demo (See console)</span>
-              <cat-pagination id="change-demo" page-count="10" variant="outlined" round></cat-pagination>
-              <script>
-                var paginationDemo = document.getElementById('change-demo');
-
-                paginationDemo.addEventListener('catChange', function (event) {
-                  console.log('Page changed!', event.detail);
-                });
-              </script>
-            </section>
-
-            <section id="radio" class="cat-form">
-              <h2>Radio</h2>
-              <cat-radio label="Label"></cat-radio>
-
-              <h3>Group</h3>
-              <cat-radio-group a11y-label="Radio Group 1" label-left>
-                <cat-radio value="one" label="Option 1 - Group 1" hint="This is a hint" checked></cat-radio>
-                <cat-radio value="two" label="Option 2 - Group 1" hint="This is a hint"></cat-radio>
-                <cat-radio value="three" label="Option 3 - Group 1" hint="This is a hint" disabled></cat-radio>
-              </cat-radio-group>
-
-              <h3>State</h3>
-              <cat-radio label="Disabled" disabled></cat-radio>
-              <cat-radio label="Checked" checked></cat-radio>
-              <cat-radio label="Checked disabled" checked disabled></cat-radio>
-
-              <h3>Alignment</h3>
-              <cat-radio label="Label" label-left></cat-radio>
-
-              <h3>Slots</h3>
-              <cat-radio hint="This is a hint!">
-                <span slot="label">This is the <b>label</b></span>
-                <span slot="hint">This is another!</span>
-              </cat-radio>
-            </section>
-
-            <section id="scrollable">
-              <h2>Scrollable</h2>
-              <cat-scrollable style="max-height: 8rem; width: 25vw">
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-              </cat-scrollable>
-            </section>
-
-            <section id="segmented-control">
-              <h2>Segmented Control</h2>
-
-              <h3>Default</h3>
-              <cat-segmented-control>
-                <cat-segment value="one">Option 1</cat-segment>
-                <cat-segment value="two">Option 2</cat-segment>
-                <cat-segment value="three">Option 3 with overflowing content</cat-segment>
-              </cat-segmented-control>
-
-              <h3>Sizes</h3>
-              <cat-segmented-control size="xs">
-                <cat-segment value="one">XS Option 1</cat-segment>
-                <cat-segment value="two">XS Option 2</cat-segment>
-                <cat-segment value="three">XS Option 3</cat-segment>
-              </cat-segmented-control>
-              <br />
-              <br />
-              <cat-segmented-control size="s">
-                <cat-segment value="one">S Option 1</cat-segment>
-                <cat-segment value="two">S Option 2</cat-segment>
-                <cat-segment value="three">S Option 3</cat-segment>
-              </cat-segmented-control>
-              <br />
-              <br />
-              <cat-segmented-control size="m">
-                <cat-segment value="one">M Option 1</cat-segment>
-                <cat-segment value="two">M Option 2</cat-segment>
-                <cat-segment value="three">M Option 3</cat-segment>
-              </cat-segmented-control>
-              <br />
-              <br />
-              <cat-segmented-control size="l">
-                <cat-segment value="one">L Option 1</cat-segment>
-                <cat-segment value="two">L Option 2</cat-segment>
-                <cat-segment value="three">L Option 3</cat-segment>
-              </cat-segmented-control>
-              <br />
-              <br />
-              <cat-segmented-control size="xl">
-                <cat-segment value="one">XL Option 1</cat-segment>
-                <cat-segment value="two">XL Option 2</cat-segment>
-                <cat-segment value="three">XL Option 3</cat-segment>
-              </cat-segmented-control>
-
-              <h3>Disabled</h3>
-              <cat-segmented-control disabled>
-                <cat-segment value="one">Option 1</cat-segment>
-                <cat-segment value="two">Option 2</cat-segment>
-                <cat-segment value="three">Option 3</cat-segment>
-              </cat-segmented-control>
-              <br />
-              <br />
-              <cat-segmented-control>
-                <cat-segment value="one">Option 1</cat-segment>
-                <cat-segment value="two" disabled>Option 2</cat-segment>
-                <cat-segment value="three">Option 3</cat-segment>
-              </cat-segmented-control>
-
-              <h3>Icons</h3>
-              <cat-segmented-control>
-                <cat-segment value="home" icon="bookmark-filled">Option 1</cat-segment>
-                <cat-segment value="settings" icon="camera-filled">Option 2</cat-segment>
-                <cat-segment value="star" icon="star-filled">Option 3</cat-segment>
-              </cat-segmented-control>
-
-              <h3>Icon Only</h3>
-              <cat-segmented-control size="xs">
-                <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
-                <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
-                <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
-              </cat-segmented-control>
-              <br />
-              <br />
-              <cat-segmented-control size="s">
-                <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
-                <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
-                <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
-              </cat-segmented-control>
-              <br />
-              <br />
-              <cat-segmented-control size="m">
-                <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
-                <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
-                <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
-              </cat-segmented-control>
-              <br />
-              <br />
-              <cat-segmented-control size="l">
-                <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
-                <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
-                <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
-              </cat-segmented-control>
-              <br />
-              <br />
-              <cat-segmented-control size="xl">
-                <cat-segment value="home" icon="bookmark-filled" icon-only></cat-segment>
-                <cat-segment value="settings" icon="camera-filled" icon-only></cat-segment>
-                <cat-segment value="star" icon="star-filled" icon-only></cat-segment>
-              </cat-segmented-control>
-            </section>
-
-            <section id="select">
-              <h2>Select</h2>
-              <cat-select-demo></cat-select-demo>
-            </section>
-
-            <section id="skeleton">
-              <h2>Skeleton</h2>
-              <cat-skeleton></cat-skeleton>
-
-              <h3>Effect</h3>
-              <cat-skeleton effect="plain"></cat-skeleton>
-              <br />
-              <cat-skeleton effect="sheen"></cat-skeleton>
-              <br />
-              <cat-skeleton effect="pulse"></cat-skeleton>
-
-              <h3>Variant</h3>
-              <cat-skeleton variant="square"></cat-skeleton>
-              <cat-skeleton variant="circle"></cat-skeleton>
-              <cat-skeleton variant="rectangle"></cat-skeleton>
-              <cat-skeleton variant="head"></cat-skeleton>
-              <cat-skeleton variant="body"></cat-skeleton>
-            </section>
-
-            <section id="spinner">
-              <h2>Spinner</h2>
-              <cat-spinner></cat-spinner>
-
-              <h3>Color</h3>
-              <cat-spinner style="color: red"></cat-spinner>
-              <cat-spinner style="color: blue"></cat-spinner>
-              <cat-spinner style="color: green"></cat-spinner>
-
-              <h3>Size</h3>
-              <cat-spinner size="xs"></cat-spinner>
-              <cat-spinner size="s"></cat-spinner>
-              <cat-spinner size="m"></cat-spinner>
-              <cat-spinner size="l"></cat-spinner>
-              <cat-spinner size="xl"></cat-spinner>
-              <cat-spinner size="inline" style="font-size: 2.5rem"></cat-spinner>
-            </section>
-
-            <section id="tabs">
-              <h2>Tabs</h2>
-              <cat-tabs>
-                <cat-tab id="tab1" label="First"></cat-tab>
-                <cat-tab label="Second"></cat-tab>
-                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-              </cat-tabs>
-              <h3>Alignment</h3>
-              <cat-tabs tabs-align="center">
-                <cat-tab label="First"></cat-tab>
-                <cat-tab label="Second"></cat-tab>
-                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-              </cat-tabs>
-              <br />
-              <br />
-              <cat-tabs tabs-align="right">
-                <cat-tab label="First"></cat-tab>
-                <cat-tab label="Second"></cat-tab>
-                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-              </cat-tabs>
-              <br />
-              <br />
-              <cat-tabs tabs-align="justify" active-tab="second">
-                <cat-tab label="First" deactivate></cat-tab>
-                <cat-tab label="Second" id="second"></cat-tab>
-                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-              </cat-tabs>
-              <script>
-                const tab = document.querySelector('#tab1');
-                setInterval(() => {
-                  tab.deactivated = true;
-                }, 5000);
-              </script>
-              <h3>More</h3>
-              <cat-tabs>
-                <cat-tab id="tab1" label="First"></cat-tab>
-                <cat-tab label="Second"></cat-tab>
-                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-                <cat-dropdown slot="more">
-                  <cat-button class="cat-tab cat-ml-auto" slot="trigger" variant="text">More</cat-button>
+              </cat-menu-item>
+              <cat-menu-item sub-menu>
+                <cat-dropdown placement="right-start">
+                  <cat-button slot="trigger" class="cat-nav-item" icon="status-available">Available</cat-button>
                   <nav slot="content">
                     <ul>
-                      <cat-button class="cat-nav-item">Nav item 1</cat-button>
-                      <cat-button class="cat-nav-item">Nav item 1</cat-button>
+                      <li class="cat-nav-head">Headline</li>
+                      <li class="cat-nav-text cat-muted">
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+                      </li>
+                      <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
                     </ul>
                   </nav>
                 </cat-dropdown>
-              </cat-tabs>
-
-              <cat-tabs adaptive active-tab-always-visible tabs-align="justify">
-                <cat-tab id="tab2" label="First"></cat-tab>
-                <cat-tab label="Second"></cat-tab>
-                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-                <cat-tab label="Fourth Fourth" icon="sparkle-filled"></cat-tab>
-                <cat-tab label="Fifth" icon="sparkle-filled"></cat-tab>
-                <cat-tab label="Sixth" icon="sparkle-filled"></cat-tab>
-                <cat-tab label="Seventh Seventh" icon="sparkle-filled"></cat-tab>
-                <cat-tab label="Eighth" icon="sparkle-filled"></cat-tab>
-                <cat-tab sticky label="Ninth" icon="sparkle-filled"></cat-tab>
-                <cat-tab label="Tenth" icon="sparkle-filled"></cat-tab>
-              </cat-tabs>
-            </section>
-
-            <section id="tags">
-              <h2>Tags</h2>
-              <cat-tag label="Tag Input" placeholder="Placeholder" hint="this is a hint"></cat-tag>
-              <cat-tag label="Tag Input" placeholder="Placeholder" disabled="true"></cat-tag>
-            </section>
-
-            <section id="textarea">
-              <h2>Textarea</h2>
-              <cat-textarea label="Label" max-length="100"></cat-textarea>
-              <h3>Slotted Counter</h3>
-              <cat-textarea label="Custom counter">
-                <span slot="counter">Show any text here</span>
-              </cat-textarea>
-              <h3>Counter w/o label</h3>
-              <cat-textarea max-length="100"></cat-textarea>
-            </section>
-
-            <section id="toggle" class="cat-form">
-              <h2>Toggle</h2>
-              <cat-toggle label="Toggle" hint="This is a hint!" label-left style="width: 500px">
-                <span slot="hint">This is another!</span>
-              </cat-toggle>
-              <cat-toggle label="Toggle"></cat-toggle>
-              <cat-toggle><label slot="label">Slotted Label</label></cat-toggle>
-              <cat-toggle label="Disabled" disabled></cat-toggle>
-              <cat-toggle label="Checked" checked></cat-toggle>
-              <cat-toggle label="Checked disabled" checked disabled></cat-toggle>
-              <cat-toggle label="Not priority label"><label slot="label">Priority Label</label></cat-toggle>
-              <cat-toggle label="Hidden label" label-hidden="true"></cat-toggle>
-            </section>
-
-            <section id="tooltip">
-              <h2>Tooltip</h2>
-              <cat-tooltip content="This is a tooltip">
-                <cat-button>Button</cat-button>
-              </cat-tooltip>
-              <cat-tooltip>
-                <cat-button>Button</cat-button>
-                <div slot="content">
-                  <h2>Tooltip</h2>
-                  <p>This is a <b>fancy</b> tooltip<br />with some more lines.</p>
-                </div>
-              </cat-tooltip>
-              <h3>Size</h3>
-              <cat-tooltip size="s" content="This is a small tooltip">
-                <p class="cat-inline-flex">Hover Me (S)</p>
-              </cat-tooltip>
-              <br />
-              <cat-tooltip size="s" round="true" content="This is a small tooltip">
-                <p class="cat-inline-flex">Hover Me (S round)</p>
-              </cat-tooltip>
-              <br />
-              <cat-tooltip size="m" content="This is a regular tooltip">
-                <p class="cat-inline-flex">Hover Me (M)</p>
-              </cat-tooltip>
-              <br />
-              <cat-tooltip size="m" round="true" content="This is a regular tooltip">
-                <p class="cat-inline-flex">Hover Me (M round)</p>
-              </cat-tooltip>
-              <br />
-              <cat-tooltip size="l" content="This is a large tooltip">
-                <p class="cat-inline-flex">Hover Me (L)</p>
-              </cat-tooltip>
-              <br />
-              <cat-tooltip size="l" round="true" content="This is a large tooltip">
-                <p class="cat-inline-flex">Hover Me (L round)</p>
-              </cat-tooltip>
-              <h3>Round</h3>
-              <cat-tooltip round="true" content="This is a round tooltip">
-                <p class="cat-inline-flex">Hover Me (round)</p>
-              </cat-tooltip>
-              <h3>Async</h3>
-              <cat-tooltip id="async-tooltip" placement="bottom-end">
-                <p class="cat-inline-flex">Hover Me (async)</p>
-              </cat-tooltip>
-              <script>
-                const tooltipElem = document.getElementById('async-tooltip');
-                setInterval(() => {
-                  tooltipElem.content = 'This is an async tooltip';
-                }, 1000);
-              </script>
-            </section>
+              </cat-menu-item>
+              <cat-menu-item icon="bookmark-outlined">Saved</cat-menu-item>
+            </cat-menu>
           </div>
+
+          <h3>Menu Placement Examples</h3>
+          <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
+            <cat-menu placement="bottom-start" trigger-label="Bottom start menu">
+              <cat-menu-item icon="align-left">Bottom start (default)</cat-menu-item>
+              <cat-menu-item>Item 2</cat-menu-item>
+              <cat-menu-item>Item 3</cat-menu-item>
+            </cat-menu>
+
+            <cat-menu placement="bottom-end" trigger-label="Bottom end menu">
+              <cat-menu-item icon="align-right">Bottom end</cat-menu-item>
+              <cat-menu-item>Item 2</cat-menu-item>
+              <cat-menu-item>Item 3</cat-menu-item>
+            </cat-menu>
+
+            <cat-menu placement="top-start" trigger-label="Top start menu">
+              <cat-menu-item icon="arrow-up">Top start</cat-menu-item>
+              <cat-menu-item>Item 2</cat-menu-item>
+              <cat-menu-item>Item 3</cat-menu-item>
+            </cat-menu>
+          </div>
+
+          <h3>Arrow Navigation Modes</h3>
+          <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
+            <!-- Vertical navigation (default) -->
+            <cat-menu
+              arrow-navigation="vertical"
+              trigger-label="Vertical navigation (default)"
+              trigger-icon="arrows-vertical"
+            >
+              <cat-menu-item icon="arrow-up-down-filled">Arrow Up/Down navigation</cat-menu-item>
+              <cat-menu-item icon="list-outlined">Default for dropdown menus</cat-menu-item>
+              <cat-menu-item icon="menu-outlined">Vertical orientation (ARIA)</cat-menu-item>
+              <cat-menu-item icon="keyboard-outlined">Standard menu pattern</cat-menu-item>
+            </cat-menu>
+
+            <!-- Horizontal navigation -->
+            <cat-menu
+              arrow-navigation="horizontal"
+              trigger-label="Horizontal navigation"
+              trigger-icon="arrows-horizontal"
+              placement="bottom-start"
+            >
+              <cat-menu-item icon="arrow-left-right-filled">Arrow Left/Right navigation</cat-menu-item>
+              <cat-menu-item icon="columns-outlined">Ideal for toolbar menus</cat-menu-item>
+              <cat-menu-item icon="layout-outlined">Horizontal orientation (ARIA)</cat-menu-item>
+              <cat-menu-item icon="keyboard-outlined">Alternative menu pattern</cat-menu-item>
+            </cat-menu>
+          </div>
+        </section>
+
+        <section id="form">
+          <h2>Form</h2>
+          <form class="cat-form" action="." method="GET">
+            <cat-input name="field1" label="Field 1" value="value1"></cat-input>
+            <cat-textarea name="field2" label="Field 2" value="value2"></cat-textarea>
+            <cat-checkbox name="field3" label="Field 3" value="value3" checked></cat-checkbox>
+            <cat-toggle name="field4" label="Field 4" value="value4" checked></cat-toggle>
+            <cat-button submit="true">Submit</cat-button>
+          </form>
+        </section>
+
+        <section id="form-group" class="cat-form">
+          <h2>Form Group</h2>
+          <cat-form-group>
+            <cat-input label="Field 1" max-length="30"></cat-input>
+            <cat-input label="Field 2" required></cat-input>
+          </cat-form-group>
+
+          <h3>Alignment (horizontal)</h3>
+          <cat-form-group label-size="40%" horizontal>
+            <cat-input hint="This is a hint" required max-length="98">
+              <span slot="label">This is the <b>label</b></span>
+            </cat-input>
+            <cat-input hint="NO LABEL" required></cat-input>
+            <cat-input label="Label" label-hidden="true" hint="NO LABEL" required></cat-input>
+            <cat-input label="Field 1" hint="This is a hint"></cat-input>
+            <cat-input
+              label="Field 1"
+              hint="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+            ></cat-input>
+            <cat-input
+              label="This is a very long label with some more text"
+              required
+              hint="This is a hint"
+            ></cat-input>
+            <cat-textarea max-length="50" label="Label" hint="This is a hint"></cat-textarea>
+            <cat-select label="Field 3"></cat-select>
+            <cat-datepicker clearable="true" a11y-label="ARIA" label="Date picker"></cat-datepicker>
+          </cat-form-group>
+
+          <h3>Auto (more required)</h3>
+          <cat-form-group>
+            <cat-input label="Field 1"></cat-input>
+            <cat-input label="Field 2" required></cat-input>
+            <cat-textarea label="Field 3" required></cat-textarea>
+          </cat-form-group>
+
+          <h3>Auto (more optional)</h3>
+          <cat-form-group>
+            <cat-input label="Field 1"></cat-input>
+            <cat-input label="Field 2"></cat-input>
+            <cat-textarea label="Field 3" required></cat-textarea>
+          </cat-form-group>
+
+          <h3>None marker</h3>
+          <cat-form-group required-marker="none">
+            <cat-input label="Field 1"></cat-input>
+            <cat-input label="Field 2"></cat-input>
+            <cat-textarea label="Field 3" required></cat-textarea>
+          </cat-form-group>
+
+          <h3>Only mark optional</h3>
+          <cat-form-group required-marker="optional">
+            <cat-input label="Field 1"></cat-input>
+            <cat-input label="Field 2"></cat-input>
+            <cat-textarea label="Field 3" required></cat-textarea>
+          </cat-form-group>
+
+          <h3>Only mark required</h3>
+          <cat-form-group required-marker="required">
+            <cat-input label="Field 1"></cat-input>
+            <cat-input label="Field 2" required></cat-input>
+            <cat-textarea label="Field 3" required></cat-textarea>
+          </cat-form-group>
+
+          <h3>Dynamic field added</h3>
+          <cat-form-group id="form-group-1">
+            <cat-input id="cat-input-1" label="Field 1"></cat-input>
+            <cat-input label="Field 2" required></cat-input>
+          </cat-form-group>
+
           <script>
-            // --- init navigation
-            const navbar = document.getElementById('nav');
-            const scrollspy = VanillaScrollspy(navbar);
-            scrollspy.init();
+            let input = document.getElementById('cat-input-1');
+            input.addEventListener('input', () => {
+              let elementById = document.getElementById('time2');
+              elementById.value = '13:58';
+            });
+            const formElem = document.getElementById('form-group-1');
+            setTimeout(() => {
+              const htmlElement = document.createElement('cat-input');
+              htmlElement.setAttribute('label', 'Field 3');
+              formElem.appendChild(htmlElement);
+            }, 5000);
           </script>
-        </div>
-      </div>
+        </section>
 
-      <!-- CATALYST TEXT -->
-      <div id="tab-text-content" style="display: none">
-        <section id="typo" class="typography">
-          <!-- Sidebar -->
-          <aside>
-            <!-- Headings -->
-            <div class="cat-flex cat-flex-col cat-gap-s">
-              <h6 class="cat-muted cat-mb-l">Headline styles</h6>
-              <h1>Whereas recognition of the inherent dignity</h1>
-              <span class="cat-mono-s cat-muted">h1, .cat-h1</span>
-              <hr />
-              <h2>Whereas recognition of the inherent dignity</h2>
-              <span class="cat-mono-s cat-muted">h2, .cat-h2</span>
-              <hr />
-              <h3>Whereas recognition of the inherent dignity</h3>
-              <span class="cat-mono-s cat-muted">h3, .cat-h3</span>
-              <hr />
-              <h4>Whereas recognition of the inherent dignity</h4>
-              <span class="cat-mono-s cat-muted">h4, .cat-h4</span>
-              <hr />
-              <h5>Whereas recognition of the inherent dignity</h5>
-              <span class="cat-mono-s cat-muted">h5, .cat-h5</span>
-              <hr />
-              <h6>Whereas recognition of the inherent dignity</h6>
-              <span class="cat-mono-s cat-muted">h6, .cat-h6</span>
+        <section id="icon">
+          <h2>Icon</h2>
+          <cat-icon icon="sparkle-filled"></cat-icon>
+
+          <h3>Color</h3>
+          <cat-icon icon="sparkle-filled" style="color: red"></cat-icon>
+          <cat-icon icon="sparkle-filled" style="color: blue"></cat-icon>
+          <cat-icon icon="sparkle-filled" style="color: green"></cat-icon>
+
+          <h3>Size</h3>
+          <cat-icon icon="sparkle-filled" size="xs"></cat-icon>
+          <cat-icon icon="sparkle-filled" size="s"></cat-icon>
+          <cat-icon icon="sparkle-filled" size="m"></cat-icon>
+          <cat-icon icon="sparkle-filled" size="l"></cat-icon>
+          <cat-icon icon="sparkle-filled" size="xl"></cat-icon>
+          <cat-icon icon="sparkle-filled" size="inline" style="font-size: 2.5rem"></cat-icon>
+
+          <h3>Ratio</h3>
+          <cat-icon icon="sp-grid-3-cols" style="--cat-icon-ratio: 2.5"></cat-icon>
+        </section>
+
+        <section id="input" class="cat-form">
+          <h2>Input</h2>
+          <cat-input label="Label" hint="This is a hint!" placeholder="I am the placeholder">
+            <span slot="hint">This is another!</span>
+          </cat-input>
+          <cat-input label="Label" max-length="100">
+            <span slot="label">Priority Label</span>
+          </cat-input>
+          <cat-input label="Label" loading>
+            <span slot="label">Loading</span>
+          </cat-input>
+          <h3>Types</h3>
+          <cat-input label="Color" type="color"></cat-input>
+          <cat-input label="Color" type="color" clearable="true"></cat-input>
+          <cat-input label="Email" type="email"></cat-input>
+          <cat-input label="File" type="file" accept="image/png, image/jpeg" multiple></cat-input>
+          <cat-input label="Number" type="number"></cat-input>
+          <cat-input label="Password" type="password"></cat-input>
+          <cat-input label="Range" type="range"></cat-input>
+          <cat-input label="Search" type="search"></cat-input>
+          <cat-input label="Tel" type="tel"></cat-input>
+          <cat-input label="Text" type="text"></cat-input>
+          <cat-input label="Url" type="url"></cat-input>
+          <h3>Slotted Counter</h3>
+          <cat-input label="Custom counter">
+            <span slot="counter">Show any text here</span>
+          </cat-input>
+        </section>
+
+        <section id="datepicker" class="cat-form">
+          <h2>Datepicker</h2>
+          <cat-date label="New Datepicker"></cat-date>
+          <cat-time id="time2" label="New Timepicker" value="12:00"></cat-time>
+          <cat-datepicker mode="date">
+            <span slot="label">Priority Label</span>
+            <span slot="hint">Priority Hint</span>
+          </cat-datepicker>
+          <cat-datepicker mode="datetime" label="Datetime" disabled></cat-datepicker>
+          <cat-datepicker mode="time" label="Time"></cat-datepicker>
+          <cat-datepicker mode="week" label="Week"></cat-datepicker>
+          <cat-datepicker mode="daterange" label="Daterange"></cat-datepicker>
+          <h3>Inline Datepicker (new)</h3>
+          <cat-date-inline
+            value="2022-06-21"
+            label="test this is"
+            a11y-label="This is an Aria test"
+          ></cat-date-inline>
+          <h3>Inline Datepicker</h3>
+          <cat-card class="cat-inline-flex cat-flex-col cat-border">
+            <h4>Datetime</h4>
+            <cat-datepicker-inline value="2022-06-21T00:00:000Z"></cat-datepicker-inline>
+          </cat-card>
+          <h3>Nested Datepicker</h3>
+          <cat-dropdown>
+            <cat-button slot="trigger" color="primary" variant="filled">Button</cat-button>
+            <div slot="content" class="cat-p-m">
+              <cat-input></cat-input>
+              <cat-datepicker mode="date" label="Date"></cat-datepicker>
+              <cat-datepicker mode="date" label="Date"></cat-datepicker>
             </div>
-            <!-- Body styles -->
-            <div class="cat-flex cat-flex-col cat-gap-s">
-              <h6 class="cat-muted cat-mb-l">Body styles</h6>
-
-              <p class="cat-ellipsis-2 cat-lead">
-                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-                reputation. Everyone has the right to the protection of the law against such interference or attacks.
-              </p>
-              <span class="cat-mono-s cat-muted">Lead, .cat-lead</span>
-              <hr />
-              <p class="cat-ellipsis-2 cat-text-xl">
-                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-                reputation. Everyone has the right to the protection of the law against such interference or attacks.
-              </p>
-              <span class="cat-mono-s cat-muted">Body XL, .cat-text-xl</span>
-              <hr />
-              <p class="cat-ellipsis-2 cat-text-l">
-                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-                reputation. Everyone has the right to the protection of the law against such interference or attacks.
-              </p>
-              <span class="cat-mono-s cat-muted">Body L, .cat-text-l</span>
-              <hr />
-              <p class="cat-ellipsis-2">
-                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-                reputation. Everyone has the right to the protection of the law against such interference or attacks.
-              </p>
-              <span class="cat-mono-s cat-muted">Body M (Default), .cat-text-m</span>
-              <hr />
-              <p class="cat-ellipsis-2 cat-text-s">
-                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-                reputation. Everyone has the right to the protection of the law against such interference or attacks.
-              </p>
-              <span class="cat-mono-s cat-muted">Body S, .cat-text-s</span>
-              <hr />
-              <p class="cat-ellipsis-2 cat-text-xs">
-                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-                reputation. Everyone has the right to the protection of the law against such interference or attacks.
-              </p>
-              <span class="cat-mono-s cat-muted">Body XS, .cat-text-xs</span>
+          </cat-dropdown>
+        </section>
+
+        <section id="notification">
+          <h2>Notification</h2>
+          <cat-button id="notification-trigger">Show Notifications</cat-button>
+          <script type="module">
+            import { catNotificationService } from '/build/index.esm.js';
+
+            document.getElementById('notification-trigger').onclick = function() {
+              catNotificationService.show('Item saved', {
+                autoClose: false,
+                closeButton: true,
+                action: 'Show saved items'
+              });
+              catNotificationService.show('This is light', {
+                mode: 'light',
+                closeButton: true,
+                icon: 'globe-outlined',
+                action: 'Seite neu laden'
+              });
+              catNotificationService.show('Article was saved', {
+                action: 'Undo'
+              });
+              catNotificationService.show('Es scheint als hättest du keine Internetverbindung mehr', {
+                icon: 'globe-outlined',
+                action: 'Seite neu laden'
+              });
+            };
+          </script>
+        </section>
+
+        <section id="pagination">
+          <h2>Pagination</h2>
+          <cat-pagination page-count="10" compact></cat-pagination>
+          <br />
+          <br />
+          <cat-pagination page-count="10" size="s"></cat-pagination>
+          <br />
+          <br />
+          <cat-pagination page-count="10"></cat-pagination>
+          <br />
+          <br />
+          <cat-pagination page-count="10" variant="outlined"></cat-pagination>
+          <br />
+          <br />
+          <span>Change event demo (See console)</span>
+          <cat-pagination id="change-demo" page-count="10" variant="outlined" round></cat-pagination>
+          <script>
+            var paginationDemo = document.getElementById('change-demo');
+
+            paginationDemo.addEventListener('catChange', function(event) {
+              console.log('Page changed!', event.detail);
+            });
+          </script>
+        </section>
+
+        <section id="radio" class="cat-form">
+          <h2>Radio</h2>
+          <cat-radio label="Label"></cat-radio>
+
+          <h3>Group</h3>
+          <cat-radio-group a11y-label="Radio Group 1" label-left>
+            <cat-radio value="one" label="Option 1 - Group 1" hint="This is a hint" checked></cat-radio>
+            <cat-radio value="two" label="Option 2 - Group 1" hint="This is a hint"></cat-radio>
+            <cat-radio value="three" label="Option 3 - Group 1" hint="This is a hint" disabled></cat-radio>
+          </cat-radio-group>
+
+          <h3>State</h3>
+          <cat-radio label="Disabled" disabled></cat-radio>
+          <cat-radio label="Checked" checked></cat-radio>
+          <cat-radio label="Checked disabled" checked disabled></cat-radio>
+
+          <h3>Alignment</h3>
+          <cat-radio label="Label" label-left></cat-radio>
+
+          <h3>Slots</h3>
+          <cat-radio hint="This is a hint!">
+            <span slot="label">This is the <b>label</b></span>
+            <span slot="hint">This is another!</span>
+          </cat-radio>
+        </section>
+
+        <section id="scrollable">
+          <h2>Scrollable</h2>
+          <cat-scrollable style="max-height: 8rem; width: 25vw">
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+          </cat-scrollable>
+        </section>
+
+        <section id="segmented-control">
+          <h2>Segmented Control</h2>
+
+          <h3>Default</h3>
+          <cat-segmented-control>
+            <cat-segment value="one">Option 1</cat-segment>
+            <cat-segment value="two">Option 2</cat-segment>
+            <cat-segment value="three">Option 3 with overflowing content</cat-segment>
+          </cat-segmented-control>
+
+          <h3>Sizes</h3>
+          <cat-segmented-control size="xs">
+            <cat-segment value="one">XS Option 1</cat-segment>
+            <cat-segment value="two">XS Option 2</cat-segment>
+            <cat-segment value="three">XS Option 3</cat-segment>
+          </cat-segmented-control>
+          <br />
+          <br />
+          <cat-segmented-control size="s">
+            <cat-segment value="one">S Option 1</cat-segment>
+            <cat-segment value="two">S Option 2</cat-segment>
+            <cat-segment value="three">S Option 3</cat-segment>
+          </cat-segmented-control>
+          <br />
+          <br />
+          <cat-segmented-control size="m">
+            <cat-segment value="one">M Option 1</cat-segment>
+            <cat-segment value="two">M Option 2</cat-segment>
+            <cat-segment value="three">M Option 3</cat-segment>
+          </cat-segmented-control>
+          <br />
+          <br />
+          <cat-segmented-control size="l">
+            <cat-segment value="one">L Option 1</cat-segment>
+            <cat-segment value="two">L Option 2</cat-segment>
+            <cat-segment value="three">L Option 3</cat-segment>
+          </cat-segmented-control>
+          <br />
+          <br />
+          <cat-segmented-control size="xl">
+            <cat-segment value="one">XL Option 1</cat-segment>
+            <cat-segment value="two">XL Option 2</cat-segment>
+            <cat-segment value="three">XL Option 3</cat-segment>
+          </cat-segmented-control>
+
+          <h3>Disabled</h3>
+          <cat-segmented-control disabled>
+            <cat-segment value="one">Option 1</cat-segment>
+            <cat-segment value="two">Option 2</cat-segment>
+            <cat-segment value="three">Option 3</cat-segment>
+          </cat-segmented-control>
+          <br />
+          <br />
+          <cat-segmented-control>
+            <cat-segment value="one">Option 1</cat-segment>
+            <cat-segment value="two" disabled>Option 2</cat-segment>
+            <cat-segment value="three">Option 3</cat-segment>
+          </cat-segmented-control>
+
+          <h3>Icons</h3>
+          <cat-segmented-control>
+            <cat-segment value="home" icon="bookmark-filled">Option 1</cat-segment>
+            <cat-segment value="settings" icon="camera-filled">Option 2</cat-segment>
+            <cat-segment value="star" icon="star-filled">Option 3</cat-segment>
+          </cat-segmented-control>
+
+          <h3>Icon Only</h3>
+          <cat-segmented-control size="xs">
+            <cat-segment value="home" icon="bookmark-filled" icon-only a11y-label="Option 1"></cat-segment>
+            <cat-segment value="settings" icon="camera-filled" icon-only a11y-label="Option 2"></cat-segment>
+            <cat-segment value="star" icon="star-filled" icon-only a11y-label="Option 3"></cat-segment>
+          </cat-segmented-control>
+          <br />
+          <br />
+          <cat-segmented-control size="s">
+            <cat-segment value="home" icon="bookmark-filled" icon-only a11y-label="Option 1"></cat-segment>
+            <cat-segment value="settings" icon="camera-filled" icon-only a11y-label="Option 2"></cat-segment>
+            <cat-segment value="star" icon="star-filled" icon-only a11y-label="Option 3"></cat-segment>
+          </cat-segmented-control>
+          <br />
+          <br />
+          <cat-segmented-control size="m">
+            <cat-segment value="home" icon="bookmark-filled" icon-only a11y-label="Option 1"></cat-segment>
+            <cat-segment value="settings" icon="camera-filled" icon-only a11y-label="Option 2"></cat-segment>
+            <cat-segment value="star" icon="star-filled" icon-only a11y-label="Option 3"></cat-segment>
+          </cat-segmented-control>
+          <br />
+          <br />
+          <cat-segmented-control size="l">
+            <cat-segment value="home" icon="bookmark-filled" icon-only a11y-label="Option 1"></cat-segment>
+            <cat-segment value="settings" icon="camera-filled" icon-only a11y-label="Option 2"></cat-segment>
+            <cat-segment value="star" icon="star-filled" icon-only a11y-label="Option 3"></cat-segment>
+          </cat-segmented-control>
+          <br />
+          <br />
+          <cat-segmented-control size="xl">
+            <cat-segment value="home" icon="bookmark-filled" icon-only a11y-label="Option 1"></cat-segment>
+            <cat-segment value="settings" icon="camera-filled" icon-only a11y-label="Option 2"></cat-segment>
+            <cat-segment value="star" icon="star-filled" icon-only a11y-label="Option 3"></cat-segment>
+          </cat-segmented-control>
+        </section>
+
+        <section id="select">
+          <h2>Select</h2>
+          <cat-select-demo></cat-select-demo>
+        </section>
+
+        <section id="skeleton">
+          <h2>Skeleton</h2>
+          <cat-skeleton></cat-skeleton>
+
+          <h3>Effect</h3>
+          <cat-skeleton effect="plain"></cat-skeleton>
+          <br />
+          <cat-skeleton effect="sheen"></cat-skeleton>
+          <br />
+          <cat-skeleton effect="pulse"></cat-skeleton>
+
+          <h3>Variant</h3>
+          <cat-skeleton variant="square"></cat-skeleton>
+          <cat-skeleton variant="circle"></cat-skeleton>
+          <cat-skeleton variant="rectangle"></cat-skeleton>
+          <cat-skeleton variant="head"></cat-skeleton>
+          <cat-skeleton variant="body"></cat-skeleton>
+        </section>
+
+        <section id="spinner">
+          <h2>Spinner</h2>
+          <cat-spinner></cat-spinner>
+
+          <h3>Color</h3>
+          <cat-spinner style="color: red"></cat-spinner>
+          <cat-spinner style="color: blue"></cat-spinner>
+          <cat-spinner style="color: green"></cat-spinner>
+
+          <h3>Size</h3>
+          <cat-spinner size="xs"></cat-spinner>
+          <cat-spinner size="s"></cat-spinner>
+          <cat-spinner size="m"></cat-spinner>
+          <cat-spinner size="l"></cat-spinner>
+          <cat-spinner size="xl"></cat-spinner>
+          <cat-spinner size="inline" style="font-size: 2.5rem"></cat-spinner>
+        </section>
+
+        <section id="tabs">
+          <h2>Tabs</h2>
+          <cat-tabs>
+            <cat-tab id="tab1" label="First"></cat-tab>
+            <cat-tab label="Second"></cat-tab>
+            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+          </cat-tabs>
+          <h3>Alignment</h3>
+          <cat-tabs tabs-align="center">
+            <cat-tab label="First"></cat-tab>
+            <cat-tab label="Second"></cat-tab>
+            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+          </cat-tabs>
+          <br />
+          <br />
+          <cat-tabs tabs-align="right">
+            <cat-tab label="First"></cat-tab>
+            <cat-tab label="Second"></cat-tab>
+            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+          </cat-tabs>
+          <br />
+          <br />
+          <cat-tabs tabs-align="justify" active-tab="second">
+            <cat-tab label="First" deactivate></cat-tab>
+            <cat-tab label="Second" id="second"></cat-tab>
+            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+          </cat-tabs>
+          <script>
+            const tab = document.querySelector('#tab1');
+            setInterval(() => {
+              tab.deactivated = true;
+            }, 5000);
+          </script>
+          <h3>More</h3>
+          <cat-tabs>
+            <cat-tab id="tab1" label="First"></cat-tab>
+            <cat-tab label="Second"></cat-tab>
+            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+            <cat-dropdown slot="more">
+              <cat-button class="cat-tab cat-ml-auto" slot="trigger" variant="text">More</cat-button>
+              <nav slot="content">
+                <ul>
+                  <cat-button class="cat-nav-item">Nav item 1</cat-button>
+                  <cat-button class="cat-nav-item">Nav item 1</cat-button>
+                </ul>
+              </nav>
+            </cat-dropdown>
+          </cat-tabs>
+
+          <cat-tabs adaptive active-tab-always-visible tabs-align="justify">
+            <cat-tab id="tab2" label="First"></cat-tab>
+            <cat-tab label="Second"></cat-tab>
+            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+            <cat-tab label="Fourth Fourth" icon="sparkle-filled"></cat-tab>
+            <cat-tab label="Fifth" icon="sparkle-filled"></cat-tab>
+            <cat-tab label="Sixth" icon="sparkle-filled"></cat-tab>
+            <cat-tab label="Seventh Seventh" icon="sparkle-filled"></cat-tab>
+            <cat-tab label="Eighth" icon="sparkle-filled"></cat-tab>
+            <cat-tab sticky label="Ninth" icon="sparkle-filled"></cat-tab>
+            <cat-tab label="Tenth" icon="sparkle-filled"></cat-tab>
+          </cat-tabs>
+        </section>
+
+        <section id="tags">
+          <h2>Tags</h2>
+          <cat-tag label="Tag Input" placeholder="Placeholder" hint="this is a hint"></cat-tag>
+          <cat-tag label="Tag Input" placeholder="Placeholder" disabled="true"></cat-tag>
+        </section>
+
+        <section id="textarea">
+          <h2>Textarea</h2>
+          <cat-textarea label="Label" max-length="100"></cat-textarea>
+          <h3>Slotted Counter</h3>
+          <cat-textarea label="Custom counter">
+            <span slot="counter">Show any text here</span>
+          </cat-textarea>
+          <h3>Counter w/o label</h3>
+          <cat-textarea max-length="100"></cat-textarea>
+        </section>
+
+        <section id="toggle" class="cat-form">
+          <h2>Toggle</h2>
+          <cat-toggle label="Toggle" hint="This is a hint!" label-left style="width: 500px">
+            <span slot="hint">This is another!</span>
+          </cat-toggle>
+          <cat-toggle label="Toggle"></cat-toggle>
+          <cat-toggle><label slot="label">Slotted Label</label></cat-toggle>
+          <cat-toggle label="Disabled" disabled></cat-toggle>
+          <cat-toggle label="Checked" checked></cat-toggle>
+          <cat-toggle label="Checked disabled" checked disabled></cat-toggle>
+          <cat-toggle label="Not priority label"><label slot="label">Priority Label</label></cat-toggle>
+          <cat-toggle label="Hidden label" label-hidden="true"></cat-toggle>
+        </section>
+
+        <section id="tooltip">
+          <h2>Tooltip</h2>
+          <cat-tooltip content="This is a tooltip">
+            <cat-button>Button</cat-button>
+          </cat-tooltip>
+          <cat-tooltip>
+            <cat-button>Button</cat-button>
+            <div slot="content">
+              <h2>Tooltip</h2>
+              <p>This is a <b>fancy</b> tooltip<br />with some more lines.</p>
             </div>
-          </aside>
-          <!-- Example typesetting -->
-          <article class="cat-article example">
-            <h6 class="cat-muted cat-mb-l">Example article</h6>
-            <h1>Typesetting test</h1>
-            <p class="cat-lead">
-              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-              et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-              Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
-              amet.
-            </p>
-            <figure>
-              <img
-                src="https://cdn.sanity.io/images/599r6htc/localized/10e55cde1be89fb32aa3d7414fa3cd83b0859a51-3264x1836.jpg"
-                alt=""
-              />
-            </figure>
-            <h2>Dolor Vero</h2>
-            <h3>Consetetur sadipscing elitr</h3>
-            <p>
-              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
-              sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-              nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
-              accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
-              ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
-              consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
-              qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor
-              sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
-              aliquam erat volutpat.
-            </p>
-            <p>
-              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
-              sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
-            </p>
-            <h2>Lorem Ipsum</h2>
-            <p>
-              Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
-              ea commodo consequat.
-            </p>
-            <h3>Vulputate velit esse</h3>
-            <p>
-              Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
-              eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
-              zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
-              option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
-            </p>
-            <ol>
-              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-              <li>Integer nec odio. Praesent libero.</li>
-              <li>Sed cursus ante dapibus diam. Sed nisi.</li>
-              <li>Nulla quis sem at nibh elementum imperdiet.</li>
-              <li>Duis sagittis ipsum. Praesent mauris.</li>
-              <li>Fusce nec tellus sed augue semper porta.</li>
-              <li>Mauris massa. Vestibulum lacinia arcu eget nulla.</li>
-              <li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
-              <li>Curabitur sodales ligula in libero.</li>
-              <li>Sed dignissim lacinia nunc. Curabitur tortor.</li>
-            </ol>
-            <hr />
-            <h2>What does all of that mean for us?</h2>
-            <p>
-              Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
-              amet, consetetur sadipscing elitr.
-            </p>
-            <blockquote>
-              "The only way to do great work is to love what you do."
-              <span>– Steve Jobs</span>
-            </blockquote>
-            <h3>Understanding Employee Engagement</h3>
-            <figure>
-              <iframe
-                width="100%"
-                height="350px"
-                src="https://www.youtube-nocookie.com/embed/2t2BBU0gdO0?controls=0"
-                title="YouTube video player"
-                frameborder="0"
-                allow="
+          </cat-tooltip>
+          <h3>Size</h3>
+          <cat-tooltip size="s" content="This is a small tooltip">
+            <p class="cat-inline-flex">Hover Me (S)</p>
+          </cat-tooltip>
+          <br />
+          <cat-tooltip size="s" round="true" content="This is a small tooltip">
+            <p class="cat-inline-flex">Hover Me (S round)</p>
+          </cat-tooltip>
+          <br />
+          <cat-tooltip size="m" content="This is a regular tooltip">
+            <p class="cat-inline-flex">Hover Me (M)</p>
+          </cat-tooltip>
+          <br />
+          <cat-tooltip size="m" round="true" content="This is a regular tooltip">
+            <p class="cat-inline-flex">Hover Me (M round)</p>
+          </cat-tooltip>
+          <br />
+          <cat-tooltip size="l" content="This is a large tooltip">
+            <p class="cat-inline-flex">Hover Me (L)</p>
+          </cat-tooltip>
+          <br />
+          <cat-tooltip size="l" round="true" content="This is a large tooltip">
+            <p class="cat-inline-flex">Hover Me (L round)</p>
+          </cat-tooltip>
+          <h3>Round</h3>
+          <cat-tooltip round="true" content="This is a round tooltip">
+            <p class="cat-inline-flex">Hover Me (round)</p>
+          </cat-tooltip>
+          <h3>Async</h3>
+          <cat-tooltip id="async-tooltip" placement="bottom-end">
+            <p class="cat-inline-flex">Hover Me (async)</p>
+          </cat-tooltip>
+          <script>
+            const tooltipElem = document.getElementById('async-tooltip');
+            setInterval(() => {
+              tooltipElem.content = 'This is an async tooltip';
+            }, 1000);
+          </script>
+        </section>
+      </div>
+      <script>
+        // --- init navigation
+        const navbar = document.getElementById('nav');
+        const scrollspy = VanillaScrollspy(navbar);
+        scrollspy.init();
+      </script>
+    </div>
+  </div>
+
+  <!-- CATALYST TEXT -->
+  <div id="tab-text-content" style="display: none">
+    <section id="typo" class="typography">
+      <!-- Sidebar -->
+      <aside>
+        <!-- Headings -->
+        <div class="cat-flex cat-flex-col cat-gap-s">
+          <h6 class="cat-muted cat-mb-l">Headline styles</h6>
+          <h1>Whereas recognition of the inherent dignity</h1>
+          <span class="cat-mono-s cat-muted">h1, .cat-h1</span>
+          <hr />
+          <h2>Whereas recognition of the inherent dignity</h2>
+          <span class="cat-mono-s cat-muted">h2, .cat-h2</span>
+          <hr />
+          <h3>Whereas recognition of the inherent dignity</h3>
+          <span class="cat-mono-s cat-muted">h3, .cat-h3</span>
+          <hr />
+          <h4>Whereas recognition of the inherent dignity</h4>
+          <span class="cat-mono-s cat-muted">h4, .cat-h4</span>
+          <hr />
+          <h5>Whereas recognition of the inherent dignity</h5>
+          <span class="cat-mono-s cat-muted">h5, .cat-h5</span>
+          <hr />
+          <h6>Whereas recognition of the inherent dignity</h6>
+          <span class="cat-mono-s cat-muted">h6, .cat-h6</span>
+        </div>
+        <!-- Body styles -->
+        <div class="cat-flex cat-flex-col cat-gap-s">
+          <h6 class="cat-muted cat-mb-l">Body styles</h6>
+
+          <p class="cat-ellipsis-2 cat-lead">
+            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+            reputation. Everyone has the right to the protection of the law against such interference or attacks.
+          </p>
+          <span class="cat-mono-s cat-muted">Lead, .cat-lead</span>
+          <hr />
+          <p class="cat-ellipsis-2 cat-text-xl">
+            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+            reputation. Everyone has the right to the protection of the law against such interference or attacks.
+          </p>
+          <span class="cat-mono-s cat-muted">Body XL, .cat-text-xl</span>
+          <hr />
+          <p class="cat-ellipsis-2 cat-text-l">
+            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+            reputation. Everyone has the right to the protection of the law against such interference or attacks.
+          </p>
+          <span class="cat-mono-s cat-muted">Body L, .cat-text-l</span>
+          <hr />
+          <p class="cat-ellipsis-2">
+            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+            reputation. Everyone has the right to the protection of the law against such interference or attacks.
+          </p>
+          <span class="cat-mono-s cat-muted">Body M (Default), .cat-text-m</span>
+          <hr />
+          <p class="cat-ellipsis-2 cat-text-s">
+            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+            reputation. Everyone has the right to the protection of the law against such interference or attacks.
+          </p>
+          <span class="cat-mono-s cat-muted">Body S, .cat-text-s</span>
+          <hr />
+          <p class="cat-ellipsis-2 cat-text-xs">
+            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+            reputation. Everyone has the right to the protection of the law against such interference or attacks.
+          </p>
+          <span class="cat-mono-s cat-muted">Body XS, .cat-text-xs</span>
+        </div>
+      </aside>
+      <!-- Example typesetting -->
+      <article class="cat-article example">
+        <h6 class="cat-muted cat-mb-l">Example article</h6>
+        <h1>Typesetting test</h1>
+        <p class="cat-lead">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+          et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+          Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+          amet.
+        </p>
+        <figure>
+          <img
+            src="https://cdn.sanity.io/images/599r6htc/localized/10e55cde1be89fb32aa3d7414fa3cd83b0859a51-3264x1836.jpg"
+            alt=""
+          />
+        </figure>
+        <h2>Dolor Vero</h2>
+        <h3>Consetetur sadipscing elitr</h3>
+        <p>
+          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+          accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+          ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
+          consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
+          qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor
+          sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
+          aliquam erat volutpat.
+        </p>
+        <p>
+          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
+        </p>
+        <h2>Lorem Ipsum</h2>
+        <p>
+          Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+          ea commodo consequat.
+        </p>
+        <h3>Vulputate velit esse</h3>
+        <p>
+          Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
+          eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
+          zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
+          option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
+        </p>
+        <ol>
+          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+          <li>Integer nec odio. Praesent libero.</li>
+          <li>Sed cursus ante dapibus diam. Sed nisi.</li>
+          <li>Nulla quis sem at nibh elementum imperdiet.</li>
+          <li>Duis sagittis ipsum. Praesent mauris.</li>
+          <li>Fusce nec tellus sed augue semper porta.</li>
+          <li>Mauris massa. Vestibulum lacinia arcu eget nulla.</li>
+          <li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
+          <li>Curabitur sodales ligula in libero.</li>
+          <li>Sed dignissim lacinia nunc. Curabitur tortor.</li>
+        </ol>
+        <hr />
+        <h2>What does all of that mean for us?</h2>
+        <p>
+          Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+          amet, consetetur sadipscing elitr.
+        </p>
+        <blockquote>
+          "The only way to do great work is to love what you do."
+          <span>– Steve Jobs</span>
+        </blockquote>
+        <h3>Understanding Employee Engagement</h3>
+        <figure>
+          <iframe
+            width="100%"
+            height="350px"
+            src="https://www.youtube-nocookie.com/embed/2t2BBU0gdO0?controls=0"
+            title="YouTube video player"
+            frameborder="0"
+            allow="
                   accelerometer;
                   autoplay;
                   clipboard-write;
@@ -1690,23 +1690,39 @@ <h3>Understanding Employee Engagement</h3>
                   picture-in-picture;
                   web-share;
                 "
-                allowfullscreen
-              ></iframe>
-            </figure>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Employee engagement is crucial for an
-              organization's growth and productivity. It's more than just job satisfaction; it's the enthusiasm and
-              involvement an employee has towards their work and the organization's mission.
-            </p>
-
-            <h4>The Benefits of High Engagement</h4>
-            <p>
-              Engaged employees tend to be more productive, have higher job satisfaction, and are more likely to stay
-              with their current employer. They contribute positively to the organizational culture and foster
-              collaboration amongst peers.
-            </p>
-
-            <h5>Key Benefits Include:</h5>
+            allowfullscreen
+          ></iframe>
+        </figure>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Employee engagement is crucial for an
+          organization's growth and productivity. It's more than just job satisfaction; it's the enthusiasm and
+          involvement an employee has towards their work and the organization's mission.
+        </p>
+
+        <h4>The Benefits of High Engagement</h4>
+        <p>
+          Engaged employees tend to be more productive, have higher job satisfaction, and are more likely to stay
+          with their current employer. They contribute positively to the organizational culture and foster
+          collaboration amongst peers.
+        </p>
+
+        <h5>Key Benefits Include:</h5>
+        <ul>
+          <li>Increased productivity and performance</li>
+          <li>Higher retention rates</li>
+          <li>Improved workplace morale</li>
+          <li>Enhanced company reputation</li>
+          <li>Higher customer satisfaction</li>
+        </ul>
+
+        <dl>
+          <dt>Employee Engagement</dt>
+          <dd>
+            Refers to the enthusiasm and involvement an employee has towards their work and the organization's
+            mission.
+          </dd>
+          <dt>Benefits of High Engagement</dt>
+          <dd>
             <ul>
               <li>Increased productivity and performance</li>
               <li>Higher retention rates</li>
@@ -1714,148 +1730,132 @@ <h5>Key Benefits Include:</h5>
               <li>Enhanced company reputation</li>
               <li>Higher customer satisfaction</li>
             </ul>
-
-            <dl>
-              <dt>Employee Engagement</dt>
-              <dd>
-                Refers to the enthusiasm and involvement an employee has towards their work and the organization's
-                mission.
-              </dd>
-              <dt>Benefits of High Engagement</dt>
-              <dd>
-                <ul>
-                  <li>Increased productivity and performance</li>
-                  <li>Higher retention rates</li>
-                  <li>Improved workplace morale</li>
-                  <li>Enhanced company reputation</li>
-                  <li>Higher customer satisfaction</li>
-                </ul>
-              </dd>
-              <dt>Strategies to Enhance Engagement</dt>
-              <dd>
-                Building a strong engagement strategy requires a deep understanding of the employees' needs,
-                aspirations, and concerns. Regular feedback, transparent communication, and consistent recognition play
-                pivotal roles.
-              </dd>
-            </dl>
-
-            <h4>Strategies to Enhance Engagement</h4>
-            <p>
-              Building a strong engagement strategy requires a deep understanding of the employees' needs, aspirations,
-              and concerns. Regular feedback, transparent communication, and consistent recognition play pivotal roles
-              in this aspect.
-            </p>
-
-            <h5>Tips for Effective Engagement:</h5>
-            <ul>
-              <li>Regular one-on-one meetings</li>
-              <li>Provide growth opportunities</li>
-              <li>Recognize and reward achievements</li>
-              <li>Promote work-life balance</li>
-              <li>Encourage team collaborations and events</li>
-            </ul>
-
-            <h3>Measuring Employee Engagement</h3>
-            <p>
-              Understanding the level of engagement in an organization is essential for its continual improvement.
-              Surveys, feedback sessions, and monitoring key performance indicators can provide valuable insights.
-            </p>
-          </article>
-        </section>
-      </div>
-
-      <!-- CATALYST ICONS -->
-      <div id="tab-icon-content" style="display: none">
-        <iframe
-          src="https://haiilo.github.io/catalyst-icons/"
-          frameborder="0"
-          scrolling="no"
-          width="100%"
-          height="26500px"
-        ></iframe>
-      </div>
-
-      <!-- Switches -->
-      <div class="switches">
-        <cat-button size="s" class="cat-elevation-1" id="toggleSS3">Switch to Source Sans 3</cat-button>
-        <cat-button size="s" class="cat-elevation-1" id="toggleTheme">Use custom theme</cat-button>
-      </div>
-
-      <script>
-        document.getElementById('tabs-top').addEventListener('catChange', function (e) {
-          document.getElementById('tab-comp-content').style.display = e.detail.index === 0 ? 'block' : 'none';
-          document.getElementById('tab-text-content').style.display = e.detail.index === 1 ? 'block' : 'none';
-          document.getElementById('tab-icon-content').style.display = e.detail.index === 2 ? 'block' : 'none';
-        });
-      </script>
-
-      <script>
-        const body = document.body;
-        const font = document.getElementById('toggleSS3');
-        font.addEventListener('click', function () {
-          if (body.classList.contains('ss3')) {
-            body.classList.remove('ss3');
-            font.innerHTML = 'Switch to Source Sans 3';
-          } else {
-            body.classList.add('ss3');
-            font.innerHTML = 'Switch to Lato';
-          }
-        });
-        const theme = document.getElementById('toggleTheme');
-        theme.addEventListener('click', function () {
-          if (body.classList.contains('custom-theme')) {
-            body.classList.remove('custom-theme');
-            theme.innerHTML = 'Use custom theme';
-          } else {
-            body.classList.add('custom-theme');
-            theme.innerHTML = 'Use default theme';
+          </dd>
+          <dt>Strategies to Enhance Engagement</dt>
+          <dd>
+            Building a strong engagement strategy requires a deep understanding of the employees' needs,
+            aspirations, and concerns. Regular feedback, transparent communication, and consistent recognition play
+            pivotal roles.
+          </dd>
+        </dl>
+
+        <h4>Strategies to Enhance Engagement</h4>
+        <p>
+          Building a strong engagement strategy requires a deep understanding of the employees' needs, aspirations,
+          and concerns. Regular feedback, transparent communication, and consistent recognition play pivotal roles
+          in this aspect.
+        </p>
+
+        <h5>Tips for Effective Engagement:</h5>
+        <ul>
+          <li>Regular one-on-one meetings</li>
+          <li>Provide growth opportunities</li>
+          <li>Recognize and reward achievements</li>
+          <li>Promote work-life balance</li>
+          <li>Encourage team collaborations and events</li>
+        </ul>
+
+        <h3>Measuring Employee Engagement</h3>
+        <p>
+          Understanding the level of engagement in an organization is essential for its continual improvement.
+          Surveys, feedback sessions, and monitoring key performance indicators can provide valuable insights.
+        </p>
+      </article>
+    </section>
+  </div>
+
+  <!-- CATALYST ICONS -->
+  <div id="tab-icon-content" style="display: none">
+    <iframe
+      src="https://haiilo.github.io/catalyst-icons/"
+      frameborder="0"
+      scrolling="no"
+      width="100%"
+      height="26500px"
+    ></iframe>
+  </div>
+
+  <!-- Switches -->
+  <div class="switches">
+    <cat-button size="s" class="cat-elevation-1" id="toggleSS3">Switch to Source Sans 3</cat-button>
+    <cat-button size="s" class="cat-elevation-1" id="toggleTheme">Use custom theme</cat-button>
+  </div>
+
+  <script>
+    document.getElementById('tabs-top').addEventListener('catChange', function(e) {
+      document.getElementById('tab-comp-content').style.display = e.detail.index === 0 ? 'block' : 'none';
+      document.getElementById('tab-text-content').style.display = e.detail.index === 1 ? 'block' : 'none';
+      document.getElementById('tab-icon-content').style.display = e.detail.index === 2 ? 'block' : 'none';
+    });
+  </script>
+
+  <script>
+    const body = document.body;
+    const font = document.getElementById('toggleSS3');
+    font.addEventListener('click', function() {
+      if (body.classList.contains('ss3')) {
+        body.classList.remove('ss3');
+        font.innerHTML = 'Switch to Source Sans 3';
+      } else {
+        body.classList.add('ss3');
+        font.innerHTML = 'Switch to Lato';
+      }
+    });
+    const theme = document.getElementById('toggleTheme');
+    theme.addEventListener('click', function() {
+      if (body.classList.contains('custom-theme')) {
+        body.classList.remove('custom-theme');
+        theme.innerHTML = 'Use custom theme';
+      } else {
+        body.classList.add('custom-theme');
+        theme.innerHTML = 'Use default theme';
+      }
+    });
+  </script>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const headings = [
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        '.cat-h1',
+        '.cat-h2',
+        '.cat-h3',
+        '.cat-h4',
+        '.cat-h5',
+        '.cat-h6'
+      ];
+
+      headings.forEach(selector => {
+        document.querySelectorAll(selector).forEach(element => {
+          const nextSibling = element.nextElementSibling;
+
+          if (nextSibling) {
+            // For the first condition
+            if (headings.some(heading => nextSibling.matches(heading))) {
+              element.classList.add('type-space-small');
+            }
+
+            // For the second condition
+            const secondConditionSelectors = [
+              ...['h3', 'h4', 'h5', 'h6', '.cat-h3', '.cat-h4', '.cat-h5', '.cat-h6'].filter(sel =>
+                element.matches(sel)
+              ),
+              ...(element.matches('p') && nextSibling.matches('p') ? ['p'] : [])
+            ];
+
+            if (secondConditionSelectors.length && ['ul', 'ol', 'p'].some(sel => nextSibling.matches(sel))) {
+              element.classList.add('type-space-medium');
+            }
           }
         });
-      </script>
-
-      <script>
-        document.addEventListener('DOMContentLoaded', function () {
-          const headings = [
-            'h1',
-            'h2',
-            'h3',
-            'h4',
-            'h5',
-            'h6',
-            '.cat-h1',
-            '.cat-h2',
-            '.cat-h3',
-            '.cat-h4',
-            '.cat-h5',
-            '.cat-h6'
-          ];
-
-          headings.forEach(selector => {
-            document.querySelectorAll(selector).forEach(element => {
-              const nextSibling = element.nextElementSibling;
-
-              if (nextSibling) {
-                // For the first condition
-                if (headings.some(heading => nextSibling.matches(heading))) {
-                  element.classList.add('type-space-small');
-                }
-
-                // For the second condition
-                const secondConditionSelectors = [
-                  ...['h3', 'h4', 'h5', 'h6', '.cat-h3', '.cat-h4', '.cat-h5', '.cat-h6'].filter(sel =>
-                    element.matches(sel)
-                  ),
-                  ...(element.matches('p') && nextSibling.matches('p') ? ['p'] : [])
-                ];
-
-                if (secondConditionSelectors.length && ['ul', 'ol', 'p'].some(sel => nextSibling.matches(sel))) {
-                  element.classList.add('type-space-medium');
-                }
-              }
-            });
-          });
-        });
-      </script>
-    </div>
-  </body>
+      });
+    });
+  </script>
+</div>
+</body>
 </html>

From 3a3f338aae5580b8c3219b909c486a8cfb6e9424 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Mon, 17 Aug 2026 09:43:40 +0200
Subject: [PATCH 27/42] test: fix test id

---
 .../cat-segmented-control/cat-segmented-control.spec.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
index 9e07b0f4..528ec0c6 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
@@ -28,7 +28,7 @@ describe('cat-segmented-control', () => {
     const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
       <cat-segmented-control>
         <cat-segment value="one">Option 1</cat-segment>
-        <cat-segment value="two" testId="optionTwo">
+        <cat-segment value="two" test-id="optionTwo">
           Option 2
         </cat-segment>
       </cat-segmented-control>
@@ -37,7 +37,7 @@ describe('cat-segmented-control', () => {
     const changeListener = vi.fn();
     root.addEventListener('catChange', changeListener);
 
-    const segment = root.querySelector<HTMLCatSegmentElement>('[testid="optionTwo"]');
+    const segment = root.querySelector<HTMLCatSegmentElement>('[test-id="optionTwo"]');
 
     expect(segment).not.toBeNull();
     segment?.dispatchEvent(new CustomEvent('catSegmentClick', { detail: 'two', bubbles: true, composed: true }));

From 7f759e056c4f6bc761fae1fd08240aa0231ed777 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Mon, 17 Aug 2026 09:44:31 +0200
Subject: [PATCH 28/42] chore: prettier core

---
 core/src/index.html | 3602 +++++++++++++++++++++----------------------
 1 file changed, 1801 insertions(+), 1801 deletions(-)

diff --git a/core/src/index.html b/core/src/index.html
index 66835583..3b658d3e 100644
--- a/core/src/index.html
+++ b/core/src/index.html
@@ -1,718 +1,886 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-  <title>Catalyst | StencilJS</title>
-  <script type="module" src="/build/catalyst.esm.js"></script>
-  <script type="module">
-    import { ci } from '/build/assets/icons/js/icons.object.js';
-    import { catI18nRegistry, catIconRegistry } from '/build/index.esm.js';
-
-    /**
-     * WARNING: Keep in sync with ./index.cdn.js
-     */
-    catIconRegistry.addIcons(ci);
-    catI18nRegistry.set({
-      'datepicker.prevYear': 'Previous year',
-      'datepicker.nextYear': 'Next year',
-      'datepicker.prevMonth': 'Previous month',
-      'datepicker.nextMonth': 'Next month',
-      'datepicker.arrowKeys': 'Arrow keys can navigate dates.',
-      'datepicker.today': 'Today',
-      'datepicker.change': 'Change date',
-      'datepicker.choose': 'Choose date',
-      'timepicker.change': 'Change time',
-      'timepicker.choose': 'Choose time',
-      // 'datepicker.nextYear': 'Year',
-      'datepicker.year': 'Year',
-      'datepicker.month': 'Month',
-      'datepicker.hour': 'Hour',
-      'datepicker.minute': 'Minute',
-      'datepicker.scroll': 'Scroll to increment',
-      'datepicker.toggle': 'Click to toggle',
-      'datepicker.clear': 'Clear',
-      'dialog.close': 'Close',
-      'input.clear': 'Clear',
-      'input.optional': 'Optional',
-      'input.required': 'Required',
-      'input.showPassword': 'Show password',
-      'input.hidePassword': 'Hide password',
-      'notification.dismiss': 'Dismiss',
-      'pagination.ariaLabel': 'Pagination',
-      'pagination.prev': 'Previous',
-      'pagination.page': 'Go to page {{page}}',
-      'pagination.next': 'Next',
-      'select.close': 'Close',
-      'select.deselect': 'Deselect',
-      'select.empty': 'No items',
-      'select.open': 'Open',
-      'tabs.more': 'More'
-    });
-  </script>
-  <script nomodule src="/build/catalyst.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vanillajs-scrollspy@2.2.0/dist/vanillajs-scrollspy.min.js"></script>
-  <link rel="stylesheet" href="/build/catalyst.css" />
-  <style>
-    html,
-    body {
-      background: #fff;
-    }
-
-    body {
-      padding: 2rem 4rem;
-    }
-
-    body.ss3 {
-      --cat-font-family-base: 'Source Sans 3';
-      --cat-font-family-head: 'Source Sans 3';
-    }
-
-    body.custom-theme {
-      --cat-primary-bg: 91, 94, 219;
-      --cat-primary-bg-hover: 78, 81, 191;
-      --cat-primary-bg-active: 65, 67, 159;
-
-      --cat-primary-bg-outlined: 253, 212, 212;
-
-      --cat-primary-fill: 255, 255, 255;
-      --cat-primary-fill-hover: 255, 255, 255;
-      --cat-primary-fill-active: 255, 255, 255;
-
-      --cat-primary-text: 91, 94, 219;
-      --cat-primary-text-hover: 78, 81, 191;
-      --cat-primary-text-active: 65, 67, 159;
-    }
-
-    .wrapper {
-      display: flex;
-      flex-direction: row;
-      gap: 8rem;
-    }
-
-    .toolbar {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      background: #fff;
-      border-bottom: 1px solid #ebecf0;
-      position: sticky;
-      top: 0;
-      z-index: 3;
-    }
-
-    .tabs {
-      box-shadow: none;
-    }
-
-    #nav {
-      align-self: flex-start;
-      position: sticky;
-      top: 8rem;
-      width: 300px;
-      margin: 4rem 0;
-      border-right: 1px solid #ebecf0;
-    }
-
-    #nav ul {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-
-    #nav .active {
-      font-weight: bold;
-    }
-
-    .content {
-      max-width: 600px;
-      padding: 2rem 0;
-    }
-
-    .canvas-fake {
-      background: #f2f4f7;
-      border-radius: 0.5rem;
-      padding: 3.5rem;
-    }
-
-    section {
-      flex: 0 1 auto;
-      padding: 5rem 0;
-    }
-
-    section:not(:last-of-type) {
-      border-bottom: 1px solid rgba(0, 0, 0, 10%);
-    }
-
-    section > h2:not(:first-child),
-    section > h3:not(:first-child) {
-      margin-top: 2rem;
-    }
-
-    section > h2:not(:last-child),
-    section > h3:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-
-    section.typography {
-      display: flex;
-      gap: 5rem;
-    }
-
-    /* Text page stylings */
-
-    section.typography .example {
-      max-width: 600px;
-      margin: 0 auto;
-    }
-
-    figure img {
-      max-width: 100%;
-    }
-
-    section.typography aside {
-      display: flex;
-      flex-direction: column;
-      gap: 7rem;
-      max-width: 450px;
-      box-sizing: content-box;
-      padding-right: 5rem;
-      border-right: 1px solid #ebecf0;
-    }
-
-    .switches {
-      position: fixed;
-      bottom: 1rem;
-      right: 1rem;
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-      align-items: end;
-    }
-
-    .switches cat-button {
-      width: fit-content;
-    }
-  </style>
-</head>
-<body>
-<div class="body">
-  <h1>Catalyst Web Components</h1>
-
-  <!-- TOP TABS & BUTTONS -->
-  <div class="toolbar">
-    <cat-tabs class="tabs" active-tab="tab-comp" id="tabs-top">
-      <cat-tab label="Components" id="tab-comp"></cat-tab>
-      <cat-tab label="Text" id="tab-text"></cat-tab>
-      <cat-tab label="Icons" id="tab-icon"></cat-tab>
-    </cat-tabs>
-    <div class="cat-flex cat-items-center cat-gap-s">
-      <cat-button
-        url="https://github.com/haiilo/catalyst"
-        url-target="_blank"
-        size="s"
-        class="cat-elevation-1"
-        icon="github"
-      >
-        View on GitHub
-      </cat-button>
-      <cat-button
-        url="https://app.slack.com/client/T03BH7BHD/C02JFK9BM0F"
-        url-target="_blank"
-        size="s"
-        class="cat-elevation-1"
-        icon="slack"
-      >
-        Join us on Slack
-      </cat-button>
-    </div>
-  </div>
-
-  <!-- CATALYST COMPONENTS -->
-  <div id="tab-comp-content">
-    <div class="wrapper">
-      <nav id="nav">
-        <ul>
-          <li><a href="#alert">Alert</a></li>
-          <li><a href="#avatar">Avatar</a></li>
-          <li><a href="#badge">Badge</a></li>
-          <li><a href="#button">Button</a></li>
-          <li><a href="#group-button">Group Button</a></li>
-          <li><a href="#card">Card</a></li>
-          <li><a href="#checkbox">Checkbox</a></li>
-          <li><a href="#divider">Divider</a></li>
-          <li><a href="#dropdown">Dropdown</a></li>
-          <li><a href="#menu">Menu</a></li>
-          <li><a href="#form">Form</a></li>
-          <li><a href="#form-group">Form Group</a></li>
-          <li><a href="#icon">Icon</a></li>
-          <li><a href="#input">Input</a></li>
-          <li><a href="#datepicker">Datepicker</a></li>
-          <li><a href="#notification">Notification</a></li>
-          <li><a href="#pagination">Pagination</a></li>
-          <li><a href="#radio">Radio</a></li>
-          <li><a href="#scrollable">Scrollable</a></li>
-          <li><a href="#segmented-control">Segmented Control</a></li>
-          <li><a href="#select">Select</a></li>
-          <li><a href="#skeleton">Skeleton</a></li>
-          <li><a href="#spinner">Spinner</a></li>
-          <li><a href="#tabs">Tabs</a></li>
-          <li><a href="#tags">Tags</a></li>
-          <li><a href="#textarea">Textarea</a></li>
-          <li><a href="#toggle">Toggle</a></li>
-          <li><a href="#tooltip">Tooltip</a></li>
-        </ul>
-      </nav>
-      <div class="content">
-        <section id="alert" class="cat-article">
-          <h2>Alert</h2>
-          <cat-alert tabindex="3">
-            <p>
-              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-              labore et <a href="https://google.de">dolore magna</a> aliquyam erat, sed diam voluptua.
-            </p>
-          </cat-alert>
-          <h3>Color</h3>
-          <cat-alert color="secondary">
-            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-          </cat-alert>
-          <cat-alert color="info">
-            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-          </cat-alert>
-          <cat-alert color="success">
-            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-          </cat-alert>
-          <cat-alert color="warning">
-            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-          </cat-alert>
-          <cat-alert color="danger">
-            <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
-          </cat-alert>
-          <h3>Variations</h3>
-          <cat-alert color="primary" no-icon>
-            <p>
-              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-              labore et dolore magna aliquyam erat, sed diam voluptua.
-            </p>
-          </cat-alert>
-          <cat-alert color="secondary" icon="cross-circle-filled">
-            <h5 class="cat-strong">Lorem ipsum dolor sit amet.</h5>
-            Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-          </cat-alert>
-        </section>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>Catalyst | StencilJS</title>
+    <script type="module" src="/build/catalyst.esm.js"></script>
+    <script type="module">
+      import { ci } from '/build/assets/icons/js/icons.object.js';
+      import { catI18nRegistry, catIconRegistry } from '/build/index.esm.js';
+
+      /**
+       * WARNING: Keep in sync with ./index.cdn.js
+       */
+      catIconRegistry.addIcons(ci);
+      catI18nRegistry.set({
+        'datepicker.prevYear': 'Previous year',
+        'datepicker.nextYear': 'Next year',
+        'datepicker.prevMonth': 'Previous month',
+        'datepicker.nextMonth': 'Next month',
+        'datepicker.arrowKeys': 'Arrow keys can navigate dates.',
+        'datepicker.today': 'Today',
+        'datepicker.change': 'Change date',
+        'datepicker.choose': 'Choose date',
+        'timepicker.change': 'Change time',
+        'timepicker.choose': 'Choose time',
+        // 'datepicker.nextYear': 'Year',
+        'datepicker.year': 'Year',
+        'datepicker.month': 'Month',
+        'datepicker.hour': 'Hour',
+        'datepicker.minute': 'Minute',
+        'datepicker.scroll': 'Scroll to increment',
+        'datepicker.toggle': 'Click to toggle',
+        'datepicker.clear': 'Clear',
+        'dialog.close': 'Close',
+        'input.clear': 'Clear',
+        'input.optional': 'Optional',
+        'input.required': 'Required',
+        'input.showPassword': 'Show password',
+        'input.hidePassword': 'Hide password',
+        'notification.dismiss': 'Dismiss',
+        'pagination.ariaLabel': 'Pagination',
+        'pagination.prev': 'Previous',
+        'pagination.page': 'Go to page {{page}}',
+        'pagination.next': 'Next',
+        'select.close': 'Close',
+        'select.deselect': 'Deselect',
+        'select.empty': 'No items',
+        'select.open': 'Open',
+        'tabs.more': 'More'
+      });
+    </script>
+    <script nomodule src="/build/catalyst.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanillajs-scrollspy@2.2.0/dist/vanillajs-scrollspy.min.js"></script>
+    <link rel="stylesheet" href="/build/catalyst.css" />
+    <style>
+      html,
+      body {
+        background: #fff;
+      }
 
-        <section id="avatar">
-          <h2>Avatar</h2>
-          <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
-          <h3>Variations</h3>
-          <cat-avatar label="John Doe" size="xs" icon="sparkle-filled"></cat-avatar>
-          <cat-avatar label="John Doe" size="s" round></cat-avatar>
-          <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
-          <cat-avatar
-            label="John Doe"
-            size="l"
-            round
-            url="http://google.com"
-            src="invalidSrc"
-            icon="sparkle-filled"
-          ></cat-avatar>
-          <cat-avatar label="John Doe" size="xl" initials="Init"></cat-avatar>
-        </section>
+      body {
+        padding: 2rem 4rem;
+      }
 
-        <section id="badge">
-          <h2>Badge</h2>
-          <cat-badge>Default</cat-badge>
-
-          <h3>Variant</h3>
-          <cat-badge variant="filled">Filled</cat-badge>
-          <cat-badge variant="outlined">Outlined</cat-badge>
-
-          <h3>Color</h3>
-          <cat-badge icon="sparkle-filled" color="primary">Primary</cat-badge>
-          <cat-badge icon="sparkle-filled" color="secondary">Secondary</cat-badge>
-          <cat-badge icon="sparkle-filled" color="info">Info</cat-badge>
-          <cat-badge icon="sparkle-filled" color="success">Success</cat-badge>
-          <cat-badge icon="sparkle-filled" color="warning">Warning</cat-badge>
-          <cat-badge icon="sparkle-filled" color="danger">Danger</cat-badge>
-          <br />
-          <br />
-          <cat-badge icon="sparkle-filled" icon-right color="primary">Primary</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right color="secondary">Secondary</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right color="info">Info</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right color="success">Success</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right color="warning">Warning</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right color="danger">Danger</cat-badge>
-
-          <h3>Size</h3>
-          <cat-badge icon="sparkle-filled" size="xs">Size XS</cat-badge>
-          <cat-badge icon="sparkle-filled" size="s">Size S</cat-badge>
-          <cat-badge icon="sparkle-filled" size="m">Size M</cat-badge>
-          <cat-badge icon="sparkle-filled" size="l">Size L</cat-badge>
-          <cat-badge icon="sparkle-filled" size="xl">Size XL</cat-badge>
-          <br />
-          <br />
-          <cat-badge icon="sparkle-filled" icon-right size="xs">Size XS</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right size="s">Size S</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right size="m">Size M</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right size="l">Size L</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-right size="xl">Size XL</cat-badge>
-          <br />
-          <br />
-          <cat-badge icon="sparkle-filled" icon-only="xs" size="xs">sdfdsf sdfsdf</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-only="s" size="s">sdfdsf sdfsdf</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-only="m" size="m">sdfdsf sdfsdf</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-only="l" size="l">sdfdsf sdfsdf</cat-badge>
-          <cat-badge icon="sparkle-filled" icon-only="xl" size="xl">sdfdsf sdfsdf</cat-badge>
-
-          <h3>Round</h3>
-          <cat-badge round="true">Round</cat-badge>
-          <cat-badge round="true" color="danger" size="xs"></cat-badge>
-
-          <h3>Pulse</h3>
-          <cat-badge pulse="true">Pulse</cat-badge>
-          <cat-badge pulse="true" variant="outlined">Pulse</cat-badge>
-          <cat-badge pulse="true" round="true" color="danger" size="xs"></cat-badge>
-
-          <h3>Layout</h3>
-          <cat-badge
-          >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-            labore et dolore magna aliquyam erat, sed diam voluptua.
-          </cat-badge>
-        </section>
+      body.ss3 {
+        --cat-font-family-base: 'Source Sans 3';
+        --cat-font-family-head: 'Source Sans 3';
+      }
 
-        <section id="button">
-          <h2>Button</h2>
-          <cat-button test-id="data-test">Button</cat-button>
-
-          <h3>Color & Variant</h3>
-          <cat-button icon="sparkle-filled" variant="filled" color="primary">Primary</cat-button>
-          <cat-button icon="sparkle-filled" variant="outlined" color="primary">Primary</cat-button>
-          <cat-button icon="sparkle-filled" variant="text" color="primary">Primary</cat-button>
-          <cat-button icon="sparkle-filled" variant="link" color="primary">Primary</cat-button>
-          <br /><br />
-          <cat-button icon="sparkle-filled" variant="filled" color="secondary">Secondary</cat-button>
-          <cat-button icon="sparkle-filled" variant="outlined" color="secondary">Secondary</cat-button>
-          <cat-button icon="sparkle-filled" variant="text" color="secondary">Secondary</cat-button>
-          <cat-button icon="sparkle-filled" variant="link" color="secondary">Secondary</cat-button>
-          <br /><br />
-          <cat-button icon="sparkle-filled" variant="filled" color="info">Info</cat-button>
-          <cat-button icon="sparkle-filled" variant="outlined" color="info">Info</cat-button>
-          <cat-button icon="sparkle-filled" variant="text" color="info">Info</cat-button>
-          <cat-button icon="sparkle-filled" variant="link" color="info">Info</cat-button>
-          <br /><br />
-          <cat-button icon="sparkle-filled" variant="filled" color="success">Success</cat-button>
-          <cat-button icon="sparkle-filled" variant="outlined" color="success">Success</cat-button>
-          <cat-button icon="sparkle-filled" variant="text" color="success">Success</cat-button>
-          <cat-button icon="sparkle-filled" variant="link" color="success">Success</cat-button>
-          <br /><br />
-          <cat-button icon="sparkle-filled" variant="filled" color="warning">Warning</cat-button>
-          <cat-button icon="sparkle-filled" variant="outlined" color="warning">Warning</cat-button>
-          <cat-button icon="sparkle-filled" variant="text" color="warning">Warning</cat-button>
-          <cat-button icon="sparkle-filled" variant="link" color="warning">Warning</cat-button>
-          <br /><br />
-          <cat-button icon="sparkle-filled" variant="filled" color="danger">Danger</cat-button>
-          <cat-button icon="sparkle-filled" variant="outlined" color="danger">Danger</cat-button>
-          <cat-button icon="sparkle-filled" variant="text" color="danger">Danger</cat-button>
-          <cat-button icon="sparkle-filled" variant="link" color="danger">Danger</cat-button>
-
-          <h3>Size</h3>
-          <cat-button size="xs" icon="sparkle-filled">Size XS</cat-button>
-          <cat-button size="s" icon="sparkle-filled">Size S</cat-button>
-          <cat-button size="m" icon="sparkle-filled">Size M</cat-button>
-          <cat-button size="l" icon="sparkle-filled">Size L</cat-button>
-          <cat-button size="xl" icon="sparkle-filled">Size XL</cat-button>
-
-          <h3>Icons</h3>
-          <cat-button icon="sparkle-filled">Prefix</cat-button>
-          <cat-button icon="sparkle-filled" icon-suffix="true">Suffix</cat-button>
-          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA">Suffix</cat-button>
-
-          <h3>Icon buttons</h3>
-          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xs"></cat-button>
-          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="s"></cat-button>
-          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="m"></cat-button>
-          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="l"></cat-button>
-          <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xl"></cat-button>
-
-          <h3>Icons (Responsive)</h3>
-          <cat-button icon="sparkle-filled" icon-only="xs" a11y-label="ARIA">xs</cat-button>
-          <cat-button icon="sparkle-filled" icon-only="s" a11y-label="ARIA">s</cat-button>
-          <cat-button icon="sparkle-filled" icon-only="m" a11y-label="ARIA">m</cat-button>
-          <cat-button icon="sparkle-filled" icon-only="l" a11y-label="ARIA">l</cat-button>
-          <cat-button icon="sparkle-filled" icon-only="xl" a11y-label="ARIA">xl</cat-button>
-
-          <h3>Links</h3>
-          <cat-button url="http://www.google.de">Google</cat-button>
-          <cat-button url="http://www.google.de" url-target="_blank">Google (ext.)</cat-button>
-
-          <div class="cat-mt-s">
-            <cat-button inline="true" variant="link" url="http://www.google.de">Link 1</cat-button>
-            <cat-button inline="true" variant="link" url="http://www.google.de">Link 2</cat-button>
-          </div>
+      body.custom-theme {
+        --cat-primary-bg: 91, 94, 219;
+        --cat-primary-bg-hover: 78, 81, 191;
+        --cat-primary-bg-active: 65, 67, 159;
 
-          <h3>Active</h3>
-          <cat-button icon="sparkle-filled" active="true" variant="filled" color="primary">Primary</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="primary">Primary</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="text" color="primary">Primary</cat-button>
-          <br /><br />
-          <cat-button icon="sparkle-filled" active="true" variant="filled" color="secondary">Secondary</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="secondary"
-          >Secondary
-          </cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="text" color="secondary">Secondary</cat-button>
-          <br /><br />
-          <cat-button icon="sparkle-filled" active="true" variant="filled" color="info">Info</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="info">Info</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="text" color="info">Info</cat-button>
-          <br /><br />
-          <cat-button icon="sparkle-filled" active="true" variant="filled" color="success">Success</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="success">Success</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="text" color="success">Success</cat-button>
-          <br /><br />
-          <cat-button icon="sparkle-filled" active="true" variant="filled" color="warning">Warning</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="warning">Warning</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="text" color="warning">Warning</cat-button>
-          <br /><br />
-          <cat-button icon="sparkle-filled" active="true" variant="filled" color="danger">Danger</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="outlined" color="danger">Danger</cat-button>
-          <cat-button icon="sparkle-filled" active="true" variant="text" color="danger">Danger</cat-button>
-
-          <h3>Disabled</h3>
-          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="primary">Primary</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="primary">Primary</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="primary">Primary</cat-button>
-          <br /><br />
-          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="secondary"
-          >Secondary
-          </cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="secondary"
-          >Secondary
-          </cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="secondary">Secondary</cat-button>
-          <br /><br />
-          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="info">Info</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="info">Info</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="info">Info</cat-button>
-          <br /><br />
-          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="success">Success</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="success">Success</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="success">Success</cat-button>
-          <br /><br />
-          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="warning">Warning</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="warning">Warning</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="warning">Warning</cat-button>
-          <br /><br />
-          <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="danger">Danger</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="danger">Danger</cat-button>
-          <cat-button icon="sparkle-filled" disabled="true" variant="text" color="danger">Danger</cat-button>
-
-          <h3>Loading</h3>
-          <cat-button loading="true" variant="filled" color="primary">Primary</cat-button>
-          <cat-button loading="true" variant="outlined" color="primary">Primary</cat-button>
-          <cat-button loading="true" variant="text" color="primary">Primary</cat-button>
-          <br /><br />
-          <cat-button loading="true" variant="filled" color="secondary">Secondary</cat-button>
-          <cat-button loading="true" variant="outlined" color="secondary">Secondary</cat-button>
-          <cat-button loading="true" variant="text" color="secondary">Secondary</cat-button>
-          <br /><br />
-          <cat-button loading="true" variant="filled" color="info">Info</cat-button>
-          <cat-button loading="true" variant="outlined" color="info">Info</cat-button>
-          <cat-button loading="true" variant="text" color="info">Info</cat-button>
-          <br /><br />
-          <cat-button loading="true" variant="filled" color="success">Success</cat-button>
-          <cat-button loading="true" variant="outlined" color="success">Success</cat-button>
-          <cat-button loading="true" variant="text" color="success">Success</cat-button>
-          <br /><br />
-          <cat-button loading="true" variant="filled" color="warning">Warning</cat-button>
-          <cat-button loading="true" variant="outlined" color="warning">Warning</cat-button>
-          <cat-button loading="true" variant="text" color="warning">Warning</cat-button>
-          <br /><br />
-          <cat-button loading="true" variant="filled" color="danger">Danger</cat-button>
-          <cat-button loading="true" variant="outlined" color="danger">Danger</cat-button>
-          <cat-button loading="true" variant="text" color="danger">Danger</cat-button>
-
-          <h3>Layout</h3>
-          <div style="width: 200px; border: 1px solid gray">
-            <cat-button icon="sparkle-filled">Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
-            <br />
-            <cat-button icon="sparkle-filled" no-ellipsis>Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
-            <br />
-            <cat-button icon="sparkle-filled" class="cat-block">Block</cat-button>
-            <cat-button icon="sparkle-filled" class="cat-block cat-text-left">Block (left)</cat-button>
-            <cat-button icon="sparkle-filled" class="cat-block cat-text-right">Block (right)</cat-button>
-          </div>
-        </section>
+        --cat-primary-bg-outlined: 253, 212, 212;
 
-        <section id="group-button">
-          <h2>Group button</h2>
-
-          <div style="display: flex; flex-direction: column; gap: 8px">
-            <cat-button-group a11y-label="Group button outlined">
-              <cat-button>Left</cat-button>
-              <cat-button>Middle</cat-button>
-              <cat-button>Middle1</cat-button>
-              <cat-button>Right</cat-button>
-            </cat-button-group>
-
-            <cat-button-group a11y-label="Group button filled">
-              <cat-button variant="filled">Left</cat-button>
-              <cat-button variant="filled">Middle</cat-button>
-              <cat-button variant="filled">Right</cat-button>
-            </cat-button-group>
-
-            <cat-button-group a11y-label="Group button text">
-              <cat-button variant="text">Left</cat-button>
-              <cat-button variant="text">Middle</cat-button>
-              <cat-button variant="text">Right</cat-button>
-            </cat-button-group>
-          </div>
-        </section>
+        --cat-primary-fill: 255, 255, 255;
+        --cat-primary-fill-hover: 255, 255, 255;
+        --cat-primary-fill-active: 255, 255, 255;
 
-        <section id="card">
-          <h2>Card</h2>
+        --cat-primary-text: 91, 94, 219;
+        --cat-primary-text-hover: 78, 81, 191;
+        --cat-primary-text-active: 65, 67, 159;
+      }
 
-          <div class="canvas-fake">
-            <cat-card>
-              <h3>Lorem ipsum dolor sit amet</h3>
-              <p>
-                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                labore et dolore magna aliquyam erat, sed diam voluptua.
-              </p>
-              <p>
-                At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
-                sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
-                diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-              </p>
-            </cat-card>
-          </div>
-          <h3>Navigation</h3>
-          <div class="canvas-fake">
-            <cat-card>
-              <nav>
-                <ul>
-                  <li class="cat-nav-head">Headline</li>
-                  <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
-                  <li>
-                    <cat-button class="cat-nav-item" color="primary">Nav item 1</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" active>Nav item 2</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" color="warning">Nav item 3</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" disabled>Nav item 4</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item">Nav item 5 (long)</cat-button>
-                  </li>
-                  <li class="cat-hr"></li>
-                  <li>
-                    <cat-button class="cat-nav-item" color="danger" onclick="console.log(6)" active
-                    >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f
-                    </cat-button>
-                  </li>
-                </ul>
-                <hr />
-                <ul>
-                  <li>
-                    <cat-button class="cat-nav-item" variant="outlined" color="secondary" onclick="console.log(3)"
-                    >Nav item 3
-                    </cat-button>
-                  </li>
-                </ul>
-              </nav>
-            </cat-card>
-          </div>
-        </section>
+      .wrapper {
+        display: flex;
+        flex-direction: row;
+        gap: 8rem;
+      }
 
-        <section id="checkbox" class="cat-form">
-          <h2>Checkbox</h2>
-          <cat-checkbox label="Label"></cat-checkbox>
-
-          <h3>State</h3>
-          <cat-checkbox label="Disabled" disabled></cat-checkbox>
-          <cat-checkbox label="Checked" checked></cat-checkbox>
-          <cat-checkbox label="Checked disabled" checked disabled></cat-checkbox>
-          <cat-checkbox label="Indeterminate" indeterminate="true" id="indeterminate"></cat-checkbox>
-          <cat-button id="indeterminate-true">Set inteterminate true</cat-button>
-          <cat-button id="indeterminate-false">Set inteterminate false</cat-button>
-          <cat-button id="value-true">Set value true</cat-button>
-          <cat-button id="value-false">Set value false</cat-button>
-          <script>
-            document.querySelector('#indeterminate-true').addEventListener('click', () => {
-              document.querySelector('#indeterminate').indeterminate = true;
-            });
-            document.querySelector('#indeterminate-false').addEventListener('click', () => {
-              document.querySelector('#indeterminate').indeterminate = false;
-            });
-            document.querySelector('#value-true').addEventListener('click', () => {
-              document.querySelector('#indeterminate').checked = true;
-            });
-            document.querySelector('#value-false').addEventListener('click', () => {
-              document.querySelector('#indeterminate').checked = false;
-            });
-          </script>
+      .toolbar {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        background: #fff;
+        border-bottom: 1px solid #ebecf0;
+        position: sticky;
+        top: 0;
+        z-index: 3;
+      }
 
-          <h3>Alignment</h3>
-          <cat-checkbox label="Label" label-left></cat-checkbox>
+      .tabs {
+        box-shadow: none;
+      }
 
-          <h3>Slots</h3>
-          <cat-checkbox hint="This is a hint!">
-            <span slot="label">This is the <b>label</b></span>
-            <span slot="hint">This is another!</span>
-          </cat-checkbox>
-        </section>
+      #nav {
+        align-self: flex-start;
+        position: sticky;
+        top: 8rem;
+        width: 300px;
+        margin: 4rem 0;
+        border-right: 1px solid #ebecf0;
+      }
 
-        <section id="divider">
-          <h2>Divider</h2>
-        </section>
+      #nav ul {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+      }
 
-        <section id="dropdown">
-          <h2>Dropdown</h2>
+      #nav .active {
+        font-weight: bold;
+      }
+
+      .content {
+        max-width: 600px;
+        padding: 2rem 0;
+      }
+
+      .canvas-fake {
+        background: #f2f4f7;
+        border-radius: 0.5rem;
+        padding: 3.5rem;
+      }
+
+      section {
+        flex: 0 1 auto;
+        padding: 5rem 0;
+      }
+
+      section:not(:last-of-type) {
+        border-bottom: 1px solid rgba(0, 0, 0, 10%);
+      }
+
+      section > h2:not(:first-child),
+      section > h3:not(:first-child) {
+        margin-top: 2rem;
+      }
+
+      section > h2:not(:last-child),
+      section > h3:not(:last-child) {
+        margin-bottom: 1rem;
+      }
+
+      section.typography {
+        display: flex;
+        gap: 5rem;
+      }
+
+      /* Text page stylings */
+
+      section.typography .example {
+        max-width: 600px;
+        margin: 0 auto;
+      }
+
+      figure img {
+        max-width: 100%;
+      }
+
+      section.typography aside {
+        display: flex;
+        flex-direction: column;
+        gap: 7rem;
+        max-width: 450px;
+        box-sizing: content-box;
+        padding-right: 5rem;
+        border-right: 1px solid #ebecf0;
+      }
+
+      .switches {
+        position: fixed;
+        bottom: 1rem;
+        right: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        align-items: end;
+      }
+
+      .switches cat-button {
+        width: fit-content;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="body">
+      <h1>Catalyst Web Components</h1>
+
+      <!-- TOP TABS & BUTTONS -->
+      <div class="toolbar">
+        <cat-tabs class="tabs" active-tab="tab-comp" id="tabs-top">
+          <cat-tab label="Components" id="tab-comp"></cat-tab>
+          <cat-tab label="Text" id="tab-text"></cat-tab>
+          <cat-tab label="Icons" id="tab-icon"></cat-tab>
+        </cat-tabs>
+        <div class="cat-flex cat-items-center cat-gap-s">
+          <cat-button
+            url="https://github.com/haiilo/catalyst"
+            url-target="_blank"
+            size="s"
+            class="cat-elevation-1"
+            icon="github"
+          >
+            View on GitHub
+          </cat-button>
+          <cat-button
+            url="https://app.slack.com/client/T03BH7BHD/C02JFK9BM0F"
+            url-target="_blank"
+            size="s"
+            class="cat-elevation-1"
+            icon="slack"
+          >
+            Join us on Slack
+          </cat-button>
+        </div>
+      </div>
 
-          <div class="cat-flex cat-item-center cat-gap-s cat-mb-m">
-            <!-- Wide dropdown -->
-            <cat-dropdown justify focus-trap="true">
-              <cat-button slot="trigger" color="primary" variant="filled"
-              >Button with very long content so that it is very wide
+      <!-- CATALYST COMPONENTS -->
+      <div id="tab-comp-content">
+        <div class="wrapper">
+          <nav id="nav">
+            <ul>
+              <li><a href="#alert">Alert</a></li>
+              <li><a href="#avatar">Avatar</a></li>
+              <li><a href="#badge">Badge</a></li>
+              <li><a href="#button">Button</a></li>
+              <li><a href="#group-button">Group Button</a></li>
+              <li><a href="#card">Card</a></li>
+              <li><a href="#checkbox">Checkbox</a></li>
+              <li><a href="#divider">Divider</a></li>
+              <li><a href="#dropdown">Dropdown</a></li>
+              <li><a href="#menu">Menu</a></li>
+              <li><a href="#form">Form</a></li>
+              <li><a href="#form-group">Form Group</a></li>
+              <li><a href="#icon">Icon</a></li>
+              <li><a href="#input">Input</a></li>
+              <li><a href="#datepicker">Datepicker</a></li>
+              <li><a href="#notification">Notification</a></li>
+              <li><a href="#pagination">Pagination</a></li>
+              <li><a href="#radio">Radio</a></li>
+              <li><a href="#scrollable">Scrollable</a></li>
+              <li><a href="#segmented-control">Segmented Control</a></li>
+              <li><a href="#select">Select</a></li>
+              <li><a href="#skeleton">Skeleton</a></li>
+              <li><a href="#spinner">Spinner</a></li>
+              <li><a href="#tabs">Tabs</a></li>
+              <li><a href="#tags">Tags</a></li>
+              <li><a href="#textarea">Textarea</a></li>
+              <li><a href="#toggle">Toggle</a></li>
+              <li><a href="#tooltip">Tooltip</a></li>
+            </ul>
+          </nav>
+          <div class="content">
+            <section id="alert" class="cat-article">
+              <h2>Alert</h2>
+              <cat-alert tabindex="3">
+                <p>
+                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                  labore et <a href="https://google.de">dolore magna</a> aliquyam erat, sed diam voluptua.
+                </p>
+              </cat-alert>
+              <h3>Color</h3>
+              <cat-alert color="secondary">
+                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+              </cat-alert>
+              <cat-alert color="info">
+                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+              </cat-alert>
+              <cat-alert color="success">
+                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+              </cat-alert>
+              <cat-alert color="warning">
+                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+              </cat-alert>
+              <cat-alert color="danger">
+                <p>Lorem ipsum dolor <a href="https://google.de">dolore magna</a> sit amet.</p>
+              </cat-alert>
+              <h3>Variations</h3>
+              <cat-alert color="primary" no-icon>
+                <p>
+                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                  labore et dolore magna aliquyam erat, sed diam voluptua.
+                </p>
+              </cat-alert>
+              <cat-alert color="secondary" icon="cross-circle-filled">
+                <h5 class="cat-strong">Lorem ipsum dolor sit amet.</h5>
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+              </cat-alert>
+            </section>
+
+            <section id="avatar">
+              <h2>Avatar</h2>
+              <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
+              <h3>Variations</h3>
+              <cat-avatar label="John Doe" size="xs" icon="sparkle-filled"></cat-avatar>
+              <cat-avatar label="John Doe" size="s" round></cat-avatar>
+              <cat-avatar label="John Doe" size="m" url="http://google.com" src="https://picsum.photos/40"></cat-avatar>
+              <cat-avatar
+                label="John Doe"
+                size="l"
+                round
+                url="http://google.com"
+                src="invalidSrc"
+                icon="sparkle-filled"
+              ></cat-avatar>
+              <cat-avatar label="John Doe" size="xl" initials="Init"></cat-avatar>
+            </section>
+
+            <section id="badge">
+              <h2>Badge</h2>
+              <cat-badge>Default</cat-badge>
+
+              <h3>Variant</h3>
+              <cat-badge variant="filled">Filled</cat-badge>
+              <cat-badge variant="outlined">Outlined</cat-badge>
+
+              <h3>Color</h3>
+              <cat-badge icon="sparkle-filled" color="primary">Primary</cat-badge>
+              <cat-badge icon="sparkle-filled" color="secondary">Secondary</cat-badge>
+              <cat-badge icon="sparkle-filled" color="info">Info</cat-badge>
+              <cat-badge icon="sparkle-filled" color="success">Success</cat-badge>
+              <cat-badge icon="sparkle-filled" color="warning">Warning</cat-badge>
+              <cat-badge icon="sparkle-filled" color="danger">Danger</cat-badge>
+              <br />
+              <br />
+              <cat-badge icon="sparkle-filled" icon-right color="primary">Primary</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right color="secondary">Secondary</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right color="info">Info</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right color="success">Success</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right color="warning">Warning</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right color="danger">Danger</cat-badge>
+
+              <h3>Size</h3>
+              <cat-badge icon="sparkle-filled" size="xs">Size XS</cat-badge>
+              <cat-badge icon="sparkle-filled" size="s">Size S</cat-badge>
+              <cat-badge icon="sparkle-filled" size="m">Size M</cat-badge>
+              <cat-badge icon="sparkle-filled" size="l">Size L</cat-badge>
+              <cat-badge icon="sparkle-filled" size="xl">Size XL</cat-badge>
+              <br />
+              <br />
+              <cat-badge icon="sparkle-filled" icon-right size="xs">Size XS</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right size="s">Size S</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right size="m">Size M</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right size="l">Size L</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-right size="xl">Size XL</cat-badge>
+              <br />
+              <br />
+              <cat-badge icon="sparkle-filled" icon-only="xs" size="xs">sdfdsf sdfsdf</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-only="s" size="s">sdfdsf sdfsdf</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-only="m" size="m">sdfdsf sdfsdf</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-only="l" size="l">sdfdsf sdfsdf</cat-badge>
+              <cat-badge icon="sparkle-filled" icon-only="xl" size="xl">sdfdsf sdfsdf</cat-badge>
+
+              <h3>Round</h3>
+              <cat-badge round="true">Round</cat-badge>
+              <cat-badge round="true" color="danger" size="xs"></cat-badge>
+
+              <h3>Pulse</h3>
+              <cat-badge pulse="true">Pulse</cat-badge>
+              <cat-badge pulse="true" variant="outlined">Pulse</cat-badge>
+              <cat-badge pulse="true" round="true" color="danger" size="xs"></cat-badge>
+
+              <h3>Layout</h3>
+              <cat-badge
+                >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                labore et dolore magna aliquyam erat, sed diam voluptua.
+              </cat-badge>
+            </section>
+
+            <section id="button">
+              <h2>Button</h2>
+              <cat-button test-id="data-test">Button</cat-button>
+
+              <h3>Color & Variant</h3>
+              <cat-button icon="sparkle-filled" variant="filled" color="primary">Primary</cat-button>
+              <cat-button icon="sparkle-filled" variant="outlined" color="primary">Primary</cat-button>
+              <cat-button icon="sparkle-filled" variant="text" color="primary">Primary</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="primary">Primary</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" variant="filled" color="secondary">Secondary</cat-button>
+              <cat-button icon="sparkle-filled" variant="outlined" color="secondary">Secondary</cat-button>
+              <cat-button icon="sparkle-filled" variant="text" color="secondary">Secondary</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="secondary">Secondary</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" variant="filled" color="info">Info</cat-button>
+              <cat-button icon="sparkle-filled" variant="outlined" color="info">Info</cat-button>
+              <cat-button icon="sparkle-filled" variant="text" color="info">Info</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="info">Info</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" variant="filled" color="success">Success</cat-button>
+              <cat-button icon="sparkle-filled" variant="outlined" color="success">Success</cat-button>
+              <cat-button icon="sparkle-filled" variant="text" color="success">Success</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="success">Success</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" variant="filled" color="warning">Warning</cat-button>
+              <cat-button icon="sparkle-filled" variant="outlined" color="warning">Warning</cat-button>
+              <cat-button icon="sparkle-filled" variant="text" color="warning">Warning</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="warning">Warning</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" variant="filled" color="danger">Danger</cat-button>
+              <cat-button icon="sparkle-filled" variant="outlined" color="danger">Danger</cat-button>
+              <cat-button icon="sparkle-filled" variant="text" color="danger">Danger</cat-button>
+              <cat-button icon="sparkle-filled" variant="link" color="danger">Danger</cat-button>
+
+              <h3>Size</h3>
+              <cat-button size="xs" icon="sparkle-filled">Size XS</cat-button>
+              <cat-button size="s" icon="sparkle-filled">Size S</cat-button>
+              <cat-button size="m" icon="sparkle-filled">Size M</cat-button>
+              <cat-button size="l" icon="sparkle-filled">Size L</cat-button>
+              <cat-button size="xl" icon="sparkle-filled">Size XL</cat-button>
+
+              <h3>Icons</h3>
+              <cat-button icon="sparkle-filled">Prefix</cat-button>
+              <cat-button icon="sparkle-filled" icon-suffix="true">Suffix</cat-button>
+              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA">Suffix</cat-button>
+
+              <h3>Icon buttons</h3>
+              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xs"></cat-button>
+              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="s"></cat-button>
+              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="m"></cat-button>
+              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="l"></cat-button>
+              <cat-button icon="sparkle-filled" icon-only="true" a11y-label="ARIA" round size="xl"></cat-button>
+
+              <h3>Icons (Responsive)</h3>
+              <cat-button icon="sparkle-filled" icon-only="xs" a11y-label="ARIA">xs</cat-button>
+              <cat-button icon="sparkle-filled" icon-only="s" a11y-label="ARIA">s</cat-button>
+              <cat-button icon="sparkle-filled" icon-only="m" a11y-label="ARIA">m</cat-button>
+              <cat-button icon="sparkle-filled" icon-only="l" a11y-label="ARIA">l</cat-button>
+              <cat-button icon="sparkle-filled" icon-only="xl" a11y-label="ARIA">xl</cat-button>
+
+              <h3>Links</h3>
+              <cat-button url="http://www.google.de">Google</cat-button>
+              <cat-button url="http://www.google.de" url-target="_blank">Google (ext.)</cat-button>
+
+              <div class="cat-mt-s">
+                <cat-button inline="true" variant="link" url="http://www.google.de">Link 1</cat-button>
+                <cat-button inline="true" variant="link" url="http://www.google.de">Link 2</cat-button>
+              </div>
+
+              <h3>Active</h3>
+              <cat-button icon="sparkle-filled" active="true" variant="filled" color="primary">Primary</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="primary">Primary</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="text" color="primary">Primary</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" active="true" variant="filled" color="secondary">Secondary</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="secondary"
+                >Secondary
               </cat-button>
-              <nav slot="content">
-                <ul>
+              <cat-button icon="sparkle-filled" active="true" variant="text" color="secondary">Secondary</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" active="true" variant="filled" color="info">Info</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="info">Info</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="text" color="info">Info</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" active="true" variant="filled" color="success">Success</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="success">Success</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="text" color="success">Success</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" active="true" variant="filled" color="warning">Warning</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="warning">Warning</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="text" color="warning">Warning</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" active="true" variant="filled" color="danger">Danger</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="outlined" color="danger">Danger</cat-button>
+              <cat-button icon="sparkle-filled" active="true" variant="text" color="danger">Danger</cat-button>
+
+              <h3>Disabled</h3>
+              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="primary">Primary</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="primary">Primary</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="primary">Primary</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="secondary"
+                >Secondary
+              </cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="secondary"
+                >Secondary
+              </cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="secondary">Secondary</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="info">Info</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="info">Info</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="info">Info</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="success">Success</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="success">Success</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="success">Success</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="warning">Warning</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="warning">Warning</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="warning">Warning</cat-button>
+              <br /><br />
+              <cat-button icon="sparkle-filled" disabled="true" variant="filled" color="danger">Danger</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="outlined" color="danger">Danger</cat-button>
+              <cat-button icon="sparkle-filled" disabled="true" variant="text" color="danger">Danger</cat-button>
+
+              <h3>Loading</h3>
+              <cat-button loading="true" variant="filled" color="primary">Primary</cat-button>
+              <cat-button loading="true" variant="outlined" color="primary">Primary</cat-button>
+              <cat-button loading="true" variant="text" color="primary">Primary</cat-button>
+              <br /><br />
+              <cat-button loading="true" variant="filled" color="secondary">Secondary</cat-button>
+              <cat-button loading="true" variant="outlined" color="secondary">Secondary</cat-button>
+              <cat-button loading="true" variant="text" color="secondary">Secondary</cat-button>
+              <br /><br />
+              <cat-button loading="true" variant="filled" color="info">Info</cat-button>
+              <cat-button loading="true" variant="outlined" color="info">Info</cat-button>
+              <cat-button loading="true" variant="text" color="info">Info</cat-button>
+              <br /><br />
+              <cat-button loading="true" variant="filled" color="success">Success</cat-button>
+              <cat-button loading="true" variant="outlined" color="success">Success</cat-button>
+              <cat-button loading="true" variant="text" color="success">Success</cat-button>
+              <br /><br />
+              <cat-button loading="true" variant="filled" color="warning">Warning</cat-button>
+              <cat-button loading="true" variant="outlined" color="warning">Warning</cat-button>
+              <cat-button loading="true" variant="text" color="warning">Warning</cat-button>
+              <br /><br />
+              <cat-button loading="true" variant="filled" color="danger">Danger</cat-button>
+              <cat-button loading="true" variant="outlined" color="danger">Danger</cat-button>
+              <cat-button loading="true" variant="text" color="danger">Danger</cat-button>
+
+              <h3>Layout</h3>
+              <div style="width: 200px; border: 1px solid gray">
+                <cat-button icon="sparkle-filled">Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
+                <br />
+                <cat-button icon="sparkle-filled" no-ellipsis>Lorem ipsum dolor sit amet, consetetur elitr</cat-button>
+                <br />
+                <cat-button icon="sparkle-filled" class="cat-block">Block</cat-button>
+                <cat-button icon="sparkle-filled" class="cat-block cat-text-left">Block (left)</cat-button>
+                <cat-button icon="sparkle-filled" class="cat-block cat-text-right">Block (right)</cat-button>
+              </div>
+            </section>
+
+            <section id="group-button">
+              <h2>Group button</h2>
+
+              <div style="display: flex; flex-direction: column; gap: 8px">
+                <cat-button-group a11y-label="Group button outlined">
+                  <cat-button>Left</cat-button>
+                  <cat-button>Middle</cat-button>
+                  <cat-button>Middle1</cat-button>
+                  <cat-button>Right</cat-button>
+                </cat-button-group>
+
+                <cat-button-group a11y-label="Group button filled">
+                  <cat-button variant="filled">Left</cat-button>
+                  <cat-button variant="filled">Middle</cat-button>
+                  <cat-button variant="filled">Right</cat-button>
+                </cat-button-group>
+
+                <cat-button-group a11y-label="Group button text">
+                  <cat-button variant="text">Left</cat-button>
+                  <cat-button variant="text">Middle</cat-button>
+                  <cat-button variant="text">Right</cat-button>
+                </cat-button-group>
+              </div>
+            </section>
+
+            <section id="card">
+              <h2>Card</h2>
+
+              <div class="canvas-fake">
+                <cat-card>
+                  <h3>Lorem ipsum dolor sit amet</h3>
+                  <p>
+                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                    labore et dolore magna aliquyam erat, sed diam voluptua.
+                  </p>
+                  <p>
+                    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+                    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+                    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+                  </p>
+                </cat-card>
+              </div>
+              <h3>Navigation</h3>
+              <div class="canvas-fake">
+                <cat-card>
+                  <nav>
+                    <ul>
+                      <li class="cat-nav-head">Headline</li>
+                      <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
+                      <li>
+                        <cat-button class="cat-nav-item" color="primary">Nav item 1</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" active>Nav item 2</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" color="warning">Nav item 3</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" disabled>Nav item 4</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item">Nav item 5 (long)</cat-button>
+                      </li>
+                      <li class="cat-hr"></li>
+                      <li>
+                        <cat-button class="cat-nav-item" color="danger" onclick="console.log(6)" active
+                          >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f
+                        </cat-button>
+                      </li>
+                    </ul>
+                    <hr />
+                    <ul>
+                      <li>
+                        <cat-button class="cat-nav-item" variant="outlined" color="secondary" onclick="console.log(3)"
+                          >Nav item 3
+                        </cat-button>
+                      </li>
+                    </ul>
+                  </nav>
+                </cat-card>
+              </div>
+            </section>
+
+            <section id="checkbox" class="cat-form">
+              <h2>Checkbox</h2>
+              <cat-checkbox label="Label"></cat-checkbox>
+
+              <h3>State</h3>
+              <cat-checkbox label="Disabled" disabled></cat-checkbox>
+              <cat-checkbox label="Checked" checked></cat-checkbox>
+              <cat-checkbox label="Checked disabled" checked disabled></cat-checkbox>
+              <cat-checkbox label="Indeterminate" indeterminate="true" id="indeterminate"></cat-checkbox>
+              <cat-button id="indeterminate-true">Set inteterminate true</cat-button>
+              <cat-button id="indeterminate-false">Set inteterminate false</cat-button>
+              <cat-button id="value-true">Set value true</cat-button>
+              <cat-button id="value-false">Set value false</cat-button>
+              <script>
+                document.querySelector('#indeterminate-true').addEventListener('click', () => {
+                  document.querySelector('#indeterminate').indeterminate = true;
+                });
+                document.querySelector('#indeterminate-false').addEventListener('click', () => {
+                  document.querySelector('#indeterminate').indeterminate = false;
+                });
+                document.querySelector('#value-true').addEventListener('click', () => {
+                  document.querySelector('#indeterminate').checked = true;
+                });
+                document.querySelector('#value-false').addEventListener('click', () => {
+                  document.querySelector('#indeterminate').checked = false;
+                });
+              </script>
+
+              <h3>Alignment</h3>
+              <cat-checkbox label="Label" label-left></cat-checkbox>
+
+              <h3>Slots</h3>
+              <cat-checkbox hint="This is a hint!">
+                <span slot="label">This is the <b>label</b></span>
+                <span slot="hint">This is another!</span>
+              </cat-checkbox>
+            </section>
+
+            <section id="divider">
+              <h2>Divider</h2>
+            </section>
+
+            <section id="dropdown">
+              <h2>Dropdown</h2>
+
+              <div class="cat-flex cat-item-center cat-gap-s cat-mb-m">
+                <!-- Wide dropdown -->
+                <cat-dropdown justify focus-trap="true">
+                  <cat-button slot="trigger" color="primary" variant="filled"
+                    >Button with very long content so that it is very wide
+                  </cat-button>
+                  <nav slot="content">
+                    <ul>
+                      <li class="cat-nav-head">Headline</li>
+                      <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="sparkle-filled" color="warning">Nav item 3</cat-button>
+                      </li>
+                    </ul>
+                  </nav>
+                </cat-dropdown>
+
+                <!-- Example: User menu -->
+                <cat-dropdown overflow>
+                  <cat-button slot="trigger" variant="filled" color="primary" size="m">Example User Menu</cat-button>
+                  <nav slot="content" style="min-width: 240px">
+                    <ul>
+                      <li>
+                        <cat-button class="cat-nav-item">
+                          <div class="cat-flex cat-items-center cat-gap-s">
+                            <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
+                            <div class="cat-flex cat-flex-col cat-items-start">
+                              <span>Max Mustermann</span>
+                              <span class="cat-text-s cat-muted">Open profile</span>
+                            </div>
+                          </div>
+                        </cat-button>
+                      </li>
+                      <li>
+                        <cat-dropdown placement="right-start">
+                          <cat-button slot="trigger" class="cat-nav-item" icon="status-available">Available</cat-button>
+                          <nav slot="content">
+                            <ul>
+                              <li class="cat-nav-head">Headline</li>
+                              <li class="cat-nav-text cat-muted">
+                                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+                              </li>
+                              <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
+                                >Nav item 1
+                              </cat-button>
+                            </ul>
+                          </nav>
+                        </cat-dropdown>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="bookmark-outlined">Saved</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="w-document-outlined">Files</cat-button>
+                      </li>
+                      <hr />
+                      <li class="cat-nav-head">Platform</li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="settings-outlined">Administration</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="bar-chart-outlined">Analytics</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="w-hero-teaser-outlined">Manage hero teaser</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="w-alert-outlined">Reported content</cat-button>
+                      </li>
+                      <hr />
+                      <li class="cat-nav-head">Settings</li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="sliders-outlined">Account</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="bell-outlined">Notifications</cat-button>
+                      </li>
+                      <hr />
+                      <li class="cat-nav-head">Support</li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="restart-outlined">Restart tour</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="question-mark-circle-outlined">Help</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item" icon="info-circle-outlined">About</cat-button>
+                      </li>
+                      <hr />
+                      <li>
+                        <cat-button class="cat-nav-item" icon="sign-out-outlined">Log out</cat-button>
+                      </li>
+                    </ul>
+                  </nav>
+                </cat-dropdown>
+              </div>
+
+              <cat-card class="cat-flex cat-items-center cat-gap-m cat-border cat-pv-s">
+                Dropdown inside a card
+                <cat-dropdown>
+                  <cat-button slot="trigger">Click me</cat-button>
+                  <nav slot="content">
+                    <ul>
+                      <li>
+                        <cat-button class="cat-nav-item">Item A</cat-button>
+                      </li>
+                      <li>
+                        <cat-button class="cat-nav-item">Item B</cat-button>
+                      </li>
+                    </ul>
+                  </nav>
+                </cat-dropdown>
+              </cat-card>
+
+              <cat-dropdown no-auto-close>
+                <cat-button slot="trigger">Button (keep open)</cat-button>
+                <div slot="content" class="cat-flex cat-flex-col cat-p-m">
+                  <p>Here is some content.</p>
+                  <cat-button>Action</cat-button>
+                </div>
+              </cat-dropdown>
+
+              <cat-dropdown overflow>
+                <cat-button slot="trigger" color="primary" variant="filled">Nested dropdown</cat-button>
+                <nav slot="content">
+                  <ul>
+                    <li class="cat-nav-head">Headline</li>
+                    <li>
+                      <cat-dropdown placement="right-start">
+                        <cat-button slot="trigger" class="cat-nav-item" icon="sparkle-filled" color="primary"
+                          >Click one more time
+                        </cat-button>
+                        <nav slot="content">
+                          <ul>
+                            <li class="cat-nav-head">Headline</li>
+                            <li class="cat-nav-text cat-muted">
+                              Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+                            </li>
+                            <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
+                              >Nav item 1
+                            </cat-button>
+                          </ul>
+                        </nav>
+                      </cat-dropdown>
+                    </li>
+                    <li>
+                      <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
+                    </li>
+                  </ul>
+                </nav>
+              </cat-dropdown>
+            </section>
+
+            <section id="menu">
+              <h2>Menu</h2>
+
+              <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
+                <!-- Basic menu -->
+                <cat-menu>
+                  <cat-menu-item icon="edit-outlined">Edit</cat-menu-item>
+                  <cat-menu-item icon="copy-outlined">Duplicate</cat-menu-item>
+                  <cat-menu-item icon="archive-outlined">Archive</cat-menu-item>
+                  <hr />
+                  <cat-menu-item icon="trash-outlined" color="danger">Delete</cat-menu-item>
+                </cat-menu>
+
+                <!-- Menu with custom trigger -->
+                <cat-menu trigger-icon="settings-outlined" trigger-a11y-label="Settings menu">
+                  <cat-menu-item icon="user-outlined">Profile</cat-menu-item>
+                  <cat-menu-item icon="sliders-outlined">Preferences</cat-menu-item>
+                  <cat-menu-item icon="bell-outlined">Notifications</cat-menu-item>
+                  <hr />
+                  <cat-menu-item icon="sign-out-outlined">Sign out</cat-menu-item>
+                </cat-menu>
+
+                <cat-menu trigger-color="primary" trigger-variant="filled" trigger-label="Actions menu">
                   <li class="cat-nav-head">Headline</li>
                   <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="sparkle-filled" color="warning">Nav item 3</cat-button>
-                  </li>
-                </ul>
-              </nav>
-            </cat-dropdown>
-
-            <!-- Example: User menu -->
-            <cat-dropdown overflow>
-              <cat-button slot="trigger" variant="filled" color="primary" size="m">Example User Menu</cat-button>
-              <nav slot="content" style="min-width: 240px">
-                <ul>
-                  <li>
-                    <cat-button class="cat-nav-item">
-                      <div class="cat-flex cat-items-center cat-gap-s">
-                        <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
-                        <div class="cat-flex cat-flex-col cat-items-start">
-                          <span>Max Mustermann</span>
-                          <span class="cat-text-s cat-muted">Open profile</span>
-                        </div>
+                  <cat-menu-item icon="sparkle-filled" color="primary">Nav item 1</cat-menu-item>
+                  <cat-menu-item icon="sparkle-filled">Nav item 2</cat-menu-item>
+                  <cat-menu-item icon="sparkle-filled" color="warning">Nav item 3</cat-menu-item>
+                  <cat-menu-item icon="sparkle-filled" disabled>Nav item 4</cat-menu-item>
+                  <cat-menu-item>Nav item 5 (long)</cat-menu-item>
+                  <li class="cat-hr"></li>
+                  <cat-menu-item color="danger" onclick="console.log(6)"
+                    >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f
+                  </cat-menu-item>
+                  <hr />
+                  <cat-menu-item variant="outlined" onclick="console.log(3)">Nav item 3</cat-menu-item>
+                </cat-menu>
+
+                <cat-menu overflow trigger-variant="filled" trigger-label="Example User Menu">
+                  <cat-menu-item>
+                    <div class="cat-flex cat-items-center cat-gap-s">
+                      <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
+                      <div class="cat-flex cat-flex-col cat-items-start">
+                        <span>Max Mustermann</span>
+                        <span class="cat-text-s cat-muted">Open profile</span>
                       </div>
-                    </cat-button>
-                  </li>
-                  <li>
+                    </div>
+                  </cat-menu-item>
+                  <cat-menu-item sub-menu>
                     <cat-dropdown placement="right-start">
                       <cat-button slot="trigger" class="cat-nav-item" icon="status-available">Available</cat-button>
                       <nav slot="content">
@@ -721,967 +889,799 @@ <h2>Dropdown</h2>
                           <li class="cat-nav-text cat-muted">
                             Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                           </li>
-                          <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
-                          >Nav item 1
-                          </cat-button>
+                          <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
                         </ul>
                       </nav>
                     </cat-dropdown>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="bookmark-outlined">Saved</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="w-document-outlined">Files</cat-button>
-                  </li>
-                  <hr />
-                  <li class="cat-nav-head">Platform</li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="settings-outlined">Administration</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="bar-chart-outlined">Analytics</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="w-hero-teaser-outlined">Manage hero teaser</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="w-alert-outlined">Reported content</cat-button>
-                  </li>
-                  <hr />
-                  <li class="cat-nav-head">Settings</li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="sliders-outlined">Account</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="bell-outlined">Notifications</cat-button>
-                  </li>
-                  <hr />
-                  <li class="cat-nav-head">Support</li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="restart-outlined">Restart tour</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="question-mark-circle-outlined">Help</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item" icon="info-circle-outlined">About</cat-button>
-                  </li>
-                  <hr />
-                  <li>
-                    <cat-button class="cat-nav-item" icon="sign-out-outlined">Log out</cat-button>
-                  </li>
-                </ul>
-              </nav>
-            </cat-dropdown>
-          </div>
-
-          <cat-card class="cat-flex cat-items-center cat-gap-m cat-border cat-pv-s">
-            Dropdown inside a card
-            <cat-dropdown>
-              <cat-button slot="trigger">Click me</cat-button>
-              <nav slot="content">
-                <ul>
-                  <li>
-                    <cat-button class="cat-nav-item">Item A</cat-button>
-                  </li>
-                  <li>
-                    <cat-button class="cat-nav-item">Item B</cat-button>
-                  </li>
-                </ul>
-              </nav>
-            </cat-dropdown>
-          </cat-card>
-
-          <cat-dropdown no-auto-close>
-            <cat-button slot="trigger">Button (keep open)</cat-button>
-            <div slot="content" class="cat-flex cat-flex-col cat-p-m">
-              <p>Here is some content.</p>
-              <cat-button>Action</cat-button>
-            </div>
-          </cat-dropdown>
-
-          <cat-dropdown overflow>
-            <cat-button slot="trigger" color="primary" variant="filled">Nested dropdown</cat-button>
-            <nav slot="content">
-              <ul>
-                <li class="cat-nav-head">Headline</li>
-                <li>
-                  <cat-dropdown placement="right-start">
-                    <cat-button slot="trigger" class="cat-nav-item" icon="sparkle-filled" color="primary"
-                    >Click one more time
-                    </cat-button>
-                    <nav slot="content">
-                      <ul>
-                        <li class="cat-nav-head">Headline</li>
-                        <li class="cat-nav-text cat-muted">
-                          Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-                        </li>
-                        <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary"
-                        >Nav item 1
-                        </cat-button>
-                      </ul>
-                    </nav>
-                  </cat-dropdown>
-                </li>
-                <li>
-                  <cat-button class="cat-nav-item" icon="sparkle-filled">Nav item 2</cat-button>
-                </li>
-              </ul>
-            </nav>
-          </cat-dropdown>
-        </section>
-
-        <section id="menu">
-          <h2>Menu</h2>
-
-          <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
-            <!-- Basic menu -->
-            <cat-menu>
-              <cat-menu-item icon="edit-outlined">Edit</cat-menu-item>
-              <cat-menu-item icon="copy-outlined">Duplicate</cat-menu-item>
-              <cat-menu-item icon="archive-outlined">Archive</cat-menu-item>
-              <hr />
-              <cat-menu-item icon="trash-outlined" color="danger">Delete</cat-menu-item>
-            </cat-menu>
-
-            <!-- Menu with custom trigger -->
-            <cat-menu trigger-icon="settings-outlined" trigger-a11y-label="Settings menu">
-              <cat-menu-item icon="user-outlined">Profile</cat-menu-item>
-              <cat-menu-item icon="sliders-outlined">Preferences</cat-menu-item>
-              <cat-menu-item icon="bell-outlined">Notifications</cat-menu-item>
-              <hr />
-              <cat-menu-item icon="sign-out-outlined">Sign out</cat-menu-item>
-            </cat-menu>
-
-            <cat-menu trigger-color="primary" trigger-variant="filled" trigger-label="Actions menu">
-              <li class="cat-nav-head">Headline</li>
-              <li class="cat-nav-text cat-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
-              <cat-menu-item icon="sparkle-filled" color="primary">Nav item 1</cat-menu-item>
-              <cat-menu-item icon="sparkle-filled">Nav item 2</cat-menu-item>
-              <cat-menu-item icon="sparkle-filled" color="warning">Nav item 3</cat-menu-item>
-              <cat-menu-item icon="sparkle-filled" disabled>Nav item 4</cat-menu-item>
-              <cat-menu-item>Nav item 5 (long)</cat-menu-item>
-              <li class="cat-hr"></li>
-              <cat-menu-item color="danger" onclick="console.log(6)"
-              >Nsdhfgjhsfg js fgjsdhgf jshdgf sdhgf jsdgf jhsdg fjhsdg fjhsgd fjshgdfjs dfgjsd f
-              </cat-menu-item>
-              <hr />
-              <cat-menu-item variant="outlined" onclick="console.log(3)">Nav item 3</cat-menu-item>
-            </cat-menu>
-
-            <cat-menu overflow trigger-variant="filled" trigger-label="Example User Menu">
-              <cat-menu-item>
-                <div class="cat-flex cat-items-center cat-gap-s">
-                  <cat-avatar initials="MM" size="m" src="https://tinyurl.com/bdcu9va5" round></cat-avatar>
-                  <div class="cat-flex cat-flex-col cat-items-start">
-                    <span>Max Mustermann</span>
-                    <span class="cat-text-s cat-muted">Open profile</span>
-                  </div>
+                  </cat-menu-item>
+                  <cat-menu-item icon="bookmark-outlined">Saved</cat-menu-item>
+                </cat-menu>
+              </div>
+
+              <h3>Menu Placement Examples</h3>
+              <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
+                <cat-menu placement="bottom-start" trigger-label="Bottom start menu">
+                  <cat-menu-item icon="align-left">Bottom start (default)</cat-menu-item>
+                  <cat-menu-item>Item 2</cat-menu-item>
+                  <cat-menu-item>Item 3</cat-menu-item>
+                </cat-menu>
+
+                <cat-menu placement="bottom-end" trigger-label="Bottom end menu">
+                  <cat-menu-item icon="align-right">Bottom end</cat-menu-item>
+                  <cat-menu-item>Item 2</cat-menu-item>
+                  <cat-menu-item>Item 3</cat-menu-item>
+                </cat-menu>
+
+                <cat-menu placement="top-start" trigger-label="Top start menu">
+                  <cat-menu-item icon="arrow-up">Top start</cat-menu-item>
+                  <cat-menu-item>Item 2</cat-menu-item>
+                  <cat-menu-item>Item 3</cat-menu-item>
+                </cat-menu>
+              </div>
+
+              <h3>Arrow Navigation Modes</h3>
+              <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
+                <!-- Vertical navigation (default) -->
+                <cat-menu
+                  arrow-navigation="vertical"
+                  trigger-label="Vertical navigation (default)"
+                  trigger-icon="arrows-vertical"
+                >
+                  <cat-menu-item icon="arrow-up-down-filled">Arrow Up/Down navigation</cat-menu-item>
+                  <cat-menu-item icon="list-outlined">Default for dropdown menus</cat-menu-item>
+                  <cat-menu-item icon="menu-outlined">Vertical orientation (ARIA)</cat-menu-item>
+                  <cat-menu-item icon="keyboard-outlined">Standard menu pattern</cat-menu-item>
+                </cat-menu>
+
+                <!-- Horizontal navigation -->
+                <cat-menu
+                  arrow-navigation="horizontal"
+                  trigger-label="Horizontal navigation"
+                  trigger-icon="arrows-horizontal"
+                  placement="bottom-start"
+                >
+                  <cat-menu-item icon="arrow-left-right-filled">Arrow Left/Right navigation</cat-menu-item>
+                  <cat-menu-item icon="columns-outlined">Ideal for toolbar menus</cat-menu-item>
+                  <cat-menu-item icon="layout-outlined">Horizontal orientation (ARIA)</cat-menu-item>
+                  <cat-menu-item icon="keyboard-outlined">Alternative menu pattern</cat-menu-item>
+                </cat-menu>
+              </div>
+            </section>
+
+            <section id="form">
+              <h2>Form</h2>
+              <form class="cat-form" action="." method="GET">
+                <cat-input name="field1" label="Field 1" value="value1"></cat-input>
+                <cat-textarea name="field2" label="Field 2" value="value2"></cat-textarea>
+                <cat-checkbox name="field3" label="Field 3" value="value3" checked></cat-checkbox>
+                <cat-toggle name="field4" label="Field 4" value="value4" checked></cat-toggle>
+                <cat-button submit="true">Submit</cat-button>
+              </form>
+            </section>
+
+            <section id="form-group" class="cat-form">
+              <h2>Form Group</h2>
+              <cat-form-group>
+                <cat-input label="Field 1" max-length="30"></cat-input>
+                <cat-input label="Field 2" required></cat-input>
+              </cat-form-group>
+
+              <h3>Alignment (horizontal)</h3>
+              <cat-form-group label-size="40%" horizontal>
+                <cat-input hint="This is a hint" required max-length="98">
+                  <span slot="label">This is the <b>label</b></span>
+                </cat-input>
+                <cat-input hint="NO LABEL" required></cat-input>
+                <cat-input label="Label" label-hidden="true" hint="NO LABEL" required></cat-input>
+                <cat-input label="Field 1" hint="This is a hint"></cat-input>
+                <cat-input
+                  label="Field 1"
+                  hint="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+                ></cat-input>
+                <cat-input
+                  label="This is a very long label with some more text"
+                  required
+                  hint="This is a hint"
+                ></cat-input>
+                <cat-textarea max-length="50" label="Label" hint="This is a hint"></cat-textarea>
+                <cat-select label="Field 3"></cat-select>
+                <cat-datepicker clearable="true" a11y-label="ARIA" label="Date picker"></cat-datepicker>
+              </cat-form-group>
+
+              <h3>Auto (more required)</h3>
+              <cat-form-group>
+                <cat-input label="Field 1"></cat-input>
+                <cat-input label="Field 2" required></cat-input>
+                <cat-textarea label="Field 3" required></cat-textarea>
+              </cat-form-group>
+
+              <h3>Auto (more optional)</h3>
+              <cat-form-group>
+                <cat-input label="Field 1"></cat-input>
+                <cat-input label="Field 2"></cat-input>
+                <cat-textarea label="Field 3" required></cat-textarea>
+              </cat-form-group>
+
+              <h3>None marker</h3>
+              <cat-form-group required-marker="none">
+                <cat-input label="Field 1"></cat-input>
+                <cat-input label="Field 2"></cat-input>
+                <cat-textarea label="Field 3" required></cat-textarea>
+              </cat-form-group>
+
+              <h3>Only mark optional</h3>
+              <cat-form-group required-marker="optional">
+                <cat-input label="Field 1"></cat-input>
+                <cat-input label="Field 2"></cat-input>
+                <cat-textarea label="Field 3" required></cat-textarea>
+              </cat-form-group>
+
+              <h3>Only mark required</h3>
+              <cat-form-group required-marker="required">
+                <cat-input label="Field 1"></cat-input>
+                <cat-input label="Field 2" required></cat-input>
+                <cat-textarea label="Field 3" required></cat-textarea>
+              </cat-form-group>
+
+              <h3>Dynamic field added</h3>
+              <cat-form-group id="form-group-1">
+                <cat-input id="cat-input-1" label="Field 1"></cat-input>
+                <cat-input label="Field 2" required></cat-input>
+              </cat-form-group>
+
+              <script>
+                let input = document.getElementById('cat-input-1');
+                input.addEventListener('input', () => {
+                  let elementById = document.getElementById('time2');
+                  elementById.value = '13:58';
+                });
+                const formElem = document.getElementById('form-group-1');
+                setTimeout(() => {
+                  const htmlElement = document.createElement('cat-input');
+                  htmlElement.setAttribute('label', 'Field 3');
+                  formElem.appendChild(htmlElement);
+                }, 5000);
+              </script>
+            </section>
+
+            <section id="icon">
+              <h2>Icon</h2>
+              <cat-icon icon="sparkle-filled"></cat-icon>
+
+              <h3>Color</h3>
+              <cat-icon icon="sparkle-filled" style="color: red"></cat-icon>
+              <cat-icon icon="sparkle-filled" style="color: blue"></cat-icon>
+              <cat-icon icon="sparkle-filled" style="color: green"></cat-icon>
+
+              <h3>Size</h3>
+              <cat-icon icon="sparkle-filled" size="xs"></cat-icon>
+              <cat-icon icon="sparkle-filled" size="s"></cat-icon>
+              <cat-icon icon="sparkle-filled" size="m"></cat-icon>
+              <cat-icon icon="sparkle-filled" size="l"></cat-icon>
+              <cat-icon icon="sparkle-filled" size="xl"></cat-icon>
+              <cat-icon icon="sparkle-filled" size="inline" style="font-size: 2.5rem"></cat-icon>
+
+              <h3>Ratio</h3>
+              <cat-icon icon="sp-grid-3-cols" style="--cat-icon-ratio: 2.5"></cat-icon>
+            </section>
+
+            <section id="input" class="cat-form">
+              <h2>Input</h2>
+              <cat-input label="Label" hint="This is a hint!" placeholder="I am the placeholder">
+                <span slot="hint">This is another!</span>
+              </cat-input>
+              <cat-input label="Label" max-length="100">
+                <span slot="label">Priority Label</span>
+              </cat-input>
+              <cat-input label="Label" loading>
+                <span slot="label">Loading</span>
+              </cat-input>
+              <h3>Types</h3>
+              <cat-input label="Color" type="color"></cat-input>
+              <cat-input label="Color" type="color" clearable="true"></cat-input>
+              <cat-input label="Email" type="email"></cat-input>
+              <cat-input label="File" type="file" accept="image/png, image/jpeg" multiple></cat-input>
+              <cat-input label="Number" type="number"></cat-input>
+              <cat-input label="Password" type="password"></cat-input>
+              <cat-input label="Range" type="range"></cat-input>
+              <cat-input label="Search" type="search"></cat-input>
+              <cat-input label="Tel" type="tel"></cat-input>
+              <cat-input label="Text" type="text"></cat-input>
+              <cat-input label="Url" type="url"></cat-input>
+              <h3>Slotted Counter</h3>
+              <cat-input label="Custom counter">
+                <span slot="counter">Show any text here</span>
+              </cat-input>
+            </section>
+
+            <section id="datepicker" class="cat-form">
+              <h2>Datepicker</h2>
+              <cat-date label="New Datepicker"></cat-date>
+              <cat-time id="time2" label="New Timepicker" value="12:00"></cat-time>
+              <cat-datepicker mode="date">
+                <span slot="label">Priority Label</span>
+                <span slot="hint">Priority Hint</span>
+              </cat-datepicker>
+              <cat-datepicker mode="datetime" label="Datetime" disabled></cat-datepicker>
+              <cat-datepicker mode="time" label="Time"></cat-datepicker>
+              <cat-datepicker mode="week" label="Week"></cat-datepicker>
+              <cat-datepicker mode="daterange" label="Daterange"></cat-datepicker>
+              <h3>Inline Datepicker (new)</h3>
+              <cat-date-inline
+                value="2022-06-21"
+                label="test this is"
+                a11y-label="This is an Aria test"
+              ></cat-date-inline>
+              <h3>Inline Datepicker</h3>
+              <cat-card class="cat-inline-flex cat-flex-col cat-border">
+                <h4>Datetime</h4>
+                <cat-datepicker-inline value="2022-06-21T00:00:000Z"></cat-datepicker-inline>
+              </cat-card>
+              <h3>Nested Datepicker</h3>
+              <cat-dropdown>
+                <cat-button slot="trigger" color="primary" variant="filled">Button</cat-button>
+                <div slot="content" class="cat-p-m">
+                  <cat-input></cat-input>
+                  <cat-datepicker mode="date" label="Date"></cat-datepicker>
+                  <cat-datepicker mode="date" label="Date"></cat-datepicker>
                 </div>
-              </cat-menu-item>
-              <cat-menu-item sub-menu>
-                <cat-dropdown placement="right-start">
-                  <cat-button slot="trigger" class="cat-nav-item" icon="status-available">Available</cat-button>
+              </cat-dropdown>
+            </section>
+
+            <section id="notification">
+              <h2>Notification</h2>
+              <cat-button id="notification-trigger">Show Notifications</cat-button>
+              <script type="module">
+                import { catNotificationService } from '/build/index.esm.js';
+
+                document.getElementById('notification-trigger').onclick = function () {
+                  catNotificationService.show('Item saved', {
+                    autoClose: false,
+                    closeButton: true,
+                    action: 'Show saved items'
+                  });
+                  catNotificationService.show('This is light', {
+                    mode: 'light',
+                    closeButton: true,
+                    icon: 'globe-outlined',
+                    action: 'Seite neu laden'
+                  });
+                  catNotificationService.show('Article was saved', {
+                    action: 'Undo'
+                  });
+                  catNotificationService.show('Es scheint als hättest du keine Internetverbindung mehr', {
+                    icon: 'globe-outlined',
+                    action: 'Seite neu laden'
+                  });
+                };
+              </script>
+            </section>
+
+            <section id="pagination">
+              <h2>Pagination</h2>
+              <cat-pagination page-count="10" compact></cat-pagination>
+              <br />
+              <br />
+              <cat-pagination page-count="10" size="s"></cat-pagination>
+              <br />
+              <br />
+              <cat-pagination page-count="10"></cat-pagination>
+              <br />
+              <br />
+              <cat-pagination page-count="10" variant="outlined"></cat-pagination>
+              <br />
+              <br />
+              <span>Change event demo (See console)</span>
+              <cat-pagination id="change-demo" page-count="10" variant="outlined" round></cat-pagination>
+              <script>
+                var paginationDemo = document.getElementById('change-demo');
+
+                paginationDemo.addEventListener('catChange', function (event) {
+                  console.log('Page changed!', event.detail);
+                });
+              </script>
+            </section>
+
+            <section id="radio" class="cat-form">
+              <h2>Radio</h2>
+              <cat-radio label="Label"></cat-radio>
+
+              <h3>Group</h3>
+              <cat-radio-group a11y-label="Radio Group 1" label-left>
+                <cat-radio value="one" label="Option 1 - Group 1" hint="This is a hint" checked></cat-radio>
+                <cat-radio value="two" label="Option 2 - Group 1" hint="This is a hint"></cat-radio>
+                <cat-radio value="three" label="Option 3 - Group 1" hint="This is a hint" disabled></cat-radio>
+              </cat-radio-group>
+
+              <h3>State</h3>
+              <cat-radio label="Disabled" disabled></cat-radio>
+              <cat-radio label="Checked" checked></cat-radio>
+              <cat-radio label="Checked disabled" checked disabled></cat-radio>
+
+              <h3>Alignment</h3>
+              <cat-radio label="Label" label-left></cat-radio>
+
+              <h3>Slots</h3>
+              <cat-radio hint="This is a hint!">
+                <span slot="label">This is the <b>label</b></span>
+                <span slot="hint">This is another!</span>
+              </cat-radio>
+            </section>
+
+            <section id="scrollable">
+              <h2>Scrollable</h2>
+              <cat-scrollable style="max-height: 8rem; width: 25vw">
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+              </cat-scrollable>
+            </section>
+
+            <section id="segmented-control">
+              <h2>Segmented Control</h2>
+
+              <h3>Default</h3>
+              <cat-segmented-control>
+                <cat-segment value="one">Option 1</cat-segment>
+                <cat-segment value="two">Option 2</cat-segment>
+                <cat-segment value="three">Option 3 with overflowing content</cat-segment>
+              </cat-segmented-control>
+
+              <h3>Sizes</h3>
+              <cat-segmented-control size="xs">
+                <cat-segment value="one">XS Option 1</cat-segment>
+                <cat-segment value="two">XS Option 2</cat-segment>
+                <cat-segment value="three">XS Option 3</cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="s">
+                <cat-segment value="one">S Option 1</cat-segment>
+                <cat-segment value="two">S Option 2</cat-segment>
+                <cat-segment value="three">S Option 3</cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="m">
+                <cat-segment value="one">M Option 1</cat-segment>
+                <cat-segment value="two">M Option 2</cat-segment>
+                <cat-segment value="three">M Option 3</cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="l">
+                <cat-segment value="one">L Option 1</cat-segment>
+                <cat-segment value="two">L Option 2</cat-segment>
+                <cat-segment value="three">L Option 3</cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="xl">
+                <cat-segment value="one">XL Option 1</cat-segment>
+                <cat-segment value="two">XL Option 2</cat-segment>
+                <cat-segment value="three">XL Option 3</cat-segment>
+              </cat-segmented-control>
+
+              <h3>Disabled</h3>
+              <cat-segmented-control disabled>
+                <cat-segment value="one">Option 1</cat-segment>
+                <cat-segment value="two">Option 2</cat-segment>
+                <cat-segment value="three">Option 3</cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control>
+                <cat-segment value="one">Option 1</cat-segment>
+                <cat-segment value="two" disabled>Option 2</cat-segment>
+                <cat-segment value="three">Option 3</cat-segment>
+              </cat-segmented-control>
+
+              <h3>Icons</h3>
+              <cat-segmented-control>
+                <cat-segment value="home" icon="bookmark-filled">Option 1</cat-segment>
+                <cat-segment value="settings" icon="camera-filled">Option 2</cat-segment>
+                <cat-segment value="star" icon="star-filled">Option 3</cat-segment>
+              </cat-segmented-control>
+
+              <h3>Icon Only</h3>
+              <cat-segmented-control size="xs">
+                <cat-segment value="home" icon="bookmark-filled" icon-only a11y-label="Option 1"></cat-segment>
+                <cat-segment value="settings" icon="camera-filled" icon-only a11y-label="Option 2"></cat-segment>
+                <cat-segment value="star" icon="star-filled" icon-only a11y-label="Option 3"></cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="s">
+                <cat-segment value="home" icon="bookmark-filled" icon-only a11y-label="Option 1"></cat-segment>
+                <cat-segment value="settings" icon="camera-filled" icon-only a11y-label="Option 2"></cat-segment>
+                <cat-segment value="star" icon="star-filled" icon-only a11y-label="Option 3"></cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="m">
+                <cat-segment value="home" icon="bookmark-filled" icon-only a11y-label="Option 1"></cat-segment>
+                <cat-segment value="settings" icon="camera-filled" icon-only a11y-label="Option 2"></cat-segment>
+                <cat-segment value="star" icon="star-filled" icon-only a11y-label="Option 3"></cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="l">
+                <cat-segment value="home" icon="bookmark-filled" icon-only a11y-label="Option 1"></cat-segment>
+                <cat-segment value="settings" icon="camera-filled" icon-only a11y-label="Option 2"></cat-segment>
+                <cat-segment value="star" icon="star-filled" icon-only a11y-label="Option 3"></cat-segment>
+              </cat-segmented-control>
+              <br />
+              <br />
+              <cat-segmented-control size="xl">
+                <cat-segment value="home" icon="bookmark-filled" icon-only a11y-label="Option 1"></cat-segment>
+                <cat-segment value="settings" icon="camera-filled" icon-only a11y-label="Option 2"></cat-segment>
+                <cat-segment value="star" icon="star-filled" icon-only a11y-label="Option 3"></cat-segment>
+              </cat-segmented-control>
+            </section>
+
+            <section id="select">
+              <h2>Select</h2>
+              <cat-select-demo></cat-select-demo>
+            </section>
+
+            <section id="skeleton">
+              <h2>Skeleton</h2>
+              <cat-skeleton></cat-skeleton>
+
+              <h3>Effect</h3>
+              <cat-skeleton effect="plain"></cat-skeleton>
+              <br />
+              <cat-skeleton effect="sheen"></cat-skeleton>
+              <br />
+              <cat-skeleton effect="pulse"></cat-skeleton>
+
+              <h3>Variant</h3>
+              <cat-skeleton variant="square"></cat-skeleton>
+              <cat-skeleton variant="circle"></cat-skeleton>
+              <cat-skeleton variant="rectangle"></cat-skeleton>
+              <cat-skeleton variant="head"></cat-skeleton>
+              <cat-skeleton variant="body"></cat-skeleton>
+            </section>
+
+            <section id="spinner">
+              <h2>Spinner</h2>
+              <cat-spinner></cat-spinner>
+
+              <h3>Color</h3>
+              <cat-spinner style="color: red"></cat-spinner>
+              <cat-spinner style="color: blue"></cat-spinner>
+              <cat-spinner style="color: green"></cat-spinner>
+
+              <h3>Size</h3>
+              <cat-spinner size="xs"></cat-spinner>
+              <cat-spinner size="s"></cat-spinner>
+              <cat-spinner size="m"></cat-spinner>
+              <cat-spinner size="l"></cat-spinner>
+              <cat-spinner size="xl"></cat-spinner>
+              <cat-spinner size="inline" style="font-size: 2.5rem"></cat-spinner>
+            </section>
+
+            <section id="tabs">
+              <h2>Tabs</h2>
+              <cat-tabs>
+                <cat-tab id="tab1" label="First"></cat-tab>
+                <cat-tab label="Second"></cat-tab>
+                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+              </cat-tabs>
+              <h3>Alignment</h3>
+              <cat-tabs tabs-align="center">
+                <cat-tab label="First"></cat-tab>
+                <cat-tab label="Second"></cat-tab>
+                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+              </cat-tabs>
+              <br />
+              <br />
+              <cat-tabs tabs-align="right">
+                <cat-tab label="First"></cat-tab>
+                <cat-tab label="Second"></cat-tab>
+                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+              </cat-tabs>
+              <br />
+              <br />
+              <cat-tabs tabs-align="justify" active-tab="second">
+                <cat-tab label="First" deactivate></cat-tab>
+                <cat-tab label="Second" id="second"></cat-tab>
+                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+              </cat-tabs>
+              <script>
+                const tab = document.querySelector('#tab1');
+                setInterval(() => {
+                  tab.deactivated = true;
+                }, 5000);
+              </script>
+              <h3>More</h3>
+              <cat-tabs>
+                <cat-tab id="tab1" label="First"></cat-tab>
+                <cat-tab label="Second"></cat-tab>
+                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+                <cat-dropdown slot="more">
+                  <cat-button class="cat-tab cat-ml-auto" slot="trigger" variant="text">More</cat-button>
                   <nav slot="content">
                     <ul>
-                      <li class="cat-nav-head">Headline</li>
-                      <li class="cat-nav-text cat-muted">
-                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-                      </li>
-                      <cat-button class="cat-nav-item" icon="sparkle-filled" color="primary">Nav item 1</cat-button>
+                      <cat-button class="cat-nav-item">Nav item 1</cat-button>
+                      <cat-button class="cat-nav-item">Nav item 1</cat-button>
                     </ul>
                   </nav>
                 </cat-dropdown>
-              </cat-menu-item>
-              <cat-menu-item icon="bookmark-outlined">Saved</cat-menu-item>
-            </cat-menu>
-          </div>
-
-          <h3>Menu Placement Examples</h3>
-          <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
-            <cat-menu placement="bottom-start" trigger-label="Bottom start menu">
-              <cat-menu-item icon="align-left">Bottom start (default)</cat-menu-item>
-              <cat-menu-item>Item 2</cat-menu-item>
-              <cat-menu-item>Item 3</cat-menu-item>
-            </cat-menu>
-
-            <cat-menu placement="bottom-end" trigger-label="Bottom end menu">
-              <cat-menu-item icon="align-right">Bottom end</cat-menu-item>
-              <cat-menu-item>Item 2</cat-menu-item>
-              <cat-menu-item>Item 3</cat-menu-item>
-            </cat-menu>
-
-            <cat-menu placement="top-start" trigger-label="Top start menu">
-              <cat-menu-item icon="arrow-up">Top start</cat-menu-item>
-              <cat-menu-item>Item 2</cat-menu-item>
-              <cat-menu-item>Item 3</cat-menu-item>
-            </cat-menu>
-          </div>
-
-          <h3>Arrow Navigation Modes</h3>
-          <div class="cat-flex cat-items-center cat-gap-s cat-mb-m">
-            <!-- Vertical navigation (default) -->
-            <cat-menu
-              arrow-navigation="vertical"
-              trigger-label="Vertical navigation (default)"
-              trigger-icon="arrows-vertical"
-            >
-              <cat-menu-item icon="arrow-up-down-filled">Arrow Up/Down navigation</cat-menu-item>
-              <cat-menu-item icon="list-outlined">Default for dropdown menus</cat-menu-item>
-              <cat-menu-item icon="menu-outlined">Vertical orientation (ARIA)</cat-menu-item>
-              <cat-menu-item icon="keyboard-outlined">Standard menu pattern</cat-menu-item>
-            </cat-menu>
-
-            <!-- Horizontal navigation -->
-            <cat-menu
-              arrow-navigation="horizontal"
-              trigger-label="Horizontal navigation"
-              trigger-icon="arrows-horizontal"
-              placement="bottom-start"
-            >
-              <cat-menu-item icon="arrow-left-right-filled">Arrow Left/Right navigation</cat-menu-item>
-              <cat-menu-item icon="columns-outlined">Ideal for toolbar menus</cat-menu-item>
-              <cat-menu-item icon="layout-outlined">Horizontal orientation (ARIA)</cat-menu-item>
-              <cat-menu-item icon="keyboard-outlined">Alternative menu pattern</cat-menu-item>
-            </cat-menu>
+              </cat-tabs>
+
+              <cat-tabs adaptive active-tab-always-visible tabs-align="justify">
+                <cat-tab id="tab2" label="First"></cat-tab>
+                <cat-tab label="Second"></cat-tab>
+                <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
+                <cat-tab label="Fourth Fourth" icon="sparkle-filled"></cat-tab>
+                <cat-tab label="Fifth" icon="sparkle-filled"></cat-tab>
+                <cat-tab label="Sixth" icon="sparkle-filled"></cat-tab>
+                <cat-tab label="Seventh Seventh" icon="sparkle-filled"></cat-tab>
+                <cat-tab label="Eighth" icon="sparkle-filled"></cat-tab>
+                <cat-tab sticky label="Ninth" icon="sparkle-filled"></cat-tab>
+                <cat-tab label="Tenth" icon="sparkle-filled"></cat-tab>
+              </cat-tabs>
+            </section>
+
+            <section id="tags">
+              <h2>Tags</h2>
+              <cat-tag label="Tag Input" placeholder="Placeholder" hint="this is a hint"></cat-tag>
+              <cat-tag label="Tag Input" placeholder="Placeholder" disabled="true"></cat-tag>
+            </section>
+
+            <section id="textarea">
+              <h2>Textarea</h2>
+              <cat-textarea label="Label" max-length="100"></cat-textarea>
+              <h3>Slotted Counter</h3>
+              <cat-textarea label="Custom counter">
+                <span slot="counter">Show any text here</span>
+              </cat-textarea>
+              <h3>Counter w/o label</h3>
+              <cat-textarea max-length="100"></cat-textarea>
+            </section>
+
+            <section id="toggle" class="cat-form">
+              <h2>Toggle</h2>
+              <cat-toggle label="Toggle" hint="This is a hint!" label-left style="width: 500px">
+                <span slot="hint">This is another!</span>
+              </cat-toggle>
+              <cat-toggle label="Toggle"></cat-toggle>
+              <cat-toggle><label slot="label">Slotted Label</label></cat-toggle>
+              <cat-toggle label="Disabled" disabled></cat-toggle>
+              <cat-toggle label="Checked" checked></cat-toggle>
+              <cat-toggle label="Checked disabled" checked disabled></cat-toggle>
+              <cat-toggle label="Not priority label"><label slot="label">Priority Label</label></cat-toggle>
+              <cat-toggle label="Hidden label" label-hidden="true"></cat-toggle>
+            </section>
+
+            <section id="tooltip">
+              <h2>Tooltip</h2>
+              <cat-tooltip content="This is a tooltip">
+                <cat-button>Button</cat-button>
+              </cat-tooltip>
+              <cat-tooltip>
+                <cat-button>Button</cat-button>
+                <div slot="content">
+                  <h2>Tooltip</h2>
+                  <p>This is a <b>fancy</b> tooltip<br />with some more lines.</p>
+                </div>
+              </cat-tooltip>
+              <h3>Size</h3>
+              <cat-tooltip size="s" content="This is a small tooltip">
+                <p class="cat-inline-flex">Hover Me (S)</p>
+              </cat-tooltip>
+              <br />
+              <cat-tooltip size="s" round="true" content="This is a small tooltip">
+                <p class="cat-inline-flex">Hover Me (S round)</p>
+              </cat-tooltip>
+              <br />
+              <cat-tooltip size="m" content="This is a regular tooltip">
+                <p class="cat-inline-flex">Hover Me (M)</p>
+              </cat-tooltip>
+              <br />
+              <cat-tooltip size="m" round="true" content="This is a regular tooltip">
+                <p class="cat-inline-flex">Hover Me (M round)</p>
+              </cat-tooltip>
+              <br />
+              <cat-tooltip size="l" content="This is a large tooltip">
+                <p class="cat-inline-flex">Hover Me (L)</p>
+              </cat-tooltip>
+              <br />
+              <cat-tooltip size="l" round="true" content="This is a large tooltip">
+                <p class="cat-inline-flex">Hover Me (L round)</p>
+              </cat-tooltip>
+              <h3>Round</h3>
+              <cat-tooltip round="true" content="This is a round tooltip">
+                <p class="cat-inline-flex">Hover Me (round)</p>
+              </cat-tooltip>
+              <h3>Async</h3>
+              <cat-tooltip id="async-tooltip" placement="bottom-end">
+                <p class="cat-inline-flex">Hover Me (async)</p>
+              </cat-tooltip>
+              <script>
+                const tooltipElem = document.getElementById('async-tooltip');
+                setInterval(() => {
+                  tooltipElem.content = 'This is an async tooltip';
+                }, 1000);
+              </script>
+            </section>
           </div>
-        </section>
-
-        <section id="form">
-          <h2>Form</h2>
-          <form class="cat-form" action="." method="GET">
-            <cat-input name="field1" label="Field 1" value="value1"></cat-input>
-            <cat-textarea name="field2" label="Field 2" value="value2"></cat-textarea>
-            <cat-checkbox name="field3" label="Field 3" value="value3" checked></cat-checkbox>
-            <cat-toggle name="field4" label="Field 4" value="value4" checked></cat-toggle>
-            <cat-button submit="true">Submit</cat-button>
-          </form>
-        </section>
-
-        <section id="form-group" class="cat-form">
-          <h2>Form Group</h2>
-          <cat-form-group>
-            <cat-input label="Field 1" max-length="30"></cat-input>
-            <cat-input label="Field 2" required></cat-input>
-          </cat-form-group>
-
-          <h3>Alignment (horizontal)</h3>
-          <cat-form-group label-size="40%" horizontal>
-            <cat-input hint="This is a hint" required max-length="98">
-              <span slot="label">This is the <b>label</b></span>
-            </cat-input>
-            <cat-input hint="NO LABEL" required></cat-input>
-            <cat-input label="Label" label-hidden="true" hint="NO LABEL" required></cat-input>
-            <cat-input label="Field 1" hint="This is a hint"></cat-input>
-            <cat-input
-              label="Field 1"
-              hint="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
-            ></cat-input>
-            <cat-input
-              label="This is a very long label with some more text"
-              required
-              hint="This is a hint"
-            ></cat-input>
-            <cat-textarea max-length="50" label="Label" hint="This is a hint"></cat-textarea>
-            <cat-select label="Field 3"></cat-select>
-            <cat-datepicker clearable="true" a11y-label="ARIA" label="Date picker"></cat-datepicker>
-          </cat-form-group>
-
-          <h3>Auto (more required)</h3>
-          <cat-form-group>
-            <cat-input label="Field 1"></cat-input>
-            <cat-input label="Field 2" required></cat-input>
-            <cat-textarea label="Field 3" required></cat-textarea>
-          </cat-form-group>
-
-          <h3>Auto (more optional)</h3>
-          <cat-form-group>
-            <cat-input label="Field 1"></cat-input>
-            <cat-input label="Field 2"></cat-input>
-            <cat-textarea label="Field 3" required></cat-textarea>
-          </cat-form-group>
-
-          <h3>None marker</h3>
-          <cat-form-group required-marker="none">
-            <cat-input label="Field 1"></cat-input>
-            <cat-input label="Field 2"></cat-input>
-            <cat-textarea label="Field 3" required></cat-textarea>
-          </cat-form-group>
-
-          <h3>Only mark optional</h3>
-          <cat-form-group required-marker="optional">
-            <cat-input label="Field 1"></cat-input>
-            <cat-input label="Field 2"></cat-input>
-            <cat-textarea label="Field 3" required></cat-textarea>
-          </cat-form-group>
-
-          <h3>Only mark required</h3>
-          <cat-form-group required-marker="required">
-            <cat-input label="Field 1"></cat-input>
-            <cat-input label="Field 2" required></cat-input>
-            <cat-textarea label="Field 3" required></cat-textarea>
-          </cat-form-group>
-
-          <h3>Dynamic field added</h3>
-          <cat-form-group id="form-group-1">
-            <cat-input id="cat-input-1" label="Field 1"></cat-input>
-            <cat-input label="Field 2" required></cat-input>
-          </cat-form-group>
-
           <script>
-            let input = document.getElementById('cat-input-1');
-            input.addEventListener('input', () => {
-              let elementById = document.getElementById('time2');
-              elementById.value = '13:58';
-            });
-            const formElem = document.getElementById('form-group-1');
-            setTimeout(() => {
-              const htmlElement = document.createElement('cat-input');
-              htmlElement.setAttribute('label', 'Field 3');
-              formElem.appendChild(htmlElement);
-            }, 5000);
+            // --- init navigation
+            const navbar = document.getElementById('nav');
+            const scrollspy = VanillaScrollspy(navbar);
+            scrollspy.init();
           </script>
-        </section>
-
-        <section id="icon">
-          <h2>Icon</h2>
-          <cat-icon icon="sparkle-filled"></cat-icon>
-
-          <h3>Color</h3>
-          <cat-icon icon="sparkle-filled" style="color: red"></cat-icon>
-          <cat-icon icon="sparkle-filled" style="color: blue"></cat-icon>
-          <cat-icon icon="sparkle-filled" style="color: green"></cat-icon>
-
-          <h3>Size</h3>
-          <cat-icon icon="sparkle-filled" size="xs"></cat-icon>
-          <cat-icon icon="sparkle-filled" size="s"></cat-icon>
-          <cat-icon icon="sparkle-filled" size="m"></cat-icon>
-          <cat-icon icon="sparkle-filled" size="l"></cat-icon>
-          <cat-icon icon="sparkle-filled" size="xl"></cat-icon>
-          <cat-icon icon="sparkle-filled" size="inline" style="font-size: 2.5rem"></cat-icon>
-
-          <h3>Ratio</h3>
-          <cat-icon icon="sp-grid-3-cols" style="--cat-icon-ratio: 2.5"></cat-icon>
-        </section>
-
-        <section id="input" class="cat-form">
-          <h2>Input</h2>
-          <cat-input label="Label" hint="This is a hint!" placeholder="I am the placeholder">
-            <span slot="hint">This is another!</span>
-          </cat-input>
-          <cat-input label="Label" max-length="100">
-            <span slot="label">Priority Label</span>
-          </cat-input>
-          <cat-input label="Label" loading>
-            <span slot="label">Loading</span>
-          </cat-input>
-          <h3>Types</h3>
-          <cat-input label="Color" type="color"></cat-input>
-          <cat-input label="Color" type="color" clearable="true"></cat-input>
-          <cat-input label="Email" type="email"></cat-input>
-          <cat-input label="File" type="file" accept="image/png, image/jpeg" multiple></cat-input>
-          <cat-input label="Number" type="number"></cat-input>
-          <cat-input label="Password" type="password"></cat-input>
-          <cat-input label="Range" type="range"></cat-input>
-          <cat-input label="Search" type="search"></cat-input>
-          <cat-input label="Tel" type="tel"></cat-input>
-          <cat-input label="Text" type="text"></cat-input>
-          <cat-input label="Url" type="url"></cat-input>
-          <h3>Slotted Counter</h3>
-          <cat-input label="Custom counter">
-            <span slot="counter">Show any text here</span>
-          </cat-input>
-        </section>
+        </div>
+      </div>
 
-        <section id="datepicker" class="cat-form">
-          <h2>Datepicker</h2>
-          <cat-date label="New Datepicker"></cat-date>
-          <cat-time id="time2" label="New Timepicker" value="12:00"></cat-time>
-          <cat-datepicker mode="date">
-            <span slot="label">Priority Label</span>
-            <span slot="hint">Priority Hint</span>
-          </cat-datepicker>
-          <cat-datepicker mode="datetime" label="Datetime" disabled></cat-datepicker>
-          <cat-datepicker mode="time" label="Time"></cat-datepicker>
-          <cat-datepicker mode="week" label="Week"></cat-datepicker>
-          <cat-datepicker mode="daterange" label="Daterange"></cat-datepicker>
-          <h3>Inline Datepicker (new)</h3>
-          <cat-date-inline
-            value="2022-06-21"
-            label="test this is"
-            a11y-label="This is an Aria test"
-          ></cat-date-inline>
-          <h3>Inline Datepicker</h3>
-          <cat-card class="cat-inline-flex cat-flex-col cat-border">
-            <h4>Datetime</h4>
-            <cat-datepicker-inline value="2022-06-21T00:00:000Z"></cat-datepicker-inline>
-          </cat-card>
-          <h3>Nested Datepicker</h3>
-          <cat-dropdown>
-            <cat-button slot="trigger" color="primary" variant="filled">Button</cat-button>
-            <div slot="content" class="cat-p-m">
-              <cat-input></cat-input>
-              <cat-datepicker mode="date" label="Date"></cat-datepicker>
-              <cat-datepicker mode="date" label="Date"></cat-datepicker>
+      <!-- CATALYST TEXT -->
+      <div id="tab-text-content" style="display: none">
+        <section id="typo" class="typography">
+          <!-- Sidebar -->
+          <aside>
+            <!-- Headings -->
+            <div class="cat-flex cat-flex-col cat-gap-s">
+              <h6 class="cat-muted cat-mb-l">Headline styles</h6>
+              <h1>Whereas recognition of the inherent dignity</h1>
+              <span class="cat-mono-s cat-muted">h1, .cat-h1</span>
+              <hr />
+              <h2>Whereas recognition of the inherent dignity</h2>
+              <span class="cat-mono-s cat-muted">h2, .cat-h2</span>
+              <hr />
+              <h3>Whereas recognition of the inherent dignity</h3>
+              <span class="cat-mono-s cat-muted">h3, .cat-h3</span>
+              <hr />
+              <h4>Whereas recognition of the inherent dignity</h4>
+              <span class="cat-mono-s cat-muted">h4, .cat-h4</span>
+              <hr />
+              <h5>Whereas recognition of the inherent dignity</h5>
+              <span class="cat-mono-s cat-muted">h5, .cat-h5</span>
+              <hr />
+              <h6>Whereas recognition of the inherent dignity</h6>
+              <span class="cat-mono-s cat-muted">h6, .cat-h6</span>
             </div>
-          </cat-dropdown>
-        </section>
-
-        <section id="notification">
-          <h2>Notification</h2>
-          <cat-button id="notification-trigger">Show Notifications</cat-button>
-          <script type="module">
-            import { catNotificationService } from '/build/index.esm.js';
-
-            document.getElementById('notification-trigger').onclick = function() {
-              catNotificationService.show('Item saved', {
-                autoClose: false,
-                closeButton: true,
-                action: 'Show saved items'
-              });
-              catNotificationService.show('This is light', {
-                mode: 'light',
-                closeButton: true,
-                icon: 'globe-outlined',
-                action: 'Seite neu laden'
-              });
-              catNotificationService.show('Article was saved', {
-                action: 'Undo'
-              });
-              catNotificationService.show('Es scheint als hättest du keine Internetverbindung mehr', {
-                icon: 'globe-outlined',
-                action: 'Seite neu laden'
-              });
-            };
-          </script>
-        </section>
-
-        <section id="pagination">
-          <h2>Pagination</h2>
-          <cat-pagination page-count="10" compact></cat-pagination>
-          <br />
-          <br />
-          <cat-pagination page-count="10" size="s"></cat-pagination>
-          <br />
-          <br />
-          <cat-pagination page-count="10"></cat-pagination>
-          <br />
-          <br />
-          <cat-pagination page-count="10" variant="outlined"></cat-pagination>
-          <br />
-          <br />
-          <span>Change event demo (See console)</span>
-          <cat-pagination id="change-demo" page-count="10" variant="outlined" round></cat-pagination>
-          <script>
-            var paginationDemo = document.getElementById('change-demo');
-
-            paginationDemo.addEventListener('catChange', function(event) {
-              console.log('Page changed!', event.detail);
-            });
-          </script>
-        </section>
-
-        <section id="radio" class="cat-form">
-          <h2>Radio</h2>
-          <cat-radio label="Label"></cat-radio>
-
-          <h3>Group</h3>
-          <cat-radio-group a11y-label="Radio Group 1" label-left>
-            <cat-radio value="one" label="Option 1 - Group 1" hint="This is a hint" checked></cat-radio>
-            <cat-radio value="two" label="Option 2 - Group 1" hint="This is a hint"></cat-radio>
-            <cat-radio value="three" label="Option 3 - Group 1" hint="This is a hint" disabled></cat-radio>
-          </cat-radio-group>
-
-          <h3>State</h3>
-          <cat-radio label="Disabled" disabled></cat-radio>
-          <cat-radio label="Checked" checked></cat-radio>
-          <cat-radio label="Checked disabled" checked disabled></cat-radio>
-
-          <h3>Alignment</h3>
-          <cat-radio label="Label" label-left></cat-radio>
-
-          <h3>Slots</h3>
-          <cat-radio hint="This is a hint!">
-            <span slot="label">This is the <b>label</b></span>
-            <span slot="hint">This is another!</span>
-          </cat-radio>
-        </section>
-
-        <section id="scrollable">
-          <h2>Scrollable</h2>
-          <cat-scrollable style="max-height: 8rem; width: 25vw">
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
-          </cat-scrollable>
-        </section>
-
-        <section id="segmented-control">
-          <h2>Segmented Control</h2>
-
-          <h3>Default</h3>
-          <cat-segmented-control>
-            <cat-segment value="one">Option 1</cat-segment>
-            <cat-segment value="two">Option 2</cat-segment>
-            <cat-segment value="three">Option 3 with overflowing content</cat-segment>
-          </cat-segmented-control>
-
-          <h3>Sizes</h3>
-          <cat-segmented-control size="xs">
-            <cat-segment value="one">XS Option 1</cat-segment>
-            <cat-segment value="two">XS Option 2</cat-segment>
-            <cat-segment value="three">XS Option 3</cat-segment>
-          </cat-segmented-control>
-          <br />
-          <br />
-          <cat-segmented-control size="s">
-            <cat-segment value="one">S Option 1</cat-segment>
-            <cat-segment value="two">S Option 2</cat-segment>
-            <cat-segment value="three">S Option 3</cat-segment>
-          </cat-segmented-control>
-          <br />
-          <br />
-          <cat-segmented-control size="m">
-            <cat-segment value="one">M Option 1</cat-segment>
-            <cat-segment value="two">M Option 2</cat-segment>
-            <cat-segment value="three">M Option 3</cat-segment>
-          </cat-segmented-control>
-          <br />
-          <br />
-          <cat-segmented-control size="l">
-            <cat-segment value="one">L Option 1</cat-segment>
-            <cat-segment value="two">L Option 2</cat-segment>
-            <cat-segment value="three">L Option 3</cat-segment>
-          </cat-segmented-control>
-          <br />
-          <br />
-          <cat-segmented-control size="xl">
-            <cat-segment value="one">XL Option 1</cat-segment>
-            <cat-segment value="two">XL Option 2</cat-segment>
-            <cat-segment value="three">XL Option 3</cat-segment>
-          </cat-segmented-control>
-
-          <h3>Disabled</h3>
-          <cat-segmented-control disabled>
-            <cat-segment value="one">Option 1</cat-segment>
-            <cat-segment value="two">Option 2</cat-segment>
-            <cat-segment value="three">Option 3</cat-segment>
-          </cat-segmented-control>
-          <br />
-          <br />
-          <cat-segmented-control>
-            <cat-segment value="one">Option 1</cat-segment>
-            <cat-segment value="two" disabled>Option 2</cat-segment>
-            <cat-segment value="three">Option 3</cat-segment>
-          </cat-segmented-control>
-
-          <h3>Icons</h3>
-          <cat-segmented-control>
-            <cat-segment value="home" icon="bookmark-filled">Option 1</cat-segment>
-            <cat-segment value="settings" icon="camera-filled">Option 2</cat-segment>
-            <cat-segment value="star" icon="star-filled">Option 3</cat-segment>
-          </cat-segmented-control>
-
-          <h3>Icon Only</h3>
-          <cat-segmented-control size="xs">
-            <cat-segment value="home" icon="bookmark-filled" icon-only a11y-label="Option 1"></cat-segment>
-            <cat-segment value="settings" icon="camera-filled" icon-only a11y-label="Option 2"></cat-segment>
-            <cat-segment value="star" icon="star-filled" icon-only a11y-label="Option 3"></cat-segment>
-          </cat-segmented-control>
-          <br />
-          <br />
-          <cat-segmented-control size="s">
-            <cat-segment value="home" icon="bookmark-filled" icon-only a11y-label="Option 1"></cat-segment>
-            <cat-segment value="settings" icon="camera-filled" icon-only a11y-label="Option 2"></cat-segment>
-            <cat-segment value="star" icon="star-filled" icon-only a11y-label="Option 3"></cat-segment>
-          </cat-segmented-control>
-          <br />
-          <br />
-          <cat-segmented-control size="m">
-            <cat-segment value="home" icon="bookmark-filled" icon-only a11y-label="Option 1"></cat-segment>
-            <cat-segment value="settings" icon="camera-filled" icon-only a11y-label="Option 2"></cat-segment>
-            <cat-segment value="star" icon="star-filled" icon-only a11y-label="Option 3"></cat-segment>
-          </cat-segmented-control>
-          <br />
-          <br />
-          <cat-segmented-control size="l">
-            <cat-segment value="home" icon="bookmark-filled" icon-only a11y-label="Option 1"></cat-segment>
-            <cat-segment value="settings" icon="camera-filled" icon-only a11y-label="Option 2"></cat-segment>
-            <cat-segment value="star" icon="star-filled" icon-only a11y-label="Option 3"></cat-segment>
-          </cat-segmented-control>
-          <br />
-          <br />
-          <cat-segmented-control size="xl">
-            <cat-segment value="home" icon="bookmark-filled" icon-only a11y-label="Option 1"></cat-segment>
-            <cat-segment value="settings" icon="camera-filled" icon-only a11y-label="Option 2"></cat-segment>
-            <cat-segment value="star" icon="star-filled" icon-only a11y-label="Option 3"></cat-segment>
-          </cat-segmented-control>
-        </section>
-
-        <section id="select">
-          <h2>Select</h2>
-          <cat-select-demo></cat-select-demo>
-        </section>
-
-        <section id="skeleton">
-          <h2>Skeleton</h2>
-          <cat-skeleton></cat-skeleton>
-
-          <h3>Effect</h3>
-          <cat-skeleton effect="plain"></cat-skeleton>
-          <br />
-          <cat-skeleton effect="sheen"></cat-skeleton>
-          <br />
-          <cat-skeleton effect="pulse"></cat-skeleton>
-
-          <h3>Variant</h3>
-          <cat-skeleton variant="square"></cat-skeleton>
-          <cat-skeleton variant="circle"></cat-skeleton>
-          <cat-skeleton variant="rectangle"></cat-skeleton>
-          <cat-skeleton variant="head"></cat-skeleton>
-          <cat-skeleton variant="body"></cat-skeleton>
-        </section>
-
-        <section id="spinner">
-          <h2>Spinner</h2>
-          <cat-spinner></cat-spinner>
-
-          <h3>Color</h3>
-          <cat-spinner style="color: red"></cat-spinner>
-          <cat-spinner style="color: blue"></cat-spinner>
-          <cat-spinner style="color: green"></cat-spinner>
-
-          <h3>Size</h3>
-          <cat-spinner size="xs"></cat-spinner>
-          <cat-spinner size="s"></cat-spinner>
-          <cat-spinner size="m"></cat-spinner>
-          <cat-spinner size="l"></cat-spinner>
-          <cat-spinner size="xl"></cat-spinner>
-          <cat-spinner size="inline" style="font-size: 2.5rem"></cat-spinner>
-        </section>
-
-        <section id="tabs">
-          <h2>Tabs</h2>
-          <cat-tabs>
-            <cat-tab id="tab1" label="First"></cat-tab>
-            <cat-tab label="Second"></cat-tab>
-            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-          </cat-tabs>
-          <h3>Alignment</h3>
-          <cat-tabs tabs-align="center">
-            <cat-tab label="First"></cat-tab>
-            <cat-tab label="Second"></cat-tab>
-            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-          </cat-tabs>
-          <br />
-          <br />
-          <cat-tabs tabs-align="right">
-            <cat-tab label="First"></cat-tab>
-            <cat-tab label="Second"></cat-tab>
-            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-          </cat-tabs>
-          <br />
-          <br />
-          <cat-tabs tabs-align="justify" active-tab="second">
-            <cat-tab label="First" deactivate></cat-tab>
-            <cat-tab label="Second" id="second"></cat-tab>
-            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-          </cat-tabs>
-          <script>
-            const tab = document.querySelector('#tab1');
-            setInterval(() => {
-              tab.deactivated = true;
-            }, 5000);
-          </script>
-          <h3>More</h3>
-          <cat-tabs>
-            <cat-tab id="tab1" label="First"></cat-tab>
-            <cat-tab label="Second"></cat-tab>
-            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-            <cat-dropdown slot="more">
-              <cat-button class="cat-tab cat-ml-auto" slot="trigger" variant="text">More</cat-button>
-              <nav slot="content">
-                <ul>
-                  <cat-button class="cat-nav-item">Nav item 1</cat-button>
-                  <cat-button class="cat-nav-item">Nav item 1</cat-button>
-                </ul>
-              </nav>
-            </cat-dropdown>
-          </cat-tabs>
-
-          <cat-tabs adaptive active-tab-always-visible tabs-align="justify">
-            <cat-tab id="tab2" label="First"></cat-tab>
-            <cat-tab label="Second"></cat-tab>
-            <cat-tab label="Third" icon="sparkle-filled"></cat-tab>
-            <cat-tab label="Fourth Fourth" icon="sparkle-filled"></cat-tab>
-            <cat-tab label="Fifth" icon="sparkle-filled"></cat-tab>
-            <cat-tab label="Sixth" icon="sparkle-filled"></cat-tab>
-            <cat-tab label="Seventh Seventh" icon="sparkle-filled"></cat-tab>
-            <cat-tab label="Eighth" icon="sparkle-filled"></cat-tab>
-            <cat-tab sticky label="Ninth" icon="sparkle-filled"></cat-tab>
-            <cat-tab label="Tenth" icon="sparkle-filled"></cat-tab>
-          </cat-tabs>
-        </section>
-
-        <section id="tags">
-          <h2>Tags</h2>
-          <cat-tag label="Tag Input" placeholder="Placeholder" hint="this is a hint"></cat-tag>
-          <cat-tag label="Tag Input" placeholder="Placeholder" disabled="true"></cat-tag>
-        </section>
-
-        <section id="textarea">
-          <h2>Textarea</h2>
-          <cat-textarea label="Label" max-length="100"></cat-textarea>
-          <h3>Slotted Counter</h3>
-          <cat-textarea label="Custom counter">
-            <span slot="counter">Show any text here</span>
-          </cat-textarea>
-          <h3>Counter w/o label</h3>
-          <cat-textarea max-length="100"></cat-textarea>
-        </section>
-
-        <section id="toggle" class="cat-form">
-          <h2>Toggle</h2>
-          <cat-toggle label="Toggle" hint="This is a hint!" label-left style="width: 500px">
-            <span slot="hint">This is another!</span>
-          </cat-toggle>
-          <cat-toggle label="Toggle"></cat-toggle>
-          <cat-toggle><label slot="label">Slotted Label</label></cat-toggle>
-          <cat-toggle label="Disabled" disabled></cat-toggle>
-          <cat-toggle label="Checked" checked></cat-toggle>
-          <cat-toggle label="Checked disabled" checked disabled></cat-toggle>
-          <cat-toggle label="Not priority label"><label slot="label">Priority Label</label></cat-toggle>
-          <cat-toggle label="Hidden label" label-hidden="true"></cat-toggle>
-        </section>
-
-        <section id="tooltip">
-          <h2>Tooltip</h2>
-          <cat-tooltip content="This is a tooltip">
-            <cat-button>Button</cat-button>
-          </cat-tooltip>
-          <cat-tooltip>
-            <cat-button>Button</cat-button>
-            <div slot="content">
-              <h2>Tooltip</h2>
-              <p>This is a <b>fancy</b> tooltip<br />with some more lines.</p>
+            <!-- Body styles -->
+            <div class="cat-flex cat-flex-col cat-gap-s">
+              <h6 class="cat-muted cat-mb-l">Body styles</h6>
+
+              <p class="cat-ellipsis-2 cat-lead">
+                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+                reputation. Everyone has the right to the protection of the law against such interference or attacks.
+              </p>
+              <span class="cat-mono-s cat-muted">Lead, .cat-lead</span>
+              <hr />
+              <p class="cat-ellipsis-2 cat-text-xl">
+                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+                reputation. Everyone has the right to the protection of the law against such interference or attacks.
+              </p>
+              <span class="cat-mono-s cat-muted">Body XL, .cat-text-xl</span>
+              <hr />
+              <p class="cat-ellipsis-2 cat-text-l">
+                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+                reputation. Everyone has the right to the protection of the law against such interference or attacks.
+              </p>
+              <span class="cat-mono-s cat-muted">Body L, .cat-text-l</span>
+              <hr />
+              <p class="cat-ellipsis-2">
+                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+                reputation. Everyone has the right to the protection of the law against such interference or attacks.
+              </p>
+              <span class="cat-mono-s cat-muted">Body M (Default), .cat-text-m</span>
+              <hr />
+              <p class="cat-ellipsis-2 cat-text-s">
+                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+                reputation. Everyone has the right to the protection of the law against such interference or attacks.
+              </p>
+              <span class="cat-mono-s cat-muted">Body S, .cat-text-s</span>
+              <hr />
+              <p class="cat-ellipsis-2 cat-text-xs">
+                No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
+                to a fair and public hearing by an independent and impartial tribunal, in the determination of his
+                rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
+                interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
+                reputation. Everyone has the right to the protection of the law against such interference or attacks.
+              </p>
+              <span class="cat-mono-s cat-muted">Body XS, .cat-text-xs</span>
             </div>
-          </cat-tooltip>
-          <h3>Size</h3>
-          <cat-tooltip size="s" content="This is a small tooltip">
-            <p class="cat-inline-flex">Hover Me (S)</p>
-          </cat-tooltip>
-          <br />
-          <cat-tooltip size="s" round="true" content="This is a small tooltip">
-            <p class="cat-inline-flex">Hover Me (S round)</p>
-          </cat-tooltip>
-          <br />
-          <cat-tooltip size="m" content="This is a regular tooltip">
-            <p class="cat-inline-flex">Hover Me (M)</p>
-          </cat-tooltip>
-          <br />
-          <cat-tooltip size="m" round="true" content="This is a regular tooltip">
-            <p class="cat-inline-flex">Hover Me (M round)</p>
-          </cat-tooltip>
-          <br />
-          <cat-tooltip size="l" content="This is a large tooltip">
-            <p class="cat-inline-flex">Hover Me (L)</p>
-          </cat-tooltip>
-          <br />
-          <cat-tooltip size="l" round="true" content="This is a large tooltip">
-            <p class="cat-inline-flex">Hover Me (L round)</p>
-          </cat-tooltip>
-          <h3>Round</h3>
-          <cat-tooltip round="true" content="This is a round tooltip">
-            <p class="cat-inline-flex">Hover Me (round)</p>
-          </cat-tooltip>
-          <h3>Async</h3>
-          <cat-tooltip id="async-tooltip" placement="bottom-end">
-            <p class="cat-inline-flex">Hover Me (async)</p>
-          </cat-tooltip>
-          <script>
-            const tooltipElem = document.getElementById('async-tooltip');
-            setInterval(() => {
-              tooltipElem.content = 'This is an async tooltip';
-            }, 1000);
-          </script>
-        </section>
-      </div>
-      <script>
-        // --- init navigation
-        const navbar = document.getElementById('nav');
-        const scrollspy = VanillaScrollspy(navbar);
-        scrollspy.init();
-      </script>
-    </div>
-  </div>
-
-  <!-- CATALYST TEXT -->
-  <div id="tab-text-content" style="display: none">
-    <section id="typo" class="typography">
-      <!-- Sidebar -->
-      <aside>
-        <!-- Headings -->
-        <div class="cat-flex cat-flex-col cat-gap-s">
-          <h6 class="cat-muted cat-mb-l">Headline styles</h6>
-          <h1>Whereas recognition of the inherent dignity</h1>
-          <span class="cat-mono-s cat-muted">h1, .cat-h1</span>
-          <hr />
-          <h2>Whereas recognition of the inherent dignity</h2>
-          <span class="cat-mono-s cat-muted">h2, .cat-h2</span>
-          <hr />
-          <h3>Whereas recognition of the inherent dignity</h3>
-          <span class="cat-mono-s cat-muted">h3, .cat-h3</span>
-          <hr />
-          <h4>Whereas recognition of the inherent dignity</h4>
-          <span class="cat-mono-s cat-muted">h4, .cat-h4</span>
-          <hr />
-          <h5>Whereas recognition of the inherent dignity</h5>
-          <span class="cat-mono-s cat-muted">h5, .cat-h5</span>
-          <hr />
-          <h6>Whereas recognition of the inherent dignity</h6>
-          <span class="cat-mono-s cat-muted">h6, .cat-h6</span>
-        </div>
-        <!-- Body styles -->
-        <div class="cat-flex cat-flex-col cat-gap-s">
-          <h6 class="cat-muted cat-mb-l">Body styles</h6>
-
-          <p class="cat-ellipsis-2 cat-lead">
-            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-            reputation. Everyone has the right to the protection of the law against such interference or attacks.
-          </p>
-          <span class="cat-mono-s cat-muted">Lead, .cat-lead</span>
-          <hr />
-          <p class="cat-ellipsis-2 cat-text-xl">
-            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-            reputation. Everyone has the right to the protection of the law against such interference or attacks.
-          </p>
-          <span class="cat-mono-s cat-muted">Body XL, .cat-text-xl</span>
-          <hr />
-          <p class="cat-ellipsis-2 cat-text-l">
-            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-            reputation. Everyone has the right to the protection of the law against such interference or attacks.
-          </p>
-          <span class="cat-mono-s cat-muted">Body L, .cat-text-l</span>
-          <hr />
-          <p class="cat-ellipsis-2">
-            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-            reputation. Everyone has the right to the protection of the law against such interference or attacks.
-          </p>
-          <span class="cat-mono-s cat-muted">Body M (Default), .cat-text-m</span>
-          <hr />
-          <p class="cat-ellipsis-2 cat-text-s">
-            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-            reputation. Everyone has the right to the protection of the law against such interference or attacks.
-          </p>
-          <span class="cat-mono-s cat-muted">Body S, .cat-text-s</span>
-          <hr />
-          <p class="cat-ellipsis-2 cat-text-xs">
-            No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality
-            to a fair and public hearing by an independent and impartial tribunal, in the determination of his
-            rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary
-            interference with his privacy, family, home or correspondence, nor to attacks upon his honour and
-            reputation. Everyone has the right to the protection of the law against such interference or attacks.
-          </p>
-          <span class="cat-mono-s cat-muted">Body XS, .cat-text-xs</span>
-        </div>
-      </aside>
-      <!-- Example typesetting -->
-      <article class="cat-article example">
-        <h6 class="cat-muted cat-mb-l">Example article</h6>
-        <h1>Typesetting test</h1>
-        <p class="cat-lead">
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-          et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-          Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
-          amet.
-        </p>
-        <figure>
-          <img
-            src="https://cdn.sanity.io/images/599r6htc/localized/10e55cde1be89fb32aa3d7414fa3cd83b0859a51-3264x1836.jpg"
-            alt=""
-          />
-        </figure>
-        <h2>Dolor Vero</h2>
-        <h3>Consetetur sadipscing elitr</h3>
-        <p>
-          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
-          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
-          accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
-          ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
-          consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
-          qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor
-          sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
-          aliquam erat volutpat.
-        </p>
-        <p>
-          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
-          sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
-        </p>
-        <h2>Lorem Ipsum</h2>
-        <p>
-          Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
-          ea commodo consequat.
-        </p>
-        <h3>Vulputate velit esse</h3>
-        <p>
-          Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
-          eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
-          zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
-          option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
-        </p>
-        <ol>
-          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-          <li>Integer nec odio. Praesent libero.</li>
-          <li>Sed cursus ante dapibus diam. Sed nisi.</li>
-          <li>Nulla quis sem at nibh elementum imperdiet.</li>
-          <li>Duis sagittis ipsum. Praesent mauris.</li>
-          <li>Fusce nec tellus sed augue semper porta.</li>
-          <li>Mauris massa. Vestibulum lacinia arcu eget nulla.</li>
-          <li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
-          <li>Curabitur sodales ligula in libero.</li>
-          <li>Sed dignissim lacinia nunc. Curabitur tortor.</li>
-        </ol>
-        <hr />
-        <h2>What does all of that mean for us?</h2>
-        <p>
-          Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
-          amet, consetetur sadipscing elitr.
-        </p>
-        <blockquote>
-          "The only way to do great work is to love what you do."
-          <span>– Steve Jobs</span>
-        </blockquote>
-        <h3>Understanding Employee Engagement</h3>
-        <figure>
-          <iframe
-            width="100%"
-            height="350px"
-            src="https://www.youtube-nocookie.com/embed/2t2BBU0gdO0?controls=0"
-            title="YouTube video player"
-            frameborder="0"
-            allow="
+          </aside>
+          <!-- Example typesetting -->
+          <article class="cat-article example">
+            <h6 class="cat-muted cat-mb-l">Example article</h6>
+            <h1>Typesetting test</h1>
+            <p class="cat-lead">
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+              et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+              Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+              amet.
+            </p>
+            <figure>
+              <img
+                src="https://cdn.sanity.io/images/599r6htc/localized/10e55cde1be89fb32aa3d7414fa3cd83b0859a51-3264x1836.jpg"
+                alt=""
+              />
+            </figure>
+            <h2>Dolor Vero</h2>
+            <h3>Consetetur sadipscing elitr</h3>
+            <p>
+              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+              sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+              nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+              accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+              ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
+              consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
+              qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor
+              sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
+              aliquam erat volutpat.
+            </p>
+            <p>
+              At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+              sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
+            </p>
+            <h2>Lorem Ipsum</h2>
+            <p>
+              Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+              ea commodo consequat.
+            </p>
+            <h3>Vulputate velit esse</h3>
+            <p>
+              Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
+              eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
+              zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend
+              option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
+            </p>
+            <ol>
+              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+              <li>Integer nec odio. Praesent libero.</li>
+              <li>Sed cursus ante dapibus diam. Sed nisi.</li>
+              <li>Nulla quis sem at nibh elementum imperdiet.</li>
+              <li>Duis sagittis ipsum. Praesent mauris.</li>
+              <li>Fusce nec tellus sed augue semper porta.</li>
+              <li>Mauris massa. Vestibulum lacinia arcu eget nulla.</li>
+              <li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
+              <li>Curabitur sodales ligula in libero.</li>
+              <li>Sed dignissim lacinia nunc. Curabitur tortor.</li>
+            </ol>
+            <hr />
+            <h2>What does all of that mean for us?</h2>
+            <p>
+              Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+              amet, consetetur sadipscing elitr.
+            </p>
+            <blockquote>
+              "The only way to do great work is to love what you do."
+              <span>– Steve Jobs</span>
+            </blockquote>
+            <h3>Understanding Employee Engagement</h3>
+            <figure>
+              <iframe
+                width="100%"
+                height="350px"
+                src="https://www.youtube-nocookie.com/embed/2t2BBU0gdO0?controls=0"
+                title="YouTube video player"
+                frameborder="0"
+                allow="
                   accelerometer;
                   autoplay;
                   clipboard-write;
@@ -1690,39 +1690,23 @@ <h3>Understanding Employee Engagement</h3>
                   picture-in-picture;
                   web-share;
                 "
-            allowfullscreen
-          ></iframe>
-        </figure>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Employee engagement is crucial for an
-          organization's growth and productivity. It's more than just job satisfaction; it's the enthusiasm and
-          involvement an employee has towards their work and the organization's mission.
-        </p>
-
-        <h4>The Benefits of High Engagement</h4>
-        <p>
-          Engaged employees tend to be more productive, have higher job satisfaction, and are more likely to stay
-          with their current employer. They contribute positively to the organizational culture and foster
-          collaboration amongst peers.
-        </p>
-
-        <h5>Key Benefits Include:</h5>
-        <ul>
-          <li>Increased productivity and performance</li>
-          <li>Higher retention rates</li>
-          <li>Improved workplace morale</li>
-          <li>Enhanced company reputation</li>
-          <li>Higher customer satisfaction</li>
-        </ul>
-
-        <dl>
-          <dt>Employee Engagement</dt>
-          <dd>
-            Refers to the enthusiasm and involvement an employee has towards their work and the organization's
-            mission.
-          </dd>
-          <dt>Benefits of High Engagement</dt>
-          <dd>
+                allowfullscreen
+              ></iframe>
+            </figure>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Employee engagement is crucial for an
+              organization's growth and productivity. It's more than just job satisfaction; it's the enthusiasm and
+              involvement an employee has towards their work and the organization's mission.
+            </p>
+
+            <h4>The Benefits of High Engagement</h4>
+            <p>
+              Engaged employees tend to be more productive, have higher job satisfaction, and are more likely to stay
+              with their current employer. They contribute positively to the organizational culture and foster
+              collaboration amongst peers.
+            </p>
+
+            <h5>Key Benefits Include:</h5>
             <ul>
               <li>Increased productivity and performance</li>
               <li>Higher retention rates</li>
@@ -1730,132 +1714,148 @@ <h5>Key Benefits Include:</h5>
               <li>Enhanced company reputation</li>
               <li>Higher customer satisfaction</li>
             </ul>
-          </dd>
-          <dt>Strategies to Enhance Engagement</dt>
-          <dd>
-            Building a strong engagement strategy requires a deep understanding of the employees' needs,
-            aspirations, and concerns. Regular feedback, transparent communication, and consistent recognition play
-            pivotal roles.
-          </dd>
-        </dl>
-
-        <h4>Strategies to Enhance Engagement</h4>
-        <p>
-          Building a strong engagement strategy requires a deep understanding of the employees' needs, aspirations,
-          and concerns. Regular feedback, transparent communication, and consistent recognition play pivotal roles
-          in this aspect.
-        </p>
-
-        <h5>Tips for Effective Engagement:</h5>
-        <ul>
-          <li>Regular one-on-one meetings</li>
-          <li>Provide growth opportunities</li>
-          <li>Recognize and reward achievements</li>
-          <li>Promote work-life balance</li>
-          <li>Encourage team collaborations and events</li>
-        </ul>
-
-        <h3>Measuring Employee Engagement</h3>
-        <p>
-          Understanding the level of engagement in an organization is essential for its continual improvement.
-          Surveys, feedback sessions, and monitoring key performance indicators can provide valuable insights.
-        </p>
-      </article>
-    </section>
-  </div>
-
-  <!-- CATALYST ICONS -->
-  <div id="tab-icon-content" style="display: none">
-    <iframe
-      src="https://haiilo.github.io/catalyst-icons/"
-      frameborder="0"
-      scrolling="no"
-      width="100%"
-      height="26500px"
-    ></iframe>
-  </div>
-
-  <!-- Switches -->
-  <div class="switches">
-    <cat-button size="s" class="cat-elevation-1" id="toggleSS3">Switch to Source Sans 3</cat-button>
-    <cat-button size="s" class="cat-elevation-1" id="toggleTheme">Use custom theme</cat-button>
-  </div>
-
-  <script>
-    document.getElementById('tabs-top').addEventListener('catChange', function(e) {
-      document.getElementById('tab-comp-content').style.display = e.detail.index === 0 ? 'block' : 'none';
-      document.getElementById('tab-text-content').style.display = e.detail.index === 1 ? 'block' : 'none';
-      document.getElementById('tab-icon-content').style.display = e.detail.index === 2 ? 'block' : 'none';
-    });
-  </script>
-
-  <script>
-    const body = document.body;
-    const font = document.getElementById('toggleSS3');
-    font.addEventListener('click', function() {
-      if (body.classList.contains('ss3')) {
-        body.classList.remove('ss3');
-        font.innerHTML = 'Switch to Source Sans 3';
-      } else {
-        body.classList.add('ss3');
-        font.innerHTML = 'Switch to Lato';
-      }
-    });
-    const theme = document.getElementById('toggleTheme');
-    theme.addEventListener('click', function() {
-      if (body.classList.contains('custom-theme')) {
-        body.classList.remove('custom-theme');
-        theme.innerHTML = 'Use custom theme';
-      } else {
-        body.classList.add('custom-theme');
-        theme.innerHTML = 'Use default theme';
-      }
-    });
-  </script>
-
-  <script>
-    document.addEventListener('DOMContentLoaded', function() {
-      const headings = [
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-        '.cat-h1',
-        '.cat-h2',
-        '.cat-h3',
-        '.cat-h4',
-        '.cat-h5',
-        '.cat-h6'
-      ];
-
-      headings.forEach(selector => {
-        document.querySelectorAll(selector).forEach(element => {
-          const nextSibling = element.nextElementSibling;
-
-          if (nextSibling) {
-            // For the first condition
-            if (headings.some(heading => nextSibling.matches(heading))) {
-              element.classList.add('type-space-small');
-            }
-
-            // For the second condition
-            const secondConditionSelectors = [
-              ...['h3', 'h4', 'h5', 'h6', '.cat-h3', '.cat-h4', '.cat-h5', '.cat-h6'].filter(sel =>
-                element.matches(sel)
-              ),
-              ...(element.matches('p') && nextSibling.matches('p') ? ['p'] : [])
-            ];
-
-            if (secondConditionSelectors.length && ['ul', 'ol', 'p'].some(sel => nextSibling.matches(sel))) {
-              element.classList.add('type-space-medium');
-            }
+
+            <dl>
+              <dt>Employee Engagement</dt>
+              <dd>
+                Refers to the enthusiasm and involvement an employee has towards their work and the organization's
+                mission.
+              </dd>
+              <dt>Benefits of High Engagement</dt>
+              <dd>
+                <ul>
+                  <li>Increased productivity and performance</li>
+                  <li>Higher retention rates</li>
+                  <li>Improved workplace morale</li>
+                  <li>Enhanced company reputation</li>
+                  <li>Higher customer satisfaction</li>
+                </ul>
+              </dd>
+              <dt>Strategies to Enhance Engagement</dt>
+              <dd>
+                Building a strong engagement strategy requires a deep understanding of the employees' needs,
+                aspirations, and concerns. Regular feedback, transparent communication, and consistent recognition play
+                pivotal roles.
+              </dd>
+            </dl>
+
+            <h4>Strategies to Enhance Engagement</h4>
+            <p>
+              Building a strong engagement strategy requires a deep understanding of the employees' needs, aspirations,
+              and concerns. Regular feedback, transparent communication, and consistent recognition play pivotal roles
+              in this aspect.
+            </p>
+
+            <h5>Tips for Effective Engagement:</h5>
+            <ul>
+              <li>Regular one-on-one meetings</li>
+              <li>Provide growth opportunities</li>
+              <li>Recognize and reward achievements</li>
+              <li>Promote work-life balance</li>
+              <li>Encourage team collaborations and events</li>
+            </ul>
+
+            <h3>Measuring Employee Engagement</h3>
+            <p>
+              Understanding the level of engagement in an organization is essential for its continual improvement.
+              Surveys, feedback sessions, and monitoring key performance indicators can provide valuable insights.
+            </p>
+          </article>
+        </section>
+      </div>
+
+      <!-- CATALYST ICONS -->
+      <div id="tab-icon-content" style="display: none">
+        <iframe
+          src="https://haiilo.github.io/catalyst-icons/"
+          frameborder="0"
+          scrolling="no"
+          width="100%"
+          height="26500px"
+        ></iframe>
+      </div>
+
+      <!-- Switches -->
+      <div class="switches">
+        <cat-button size="s" class="cat-elevation-1" id="toggleSS3">Switch to Source Sans 3</cat-button>
+        <cat-button size="s" class="cat-elevation-1" id="toggleTheme">Use custom theme</cat-button>
+      </div>
+
+      <script>
+        document.getElementById('tabs-top').addEventListener('catChange', function (e) {
+          document.getElementById('tab-comp-content').style.display = e.detail.index === 0 ? 'block' : 'none';
+          document.getElementById('tab-text-content').style.display = e.detail.index === 1 ? 'block' : 'none';
+          document.getElementById('tab-icon-content').style.display = e.detail.index === 2 ? 'block' : 'none';
+        });
+      </script>
+
+      <script>
+        const body = document.body;
+        const font = document.getElementById('toggleSS3');
+        font.addEventListener('click', function () {
+          if (body.classList.contains('ss3')) {
+            body.classList.remove('ss3');
+            font.innerHTML = 'Switch to Source Sans 3';
+          } else {
+            body.classList.add('ss3');
+            font.innerHTML = 'Switch to Lato';
           }
         });
-      });
-    });
-  </script>
-</div>
-</body>
+        const theme = document.getElementById('toggleTheme');
+        theme.addEventListener('click', function () {
+          if (body.classList.contains('custom-theme')) {
+            body.classList.remove('custom-theme');
+            theme.innerHTML = 'Use custom theme';
+          } else {
+            body.classList.add('custom-theme');
+            theme.innerHTML = 'Use default theme';
+          }
+        });
+      </script>
+
+      <script>
+        document.addEventListener('DOMContentLoaded', function () {
+          const headings = [
+            'h1',
+            'h2',
+            'h3',
+            'h4',
+            'h5',
+            'h6',
+            '.cat-h1',
+            '.cat-h2',
+            '.cat-h3',
+            '.cat-h4',
+            '.cat-h5',
+            '.cat-h6'
+          ];
+
+          headings.forEach(selector => {
+            document.querySelectorAll(selector).forEach(element => {
+              const nextSibling = element.nextElementSibling;
+
+              if (nextSibling) {
+                // For the first condition
+                if (headings.some(heading => nextSibling.matches(heading))) {
+                  element.classList.add('type-space-small');
+                }
+
+                // For the second condition
+                const secondConditionSelectors = [
+                  ...['h3', 'h4', 'h5', 'h6', '.cat-h3', '.cat-h4', '.cat-h5', '.cat-h6'].filter(sel =>
+                    element.matches(sel)
+                  ),
+                  ...(element.matches('p') && nextSibling.matches('p') ? ['p'] : [])
+                ];
+
+                if (secondConditionSelectors.length && ['ul', 'ol', 'p'].some(sel => nextSibling.matches(sel))) {
+                  element.classList.add('type-space-medium');
+                }
+              }
+            });
+          });
+        });
+      </script>
+    </div>
+  </body>
 </html>

From 4523827a88bf345ef4b61548a9e9e179af9bee4b Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Mon, 17 Aug 2026 09:45:34 +0200
Subject: [PATCH 29/42] feat(core): set button type

---
 core/src/components/cat-segment/cat-segment.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/src/components/cat-segment/cat-segment.tsx b/core/src/components/cat-segment/cat-segment.tsx
index 1d18d362..e1882302 100644
--- a/core/src/components/cat-segment/cat-segment.tsx
+++ b/core/src/components/cat-segment/cat-segment.tsx
@@ -86,6 +86,7 @@ export class CatSegment {
       <Host>
         <button
           part="button"
+          type="button"
           role="radio"
           ref={el => (this.button = el)}
           class={{

From 13663557dc320be06f62dff63fb19ad12cb592a7 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Mon, 17 Aug 2026 10:15:05 +0200
Subject: [PATCH 30/42] feat(core): fix disabled controls review issue

---
 .../cat-segmented-control.spec.tsx            | 19 +++++++++++++++++++
 .../cat-segmented-control.tsx                 | 18 +++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
index 528ec0c6..59a23f52 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
@@ -173,6 +173,25 @@ describe('cat-segmented-control', () => {
     ).toBe(true);
   });
 
+  it('restores segments when control is re-enabled', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two">Option 2</cat-segment>
+      </cat-segmented-control>
+    );
+
+    await waitForChanges();
+    root.disabled = true;
+    await waitForChanges();
+    root.disabled = false;
+    await waitForChanges();
+
+    expect(
+      Array.from(root.querySelectorAll<HTMLCatSegmentElement>('cat-segment')).every(segment => !segment.disabled)
+    ).toBe(true);
+  });
+
   it('does not prevent arrow-key default when all segments are disabled', async () => {
     const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
       <cat-segmented-control disabled>
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
index 84bcc697..5eed7872 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
@@ -12,6 +12,7 @@ import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, Watch }
 })
 export class CatSegmentedControl {
   private segments: HTMLCatSegmentElement[] = [];
+  private readonly groupDisabledSegments = new WeakSet<HTMLCatSegmentElement>();
   private mutationObserver?: MutationObserver;
 
   @Element() hostElement!: HTMLElement;
@@ -74,7 +75,22 @@ export class CatSegmentedControl {
 
   @Watch('disabled')
   onDisabledChange(disabled: boolean) {
-    this.segments.forEach(s => (s.disabled = s.disabled || disabled));
+    if (disabled) {
+      this.segments.forEach(segment => {
+        if (!segment.disabled) {
+          this.groupDisabledSegments.add(segment);
+          segment.disabled = true;
+        }
+      });
+      return;
+    }
+
+    this.segments.forEach(segment => {
+      if (this.groupDisabledSegments.has(segment)) {
+        this.groupDisabledSegments.delete(segment);
+        segment.disabled = false;
+      }
+    });
   }
 
   componentDidLoad() {

From 62fe9e9105a08cc07d1104611b1f56766b2c9395 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Mon, 17 Aug 2026 10:30:52 +0200
Subject: [PATCH 31/42] feat(core): update visual tests for keyboard handler
 changes

---
 ...nshot-focus-on-group-1-chromium-darwin.png | Bin 0 -> 5580 bytes
 ...hot-focus-on-segment-1-chromium-darwin.png | Bin 5585 -> 0 bytes
 ...shot-focus-on-segment-1-chromium-linux.png | Bin 4913 -> 0 bytes
 ...segment-via-keyboard-1-chromium-darwin.png | Bin 0 -> 6146 bytes
 .../cat-segmented-control.screenshot.tsx      |  22 ++++++++++++++++--
 5 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-group-1-chromium-darwin.png
 delete mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-segment-1-chromium-darwin.png
 delete mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-segment-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-select-second-segment-via-keyboard-1-chromium-darwin.png

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-group-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-group-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..eec4e3265f7896b07ff0955cf89b9883265fb773
GIT binary patch
literal 5580
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
Gh<^d#0g5aD

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-segment-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-segment-1-chromium-darwin.png
deleted file mode 100644
index 21ddde9c2d7515702d8f031505dbd9db7a6649f2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5585
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

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-segment-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-segment-1-chromium-linux.png
deleted file mode 100644
index f87e2a368929e7297c9cf499e897db9fcae6323f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4913
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

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-select-second-segment-via-keyboard-1-chromium-darwin.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-select-second-segment-via-keyboard-1-chromium-darwin.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb1246caa775ccbda662b11f55586f5c6fc3b91d
GIT binary patch
literal 6146
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
JneM~z{{lCp?Y{s3

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.screenshot.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.screenshot.tsx
index 8291feba..dbd58281 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.screenshot.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.screenshot.tsx
@@ -84,7 +84,7 @@ describe('cat-segmented-control screenshot', () => {
     await expect(root).toMatchScreenshot();
   });
 
-  it('focus on segment', async () => {
+  it('focus on group', async () => {
     const { root } = await render<HTMLCatSegmentedControlElement>(
       <div style={WRAPPER_STYLE}>
         <cat-segmented-control>
@@ -95,9 +95,27 @@ describe('cat-segmented-control screenshot', () => {
       </div>
     );
 
-    // tab twice to focus the second segment (two)
+    // tab to move focus into the group, which will focus the first segment
     await userEvent.tab();
+
+    await expect(root).toMatchScreenshot();
+  });
+
+  it('select second segment via keyboard', async () => {
+    const { root } = await render<HTMLCatSegmentedControlElement>(
+      <div style={WRAPPER_STYLE}>
+        <cat-segmented-control>
+          <cat-segment value="one">Option 1</cat-segment>
+          <cat-segment value="two">Option 2</cat-segment>
+          <cat-segment value="three">Option 3</cat-segment>
+        </cat-segmented-control>
+      </div>
+    );
+
+    // tab to move focus into the group, which will focus the first segment
     await userEvent.tab();
+    // select the second segment via keyboard
+    await userEvent.keyboard('{ArrowRight}');
 
     await expect(root).toMatchScreenshot();
   });

From 517364eca746a14bd61e71dad178d9db99068a0a Mon Sep 17 00:00:00 2001
From: GitHub Actions <actions@github.com>
Date: Mon, 17 Aug 2026 08:34:06 +0000
Subject: [PATCH 32/42] chore: update reference screenshots

---
 ...creenshot-focus-on-group-1-chromium-linux.png | Bin 0 -> 4915 bytes
 ...ond-segment-via-keyboard-1-chromium-linux.png | Bin 0 -> 5717 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-group-1-chromium-linux.png
 create mode 100644 core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-select-second-segment-via-keyboard-1-chromium-linux.png

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-group-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-focus-on-group-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..8372884bd6af38b1a0c6c90377b85eccd68763b5
GIT binary patch
literal 4915
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
W$S_tgl|UJWozu}YfLGkMi}*LO_Bv7k

literal 0
HcmV?d00001

diff --git a/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-select-second-segment-via-keyboard-1-chromium-linux.png b/core/src/components/cat-segmented-control/__screenshots__/cat-segmented-control.screenshot.tsx/cat-segmented-control-screenshot-select-second-segment-via-keyboard-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..fcac968cde519fef03c38dc1e7f22c479bcc23a5
GIT binary patch
literal 5717
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

literal 0
HcmV?d00001


From d7016a4c89bd4507c212c71d6b34a2233b397128 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Mon, 17 Aug 2026 11:03:02 +0200
Subject: [PATCH 33/42] chore: gitignore e2e test screenshot files

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index 7a1537ba..b71d442f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,5 @@
 .idea
 node_modules
+
+# e2e screenshots are for error reporting only and not part of the source code
+**/__screenshots__/**/*.e2e.tsx/**

From 6225dbc3c9eaaff0cc8236af5bee14c18df188e3 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Mon, 17 Aug 2026 11:03:11 +0200
Subject: [PATCH 34/42] feat(core): adapt e2e tests

---
 .../cat-segmented-control.e2e.tsx             | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx
index 054472b2..2fe24b4d 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx
@@ -7,8 +7,8 @@ describe('cat-segmented-control', () => {
     await expect.element(root).toHaveClass('hydrated');
   });
 
-  it('moves focus with arrow keys and wraps at control boundaries', async () => {
-    const { root } = await render(
+  it('moves selection with arrow keys and wraps at control boundaries', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
       <cat-segmented-control>
         <cat-segment value="one">Option 1</cat-segment>
         <cat-segment value="two">Option 2</cat-segment>
@@ -19,21 +19,27 @@ describe('cat-segmented-control', () => {
     const buttons = segments.map(segment => segment.shadowRoot?.querySelector<HTMLButtonElement>('button'));
 
     buttons[0]?.focus();
-    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true }));
-    await Promise.resolve();
-    expect(segments[1].shadowRoot?.activeElement).toBe(buttons[1]);
+    buttons[0]?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true }));
+    await waitForChanges();
+    expect(root.value).toBe('two');
+    expect(buttons[0]?.getAttribute('aria-checked')).toBe('false');
+    expect(buttons[1]?.getAttribute('aria-checked')).toBe('true');
 
-    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, composed: true }));
-    await Promise.resolve();
-    expect(segments[0].shadowRoot?.activeElement).toBe(buttons[0]);
+    buttons[1]?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, composed: true }));
+    await waitForChanges();
+    expect(root.value).toBe('one');
+    expect(buttons[0]?.getAttribute('aria-checked')).toBe('true');
+    expect(buttons[1]?.getAttribute('aria-checked')).toBe('false');
 
-    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, composed: true }));
-    await Promise.resolve();
-    expect(segments[2].shadowRoot?.activeElement).toBe(buttons[2]);
+    buttons[0]?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, composed: true }));
+    await waitForChanges();
+    expect(root.value).toBe('three');
+    expect(buttons[0]?.getAttribute('aria-checked')).toBe('false');
+    expect(buttons[2]?.getAttribute('aria-checked')).toBe('true');
   });
 
   it('skips disabled segments during keyboard navigation', async () => {
-    const { root } = await render(
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
       <cat-segmented-control>
         <cat-segment value="one">Option 1</cat-segment>
         <cat-segment value="two" disabled>
@@ -46,11 +52,12 @@ describe('cat-segmented-control', () => {
     const buttons = segments.map(segment => segment.shadowRoot?.querySelector<HTMLButtonElement>('button'));
 
     buttons[0]?.focus();
-    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true }));
-    await Promise.resolve();
+    buttons[0]?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true }));
+    await waitForChanges();
 
-    expect(segments[2].shadowRoot?.activeElement).toBe(buttons[2]);
-    expect(segments[1].shadowRoot?.activeElement).not.toBe(buttons[1]);
+    expect(root.value).toBe('three');
+    expect(buttons[2]?.getAttribute('aria-checked')).toBe('true');
+    expect(buttons[1]?.getAttribute('aria-checked')).toBe('false');
   });
 
   it('forwards focus and blur events from segments', async () => {

From 37caa69970d52c3a48f08cec4b2635fa73f33344 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Mon, 17 Aug 2026 12:04:53 +0200
Subject: [PATCH 35/42] feat(core): fix review remarks

---
 README.md                                     |  2 +-
 .../cat-segment/cat-segment.spec.tsx          | 13 ++++++++++---
 .../components/cat-segment/cat-segment.tsx    |  2 +-
 .../cat-segmented-control.spec.tsx            | 19 +++++++++++++++++++
 .../cat-segmented-control.tsx                 |  6 ++++--
 5 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index c0d6793b..3f5ea715 100644
--- a/README.md
+++ b/README.md
@@ -70,7 +70,7 @@ Steps:
 2. Run `pnpm build`;
 
 `pnpm run build:core` regenerates Angular and React binding files through
-Stencil output targets. Review and commit generated changes with component:
+Stencil output targets. Review and commit generated changes with components:
 
 - `angular/projects/catalyst/src/lib/directives/proxies.ts`
 - `react/src/components/stencil-generated/index.ts`
diff --git a/core/src/components/cat-segment/cat-segment.spec.tsx b/core/src/components/cat-segment/cat-segment.spec.tsx
index 2c8e5616..99d04b09 100644
--- a/core/src/components/cat-segment/cat-segment.spec.tsx
+++ b/core/src/components/cat-segment/cat-segment.spec.tsx
@@ -91,16 +91,23 @@ describe('cat-segment', () => {
     expect(root.shadowRoot?.querySelector('cat-icon')?.getAttribute('size')).toBe(iconSize);
   });
 
-  it('applies test id and native attributes to the button', async () => {
+  it('applies test id and preserves required button semantics over native attributes', async () => {
     const { root } = await render(
-      <cat-segment value="testValue" testId="segment" nativeAttributes={{ 'aria-label': 'Day segment', name: 'day' }}>
+      <cat-segment
+        value="testValue"
+        testId="segment"
+        nativeAttributes={{ role: 'button', type: 'submit', 'aria-checked': 'false', tabIndex: '5', name: 'day' }}
+      >
         Day
       </cat-segment>
     );
     const btn = root.shadowRoot?.querySelector('button');
 
     expect(btn?.getAttribute('data-test')).toBe('segment');
-    expect(btn?.getAttribute('aria-label')).toBe('Day segment');
+    expect(btn?.getAttribute('role')).toBe('radio');
+    expect(btn?.getAttribute('type')).toBe('button');
+    expect(btn?.getAttribute('aria-checked')).toBe('false');
+    expect(btn?.getAttribute('tabindex')).toBe('0');
     expect(btn?.getAttribute('name')).toBe('day');
   });
 
diff --git a/core/src/components/cat-segment/cat-segment.tsx b/core/src/components/cat-segment/cat-segment.tsx
index e1882302..676ef7cc 100644
--- a/core/src/components/cat-segment/cat-segment.tsx
+++ b/core/src/components/cat-segment/cat-segment.tsx
@@ -85,6 +85,7 @@ export class CatSegment {
     return (
       <Host>
         <button
+          {...this.nativeAttributes}
           part="button"
           type="button"
           role="radio"
@@ -104,7 +105,6 @@ export class CatSegment {
           onClick={this.handleClick.bind(this)}
           onFocus={this.handleFocus.bind(this)}
           onBlur={this.handleBlur.bind(this)}
-          {...this.nativeAttributes}
         >
           {showIcon && <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>}
           {showLabel && (
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
index 59a23f52..7b18ec3a 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
@@ -132,6 +132,8 @@ describe('cat-segmented-control', () => {
 
     await waitForChanges();
     const segments = Array.from(root.querySelectorAll<HTMLCatSegmentElement>('cat-segment'));
+    const changeListener = vi.fn();
+    root.addEventListener('catChange', changeListener);
     segments[1].doFocus = vi.fn();
     segments[0].shadowRoot?.querySelector('button')?.focus();
     const event = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true, composed: true });
@@ -140,10 +142,27 @@ describe('cat-segmented-control', () => {
     await waitForChanges();
 
     expect(segments[1].active).toBe(true);
+    expect(changeListener).toHaveBeenCalledOnce();
     expect(segments[1].doFocus).toHaveBeenCalledOnce();
     expect(event.defaultPrevented).toBe(true);
   });
 
+  it('preserves required group semantics over native attributes', async () => {
+    const { root } = await render(
+      <cat-segmented-control
+        a11yLabel="Required label"
+        nativeAttributes={{ role: 'button', 'aria-label': 'Override', class: 'override' }}
+      >
+        <cat-segment value="one">Option 1</cat-segment>
+      </cat-segmented-control>
+    );
+    const group = root.shadowRoot?.querySelector('div');
+
+    expect(group?.getAttribute('role')).toBe('radiogroup');
+    expect(group?.getAttribute('aria-label')).toBe('Required label');
+    expect(group).toHaveClass('cat-segmented-control');
+  });
+
   it('propagates size to all segments', async () => {
     const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
       <cat-segmented-control size="xl">
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
index 5eed7872..764ecdca 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
@@ -112,7 +112,6 @@ export class CatSegmentedControl {
   @Listen('catSegmentClick')
   onSegmentClick(event: CustomEvent<string>) {
     this.selectSegment(event.detail);
-    this.catChange.emit(this.value);
   }
 
   @Listen('catSegmentFocus')
@@ -147,11 +146,11 @@ export class CatSegmentedControl {
       <Host>
         <div
           part="control"
+          {...this.nativeAttributes}
           role="radiogroup"
           aria-label={this.a11yLabel}
           class={{ 'cat-segmented-control': true }}
           data-test={this.testId}
-          {...this.nativeAttributes}
         >
           <slot></slot>
         </div>
@@ -174,8 +173,11 @@ export class CatSegmentedControl {
   }
 
   private selectSegment(value: string) {
+    if (this.value === value) return;
+
     this.value = value;
     this.segments.forEach(segment => (segment.active = segment.value === value));
     this.updateTabIndex();
+    this.catChange.emit(value);
   }
 }

From a3fd5473fba3d653679f0c2dcd2d9eeb7d60cd07 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Mon, 17 Aug 2026 12:26:39 +0200
Subject: [PATCH 36/42] feat(core): improve test

---
 .../cat-segmented-control.e2e.tsx             | 26 ++++++++++++++++++
 .../cat-segmented-control.spec.tsx            | 27 +------------------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx
index 2fe24b4d..253593d2 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.e2e.tsx
@@ -22,18 +22,21 @@ describe('cat-segmented-control', () => {
     buttons[0]?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true }));
     await waitForChanges();
     expect(root.value).toBe('two');
+    expect(document.activeElement?.shadowRoot?.activeElement).toBe(buttons[1]);
     expect(buttons[0]?.getAttribute('aria-checked')).toBe('false');
     expect(buttons[1]?.getAttribute('aria-checked')).toBe('true');
 
     buttons[1]?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, composed: true }));
     await waitForChanges();
     expect(root.value).toBe('one');
+    expect(document.activeElement?.shadowRoot?.activeElement).toBe(buttons[0]);
     expect(buttons[0]?.getAttribute('aria-checked')).toBe('true');
     expect(buttons[1]?.getAttribute('aria-checked')).toBe('false');
 
     buttons[0]?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, composed: true }));
     await waitForChanges();
     expect(root.value).toBe('three');
+    expect(document.activeElement?.shadowRoot?.activeElement).toBe(buttons[2]);
     expect(buttons[0]?.getAttribute('aria-checked')).toBe('false');
     expect(buttons[2]?.getAttribute('aria-checked')).toBe('true');
   });
@@ -60,6 +63,29 @@ describe('cat-segmented-control', () => {
     expect(buttons[1]?.getAttribute('aria-checked')).toBe('false');
   });
 
+  it('selects a segment when its button is clicked', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+        <cat-segment value="two">Option 2</cat-segment>
+      </cat-segmented-control>
+    );
+    const button = root
+      .querySelector('cat-segment:nth-of-type(2)')
+      ?.shadowRoot?.querySelector<HTMLButtonElement>('button');
+    const changeListener = (event: Event) => {
+      expect((event as CustomEvent<string>).detail).toBe('two');
+    };
+    root.addEventListener('catChange', changeListener);
+
+    await button?.click();
+    await waitForChanges();
+
+    expect(root.value).toBe('two');
+    expect(button?.getAttribute('aria-checked')).toBe('true');
+    root.removeEventListener('catChange', changeListener);
+  });
+
   it('forwards focus and blur events from segments', async () => {
     const { root } = await render(
       <cat-segmented-control>
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
index 7b18ec3a..e8c998f3 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
@@ -24,7 +24,7 @@ describe('cat-segmented-control', () => {
     `);
   });
 
-  it('emits an event when a segment selection is changed', async () => {
+  it('handles a segment selection event', async () => {
     const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
       <cat-segmented-control>
         <cat-segment value="one">Option 1</cat-segment>
@@ -122,31 +122,6 @@ describe('cat-segmented-control', () => {
     expect(segments).toHaveLength(2);
   });
 
-  it('selects and focuses the next enabled segment with ArrowRight', async () => {
-    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
-      <cat-segmented-control value="one">
-        <cat-segment value="one">Option 1</cat-segment>
-        <cat-segment value="two">Option 2</cat-segment>
-      </cat-segmented-control>
-    );
-
-    await waitForChanges();
-    const segments = Array.from(root.querySelectorAll<HTMLCatSegmentElement>('cat-segment'));
-    const changeListener = vi.fn();
-    root.addEventListener('catChange', changeListener);
-    segments[1].doFocus = vi.fn();
-    segments[0].shadowRoot?.querySelector('button')?.focus();
-    const event = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true, composed: true });
-
-    segments[0].dispatchEvent(event);
-    await waitForChanges();
-
-    expect(segments[1].active).toBe(true);
-    expect(changeListener).toHaveBeenCalledOnce();
-    expect(segments[1].doFocus).toHaveBeenCalledOnce();
-    expect(event.defaultPrevented).toBe(true);
-  });
-
   it('preserves required group semantics over native attributes', async () => {
     const { root } = await render(
       <cat-segmented-control

From f3bc545375f1ec88368ea6fbe65689d322a3e5c2 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Thu, 20 Aug 2026 09:15:29 +0200
Subject: [PATCH 37/42] feat(core): remove aria-controls

---
 .../catalyst/src/lib/directives/proxies.ts    |  3 +--
 core/src/components.d.ts                      |  9 ---------
 .../cat-segment/cat-segment.spec.tsx          | 10 ----------
 .../components/cat-segment/cat-segment.tsx    |  7 -------
 core/src/components/cat-segment/readme.md     | 19 +++++++++----------
 5 files changed, 10 insertions(+), 38 deletions(-)

diff --git a/angular/projects/catalyst/src/lib/directives/proxies.ts b/angular/projects/catalyst/src/lib/directives/proxies.ts
index 9f4aae4b..33bd5ff0 100644
--- a/angular/projects/catalyst/src/lib/directives/proxies.ts
+++ b/angular/projects/catalyst/src/lib/directives/proxies.ts
@@ -1194,7 +1194,7 @@ export declare interface CatScrollable extends Components.CatScrollable {
 }
 
 @ProxyCmp({
-  inputs: ['a11yControls', 'a11yLabel', 'disabled', 'icon', 'iconOnly', 'nativeAttributes', 'testId', 'value'],
+  inputs: ['a11yLabel', 'disabled', 'icon', 'iconOnly', 'nativeAttributes', 'testId', 'value'],
   methods: ['doFocus', 'doBlur']
 })
 @Component({
@@ -1203,7 +1203,6 @@ export declare interface CatScrollable extends Components.CatScrollable {
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: [
-    'a11yControls',
     'a11yLabel',
     'disabled',
     'icon',
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 63b7d7ad..4f498ea9 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1441,10 +1441,6 @@ export namespace Components {
      * A single segment within a cat-segmented-control.
      */
     interface CatSegment {
-        /**
-          * Refers to the element that is controlled (e.g. displayed or hidden) by this segment. Typically, this is the ID of a tab panel that is shown when this segment is active.
-         */
-        "a11yControls"?: string;
         /**
           * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
          */
@@ -4485,10 +4481,6 @@ declare namespace LocalJSX {
      * A single segment within a cat-segmented-control.
      */
     interface CatSegment {
-        /**
-          * Refers to the element that is controlled (e.g. displayed or hidden) by this segment. Typically, this is the ID of a tab panel that is shown when this segment is active.
-         */
-        "a11yControls"?: string;
         /**
           * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
          */
@@ -5628,7 +5620,6 @@ declare namespace LocalJSX {
         "icon": string;
         "iconOnly": boolean;
         "a11yLabel": string;
-        "a11yControls": string;
         "size": SegmentSize;
         "rovingTabIndex": number;
         "testId": string;
diff --git a/core/src/components/cat-segment/cat-segment.spec.tsx b/core/src/components/cat-segment/cat-segment.spec.tsx
index 99d04b09..be1d0c98 100644
--- a/core/src/components/cat-segment/cat-segment.spec.tsx
+++ b/core/src/components/cat-segment/cat-segment.spec.tsx
@@ -191,14 +191,4 @@ describe('cat-segment', () => {
     const btn = root.shadowRoot?.querySelector<HTMLButtonElement>('button');
     expect(btn?.getAttribute('aria-label')).toBe('Test aria label');
   });
-
-  it('sets aria-controls', async () => {
-    const { root } = await render<HTMLCatSegmentElement>(
-      <cat-segment value="day" a11yControls="panel1">
-        Day
-      </cat-segment>
-    );
-    const btn = root.shadowRoot?.querySelector<HTMLButtonElement>('button');
-    expect(btn?.getAttribute('aria-controls')).toBe('panel1');
-  });
 });
diff --git a/core/src/components/cat-segment/cat-segment.tsx b/core/src/components/cat-segment/cat-segment.tsx
index 676ef7cc..f25060cd 100644
--- a/core/src/components/cat-segment/cat-segment.tsx
+++ b/core/src/components/cat-segment/cat-segment.tsx
@@ -36,12 +36,6 @@ export class CatSegment {
    */
   @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;
 
-  /**
-   * Refers to the element that is controlled (e.g. displayed or hidden) by this segment. Typically, this is the ID of
-   * a tab panel that is shown when this segment is active.
-   */
-  @Prop({ attribute: 'a11y-controls' }) a11yControls?: string;
-
   /** @internal Set by cat-segmented-control. Size of the segment. */
   @Prop({ mutable: true }) size: SegmentSize = 'm';
 
@@ -100,7 +94,6 @@ export class CatSegment {
           tabIndex={this.rovingTabIndex}
           aria-label={this.a11yLabel}
           aria-checked={String(this.active)}
-          aria-controls={this.a11yControls}
           data-test={this.testId}
           onClick={this.handleClick.bind(this)}
           onFocus={this.handleFocus.bind(this)}
diff --git a/core/src/components/cat-segment/readme.md b/core/src/components/cat-segment/readme.md
index cf7f8df3..6751c0f2 100644
--- a/core/src/components/cat-segment/readme.md
+++ b/core/src/components/cat-segment/readme.md
@@ -11,16 +11,15 @@ A single segment within a cat-segmented-control.
 
 ## Properties
 
-| Property             | Attribute       | Description                                                                                                                                                                            | Type                                      | Default     |
-| -------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- |
-| `a11yControls`       | `a11y-controls` | Refers to the element that is controlled (e.g. displayed or hidden) by this segment. Typically, this is the ID of a tab panel that is shown when this segment is active.               | `string \| undefined`                     | `undefined` |
-| `a11yLabel`          | `a11y-label`    | Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology. | `string \| undefined`                     | `undefined` |
-| `disabled`           | `disabled`      | Whether this segment is disabled.                                                                                                                                                      | `boolean`                                 | `false`     |
-| `icon`               | `icon`          | Icon name to display (same registry as cat-button).                                                                                                                                    | `string \| undefined`                     | `undefined` |
-| `iconOnly`           | `icon-only`     | When true, hides the label and shows the icon only. Requires icon and a11y-label.                                                                                                      | `boolean`                                 | `false`     |
-| `nativeAttributes`   | --              | Spread onto the native button element.                                                                                                                                                 | `undefined \| { [key: string]: string; }` | `undefined` |
-| `testId`             | `test-id`       | Renders as data-test on the button element.                                                                                                                                            | `string \| undefined`                     | `undefined` |
-| `value` _(required)_ | `value`         | The unique value of this segment within the group.                                                                                                                                     | `string`                                  | `undefined` |
+| Property             | Attribute    | Description                                                                                                                                                                            | Type                                      | Default     |
+| -------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- |
+| `a11yLabel`          | `a11y-label` | Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology. | `string \| undefined`                     | `undefined` |
+| `disabled`           | `disabled`   | Whether this segment is disabled.                                                                                                                                                      | `boolean`                                 | `false`     |
+| `icon`               | `icon`       | Icon name to display (same registry as cat-button).                                                                                                                                    | `string \| undefined`                     | `undefined` |
+| `iconOnly`           | `icon-only`  | When true, hides the label and shows the icon only. Requires icon and a11y-label.                                                                                                      | `boolean`                                 | `false`     |
+| `nativeAttributes`   | --           | Spread onto the native button element.                                                                                                                                                 | `undefined \| { [key: string]: string; }` | `undefined` |
+| `testId`             | `test-id`    | Renders as data-test on the button element.                                                                                                                                            | `string \| undefined`                     | `undefined` |
+| `value` _(required)_ | `value`      | The unique value of this segment within the group.                                                                                                                                     | `string`                                  | `undefined` |
 
 
 ## Methods

From 8235da18559afc5b16e6931b9988451b47b55937 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Thu, 20 Aug 2026 09:17:56 +0200
Subject: [PATCH 38/42] feat(core): fix tabindex casing

---
 core/src/components/cat-segment/cat-segment.spec.tsx | 2 +-
 core/src/components/cat-segment/cat-segment.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components/cat-segment/cat-segment.spec.tsx b/core/src/components/cat-segment/cat-segment.spec.tsx
index be1d0c98..95a06691 100644
--- a/core/src/components/cat-segment/cat-segment.spec.tsx
+++ b/core/src/components/cat-segment/cat-segment.spec.tsx
@@ -96,7 +96,7 @@ describe('cat-segment', () => {
       <cat-segment
         value="testValue"
         testId="segment"
-        nativeAttributes={{ role: 'button', type: 'submit', 'aria-checked': 'false', tabIndex: '5', name: 'day' }}
+        nativeAttributes={{ role: 'button', type: 'submit', 'aria-checked': 'false', tabindex: '5', name: 'day' }}
       >
         Day
       </cat-segment>
diff --git a/core/src/components/cat-segment/cat-segment.tsx b/core/src/components/cat-segment/cat-segment.tsx
index f25060cd..d2c663da 100644
--- a/core/src/components/cat-segment/cat-segment.tsx
+++ b/core/src/components/cat-segment/cat-segment.tsx
@@ -91,7 +91,7 @@ export class CatSegment {
             'cat-segment-icon-only': this.iconOnly && showIcon
           }}
           disabled={this.disabled}
-          tabIndex={this.rovingTabIndex}
+          tabindex={this.rovingTabIndex}
           aria-label={this.a11yLabel}
           aria-checked={String(this.active)}
           data-test={this.testId}

From 484a850f88bb5046e5d76619289730467d642a5a Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Thu, 20 Aug 2026 09:41:56 +0200
Subject: [PATCH 39/42] feat(core): improve var name and add tests

---
 .../cat-segmented-control.spec.tsx            | 26 +++++++++++++++++--
 .../cat-segmented-control.tsx                 |  8 +++---
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
index e8c998f3..4d1e98f3 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
@@ -186,13 +186,35 @@ describe('cat-segmented-control', () => {
     ).toBe(true);
   });
 
-  it('does not prevent arrow-key default when all segments are disabled', async () => {
+  it('preserves segment-level disabled state when control is re-enabled', async () => {
     const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
-      <cat-segmented-control disabled>
+      <cat-segmented-control>
         <cat-segment value="one">Option 1</cat-segment>
       </cat-segmented-control>
     );
 
+    await waitForChanges();
+    const segment = root.querySelector<HTMLCatSegmentElement>('cat-segment');
+    segment!.disabled = true;
+    await waitForChanges();
+
+    root.disabled = true;
+    await waitForChanges();
+    root.disabled = false;
+    await waitForChanges();
+
+    expect(segment?.disabled).toBe(true);
+  });
+
+  it('does not prevent arrow-key default when all segments are disabled', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control>
+        <cat-segment value="one" disabled>
+          Option 1
+        </cat-segment>
+      </cat-segmented-control>
+    );
+
     await waitForChanges();
     const event = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true });
 
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
index 764ecdca..b0105b10 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
@@ -12,7 +12,7 @@ import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, Watch }
 })
 export class CatSegmentedControl {
   private segments: HTMLCatSegmentElement[] = [];
-  private readonly groupDisabledSegments = new WeakSet<HTMLCatSegmentElement>();
+  private readonly disabledByGroup = new WeakSet<HTMLCatSegmentElement>();
   private mutationObserver?: MutationObserver;
 
   @Element() hostElement!: HTMLElement;
@@ -78,7 +78,7 @@ export class CatSegmentedControl {
     if (disabled) {
       this.segments.forEach(segment => {
         if (!segment.disabled) {
-          this.groupDisabledSegments.add(segment);
+          this.disabledByGroup.add(segment);
           segment.disabled = true;
         }
       });
@@ -86,8 +86,8 @@ export class CatSegmentedControl {
     }
 
     this.segments.forEach(segment => {
-      if (this.groupDisabledSegments.has(segment)) {
-        this.groupDisabledSegments.delete(segment);
+      if (this.disabledByGroup.has(segment)) {
+        this.disabledByGroup.delete(segment);
         segment.disabled = false;
       }
     });

From bd547989746181d2b7bf1cef298df11c6639bafe Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Thu, 20 Aug 2026 09:56:00 +0200
Subject: [PATCH 40/42] feat(core): refactor mutation check

---
 .../cat-segmented-control.spec.tsx              | 16 ++++++++++++++++
 .../cat-segmented-control.tsx                   | 17 ++++++++++++++---
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
index 4d1e98f3..5856cf4d 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.spec.tsx
@@ -206,6 +206,22 @@ describe('cat-segmented-control', () => {
     expect(segment?.disabled).toBe(true);
   });
 
+  it('ignores child-list mutations inside segments', async () => {
+    const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
+      <cat-segmented-control>
+        <cat-segment value="one">Option 1</cat-segment>
+      </cat-segmented-control>
+    );
+
+    await waitForChanges();
+    const segment = root.querySelector<HTMLCatSegmentElement>('cat-segment');
+    segment!.size = 'xl';
+    segment!.append(document.createElement('span'));
+    await waitForChanges();
+
+    expect(segment?.size).toBe('xl');
+  });
+
   it('does not prevent arrow-key default when all segments are disabled', async () => {
     const { root, waitForChanges } = await render<HTMLCatSegmentedControlElement>(
       <cat-segmented-control>
diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
index b0105b10..163a3865 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
@@ -96,9 +96,7 @@ export class CatSegmentedControl {
   componentDidLoad() {
     this.sync();
     this.mutationObserver = new MutationObserver(mutations => {
-      if (
-        mutations.some(m => m.type === 'childList' || (m.type === 'attributes' && m.target.nodeName === 'CAT-SEGMENT'))
-      ) {
+      if (mutations.some(mutation => this.isSegmentMutation(mutation))) {
         this.sync();
       }
     });
@@ -165,6 +163,19 @@ export class CatSegmentedControl {
     this.onDisabledChange(this.disabled);
   }
 
+  private isSegmentMutation(mutation: MutationRecord): boolean {
+    if (mutation.type === 'attributes') {
+      return mutation.target.nodeName === 'CAT-SEGMENT';
+    }
+
+    return [...mutation.addedNodes, ...mutation.removedNodes].some(node => {
+      if (node.nodeType !== Node.ELEMENT_NODE) return false;
+
+      const element = node as Element;
+      return element.matches('cat-segment') || element.querySelector('cat-segment') !== null;
+    });
+  }
+
   private updateTabIndex() {
     const enabled = this.segments.filter(s => !s.disabled);
     const active = enabled.find(s => s.active) ?? enabled[0];

From 1378aaabfe3bf1fefac700781e80464771654051 Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Thu, 20 Aug 2026 09:57:43 +0200
Subject: [PATCH 41/42] feat(core): rename part

---
 .../cat-segmented-control/cat-segmented-control.tsx           | 4 ++--
 core/src/components/cat-segmented-control/readme.md           | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/core/src/components/cat-segmented-control/cat-segmented-control.tsx b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
index 163a3865..7a004e3d 100644
--- a/core/src/components/cat-segmented-control/cat-segmented-control.tsx
+++ b/core/src/components/cat-segmented-control/cat-segmented-control.tsx
@@ -3,7 +3,7 @@ import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, Watch }
 /**
  * A segmented control for selecting one option from a mutually-exclusive set.
  *
- * @part control - The tray wrapper element.
+ * @part group - The grouping wrapper element.
  */
 @Component({
   tag: 'cat-segmented-control',
@@ -143,7 +143,7 @@ export class CatSegmentedControl {
     return (
       <Host>
         <div
-          part="control"
+          part="group"
           {...this.nativeAttributes}
           role="radiogroup"
           aria-label={this.a11yLabel}
diff --git a/core/src/components/cat-segmented-control/readme.md b/core/src/components/cat-segmented-control/readme.md
index ef333274..091d4db4 100644
--- a/core/src/components/cat-segmented-control/readme.md
+++ b/core/src/components/cat-segmented-control/readme.md
@@ -35,6 +35,7 @@ A segmented control for selecting one option from a mutually-exclusive set.
 | Part        | Description               |
 | ----------- | ------------------------- |
 | `"control"` | The tray wrapper element. |
+| `"group"`   |                           |
 
 
 ----------------------------------------------

From 2cd7b56729fec8c5e5457d6334e0498aa279a7bb Mon Sep 17 00:00:00 2001
From: Nora Simonow <nora.simonow@haiilo.com>
Date: Thu, 20 Aug 2026 10:23:01 +0200
Subject: [PATCH 42/42] feat(core): regenerate readme

---
 core/src/components/cat-segmented-control/readme.md | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/core/src/components/cat-segmented-control/readme.md b/core/src/components/cat-segmented-control/readme.md
index 091d4db4..dda65a19 100644
--- a/core/src/components/cat-segmented-control/readme.md
+++ b/core/src/components/cat-segmented-control/readme.md
@@ -32,10 +32,9 @@ A segmented control for selecting one option from a mutually-exclusive set.
 
 ## Shadow Parts
 
-| Part        | Description               |
-| ----------- | ------------------------- |
-| `"control"` | The tray wrapper element. |
-| `"group"`   |                           |
+| Part      | Description                   |
+| --------- | ----------------------------- |
+| `"group"` | The grouping wrapper element. |
 
 
 ----------------------------------------------