### Build and Run STDF Demo with Bun

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/contribution_en.md

This snippet outlines the steps to clone the STDF repository, build the 'rollup-plugin-stdf-icon' package, install dependencies, and start the STDF demo using the Bun package manager.

```shell
## 1. Clone the STDF repository
git clone git@github.com:any-tdf/stdf.git
cd stdf

## 2. Build the rollup-plugin-stdf-icon package
cd packages/rollup-plugin-stdf-icon
## Install dependencies
bun i
## Build package
bun run build

## 3. Debug STDF
cd packages/stdf
## Install dependencies
bun i
## Start Demo
bun dev
```

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

### Local STDF Demo Setup with Bun

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/contribution.md

This snippet provides instructions for setting up and running the STDF demo locally using Bun. It covers cloning the repository, building the 'rollup-plugin-stdf-icon' package, installing dependencies, and starting the development server.

```shell
## 1. 克隆 STDF 仓库并进入
git clone git@github.com:any-tdf/stdf.git
cd stdf

## 2. 构建 rollup-plugin-stdf-icon 包
cd packages/rollup-plugin-stdf-icon
## 安装依赖
bun i
## 构建包
bun run build

## 3. 调试 STDF
cd packages/stdf
## 安装依赖
bun i
## 启动 Demo
bun dev
```

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

### Build and Run STDF Demo with Yarn

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/contribution_en.md

This snippet outlines the steps to clone the STDF repository, build the 'rollup-plugin-stdf-icon' package, install dependencies, and start the STDF demo using the Yarn package manager.

```shell
## 1. Clone the STDF repository
git clone git@github.com:any-tdf/stdf.git
cd stdf

## 2. Build the rollup-plugin-stdf-icon package
cd packages/rollup-plugin-stdf-icon
## Install dependencies
yarn
## Build package
yarn build

## 3. Debug STDF
cd packages/stdf
## Install dependencies
yarn
## Start Demo
yarn dev
```

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

### Build and Run STDF Demo with pnpm

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/contribution_en.md

This snippet outlines the steps to clone the STDF repository, build the 'rollup-plugin-stdf-icon' package, install dependencies, and start the STDF demo using the pnpm package manager.

```shell
## 1. Clone the STDF repository
git clone git@github.com:any-tdf/stdf.git
cd stdf

## 2. Build the rollup-plugin-stdf-icon package
cd packages/rollup-plugin-stdf-icon
## Install dependencies
pnpm i
## Build package
pnpm build

## 3. Debug STDF
cd packages/stdf
## Install dependencies
pnpm i
## Start Demo
pnpm dev
```

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

### Build and Run STDF Demo with npm

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/contribution_en.md

This snippet outlines the steps to clone the STDF repository, build the 'rollup-plugin-stdf-icon' package, install dependencies, and start the STDF demo using the npm package manager.

```shell
## 1. Clone the STDF repository
git clone git@github.com:any-tdf/stdf.git
cd stdf

## 2. Build the rollup-plugin-stdf-icon package
cd packages/rollup-plugin-stdf-icon
## Install dependencies
npm i
## Build package
npm run build

## 3. Debug STDF
cd packages/stdf
## Install dependencies
npm i
## Start Demo
npm run dev
```

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

### Install and Run SvelteKit Project

Source: https://github.com/any-tdf/stdf/blob/main/packages/create-stdf/templates/skt/README.md

Commands to install project dependencies and start the development server for a SvelteKit project. Assumes Node.js and npm are installed.

```bash
npm i

npm run dev
```

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

### Local STDF Demo Setup with npm

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/contribution.md

This snippet outlines the process for setting up and running the STDF demo locally using npm. It includes cloning the repository, building a specific package, installing dependencies, and starting the development server.

```shell
## 1. 克隆 STDF 仓库并进入
git clone git@github.com:any-tdf/stdf.git
cd stdf

## 2. 构建 rollup-plugin-stdf-icon 包
cd packages/rollup-plugin-stdf-icon
## 安装依赖
npm i
## 构建包
npm run build

## 3. 调试 STDF
cd packages/stdf
## 安装依赖
npm i
## 启动 Demo
npm run dev
```

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

### Start Development Server with Package Managers

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/quickStart.md

Starts the development server for the project using different package managers. This command allows you to preview your application during development.

```sh
pnpm dev
```

```sh
npm run dev
```

```sh
bun dev
```

```sh
yarn dev
```

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

### Install Tailwind CSS and Vite Plugins with Package Managers

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/quickStart_en.md

Commands to install Tailwind CSS and its Vite plugin as development dependencies. These are crucial for styling STDF components.

