### New Tegel Lite Component SCSS Setup

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/README.dev.md

Example of setting up the main SCSS file and optional partials for a new component, like 'tl-alert'.

```scss
// packages/core/src/tegel-lite/components/tl-alert/tl-alert.scss

@import './variables';

.tl-alert {
  background-color: blue;

  &--success {
    background-color: green;
  }

  &--error {
    background-color: red;
  }
}
```

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

### Basic Flex Start Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/utility/utility-classes/flex.mdx

Example of applying the 'tds-u-flex-start' utility class to a div element to align content to the start.

```html
<div class="tds-u-flex-start">
  <!-- Content -->
</div>
```

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

### Install Tegel Styles

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/styles/README.md

Install the @tegel-styles package using npm.

```sh
npm install @tegel-styles
```

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

### Install Tegel Package

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/GettingStarted/javascript.mdx

Install the @scania/tegel package using npm. This command should be run after initializing your project with 'npm init' to generate a package.json file.

```bash
npm install @scania/tegel
```

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

### Install @scania/tegel-react

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/GettingStarted/react.mdx

Install the Tegel React package using npm. This is the recommended way to integrate Tegel into your React project.

```bash
npm install @scania/tegel-react
```

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

### Basic Opacity Usage Example

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/utility/utility-classes/opacity.mdx

Demonstrates how to apply the `tds-u-opacity-100` class to an element to set its opacity to 100%.

```html
<div class="tds-u-opacity-100">
  <!-- Content -->
</div>
```

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

### HTML Example: Applying Zero Padding

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/utility/utility-classes/padding.mdx

This example demonstrates how to apply zero padding to an element using the `tds-u-p0` utility class. This is useful for removing default padding or when precise spacing control is needed.

```html
<div class="tds-u-p0">
  <!-- Content -->
</div>
```

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

### Install Tegel Lite Package

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/GettingStarted/tegel-lite.mdx

Install the Tegel Lite package using npm. This command adds the necessary CSS and SCSS files to your project.

```bash
npm install @scania/tegel-lite
```

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

### Basic Information Banner Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/banner/test/information/index.html

Example of how to use the information banner with a link. Ensure the banner is correctly imported and initialized before use.

```html
<sc-banner type="information" heading="Information heading" text="This is an information banner.">
  <a href="/">Link example</a>
</sc-banner>
```

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

### Build and Run Local Environment

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/docs/CREATING-COMPONENT.md

Build the project and start a local development server with Storybook. This allows you to view and test your newly created component in isolation.

```bash
npm run build
npm start
```

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

### Basic tl-header Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/tegel-lite/components/tl-header/readme.md

This is a basic example of how to implement the tl-header component in HTML. Ensure you include the necessary stylesheets for proper rendering.

```html
<header class="tl-header">
  <nav class="tl-header__nav">
    <ul class="tl-header__list">
      <li class="tl-header__title"><h4 class="tl-header__title-text">Application Name</h4></li>
      <li class="tl-header__item">
        <button class="tl-header__item-wrapper">
          <span class="tl-icon tl-icon--placeholder tl-icon--16" aria-hidden="true"></span>
        </button>
      </li>
      <li class="tl-header__middle-spacer"></li>
      <li class="tl-header__dropdown">
        <button class="tl-header__dropdown-wrapper">
          <span>Dropdown</span>
          <div class="tl-header__dropdown-icon">
            <span class="tl-icon tl-icon--chevron_down tl-icon--16" aria-hidden="true"></span>
          </div>
        </button>
      </li>
    </ul>
  </nav>
</header>
```

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

### Datetime with Label and Helper Text (Another Instance)

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/tests/tl-datetime/index.html

Another example of a datetime input with a label and helper text, illustrating consistent usage patterns.

```html
<label class="tds-label" for="datetime-input-3">Label text</label>
<tl-datetime id="datetime-input-3"></tl-datetime>
<div class="tds-helper-text">Helper text</div>
```

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

### Basic Text Alignment Usage Example

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/utility/utility-classes/text-alignment.mdx

Demonstrates how to apply the text alignment utility classes to an HTML element.

```html
<div class="tds-u-textalign-start">
  <!-- Content -->
</div>
```

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

### HTML Setup

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/README.md

