### Install Project Dependencies

Source: https://github.com/telekom/scale/blob/main/examples/telekom-header-samples/application-name/README.md

Installs all necessary dependencies for the project. Run this after cloning the repository.

```bash
npm install
```

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

### Install with NPM

Source: https://github.com/telekom/scale/blob/main/packages/design-tokens/README.md

Install the Scale component library using NPM. This is the recommended method for most projects.

```bash
npm install @telekom/scale-components
```

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

### Start Development Server

Source: https://github.com/telekom/scale/blob/main/examples/nuxt3-boilerplate/README.md

Starts the Nuxt 3 development server, typically accessible at http://localhost:3000.

```bash
npm run dev
```

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

### Start Development Server

Source: https://github.com/telekom/scale/blob/main/examples/telekom-header-samples/application-name/README.md

Starts a local development server with hot-reloading enabled. This command is used for active development.

```bash
npm run start
```

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

### Setup Scale Components with Plain HTML

Source: https://github.com/telekom/scale/blob/main/README.md

Include the Scale components CSS and JavaScript files in your HTML for basic setup. This method is suitable for projects not using a bundler.

```html
<link
  rel="stylesheet"
  href="node_modules/@telekom/scale-components-neutral/dist/scale-components/scale-components.css"
/>
<script
  type="module"
  src="node_modules/@telekom/scale-components-neutral/dist/scale-components/scale-components.esm.js"
></script>
```

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

### Install Dependencies

Source: https://github.com/telekom/scale/blob/main/examples/nuxt3-boilerplate/README.md

Installs project dependencies using yarn, npm, or pnpm.

```bash
# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist
```

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

### Start Gatsby Development Server

Source: https://github.com/telekom/scale/blob/main/examples/gatsby-ssr/README.md

Navigate into your new site's directory and start the development server. This command allows you to see your site in the browser and hot-reloads changes.

```shell
cd my-default-starter/
gatsby develop
```

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

### ScaleChip Interactive Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/chip/Chip.stories.mdx

Interactive example demonstrating dynamic chip dismissal and selection management. Chips are dismissable and selection is managed externally.

```javascript
export const TemplateInteractive = (args, { argTypes }) => ({
  components: { ScaleChip },
  template: `
  <div>
    <div style="height: 20px;">Dismisable options:</div>
      <ul aria-label="selection" style="display: flex; list-style: none; padding: 0;">
        <li v-for="chipLabel in labels" :key="chipLabel" style="margin-right: 4px;">
          <ScaleChip
            type="dynamic"
            :label="chipLabel"
            :selected="selectedChip === chipLabel"
            @scale-close="removeChip(chipLabel)"
          >
            {{chipLabel}}
          </ScaleChip>
        </li>
       
      </ul>   
    </div>
  `,
  methods: {
    removeChip(label) {
      
      action('scale-close')(label);
      this.labels = this.labels.filter(l => l !== label);
      this.selectedChip = this.labels[0];
      this.$nextTick(() => {
        const firstChip = this.$el.querySelector('ul > li > scale-chip');
        if (firstChip && firstChip.shadowRoot) {
          const button = firstChip.shadowRoot.querySelector('span > button');
          if (button) button.focus();
        }
      });
    },
  },
  data: () => ({
    labels: ['option 1', 'option 2', 'option 3', 'option 4'],
    selectedChip: 'option 1'
  }),
});
```

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

### Install with NPM

Source: https://github.com/telekom/scale/blob/main/README.md

Install the latest version of the Scale component library using NPM. For versions prior to dark mode support, omit the '@next' tag.

```bash
npm install @telekom/scale-components@next
```

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

### Install Neutral Components with NPM

Source: https://github.com/telekom/scale/blob/main/packages/design-tokens/README.md

Install the neutral components package using NPM to begin customizing Scale for open source use.

```bash
npm install @telekom/scale-components-neutral
```

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

### Link Component Setup

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/link/Link.stories.mdx

This snippet shows the basic setup for the Link component within Storybook, including Meta information and the template function for rendering.

```javascript
import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs';
import ScaleLink from './ScaleLink.vue';

<Meta
  title="Components/Link"
  component={ScaleLink}
  argTypes={{
    label: {
      control: { type: 'text' },
    },
    omitUnderline: {
      type: 'boolean',
    },
    withIcon: {
      control: { type: 'boolean' },
    },
    iconPosition: {
      options: ['after', 'before'],
      control: { type: 'radio' },
    },
    download: {
      type: 'boolean',
    },
    href: {
      control: { type: 'text' },
    },
    hreflang: {
      type: 'string',
    },
    ping: {
      type: 'string',
    },
    referrerpolicy: {
      type: 'string',
    },
    rel: {
      type: 'string',
    },
    target: {
      type: 'string',
    },
    type: {
      type: 'string',
    },
    styles: {
      control: { disable: true },
    },
  }}
/>

export const Template = (args) => ({
  props: {
    label: String,
    ...ScaleLink.props,
  },
  template: `
    <scale-link
      :href="href"
      :disabled="disabled"
      :styles="styles"
      :omit-underline="omitUnderline"
      :icon-position="iconPosition"
      :download="download"
      :hreflang="hreflang"
      :referrerpolicy="referrerpolicy"
      :rel="rel"
      :target="target"
      :type="type"
      :inner-tabindex="innerTabindex"
      :withIcon="withIcon"
    >
      {{ label }}
      <scale-icon-navigation-external-link
        v-if="withIcon"
        size="16"
        slot="icon"
        accessibility-title="open link in new tab"
      ></scale-icon-navigation-external-link>
    </scale-link>
    `,
});

```

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