```sh
pnpm i tailwindcss @tailwindcss/vite -D
```

```sh
npm i tailwindcss @tailwindcss/vite -D
```

```sh
bun i tailwindcss @tailwindcss/vite -D
```

```sh
yarn add tailwindcss @tailwindcss/vite -D
```

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

### Local STDF Demo Setup with pnpm

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/contribution.md

This snippet details the steps to clone the STDF repository, build the 'rollup-plugin-stdf-icon' package, and then set up and run the STDF demo using pnpm. It's essential for local development and testing changes.

```shell
## 1. 克隆 STDF 仓库并进入
git clone git@github.com:any-tdf/stdf.git
cd stdf

## 2. 构建 rollup-plugin-stdf-icon 包
cd packages/rollup-plugin-stdf-icon
## 安装依赖
pnpm i
## 构建包
pnpm build

## 3. 调试 STDF
cd packages/stdf
## 安装依赖
pnpm i
## 启动 Demo
pnpm dev
```

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

### Local STDF Demo Setup with Yarn

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/contribution.md

This snippet details the steps to clone the STDF repository, build the 'rollup-plugin-stdf-icon' package, and then set up and run the STDF demo using Yarn. This is crucial for local development and testing.

```shell
## 1. 克隆 STDF 仓库并进入
git clone git@github.com:any-tdf/stdf.git
cd stdf

## 2. 构建 rollup-plugin-stdf-icon 包
cd packages/rollup-plugin-stdf-icon
## 安装依赖
yarn
## 构建包
yarn build

## 3. 调试 STDF
cd packages/stdf
## 安装依赖
yarn
## 启动 Demo
yarn dev
```

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

### Import and Use STDF Button Component in Svelte

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/quickStart_en.md

Example of how to import and use the Button component from the 'stdf' package within a Svelte file. This demonstrates basic component integration.

```svelte
<script lang="ts">
	import { Button } from 'stdf';
</script>

<Button>Click me</Button>
```

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

### Install Tailwind CSS and Vite Plugin

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/quickStart.md

Installs Tailwind CSS and its Vite plugin as development dependencies. These are required for styling the application and integrating with the Vite build process.

```sh
pnpm i tailwindcss @tailwindcss/vite -D
```

```sh
npm i tailwindcss @tailwindcss/vite -D
```

```sh
bun add tailwindcss @tailwindcss/vite -D
```

```sh
yarn add tailwindcss @tailwindcss/vite -D
```

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

### Create STDF Project with Package Managers

Source: https://github.com/any-tdf/stdf/blob/main/README.md

This section provides commands to create a new STDF project using various package managers including pnpm, npm, bun, and yarn. These commands initiate the project setup process, allowing developers to quickly start building applications with STDF.

```sh
pnpm create stdf@latest
```

```sh
npm create stdf@latest
# or
npm init stdf@latest
# or
npx create-stdf@latest
```

```sh
bun create stdf@latest
```

```sh
yarn create stdf@latest
```

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

### Install rollup-plugin-stdf-icon with bun

Source: https://github.com/any-tdf/stdf/blob/main/packages/rollup-plugin-stdf-icon/README.md

Installs the rollup-plugin-stdf-icon package as a development dependency using bun.

```sh
bun add rollup-plugin-stdf-icon -D
```

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

### Use STDF Button Component in Svelte

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/quickStart.md

Demonstrates how to import and use the STDF Button component within a Svelte file. This is a basic example of integrating STDF components into your application.

```svelte
<script lang="ts">
	import { Button } from 'stdf';
</script>

<Button>点击我</Button>
```

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

### Install Carbon Icon Library (bun)

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/icon_en.md

Installs the Carbon icon library using bun. This allows the use of Carbon icons through the Iconify integration in STDF.

```sh
bun i -D @iconify-json/carbon
```

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

### Install Solar Icon Library (bun)

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/icon_en.md

Installs the Solar icon library using bun. This allows the use of Solar icons through the Iconify integration in STDF.

```sh
bun i -D @iconify-json/solar
```

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

### Install rollup-plugin-stdf-icon with yarn

Source: https://github.com/any-tdf/stdf/blob/main/packages/rollup-plugin-stdf-icon/README.md

Installs the rollup-plugin-stdf-icon package as a development dependency using yarn.

```sh
yarn add rollup-plugin-stdf-icon -D
```

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

### Create Project using Svelte CLI

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/quickStart.md

Creates a new project using the Svelte CLI. This is an alternative method for project initialization, leveraging Svelte's built-in tooling.

```sh
pnpm dlx sv create
```

```sh
npx sv create
```

```sh
bunx sv create
```

```sh
yarn dlx sv create
```

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