Integrate Tegel components directly into an HTML file. This involves importing the custom element definitions and the Tegel stylesheet via script and link tags.

```html
<script type="module">
  import { defineCustomElements } from './node_modules/@scania/tegel/loader/index.es2017.js';
  defineCustomElements();
</script>
<link rel="stylesheet" href="./node_modules/@scania/tegel/dist/tegel/tegel.css" />
```

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

### Local Development Setup with npm link

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/README.dev.md

Alternatively, use `npm link` to symlink the Tegel Lite package. Run `npm link` in the Tegel Lite package directory, then `npm link @scania/tegel-lite` in your app's directory.

```bash
# In the tegel/packages/tegel-lite package:
npm link

# In your app:
npm link @scania/tegel-lite
```

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

### Basic Flexbox Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/utility/utility-classes/display.mdx

Example of using the tds-u-flex utility class to enable flexbox layout.

```html
<div class="tds-u-flex">
  <!-- Content -->
</div>
```

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

### Basic tl-toast Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/tegel-lite/components/tl-toast/readme.md

This is a basic example of how to implement an information toast with a header, message, and an optional link. Ensure you include the necessary stylesheets for the toast, icon, and link.

```html
<div class="tl-toast tl-toast--information">
  <span class="tl-toast__icon">
    <span class="tl-icon tl-icon--info tl-icon--20"></span>
  </span>
  <div class="tl-toast__content">
    <div class="tl-toast__text">
      <div class="tl-toast__header">Toast Header</div>
      <div class="tl-toast__subheader">Toast message text goes here.</div>
    </div>
    <div class="tl-toast__actions">
      <a class="tl-link tl-link--underline" href="#">Link example</a>
    </div>
  </div>
  <button class="tl-toast__close">
    <span class="tl-icon tl-icon--cross tl-icon--20"></span>
  </button>
</div>
```

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

### Install Tegel Angular Package

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/GettingStarted/angular.mdx

Install the `@scania/tegel-angular` package using npm. This is the recommended approach for integrating Tegel into an Angular application.

```bash
npm install @scania/tegel-angular
```

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

### Basic tl-modal Usage Example

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/tegel-lite/components/tl-modal/readme.md

Demonstrates the basic HTML structure for a visible modal with a header, body, actions, and close button. Apply the `tl-modal--visible` class to show the modal and overlay.

```html
<div class="tl-modal__overlay tl-modal--visible"></div>
<div class="tl-modal tl-modal--md tl-modal--visible">
  <div class="tl-modal__header">
    <h2 class="tl-modal__title">Modal Title</h2>
    <button class="tl-modal__close">
      <span class="tl-icon tl-icon--cross"></span>
    </button>
  </div>
  <div class="tl-modal__body">
    <p>Modal content goes here.</p>
  </div>
  <div class="tl-modal__actions">
    <button class="tl-button">Cancel</button>
    <button class="tl-button tl-button--primary">Confirm</button>
  </div>
</div>
```

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

### Install Project Dependencies

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/docs/CREATING-COMPONENT.md

Install the necessary npm dependencies for the main Tegel project and its core packages. This ensures your development environment is correctly set up.

```bash
npm install
cd packages/core
npm install
cd ../..
```

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

### Datetime with Label and Helper Text (Final Instance)

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/tests/tl-datetime/index.html

The last example of a datetime input with a label and helper text, demonstrating the component's versatility in various contexts.

```html
<label class="tds-label" for="datetime-input-5">Label text</label>
<tl-datetime id="datetime-input-5"></tl-datetime>
<div class="tds-helper-text">Helper text</div>
```

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

### Basic HTML Button Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/README.md

Example of how to use the Tegel Lite button component in HTML. Apply the appropriate BEM classes for styling.

```html
<button class="tl-button tl-button--primary">
  <span class="tl-button__label">Click me</span>
</button>
```

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

### Build Tegel Lite Library

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/README.dev.md

Commands to build the @scania/tegel-lite library from the core package. This involves installing dependencies and running a build script.

```bash
npm i

then navigate to `packages/core` and run: 

```bash
npm i
```

```bash
npm run build:tegel-lite
```
```

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

### Angular Setup

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/README.md

Integrate Tegel components into an Angular application. This requires importing custom element definitions and the Tegel stylesheet, and configuring Angular's module.