### Toast Stack Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/notification/Notification.stories.mdx

Demonstrates how to stack multiple toast notifications using a container with the `.scl-toast-stack` class. This example includes dynamic creation of toasts with customizable delay and variants.

```html
<div class="scl-toast-stack">
  <scale-notification
    heading="Informational toast headline"
    type="toast"
    dismissible
    delay="10000"
    opened
  >
    <span slot="text">Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.</span>
  </scale-notification>
</div>
```

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

### Basic Combobox Setup

Source: https://github.com/telekom/scale/blob/main/packages/components/src/html/combobox.html

Sets up a basic combobox with a list of framework options and logs the selected value on change.

```javascript
const frameworks = [
  'React',
  'Vue',
  'Angular',
  'Svelte',
  'Ember',
  'Next.js',
  'Nuxt',
  'Gatsby',
];
const basicCombobox = document.getElementById('basic-combobox');
basicCombobox.options = frameworks;
basicCombobox.addEventListener('scaleChange', (e) => {
  console.log('Basic combobox changed:', e.detail.value);
});
```

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

### Start Development Mode

Source: https://github.com/telekom/scale/blob/main/packages/components/README.md

Launches the project in development mode, enabling live reloading and other development-specific features.

```bash
yarn start
```

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

### Basic Callout Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/callout/Callout.stories.mdx

A basic example of the scale-callout component with black variant. Use this for general information display.

```html
<scale-callout variant="black">
  <span>Up to 200 &#8364;</span>
  <span>Exchange premium +
  </span>
  <span>receive old appliance</span>
  <span>value *</span>
</scale-callout>
```

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

### Install Neutral Scale Components with NPM

Source: https://github.com/telekom/scale/blob/main/README.md

Use this command to install the latest neutral theme components for Scale. For versions prior to dark mode support, omit the '@next' tag.

```bash
npm install @telekom/scale-components-neutral@next
```

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

### Profile Menu Logged In Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx

Demonstrates the configuration of the profile menu for a logged-in user with various service links and user information. This example is typically used within a Storybook canvas.

```javascript
import { html } from "lit-html";

const TemplateProfileMenu = (args) => html`
  <scale-telekom-header>
    <scale-telekom-nav-list variant="functions" slot="functions" alignment="right" aria-label="Functions Menu" role="none">
      <scale-telekom-profile-menu
        login-settings-url="${args.loginSettingsUrl}"
        hide-login-settings="${args.hideLoginSettings}"
        logout-url="${args.logoutUrl}"
        logged-in="${args.loggedIn}"
        app-name="${args.appName}"
        label="${args.label}"
        accessibilityLabel="${args.accessibilityLabel}"
        close-menu-accessibility-label="${args.closeMenuAccessibilityLabel}"
        login-settings-label="${args.loginSettingsLabel}"
        logout-label="${args.logoutLabel}"
        .userInfo="${args.userInfo}"
        .serviceLinks="${args.serviceLinks}"
      ></scale-telekom-profile-menu>
    </scale-telekom-nav-list>
  </scale-telekom-header>
`;

export const ProfileMenuStory = TemplateProfileMenu.bind({});
ProfileMenuStory.args = {
  loginSettingsUrl: "https://www.telekom.de/todo/loginSettings",
  hideLoginSettings: false,
  logoutUrl: "https://www.telekom.de/todo/logout",
  loggedIn: true,
  appName: "Application",
  label: "Alexander",
  accessibilityLabel: "open user menu: Alexander",
  closeMenuAccessibilityLabel: "close menu",
  loginSettingsLabel: "Login Settings",
  logoutLabel: "Log out",   
  userInfo: JSON.stringify({
    name: 'Alexander Dreyer',
    email: 'alexander.dreyer@t-online.de',
  }),
  serviceLinks: JSON.stringify([
    {
      name: 'My Account',
      href: 'https://www.telekom.de/mein-kundencenter',
      icon: 't-product-measure-internet-speed',
    },
    {
      name: 'E-Mail Center',
      href: 'https://www.telekom.de/e-mail/e-mail-center',
      icon: 'communication-mail-opened',
    },
    {
      name: 'MagentaTV',
      href: 'https://web.magentatv.de/EPG/',
      icon: 't-product-magenta-tv',
    },
    {
      name: 'MagentaSport',
      href: 'https://www.magentasport.de',
      icon: 't-product-telekom-1t1',
    },
    {
      name: 'MagentaCLOUD',
      href: 'https://magentacloud.de',
      icon: 'action-upload-to-cloud',
    },
    {
      name: 'MagentaHome Web',
      href: 'https://cockpit.telekom.net',
      icon: 'home-smarthome',
    }
  ])
};

```

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