### Install rollup-plugin-md-ts with Package Managers

Source: https://github.com/any-tdf/stdf/blob/main/packages/rollup-plugin-md-ts/README.md

Install the rollup-plugin-md-ts package as a development dependency using various package managers like pnpm, npm, bun, and yarn.

```sh
pnpm i rollup-plugin-md-ts -D
```

```sh
npm i rollup-plugin-md-ts -D
```

```sh
bun add rollup-plugin-md-ts -D
```

```sh
yarn add rollup-plugin-md-ts -D
```

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

### Install rollup-plugin-stdf-icon with Package Managers

Source: https://github.com/any-tdf/stdf/blob/main/packages/rollup-plugin-stdf-icon/README_CN.md

Instructions for installing the rollup-plugin-stdf-icon package using various package managers like pnpm, npm, bun, and yarn. This is a development dependency.

```sh
pnpm i rollup-plugin-stdf-icon -D
```

```sh
npm i rollup-plugin-stdf-icon -D
```

```sh
bun add rollup-plugin-stdf-icon -D
```

```sh
yarn add rollup-plugin-stdf-icon -D
```

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

### Install Solar Icon Library (npm)

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/icon_en.md

Installs the Solar icon library using npm. This allows the use of Solar icons through the Iconify integration in STDF.

```sh
npm i -D @iconify-json/solar
```

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

### Install rollup-plugin-stdf-icon with pnpm

Source: https://github.com/any-tdf/stdf/blob/main/packages/rollup-plugin-stdf-icon/README.md

Installs the rollup-plugin-stdf-icon package as a development dependency using pnpm.

```sh
pnpm i rollup-plugin-stdf-icon -D
```

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

### Create STDF Project with PNPM

Source: https://github.com/any-tdf/stdf/blob/main/readme/README_de_DE.md

This command initiates the creation of a new project using the STDF scaffolding tool with the PNPM package manager. It is the recommended way to start a new STDF project.

```sh
pnpm create stdf@latest
```

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

### Install Carbon Icon Library (pnpm)

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/icon_en.md

Installs the Carbon icon library using pnpm. This allows the use of Carbon icons through the Iconify integration in STDF.

```sh
pnpm i -D @iconify-json/carbon
```

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

### Install rollup-plugin-stdf-icon with npm

Source: https://github.com/any-tdf/stdf/blob/main/packages/rollup-plugin-stdf-icon/README.md

Installs the rollup-plugin-stdf-icon package as a development dependency using npm.

```sh
npm i rollup-plugin-stdf-icon -D
```

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

### Install Solar Icon Library (pnpm)

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/icon_en.md

Installs the Solar icon library using pnpm. This allows the use of Solar icons through the Iconify integration in STDF.

```sh
pnpm i -D @iconify-json/solar
```

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

### Scaffold STDF Project with CLI

Source: https://context7.com/any-tdf/stdf/llms.txt

Scaffold a new STDF project using the create-stdf CLI tool. Supports interactive prompts for project setup and custom options like template, language, and icon usage.

```bash
# Using pnpm
pnpm create stdf@latest

# Using npm
npm create stdf@latest

# Using bun
bun create stdf@latest

# Create project with specific options
pnpm create stdf@latest my-app --template sktt --language en_US --icon-usage stdf-icon
```

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

### Install Carbon Icon Library (npm)

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/icon_en.md

Installs the Carbon icon library using npm. This allows the use of Carbon icons through the Iconify integration in STDF.

```sh
npm i -D @iconify-json/carbon
```

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

### Install Carbon Icon Library (yarn)

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/icon_en.md

Installs the Carbon icon library using yarn. This allows the use of Carbon icons through the Iconify integration in STDF.

```sh
yarn add @iconify-json/carbon
```

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

### Install STDF in Existing Svelte Project

Source: https://context7.com/any-tdf/stdf/llms.txt

Install the STDF component library and its peer dependencies (Svelte and Tailwind CSS) into an existing Svelte project. Includes configuration for Tailwind CSS.

```bash
# Install STDF and its peer dependencies
pnpm add stdf
pnpm add -D svelte@^5.0.0 tailwindcss@^4.0.0
```

```css
/* app.css */
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));
@theme {
  --color-primary-50: oklch(0.979 0.01 267.36);
  --color-primary-100: oklch(0.95 0.024 270.343);
  --color-primary-200: oklch(0.847 0.074 271.188);
  --color-primary-300: oklch(0.741 0.13 272.232);
  --color-primary-400: oklch(0.634 0.193 271.595);
  --color-primary-500: oklch(0.536 0.252 268.66);
  --color-primary: oklch(0.467 0.296 264.886);
  --color-primary-600: oklch(0.398 0.309 263.391);
  --color-primary-700: oklch(0.329 0.255 262.881);
  --color-primary-800: oklch(0.271 0.196 263.273);
  --color-primary-900: oklch(0.228 0.142 265.494);
  --color-primary-950: oklch(0.15 0.088 266.339);
}
@source "../../node_modules/stdf";
```

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

