Lyne Design System - Lean example

### Basic sbb-datepicker setup Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/datepicker/readme.md Demonstrates the basic setup of sbb-datepicker with sbb-date-input and sbb-datepicker-toggle, linking them via IDs. ```html
``` -------------------------------- ### Component Usage and Basic Example Source: https://github.com/sbb-design-systems/lyne-components/blob/main/tools/generate-component/boilerplate/readme.md Explains the use and purpose of a Lyne component, providing a basic HTML example. It also guides on referencing other components and using correct code formatting. ```APIDOC ## Component Usage and Basic Example ### Description Explain the use and the purpose of the component; add minor details if needed and provide a basic example. If you reference other components, link their documentation at least once (the path must start from _/docs/..._ ). For the examples, use triple backticks with file extension (` ```html
``` `).
The following list of paragraphs is only suggested; remove, create and adapt as needed.

The `__name__` is a component .

```html
<__name__>
```
```

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

### Basic Icon Sidebar Setup

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/icon-sidebar/readme.md

Standard implementation using the container, content, and sidebar components.

```html

  
    
    
  
  
    
      In the enchanting world of fantasy, unicorns are legendary creatures known for their grace,
      purity, and magical abilities. These mystical beings have inspired countless tales of bravery
      and wonder. Here, we delve into some captivating unicorn success stories that continue to
      enchant and inspire, each with a touch of public transport magic.
    
  

```

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

### Accordion Component Usage Examples

Source: https://context7.com/sbb-design-systems/lyne-components/llms.txt

Examples demonstrating basic accordion structure, multi-expand functionality, SEO heading levels, and size variants.

```html


  
    What is Lyne?
    
      Lyne is the SBB Design System providing web components for building
      consistent user interfaces across SBB applications.
    
  

  
    How do I get started?
    
      Install the package via npm and import the components you need.
      See the documentation for detailed setup instructions.
    
  

  
    Is it accessible?
    
      Yes! All Lyne components are built with accessibility in mind and
      follow WCAG guidelines.
    
  




  
    Section A
    Content A
  

  
    Section B
    Content B
  




  
    FAQ Item 1
    Answer 1
  




  
    Compact Panel
    Compact content
  

```

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

### Basic sbb-autocomplete-grid Usage

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements-experimental/autocomplete-grid/readme.md

Demonstrates the basic setup of sbb-autocomplete-grid with custom origin and trigger elements.

```html

Another origin





  
    Option 1
    
      
    
  
  
    Option 2
    
      
    
  

```

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

### Basic Popover Usage

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/popover/readme.md

Demonstrates the basic setup of a popover component, linking it to a trigger element.

```APIDOC
## Basic Popover Usage

### Description
This example shows how to use the `` component by linking it to a trigger element using the `trigger` property.

### Method
N/A (Web Component Usage)