### Interactive Progress Bar Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx

Provides an interactive example of the ScaleProgressBar component, allowing users to trigger success or failure states and observe progress. This is useful for testing dynamic behavior.

```javascript
export const TemplateInteractive = (args, { argTypes }) => ({
  components: { ScaleProgressBar },
  template:
      `<div>
          <scale-progress-bar
            label="Download progress example"
            :custom-color="$data[$data.state].customColor"
            :has-error="$data[$data.state].hasError"
            :status-description="$data[$data.state].statusDescription"
            :show-status="$data[$data.state].showStatus"
            :percentage="$data.percentage"
          >
          </scale-progress-bar>
          <br/>
          <scale-button variant="secondary" size="small" @click="startSuccess">Start Success</scale-button>
          <scale-button variant="secondary" size="small" @click="startFailure">Start Failure</scale-button>
          <scale-button variant="secondary" size="small" @click="reset">Reset</scale-button>
      </div>`,
  methods: {
    startSuccess() {
      this.reset();
      this.start('success');
    },
    startFailure() {
      this.reset();
      this.start('failure');
    },
    start(outcome) {
      const max = outcome === 'success' ? 100 : 42
      this.interval = setInterval(() => {
        if (this.$data.percentage === max) {
          clearInterval(this.interval);
          this.$data.state = outcome;
          this.interval = null;
          return;
        }
        this.$data.percentage += 1;
      }, 40);
    },
    reset() {
      clearInterval(this.interval);
      this.interval = null;
      this.$data.state = 'initial';
      this.$data.percentage = 0;
    },
  },
  data: () => ({
    interval: null,
    success: {
      statusDescription: 'Upload complete',
    },
    failure: {
      hasError: true,
      statusDescription: 'Upload failed',
    },
    initial: {
      showStatus: true,
    },
    percentage: 0,
    state: 'initial',
    busy: false,
  }),
});
```

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

### Standard Dropdown Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/dropdown/DropDown.stories.mdx

Demonstrates the basic structure of a dropdown component with options. Includes a pre-selected item.

```html
<scale-dropdown label="select">
  <option value="1">item 1</option>
  <option value="2" selected>item 2</option>
  <option value="3">item 3</option>
</scale-dropdown>
```

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

### Standard Link Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/link/Link.stories.mdx

Demonstrates a standard link with a label and href. This is the default configuration for the Link component.

```html
<scale-link href="#top">A link</scale-link>
```

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

### Install Scale React Proxy Package

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_en.md

Install the dedicated React proxy package for Scale components. This package provides React-specific wrappers for easier integration.

```bash
npm install @telekom/scale-components-react@next
```

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

### Menu Direction Examples

Source: https://github.com/telekom/scale/blob/main/packages/components/src/html/menu.html

Demonstrates how the menu can be positioned in different directions relative to its trigger.

```html
<div class="menu-example" id="direction-example">
  <scale-menu>
    <scale-button slot="trigger" variant="subtle" icon="menu-dots"></scale-button>
    <scale-menu-item>Right</scale-menu-item>
    <scale-menu-item>I'm Over Here</scale-menu-item>
    <scale-menu-item>Yes</scale-menu-item>
    <scale-menu-item>Me Too</scale-menu-item>
    <scale-menu-item>Me Three</scale-menu-item>
    <scale-menu-item>Top Right</scale-menu-item>
    <scale-menu-item>I'm Over Here</scale-menu-item>
    <scale-menu-item>Yes</scale-menu-item>
    <scale-menu-item>Me Too</scale-menu-item>
    <scale-menu-item>Me Three</scale-menu-item>
    <scale-menu-item>Bottom Right</scale-menu-item>
    <scale-menu-item>I'm Over Here</scale-menu-item>
    <scale-menu-item>Yes</scale-menu-item>
    <scale-menu-item>Me Too</scale-menu-item>
    <scale-menu-item>Me Three</scale-menu-item>
    <scale-menu-item>Bottom Left</scale-menu-item>
    <scale-menu-item>I'm Over Here</scale-menu-item>
    <scale-menu-item>Yes</scale-menu-item>
    <scale-menu-item>Me Too</scale-menu-item>
    <scale-menu-item>Me Three</scale-menu-item>
    <scale-menu-item>Top Left</scale-menu-item>
    <scale-menu-item>I'm Over Here</scale-menu-item>
    <scale-menu-item>Yes</scale-menu-item>
    <scale-menu-item>Me Too</scale-menu-item>
    <scale-menu-item>Me Three</scale-menu-item>
    <scale-menu-item>Left</scale-menu-item>
    <scale-menu-item>I'm Over Here</scale-menu-item>
    <scale-menu-item>Yes</scale-menu-item>
    <scale-menu-item>Me Too</scale-menu-item>
    <scale-menu-item>Me Three</scale-menu-item>
  </scale-menu>
</div>
```

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

### Tooltip Trigger Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx

Demonstrates how to trigger a tooltip using the 'focus' event. This is useful for accessibility.

