### Project Setup and Running Commands

Source: https://github.com/ui5/webcomponents/blob/main/docs/07-development/01-package.md

After initialization, navigate to the new project directory, install dependencies, and start the development server. Other commands like build and test are also available.

```sh
cd <NEW-PACKAGE-NAME>
npm i
npm start
```

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

### Start Website (Docs & Samples) Locally

Source: https://github.com/ui5/webcomponents/blob/main/README.md

Commands to install dependencies and start the website, which hosts documentation and samples. Access it via http://localhost:3000/webcomponents/nightly/.

```sh
yarn # to install all dependencies

# start the playground from the project root
yarn start:website

# open http://localhost:3000/webcomponents/nightly/
```

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

### Install Dependencies and Start Website

Source: https://github.com/ui5/webcomponents/blob/main/docs/08-contributing/04-website.md

Run these commands in your terminal to install project dependencies and start the local website server.

```bash
yarn
yarn start:website
```

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

### Install Dependencies and Serve Project Locally

Source: https://github.com/ui5/webcomponents/blob/main/README.md

Use these commands to install all project dependencies and start a local development server. The browser will automatically open to the project's index URL.

```sh
yarn # to install all dependencies
yarn start # to serve the project
```

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

### Basic Switch Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/main/Switch.mdx

Demonstrates the basic usage of the Switch component. No additional setup is required beyond importing the component.

```javascript
import Switch from "@ui5/webcomponents/dist/Switch.js";

// Usage in HTML:
// <ui5-switch></ui5-switch>
```

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

### Navigate and Install Dependencies

Source: https://github.com/ui5/webcomponents/blob/main/docs/1-getting-started/01-first-steps.md

Change into the newly created project directory and install its initial dependencies.

```bash
cd my-webcomponents-app
npm install
npm run dev
```

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

### Basic UserMenu Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/fiori/UserMenu/UserMenu.mdx

Demonstrates the fundamental usage of the UserMenu component. No specific setup is required beyond importing the component.

```javascript
import Basic from "../../../_samples/fiori/UserMenu/Basic/Basic.md";

<Basic />
```

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

### Basic Dialog Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/main/Dialog.mdx

Demonstrates the fundamental usage of the Dialog component. No specific setup is required beyond importing the component.

```javascript
import Basic from "../../_samples/main/Dialog/Basic/Basic.md";

<Basic />
```

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

### Navigate and Install Project Dependencies

Source: https://github.com/ui5/webcomponents/blob/main/docs/04-CLI.md

After creating a project, navigate into the project directory and install its dependencies.

```bash
cd my-package
npm install
```

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

### Basic ShellBar Configuration

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx

Demonstrates a basic ShellBar setup including a back button, logo, title, and profile image. This is a foundational example for integrating the ShellBar.

```javascript
import Basic from "../../../_samples/fiori/ShellBar/Basic/Basic.md";
```

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

### Initialize Project and Install Dependencies

Source: https://github.com/ui5/webcomponents/blob/main/docs/2-advanced/13-theming-part2.md

Initializes a new Node.js project and installs the necessary theming base content package.

```bash
mkdir create-custom-theme
cd create-custom-theme
npm init
```

```bash
npm install @sap-theming/theming-base-content
```

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

### Setup Angular Project for UI5 Web Components for Angular

Source: https://github.com/ui5/webcomponents/blob/main/docs/3-frameworks/02-Angular.md

Installs the Angular CLI and creates a new Angular project. This is the initial step for projects intending to use the UI5 Web Components for Angular library.

```bash
npm install -g @angular/cli
ng new ui5-web-components-ngx-application
cd ui5-web-components-ngx-application
```

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

### Start Website Server (Optimized)

Source: https://github.com/ui5/webcomponents/blob/main/docs/08-contributing/04-website.md

If the project is already built, this command can be used to start only the website server for faster iteration.

```bash
cd packages/website
yarn start
```

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

### Start Development Server

Source: https://github.com/ui5/webcomponents/blob/main/docs/04-CLI.md

Start the development server with hot reload functionality for the UI5 Web Components project.

```bash
npm start
```

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

### Example: Initialize UI5 Web Components Package with a specific name

Source: https://github.com/ui5/webcomponents/blob/main/docs/07-development/01-package.md

This example shows how to initialize a new UI5 Web Components package named 'myComponents', which creates a directory and sets up the project within it.

```sh
npm init @ui5/webcomponents-package myComponents
```

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

### Install UI5 Web Components Packages

Source: https://github.com/ui5/webcomponents/blob/main/docs/1-getting-started/02-components-packages.md

Install the main, Fiori, and AI packages for UI5 Web Components using npm.

```bash
npm i @ui5/webcomponents
npm i @ui5/webcomponents-fiori
npm i @ui5/webcomponents-ai
```

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

### Basic UploadCollection Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/fiori/UploadCollection/UploadCollection.mdx

Demonstrates the fundamental usage of the UploadCollection component. No specific setup is required beyond including the component.

```javascript
import Basic from "../../../_samples/fiori/UploadCollection/Basic/Basic.md";

<Basic />
```

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

### Install NPM Package

Source: https://github.com/ui5/webcomponents/blob/main/docs/07-development/07-styling.md

Install the web component package using npm.

```sh
npm install {PACKAGE-NAME}
```

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

### AI Components Setup and Usage

Source: https://context7.com/ui5/webcomponents/llms.txt

Install and import UI5 AI components for experimental AI-assisted interactions. Note that APIs are subject to change and only the Horizon theme is supported.

```bash
npm install @ui5/webcomponents-ai
```

```javascript
import "@ui5/webcomponents-ai/dist/PromptInput.js";
import "@ui5/webcomponents-ai/dist/Button.js";
```