### Endpoint
N/A (Web Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html



  Popover Title.
  Popover content.

```

### Response
#### Success Response (200)
N/A (Web Component Behavior)

#### Response Example
N/A (Web Component Behavior)
```

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

### sbb-checkbox-group with sbb-selection-expansion-panel

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/checkbox-group/readme.md

An example demonstrating the use of sbb-checkbox-group with sbb-selection-expansion-panel and sbb-checkbox-panel.

```html

  
    
      Value
      
        
        CHF
        40.00
      
    
  

```

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

### Price Property Example

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements-experimental/timetable-row/readme.md

Example of the priceProp for the sbb-timetable-row component. It includes price, currency, and a discount flag.

```json
{ "price": "12", "text": "CHF", "isDiscount": true }
```

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

### Teaser with title and static button

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/teaser-product/readme.md

Example demonstrating the use of titles and static buttons with the required spacing helper class.

```html

  
  
    Benefit from up to 70% discount
  
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium felis sit amet felis
    viverra lacinia. Donec et enim mi. Aliquam erat volutpat. Proin ut odio tellus.
  
  Label

```

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

### sbb-navigation-list with label and links/buttons

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/navigation/readme.md

Example of a sbb-navigation-list component with a provided label and navigation items.

```html

  Label 1.1.1
  Label 1.1.2
  Label 1.1.3

```

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

### Valid Commit Message Example

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/docs/CONTRIBUTING.md

A concrete example of a commit message following the specified format, including a breaking change and issue references.

```text
feat(sbb-button): add new `sbb-button` component

We had to remove the `sbb-old-button` component as it was deprecated for a long time.

BREAKING CHANGE: The `sbb-old-button` component has been removed.
- Some more details about the breaking change
- More details

Closes #123, #124
```

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

### Usage with sbb-radio-button-group

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/selection-expansion-panel/readme.md

Example of using sbb-selection-expansion-panel within an sbb-radio-button-group.

```APIDOC
## Example: With ``

```html

  
    
      %
      Value
      Subtext
      
        
        CHF
        40.00
      
    
    Inner Content
  

```
```

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

### sbb-menu with custom content

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/menu/readme.md

This example demonstrates how to include custom content, such as text and links, within the sbb-menu. It also shows how to combine custom content with standard menu actions.

```html

Menu trigger



  Christina Müller
  UIS9057
  Profile
  
  View
  Edit
  
    Details
  
  
  Cancel

```

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

### sbb-navigation-marker structure

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/navigation/readme.md

Example of a sbb-navigation-marker containing navigation buttons and links.

```html

  Label 1
  Label 2
  Label 3

```

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

### Accessibility Example (Round Trip)

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/journey-header/readme.md

Demonstrates how the journey header is read by screen readers for a round trip. Reads as 'Connection from Point A to Point B and back to Point A.'

```html

```

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

### Expansion Panel Header with Icon

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/expansion-panel/readme.md

Use the icon-name property to display an SBB icon at the start of the header.

```html
Header
```

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

### Basic Component Usage

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/tools/generate-component/boilerplate/readme.md

This is a basic example of how to use a Lyne component. Ensure the component is correctly imported and registered in your project.

```html
<__name__>
```

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

### Accessibility container setup

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/notification/readme.md

Ensures screen readers announce notifications by wrapping them in a container with aria-live set to polite.

```html


  Task successfully completed.

```

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

### Customizing today's date for testing

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/datepicker/readme.md

Provides an example of how to stub the default date adapter's today() method to return a fixed date for testing purposes. Remember to restore the original method after use.

```typescript
import { defaultDateAdapter } from '@sbb-esta/lyne-elements/datetime.js';
import { stub, type SinonStub } from 'sinon';

// Have defaultDateAdapter.today() return 2022-05-01
todayStub = stub(defaultDateAdapter, 'today').returns(new Date(2022, 4, 1, 0, 0, 0, 0));
// Restore the original method
todayStub.restore();
```

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

### Basic Radio Button Group Setup

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/radio-button-group/readme.md

Sets up a basic radio button group with three options. The first option is selected by default. Ensure to provide an `aria-label` for accessibility.

```html


  Option one
  Option two
  Option three

```

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

### Sidebar with Close Button and Content

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/sidebar/readme.md

A practical example of a sidebar containing both a close button and its content. This setup is common for user-interactive side panels.

```html

  
  Sidebar Content

```

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

### Implement sbb-lead-container with spacing classes

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/lead-container/readme.md

Demonstrates the use of sbb-lead-container-spacing and sbb-lead-container-lead-text classes to manage element spacing.

```html

  
  
  
    
      Interruption between Genève and Lausanne
      The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
      Find out more
    
  
  
    
    Level 1
  
  
    Link
  
  Title
  Lead text.
  
    Vestibulum rutrum elit et lacus sollicitudin, quis malesuada lorem vehicula. Suspendisse at
    augue quis tellus vulputate tempor. Vivamus urna velit, varius nec est ac, mollis efficitur
    lorem. Quisque non nisl eget massa interdum tempus. Praesent vel feugiat metus.
  
  Other content.

```

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

### Install Lyne React package

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/docs/GETTING_STARTED.md

Install the required package using npm or yarn.

```sh
npm install --save @sbb-esta/lyne-react
```

```sh
yarn add @sbb-esta/lyne-react
```

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

### Implement a Description List

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/storybook/guides/theming.mdx

Use the sbb-list class on a native dl element to create a description list.

```html

  Label:
  Description of the label.

  Other Label:
  Description of the label which is longer than the other one.

```

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

### Install Lyne Elements Packages (yarn)

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/docs/GETTING_STARTED.md

Install the core and experimental Lyne elements packages using yarn.

```sh
yarn add @sbb-esta/lyne-elements @sbb-esta/lyne-elements-experimental
```

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

### Install Lyne Elements Packages (npm)

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/docs/GETTING_STARTED.md

Install the core and experimental Lyne elements packages using npm.

```sh
npm install --save @sbb-esta/lyne-elements @sbb-esta/lyne-elements-experimental
```

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

### Basic Usage

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/toast/readme.md

Demonstrates how to open and display a simple toast notification.

```APIDOC
## Basic Usage of sbb-toast

### Description
Displays a simple toast notification with content.

### Method
`open()`

### Endpoint
N/A (Component Method)

### Parameters
None for basic display.

### Request Example
```html
Open toast
Toast content
```

### Response
N/A (Component Method)
```

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

### Install Lyne Components packages

Source: https://context7.com/sbb-design-systems/lyne-components/llms.txt

Use npm or yarn to install the required packages for stable, experimental, React, or Angular integration.

```bash
# Install the main package
npm install --save @sbb-esta/lyne-elements

# Or using yarn
yarn add @sbb-esta/lyne-elements

# For React applications
npm install --save @sbb-esta/lyne-react

# For experimental components
npm install --save @sbb-esta/lyne-elements-experimental
```

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

### Navigation action with active state

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/navigation/readme.md

Illustrates how to set an initial active state for navigation actions using the 'sbb-active' class.

```html
Link
```

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

### Trip Property Example

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements-experimental/timetable-row/readme.md

Example of the tripProp for the sbb-timetable-row component, detailing journey legs with arrival and departure times, and service alterations.

```json
{
  "legs": [
    {
      "duration": 360,
      "id": "test",
      "arrival": { "time": "2022-08-40T15:00:00+02:00" },
      "departure": { "time": "2022-04-30T15:00:00+02:00" },
      "serviceJourney": {
        "serviceAlteration": {
          "cancelled": false
        }
      }
    }
  ]
}
```

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

### Add application info to header

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/header/readme.md

Use the sbb-header-info class to display application name and version information.

```html

  
    Menu
  

  
    Application name
    V. 1.1
  

  

  
    
  

```

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

### Usage with sbb-checkbox-group

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/selection-expansion-panel/readme.md

Example of using sbb-selection-expansion-panel within an sbb-checkbox-group.

```APIDOC
## Example: With ``

```html

  
    
      %
      Value
      Subtext
      
        
        CHF
        40.00
      
    
    Inner Content
  

```
```

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

### SBB Selection Action Panel with Expansion Panel

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/selection-action-panel/readme.md

Shows how to integrate the sbb-selection-action-panel within an sbb-selection-expansion-panel.

```APIDOC
## Usage with sbb-selection-expansion-panel

### Description
Combines the sbb-selection-action-panel with the sbb-selection-expansion-panel to create an expandable selection item.

### Method
N/A (Web Component)

### Endpoint
N/A (Web Component)

### Parameters
N/A

### Request Example
```html

  
    
      Value
      Subtext
    

    ...
  

  
  Inner Content

```

### Response
N/A (Web Component)
```

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

### Basic sbb-selection-action-panel Usage

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/selection-action-panel/readme.md

Demonstrates the basic structure of sbb-selection-action-panel wrapping a sbb-radio-button-panel and a sbb-secondary-button. Ensure the action element is correctly placed.

```html

  
    Value
    Subtext
  

  
  ...
  
  

```

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

### Basic sbb-teaser-product usage

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/teaser-product/readme.md

Standard implementation of the teaser component with an image, content, and footnote.

```html

  

  Content ...

  ...

```

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

### Include global styles

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/docs/GETTING_STARTED.md

Import standard themes to ensure proper styling of SBB components.

```css
@import '~@sbb-esta/lyne-elements/standard-theme.css';

/** If you are using experimental components, additionally add */
@import '~@sbb-esta/lyne-elements-experimental/standard-theme.css';
```

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

### sbb-navigation-section Usage

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/navigation/readme.md

Example of how to use the sbb-navigation-section component with a trigger and nested content.

```APIDOC
## sbb-navigation-section

### Description
Displays a navigation section with a trigger element and optional title content.

### Properties
- **trigger** (string) - Required - The identifier for the trigger element.
- **titleContent** (string) - Optional - Content for the title slot.

### Slots
- **trigger** - Element to trigger the navigation section.

### Example
```html

  
    Label 1.1.1
    Label 1.1.2
  
  Something

```
```

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

### Styling and Configuration

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/toast/readme.md

Details on how to configure toast appearance and behavior, including read-only mode, timeout, and position.

```APIDOC
## Styling and Configuration

### Properties
- **readonly** (boolean) - Optional - If set to true, the close button is hidden.
- **timeout** (number) - Optional - The time in milliseconds before the component automatically closes. Default is 0 (never closes automatically).
- **position** (string) - Optional - The position on the page. Accepts combinations of `top`/`bottom` and `left`/`start`/`center`/`right`/`end`. Default: `bottom-center`.

### Request Example
```html
Open toast bottom left
Toast content


  Open toast top center with timeout

Toast content
```
```

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

### Icon Sidebar Actions

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/icon-sidebar/readme.md

Examples of link and button actions within the sidebar.

```html



```

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

### Sticky Table Implementation

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/table/readme.md

Guidance on implementing sticky headers and columns using the sbb-table-wrapper.

```APIDOC
## Sticky Table

The `` provides classes and utilities to implement a table with sticky headers and columns. The consumer is responsible for applying the correct styles and classes to the template.

**Note:** The Angular wrapper handles most of the sticky table setup. Refer to the Lyne Angular examples for details.
```

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

### Global Configuration

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/popover/readme.md

Configuring default open and close delays for all popover instances using `mergeConfig`.

```APIDOC
## Global Popover Configuration

### Description
Configure the default open and close delays for the `` component globally. These values serve as defaults unless overridden on the element itself.

### Method
N/A (JavaScript Configuration)

### Endpoint
N/A (JavaScript Configuration)

### Parameters
N/A

### Request Example
```ts
import { mergeConfig } from '@sbb-esta/lyne-elements/core.js';

mergeConfig({
  popover: {
    openDelay: 0, // ms before the popover opens
    closeDelay: 0, // ms before the popover closes
  },
});
```

### Response
N/A (Configuration Function)
```

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

### Display a toast with an icon

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/toast/readme.md

Adds an icon to the start of the toast using the icon-name property.

```html
Open toast
Toast content
```

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

### SbbIconSidebarContainerElement

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/icon-sidebar/readme.md

Represents a container for icon sidebars, managing the arrangement of start and end sidebars.

```APIDOC
## Properties for SbbIconSidebarContainerElement

### `end`
- **Type**: `SbbIconSidebarElement | null`
- **Description**: The icon-sidebar child at the end position.

### `sidebars`
- **Type**: `SbbIconSidebarElement[]`
- **Description**: The icon-sidebar children.

### `start`
- **Type**: `SbbIconSidebarElement | null`
- **Description**: The icon-sidebar child at the start position.

## Slots for SbbIconSidebarContainerElement

### Unnamed Slot
- **Description**: Use the unnamed slot to add `sbb-sidebar` and `sbb-sidebar-content` elements.
```

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

### Toggle Check with Aria Label

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/toggle-check/readme.md

Example of using `aria-label` for accessibility when a visible label is not desired.

```html

```

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

### Configure the details section

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/timetable-form/readme.md

Use sbb-timetable-form-details as a flex wrapper for form controls, applying utility classes like .sbb-timetable-form-mobile-block for responsive behavior.

```html

  ...
  
    
      
      
      
      
      
    
    
    
      
    
    
      Dep
      Arr
    
    
    Search
  

```

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

### Basic Toggle Check

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/toggle-check/readme.md

A basic example of the sbb-toggle-check component, functioning like a native checkbox.

```html
Example
```

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

### Basic Expansion Panel Usage

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/expansion-panel/readme.md

The component requires sbb-expansion-panel-header and sbb-expansion-panel-content to function correctly.

```html

  This is the header.
  This is the content.

```

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

### Basic SbbTeaser Usage

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/teaser/readme.md

A standard implementation of the teaser component with an image, title, and description.

```html

  
  Chip label
  Title
  A brief description.

```

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

### Card with Badge

Source: https://context7.com/sbb-design-systems/lyne-components/llms.txt

Example of adding a badge to a card to highlight special offers or important information.

```html

  
    %
    from CHF
    19.99
  
  Supersaver Ticket
  Book early and save up to 70%

```

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

### Configure global tooltip settings

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/tooltip/readme.md

Use mergeConfig to set default open, close, and long-press delays for all tooltips.

```ts
import { mergeConfig } from '@sbb-esta/lyne-elements/core.js';

mergeConfig({
  tooltip: {
    openDelay: 0, // Delay before the tooltip opens (in ms)
    closeDelay: 0, // Delay before the tooltip closes (in ms)
    longPressCloseDelay: 1500, // Duration before the tooltip auto-closes after a long press (in ms)
  },
});
```

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

### Basic sbb-checkbox-group with checkboxes

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/checkbox-group/readme.md

A basic example of using sbb-checkbox-group to contain multiple sbb-checkbox elements.

```html

  Label 1
  Label 2
  Label 3

```

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

### Basic SbbMapContainer Usage

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/map-container/readme.md

Use this snippet to set up the basic structure of the map container with sidebar and map content.

```html

  Content
  Here comes the map.

```

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

### sbb-expansion-panel API

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/expansion-panel/readme.md

Documentation for the main sbb-expansion-panel component properties and configuration.

```APIDOC
## Component: sbb-expansion-panel

### Description
The sbb-expansion-panel acts as an expandable summary-details widget. It must be used with sbb-expansion-panel-header and sbb-expansion-panel-content.

### Properties
- **borderless** (boolean) - Optional - Whether the panel has no border. Default: false.
- **color** ('white' | 'milk') - Optional - The background color of the panel. Default: 'white'.
- **disabled** (boolean) - Optional - Whether the panel is disabled, so its expanded state can't be changed. Default: false.
- **expanded** (boolean) - Optional - Whether the panel is expanded. Default: false.
- **size** ('s' | 'l') - Optional - Size variant, either l or s. Default: 'l'.
- **titleLevel** (SbbTitleLevel | null) - Optional - Heading level; if unset, a div will be rendered.

### Usage Example

  Header
  Content

```

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

### sbb-navigation with trigger and sections

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/navigation/readme.md

Demonstrates using sbb-navigation with a trigger element and nested navigation sections.

```html

Navigation trigger



  
    Label 1
    Label 2
    Label 3
  

  
    Language 1
    Language 2
    Language 3
  

  
    Title 1
    
      Label 1.1
      Label 1.1.1
      Label 1.1.2
      Label 1.1.3
    
    ...
    Something
  
  ...

```

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

### Header Link and Header Button Components

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/header/readme.md

Demonstrates the basic usage of `` and `` components, including adding icons and text.

```APIDOC
## Header Link and Header Button Components

### Description

These components represent clickable actions within the header. `` is used for navigation, while `` is for general actions. They support displaying text, icons, and can be configured for different display behaviors based on screen size.

### Components

- **``**: For navigation links.
- **``**: For actionable buttons.

### Usage Examples

**Basic Usage:**
```html
Link
Button
```

**With Icon:**
Icons can be added using the `iconName` property or the `icon` slot.
```html
Another text
Another text
```

**Responsive Icon/Text Display:**
The `expand-from` property controls the minimum breakpoint at which the label is displayed. Below this, only the icon is shown.
```html
Text
Text
```

**Active State and Accessibility:**
Use the `sbb-active` CSS class for active states and `accessibility-current="page"` for accessibility.
```html

  Overview

```

**Avatar Image as Icon:**
An avatar image can be used as an icon by slotting an `img` or `` into the `icon` slot. For `img` elements, a wrapping `` is recommended for badge placement.
```html

  

```
```

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

### Add Icons to Slider

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/slider/readme.md

Use properties or slots to display icons at the start and end of the slider.

```html



  
  

```

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

### Alpha Values Example

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/storybook/guides/theming.mdx

Demonstrates how to use the CSS `color-mix()` function for applying alpha values to colors.

```APIDOC
## Alpha Values

### Description
Demonstrates how to use the CSS `color-mix()` function for applying alpha values to colors.

### Example
```css
.a {
  /* 40% opacity of primary color */
  color: color-mix(in srgb, var(--sbb-color-primary) 40%, transparent);
}
```
```

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

### Interactions

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/tools/generate-component/boilerplate/readme.md

Outlines how users can interact with a Lyne component, such as opening/closing dialogs or dismissing alerts, with accompanying examples.

```APIDOC
## Interactions

### Description
Describe how it's possible to interact with the component (open and close a ``, dismiss a ``, etc.) and provide examples.
```

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

### States

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/tools/generate-component/boilerplate/readme.md

Details the different states a Lyne component can have (e.g., `disabled`, `readonly`) and provides examples for each state.

```APIDOC
## States

### Description
Describe the component states (`disabled`, `readonly`, etc.) and provide examples.
```

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

### Basic sbb-menu-link and sbb-menu-button

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/menu/readme.md

Demonstrates the basic usage of sbb-menu-link for navigation and sbb-menu-button for actions within a menu.

```html
Link
Button
```

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

### Basic Dialog Implementation

Source: https://context7.com/sbb-design-systems/lyne-components/llms.txt

Demonstrates a standard dialog with a trigger button and a complex dialog containing form fields.

```html

Open Dialog


  Confirm Action
  
    Are you sure you want to proceed with this action?
  
  
    Cancel
    Confirm
  




  Edit Profile
  
  
    
      Display Name
      
    
    
      Email
      
    
  
  
    Cancel
    Save Changes
  

```

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

### Slots

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/tools/generate-component/boilerplate/readme.md

Describes slot naming and usage within a Lyne component, including an example of slotted content.

```APIDOC
## Slots

### Description
Describe slot naming and usage and provide an example of slotted content.
```

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

### Programmatic Accordion Control

Source: https://context7.com/sbb-design-systems/lyne-components/llms.txt

JavaScript example for controlling panel expansion state and listening to toggle events.

```javascript

```

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

### Enable Lean Theme

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/storybook/guides/theming.mdx

Apply the lean theme by adding the sbb-lean class to the html element.

```html

  
    Lyne Design System - Lean example
  
  
    ...
  

```

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

### Basic sbb-logo Usage

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/logo/readme.md

Use the sbb-logo component by defining its height. This example sets the height to 20px.

```html


```

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

### Component: sbb-option-hint

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/option/readme.md

Documentation for the sbb-option-hint component properties and slots.

```APIDOC
## sbb-option-hint

### Description
Represents a hint element associated with options.

### Properties
- **negative** (boolean) - Optional - Negative coloring variant flag. Default: false.

### Slots
- **(unnamed)** - Use to display the hint message.
```

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

### Basic sbb-overlay implementation

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/src/elements/overlay/readme.md

Standard usage of the sbb-overlay component to display content.

```html

  Overlay content.

```

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

### Create a new git branch

Source: https://github.com/sbb-design-systems/lyne-components/blob/main/docs/CONTRIBUTING.md

Use this command to start working on a fix or feature in a dedicated branch.

```shell
git checkout -b my-fix-branch main
```