```html
<scale-tooltip content="Tooltip" trigger="focus">
  <scale-button>Focus me</scale-button>
</scale-tooltip>
```

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

### Cascading Menu Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/flyout-menu/MenuFlyout.stories.mdx

Demonstrates a complex cascading menu structure with nested submenus, items with prefixes and suffixes, and dividers. This example shows how to integrate the menu flyout with a button trigger and handle various menu interactions.

```html
<scale-menu-flyout>
  <scale-button slot="trigger" variant="secondary" icon-only>
    <scale-icon-action-filter
      accessibility-title="Open menu"
    ></scale-icon-action-filter>
  </scale-button>
  <scale-menu-flyout-list>
    <scale-menu-flyout-item>Item Title</scale-menu-flyout-item>
    <scale-menu-flyout-item
      >Really Quite Long Item Title</scale-menu-flyout-item
    >
    <scale-menu-flyout-divider></scale-menu-flyout-divider>
    <scale-menu-flyout-item
      >Item With Suffix 1<span slot="suffix">⌘F</span></scale-menu-flyout-item
    >
    <scale-menu-flyout-item
      >Item With Suffix 2<span slot="suffix">⌘H</span></scale-menu-flyout-item
    >
    <scale-menu-flyout-divider></scale-menu-flyout-divider>
    <scale-menu-flyout-item>
      Other Options
      <scale-menu-flyout-list slot="sublist">
        <scale-menu-flyout-item>
          <scale-icon-action-cut-paste
            slot="prefix"
          ></scale-icon-action-cut-paste
          >Item With Prefix 1
        </scale-menu-flyout-item>
        <scale-menu-flyout-item>
          <scale-icon-action-loop slot="prefix"></scale-icon-action-loop>Item
          With Prefix 2
          <scale-menu-flyout-list slot="sublist">
            <scale-menu-flyout-item>Third Level Item 1</scale-menu-flyout-item>
            <scale-menu-flyout-item>Third Level Item 2</scale-menu-flyout-item>
            <scale-menu-flyout-item>Third Level Item 3</scale-menu-flyout-item>
          </scale-menu-flyout-list>
        </scale-menu-flyout-item>
        <scale-menu-flyout-item>
          <scale-icon-action-more slot="prefix"></scale-icon-action-more>Item
          With Prefix 3
        </scale-menu-flyout-item>
      </scale-menu-flyout-list>
    </scale-menu-flyout-item>
  </scale-menu-flyout-list>
</scale-menu-flyout>
```

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

### Standard Notification Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/notification/Notification.stories.mdx

Demonstrates how to render a standard notification with a heading, dismissible option, and content slot.

```html
<scale-notification
  heading="Success notification with icon, title, copytext and close"
  dismissible
  opened
>
  <span slot="text">Lorem ipsum dolor sit amet, consetetur tempordede invidunt ut labore et dolore.</span>
</scale-notification>
```

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

### Disabled Link Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/link/Link.stories.mdx

Shows how to render a link in a disabled state. Disabled links are not interactive.

```html
<scale-link disabled href="#top">A link, disabled</scale-link>
```

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

### Pagination Component Setup

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/pagination/Pagination.stories.mdx

Sets up the ScalePagination component with its props for use in Storybook. This template allows for dynamic prop configuration.

```javascript
import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs';
import ScalePagination from './ScalePagination.vue';

<Meta
  title="Components/Pagination"
  component={ScalePagination}
  argTypes={{
    hideBorders: {
      table: {
        type: { summary: 'Boolean' },
        defaultValue: { summary: false },
      },
      description: `(optional) Deprecated; hideBorder should replace hideBorders`,
      control: { type: 'boolean' },
    },
    hideBorder: {
      table: {
        type: { summary: 'Boolean' },
        defaultValue: { summary: false },
      },
      description: `(optional) Set to true to hide top and bottom borders`,
      control: { type: 'boolean' },
    },
    pageSize: {
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: 10 },
      },
      description: `(optional) Set number of rows/elements to show per page`,
      control: { type: null },
    },
    startElement: {
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: 0 },
      },
      description: `(optional) Index of first element to display`,
      control: { type: null },
    },
    totalElements: {
      table: {
        type: { summary: 'number' },
        defaultValue: { summary: 1 },
      },
      description: `(optional) Total number of rows/elements used to calculate page displays`,
      control: { type: null },
    },
    styles: {
      table: {
        type: { summary: 'string' },
      },
      description: `(optional) Injected styles`,
      control: { type: null },
    },
    small: {
      table: {
        type: { summary: 'boolean' },
      },
      description: `(optional) DEPRECATED - css overwrite should replace small`,
      control: { type: null },
    },
    size: {
      table: {
        type: { summary: 'string' },
      },
      description: `(optional) DEPRECATED -  css overwrite should replace size`,
      control: { type: null },
    },
    ariaLabelFirstPage: {
      table: {
        type: { summary: 'string' },
      },
      description: `(optional) translation to 'Go to first page'`,
      control: { type: null },
    },
    ariaLabelNextPage: {
      table: {
        type: { summary: 'string' },
      },
      description: `(optional) translation to 'Go to next page'`,
      control: { type: null },
    },
    ariaLabelPreviousPage: {
      table: {
        type: { summary: 'string' },
      },
      description: `(optional) translation to 'Go to previous page'`,
      control: { type: null },
    },
    ariaLabelLastPage: {
      table: {
        type: { summary: 'string' },
      },
      description: `(optional) translation to 'Go to last page'`,
      control: { type: null },
    },
  }}
/>

export const Template = (args, { argTypes }) => ({
  components: { ScalePagination },
  props: {
    ...ScalePagination.props,
  },
  template: `
    <scale-pagination
    :hide-borders="hideBorders"
    :hide-border="hideBorder"
    :page-size="pageSize"
    :start-element="startElement"
    :total-elements="totalElements"
    :aria-label-first-page="ariaLabelFirstPage"
    :aria-label-last-page="ariaLabelLastPage"
    :aria-label-previous-page="ariaLabelPreviousPage"
    :aria-label-next-page="ariaLabelNextPage"
    :styles="styles"
  >
  </scale-pagination>
        `,
});
```

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