### Install Solar Icon Library (yarn)

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/icon_en.md

Installs the Solar icon library using yarn. This allows the use of Solar icons through the Iconify integration in STDF.

```sh
yarn add @iconify-json/solar
```

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

### Bash: Install STDF SVG Icon Plugin

Source: https://context7.com/any-tdf/stdf/llms.txt

Provides the command to install the `rollup-plugin-stdf-icon` package as a development dependency using pnpm. This plugin is essential for integrating SVG icons into Vite projects.

```bash
# Install the plugin
pnpm add -D rollup-plugin-stdf-icon
```

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

### Install Iconify Tailwind 4 Plugin (bun)

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/icon_en.md

Installs the Iconify Tailwind 4 plugin using bun. This is a development dependency required for integrating Iconify icons with Tailwind CSS.

```sh
bun i -D @iconify/tailwind4
```

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

### Svelte: Internationalization Setup with STDF Languages

Source: https://context7.com/any-tdf/stdf/llms.txt

Explains how to configure the global language context for STDF components using Svelte's `setContext`. It shows how to import and set different language packs like Chinese, English, and Japanese. This setup ensures all child components correctly display localized content.

```svelte
<script>
  import { setContext } from 'svelte';
  import { zh_CN, en_US, ja_JP } from 'stdf/lang';

  // Set global language context
  setContext('STDF_lang', zh_CN);

  // Or use English
  // setContext('STDF_lang', en_US);

  // Or use Japanese
  // setContext('STDF_lang', ja_JP);
</script>

<!-- All child components will use the configured language -->
```

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

### Install Iconify Tailwind 4 Plugin (pnpm)

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/icon_en.md

Installs the Iconify Tailwind 4 plugin using pnpm. This is a development dependency required for integrating Iconify icons with Tailwind CSS.

```sh
pnpm i -D @iconify/tailwind4
```

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

### Install Iconify Tailwind 4 Plugin (npm)

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/icon_en.md

Installs the Iconify Tailwind 4 plugin using npm. This is a development dependency required for integrating Iconify icons with Tailwind CSS.

```sh
npm i -D @iconify/tailwind4
```

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

### STDF Picker Component for Selectable Lists in Svelte

Source: https://context7.com/any-tdf/stdf/llms.txt

Demonstrates the STDF Picker component for creating scrollable lists from which users can select values. The example shows how to define the data, control visibility, set display options like `showRow` and `labelKey`, and handle selection confirmation and cancellation. The `onconfirm` event provides selected items and their indexes.

```svelte
<script>
  import { Picker } from 'stdf';

  let pickerVisible = false;
  let selectedItems = [];
  let selectedIndexes = [];

  const data = [
    { label: 'Option 1', value: 1 },
    { label: 'Option 2', value: 2 },
    { label: 'Option 3', value: 3 },
    { label: 'Option 4', value: 4 }
  ];

  const handleConfirm = (items, indexes) => {
    selectedItems = items;
    selectedIndexes = indexes;
    pickerVisible = false;
    console.log('Selected:', items, indexes);
  };

  const handleCancel = () => {
    pickerVisible = false;
  };
</script>

<Picker
  bind:visible={pickerVisible}
  {data}
  showRow={5}
  labelKey="label"
  title="Select Option"
  cancelText="Cancel"
  confirmText="Confirm"
  onconfirm={handleConfirm}
  oncancel={handleCancel}
/>

<button onclick={() => pickerVisible = true}>
  Show Picker
</button>

```

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

### Configure Vite with rollup-plugin-md-ts

Source: https://github.com/any-tdf/stdf/blob/main/packages/rollup-plugin-md-ts/README.md

Integrate the rollup-plugin-md-ts into your Vite project configuration (vite.config.js or vite.config.ts). This example shows how to import the plugin and configure its 'marked' and 'include' options.

```javascript
import md from 'rollup-plugin-md-ts';

export default defineConfig({
    // ...
	plugins: [
		// ...
		md({
			marked: {},
			include: [ './src/**/*.md']
		})
		// ...
	],
	// ...
});
```

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

### Install Iconify Tailwind 4 Plugin (yarn)

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/icon_en.md

Installs the Iconify Tailwind 4 plugin using yarn. This is a development dependency required for integrating Iconify icons with Tailwind CSS.

