### Navigate to Getting Started Guide

Source: https://github.com/baloise/design-system/blob/next/docs/src/welcome.mdx

Provides a way to navigate to the 'Getting Started' guide for development, typically initiated by clicking a button.

```javascript
onClick={() => navigate({ title: 'Development/Getting Started' })}
```

--------------------------------

### Start Development Servers

Source: https://github.com/baloise/design-system/blob/next/DEVELOPMENT.md

Start the core components development server or the Storybook documentation server.

```bash
npm start                # Core components dev server (http://localhost:3333)
npm run docs             # Storybook documentation (http://localhost:6006)
```

--------------------------------

### Basic Progress Bar Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/progress-bar/1-Overview.mdx

Displays a standard progress bar. Use this as a starting point for basic implementation.

```javascript
import { Controls, Markdown, Meta } from '@storybook/addon-docs/blocks'
import { Banner, CanvasWithCodePen, BannerTabs, ComponentPublicMethods, ComponentTabs, ComponentLead, Footer } from '../../../.storybook/blocks'
import * as ProgressBarStories from './progress-bar.stories'
import { PROGRESS_BAR_DOC_CONFIG, getProgressBarTabs } from './progress-bar.doc-config'

<Meta title="Components/Progress-bar/Progress-bar" />

<Banner label={'Progress-bar'} section={PROGRESS_BAR_DOC_CONFIG.section} color={PROGRESS_BAR_DOC_CONFIG.color} />

<BannerTabs of={ProgressBarStories} tabs={getProgressBarTabs('overview')} />

<ComponentLead component="progress-bar" />

<CanvasWithCodePen of={ProgressBarStories.Basic} sourceState="shown" />

<ComponentTabs
  tabs={[
    {
      id: 'ds-progress-bar',
      label: 'Progress Bar',
      content: <Controls of={ProgressBarStories.Basic} />,
    },
  ]}
/>

<ComponentPublicMethods component="progress-bar" />

<Footer />
```

--------------------------------

### Install Helvetia Design System Styles

Source: https://github.com/baloise/design-system/blob/next/docs/src/development/00-guides/05-styles.mdx

Install the @baloise/ds-styles package using npm or yarn.

```bash
npm install @baloise/ds-styles
# or
yarn add @baloise/ds-styles
```

--------------------------------

### Install Favicons and copyfiles Dependencies

Source: https://github.com/baloise/design-system/blob/next/docs/src/development/00-guides/04-assets.mdx

Install the necessary libraries for managing favicons and copying files into your project.

```bash
npm add -D @baloise/ds-favicons copyfiles
```

--------------------------------

### Basic Snackbar Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/snackbar/1-Overview.mdx

Displays a basic Snackbar component. Use this as a starting point for implementing snackbars in your application.

```javascript
import { Meta } from '@storybook/addon-docs/blocks'
import * as SnackbarStories from './snackbar.stories'

<Meta title="Components/Snackbar/Snackbar" />

<CanvasWithCodePen of={SnackbarStories.Basic} sourceState="shown" />

<Controls of={SnackbarStories.Basic} />
```

--------------------------------

### Install React Package

Source: https://github.com/baloise/design-system/blob/next/docs/src/development/00-guides/00-getting-started.mdx

Install the @baloise/ds-react package using npm. This command installs the React components and their dependencies.

```bash
npm install @baloise/ds-react
```

--------------------------------

### Start Storybook Documentation

Source: https://github.com/baloise/design-system/blob/next/DEVELOPMENT.md

Starts Storybook for viewing component documentation, stories, and testing different prop combinations. Supports hot reloading.

```bash
npm run docs
```

--------------------------------

### Start Storybook for Component Preview

Source: https://github.com/baloise/design-system/blob/next/DEVELOPMENT.md

Use this command to start the Storybook development server, allowing you to preview new component stories. New components should have `.stories.ts` files in `docs/src/components/<component>/`.

```bash
npm run docs       # Start Storybook to preview stories
```

--------------------------------

### Install Core Design System Package

Source: https://github.com/baloise/design-system/blob/next/docs/src/development/00-guides/00-getting-started.mdx

Install the `@baloise/ds-core` package using npm for HTML5 or server-side rendering applications.

```bash
npm add -E @baloise/ds-core
```

--------------------------------

### Install and Copy Fonts

Source: https://github.com/baloise/design-system/blob/next/docs/src/development/00-guides/04-assets.mdx

Run npm install to trigger the postinstall script, which copies font files to the specified assets directory.

```bash
npm install
```

--------------------------------

### Responsive Border Width Examples

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/border/border-width.mdx

Demonstrates how to apply border width utilities with responsive breakpoints.

```html
<div class="border-width-medium tablet:border-width-large desktop:border-width-xlarge">Responsive Border Width</div>
```

--------------------------------

### Install CSS Utilities

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/00-overview.mdx

Install the CSS utilities package using npm. This package is included if @baloise/ds-core is already installed.

```bash
npm add @baloise/ds-css
```

--------------------------------

### Basic Popup Example

Source: https://github.com/baloise/design-system/blob/next/packages/core/src/components/popup/test/popup.visual.html

Demonstrates the basic implementation of a popup triggered by a button.

```html
<div class="popup" id="popup-basic">
  <div class="popup__content">
    Basic popup content.
  </div>
</div>
<button id="trigger-basic">Click me</button>
```

--------------------------------

### Development Commands

Source: https://github.com/baloise/design-system/blob/next/CLAUDE.md