### Cascading Menu Example

Source: https://github.com/telekom/scale/blob/main/packages/components/src/html/menu.html

Demonstrates a menu with sub-menus (cascading menus). Use nested `scale-menu-item` elements to create sub-menus.

```html
<div class="menu-example" id="cascading-menu-example">
  <scale-menu>
    <scale-button slot="trigger" variant="subtle" icon="menu-dots"></scale-button>
    <scale-menu-item>Item 1</scale-menu-item>
    <scale-menu-item>
      More Options
      <scale-menu slot="submenu">
        <scale-menu-item>Option 1</scale-menu-item>
        <scale-menu-item>Option 2</scale-menu-item>
        <scale-menu-item>
          Option 3
          <scale-menu slot="submenu">
            <scale-menu-item>Very Specific Options</scale-menu-item>
            <scale-menu-item>Option 1</scale-menu-item>
            <scale-menu-item>Option 2</scale-menu-item>
            <scale-menu-item>Option 3</scale-menu-item>
          </scale-menu>
        </scale-menu>
      </scale-menu>
    </scale-menu-item>
    <scale-menu-item>Toggle Visibility</scale-menu-item>
    <scale-menu-item>
      Column 1
      <scale-menu slot="submenu">
        <scale-menu-item>Column 2</scale-menu-item>
        <scale-menu-item>Column 3</scale-menu-item>
        <scale-menu-item>Column 4</scale-menu-item>
        <scale-menu-item>Column 5</scale-menu-item>
      </scale-menu>
    </scale-menu-item>
    <scale-menu-item>Item 5 <span slot="suffix">⌘Space</span></scale-menu-item>
  </scale-menu>
</div>
```

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

### Tooltip Component Setup

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx

Defines the Storybook metadata and component properties for the Scale Tooltip. Includes controls for content, placement, and other behaviors.

```javascript
import {
  Meta,
  Story,
  ArgsTable,
  Canvas,
  Description,
} from '@storybook/addon-docs';
import ScaleTooltip from './ScaleTooltip.vue';

<Meta
  title="Components/Tooltip"
  component={ScaleTooltip}
  argTypes={{
    content: {
      control: { type: 'text' },
    },
    placement: {
      control: {
        defaultValue: 'top',
        type: 'select',
        options': [
          'top',
          'top-start',
          'top-end',
          'right',
          'right-start',
          'right-end',
          'bottom',
          'bottom-start',
          'bottom-end',
          'left',
          'left-start',
          'left-end',
        ],
      },
    },
    disabled: {
      defaultValue: false,
      control: { type: 'boolean' },
    },
    distance: {
      control: { type: 'text' },
    },
    opened: {
      defaultValue: false,
      control: { type: 'boolean' },
    },
    trigger: {
      defaultValue: 'hover focus',
      control: { type: 'text' },
    },
    flip: {
      defaultValue: true,
      control: { type: 'boolean' },
    },
  }}
/>

export const Template = (args, { argTypes }) => ({
  components: { ScaleTooltip },
  props: {
    ...ScaleTooltip.props,
  },
  template: `
    <scale-tooltip
      :content="content"
      :placement="placement"
      :disabled="disabled"
      :distance="distance"
      :opened="opened"
      :trigger="trigger"
      :flip="flip"
      :styles="styles"
    >
    <scale-button></scale-button>
    </scale-tooltip>
  `,
});

```

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

### Divider Component Setup

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/divider/Divider.stories.mdx

Sets up the Meta and Template for the Divider component in Storybook, including import statements and component registration.