```sh
yarn add @iconify/tailwind4
```

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

### Configure Tailwind CSS with STDF Components

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/quickStart.md

Configures Tailwind CSS in the main CSS file, including directives for dark mode, theme colors, and using the `@source` directive to automatically detect STDF Svelte components for styling.

```css
/* app.css */
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));
@theme {
	/* 主题色 */
	--color-primary-50: oklch(0.979 0.01 267.36);
	--color-primary-100: oklch(0.95 0.024 270.343);
	--color-primary-200: oklch(0.847 0.074 271.188);
	--color-primary-300: oklch(0.741 0.13 272.232);
	--color-primary-400: oklch(0.634 0.193 271.595);
	--color-primary-500: oklch(0.536 0.252 268.66);
	--color-primary: oklch(0.467 0.296 264.886);
	--color-primary-700: oklch(0.397 0.26 264.877);
	--color-primary-800: oklch(0.331 0.221 264.833);
	--color-primary-900: oklch(0.26 0.178 264.428);
	--color-primary-950: oklch(0.192 0.13 266.64);

	--color-dark-50: oklch(0.995 0.012 101.474);
	--color-dark-100: oklch(0.986 0.025 97.107);
	--color-dark-200: oklch(0.965 0.059 95.884);
	--color-dark-300: oklch(0.938 0.089 92.952);
	--color-dark-400: oklch(0.91 0.114 89.711);
	--color-dark-500: oklch(0.88 0.136 86.375);
	--color-dark: oklch(0.845 0.153 80.597);
	--color-dark-700: oklch(0.71 0.137 75.734);
	--color-dark-800: oklch(0.58 0.118 70.166);
	--color-dark-900: oklch(0.449 0.097 65.209);
	--color-dark-950: oklch(0.321 0.074 62.379);

	--color-primaryBlack: oklch(0.116 0.054 267.087);
	--color-primaryWhite: oklch(0.961 0.001 286.375);
	--color-darkBlack: oklch(0.183 0.035 86.634);
	--color-darkWhite: oklch(0.962 0.001 17.178);

	/* 功能色 */
	--color-success: oklch(0.704 0.142 167.084);
	--color-warning: oklch(0.558 0.154 47.186);
	--color-error: oklch(0.564 0.223 28.46);
	--color-info: oklch(0.482 0.14 261.518);

	/* 扩展色 */
	--color-extend0: oklch(0.703 0.149 235.059);
	--color-Twitter: oklch(0.703 0.149 235.059);
	--color-extend1: oklch(0.702 0.194 38.137);
	--color-Svelte: oklch(0.702 0.194 38.137);
	--color-extend2: oklch(0.482 0.107 161.212);
	--color-Starbucks: oklch(0.482 0.107 161.212);

	/* 中性色 */
	--color-black: oklch(0 0 0);
	--color-white: oklch(1 0 0);
	--color-gray-50: oklch(0.961 0 0);
	--color-gray-100: oklch(0.925 0 0);
	--color-gray-200: oklch(0.845 0 0);
	--color-gray-300: oklch(0.767 0 0);
	--color-gray-400: oklch(0.683 0 0);
	--color-gray-500: oklch(0.6 0 0);
	--color-gray-600: oklch(0.51 0 0);
	--color-gray-700: oklch(0.42 0 0);
	--color-gray-800: oklch(0.321 0 0);
	--color-gray-900: oklch(0.218 0 0);
	--color-gray-950: oklch(0.159 0 0);
	--color-transparent: transparent;
}
@source "../node_modules/stdf/**/*.svelte";
```

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

### Configure rollup-plugin-stdf-icon in vite.config.js

Source: https://github.com/any-tdf/stdf/blob/main/packages/rollup-plugin-stdf-icon/README.md

Basic configuration of the rollup-plugin-stdf-icon in a Vite project's configuration file. This example shows how to import and include the plugin in the Vite build process.

```js
import svgSprite from 'rollup-plugin-stdf-icon';

export default defineConfig({
	// ...
	plugins: [
		// ...
		svgSprite(),
		// ...
	],
	// ...
});
```

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

### Configure STDF Tailwind CSS with Custom Variants and Theme

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/guide/quickStart_en.md

CSS configuration for Tailwind CSS to integrate with STDF components. It includes importing Tailwind, setting dark mode, defining theme colors, and using the `@source` directive to detect STDF components.