Commands for starting core components in development mode and launching Storybook documentation.

```bash
# Development
npm start                  # Start core components in dev mode (IS_DS_DEVELOPMENT=true)
npm run docs               # Start Storybook documentation
```

--------------------------------

### Start Core Components Dev Server

Source: https://github.com/baloise/design-system/blob/next/DEVELOPMENT.md

Starts the Stencil dev server for testing components in isolation and checking Shadow DOM. Supports hot reloading.

```bash
npm start
```

--------------------------------

### Install Baloise Design System Schematics

Source: https://github.com/baloise/design-system/blob/next/docs/src/development/00-guides/00-getting-started.mdx

Install the schematics package to configure and add the design system to an Angular project. This simplifies the setup process.

```bash
npm add -D -E @baloise/ds-devkit
```

```bash
npx ng add @baloise/ds-devkit
```

--------------------------------

### Install Google Maps Package and Types

Source: https://github.com/baloise/design-system/blob/next/docs/src/development/00-guides/04-assets.mdx

Install the necessary package for Google Maps integration and its corresponding TypeScript types.

```bash
npm install @baloise/ds-maps
npm install @types/googlemaps --save-dev
```

--------------------------------

### Border Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/border/border-color.mdx

Demonstrates applying a border with a specific color.

```html
<div class="border border-solid border-blue-500"></div>
```

--------------------------------

### Install Testing Library

Source: https://github.com/baloise/design-system/blob/next/docs/src/development/00-guides/08-testing.mdx

Install the `@baloise/ds-testing` package as a development dependency using npm. This package provides custom Cypress commands for testing.

```bash
npm add -D @baloise/ds-testing
```

--------------------------------

### Install Core Design System Package

Source: https://github.com/baloise/design-system/blob/next/README.md

Install the core design system package using npm. This is the first step to integrate the design system into your project.

```bash
npm install @baloise/ds-core
```

--------------------------------

### Basic Link Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/link/3-Variants.mdx

Demonstrates the default appearance of the Link component. Use this for standard navigation within the application.

```javascript
import { CanvasWithCodePen } from '../../../.storybook/blocks'
import * as LinkStories from './link.stories'

<CanvasWithCodePen of={LinkStories.Basic} />
```

--------------------------------

### Footer Component Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/00-overview.mdx

A basic example of the ds-footer component, used for the footer of Helvetia applications.

```html
<ds-footer></ds-footer>
```

--------------------------------

### Flexbox Align Content: Responsive Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/flexbox/flexbox-align-content.mdx

Applies responsive 'align-content' utilities by appending a breakpoint keyword. This example shows 'align-content-start' on tablet and larger screens.

```html
<div class="flex flex-wrap items-center content-start tablet:content-start h-48 border border-gray-300">
  <div class="w-1/4 h-12 bg-blue-500 m-2">Item 1</div>
  <div class="w-1/4 h-12 bg-blue-500 m-2">Item 2</div>
  <div class="w-1/4 h-12 bg-blue-500 m-2">Item 3</div>
  <div class="w-1/4 h-12 bg-blue-500 m-2">Item 4</div>
  <div class="w-1/4 h-12 bg-blue-500 m-2">Item 5</div>
</div>
```

--------------------------------

### Install UnoCSS for CSS Optimization

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/00-overview.mdx

Install UnoCSS as a development dependency to enable CSS utility class optimization.

```bash
npm add -D unocss
```

--------------------------------

### Border Radius Examples

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/border/border-radius.mdx

Demonstrates various applications of border radius utility classes.

```html
<div class="radius-sm">
  radius-sm
</div>
<div class="radius-md">
  radius-md
</div>
<div class="radius-lg">
  radius-lg
</div>
<div class="radius-xl">
  radius-xl
</div>
<div class="radius-full">
  radius-full
</div>
```

--------------------------------

### Commit Message Examples

Source: https://github.com/baloise/design-system/blob/next/CONTRIBUTING.md

Examples of clear and descriptive commit messages following conventional commit standards.

```bash
feat: add button component with primary and secondary variants
fix: resolve focus state contrast issue on tag component
docs: update contribution guidelines
```

--------------------------------

### Default Container Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/layout/container.mdx

The default container size is versatile and suitable for various applications and website pages. This example shows its basic implementation.

```html
<div class="container container--default"></div>
```

--------------------------------

### Border Pseudo States Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/border/border-color.mdx

Demonstrates applying border colors on focus, hover, and active states.

```html
<button class="focus:border-blue-500 hover:border-red-500 active:border-green-500">Button</button>
```

--------------------------------

### Basic ds-select Component

Source: https://github.com/baloise/design-system/blob/next/docs/src/development/00-guides/01-components.mdx

This is a basic example of a ds-select component with options.