```html
<!-- AI Prompt Input: natural-language instruction field -->
<ui5-ai-prompt-input
  id="promptInput"
  placeholder="Ask AI to generate content..."
  maxlength="500"
  show-exceeded-text
></ui5-ai-prompt-input>

<script>
  document.getElementById("promptInput").addEventListener("submit", async (e) => {
    const userPrompt = e.target.value;
    // userPrompt → send to your AI backend
    const result = await myAIService.generate(userPrompt);
    console.log("AI response:", result);
  });
</script>
```

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

### Comprehensive UI5 Configuration Script Example

Source: https://github.com/ui5/webcomponents/blob/main/docs/2-advanced/01-configuration.md

A detailed example of a configuration script setting various UI5 Web Components properties including theme, language, animation mode, calendar type, format settings, noConflict settings, default language fetching, timezone, and default font loading.

```html
<script data-ui5-config type="application/json">
{
	"theme": "sap_horizon_hcb",
	"language": "ja",
	"animationMode": "none",
	"calendarType": "Japanese",
	"formatSettings": {
		"firstDayOfWeek": 0
	},
	"noConflict": {
		"events": ["selection-change", "header-click"]
	},
	"fetchDefaultLanguage": true,
	"timezone": "Europe/Sofia",
	defaultFontLoading
}
</script>
```

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

### Complete i18n Integration Example

Source: https://github.com/ui5/webcomponents/blob/main/docs/2-advanced/08-using-i18n-for-apps.md

A complete example demonstrating the registration of i18n loaders, fetching the bundle, and retrieving translated texts for an application.

```javascript
import parseProperties from "@ui5/webcomponents-base/dist/PropertiesFileFormat.js";
import { registerI18nLoader, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";

const supportedLocales = ["en", "fr", "de", "es"];
supportedLocales.forEach(localeToRegister => {
	registerI18nLoader("myApp", localeToRegister, async (localeId) => {
		const props = await (await fetch(`./assets/messagebundle_${localeId}.properties`)).text();
		return parseProperties(props);
	});
});

const bundle = await getI18nBundle("myApp");

const pleaseWait = bundle.getText("PLEASE_WAIT");
console.log("Please wait in the current language is: ", pleaseWait);
```

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

### Install and Import UI5 Web Components Package

Source: https://github.com/ui5/webcomponents/blob/main/docs/07-development/01-package.md

Demonstrates how application developers install a UI5 Web Components package via npm and import its components and assets.

```bash
npm i my-ui5-webcomponents --save
```

```javascript
import "my-ui5-webcomponents/Assets.js"; // optional
import "my-ui5-webcomponents/dist/MyComponent.js"; // for my-component
import "my-ui5-webcomponents/dist/SomeOtherComponent.js";
import "my-ui5-webcomponents/dist/YetAnotherComponent.js";
```

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

### Avatar with Badge Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/main/Avatar/WithBadge/WithBadge.md

This example shows how to render an Avatar component with a badge. Ensure the necessary imports are present.

```html
<ui5-avatar><ui5-badge slot="badge" color="#e72121"></ui5-badge></ui5-avatar>
```

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

### Launch Vue Application

Source: https://github.com/ui5/webcomponents/blob/main/docs/3-frameworks/03-Vue.md

Start the development server for your Vue.js application.

```bash
npm run dev
```

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

### Install Icon Packages

Source: https://github.com/ui5/webcomponents/blob/main/docs/2-advanced/03-using-icons.md

Install the official UI5 Web Components icon packages as project dependencies using npm.

```bash
npm i @ui5/webcomponents-icons
npm i @ui5/webcomponents-icons-tnt
npm i @ui5/webcomponents-icons-business-suite
```

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

### Install Specific UI5 Web Components Skill

Source: https://github.com/ui5/webcomponents/blob/main/docs/06-Skills.md

Install a particular skill, such as 'styling', by specifying its name with the --skill flag. This allows for targeted knowledge integration.

```bash
npx skills add "UI5/webcomponents" --skill "styling"
```

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

### Basic TextArea Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/main/TextArea.mdx

Demonstrates the basic usage of the TextArea component.

```javascript
import Basic from "../../_samples/main/TextArea/Basic/Basic.md";

<Basic />
```

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

### Basic NavigationLayout Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/fiori/NavigationLayout.mdx

Demonstrates the fundamental usage of the NavigationLayout component for basic content arrangement.

```javascript
import Basic from "../../_samples/fiori/NavigationLayout/Basic/Basic.md";

<Basic />
```

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

### Basic ColorPicker Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/main/ColorPicker.mdx

Demonstrates the fundamental usage of the ColorPicker component.

```javascript
import Basic from "../../_samples/main/ColorPicker/Basic/Basic.md";

<Basic />
```

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

### Basic CalendarLegend Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/main/CalendarLegend/CalendarLegend.mdx

Demonstrates the basic usage of the CalendarLegend component.

```javascript
import Basic from "../../../_samples/main/CalendarLegend/Basic/Basic.md";

<Basic />
```

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

### Codex MCP Setup

Source: https://github.com/ui5/webcomponents/blob/main/docs/05-MCP-Server.md

Set up the MCP server for Codex with this command.

```bash
codex mcp add \
  --transport "stdio" \
  "ui5-webc-mcp-server" \
  -- npx -y "@ui5/webcomponents-mcp-server"
```

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

### Calendar with Disabled Dates Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/main/Calendar/CalendarWithDisabledDates/CalendarWithDisabledDates.md

This example shows how to use the `disabledDates` prop to disable specific dates in the Calendar. You need to provide an array of objects, where each object specifies the `start` and `end` dates to be disabled.