```typescript
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { defineCustomElements } from '@scania/tegel/loader';
import { AppModule } from './app/app.module';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

defineCustomElements(window);
```

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
```

```css
@import url('@scania/tegel/dist/tegel/tegel.css');
```

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

### Basic Inline Tabs Structure

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/tabs/test/inline-tabs/index.html

Example of the basic HTML structure for inline tabs. Includes tab headers and content panels.

```html
<sc-tabs>
  <sc-tab-item slot="tab" label="First tab">Content for the first tab</sc-tab-item>
  <sc-tab-item slot="tab" label="Second tab is much longer">Content for the second tab</sc-tab-item>
  <sc-tab-item slot="tab" label="Third tab">Content for the third tab</sc-tab-item>
  <sc-tab-item slot="tab" label="Fourth tab">Content for the fourth tab</sc-tab-item>
</sc-tabs>
```

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

### React with JavaScript Setup

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/README.md

Integrate Tegel components into a React application using plain JavaScript. This involves defining custom elements and importing the Tegel stylesheet.

```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { defineCustomElements } from '@scania/tegel/loader';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

reportWebVitals();
defineCustomElements();
```

```css
@import url('@scania/tegel/dist/tegel/tegel.css');
```

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

### Basic Navigation Tabs Structure

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/tabs/test/navigation-tabs/index.html

Example of the HTML structure for navigation tabs. Includes a list of tab items and their corresponding content.

```html
<nav class="nav-tabs">
  <ul class="nav-tabs__list">
    <li class="nav-tabs__item">
      <a href="#" class="nav-tabs__link">First tab</a>
    </li>
    <li class="nav-tabs__item">
      <a href="#" class="nav-tabs__link">Second tab is much longer</a>
    </li>
    <li class="nav-tabs__item">
      <a href="#" class="nav-tabs__link">Third tab</a>
    </li>
    <li class="nav-tabs__item">
      <a href="#" class="nav-tabs__link">Fourth tab</a>
    </li>
  </ul>
</nav>
```

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

### HTML Example: Sticky Position

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/utility/utility-classes/position.mdx

Demonstrates how to apply the 'tds-u-sticky' utility class to an HTML element to make it position: sticky.

```html
<div class="tds-u-sticky">
  <!-- Content -->
</div>
```

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

### Basic Margin Utility Class Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/utility/utility-classes/margin.mdx

Demonstrates how to apply a margin utility class to an element. This example sets the margin of the div to 0.

```html
<div class="tds-u-m0">
  <!-- Content -->
</div>
```

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

### Basic Multiselect Dropdown Options

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/dropdown/test/multiselect-filter/index.html

Example HTML structure for a multiselect dropdown with filter functionality. Options can be selected individually.

```html
<div class="t-dropdown t-dropdown--multiselect t-dropdown--filter">
  <button type="button" class="t-dropdown__button t-button t-button--secondary t-button--icon-arrow-down">
    Select options
  </button>
  <div class="t-dropdown__menu" hidden>
    <div class="t-dropdown__filter">
      <input type="text" class="t-input" placeholder="Filter...">
    </div>
    <ul class="t-dropdown__list">
      <li><label><input type="checkbox"> Option 1</label></li>
      <li><label><input type="checkbox"> Option 2</label></li>
      <li><label><input type="checkbox"> Option 3</label></li>
      <li><label><input type="checkbox"> Option 4</label></li>
    </ul>
  </div>
</div>
```

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

### TDS Tooltip Controlled Mode Example

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/tooltip/readme.md

Demonstrates the TDS Tooltip in controlled mode, using the `show` prop to manage visibility, while `selector` determines positioning.

```html
<button id="trigger-button" onClick="{() => showTooltip = !showTooltip}">Open Tooltip</button>
<tds-tooltip
    placement="bottom"
    selector="#trigger-button"
    trigger="hover"
    show="showTooltip"
  >
    <p class="tds-detail-05 tds-u-m0">
      Paragraph tag inside Tooltip
    </p>
  </tds-tooltip>