```html
<ds-select placeholder="Choose your hobby">
  <ds-select-option label="Tennis" value="tennis"> Tennis </ds-select-option>
  <ds-select-option label="Soccer" value="soccer"> Soccer </ds-select-option>
  <ds-select-option label="Other" value="other"> Other </ds-select-option>
</ds-select>
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/baloise/design-system/blob/next/DEVELOPMENT.md

Clone the design system repository and install project dependencies using npm ci for reproducible builds.

```bash
git clone https://github.com/baloise/design-system.git
cd design-system
npm ci
```

--------------------------------

### Troubleshoot Dependency Installation

Source: https://github.com/baloise/design-system/blob/next/DEVELOPMENT.md

If dependencies fail to install, clear the npm cache and reinstall by removing `node_modules` and `package-lock.json`, then running `npm ci`.

```bash
# Clear npm cache and reinstall
rm -rf node_modules package-lock.json
npm ci
```

--------------------------------

### Stack Stacked Tabs Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/stack/3-Variants.mdx

Presents an example of using Stack to create stacked tabs. This is for scenarios where tabs need to be arranged vertically or in a complex layout.

```javascript
{
  // Storybook story definition for StackedTabs
  // This would typically involve importing and configuring the Stack component
  // and potentially other UI elements to create the stacked tab interface.
  // The actual implementation details are within the Storybook story file.
}
```

--------------------------------

### UI Icons Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/icon/3-Variants.mdx

Displays available UI icons. These icons are part of the Design System and can be extended via configuration.

```javascript
import { CanvasWithCodePen } from '../../../.storybook/blocks'
import * as IconStories from './icon.stories'

<CanvasWithCodePen of={IconStories.UiIcons} sourceState="hidden" />
```

--------------------------------

### Icon Sizes

Source: https://github.com/baloise/design-system/blob/next/packages/core/src/components/icon/test/icon.visual.html

Provides examples of different icon sizes available. This allows for adapting icons to various layout needs.

```html
<bal-icon name="user" size="small"></bal-icon>
<bal-icon name="user" size="medium"></bal-icon>
<bal-icon name="user" size="large"></bal-icon>
```

--------------------------------

### Border Colors Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/border/border-color.mdx

Showcases various border color utilities.

```html
<div class="border border-solid border-blue-500"></div>
<div class="border border-solid border-red-500"></div>
<div class="border border-solid border-green-500"></div>
<div class="border border-solid border-yellow-500"></div>
<div class="border border-solid border-purple-500"></div>
```

--------------------------------

### Responsive Story Example

Source: https://github.com/baloise/design-system/blob/next/docs/CONTEXT.md

A Storybook story that demonstrates responsive behavior of a component by applying conditional styling based on screen width. This example targets smaller screens with reduced font size.

```typescript
export const Responsive = story.story(({ label }) => html`
  <style>
    @media (max-width: 768px) {
      ds-tag { font-size: 0.875rem; }
    }
  </style>
  <ds-tag label="${label}"></ds-tag>
`)
```

--------------------------------

### Token Naming Pattern Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/tokens/01-design-tokens-explained.mdx

Illustrates the naming convention for design tokens, breaking down the segments from namespace to state.

```plaintext
--ds-button-primary-color-bg-base
  │    │       │       │     │  │
  │    │       │       │     │  └─ state (base, hover, active, disabled)
  │    │       │       │     └─ property (bg = background, text = color, border)
  │    │       │       └─ category (color, font, space)
  │    │       └─ variant (primary, secondary, ghost)
  │    └─ component (button, input, tag)
  └─ namespace
```

--------------------------------

### Bold Font Weight Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/typography/typography-weight.mdx

Demonstrates how to apply a bold font weight. This style is available for both font families.

```jsx
import { CanvasWithCodePen } from '../../../.storybook/blocks'
import * as TypographyWeightStories from './typography-weight.stories'

<CanvasWithCodePen of={TypographyWeightStories.Bold} />
```

--------------------------------

### Date Picker Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/00-overview.mdx

Shows a basic date picker component with a pre-set value. Useful for date input fields.

```html
<div class="text-align-center">
  <ds-date value="2023-10-21"></ds-date>
</div>
```

--------------------------------

### Table Basic Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/table/1-Overview.mdx

Displays a basic table structure. All styling is controlled via CSS classes.

```jsx
import { Meta, Controls } from '@storybook/addon-docs/blocks'
import { Banner, BannerTabs, CanvasTabs, ComponentTabs, CanvasWithCodePen, ComponentPublicMethods, Footer } from '../../../.storybook/blocks'
import * as TableStories from './table.stories'
import { TABLE_DOC_CONFIG, getTableTabs } from './table.doc-config'

<Meta title="Components/Table/Table" />

<Banner label={'Table'} section={TABLE_DOC_CONFIG.section} color={TABLE_DOC_CONFIG.color} />

<BannerTabs of={TableStories} tabs={getTableTabs('overview')} />

The **Table** is a CSS-only component for displaying structured tabular data with support for striped rows, hover effects, borders, compact sizing, and row selection states. It has no JavaScript behaviour — all variants are controlled via modifier CSS classes.
{/* <ComponentLead component="table" /> */}

<CanvasWithCodePen of={TableStories.Basic} sourceState="shown" />

<ComponentTabs
  tabs={[
    {
      id: 'table',
      label: 'Table',
      content: <Controls of={TableStories.Basic} />,
    },
  ]}
/>

{/* <ComponentPublicMethods component="table" /> */}

<Footer />

```

--------------------------------

### Basic Number Input Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/number-input/1-Overview.mdx

Displays a basic Number Input component. Use this as a starting point for implementing number input fields in your forms.

```javascript
import { Controls, Markdown, Meta } from '@storybook/addon-docs/blocks'
import {
  Banner,
  CanvasWithCodePen,
  BannerTabs,
  ComponentPublicMethods,
  ComponentTabs,
  ComponentLead,
  Footer,
} from '../../../.storybook/blocks'
import * as NumberInputStories from './number-input.stories'
import { NUMBER_INPUT_DOC_CONFIG, getNumberInputTabs } from './number-input.doc-config'

<Meta title="Components/Forms/Number-input/Number-input" />