```css
/* app.css */
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));
@theme {
	/* Theme Colors */
	--color-primary-50: oklch(0.979 0.01 267.36);
	--color-primary-100: oklch(0.95 0.024 270.343);
	--color-primary-200: oklch(0.847 0.074 271.188);
	--color-primary-300: oklch(0.741 0.13 272.232);
	--color-primary-400: oklch(0.634 0.193 271.595);
	--color-primary-500: oklch(0.536 0.252 268.66);
	--color-primary: oklch(0.467 0.296 264.886);
	--color-primary-700: oklch(0.397 0.26 264.877);
	--color-primary-800: oklch(0.331 0.221 264.833);
	--color-primary-900: oklch(0.26 0.178 264.428);
	--color-primary-950: oklch(0.192 0.13 266.64);

	--color-dark-50: oklch(0.995 0.012 101.474);
	--color-dark-100: oklch(0.986 0.025 97.107);
	--color-dark-200: oklch(0.965 0.059 95.884);
	--color-dark-300: oklch(0.938 0.089 92.952);
	--color-dark-400: oklch(0.91 0.114 89.711);
	--color-dark-500: oklch(0.88 0.136 86.375);
	--color-dark: oklch(0.845 0.153 80.597);
	--color-dark-700: oklch(0.71 0.137 75.734);
	--color-dark-800: oklch(0.58 0.118 70.166);
	--color-dark-900: oklch(0.449 0.097 65.209);
	--color-dark-950: oklch(0.321 0.074 62.379);

	--color-primaryBlack: oklch(0.116 0.054 267.087);
	--color-primaryWhite: oklch(0.961 0.001 286.375);
	--color-darkBlack: oklch(0.183 0.035 86.634);
	--color-darkWhite: oklch(0.962 0.001 17.178);

	/* Functional Colors */
	--color-success: oklch(0.704 0.142 167.084);
	--color-warning: oklch(0.558 0.154 47.186);
	--color-error: oklch(0.564 0.223 28.46);
	--color-info: oklch(0.482 0.14 261.518);

	/* Extended Colors */
	--color-extend0: oklch(0.703 0.149 235.059);
	--color-Twitter: oklch(0.703 0.149 235.059);
	--color-extend1: oklch(0.702 0.194 38.137);
	--color-Svelte: oklch(0.702 0.194 38.137);
	--color-extend2: oklch(0.482 0.107 161.212);
	--color-Starbucks: oklch(0.482 0.107 161.212);

	/* Neutral Colors */
	--color-black: oklch(0 0 0);
	--color-white: oklch(1 0 0);
	--color-gray-50: oklch(0.961 0 0);
	--color-gray-100: oklch(0.925 0 0);
	--color-gray-200: oklch(0.845 0 0);
	--color-gray-300: oklch(0.767 0 0);
	--color-gray-400: oklch(0.683 0 0);
	--color-gray-500: oklch(0.6 0 0);
	--color-gray-600: oklch(0.51 0 0);
	--color-gray-700: oklch(0.42 0 0);
	--color-gray-800: oklch(0.321 0 0);
	--color-gray-900: oklch(0.218 0 0);
	--color-gray-950: oklch(0.159 0 0);
	--color-transparent: transparent;
}
@source "../node_modules/stdf/**/*.svelte";
```

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

### STDF Switch Component for Toggling Options in Svelte

Source: https://context7.com/any-tdf/stdf/llms.txt

Provides examples of using the STDF Switch component for binary options. It covers basic toggle functionality, themed switches with custom sizes, and switches with a loading state. Key props include `bind:checked`, `size`, `state`, `disabled`, and `loading`. The `onchange` event handler is used to capture the switch's state.

```svelte
<script>
  import { Switch } from 'stdf';

  let enabled = false;
  let notifications = true;

  const handleChange = (checked) => {
    console.log('Switch state:', checked);
  };
</script>

<!-- Basic switch -->
<Switch bind:checked={enabled} onchange={handleChange} />

<!-- Themed switch with custom size -->
<Switch
  bind:checked={notifications}
  size="lg"
  state="theme"
  disabled={false}
/>

<!-- Switch with loading state -->
<Switch
  bind:checked={enabled}
  loading={true}
  size="md"
/>

```

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

### JavaScript: Configure STDF SVG Icon Plugin in Vite

Source: https://context7.com/any-tdf/stdf/llms.txt

Illustrates how to configure the `rollup-plugin-stdf-icon` within a `vite.config.js` file. It shows both the default configuration and a custom setup for handling multiple sprite files with different input and output paths, and options for preserving or removing color attributes.