```

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

### Local Development Setup with npx link

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/README.dev.md

Use `npx link` to symlink the Tegel Lite package for local development. Create a `link.config.json` file in your app's root directory specifying the path to the Tegel Lite package.

```json
{
  "packages": ["../tegel/packages/tegel-lite"] // Make sure to add the correct path to the Tegel Lite package on your machine
}
```

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

### React with TypeScript Setup

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/README.md

Integrate Tegel components into a React application using TypeScript. This involves defining custom elements and importing the Tegel stylesheet.

```typescript
import { defineCustomElements, JSX as LocalJSX } from '@scania/tegel/loader';
import { DetailedHTMLProps, HTMLAttributes } from 'react';

type StencilProps<T> = {
  [P in keyof T]?: Omit<T[P], 'ref'> | HTMLAttributes<T>;
};

type ReactProps<T> = {
  [P in keyof T]?: DetailedHTMLProps<HTMLAttributes<T[P]>, T[P]>;
};

type StencilToReact<T = LocalJSX.IntrinsicElements, U = HTMLElementTagNameMap> = StencilProps<T> & 
  ReactProps<U>;

declare global {
  export namespace JSX {
    interface IntrinsicElements extends StencilToReact {}
  }
}

defineCustomElements(window);
```

```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './register-webcomponents';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

reportWebVitals();
```

```css
@import url('@scania/tegel/dist/tegel/tegel.css');
```

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

### Initialize Custom Elements

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/table/table/test/batch/index.html

Imports and initializes custom elements for the table component. This is a required setup step before using table functionalities.

```javascript
import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
defineCustomElements();
```

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

### Use Conventional Commit Script

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/docs/CREATING-COMPONENT.md

Utilize the provided npm script to guide you through formulating a correct commit message. This script asks a series of questions to help build the message.

```bash
npm run commit
```

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

### Vanilla JavaScript Theme Toggle

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/SystemSetup/light-dark-modes.mdx

Apply `tds-mode-light` or `tds-mode-dark` to the body element to theme the entire app. This example shows how to toggle between themes using a JavaScript function.

```html
<body class="tds-mode-light">
  <div id="app">
    <tds-button onclick="toggleTheme()" text="Toggle theme"></tds-button>
    <tds-banner text="Themed content here!"></tds-banner>
  </div>

  <script>
    function toggleTheme() {
      const body = document.body;
      if (body.classList.contains('tds-mode-light')) {
        body.classList.replace('tds-mode-light', 'tds-mode-dark');
      } else {
        body.classList.replace('tds-mode-dark', 'tds-mode-light');
      }
    }
  </script>
</body>
```

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

### Install Tegel Angular 17 Package

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/GettingStarted/angular-17.mdx

Install the `@scania/tegel-angular-17` package using npm. This is the recommended package for Angular 17 and above.

```bash
npm install @scania/tegel-angular-17
```

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

### Basic Usage of Align Utility Class

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/utility/utility-classes/align.mdx

Demonstrates how to apply the align-start utility class to an element.

```html
<div class="tds-u-align-start">
  <!-- Content -->
</div>
```

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

### TDS Tooltip Uncontrolled Mode Example

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/tooltip/readme.md

Shows an example of the TDS Tooltip in uncontrolled mode, where visibility is managed by the `trigger` and `selector` props.

```html
<button id="trigger-button">Open Popover</button>
<tds-tooltip
    placement="bottom"
    selector="#trigger-button"
    trigger="hover"
  >
    <p class="tds-detail-05 tds-u-m0">
      Paragraph tag inside Tooltip
    </p>
  </tds-tooltip>
```

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

### Table Toolbar with Start and End Slots

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/table/table-toolbar/readme.md

Utilize the 'start' and 'end' slots to place custom content at the beginning and end of the table toolbar, respectively. This allows for flexible layout customization.

```html
<tds-table-toolbar>
  <span slot="start">Start Content</span>
  <tds-button slot="end">Action</tds-button>
</tds-table-toolbar>
```

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

### Create Component Files

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/docs/CREATING-COMPONENT.md

Generate the necessary files for a new component, including its TypeScript, SCSS, and Storybook files. This sets up the basic structure for your component.

```bash
mkdir packages/core/src/components/button
touch packages/core/src/components/button/button.tsx
touch packages/core/src/components/button/button.scss
touch packages/core/src/components/button/button-vars.scss
touch packages/core/src/components/button/button.stories.tsx
```

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

### Basic Float Right Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/utility/utility-classes/float.mdx

Example of using the 'tds-u-float-right' class to float an element to the right.

```html
<div class="tds-u-float-right">
  <!-- Content -->