<Banner label={'Number-input'} section={NUMBER_INPUT_DOC_CONFIG.section} color={NUMBER_INPUT_DOC_CONFIG.color} />

<BannerTabs of={NumberInputStories} tabs={getNumberInputTabs('overview')} />

<ComponentLead component="number-input" />

<CanvasWithCodePen of={NumberInputStories.Basic} sourceState="shown" />

<ComponentTabs
  tabs={[
    {
      id: 'ds-number-input',
      label: 'Number Input',
      content: <Controls of={NumberInputStories.Basic} />,
    },
  ]}
/>

<ComponentPublicMethods component="number-input" />

<Footer />
```

--------------------------------

### Basic Divider Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/divider/1-Overview.mdx

Demonstrates the basic usage of the Divider component. This snippet is used to render the component in its default state.

```javascript
import { Controls, Markdown, Meta } from '@storybook/addon-docs/blocks'
import {
  Banner,
  CanvasWithCodePen,
  BannerTabs,
  ComponentPublicMethods,
  ComponentTabs,
  ComponentLead,
  Footer,
} from '../../../.storybook/blocks'
import * as DividerStories from './divider.stories'
import { DIVIDER_DOC_CONFIG, getDividerTabs } from './divider.doc-config'

<Meta title="Components/Divider/Divider" />

<Banner label={'Divider'} section={DIVIDER_DOC_CONFIG.section} color={DIVIDER_DOC_CONFIG.color} />

<BannerTabs of={DividerStories} tabs={getDividerTabs('overview')} />

<ComponentLead component="divider" />

<CanvasWithCodePen of={DividerStories.Basic} sourceState="shown" />

<ComponentTabs
  tabs={[
    {
      id: 'ds-divider',
      label: 'Divider',
      content: <Controls of={DividerStories.Basic} />,
    },
  ]}
/>

<ComponentPublicMethods component="divider" />

<Footer />

```

--------------------------------

### HTML Setup with Core and Styles

Source: https://github.com/baloise/design-system/blob/next/docs/src/development/00-guides/00-getting-started.mdx

Include the Baloise Design System styles and core JavaScript modules in the `<head>` of your `index.html`. Add `ds-app` to the body and use components like `ds-heading` and `ds-button`.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Helvetia Design System</title>
    <link rel="stylesheet" href="node_modules/@baloise/ds-styles/css/all.css" />
    <script
      type="module"
      src="node_modules/@baloise/ds-core/dist/design-system/design-system.esm.js"
    ></script>
    <script nomodule src="node_modules/@baloise/ds-core/dist/design-system/design-system.js"></script>
  </head>
  <body>
    <ds-app>
      <main class="container mt-normal">
        <ds-heading>Hello World</ds-heading>
        <ds-button>Button</ds-button>
      </main>
    </ds-app>
  </body>
</html>
```

--------------------------------

### Angular Reactive Form Integration

Source: https://github.com/baloise/design-system/blob/next/docs/src/development/00-guides/02-form.mdx

Example of integrating Design System form elements with Angular Reactive Forms, including template and component setup.

```html
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="grid is-multiline mt-none">
  <ds-field class="col is-full py-none" required>
    <ds-field-label required>Email</ds-field-label>
    <ds-field-control>
      <ds-input name="email" placeholder="Enter your email" formControlName="email" dsAutoFocus></ds-input>
    </ds-field-control>
    <ds-field-message>
      <ds-ng-error controlName="email" error="isRequired">This field is required</ds-ng-error>
      <ds-ng-error controlName="email" error="isMinLength">Min length is 4</ds-ng-error>
      <ds-ng-error controlName="email" error="isEmail">Not a valid email</ds-ng-error>
    </ds-field-message>
  </ds-field>
  <ds-field class="col is-half py-none">...</ds-field>
</form>
```

```ts
import { Component } from '@angular/core'
import { FormControl, FormGroup, Validators } from '@angular/forms'

@Component({
  selector: 'app-form-page',
  templateUrl: './form-page.component.html',
})
export class FormPageComponent {
  form = new FormGroup({
    email: new FormControl(null, [Validators.required]),
  })

  onSubmit() {
    alert('Form is submitted!')
  }
}
```

--------------------------------

### Ordered List Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/list/3-Variants.mdx

Displays a list of items in a specific sequence or order. Suitable for step-by-step instructions or ranked items.

```javascript
import { CanvasWithCodePen } from '../../../.storybook/blocks'
import * as ListStories from './list.stories'

<CanvasWithCodePen of={ListStories.OrderedList} />
```

--------------------------------

### Linked List Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/list/3-Variants.mdx

Displays a list of links for navigation or reference. Use this for menu items or related content links.

```javascript
import { CanvasTabs } from '../../../.storybook/blocks'
import * as ListStories from './list.stories'

<CanvasTabs
 
  htmlOf={ListStories.LinkedListHtml}
  of={ListStories.LinkedList}
 

/>
```

--------------------------------

### Toast Basic Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/toast/1-Overview.mdx

Displays a basic toast notification. This is the primary way to show simple, non-critical messages to the user.