```javascript
import React from "react";
import { Calendar } from "@ui5/webcomponents-react";

const CalendarWithDisabledDates = () => {
  const disabledDates = [
    { start: new Date(2023, 10, 15), end: new Date(2023, 10, 18) }, // Disable November 15th to 18th, 2023
    { start: new Date(2023, 11, 25) } // Disable December 25th, 2023
  ];

  return (
    <Calendar disabledDates={disabledDates} />
  );
};

export default CalendarWithDisabledDates;
```

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

### Basic Popover Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/main/test/pages/Popover.html

Demonstrates a simple popover triggered by a button. The popover content is static.

```html
<ui5-button id="popover-btn" icon="sap-icon--message-popup" tooltip="Show Popover" class="popover-button">
    Click me !
</ui5-button>
<ui5-popover id="popover" placement-target="popover-btn">
    <div class="popover-content">
        I am in the header
    </div>
</ui5-popover>
```

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

### Setup ui5-li Drag and Drop

Source: https://github.com/ui5/webcomponents/blob/main/packages/main/test/pages/MultipleDragDemo.html

Initializes drag and drop event listeners for ui5-li lists. Handles selection changes and updates the UI accordingly. This setup is used for both DragRegistry and direct drag image examples.

```javascript
const lists = [
  document.getElementById("list1"),
  document.getElementById("list2"),
];
const counters = [
  document.getElementById("count1"),
  document.getElementById("count2"),
];

function getSelectedItems(list) {
  return list.getItems().filter(item => item.selected);
}

function updateUI(listIndex) {
  const selectedItems = getSelectedItems(lists[listIndex]);
  counters[listIndex].textContent = selectedItems.length;
}

function setupSelectionChangeListener(listIndex) {
  lists[listIndex].addEventListener("ui5-selection-change", () => {
    updateUI(listIndex);
  });
}

// Initialize counts
[0, 1].forEach(updateUI);
```

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

### AI CustomPrompt Level 3 Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/components/patterns/AI CustomPrompt/Level 3.mdx

This example demonstrates the AI CustomPrompt pattern at Level 3, featuring model selection and advanced AI button options. Ensure the '@ui5/webcomponents-ai' package is installed and Horizon themes are applied.

```javascript
import html from '!!raw-loader!./Level 3/sample.html';
import css from '!!raw-loader!./Level 3/main.css';
import js from '!!raw-loader!./Level 3/main.js';

<Editor html={html} js={js} css={css} />
```

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

### AI CustomPrompt Level 2 Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/components/patterns/AI CustomPrompt/Level 2.mdx

This example demonstrates the AI CustomPrompt pattern with toolbar actions. It requires importing HTML, CSS, and JavaScript modules. Note that the @ui5/webcomponents-ai package is experimental and supports Horizon themes only.

```javascript
import html from '!!raw-loader!./Level 2/sample.html';
import css from '!!raw-loader!./Level 2/main.css';
import js from '!!raw-loader!./Level 2/main.js';
```

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

### Documentation Website Commands

Source: https://github.com/ui5/webcomponents/blob/main/AGENTS.md

Commands to start the documentation website, which uses Docusaurus.

```bash
cd packages/website
yarn start  # Starts Docusaurus on http://localhost:3000
```

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

### FileUploader Basic Usage

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/main/FileUploader.mdx

Demonstrates the basic setup and usage of the FileUploader component.

```javascript
import Basic from "../../_samples/main/FileUploader/Basic/Basic.md";
```

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

### Basic Form Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/main/Form/Form.mdx

Demonstrates the fundamental structure and usage of the Form component.

```javascript
import Basic from "../../../_samples/main/Form/Basic/Basic.md";
```

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

### Basic ProductSwitch Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/fiori/ProductSwitch/ProductSwitch.mdx

Demonstrates the fundamental usage of the ProductSwitch component. This is the simplest way to integrate the component into your application.

```javascript
import Basic from "../../../_samples/fiori/ProductSwitch/Basic/Basic.md";

<Basic />
```

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

### ToggleButton with Icon Only

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/main/ToggleButton/IconOnly/IconOnly.md

This example shows a ToggleButton configured to display only an icon. Ensure the icon is clearly understandable to users. No additional setup is required beyond importing the component.

```html
<ui5-toggle-button icon="accept" tooltip="Accept"></ui5-toggle-button>
```

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

### Create a New UI5 Web Components Project

Source: https://github.com/ui5/webcomponents/blob/main/docs/04-CLI.md

Use this command to scaffold a new UI5 Web Components package. It launches an interactive wizard for setup.

```bash
npm create @ui5/webcomponents-package
```

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

### VS Code One-Click Setup

Source: https://github.com/ui5/webcomponents/blob/main/docs/05-MCP-Server.md

Use this command in VS Code to add the MCP server configuration directly.

```bash
code --add-mcp '{"name":"@ui5/webcomponents-mcp-server","type":"stdio","command":"npx","args":["-y","@ui5/webcomponents-mcp-server"]}'
```

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

### Install All UI5 Web Components Skills

Source: https://github.com/ui5/webcomponents/blob/main/docs/06-Skills.md

Use this command to download all available UI5 Web Components skill files into your project. AI assistants can then automatically utilize this knowledge.

```bash
npx skills add "UI5/webcomponents"
```

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

### Form with Wizard

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/main/Form/LabelsOnTop/LabelsOnTop.md

Shows a `ui5-wizard` component used to guide users through a multi-step process, often used for complex forms or setup procedures. Each step can contain form elements.