</div>
```

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

### Button Demo Layout

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/tests/tl-button/index.html

Sets up a horizontal layout for button demonstrations, including spacing between elements.

```css
.demo-wrapper { 
  display: flex; 
  flex-direction: row; 
  gap: 24px; 
}
```

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

### Cross-Scope Modifier Example

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/README.dev.md

When a modifier affects other parts of a component, apply it to the affected element's selector.

```scss
.tl-button__icon {
  .tl-button--primary & {
    fill: currentColor;
  }
}
```

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

### Self-Scoped Modifier Example

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/README.dev.md

Use '&--modifier' when the modifier affects the current scope (block or element).

```scss
.tl-button {
  &--primary {
    background-color: var(--primary);
  }
}

.tl-button__icon {
  &--small {
    font-size: 0.75rem;
  }
}
```

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

### Header Launcher List Item Dependency Graph

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/header/header-launcher-list-item/readme.md

Visualizes the dependency of the header launcher list item on the header dropdown list item. Built with Mermaid.

```mermaid
graph TD;
  tds-header-launcher-list-item --> tds-header-dropdown-list-item
  style tds-header-launcher-list-item fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Basic Closable Modal HTML

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/modal/test/closable/index.html

Example of a basic closable modal structure. Content within the modal can be anything.

```html
<gcds-modal modal-title="Modal title" open="">
  <p>Where you can put anything you want!</p>
  <p>Where you can put anything you want!</p>
</gcds-modal>
```

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

### Basic tl-icon Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/tegel-lite/components/tl-icon/readme.md

Demonstrates how to use the tl-icon component with basic and size modifiers. Ensure the necessary Tegel Lite CSS files are included.

```html
<span class="tl-icon tl-icon--check"></span>
<span class="tl-icon tl-icon--close tl-icon--24"></span>
```

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

### Warning Message HTML Structure

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/message/test/warning/index.html

Example HTML structure for displaying a warning message. It includes a slot for the message content.

```html
<gcds-message type="warning">
  Longer Message text can be placed here. Longer Message text can be placed here.
</gcds-message>
```

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

### Basic tl-link Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/tegel-lite/components/tl-link/readme.md

Demonstrates the basic HTML structure for a link with text and an icon. Ensure the necessary stylesheets are included.

```html
<a href="#" class="tl-link">
  Link text
  <span class="tl-link__icon">
    <span class="tl-icon tl-icon--arrow_right"></span>
  </span>
</a>
```

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

### New tds-navigation-tabs with Buttons

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/Migration/migration.mdx

Example of using the new tds-navigation-tabs component with button elements. The disabled attribute can be used to disable a tab.

```html
<tds-navigation-tabs>
  <tds-navigation-tab>
    <button>First tab</button>
  </tds-navigation-tab>
  <tds-navigation-tab>
    <button>Second tab</button>
  </tds-navigation-tab>
  <tds-navigation-tab>
    <button>Third tab</button>
  </tds-navigation-tab>
  <tds-navigation-tab disabled>
    <button>Fourth tab</button>
  </tds-navigation-tab>
</tds-navigation-tabs>
```

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

### Build Tegel Lite Package

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/README.dev.md

Run this command in the `packages/core` directory to compile Tegel Lite SCSS files and generate CSS output in `packages/tegel-lite/dist/`.

```bash
npm run build:tegel-lite
```

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

### New tds-inline-tabs with Buttons

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/Migration/migration.mdx

Example of using the new tds-inline-tabs component with button elements. The disabled attribute can be used to disable a tab.

```html
<tds-inline-tabs>
  <tds-inline-tab>
    <button>First tab</button>
  </tds-inline-tab>
  <tds-inline-tab>
    <button>Second tab</button>
  </tds-inline-tab>
  <tds-inline-tab>
    <button>Third tab</button>
  </tds-inline-tab>
  <tds-inline-tab disabled>
    <button>Fourth tab</button>
  </tds-inline-tab>
</tds-inline-tabs>
```

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

### Run Default Asset Copying

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/static-assets-copying.md

Execute the script to copy Tegel assets to the default `./public/assets` directory.

```bash
npx copy-assets
```

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

### Basic Modal Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/modal/test/closable-false/index.html