```javascript
// vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import svgSprite from 'rollup-plugin-stdf-icon';

export default defineConfig({
  plugins: [
    svelte(),
    // Default configuration for SvelteKit
    svgSprite(),
    // Or custom configuration for multiple sprite files
    svgSprite([
      {
        inFile: 'src/lib/icons',
        outFile: 'static/fonts',
        fileName: 'icon',
        simple: true // Remove color attributes
      },
      {
        inFile: 'src/lib/colored-icons',
        outFile: 'static/fonts',
        fileName: 'colored',
        simple: false // Preserve colors
      }
    ])
  ]
});

// Place SVG files in the configured input directory (default: `src/lib/symbol`), and the plugin automatically merges them into a symbol file at `static/fonts/symbol.svg`.
```

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

### STDF Calendar Component for Date Selection in Svelte

Source: https://context7.com/any-tdf/stdf/llms.txt

Explains how to use the STDF Calendar component for date picking, including range selection. The example shows setting the calendar's visibility, defining the selection mode, setting minimum and maximum dates, and handling date confirmation. The `onconfirm` event returns the selected dates.

```svelte
<script>
  import { Calendar } from 'stdf';

  let calendarVisible = false;
  let selectedDates = [];

  const handleConfirm = (dates) => {
    selectedDates = dates;
    calendarVisible = false;
    console.log('Selected dates:', dates);
  };

  const today = new Date();
  const maxDate = new Date(today.getFullYear(), today.getMonth() + 3, 0);
</script>

<Calendar
  bind:visible={calendarVisible}
  mode="range"
  minDate={today}
  maxDate={maxDate}
  startSunday={false}
  confirmText="Confirm"
  selectedText="Selected"
  onconfirm={handleConfirm}
  onclose={() => calendarVisible = false}
/>

<button onclick={() => calendarVisible = true}>
  Select Date Range
</button>

```

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

### STDF Dialog Component for User Confirmation in Svelte

Source: https://context7.com/any-tdf/stdf/llms.txt

Illustrates the usage of the STDF Dialog component for modal user confirmation. It includes examples of setting dialog titles, content, button texts, and handling confirm/cancel actions. The component relies on the `visible` prop to control its display and `onprimary`, `onsecondary`, and `onclose` events.

```svelte
<script>
  import { Dialog } from 'stdf';

  let dialogVisible = false;

  const handleConfirm = () => {
    console.log('User confirmed');
    dialogVisible = false;
  };

  const handleCancel = () => {
    console.log('User cancelled');
    dialogVisible = false;
  };
</script>

<Dialog
  bind:visible={dialogVisible}
  title="Confirm Action"
  content="Are you sure you want to proceed with this action?"
  primaryText="Confirm"
  secondaryText="Cancel"
  onprimary={handleConfirm}
  onsecondary={handleCancel}
  onclose={() => dialogVisible = false}
/>

<button onclick={() => dialogVisible = true}>Show Dialog</button>

```

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

### Create STDF Project with BUN

Source: https://github.com/any-tdf/stdf/blob/main/readme/README_de_DE.md

This command illustrates how to bootstrap a new STDF project using the BUN runtime environment. It utilizes the `bun create` command for package initialization.

```sh
bun create stdf@latest
```

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

### Create STDF Project with Custom Options (SvelteKit, Chinese, Iconify)

Source: https://github.com/any-tdf/stdf/blob/main/packages/create-stdf/README_CN.md

This snippet illustrates creating an STDF project with a specific template ('skt' for SvelteKit & Tailwind), language ('zh_CN' for Simplified Chinese prompts), and icon usage ('iconify'). It demonstrates the use of shorthand options for template, language, and icon. Supports multiple package managers.

```sh
pnpm create stdf@latest my-app --template skt --language zh_CN --icon-usage iconify
# or
pnpm create stdf@latest my-app --t skt --l zh_CN --i iconify
```

```sh
npm create stdf@latest my-app --template skt --language zh_CN --icon-usage iconify
# or
npm create stdf@latest my-app --t skt --l zh_CN --i iconify
```

```sh
bun create stdf@latest my-app --template skt --language zh_CN --icon-usage iconify
# or
bun create stdf@latest my-app --t skt --l zh_CN --i iconify
```

```sh
yarn create stdf@latest my-app --template skt --language zh_CN --icon-usage iconify
# or
yarn create stdf@latest my-app --t skt --l zh_CN --i iconify
```

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

### Create STDF Project with NPM

Source: https://github.com/any-tdf/stdf/blob/main/readme/README_de_DE.md

These commands demonstrate how to create a new STDF project using the npm package manager. You can use `npm create` or `npm init` followed by the STDF package name.

```sh
npm create stdf@latest
# oder
npm init stdf@latest
# oder
npx create-stdf@latest
```

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

### Create STDF Project with YARN

Source: https://github.com/any-tdf/stdf/blob/main/readme/README_de_DE.md

This command shows the process of generating a new STDF project using the YARN package manager. It employs the `yarn create` command for project scaffolding.