```html
<ui5-wizard>
  <ui5-wizard-step title="Step 1: Basic Info" selected highlight>
    <ui5-form>
      <ui5-form-item label="Name">
        <ui5-input></ui5-input>
      </ui5-form-item>
    </ui5-form>
  </ui5-wizard-step>
  <ui5-wizard-step title="Step 2: Contact">
    <ui5-form>
      <ui5-form-item label="Email">
        <ui5-input type="Email"></ui5-input>
      </ui5-form-item>
    </ui5-form>
  </ui5-wizard-step>
</ui5-wizard>
```

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

### Access Slotted Children Count

Source: https://github.com/ui5/webcomponents/blob/main/docs/07-development/11-deep-dive-and-best-practices.md

When slots are defined as class members using the @slot decorator, you can access the slotted children as an array. This example shows how to get the count of slotted items.

```typescript
const itemsCount = this.items.length;
```

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

### Tokenizer Basic Sample

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/main/Tokenizer.mdx

Demonstrates the fundamental usage of the Tokenizer component. No specific setup is required beyond importing the component.

```javascript
import Basic from "../../_samples/main/Tokenizer/Basic/Basic.md";

<Basic />
```

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

### Basic DateRangePicker with Custom Formatting

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/main/DateRangePicker/CustomFormatting/CustomFormatting.md

This example shows a basic DateRangePicker setup with custom formatting applied to the date display. Ensure the component is imported and rendered with the desired formatting props.

```javascript
import DateRangePicker from '@ui5/webcomponents-fiori/dist/DateRangePicker.js';

const dateRangePicker = new DateRangePicker({
  // Custom formatting for the start date
  displayFormat: "yyyy-MM-dd",
  // Custom formatting for the end date
  valueFormat: "MM/dd/yyyy"
});

dateRangePicker.show();
```

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

### MultiComboBox with Wrapping Suggestions

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/main/MultiComboBox/SuggestionsWrapping/SuggestionsWrapping.md

This example shows a basic setup of the MultiComboBox component. To enable wrapping, ensure the suggestions are long enough to trigger the behavior. No specific configuration is needed for wrapping itself; it's an inherent behavior.

```javascript
import React from 'react';
import { MultiComboBox } from '@ui5/webcomponents-react';

const SuggestionsWrapping = () => {
  const data = [
    { text: 'Apple', value: 'apple' },
    { text: 'Banana', value: 'banana' },
    { text: 'Orange', value: 'orange' },
    { text: 'Pineapple', value: 'pineapple' },
    { text: 'Strawberry', value: 'strawberry' },
    { text: 'Blueberry', value: 'blueberry' },
    { text: 'Raspberry', value: 'raspberry' },
    { text: 'Blackberry', value: 'blackberry' },
    { text: 'Cranberry', value: 'cranberry' },
    { text: 'Grape', value: 'grape' },
    { text: 'Watermelon', value: 'watermelon' },
    { text: 'Cantaloupe', value: 'cantaloupe' },
    { text: 'Honeydew', value: 'honeydew' },
    { text: 'Kiwi', value: 'kiwi' },
    { text: 'Mango', value: 'mango' },
    { text: 'Papaya', value: 'papaya' },
    { text: 'Peach', value: 'peach' },
    { text: 'Pear', value: 'pear' },
    { text: 'Plum', value: 'plum' },
    { text: 'Cherry', value: 'cherry' },
    { text: 'Lemon', value: 'lemon' },
    { text: 'Lime', value: 'lime' },
    { text: 'Grapefruit', value: 'grapefruit' },
    { text: 'Avocado', value: 'avocado' },
    { text: 'Pomegranate', value: 'pomegranate' },
    { text: 'Fig', value: 'fig' },
    { text: 'Date', value: 'date' },
    { text: 'Apricot', value: 'apricot' },
    { text: 'Nectarine', value: 'nectarine' },
    { text: 'Plum', value: 'plum2' },
    { text: 'Cherry', value: 'cherry2' },
    { text: 'Lemon', value: 'lemon2' },
    { text: 'Lime', value: 'lime2' },
    { text: 'Grapefruit', value: 'grapefruit2' },
    { text: 'Avocado', value: 'avocado2' },
    { text: 'Pomegranate', value: 'pomegranate2' },
    { text: 'Fig', value: 'fig2' },
    { text: 'Date', value: 'date2' },
    { text: 'Apricot', value: 'apricot2' },
    { text: 'Nectarine', value: 'nectarine2' }
  ];

  return (
    <MultiComboBox
      headerText="Fruits"
      placeholder="Select fruits"
      data-testid="multi-combo-box-wrapping"
      items={data}
    />
  );
};

export default SuggestionsWrapping;

```

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

### Basic Table with Drag and Drop Enabled

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/main/Table/DragAndDrop/DragAndDrop.md

Shows a basic table setup with drag and drop enabled. Ensure the `dnd` attribute is set to `true` on the `ui5-table` component to activate this feature. This example requires no additional JavaScript for basic functionality.

```html
<ui5-table id="table" dnd="true" class="full-width">
  <ui5-table-header-row>
    <ui5-table-header-cell>ID</ui5-table-header-cell>
    <ui5-table-header-cell>Name</ui5-table-header-cell>
    <ui5-table-header-cell>Type</ui5-table-header-cell>
  </ui5-table-header-row>
  <ui5-table-row>
    <ui5-table-cell>1</ui5-table-cell>
    <ui5-table-cell>Apple</ui5-table-cell>
    <ui5-table-cell>Fruit</ui5-table-cell>
  </ui5-table-row>
  <ui5-table-row>
    <ui5-table-cell>2</ui5-table-cell>
    <ui5-table-cell>Broccoli</ui5-table-cell>
    <ui5-table-cell>Vegetable</ui5-table-cell>
  </ui5-table-row>
  <ui5-table-row>
    <ui5-table-cell>3</ui5-table-cell>
    <ui5-table-cell>Carrot</ui5-table-cell>
    <ui5-table-cell>Vegetable</ui5-table-cell>
  </ui5-table-row>
</ui5-table>
```

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