```javascript
import { Meta } from '@storybook/addon-docs/blocks'
import { Banner, CanvasWithCodePen, BannerTabs, ComponentLead, ComponentPublicMethods, Footer } from '../../../.storybook/blocks'
import * as ToastStories from './toast.stories'
import { TOAST_DOC_CONFIG, getToastTabs } from './toast.doc-config'

<Meta title="Components/Toast/Toast" />

<Banner label={'Toast'} section={TOAST_DOC_CONFIG.section} color={TOAST_DOC_CONFIG.color} />

<BannerTabs of={ToastStories} tabs={getToastTabs('overview')} />

<ComponentLead component="toast" />

<CanvasWithCodePen of={ToastStories.Basic} sourceState="shown" />

<Controls of={ToastStories.Basic} />

<ComponentPublicMethods component="toast" />

<Footer />
```

--------------------------------

### App Basic Usage Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/app/1-Overview.mdx

Demonstrates the basic usage of the App component. This snippet is typically used to render the main application layout.

```javascript
import * as AppStories from './app.stories'
import { APP_DOC_CONFIG, getAppTabs } from './app.doc-config'

<Meta title="Components/App/App" />

<Banner label={'App'} section={APP_DOC_CONFIG.section} color={APP_DOC_CONFIG.color} />

<BannerTabs of={AppStories} tabs={getAppTabs('overview')} />

<ComponentLead component="app" />

<CanvasWithCodePen of={AppStories.Basic} sourceState="shown" />

<ComponentTabs
  tabs={[
    {
      id: 'ds-app',
      label: 'App',
      content: <Controls of={AppStories.Basic} />,
    },
  ]}
/>

<ComponentPublicMethods component="app" />

<Footer />
```

--------------------------------

### Navigation Hub Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/00-overview.mdx

A navigation component serving as a central hub for user navigation. It includes a logo and navigation links.

```html
<div class="bg-primary mt-small" style="width: 100%; height: 24px"></div>
<div class="bg-white radius-lg mt-small p-x-small" style="margin-left: 10%; width: 80%; height: 40px">
  <ds-stack>
    <ds-logo style="scale: 0.5; margin-left: -24px"></ds-logo>
    <div class="bg-grey-3 radius-lg" style="width: 32px; height: 8px"></div>
    <div class="bg-grey-3 radius-lg" style="width: 32px; height: 8px"></div>
    <div class="bg-grey-3 radius-lg" style="width: 32px; height: 8px"></div>
    <div class="bg-grey-3 radius-lg" style="width: 32px; height: 8px"></div>
  </ds-stack>
</div>
```

--------------------------------

### Icon Component Examples

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/00-overview.mdx

Displays icons for representing ideas, objects, or actions. Available in various sizes from 'x-small' to 'xx-large'.

```html
<ds-stack align="center">
  <ds-icon name="edit" size="small"></ds-icon>
  <ds-icon name="edit"></ds-icon>
  <ds-icon name="edit" size="medium"></ds-icon>
  <ds-icon name="edit" size="large"></ds-icon>
  <ds-icon name="edit" size="x-large"></ds-icon>
  <ds-icon name="edit" size="xx-large"></ds-icon>
</ds-stack>
```

--------------------------------

### Vertical Divider Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/divider/3-Variants.mdx

Use vertical dividers to separate content in a vertical layout. This example demonstrates its implementation.

```javascript
import { Canvas, Markdown, Meta } from '@storybook/addon-docs/blocks'
import { Banner, BannerTabs, CanvasTabs, Footer, StoryHeading } from '../../../.storybook/blocks'
import * as DividerStories from './divider.stories'
import { DIVIDER_DOC_CONFIG, getDividerTabs } from './divider.doc-config'

<Meta title="Components/Divider/Variants/Overview" />
<StoryHeading of={DividerStories.Basic} hidden></StoryHeading>
<Banner label={'Variants'} section={DIVIDER_DOC_CONFIG.section} color={DIVIDER_DOC_CONFIG.color} />
<BannerTabs
  of={DividerStories}
  tabs={getDividerTabs('variants')}
/>

{/* STORIES */} 
{/* ------------------------------------------------------ */} 

<StoryHeading of={DividerStories.Vertical}></StoryHeading>

Use vertical dividers to separate content sections in a vertical layout, providing a clear visual distinction between elements.

<CanvasTabs htmlOf={DividerStories.VerticalHtml} of={DividerStories.Vertical} />

{/* ------------------------------------------------------ */} 

<Footer />
```

--------------------------------

### Dashed Divider Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/divider/3-Variants.mdx

Use dashed dividers for a subtle separation. This example shows how to implement a dashed divider.

```javascript
import { Canvas, Markdown, Meta } from '@storybook/addon-docs/blocks'
import { Banner, BannerTabs, CanvasTabs, Footer, StoryHeading } from '../../../.storybook/blocks'
import * as DividerStories from './divider.stories'
import { DIVIDER_DOC_CONFIG, getDividerTabs } from './divider.doc-config'

<Meta title="Components/Divider/Variants/Overview" />
<StoryHeading of={DividerStories.Basic} hidden></StoryHeading>
<Banner label={'Variants'} section={DIVIDER_DOC_CONFIG.section} color={DIVIDER_DOC_CONFIG.color} />
<BannerTabs
  of={DividerStories}
  tabs={getDividerTabs('variants')}
/>

{/* STORIES */} 
{/* ------------------------------------------------------ */} 

<StoryHeading of={DividerStories.Dashed}></StoryHeading>

Use dashed dividers to create a more subtle separation between content sections, providing a lighter visual break compared to solid dividers.

<CanvasTabs htmlOf={DividerStories.DashedHtml} of={DividerStories.Dashed} />
```

--------------------------------

### Downloadable List Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/list/3-Variants.mdx

Presents a list of downloadable items, each potentially with associated actions. Suitable for file downloads or resource lists.