```javascript
import {
  Meta,
  Story,
  ArgsTable,
  Canvas,
  Description,
} from '@storybook/addon-docs';
import ScaleDivider from './ScaleDivider.vue';
export const ICON =
  'M16.471,8.321 L12.613594,0.502886112 L8.755,8.321 L0.126435258,9.57533801 L6.37,15.66 L4.89610548,24.2548735 L12.613,20.197 L20.3310826,24.2548735 L18.856,15.66 L25.1007528,9.57533801 L16.471,8.321 Z M9.41891527,9.23556376 L12.613,2.761 L15.8082728,9.23556376 L22.951,10.273 L17.7826928,15.3122039 L19.003,22.427 L12.613594,19.067774 L6.223,22.427 L7.44449521,15.3122039 L2.275,10.273 L9.41891527,9.23556376 Z';

<Meta title="Components/Divider" component={ScaleDivider} argTypes={{}} />

export const Template = (args, { argTypes }) => ({
  components: { ScaleDivider },
  props: ScaleDivider.props,
  template:
    `
    <scale-divider
      :vertical="vertical"
      :styles="styles"
    >
    </scale-divider>
  `,
});

```

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

### Setup with Plain HTML

Source: https://github.com/telekom/scale/blob/main/README.md

Include the Scale component library's CSS and JavaScript modules in your HTML file. This method is suitable for projects not using a bundler.

```html
<link
  rel="stylesheet"
  href="node_modules/@telekom/scale-components/dist/scale-components/scale-components.css"
/>
<script
  type="module"
  src="node_modules/@telekom/scale-components/dist/scale-components/scale-components.esm.js"
></script>
```

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

### Create a New Gatsby Site with Default Starter

Source: https://github.com/telekom/scale/blob/main/examples/gatsby-ssr/README.md

Use the Gatsby CLI to create a new site, specifying the default starter. This command initializes a new project with the default Gatsby configuration files.

```shell
gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default
```

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

### Setup with Bundler or ES Modules

Source: https://github.com/telekom/scale/blob/main/packages/components/README.md

Import the Scale component library's CSS and define custom elements when using a bundler or ES modules.

```javascript
import "@telekom/scale-components/dist/scale-components/scale-components.css";
import { defineCustomElements } from "@telekom/scale-components/loader";

defineCustomElements();
```

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

### Telekom Mega Menu Column Usage Example

Source: https://github.com/telekom/scale/blob/main/packages/components/src/components/telekom/telekom-mega-menu/readme.md

This is a basic usage example of the scale-telekom-mega-menu-column component. It demonstrates how to include an icon, a heading, and a list of links within the column.

```html
<scale-telekom-mega-menu-column>
  <scale-icon-home-home slot="icon"></scale-icon-home-home>
  <a href="#" slot="heading">My heading</a>
  <ul>
    <li><a href="#">Link One</a></li>
    <li><a href="#">Link Two</a></li>
    <li><a href="#">Link Three</a></li>
    <li><a href="#">Link Four</a></li>
  </ul>
</scale-telekom-mega-menu-column>
```

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

### Card With Link Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/card/Card.stories.mdx

Shows how to configure a card to act as a link, including the target URL and attributes for secure linking. This is useful for cards that navigate to external resources.

```html
<scale-card
  to="https://example.com"
  to="_blank"
  target="_blank"
  rel="noopener noreferrer"
  label="Example Card"
  >Lorem ipsur dolor sit amet</scale-card
>
```

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

### Preview Production Build

Source: https://github.com/telekom/scale/blob/main/examples/nuxt3-boilerplate/README.md

Locally previews the production build of the Nuxt 3 application.

```bash
npm run preview
```

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

### Card With Image Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/card/Card.stories.mdx

Illustrates embedding an image within a card, along with a title and text content, and linking it to an external URL. This example demonstrates a richer card content structure.

```html
<div style="max-width: 200px;">
  <scale-card to="https://example.com" target="_blank">
    <div style="margin: -24px;">
      <img
        style="margin-bottom: -4px; width:100%;"
        src="assets/card-image"
        alt="placeholder"
      />
      <div style="padding: 24px;"> 
        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>
        <span>Lorem ipsur dolor sit amet</span>
      </div>
    </div>
  </scale-card>
</div>
```

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

### ScaleSlider Component Setup

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/slider/Slider.stories.mdx

This snippet shows the basic setup for the ScaleSlider component within a Storybook template. It includes importing necessary components and defining the template with various props and event handlers.