### Table with Growing on Scroll

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/compat/Table/GrowingOnScroll/GrowingOnScroll.md

This example shows a basic Table setup. To enable growing on scroll, ensure the table is not within a container with a fixed height that would prevent it from expanding. The table will automatically adjust its height to fit its content as the user scrolls.

```html
<template>
	<div class="content">
		<ui5-table growing="Scroll" growing-threshold="50" id="table" class="table-demo" mode="MultiSelect" header-text="Products" show-no-data-row="true">
			<ui5-table-column slot="columns" style="width: 10rem;"><span>ProductID</span></ui5-table-column>
			<ui5-table-column slot="columns" style="width: 10rem;"><span>Name</span></ui5-table-column>
			<ui5-table-column slot="columns" style="width: 10rem;"><span>Description</span></ui5-table-column>

			<ui5-table-row>
				<ui5-table-cell>1</ui5-table-cell>
				<ui5-table-cell>Apple</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>2</ui5-table-cell>
				<ui5-table-cell>Banana</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>3</ui5-table-cell>
				<ui5-table-cell>Carrot</ui5-table-cell>
				<ui5-table-cell>Vegetable</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>4</ui5-table-cell>
				<ui5-table-cell>Broccoli</ui5-table-cell>
				<ui5-table-cell>Vegetable</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>5</ui5-table-cell>
				<ui5-table-cell>Orange</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>6</ui5-table-cell>
				<ui5-table-cell>Strawberry</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>7</ui5-table-cell>
				<ui5-table-cell>Spinach</ui5-table-cell>
				<ui5-table-cell>Vegetable</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>8</ui5-table-cell>
				<ui5-table-cell>Grapes</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>9</ui5-table-cell>
				<ui5-table-cell>Blueberry</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>10</ui5-table-cell>
				<ui5-table-cell>Raspberry</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>11</ui5-table-cell>
				<ui5-table-cell>Mango</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>12</ui5-table-cell>
				<ui5-table-cell>Pineapple</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>13</ui5-table-cell>
				<ui5-table-cell>Watermelon</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>14</ui5-table-cell>
				<ui5-table-cell>Peach</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>15</ui5-table-cell>
				<ui5-table-cell>Pear</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>16</ui5-table-cell>
				<ui5-table-cell>Plum</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>17</ui5-table-cell>
				<ui5-table-cell>Cherry</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>18</ui5-table-cell>
				<ui5-table-cell>Grapefruit</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>19</ui5-table-cell>
				<ui5-table-cell>Lemon</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
			<ui5-table-row>
				<ui5-table-cell>20</ui5-table-cell>
				<ui5-table-cell>Lime</ui5-table-cell>
				<ui5-table-cell>Fruit</ui5-table-cell>
			</ui5-table-row>
		</ui5-table>
	</div>
</template>

<script>
	import UI5Element from "@ui5/webcomponents-react/lib/UI5Element";

	export default {
		name: "GrowingOnScroll",
		components: {
			UI5Element
		}
	};
</script>

<style>
	.content {
		height: 400px;
	}

	.table-demo {
		width: 100%;
	}
</style>
```

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

### Initialize and Route Application

Source: https://github.com/ui5/webcomponents/blob/main/packages/fiori/test/pages/FCLApp.html

Sets up event listeners and the initial routing. Ensures companies are loaded before proceeding.

```javascript
var companiesLoaded = false; var currentCid; var currentPid; window.addEventListener("hashchange", function(){ routing(); }); function $(sel) { return document.getElementById(sel); } function loadCompanies() { $("startBusy").active = true; setTimeout(function() { var companies = $("companiesTemplate").content.cloneNode(true); $("startColumn").appendChild(companies); $("startColumn").querySelector("ui5-list").addEventListener("ui5-item-click", function(e) { window.location = "#" + e.detail.item.getAttribute("data-cid"); }); $("startBusy").active = false; $("startBusy").style.display = "none"; }, 1000); } function loadCompany(cid) { setTimeout(function() { var products = $("productsTemplate").content.cloneNode(true); products.querySelector("ui5-title").textContent = "Company " + cid + " products"; Array.prototype.slice.call($("midColumn").children).forEach(function(child) { $("midColumn").removeChild(child); }); $("midColumn").appendChild(products); $("midColumn").querySelector("ui5-list").addEventListener("ui5-item-click", function(e) { window.location = "#" + cid + "-" + e.detail.item.getAttribute("data-pid"); }); $("midColumn").querySelector("ui5-button").addEventListener("click", function(e) { window.location = "#"; }); }, 1000); } function loadProduct(cid, pid) { setTimeout(function() { var product = $("productTemplate").content.cloneNode(true); product.querySelector("ui5-title").textContent = "Company " + cid + " product " + pid; Array.prototype.slice.call($("endColumn").children).forEach(function(child) { $("endColumn").removeChild(child); }); $("endColumn").appendChild(product); $("endColumn").querySelector("ui5-button").addEventListener("click", function(e) { window.location = "#" + cid; }); }, 1000); } function routing() { var val = window.location.hash.substr(1); var arr = val.split("-"); var cid = arr\[0\]; var pid = arr\[1\]; if (!companiesLoaded) { loadCompanies(); companiesLoaded = true; } if (!cid) { $("fcl").layout = "OneColumn"; } else { if (cid !== currentCid) { loadCompany(cid); $("fcl").layout = "TwoColumnsMidExpanded"; currentCid = cid; } if (!pid) { $("fcl").layout = "TwoColumnsMidExpanded"; } else { if (pid !== currentPid) { loadProduct(cid, pid); $("fcl").layout = "ThreeColumnsEndExpanded"; currentPid = pid; } } } } routing();
```

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