```javascript
import { CanvasTabs } from '../../../.storybook/blocks'
import * as ListStories from './list.stories'

<CanvasTabs
 
  htmlOf={ListStories.DownloadListHtml}
  of={ListStories.DownloadList}
 

/>
```

--------------------------------

### Publish Pre-release Version

Source: https://github.com/baloise/design-system/blob/next/docs/src/contributing.mdx

Use the `/snapshot` bot command in a PR to publish a pre-release version for testing purposes.

```bash
# Post this comment in your PR:
/snapshot
```

--------------------------------

### Correct: 2–4 short options

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/segment/2-Usage.mdx

Keep the number of options to a minimum (2-4) with short labels for optimal scannability and a compact appearance. This example shows a correct implementation for size selection.

```html
<ds-segment name="do-count" value="s" label="Size">
  <ds-segment-item value="s" label="S"></ds-segment-item>
  <ds-segment-item value="m" label="M"></ds-segment-item>
  <ds-segment-item value="l" label="L"></ds-segment-item>
  <ds-segment-item value="xl" label="XL"></ds-segment-item>
</ds-segment>
```

--------------------------------

### Compact Container Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/layout/container.mdx

A tailored container size designed for form wizard applications or pages. This example demonstrates its usage.

```html
<div class="container container--compact"></div>
```

--------------------------------

### Flexbox Align Content: Start

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/flexbox/flexbox-align-content.mdx

Aligns flex lines to the start of the container. Use this when you want items grouped at the beginning.

```html
<div class="flex flex-wrap items-center content-start h-48 border border-gray-300">
  <div class="w-1/4 h-12 bg-blue-500 m-2">Item 1</div>
  <div class="w-1/4 h-12 bg-blue-500 m-2">Item 2</div>
  <div class="w-1/4 h-12 bg-blue-500 m-2">Item 3</div>
  <div class="w-1/4 h-12 bg-blue-500 m-2">Item 4</div>
  <div class="w-1/4 h-12 bg-blue-500 m-2">Item 5</div>
</div>
```

--------------------------------

### Basic Background Color and Spacing Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/00-overview.mdx

Demonstrates applying padding and background color utilities to an element. This is useful for quickly styling elements with consistent spacing and colors.

```html
<div class="p-base bg-green"></div>
```

--------------------------------

### Install Transloco for Translations

Source: https://github.com/baloise/design-system/blob/next/docs/src/development/00-guides/00-getting-started.mdx

Install the Transloco package if your project requires translations. This is a prerequisite for using the Helvetia Design System with translations.

```bash
npm add -E @ngneat/transloco
```

```bash
npx ng add @ngneat/transloco
```

--------------------------------

### Responsive Z-Index Classes

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/elevation/z-index.mdx

Demonstrates how to apply z-index classes responsively by appending breakpoint keywords. This allows for dynamic stack order adjustments based on screen size.

```html
<div class="tablet:z-index-modal"></div>
<div class="desktop:z-index-overlay"></div>
```

--------------------------------

### Divider Component Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/00-overview.mdx

Shows the ds-divider component, a thin line used to group content. This example sets the color to 'primary'.

```html
<ds-divider color="primary"></ds-divider>
```

--------------------------------

### Install Baloise Angular Components Manually

Source: https://github.com/baloise/design-system/blob/next/docs/src/development/00-guides/00-getting-started.mdx

Manually install the latest Angular components package, which includes Font, Token, Icon, and CSS-Utilities.

```bash
npm install @baloise/ds-angular
```

--------------------------------

### Basic Pagination Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/pagination/1-Overview.mdx

Demonstrates the basic usage of the Pagination component. This snippet is typically used to render a standard pagination interface.

```javascript
import { Controls, Markdown, Meta } from '@storybook/addon-docs/blocks'
import { Banner, CanvasWithCodePen, BannerTabs, ComponentPublicMethods, ComponentTabs, ComponentLead, Footer } from '../../../.storybook/blocks'
import * as PaginationStories from './pagination.stories'
import { PAGINATION_DOC_CONFIG, getPaginationTabs } from './pagination.doc-config'

<Meta title="Components/Pagination/Pagination" />

<Banner label={'Pagination'} section={PAGINATION_DOC_CONFIG.section} color={PAGINATION_DOC_CONFIG.color} />

<BannerTabs of={PaginationStories} tabs={getPaginationTabs('overview')} />

<ComponentLead component="pagination" />

<CanvasWithCodePen of={PaginationStories.Basic} sourceState="shown" />

<ComponentTabs
  tabs={[
    {
      id: 'ds-pagination',
      label: 'Pagination',
      content: <Controls of={PaginationStories.Basic} />,
    },
  ]}
/>

<ComponentPublicMethods component="pagination" />

<Footer />
```

--------------------------------

### Build Commands

Source: https://github.com/baloise/design-system/blob/next/CLAUDE.md

Commands for building all packages, design tokens, and styles. Utilizes turbo cache for efficiency.

```bash
# Build
npm run build              # Build all packages (respects turbo cache)
npm run tokens             # Build design tokens only
npm run css                # Build styles only
```

--------------------------------

### Input with Formatter Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/input/3-Variants.mdx

Demonstrates an input field with a custom formatter, allowing for real-time transformation of user input, such as currency or date formatting. This enhances user experience by providing immediate feedback on input structure.

```javascript
import { CanvasWithCodePen } from '../../../.storybook/blocks'
import * as InputStories from './input.stories'

<CanvasWithCodePen of={InputStories.Formatter} sourceState="shown" />
```