Demonstrates the basic structure of a Tegel modal. Content within the modal can be anything, as shown here.

```html
<teg-modal>
  Where you can put anything you want!
</teg-modal>
```

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

### Storybook Story for Tegel Lite Component

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/README.dev.md

Example of a Storybook story file for a new component, defining controls and a template for rendering the component.

```tsx
import formatHtmlPreview from '../../../stories/formatHtmlPreview';

export default {
  title: 'Tegel Lite (CSS)/Alert',
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    variant: {
      name: 'Variant',
      description: 'Visual variant of the alert',
      control: {
        type: 'radio',
      },
      options: ['info', 'success', 'error'],
      table: {
        defaultValue: { summary: 'info' },
      },
    },
    message: {
      name: 'Message',
      description: 'Text content of the alert',
      control: 'text',
      table: {
        defaultValue: { summary: 'Hello World' },
      },
    },
  },
  args: {
    variant: 'info',
    message: 'Hello World',
  },
};

const Template = ({ variant, message }) =>
  formatHtmlPreview(`
      <!-- Required stylesheet 
    "@scania/tegel-lite/tl-alert.css"
  -->

    <span class="tl-alert tl-alert--${variant}">${message}</span>
  `);

export const Default = Template.bind({});

```

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

### Run Asset Copying with Windows Path Separators

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/static-assets-copying.md

On Windows, use backward slashes for specifying custom asset paths if forward slashes cause issues.

```bash
npx copy-assets custom\assets\path
```

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

### Import Specific Tegel Lite Components (Tree-shaking)

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/README.md

Import only the required CSS files for specific components to enable tree-shaking and reduce bundle size. Ensure the correct import order.

```javascript
import '@scania/tegel-lite/scania-variables.css'; // or traton-variables.css
import '@scania/tegel-lite/global.css'; // Component tokens (required)
import '@scania/tegel-lite/tl-button.css';
import '@scania/tegel-lite/tl-card.css';
import '@scania/tegel-lite/tl-message.css';
```

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

### New tds-navigation-tabs with Links

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/Migration/migration.mdx

Example of using the new tds-navigation-tabs component with anchor (link) elements. The disabled attribute can be used to disable a tab.

```html
<tds-navigation-tabs>
  <tds-navigation-tab>
    <a href="#">First tab</a>
  </tds-navigation-tab>
  <tds-navigation-tab>
    <a href="#">Second tab</a>
  </tds-navigation-tab>
  <tds-navigation-tab>
    <a href="#">Third tab</a>
  </tds-navigation-tab>
  <tds-navigation-tab disabled>
    <a href="#">Fourth tab</a>
  </tds-navigation-tab>
</tds-navigation-tabs>
```

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

### New tds-inline-tabs with Links

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/Migration/migration.mdx

Example of using the new tds-inline-tabs component with anchor (link) elements. The disabled attribute can be used to disable a tab.

```html
<tds-inline-tabs>
  <tds-inline-tab>
    <a href="#">First tab</a>
  </tds-inline-tab>
  <tds-inline-tab>
    <a href="#">Second tab</a>
  </tds-inline-tab>
  <tds-inline-tab>
    <a href="#">Third tab</a>
  </tds-inline-tab>
  <tds-inline-tab disabled>
    <a href="#">Fourth tab</a>
  </tds-inline-tab>
</tds-inline-tabs>
```

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

### Run Project Tests

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/docs/CREATING-COMPONENT.md

Execute all project tests, including unit and integration tests, to ensure your code adheres to standards and functions correctly. This is a crucial step before committing changes.

```bash
npm run test
```

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

### Use Linked Tegel Core Instance in Project

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/docs/CONTRIBUTING.md

In your project's directory, run this command to link the globally linked Tegel core package. This makes your local Tegel build available in the project without publishing it.

```bash
npm link "@scania/tegel"
```

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

### Replace affix with expand-icon-position in Accordion

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/Migration/migration.mdx

Update the Accordion component by replacing the 'affix' attribute with 'expand-icon-position'. Use 'start' for the prefix position and remove 'suffix'.

```html
// Old ❌
<sdds-accordion>
  <sdds-accordion-item header="Lorem ipsum" affix="prefix" tabindex="0">
    // ...
  </sdds-accordion-item>
</sdds-accordion>

// New ✅
<tds-accordion>
  <tds-accordion-item header="Lorem ipsum" expand-icon-position="start" tabindex="0">
    // ...
  </tds-accordion-item>
</tds-accordion>
```

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