### Install Project Dependencies

Source: https://github.com/ui5/webcomponents/blob/main/docs/08-contributing/01-development-workflow.md

Installs all necessary dependencies for the project using Yarn. Ensure Yarn and Node.js (version 14 or higher) are installed beforehand.

```sh
yarn
```

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

### Install UI5 Web Components

Source: https://github.com/ui5/webcomponents/blob/main/README.md

Install the necessary UI5 Web Components package using npm. This command installs the core package which includes the ui5-button component.

```sh
npm install @ui5/webcomponents
```

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

### Build and Test Flow - Build Steps

Source: https://github.com/ui5/webcomponents/blob/main/AGENTS.md

Steps for building the project, including file generation and TypeScript compilation. Run from the root folder.

```bash
yarn generate - Generates .ts files (in src/generated) from .css and .properties files. Run once on clean state, or when these files change. The dev server runs this in watch mode automatically.
yarn ts - TypeScript compilation, populates dist/ with .js and .d.ts files. Use to check for TypeScript errors.
```

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

### Basic Icon Usage

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/main/Icon.mdx

Demonstrates the fundamental usage of the Icon component. No specific setup is required beyond importing the component.

```html
<ui5-icon name="accept"></ui5-icon>
<ui5-icon name="action"></ui5-icon>
<ui5-icon name="display-more"></ui5-icon>
```

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

### Open Menu with Opener and Event Handling

Source: https://github.com/ui5/webcomponents/blob/main/packages/main/test/pages/Menu.html

Demonstrates how to open a menu by setting its opener and handling click events. Also shows how to toggle the menu's open state.

```javascript
btnOpen.accessibilityAttributes = {
  hasPopup: "menu",
};
btnOpen.addEventListener("click", function() {
  menu.opener = "btnOpen";
  menu.open = true;
});
```

```javascript
btnOpenGroups.addEventListener("click", function() {
  menuGroups.opener = "btnOpenGroups";
  menuGroups.open = true;
});
```

```javascript
btnOpenEndContent.addEventListener("click", function() {
  menuEndContent.opener = "btnOpenEndContent";
  menuEndContent.open = !menu.open;
});
```

```javascript
btnOpenRight.addEventListener ("click", function() {
  menuRight.opener = "btnOpenRight";
  menuRight.open = !menuRight.open;
});
```

```javascript
btnAddOpener.addEventListener("click", function() {
  menu.opener="btnToggleOpen";
});
```

```javascript
btnRemoveOpener.addEventListener("click", function() {
  menu.opener = "";
});
```

```javascript
btnToggleOpen.addEventListener("click", function() {
  menu.open = btnToggleOpen.pressed;
});
```

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

### Toast Placement Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/main/Toast/Placement/Placement.md

Shows how to render a Toast at different positions on the screen. Import the Toast component and use the 'placement' prop to set the desired position.

```javascript
import Button from '@ui5/webcomponents/dist/Button';
import Toast from '@ui5/webcomponents/dist/Toast';

const showToast = (placement) => {
  const toast = document.createElement('ui5-toast');
  toast.placement = placement;
  toast.innerText = `Toast with placement ${placement}`;
  document.body.appendChild(toast);
  toast.show();
};

const buttons = [
  'TopLeft',
  'TopCenter',
  'TopEnd',
  'MiddleStart',
  'Center',
  'MiddleEnd',
  'BottomStart',
  'BottomCenter',
  'BottomEnd'
];

betton.forEach(placement => {
  const btn = document.createElement('ui5-button');
  btn.innerText = placement;
  btn.addEventListener('click', () => showToast(placement));
  document.body.appendChild(btn);
});

```

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

### Freestyle Form Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/main/Form/Form.mdx

Presents an example of a freestyle form, allowing for more unconstrained layout and content.

```javascript
import FreeStyleForm from "../../../_samples/main/Form/FreeStyleForm/FreeStyleForm.md";
```

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

### Install UI5 Web Components

Source: https://github.com/ui5/webcomponents/blob/main/docs/3-frameworks/01-React.md

Install the UI5 Web Components package as a dependency for your React project.

```bash
npm install @ui5/webcomponents --save
```

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

### Basic UserSettingsDialog Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsDialog.mdx

Demonstrates the basic usage of the UserSettingsDialog component. Ensure the component is imported correctly before use.

```javascript
import Basic from "../../../_samples/fiori/UserSettingsDialog/Basic/Basic.md";

<Basic />
```

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

### HTML Structure for `onAfterRendering` Example

Source: https://github.com/ui5/webcomponents/blob/main/docs/07-development/11-deep-dive-and-best-practices.md

This HTML defines the structure for the `onAfterRendering` example, including input elements.

```html
<div class="my-component">
	<input id="first">
	<input id="second">
</div>
```

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

### Create UI5 Web Components Package with npm

Source: https://github.com/ui5/webcomponents/blob/main/packages/create-package/README.md

Use this command to initialize a new UI5 Web Components package using npm. Specify options like package name and test setup.

```bash
npm init @ui5/webcomponents-package [OPTIONS]
# npm 7+, an extra double-dash is needed:
npm init @ui5/webcomponents-package -- [OPTIONS]

Options:
    --name <string>                      - defines the package name
    --test-setup <"cypress" | "manual">  - defines whether the predefined test setup should be added or it will be configured manually.
    --skip                               - skips configuration and generates package with a default value for each parameter that wasn't passed
```

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