--------------------------------

### Flexbox Justify Content: Start

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/flexbox/flexbox-justify-content.mdx

Aligns elements to the start of the flex container. Use this when you want items packed at the beginning of the main axis.

```html
<div class="flex justify-content-start">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

--------------------------------

### Component File Structure Example

Source: https://github.com/baloise/design-system/blob/next/ARCHITECTURE.md

Illustrates the standard file organization for a Stencil component within the 'packages/core/src/components/' directory, including source, styles, and tests.

```treeview
button/
  button.tsx              # Stencil component (props, events, render)
  button.interfaces.ts    # TypeScript types and enums
  button.host.scss        # Shadow DOM styles (scoped to :host)
  button.style.scss       # Shared CSS (web component + global)
  test/
    button.spec.ts              # Unit tests (Vitest)
    button.component.play.ts    # Interaction tests (Playwright)
    button.visual.play.ts       # Visual regression tests
    button.a11y.play.ts         # Accessibility tests
```

--------------------------------

### Stack Padding Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/stack/3-Variants.mdx

Shows how to apply padding to the Stack component. Use this to add internal spacing around the content of the stack.

```html
<div class="stack stack--padding-large">
  <div class="stack__item">Item 1</div>
  <div class="stack__item">Item 2</div>
</div>
```

--------------------------------

### Tabs Component Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/00-overview.mdx

Tabs are used to structure information into subsections on the same page. This example shows how to implement a basic tab structure with multiple tab items.

```html
<ds-tabs border value="tab-b">
  <ds-tab-item value="tab-a" label="Apple Pie"></ds-tab-item>
  <ds-tab-item value="tab-b" label="Mango"></ds-tab-item>
  <ds-tab-item value="tab-c" label="Blueberry"></ds-tab-item>
</ds-tabs>
```

--------------------------------

### Stack Component Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/00-overview.mdx

Illustrates the ds-stack component for arranging child elements vertically or horizontally with optional spacing. This example shows three child divs.

```html
<ds-stack>
  <div class="bg-purple-2" style={{ height: '4rem', width: '100%' }}></div>
  <div class="bg-purple-2" style={{ height: '4rem', width: '100%' }}></div>
  <div class="bg-purple-2" style={{ height: '4rem', width: '100%' }}></div>
</ds-stack>
```

--------------------------------

### Stack Nested Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/stack/3-Variants.mdx

Demonstrates how to create nested Stack components. Use this for complex layouts requiring hierarchical arrangement of elements.

```html
<div class="stack stack--nested">
  <div class="stack">
    <div class="stack__item">Item 1</div>
    <div class="stack__item">Item 2</div>
  </div>
  <div class="stack">
    <div class="stack__item">Item 3</div>
    <div class="stack__item">Item 4</div>
  </div>
</div>
```

--------------------------------

### Angular Module Setup

Source: https://github.com/baloise/design-system/blob/next/docs/src/development/00-guides/00-getting-started.mdx

Import `provideDesignSystem` and necessary components into your Angular root module. Ensure `CUSTOM_ELEMENTS_SCHEMA` is added to enable Web Component usage.

```typescript
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BalButton, Heading, LayoutBundle, provideDesignSystem } from '@baloise/ds-angular'
import { AppComponent } from './app.component'

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // Provide all components and value accessors to the app module.
    provideDesignSystem(),
    ...BalLayoutBundle,
    BalHeading,
    BalButton,
  ],
  providers: [],
  bootstrap: [AppComponent],
  // To enable the usage of Web Components inside the Angular templates.
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
```

--------------------------------

### Flexbox Align Items: Responsive Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/flexbox/flexbox-align-items.mdx

Apply responsive 'align-items' classes by appending a breakpoint keyword. For example, 'tablet:align-items-start' applies 'align-items-start' only on tablet screens and up.

```html
<div class="flex tablet:flex-align-items-start">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

--------------------------------

### Basic CSS Token Usage

Source: https://github.com/baloise/design-system/blob/next/docs/src/tokens/02-use-tokens-in-code.mdx

Demonstrates how to use global, alias, and component-level CSS custom properties for styling elements.

```css
/* Global tokens (primitives) */
.primary-color {
  background-color: var(--ds-global-color-primary-5);
  color: var(--ds-global-color-white);
}

/* Alias/Semantic tokens */
.card {
  background-color: var(--ds-alias-bg-color-primary);
  color: var(--ds-alias-text-color-primary);
  padding: var(--ds-alias-space-16);
  border-radius: var(--ds-alias-radius-base);
}

/* Component tokens */
.button {
  background-color: var(--ds-button-primary-color-bg-base);
  color: var(--ds-button-primary-color-text-base);
  padding: var(--ds-button-py) var(--ds-button-px);
}
```

--------------------------------

### Sheet Component Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/00-overview.mdx

Shows the ds-sheet component, used for displaying content over the entire page at the bottom, acting as a sticky element. Includes examples for tablet and mobile views.

```html
<div class="container">
  <div class="bg-purple-2" style={{ minHeight: '200px', width: '100%' }}></div>
</div>
<ds-sheet>
  <ds-stack layout="vertical" space="small" class="tablet:hidden">
    <ds-button wide>Continue with 1'234 CHF</ds-button>
    <ds-button wide color="secondary">
      Back
    </ds-button>
  </ds-stack>
  <ds-stack class="mobile:hidden">
    <ds-heading level="p" visual-level="h4">
      1'234 CHF
    </ds-heading>
    <ds-content>
      <p class="text-small m-none flex-1">Lorem ipsum dolor</p>
    </ds-content>
    <ds-button-group>
      <ds-button>Next</ds-button>
    </ds-button-group>
  </ds-stack>
</ds-sheet>
```