### Registering New Component SCSS

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/README.dev.md

Import the new component's SCSS file into 'global/tegel-lite-components.scss' to include it in the build and Storybook.

```scss
@import '../tegel-lite/components/tl-alert/tl-alert';
```

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

### Breadcrumbs Variant Wrapper

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/tests/tl-breadcrumbs/index.html

Illustrates a wrapper for displaying breadcrumb variants with specific layout properties. This helps in organizing and styling multiple breadcrumb examples.

```css
.variant-wrapper {
  display: flex;
  width: 380px;
  flex-direction: column;
  gap: 12px;
}
```

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

### Dropdown Option Events

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/dropdown/dropdown-option/readme.md

Illustrates how to listen for events emitted by the dropdown option, such as selection, focus, and blur.

```html
<tds-dropdown-option value="option-1" on-tds-select="handleSelect" on-tds-focus="handleFocus" on-tds-blur="handleBlur">
  Option 1
</tds-dropdown-option>

<script>
  const handleSelect = (event) => {
    console.log('Option selected:', event.detail.value, 'Selected state:', event.detail.selected);
  };

  const handleFocus = (event) => {
    console.log('Option focused:', event.target.value);
  };

  const handleBlur = (event) => {
    console.log('Option blurred:', event.target.value);
  };
</script>
```

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

### New tds-folder-tabs with Buttons

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/Migration/migration.mdx

Example of using the new tds-folder-tabs component with button elements. The selected and disabled attributes can be used to control tab state.

```html
<tds-folder-tabs>
  <tds-folder-tab>
    <button>First tab</button>
  </tds-folder-tab>
  <tds-folder-tab>
    <button>Second tab</button>
  </tds-folder-tab>
  <tds-folder-tab selected>
    <button>Third tab</button>
  </tds-folder-tab>
  <tds-folder-tab disabled>
    <button>Fourth tab</button>
  </tds-folder-tab>
</tds-folder-tabs>
```

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

### HTML Example: Hiding an Element

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/utility/utility-classes/visibility.mdx

Demonstrates how to use the `tds-u-visibility-hidden` class to hide an HTML element. The element will not be visible but will still occupy space in the layout.

```html
<div class="tds-u-visibility-hidden">
  <!-- Content -->
</div>
```

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

### Basic tl-stepper Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/tegel-lite/components/tl-stepper/readme.md

Demonstrates the basic structure of a horizontal stepper with labels below the indicators. Shows how to mark steps as success, current, and upcoming.

```html
<div class="tl-stepper tl-stepper--horizontal tl-stepper--label-below tl-stepper--lg">
  <ol class="tl-stepper__list">
    <li class="tl-stepper__step tl-stepper__step--success">
      <div class="tl-stepper__node"></div>
      <div class="tl-stepper__label">Step 1</div>
    </li>
    <li class="tl-stepper__step tl-stepper__step--current">
      <div class="tl-stepper__node">2</div>
      <div class="tl-stepper__label">Step 2</div>
    </li>
    <li class="tl-stepper__step tl-stepper__step--upcoming">
      <div class="tl-stepper__node">3</div>
      <div class="tl-stepper__label">Step 3</div>
    </li>
  </ol>
</div>
```

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

### TDS Message Component with Error Variant

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/message/readme.md

Example of using the TDS Message component to display an error. The 'error' variant is used for critical issues.

```html
<tds-message variant="error">
  An error occurred. Please try again.
</tds-message>
```

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

### Table Input Wrapper Dependencies

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/table/table-body-input-wrapper/readme.md

Illustrates the dependency of the table input wrapper on the icon component.

```mermaid
graph TD;
  tds-table-body-input-wrapper --> tds-icon
  style tds-table-body-input-wrapper fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Basic tl-datetime Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/tegel-lite/components/tl-datetime/readme.md

Demonstrates the fundamental structure for a date input using the tl-datetime component. Ensure the necessary stylesheets are included for correct styling.

```html
<div class="tl-datetime tl-datetime--lg">
  <label class="tl-datetime__label">Select date</label>
  <div class="tl-datetime__wrapper">
    <input class="tl-datetime__input" type="date" />
  </div>
  <div class="tl-datetime__helper">Helper text</div>