### Install Less for CSS Compilation

Source: https://github.com/ui5/webcomponents/blob/main/docs/2-advanced/13-theming-part2.md

Install the Less compiler as a development dependency to process Less files into CSS.

```bash
npm install less --save-dev
```

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

### Basic Panel Usage

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/main/Panel.mdx

Demonstrates the fundamental usage of the Panel component. No specific setup is required beyond importing the component.

```javascript
import Basic from "../../_samples/main/Panel/Basic/Basic.md";

<Basic />
```

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

### Initialize UI5 Web Components Package with npm

Source: https://github.com/ui5/webcomponents/blob/main/docs/07-development/01-package.md

Use this command to create a new directory and initialize your project as an NPM package. You can optionally specify a package name.

```sh
npm init @ui5/webcomponents-package
npm init @ui5/webcomponents-package <NEW-PACKAGE-NAME>
```

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

### Toggle ShellBar Start Button

Source: https://github.com/ui5/webcomponents/blob/main/packages/fiori/test/pages/ShellBar_Features.html

Listens for changes on a toggle element to control the visibility of the start button in the ShellBar.

```javascript
toggleStartButton.addEventListener('ui5-change', (e) => {
    const checked = e.target.checked;
    toggleElement('startButton', checked);
    console.log('Start Button:', checked);
});
```

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

### Standard Toolbar with Select and Button

Source: https://github.com/ui5/webcomponents/blob/main/packages/main/test/pages/ToolbarItems.html

Demonstrates a basic toolbar setup using ui5-select and ui5-button, wrapped within ui5-toolbar-item.

```html
<ui5-toolbar design="Solid">
    <ui5-toolbar-item>
        <ui5-select placeholder="Select an option">
            <ui5-option>Option 1</ui5-option>
            <ui5-option>Option 2</ui5-option>
        </ui5-select>
    </ui5-toolbar-item>
    <ui5-toolbar-item>
        <ui5-button>Click Me</ui5-button>
    </ui5-toolbar-item>
</ui5-toolbar>
```

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

### Install Angular CLI

Source: https://github.com/ui5/webcomponents/blob/main/docs/3-frameworks/02-Angular.md

Installs the Angular Command Line Interface globally. This is a prerequisite for creating and managing Angular projects.

```bash
npm install -g @angular/cli
```

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

### Build and Serve Project

Source: https://github.com/ui5/webcomponents/blob/main/docs/08-contributing/01-development-workflow.md