--------------------------------

### Input with Slots Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/input/3-Variants.mdx

Shows how to use slots within the input component for custom content placement, such as icons or labels. This allows for flexible UI customization.

```javascript
import { CanvasWithCodePen } from '../../../.storybook/blocks'
import * as InputStories from './input.stories'

<CanvasWithCodePen of={InputStories.Slots} sourceState="shown" />
```

--------------------------------

### Loading Input Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/input/3-Variants.mdx

Displays the input field with a loading indicator, suitable for asynchronous operations like data fetching or submission.

```javascript
import { CanvasTabs } from '../../../.storybook/blocks'
import * as InputStories from './input.stories'

<CanvasTabs of={InputStories.Loading} htmlOf={InputStories.LoadingHtml} sourceState="shown" />
```

--------------------------------

### Border Position Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/border/border-color.mdx

Illustrates applying borders to specific sides of an element.

```html
<div class="border-t border-solid border-t-blue-500"></div>
<div class="border-r border-solid border-r-red-500"></div>
<div class="border-b border-solid border-b-green-500"></div>
<div class="border-l border-solid border-l-yellow-500"></div>
```

--------------------------------

### Custom Event Declarations

Source: https://github.com/baloise/design-system/blob/next/STYLE_GUIDE.md

All custom events must start with the `ds` prefix.

```typescript
@Event() dsChange: EventEmitter<string>
@Event() dsCloseClick: EventEmitter<void>
```

--------------------------------

### Initialize Design System in HTML/JS

Source: https://github.com/baloise/design-system/blob/next/docs/src/development/00-guides/03-internationalization.mdx

Initialize the Design System core with region, language, and allowed languages for plain HTML/JavaScript applications.

```ts
import { initialize } from '@baloise/ds-core'

initialize({
  region: 'CH',
  language: 'de',
  allowedLanguages: ['de', 'fr', 'it', 'en'],
})
```

--------------------------------

### Flexbox Column Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/flexbox/flexbox-direction.mdx

Arranges elements vertically. Use this when a stacked layout is needed.

```html
<div class="flex-direction-column"></div>
```

--------------------------------

### Publish Snapshot Version for Testing

Source: https://github.com/baloise/design-system/blob/next/docs/src/contributing.mdx

Use the `/snapshot` bot command in a PR to publish a snapshot version. Then, install and test this version in your project using npm.

```bash
# Post this comment in your PR:
/snapshot

# Then install and test:
npm install @baloise/ds-core@1.2.3-snapshot.456.abc1234
```

--------------------------------

### App Component Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/components/00-overview.mdx

Demonstrates the usage of the ds-app component as a container for an application, including header, main content, and footer elements. It showcases styling and structure within the app.

```html
<ds-app
  class="bg-white h-full radius flex flex-direction-column"
  style={{ minHeight: '336px', margin: '32px', overflow: 'hidden' }}
>
  <header>
    <ds-navbar>
      <ds-navbar-brand>Apple Bakery</ds-navbar-brand>
    </ds-navbar>
  </header>
  <main class="flex-1">
    <div class="container my-large">
      <h1 class="title text-xx-large">Welcome</h1>
      <h2 class="subtitle text-xx-large">We have the best apple pie</h2>
    </div>
  </main>
  <div class="bg-primary" style={{ height: '3rem', width: '100%' }}></div>
</ds-app>
```

--------------------------------

### Flexbox Row Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/flexbox/flexbox-direction.mdx

Arranges elements horizontally. This is the default behavior for flex items.

```html
<div class="flex-direction-row"></div>
```

--------------------------------

### Text Shadow Example

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/elevation/elevation-shadow.mdx

Apply a light text shadow to improve readability on images.

```javascript
import { CanvasWithCodePen } from '../../../.storybook/blocks'
import * as ElevationShadowStories from './elevation-shadow.stories'

<CanvasWithCodePen of={ElevationShadowStories.TextShadow} />
```

--------------------------------

### Build Packages

Source: https://github.com/baloise/design-system/blob/next/DEVELOPMENT.md

Build all packages or specific ones using Turborepo for cached builds. Also includes building documentation for production.

```bash
# Build everything
npm run build

# Build specific packages
npm run build -- --filter=@baloise/ds-core     # Web components
npm run build -- --filter=@baloise/ds-tokens   # Design tokens
npm run build -- --filter=@baloise/ds-css      # Styles

# Build docs for production
npm run build:docs
```

--------------------------------

### Basic Icon Usage

Source: https://github.com/baloise/design-system/blob/next/packages/core/src/components/icon/test/icon.visual.html

Demonstrates the fundamental way to include an icon component. Ensure the SVG content is correctly provided.

```html
<bal-icon name="user"></bal-icon>
```

--------------------------------

### Box Shadow Examples

Source: https://github.com/baloise/design-system/blob/next/docs/src/css-utilities/elevation/elevation-shadow.mdx

Use for default card shadows and large shadows for hover effects.

```javascript
import { CanvasWithCodePen } from '../../../.storybook/blocks'
import * as ElevationShadowStories from './elevation-shadow.stories'

<CanvasWithCodePen of={ElevationShadowStories.BoxShadow} />
```