</div>
```

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

### TDS Message Component Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/message/readme.md

Example of how to use the TDS Message component with a header and custom variant. Ensure the tds-icon component is available as it's a dependency.

```html
<tds-message header="Important message" variant="warning">
  This is an important message that requires your attention.
</tds-message>
```

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

### Datetime with Label and Helper Text

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/tegel-lite/tests/tl-datetime/index.html

Demonstrates a standard datetime input with a label and helper text. This is a common configuration for user input fields.

```html
<label class="tds-label" for="datetime-input-1">Label text</label>
<tl-datetime id="datetime-input-1"></tl-datetime>
<div class="tds-helper-text">Helper text</div>
```

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

### Basic tl-block Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/tegel-lite/components/tl-block/readme.md

Demonstrates the fundamental structure of a tl-block component with a title and paragraph content.

```html
<div class="tl-block tl-block--primary">
  <section>
    <h2>Block Title</h2>
    <p>Block content goes here.</p>
  </section>
</div>
```

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

### Import All Tegel Lite Components

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/GettingStarted/tegel-lite.mdx

Import all necessary CSS files for Tegel Lite components. This includes brand variables, global component tokens, and all component styles. Recommended for most applications.

```javascript
import '@scania/tegel-lite/scania-variables.css'; // or traton-variables.css
import '@scania/tegel-lite/global.css'; // Component tokens (required)
import '@scania/tegel-lite/components.css'; // All component styles
```

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

### Controlled Popover Menu Visibility

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/popover-menu/readme.md

Demonstrates controlling the popover menu's visibility using the `show` prop in HTML.

```html
<button id="trigger" onClick="{() => showPopover = !showPopover}">Open Popover</button>
<tds-popover-menu id="popover" selector="#trigger" show="showPopover">
  <tds-popover-menu-item>
    <a href="#">Action</a>
  </tds-popover-menu-item>
</tds-popover-menu>
```

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

### New tds-folder-tabs with Links

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/Migration/migration.mdx

Example of using the new tds-folder-tabs component with anchor (link) elements. The link-href, selected, and disabled attributes can be used to control tab state.

```html
<tds-folder-tabs>
  <tds-folder-tab link-href="#">
    <a href="#">First tab</a>
  </tds-folder-tab>
  <tds-folder-tab link-href="#">
    <a href="#">Second tab</a>
  </tds-folder-tab>
  <tds-folder-tab>
    <a href="#">Third tab</a>
  </tds-folder-tab>
  <tds-folder-tab disabled>
    <a href="#">Fourth tab</a>
  </tds-folder-tab>
</tds-folder-tabs>
```

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

### Tegel Lite Button Usage

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/stories/GettingStarted/tegel-lite.mdx

Example of a Tegel Lite button using BEM naming conventions. Apply appropriate modifier classes for primary action and size.

```html
<button class="tl-button tl-button--primary tl-button--md">
  <span class="tl-button__label">Click me!</span>
</button>
```

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

### Build All Tegel Packages

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/docs/CONTRIBUTING.md

Build the core Tegel package and all supported packages (Angular, Angular 17, React). Run this command from the root of the Tegel monorepo.

```bash
npm run build-all
```

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

### TDS Message Component with Mode Variant

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/message/readme.md

Example of applying a 'secondary' mode variant to the TDS Message component. This allows for theming based on different application modes.

```html
<tds-message mode-variant="secondary">
  This message uses the secondary mode variant.
</tds-message>
```

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

### TDS Message Component with Success Variant

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/message/readme.md

Example of using the TDS Message component to display a success message. The 'success' variant is used to confirm successful operations.

```html
<tds-message variant="success">
  Operation completed successfully.
</tds-message>
```

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

### Header Launcher List Dependency Graph

Source: https://github.com/scania-digital-design-system/tegel/blob/develop/packages/core/src/components/header/header-launcher-list/readme.md

Visualizes the dependency of the tds-header-launcher-list component on the tds-header-dropdown-list component.

```mermaid
graph TD;
  tds-header-launcher-list --> tds-header-dropdown-list
  style tds-header-launcher-list fill:#f9f,stroke:#333,stroke-width:4px
```