```sh
yarn create stdf@latest
```

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

### Create STDF Project using various package managers

Source: https://github.com/any-tdf/stdf/blob/main/readme/README_es_ES.md

This snippet demonstrates how to initiate a new STDF project using different package managers like pnpm, npm, bun, and yarn. It utilizes the respective package manager's create command to scaffold a new project.

```sh
pnpm create stdf@latest
```

```sh
npm create stdf@latest
# o
npm init stdf@latest
# o
npx create-stdf@latest
```

```sh
bun create stdf@latest
```

```sh
yarn create stdf@latest
```

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

### Create STDF Project with Specified Project Name (Multiple Package Managers)

Source: https://github.com/any-tdf/stdf/blob/main/packages/create-stdf/README_CN.md

This code shows how to create a new STDF project with a specific project name, using default template, language, and icon settings. It utilizes various package managers to execute the 'create-stdf' command followed by the desired project name.

```sh
pnpm create stdf@latest my-app
```

```sh
npm create stdf@latest my-app
```

```sh
bun create stdf@latest my-app
```

```sh
yarn create stdf@latest my-app
```

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

### JavaScript: Dynamic Theme Switching with STDF

Source: https://context7.com/any-tdf/stdf/llms.txt

Demonstrates how to dynamically switch between predefined and custom themes using the `stdf/theme` module. It covers enabling dark mode, toggling it, and applying a custom theme object with specific color palettes. Dependencies include the `stdf/theme` module.

```javascript
// Import theme utilities
import { switchTheme, STDFTheme, darkMode } from 'stdf/theme';

// Switch to STDF default theme
switchTheme(STDFTheme);

// Enable dark mode
darkMode('dark');

// Toggle dark mode
const isDark = document.documentElement.classList.contains('dark');
darkMode(isDark ? 'light' : 'dark');

// Custom theme object
const customTheme = {
  color: {
    primary: {
      default: 'oklch(0.467 0.296 264.886)',
      50: 'oklch(0.979 0.01 267.36)',
      100: 'oklch(0.95 0.024 270.343)',
      200: 'oklch(0.847 0.074 271.188)'
    },
    dark: {
      default: 'oklch(0.467 0.296 264.886)'
    },
    functional: {
      success: 'oklch(0.647 0.193 156.677)',
      warning: 'oklch(0.779 0.15 80.683)',
      error: 'oklch(0.627 0.257 22.216)',
      info: 'oklch(0.647 0.193 233.759)'
    },
    primaryBlack: 'oklch(0.2 0 0)',
    primaryWhite: 'oklch(1 0 0)',
    darkBlack: 'oklch(0.2 0 0)',
    darkWhite: 'oklch(1 0 0)',
    extend: []
  }
};

// Apply custom theme
switchTheme(customTheme);
```

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

### Loading Props

Source: https://github.com/any-tdf/stdf/blob/main/docs/mds/components/loading/api.md

This section details the properties available for loading within the /any-tdf/stdf project, including their types, default values, and whether they are required.

```APIDOC
## Loading Props

### Description
Details the properties available for loading within the /any-tdf/stdf project.

### Method
N/A (Configuration/Props)

### Endpoint
N/A (Configuration/Props)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Props
- **type** (string) - Optional - Type identifier. Default: `'1_0'`
- **height** (string) - Optional - Container height. Allowed values: `'2'|'4'|'6'|'8'|'12'|'16'|'20'|'28'|'36'|'48'|'56'|'64'|'72'|'80'|'96'|'full'`. Default: `'8'`
- **width** (string) - Optional - Container width. Allowed values: `'2'|'4'|'6'|'8'|'12'|'16'|'20'|'28'|'36'|'48'|'56'|'64'|'72'|'80'|'96'|'full'`. Default: `'8'`
- **theme** (boolean) - Optional - Whether to use the theme color. Only applies to single colors. Default: `false`
- **inverse** (boolean) - Optional - Whether to use the inverse color. Only applies to single and dual colors. Default: `false`
- **customColor** (string[]) - Optional - Custom color array. Default: `[]`
- **lazyAnimation** (boolean) - Optional - Whether to enable lazy animation. Default: `true`
- **speed** (number) - Optional - Animation speed, base is 1. Default: `1`

### Request Example
```json
{
  "type": "1_0",
  "height": "16",
  "width": "full",
  "theme": true,
  "inverse": false,
  "customColor": ["#ff0000", "#00ff00"],
  "lazyAnimation": false,
  "speed": 2
}
```

### Response
#### Success Response (200)
N/A (This describes component props, not an API response.)

#### Response Example
N/A
```