Builds the project and starts the development server. The browser will automatically open to the dev server URL (usually http://localhost:8080/). Changes in code will trigger automatic page reloads.

```sh
yarn start
```

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

### Avatar Decorative Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/main/Avatar/Decorative/Decorative.md

This is a basic example of how to use the Avatar component as a decorative element. It displays an icon inside the avatar.

```html
<ui5-avatar><ui5-icon name="user"></ui5-icon></ui5-avatar>
```

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

### Open and Scroll Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/main/test/pages/Popover.html

Demonstrates opening a popover and then scrolling, likely to test scroll behavior within the popover or its container.

```html
<ui5-button id="open-scroll-btn">Open and scroll</ui5-button>
<ui5-popover id="open-scroll-popover" placement-target="open-scroll-btn">
    Opened
</ui5-popover>
```

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

### Basic Bar Sample

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/main/Bar.mdx

Demonstrates the fundamental usage of the Bar component. No specific setup is required beyond importing the component.

```javascript
import Basic from "../../_samples/main/Bar/Basic/Basic.md";

<Basic />
```

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

### Basic Link Usage

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/main/Link.mdx

Demonstrates the fundamental usage of the Link component. No specific setup is required beyond importing the component.

```html
<ui5-link href="https://sap.github.io/ui5-webcomponents/" target="_blank">Go to UI5 Web Components</ui5-link>
```

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

### Basic AI TextArea Sample

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/ai/TextArea.mdx

Demonstrates the fundamental usage of the AI TextArea component. No specific setup is required beyond importing the component.

```javascript
import Basic from "../../_samples/ai/TextArea/Basic/Basic.md";

<Basic />
```

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

### Basic DatePicker State Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/main/DatePicker/State/State.md

This example shows a basic DatePicker controlled by its own state. It renders a DatePicker and a button to reset its value.

```jsx
import React, { useState } from "react";
import { DatePicker } from "@ui5/webcomponents-react";

const BasicDatePickerState = () => {
  const [value, setValue] = useState(new Date());

  const handleChange = (event) => {
    setValue(event.detail.value);
  };

  const handleReset = () => {
    setValue(null);
  };

  return (
    <div>
      <DatePicker
        value={value}
        onChange={handleChange}
        primaryCalendarType="Gregorian"
        formatPattern="yyyy-MM-dd"
        placeholder="Select Date"
      />
      <button onClick={handleReset}>Reset Date</button>
    </div>
  );
};

export default BasicDatePickerState;
```

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

### Side Content Position - Start

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/fiori/DynamicSideContent/SideContentPosition/SideContentPosition.md

Sets the side content to appear on the start (left) side of the main content. This is the default behavior.

```html
<ui5-dynamic-side-content id="DSC1" side-content-position="Start">
	<div data-slot="content">
		<ui5-title>Main Content</ui5-title>
	</div>
	<div data-slot="sideContent">
		<ui5-title>Side Content</ui5-title>
	</div>
</ui5-dynamic-side-content>
```

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

### TabContainer with Start and End Overflow Mode

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/main/TabContainer/TabContainer.mdx

Illustrates configuring the TabContainer's overflow mode to handle tabs at both the 'Start' and 'End'.

```javascript
import OverflowModeStartAndEnd from "../../../_samples/main/TabContainer/OverflowModeStartAndEnd/OverflowModeStartAndEnd.md";

<OverflowModeStartAndEnd />
```

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

### Install Cypress and UI5 Web Components CT Package

Source: https://github.com/ui5/webcomponents/blob/main/packages/cypress-ct-ui5-webc/README.md

Install the necessary dependencies for Cypress component testing with UI5 Web Components.

```bash
npm install -D cypress @ui5/cypress-ct-ui5-webc
```

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

### ShellBar for Trial Environments

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx

Demonstrates a ShellBar configuration specifically tailored for trial environments, including trial tags and a countdown for remaining days. This setup helps users identify and manage trial instances.

```javascript
import TrialExample from "../../../_samples/fiori/ShellBar/TrialExample/TrialExample.md";
```

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

### Using SAP Business Suite Icons

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/main/Icon.mdx

Demonstrates rendering icons from the SAP Business Suite icon package. Ensure `@ui5/webcomponents-icons-business-suite` is installed.

```html
<ui5-icon name="business-suite-account"></ui5-icon>
```

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

### Indeterminate CheckBox Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/main/CheckBox/Indeterminate/Indeterminate.md

This example shows how to render a CheckBox in an indeterminate state. No specific imports are required beyond the standard CheckBox usage.

```javascript
import CheckBox from "@ui5/webcomponents/dist/CheckBox";

const indeterminateCheckBox = new CheckBox();
indeterminateCheckBox.indeterminate = true;
indeterminateCheckBox.text = "Indeterminate";

document.body.appendChild(indeterminateCheckBox);
```

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

### UI5 Web Component Usage Example

Source: https://github.com/ui5/webcomponents/blob/main/docs/07-development/11-deep-dive-and-best-practices.md

Example of how to use the `my-filter-component` with a filter property and child items. Only items matching the filter will be rendered.

```html
<my-filter-component filter="John">
	<my-filter-item name="John Smith"></my-filter-item>
	<my-filter-item name="Jane Doe"></my-filter-item>
	<my-filter-item name="Jack Johnson"></my-filter-item>
</my-filter-component>
```

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

### Basic AI Input Sample

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/ai/Input.mdx

Demonstrates the basic usage of the AI Input component. No specific setup or imports are required beyond the component's own definition.

```javascript
import Basic from "../../_samples/ai/Input/Basic/Basic.md";

<Basic />
```

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

### Create UI5 Web Components Package with yarn

Source: https://github.com/ui5/webcomponents/blob/main/packages/create-package/README.md

Use this command to initialize a new UI5 Web Components package using yarn. Specify options like package name and test setup.

```bash
yarn create @ui5/webcomponents-package [OPTIONS]
Options:
    --name <string>                      - defines the package name
    --test-setup <"cypress" | "manual">  - defines whether the predefined test setup should be added or it will be configured manually.
    --skip                               - skips configuration and generates package with a default value for each parameter that wasn't passed
```

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

### Controlled DatePicker State Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/main/DatePicker/State/State.md

This example demonstrates a DatePicker controlled by an external state. The parent component manages the date value and passes it down as a prop.

```jsx
import React, { useState } from "react";
import { DatePicker } from "@ui5/webcomponents-react";

const ControlledDatePickerState = () => {
  const [controlledValue, setControlledValue] = useState("2023-10-26");

  const handleControlledChange = (event) => {
    setControlledValue(event.detail.value);
  };

  return (
    <div>
      <DatePicker
        value={controlledValue}
        onChange={handleControlledChange}
        primaryCalendarType="Gregorian"
        formatPattern="yyyy-MM-dd"
        placeholder="Select Date"
      />
      <p>Current controlled value: {controlledValue}</p>
    </div>
  );
};

export default ControlledDatePickerState;
```

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

### Commit Message Format - Example

Source: https://github.com/ui5/webcomponents/blob/main/AGENTS.md

An example of a commit message following the Conventional Commits format, including type, scope, description, body, and footer.

```git
fix(ui5-button): correct focus outline on tab key

The button now receives proper focus outline when
navigating with the tab key.

Fixes #42
```

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

### Basic Timeline Sample

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/fiori/Timeline/Timeline.mdx

Demonstrates the fundamental usage of the Timeline component. No specific setup is required beyond including the component.

```javascript
import Basic from "../../../_samples/fiori/Timeline/Basic/Basic.md";

<Basic />
```

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

### Basic Token in Multi-Input Example

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/main/Token/TokenInMultiInput/TokenInMultiInput.md

Shows a basic implementation of a Multi-Input field with tokens. This example requires importing the necessary components and defining the HTML structure.

```html
<ui5-multi-input placeholder="Add token...">
  <ui5-token text="Token 1"></ui5-token>
  <ui5-token text="Token 2"></ui5-token>
</ui5-multi-input>
```

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

### Basic UXC Integration Setup

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_samples/patterns/UXCIntegration/Basic/Basic.md

Import HTML, CSS, and JavaScript content for UXC components and render them using the Editor component. Ensure all necessary files are correctly imported.

```javascript
import html from '!!raw-loader!./sample.html';
import css from '!!raw-loader!./main.css';
import js from '!!raw-loader!./main.js';

<Editor html={html} js={js} css={css} />
```

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

### Media Gallery Basic Sample

Source: https://github.com/ui5/webcomponents/blob/main/packages/website/docs/_components_pages/fiori/MediaGallery/MediaGallery.mdx

Demonstrates the basic usage of the Media Gallery component.

```javascript
import Basic from "../../../_samples/fiori/MediaGallery/Basic/Basic.md";

<Basic />
```