```javascript
import {
  Meta,
  Story,
  ArgsTable,
  Canvas,
  Description,
} from '@storybook/addon-docs';
import ScaleSlider from './ScaleSlider.vue';
import { action } from '@storybook/addon-actions';

<Meta
  title="Components/Slider"
  component={ScaleSlider}
  argTypes={{
    platform: {
      control: { type: 'text' },
      description: '(optional) adapt styles for a specific platform. Ideally done via a global `data-platform` attribute (e.g. data-platform="ios" on `body`) but browser support is not yet sufficient.',
    },
    styles: {
      control: { disable: true },
      description: '(optional) Injected CSS styles ',
    },
    customColor :{
      description: ' <span style="color:red">**[DEPRECATED]**</span> (optional) slider custom color<br/><br/>',
    },
    trackSmall :{
      description: ' <span style="color:red">**[DEPRECATED]**</span> (optional) smaller track<br/><br/>',
    },
    thumbLarge :{
      description: ' <span style="color:red">**[DEPRECATED]**</span> (optional) larger thumb<br/><br/> ',
    },
    decimals :{
      description: ' (optional) number of decimal places  ',
    },
    innerAriaValueText :{
      description: ' (optional) Aria label for range slider',
    },
    label :{
      description: ' (optional) slider label',
    },
    max :{
      description: ' (optional) the maximal value of the slider',
    },
    min :{
      description: ' (optional) he minimal value of the slider',
    },
    name :{
      description: ' (optional) the name of the slider',
    },
    range :{
      description: ' (optional) multi-thumb',
    },
    showStepMarks :{
      description: ' (optional) show a mark for each step',
    },
    showValue :{
      description: ' (optional) slider display value',
    },
    sliderId :{
      description: ' (optional) Slider id',
    },
    step :{
      description: ' (optional) the step size to increase or decrease when dragging slider',
    },
    unit :{
      description: ' (optional) slider value unit',
    },
    unitPosition :{
      description: ' (optional) unit position',
    },
    helperText :{
      description: ' (optional) helper text',
    },
    disabled :{
      description: ' (optional) disabled',
    },
    value :{
      description: ' (optional) the value of the slider',
    },
    valueTo :{
      description: ' (optional) when `range` is true, the "from" value',
    },
    valueFrom :{
      description: ' (optional) when `range` is true, the "to" value',
    },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: {
    ...ScaleSlider.props,
  },
  template: `
    <scale-slider
      :label="label"
      :value="value"
      :range="range"
      :value-from="valueFrom"
      :value-to="valueTo"
      :min="min"
      :max="max"
      :step="step"
      :show-step-marks="showStepMarks"
      :unit="unit"
      :unit-position="unitPosition"
      :decimals="decimals"
      :disabled="disabled"
      :show-value="String(showValue)"
      :name="name"
      :slider-id="sliderId"
      :helper-text="helperText"
      :platform="platform"
      :custom-color="customColor"
      :track-small="trackSmall"
      :thumb-large="thumbLarge"
      :inner-aria-value-text="innerAriaValueText"
      @scale-change="handleScaleChange"
      @scale-input="handleScaleInput"
      >
    </scale-slider>
  `,
  methods: {
    handleScaleChange: action('scale-change'),
    handleScaleInput: action('scale-input'),
  },
});

```

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

### Generate Table Head for Typography

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/guidelines/Typography.stories.mdx

Generates the table header for displaying typography examples, including columns for Example, Description, and Token. It dynamically adjusts border styles based on the dark mode setting.

```javascript
function generateTableHead() {
          return (
            <thead>
              <tr>
                <th
                  style={{
                    textAlign: 'left',
                    color: `${darkMode ? '#fff' : '#6A6A6A'}`, 
                    fontSize: '13px',
                    borderColor: 'var(--telekom-color-background-canvas)',
                    borderBottom: `${
                      darkMode
                        ? '1px solid hsla(0, 0%, 100%, 36%)'
                        : '1px solid #E7E8E9'
                    }`,
                    borderRight: `${
                      darkMode
                        ? '1px solid hsla(0, 0%, 100%, 36%)'
                        : '1px solid #E7E8E9'
                    }`,
                    paddingTop: 'var(--telekom-spacing-unit-x1)',
                    paddingRight: 'var(--telekom-spacing-unit-x2)',
                    paddingBottom: 'var(--telekom-spacing-unit-x1)',
                    paddingLeft: 'var(--telekom-spacing-unit-x2)',
                  }}
                >
                  Example
                </th>
                <th
                  style={{
                    textAlign: 'left',
                    color: `${darkMode ? '#fff' : '#6A6A6A'}`, 
                    fontSize: '13px',
                    borderColor: 'var(--telekom-color-background-canvas)',
                    borderBottom: `${
                      darkMode
                        ? '1px solid hsla(0, 0%, 100%, 36%)'
                        : '1px solid #E7E8E9'
                    }`,
                    borderRight: `${
                      darkMode
                        ? '1px solid hsla(0, 0%, 100%, 36%)'
                        : '1px solid #E7E8E9'
                    }`,
                    paddingTop: 'var(--telekom-spacing-unit-x1)',
                    paddingRight: 'var(--telekom-spacing-unit-x2)',
                    paddingBottom: 'var(--telekom-spacing-unit-x1)',
                    paddingLeft: 'var(--telekom-spacing-unit-x2)',
                  }}
                >
                  Description
                </th>
                <th
                  style={{
                    textAlign: 'left',
                    color: `${darkMode ? '#fff' : '#6A6A6A'}`, 
                    fontSize: '13px',
                    borderColor: 'var(--telekom-color-background-canvas)',
                    borderBottom: `${
                      darkMode
                        ? '1px solid hsla(0, 0%, 100%, 36%)'
                        : '1px solid #E7E8E9'
                    }`,
                    paddingTop: 'var(--telekom-spacing-unit-x1)',
                    paddingRight: 'var(--telekom-spacing-unit-x2)',
                    paddingBottom: 'var(--telekom-spacing-unit-x1)',
                    paddingLeft: 'var(--telekom-spacing-unit-x2)',
                    width: '342px',
                  }}
                >
                  Token
                </th>
              </tr>
            </thead>
          );
        }
```

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

### Basic Icon Usage

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/icon/Icon.stories.mdx

Demonstrates how to use a specific icon component with defined properties like fill color, size, selection state, and accessibility title.

```html
<scale-icon-action-favorite
  fill="#E20074"
  size="24"
  selected
  accessibility-title="favorite"
></scale-icon-action-favorite>
```

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

### Scale Button Disabled State

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/button/Button.stories.mdx

Example of a disabled scale-button component.

```html
<scale-button disabled>Label</scale-button>
```

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

### Setup with ES Modules and Bundlers

Source: https://github.com/telekom/scale/blob/main/README.md

Import the Scale component library's CSS and define custom elements using JavaScript. This is the recommended approach for modern JavaScript projects using bundlers or ES modules.

```javascript
import "@telekom/scale-components/dist/scale-components/scale-components.css";
import { defineCustomElements } from "@telekom/scale-components/loader";

defineCustomElements(window);
```

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

### Disabled Combobox Setup

Source: https://github.com/telekom/scale/blob/main/packages/components/src/html/combobox.html

Initializes a disabled combobox with three options.

```javascript
const disabledCombobox = document.getElementById('disabled-combobox');
disabledCombobox.options = ['Option 1', 'Option 2', 'Option 3'];
```

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

### Badge Component Usage

Source: https://github.com/telekom/scale/blob/main/packages/components/src/components/badge/readme.md

Example of how to use the scale-badge component with a count and a label.

```html
<scale-badge count="5" label="New messages"></scale-badge>
```

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

### Date Range Picker Initialization and Event Handling

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/date-picker/DatePicker.stories.mdx

Initializes two date picker components and sets up event listeners to manage the date range. It ensures the end date's minimum is set to the start date and vice versa, and automatically shows the end date picker after a start date is selected.

```html
<scale-date-picker label="Start" identifier="startDate"></scale-date-picker>

<scale-date-picker label="End" identifier="endDate"></scale-date-picker>

<script>
  const startPicker = document.getElementById('startDate');
  const endPicker = document.getElementById('startDate');
  let startDate, endDate;

  // When the start date picker is changed, set end date's min to equal date
  startPicker.addEventListener('duetChange', function (e) {
    startDate = e.detail.valueAsDate;
    endPicker.min = e.detail.value;

    if (!endDate) {
      endPicker.show();
    }
  });

  // When the end date picker is changed, set start date's max to equal date
  endPicker.addEventListener('duetChange', function (e) {
    endDate = e.detail.valueAsDate;
    startPicker.max = e.detail.value;
  });
</script>
```

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

### TelekomFooter Data API Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/telekom-footer/TelekomFooter.stories.mdx

Demonstrates the usage of the TelekomFooterDataBackCompat component with specific props for type and copyright. It also shows how to dynamically set the footerNavigation property after the component is mounted.

```html
<scale-telekom-footer-data-back-compat
  type="minimal"
  copyright="© Deutsche Telekom AG"
></scale-telekom-footer-data-back-compat>

<script>
  const footer = window.document.querySelector(
    'scale-telekom-footer-data-back-compat'
  );
  footer.footerNavigation = [...[]];
</script>
```

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

### Scale Button Ghost Variant

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/button/Button.stories.mdx

Example of using the ghost variant of the scale-button component.

```html
<scale-button variant="ghost">Label</scale-button>
```

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

### Scale Button Secondary Variant

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/button/Button.stories.mdx

Example of using the secondary variant of the scale-button component.

```html
<scale-button variant="secondary">Label</scale-button>
```

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

### Disabled Tooltip Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/tooltip/Tooltip.stories.mdx

Illustrates how to disable the tooltip component. The tooltip will not appear even when interacted with.

```html
<scale-tooltip content="Tooltip" disabled="true">
  <scale-button disabled>Hover me</scale-button>
</scale-tooltip>
```

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

### Build for Production

Source: https://github.com/telekom/scale/blob/main/examples/nuxt3-boilerplate/README.md

Builds the Nuxt 3 application for production deployment.

```bash
npm run build
```

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

### Preselected Tab Example

Source: https://github.com/telekom/scale/blob/main/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx

Demonstrates how to set a tab as preselected by adding the 'selected' attribute to the scale-tab-header.

```html
<scale-tab-nav>
  <scale-tab-header slot="tab">General</scale-tab-header>
  <scale-tab-panel slot="panel">
    Freegan kinfolk farm-to-table humblebrag cred
  </scale-tab-panel>
  <scale-tab-header slot="tab">Usage</scale-tab-header>
  <scale-tab-panel slot="panel">
    Bespoke austin pork belly yuccie pop-up. Before they sold out
  </scale-tab-panel>
  <scale-tab-header selected slot="tab">Style</scale-tab-header>
  <scale-tab-panel slot="panel">
    Biodiesel chia af hoodie tumeric bespoke letterpress
  </scale-tab-panel>
  <scale-tab-header slot="tab">Code</scale-tab-header>
  <scale-tab-panel slot="panel">
    Asymmetrical tattooed chia, banh mi blog microdosing
  </scale-tab-panel>
</scale-tab-nav>
```