@db-ux/mcp-server 4.8.0 → 4.8.1-fix-publish2-4d5a12d
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +5 -5
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -22374,7 +22374,7 @@ var EMPTY_COMPLETION_RESULT = {
|
|
|
22374
22374
|
// package.json
|
|
22375
22375
|
var package_default = {
|
|
22376
22376
|
name: "@db-ux/mcp-server",
|
|
22377
|
-
version: "4.8.
|
|
22377
|
+
version: "4.8.1",
|
|
22378
22378
|
type: "module",
|
|
22379
22379
|
description: "MCP server for DB UX Design System \u2013 gives LLMs access to UI components and code examples",
|
|
22380
22380
|
repository: {
|
|
@@ -22424,7 +22424,7 @@ var package_default = {
|
|
|
22424
22424
|
"npm-run-all2": "8.0.4",
|
|
22425
22425
|
tsx: "4.21.0",
|
|
22426
22426
|
typescript: "5.9.3",
|
|
22427
|
-
vitest: "4.1.
|
|
22427
|
+
vitest: "4.1.6"
|
|
22428
22428
|
},
|
|
22429
22429
|
publishConfig: {
|
|
22430
22430
|
registry: "https://registry.npmjs.org/",
|
|
@@ -37576,7 +37576,7 @@ import DBStack from "../stack.vue";
|
|
|
37576
37576
|
<script setup lang="ts">
|
|
37577
37577
|
import DBInfotext from "../../infotext/infotext.vue";
|
|
37578
37578
|
import DBStack from "../stack.vue";
|
|
37579
|
-
</script>` }, "web-components": { "alignment-column.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-alignment-column",\n})\nexport class StackAlignmentColumn {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-alignment-column");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Stretch\n </db-infotext>\n <db-stack\n alignment="stretch"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Start\n </db-infotext>\n <db-stack\n alignment="start"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n alignment="center"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n alignment="end"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "alignment-row.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-alignment-row",\n})\nexport class StackAlignmentRow {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-alignment-row");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Stretch\n </db-infotext>\n <db-stack\n alignment="stretch"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Start\n </db-infotext>\n <db-stack\n alignment="start"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n alignment="center"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n alignment="end"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-density",\n})\nexport class StackDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-density");\n }\n\n render() {\n return (\n <Fragment>\n <div\n data-density="functional"\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Functional\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Regular\n </db-infotext>\n <db-stack\n data-density="regular"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n data-density="expressive"\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Expressive\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "direction.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-direction",\n})\nexport class StackDirection {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-direction");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Column\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Row\n </db-infotext>\n <db-stack\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "gap.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-gap",\n})\nexport class StackGap {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-gap");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n none\n </db-infotext>\n <db-stack\n gap="none"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 3x-small\n </db-infotext>\n <db-stack\n gap="3x-small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 2x-small\n </db-infotext>\n <db-stack\n gap="2x-small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n x-small\n </db-infotext>\n <db-stack\n gap="x-small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) small\n </db-infotext>\n <db-stack\n gap="small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n medium\n </db-infotext>\n <db-stack\n gap="medium"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n large\n </db-infotext>\n <db-stack\n gap="large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n x-large\n </db-infotext>\n <db-stack\n gap="x-large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 2x-large\n </db-infotext>\n <db-stack\n gap="2x-large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 3x-large\n </db-infotext>\n <db-stack\n gap="3x-large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "justify-content-column.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-justify-content-column",\n})\nexport class StackJustifyContentColumn {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-justify-content-column");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Start\n </db-infotext>\n <db-stack\n justifyContent="start"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n justifyContent="center"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n justifyContent="end"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Space-Between\n </db-infotext>\n <db-stack\n justifyContent="space-between"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "justify-content-row.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-justify-content-row",\n})\nexport class StackJustifyContentRow {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-justify-content-row");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Start\n </db-infotext>\n <db-stack\n justifyContent="start"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n justifyContent="center"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n justifyContent="end"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Space-Between\n </db-infotext>\n <db-stack\n justifyContent="space-between"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBDivider } from "../../divider/divider";\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-variant",\n})\nexport class StackVariant {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-variant");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Simple\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Divider\n </db-infotext>\n <db-stack\n variant="divider"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <db-divider></db-divider>\n <span class="dummy-component">Content 2</span>\n <db-divider></db-divider>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "wrap.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-wrap",\n})\nexport class StackWrap {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-wrap");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "160px",\n height: "88px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) No Wrap: Column\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "160px",\n height: "88px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n No Wrap: Row\n </db-infotext>\n <db-stack\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "160px",\n height: "120px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Wrap: Column\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n wrap={true}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "180px",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Wrap: Row\n </db-infotext>\n <db-stack\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n wrap={true}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBStack</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-stack">Test</div>\n </body>\n</html>\n' } } }, switch: { props: "import {\n ChangeEventProps,\n ChangeEventState,\n FocusEventProps,\n FocusEventState,\n FormCheckProps,\n FormMessageProps,\n FormProps,\n FormState,\n FromValidState,\n GeneralKeyboardEvent,\n GlobalProps,\n GlobalState,\n IconLeadingProps,\n IconProps,\n IconTrailingProps,\n LabelVariantHorizontalType,\n SizeProps\n} from '../../shared/model';\n\nexport type DBSwitchDefaultProps = {\n /**\n * Add additional icons to indicate active/inactive state.\n */\n visualAid?: boolean | string;\n\n /**\n * Change the variant of the label to `trailing` or `leading`. Defaults to `trailing`\n */\n variant?: LabelVariantHorizontalType;\n};\n\nexport type DBSwitchProps = GlobalProps &\n ChangeEventProps<HTMLInputElement> &\n FocusEventProps<HTMLInputElement> &\n FormProps &\n FormCheckProps &\n Omit<FormMessageProps, 'variant'> &\n SizeProps &\n IconProps &\n IconTrailingProps &\n IconLeadingProps &\n DBSwitchDefaultProps;\n\nexport type DBSwitchDefaultState = {\n handleKeyDown: (event: GeneralKeyboardEvent<HTMLInputElement>) => void;\n};\n\nexport type DBSwitchState = DBSwitchDefaultState &\n GlobalState &\n ChangeEventState<HTMLInputElement> &\n FocusEventState<HTMLInputElement> &\n FormState &\n FromValidState;\n", examples: ["Density", "Checked", "Disabled", "Visual Aid", "Size", "Variant", "Show Label", "Required", "Show Required Asterisk", "Validation", "Show Message", "Examples"], exampleCode: { react: { "checked.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchChecked(props: any) {\n const [checked, setChecked] = useState<boolean>(() => true);\n\n return (\n <>\n <DBSwitch checked={false}>(Default) False</DBSwitch>\n <DBSwitch\n checked={checked}\n {...{\n onChange: (event: any) =>\n setChecked((event.target as HTMLInputElement).checked),\n }}\n >\n True\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchChecked;\n', "density.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchDensity(props: any) {\n return (\n <>\n <DBSwitch data-density="functional">functional</DBSwitch>\n <DBSwitch data-density="regular">regular (Default)</DBSwitch>\n <DBSwitch data-density="expressive">expressive</DBSwitch>\n </>\n );\n}\n\nexport default SwitchDensity;\n', "disabled.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchDisabled(props: any) {\n return (\n <>\n <DBSwitch disabled={false}>(Default) False</DBSwitch>\n <DBSwitch disabled>True</DBSwitch>\n </>\n );\n}\n\nexport default SwitchDisabled;\n', "examples.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchExamples(props: any) {\n return (\n <>\n <DBSwitch icon="cross_circle" iconTrailing="clock" visualAid>\n Custom Icons\n </DBSwitch>\n <DBSwitch validMessage="Valid" visualAid required>\n Required + Visual Aid\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchExamples;\n', "required.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchRequired(props: any) {\n return (\n <>\n <DBSwitch required={false}>(Default) False</DBSwitch>\n <DBSwitch required>True</DBSwitch>\n </>\n );\n}\n\nexport default SwitchRequired;\n', "show-label.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBSwitch from "../switch";\n\nfunction SwitchShowLabel(props: any) {\n return (\n <>\n <DBSwitch showLabel>(Default) True</DBSwitch>\n <div>\n <DBSwitch showLabel={false}>False</DBSwitch>\n <DBInfotext semantic="informational" icon="none">\n False\n </DBInfotext>\n </div>\n </>\n );\n}\n\nexport default SwitchShowLabel;\n', "show-message.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchShowMessage(props: any) {\n return (\n <>\n <DBSwitch>(Default) False</DBSwitch>\n <DBSwitch message="Message" showMessage>\n True\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchShowMessage;\n', "show-required-asterisk.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchShowRequiredAsterisk(props: any) {\n return (\n <>\n <DBSwitch required showRequiredAsterisk>\n (Default) True\n </DBSwitch>\n <DBSwitch required showRequiredAsterisk={false}>\n False\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchShowRequiredAsterisk;\n', "size.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchSize(props: any) {\n return (\n <>\n <DBSwitch>(Default) Medium</DBSwitch>\n <DBSwitch size="small">Small</DBSwitch>\n </>\n );\n}\n\nexport default SwitchSize;\n', "validation.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchValidation(props: any) {\n return (\n <>\n <DBSwitch>(Default) No validation</DBSwitch>\n <DBSwitch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </DBSwitch>\n <DBSwitch validation="valid" validMessage="Valid message" checked>\n Valid\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchValidation;\n', "variant.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchVariant(props: any) {\n return (\n <>\n <DBSwitch label="(Default) Trailing">(Default) Trailing</DBSwitch>\n <DBSwitch label="Leading" variant="leading">\n Leading\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchVariant;\n', "visual-aid.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchVisualAid(props: any) {\n const [checked, setChecked] = useState<boolean>(() => true);\n\n const [checked2, setChecked2] = useState<boolean>(() => true);\n\n return (\n <>\n <DBSwitch visualAid={false}>(Default) False (Unchecked)</DBSwitch>\n <DBSwitch\n visualAid={false}\n checked={checked}\n {...{\n onChange: (event: any) =>\n setChecked((event.target as HTMLInputElement).checked),\n }}\n >\n (Default) False (Checked)\n </DBSwitch>\n <DBSwitch iconLeading="moon" iconTrailing="sun" visualAid>\n True (Unchecked)\n </DBSwitch>\n <DBSwitch\n iconLeading="moon"\n iconTrailing="sun"\n visualAid\n checked={checked2}\n {...{\n onChange: (event: any) =>\n setChecked((event.target as HTMLInputElement).checked),\n }}\n >\n True (Checked)\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchVisualAid;\n' }, angular: { "checked.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-checked",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [checked]="false">(Default) False</db-switch>\n <db-switch [checked]="checked()"> True </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchChecked implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n checked = signal<boolean>(true);\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-checked");\n }\n }\n}\n', "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-density",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch data-density="functional">functional</db-switch>\n <db-switch data-density="regular">regular (Default)</db-switch>\n <db-switch data-density="expressive">expressive</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchDensity implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-density");\n }\n }\n}\n', "disabled.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-disabled",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [disabled]="false">(Default) False</db-switch>\n <db-switch [disabled]="true">True</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchDisabled implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-disabled");\n }\n }\n}\n', "examples.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-examples",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch icon="cross_circle" iconTrailing="clock" [visualAid]="true">\n Custom Icons\n </db-switch>\n <db-switch validMessage="Valid" [visualAid]="true" [required]="true">\n Required + Visual Aid\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchExamples implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-examples");\n }\n }\n}\n', "required.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-required",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [required]="false">(Default) False</db-switch>\n <db-switch [required]="true">True</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchRequired implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-required");\n }\n }\n}\n', "show-label.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-show-label",\n standalone: true,\n imports: [CommonModule, DBSwitch, DBInfotext],\n template: `<ng-container\n ><db-switch [showLabel]="true">(Default) True</db-switch>\n <div>\n <db-switch [showLabel]="false">False</db-switch>\n <db-infotext semantic="informational" icon="none"> False </db-infotext>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchShowLabel implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-show-label");\n }\n }\n}\n', "show-message.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-show-message",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch>(Default) False</db-switch>\n <db-switch message="Message" [showMessage]="true">\n True\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchShowMessage implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-show-message");\n }\n }\n}\n', "show-required-asterisk.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-show-required-asterisk",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [required]="true" [showRequiredAsterisk]="true">\n (Default) True\n </db-switch>\n <db-switch [required]="true" [showRequiredAsterisk]="false">\n False\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchShowRequiredAsterisk implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-show-required-asterisk");\n }\n }\n}\n', "size.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-size",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch>(Default) Medium</db-switch>\n <db-switch size="small">Small</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchSize implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-size");\n }\n }\n}\n', "validation.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-validation",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch>(Default) No validation</db-switch>\n <db-switch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </db-switch>\n <db-switch validation="valid" validMessage="Valid message" [checked]="true">\n Valid\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchValidation implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-validation");\n }\n }\n}\n', "variant.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-variant",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch label="(Default) Trailing">(Default) Trailing</db-switch>\n <db-switch label="Leading" variant="leading">\n Leading\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchVariant implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-variant");\n }\n }\n}\n', "visual-aid.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-visual-aid",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [visualAid]="false">(Default) False (Unchecked)</db-switch>\n <db-switch [visualAid]="false" [checked]="checked()">\n (Default) False (Checked)\n </db-switch>\n <db-switch iconLeading="moon" iconTrailing="sun" [visualAid]="true">\n True (Unchecked)\n </db-switch>\n <db-switch\n iconLeading="moon"\n iconTrailing="sun"\n [visualAid]="true"\n [checked]="checked2()"\n >\n True (Checked)\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchVisualAid implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n checked = signal<boolean>(true);\n checked2 = signal<boolean>(true);\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-visual-aid");\n }\n }\n}\n' }, vue: { "checked.example.vue": '<template>\n <DBSwitch :checked="false">(Default) False</DBSwitch>\n <DBSwitch :checked="checked" v-bind="{}"> True </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBSwitch from "../switch.vue";\n\nconst checked = ref<boolean>(true);\n</script>', "density.example.vue": '<template>\n <DBSwitch data-density="functional">functional</DBSwitch>\n <DBSwitch data-density="regular">regular (Default)</DBSwitch>\n <DBSwitch data-density="expressive">expressive</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "disabled.example.vue": '<template>\n <DBSwitch :disabled="false">(Default) False</DBSwitch>\n <DBSwitch :disabled="true">True</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "examples.example.vue": '<template>\n <DBSwitch icon="cross_circle" iconTrailing="clock" :visualAid="true">\n Custom Icons\n </DBSwitch>\n <DBSwitch validMessage="Valid" :visualAid="true" :required="true">\n Required + Visual Aid\n </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "required.example.vue": '<template>\n <DBSwitch :required="false">(Default) False</DBSwitch>\n <DBSwitch :required="true">True</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "show-label.example.vue": '<template>\n <DBSwitch :showLabel="true">(Default) True</DBSwitch>\n <div>\n <DBSwitch :showLabel="false">False</DBSwitch\n ><DBInfotext semantic="informational" icon="none"> False </DBInfotext>\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBSwitch from "../switch.vue";\n</script>', "show-message.example.vue": '<template>\n <DBSwitch>(Default) False</DBSwitch>\n <DBSwitch message="Message" :showMessage="true"> True </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "show-required-asterisk.example.vue": '<template>\n <DBSwitch :required="true" :showRequiredAsterisk="true">\n (Default) True\n </DBSwitch>\n <DBSwitch :required="true" :showRequiredAsterisk="false"> False </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "size.example.vue": '<template>\n <DBSwitch>(Default) Medium</DBSwitch>\n <DBSwitch size="small">Small</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "validation.example.vue": '<template>\n <DBSwitch>(Default) No validation</DBSwitch>\n <DBSwitch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </DBSwitch>\n <DBSwitch validation="valid" validMessage="Valid message" :checked="true">\n Valid\n </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "variant.example.vue": '<template>\n <DBSwitch label="(Default) Trailing">(Default) Trailing</DBSwitch>\n <DBSwitch label="Leading" variant="leading"> Leading </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "visual-aid.example.vue": '<template>\n <DBSwitch :visualAid="false">(Default) False (Unchecked)</DBSwitch>\n <DBSwitch :visualAid="false" :checked="checked" v-bind="{}">\n (Default) False (Checked)\n </DBSwitch>\n <DBSwitch iconLeading="moon" iconTrailing="sun" :visualAid="true">\n True (Unchecked)\n </DBSwitch>\n <DBSwitch\n iconLeading="moon"\n iconTrailing="sun"\n :visualAid="true"\n :checked="checked2"\n v-bind="{}"\n >\n True (Checked)\n </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBSwitch from "../switch.vue";\n\nconst checked = ref<boolean>(true);\nconst checked2 = ref<boolean>(true);\n</script>' }, "web-components": { "checked.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment, State } from "@stencil/core";\n\n@Component({\n tag: "switch-checked",\n})\nexport class SwitchChecked {\n private _ref!: HTMLElement;\n\n @State() checked = true;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-checked");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch checked={false}>(Default) False</db-switch>\n <db-switch checked={this.checked} {...{}}>\n True\n </db-switch>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-density",\n})\nexport class SwitchDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch data-density="functional">functional</db-switch>\n <db-switch data-density="regular">regular (Default)</db-switch>\n <db-switch data-density="expressive">expressive</db-switch>\n </Fragment>\n );\n }\n}\n', "disabled.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-disabled",\n})\nexport class SwitchDisabled {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-disabled");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch disabled={false}>(Default) False</db-switch>\n <db-switch disabled={true}>True</db-switch>\n </Fragment>\n );\n }\n}\n', "examples.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-examples",\n})\nexport class SwitchExamples {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-examples");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch icon="cross_circle" iconTrailing="clock" visualAid={true}>\n Custom Icons\n </db-switch>\n <db-switch validMessage="Valid" visualAid={true} required={true}>\n Required + Visual Aid\n </db-switch>\n </Fragment>\n );\n }\n}\n', "required.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-required",\n})\nexport class SwitchRequired {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-required");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch required={false}>(Default) False</db-switch>\n <db-switch required={true}>True</db-switch>\n </Fragment>\n );\n }\n}\n', "show-label.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-show-label",\n})\nexport class SwitchShowLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-show-label");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch showLabel={true}>(Default) True</db-switch>\n <div>\n <db-switch showLabel={false}>False</db-switch>\n <db-infotext semantic="informational" icon="none">\n False\n </db-infotext>\n </div>\n </Fragment>\n );\n }\n}\n', "show-message.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-show-message",\n})\nexport class SwitchShowMessage {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-show-message");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch>(Default) False</db-switch>\n <db-switch message="Message" showMessage={true}>\n True\n </db-switch>\n </Fragment>\n );\n }\n}\n', "show-required-asterisk.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-show-required-asterisk",\n})\nexport class SwitchShowRequiredAsterisk {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-show-required-asterisk");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch required={true} showRequiredAsterisk={true}>\n (Default) True\n </db-switch>\n <db-switch required={true} showRequiredAsterisk={false}>\n False\n </db-switch>\n </Fragment>\n );\n }\n}\n', "size.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-size",\n})\nexport class SwitchSize {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-size");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch>(Default) Medium</db-switch>\n <db-switch size="small">Small</db-switch>\n </Fragment>\n );\n }\n}\n', "validation.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-validation",\n})\nexport class SwitchValidation {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-validation");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch>(Default) No validation</db-switch>\n <db-switch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </db-switch>\n <db-switch\n validation="valid"\n validMessage="Valid message"\n checked={true}\n >\n Valid\n </db-switch>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-variant",\n})\nexport class SwitchVariant {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-variant");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch label="(Default) Trailing">(Default) Trailing</db-switch>\n <db-switch label="Leading" variant="leading">\n Leading\n </db-switch>\n </Fragment>\n );\n }\n}\n', "visual-aid.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment, State } from "@stencil/core";\n\n@Component({\n tag: "switch-visual-aid",\n})\nexport class SwitchVisualAid {\n private _ref!: HTMLElement;\n\n @State() checked = true;\n @State() checked2 = true;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-visual-aid");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch visualAid={false}>(Default) False (Unchecked)</db-switch>\n <db-switch visualAid={false} checked={this.checked} {...{}}>\n (Default) False (Checked)\n </db-switch>\n <db-switch iconLeading="moon" iconTrailing="sun" visualAid={true}>\n True (Unchecked)\n </db-switch>\n <db-switch\n iconLeading="moon"\n iconTrailing="sun"\n visualAid={true}\n checked={this.checked2}\n {...{}}\n >\n True (Checked)\n </db-switch>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBSwitch</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-switch">Test</div>\n </body>\n</html>\n' } } }, "tab-item": { props: "import {\n ActiveProps,\n ChangeEventProps,\n ChangeEventState,\n GlobalProps,\n GlobalState,\n IconLeadingProps,\n IconProps,\n IconTrailingProps,\n InitializedState,\n NameProps,\n NameState,\n ShowIconLeadingProps,\n ShowIconProps,\n ShowIconTrailingProps\n} from '../../shared/model';\n\nexport type DBTabItemDefaultProps = {\n /**\n * To control the component\n */\n checked?: boolean | string;\n\n /**\n * The disabled attribute can be set to keep a user from clicking on the tab-item.\n */\n disabled?: boolean | string;\n /**\n * The label of the tab-item, if you don't want to use children.\n */\n label?: string;\n /**\n * Define the text next to the icon specified via the icon Property to get hidden.\n */\n noText?: boolean | string;\n};\n\nexport type DBTabItemProps = GlobalProps &\n DBTabItemDefaultProps &\n IconProps &\n IconTrailingProps &\n IconLeadingProps &\n ShowIconLeadingProps &\n ShowIconTrailingProps &\n ActiveProps &\n ChangeEventProps<HTMLInputElement> &\n ShowIconProps &\n NameProps;\n\nexport type DBTabItemDefaultState = {\n _selected: boolean;\n _listenerAdded: boolean;\n boundSetSelectedOnChange?: (event: any) => void;\n setSelectedOnChange: (event: any) => void;\n};\n\nexport type DBTabItemState = DBTabItemDefaultState &\n GlobalState &\n ChangeEventState<HTMLInputElement> &\n InitializedState &\n NameState;\n", examples: ["Density", "States", "Show Icon Leading", "Show Icon Trailing", "Behavior", "Content Alignment Full Width"], exampleCode: { react: { "behavior.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemBehavior(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem label="(Default) Auto Width" />\n </DBTabList>\n <DBTabList\n style={{\n blockSize: "100%",\n }}\n >\n <DBTabItem label="Width full" />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemBehavior;\n', "content-alignment-full-width.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemContentAlignmentFullWidth(props: any) {\n return (\n <>\n <DBTabList\n style={{\n blockSize: "100%",\n }}\n >\n <DBTabItem label="Left" />\n </DBTabList>\n <DBTabList\n style={{\n blockSize: "100%",\n }}\n >\n <DBTabItem label="Centered" />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemContentAlignmentFullWidth;\n', "density.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemDensity(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem data-density="functional" label="Functional" />\n </DBTabList>\n <DBTabList>\n <DBTabItem data-density="regular" label="(Default) Regular" />\n </DBTabList>\n <DBTabList>\n <DBTabItem data-density="expressive" label="Expressive" />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemDensity;\n', "show-icon-leading.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemShowIconLeading(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem\n label="(Default) False"\n icon="x_placeholder"\n showIcon={false}\n />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="True" icon="x_placeholder" showIcon />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemShowIconLeading;\n', "show-icon-trailing.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemShowIconTrailing(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem\n label="(Default) False"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n showIcon={false}\n showIconTrailing={false}\n />\n </DBTabList>\n <DBTabList>\n <DBTabItem\n label="True"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n showIcon\n showIconTrailing\n />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemShowIconTrailing;\n', "states.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemStates(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem label="(Default) Enabled" />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="active" active />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="disabled" disabled />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemStates;\n' }, angular: { "behavior.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-behavior",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item label="(Default) Auto Width"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n [ngStyle]="{\n blockSize: \'100%\'\n }"\n ><db-tab-item label="Width full"></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemBehavior implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-behavior");\n }\n }\n}\n', "content-alignment-full-width.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-content-alignment-full-width",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n [ngStyle]="{\n blockSize: \'100%\'\n }"\n ><db-tab-item label="Left"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n [ngStyle]="{\n blockSize: \'100%\'\n }"\n ><db-tab-item label="Centered"></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemContentAlignmentFullWidth implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(\n element,\n "tab-item-content-alignment-full-width"\n );\n }\n }\n}\n', "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-density",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item data-density="functional" label="Functional"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n data-density="regular"\n label="(Default) Regular"\n ></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n data-density="expressive"\n label="Expressive"\n ></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemDensity implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-density");\n }\n }\n}\n', "show-icon-leading.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-show-icon-leading",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item\n label="(Default) False"\n icon="x_placeholder"\n [showIcon]="false"\n ></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n label="True"\n icon="x_placeholder"\n [showIcon]="true"\n ></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemShowIconLeading implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-show-icon-leading");\n }\n }\n}\n', "show-icon-trailing.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-show-icon-trailing",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item\n label="(Default) False"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n [showIcon]="false"\n [showIconTrailing]="false"\n ></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n label="True"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n [showIcon]="true"\n [showIconTrailing]="true"\n ></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemShowIconTrailing implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-show-icon-trailing");\n }\n }\n}\n', "states.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-states",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item label="(Default) Enabled"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item label="active" [active]="true"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n label="disabled"\n [disabled]="true"\n ></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemStates implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-states");\n }\n }\n}\n' }, vue: { "behavior.example.vue": `<template>
|
|
37579
|
+
</script>` }, "web-components": { "alignment-column.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-alignment-column",\n})\nexport class StackAlignmentColumn {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-alignment-column");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Stretch\n </db-infotext>\n <db-stack\n alignment="stretch"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Start\n </db-infotext>\n <db-stack\n alignment="start"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n alignment="center"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n alignment="end"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "alignment-row.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-alignment-row",\n})\nexport class StackAlignmentRow {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-alignment-row");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Stretch\n </db-infotext>\n <db-stack\n alignment="stretch"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Start\n </db-infotext>\n <db-stack\n alignment="start"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n alignment="center"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n alignment="end"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-density",\n})\nexport class StackDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-density");\n }\n\n render() {\n return (\n <Fragment>\n <div\n data-density="functional"\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Functional\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Regular\n </db-infotext>\n <db-stack\n data-density="regular"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n data-density="expressive"\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Expressive\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "direction.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-direction",\n})\nexport class StackDirection {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-direction");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Column\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Row\n </db-infotext>\n <db-stack\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "gap.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-gap",\n})\nexport class StackGap {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-gap");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n none\n </db-infotext>\n <db-stack\n gap="none"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 3x-small\n </db-infotext>\n <db-stack\n gap="3x-small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 2x-small\n </db-infotext>\n <db-stack\n gap="2x-small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n x-small\n </db-infotext>\n <db-stack\n gap="x-small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) small\n </db-infotext>\n <db-stack\n gap="small"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n medium\n </db-infotext>\n <db-stack\n gap="medium"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n large\n </db-infotext>\n <db-stack\n gap="large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n x-large\n </db-infotext>\n <db-stack\n gap="x-large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 2x-large\n </db-infotext>\n <db-stack\n gap="2x-large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n 3x-large\n </db-infotext>\n <db-stack\n gap="3x-large"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "justify-content-column.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-justify-content-column",\n})\nexport class StackJustifyContentColumn {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-justify-content-column");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Start\n </db-infotext>\n <db-stack\n justifyContent="start"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n justifyContent="center"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n justifyContent="end"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n height: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Space-Between\n </db-infotext>\n <db-stack\n justifyContent="space-between"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "justify-content-row.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-justify-content-row",\n})\nexport class StackJustifyContentRow {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-justify-content-row");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Start\n </db-infotext>\n <db-stack\n justifyContent="start"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Center\n </db-infotext>\n <db-stack\n justifyContent="center"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n End\n </db-infotext>\n <db-stack\n justifyContent="end"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "300px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Space-Between\n </db-infotext>\n <db-stack\n justifyContent="space-between"\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n border:\n "var(--db-border-width-3xs) dashed var(--db-adaptive-on-bg-basic-emphasis-60-default)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBDivider } from "../../divider/divider";\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-variant",\n})\nexport class StackVariant {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-variant");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) Simple\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "200px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Divider\n </db-infotext>\n <db-stack\n variant="divider"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <db-divider></db-divider>\n <span class="dummy-component">Content 2</span>\n <db-divider></db-divider>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n', "wrap.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBStack } from "../stack";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "stack-wrap",\n})\nexport class StackWrap {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "stack-wrap");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "160px",\n height: "88px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n (Default) No Wrap: Column\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "160px",\n height: "88px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n No Wrap: Row\n </db-infotext>\n <db-stack\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "160px",\n height: "120px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Wrap: Column\n </db-infotext>\n <db-stack\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n wrap={true}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n <div\n style={{\n alignItems: "flex-start",\n alignSelf: "flex-start",\n display: "flex",\n flexWrap: "nowrap",\n flexDirection: "column",\n gap: "var(--db-spacing-fixed-sm)",\n width: "180px",\n height: "100px",\n }}\n >\n <db-infotext size="small" icon="none" semantic="informational">\n Wrap: Row\n </db-infotext>\n <db-stack\n direction="row"\n style={{\n padding: "var(--db-spacing-fixed-xs)",\n }}\n wrap={true}\n >\n <span class="dummy-component">\n <a href="#">Content 1</a>\n </span>\n <span class="dummy-component">Content 2</span>\n <span class="dummy-component">Content 3</span>\n </db-stack>\n </div>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBStack</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-stack">Test</div>\n </body>\n</html>\n' } } }, switch: { props: "import {\n ChangeEventProps,\n ChangeEventState,\n FocusEventProps,\n FocusEventState,\n FormCheckProps,\n FormMessageProps,\n FormProps,\n FormState,\n FromValidState,\n GeneralKeyboardEvent,\n GlobalProps,\n GlobalState,\n IconLeadingProps,\n IconProps,\n IconTrailingProps,\n LabelVariantHorizontalType,\n SizeProps\n} from '../../shared/model';\n\nexport type DBSwitchDefaultProps = {\n /**\n * Add additional icons to indicate active/inactive state.\n */\n visualAid?: boolean | string;\n\n /**\n * Change the variant of the label to `trailing` or `leading`. Defaults to `trailing`\n */\n variant?: LabelVariantHorizontalType;\n};\n\nexport type DBSwitchProps = GlobalProps &\n ChangeEventProps<HTMLInputElement> &\n FocusEventProps<HTMLInputElement> &\n FormProps &\n FormCheckProps &\n Omit<FormMessageProps, 'variant'> &\n SizeProps &\n IconProps &\n IconTrailingProps &\n IconLeadingProps &\n DBSwitchDefaultProps;\n\nexport type DBSwitchDefaultState = {\n handleKeyDown: (event: GeneralKeyboardEvent<HTMLInputElement>) => void;\n};\n\nexport type DBSwitchState = DBSwitchDefaultState &\n GlobalState &\n ChangeEventState<HTMLInputElement> &\n FocusEventState<HTMLInputElement> &\n FormState &\n FromValidState;\n", examples: ["Density", "Checked", "Disabled", "Visual Aid", "Size", "Variant", "Show Label", "Required", "Show Required Asterisk", "Validation", "Show Message", "Examples"], exampleCode: { react: { "checked.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchChecked(props: any) {\n const [checked, setChecked] = useState<boolean>(() => true);\n\n return (\n <>\n <DBSwitch checked={false}>(Default) False</DBSwitch>\n <DBSwitch\n checked={checked}\n {...{\n onChange: (event: any) =>\n setChecked((event.target as HTMLInputElement).checked),\n }}\n >\n True\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchChecked;\n', "density.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchDensity(props: any) {\n return (\n <>\n <DBSwitch data-density="functional">functional</DBSwitch>\n <DBSwitch data-density="regular">regular (Default)</DBSwitch>\n <DBSwitch data-density="expressive">expressive</DBSwitch>\n </>\n );\n}\n\nexport default SwitchDensity;\n', "disabled.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchDisabled(props: any) {\n return (\n <>\n <DBSwitch disabled={false}>(Default) False</DBSwitch>\n <DBSwitch disabled>True</DBSwitch>\n </>\n );\n}\n\nexport default SwitchDisabled;\n', "examples.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchExamples(props: any) {\n return (\n <>\n <DBSwitch icon="cross_circle" iconTrailing="clock" visualAid>\n Custom Icons\n </DBSwitch>\n <DBSwitch validMessage="Valid" visualAid required>\n Required + Visual Aid\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchExamples;\n', "required.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchRequired(props: any) {\n return (\n <>\n <DBSwitch required={false}>(Default) False</DBSwitch>\n <DBSwitch required>True</DBSwitch>\n </>\n );\n}\n\nexport default SwitchRequired;\n', "show-label.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBSwitch from "../switch";\n\nfunction SwitchShowLabel(props: any) {\n return (\n <>\n <DBSwitch showLabel>(Default) True</DBSwitch>\n <div>\n <DBSwitch showLabel={false}>False</DBSwitch>\n <DBInfotext semantic="informational" icon="none">\n False\n </DBInfotext>\n </div>\n </>\n );\n}\n\nexport default SwitchShowLabel;\n', "show-message.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchShowMessage(props: any) {\n return (\n <>\n <DBSwitch>(Default) False</DBSwitch>\n <DBSwitch message="Message" showMessage>\n True\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchShowMessage;\n', "show-required-asterisk.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchShowRequiredAsterisk(props: any) {\n return (\n <>\n <DBSwitch required showRequiredAsterisk>\n (Default) True\n </DBSwitch>\n <DBSwitch required showRequiredAsterisk={false}>\n False\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchShowRequiredAsterisk;\n', "size.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchSize(props: any) {\n return (\n <>\n <DBSwitch>(Default) Medium</DBSwitch>\n <DBSwitch size="small">Small</DBSwitch>\n </>\n );\n}\n\nexport default SwitchSize;\n', "validation.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchValidation(props: any) {\n return (\n <>\n <DBSwitch>(Default) No validation</DBSwitch>\n <DBSwitch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </DBSwitch>\n <DBSwitch validation="valid" validMessage="Valid message" checked>\n Valid\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchValidation;\n', "variant.example.tsx": 'import * as React from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchVariant(props: any) {\n return (\n <>\n <DBSwitch label="(Default) Trailing" />\n <DBSwitch label="Leading" variant="leading" />\n </>\n );\n}\n\nexport default SwitchVariant;\n', "visual-aid.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBSwitch from "../switch";\n\nfunction SwitchVisualAid(props: any) {\n const [checked, setChecked] = useState<boolean>(() => true);\n\n const [checked2, setChecked2] = useState<boolean>(() => true);\n\n return (\n <>\n <DBSwitch visualAid={false}>(Default) False (Unchecked)</DBSwitch>\n <DBSwitch\n visualAid={false}\n checked={checked}\n {...{\n onChange: (event: any) =>\n setChecked((event.target as HTMLInputElement).checked),\n }}\n >\n (Default) False (Checked)\n </DBSwitch>\n <DBSwitch iconLeading="moon" iconTrailing="sun" visualAid>\n True (Unchecked)\n </DBSwitch>\n <DBSwitch\n iconLeading="moon"\n iconTrailing="sun"\n visualAid\n checked={checked2}\n {...{\n onChange: (event: any) =>\n setChecked((event.target as HTMLInputElement).checked),\n }}\n >\n True (Checked)\n </DBSwitch>\n </>\n );\n}\n\nexport default SwitchVisualAid;\n' }, angular: { "checked.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-checked",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [checked]="false">(Default) False</db-switch>\n <db-switch [checked]="checked()"> True </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchChecked implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n checked = signal<boolean>(true);\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-checked");\n }\n }\n}\n', "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-density",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch data-density="functional">functional</db-switch>\n <db-switch data-density="regular">regular (Default)</db-switch>\n <db-switch data-density="expressive">expressive</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchDensity implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-density");\n }\n }\n}\n', "disabled.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-disabled",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [disabled]="false">(Default) False</db-switch>\n <db-switch [disabled]="true">True</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchDisabled implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-disabled");\n }\n }\n}\n', "examples.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-examples",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch icon="cross_circle" iconTrailing="clock" [visualAid]="true">\n Custom Icons\n </db-switch>\n <db-switch validMessage="Valid" [visualAid]="true" [required]="true">\n Required + Visual Aid\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchExamples implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-examples");\n }\n }\n}\n', "required.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-required",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [required]="false">(Default) False</db-switch>\n <db-switch [required]="true">True</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchRequired implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-required");\n }\n }\n}\n', "show-label.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-show-label",\n standalone: true,\n imports: [CommonModule, DBSwitch, DBInfotext],\n template: `<ng-container\n ><db-switch [showLabel]="true">(Default) True</db-switch>\n <div>\n <db-switch [showLabel]="false">False</db-switch>\n <db-infotext semantic="informational" icon="none"> False </db-infotext>\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchShowLabel implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-show-label");\n }\n }\n}\n', "show-message.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-show-message",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch>(Default) False</db-switch>\n <db-switch message="Message" [showMessage]="true">\n True\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchShowMessage implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-show-message");\n }\n }\n}\n', "show-required-asterisk.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-show-required-asterisk",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [required]="true" [showRequiredAsterisk]="true">\n (Default) True\n </db-switch>\n <db-switch [required]="true" [showRequiredAsterisk]="false">\n False\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchShowRequiredAsterisk implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-show-required-asterisk");\n }\n }\n}\n', "size.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-size",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch>(Default) Medium</db-switch>\n <db-switch size="small">Small</db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchSize implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-size");\n }\n }\n}\n', "validation.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-validation",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch>(Default) No validation</db-switch>\n <db-switch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </db-switch>\n <db-switch validation="valid" validMessage="Valid message" [checked]="true">\n Valid\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchValidation implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-validation");\n }\n }\n}\n', "variant.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-variant",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch label="(Default) Trailing"></db-switch>\n <db-switch label="Leading" variant="leading"></db-switch\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchVariant implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-variant");\n }\n }\n}\n', "visual-aid.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n signal,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBSwitch } from "../switch";\n\n@Component({\n selector: "switch-visual-aid",\n standalone: true,\n imports: [CommonModule, DBSwitch],\n template: `<ng-container\n ><db-switch [visualAid]="false">(Default) False (Unchecked)</db-switch>\n <db-switch [visualAid]="false" [checked]="checked()">\n (Default) False (Checked)\n </db-switch>\n <db-switch iconLeading="moon" iconTrailing="sun" [visualAid]="true">\n True (Unchecked)\n </db-switch>\n <db-switch\n iconLeading="moon"\n iconTrailing="sun"\n [visualAid]="true"\n [checked]="checked2()"\n >\n True (Checked)\n </db-switch></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class SwitchVisualAid implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n checked = signal<boolean>(true);\n checked2 = signal<boolean>(true);\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "switch-visual-aid");\n }\n }\n}\n' }, vue: { "checked.example.vue": '<template>\n <DBSwitch :checked="false">(Default) False</DBSwitch>\n <DBSwitch :checked="checked" v-bind="{}"> True </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBSwitch from "../switch.vue";\n\nconst checked = ref<boolean>(true);\n</script>', "density.example.vue": '<template>\n <DBSwitch data-density="functional">functional</DBSwitch>\n <DBSwitch data-density="regular">regular (Default)</DBSwitch>\n <DBSwitch data-density="expressive">expressive</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "disabled.example.vue": '<template>\n <DBSwitch :disabled="false">(Default) False</DBSwitch>\n <DBSwitch :disabled="true">True</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "examples.example.vue": '<template>\n <DBSwitch icon="cross_circle" iconTrailing="clock" :visualAid="true">\n Custom Icons\n </DBSwitch>\n <DBSwitch validMessage="Valid" :visualAid="true" :required="true">\n Required + Visual Aid\n </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "required.example.vue": '<template>\n <DBSwitch :required="false">(Default) False</DBSwitch>\n <DBSwitch :required="true">True</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "show-label.example.vue": '<template>\n <DBSwitch :showLabel="true">(Default) True</DBSwitch>\n <div>\n <DBSwitch :showLabel="false">False</DBSwitch\n ><DBInfotext semantic="informational" icon="none"> False </DBInfotext>\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBSwitch from "../switch.vue";\n</script>', "show-message.example.vue": '<template>\n <DBSwitch>(Default) False</DBSwitch>\n <DBSwitch message="Message" :showMessage="true"> True </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "show-required-asterisk.example.vue": '<template>\n <DBSwitch :required="true" :showRequiredAsterisk="true">\n (Default) True\n </DBSwitch>\n <DBSwitch :required="true" :showRequiredAsterisk="false"> False </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "size.example.vue": '<template>\n <DBSwitch>(Default) Medium</DBSwitch>\n <DBSwitch size="small">Small</DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "validation.example.vue": '<template>\n <DBSwitch>(Default) No validation</DBSwitch>\n <DBSwitch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </DBSwitch>\n <DBSwitch validation="valid" validMessage="Valid message" :checked="true">\n Valid\n </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "variant.example.vue": '<template>\n <DBSwitch label="(Default) Trailing"></DBSwitch>\n <DBSwitch label="Leading" variant="leading"></DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport DBSwitch from "../switch.vue";\n</script>', "visual-aid.example.vue": '<template>\n <DBSwitch :visualAid="false">(Default) False (Unchecked)</DBSwitch>\n <DBSwitch :visualAid="false" :checked="checked" v-bind="{}">\n (Default) False (Checked)\n </DBSwitch>\n <DBSwitch iconLeading="moon" iconTrailing="sun" :visualAid="true">\n True (Unchecked)\n </DBSwitch>\n <DBSwitch\n iconLeading="moon"\n iconTrailing="sun"\n :visualAid="true"\n :checked="checked2"\n v-bind="{}"\n >\n True (Checked)\n </DBSwitch>\n</template>\n\n<script setup lang="ts">\nimport { ref } from "vue";\n\nimport DBSwitch from "../switch.vue";\n\nconst checked = ref<boolean>(true);\nconst checked2 = ref<boolean>(true);\n</script>' }, "web-components": { "checked.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment, State } from "@stencil/core";\n\n@Component({\n tag: "switch-checked",\n})\nexport class SwitchChecked {\n private _ref!: HTMLElement;\n\n @State() checked = true;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-checked");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch checked={false}>(Default) False</db-switch>\n <db-switch checked={this.checked} {...{}}>\n True\n </db-switch>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-density",\n})\nexport class SwitchDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch data-density="functional">functional</db-switch>\n <db-switch data-density="regular">regular (Default)</db-switch>\n <db-switch data-density="expressive">expressive</db-switch>\n </Fragment>\n );\n }\n}\n', "disabled.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-disabled",\n})\nexport class SwitchDisabled {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-disabled");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch disabled={false}>(Default) False</db-switch>\n <db-switch disabled={true}>True</db-switch>\n </Fragment>\n );\n }\n}\n', "examples.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-examples",\n})\nexport class SwitchExamples {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-examples");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch icon="cross_circle" iconTrailing="clock" visualAid={true}>\n Custom Icons\n </db-switch>\n <db-switch validMessage="Valid" visualAid={true} required={true}>\n Required + Visual Aid\n </db-switch>\n </Fragment>\n );\n }\n}\n', "required.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-required",\n})\nexport class SwitchRequired {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-required");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch required={false}>(Default) False</db-switch>\n <db-switch required={true}>True</db-switch>\n </Fragment>\n );\n }\n}\n', "show-label.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-show-label",\n})\nexport class SwitchShowLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-show-label");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch showLabel={true}>(Default) True</db-switch>\n <div>\n <db-switch showLabel={false}>False</db-switch>\n <db-infotext semantic="informational" icon="none">\n False\n </db-infotext>\n </div>\n </Fragment>\n );\n }\n}\n', "show-message.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-show-message",\n})\nexport class SwitchShowMessage {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-show-message");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch>(Default) False</db-switch>\n <db-switch message="Message" showMessage={true}>\n True\n </db-switch>\n </Fragment>\n );\n }\n}\n', "show-required-asterisk.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-show-required-asterisk",\n})\nexport class SwitchShowRequiredAsterisk {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-show-required-asterisk");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch required={true} showRequiredAsterisk={true}>\n (Default) True\n </db-switch>\n <db-switch required={true} showRequiredAsterisk={false}>\n False\n </db-switch>\n </Fragment>\n );\n }\n}\n', "size.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-size",\n})\nexport class SwitchSize {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-size");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch>(Default) Medium</db-switch>\n <db-switch size="small">Small</db-switch>\n </Fragment>\n );\n }\n}\n', "validation.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-validation",\n})\nexport class SwitchValidation {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-validation");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch>(Default) No validation</db-switch>\n <db-switch validation="invalid" invalidMessage="Invalid Message">\n Invalid\n </db-switch>\n <db-switch\n validation="valid"\n validMessage="Valid message"\n checked={true}\n >\n Valid\n </db-switch>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "switch-variant",\n})\nexport class SwitchVariant {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-variant");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch label="(Default) Trailing"></db-switch>\n <db-switch label="Leading" variant="leading"></db-switch>\n </Fragment>\n );\n }\n}\n', "visual-aid.example.tsx": 'import { DBSwitch } from "../switch";\n\nimport { Component, h, Fragment, State } from "@stencil/core";\n\n@Component({\n tag: "switch-visual-aid",\n})\nexport class SwitchVisualAid {\n private _ref!: HTMLElement;\n\n @State() checked = true;\n @State() checked2 = true;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "switch-visual-aid");\n }\n\n render() {\n return (\n <Fragment>\n <db-switch visualAid={false}>(Default) False (Unchecked)</db-switch>\n <db-switch visualAid={false} checked={this.checked} {...{}}>\n (Default) False (Checked)\n </db-switch>\n <db-switch iconLeading="moon" iconTrailing="sun" visualAid={true}>\n True (Unchecked)\n </db-switch>\n <db-switch\n iconLeading="moon"\n iconTrailing="sun"\n visualAid={true}\n checked={this.checked2}\n {...{}}\n >\n True (Checked)\n </db-switch>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBSwitch</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-switch">Test</div>\n </body>\n</html>\n' } } }, "tab-item": { props: "import {\n ActiveProps,\n ChangeEventProps,\n ChangeEventState,\n GlobalProps,\n GlobalState,\n IconLeadingProps,\n IconProps,\n IconTrailingProps,\n InitializedState,\n NameProps,\n NameState,\n ShowIconLeadingProps,\n ShowIconProps,\n ShowIconTrailingProps\n} from '../../shared/model';\n\nexport type DBTabItemDefaultProps = {\n /**\n * To control the component\n */\n checked?: boolean | string;\n\n /**\n * The disabled attribute can be set to keep a user from clicking on the tab-item.\n */\n disabled?: boolean | string;\n /**\n * The label of the tab-item, if you don't want to use children.\n */\n label?: string;\n /**\n * Define the text next to the icon specified via the icon Property to get hidden.\n */\n noText?: boolean | string;\n};\n\nexport type DBTabItemProps = GlobalProps &\n DBTabItemDefaultProps &\n IconProps &\n IconTrailingProps &\n IconLeadingProps &\n ShowIconLeadingProps &\n ShowIconTrailingProps &\n ActiveProps &\n ChangeEventProps<HTMLInputElement> &\n ShowIconProps &\n NameProps;\n\nexport type DBTabItemDefaultState = {\n _selected: boolean;\n _listenerAdded: boolean;\n boundSetSelectedOnChange?: (event: any) => void;\n setSelectedOnChange: (event: any) => void;\n};\n\nexport type DBTabItemState = DBTabItemDefaultState &\n GlobalState &\n ChangeEventState<HTMLInputElement> &\n InitializedState &\n NameState;\n", examples: ["Density", "States", "Show Icon Leading", "Show Icon Trailing", "Behavior", "Content Alignment Full Width"], exampleCode: { react: { "behavior.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemBehavior(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem label="(Default) Auto Width" />\n </DBTabList>\n <DBTabList\n style={{\n blockSize: "100%",\n }}\n >\n <DBTabItem label="Width full" />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemBehavior;\n', "content-alignment-full-width.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemContentAlignmentFullWidth(props: any) {\n return (\n <>\n <DBTabList\n style={{\n blockSize: "100%",\n }}\n >\n <DBTabItem label="Left" />\n </DBTabList>\n <DBTabList\n style={{\n blockSize: "100%",\n }}\n >\n <DBTabItem label="Centered" />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemContentAlignmentFullWidth;\n', "density.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemDensity(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem data-density="functional" label="Functional" />\n </DBTabList>\n <DBTabList>\n <DBTabItem data-density="regular" label="(Default) Regular" />\n </DBTabList>\n <DBTabList>\n <DBTabItem data-density="expressive" label="Expressive" />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemDensity;\n', "show-icon-leading.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemShowIconLeading(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem\n label="(Default) False"\n icon="x_placeholder"\n showIcon={false}\n />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="True" icon="x_placeholder" showIcon />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemShowIconLeading;\n', "show-icon-trailing.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemShowIconTrailing(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem\n label="(Default) False"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n showIcon={false}\n showIconTrailing={false}\n />\n </DBTabList>\n <DBTabList>\n <DBTabItem\n label="True"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n showIcon\n showIconTrailing\n />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemShowIconTrailing;\n', "states.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemStates(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem label="(Default) Enabled" />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="active" active />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="disabled" disabled />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemStates;\n' }, angular: { "behavior.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-behavior",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item label="(Default) Auto Width"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n [ngStyle]="{\n blockSize: \'100%\'\n }"\n ><db-tab-item label="Width full"></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemBehavior implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-behavior");\n }\n }\n}\n', "content-alignment-full-width.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-content-alignment-full-width",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n [ngStyle]="{\n blockSize: \'100%\'\n }"\n ><db-tab-item label="Left"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n [ngStyle]="{\n blockSize: \'100%\'\n }"\n ><db-tab-item label="Centered"></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemContentAlignmentFullWidth implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(\n element,\n "tab-item-content-alignment-full-width"\n );\n }\n }\n}\n', "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-density",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item data-density="functional" label="Functional"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n data-density="regular"\n label="(Default) Regular"\n ></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n data-density="expressive"\n label="Expressive"\n ></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemDensity implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-density");\n }\n }\n}\n', "show-icon-leading.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-show-icon-leading",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item\n label="(Default) False"\n icon="x_placeholder"\n [showIcon]="false"\n ></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n label="True"\n icon="x_placeholder"\n [showIcon]="true"\n ></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemShowIconLeading implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-show-icon-leading");\n }\n }\n}\n', "show-icon-trailing.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-show-icon-trailing",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item\n label="(Default) False"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n [showIcon]="false"\n [showIconTrailing]="false"\n ></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n label="True"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n [showIcon]="true"\n [showIconTrailing]="true"\n ></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemShowIconTrailing implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-show-icon-trailing");\n }\n }\n}\n', "states.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-states",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item label="(Default) Enabled"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item label="active" [active]="true"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n label="disabled"\n [disabled]="true"\n ></db-tab-item></db-tab-list\n ></ng-container> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemStates implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tab-item-states");\n }\n }\n}\n' }, vue: { "behavior.example.vue": `<template>
|
|
37580
37580
|
<DBTabList><DBTabItem label="(Default) Auto Width"></DBTabItem></DBTabList>
|
|
37581
37581
|
<DBTabList
|
|
37582
37582
|
:style="{
|
|
@@ -37944,7 +37944,7 @@ import DBTextarea from "../textarea.vue";
|
|
|
37944
37944
|
|
|
37945
37945
|
<script setup lang="ts">
|
|
37946
37946
|
import DBTextarea from "../textarea.vue";
|
|
37947
|
-
</script>`, "show-label.example.vue": '<template>\n <DBTextarea\n label="Label"\n placeholder="(Default) True"\n :showLabel="true"\n ></DBTextarea>\n <DBTextarea label="Label" placeholder="False" :showLabel="false"></DBTextarea>\n</template>\n\n<script setup lang="ts">\nimport DBTextarea from "../textarea.vue";\n</script>', "show-message.example.vue": '<template>\n <DBTextarea\n label="Label"\n placeholder="(Default) False"\n :showMessage="false"\n ></DBTextarea>\n <DBTextarea\n label="Label"\n message="Message"\n placeholder="true"\n :showMessage="true"\n ></DBTextarea>\n</template>\n\n<script setup lang="ts">\nimport DBTextarea from "../textarea.vue";\n</script>', "show-required-asterisk.example.vue": '<template>\n <DBTextarea\n label="Label"\n placeholder="(Default) True"\n :required="true"\n :showRequiredAsterisk="true"\n ></DBTextarea>\n <DBTextarea\n label="Label"\n placeholder="False"\n :required="true"\n :showRequiredAsterisk="false"\n ></DBTextarea>\n</template>\n\n<script setup lang="ts">\nimport DBTextarea from "../textarea.vue";\n</script>', "show-resizer.example.vue": '<template>\n <DBTextarea\n label="Label"\n placeholder="(Default) True"\n :showResizer="true"\n ></DBTextarea>\n <DBTextarea\n label="Label"\n placeholder="False"\n :showResizer="false"\n ></DBTextarea>\n</template>\n\n<script setup lang="ts">\nimport DBTextarea from "../textarea.vue";\n</script>', "state.example.vue": '<template>\n <DBTextarea label="Label" placeholder="(Default) Empty"></DBTextarea>\n <DBTextarea label="Label" value="Filled" placeholder="Filled"></DBTextarea>\n</template>\n\n<script setup lang="ts">\nimport DBTextarea from "../textarea.vue";\n</script>', "validation.example.vue": '<template>\n <DBTextarea\n label="Label"\n validation="no-validation"\n placeholder="(Default) No validation"\n ></DBTextarea>\n <DBTextarea\n label="Label"\n validation="invalid"\n invalidMessage="Invalid Message"\n placeholder="Invalid"\n ></DBTextarea>\n <DBTextarea\n label="Label"\n validation="valid"\n validMessage="Valid message"\n placeholder="Valid"\n ></DBTextarea>\n</template>\n\n<script setup lang="ts">\nimport DBTextarea from "../textarea.vue";\n</script>', "variant.example.vue": '<template>\n <DBTextarea label="Label" placeholder="(Default) Above"></DBTextarea>\n <DBTextarea\n label="Label"\n variant="floating"\n value="Floating Label"\n placeholder="Floating"\n ></DBTextarea>\n</template>\n\n<script setup lang="ts">\nimport DBTextarea from "../textarea.vue";\n</script>' }, "web-components": { "density.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-density",\n})\nexport class TextareaDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n data-density="functional"\n label="Label"\n placeholder="Functional"\n ></db-textarea>\n <db-textarea\n data-density="regular"\n label="Label"\n placeholder="(Default) Regular"\n ></db-textarea>\n <db-textarea\n data-density="expressive"\n label="Label"\n placeholder="Expressive"\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "disabled.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-disabled",\n})\nexport class TextareaDisabled {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-disabled");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n placeholder="(Default) False"\n disabled={false}\n ></db-textarea>\n <db-textarea\n label="Label"\n placeholder="True"\n disabled={true}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "examples-floating-label.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-examples-floating-label",\n})\nexport class TextareaExamplesFloatingLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-examples-floating-label");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n variant="floating"\n placeholder="(Default) Empty"\n ></db-textarea>\n <db-textarea\n label="Label"\n value="Filled"\n variant="floating"\n placeholder="Filled"\n ></db-textarea>\n <db-textarea\n label="Label"\n variant="floating"\n placeholder="Disabled"\n disabled={true}\n ></db-textarea>\n <db-textarea\n label="Label"\n value="Readonly - Filled"\n variant="floating"\n placeholder="Readonly - Filled"\n readOnly={true}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "field-sizing.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-field-sizing",\n})\nexport class TextareaFieldSizing {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-field-sizing");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-textarea\n label="Label"\n fieldSizing="fixed"\n placeholder="(Default) Fixed"\n ></db-textarea>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-textarea\n label="Label"\n fieldSizing="content"\n placeholder="Content"\n ></db-textarea>\n </div>\n </Fragment>\n );\n }\n}\n', "readonly.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-readonly",\n})\nexport class TextareaReadonly {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-readonly");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n value="(Default) False"\n placeholder="(Default) False"\n readOnly={false}\n ></db-textarea>\n <db-textarea\n label="Label"\n value="True"\n placeholder="True"\n readOnly={true}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "required.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-required",\n})\nexport class TextareaRequired {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-required");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n placeholder="(Default) False"\n required={false}\n ></db-textarea>\n <db-textarea\n label="Label"\n placeholder="True"\n required={true}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "rows.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-rows",\n})\nexport class TextareaRows {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-rows");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "328px",\n }}\n >\n <db-textarea\n label="(Default) 4 Rows"\n value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."\n placeholder="(Default) 4 Rows"\n ></db-textarea>\n </div>\n <div\n style={{\n width: "328px",\n }}\n >\n <db-textarea\n label="Custom Example 8 Rows"\n value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."\n placeholder="Custom"\n rows={8}\n ></db-textarea>\n </div>\n </Fragment>\n );\n }\n}\n', "show-label.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-show-label",\n})\nexport class TextareaShowLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-show-label");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n placeholder="(Default) True"\n showLabel={true}\n ></db-textarea>\n <db-textarea\n label="Label"\n placeholder="False"\n showLabel={false}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "show-message.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-show-message",\n})\nexport class TextareaShowMessage {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-show-message");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n placeholder="(Default) False"\n showMessage={false}\n ></db-textarea>\n <db-textarea\n label="Label"\n message="Message"\n placeholder="true"\n showMessage={true}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "show-required-asterisk.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-show-required-asterisk",\n})\nexport class TextareaShowRequiredAsterisk {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-show-required-asterisk");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n placeholder="(Default) True"\n required={true}\n showRequiredAsterisk={true}\n ></db-textarea>\n <db-textarea\n label="Label"\n placeholder="False"\n required={true}\n showRequiredAsterisk={false}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "show-resizer.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-show-resizer",\n})\nexport class TextareaShowResizer {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-show-resizer");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n placeholder="(Default) True"\n showResizer={true}\n ></db-textarea>\n <db-textarea\n label="Label"\n placeholder="False"\n showResizer={false}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "state.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-state",\n})\nexport class TextareaState {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-state");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea label="Label" placeholder="(Default) Empty"></db-textarea>\n <db-textarea\n label="Label"\n value="Filled"\n placeholder="Filled"\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "validation.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-validation",\n})\nexport class TextareaValidation {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-validation");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n validation="no-validation"\n placeholder="(Default) No validation"\n ></db-textarea>\n <db-textarea\n label="Label"\n validation="invalid"\n invalidMessage="Invalid Message"\n placeholder="Invalid"\n ></db-textarea>\n <db-textarea\n label="Label"\n validation="valid"\n validMessage="Valid message"\n placeholder="Valid"\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-variant",\n})\nexport class TextareaVariant {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-variant");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea label="Label" placeholder="(Default) Above"></db-textarea>\n <db-textarea\n label="Label"\n variant="floating"\n value="Floating Label"\n placeholder="Floating"\n ></db-textarea>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTextarea</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-textarea">\n <label for="textarea"> Label </label>\n <textarea\n id="textarea"\n rows="2"\n cols="33"\n placeholder=" "\n aria-describedby="db-infotext-01"\n ></textarea>\n <span class="db-infotext" data-size="medium" id="db-infotext-01"\n >No icon</span\n >\n </div>\n <div class="db-textarea">\n <label for="textarea2"> Label </label>\n <textarea\n id="textarea2"\n rows="2"\n cols="33"\n placeholder=" "\n aria-describedby="db-infotext-02"\n ></textarea>\n <span\n class="db-infotext"\n data-size="medium"\n data-semantic="informational"\n id="db-infotext-02"\n >informational</span\n >\n </div>\n </body>\n</html>\n' } } }, tooltip: { props: "import {\n ClickEventState,\n DocumentScrollState,\n EmphasisProps,\n GlobalProps,\n GlobalState,\n InitializedState,\n PlacementProps,\n PopoverProps,\n PopoverState,\n ResetIdState,\n WrapProps\n} from '../../shared/model';\n\nexport const TooltipVariantList = ['description', 'label'] as const;\nexport type TooltipVariantType = (typeof TooltipVariantList)[number];\n\nexport type DBTooltipDefaultProps = {\n /**\n * Show/Hides arrow\n */\n showArrow?: boolean | string;\n /**\n * Change the behavior of the tooltip:\n * - description: Adds `aria-describedby` to parent\n * - label: Adds `aria-labelledby` to parent\n */\n variant?: TooltipVariantType;\n};\n\nexport type DBTooltipProps = DBTooltipDefaultProps &\n GlobalProps &\n EmphasisProps &\n PlacementProps &\n PopoverProps &\n WrapProps;\n\nexport type DBTooltipDefaultState = {\n getParent: () => HTMLElement;\n};\n\nexport type DBTooltipState = DBTooltipDefaultState &\n GlobalState &\n ClickEventState<HTMLElement> &\n PopoverState &\n InitializedState &\n DocumentScrollState &\n ResetIdState;\n", examples: ["Density", "Show Arrow", "Emphasis", "Placement", "Width", "Animation", "Delay"], exampleCode: { react: { "animation.example.tsx": 'import * as React from "react";\nimport DBButton from "../../button/button";\nimport DBTooltip from "../tooltip";\n\nfunction TooltipAnimation(props: any) {\n return (\n <>\n <DBButton>\n (Default) True\n <DBTooltip id="tooltip-14" animation>\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n False\n <DBTooltip id="tooltip-17" animation={false}>\n Tooltip\n </DBTooltip>\n </DBButton>\n </>\n );\n}\n\nexport default TooltipAnimation;\n', "delay.example.tsx": 'import * as React from "react";\nimport DBButton from "../../button/button";\nimport DBTooltip from "../tooltip";\n\nfunction TooltipDelay(props: any) {\n return (\n <>\n <DBButton>\n (Default) None\n <DBTooltip id="tooltip-144" delay="none">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n Slow\n <DBTooltip delay="slow" id="tooltip-15">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n Fast\n <DBTooltip delay="fast" id="tooltip-16">\n Tooltip\n </DBTooltip>\n </DBButton>\n </>\n );\n}\n\nexport default TooltipDelay;\n', "density.example.tsx": 'import * as React from "react";\nimport DBButton from "../../button/button";\nimport DBTooltip from "../tooltip";\n\nfunction TooltipDensity(props: any) {\n return (\n <>\n <DBButton data-density="functional">\n Functional\n <DBTooltip id="tooltip-01">Tooltip</DBTooltip>\n </DBButton>\n <DBButton data-density="regular">\n (Default) Regular\n <DBTooltip id="tooltip-02">Tooltip</DBTooltip>\n </DBButton>\n <DBButton data-density="expressive">\n Expressive\n <DBTooltip id="tooltip-03">Tooltip</DBTooltip>\n </DBButton>\n </>\n );\n}\n\nexport default TooltipDensity;\n', "emphasis.example.tsx": 'import * as React from "react";\nimport DBButton from "../../button/button";\nimport DBTooltip from "../tooltip";\n\nfunction TooltipEmphasis(props: any) {\n return (\n <>\n <DBButton>\n (Default) Weak\n <DBTooltip id="tooltip-06">Tooltip</DBTooltip>\n </DBButton>\n <DBButton>\n Strong\n <DBTooltip emphasis="strong" id="tooltip-07">\n Tooltip\n </DBTooltip>\n </DBButton>\n </>\n );\n}\n\nexport default TooltipEmphasis;\n', "placement.example.tsx": 'import * as React from "react";\nimport DBButton from "../../button/button";\nimport DBTooltip from "../tooltip";\n\nfunction TooltipPlacement(props: any) {\n return (\n <>\n <DBButton>\n bottom-start\n <DBTooltip placement="bottom-start" id="tooltip-08-start">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n (Default) bottom\n <DBTooltip placement="bottom" id="tooltip-08">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n bottom-end\n <DBTooltip placement="bottom-end" id="tooltip-08-end">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n left-start\n <DBTooltip placement="left-start" id="tooltip-10-start">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n left\n <DBTooltip placement="left" id="tooltip-10">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n left-end\n <DBTooltip placement="left-end" id="tooltip-10-end">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n right-start\n <DBTooltip placement="right-start" id="tooltip-11-start">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n right\n <DBTooltip placement="right" id="tooltip-11">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n right-end\n <DBTooltip placement="right-end" id="tooltip-11-end">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n top-start\n <DBTooltip placement="top-start" id="tooltip-09-start">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n top\n <DBTooltip placement="top" id="tooltip-09">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n top-end\n <DBTooltip placement="top-end" id="tooltip-09-end">\n Tooltip\n </DBTooltip>\n </DBButton>\n </>\n );\n}\n\nexport default TooltipPlacement;\n', "show-arrow.example.tsx": 'import * as React from "react";\nimport DBButton from "../../button/button";\nimport DBTooltip from "../tooltip";\n\nfunction TooltipShowArrow(props: any) {\n return (\n <>\n <DBButton>\n (Default) True\n <DBTooltip id="tooltip-04" showArrow>\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n False\n <DBTooltip id="tooltip-05" showArrow={false}>\n Tooltip\n </DBTooltip>\n </DBButton>\n </>\n );\n}\n\nexport default TooltipShowArrow;\n', "width.example.tsx": 'import * as React from "react";\nimport DBButton from "../../button/button";\nimport DBTooltip from "../tooltip";\n\nfunction TooltipWidth(props: any) {\n return (\n <>\n <DBButton>\n (Default) Auto\n <DBTooltip id="tooltip-12">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </DBTooltip>\n </DBButton>\n <DBButton>\n Fixed\n <DBTooltip width="fixed" id="tooltip-13">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </DBTooltip>\n </DBButton>\n </>\n );\n}\n\nexport default TooltipWidth;\n' }, angular: { "animation.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\n@Component({\n selector: "tooltip-animation",\n standalone: true,\n imports: [CommonModule, DBButton, DBTooltip],\n template: `<ng-container\n ><db-button>\n (Default) True\n\n <db-tooltip id="tooltip-14" [animation]="true">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n False\n\n <db-tooltip id="tooltip-17" [animation]="false">\n Tooltip\n </db-tooltip></db-button\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TooltipAnimation implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tooltip-animation");\n }\n }\n}\n', "delay.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\n@Component({\n selector: "tooltip-delay",\n standalone: true,\n imports: [CommonModule, DBButton, DBTooltip],\n template: `<ng-container\n ><db-button>\n (Default) None\n\n <db-tooltip id="tooltip-144" delay="none">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n Slow\n\n <db-tooltip delay="slow" id="tooltip-15"> Tooltip </db-tooltip></db-button\n >\n <db-button>\n Fast\n\n <db-tooltip delay="fast" id="tooltip-16"> Tooltip </db-tooltip></db-button\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TooltipDelay implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tooltip-delay");\n }\n }\n}\n', "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\n@Component({\n selector: "tooltip-density",\n standalone: true,\n imports: [CommonModule, DBButton, DBTooltip],\n template: `<ng-container\n ><db-button data-density="functional">\n Functional\n\n <db-tooltip id="tooltip-01">Tooltip</db-tooltip></db-button\n >\n <db-button data-density="regular">\n (Default) Regular\n\n <db-tooltip id="tooltip-02">Tooltip</db-tooltip></db-button\n >\n <db-button data-density="expressive">\n Expressive\n\n <db-tooltip id="tooltip-03">Tooltip</db-tooltip></db-button\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TooltipDensity implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tooltip-density");\n }\n }\n}\n', "emphasis.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\n@Component({\n selector: "tooltip-emphasis",\n standalone: true,\n imports: [CommonModule, DBButton, DBTooltip],\n template: `<ng-container\n ><db-button>\n (Default) Weak\n\n <db-tooltip id="tooltip-06">Tooltip</db-tooltip></db-button\n >\n <db-button>\n Strong\n\n <db-tooltip emphasis="strong" id="tooltip-07">\n Tooltip\n </db-tooltip></db-button\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TooltipEmphasis implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tooltip-emphasis");\n }\n }\n}\n', "placement.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\n@Component({\n selector: "tooltip-placement",\n standalone: true,\n imports: [CommonModule, DBButton, DBTooltip],\n template: `<ng-container\n ><db-button>\n bottom-start\n\n <db-tooltip placement="bottom-start" id="tooltip-08-start">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n (Default) bottom\n\n <db-tooltip placement="bottom" id="tooltip-08">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n bottom-end\n\n <db-tooltip placement="bottom-end" id="tooltip-08-end">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n left-start\n\n <db-tooltip placement="left-start" id="tooltip-10-start">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n left\n\n <db-tooltip placement="left" id="tooltip-10">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n left-end\n\n <db-tooltip placement="left-end" id="tooltip-10-end">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n right-start\n\n <db-tooltip placement="right-start" id="tooltip-11-start">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n right\n\n <db-tooltip placement="right" id="tooltip-11">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n right-end\n\n <db-tooltip placement="right-end" id="tooltip-11-end">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n top-start\n\n <db-tooltip placement="top-start" id="tooltip-09-start">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n top\n\n <db-tooltip placement="top" id="tooltip-09">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n top-end\n\n <db-tooltip placement="top-end" id="tooltip-09-end">\n Tooltip\n </db-tooltip></db-button\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TooltipPlacement implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tooltip-placement");\n }\n }\n}\n', "show-arrow.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\n@Component({\n selector: "tooltip-show-arrow",\n standalone: true,\n imports: [CommonModule, DBButton, DBTooltip],\n template: `<ng-container\n ><db-button>\n (Default) True\n\n <db-tooltip id="tooltip-04" [showArrow]="true">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n False\n\n <db-tooltip id="tooltip-05" [showArrow]="false">\n Tooltip\n </db-tooltip></db-button\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TooltipShowArrow implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tooltip-show-arrow");\n }\n }\n}\n', "width.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\n@Component({\n selector: "tooltip-width",\n standalone: true,\n imports: [CommonModule, DBButton, DBTooltip],\n template: `<ng-container\n ><db-button>\n (Default) Auto\n\n <db-tooltip id="tooltip-12">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </db-tooltip></db-button\n >\n <db-button>\n Fixed\n\n <db-tooltip width="fixed" id="tooltip-13">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </db-tooltip></db-button\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TooltipWidth implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tooltip-width");\n }\n }\n}\n' }, vue: { "animation.example.vue": '<template>\n <DBButton>\n (Default) True\n <DBTooltip id="tooltip-14" :animation="true"> Tooltip </DBTooltip></DBButton\n >\n <DBButton>\n False\n <DBTooltip id="tooltip-17" :animation="false">\n Tooltip\n </DBTooltip></DBButton\n >\n</template>\n\n<script setup lang="ts">\nimport DBButton from "../../button/button.vue";\nimport DBTooltip from "../tooltip.vue";\n</script>', "delay.example.vue": '<template>\n <DBButton>\n (Default) None\n <DBTooltip id="tooltip-144" delay="none"> Tooltip </DBTooltip></DBButton\n >\n <DBButton>\n Slow\n <DBTooltip delay="slow" id="tooltip-15"> Tooltip </DBTooltip></DBButton\n >\n <DBButton>\n Fast\n <DBTooltip delay="fast" id="tooltip-16"> Tooltip </DBTooltip></DBButton\n >\n</template>\n\n<script setup lang="ts">\nimport DBButton from "../../button/button.vue";\nimport DBTooltip from "../tooltip.vue";\n</script>', "density.example.vue": '<template>\n <DBButton data-density="functional">\n Functional\n <DBTooltip id="tooltip-01">Tooltip</DBTooltip></DBButton\n >\n <DBButton data-density="regular">\n (Default) Regular\n <DBTooltip id="tooltip-02">Tooltip</DBTooltip></DBButton\n >\n <DBButton data-density="expressive">\n Expressive\n <DBTooltip id="tooltip-03">Tooltip</DBTooltip></DBButton\n >\n</template>\n\n<script setup lang="ts">\nimport DBButton from "../../button/button.vue";\nimport DBTooltip from "../tooltip.vue";\n</script>', "emphasis.example.vue": '<template>\n <DBButton>\n (Default) Weak\n <DBTooltip id="tooltip-06">Tooltip</DBTooltip></DBButton\n >\n <DBButton>\n Strong\n <DBTooltip emphasis="strong" id="tooltip-07"> Tooltip </DBTooltip></DBButton\n >\n</template>\n\n<script setup lang="ts">\nimport DBButton from "../../button/button.vue";\nimport DBTooltip from "../tooltip.vue";\n</script>', "placement.example.vue": '<template>\n <DBButton>\n bottom-start\n <DBTooltip placement="bottom-start" id="tooltip-08-start">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n (Default) bottom\n <DBTooltip placement="bottom" id="tooltip-08">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n bottom-end\n <DBTooltip placement="bottom-end" id="tooltip-08-end">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n left-start\n <DBTooltip placement="left-start" id="tooltip-10-start">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n left\n <DBTooltip placement="left" id="tooltip-10"> Tooltip </DBTooltip></DBButton\n >\n <DBButton>\n left-end\n <DBTooltip placement="left-end" id="tooltip-10-end">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n right-start\n <DBTooltip placement="right-start" id="tooltip-11-start">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n right\n <DBTooltip placement="right" id="tooltip-11"> Tooltip </DBTooltip></DBButton\n >\n <DBButton>\n right-end\n <DBTooltip placement="right-end" id="tooltip-11-end">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n top-start\n <DBTooltip placement="top-start" id="tooltip-09-start">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n top\n <DBTooltip placement="top" id="tooltip-09"> Tooltip </DBTooltip></DBButton\n >\n <DBButton>\n top-end\n <DBTooltip placement="top-end" id="tooltip-09-end">\n Tooltip\n </DBTooltip></DBButton\n >\n</template>\n\n<script setup lang="ts">\nimport DBButton from "../../button/button.vue";\nimport DBTooltip from "../tooltip.vue";\n</script>', "show-arrow.example.vue": '<template>\n <DBButton>\n (Default) True\n <DBTooltip id="tooltip-04" :showArrow="true"> Tooltip </DBTooltip></DBButton\n >\n <DBButton>\n False\n <DBTooltip id="tooltip-05" :showArrow="false">\n Tooltip\n </DBTooltip></DBButton\n >\n</template>\n\n<script setup lang="ts">\nimport DBButton from "../../button/button.vue";\nimport DBTooltip from "../tooltip.vue";\n</script>', "width.example.vue": '<template>\n <DBButton>\n (Default) Auto\n <DBTooltip id="tooltip-12">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </DBTooltip></DBButton\n >\n <DBButton>\n Fixed\n <DBTooltip width="fixed" id="tooltip-13">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </DBTooltip></DBButton\n >\n</template>\n\n<script setup lang="ts">\nimport DBButton from "../../button/button.vue";\nimport DBTooltip from "../tooltip.vue";\n</script>' }, "web-components": { "animation.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tooltip-animation",\n})\nexport class TooltipAnimation {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tooltip-animation");\n }\n\n render() {\n return (\n <Fragment>\n <db-button>\n (Default) True\n <db-tooltip id="tooltip-14" animation={true}>\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n False\n <db-tooltip id="tooltip-17" animation={false}>\n Tooltip\n </db-tooltip>\n </db-button>\n </Fragment>\n );\n }\n}\n', "delay.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tooltip-delay",\n})\nexport class TooltipDelay {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tooltip-delay");\n }\n\n render() {\n return (\n <Fragment>\n <db-button>\n (Default) None\n <db-tooltip id="tooltip-144" delay="none">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n Slow\n <db-tooltip delay="slow" id="tooltip-15">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n Fast\n <db-tooltip delay="fast" id="tooltip-16">\n Tooltip\n </db-tooltip>\n </db-button>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tooltip-density",\n})\nexport class TooltipDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tooltip-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-button data-density="functional">\n Functional\n <db-tooltip id="tooltip-01">Tooltip</db-tooltip>\n </db-button>\n <db-button data-density="regular">\n (Default) Regular\n <db-tooltip id="tooltip-02">Tooltip</db-tooltip>\n </db-button>\n <db-button data-density="expressive">\n Expressive\n <db-tooltip id="tooltip-03">Tooltip</db-tooltip>\n </db-button>\n </Fragment>\n );\n }\n}\n', "emphasis.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tooltip-emphasis",\n})\nexport class TooltipEmphasis {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tooltip-emphasis");\n }\n\n render() {\n return (\n <Fragment>\n <db-button>\n (Default) Weak\n <db-tooltip id="tooltip-06">Tooltip</db-tooltip>\n </db-button>\n <db-button>\n Strong\n <db-tooltip emphasis="strong" id="tooltip-07">\n Tooltip\n </db-tooltip>\n </db-button>\n </Fragment>\n );\n }\n}\n', "placement.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tooltip-placement",\n})\nexport class TooltipPlacement {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tooltip-placement");\n }\n\n render() {\n return (\n <Fragment>\n <db-button>\n bottom-start\n <db-tooltip placement="bottom-start" id="tooltip-08-start">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n (Default) bottom\n <db-tooltip placement="bottom" id="tooltip-08">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n bottom-end\n <db-tooltip placement="bottom-end" id="tooltip-08-end">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n left-start\n <db-tooltip placement="left-start" id="tooltip-10-start">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n left\n <db-tooltip placement="left" id="tooltip-10">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n left-end\n <db-tooltip placement="left-end" id="tooltip-10-end">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n right-start\n <db-tooltip placement="right-start" id="tooltip-11-start">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n right\n <db-tooltip placement="right" id="tooltip-11">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n right-end\n <db-tooltip placement="right-end" id="tooltip-11-end">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n top-start\n <db-tooltip placement="top-start" id="tooltip-09-start">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n top\n <db-tooltip placement="top" id="tooltip-09">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n top-end\n <db-tooltip placement="top-end" id="tooltip-09-end">\n Tooltip\n </db-tooltip>\n </db-button>\n </Fragment>\n );\n }\n}\n', "show-arrow.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tooltip-show-arrow",\n})\nexport class TooltipShowArrow {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tooltip-show-arrow");\n }\n\n render() {\n return (\n <Fragment>\n <db-button>\n (Default) True\n <db-tooltip id="tooltip-04" showArrow={true}>\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n False\n <db-tooltip id="tooltip-05" showArrow={false}>\n Tooltip\n </db-tooltip>\n </db-button>\n </Fragment>\n );\n }\n}\n', "width.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tooltip-width",\n})\nexport class TooltipWidth {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tooltip-width");\n }\n\n render() {\n return (\n <Fragment>\n <db-button>\n (Default) Auto\n <db-tooltip id="tooltip-12">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </db-tooltip>\n </db-button>\n <db-button>\n Fixed\n <db-tooltip width="fixed" id="tooltip-13">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </db-tooltip>\n </db-button>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTooltip</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <h1>Placement</h1>\n <button\n class="db-button"\n aria-describedby="tooltip-01"\n data-has-tooltip="true"\n >\n Tooltip\n <i class="db-tooltip" id="tooltip-01">Test</i>\n </button>\n <button\n class="db-button"\n aria-describedby="tooltip-02"\n data-has-tooltip="true"\n >\n Tooltip top\n <i class="db-tooltip" data-placement="top" id="tooltip-02">Test</i>\n </button>\n <button\n class="db-button"\n aria-describedby="tooltip-03"\n data-has-tooltip="true"\n >\n Tooltip left\n <i class="db-tooltip" data-placement="left" id="tooltip-03">Test</i>\n </button>\n <button\n class="db-button"\n aria-describedby="tooltip-04"\n data-has-tooltip="true"\n >\n Tooltip right\n <i class="db-tooltip" data-placement="right" id="tooltip-04"\n >Test</i\n >\n </button>\n <button\n class="db-button"\n aria-describedby="tooltip-05"\n data-has-tooltip="true"\n >\n Tooltip Strong\n <i class="db-tooltip" data-emphasis="strong" id="tooltip-05"\n >Test</i\n >\n </button>\n </body>\n</html>\n' } } } }, tokens: { colors: '/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$variants:\n "neutral", "brand", "critical", "successful", "warning", "informational";\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$variant-colors:\n "neutral", "critical", "successful", "warning", "informational";\n$on-background-colors:\n "emphasis-100", "emphasis-90", "emphasis-80", "emphasis-70", "emphasis-60",\n "emphasis-50";\n$background-colors:\n "basic-level-1", "basic-level-2", "basic-level-3", "basic-transparent-semi",\n "basic-transparent-full";\n$inverted-colors: "contrast-max", "contrast-high", "contrast-low";\n\n// adaptive colors\n\n// bg basic\n$db-adaptive-bg-basic-level-1-default: var(\n --db-adaptive-bg-basic-level-1-default\n);\n$db-adaptive-bg-basic-level-1-hovered: var(\n --db-adaptive-bg-basic-level-1-hovered\n);\n$db-adaptive-bg-basic-level-1-pressed: var(\n --db-adaptive-bg-basic-level-1-pressed\n);\n$db-adaptive-bg-basic-level-2-default: var(\n --db-adaptive-bg-basic-level-2-default\n);\n$db-adaptive-bg-basic-level-2-hovered: var(\n --db-adaptive-bg-basic-level-2-hovered\n);\n$db-adaptive-bg-basic-level-2-pressed: var(\n --db-adaptive-bg-basic-level-2-pressed\n);\n$db-adaptive-bg-basic-level-3-default: var(\n --db-adaptive-bg-basic-level-3-default\n);\n$db-adaptive-bg-basic-level-3-hovered: var(\n --db-adaptive-bg-basic-level-3-hovered\n);\n$db-adaptive-bg-basic-level-3-pressed: var(\n --db-adaptive-bg-basic-level-3-pressed\n);\n$db-adaptive-bg-basic-transparent-full-default: var(\n --db-adaptive-bg-basic-transparent-full-default\n);\n$db-adaptive-bg-basic-transparent-semi-default: var(\n --db-adaptive-bg-basic-transparent-semi-default\n);\n$db-adaptive-bg-basic-transparent-full-hovered: var(\n --db-adaptive-bg-basic-transparent-full-hovered\n);\n$db-adaptive-bg-basic-transparent-full-pressed: var(\n --db-adaptive-bg-basic-transparent-full-pressed\n);\n$db-adaptive-bg-basic-transparent-semi-hovered: var(\n --db-adaptive-bg-basic-transparent-semi-hovered\n);\n$db-adaptive-bg-basic-transparent-semi-pressed: var(\n --db-adaptive-bg-basic-transparent-semi-pressed\n);\n\n// on-bg basic\n$db-adaptive-on-bg-basic-emphasis-100-default: var(\n --db-adaptive-on-bg-basic-emphasis-100-default\n);\n$db-adaptive-on-bg-basic-emphasis-100-hovered: var(\n --db-adaptive-on-bg-basic-emphasis-100-hovered\n);\n$db-adaptive-on-bg-basic-emphasis-100-pressed: var(\n --db-adaptive-on-bg-basic-emphasis-100-pressed\n);\n$db-adaptive-on-bg-basic-emphasis-90-default: var(\n --db-adaptive-on-bg-basic-emphasis-90-default\n);\n$db-adaptive-on-bg-basic-emphasis-90-hovered: var(\n --db-adaptive-on-bg-basic-emphasis-90-hovered\n);\n$db-adaptive-on-bg-basic-emphasis-90-pressed: var(\n --db-adaptive-on-bg-basic-emphasis-90-pressed\n);\n$db-adaptive-on-bg-basic-emphasis-80-default: var(\n --db-adaptive-on-bg-basic-emphasis-80-default\n);\n$db-adaptive-on-bg-basic-emphasis-80-hovered: var(\n --db-adaptive-on-bg-basic-emphasis-80-hovered\n);\n$db-adaptive-on-bg-basic-emphasis-80-pressed: var(\n --db-adaptive-on-bg-basic-emphasis-80-pressed\n);\n$db-adaptive-on-bg-basic-emphasis-70-default: var(\n --db-adaptive-on-bg-basic-emphasis-70-default\n);\n$db-adaptive-on-bg-basic-emphasis-70-hovered: var(\n --db-adaptive-on-bg-basic-emphasis-70-hovered\n);\n$db-adaptive-on-bg-basic-emphasis-70-pressed: var(\n --db-adaptive-on-bg-basic-emphasis-70-pressed\n);\n$db-adaptive-on-bg-basic-emphasis-60-default: var(\n --db-adaptive-on-bg-basic-emphasis-60-default\n);\n$db-adaptive-on-bg-basic-emphasis-50-default: var(\n --db-adaptive-on-bg-basic-emphasis-50-default\n);\n\n// inverted\n\n$db-adaptive-bg-inverted-contrast-max-default: var(\n --db-adaptive-bg-inverted-contrast-max-default\n);\n$db-adaptive-bg-inverted-contrast-max-hovered: var(\n --db-adaptive-bg-inverted-contrast-max-hovered\n);\n$db-adaptive-bg-inverted-contrast-max-pressed: var(\n --db-adaptive-bg-inverted-contrast-max-pressed\n);\n$db-adaptive-bg-inverted-contrast-high-default: var(\n --db-adaptive-bg-inverted-contrast-high-default\n);\n$db-adaptive-bg-inverted-contrast-high-hovered: var(\n --db-adaptive-bg-inverted-contrast-high-hovered\n);\n$db-adaptive-bg-inverted-contrast-high-pressed: var(\n --db-adaptive-bg-inverted-contrast-high-pressed\n);\n$db-adaptive-bg-inverted-contrast-low-default: var(\n --db-adaptive-bg-inverted-contrast-low-default\n);\n$db-adaptive-bg-inverted-contrast-low-hovered: var(\n --db-adaptive-bg-inverted-contrast-low-hovered\n);\n$db-adaptive-bg-inverted-contrast-low-pressed: var(\n --db-adaptive-bg-inverted-contrast-low-pressed\n);\n\n// on-bg-inverted\n$db-adaptive-on-bg-inverted-default: var(--db-adaptive-on-bg-inverted-default);\n$db-adaptive-on-bg-inverted-hovered: var(--db-adaptive-on-bg-inverted-hovered);\n$db-adaptive-on-bg-inverted-pressed: var(--db-adaptive-on-bg-inverted-pressed);\n\n// origin\n$db-adaptive-origin-default: var(--db-adaptive-origin-default);\n$db-adaptive-origin-hovered: var(--db-adaptive-origin-hovered);\n$db-adaptive-origin-pressed: var(--db-adaptive-origin-pressed);\n\n// on-origin\n$db-adaptive-on-origin-default: var(--db-adaptive-on-origin-default);\n$db-adaptive-on-origin-hovered: var(--db-adaptive-on-origin-hovered);\n$db-adaptive-on-origin-pressed: var(--db-adaptive-on-origin-pressed);\n\n// vibrant\n$db-adaptive-bg-vibrant-default: var(--db-adaptive-bg-vibrant-default);\n$db-adaptive-bg-vibrant-hovered: var(--db-adaptive-bg-vibrant-hovered);\n$db-adaptive-bg-vibrant-pressed: var(--db-adaptive-bg-vibrant-pressed);\n\n// on-vibrant\n$db-adaptive-on-bg-vibrant-default: var(--db-adaptive-on-bg-vibrant-default);\n$db-adaptive-on-bg-vibrant-hovered: var(--db-adaptive-on-bg-vibrant-hovered);\n$db-adaptive-on-bg-vibrant-pressed: var(--db-adaptive-on-bg-vibrant-pressed);\n', typography: "// Use for body tags like <p>\n\n$db-type-body-3xs: var(--db-type-body-3xs);\n$db-type-body-2xs: var(--db-type-body-2xs);\n$db-type-body-xs: var(--db-type-body-xs);\n$db-type-body-sm: var(--db-type-body-sm);\n$db-type-body-md: var(--db-type-body-md);\n$db-type-body-lg: var(--db-type-body-lg);\n$db-type-body-xl: var(--db-type-body-xl);\n$db-type-body-2xl: var(--db-type-body-2xl);\n$db-type-body-3xl: var(--db-type-body-3xl);\n\n// Use for headline tags like <h1>\n\n$db-type-headline-3xs: var(--db-type-headline-3xs);\n$db-type-headline-2xs: var(--db-type-headline-2xs);\n$db-type-headline-xs: var(--db-type-headline-xs);\n$db-type-headline-sm: var(--db-type-headline-sm);\n$db-type-headline-md: var(--db-type-headline-md);\n$db-type-headline-lg: var(--db-type-headline-lg);\n$db-type-headline-xl: var(--db-type-headline-xl);\n$db-type-headline-2xl: var(--db-type-headline-2xl);\n$db-type-headline-3xl: var(--db-type-headline-3xl);\n", spacing: "// Use sizing values for fixed heights/widths e.g. the db-button has always a fixed height\n$db-sizing-3xs: var(--db-sizing-3xs);\n$db-sizing-2xs: var(--db-sizing-2xs);\n$db-sizing-xs: var(--db-sizing-xs);\n$db-sizing-sm: var(--db-sizing-sm);\n$db-sizing-md: var(--db-sizing-md);\n$db-sizing-lg: var(--db-sizing-lg);\n$db-sizing-xl: var(--db-sizing-xl);\n$db-sizing-2xl: var(--db-sizing-2xl);\n$db-sizing-3xl: var(--db-sizing-3xl);\n\n// Use fixed spacings for all kinds of distances (margin, padding, ...)\n$db-spacing-fixed-3xs: var(--db-spacing-fixed-3xs);\n$db-spacing-fixed-2xs: var(--db-spacing-fixed-2xs);\n$db-spacing-fixed-xs: var(--db-spacing-fixed-xs);\n$db-spacing-fixed-sm: var(--db-spacing-fixed-sm);\n$db-spacing-fixed-md: var(--db-spacing-fixed-md);\n$db-spacing-fixed-lg: var(--db-spacing-fixed-lg);\n$db-spacing-fixed-xl: var(--db-spacing-fixed-xl);\n$db-spacing-fixed-2xl: var(--db-spacing-fixed-2xl);\n$db-spacing-fixed-3xl: var(--db-spacing-fixed-3xl);\n\n// The primary use-case for responsive spacings are\n// paddings/gaps in an application e.g. the <main> should have a responsive padding.\n$db-spacing-responsive-3xs: var(--db-spacing-responsive-3xs);\n$db-spacing-responsive-2xs: var(--db-spacing-responsive-2xs);\n$db-spacing-responsive-xs: var(--db-spacing-responsive-xs);\n$db-spacing-responsive-sm: var(--db-spacing-responsive-sm);\n$db-spacing-responsive-md: var(--db-spacing-responsive-md);\n$db-spacing-responsive-lg: var(--db-spacing-responsive-lg);\n$db-spacing-responsive-xl: var(--db-spacing-responsive-xl);\n$db-spacing-responsive-2xl: var(--db-spacing-responsive-2xl);\n$db-spacing-responsive-3xl: var(--db-spacing-responsive-3xl);\n\n// Elevation\n\n$db-elevation-sm: var(--db-elevation-sm);\n$db-elevation-md: var(--db-elevation-md);\n$db-elevation-lg: var(--db-elevation-lg);\n\n// Border\n\n$db-border-width-3xs: var(--db-border-width-3xs);\n$db-border-width-2xs: var(--db-border-width-2xs);\n$db-border-width-xs: var(--db-border-width-xs);\n$db-border-width-sm: var(--db-border-width-sm);\n$db-border-width-md: var(--db-border-width-md);\n$db-border-width-lg: var(--db-border-width-lg);\n$db-border-width-xl: var(--db-border-width-xl);\n$db-border-width-2xl: var(--db-border-width-2xl);\n$db-border-width-3xl: var(--db-border-width-3xl);\n$db-border-radius-3xs: var(--db-border-radius-3xs);\n$db-border-radius-2xs: var(--db-border-radius-2xs);\n$db-border-radius-xs: var(--db-border-radius-xs);\n$db-border-radius-sm: var(--db-border-radius-sm);\n$db-border-radius-md: var(--db-border-radius-md);\n$db-border-radius-lg: var(--db-border-radius-lg);\n$db-border-radius-xl: var(--db-border-radius-xl);\n$db-border-radius-2xl: var(--db-border-radius-2xl);\n$db-border-radius-3xl: var(--db-border-radius-3xl);\n$db-border-radius-full: var(--db-border-radius-full);\n\n// Opacity\n\n$db-opacity-3xs: var(--db-opacity-3xs);\n$db-opacity-2xs: var(--db-opacity-2xs);\n$db-opacity-xs: var(--db-opacity-xs);\n$db-opacity-sm: var(--db-opacity-sm);\n$db-opacity-md: var(--db-opacity-md);\n$db-opacity-lg: var(--db-opacity-lg);\n$db-opacity-xl: var(--db-opacity-xl);\n$db-opacity-2xl: var(--db-opacity-2xl);\n$db-opacity-3xl: var(--db-opacity-3xl);\n$db-opacity-full: var(--db-opacity-full);\n\n// Transitions\n\n$db-transition-duration-extra-slow: var(--db-transition-duration-extra-slow);\n$db-transition-duration-slow: var(--db-transition-duration-slow);\n$db-transition-duration-medium: var(--db-transition-duration-medium);\n$db-transition-duration-fast: var(--db-transition-duration-fast);\n$db-transition-duration-extra-fast: var(--db-transition-duration-extra-fast);\n$db-transition-timing-emotional: var(--db-transition-timing-emotional);\n$db-transition-timing-functional: var(--db-transition-timing-functional);\n$db-transition-timing-show: var(--db-transition-timing-show);\n$db-transition-timing-hide: var(--db-transition-timing-hide);\n$db-transition-straight-emotional: var(--db-transition-straight-emotional);\n$db-transition-straight-functional: var(--db-transition-straight-functional);\n$db-transition-straight-show: var(--db-transition-straight-show);\n$db-transition-straight-hide: var(--db-transition-straight-hide);\n\n// Screen sizes\n\n$db-screen-xs: var(--db-screen-xs);\n$db-screen-sm: var(--db-screen-sm);\n$db-screen-md: var(--db-screen-md);\n$db-screen-lg: var(--db-screen-lg);\n$db-screen-xl: var(--db-screen-xl);\n\n// Container sizes\n\n$db-container-3xs: var(--db-container-3xs);\n$db-container-2xs: var(--db-container-2xs);\n$db-container-xs: var(--db-container-xs);\n$db-container-sm: var(--db-container-sm);\n$db-container-md: var(--db-container-md);\n$db-container-lg: var(--db-container-lg);\n$db-container-xl: var(--db-container-xl);\n$db-container-2xl: var(--db-container-2xl);\n$db-container-3xl: var(--db-container-3xl);\n", density: '$densities: ("expressive", "regular", "functional");\n$sizings: "3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl";\n', animation: "@keyframes popover-animation {\n 0% {\n pointer-events: none;\n opacity: 0;\n transform: translate(\n var(--db-popover-center-x, var(--db-popover-translate-x, 0%)),\n var(--db-popover-center-y, var(--db-popover-translate-y, 0%))\n );\n }\n\n 100% {\n pointer-events: auto;\n opacity: 1;\n transform: translate(\n var(--db-popover-center-x, 0%),\n var(--db-popover-center-y, 0%)\n );\n }\n}\n\n@keyframes rotate {\n 100% {\n transform: rotate(1turn);\n }\n}\n", transitions: '@use "../variables";\n\n%default-transition {\n transition:\n outline #{variables.$db-transition-duration-extra-fast},\n border-color #{variables.$db-transition-straight-emotional},\n background-color #{variables.$db-transition-straight-emotional};\n}\n\n%default-fg-transition {\n transition:\n outline #{variables.$db-transition-duration-extra-fast},\n color #{variables.$db-transition-straight-emotional};\n}\n' }, docs: { "packages/components/src/components/accordion/docs/Angular.md": '## Angular\n\nFor general installation and configuration look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBAccordion, DBAccordionItem } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBAccordion, DBAccordionItem],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-accordion>\n <db-accordion-item\n headlinePlain="Item 1"\n content="Content 1"\n ></db-accordion-item>\n <db-accordion-item\n headlinePlain="Item 2"\n content="Content 2"\n ></db-accordion-item>\n <db-accordion-item\n headlinePlain="Item 3"\n content="Content 3"\n ></db-accordion-item>\n</db-accordion>\n```\n', "packages/components/src/components/accordion/docs/HTML.md": '## HTML\n\nFor general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-accordion">\n <details class="db-accordion-item">\n <summary>Title 1</summary>\n <div>Content 1</div>\n </details>\n <details class="db-accordion-item">\n <summary>Title 2</summary>\n <div>Content 2</div>\n </details>\n <details class="db-accordion-item">\n <summary>Title 3</summary>\n <div>Content 3</div>\n </details>\n </div>\n</body>\n```\n', "packages/components/src/components/accordion/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/accordion/docs/React.md": '## React\n\nFor general installation and configuration look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBAccordion, DBAccordionItem } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBAccordion>\n <DBAccordionItem headlinePlain="Item 1" content="Content 1" />\n <DBAccordionItem headlinePlain="Item 2" content="Content 2" />\n <DBAccordionItem headlinePlain="Item 3" content="Content 3" />\n </DBAccordion>\n);\nexport default App;\n```\n', "packages/components/src/components/accordion/docs/Vue.md": '## Vue\n\nFor general installation and configuration look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBAccordion, DBAccordionItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBAccordion>\n <DBAccordionItem headlinePlain="Item 1" content="Content 1" />\n <DBAccordionItem headlinePlain="Item 2" content="Content 2" />\n <DBAccordionItem headlinePlain="Item 3" content="Content 3" />\n </DBAccordion>\n</template>\n```\n', "packages/components/src/components/accordion-item/docs/Angular.md": '## Angular\n\nFor general installation and configuration look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBAccordionItem } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBAccordionItem],\n // ...\n})\n```\n\n### Use component\n\n#### With Content Projection\n\n```html app.component.html\n<!-- app.component.html -->\n<db-accordion-item>\n <ng-container *headline>Title</ng-container>\n Content\n</db-accordion-item>\n```\n\n#### With attributes\n\n```html app.component.html\n<!-- app.component.html -->\n<db-accordion-item headlinePlain="Title" content="Content"></db-accordion-item>\n```\n', "packages/components/src/components/accordion-item/docs/HTML.md": '## HTML\n\nFor general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <details class="db-accordion-item">\n <summary>Title</summary>\n <div>Content</div>\n </details>\n</body>\n```\n', "packages/components/src/components/accordion-item/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| --------------- | :----: | ------------------- | -------------------------------------------------------------------------------------------------------------------------------- |\n| `cmp-accordion` | \u{1F501} | `db-accordion-item` | The old accordion was just 1 item, we split it to combine multiple accordion-items into 1 accordion (which is another component) |\n\n### props\n\n| Before | Status | After | Description |\n| ---------- | :----: | ---------- | ----------------------------------------------------------- |\n| `summary` | \u{1F501} | `headline` | The title/summary of the details element. |\n| `emphasis` | \u274C | \u274C | There is no emphasis anymore. |\n| `size` | \u274C | \u274C | Controlled by the density. |\n| | \u{1F195} | `disabled` | Disable the component. |\n| | \u{1F195} | `content` | Pass in a simple string as fallback to normal children/slot |\n", "packages/components/src/components/accordion-item/docs/React.md": '## React\n\nFor general installation and configuration look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n#### With Slots\n\n```tsx App.tsx\n// App.tsx\nimport { DBAccordionItem } from "@db-ux/react-core-components";\n\nconst App = () => <DBAccordionItem headline="Title">Content</DBAccordionItem>;\nexport default App;\n```\n\n#### With attributes\n\n```tsx App.tsx\n// App.tsx\nimport { DBAccordionItem } from "@db-ux/react-core-components";\n\nconst App = () => <DBAccordionItem headline="Title" content="Content" />;\nexport default App;\n```\n', "packages/components/src/components/accordion-item/docs/Vue.md": '## Vue\n\nFor general installation and configuration look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n#### With Slots\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBAccordionItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBAccordionItem>\n <template v-slot:headline>Title</template>\n Content\n </DBAccordionItem>\n</template>\n```\n\n#### With attributes\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBAccordionItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBAccordionItem headline="Title" content="Content"></DBAccordionItem>\n</template>\n```\n', "packages/components/src/components/badge/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBBadge } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBBadge],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-badge>Badge</db-badge>\n```\n", "packages/components/src/components/badge/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <span class="db-badge">Badge</span>\n</body>\n```\n', "packages/components/src/components/badge/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/badge/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBBadge } from "@db-ux/react-core-components";\n\nconst App = () => <DBBadge>Badge</DBBadge>;\n\nexport default App;\n```\n', "packages/components/src/components/badge/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBBadge } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBBadge>Badge</DBBadge>\n</template>\n```\n', "packages/components/src/components/brand/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBBrand } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBBrand],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-brand>Brand</db-brand>\n```\n", "packages/components/src/components/brand/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-brand">Brand</div>\n</body>\n```\n', "packages/components/src/components/brand/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ----------- | :----: | ---------- | ----------- |\n| `cmp-brand` | \u{1F501} | `db-brand` | |\n\n### properties\n\n> **Note**\n> We removed all old properties, because brand hasn't a wrapping anchor tag (`<a>`) anymore.\n> If you want to use a link around `db-brand`, do it by yourself.\n\n| Before | Status | After | Description |\n| ---------------- | :----: | :---: | ----------------------------------------------------------------------------------------------------- |\n| `siteNameLink` | \u274C | \u274C | see Note |\n| `alt` | \u274C | \u274C | see Note |\n| `anchorRef` | \u274C | \u274C | see Note |\n| `anchorTitle` | \u274C | \u274C | see Note |\n| `anchorRelation` | \u274C | \u274C | see Note |\n| `src` | \u274C | \u274C | see Note |\n| `hideLogo` | \u{1F195} | \u274C | If you want a custom image, you can hide the default one and pass anything into the `children`/`slot` |\n", "packages/components/src/components/brand/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBBrand } from "@db-ux/react-core-components";\n\nconst App = () => <DBBrand>Brand</DBBrand>;\n\nexport default App;\n```\n', "packages/components/src/components/brand/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBBrand } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBBrand>Brand</DBBrand>\n</template>\n```\n', "packages/components/src/components/button/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBButton } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBButton],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-button variant=\"brand\">Button</db-button>\n```\n", "packages/components/src/components/button/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <button class="db-button" data-variant="brand" type="button">Button</button>\n</body>\n```\n', "packages/components/src/components/button/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ----------- | ----------- |\n| `elm-button` | \u{1F501} | `db-button` | |\n\n### sizes\n\n| Before | Status | After | Description |\n| --------- | :----: | :---: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `large` | \u274C | \u274C | it became obsolete mainly due to our [density](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system-v3/principles/densities) introduction |\n| `regular` | \u274C | \u274C | there is a default (`medium`) now |\n\n### variants\n\n| Before | Status | After | Description |\n| ------------------- | :----: | ---------- | ------------------------------------------------------------ |\n| `primary` | \u274C | \u274C | not valid anymore, use `outlined` buttons for those purposes |\n| `brand-primary` | \u{1F501} | `primary` | |\n| `secondary-outline` | \u{1F501} | `outlined` | |\n| `secondary-solid` | \u{1F501} | `solid` | |\n| `tertiary-plain` | \u{1F501} | `text` | |\n\n### icons\n\n| Before | Status | After | Description |\n| -------------- | :----: | -------- | ----------------------------------------------------------------- |\n| `iconTrailing` | \u274C | \u274C | not valid anymore, for buttons only icons before text are allowed |\n| `iconOnly` | \u{1F501} | `noText` | |\n", "packages/components/src/components/button/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBButton } from "@db-ux/react-core-components";\n\nconst App = () => <DBButton variant="brand">Button</DBButton>;\n\nexport default App;\n```\n', "packages/components/src/components/button/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBButton } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBButton variant="brand">Button</DBButton>\n</template>\n```\n', "packages/components/src/components/card/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport { DBCard } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBCard\n ],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-card>Card content</db-card>\n```\n", "packages/components/src/components/card/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-card">Card content</div>\n</body>\n```\n', "packages/components/src/components/card/docs/Migration.md": '## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ---------- | :----: | --------- | ----------- |\n| `cmp-card` | \u{1F501} | `db-card` | |\n\n### variant\n\n| Before | Status | After | Description |\n| --------- | :----: | :-------: | ------------------------------------------------------------------------------------------------------------------------------ |\n| `variant` | \u{1F501} | `variant` | There is no default `header`/`content` anymore. Now you can change the card with `variant="interactive"` to act like a button. |\n| `header` | \u274C | \u274C | Add your own content via children/slot. |\n| `content` | \u274C | \u274C | Add your own content via children/slot. |\n\n### image\n\n| Before | Status | After | Description |\n| ------------------------ | :----: | ----------- | ----------- |\n| `alt` | \u{1F501} | `imgAlt` | |\n| `image` | \u{1F501} | `imgSrc` | |\n| | \u{1F195} | `imgWidth` | |\n| | \u{1F195} | `imgHeight` | |\n| `illustration` | \u274C | \u274C | |\n| `uiCoreIllustrationPath` | \u274C | \u274C | |\n', "packages/components/src/components/card/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBCard } from "@db-ux/react-core-components";\n\nconst App = () => <DBCard>Card content</DBCard>;\nexport default App;\n```\n', "packages/components/src/components/card/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBCard } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBCard>Card content</DBCard>\n</template>\n```\n', "packages/components/src/components/checkbox/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBCheckbox } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBCheckbox],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<ul>\n @for (checkboxName of checkboxNames; track checkboxName) {\n <li>\n <db-checkbox\n (change)="checkbox = checkboxName"\n [label]="\'Checkbox \' + checkboxName"\n [value]="checkboxName"\n name="CheckboxGroup"\n ></db-checkbox>\n </li>\n }\n</ul>\n```\n\n```ts app.component.ts\n// app.component.ts\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-app",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n checkboxNames = ["X", "Y", "Z"];\n checkbox = "";\n}\n```\n\n#### Adding Formatted Infotext\n\nThe message property of the db-checkbox does not accept HTML content for security reasons (to prevent XSS attacks). To add a richly formatted description, use the `db-infotext` component as a sibling element. You must link both components using the [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby)-HTML-attribute to ensure accessibility.\n\n```html\n<db-checkbox aria-describedby="checkbox-message">\n Example Checkbox\n</db-checkbox>\n<db-infotext id="checkbox-message"> Example <strong>Text</strong> </db-infotext>\n```\n\n```ts app.component.ts\nimport { Component } from "@angular/core";\nimport { DBCheckbox, DBInfotext } from "@db-ux/ngx-core-components";\n\n@Component({\n selector: "app-root",\n standalone: true,\n imports: [DBCheckbox, DBInfotext],\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {}\n```\n\n## How to use with Template Driven Forms\n\nThird party controls require a `ControlValueAccessor` to function with angular forms. Adding an `ngDefaultControl` attribute will allow them to use that directive.\n[Further information](https://stackoverflow.com/a/46465959)\n\n```ts app.component.ts\n//app.component.ts\nimport { FormsModule } from \'@angular/forms\';\n\n@Component({\n // ...\n imports: [\n // ...,\n FormsModule\n ],\n // ...\n})\n```\n\n```html form.component.html\n<!-- form.component.html -->\n<form>\n <db-checkbox\n (change)="checkbox = $event.target.checked"\n name="checkbox"\n label="Checkbox"\n ></db-checkbox>\n <db-button type="button" variant="brand" (click)="showValues()"\n >Get checkbox value</db-button\n >\n</form>\n\n<h2>Output</h2>\n<dl>\n <dt>checkbox\'s value</dt>\n <dd>checkbox {{ checkbox ? "" : "un" }}checked</dd>\n</dl>\n```\n\n```ts form.component.ts\n// form.component.ts\nexport class FormComponent {\n checkbox = "";\n showValues(): void {\n alert(JSON.stringify({ checkbox: this.checkbox }));\n }\n}\n```\n\n## How to use with Reactive Forms\n\ncoming soon \u2026 if your interested in contributing, you\'re very welcome ;)\n', "packages/components/src/components/checkbox/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <label class="db-checkbox" for="checkbox-element">\n <input type="checkbox" id="checkbox-element" name="States" />\n Label\n </label>\n</body>\n```\n\n#### Adding Formatted Infotext\n\nTo add a descriptive text with HTML formatting (e.g., bold or italic text) to a checkbox, you should use a separate element for the message and link it via the [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby)-HTML-attribute for accessibility. This ensures that screen readers correctly associate the message with the checkbox.\n\n```html index.html\n<!-- Checkbox with formatted infotext -->\n...\n<body>\n <label class="db-checkbox" for="checkbox-element">\n <input\n type="checkbox"\n id="checkbox-element"\n name="States"\n aria-describedby="checkbox-message"\n />\n Label\n </label>\n <p class="db-infotext" id="checkbox-message">\n Example <strong>Text</strong>\n </p>\n</body>\n```\n', "packages/components/src/components/checkbox/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| -------------- | :----: | ------------- | ----------- |\n| `elm-checkbox` | \u{1F501} | `db-checkbox` | |\n\n### id\n\n| Before | Status | After | Description |\n| ---------- | :----: | ----- | ----------- |\n| `input_id` | \u{1F501} | `id` | |\n", "packages/components/src/components/checkbox/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBCheckbox } from "@db-ux/react-core-components";\n\nconst App = () => {\n const [checkbox, setCheckbox] = useState("");\n\n return (\n <DBCheckbox\n name="checkbox"\n value="Checkbox checked"\n onChange={(event) => {\n setCheckbox(event.target.checked);\n }}\n >\n Checkbox\n </DBCheckbox>\n );\n};\n\nexport default App;\n```\n\n#### Adding Formatted Infotext\n\nThe message prop of the DBCheckbox does not accept React Nodes or HTML for security reasons (to prevent Cross-Site Scripting (XSS)). To add a richly formatted description, use the DBInfotext component as a sibling element. It is crucial to link both components using the [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby)-HTML-attribute to ensure accessibility.\n\n```tsx App.tsx\nimport { DBCheckbox, DBInfotext } from "@db-ux/react-core-components";\n\nconst App = () => {\n return (\n <div>\n <DBCheckbox\n // The aria-describedby attribute links the checkbox to its description.\n aria-describedby="checkbox-message"\n >\n Example Checkbox\n </DBCheckbox>\n\n {/* The DBInfotext component holds the formatted message. */}\n <DBInfotext id="checkbox-message">\n Example <strong>Text</strong>\n </DBInfotext>\n </div>\n );\n};\n\nexport default App;\n```\n', "packages/components/src/components/checkbox/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script setup lang="ts">\nimport { DBCheckbox } from "@db-ux/v-core-components";\nimport { _ref } from "vue";\nconst checkbox = _ref("");\n</script>\n\n<template>\n <DBCheckbox @change="checkbox = $event.target.checked" name="checkbox">\n Checkbox\n </DBCheckbox>\n</template>\n```\n\n#### Adding Formatted Infotext\n\nThe message prop of the DBCheckbox does not accept HTML content for security reasons (to prevent XSS attacks). To add a richly formatted description, use the DBInfotext component as a sibling element. You must link both components using the [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby)-HTML-attribute to ensure accessibility.\n\n```vue App.vue\n<script setup lang="ts">\nimport { DBCheckbox, DBInfotext } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBCheckbox aria-describedby="checkbox-message">\n Example Checkbox\n </DBCheckbox>\n\n <DBInfotext id="checkbox-message">\n Example <strong>Text</strong>\n </DBInfotext>\n</template>\n```\n', "packages/components/src/components/custom-button/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBCustomButton } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n imports: [..., DBCustomButton],\n standalone: true\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-custom-button><button type=\"button\">CustomButton</button></db-custom-button>\n```\n", "packages/components/src/components/custom-button/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-custom-button">\n <button type="button">CustomButton</button>\n </div>\n <div class="db-custom-button">\n <a href="#">CustomButton</a>\n </div>\n</body>\n```\n', "packages/components/src/components/custom-button/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBCustomButton } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBCustomButton>\n <button type="button">CustomButton</button>\n </DBCustomButton>\n);\n\nexport default App;\n```\n', "packages/components/src/components/custom-button/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBCustomButton } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBCustomButton><button type="button">CustomButton</button></DBCustomButton>\n</template>\n```\n', "packages/components/src/components/custom-select/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport { DBCustomSelect } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBCustomSelect\n ],\n standalone: true\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-custom-select label="Label" placeholder="Placeholder" [options]="options" />\n```\n\n```ts app.component.ts\n// app.component.ts\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-app",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n options = [\n { value: "Option 1" },\n { value: "Option 2" },\n { value: "Option 3" },\n { value: "Option 4" },\n { value: "Option 5" }\n ];\n}\n```\n', "packages/components/src/components/custom-select/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ui/components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div\n class="db-custom-select"\n aria-invalid="false"\n data-custom-validity="no-validation"\n data-selected-type="text"\n >\n <select hidden>\n <option value="Option 1">Option 1</option>\n <option value="Option 2">Option 2</option>\n <option value="Option 3">Option 3</option>\n <option value="Option 4">Option 4</option>\n <option value="Option 5">Option 5</option>\n </select>\n <label>Label</label>\n <details>\n Functional\n <summary class="db-custom-select-form-field">\n <!-- Add selected options here with JS-->\n </summary>\n <article\n data-spacing="none"\n class="db-custom-select-dropdown db-card"\n >\n <section class="db-custom-select-list">\n <ul>\n <li class="db-custom-select-list-item db-radio">\n <label for="option-1">\n <input\n class="db-custom-select-list-item-checkbox"\n id="option-1"\n type="radio"\n name="multi-select"\n value="Option 1"\n data-disable-focus="true"\n />\n Option 1\n </label>\n </li>\n <li class="db-custom-select-list-item db-radio">\n <label for="option-2">\n <input\n class="db-custom-select-list-item-checkbox"\n id="option-2"\n type="radio"\n name="multi-select"\n value="Option 2"\n data-disable-focus="true"\n />\n Option 2\n </label>\n </li>\n <li class="db-custom-select-list-item db-radio">\n <label for="option-3">\n <input\n class="db-custom-select-list-item-checkbox"\n id="option-3"\n type="radio"\n name="multi-select"\n value="Option 3"\n data-disable-focus="true"\n />\n Option 3\n </label>\n </li>\n <li class="db-custom-select-list-item db-radio">\n <label for="option-4">\n <input\n class="db-custom-select-list-item-checkbox"\n id="option-4"\n type="radio"\n name="multi-select"\n value="Option 4"\n data-disable-focus="true"\n />\n Option 4\n </label>\n </li>\n <li class="db-custom-select-list-item db-radio">\n <label for="option-5">\n <input\n class="db-custom-select-list-item-checkbox"\n id="option-5"\n type="radio"\n name="multi-select"\n value="Option 5"\n data-disable-focus="true"\n />\n Option 5\n </label>\n </li>\n </ul>\n </section>\n <div>\n <button\n class="db-button"\n type="button"\n data-icon="cross"\n data-size="small"\n data-width="full"\n data-variant="ghost"\n >\n Close\n </button>\n </div>\n </article>\n </details>\n <span aria-hidden="true">Placeholder</span\n ><span class="db-infotext" data-semantic="successful" data-size="small"\n >TODO: Add a validMessage</span\n ><span class="db-infotext" data-semantic="critical" data-size="small"\n >TODO: Add an invalidMessage</span\n ><span data-visually-hidden="true" role="status"></span>\n </div>\n</body>\n```\n', "packages/components/src/components/custom-select/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-components](https://www.npmjs.com/package/@db-ui/react-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBCustomSelect } from "@db-ui/react-components";\n\nconst App = () => (\n <DBCustomSelect\n label="Label"\n placeholder="Placeholder"\n options={[\n { value: "Option 1" },\n { value: "Option 2" },\n { value: "Option 3" },\n { value: "Option 4" },\n { value: "Option 5" }\n ]}\n />\n);\n\nexport default App;\n```\n', "packages/components/src/components/custom-select/docs/Vue.md": `## Vue
|
|
37947
|
+
</script>`, "show-label.example.vue": '<template>\n <DBTextarea\n label="Label"\n placeholder="(Default) True"\n :showLabel="true"\n ></DBTextarea>\n <DBTextarea label="Label" placeholder="False" :showLabel="false"></DBTextarea>\n</template>\n\n<script setup lang="ts">\nimport DBTextarea from "../textarea.vue";\n</script>', "show-message.example.vue": '<template>\n <DBTextarea\n label="Label"\n placeholder="(Default) False"\n :showMessage="false"\n ></DBTextarea>\n <DBTextarea\n label="Label"\n message="Message"\n placeholder="true"\n :showMessage="true"\n ></DBTextarea>\n</template>\n\n<script setup lang="ts">\nimport DBTextarea from "../textarea.vue";\n</script>', "show-required-asterisk.example.vue": '<template>\n <DBTextarea\n label="Label"\n placeholder="(Default) True"\n :required="true"\n :showRequiredAsterisk="true"\n ></DBTextarea>\n <DBTextarea\n label="Label"\n placeholder="False"\n :required="true"\n :showRequiredAsterisk="false"\n ></DBTextarea>\n</template>\n\n<script setup lang="ts">\nimport DBTextarea from "../textarea.vue";\n</script>', "show-resizer.example.vue": '<template>\n <DBTextarea\n label="Label"\n placeholder="(Default) True"\n :showResizer="true"\n ></DBTextarea>\n <DBTextarea\n label="Label"\n placeholder="False"\n :showResizer="false"\n ></DBTextarea>\n</template>\n\n<script setup lang="ts">\nimport DBTextarea from "../textarea.vue";\n</script>', "state.example.vue": '<template>\n <DBTextarea label="Label" placeholder="(Default) Empty"></DBTextarea>\n <DBTextarea label="Label" value="Filled" placeholder="Filled"></DBTextarea>\n</template>\n\n<script setup lang="ts">\nimport DBTextarea from "../textarea.vue";\n</script>', "validation.example.vue": '<template>\n <DBTextarea\n label="Label"\n validation="no-validation"\n placeholder="(Default) No validation"\n ></DBTextarea>\n <DBTextarea\n label="Label"\n validation="invalid"\n invalidMessage="Invalid Message"\n placeholder="Invalid"\n ></DBTextarea>\n <DBTextarea\n label="Label"\n validation="valid"\n validMessage="Valid message"\n placeholder="Valid"\n ></DBTextarea>\n</template>\n\n<script setup lang="ts">\nimport DBTextarea from "../textarea.vue";\n</script>', "variant.example.vue": '<template>\n <DBTextarea label="Label" placeholder="(Default) Above"></DBTextarea>\n <DBTextarea\n label="Label"\n variant="floating"\n value="Floating Label"\n placeholder="Floating"\n ></DBTextarea>\n</template>\n\n<script setup lang="ts">\nimport DBTextarea from "../textarea.vue";\n</script>' }, "web-components": { "density.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-density",\n})\nexport class TextareaDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n data-density="functional"\n label="Label"\n placeholder="Functional"\n ></db-textarea>\n <db-textarea\n data-density="regular"\n label="Label"\n placeholder="(Default) Regular"\n ></db-textarea>\n <db-textarea\n data-density="expressive"\n label="Label"\n placeholder="Expressive"\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "disabled.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-disabled",\n})\nexport class TextareaDisabled {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-disabled");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n placeholder="(Default) False"\n disabled={false}\n ></db-textarea>\n <db-textarea\n label="Label"\n placeholder="True"\n disabled={true}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "examples-floating-label.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-examples-floating-label",\n})\nexport class TextareaExamplesFloatingLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-examples-floating-label");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n variant="floating"\n placeholder="(Default) Empty"\n ></db-textarea>\n <db-textarea\n label="Label"\n value="Filled"\n variant="floating"\n placeholder="Filled"\n ></db-textarea>\n <db-textarea\n label="Label"\n variant="floating"\n placeholder="Disabled"\n disabled={true}\n ></db-textarea>\n <db-textarea\n label="Label"\n value="Readonly - Filled"\n variant="floating"\n placeholder="Readonly - Filled"\n readOnly={true}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "field-sizing.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-field-sizing",\n})\nexport class TextareaFieldSizing {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-field-sizing");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-textarea\n label="Label"\n fieldSizing="fixed"\n placeholder="(Default) Fixed"\n ></db-textarea>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-textarea\n label="Label"\n fieldSizing="content"\n placeholder="Content"\n ></db-textarea>\n </div>\n </Fragment>\n );\n }\n}\n', "readonly.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-readonly",\n})\nexport class TextareaReadonly {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-readonly");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n value="(Default) False"\n placeholder="(Default) False"\n readOnly={false}\n ></db-textarea>\n <db-textarea\n label="Label"\n value="True"\n placeholder="True"\n readOnly={true}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "required.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-required",\n})\nexport class TextareaRequired {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-required");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n placeholder="(Default) False"\n required={false}\n ></db-textarea>\n <db-textarea\n label="Label"\n placeholder="True"\n required={true}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "rows.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-rows",\n})\nexport class TextareaRows {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-rows");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "328px",\n }}\n >\n <db-textarea\n label="(Default) 4 Rows"\n value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."\n placeholder="(Default) 4 Rows"\n ></db-textarea>\n </div>\n <div\n style={{\n width: "328px",\n }}\n >\n <db-textarea\n label="Custom Example 8 Rows"\n value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."\n placeholder="Custom"\n rows={8}\n ></db-textarea>\n </div>\n </Fragment>\n );\n }\n}\n', "show-label.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-show-label",\n})\nexport class TextareaShowLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-show-label");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n placeholder="(Default) True"\n showLabel={true}\n ></db-textarea>\n <db-textarea\n label="Label"\n placeholder="False"\n showLabel={false}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "show-message.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-show-message",\n})\nexport class TextareaShowMessage {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-show-message");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n placeholder="(Default) False"\n showMessage={false}\n ></db-textarea>\n <db-textarea\n label="Label"\n message="Message"\n placeholder="true"\n showMessage={true}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "show-required-asterisk.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-show-required-asterisk",\n})\nexport class TextareaShowRequiredAsterisk {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-show-required-asterisk");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n placeholder="(Default) True"\n required={true}\n showRequiredAsterisk={true}\n ></db-textarea>\n <db-textarea\n label="Label"\n placeholder="False"\n required={true}\n showRequiredAsterisk={false}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "show-resizer.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-show-resizer",\n})\nexport class TextareaShowResizer {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-show-resizer");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n placeholder="(Default) True"\n showResizer={true}\n ></db-textarea>\n <db-textarea\n label="Label"\n placeholder="False"\n showResizer={false}\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "state.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-state",\n})\nexport class TextareaState {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-state");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea label="Label" placeholder="(Default) Empty"></db-textarea>\n <db-textarea\n label="Label"\n value="Filled"\n placeholder="Filled"\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "validation.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-validation",\n})\nexport class TextareaValidation {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-validation");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea\n label="Label"\n validation="no-validation"\n placeholder="(Default) No validation"\n ></db-textarea>\n <db-textarea\n label="Label"\n validation="invalid"\n invalidMessage="Invalid Message"\n placeholder="Invalid"\n ></db-textarea>\n <db-textarea\n label="Label"\n validation="valid"\n validMessage="Valid message"\n placeholder="Valid"\n ></db-textarea>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBTextarea } from "../textarea";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "textarea-variant",\n})\nexport class TextareaVariant {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "textarea-variant");\n }\n\n render() {\n return (\n <Fragment>\n <db-textarea label="Label" placeholder="(Default) Above"></db-textarea>\n <db-textarea\n label="Label"\n variant="floating"\n value="Floating Label"\n placeholder="Floating"\n ></db-textarea>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTextarea</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-textarea">\n <label for="textarea"> Label </label>\n <textarea\n id="textarea"\n rows="2"\n cols="33"\n placeholder=" "\n aria-describedby="db-infotext-01"\n ></textarea>\n <span class="db-infotext" data-size="medium" id="db-infotext-01"\n >No icon</span\n >\n </div>\n <div class="db-textarea">\n <label for="textarea2"> Label </label>\n <textarea\n id="textarea2"\n rows="2"\n cols="33"\n placeholder=" "\n aria-describedby="db-infotext-02"\n ></textarea>\n <span\n class="db-infotext"\n data-size="medium"\n data-semantic="informational"\n id="db-infotext-02"\n >informational</span\n >\n </div>\n </body>\n</html>\n' } } }, tooltip: { props: "import {\n ClickEventState,\n DocumentScrollState,\n EmphasisProps,\n GlobalProps,\n GlobalState,\n InitializedState,\n PlacementProps,\n PopoverProps,\n PopoverState,\n ResetIdState,\n TextProps,\n WrapProps\n} from '../../shared/model';\n\nexport const TooltipVariantList = ['description', 'label'] as const;\nexport type TooltipVariantType = (typeof TooltipVariantList)[number];\n\nexport type DBTooltipDefaultProps = {\n /**\n * Show/Hides arrow\n */\n showArrow?: boolean | string;\n /**\n * Change the behavior of the tooltip:\n * - description: Adds `aria-describedby` to parent\n * - label: Adds `aria-labelledby` to parent\n */\n variant?: TooltipVariantType;\n};\n\nexport type DBTooltipProps = DBTooltipDefaultProps &\n GlobalProps &\n EmphasisProps &\n PlacementProps &\n PopoverProps &\n WrapProps &\n TextProps;\n\nexport type DBTooltipDefaultState = {\n getParent: () => HTMLElement;\n};\n\nexport type DBTooltipState = DBTooltipDefaultState &\n GlobalState &\n ClickEventState<HTMLElement> &\n PopoverState &\n InitializedState &\n DocumentScrollState &\n ResetIdState;\n", examples: ["Density", "Show Arrow", "Emphasis", "Placement", "Width", "Animation", "Delay"], exampleCode: { react: { "animation.example.tsx": 'import * as React from "react";\nimport DBButton from "../../button/button";\nimport DBTooltip from "../tooltip";\n\nfunction TooltipAnimation(props: any) {\n return (\n <>\n <DBButton>\n (Default) True\n <DBTooltip id="tooltip-14" animation>\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n False\n <DBTooltip id="tooltip-17" animation={false}>\n Tooltip\n </DBTooltip>\n </DBButton>\n </>\n );\n}\n\nexport default TooltipAnimation;\n', "delay.example.tsx": 'import * as React from "react";\nimport DBButton from "../../button/button";\nimport DBTooltip from "../tooltip";\n\nfunction TooltipDelay(props: any) {\n return (\n <>\n <DBButton>\n (Default) None\n <DBTooltip id="tooltip-144" delay="none">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n Slow\n <DBTooltip delay="slow" id="tooltip-15">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n Fast\n <DBTooltip delay="fast" id="tooltip-16">\n Tooltip\n </DBTooltip>\n </DBButton>\n </>\n );\n}\n\nexport default TooltipDelay;\n', "density.example.tsx": 'import * as React from "react";\nimport DBButton from "../../button/button";\nimport DBTooltip from "../tooltip";\n\nfunction TooltipDensity(props: any) {\n return (\n <>\n <DBButton data-density="functional">\n Functional\n <DBTooltip id="tooltip-01">Tooltip</DBTooltip>\n </DBButton>\n <DBButton data-density="regular">\n (Default) Regular\n <DBTooltip id="tooltip-02">Tooltip</DBTooltip>\n </DBButton>\n <DBButton data-density="expressive">\n Expressive\n <DBTooltip id="tooltip-03">Tooltip</DBTooltip>\n </DBButton>\n </>\n );\n}\n\nexport default TooltipDensity;\n', "emphasis.example.tsx": 'import * as React from "react";\nimport DBButton from "../../button/button";\nimport DBTooltip from "../tooltip";\n\nfunction TooltipEmphasis(props: any) {\n return (\n <>\n <DBButton>\n (Default) Weak\n <DBTooltip id="tooltip-06">Tooltip</DBTooltip>\n </DBButton>\n <DBButton>\n Strong\n <DBTooltip emphasis="strong" id="tooltip-07">\n Tooltip\n </DBTooltip>\n </DBButton>\n </>\n );\n}\n\nexport default TooltipEmphasis;\n', "placement.example.tsx": 'import * as React from "react";\nimport DBButton from "../../button/button";\nimport DBTooltip from "../tooltip";\n\nfunction TooltipPlacement(props: any) {\n return (\n <>\n <DBButton>\n bottom-start\n <DBTooltip placement="bottom-start" id="tooltip-08-start">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n (Default) bottom\n <DBTooltip placement="bottom" id="tooltip-08">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n bottom-end\n <DBTooltip placement="bottom-end" id="tooltip-08-end">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n left-start\n <DBTooltip placement="left-start" id="tooltip-10-start">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n left\n <DBTooltip placement="left" id="tooltip-10">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n left-end\n <DBTooltip placement="left-end" id="tooltip-10-end">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n right-start\n <DBTooltip placement="right-start" id="tooltip-11-start">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n right\n <DBTooltip placement="right" id="tooltip-11">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n right-end\n <DBTooltip placement="right-end" id="tooltip-11-end">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n top-start\n <DBTooltip placement="top-start" id="tooltip-09-start">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n top\n <DBTooltip placement="top" id="tooltip-09">\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n top-end\n <DBTooltip placement="top-end" id="tooltip-09-end">\n Tooltip\n </DBTooltip>\n </DBButton>\n </>\n );\n}\n\nexport default TooltipPlacement;\n', "show-arrow.example.tsx": 'import * as React from "react";\nimport DBButton from "../../button/button";\nimport DBTooltip from "../tooltip";\n\nfunction TooltipShowArrow(props: any) {\n return (\n <>\n <DBButton>\n (Default) True\n <DBTooltip id="tooltip-04" showArrow>\n Tooltip\n </DBTooltip>\n </DBButton>\n <DBButton>\n False\n <DBTooltip id="tooltip-05" showArrow={false}>\n Tooltip\n </DBTooltip>\n </DBButton>\n </>\n );\n}\n\nexport default TooltipShowArrow;\n', "width.example.tsx": 'import * as React from "react";\nimport DBButton from "../../button/button";\nimport DBTooltip from "../tooltip";\n\nfunction TooltipWidth(props: any) {\n return (\n <>\n <DBButton>\n (Default) Auto\n <DBTooltip id="tooltip-12">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </DBTooltip>\n </DBButton>\n <DBButton>\n Fixed\n <DBTooltip width="fixed" id="tooltip-13">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </DBTooltip>\n </DBButton>\n </>\n );\n}\n\nexport default TooltipWidth;\n' }, angular: { "animation.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\n@Component({\n selector: "tooltip-animation",\n standalone: true,\n imports: [CommonModule, DBButton, DBTooltip],\n template: `<ng-container\n ><db-button>\n (Default) True\n\n <db-tooltip id="tooltip-14" [animation]="true">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n False\n\n <db-tooltip id="tooltip-17" [animation]="false">\n Tooltip\n </db-tooltip></db-button\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TooltipAnimation implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tooltip-animation");\n }\n }\n}\n', "delay.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\n@Component({\n selector: "tooltip-delay",\n standalone: true,\n imports: [CommonModule, DBButton, DBTooltip],\n template: `<ng-container\n ><db-button>\n (Default) None\n\n <db-tooltip id="tooltip-144" delay="none">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n Slow\n\n <db-tooltip delay="slow" id="tooltip-15"> Tooltip </db-tooltip></db-button\n >\n <db-button>\n Fast\n\n <db-tooltip delay="fast" id="tooltip-16"> Tooltip </db-tooltip></db-button\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TooltipDelay implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tooltip-delay");\n }\n }\n}\n', "density.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\n@Component({\n selector: "tooltip-density",\n standalone: true,\n imports: [CommonModule, DBButton, DBTooltip],\n template: `<ng-container\n ><db-button data-density="functional">\n Functional\n\n <db-tooltip id="tooltip-01">Tooltip</db-tooltip></db-button\n >\n <db-button data-density="regular">\n (Default) Regular\n\n <db-tooltip id="tooltip-02">Tooltip</db-tooltip></db-button\n >\n <db-button data-density="expressive">\n Expressive\n\n <db-tooltip id="tooltip-03">Tooltip</db-tooltip></db-button\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TooltipDensity implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tooltip-density");\n }\n }\n}\n', "emphasis.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\n@Component({\n selector: "tooltip-emphasis",\n standalone: true,\n imports: [CommonModule, DBButton, DBTooltip],\n template: `<ng-container\n ><db-button>\n (Default) Weak\n\n <db-tooltip id="tooltip-06">Tooltip</db-tooltip></db-button\n >\n <db-button>\n Strong\n\n <db-tooltip emphasis="strong" id="tooltip-07">\n Tooltip\n </db-tooltip></db-button\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TooltipEmphasis implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tooltip-emphasis");\n }\n }\n}\n', "placement.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\n@Component({\n selector: "tooltip-placement",\n standalone: true,\n imports: [CommonModule, DBButton, DBTooltip],\n template: `<ng-container\n ><db-button>\n bottom-start\n\n <db-tooltip placement="bottom-start" id="tooltip-08-start">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n (Default) bottom\n\n <db-tooltip placement="bottom" id="tooltip-08">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n bottom-end\n\n <db-tooltip placement="bottom-end" id="tooltip-08-end">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n left-start\n\n <db-tooltip placement="left-start" id="tooltip-10-start">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n left\n\n <db-tooltip placement="left" id="tooltip-10">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n left-end\n\n <db-tooltip placement="left-end" id="tooltip-10-end">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n right-start\n\n <db-tooltip placement="right-start" id="tooltip-11-start">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n right\n\n <db-tooltip placement="right" id="tooltip-11">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n right-end\n\n <db-tooltip placement="right-end" id="tooltip-11-end">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n top-start\n\n <db-tooltip placement="top-start" id="tooltip-09-start">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n top\n\n <db-tooltip placement="top" id="tooltip-09">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n top-end\n\n <db-tooltip placement="top-end" id="tooltip-09-end">\n Tooltip\n </db-tooltip></db-button\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TooltipPlacement implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tooltip-placement");\n }\n }\n}\n', "show-arrow.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\n@Component({\n selector: "tooltip-show-arrow",\n standalone: true,\n imports: [CommonModule, DBButton, DBTooltip],\n template: `<ng-container\n ><db-button>\n (Default) True\n\n <db-tooltip id="tooltip-04" [showArrow]="true">\n Tooltip\n </db-tooltip></db-button\n >\n <db-button>\n False\n\n <db-tooltip id="tooltip-05" [showArrow]="false">\n Tooltip\n </db-tooltip></db-button\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TooltipShowArrow implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tooltip-show-arrow");\n }\n }\n}\n', "width.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\n@Component({\n selector: "tooltip-width",\n standalone: true,\n imports: [CommonModule, DBButton, DBTooltip],\n template: `<ng-container\n ><db-button>\n (Default) Auto\n\n <db-tooltip id="tooltip-12">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </db-tooltip></db-button\n >\n <db-button>\n Fixed\n\n <db-tooltip width="fixed" id="tooltip-13">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </db-tooltip></db-button\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TooltipWidth implements AfterViewInit {\n _ref = viewChild<ElementRef>("_ref");\n\n constructor() {}\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== "undefined") {\n const element: HTMLElement | null = this._ref()?.nativeElement;\n this.enableAttributePassing(element, "tooltip-width");\n }\n }\n}\n' }, vue: { "animation.example.vue": '<template>\n <DBButton>\n (Default) True\n <DBTooltip id="tooltip-14" :animation="true"> Tooltip </DBTooltip></DBButton\n >\n <DBButton>\n False\n <DBTooltip id="tooltip-17" :animation="false">\n Tooltip\n </DBTooltip></DBButton\n >\n</template>\n\n<script setup lang="ts">\nimport DBButton from "../../button/button.vue";\nimport DBTooltip from "../tooltip.vue";\n</script>', "delay.example.vue": '<template>\n <DBButton>\n (Default) None\n <DBTooltip id="tooltip-144" delay="none"> Tooltip </DBTooltip></DBButton\n >\n <DBButton>\n Slow\n <DBTooltip delay="slow" id="tooltip-15"> Tooltip </DBTooltip></DBButton\n >\n <DBButton>\n Fast\n <DBTooltip delay="fast" id="tooltip-16"> Tooltip </DBTooltip></DBButton\n >\n</template>\n\n<script setup lang="ts">\nimport DBButton from "../../button/button.vue";\nimport DBTooltip from "../tooltip.vue";\n</script>', "density.example.vue": '<template>\n <DBButton data-density="functional">\n Functional\n <DBTooltip id="tooltip-01">Tooltip</DBTooltip></DBButton\n >\n <DBButton data-density="regular">\n (Default) Regular\n <DBTooltip id="tooltip-02">Tooltip</DBTooltip></DBButton\n >\n <DBButton data-density="expressive">\n Expressive\n <DBTooltip id="tooltip-03">Tooltip</DBTooltip></DBButton\n >\n</template>\n\n<script setup lang="ts">\nimport DBButton from "../../button/button.vue";\nimport DBTooltip from "../tooltip.vue";\n</script>', "emphasis.example.vue": '<template>\n <DBButton>\n (Default) Weak\n <DBTooltip id="tooltip-06">Tooltip</DBTooltip></DBButton\n >\n <DBButton>\n Strong\n <DBTooltip emphasis="strong" id="tooltip-07"> Tooltip </DBTooltip></DBButton\n >\n</template>\n\n<script setup lang="ts">\nimport DBButton from "../../button/button.vue";\nimport DBTooltip from "../tooltip.vue";\n</script>', "placement.example.vue": '<template>\n <DBButton>\n bottom-start\n <DBTooltip placement="bottom-start" id="tooltip-08-start">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n (Default) bottom\n <DBTooltip placement="bottom" id="tooltip-08">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n bottom-end\n <DBTooltip placement="bottom-end" id="tooltip-08-end">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n left-start\n <DBTooltip placement="left-start" id="tooltip-10-start">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n left\n <DBTooltip placement="left" id="tooltip-10"> Tooltip </DBTooltip></DBButton\n >\n <DBButton>\n left-end\n <DBTooltip placement="left-end" id="tooltip-10-end">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n right-start\n <DBTooltip placement="right-start" id="tooltip-11-start">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n right\n <DBTooltip placement="right" id="tooltip-11"> Tooltip </DBTooltip></DBButton\n >\n <DBButton>\n right-end\n <DBTooltip placement="right-end" id="tooltip-11-end">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n top-start\n <DBTooltip placement="top-start" id="tooltip-09-start">\n Tooltip\n </DBTooltip></DBButton\n >\n <DBButton>\n top\n <DBTooltip placement="top" id="tooltip-09"> Tooltip </DBTooltip></DBButton\n >\n <DBButton>\n top-end\n <DBTooltip placement="top-end" id="tooltip-09-end">\n Tooltip\n </DBTooltip></DBButton\n >\n</template>\n\n<script setup lang="ts">\nimport DBButton from "../../button/button.vue";\nimport DBTooltip from "../tooltip.vue";\n</script>', "show-arrow.example.vue": '<template>\n <DBButton>\n (Default) True\n <DBTooltip id="tooltip-04" :showArrow="true"> Tooltip </DBTooltip></DBButton\n >\n <DBButton>\n False\n <DBTooltip id="tooltip-05" :showArrow="false">\n Tooltip\n </DBTooltip></DBButton\n >\n</template>\n\n<script setup lang="ts">\nimport DBButton from "../../button/button.vue";\nimport DBTooltip from "../tooltip.vue";\n</script>', "width.example.vue": '<template>\n <DBButton>\n (Default) Auto\n <DBTooltip id="tooltip-12">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </DBTooltip></DBButton\n >\n <DBButton>\n Fixed\n <DBTooltip width="fixed" id="tooltip-13">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </DBTooltip></DBButton\n >\n</template>\n\n<script setup lang="ts">\nimport DBButton from "../../button/button.vue";\nimport DBTooltip from "../tooltip.vue";\n</script>' }, "web-components": { "animation.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tooltip-animation",\n})\nexport class TooltipAnimation {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tooltip-animation");\n }\n\n render() {\n return (\n <Fragment>\n <db-button>\n (Default) True\n <db-tooltip id="tooltip-14" animation={true}>\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n False\n <db-tooltip id="tooltip-17" animation={false}>\n Tooltip\n </db-tooltip>\n </db-button>\n </Fragment>\n );\n }\n}\n', "delay.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tooltip-delay",\n})\nexport class TooltipDelay {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tooltip-delay");\n }\n\n render() {\n return (\n <Fragment>\n <db-button>\n (Default) None\n <db-tooltip id="tooltip-144" delay="none">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n Slow\n <db-tooltip delay="slow" id="tooltip-15">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n Fast\n <db-tooltip delay="fast" id="tooltip-16">\n Tooltip\n </db-tooltip>\n </db-button>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tooltip-density",\n})\nexport class TooltipDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tooltip-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-button data-density="functional">\n Functional\n <db-tooltip id="tooltip-01">Tooltip</db-tooltip>\n </db-button>\n <db-button data-density="regular">\n (Default) Regular\n <db-tooltip id="tooltip-02">Tooltip</db-tooltip>\n </db-button>\n <db-button data-density="expressive">\n Expressive\n <db-tooltip id="tooltip-03">Tooltip</db-tooltip>\n </db-button>\n </Fragment>\n );\n }\n}\n', "emphasis.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tooltip-emphasis",\n})\nexport class TooltipEmphasis {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tooltip-emphasis");\n }\n\n render() {\n return (\n <Fragment>\n <db-button>\n (Default) Weak\n <db-tooltip id="tooltip-06">Tooltip</db-tooltip>\n </db-button>\n <db-button>\n Strong\n <db-tooltip emphasis="strong" id="tooltip-07">\n Tooltip\n </db-tooltip>\n </db-button>\n </Fragment>\n );\n }\n}\n', "placement.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tooltip-placement",\n})\nexport class TooltipPlacement {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tooltip-placement");\n }\n\n render() {\n return (\n <Fragment>\n <db-button>\n bottom-start\n <db-tooltip placement="bottom-start" id="tooltip-08-start">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n (Default) bottom\n <db-tooltip placement="bottom" id="tooltip-08">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n bottom-end\n <db-tooltip placement="bottom-end" id="tooltip-08-end">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n left-start\n <db-tooltip placement="left-start" id="tooltip-10-start">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n left\n <db-tooltip placement="left" id="tooltip-10">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n left-end\n <db-tooltip placement="left-end" id="tooltip-10-end">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n right-start\n <db-tooltip placement="right-start" id="tooltip-11-start">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n right\n <db-tooltip placement="right" id="tooltip-11">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n right-end\n <db-tooltip placement="right-end" id="tooltip-11-end">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n top-start\n <db-tooltip placement="top-start" id="tooltip-09-start">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n top\n <db-tooltip placement="top" id="tooltip-09">\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n top-end\n <db-tooltip placement="top-end" id="tooltip-09-end">\n Tooltip\n </db-tooltip>\n </db-button>\n </Fragment>\n );\n }\n}\n', "show-arrow.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tooltip-show-arrow",\n})\nexport class TooltipShowArrow {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tooltip-show-arrow");\n }\n\n render() {\n return (\n <Fragment>\n <db-button>\n (Default) True\n <db-tooltip id="tooltip-04" showArrow={true}>\n Tooltip\n </db-tooltip>\n </db-button>\n <db-button>\n False\n <db-tooltip id="tooltip-05" showArrow={false}>\n Tooltip\n </db-tooltip>\n </db-button>\n </Fragment>\n );\n }\n}\n', "width.example.tsx": 'import { DBButton } from "../../button/button";\nimport { DBTooltip } from "../tooltip";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tooltip-width",\n})\nexport class TooltipWidth {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "tooltip-width");\n }\n\n render() {\n return (\n <Fragment>\n <db-button>\n (Default) Auto\n <db-tooltip id="tooltip-12">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </db-tooltip>\n </db-button>\n <db-button>\n Fixed\n <db-tooltip width="fixed" id="tooltip-13">\n Max width, lorem ipsum dolor sit amet, consetetur sadipscing\n </db-tooltip>\n </db-button>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTooltip</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <h1>Placement</h1>\n <button\n class="db-button"\n aria-describedby="tooltip-01"\n data-has-tooltip="true"\n >\n Tooltip\n <i class="db-tooltip" id="tooltip-01">Test</i>\n </button>\n <button\n class="db-button"\n aria-describedby="tooltip-02"\n data-has-tooltip="true"\n >\n Tooltip top\n <i class="db-tooltip" data-placement="top" id="tooltip-02">Test</i>\n </button>\n <button\n class="db-button"\n aria-describedby="tooltip-03"\n data-has-tooltip="true"\n >\n Tooltip left\n <i class="db-tooltip" data-placement="left" id="tooltip-03">Test</i>\n </button>\n <button\n class="db-button"\n aria-describedby="tooltip-04"\n data-has-tooltip="true"\n >\n Tooltip right\n <i class="db-tooltip" data-placement="right" id="tooltip-04"\n >Test</i\n >\n </button>\n <button\n class="db-button"\n aria-describedby="tooltip-05"\n data-has-tooltip="true"\n >\n Tooltip Strong\n <i class="db-tooltip" data-emphasis="strong" id="tooltip-05"\n >Test</i\n >\n </button>\n </body>\n</html>\n' } } } }, tokens: { colors: '/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$variants:\n "neutral", "brand", "critical", "successful", "warning", "informational";\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$variant-colors:\n "neutral", "critical", "successful", "warning", "informational";\n$on-background-colors:\n "emphasis-100", "emphasis-90", "emphasis-80", "emphasis-70", "emphasis-60",\n "emphasis-50";\n$background-colors:\n "basic-level-1", "basic-level-2", "basic-level-3", "basic-transparent-semi",\n "basic-transparent-full";\n$inverted-colors: "contrast-max", "contrast-high", "contrast-low";\n\n// adaptive colors\n\n// bg basic\n$db-adaptive-bg-basic-level-1-default: var(\n --db-adaptive-bg-basic-level-1-default\n);\n$db-adaptive-bg-basic-level-1-hovered: var(\n --db-adaptive-bg-basic-level-1-hovered\n);\n$db-adaptive-bg-basic-level-1-pressed: var(\n --db-adaptive-bg-basic-level-1-pressed\n);\n$db-adaptive-bg-basic-level-2-default: var(\n --db-adaptive-bg-basic-level-2-default\n);\n$db-adaptive-bg-basic-level-2-hovered: var(\n --db-adaptive-bg-basic-level-2-hovered\n);\n$db-adaptive-bg-basic-level-2-pressed: var(\n --db-adaptive-bg-basic-level-2-pressed\n);\n$db-adaptive-bg-basic-level-3-default: var(\n --db-adaptive-bg-basic-level-3-default\n);\n$db-adaptive-bg-basic-level-3-hovered: var(\n --db-adaptive-bg-basic-level-3-hovered\n);\n$db-adaptive-bg-basic-level-3-pressed: var(\n --db-adaptive-bg-basic-level-3-pressed\n);\n$db-adaptive-bg-basic-transparent-full-default: var(\n --db-adaptive-bg-basic-transparent-full-default\n);\n$db-adaptive-bg-basic-transparent-semi-default: var(\n --db-adaptive-bg-basic-transparent-semi-default\n);\n$db-adaptive-bg-basic-transparent-full-hovered: var(\n --db-adaptive-bg-basic-transparent-full-hovered\n);\n$db-adaptive-bg-basic-transparent-full-pressed: var(\n --db-adaptive-bg-basic-transparent-full-pressed\n);\n$db-adaptive-bg-basic-transparent-semi-hovered: var(\n --db-adaptive-bg-basic-transparent-semi-hovered\n);\n$db-adaptive-bg-basic-transparent-semi-pressed: var(\n --db-adaptive-bg-basic-transparent-semi-pressed\n);\n\n// on-bg basic\n$db-adaptive-on-bg-basic-emphasis-100-default: var(\n --db-adaptive-on-bg-basic-emphasis-100-default\n);\n$db-adaptive-on-bg-basic-emphasis-100-hovered: var(\n --db-adaptive-on-bg-basic-emphasis-100-hovered\n);\n$db-adaptive-on-bg-basic-emphasis-100-pressed: var(\n --db-adaptive-on-bg-basic-emphasis-100-pressed\n);\n$db-adaptive-on-bg-basic-emphasis-90-default: var(\n --db-adaptive-on-bg-basic-emphasis-90-default\n);\n$db-adaptive-on-bg-basic-emphasis-90-hovered: var(\n --db-adaptive-on-bg-basic-emphasis-90-hovered\n);\n$db-adaptive-on-bg-basic-emphasis-90-pressed: var(\n --db-adaptive-on-bg-basic-emphasis-90-pressed\n);\n$db-adaptive-on-bg-basic-emphasis-80-default: var(\n --db-adaptive-on-bg-basic-emphasis-80-default\n);\n$db-adaptive-on-bg-basic-emphasis-80-hovered: var(\n --db-adaptive-on-bg-basic-emphasis-80-hovered\n);\n$db-adaptive-on-bg-basic-emphasis-80-pressed: var(\n --db-adaptive-on-bg-basic-emphasis-80-pressed\n);\n$db-adaptive-on-bg-basic-emphasis-70-default: var(\n --db-adaptive-on-bg-basic-emphasis-70-default\n);\n$db-adaptive-on-bg-basic-emphasis-70-hovered: var(\n --db-adaptive-on-bg-basic-emphasis-70-hovered\n);\n$db-adaptive-on-bg-basic-emphasis-70-pressed: var(\n --db-adaptive-on-bg-basic-emphasis-70-pressed\n);\n$db-adaptive-on-bg-basic-emphasis-60-default: var(\n --db-adaptive-on-bg-basic-emphasis-60-default\n);\n$db-adaptive-on-bg-basic-emphasis-50-default: var(\n --db-adaptive-on-bg-basic-emphasis-50-default\n);\n\n// inverted\n\n$db-adaptive-bg-inverted-contrast-max-default: var(\n --db-adaptive-bg-inverted-contrast-max-default\n);\n$db-adaptive-bg-inverted-contrast-max-hovered: var(\n --db-adaptive-bg-inverted-contrast-max-hovered\n);\n$db-adaptive-bg-inverted-contrast-max-pressed: var(\n --db-adaptive-bg-inverted-contrast-max-pressed\n);\n$db-adaptive-bg-inverted-contrast-high-default: var(\n --db-adaptive-bg-inverted-contrast-high-default\n);\n$db-adaptive-bg-inverted-contrast-high-hovered: var(\n --db-adaptive-bg-inverted-contrast-high-hovered\n);\n$db-adaptive-bg-inverted-contrast-high-pressed: var(\n --db-adaptive-bg-inverted-contrast-high-pressed\n);\n$db-adaptive-bg-inverted-contrast-low-default: var(\n --db-adaptive-bg-inverted-contrast-low-default\n);\n$db-adaptive-bg-inverted-contrast-low-hovered: var(\n --db-adaptive-bg-inverted-contrast-low-hovered\n);\n$db-adaptive-bg-inverted-contrast-low-pressed: var(\n --db-adaptive-bg-inverted-contrast-low-pressed\n);\n\n// on-bg-inverted\n$db-adaptive-on-bg-inverted-default: var(--db-adaptive-on-bg-inverted-default);\n$db-adaptive-on-bg-inverted-hovered: var(--db-adaptive-on-bg-inverted-hovered);\n$db-adaptive-on-bg-inverted-pressed: var(--db-adaptive-on-bg-inverted-pressed);\n\n// origin\n$db-adaptive-origin-default: var(--db-adaptive-origin-default);\n$db-adaptive-origin-hovered: var(--db-adaptive-origin-hovered);\n$db-adaptive-origin-pressed: var(--db-adaptive-origin-pressed);\n\n// on-origin\n$db-adaptive-on-origin-default: var(--db-adaptive-on-origin-default);\n$db-adaptive-on-origin-hovered: var(--db-adaptive-on-origin-hovered);\n$db-adaptive-on-origin-pressed: var(--db-adaptive-on-origin-pressed);\n\n// vibrant\n$db-adaptive-bg-vibrant-default: var(--db-adaptive-bg-vibrant-default);\n$db-adaptive-bg-vibrant-hovered: var(--db-adaptive-bg-vibrant-hovered);\n$db-adaptive-bg-vibrant-pressed: var(--db-adaptive-bg-vibrant-pressed);\n\n// on-vibrant\n$db-adaptive-on-bg-vibrant-default: var(--db-adaptive-on-bg-vibrant-default);\n$db-adaptive-on-bg-vibrant-hovered: var(--db-adaptive-on-bg-vibrant-hovered);\n$db-adaptive-on-bg-vibrant-pressed: var(--db-adaptive-on-bg-vibrant-pressed);\n', typography: "// Use for body tags like <p>\n\n$db-type-body-3xs: var(--db-type-body-3xs);\n$db-type-body-2xs: var(--db-type-body-2xs);\n$db-type-body-xs: var(--db-type-body-xs);\n$db-type-body-sm: var(--db-type-body-sm);\n$db-type-body-md: var(--db-type-body-md);\n$db-type-body-lg: var(--db-type-body-lg);\n$db-type-body-xl: var(--db-type-body-xl);\n$db-type-body-2xl: var(--db-type-body-2xl);\n$db-type-body-3xl: var(--db-type-body-3xl);\n\n// Use for headline tags like <h1>\n\n$db-type-headline-3xs: var(--db-type-headline-3xs);\n$db-type-headline-2xs: var(--db-type-headline-2xs);\n$db-type-headline-xs: var(--db-type-headline-xs);\n$db-type-headline-sm: var(--db-type-headline-sm);\n$db-type-headline-md: var(--db-type-headline-md);\n$db-type-headline-lg: var(--db-type-headline-lg);\n$db-type-headline-xl: var(--db-type-headline-xl);\n$db-type-headline-2xl: var(--db-type-headline-2xl);\n$db-type-headline-3xl: var(--db-type-headline-3xl);\n", spacing: "// Use sizing values for fixed heights/widths e.g. the db-button has always a fixed height\n$db-sizing-3xs: var(--db-sizing-3xs);\n$db-sizing-2xs: var(--db-sizing-2xs);\n$db-sizing-xs: var(--db-sizing-xs);\n$db-sizing-sm: var(--db-sizing-sm);\n$db-sizing-md: var(--db-sizing-md);\n$db-sizing-lg: var(--db-sizing-lg);\n$db-sizing-xl: var(--db-sizing-xl);\n$db-sizing-2xl: var(--db-sizing-2xl);\n$db-sizing-3xl: var(--db-sizing-3xl);\n\n// Use fixed spacings for all kinds of distances (margin, padding, ...)\n$db-spacing-fixed-3xs: var(--db-spacing-fixed-3xs);\n$db-spacing-fixed-2xs: var(--db-spacing-fixed-2xs);\n$db-spacing-fixed-xs: var(--db-spacing-fixed-xs);\n$db-spacing-fixed-sm: var(--db-spacing-fixed-sm);\n$db-spacing-fixed-md: var(--db-spacing-fixed-md);\n$db-spacing-fixed-lg: var(--db-spacing-fixed-lg);\n$db-spacing-fixed-xl: var(--db-spacing-fixed-xl);\n$db-spacing-fixed-2xl: var(--db-spacing-fixed-2xl);\n$db-spacing-fixed-3xl: var(--db-spacing-fixed-3xl);\n\n// The primary use-case for responsive spacings are\n// paddings/gaps in an application e.g. the <main> should have a responsive padding.\n$db-spacing-responsive-3xs: var(--db-spacing-responsive-3xs);\n$db-spacing-responsive-2xs: var(--db-spacing-responsive-2xs);\n$db-spacing-responsive-xs: var(--db-spacing-responsive-xs);\n$db-spacing-responsive-sm: var(--db-spacing-responsive-sm);\n$db-spacing-responsive-md: var(--db-spacing-responsive-md);\n$db-spacing-responsive-lg: var(--db-spacing-responsive-lg);\n$db-spacing-responsive-xl: var(--db-spacing-responsive-xl);\n$db-spacing-responsive-2xl: var(--db-spacing-responsive-2xl);\n$db-spacing-responsive-3xl: var(--db-spacing-responsive-3xl);\n\n// Elevation\n\n$db-elevation-sm: var(--db-elevation-sm);\n$db-elevation-md: var(--db-elevation-md);\n$db-elevation-lg: var(--db-elevation-lg);\n\n// Border\n\n$db-border-width-3xs: var(--db-border-width-3xs);\n$db-border-width-2xs: var(--db-border-width-2xs);\n$db-border-width-xs: var(--db-border-width-xs);\n$db-border-width-sm: var(--db-border-width-sm);\n$db-border-width-md: var(--db-border-width-md);\n$db-border-width-lg: var(--db-border-width-lg);\n$db-border-width-xl: var(--db-border-width-xl);\n$db-border-width-2xl: var(--db-border-width-2xl);\n$db-border-width-3xl: var(--db-border-width-3xl);\n$db-border-radius-3xs: var(--db-border-radius-3xs);\n$db-border-radius-2xs: var(--db-border-radius-2xs);\n$db-border-radius-xs: var(--db-border-radius-xs);\n$db-border-radius-sm: var(--db-border-radius-sm);\n$db-border-radius-md: var(--db-border-radius-md);\n$db-border-radius-lg: var(--db-border-radius-lg);\n$db-border-radius-xl: var(--db-border-radius-xl);\n$db-border-radius-2xl: var(--db-border-radius-2xl);\n$db-border-radius-3xl: var(--db-border-radius-3xl);\n$db-border-radius-full: var(--db-border-radius-full);\n\n// Opacity\n\n$db-opacity-3xs: var(--db-opacity-3xs);\n$db-opacity-2xs: var(--db-opacity-2xs);\n$db-opacity-xs: var(--db-opacity-xs);\n$db-opacity-sm: var(--db-opacity-sm);\n$db-opacity-md: var(--db-opacity-md);\n$db-opacity-lg: var(--db-opacity-lg);\n$db-opacity-xl: var(--db-opacity-xl);\n$db-opacity-2xl: var(--db-opacity-2xl);\n$db-opacity-3xl: var(--db-opacity-3xl);\n$db-opacity-full: var(--db-opacity-full);\n\n// Transitions\n\n$db-transition-duration-extra-slow: var(--db-transition-duration-extra-slow);\n$db-transition-duration-slow: var(--db-transition-duration-slow);\n$db-transition-duration-medium: var(--db-transition-duration-medium);\n$db-transition-duration-fast: var(--db-transition-duration-fast);\n$db-transition-duration-extra-fast: var(--db-transition-duration-extra-fast);\n$db-transition-timing-emotional: var(--db-transition-timing-emotional);\n$db-transition-timing-functional: var(--db-transition-timing-functional);\n$db-transition-timing-show: var(--db-transition-timing-show);\n$db-transition-timing-hide: var(--db-transition-timing-hide);\n$db-transition-straight-emotional: var(--db-transition-straight-emotional);\n$db-transition-straight-functional: var(--db-transition-straight-functional);\n$db-transition-straight-show: var(--db-transition-straight-show);\n$db-transition-straight-hide: var(--db-transition-straight-hide);\n\n// Screen sizes\n\n$db-screen-xs: var(--db-screen-xs);\n$db-screen-sm: var(--db-screen-sm);\n$db-screen-md: var(--db-screen-md);\n$db-screen-lg: var(--db-screen-lg);\n$db-screen-xl: var(--db-screen-xl);\n\n// Container sizes\n\n$db-container-3xs: var(--db-container-3xs);\n$db-container-2xs: var(--db-container-2xs);\n$db-container-xs: var(--db-container-xs);\n$db-container-sm: var(--db-container-sm);\n$db-container-md: var(--db-container-md);\n$db-container-lg: var(--db-container-lg);\n$db-container-xl: var(--db-container-xl);\n$db-container-2xl: var(--db-container-2xl);\n$db-container-3xl: var(--db-container-3xl);\n", density: '$densities: ("expressive", "regular", "functional");\n$sizings: "3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl";\n', animation: "@keyframes popover-animation {\n 0% {\n pointer-events: none;\n opacity: 0;\n transform: translate(\n var(--db-popover-center-x, var(--db-popover-translate-x, 0%)),\n var(--db-popover-center-y, var(--db-popover-translate-y, 0%))\n );\n }\n\n 100% {\n pointer-events: auto;\n opacity: 1;\n transform: translate(\n var(--db-popover-center-x, 0%),\n var(--db-popover-center-y, 0%)\n );\n }\n}\n\n@keyframes rotate {\n 100% {\n transform: rotate(1turn);\n }\n}\n", transitions: '@use "../variables";\n\n%default-transition {\n transition:\n outline #{variables.$db-transition-duration-extra-fast},\n border-color #{variables.$db-transition-straight-emotional},\n background-color #{variables.$db-transition-straight-emotional};\n}\n\n%default-fg-transition {\n transition:\n outline #{variables.$db-transition-duration-extra-fast},\n color #{variables.$db-transition-straight-emotional};\n}\n' }, docs: { "packages/components/src/components/accordion/docs/Angular.md": '## Angular\n\nFor general installation and configuration look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBAccordion, DBAccordionItem } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBAccordion, DBAccordionItem],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-accordion>\n <db-accordion-item\n headlinePlain="Item 1"\n content="Content 1"\n ></db-accordion-item>\n <db-accordion-item\n headlinePlain="Item 2"\n content="Content 2"\n ></db-accordion-item>\n <db-accordion-item\n headlinePlain="Item 3"\n content="Content 3"\n ></db-accordion-item>\n</db-accordion>\n```\n', "packages/components/src/components/accordion/docs/HTML.md": '## HTML\n\nFor general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-accordion">\n <details class="db-accordion-item">\n <summary>Title 1</summary>\n <div>Content 1</div>\n </details>\n <details class="db-accordion-item">\n <summary>Title 2</summary>\n <div>Content 2</div>\n </details>\n <details class="db-accordion-item">\n <summary>Title 3</summary>\n <div>Content 3</div>\n </details>\n </div>\n</body>\n```\n', "packages/components/src/components/accordion/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/accordion/docs/React.md": '## React\n\nFor general installation and configuration look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBAccordion, DBAccordionItem } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBAccordion>\n <DBAccordionItem headlinePlain="Item 1" content="Content 1" />\n <DBAccordionItem headlinePlain="Item 2" content="Content 2" />\n <DBAccordionItem headlinePlain="Item 3" content="Content 3" />\n </DBAccordion>\n);\nexport default App;\n```\n', "packages/components/src/components/accordion/docs/Vue.md": '## Vue\n\nFor general installation and configuration look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBAccordion, DBAccordionItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBAccordion>\n <DBAccordionItem headlinePlain="Item 1" content="Content 1" />\n <DBAccordionItem headlinePlain="Item 2" content="Content 2" />\n <DBAccordionItem headlinePlain="Item 3" content="Content 3" />\n </DBAccordion>\n</template>\n```\n', "packages/components/src/components/accordion-item/docs/Angular.md": '## Angular\n\nFor general installation and configuration look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBAccordionItem } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBAccordionItem],\n // ...\n})\n```\n\n### Use component\n\n#### With Content Projection\n\n```html app.component.html\n<!-- app.component.html -->\n<db-accordion-item>\n <ng-container *headline>Title</ng-container>\n Content\n</db-accordion-item>\n```\n\n#### With attributes\n\n```html app.component.html\n<!-- app.component.html -->\n<db-accordion-item headlinePlain="Title" content="Content"></db-accordion-item>\n```\n', "packages/components/src/components/accordion-item/docs/HTML.md": '## HTML\n\nFor general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <details class="db-accordion-item">\n <summary>Title</summary>\n <div>Content</div>\n </details>\n</body>\n```\n', "packages/components/src/components/accordion-item/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| --------------- | :----: | ------------------- | -------------------------------------------------------------------------------------------------------------------------------- |\n| `cmp-accordion` | \u{1F501} | `db-accordion-item` | The old accordion was just 1 item, we split it to combine multiple accordion-items into 1 accordion (which is another component) |\n\n### props\n\n| Before | Status | After | Description |\n| ---------- | :----: | ---------- | ----------------------------------------------------------- |\n| `summary` | \u{1F501} | `headline` | The title/summary of the details element. |\n| `emphasis` | \u274C | \u274C | There is no emphasis anymore. |\n| `size` | \u274C | \u274C | Controlled by the density. |\n| | \u{1F195} | `disabled` | Disable the component. |\n| | \u{1F195} | `content` | Pass in a simple string as fallback to normal children/slot |\n", "packages/components/src/components/accordion-item/docs/React.md": '## React\n\nFor general installation and configuration look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n#### With Slots\n\n```tsx App.tsx\n// App.tsx\nimport { DBAccordionItem } from "@db-ux/react-core-components";\n\nconst App = () => <DBAccordionItem headline="Title">Content</DBAccordionItem>;\nexport default App;\n```\n\n#### With attributes\n\n```tsx App.tsx\n// App.tsx\nimport { DBAccordionItem } from "@db-ux/react-core-components";\n\nconst App = () => <DBAccordionItem headline="Title" content="Content" />;\nexport default App;\n```\n', "packages/components/src/components/accordion-item/docs/Vue.md": '## Vue\n\nFor general installation and configuration look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n#### With Slots\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBAccordionItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBAccordionItem>\n <template v-slot:headline>Title</template>\n Content\n </DBAccordionItem>\n</template>\n```\n\n#### With attributes\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBAccordionItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBAccordionItem headline="Title" content="Content"></DBAccordionItem>\n</template>\n```\n', "packages/components/src/components/badge/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBBadge } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBBadge],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-badge>Badge</db-badge>\n```\n", "packages/components/src/components/badge/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <span class="db-badge">Badge</span>\n</body>\n```\n', "packages/components/src/components/badge/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/badge/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBBadge } from "@db-ux/react-core-components";\n\nconst App = () => <DBBadge>Badge</DBBadge>;\n\nexport default App;\n```\n', "packages/components/src/components/badge/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBBadge } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBBadge>Badge</DBBadge>\n</template>\n```\n', "packages/components/src/components/brand/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBBrand } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBBrand],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-brand>Brand</db-brand>\n```\n", "packages/components/src/components/brand/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-brand">Brand</div>\n</body>\n```\n', "packages/components/src/components/brand/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ----------- | :----: | ---------- | ----------- |\n| `cmp-brand` | \u{1F501} | `db-brand` | |\n\n### properties\n\n> **Note**\n> We removed all old properties, because brand hasn't a wrapping anchor tag (`<a>`) anymore.\n> If you want to use a link around `db-brand`, do it by yourself.\n\n| Before | Status | After | Description |\n| ---------------- | :----: | :---: | ----------------------------------------------------------------------------------------------------- |\n| `siteNameLink` | \u274C | \u274C | see Note |\n| `alt` | \u274C | \u274C | see Note |\n| `anchorRef` | \u274C | \u274C | see Note |\n| `anchorTitle` | \u274C | \u274C | see Note |\n| `anchorRelation` | \u274C | \u274C | see Note |\n| `src` | \u274C | \u274C | see Note |\n| `hideLogo` | \u{1F195} | \u274C | If you want a custom image, you can hide the default one and pass anything into the `children`/`slot` |\n", "packages/components/src/components/brand/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBBrand } from "@db-ux/react-core-components";\n\nconst App = () => <DBBrand>Brand</DBBrand>;\n\nexport default App;\n```\n', "packages/components/src/components/brand/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBBrand } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBBrand>Brand</DBBrand>\n</template>\n```\n', "packages/components/src/components/button/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBButton } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBButton],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-button variant=\"brand\">Button</db-button>\n```\n", "packages/components/src/components/button/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <button class="db-button" data-variant="brand" type="button">Button</button>\n</body>\n```\n', "packages/components/src/components/button/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ----------- | ----------- |\n| `elm-button` | \u{1F501} | `db-button` | |\n\n### sizes\n\n| Before | Status | After | Description |\n| --------- | :----: | :---: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `large` | \u274C | \u274C | it became obsolete mainly due to our [density](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system-v3/principles/densities) introduction |\n| `regular` | \u274C | \u274C | there is a default (`medium`) now |\n\n### variants\n\n| Before | Status | After | Description |\n| ------------------- | :----: | ---------- | ------------------------------------------------------------ |\n| `primary` | \u274C | \u274C | not valid anymore, use `outlined` buttons for those purposes |\n| `brand-primary` | \u{1F501} | `primary` | |\n| `secondary-outline` | \u{1F501} | `outlined` | |\n| `secondary-solid` | \u{1F501} | `solid` | |\n| `tertiary-plain` | \u{1F501} | `text` | |\n\n### icons\n\n| Before | Status | After | Description |\n| -------------- | :----: | -------- | ----------------------------------------------------------------- |\n| `iconTrailing` | \u274C | \u274C | not valid anymore, for buttons only icons before text are allowed |\n| `iconOnly` | \u{1F501} | `noText` | |\n", "packages/components/src/components/button/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBButton } from "@db-ux/react-core-components";\n\nconst App = () => <DBButton variant="brand">Button</DBButton>;\n\nexport default App;\n```\n', "packages/components/src/components/button/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBButton } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBButton variant="brand">Button</DBButton>\n</template>\n```\n', "packages/components/src/components/card/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport { DBCard } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBCard\n ],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-card>Card content</db-card>\n```\n", "packages/components/src/components/card/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-card">Card content</div>\n</body>\n```\n', "packages/components/src/components/card/docs/Migration.md": '## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ---------- | :----: | --------- | ----------- |\n| `cmp-card` | \u{1F501} | `db-card` | |\n\n### variant\n\n| Before | Status | After | Description |\n| --------- | :----: | :-------: | ------------------------------------------------------------------------------------------------------------------------------ |\n| `variant` | \u{1F501} | `variant` | There is no default `header`/`content` anymore. Now you can change the card with `variant="interactive"` to act like a button. |\n| `header` | \u274C | \u274C | Add your own content via children/slot. |\n| `content` | \u274C | \u274C | Add your own content via children/slot. |\n\n### image\n\n| Before | Status | After | Description |\n| ------------------------ | :----: | ----------- | ----------- |\n| `alt` | \u{1F501} | `imgAlt` | |\n| `image` | \u{1F501} | `imgSrc` | |\n| | \u{1F195} | `imgWidth` | |\n| | \u{1F195} | `imgHeight` | |\n| `illustration` | \u274C | \u274C | |\n| `uiCoreIllustrationPath` | \u274C | \u274C | |\n', "packages/components/src/components/card/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBCard } from "@db-ux/react-core-components";\n\nconst App = () => <DBCard>Card content</DBCard>;\nexport default App;\n```\n', "packages/components/src/components/card/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBCard } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBCard>Card content</DBCard>\n</template>\n```\n', "packages/components/src/components/checkbox/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBCheckbox } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBCheckbox],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<ul>\n @for (checkboxName of checkboxNames; track checkboxName) {\n <li>\n <db-checkbox\n (change)="checkbox = checkboxName"\n [label]="\'Checkbox \' + checkboxName"\n [value]="checkboxName"\n name="CheckboxGroup"\n ></db-checkbox>\n </li>\n }\n</ul>\n```\n\n```ts app.component.ts\n// app.component.ts\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-app",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n checkboxNames = ["X", "Y", "Z"];\n checkbox = "";\n}\n```\n\n#### Adding Formatted Infotext\n\nThe message property of the db-checkbox does not accept HTML content for security reasons (to prevent XSS attacks). To add a richly formatted description, use the `db-infotext` component as a sibling element. You must link both components using the [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby)-HTML-attribute to ensure accessibility.\n\n```html\n<db-checkbox aria-describedby="checkbox-message">\n Example Checkbox\n</db-checkbox>\n<db-infotext id="checkbox-message"> Example <strong>Text</strong> </db-infotext>\n```\n\n```ts app.component.ts\nimport { Component } from "@angular/core";\nimport { DBCheckbox, DBInfotext } from "@db-ux/ngx-core-components";\n\n@Component({\n selector: "app-root",\n standalone: true,\n imports: [DBCheckbox, DBInfotext],\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {}\n```\n\n## How to use with Template Driven Forms\n\nThird party controls require a `ControlValueAccessor` to function with angular forms. Adding an `ngDefaultControl` attribute will allow them to use that directive.\n[Further information](https://stackoverflow.com/a/46465959)\n\n```ts app.component.ts\n//app.component.ts\nimport { FormsModule } from \'@angular/forms\';\n\n@Component({\n // ...\n imports: [\n // ...,\n FormsModule\n ],\n // ...\n})\n```\n\n```html form.component.html\n<!-- form.component.html -->\n<form>\n <db-checkbox\n (change)="checkbox = $event.target.checked"\n name="checkbox"\n label="Checkbox"\n ></db-checkbox>\n <db-button type="button" variant="brand" (click)="showValues()"\n >Get checkbox value</db-button\n >\n</form>\n\n<h2>Output</h2>\n<dl>\n <dt>checkbox\'s value</dt>\n <dd>checkbox {{ checkbox ? "" : "un" }}checked</dd>\n</dl>\n```\n\n```ts form.component.ts\n// form.component.ts\nexport class FormComponent {\n checkbox = "";\n showValues(): void {\n alert(JSON.stringify({ checkbox: this.checkbox }));\n }\n}\n```\n\n## How to use with Reactive Forms\n\ncoming soon \u2026 if your interested in contributing, you\'re very welcome ;)\n', "packages/components/src/components/checkbox/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <label class="db-checkbox" for="checkbox-element">\n <input type="checkbox" id="checkbox-element" name="States" />\n Label\n </label>\n</body>\n```\n\n#### Adding Formatted Infotext\n\nTo add a descriptive text with HTML formatting (e.g., bold or italic text) to a checkbox, you should use a separate element for the message and link it via the [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby)-HTML-attribute for accessibility. This ensures that screen readers correctly associate the message with the checkbox.\n\n```html index.html\n<!-- Checkbox with formatted infotext -->\n...\n<body>\n <label class="db-checkbox" for="checkbox-element">\n <input\n type="checkbox"\n id="checkbox-element"\n name="States"\n aria-describedby="checkbox-message"\n />\n Label\n </label>\n <p class="db-infotext" id="checkbox-message">\n Example <strong>Text</strong>\n </p>\n</body>\n```\n', "packages/components/src/components/checkbox/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| -------------- | :----: | ------------- | ----------- |\n| `elm-checkbox` | \u{1F501} | `db-checkbox` | |\n\n### id\n\n| Before | Status | After | Description |\n| ---------- | :----: | ----- | ----------- |\n| `input_id` | \u{1F501} | `id` | |\n", "packages/components/src/components/checkbox/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBCheckbox } from "@db-ux/react-core-components";\n\nconst App = () => {\n const [checkbox, setCheckbox] = useState("");\n\n return (\n <DBCheckbox\n name="checkbox"\n value="Checkbox checked"\n onChange={(event) => {\n setCheckbox(event.target.checked);\n }}\n >\n Checkbox\n </DBCheckbox>\n );\n};\n\nexport default App;\n```\n\n#### Adding Formatted Infotext\n\nThe message prop of the DBCheckbox does not accept React Nodes or HTML for security reasons (to prevent Cross-Site Scripting (XSS)). To add a richly formatted description, use the DBInfotext component as a sibling element. It is crucial to link both components using the [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby)-HTML-attribute to ensure accessibility.\n\n```tsx App.tsx\nimport { DBCheckbox, DBInfotext } from "@db-ux/react-core-components";\n\nconst App = () => {\n return (\n <div>\n <DBCheckbox\n // The aria-describedby attribute links the checkbox to its description.\n aria-describedby="checkbox-message"\n >\n Example Checkbox\n </DBCheckbox>\n\n {/* The DBInfotext component holds the formatted message. */}\n <DBInfotext id="checkbox-message">\n Example <strong>Text</strong>\n </DBInfotext>\n </div>\n );\n};\n\nexport default App;\n```\n', "packages/components/src/components/checkbox/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script setup lang="ts">\nimport { DBCheckbox } from "@db-ux/v-core-components";\nimport { _ref } from "vue";\nconst checkbox = _ref("");\n</script>\n\n<template>\n <DBCheckbox @change="checkbox = $event.target.checked" name="checkbox">\n Checkbox\n </DBCheckbox>\n</template>\n```\n\n#### Adding Formatted Infotext\n\nThe message prop of the DBCheckbox does not accept HTML content for security reasons (to prevent XSS attacks). To add a richly formatted description, use the DBInfotext component as a sibling element. You must link both components using the [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby)-HTML-attribute to ensure accessibility.\n\n```vue App.vue\n<script setup lang="ts">\nimport { DBCheckbox, DBInfotext } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBCheckbox aria-describedby="checkbox-message">\n Example Checkbox\n </DBCheckbox>\n\n <DBInfotext id="checkbox-message">\n Example <strong>Text</strong>\n </DBInfotext>\n</template>\n```\n', "packages/components/src/components/custom-button/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBCustomButton } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n imports: [..., DBCustomButton],\n standalone: true\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-custom-button><button type=\"button\">CustomButton</button></db-custom-button>\n```\n", "packages/components/src/components/custom-button/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-custom-button">\n <button type="button">CustomButton</button>\n </div>\n <div class="db-custom-button">\n <a href="#">CustomButton</a>\n </div>\n</body>\n```\n', "packages/components/src/components/custom-button/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBCustomButton } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBCustomButton>\n <button type="button">CustomButton</button>\n </DBCustomButton>\n);\n\nexport default App;\n```\n', "packages/components/src/components/custom-button/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBCustomButton } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBCustomButton><button type="button">CustomButton</button></DBCustomButton>\n</template>\n```\n', "packages/components/src/components/custom-select/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport { DBCustomSelect } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBCustomSelect\n ],\n standalone: true\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-custom-select label="Label" placeholder="Placeholder" [options]="options" />\n```\n\n```ts app.component.ts\n// app.component.ts\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-app",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n options = [\n { value: "Option 1" },\n { value: "Option 2" },\n { value: "Option 3" },\n { value: "Option 4" },\n { value: "Option 5" }\n ];\n}\n```\n', "packages/components/src/components/custom-select/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ui/components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div\n class="db-custom-select"\n aria-invalid="false"\n data-custom-validity="no-validation"\n data-selected-type="text"\n >\n <select hidden>\n <option value="Option 1">Option 1</option>\n <option value="Option 2">Option 2</option>\n <option value="Option 3">Option 3</option>\n <option value="Option 4">Option 4</option>\n <option value="Option 5">Option 5</option>\n </select>\n <label>Label</label>\n <details>\n Functional\n <summary class="db-custom-select-form-field">\n <!-- Add selected options here with JS-->\n </summary>\n <article\n data-spacing="none"\n class="db-custom-select-dropdown db-card"\n >\n <section class="db-custom-select-list">\n <ul>\n <li class="db-custom-select-list-item db-radio">\n <label for="option-1">\n <input\n class="db-custom-select-list-item-checkbox"\n id="option-1"\n type="radio"\n name="multi-select"\n value="Option 1"\n data-disable-focus="true"\n />\n Option 1\n </label>\n </li>\n <li class="db-custom-select-list-item db-radio">\n <label for="option-2">\n <input\n class="db-custom-select-list-item-checkbox"\n id="option-2"\n type="radio"\n name="multi-select"\n value="Option 2"\n data-disable-focus="true"\n />\n Option 2\n </label>\n </li>\n <li class="db-custom-select-list-item db-radio">\n <label for="option-3">\n <input\n class="db-custom-select-list-item-checkbox"\n id="option-3"\n type="radio"\n name="multi-select"\n value="Option 3"\n data-disable-focus="true"\n />\n Option 3\n </label>\n </li>\n <li class="db-custom-select-list-item db-radio">\n <label for="option-4">\n <input\n class="db-custom-select-list-item-checkbox"\n id="option-4"\n type="radio"\n name="multi-select"\n value="Option 4"\n data-disable-focus="true"\n />\n Option 4\n </label>\n </li>\n <li class="db-custom-select-list-item db-radio">\n <label for="option-5">\n <input\n class="db-custom-select-list-item-checkbox"\n id="option-5"\n type="radio"\n name="multi-select"\n value="Option 5"\n data-disable-focus="true"\n />\n Option 5\n </label>\n </li>\n </ul>\n </section>\n <div>\n <button\n class="db-button"\n type="button"\n data-icon="cross"\n data-size="small"\n data-width="full"\n data-variant="ghost"\n >\n Close\n </button>\n </div>\n </article>\n </details>\n <span aria-hidden="true">Placeholder</span\n ><span class="db-infotext" data-semantic="successful" data-size="small"\n >TODO: Add a validMessage</span\n ><span class="db-infotext" data-semantic="critical" data-size="small"\n >TODO: Add an invalidMessage</span\n ><span data-visually-hidden="true" role="status"></span>\n </div>\n</body>\n```\n', "packages/components/src/components/custom-select/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-components](https://www.npmjs.com/package/@db-ui/react-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBCustomSelect } from "@db-ui/react-components";\n\nconst App = () => (\n <DBCustomSelect\n label="Label"\n placeholder="Placeholder"\n options={[\n { value: "Option 1" },\n { value: "Option 2" },\n { value: "Option 3" },\n { value: "Option 4" },\n { value: "Option 5" }\n ]}\n />\n);\n\nexport default App;\n```\n', "packages/components/src/components/custom-select/docs/Vue.md": `## Vue
|
|
37948
37948
|
|
|
37949
37949
|
For general installation and configuration take a look at the [v-components](https://www.npmjs.com/package/@db-ui/v-components) package.
|
|
37950
37950
|
|
|
@@ -37970,7 +37970,7 @@ import { DBCustomSelect } from "@db-ui/v-components";
|
|
|
37970
37970
|
/>
|
|
37971
37971
|
</template>
|
|
37972
37972
|
\`\`\`
|
|
37973
|
-
`, "packages/components/src/components/divider/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBDivider } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBDivider],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-divider></db-divider>\n```\n", "packages/components/src/components/divider/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-divider"></div>\n</body>\n```\n', "packages/components/src/components/divider/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/divider/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBDivider } from "@db-ux/react-core-components";\n\nconst App = () => <DBDivider />;\n\nexport default App;\n```\n', "packages/components/src/components/divider/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBDivider } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBDivider></DBDivider>\n</template>\n```\n', "packages/components/src/components/drawer/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBDrawer } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBDrawer],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-button (click)="toggleDrawer(true)"> Open me </db-button>\n<db-drawer [open]="openDrawer" (onClose)="toggleDrawer(false)">\n <header drawer-header>Optional drawer header</header>\n My Drawer content\n</db-drawer>\n```\n\n```ts app.component.ts\n// app.component.ts\nexport class AppComponent {\n openDrawer: boolean = false;\n toggleDrawer = (open: boolean) => {\n this.openDrawer = open;\n };\n}\n```\n', "packages/components/src/components/drawer/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Use component\n\nUse [Invoker Commands](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) (`command` and `commandfor` HTML attributes) to declaratively connect buttons with the `<dialog>` element. Supported built-in commands for `<dialog>` are `show-modal` and `close`.\n\nIf you do need to provide support for [browser versions that haven\'t implemented Invoker Commands](https://caniuse.com/wf-invoker-commands), add a feature detection fallback in JavaScript (see example below) or the [polyfill `invokers-polyfill`](https://github.com/keithamus/invokers-polyfill).\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <button class="db-button" command="show-modal" commandfor="my-drawer">\n Open Drawer\n </button>\n <dialog id="my-drawer" class="db-drawer" data-backdrop="true">\n <article class="db-drawer-container">\n <header class="db-drawer-header">\n <button\n class="db-button button-close-drawer is-icon-text-replace"\n data-icon="cross"\n data-variant="ghost"\n command="close"\n commandfor="my-drawer"\n >\n Close Button\n </button>\n </header>\n <div class="db-drawer-content">My Drawer content</div>\n </article>\n </dialog>\n\n <script>\n /*\n * Feature detection for Invoker Commands:\n * If the browser does not support the `command` and `commandfor`\n * HTML attributes, we fall back to JavaScript event handlers.\n */\n if (\n !("command" in HTMLButtonElement.prototype) ||\n !("commandFor" in HTMLButtonElement.prototype)\n ) {\n const openButton = document.querySelector(\n \'[commandfor="my-drawer"][command="show-modal"]\'\n );\n const closeButton = document.querySelector(\n \'[commandfor="my-drawer"][command="close"]\'\n );\n const drawer = document.getElementById("my-drawer");\n\n openButton?.addEventListener("click", () => {\n drawer?.showModal?.();\n });\n closeButton?.addEventListener("click", () => {\n drawer?.close?.();\n });\n }\n </script>\n</body>\n```\n', "packages/components/src/components/drawer/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/drawer/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBButton, DBDrawer } from "@db-ux/react-core-components";\n\nconst App = () => {\n const [open, setOpen] = useState<boolean>(false);\n return (\n <div>\n <DBButton\n onClick={() => {\n setOpen(true);\n }}\n >\n Open Me\n </DBButton>\n <DBDrawer\n open={open}\n onClose={() => {\n setOpen(false);\n }}\n drawerHeader={<header>Optional drawer header</header>}\n >\n My Drawer content\n </DBDrawer>\n </div>\n );\n};\n\nexport default App;\n```\n', "packages/components/src/components/drawer/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script setup lang="ts">\nimport { _ref } from "vue";\nimport { DBDrawer } from "@db-ux/v-core-components";\n\nconst openDrawer = _ref<boolean>(false);\n\nconst toggleDrawer = (open: boolean) => {\n openDrawer.value = open;\n};\n</script>\n\n<template>\n <DBButton @click="toggleDrawer(true)">Open me</DBButton>\n <DBDrawer :open="openDrawer" @close="toggleDrawer(false)">\n <header v-slot:drawer-header>Optional drawer header</header>\n My Drawer content\n </DBDrawer>\n</template>\n```\n', "packages/components/src/components/header/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport {\n DBHeader,\n NavigationDirective,\n SecondaryActionDirective,\n MetaNavigationDirective\n} from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBHeader,\n NavigationDirective, // Optional: If you want to use a Navigation\n SecondaryActionDirective, // Optional: If you want to use ActionBar\n MetaNavigationDirective, // Optional: If you want to use MetaNavigation\n ],\n // ...\n})\n```\n\n### Use component\n\n#### Simple\n\n```html app.component.html\n<!-- app.component.html -->\n<db-header>\n <db-brand brand>Header</db-brand>\n</db-header>\n```\n\n#### Full\n\n```ts app.component.ts\n// File: app.component.ts\n\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-root",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n drawerOpen = false;\n\n toggleDrawer = (open: boolean) => {\n this.drawerOpen = open;\n };\n}\n```\n\n```html app.component.html\n<!-- app.component.html -->\n<db-header [drawerOpen]="drawerOpen" (onToggle)="toggleDrawer($event)">\n <db-brand brand>My Awesome App</db-brand>\n <db-navigation *dbNavigation>\n <!-- https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/components/navigation/docs/Angular.md -->\n </db-navigation>\n <ng-container *dbMetaNavigation>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </ng-container>\n <ng-container primary-action>\n <DBButton icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </DBButton>\n </ng-container>\n <ng-container *dbSecondaryAction>\n <DBButton icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </DBButton>\n <DBButton icon="alert" variant="ghost" [noText]="true">\n Notification\n </DBButton>\n <DBButton icon="help" variant="ghost" [noText]="true"> Help </DBButton>\n </ng-container>\n</db-header>\n```\n', "packages/components/src/components/header/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\nUse [Invoker Commands](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) (`command` and `commandfor` HTML attributes) to declaratively connect the burger menu button with the drawer `<dialog>` element, and the close button inside the drawer. Supported built-in commands for `<dialog>` are `show-modal` and `close`.\n\nIf you do need to provide support for [browser versions that haven\'t implemented Invoker Commands](https://caniuse.com/wf-invoker-commands), add a feature detection fallback in JavaScript (see example below) or the [polyfill `invokers-polyfill`](https://github.com/keithamus/invokers-polyfill).\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <header class="db-header">\n <dialog id="header-drawer" class="db-drawer">\n <article\n class="db-drawer-container db-header-drawer"\n data-spacing="small"\n data-rounded="true"\n >\n <header class="db-drawer-header">\n <div class="db-drawer-header-text"></div>\n <button\n class="db-button button-close-drawer is-icon-text-replace"\n data-icon="cross"\n data-variant="text"\n command="close"\n commandfor="header-drawer"\n >\n Close Button\n </button>\n </header>\n <div class="db-drawer-content">\n <div class="db-header-drawer-navigation">\n <div class="db-header-navigation">\n <nav class="db-main-navigation">\n <menu>\n <li\n class="db-navigation-item"\n data-icon="x_placeholder"\n >\n <a href="#">Regular (Default)</a>\n </li>\n <li\n class="db-navigation-item"\n aria-disabled="true"\n >\n <a href="#"\n >Regular (Default) disabled</a\n >\n </li>\n </menu>\n </nav>\n </div>\n <div class="db-header-meta-navigation">\n <a\n class="db-link"\n href="#"\n tabindex="0"\n data-content="internal"\n >Imprint</a\n ><a\n class="db-link"\n href="#"\n tabindex="0"\n data-content="internal"\n >Help</a\n >\n </div>\n </div>\n <div class="db-header-secondary-action">\n <button\n class="db-button is-icon-text-replace"\n data-icon="x_placeholder"\n data-variant="text"\n >\n Profile</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="alert"\n data-variant="text"\n >\n Notification</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="help"\n data-variant="text"\n >\n Help\n </button>\n </div>\n </div>\n </article>\n </dialog>\n <div class="db-header-meta-navigation">\n <a class="db-link" href="#" tabindex="0" data-content="internal"\n >Imprint</a\n ><a class="db-link" href="#" tabindex="0" data-content="internal"\n >Help</a\n >\n </div>\n <div class="db-header-navigation-bar">\n <div class="db-header-brand-container">\n <div class="db-brand">\n <a href="/"\n ><img\n class="db-logo"\n src="https://design-system.deutschebahn.com/images/db_logo.svg"\n alt=""\n height="24"\n width="34" /></a\n >DBHeader\n </div>\n </div>\n <div class="db-header-navigation-container">\n <div class="db-header-navigation">\n <nav class="db-navigation">\n <menu>\n <li\n class="db-navigation-item"\n data-icon="x_placeholder"\n >\n <a href="#">Regular (Default)</a>\n </li>\n <li class="db-navigation-item" aria-disabled="true">\n <a href="#">Regular (Default) disabled</a>\n </li>\n </menu>\n </nav>\n </div>\n <div class="db-header-primary-action">\n <button\n class="db-button is-icon-text-replace"\n data-icon="magnifying_glass"\n data-variant="text"\n >\n Search\n </button>\n </div>\n </div>\n <div class="db-header-action-container">\n <div class="db-header-burger-menu-container">\n <button\n class="db-button is-icon-text-replace"\n data-icon="menu"\n data-variant="text"\n command="show-modal"\n commandfor="header-drawer"\n >\n BurgerMenu\n </button>\n </div>\n <div class="db-header-secondary-action">\n <button\n class="db-button is-icon-text-replace"\n data-icon="x_placeholder"\n data-variant="text"\n >\n Profile</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="alert"\n data-variant="text"\n >\n Notification</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="help"\n data-variant="text"\n >\n Help\n </button>\n </div>\n </div>\n </div>\n </header>\n\n <script>\n /*\n * Feature detection for Invoker Commands:\n * If the browser does not support the `command` and `commandfor`\n * HTML attributes, we fall back to JavaScript event handlers.\n */\n if (\n !("command" in HTMLButtonElement.prototype) ||\n !("commandFor" in HTMLButtonElement.prototype)\n ) {\n const burgerMenuButton = document.querySelector(\n \'[commandfor="header-drawer"][command="show-modal"]\'\n );\n const closeButton = document.querySelector(\n \'[commandfor="header-drawer"][command="close"]\'\n );\n const drawer = document.getElementById("header-drawer");\n\n burgerMenuButton?.addEventListener("click", () => {\n drawer?.showModal?.();\n });\n closeButton?.addEventListener("click", () => {\n drawer?.close?.();\n });\n }\n </script>\n</body>\n```\n', "packages/components/src/components/header/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ----------- | ----------- |\n| `rea-header` | \u{1F501} | `db-header` | |\n\n### mobile\n\n| Before | Status | After | Description |\n| -------- | :----: | ------------- | ---------------------------------- |\n| `mobile` | \u{1F501} | `forceMobile` | forces the burger menu for desktop |\n", "packages/components/src/components/header/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n#### Simple\n\n```tsx App.tsx\n// App.tsx\nimport { DBHeader, DBBrand } from "@db-ux/react-core-components";\n\nconst App = () => <DBHeader brand={<DBBrand>Header</DBBrand>} />;\n\nexport default App;\n```\n\n#### Full\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBHeader, DBBrand, DBLink } from "@db-ux/react-core-components";\n\nconst [drawerOpen, setDrawerOpen] = useState<boolean>(false);\n\nconst App = () => (\n <DBHeader\n drawerOpen={drawerOpen}\n onToggle={setDrawerOpen}\n brand={<DBBrand>My Awesome App</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="alert" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="help" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation>\n //\n https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/components/navigation/docs/React.md\n </DBNavigation>\n </DBHeader>\n);\n\nexport default App;\n```\n', "packages/components/src/components/header/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n#### Simple\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBHeader, DBBrand } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBHeader>\n <DBBrand slot="brand">Header</DBBrand>\n </DBHeader>\n</template>\n```\n\n#### Full\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { _ref } from "vue";\nimport { DBHeader, DBBrand, DBLink, DBButton } from "@db-ux/v-core-components";\n\nconst drawerOpen = _ref(false);\n\nconst toggleDrawer = (open: boolean) => {\n drawerOpen.value = open;\n};\n</script>\n\n<template>\n <DBHeader :drawerOpen="drawerOpen" :onToggle="toggleDrawer">\n <template v-slot:brand>\n <DBBrand> My Awesome App </DBBrand>\n </template>\n <template v-slot:primary-action>\n <DBButton icon="magnifying_glass" variant="ghost" :no-text="true">\n Search\n </DBButton>\n </template>\n <template v-slot:secondary-action>\n <DBButton icon="x_placeholder" variant="ghost" :no-text="true">\n Profile\n </DBButton>\n <DBButton icon="alert" variant="ghost" :no-text="true">\n Notification\n </DBButton>\n <DBButton icon="help" variant="ghost" :no-text="true">\n Help\n </DBButton>\n </template>\n <template v-slot:meta-navigation>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </template>\n\n <DBNavigation>\n //\n https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/components/navigation/docs/Vue.md\n </DBNavigation>\n </DBHeader>\n</template>\n```\n', "packages/components/src/components/icon/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBIcon } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBIcon],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-icon icon=\"x_placeholder\">Icon</db-icon>\n```\n", "packages/components/src/components/icon/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\nYou could use the `data-icon` or `data-icon-trailing` attributes on any HTML tag:\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <span data-icon="x_placeholder"> Icon </span>\n</body>\n```\n', "packages/components/src/components/icon/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------ | :----: | --------- | ----------- |\n| | \u{1F501} | `db-icon` | |\n\n### variant\n\n| Before | Status | After | Description |\n| --------- | :----: | ----- | ----------------------------------------------------------------------------------------------------------------------- |\n| `variant` | \u{1F501} | \u274C | icon variants are controlled by `font-family:var(--db-icon-font-family)` and `font-weight: var(--db-icon-font-weight);` |\n", "packages/components/src/components/icon/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBIcon } from "@db-ux/react-core-components";\n\nconst App = () => <DBIcon icon="x_placeholder">Icon</DBIcon>;\n\nexport default App;\n```\n', "packages/components/src/components/icon/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBIcon } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBIcon icon="x_placeholder">Icon</DBIcon>\n</template>\n```\n', "packages/components/src/components/infotext/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBInfotext } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBInfotext],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-infotext>Infotext</db-infotext>\n```\n", "packages/components/src/components/infotext/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <span class="db-infotext"> Infotext </span>\n</body>\n```\n', "packages/components/src/components/infotext/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/infotext/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBInfotext } from "@db-ux/react-core-components";\n\nconst App = () => <DBInfotext>Infotext</DBInfotext>;\n\nexport default App;\n```\n', "packages/components/src/components/infotext/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBInfotext } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBInfotext>Infotext</DBInfotext>\n</template>\n```\n', "packages/components/src/components/input/docs/Angular.md": '## Angular\n\nLoad SCSS globally within `styles.scss` in your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/rollup";\n```\n\nLoad component within `app.component.ts`:\n\n```ts app.component.ts\n//app.component.ts\nimport { DBInput } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBInput\n ],\n // ...\n})\n```\n\nUse component in template:\n\n```html\n<DBInput\n label="Label"\n placeholder="placeholder"\n description="Description"\n (change)="onInputChange()"\n></DBInput>\n```\n\n## How to use with Reactive Forms\n\nThird party controls require a ControlValueAccessor to function with angular forms.\nOur input component implements this interface so you can use it like any other native element with reactive Forms:\n\n> Currently we do not support onTouch/touched and native validation via FormControl. If your interested in contributing, you\'re very welcome ;)\n\n```ts app.component.ts\n//app.component.ts\nimport { ReactiveFormsModule } from \'@angular/forms\';\n\n@Component({\n // ...\n imports: [\n // ...,\n ReactiveFormsModule\n ],\n // ...\n})\n```\n\n```html\n<!-- form.component.html-->\n<form [formGroup]="form" (submit)="onFormSubmit()">\n <db-input label="Input" placeholder="Placeholder" formControlName="input">\n </db-input>\n</form>\n\n<h2>Output</h2>\n<dl>\n <dt>input\'s value</dt>\n <dd>\n {{ form.get("input")?.value ? form.get("input")?.value : "No Input set"\n }}\n </dd>\n</dl>\n```\n\n```typescript\n// form.component.ts\nexport class FormComponent {\n form = new FormGroup({\n input: new FormControl("Filled with formControl")\n });\n\n onFormSubmit(): void {\n alert(JSON.stringify(this.form.value));\n }\n}\n```\n\n## How to use with Template driven Forms\n\nThird party controls require a ControlValueAccessor to function with angular forms.\nOur input component implements this interface so you can use it like any other native element with ngModel:\n\n```ts app.component.ts\n//app.component.ts\nimport { FormsModule } from \'@angular/forms\';\n\n@Component({\n // ...\n imports: [\n // ...,\n FormsModule\n ],\n // ...\n})\n```\n\n```html\n<!-- form.component.html-->\n<form>\n <DBInput\n ngDefaultControl\n [(ngModel)]="input"\n label="Text Input"\n placeholder="Placeholder"\n description="Description"\n ></DBInput>\n <DBButton type="button" variant="brand" (click)="showValues()"\n >Get input value</DBButton\n >\n</form>\n\n<h2>Output</h2>\n<dl>\n <dt>input\'s value</dt>\n <dd>{{ input ? input : "No Input set" }}</dd>\n</dl>\n```\n\n```typescript\n// form.component.ts\nexport class FormComponent {\n input = "";\n showValues(): void {\n alert(JSON.stringify({ input: this.input }));\n }\n}\n```\n', "packages/components/src/components/input/docs/HTML.md": '## HTML\n\nLoad SCSS globally somewhere in your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/relative";\n```\n\nUse it:\n\n```html\n<div class="db-input">\n <label for="username">Label</label>\n <input type="text" name="username" id="username" />\n</div>\n```\n', "packages/components/src/components/input/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ----------- | :----: | ---------- | ----------- |\n| `elm-input` | \u{1F501} | `db-input` | |\n\n### variants\n\n| Before | Status | After | Description |\n| ----------------- | :----: | --------------- | ---------------------------------------------------------------------------------------------------- |\n| `semitransparent` | \u274C | \u274C | old variants are removed a semi-transparent look is the default, new variants are changing the color |\n| `white` | \u274C | \u274C | |\n| `solid` | \u274C | \u274C | |\n| `outline` | \u274C | \u274C | |\n| | \u{1F195} | `adaptive` | |\n| | \u{1F195} | `neutral` | |\n| | \u{1F195} | `critical` | |\n| | \u{1F195} | `informational` | |\n| | \u{1F195} | `warning` | |\n| | \u{1F195} | `successful` | |\n", "packages/components/src/components/input/docs/React.md": '## React\n\nWarning: Date input is not working with iOS Voiceover currently, compare to [React issue](https://github.com/facebook/react/issues/33541) and [WebKit bug](https://bugs.webkit.org/show_bug.cgi?id=294649).\n\nLoad SCSS globally in a `index.scss` file inside `main.tsx`/`main.jsx` within your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/rollup";\n```\n\nImport component:\n\n```typescript\nimport { DBInput } from "@db-ux/react-core-components";\n\n<DBInput\n label={label}\n placeholder={description}\n description={description}\n onChange={handleChange}\n></DBInput>;\n```\n', "packages/components/src/components/input/docs/Vue.md": '## Vue\n\nLoad SCSS globally in a `index.scss` file and import it in your `main.ts`/`main.js` file in your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/rollup";\n```\n\nUse component:\n\n```vue\n<script>\nimport { DBInput } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBInput\n label="Label"\n placeholder="Placeholder"\n @change="onChange($event)"\n ></DBInput>\n</template>\n```\n\nTo get DBInput work with `v-model` you have to use v-model argument syntax:\n\n```typescript\n<DBInput\n label="Text Label"\n placeholder="Start typing"\n v-model:value="value"\n></DBInput>\n```\n\nor using on-change listener:\n\n```typescript\n<DBInput label="Text Label" placeholder="Start" :value="modelAndChange" @change="($event) => { modelAndChange = $event.target.value;\n}"/> {{ modelAndChange }}\n```\n', "packages/components/src/components/link/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBLink } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBLink],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-link href="#" variant="brand">Link</db-link>\n```\n', "packages/components/src/components/link/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <a class="db-link" href="#">Link</a>\n</body>\n```\n', "packages/components/src/components/link/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ---------- | :----: | --------- | ----------- |\n| `elm-link` | \u{1F501} | `db-link` | |\n\n### icons\n\n| Before | Status | After | Description |\n| ------------- | :----: | ----- | ----------------------------------------------------------------------- |\n| `icon` | \u274C | \u274C | not valid anymore use `content` to show internal or external arrow icon |\n| `icononly` | \u274C | \u274C | |\n| `iconVariant` | \u274C | \u274C | |\n", "packages/components/src/components/link/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBLink } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBLink href="#" variant="brand">\n Link\n </DBLink>\n);\n\nexport default App;\n```\n', "packages/components/src/components/link/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBLink } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBLink href="#" variant="brand">Link</DBLink>\n</template>\n```\n', "packages/components/src/components/navigation/docs/Accessibility.md": '## Accessibility\n\n### Active item / current page\n\nTo implicitly set a `NavigationItem` to **active**, the attribute `aria-current="page"` is applied to the contained anchor.\nSome frameworks (vue, angular) offer internal, automatic solutions for this. These should preferably be used.\n\nThis leads to:\n\n- the `NavigationItem` and all parent `NavigationItems` are displayed as **active** via `css` (bold, if necessary with DB pulse)\n- accessibility is granted correctly. see: [MDN aria-current](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\nFor other purposes, `NavigationItems` can also be set to active with their prop `active`. However, this does not guarantee correct a11y.\n', "packages/components/src/components/navigation/docs/Angular.md": '## Angular\n\nFor general installation and configuration look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBNavigation } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBNavigation, DBNavigationItem, NavigationContentDirective],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-navigation>\n <db-navigation-item>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n Sub-Navi-Item 1\n </ng-container>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a href="#" aria-current="page"\n >Sub-Sub-Navi-Item 1</a\n >\n </ng-container>\n </db-navigation-item>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n </db-navigation-item>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a href="#">Sub-Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n <ng-container *dbNavigationContent> Navi-Item 1 </ng-container>\n </db-navigation-item>\n <db-navigation-item icon="x_placeholder">\n <ng-container *dbNavigationContent>\n <a href="#">Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n <db-navigation-item [disabled]="true">\n <ng-container *dbNavigationContent>\n <a href="#">Navi-Item 3</a>\n </ng-container>\n </db-navigation-item>\n</db-navigation>\n```\n\n### Angular Router and active state handling\n\nWe recommend using the automatic [integration with the Angular Router](https://angular.dev/best-practices/a11y#active-links-identification). This is way more elegant than setting the aria attribute to the anchor yourself.\n\nThe component first needs to import the `RouterLink` and `RouterLinkActive` directives.\n\nFor other purposes, `NavigationItems` themselves can also be set to active with their prop `[active]="true"`. However, this does not guarantee correct a11y.\n\n```ts app.component.ts\n// app.component.ts\nimport { RouterLink, RouterLinkActive } from \'@angular/router\';\nimport { DBMainNavigation } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [\n // ...\n RouterLink,\n RouterLinkActive,\n DBMainNavigation\n ],\n // ...\n})\n```\n\nNow you can use the Angular Routers `routerLink` directive to define your targets.\nThe active style is automatically set once an item receives the `aria-current="page"` attribute.\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a\n routerLink="/"\n ariaCurrentWhenActive="page"\n [routerLinkActiveOptions]="{ exact: true }"\n >\n Home\n </a>\n </ng-container>\n </db-navigation-item>\n <db-navigation-item>\n <ng-container *dbNavigationContent> Demo Pages </ng-container>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="/demo/1" ariaCurrentWhenActive="page">\n Demo Page 1\n </a>\n </ng-container>\n <ng-container *dbNavigationContent>\n <a routerLink="/demo/2" ariaCurrentWhenActive="page">\n Demo Page 2\n </a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n </db-navigation-item>\n</db-navigation>\n```\n', "packages/components/src/components/navigation/docs/HTML.md": '## HTML\n\nFor general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <nav class="db-navigation">\n <menu>\n <li class="db-navigation-item">\n <button\n class="db-navigation-item-expand-button"\n aria-haspopup="true"\n >\n Navi-Item 1\n </button>\n <menu class="db-sub-navigation">\n <li class="db-navigation-item">\n <button\n class="db-navigation-item-expand-button"\n aria-haspopup="true"\n >\n Sub-Navi-Item 1\n </button>\n <menu class="db-sub-navigation">\n <li class="db-navigation-item">\n <a href="#" aria-current="page"\n >Sub-Sub-Navi-Item 1</a\n >\n </li>\n\n <li class="db-navigation-item">\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </li>\n </menu>\n </li>\n\n <li class="db-navigation-item">\n <a href="#">Sub-Navi-Item 2</a>\n </li>\n </menu>\n </li>\n\n <li class="db-navigation-item" data-icon="x_placeholder">\n <a href="#">Navi-Item 2</a>\n </li>\n\n <li class="db-navigation-item" aria-disabled="true">\n <a href="#">Navi-Item 3</a>\n </li>\n </menu>\n </nav>\n</body>\n```\n', "packages/components/src/components/navigation/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| -------------------- | :----: | --------------- | ----------- |\n| `cmp-mainnavigation` | \u{1F501} | `db-navigation` | |\n\n### children\n\n| Before | Status | After | Description |\n| ---------- | :----: | ----- | ----------------------------------------------------------------------------- |\n| `data` | \u274C | \u274C | pass data via `children` / `slot`, moved a lot of the features to `db-header` |\n| `siteName` | \u274C | \u274C | |\n", "packages/components/src/components/navigation/docs/React.md": '## React\n\nFor general installation and configuration look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBNavigation, DBNavigationItem } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBNavigation>\n <DBNavigationItem\n subNavigation={\n <>\n <DBNavigationItem\n subNavigation={\n <>\n <DBNavigationItem>\n <a href="#" aria-current="page">\n Sub-Sub-Navi-Item 1\n </a>\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </>\n }\n >\n Sub-Navi-Item 1\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </>\n }\n >\n Navi-Item 1\n </DBNavigationItem>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Navi-Item 2</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Navi-Item 3</a>\n </DBNavigationItem>\n </DBNavigation>\n);\n\nexport default App;\n```\n\n### Active handling\n\nUsually, a `NavigationItem` is implicitly set to active by setting the attribute `aria-current="page"` to the anchor it contains.\n\nFor other purposes, `NavigationItems` themselves can also be set to active with their prop `active`. However, this does not guarantee correct a11y.\n', "packages/components/src/components/navigation/docs/Vue.md": '## Vue\n\nFor general installation and configuration look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBNavigation, DBNavigationItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBNavigation>\n <DBNavigationItem>\n Navi-Item 1\n <template v-slot:sub-navigation>\n <DBNavigationItem>\n Sub-Navi-Item 1\n\n <template v-slot:sub-navigation>\n <DBNavigationItem>\n <a href="#" aria-current="page"\n >Sub-Sub-Navi-Item 1</a\n >\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </template>\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </template>\n </DBNavigationItem>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Navi-Item 2</a>\n </DBNavigationItem>\n <DBNavigationItem :disabled="true">\n <a href="#">Navi-Item 3</a>\n </DBNavigationItem>\n </DBNavigation>\n</template>\n```\n\n### Vue Router and active state handling\n\nWe recommend using the automatic [integration with the Vue Router](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#ariaCurrentValue). This is way more elegant than setting the aria attribute to the anchor yourself.\n\nYou can use Vue Routers `RouterLink` component to define your targets.\nThe active style is automatically set once an item receives the `aria-current="page"` attribute.\n\nFor other purposes, `NavigationItems` themselves can also be set to active with their prop `:active="true"`. However, this does not guarantee correct a11y.\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBMainNavigation, DBNavigationItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBMainNavigation>\n <DBNavigationItem>\n <RouterLink to="/" ariaCurrentValue="page">Home</RouterLink>\n </DBNavigationItem>\n <DBNavigationItem>\n <template> Demo Pages </template>\n <template #subnavigation>\n <DBNavigationItem>\n <RouterLink to="/demo/1" ariaCurrentValue="page">\n Demo Page 1\n </RouterLink>\n </DBNavigationItem>\n <DBNavigationItem>\n <RouterLink to="/demo/2" ariaCurrentValue="page">\n Demo Page 2\n </RouterLink>\n </DBNavigationItem>\n </template>\n </DBNavigationItem>\n </DBMainNavigation>\n</template>\n```\n', "packages/components/src/components/navigation-item/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport { DBNavigationItem, NavigationContentDirective } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n imports: [..., DBNavigationItem, NavigationContentDirective],\n // ...\n})\n\n```\n\n### Use component\n\nWe try to set `areaPopup` (has/hasn\'t sub-navigation) inside the component, but this doesn\'t work in all frameworks. If you encounter some problems you have the set `areaPopup` with `true/false` for sub-navigation or link\n\n```html app.component.html\n<!-- app.component.html -->\n\n<!-- Only link -->\n<db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="mypath">NavigationItem</a>\n </ng-container>\n</db-navigation-item>\n\n<!-- With Sub-Navigation -->\n\n<db-navigation-item>\n <ng-container *dbNavigationContent>Navi-Item 1</ng-container>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="mypath">Sub-Navi-Item 1</a>\n </ng-container>\n </db-navigation-item>\n\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="mypath">Sub-Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n</db-navigation-item>\n```\n', "packages/components/src/components/navigation-item/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\nIf you want to use sub-navigations for mobile you need to add a `eventListener:click` on the `db-navigation-item-expand-button`. This eventListener should set `aria-expanded` to `true` for the `button`. This will open a static overlay for mobile/tablet devices with your `db-sub-navigation`. For desktop devices it works by default with `:hover`.\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <!-- Only link -->\n <li class="db-navigation-item">\n <a href="mypath">NavigationItem</a>\n </li>\n\n <!-- With Sub-Navigation -->\n <li class="db-navigation-item">\n <button class="db-navigation-item-expand-button" aria-haspopup="true">\n Navi-Item 1\n </button>\n <menu class="db-sub-navigation">\n <a href="mypath">Sub-Navi-Item 1</a>\n <a href="mypath">Sub-Navi-Item 2</a>\n </menu>\n </li>\n</body>\n```\n', "packages/components/src/components/navigation-item/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/navigation-item/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\nWe try to set `areaPopup` (has/hasn\'t sub-navigation) inside the component, but this doesn\'t work in all frameworks. If you encounter some problems you have the set `areaPopup` with `true/false` for sub-navigation or link\n\n```tsx App.tsx\n// App.tsx\nimport { Link } from "react-router-dom";\nimport { DBNavigationItem } from "@db-ux/react-core-components";\n\nconst App = () => (\n <>\n {/* Only link */}\n <DBNavigationItem>\n <Link to="mypath">NavigationItem</Link>\n </DBNavigationItem>\n\n {/* With Sub-Navigation */}\n <DBNavigationItem\n subNavigation={\n <>\n <DBNavigationItem>\n <Link to="mypath">Sub-Navi-Item 1</Link>\n </DBNavigationItem>\n <DBNavigationItem>\n <Link to="mypath">Sub-Navi-Item 2</Link>\n </DBNavigationItem>\n </>\n }\n >\n Navi-Item 1\n </DBNavigationItem>\n </>\n);\n\nexport default App;\n```\n', "packages/components/src/components/navigation-item/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\nWe try to set `areaPopup` (has/hasn\'t sub-navigation) inside the component, but this doesn\'t work in all frameworks. If you encounter some problems you have the set `areaPopup` with `true/false` for sub-navigation or link\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBNavigationItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <!-- Only link -->\n <DBNavigationItem>\n <router-link to="mypath">NavigationItem</router-link>\n </DBNavigationItem>\n\n <!-- With Sub-Navigation -->\n <DBNavigationItem>\n <template #subnavigation>\n <DBNavigationItem>\n <router-link to="mypath">Sub-Navi-Item 1</router-link>\n </DBNavigationItem>\n <DBNavigationItem>\n <router-link to="mypath">Sub-Navi-Item 2</router-link>\n </DBNavigationItem>\n </template>\n Navi-Item 1\n </DBNavigationItem>\n</template>\n```\n', "packages/components/src/components/notification/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBNotification } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBNotification],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-notification headline=\"Headline\">Notification</db-notification>\n```\n", "packages/components/src/components/notification/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-notification" data-icon="information_circle">\n <h6>Headline</h6>\n <p>Notification</p>\n <button\n class="db-button is-icon-text-replace"\n data-size="small"\n data-variant="ghost"\n data-icon="cross"\n >\n Close Button\n </button>\n </div>\n</body>\n```\n', "packages/components/src/components/notification/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------------ | :----: | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `elm-notification` | \u{1F501} | `db-notification` | The old notification component has been split into 2 different components [Notification](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system-v3/components/feedback/notification) and [Notification](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system-v3/components/feedback/notification) for more information (when and how to use it). |\n\n### variant \u27A1 type\n\n| Before | Status | After | Description |\n| -------------- | :----: | -------------- | ------------------------------------------------------- |\n| `notification` | \u{1F501} | `notification` | Default notification with different look |\n| `status` | \u274C | \u274C | Status can be changed by `variants` |\n| | \u{1F195} | `inline` | New styling with shadow and rounded corners (like card) |\n\n### type \u27A1 variants\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------------- | -------------------------------------------------------- |\n| | \u{1F195} | `adaptive` | Default: change colors based on background |\n| `error` | \u{1F501} | `critical` | 'Red' colored notification to show error messages |\n| `informative` | \u{1F501} | `informational` | 'Blue' colored notification to show information messages |\n| `warning` | \u{1F501} | `warning` | 'Yellow' colored notification to show warning messages |\n| `success` | \u{1F501} | `successful` | 'Green' colored notification to show success messages |\n", "packages/components/src/components/notification/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBNotification } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBNotification headline="Headline">Notification</DBNotification>\n);\n\nexport default App;\n```\n', "packages/components/src/components/notification/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBNotification } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBNotification headline="Headline">Notification</DBNotification>\n</template>\n```\n', "packages/components/src/components/page/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport { DBPage, DBHeader } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBPage, DBHeader\n ],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-page>\n <db-header header>...</db-header>\n <main class=\"db-main\">Main Page</main>\n</db-page>\n```\n", "packages/components/src/components/page/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-page">\n <header class="db-header">...</header>\n <main class="db-main">Main Page</main>\n </div>\n</body>\n```\n', "packages/components/src/components/page/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ---------- | :----: | --------- | ----------- |\n| `rea-page` | \u{1F501} | `db-page` | |\n", "packages/components/src/components/page/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBPage, DBHeader } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBPage header={<DBHeader>...</DBHeader>}>\n <main className="db-main">Main Page</main>\n </DBPage>\n);\n\nexport default App;\n```\n', "packages/components/src/components/page/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBPage, DBHeader } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBPage>\n <DBHeader slot="header">...</DBHeader>\n <main class="db-main">Main Page</main>\n </DBPage>\n</template>\n```\n', "packages/components/src/components/popover/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBPopover } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBPopover],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-popover>\n <db-button trigger> Hover on me to open Popover </db-button>\n Use any html code here like e.g. a <code>button</code>:\n <button type=\"button\">Test</button>\n</db-popover>\n```\n", "packages/components/src/components/popover/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-popover">\n <button aria-haspopup="true" class="db-button" type="button">\n Hover on me to open Popover\n </button>\n <article class="db-popover-content">\n Use any html code here like e.g. a <code>button</code>:\n <button type="button">Test</button>\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/popover/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/popover/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBPopover, DBButton } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBPopover trigger={<DBButton>Hover on me to open Popover</DBButton>}>\n Use any html code here like e.g. a <code>button</code>:\n <button type="button">Test</button>\n </DBPopover>\n);\n\nexport default App;\n```\n', "packages/components/src/components/popover/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBPopover, DBButton } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBPopover>\n <template v-slot:trigger>\n <DBButton> Hover on me to open Popover </DBButton>\n </template>\n Use any html code here like e.g. a <code>button</code>:\n <button type="button">Test</button>\n </DBPopover>\n</template>\n```\n', "packages/components/src/components/radio/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBRadio } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBRadio],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<ul>\n @for (radioName of radioNames; track radioName) {\n <li>\n <db-radio\n (change)="radio = radioName"\n [label]="\'Radio \' + radioName"\n [value]="radioName"\n name="RadioGroup"\n ></db-radio>\n </li>\n }\n</ul>\n```\n\n```ts app.component.ts\n// app.component.ts\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-app",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n radioNames = ["X", "Y", "Z"];\n radio = "";\n}\n```\n\n## How to use with Template Driven Forms\n\nThird party controls require a `ControlValueAccessor` to function with angular forms. Adding an `ngDefaultControl` attribute will allow them to use that directive.\n[Further information](https://stackoverflow.com/a/46465959)\n\n```ts app.component.ts\n//app.component.ts\nimport { FormsModule } from \'@angular/forms\';\n\n@Component({\n // ...\n imports: [\n // ...,\n FormsModule\n ],\n // ...\n})\n```\n\n```html form.component.html\n<!-- form.component.html -->\n<form>\n <DBRadio ngDefaultControl [(ngModel)]="radio">Label</DBRadio>\n <DBButton type="button" variant="brand" (click)="showValues()"\n >Get radio value</DBButton\n >\n</form>\n\n<h2>Output</h2>\n<dl>\n <dt>radio\'s value</dt>\n <dd>{{ radio ? radio : "No radio set" }}</dd>\n</dl>\n```\n\n```ts form.component.ts\n// form.component.ts\nexport class FormComponent {\n radio = "";\n showValues(): void {\n alert(JSON.stringify({ radio: this.radio }));\n }\n}\n```\n\n## How to use with Reactive Forms\n\ncoming soon \u2026 if your interested in contributing, you\'re very welcome ;)\n', "packages/components/src/components/radio/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <label class="db-radio" for="radio-element">\n <input type="radio" id="radio-element" name="States" value="Y" />\n Label\n </label>\n</body>\n```\n', "packages/components/src/components/radio/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ----------- | :----: | ---------- | ----------- |\n| `elm-radio` | \u{1F501} | `db-radio` | |\n\n### id\n\n| Before | Status | After | Description |\n| ---------- | :----: | ----- | ----------- |\n| `input_id` | \u{1F501} | `id` | |\n", "packages/components/src/components/radio/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBRadio } from "@db-ux/react-core-components";\n\nconst App = () => (\n <ul>\n {["X", "Y", "Z"].map((radioName) => (\n <li key={radioName}>\n <DBRadio\n name="radio-group"\n value={radioName}\n onChange={() => {\n setRadio(radioName);\n }}\n >\n Radio {radioName}\n </DBRadio>\n </li>\n ))}\n </ul>\n);\n\nexport default App;\n```\n', "packages/components/src/components/radio/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script setup lang="ts">\nimport { DBRadio } from "@db-ux/v-core-components";\nimport { _ref } from "vue";\nconst radio = _ref("");\n\nconst radioNames = ["X", "Y", "Z"];\n</script>\n\n<template>\n <ul>\n <li v-for="radioName in radioNames">\n <DBRadio\n @change="radio = radioName"\n name="radio-group"\n :value="radioName"\n >\n Radio {{ radioName }}\n </DBRadio>\n </li>\n </ul>\n</template>\n```\n', "packages/components/src/components/section/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBSection } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBSection],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-section variant=\"full\">Section</db-section>\n```\n", "packages/components/src/components/section/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <section class="db-section">\n <div data-variant="full">Section</div>\n </section>\n</body>\n```\n', "packages/components/src/components/section/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/section/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBSection } from "@db-ux/react-core-components";\n\nconst App = () => <DBSection variant="full">Section</DBSection>;\n\nexport default App;\n```\n', "packages/components/src/components/section/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBSection } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBSection variant="full">Section</DBSection>\n</template>\n```\n', "packages/components/src/components/select/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBSelect } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBSelect],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-select>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n</db-select>\n```\n', "packages/components/src/components/select/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-select">\n <label for="test">Label</label>\n <select id="test">\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </select>\n </div>\n</body>\n```\n', "packages/components/src/components/select/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ----------- | ----------- |\n| `elm-select` | \u{1F501} | `db-select` | |\n\n### select\n\n| Before | Status | After | Description |\n| ---------- | :----: | ----- | -------------------------------------------------------------------------------- |\n| `multiple` | \u274C | | We removed this attribute for now, there are no valid designs for this use case. |\n| `size` | \u274C | | We removed this attribute for now, there are no valid designs for this use case. |\n", "packages/components/src/components/select/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBSelect } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBSelect>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </DBSelect>\n);\n\nexport default App;\n```\n', "packages/components/src/components/select/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBSelect } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBSelect>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </DBSelect>\n</template>\n```\n', "packages/components/src/components/stack/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBStack } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBStack],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-stack>\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n</db-stack>\n```\n", "packages/components/src/components/stack/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-stack">\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n </div>\n</body>\n```\n', "packages/components/src/components/stack/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/stack/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBStack } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBStack>\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n </DBStack>\n);\n\nexport default App;\n```\n', "packages/components/src/components/stack/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBStack } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBStack>\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n </DBStack>\n</template>\n```\n', "packages/components/src/components/switch/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBSwitch } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBSwitch],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-switch>Switch</db-switch>\n```\n", "packages/components/src/components/switch/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <label for="my-id" class="db-switch">\n <input type="checkbox" role="switch" id="my-id" />\n Switch\n </label>\n</body>\n```\n', "packages/components/src/components/switch/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ----------- | ----------- |\n| `elm-toggle` | \u{1F501} | `db-switch` | |\n\n### id\n\n| Before | Status | After | Description |\n| -------- | :----: | :---: | ----------- |\n| `htmlid` | \u{1F501} | `id` | |\n", "packages/components/src/components/switch/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBSwitch } from "@db-ux/react-core-components";\n\nconst App = () => <DBSwitch>Switch</DBSwitch>;\n\nexport default App;\n```\n', "packages/components/src/components/switch/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBSwitch } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBSwitch>Switch</DBSwitch>\n</template>\n```\n', "packages/components/src/components/tab-item/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tab-item/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div role="tablist" class="db-tab-list" aria-orientation="horizontal">\n <div class="db-tab-list-scroll-container">\n <label\n role="tab"\n for="my-tabs-tab-0"\n class="db-tab-item"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-0"\n ><input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1</label\n ><label\n role="tab"\n for="my-tabs-tab-1"\n class="db-tab-item"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-1"\n ><input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2</label\n ><label\n role="tab"\n for="my-tabs-tab-2"\n class="db-tab-item"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-2"\n ><input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3</label\n >\n </div>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tab-item/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ------------- | ----------- |\n| `cmp-db-tab` | \u{1F501} | `db-tab-item` | |\n\n### name\n\n| Before | Status | After | Description |\n| ------ | :----: | :---: | --------------------------------------------------------------------------------------------------- |\n| `name` | \u274C | \u274C | It should be used with `db-tabs` which will add a the `name` from `db-tabs` to all tabs all at one. |\n", "packages/components/src/components/tab-item/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tab-item/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/tab-list/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tab-list/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div role="tablist" class="db-tab-list" aria-orientation="horizontal">\n <div class="db-tab-list-scroll-container">\n <label\n role="tab"\n for="my-tabs-tab-0"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-0"\n ><input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1</label\n ><label\n role="tab"\n for="my-tabs-tab-1"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-1"\n ><input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2</label\n ><label\n role="tab"\n for="my-tabs-tab-2"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-2"\n ><input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3</label\n >\n </div>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tab-list/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/tab-list/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tab-list/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/tab-panel/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tab-panel/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div role="tablist" class="db-tab-list" aria-orientation="horizontal">\n <div class="db-tab-list-scroll-container">\n <label\n role="tab"\n for="my-tabs-tab-0"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-0"\n ><input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1</label\n ><label\n role="tab"\n for="my-tabs-tab-1"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-1"\n ><input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2</label\n ><label\n role="tab"\n for="my-tabs-tab-2"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-2"\n ><input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3</label\n >\n </div>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tab-panel/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/tab-panel/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tab-panel/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/tabs/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tabs/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div\n role="tablist"\n class="db-tab-list"\n data-alignment="start"\n data-width="auto"\n >\n <ul>\n <li role="tab" class="db-tab-item">\n <label\n for="my-tabs-tab-0"\n aria-controls="my-tabs-tab-panel-0"\n >\n <input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1\n </label>\n </li>\n <li role="tab" class="db-tab-item">\n <label\n for="my-tabs-tab-1"\n aria-controls="my-tabs-tab-panel-1"\n >\n <input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2\n </label>\n </li>\n <li role="tab" class="db-tab-item">\n <label\n for="my-tabs-tab-2"\n aria-controls="my-tabs-tab-panel-2"\n >\n <input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3\n </label>\n </li>\n </ul>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tabs/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------- | ----------- |\n| `cmp-tab-bar` | \u{1F501} | `db-tabs` | |\n", "packages/components/src/components/tabs/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tabs/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/tag/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBTag } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBTag],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tag><db-button>Tag as Button</db-button></db-tag>\n<db-tag>\n <db-link> Tag as Link </db-link>\n</db-tag>\n<db-tag><db-checkbox>Tag as Checkbox</db-checkbox></db-tag>\n<db-tag><db-radio>Tag as Radio</db-radio></db-tag>\n<db-tag>Static Tag</db-tag>\n<db-tag [overflow]=\"true\"><span>Static Tag with overflow</span></db-tag>\n```\n", "packages/components/src/components/tag/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tag">\n <span class="tag-label">Regular (Default)</span>\n </div>\n</body>\n```\n', "packages/components/src/components/tag/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### tag vs. chip\n\nWe simplified the components by reducing the amount from tag + chip to only tag.\n\nYou can use different types of tags by adding another component into it:\n\n```html\n<db-tag><db-button>Tag as Button</db-button></db-tag>\n<db-tag><db-link>Tag as Link</db-link></db-tag>\n<db-tag><db-checkbox>Tag as Checkbox</db-checkbox></db-tag>\n<db-tag><db-radio>Tag as Radio</db-radio></db-tag>\n<db-tag>Static Tag</db-tag>\n```\n\n### class\n\n| Before | Status | After | Description |\n| --------- | :----: | -------- | ----------- |\n| `elm-tag` | \u{1F501} | `db-tag` | |\n\n### sizes\n\n| Before | Status | After | Description |\n| ------- | :----: | :---: | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `small` | \u274C | \u274C | We removed small tags because of density. But you can use `type` property with value `strong` to emphasize a tag for a differentiation. |\n\n### variants\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------------- | ------------------------------------------------ |\n| `poi-*` | \u274C | \u274C | We removed all point of interest colors for now. |\n| `track` | \u274C | \u274C | We removed track for now. |\n| `error` | \u{1F501} | `critical` | |\n| `informative` | \u{1F501} | `informational` | |\n| `success` | \u{1F501} | `successful` | |\n\n### icons\n\n| Before | Status | After | Description |\n| ----------- | :----: | ----- | -------------------------------------------------------------- |\n| `iconAfter` | \u274C | \u274C | not valid anymore, for tags only icons before text are allowed |\n", "packages/components/src/components/tag/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBTag } from "@db-ux/react-core-components";\n\nconst App = () => (\n <>\n <DBTag>\n <DBButton>Tag as Button</DBButton>\n </DBTag>\n <DBTag>\n <DBLink>Tag as Link</DBLink>\n </DBTag>\n <DBTag>\n <DBCheckbox>Tag as Checkbox</DBCheckbox>\n </DBTag>\n <DBTag>\n <DBRadio>Tag as Radio</DBRadio>\n </DBTag>\n <DBTag>Static Tag</DBTag>\n <DBTag overflow={true}>\n <span>Static Tag with overflow</span>\n </DBTag>\n </>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tag/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBTag } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTag><DBButton>Tag as Button</DBButton></DBTag>\n <DBTag>\n <DBLink> Tag as Link </DBLink>\n </DBTag>\n <DBTag><DBCheckbox>Tag as Checkbox</DBCheckbox></DBTag>\n <DBTag><DBRadio>Tag as Radio</DBRadio></DBTag>\n <DBTag>Static Tag</DBTag>\n <DBTag :overflow="true">\n <span>Static Tag with overflow</span>\n </DBTag>\n</template>\n```\n', "packages/components/src/components/textarea/docs/Angular.md": '## Angular\n\nFor general installation and configuration look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBTextarea } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBTextarea],\n // ...\n})\n```\n\n### Use component\n\n```ts app.component.ts\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-root",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n textarea = "default value";\n}\n```\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-textarea\n name="textarea"\n label="Textarea Controlled"\n placeholder="Placeholder"\n message="Message"\n icon="x_placeholder"\n [value]="textarea"\n (change)="textarea = $event.target.value"\n></db-textarea>\n```\n', "packages/components/src/components/textarea/docs/HTML.md": '## HTML\n\nFor general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-textarea">\n <label for="textarea">Label</label>\n <textarea id="textarea" rows="2" cols="33" placeholder=" "></textarea>\n </div>\n</body>\n```\n', "packages/components/src/components/textarea/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out\n> this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| -------------- | :----: | ------------- | ----------- |\n| `elm-textarea` | \u{1F501} | `db-textarea` | |\n\n### variants\n\n| Before | Status | After | Description |\n| ----------------- | :----: | --------------- | ----------- |\n| `semitransparent` | \u274C | | |\n| `white` | \u274C | | |\n| `solid` | \u274C | | |\n| `outline` | \u274C | | |\n| | \u{1F195} | `adaptive` | |\n| | \u{1F195} | `critical` | |\n| | \u{1F195} | `informational` | |\n| | \u{1F195} | `warning` | |\n| | \u{1F195} | `successful` | |\n\n### other\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------- | ----------- |\n| `description` | \u{1F501} | `message` | |\n", "packages/components/src/components/textarea/docs/React.md": '## React\n\nFor general installation and configuration look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBTextarea } from "@db-ux/react-core-components";\n\nconst App = () => {\n const [textarea, setTextarea] = useState("default textarea");\n return (\n <DBTextarea\n label="Textarea Controlled"\n message="Message"\n value={textarea}\n onChange={(event) => {\n setTextarea(event.target.value);\n }}\n />\n );\n};\n\nexport default App;\n```\n', "packages/components/src/components/textarea/docs/Vue.md": '## Vue\n\nFor general installation and configuration look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### General\n\nYou cannot use a default value for [textarea in vue](https://vuejs.org/guide/essentials/forms.html#multiline-text).\nUse `v-model:value` or `:value` instead with a `_ref("My default value")`.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script setup lang="ts">\nimport { _ref } from "vue";\nimport { DBTextarea } from "@db-ux/v-core-components";\n\nconst textarea = _ref("default value");\n</script>\n\n<template>\n <DBTextarea\n label="Textarea value"\n placeholder="Placeholder"\n message="Message"\n icon="x_placeholder"\n name="textarevalue-name"\n v-model:value="textarea"\n />\n</template>\n```\n', "packages/components/src/components/tooltip/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBTooltip } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBTooltip],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-button aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <db-tooltip id="tooltip-01">Tooltip</db-tooltip>\n</db-button>\n```\n', "packages/components/src/components/tooltip/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <button class="db-button" aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <i class="db-tooltip" id="tooltip-01">Tooltip</i>\n </button>\n</body>\n```\n', "packages/components/src/components/tooltip/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/tooltip/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBTooltip, DBButton } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBButton aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <DBTooltip id="tooltip-01">Tooltip</DBTooltip>\n </DBButton>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tooltip/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBTooltip, DBButton } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBButton aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <DBTooltip id="tooltip-01">Tooltip</DBTooltip>\n </DBButton>\n</template>\n```\n', "packages/foundations/docs/BrowserSupport.md": '# Browser Support\n\nWe\'re [testing our components with playwright](../../foundations/test-table) on the latest browser versions of Google Chrome, Mozilla Firefox and Apple Safari. Since all of these browsers are supposed to be evergreen, we\'re using some newer browser features that have been added specifically as part of the [interop initiative](https://web.dev/blog/interop-2025), partly as progressive enhancements, but some may not even offer graceful degradation.\n\nThis may leave some older browser versions behind. If you need to take care of these older browsers, you may not want to migrate to DB UX Design System v3 right now, but stay with DB UI Core or Elements for a little longer. In particular, the following features we use may be related to an evaluation of your browser strategy:\n\n## Stable in evergreen browsers\n\nThese are the features that we use or plan to integrate, which are stable in the Stable channel, including the ESR versions of Evergreen browsers.\n\n| Web Feature | Google Chrome | Mozilla Firefox | Apple Safari |\n| ----------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------- | ----------------- |\n| [Multiple named disclosure boxes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details#multiple_named_disclosure_boxes) | 120 (05.12.2023) | 130 (03.09.2024) | 17.2 (11.12.2023) |\n| [`scrollbar-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-color) (planned) | 121 (13.01.2024) | 64 (11.12.2018) | 26.2 (12.12.2025) |\n| [Popover](https://caniuse.com/mdn-api_htmlelement_popover) (planned) | 114 (30.05.2023) | 125 (16.04.2024) | 17 (26.09.2023) |\n| [`requestClose()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/requestClose#browser_compatibility) (planned) | 134 (04.03.2025) | 139 (27.05.2025) | 18.4 (31.03.2025) |\n| [`:open` CSS pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:open#browser_compatibility) | 133 (04.02.2025) | 136 (04.03.2025) | 26.5 (tbd) |\n\nPopover is loosely depending on Anchor Positioning.\n\n## Progressive enhancement\n\n| Web Feature | Google Chrome | Mozilla Firefox | Apple Safari |\n| --------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------- | -------------------------------------------------------------------------------------------------------- |\n| [CSS `field-sizing: content` property](https://caniuse.com/mdn-css_properties_field-sizing_content) | 123 (19.03.2024) | tbd | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [`hidden="until-found"`-HTML-attribute](https://caniuse.com/mdn-html_global_attributes_hidden_until-found) (planned) | 102 (24.05.2022) | 139 (27.05.2025) | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [`dialog[closedby="closerequest"]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closerequest) (planned) | 134 (19.03.2024) | 141 (22.07.2025) | [Technology Preview 242](https://webkit.org/blog/category/safari-technology-preview/) |\n| [Customizable `select` elements](https://caniuse.com/selectlist) (planned) | 134 (19.03.2024) | tbd | [Technology Preview 238](https://webkit.org/blog/17848/release-notes-for-safari-technology-preview-238/) |\n| [`select[multiple][size="1"]` UI optimization on Desktop browsers](https://chromestatus.com/feature/5412736871825408) (planned) | 142 (28.10.2025) | tbd | tbd |\n\n## Without graceful degradation\n\nThe following functionality relies on JavaScript for support in browsers that do not support it yet. Other solutions would be PostCSS preprocessing (planned) and declaring CSS declarations twice, both in the new and old ways (e.g., semantic overflow).\n\n| Web Feature | Google Chrome | Mozilla Firefox | Apple Safari |\n| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |\n| [semantic overflow (`overflow-block` and `overflow-inline`)](https://caniuse.com/mdn-css_properties_overflow-block) | 135 (01.04.2025) | 69 (03.09.2019) | 26 |\n| [`@property` / typed CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) | 85 (25.08.2022) | 128 (09.07.2024) | 16.4 (27.03.2023) |\n| [`light-dark()` CSS function](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) | 123 (19.03.2024) | 120 (21.11.2023) | 17.5 (13.05.2024) |\n| [`style()` container queries for custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries#container_style_queries) (planned) | 111 (07.03.2023) | [151 (tbd)](https://www.firefox.com/en-US/firefox/151.0beta/releasenotes/) | 18 (16.09.2024) |\n| [Anchor Positioning](https://caniuse.com/css-anchor-positioning) (planned) | 125 (14.05.2024) | 147 (13.01.2026) | 26 (15.09.2025) |\n| [Invoker Commands](https://caniuse.com/mdn-html_elements_button_commandfor) (planned) | 135 (01.04.2025) | 144 (14.10.2025) | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [`attr()` CSS Values 5 extensions](https://developer.mozilla.org/en-US/docs/Web/CSS/attr) (planned) | 133 (04.02.2025) | Firefox 149 (behind a config preference) | [Technology Preview 242](https://webkit.org/blog/category/safari-technology-preview/) |\n| [CSS Custom Functions](https://www.bram.us/2025/02/09/css-custom-functions-teaser/) (planned) | 139 (30.07.2025) | tbd | tbd |\n| [CSS `sibling-count()` and `sibling-index()`](https://caniuse.com/wf-sibling-count) (planned) | 138 (24.06.2025) | tbd | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [CSS `@scope`](https://caniuse.com/css-cascade-scope) (planned) | 118 (10.10.2023) | 146 (09.12.2025) | 17.4 (05.03.2024) |\n', "packages/foundations/docs/Colors.md": '# Colors\n\n- You use **Colors** to highlight an area with a specific color.\n- You can also use it to change the text color for components with the `*-transparent-semi` colors.\n- Most classes/placeholders will change `color` and `background-color` and will set properties, which will be passed down to adaptive components.\n\n## How to use\n\n1. First, you can use our **[color usage guide](./color-usage-guide)** to find out which method is best for coloring your layouts or components.\n2. The colors of layouts can be easily set using the predefined **[color schemes](./color-schemes)**.\n3. When developing your own components, `SCSS` variables or `CSS Custom Properties` should be used.\n\n**\u{1F6A7} The overview of our color variables is still in the making. Please come back soon.**\n\n## How to include colors\n\nFor **CSS** and **Tailwind** you need to use the import `@import "@db-ux/core-foundations/build/styles/colors/classes/all.css";` in your root `.css` file.\nOr if you only want a single variant e.g. **informational** you can import `@import "@db-ux/core-foundations/build/styles/colors/classes/informational.css";`.\n\nIn case that you\'re either using a bundler (recommended) or importing the CSS within your JavaScript files, please adapt this `@import` syntax accordingly.\n\nFor **SCSS** you need to use the import `@use "@db-ux/core-foundations/build/styles/colors/placeholder"` in your `.scss` file, where you need to reference the specific variable.\nThen you can use e.g. **informational** color by extending our SCSS placeholders like this: `@extend %db-informational-bg-1`.\n\n## Dark- & Light-Mode\n\nWe provide tokens for both dark- and light-mode. If you include the **relative** style you get a media query `@media (prefers-color-scheme: dark)` with the relevant tokens. You can [emulate](https://developer.chrome.com/docs/devtools/rendering/emulate-css/) the modes inside the devtools.\n\nIt\'s [recommended to set a `meta`-HTML-tag](https://web.dev/articles/color-scheme#the_color-scheme_meta_tag) to provide a signal to the browser on your accepted color schemes previous to loading the CSS:\n\n```html\n<meta name="color-scheme" content="dark light" />\n```\n\nWe recommend using the default media query based on the user preference, but if you want to force a mode for your page, you could set the `color-scheme` `meta`-HTML-tag to either [`only light`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#only_light), [`dark` or `light`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#light).\n\nIf you want to set it on a specific container as e.g. shown on the documentation page "Color schemes" you can do that by adding the HTML-attributes `data-mode="dark"` or `data-mode="light"`:\n\n### HTML\n\n```html\n<div data-mode="dark">...</div>\n```\n\nWe\'re providing an example in our [color schemes documentation](./color-schemes).\n\nWe need to set the **base** background to the element with `[data-mode]` so if you want to change the background to another color, make sure to use a wrapping tag like `<div>` with the `[data-mode]` to avoid issues.\n', "packages/foundations/docs/CustomIcons.md": "# Custom Icons\n\nIf you have custom icons and want to use them for [foundations](https://www.npmjs.com/package/@db-ux/core-foundations) and/or in [components](https://www.npmjs.com/package/@db-ux/core-components), you need to generate a **woff2** file.\n\nCheck out the `icon-font-tools` [documentation](https://github.com/db-ux-design-system/icon-font-tools/blob/main/docs/GenerateIconFonts.md) to generate a **woff2** file.\n\n## Foundation Developer\n\nIf you update a **svg** inside `assets/icons/functional/images` you need to recreate the **woff2** file.\n\nFor this you just need to run the following command from root:\n\n```shell\nnpm run update:icon-fonts\n```\n\nYour new icon should be inside `assets/icons/functional/fonts/**/info.json` and you should see it inside `assets/icons/functional/fonts/**/index.html` in the browser.\n", "packages/foundations/docs/Densities.md": '# Densities\n\n- You could use **Densities** to create visual "volume levels"\n- You could change the appearance of a container rather than a component\n- Best example is the navigation on our [main page](https://design-system.deutschebahn.com/core-web/review/main/). Above the navigation is a smaller meta-navigation and even the component inside is smaller as well as all the spacings. The meta-navigation is above the real navigation, but focus of the user is on the real navigation, because the meta-navigation has less "volume"\n\nThere are three different **Densities**, you can use them to change the volume of a specific container or even the entire page based on the use-case, so change the default **density** when:\n\n1. **functional**: e.g. use this for business apps with large tables\n2. **regular**: e.g. use this for normal consumer apps\n3. **expressive**: e.g. use this for marketing apps/ single pages\n\n## How to include\n\nFor **CSS**, **SCSS** and **Tailwind** you don\'t have to include a specific file, just follow the documentation for [foundations](../README.md).\n\n### How to use\n\nWe\'re providing [examples](./examples) to see the differences.\n\nWe set the `data-density` on a container like a `<div>`:\n\n```html\n<div data-density="functional">\n <!-- Everything inside here will be smaller -->\n <DBButton>Test</DBButton>\n <DBInput label="Test" />\n</div>\n```\n\nVariants:\n\n| Variant | CSS/SCSS/Tailwind |\n| :-----------------: | --------------------------- |\n| `functional` | `data-density="functional"` |\n| `regular` (default) | `data-density="regular"` |\n| `expressive` | `data-density="expressive"` |\n\nTo change the **density** of the entire page use:\n\n```html\n<body data-density="functional">\n ...\n</body>\n```\n', "packages/foundations/docs/FontsSizes.md": '# DB Font Sizes\n\nThe font sizes of foundations consist of [two different sets](./overview) (9 sizes each) for general texts (**Body Font Sizes**) and headlines (**Headline Font Sizes**).\nAll sizes of both sets are automatically adjusted by the selected [density](./../densities/readme).\n\n## Body Font Sizes\n\n- By default, the Body Font Size `md` is set to the body tag.\n- These 9 Body Font Sizes can also be explicitly set as classes on elements in order to change their font size.\n\n## Headline Font Sizes\n\n- 9 Headline Sizes are available and are usable by custom properties\n- 6 Headline Sizes are mapped to native headline tags (`h1` to `h6`) by default. Headlines can therefore be used directly.\n\n## Available variants / sizes\n\n`3xl` | `2xl` | `xl` | `lg` | `md` | `sm` | `xs` | `2xs` | `3xs`\n\n## When to use\n\n- Use our provided **Body Font Sizes** to explicitly change the size of text elements like `<p>`, `<span>` etc.\n- Use a **Body Font Size** for a container and all text elements in it (does not affect components font-sizes) .\n- **Headline Font Sizes** can be used to override the default mapping of the `h1` - `h6` tags.\n- _Advanced: use standardised *custom properties* to define `font-size` and `line-height` in your own components._\n\n### Notes\n\n> - Some sizes may stay the same because of screen width or density.\n> - Elements such as `<p>` and all headings (`h1` - `h6`) as well as **DB UX Design System Core components** have font sizes assigned by default so that they can be used without further customisation.\n\n### How to include\n\nFor **CSS** and **Tailwind** you need to use the import `@import "@db-ux/core-foundations/build/styles/fonts/classes/all.css";` in your root `.css` file.\n\nFor **SCSS** you can use the `.css` file, or you can use a placeholder by importing `@use "@db-ux/core-foundations/build/styles/fonts"` in your `.scss` file, where you need to reference the specific font size.\nThen you can use e.g. `sm` font-size by extending our SCSS placeholders like this: `@extend %db-overwrite-font-size-sm`.\n\n> **_NOTE:_** Make sure that you import the file after all other **foundation** css files, otherwise you should overwrite a specific `font-size` with the global selector\n\n```css\n/* Global selector */\n* {\n font-size: inherit;\n line-height: inherit;\n}\n```\n\n### How to use\n\nThe following options are recommended for applying **Body Font Sizes**:\n\n- CSS classes\n- CSS `data-`attributes\n- SCSS placeholders\n- Tailwind classes\n\nAll options (except the last one) set `font-size`, `line-height` and some **CSS Custom Properties** for an element. These custom properties are internally required by some components to be displayed correctly.\n\n> All available variants / sizes, [see also the detailed overview](./overview):\n>\n> `3xl` | `2xl` | `xl` | `lg` | `md` | `sm` | `xs` | `2xs` | `3xs`\n\n**Note: We use `XX` here. You should replace it with a size from above.**\n\n| CSS class | CSS data-attribute | SCSS | Tailwind |\n| :---------------------------: | ------------------------- | ---------------------------------------- | ----------------------------- |\n| `class="db-font-size-XX"` | `data-font-size="XX"` | `@extend %db-overwrite-font-size-XX` | `class="db-font-size-XX"` |\n| `class="db-headline-size-XX"` | `data-headline-size="XX"` | `@extend %db-overwrite-headline-size-XX` | `class="db-headline-size-XX"` |\n\n#### Advanced use: CSS Custom Properties\n\n> **_Note:_** The direct use of custom properties to set font sizes should be avoided if possible. If this is unavoidable, existing restrictions should be taken into account.\n\nAll of the above options are available for applying the **Body Font Sizes** to HTML elements within custom components.\nIn some cases it may make sense to set the `font-size` and `line-height` manually in the css.\n\n**Please replace `XX` in the custom-properties with one of the sizes:**\n\n```css\n.text-element {\n font: var(--db-type-body-XX);\n}\n```\n', "packages/foundations/docs/IDESupport.md": '# IDE Support\n\nWe try to support those IDEs:\n\n- [JetBrain](https://www.jetbrains.com/) IDEs (like. IntelliJ IDEA, WebStorm, etc.)\n- [Visual Studio Code (VSCode)](https://code.visualstudio.com/)\n\nMost use cases of the Design System might work in other IDEs as well.\n\n## Autocomplete for CSS classes and CSS Custom Properties (Variables)\n\nYou can enable auto-complete of CSS classes (like e.g. `db-color-cyan`) for `HTML` or `JSX` and CSS Custom Properties (like e.g. `var(--db-bg-basic-level-1-default)`) in `.css` or `.scss` files by including `@db-ux/core-foundations/build/ide`.\n\n> **Note:** The contents of this directory shouldn\'t be included/referenced inside your app. It\'s only serving as a file containing declarations for autocompletion inside your IDE. All values for classes and properties don\'t reflect the real values, and neither does the CSS selector. The correct values my differ based on multiple circumstances like light-/dark-mode or screen-size etc. Therefore, there isn\'t a 1:1 mapping.\n\n### JetBrain IDEs (like. IntelliJ IDEA, WebStorm, etc.)\n\n1. Goto `File/Settings/Languages & Frameworks/JavaScript/Libraries`\n2. Press the `Add` button and write `db-ux` into the "name" input. This name will be shown in the auto-complete popup during coding. You can change the name if you want to. Keep the rest of the settings as default: `Framework type: <Custom>` and `Visibility: Project`.\n3. Next press the \u2795 button below `Visibility` and select `Attach Directories...`\n4. This will open a file manager. Navigate to your current projects `node_modules/@db-ux/core-foundations/build/ide` and select the `ide` folder. Press `OK`.\n5. The folder should be included in the list below the \u2795 button. Press `Apply` on the bottom.\n6. Everything should work now. Close the settings and move to a `html` or `jsx/tsx` file and write `class="db-` as attribute to an element. You should see all `db-*` classes for auto-completion. Furthermore, you can go to a `.css` file and write inside a selector `color: db-`. You should see the autocomplete for CSS Custom Properties. By pressing `ENTER` this will automatically add `var(--db-xxx)`.\n\n### VS Code\n\n1. Install [the CSS Variable Autocomplete extension](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables).\n2. If it doesn\'t exist, create a new file `.vscode/settings.json` in your project\n3. Add this to `settings.json`:\n\n```json settings.json\n{\n "cssVariables.lookupFiles": [\n "**/*.css",\n "**/*.scss",\n "**/*.sass",\n "**/*.less",\n "node_modules/@db-ux/core-foundations/build/ide/db.ide.css"\n ]\n}\n```\n\n4. Go to a `.css` file and write inside a selector `color: db-`. You should see the autocomplete for CSS Custom Properties. By pressing `ENTER` this will automatically add `var(--db-xxx)`.\n\n> **Note:** We couldn\'t find a good extension to work properly with the classes you could try out [the SCSS Everywhere extension](https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion). But we encountered some issues with this one.\n', "packages/foundations/docs/Icons.md": '# Icons\n\n- We use icon fonts as **woff2** files for all our icons.\n- We auto generate these files out of `.svg` files.\n- A lot of our [components](../../components/readme) have an `icon` property you can pass in.\n- Use the CSS Custom Property `--db-icon-color` to overwrite the icons color.\n\n## How to include icons\n\nFor **CSS**, **SCSS** and **Tailwind** you don\'t have to include a specific file, just follow the documentation for [foundations](../README.md).\n\nIf you only want to use the icons from this library and not the full CSS, take a look at the "Edge case: Using only icons without the full CSS" section of this page.\n\n### How to use\n\nWe\'re providing an [overview for all of our icons](./overview).\n\nYou can add an icon before or after a tag, by adding an `data-` attribute to your HTML code, like for example:\n\n| Variant | Data |\n| -------- | :---------------------------------------: |\n| `before` | `data-icon="icon-from-overview"` |\n| `after` | `data-icon-trailing="icon-from-overview"` |\n\n### Icon weight\n\nYou can control the size/weight of icons by using the `data-icon-weight` attribute. Available weights are: `16`, `20`, `24`, `32`, `48`, `64`.\n\n| Position | Data attribute | Example |\n| -------- | :----------------------------: | ------------------------------------------------------------------------- |\n| `before` | `data-icon-weight="24"` | `<span data-icon="user" data-icon-weight="24">Text</span>` |\n| `before` | `data-icon-weight-before="32"` | `<span data-icon="user" data-icon-weight-before="32">Text</span>` |\n| `after` | `data-icon-weight-after="20"` | `<span data-icon-trailing="user" data-icon-weight-after="20">Text</span>` |\n\nIf you need to adjust the size of the icons more precisely, you can also set the `--db-icon-font-size` CSS custom property. Please bear in mind that you need to select an `icon-weight` to go with this icon font size from the available options, as each weight includes more or fewer details depending on the resulting size.\n\n### Icon variant (family)\n\nYou can control the variant/family of icons by using the `data-icon-variant` attribute. Available variants are: `default`, `filled`.\n\n| Position | Data attribute | Example |\n| -------- | :---------------------------------: | ------------------------------------------------------------------------------ |\n| `before` | `data-icon-variant="filled"` | `<span data-icon="user" data-icon-variant="filled">Text</span>` |\n| `before` | `data-icon-variant-before="filled"` | `<span data-icon="user" data-icon-variant-before="filled">Text</span>` |\n| `after` | `data-icon-variant-after="filled"` | `<span data-icon-trailing="user" data-icon-variant-after="filled">Text</span>` |\n\n### Combining weight and variant\n\nYou can combine both weight and variant attributes for precise icon control:\n\n```html\n<!-- 32px filled icon before text -->\n<span data-icon="user" data-icon-weight="32" data-icon-variant="filled"\n >User Profile</span\n>\n\n<!-- 24px default icon after text -->\n<span\n data-icon-trailing="arrow_right"\n data-icon-weight-after="24"\n data-icon-variant-after="default"\n >Next</span\n>\n\n<!-- Different styling for before and after icons -->\n<span\n data-icon="star"\n data-icon-weight-before="20"\n data-icon-variant-before="filled"\n data-icon-trailing="arrow_right"\n data-icon-weight-after="16"\n data-icon-variant-after="default"\n>\n Favorite Item\n</span>\n```\n\n### Icons color\n\nYou could use the CSS Custom Property `--db-icon-color` to overwrite the icons color, be it icon fonts or when using the SVG files directly. Or `--db-icon-pulse-color` for the illustrative icons pulse color.\n\n## Custom Icons\n\nIf you have custom icons and want to use them for foundations and/or in components, you need to generate a **woff2** file.\n\n[More information](./CustomIcons.md)\n\n## Additional functionality\n\n### TypeScript Autocomplete\n\nTo get TypeScript autocomplete you need to include a `*.d.ts` file, where you add some icons to the whitelabel base icons:\n\n```ts\n//\nimport "@db-ux/core-foundations";\nimport { BaseIconTypes } from "@db-ux/core-foundations";\n\ndeclare module "@db-ux/core-foundations" {\n interface OverwriteIcons {\n types: BaseIconTypes | "my-custom-icon1" | "my-custom-icon2";\n }\n}\n```\n\n_**OR:**_ If you use another library which provides some overwrite you can do it like this:\n\n```ts\n//\nimport "@db-ux/core-foundations";\nimport "@db-ux/db-theme-icons";\nimport { IconTypes } from "@db-ux/db-theme-icons";\n\ndeclare module "@db-ux/core-foundations" {\n interface OverwriteIcons {\n types: IconTypes;\n }\n}\n```\n\nYou can combine it as well like this:\n\n```ts\n//\nimport "@db-ux/core-foundations";\nimport "@db-ux/db-theme-icons";\nimport { IconTypes } from "@db-ux/db-theme-icons";\n\ndeclare module "@db-ux/core-foundations" {\n interface OverwriteIcons {\n types: IconTypes | "my-custom-icon1" | "my-custom-icon2";\n }\n}\n```\n\n### Edge case: Using only icons without the full CSS\n\nIf you want to use only the icons from this library without including the complete CSS, you can copy or reference just the icon-related files:\n\n```css\n/* bundler.css */\n@import "@db-ux/core-foundations/build/styles/defaults/default-icons.css";\n@import "@db-ux/db-theme-icons/build/styles/default-font.css";\n@import "@db-ux/db-theme-icons/build/styles/[rollup|webpack|relative].css";\n```\n\nor\n\n```bash\ncp "node_modules/@db-ux/core-foundations/build/styles/defaults/default-icons.css" \u2026;\ncp "node_modules/@db-ux/db-theme-icons/build/styles/default-font.css" \u2026;\ncp "node_modules/@db-ux/db-theme-icons/build/styles/[relative|absolute].css" \u2026;\n```\n\nYou need to copy or reference the correct `.css` file out of your project. There are multiple files depending on the bundler you use:\n\n- `relative.css`: No bundler (as shown in the previous code block)\n- `absolute.css`: No bundler\n- `rollup.css`: vite, rollup\n- `webpack.css`: webpack\n\n**Important for non-bundlers usage:** If you\'re moving `relative.css` CSS file to your project, you need to copy the `fonts` folder from `node_modules/@db-ux/db-theme-icons/build/fonts` to the same directory next to the folder where you store the `relative.css` file (e.g., next to your `styles` folder), because we\'re using the reference to e.g. `src: url("../fonts/default_12/db.woff2")` out of the `relative.css` CSS file.\n', "packages/foundations/docs/Performance.md": '# Performance\n\nIf you need to improve the performance of your application, you can use the following tips:\n\n## Minify with PurgeCSS and CSSO\n\nWhen you use the full bundled `.css` file we provide, you could easily reduce the file size by removing unused CSS classes. This can be done with [PurgeCSS](https://purgecss.com/) and [CSSO](https://github.com/css/csso).\n\nInstall both with:\n\n```shell\nnpm i purgecss csso --save-dev\n```\n\nNext you should create a file, e.g. `purgecss.js` in your project root with the following content:\n\n```javascript\nimport { writeFileSync } from "node:fs";\n\nimport { PurgeCSS } from "purgecss";\nimport { minify } from "csso";\n\nconst distFolder = "dist"; // TODO: Change me if you need another folder\n\nnew PurgeCSS()\n .purge({\n content: [`${distFolder}/**/*.html`, `${distFolder}/**/*.js`],\n css: [`${distFolder}/**/*.css`],\n defaultExtractor: (content) => content.match(/[\\w-/:]+(?<!:)/g) || [],\n variables: true,\n rejectedCss: true,\n safelist: {\n variables: [\n /* TODO: Keep only the densities you need */\n /-functional-/,\n /-regular-/,\n /-expressive-/,\n /* Keep density & all color properties/variables */\n /-default$/,\n /-hovered$/,\n /-pressed$/\n ],\n /* Some components require a safelist */\n greedy: [\n /db-tabs/ // TODO: Add more components if necessary\n ]\n }\n })\n .then((purgeCSSResult) => {\n for (const result of purgeCSSResult) {\n writeFileSync(result.file, minify(result.css).css);\n\n /* Optional: for debugging */\n // writeFileSync(`rejected.css`, result.rejectedCss || "");\n }\n });\n```\n\nYou can run this script with `node purgecss.js` and it will minify your CSS files. You can also add this script to your `package.json` to run after your regular build process:\n\n```json\n{\n "scripts": {\n "postbuild": "node purgecss.js"\n }\n}\n```\n', "packages/foundations/docs/Variables.md": "# Variables\n\n- You use Variables to style your pages and custom components.\n- The Variables are primarily for paddings, margins and all kinds of sizes.\n- All variables are automatically predefined with the correct variable based on the [density](../densities/readme).\n- Based on the density and the selected theme, the \"real\" value behind the variable can change.\n\n## How to include variables\n\nFor **CSS** and **Tailwind** you don't have to include a specific file, just follow the documentation for [foundations](../README.md).\n\nFor **SCSS** you need to use the import `@use \"@db-ux/core-foundations/build/styles/variables\"` in your `.scss` file, where you want to reference the specific variable.\n\n## Simple overview for advanced\n\n| Variable type | T-Shirts \u{1F455} | Base |\n| ---------------------- | ------------------------------------------ | ---- |\n| **spacing fixed** | `3xs`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl` | `md` |\n| **spacing responsive** | `xs`, `sm`, `md`, `lg`, `xl` | `md` |\n| **sizing** | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | `md` |\n\n## Spacing fixed\n\n- We use **spacing fixed** to add margins, paddings, gaps, etc.\n- We don't use them for `width` or `height`.\n- Those are the main variables you use all the time to build your page or component.\n\n### How to use\n\nWe use **padding** as an example for this variable.\n\nYou can see a visual preview [spacings fixed examples page](./examples).\n\n| T-Shirt \u{1F455} | CSS | SCSS | Tailwind |\n| :--------: | -------------------------------------- | ------------------------------------------ | ----------- |\n| `3xs` | `padding: var(--db-spacing-fixed-3xs)` | `padding: variables.$db-spacing-fixed-3xs` | `p-fix-3xs` |\n| `2xs` | `padding: var(--db-spacing-fixed-2xs)` | `padding: variables.$db-spacing-fixed-2xs` | `p-fix-2xs` |\n| `xs` | `padding: var(--db-spacing-fixed-xs)` | `padding: variables.$db-spacing-fixed-xs` | `p-fix-xs` |\n| `sm` | `padding: var(--db-spacing-fixed-sm)` | `padding: variables.$db-spacing-fixed-sm` | `p-fix-sm` |\n| `md` | `padding: var(--db-spacing-fixed-md)` | `padding: variables.$db-spacing-fixed-md` | `p-fix-md` |\n| `lg` | `padding: var(--db-spacing-fixed-lg)` | `padding: variables.$db-spacing-fixed-lg` | `p-fix-lg` |\n| `xl` | `padding: var(--db-spacing-fixed-xl)` | `padding: variables.$db-spacing-fixed-xl` | `p-fix-xl` |\n\n## Spacing responsive\n\n- We use **spacing responsive** to add spacings which should change based on the users' device.\n- We don't use them for `width` or `height`.\n- Best example would be the padding for your `main` region which should be larger on a desktop device than mobile.\n- We recommend using `DBSection` from our [components library](../../components/readme). The component handles the responsive Layout for your app, you don't have to struggle which spacing would be the correct one.\n\n### How to use\n\nWe use **padding** as an example for this variable.\n\nYou can see a visual preview [spacings responsive examples page](./examples).\n\n| T-Shirt \u{1F455} | CSS | SCSS | Tailwind |\n| :--------: | ------------------------------------------ | ---------------------------------------------- | ---------- |\n| `xs` | `padding: var(--db-spacing-responsive-xs)` | `padding: variables.$db-spacing-responsive-xs` | `p-res-xs` |\n| `sm` | `padding: var(--db-spacing-responsive-sm)` | `padding: variables.$db-spacing-responsive-sm` | `p-res-sm` |\n| `md` | `padding: var(--db-spacing-responsive-md)` | `padding: variables.$db-spacing-responsive-md` | `p-res-md` |\n| `lg` | `padding: var(--db-spacing-responsive-lg)` | `padding: variables.$db-spacing-responsive-lg` | `p-res-lg` |\n| `xl` | `padding: var(--db-spacing-responsive-xl)` | `padding: variables.$db-spacing-responsive-xl` | `p-res-xl` |\n\n## Sizing\n\n- We use **sizing** to set a fixed height to components (Button, Input, ...).\n- We don't use them for `padding` or `margin` except for absolute elements inside a component with a fixed height.\n- You should use a sizing variable if you want to align a custom component with another component, which has a fixed height.\n\n### How to use\n\nWe use **height** as an example for this variable.\n\nYou can see a visual preview [sizings examples page](./examples).\n\n| T-Shirt \u{1F455} | CSS | SCSS | Tailwind |\n| :--------: | ------------------------------ | ---------------------------------- | ----------- |\n| `xs` | `height: var(--db-sizing-xs)` | `height: variables.$db-sizing-xs` | `h-siz-xs` |\n| `sm` | `height: var(--db-sizing-sm)` | `height: variables.$db-sizing-sm` | `h-siz-sm` |\n| `md` | `height: var(--db-sizing-md)` | `height: variables.$db-sizing-md` | `h-siz-md` |\n| `lg` | `height: var(--db-sizing-lg)` | `height: variables.$db-sizing-lg` | `h-siz-lg` |\n| `xl` | `height: var(--db-sizing-xl)` | `height: variables.$db-sizing-xl` | `h-siz-xl` |\n| `2xl` | `height: var(--db-sizing-2xl)` | `height: variables.$db-sizing-2xl` | `h-siz-2xl` |\n| `3xl` | `height: var(--db-sizing-3xl)` | `height: variables.$db-sizing-3xl` | `h-siz-3xl` |\n" }, migrationGuides: { README: "# Migration from DB UI to DB UX Design System v3\n\nThis folder contains the documentation on how to migrate from DB UI to DB UX Design System v3.\n\nIf you are even already on our current Design System generation, have a look at the [GitHub Releases page](https://github.com/db-ux-design-system/core-web/releases) for the `CHANGELOG.md` file in each Node package for detailed information on changes.\n", "color-migration": "# DB UI \u2192 DB UX Color Migration\n\nUse the **BG** column for `background-color` / `background`. Use the **FG** column for `color` / `border-color` / `outline-color` / `fill` / `stroke` / `caret-color`. For `box-shadow`, use `--db-elevation-*` tokens instead.\n\n| DB UI v2 Token | Background (BG) | Foreground (FG) |\n| --------------------------------- | ------------------------------------------------------ | ---------------------------------------------------- |\n| `db-color-yellow-100` | `--db-yellow-bg-basic-level-2-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-yellow-200` | `--db-yellow-bg-basic-level-3-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-yellow-300` | `--db-yellow-bg-basic-level-3-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-400` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-500` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-600` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-700` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-yellow-800` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-yellow-900` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-orange-100` | `--db-yellow-bg-basic-level-2-default` | `--db-yellow-on-bg-inverted-default` |\n| `db-color-orange-200` | `--db-yellow-bg-basic-level-3-default` | `--db-yellow-on-bg-inverted-default` |\n| `db-color-orange-300` | `--db-yellow-bg-basic-level-3-default` | `--db-warning-on-bg-basic-emphasis-60-default` |\n| `db-color-orange-400` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-orange-500` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-orange-600` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-orange-700` | `--db-warning-bg-inverted-contrast-low-default` | `--db-warning-on-bg-basic-emphasis-70-default` |\n| `db-color-orange-800` | `--db-warning-bg-inverted-contrast-high-default` | `--db-warning-on-bg-basic-emphasis-80-default` |\n| `db-color-red-100` | `--db-brand-bg-basic-level-3-default` | `--db-brand-on-bg-inverted-default` |\n| `db-color-red-200` | `--db-brand-bg-basic-level-3-default` | `--db-burgundy-on-bg-basic-emphasis-60-default` |\n| `db-color-red-300` | `--db-brand-bg-vibrant-default` | `--db-brand-on-bg-basic-emphasis-50-default` |\n| `db-color-red-400` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-red-500` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-red-600` | `--db-brand-bg-inverted-contrast-high-default` | `--db-brand-on-bg-basic-emphasis-80-default` |\n| `db-color-red-700` | `--db-brand-bg-inverted-contrast-high-default` | `--db-brand-on-bg-basic-emphasis-90-default` |\n| `db-color-red-800` | `--db-brand-bg-inverted-contrast-max-default` | `--db-brand-on-bg-basic-emphasis-90-default` |\n| `db-color-burgundy-100` | `--db-burgundy-bg-basic-level-3-default` | `--db-pink-on-bg-inverted-default` |\n| `db-color-burgundy-200` | `--db-pink-bg-basic-level-3-default` | `--db-burgundy-on-bg-basic-emphasis-60-default` |\n| `db-color-burgundy-300` | `--db-burgundy-bg-vibrant-default` | `--db-burgundy-on-bg-basic-emphasis-50-default` |\n| `db-color-burgundy-400` | `--db-burgundy-bg-inverted-contrast-low-default` | `--db-burgundy-on-bg-basic-emphasis-70-default` |\n| `db-color-burgundy-500` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-burgundy-600` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-burgundy-700` | `--db-pink-bg-inverted-contrast-max-default` | `--db-burgundy-on-bg-basic-emphasis-90-default` |\n| `db-color-burgundy-800` | `--db-pink-bg-inverted-contrast-max-default` | `--db-pink-on-bg-basic-emphasis-100-default` |\n| `db-color-pink-100` | `--db-pink-bg-basic-level-3-default` | `--db-pink-on-bg-inverted-default` |\n| `db-color-pink-200` | `--db-pink-bg-basic-level-3-default` | `--db-burgundy-on-bg-basic-emphasis-60-default` |\n| `db-color-pink-300` | `--db-pink-bg-vibrant-default` | `--db-pink-on-bg-basic-emphasis-60-default` |\n| `db-color-pink-400` | `--db-pink-bg-vibrant-default` | `--db-pink-on-bg-basic-emphasis-50-default` |\n| `db-color-pink-500` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-pink-600` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-pink-700` | `--db-pink-bg-inverted-contrast-high-default` | `--db-pink-on-bg-basic-emphasis-80-default` |\n| `db-color-pink-800` | `--db-pink-bg-inverted-contrast-high-default` | `--db-pink-on-bg-basic-emphasis-80-default` |\n| `db-color-violett-100` | `--db-violet-bg-basic-level-3-default` | `--db-violet-on-bg-inverted-default` |\n| `db-color-violett-200` | `--db-violet-bg-basic-level-3-default` | `--db-violet-on-bg-basic-emphasis-60-default` |\n| `db-color-violett-300` | `--db-violet-bg-vibrant-default` | `--db-violet-on-bg-basic-emphasis-50-default` |\n| `db-color-violett-400` | `--db-violet-bg-inverted-contrast-low-default` | `--db-violet-on-bg-basic-emphasis-70-default` |\n| `db-color-violett-500` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-violett-600` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-violett-700` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-90-default` |\n| `db-color-violett-800` | `--db-violet-bg-inverted-contrast-max-default` | `--db-violet-on-bg-basic-emphasis-90-default` |\n| `db-color-blue-100` | `--db-informational-bg-basic-level-3-default` | `--db-informational-on-bg-inverted-default` |\n| `db-color-blue-200` | `--db-informational-bg-basic-level-3-default` | `--db-informational-on-bg-basic-emphasis-60-default` |\n| `db-color-blue-300` | `--db-blue-bg-vibrant-default` | `--db-blue-on-bg-basic-emphasis-50-default` |\n| `db-color-blue-400` | `--db-blue-bg-inverted-contrast-low-default` | `--db-blue-on-bg-basic-emphasis-70-default` |\n| `db-color-blue-500` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-80-default` |\n| `db-color-blue-600` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-90-default` |\n| `db-color-blue-700` | `--db-blue-bg-inverted-contrast-max-default` | `--db-blue-on-bg-basic-emphasis-90-default` |\n| `db-color-blue-800` | `--db-blue-bg-inverted-contrast-max-default` | `--db-blue-on-bg-basic-emphasis-100-default` |\n| `db-color-cyan-100` | `--db-turquoise-bg-basic-level-1-default` | `--db-turquoise-on-bg-inverted-default` |\n| `db-color-cyan-200` | `--db-informational-bg-basic-level-3-default` | `--db-informational-on-bg-basic-emphasis-60-default` |\n| `db-color-cyan-300` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-60-default` |\n| `db-color-cyan-400` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-cyan-500` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-cyan-600` | `--db-informational-bg-inverted-contrast-low-default` | `--db-informational-on-bg-basic-emphasis-70-default` |\n| `db-color-cyan-700` | `--db-informational-bg-inverted-contrast-high-default` | `--db-informational-on-bg-basic-emphasis-80-default` |\n| `db-color-cyan-800` | `--db-informational-bg-inverted-contrast-high-default` | `--db-informational-on-bg-basic-emphasis-90-default` |\n| `db-color-turquoise-100` | `--db-turquoise-bg-basic-level-1-default` | `--db-turquoise-on-bg-inverted-default` |\n| `db-color-turquoise-200` | `--db-turquoise-bg-basic-level-1-default` | `--db-turquoise-on-bg-inverted-default` |\n| `db-color-turquoise-300` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-turquoise-400` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-turquoise-500` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-turquoise-600` | `--db-turquoise-bg-inverted-contrast-low-default` | `--db-turquoise-on-bg-basic-emphasis-70-default` |\n| `db-color-turquoise-700` | `--db-turquoise-bg-inverted-contrast-high-default` | `--db-turquoise-on-bg-basic-emphasis-80-default` |\n| `db-color-turquoise-800` | `--db-turquoise-bg-inverted-contrast-high-default` | `--db-turquoise-on-bg-basic-emphasis-90-default` |\n| `db-color-green-100` | `--db-green-bg-basic-level-1-default` | `--db-green-on-bg-inverted-default` |\n| `db-color-green-200` | `--db-green-bg-basic-level-2-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-green-300` | `--db-green-bg-vibrant-default` | `--db-green-on-bg-basic-emphasis-50-default` |\n| `db-color-green-400` | `--db-green-bg-vibrant-default` | `--db-green-on-bg-basic-emphasis-50-default` |\n| `db-color-green-500` | `--db-green-bg-inverted-contrast-low-default` | `--db-green-on-bg-basic-emphasis-70-default` |\n| `db-color-green-600` | `--db-green-bg-inverted-contrast-high-default` | `--db-green-on-bg-basic-emphasis-80-default` |\n| `db-color-green-700` | `--db-green-bg-inverted-contrast-high-default` | `--db-green-on-bg-basic-emphasis-80-default` |\n| `db-color-green-800` | `--db-green-bg-inverted-contrast-high-default` | `--db-green-on-bg-basic-emphasis-90-default` |\n| `db-color-light-green-100` | `--db-successful-bg-basic-level-1-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-light-green-200` | `--db-successful-bg-basic-level-3-default` | `--db-green-on-bg-basic-emphasis-60-default` |\n| `db-color-light-green-300` | `--db-successful-bg-vibrant-default` | `--db-successful-on-bg-basic-emphasis-60-default` |\n| `db-color-light-green-400` | `--db-successful-bg-vibrant-default` | `--db-successful-on-bg-basic-emphasis-50-default` |\n| `db-color-light-green-500` | `--db-successful-bg-vibrant-default` | `--db-successful-on-bg-basic-emphasis-50-default` |\n| `db-color-light-green-600` | `--db-successful-bg-inverted-contrast-low-default` | `--db-successful-on-bg-basic-emphasis-70-default` |\n| `db-color-light-green-700` | `--db-successful-bg-inverted-contrast-high-default` | `--db-successful-on-bg-basic-emphasis-80-default` |\n| `db-color-light-green-800` | `--db-successful-bg-inverted-contrast-high-default` | `--db-successful-on-bg-basic-emphasis-80-default` |\n| `db-color-warm-gray-100` | `--db-adaptive-bg-basic-level-2-default` | `--db-adaptive-on-bg-inverted-default` |\n| `db-color-warm-gray-200` | `--db-adaptive-bg-basic-level-3-default` | `--db-yellow-on-bg-inverted-default` |\n| `db-color-warm-gray-300` | `--db-adaptive-bg-vibrant-default` | `--db-adaptive-on-bg-basic-emphasis-60-default` |\n| `db-color-warm-gray-400` | `--db-adaptive-bg-vibrant-default` | `--db-adaptive-on-bg-basic-emphasis-50-default` |\n| `db-color-warm-gray-500` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-warm-gray-600` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-warm-gray-700` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-warm-gray-800` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-cool-gray-100` | `--db-adaptive-bg-basic-level-3-default` | `--db-informational-on-bg-inverted-default` |\n| `db-color-cool-gray-200` | `--db-adaptive-bg-basic-level-3-default` | `--db-adaptive-on-bg-basic-emphasis-60-default` |\n| `db-color-cool-gray-300` | `--db-adaptive-bg-vibrant-default` | `--db-adaptive-on-bg-basic-emphasis-50-default` |\n| `db-color-cool-gray-400` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-cool-gray-500` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-80-default` |\n| `db-color-cool-gray-600` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-cool-gray-700` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-cool-gray-800` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-100-default` |\n| `db-color-red` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-white` | `--db-adaptive-bg-basic-level-1-default` | `--db-adaptive-on-bg-inverted-default` |\n| `db-color-black` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-100-default` |\n| `db-color-success` | `--db-successful-bg-inverted-contrast-low-default` | `--db-successful-on-bg-basic-emphasis-70-default` |\n| `db-color-success-small-font` | `--db-successful-bg-inverted-contrast-low-default` | `--db-successful-on-bg-basic-emphasis-70-default` |\n| `db-color-error` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-error-small-font` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-warning` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-warning-small-font` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-informative` | `--db-informational-bg-inverted-contrast-low-default` | `--db-informational-on-bg-basic-emphasis-70-default` |\n| `db-color-informative-small-font` | `--db-informational-bg-inverted-contrast-high-default` | `--db-informational-on-bg-basic-emphasis-80-default` |\n| `db-color-food-drink` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-health` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-things-to-know` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-community-facilities` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-db-services-facilities` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-90-default` |\n| `db-color-shopping` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-arts-culture` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-leisure` | `--db-green-bg-inverted-contrast-low-default` | `--db-green-on-bg-basic-emphasis-70-default` |\n| `db-color-services` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-guidance` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-ice` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-ic` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-80-default` |\n| `db-color-ec` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-80-default` |\n| `db-color-re` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-rb` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-s-bahn` | `--db-green-bg-inverted-contrast-low-default` | `--db-green-on-bg-basic-emphasis-70-default` |\n| `db-color-u-bahn` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-80-default` |\n| `db-color-tram` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-bus` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-intercity-bus` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-call-bus` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-ev-bus` | `--db-pink-bg-inverted-contrast-high-default` | `--db-pink-on-bg-basic-emphasis-80-default` |\n| `db-color-ship` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-airplane` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-carsharing` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-taxi` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-bikesharing` | `--db-brand-bg-inverted-contrast-high-default` | `--db-brand-on-bg-basic-emphasis-80-default` |\n| `db-color-walk` | `--db-adaptive-bg-basic-level-3-default` | `--db-adaptive-on-bg-basic-emphasis-60-default` |\n", "component-migration": '# DB UI to DB UX v3 Component Migration\n\nPrefer JS framework packages: Angular `@db-ux/ngx-core-components` (`<db-button>`), React `@db-ux/react-core-components` (`<DBButton>`), Vue `@db-ux/v-core-components` (`<DBButton>`) in case that the user wants to build a JavaScript application with one of these frameworks. If it\'s still a JavaScript framework, but none of these apply, use `@db-ux/core-components` node package. In all other cases, use the HTML and CSS basis: `@db-ux/core-components`.\n\nLegend: [replacement]=replacement exists, [new]=new component, [removed]=removed, [planned]=planned\n\n## Direct Equivalents\n\n**accordion** \u2014 New component\n\n**accordion-item** \u2014 `cmp-accordion`->`db-accordion-item` (was single item, now multiple items in one accordion). Props: `summary`->`headline`, `emphasis`->[removed], `size`->[removed] (use density). New: `disabled`, `content`.\n\n**badge** \u2014 New component\n\n**brand** \u2014 `cmp-brand`->`db-brand`. All anchor-related props removed (`siteNameLink`,`alt`,`anchorRef`,`anchorTitle`,`anchorRelation`,`src`->[removed]). Wrap with your own `<a>` if needed. New: `hideLogo`.\n\n**button** \u2014 `elm-button`->`db-button`. Sizes: `large`->[removed], `regular`->[removed] (default is `medium`, use density). Variants: `primary`->[removed] (use `outlined`), `brand-primary`->`primary`, `secondary-outline`->`outlined`, `secondary-solid`->`solid`, `tertiary-plain`->`text`. Icons: `iconTrailing`->[removed] (only leading icons), `iconOnly`->`noText`.\n\n**card** \u2014 `cmp-card`->`db-card`. Variant: `header`->[removed], `content`->[removed] (use children/slot), `variant="interactive"` makes it act like a button. Image: `alt`->`imgAlt`, `image`->`imgSrc`. New: `imgWidth`, `imgHeight`. Removed: `illustration`, `uiCoreIllustrationPath`.\n\n**checkbox** \u2014 `elm-checkbox`->`db-checkbox`. Map `input_id` to `id` (for React/Vue), but use `propOverrides` for Web Components and Angular.\n\n**divider** \u2014 New component\n\n**drawer** \u2014 New component\n\n**header** \u2014 `rea-header`->`db-header`. `mobile`->`forceMobile`.\n\n**icon** \u2014 ->`db-icon`. `variant`->[removed] (controlled by `font-family:var(--db-icon-font-family)` and `font-weight:var(--db-icon-font-weight)`).\n\n**infotext** \u2014 New component\n\n**input** \u2014 `elm-input`->`db-input`. Old variants removed: `semitransparent`,`white`,`solid`,`outline`->[removed]. New variants: `adaptive`,`neutral`,`critical`,`informational`,`warning`,`successful`. `description`->`message`. \u26A0\uFE0F Behavior change: In v2, `description` was hidden by default (tooltip/hint). In v3, `message` is ALWAYS visible by default. To restore v2 hidden behavior, set `showMessage={false}` explicitly.\n\n**link** \u2014 `elm-link`->`db-link`. `icon`,`icononly`,`iconVariant`->[removed] (use `content` for arrow icon).\n\n**navigation** \u2014 `cmp-mainnavigation`->`db-navigation`. `data`,`siteName`->[removed] (use children/slot, features moved to `db-header`).\n\n**navigation-item** \u2014 New component\n\n**notification** \u2014 `elm-notification`->`db-notification`. Type: `notification`->`notification`, `status`->[removed] (use variants). New type: `inline`. Variants: `error`->`critical`, `informative`->`informational`, `warning`->`warning`, `success`->`successful`. New: `adaptive`.\n\n**page** \u2014 `rea-page`->`db-page`.\n\n**popover** \u2014 New component\n\n**radio** \u2014 `elm-radio`->`db-radio`. Map `input_id` to `id` (for React/Vue), but use `propOverrides` for Web Components and Angular.\n\n**section** \u2014 New component\n\n**select** \u2014 `elm-select`->`db-select`. `multiple`->[removed], `size`->[removed].\n\n**stack** \u2014 New component\n\n**switch** \u2014 `elm-toggle`->`db-switch`. `htmlid`->`id`.\n\n**tab-item** \u2014 `cmp-db-tab`->`db-tab-item`. `name`->[removed] (handled by parent `db-tabs`).\n\n**tab-list** \u2014 New component\n\n**tab-panel** \u2014 New component\n\n**tabs** \u2014 `cmp-tab-bar`->`db-tabs`.\n\n**tag** \u2014 `elm-tag`->`db-tag`. Chip+tag merged into tag only. Interactive tags: wrap `db-button`,`db-link`,`db-checkbox`,`db-radio` inside `db-tag`. `small`->[removed] (use density, `type="strong"` for emphasis). Variants: `poi-*`->[removed], `track`->[removed], `error`->`critical`, `informative`->`informational`, `success`->`successful`. `iconAfter`->[removed] (only leading icons).\n\n**textarea** \u2014 `elm-textarea`->`db-textarea`. Old variants removed: `semitransparent`,`white`,`solid`,`outline`->[removed]. New: `adaptive`,`critical`,`informational`,`warning`,`successful`. `description`->`message`. \u26A0\uFE0F Behavior change: In v2, `description` was hidden by default (tooltip/hint). In v3, `message` is ALWAYS visible by default. To restore v2 hidden behavior, set `showMessage={false}` explicitly.\n\n**tooltip** \u2014 New component\n\n## No Direct Equivalent\n\n| Old | Status | Replacement |\n| ---------------------- | :-----------: | ----------------------------------------------------------------- |\n| `rea-main` | [removed] | `db-page` (includes `<main>`) |\n| `rea-grid` | [removed] | CSS Grid or `db-stack` |\n| `rea-footer` | [planned] | Semantic `<footer>` + `db-link`, planned Q4/2025 |\n| `elm-headline` | [replacement] | Semantic headings + `db-infotext` for subtitles |\n| `elm-headline` (pulse) | [removed] | Heading + CSS animation |\n| `elm-loadingindicator` | [planned] | Planned Q4/2025, use CSS spinner + `aria-live` |\n| `elm-progress` | [planned] | Planned Q4/2025, use `<progress>` |\n| `elm-chip` | [replacement] | `db-tag` with `db-button`/`db-checkbox`/`db-radio` inside |\n| `cmp-breadcrumb` | [planned] | Planned Q4/2025, use `db-link` in `<nav aria-label="Breadcrumb">` |\n| `cmp-pagination` | [planned] | Planned Q4/2025, use `db-button` with ARIA labels |\n| `cmp-table` | [planned] | Under research, use semantic `<table>` |\n| `cmp-sidenavi` | [replacement] | `db-navigation` inside `db-drawer` |\n| `cmp-dialog` | [replacement] | `db-drawer` or custom modal, planned Q4/2025 |\n\n## Key Migration Examples\n\n`rea-main` -> `<db-page>Content</db-page>`\n\n`rea-grid` -> CSS Grid with `gap: var(--db-spacing-fixed-md)`\n\n`elm-chip` -> `<db-tag><db-button variant="ghost">Text</db-button></db-tag>`\n\n`elm-headline` -> `<h1>Title</h1>` + `<db-infotext>Subtitle</db-infotext>`\n\n`cmp-sidenavi` -> `<db-drawer><db-navigation><db-navigation-item><db-link href="/page">Item</db-link></db-navigation-item></db-navigation></db-drawer>`\n\n## A11y for Custom Solutions\n\nUse semantic HTML, ARIA labels/roles/states, keyboard navigation, focus management, screen reader support.\n\nTemporary patterns: loading -> `<div role="status"><span class="visually-hidden">Loading...</span></div>`, progress -> `<progress value="70" max="100" aria-label="Upload progress: 70%">`, breadcrumb -> `<nav aria-label="Breadcrumb"><ol>...</ol></nav>`.\n', "general-migration": '# DB UI \u2192 DB UX General Migration\n\nScan files: `.css`, `.scss`, `.html`, `.tsx`, `.jsx`, `.ts`, `.js`, `.vue`\n\n## Typography\n\nReplace hardcoded `font-size` with `font` shorthand using `--db-type-*` tokens. Use `font:` not `font-size:`. Remove redundant `line-height`/`font-weight`/`font-family` \u2014 the token sets all four.\n\nBody tokens: `--db-type-body-3xs` through `--db-type-body-3xl`. Headline tokens: `--db-type-headline-3xs` through `--db-type-headline-3xl`. SCSS: `$db-type-body-md`, etc.\n\nSize mapping: `10px`/`0.625rem`\u2192`body-3xs`, `12px`/`0.75rem`\u2192`body-2xs`, `14px`/`0.875rem`/`small`\u2192`body-sm`, `16px`/`1rem`/`medium`\u2192`body-md`, `18px`/`1.125rem`\u2192`body-lg`, `20px`/`1.25rem`/`large`\u2192`body-xl`, `24px`/`1.5rem`\u2192`headline-sm`, `32px`/`2rem`\u2192`headline-md`, `40px`/`2.5rem`\u2192`headline-lg`, `48px`/`3rem`\u2192`headline-xl`.\n\n## Colors\n\nSee `db-ui-color-migration.md` for full mapping. Token names are bare (no `var(--)` / `$`). CSS: `var(--token)`, SCSS: `$token`.\n\nBG column for: `background-color`, `background`. FG column for: `color`, `border-color`, `border`, `outline-color`, `text-decoration-color`, `fill`, `stroke`, `caret-color`, `column-rule-color`.\n\nNEVER use `opacity` to simulate lighter colors. NEVER use `--db-elevation-*` as color values.\n\n## box-shadow \u2192 elevation tokens\n\nDo NOT use color tokens for `box-shadow`. Use: `--db-elevation-sm` (subtle/pressed), `--db-elevation-md` (default/cards), `--db-elevation-lg` (prominent/hover). SCSS: `$db-elevation-sm`/`md`/`lg`. Interactive: `data-interactive="elevation"` or `.db-interactive-elevation` (auto `md`\u2192`lg` hover\u2192`sm` active).\n\n## Inline Styles\n\nReplace all inline `style` attributes, as they bypass theming, density, and dark mode. Follow this strict priority: 1) use component props, 2) use external CSS/SCSS classes with tokens, 3) use inline styles with tokens only as an absolute last resort.\n\n## Required CSS Imports & Token Architecture\n\nv3 uses a layered CSS architecture. All four imports are required in this exact order:\n\n```tsx\n// main.tsx \u2014 order matters!\nimport "@db-ux/core-foundations/build/styles/theme/rollup.css"; // Layer 1: Palette tokens (@property definitions, e.g. #16181b)\nimport "@db-ux/core-foundations/build/styles/bundle.css"; // Layer 2: Semantic tokens (light-dark mappings on :root)\nimport "@db-ux/core-foundations/build/styles/icons/rollup.css"; // Layer 3: Icon fonts (@font-face declarations)\nimport "@db-ux/core-components/build/styles/rollup.css"; // Layer 4: Component styling\n```\n\n**Layer 1 \u2013 Palette tokens:** Defines raw color values as CSS `@property` registrations. These are the primitive building blocks (hex values, numeric scales).\n\n**Layer 2 \u2013 Semantic tokens:** Maps palette tokens to semantic meanings using `light-dark()` on `:root`. Provides spacing, typography, elevation, and color intent tokens.\n\n**Layer 3 \u2013 Icon fonts:** Registers `@font-face` declarations for the icon font. Without this, icon names render as plain text instead of symbols.\n\n**Layer 4 \u2013 Component styling:** The actual component CSS rules. Depends on all three foundation layers above.\n\nMissing any layer causes specific failures:\n\n- No Layer 1/2 \u2192 components render without colors/spacing (broken layout)\n- No Layer 3 \u2192 icons display as text strings\n- No Layer 4 \u2192 components have no styling at all\n\n## Spacing\n\nReplace hardcoded `px`/`rem` in `padding`, `margin`, `gap`, `inset`, `top`/`right`/`bottom`/`left` with `--db-spacing-fixed-*` tokens. For responsive spacing use `--db-spacing-responsive-*`.\n\nFixed tokens (regular density): `3xs`=2px, `2xs`=4px, `xs`=8px, `sm`=12px, `md`=16px, `lg`=24px, `xl`=32px, `2xl`=48px, `3xl`=80px. Values adapt to active density automatically. SCSS: `$db-spacing-fixed-md`, etc.\n', "icon-migration": "# DB UI \u2192 DB UX Icon Migration\n\n<!-- cSpell:ignore steppless -->\n\n`account`\u2192`person`, `add`\u2192`plus`, `add-circle`\u2192`add_option`, `add-link`\u2192`link_chain`, `alarm`\u2192`alarm_clock`, `alarm-add`\u2192`alarm_clock_plus`, `alert`\u2192`bell`, `alert-off`\u2192`bell_disabled`, `artificial-intelligence`\u2192`artificial_intelligence`, `attachment`\u2192`paper_clip`, `augmented-reality`\u2192`augmented_reality`, `block`\u2192`block`, `bookmark`\u2192`bookmark`, `bug`\u2192`bug`, `build`\u2192`wrench`, `calendar`\u2192`calendar`, `camera`\u2192`camera`, `cash`\u2192`cash`, `check-circle`\u2192`check_circle`, `cloud`\u2192`cloud`, `cloud-download`\u2192`cloud_download`, `cloud-upload`\u2192`cloud_upload`, `copy`\u2192`copy`, `credit-card`\u2192`credit_card`, `dashboard`\u2192`speedometer`, `delete`\u2192`bin`, `discount`\u2192`discount`, `document`\u2192`document`, `document-check`\u2192`document_check`, `document-cross`\u2192`document_cross`, `done`\u2192`check`, `download`\u2192`download`, `drag-and-drop`\u2192`dots_drag_and_drop`, `edit`\u2192`pen`, `euro-sign`\u2192`euro_sign`, `face-delighted`\u2192`face_delighted`, `face-disappointed`\u2192`face_disappointed`, `face-neutral`\u2192`face_neutral`, `face-sad`\u2192`face_sad`, `face-smiling`\u2192`face_smiling`, `filter`\u2192`sliders_horizontal`, `fingerprint`\u2192`fingerprint`, `folder`\u2192`folder`, `folder-open`\u2192`folder_open`, `generic-card`\u2192`generic_card`, `giftcard`\u2192`gift`, `hearing`\u2192`ear`, `hearing-disabled`\u2192`ear_disabled`, `heart`\u2192`heart`, `help`\u2192`question_mark_circle`, `id-card`\u2192`id_card`, `image`\u2192`image`, `info`\u2192`information_circle`, `key`\u2192`key`, `legal`\u2192`paragraph_mark`, `lightbulb`\u2192`light_bulb`, `lock-close`\u2192`lock_closed`, `lock-open`\u2192`lock_open`, `log-out`\u2192`log_out`, `logbook`\u2192`notebook`, `minus`\u2192`minus`, `piggybank`\u2192`piggy_bank`, `pin`\u2192`pin`, `print`\u2192`printer`, `pulse-wave`\u2192`pulse_wave`, `push-button`\u2192`finger_pushing_button`, `remove`\u2192`minus`, `resize`\u2192`resize`, `resize-handle-corner`\u2192`resize_handle_corner`, `save`\u2192`save`, `schedule`\u2192`clock`, `search`\u2192`magnifying_glass`, `send`\u2192`paper_plane`, `sepa`\u2192`sepa`, `settings`\u2192`gear_wheel`, `share`\u2192`share`, `shopping-bag`\u2192`shopping_bag`, `shopping-basket`\u2192`shopping_basket`, `shopping-basket-disabled`\u2192`shopping_basket_disabled`, `shopping-cart`\u2192`shopping_cart`, `shopping-cart-disabled`\u2192`shopping_cart_disabled`, `sort-down`\u2192`sort_down`, `sort-up`\u2192`sort_up`, `star`\u2192`star`, `swap-horizontal`\u2192`arrows_horizontal`, `swap-vertical`\u2192`arrows_vertical`, `thumb-up`\u2192`thumbs_up`, `thumb-up-down`\u2192`thumbs_down`, `translation`\u2192`translation`, `undo`\u2192`undo`, `upload`\u2192`upload`, `visibility-off`\u2192`eye_disabled`, `visibility`\u2192`eye`, `voucher`\u2192`voucher`, `website`\u2192`globe`, `zoom-in`\u2192`zoom_in`, `zoom-out`\u2192`zoom_out`, `clapperboard`\u2192`clapperboard`, `fast-backward`\u2192`fast_backward`, `fast-backward-10`\u2192`fast_backward_10`, `fast-backward-30`\u2192`fast_backward_30`, `fast-backward-empty`\u2192`fast_backward_empty`, `fast-forward`\u2192`fast_forward`, `fast-forward-10`\u2192`fast_forward_10`, `fast-forward-30`\u2192`fast_forward_30`, `fast-forward-empty`\u2192`fast_forward_empty`, `microphone`\u2192`microphone`, `pause`\u2192`pause`, `play`\u2192`play`, `skip-backward`\u2192`skip_backward`, `skip-forward`\u2192`skip_forward`, `stop`\u2192`stop`, `subtitles`\u2192`subtitles`, `volume-down`\u2192`volume_down`, `volume-mute`\u2192`volume_silent`, `volume-off`\u2192`volume_disabled`, `volume-up`\u2192`volume_up`, `logo`\u2192`db`, `call`\u2192`telephone`, `chat`\u2192`chat`, `conversation`\u2192`speech_bubbles`, `fax`\u2192`fax_machine`, `feedback`\u2192`speech_bubble_exclamation_mark`, `mail`\u2192`envelope`, `mobile-off`\u2192`mobile_phone_disabled`, `mobile-phone`\u2192`mobile_phone`, `question`\u2192`speech_bubble_question_mark`, `receive-item`\u2192`receive_item`, `share-item`\u2192`share_item`, `wifi`\u2192`wifi`, `wifi-off`\u2192`wifi_disabled`, `mask`\u2192`mask`, `playground`\u2192`toys`, `restricted-mobility-toilet`\u2192`restricted_mobility_toilet`, `shower`\u2192`shower`, `shower-men`\u2192`shower_men`, `shower-women`\u2192`shower_women`, `sink`\u2192`hand_washing`, `wc`\u2192`toilets`, `wc-men`\u2192`toilet_men`, `wc-sign`\u2192`wc_sign`, `wc-women`\u2192`toilet_women`, `air-condition`\u2192`air_condition`, `buggy`\u2192`stroller`, `clothing-hanger`\u2192`clothes_hanger`, `day`\u2192`sun`, `dog`\u2192`dog`, `entry-aid`\u2192`vehicle_entry_aid`, `environmental-mobility-check`\u2192`mobility_service_meeting_point`, `hydrogen`\u2192`water_drop`, `iceportal`\u2192`ice_portal`, `luggage-compartment`\u2192`luggage_compartment`, `luggage-rack`\u2192`luggage_rack`, `marketplace`\u2192`market`, `medical`\u2192`medical_cross`, `night`\u2192`moon`, `no-smoking`\u2192`cigarette_disabled`, `person-with-cane`\u2192`person_with_blind_cane`, `person-with-rollator`\u2192`person_with_rollator`, `platform`\u2192`platform`, `power-outlet`\u2192`power_socket`, `regioguide`\u2192`regio_guide`, `reservation`\u2192`reservation`, `standing-room`\u2192`standing_room`, `steppless-entry`\u2192`stepless_entry`, `support-dog`\u2192`support_dog`, `breakfast`\u2192`breakfast`, `coffee-cup`\u2192`cup`, `drink`\u2192`beverage`, `restaurant`\u2192`knife_and_fork`, `database`\u2192`database`, `1st-class`\u2192`first_class`, `2nd-class`\u2192`second_class`, `alternative-connection`\u2192`alternative_connection`, `booking`\u2192`booking`, `capacity-indicator`\u2192`capacity_indicator_moderate`, `capacity-indicator-fully-booked`\u2192`capacity_indicator_fully_booked`, `capacity-indicator-high`\u2192`capacity_indicator_high`, `capacity-indicator-low`\u2192`capacity_indicator_low`, `destination`\u2192`map_pin`, `intermediary-stop`\u2192`circle_small`, `mixed-class`\u2192`mixed_class`, `monochrome-capacity-indicator-high`\u2192`capacity_indicator_high`, `monochrome-capacity-indicator-low`\u2192`capacity_indicator_low`, `monochrome-capacity-indicator-moderate`\u2192`capacity_indicator_moderate`, `round-trip`\u2192`round_trip`, `single-trip`\u2192`single_trip`, `start`\u2192`start`, `compass`\u2192`compass`, `gps`\u2192`location_arrow`, `gps-north`\u2192`location_arrow_north`, `home`\u2192`house`, `map`\u2192`map`, `navigation-straight`\u2192`navigation_straight`, `navigation-to-left`\u2192`navigation_to_left`, `navigation-to-right`\u2192`navigation_to_right`, `navigation-u-turn`\u2192`navigation_u_turn`, `parking`\u2192`parking`, `place`\u2192`location_pin`, `set-position`\u2192`location_crosshairs`, `station`\u2192`station`, `stop-sign`\u2192`road_sign`, `train-station`\u2192`train_station`, `arrow-back`\u2192`arrow_left`, `arrow-down`\u2192`arrow_down`, `arrow-forward`\u2192`arrow_right`, `arrow-up`\u2192`arrow_up`, `cancel`\u2192`cross`, `chevron-left`\u2192`chevron_left`, `chevron-right`\u2192`chevron_right`, `close`\u2192`cross`, `expand-less`\u2192`chevron_up`, `expand-more`\u2192`chevron_down`, `fullscreen`\u2192`fullscreen`, `fullscreen-exit`\u2192`fullscreen_exit`, `grid-view`\u2192`grid`, `link`\u2192`link_chain`, `link-external`\u2192`arrow_up_right`, `list`\u2192`list`, `menu`\u2192`menu`, `more-horizontal`\u2192`more_horizontal`, `more-vertical`\u2192`more_vertical`, `refresh`\u2192`circular_arrows`, `error`\u2192`exclamation_mark_circle`, `notify`\u2192`bell`, `notify-cutoff`\u2192`bell`, `warning`\u2192`exclamation_mark_triangle`, `aisle`\u2192`aisle`, `aisle-not-available`\u2192`aisle_not_available`, `bed`\u2192`bed`, `childrens-compartment`\u2192`childrens_compartment`, `couchette`\u2192`couchette`, `elderly`\u2192`person_with_wheelchair`, `handicapped`\u2192`person_with_wheelchair`, `parent-child-compartment`\u2192`family_compartment`, `priority`\u2192`traveler_with_reduced_mobility`, `quiet-zone`\u2192`quiet_zone`, `table`\u2192`seat_table`, `traveler-with-reduced-mobility`\u2192`traveler_with_reduced_mobility`, `window`\u2192`seat_window`, `bahnbonus`\u2192`bahnbonus`, `bahnbonus-card`\u2192`bahnbonus_card`, `bahncard`\u2192`bahncard`, `best-price`\u2192`crown`, `commuter-ticket`\u2192`ticket_commuter`, `komfort-check-in`\u2192`komfort_check_in`, `komfort-check-in-check`\u2192`komfort_check_in_check`, `komfort-check-in-circle`\u2192`komfort_check_in_circle`, `multiple-cards`\u2192`bahncards`, `multiple-passenger`\u2192`persons`, `my-travel`\u2192`my_journey`, `outward-journey`\u2192`outward_journey`, `qr-code`\u2192`qr_code`, `qr-code-scan`\u2192`qr_code_scan`, `return-journey`\u2192`return_journey`, `ticket`\u2192`ticket`, `ticket-discount`\u2192`ticket_discount`, `ticket-subscription`\u2192`ticket_subscription`, `ticket-multiple`\u2192`tickets`, `time-outward-journey`\u2192`time_outward_journey`, `time-return-journey`\u2192`time_return_journey`, `timetable`\u2192`timetable`, `travel-insurance`\u2192`shield_check`, `airplane`\u2192`airplane`, `bicycle`\u2192`bike`, `bicycle-trailer`\u2192`bike_trailer`, `call-a-bike`\u2192`call_a_bike`, `car`\u2192`car`, `car-sequence`\u2192`coach_sequence`, `carsharing`\u2192`car_sharing`, `electric-locomotive`\u2192`electric_locomotive`, `electric-scooter`\u2192`electric_scooter`, `ev-bus`\u2192`bus`, `ev-car`\u2192`electric_car`, `ev-train`\u2192`train`, `ferry`\u2192`ship`, `handcart`\u2192`handcart`, `ice`\u2192`train`, `ice-side-view`\u2192`ice_side_view`, `intercity-train`\u2192`ic_and_ec`, `local-bus`\u2192`bus`, `local-train`\u2192`local_train`, `long-distance-bus`\u2192`long_distance_bus`, `rail-and-fly`\u2192`rail_and_fly`, `railroad-car`\u2192`coach`, `s-bahn`\u2192`s_bahn`, `scooter`\u2192`scooter`, `sev`\u2192`replacement_service`, `speedboat`\u2192`boat`, `sprinter`\u2192`sprinter`, `subway`\u2192`subway`, `taxi`\u2192`taxi`, `train-and-car`\u2192`train_and_car`, `tram`\u2192`tram`, `walking`\u2192`pedestrian`, `walking-fast`\u2192`walking_fast`\n" } };
|
|
37973
|
+
`, "packages/components/src/components/divider/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBDivider } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBDivider],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-divider></db-divider>\n```\n", "packages/components/src/components/divider/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-divider"></div>\n</body>\n```\n', "packages/components/src/components/divider/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/divider/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBDivider } from "@db-ux/react-core-components";\n\nconst App = () => <DBDivider />;\n\nexport default App;\n```\n', "packages/components/src/components/divider/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBDivider } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBDivider></DBDivider>\n</template>\n```\n', "packages/components/src/components/drawer/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBDrawer } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBDrawer],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-button (click)="toggleDrawer(true)"> Open me </db-button>\n<db-drawer [open]="openDrawer" (onClose)="toggleDrawer(false)">\n <header drawer-header>Optional drawer header</header>\n My Drawer content\n</db-drawer>\n```\n\n```ts app.component.ts\n// app.component.ts\nexport class AppComponent {\n openDrawer: boolean = false;\n toggleDrawer = (open: boolean) => {\n this.openDrawer = open;\n };\n}\n```\n', "packages/components/src/components/drawer/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Use component\n\nUse [Invoker Commands](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) (`command` and `commandfor` HTML attributes) to declaratively connect buttons with the `<dialog>` element. Supported built-in commands for `<dialog>` are `show-modal` and `close`.\n\nIf you do need to provide support for [browser versions that haven\'t implemented Invoker Commands](https://caniuse.com/wf-invoker-commands), add a feature detection fallback in JavaScript (see example below) or the [polyfill `invokers-polyfill`](https://github.com/keithamus/invokers-polyfill).\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <button class="db-button" command="show-modal" commandfor="my-drawer">\n Open Drawer\n </button>\n <dialog id="my-drawer" class="db-drawer" data-backdrop="true">\n <article class="db-drawer-container">\n <header class="db-drawer-header">\n <button\n class="db-button button-close-drawer is-icon-text-replace"\n data-icon="cross"\n data-variant="ghost"\n command="close"\n commandfor="my-drawer"\n >\n Close Button\n </button>\n </header>\n <div class="db-drawer-content">My Drawer content</div>\n </article>\n </dialog>\n\n <script>\n /*\n * Feature detection for Invoker Commands:\n * If the browser does not support the `command` and `commandfor`\n * HTML attributes, we fall back to JavaScript event handlers.\n */\n if (\n !("command" in HTMLButtonElement.prototype) ||\n !("commandFor" in HTMLButtonElement.prototype)\n ) {\n const openButton = document.querySelector(\n \'[commandfor="my-drawer"][command="show-modal"]\'\n );\n const closeButton = document.querySelector(\n \'[commandfor="my-drawer"][command="close"]\'\n );\n const drawer = document.getElementById("my-drawer");\n\n openButton?.addEventListener("click", () => {\n drawer?.showModal?.();\n });\n closeButton?.addEventListener("click", () => {\n drawer?.close?.();\n });\n }\n </script>\n</body>\n```\n', "packages/components/src/components/drawer/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/drawer/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBButton, DBDrawer } from "@db-ux/react-core-components";\n\nconst App = () => {\n const [open, setOpen] = useState<boolean>(false);\n return (\n <div>\n <DBButton\n onClick={() => {\n setOpen(true);\n }}\n >\n Open Me\n </DBButton>\n <DBDrawer\n open={open}\n onClose={() => {\n setOpen(false);\n }}\n drawerHeader={<header>Optional drawer header</header>}\n >\n My Drawer content\n </DBDrawer>\n </div>\n );\n};\n\nexport default App;\n```\n', "packages/components/src/components/drawer/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### General\n\nIf you use `width !== full` you are able to overwrite the `max-width` with `--db-drawer-max-width:` CSS variable.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script setup lang="ts">\nimport { _ref } from "vue";\nimport { DBDrawer } from "@db-ux/v-core-components";\n\nconst openDrawer = _ref<boolean>(false);\n\nconst toggleDrawer = (open: boolean) => {\n openDrawer.value = open;\n};\n</script>\n\n<template>\n <DBButton @click="toggleDrawer(true)">Open me</DBButton>\n <DBDrawer :open="openDrawer" @close="toggleDrawer(false)">\n <header v-slot:drawer-header>Optional drawer header</header>\n My Drawer content\n </DBDrawer>\n</template>\n```\n', "packages/components/src/components/header/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport {\n DBHeader,\n NavigationDirective,\n SecondaryActionDirective,\n MetaNavigationDirective\n} from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBHeader,\n NavigationDirective, // Optional: If you want to use a Navigation\n SecondaryActionDirective, // Optional: If you want to use ActionBar\n MetaNavigationDirective, // Optional: If you want to use MetaNavigation\n ],\n // ...\n})\n```\n\n### Use component\n\n#### Simple\n\n```html app.component.html\n<!-- app.component.html -->\n<db-header>\n <db-brand brand>Header</db-brand>\n</db-header>\n```\n\n#### Full\n\n```ts app.component.ts\n// File: app.component.ts\n\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-root",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n drawerOpen = false;\n\n toggleDrawer = (open: boolean) => {\n this.drawerOpen = open;\n };\n}\n```\n\n```html app.component.html\n<!-- app.component.html -->\n<db-header [drawerOpen]="drawerOpen" (onToggle)="toggleDrawer($event)">\n <db-brand brand>My Awesome App</db-brand>\n <db-navigation *dbNavigation>\n <!-- https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/components/navigation/docs/Angular.md -->\n </db-navigation>\n <ng-container *dbMetaNavigation>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </ng-container>\n <ng-container primary-action>\n <DBButton icon="magnifying_glass" variant="ghost" [noText]="true">\n Search\n </DBButton>\n </ng-container>\n <ng-container *dbSecondaryAction>\n <DBButton icon="x_placeholder" variant="ghost" [noText]="true">\n Profile\n </DBButton>\n <DBButton icon="alert" variant="ghost" [noText]="true">\n Notification\n </DBButton>\n <DBButton icon="help" variant="ghost" [noText]="true"> Help </DBButton>\n </ng-container>\n</db-header>\n```\n', "packages/components/src/components/header/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\nUse [Invoker Commands](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) (`command` and `commandfor` HTML attributes) to declaratively connect the burger menu button with the drawer `<dialog>` element, and the close button inside the drawer. Supported built-in commands for `<dialog>` are `show-modal` and `close`.\n\nIf you do need to provide support for [browser versions that haven\'t implemented Invoker Commands](https://caniuse.com/wf-invoker-commands), add a feature detection fallback in JavaScript (see example below) or the [polyfill `invokers-polyfill`](https://github.com/keithamus/invokers-polyfill).\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <header class="db-header">\n <dialog id="header-drawer" class="db-drawer">\n <article\n class="db-drawer-container db-header-drawer"\n data-spacing="small"\n data-rounded="true"\n >\n <header class="db-drawer-header">\n <div class="db-drawer-header-text"></div>\n <button\n class="db-button button-close-drawer is-icon-text-replace"\n data-icon="cross"\n data-variant="text"\n command="close"\n commandfor="header-drawer"\n >\n Close Button\n </button>\n </header>\n <div class="db-drawer-content">\n <div class="db-header-drawer-navigation">\n <div class="db-header-navigation">\n <nav class="db-main-navigation">\n <menu>\n <li\n class="db-navigation-item"\n data-icon="x_placeholder"\n >\n <a href="#">Regular (Default)</a>\n </li>\n <li\n class="db-navigation-item"\n aria-disabled="true"\n >\n <a href="#"\n >Regular (Default) disabled</a\n >\n </li>\n </menu>\n </nav>\n </div>\n <div class="db-header-meta-navigation">\n <a\n class="db-link"\n href="#"\n tabindex="0"\n data-content="internal"\n >Imprint</a\n ><a\n class="db-link"\n href="#"\n tabindex="0"\n data-content="internal"\n >Help</a\n >\n </div>\n </div>\n <div class="db-header-secondary-action">\n <button\n class="db-button is-icon-text-replace"\n data-icon="x_placeholder"\n data-variant="text"\n >\n Profile</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="alert"\n data-variant="text"\n >\n Notification</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="help"\n data-variant="text"\n >\n Help\n </button>\n </div>\n </div>\n </article>\n </dialog>\n <div class="db-header-meta-navigation">\n <a class="db-link" href="#" tabindex="0" data-content="internal"\n >Imprint</a\n ><a class="db-link" href="#" tabindex="0" data-content="internal"\n >Help</a\n >\n </div>\n <div class="db-header-navigation-bar">\n <div class="db-header-brand-container">\n <div class="db-brand">\n <a href="/"\n ><img\n class="db-logo"\n src="https://design-system.deutschebahn.com/images/db_logo.svg"\n alt=""\n height="24"\n width="34" /></a\n >DBHeader\n </div>\n </div>\n <div class="db-header-navigation-container">\n <div class="db-header-navigation">\n <nav class="db-navigation">\n <menu>\n <li\n class="db-navigation-item"\n data-icon="x_placeholder"\n >\n <a href="#">Regular (Default)</a>\n </li>\n <li class="db-navigation-item" aria-disabled="true">\n <a href="#">Regular (Default) disabled</a>\n </li>\n </menu>\n </nav>\n </div>\n <div class="db-header-primary-action">\n <button\n class="db-button is-icon-text-replace"\n data-icon="magnifying_glass"\n data-variant="text"\n >\n Search\n </button>\n </div>\n </div>\n <div class="db-header-action-container">\n <div class="db-header-burger-menu-container">\n <button\n class="db-button is-icon-text-replace"\n data-icon="menu"\n data-variant="text"\n command="show-modal"\n commandfor="header-drawer"\n >\n BurgerMenu\n </button>\n </div>\n <div class="db-header-secondary-action">\n <button\n class="db-button is-icon-text-replace"\n data-icon="x_placeholder"\n data-variant="text"\n >\n Profile</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="alert"\n data-variant="text"\n >\n Notification</button\n ><button\n class="db-button is-icon-text-replace"\n data-icon="help"\n data-variant="text"\n >\n Help\n </button>\n </div>\n </div>\n </div>\n </header>\n\n <script>\n /*\n * Feature detection for Invoker Commands:\n * If the browser does not support the `command` and `commandfor`\n * HTML attributes, we fall back to JavaScript event handlers.\n */\n if (\n !("command" in HTMLButtonElement.prototype) ||\n !("commandFor" in HTMLButtonElement.prototype)\n ) {\n const burgerMenuButton = document.querySelector(\n \'[commandfor="header-drawer"][command="show-modal"]\'\n );\n const closeButton = document.querySelector(\n \'[commandfor="header-drawer"][command="close"]\'\n );\n const drawer = document.getElementById("header-drawer");\n\n burgerMenuButton?.addEventListener("click", () => {\n drawer?.showModal?.();\n });\n closeButton?.addEventListener("click", () => {\n drawer?.close?.();\n });\n }\n </script>\n</body>\n```\n', "packages/components/src/components/header/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ----------- | ----------- |\n| `rea-header` | \u{1F501} | `db-header` | |\n\n### mobile\n\n| Before | Status | After | Description |\n| -------- | :----: | ------------- | ---------------------------------- |\n| `mobile` | \u{1F501} | `forceMobile` | forces the burger menu for desktop |\n", "packages/components/src/components/header/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n#### Simple\n\n```tsx App.tsx\n// App.tsx\nimport { DBHeader, DBBrand } from "@db-ux/react-core-components";\n\nconst App = () => <DBHeader brand={<DBBrand>Header</DBBrand>} />;\n\nexport default App;\n```\n\n#### Full\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBHeader, DBBrand, DBLink } from "@db-ux/react-core-components";\n\nconst [drawerOpen, setDrawerOpen] = useState<boolean>(false);\n\nconst App = () => (\n <DBHeader\n drawerOpen={drawerOpen}\n onToggle={setDrawerOpen}\n brand={<DBBrand>My Awesome App</DBBrand>}\n metaNavigation={\n <>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </>\n }\n primaryAction={\n <DBButton icon="magnifying_glass" variant="ghost" noText>\n Search\n </DBButton>\n }\n secondaryAction={\n <>\n <DBButton icon="x_placeholder" variant="ghost" noText>\n Profile\n </DBButton>\n <DBButton icon="alert" variant="ghost" noText>\n Notification\n </DBButton>\n <DBButton icon="help" variant="ghost" noText>\n Help\n </DBButton>\n </>\n }\n >\n <DBNavigation>\n //\n https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/components/navigation/docs/React.md\n </DBNavigation>\n </DBHeader>\n);\n\nexport default App;\n```\n', "packages/components/src/components/header/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n#### Simple\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBHeader, DBBrand } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBHeader>\n <DBBrand slot="brand">Header</DBBrand>\n </DBHeader>\n</template>\n```\n\n#### Full\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { _ref } from "vue";\nimport { DBHeader, DBBrand, DBLink, DBButton } from "@db-ux/v-core-components";\n\nconst drawerOpen = _ref(false);\n\nconst toggleDrawer = (open: boolean) => {\n drawerOpen.value = open;\n};\n</script>\n\n<template>\n <DBHeader :drawerOpen="drawerOpen" :onToggle="toggleDrawer">\n <template v-slot:brand>\n <DBBrand> My Awesome App </DBBrand>\n </template>\n <template v-slot:primary-action>\n <DBButton icon="magnifying_glass" variant="ghost" :no-text="true">\n Search\n </DBButton>\n </template>\n <template v-slot:secondary-action>\n <DBButton icon="x_placeholder" variant="ghost" :no-text="true">\n Profile\n </DBButton>\n <DBButton icon="alert" variant="ghost" :no-text="true">\n Notification\n </DBButton>\n <DBButton icon="help" variant="ghost" :no-text="true">\n Help\n </DBButton>\n </template>\n <template v-slot:meta-navigation>\n <DBLink href="#">Imprint</DBLink>\n <DBLink href="#">Help</DBLink>\n </template>\n\n <DBNavigation>\n //\n https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/components/navigation/docs/Vue.md\n </DBNavigation>\n </DBHeader>\n</template>\n```\n', "packages/components/src/components/icon/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBIcon } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBIcon],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-icon icon=\"x_placeholder\">Icon</db-icon>\n```\n", "packages/components/src/components/icon/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\nYou could use the `data-icon` or `data-icon-trailing` attributes on any HTML tag:\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <span data-icon="x_placeholder"> Icon </span>\n</body>\n```\n', "packages/components/src/components/icon/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------ | :----: | --------- | ----------- |\n| | \u{1F501} | `db-icon` | |\n\n### variant\n\n| Before | Status | After | Description |\n| --------- | :----: | ----- | ----------------------------------------------------------------------------------------------------------------------- |\n| `variant` | \u{1F501} | \u274C | icon variants are controlled by `font-family:var(--db-icon-font-family)` and `font-weight: var(--db-icon-font-weight);` |\n", "packages/components/src/components/icon/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBIcon } from "@db-ux/react-core-components";\n\nconst App = () => <DBIcon icon="x_placeholder">Icon</DBIcon>;\n\nexport default App;\n```\n', "packages/components/src/components/icon/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBIcon } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBIcon icon="x_placeholder">Icon</DBIcon>\n</template>\n```\n', "packages/components/src/components/infotext/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBInfotext } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBInfotext],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-infotext>Infotext</db-infotext>\n```\n", "packages/components/src/components/infotext/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <span class="db-infotext"> Infotext </span>\n</body>\n```\n', "packages/components/src/components/infotext/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/infotext/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBInfotext } from "@db-ux/react-core-components";\n\nconst App = () => <DBInfotext>Infotext</DBInfotext>;\n\nexport default App;\n```\n', "packages/components/src/components/infotext/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBInfotext } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBInfotext>Infotext</DBInfotext>\n</template>\n```\n', "packages/components/src/components/input/docs/Angular.md": '## Angular\n\nLoad SCSS globally within `styles.scss` in your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/rollup";\n```\n\nLoad component within `app.component.ts`:\n\n```ts app.component.ts\n//app.component.ts\nimport { DBInput } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBInput\n ],\n // ...\n})\n```\n\nUse component in template:\n\n```html\n<DBInput\n label="Label"\n placeholder="placeholder"\n description="Description"\n (change)="onInputChange()"\n></DBInput>\n```\n\n## How to use with Reactive Forms\n\nThird party controls require a ControlValueAccessor to function with angular forms.\nOur input component implements this interface so you can use it like any other native element with reactive Forms:\n\n> Currently we do not support onTouch/touched and native validation via FormControl. If your interested in contributing, you\'re very welcome ;)\n\n```ts app.component.ts\n//app.component.ts\nimport { ReactiveFormsModule } from \'@angular/forms\';\n\n@Component({\n // ...\n imports: [\n // ...,\n ReactiveFormsModule\n ],\n // ...\n})\n```\n\n```html\n<!-- form.component.html-->\n<form [formGroup]="form" (submit)="onFormSubmit()">\n <db-input label="Input" placeholder="Placeholder" formControlName="input">\n </db-input>\n</form>\n\n<h2>Output</h2>\n<dl>\n <dt>input\'s value</dt>\n <dd>\n {{ form.get("input")?.value ? form.get("input")?.value : "No Input set"\n }}\n </dd>\n</dl>\n```\n\n```typescript\n// form.component.ts\nexport class FormComponent {\n form = new FormGroup({\n input: new FormControl("Filled with formControl")\n });\n\n onFormSubmit(): void {\n alert(JSON.stringify(this.form.value));\n }\n}\n```\n\n## How to use with Template driven Forms\n\nThird party controls require a ControlValueAccessor to function with angular forms.\nOur input component implements this interface so you can use it like any other native element with ngModel:\n\n```ts app.component.ts\n//app.component.ts\nimport { FormsModule } from \'@angular/forms\';\n\n@Component({\n // ...\n imports: [\n // ...,\n FormsModule\n ],\n // ...\n})\n```\n\n```html\n<!-- form.component.html-->\n<form>\n <DBInput\n ngDefaultControl\n [(ngModel)]="input"\n label="Text Input"\n placeholder="Placeholder"\n description="Description"\n ></DBInput>\n <DBButton type="button" variant="brand" (click)="showValues()"\n >Get input value</DBButton\n >\n</form>\n\n<h2>Output</h2>\n<dl>\n <dt>input\'s value</dt>\n <dd>{{ input ? input : "No Input set" }}</dd>\n</dl>\n```\n\n```typescript\n// form.component.ts\nexport class FormComponent {\n input = "";\n showValues(): void {\n alert(JSON.stringify({ input: this.input }));\n }\n}\n```\n', "packages/components/src/components/input/docs/HTML.md": '## HTML\n\nLoad SCSS globally somewhere in your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/relative";\n```\n\nUse it:\n\n```html\n<div class="db-input">\n <label for="username">Label</label>\n <input type="text" name="username" id="username" />\n</div>\n```\n', "packages/components/src/components/input/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ----------- | :----: | ---------- | ----------- |\n| `elm-input` | \u{1F501} | `db-input` | |\n\n### variants\n\n| Before | Status | After | Description |\n| ----------------- | :----: | --------------- | ---------------------------------------------------------------------------------------------------- |\n| `semitransparent` | \u274C | \u274C | old variants are removed a semi-transparent look is the default, new variants are changing the color |\n| `white` | \u274C | \u274C | |\n| `solid` | \u274C | \u274C | |\n| `outline` | \u274C | \u274C | |\n| | \u{1F195} | `adaptive` | |\n| | \u{1F195} | `neutral` | |\n| | \u{1F195} | `critical` | |\n| | \u{1F195} | `informational` | |\n| | \u{1F195} | `warning` | |\n| | \u{1F195} | `successful` | |\n", "packages/components/src/components/input/docs/React.md": '## React\n\nWarning: Date input is not working with iOS Voiceover currently, compare to [React issue](https://github.com/facebook/react/issues/33541) and [WebKit bug](https://bugs.webkit.org/show_bug.cgi?id=294649).\n\nLoad SCSS globally in a `index.scss` file inside `main.tsx`/`main.jsx` within your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/rollup";\n```\n\nImport component:\n\n```typescript\nimport { DBInput } from "@db-ux/react-core-components";\n\n<DBInput\n label={label}\n placeholder={description}\n description={description}\n onChange={handleChange}\n></DBInput>;\n```\n', "packages/components/src/components/input/docs/Vue.md": '## Vue\n\nLoad SCSS globally in a `index.scss` file and import it in your `main.ts`/`main.js` file in your app:\n\n```scss\n@forward "@db-ux/core-components/build/styles/rollup";\n```\n\nUse component:\n\n```vue\n<script>\nimport { DBInput } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBInput\n label="Label"\n placeholder="Placeholder"\n @change="onChange($event)"\n ></DBInput>\n</template>\n```\n\nTo get DBInput work with `v-model` you have to use v-model argument syntax:\n\n```typescript\n<DBInput\n label="Text Label"\n placeholder="Start typing"\n v-model:value="value"\n></DBInput>\n```\n\nor using on-change listener:\n\n```typescript\n<DBInput label="Text Label" placeholder="Start" :value="modelAndChange" @change="($event) => { modelAndChange = $event.target.value;\n}"/> {{ modelAndChange }}\n```\n', "packages/components/src/components/link/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBLink } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBLink],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-link href="#" variant="brand">Link</db-link>\n```\n', "packages/components/src/components/link/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <a class="db-link" href="#">Link</a>\n</body>\n```\n', "packages/components/src/components/link/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ---------- | :----: | --------- | ----------- |\n| `elm-link` | \u{1F501} | `db-link` | |\n\n### icons\n\n| Before | Status | After | Description |\n| ------------- | :----: | ----- | ----------------------------------------------------------------------- |\n| `icon` | \u274C | \u274C | not valid anymore use `content` to show internal or external arrow icon |\n| `icononly` | \u274C | \u274C | |\n| `iconVariant` | \u274C | \u274C | |\n", "packages/components/src/components/link/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBLink } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBLink href="#" variant="brand">\n Link\n </DBLink>\n);\n\nexport default App;\n```\n', "packages/components/src/components/link/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBLink } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBLink href="#" variant="brand">Link</DBLink>\n</template>\n```\n', "packages/components/src/components/navigation/docs/Accessibility.md": '## Accessibility\n\n### Active item / current page\n\nTo implicitly set a `NavigationItem` to **active**, the attribute `aria-current="page"` is applied to the contained anchor.\nSome frameworks (vue, angular) offer internal, automatic solutions for this. These should preferably be used.\n\nThis leads to:\n\n- the `NavigationItem` and all parent `NavigationItems` are displayed as **active** via `css` (bold, if necessary with DB pulse)\n- accessibility is granted correctly. see: [MDN aria-current](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\nFor other purposes, `NavigationItems` can also be set to active with their prop `active`. However, this does not guarantee correct a11y.\n', "packages/components/src/components/navigation/docs/Angular.md": '## Angular\n\nFor general installation and configuration look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBNavigation } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBNavigation, DBNavigationItem, NavigationContentDirective],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-navigation>\n <db-navigation-item>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n Sub-Navi-Item 1\n </ng-container>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a href="#" aria-current="page"\n >Sub-Sub-Navi-Item 1</a\n >\n </ng-container>\n </db-navigation-item>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n </db-navigation-item>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a href="#">Sub-Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n <ng-container *dbNavigationContent> Navi-Item 1 </ng-container>\n </db-navigation-item>\n <db-navigation-item icon="x_placeholder">\n <ng-container *dbNavigationContent>\n <a href="#">Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n <db-navigation-item [disabled]="true">\n <ng-container *dbNavigationContent>\n <a href="#">Navi-Item 3</a>\n </ng-container>\n </db-navigation-item>\n</db-navigation>\n```\n\n### Angular Router and active state handling\n\nWe recommend using the automatic [integration with the Angular Router](https://angular.dev/best-practices/a11y#active-links-identification). This is way more elegant than setting the aria attribute to the anchor yourself.\n\nThe component first needs to import the `RouterLink` and `RouterLinkActive` directives.\n\nFor other purposes, `NavigationItems` themselves can also be set to active with their prop `[active]="true"`. However, this does not guarantee correct a11y.\n\n```ts app.component.ts\n// app.component.ts\nimport { RouterLink, RouterLinkActive } from \'@angular/router\';\nimport { DBMainNavigation } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [\n // ...\n RouterLink,\n RouterLinkActive,\n DBMainNavigation\n ],\n // ...\n})\n```\n\nNow you can use the Angular Routers `routerLink` directive to define your targets.\nThe active style is automatically set once an item receives the `aria-current="page"` attribute.\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a\n routerLink="/"\n ariaCurrentWhenActive="page"\n [routerLinkActiveOptions]="{ exact: true }"\n >\n Home\n </a>\n </ng-container>\n </db-navigation-item>\n <db-navigation-item>\n <ng-container *dbNavigationContent> Demo Pages </ng-container>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="/demo/1" ariaCurrentWhenActive="page">\n Demo Page 1\n </a>\n </ng-container>\n <ng-container *dbNavigationContent>\n <a routerLink="/demo/2" ariaCurrentWhenActive="page">\n Demo Page 2\n </a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n </db-navigation-item>\n</db-navigation>\n```\n', "packages/components/src/components/navigation/docs/HTML.md": '## HTML\n\nFor general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <nav class="db-navigation">\n <menu>\n <li class="db-navigation-item">\n <button\n class="db-navigation-item-expand-button"\n aria-haspopup="true"\n >\n Navi-Item 1\n </button>\n <menu class="db-sub-navigation">\n <li class="db-navigation-item">\n <button\n class="db-navigation-item-expand-button"\n aria-haspopup="true"\n >\n Sub-Navi-Item 1\n </button>\n <menu class="db-sub-navigation">\n <li class="db-navigation-item">\n <a href="#" aria-current="page"\n >Sub-Sub-Navi-Item 1</a\n >\n </li>\n\n <li class="db-navigation-item">\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </li>\n </menu>\n </li>\n\n <li class="db-navigation-item">\n <a href="#">Sub-Navi-Item 2</a>\n </li>\n </menu>\n </li>\n\n <li class="db-navigation-item" data-icon="x_placeholder">\n <a href="#">Navi-Item 2</a>\n </li>\n\n <li class="db-navigation-item" aria-disabled="true">\n <a href="#">Navi-Item 3</a>\n </li>\n </menu>\n </nav>\n</body>\n```\n', "packages/components/src/components/navigation/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| -------------------- | :----: | --------------- | ----------- |\n| `cmp-mainnavigation` | \u{1F501} | `db-navigation` | |\n\n### children\n\n| Before | Status | After | Description |\n| ---------- | :----: | ----- | ----------------------------------------------------------------------------- |\n| `data` | \u274C | \u274C | pass data via `children` / `slot`, moved a lot of the features to `db-header` |\n| `siteName` | \u274C | \u274C | |\n", "packages/components/src/components/navigation/docs/React.md": '## React\n\nFor general installation and configuration look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBNavigation, DBNavigationItem } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBNavigation>\n <DBNavigationItem\n subNavigation={\n <>\n <DBNavigationItem\n subNavigation={\n <>\n <DBNavigationItem>\n <a href="#" aria-current="page">\n Sub-Sub-Navi-Item 1\n </a>\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </>\n }\n >\n Sub-Navi-Item 1\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </>\n }\n >\n Navi-Item 1\n </DBNavigationItem>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Navi-Item 2</a>\n </DBNavigationItem>\n <DBNavigationItem disabled>\n <a href="#">Navi-Item 3</a>\n </DBNavigationItem>\n </DBNavigation>\n);\n\nexport default App;\n```\n\n### Active handling\n\nUsually, a `NavigationItem` is implicitly set to active by setting the attribute `aria-current="page"` to the anchor it contains.\n\nFor other purposes, `NavigationItems` themselves can also be set to active with their prop `active`. However, this does not guarantee correct a11y.\n', "packages/components/src/components/navigation/docs/Vue.md": '## Vue\n\nFor general installation and configuration look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBNavigation, DBNavigationItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBNavigation>\n <DBNavigationItem>\n Navi-Item 1\n <template v-slot:sub-navigation>\n <DBNavigationItem>\n Sub-Navi-Item 1\n\n <template v-slot:sub-navigation>\n <DBNavigationItem>\n <a href="#" aria-current="page"\n >Sub-Sub-Navi-Item 1</a\n >\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </template>\n </DBNavigationItem>\n <DBNavigationItem>\n <a href="#">Sub-Navi-Item 2</a>\n </DBNavigationItem>\n </template>\n </DBNavigationItem>\n <DBNavigationItem icon="x_placeholder">\n <a href="#">Navi-Item 2</a>\n </DBNavigationItem>\n <DBNavigationItem :disabled="true">\n <a href="#">Navi-Item 3</a>\n </DBNavigationItem>\n </DBNavigation>\n</template>\n```\n\n### Vue Router and active state handling\n\nWe recommend using the automatic [integration with the Vue Router](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#ariaCurrentValue). This is way more elegant than setting the aria attribute to the anchor yourself.\n\nYou can use Vue Routers `RouterLink` component to define your targets.\nThe active style is automatically set once an item receives the `aria-current="page"` attribute.\n\nFor other purposes, `NavigationItems` themselves can also be set to active with their prop `:active="true"`. However, this does not guarantee correct a11y.\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBMainNavigation, DBNavigationItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBMainNavigation>\n <DBNavigationItem>\n <RouterLink to="/" ariaCurrentValue="page">Home</RouterLink>\n </DBNavigationItem>\n <DBNavigationItem>\n <template> Demo Pages </template>\n <template #subnavigation>\n <DBNavigationItem>\n <RouterLink to="/demo/1" ariaCurrentValue="page">\n Demo Page 1\n </RouterLink>\n </DBNavigationItem>\n <DBNavigationItem>\n <RouterLink to="/demo/2" ariaCurrentValue="page">\n Demo Page 2\n </RouterLink>\n </DBNavigationItem>\n </template>\n </DBNavigationItem>\n </DBMainNavigation>\n</template>\n```\n', "packages/components/src/components/navigation-item/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport { DBNavigationItem, NavigationContentDirective } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n imports: [..., DBNavigationItem, NavigationContentDirective],\n // ...\n})\n\n```\n\n### Use component\n\nWe try to set `areaPopup` (has/hasn\'t sub-navigation) inside the component, but this doesn\'t work in all frameworks. If you encounter some problems you have the set `areaPopup` with `true/false` for sub-navigation or link\n\n```html app.component.html\n<!-- app.component.html -->\n\n<!-- Only link -->\n<db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="mypath">NavigationItem</a>\n </ng-container>\n</db-navigation-item>\n\n<!-- With Sub-Navigation -->\n\n<db-navigation-item>\n <ng-container *dbNavigationContent>Navi-Item 1</ng-container>\n <ng-container sub-navigation>\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="mypath">Sub-Navi-Item 1</a>\n </ng-container>\n </db-navigation-item>\n\n <db-navigation-item>\n <ng-container *dbNavigationContent>\n <a routerLink="mypath">Sub-Navi-Item 2</a>\n </ng-container>\n </db-navigation-item>\n </ng-container>\n</db-navigation-item>\n```\n', "packages/components/src/components/navigation-item/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\nIf you want to use sub-navigations for mobile you need to add a `eventListener:click` on the `db-navigation-item-expand-button`. This eventListener should set `aria-expanded` to `true` for the `button`. This will open a static overlay for mobile/tablet devices with your `db-sub-navigation`. For desktop devices it works by default with `:hover`.\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <!-- Only link -->\n <li class="db-navigation-item">\n <a href="mypath">NavigationItem</a>\n </li>\n\n <!-- With Sub-Navigation -->\n <li class="db-navigation-item">\n <button class="db-navigation-item-expand-button" aria-haspopup="true">\n Navi-Item 1\n </button>\n <menu class="db-sub-navigation">\n <a href="mypath">Sub-Navi-Item 1</a>\n <a href="mypath">Sub-Navi-Item 2</a>\n </menu>\n </li>\n</body>\n```\n', "packages/components/src/components/navigation-item/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/navigation-item/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\nWe try to set `areaPopup` (has/hasn\'t sub-navigation) inside the component, but this doesn\'t work in all frameworks. If you encounter some problems you have the set `areaPopup` with `true/false` for sub-navigation or link\n\n```tsx App.tsx\n// App.tsx\nimport { Link } from "react-router-dom";\nimport { DBNavigationItem } from "@db-ux/react-core-components";\n\nconst App = () => (\n <>\n {/* Only link */}\n <DBNavigationItem>\n <Link to="mypath">NavigationItem</Link>\n </DBNavigationItem>\n\n {/* With Sub-Navigation */}\n <DBNavigationItem\n subNavigation={\n <>\n <DBNavigationItem>\n <Link to="mypath">Sub-Navi-Item 1</Link>\n </DBNavigationItem>\n <DBNavigationItem>\n <Link to="mypath">Sub-Navi-Item 2</Link>\n </DBNavigationItem>\n </>\n }\n >\n Navi-Item 1\n </DBNavigationItem>\n </>\n);\n\nexport default App;\n```\n', "packages/components/src/components/navigation-item/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\nWe try to set `areaPopup` (has/hasn\'t sub-navigation) inside the component, but this doesn\'t work in all frameworks. If you encounter some problems you have the set `areaPopup` with `true/false` for sub-navigation or link\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBNavigationItem } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <!-- Only link -->\n <DBNavigationItem>\n <router-link to="mypath">NavigationItem</router-link>\n </DBNavigationItem>\n\n <!-- With Sub-Navigation -->\n <DBNavigationItem>\n <template #subnavigation>\n <DBNavigationItem>\n <router-link to="mypath">Sub-Navi-Item 1</router-link>\n </DBNavigationItem>\n <DBNavigationItem>\n <router-link to="mypath">Sub-Navi-Item 2</router-link>\n </DBNavigationItem>\n </template>\n Navi-Item 1\n </DBNavigationItem>\n</template>\n```\n', "packages/components/src/components/notification/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBNotification } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBNotification],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-notification headline=\"Headline\">Notification</db-notification>\n```\n", "packages/components/src/components/notification/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-notification" data-icon="information_circle">\n <h6>Headline</h6>\n <p>Notification</p>\n <button\n class="db-button is-icon-text-replace"\n data-size="small"\n data-variant="ghost"\n data-icon="cross"\n >\n Close Button\n </button>\n </div>\n</body>\n```\n', "packages/components/src/components/notification/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------------ | :----: | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `elm-notification` | \u{1F501} | `db-notification` | The old notification component has been split into 2 different components [Notification](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system-v3/components/feedback/notification) and [Notification](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system-v3/components/feedback/notification) for more information (when and how to use it). |\n\n### variant \u27A1 type\n\n| Before | Status | After | Description |\n| -------------- | :----: | -------------- | ------------------------------------------------------- |\n| `notification` | \u{1F501} | `notification` | Default notification with different look |\n| `status` | \u274C | \u274C | Status can be changed by `variants` |\n| | \u{1F195} | `inline` | New styling with shadow and rounded corners (like card) |\n\n### type \u27A1 variants\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------------- | -------------------------------------------------------- |\n| | \u{1F195} | `adaptive` | Default: change colors based on background |\n| `error` | \u{1F501} | `critical` | 'Red' colored notification to show error messages |\n| `informative` | \u{1F501} | `informational` | 'Blue' colored notification to show information messages |\n| `warning` | \u{1F501} | `warning` | 'Yellow' colored notification to show warning messages |\n| `success` | \u{1F501} | `successful` | 'Green' colored notification to show success messages |\n", "packages/components/src/components/notification/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBNotification } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBNotification headline="Headline">Notification</DBNotification>\n);\n\nexport default App;\n```\n', "packages/components/src/components/notification/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBNotification } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBNotification headline="Headline">Notification</DBNotification>\n</template>\n```\n', "packages/components/src/components/page/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n//app.component.ts\nimport { DBPage, DBHeader } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n imports: [\n // ...,\n DBPage, DBHeader\n ],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-page>\n <db-header header>...</db-header>\n <main class=\"db-main\">Main Page</main>\n</db-page>\n```\n", "packages/components/src/components/page/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-page">\n <header class="db-header">...</header>\n <main class="db-main">Main Page</main>\n </div>\n</body>\n```\n', "packages/components/src/components/page/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ---------- | :----: | --------- | ----------- |\n| `rea-page` | \u{1F501} | `db-page` | |\n", "packages/components/src/components/page/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBPage, DBHeader } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBPage header={<DBHeader>...</DBHeader>}>\n <main className="db-main">Main Page</main>\n </DBPage>\n);\n\nexport default App;\n```\n', "packages/components/src/components/page/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBPage, DBHeader } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBPage>\n <DBHeader slot="header">...</DBHeader>\n <main class="db-main">Main Page</main>\n </DBPage>\n</template>\n```\n', "packages/components/src/components/popover/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBPopover } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBPopover],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-popover>\n <db-button trigger> Hover on me to open Popover </db-button>\n Use any html code here like e.g. a <code>button</code>:\n <button type=\"button\">Test</button>\n</db-popover>\n```\n", "packages/components/src/components/popover/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-popover">\n <button aria-haspopup="true" class="db-button" type="button">\n Hover on me to open Popover\n </button>\n <article class="db-popover-content">\n Use any html code here like e.g. a <code>button</code>:\n <button type="button">Test</button>\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/popover/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/popover/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBPopover, DBButton } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBPopover trigger={<DBButton>Hover on me to open Popover</DBButton>}>\n Use any html code here like e.g. a <code>button</code>:\n <button type="button">Test</button>\n </DBPopover>\n);\n\nexport default App;\n```\n', "packages/components/src/components/popover/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBPopover, DBButton } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBPopover>\n <template v-slot:trigger>\n <DBButton> Hover on me to open Popover </DBButton>\n </template>\n Use any html code here like e.g. a <code>button</code>:\n <button type="button">Test</button>\n </DBPopover>\n</template>\n```\n', "packages/components/src/components/radio/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBRadio } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBRadio],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<ul>\n @for (radioName of radioNames; track radioName) {\n <li>\n <db-radio\n (change)="radio = radioName"\n [label]="\'Radio \' + radioName"\n [value]="radioName"\n name="RadioGroup"\n ></db-radio>\n </li>\n }\n</ul>\n```\n\n```ts app.component.ts\n// app.component.ts\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-app",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n radioNames = ["X", "Y", "Z"];\n radio = "";\n}\n```\n\n## How to use with Template Driven Forms\n\nThird party controls require a `ControlValueAccessor` to function with angular forms. Adding an `ngDefaultControl` attribute will allow them to use that directive.\n[Further information](https://stackoverflow.com/a/46465959)\n\n```ts app.component.ts\n//app.component.ts\nimport { FormsModule } from \'@angular/forms\';\n\n@Component({\n // ...\n imports: [\n // ...,\n FormsModule\n ],\n // ...\n})\n```\n\n```html form.component.html\n<!-- form.component.html -->\n<form>\n <DBRadio ngDefaultControl [(ngModel)]="radio">Label</DBRadio>\n <DBButton type="button" variant="brand" (click)="showValues()"\n >Get radio value</DBButton\n >\n</form>\n\n<h2>Output</h2>\n<dl>\n <dt>radio\'s value</dt>\n <dd>{{ radio ? radio : "No radio set" }}</dd>\n</dl>\n```\n\n```ts form.component.ts\n// form.component.ts\nexport class FormComponent {\n radio = "";\n showValues(): void {\n alert(JSON.stringify({ radio: this.radio }));\n }\n}\n```\n\n## How to use with Reactive Forms\n\ncoming soon \u2026 if your interested in contributing, you\'re very welcome ;)\n', "packages/components/src/components/radio/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <label class="db-radio" for="radio-element">\n <input type="radio" id="radio-element" name="States" value="Y" />\n Label\n </label>\n</body>\n```\n', "packages/components/src/components/radio/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ----------- | :----: | ---------- | ----------- |\n| `elm-radio` | \u{1F501} | `db-radio` | |\n\n### id\n\n| Before | Status | After | Description |\n| ---------- | :----: | ----- | ----------- |\n| `input_id` | \u{1F501} | `id` | |\n", "packages/components/src/components/radio/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBRadio } from "@db-ux/react-core-components";\n\nconst App = () => (\n <ul>\n {["X", "Y", "Z"].map((radioName) => (\n <li key={radioName}>\n <DBRadio\n name="radio-group"\n value={radioName}\n onChange={() => {\n setRadio(radioName);\n }}\n >\n Radio {radioName}\n </DBRadio>\n </li>\n ))}\n </ul>\n);\n\nexport default App;\n```\n', "packages/components/src/components/radio/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script setup lang="ts">\nimport { DBRadio } from "@db-ux/v-core-components";\nimport { _ref } from "vue";\nconst radio = _ref("");\n\nconst radioNames = ["X", "Y", "Z"];\n</script>\n\n<template>\n <ul>\n <li v-for="radioName in radioNames">\n <DBRadio\n @change="radio = radioName"\n name="radio-group"\n :value="radioName"\n >\n Radio {{ radioName }}\n </DBRadio>\n </li>\n </ul>\n</template>\n```\n', "packages/components/src/components/section/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBSection } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBSection],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-section variant=\"full\">Section</db-section>\n```\n", "packages/components/src/components/section/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <section class="db-section">\n <div data-variant="full">Section</div>\n </section>\n</body>\n```\n', "packages/components/src/components/section/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/section/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBSection } from "@db-ux/react-core-components";\n\nconst App = () => <DBSection variant="full">Section</DBSection>;\n\nexport default App;\n```\n', "packages/components/src/components/section/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBSection } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBSection variant="full">Section</DBSection>\n</template>\n```\n', "packages/components/src/components/select/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBSelect } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBSelect],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-select>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n</db-select>\n```\n', "packages/components/src/components/select/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-select">\n <label for="test">Label</label>\n <select id="test">\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </select>\n </div>\n</body>\n```\n', "packages/components/src/components/select/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ----------- | ----------- |\n| `elm-select` | \u{1F501} | `db-select` | |\n\n### select\n\n| Before | Status | After | Description |\n| ---------- | :----: | ----- | -------------------------------------------------------------------------------- |\n| `multiple` | \u274C | | We removed this attribute for now, there are no valid designs for this use case. |\n| `size` | \u274C | | We removed this attribute for now, there are no valid designs for this use case. |\n", "packages/components/src/components/select/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBSelect } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBSelect>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </DBSelect>\n);\n\nexport default App;\n```\n', "packages/components/src/components/select/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBSelect } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBSelect>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </DBSelect>\n</template>\n```\n', "packages/components/src/components/stack/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBStack } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBStack],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-stack>\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n</db-stack>\n```\n", "packages/components/src/components/stack/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-stack">\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n </div>\n</body>\n```\n', "packages/components/src/components/stack/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/stack/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBStack } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBStack>\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n </DBStack>\n);\n\nexport default App;\n```\n', "packages/components/src/components/stack/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBStack } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBStack>\n <span>Test 1</span>\n <span>Test 2</span>\n <span>Test 3</span>\n </DBStack>\n</template>\n```\n', "packages/components/src/components/switch/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBSwitch } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBSwitch],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-switch>Switch</db-switch>\n```\n", "packages/components/src/components/switch/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <label for="my-id" class="db-switch">\n <input type="checkbox" role="switch" id="my-id" />\n Switch\n </label>\n</body>\n```\n', "packages/components/src/components/switch/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ----------- | ----------- |\n| `elm-toggle` | \u{1F501} | `db-switch` | |\n\n### id\n\n| Before | Status | After | Description |\n| -------- | :----: | :---: | ----------- |\n| `htmlid` | \u{1F501} | `id` | |\n", "packages/components/src/components/switch/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBSwitch } from "@db-ux/react-core-components";\n\nconst App = () => <DBSwitch>Switch</DBSwitch>;\n\nexport default App;\n```\n', "packages/components/src/components/switch/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBSwitch } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBSwitch>Switch</DBSwitch>\n</template>\n```\n', "packages/components/src/components/tab-item/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tab-item/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div role="tablist" class="db-tab-list" aria-orientation="horizontal">\n <div class="db-tab-list-scroll-container">\n <label\n role="tab"\n for="my-tabs-tab-0"\n class="db-tab-item"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-0"\n ><input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1</label\n ><label\n role="tab"\n for="my-tabs-tab-1"\n class="db-tab-item"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-1"\n ><input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2</label\n ><label\n role="tab"\n for="my-tabs-tab-2"\n class="db-tab-item"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-2"\n ><input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3</label\n >\n </div>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tab-item/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------ | :----: | ------------- | ----------- |\n| `cmp-db-tab` | \u{1F501} | `db-tab-item` | |\n\n### name\n\n| Before | Status | After | Description |\n| ------ | :----: | :---: | --------------------------------------------------------------------------------------------------- |\n| `name` | \u274C | \u274C | It should be used with `db-tabs` which will add a the `name` from `db-tabs` to all tabs all at one. |\n", "packages/components/src/components/tab-item/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tab-item/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/tab-list/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tab-list/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div role="tablist" class="db-tab-list" aria-orientation="horizontal">\n <div class="db-tab-list-scroll-container">\n <label\n role="tab"\n for="my-tabs-tab-0"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-0"\n ><input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1</label\n ><label\n role="tab"\n for="my-tabs-tab-1"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-1"\n ><input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2</label\n ><label\n role="tab"\n for="my-tabs-tab-2"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-2"\n ><input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3</label\n >\n </div>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tab-list/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/tab-list/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tab-list/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/tab-panel/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tab-panel/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div role="tablist" class="db-tab-list" aria-orientation="horizontal">\n <div class="db-tab-list-scroll-container">\n <label\n role="tab"\n for="my-tabs-tab-0"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-0"\n ><input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1</label\n ><label\n role="tab"\n for="my-tabs-tab-1"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-1"\n ><input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2</label\n ><label\n role="tab"\n for="my-tabs-tab-2"\n class="db-tab"\n data-width="auto"\n data-alignment="start"\n aria-controls="my-tabs-tab-panel-2"\n ><input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3</label\n >\n </div>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tab-panel/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/tab-panel/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tab-panel/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/tabs/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\nYou can't use the component standalone!\n\n```ts app.module.ts\n//app.module.ts\nimport { DBTabItem, DBTabList, DBTabPanel, DBTabs } from '@db-ux/ngx-core-components';\n\n@NgModule({\n ...\n standalone: true,\n imports: [..., DBTabItem,DBTabList,DBTabPanel,DBTabs],\n ...\n})\n\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tabs>\n <db-tab-list>\n <db-tab-item>Tab 1</db-tab-item>\n <db-tab-item>Tab 2</db-tab-item>\n <db-tab-item>Tab 3</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Tab Panel 1</db-tab-panel>\n <db-tab-panel>Tab Panel 2</db-tab-panel>\n <db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>\n```\n", "packages/components/src/components/tabs/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tabs">\n <div\n role="tablist"\n class="db-tab-list"\n data-alignment="start"\n data-width="auto"\n >\n <ul>\n <li role="tab" class="db-tab-item">\n <label\n for="my-tabs-tab-0"\n aria-controls="my-tabs-tab-panel-0"\n >\n <input\n type="radio"\n id="my-tabs-tab-0"\n name="my-tabs"\n />Test 1\n </label>\n </li>\n <li role="tab" class="db-tab-item">\n <label\n for="my-tabs-tab-1"\n aria-controls="my-tabs-tab-panel-1"\n >\n <input\n type="radio"\n id="my-tabs-tab-1"\n name="my-tabs"\n />Test 2\n </label>\n </li>\n <li role="tab" class="db-tab-item">\n <label\n for="my-tabs-tab-2"\n aria-controls="my-tabs-tab-panel-2"\n >\n <input\n type="radio"\n id="my-tabs-tab-2"\n name="my-tabs"\n />Test 3\n </label>\n </li>\n </ul>\n </div>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-0"\n aria-labelledby="my-tabs-tab-0"\n >\n Tab Panel 1\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-1"\n aria-labelledby="my-tabs-tab-1"\n >\n Tab Panel 2\n </article>\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="my-tabs-tab-panel-2"\n aria-labelledby="my-tabs-tab-2"\n >\n Tab Panel 3\n </article>\n </div>\n</body>\n```\n', "packages/components/src/components/tabs/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------- | ----------- |\n| `cmp-tab-bar` | \u{1F501} | `db-tabs` | |\n", "packages/components/src/components/tabs/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport {\n DBTabItem,\n DBTabList,\n DBTabs,\n DBTabPanel\n} from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tabs/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport {\n DBTabPanel,\n DBTabs,\n DBTabList,\n DBTabItem\n} from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Tab 1</DBTabItem>\n <DBTabItem>Tab 2</DBTabItem>\n <DBTabItem>Tab 3</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n</template>\n```\n', "packages/components/src/components/tag/docs/Angular.md": "## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBTag } from '@db-ux/ngx-core-components';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBTag],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-tag><db-button>Tag as Button</db-button></db-tag>\n<db-tag>\n <db-link> Tag as Link </db-link>\n</db-tag>\n<db-tag><db-checkbox>Tag as Checkbox</db-checkbox></db-tag>\n<db-tag><db-radio>Tag as Radio</db-radio></db-tag>\n<db-tag>Static Tag</db-tag>\n<db-tag [overflow]=\"true\"><span>Static Tag with overflow</span></db-tag>\n```\n", "packages/components/src/components/tag/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-tag">\n <span class="tag-label">Regular (Default)</span>\n </div>\n</body>\n```\n', "packages/components/src/components/tag/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### tag vs. chip\n\nWe simplified the components by reducing the amount from tag + chip to only tag.\n\nYou can use different types of tags by adding another component into it:\n\n```html\n<db-tag><db-button>Tag as Button</db-button></db-tag>\n<db-tag><db-link>Tag as Link</db-link></db-tag>\n<db-tag><db-checkbox>Tag as Checkbox</db-checkbox></db-tag>\n<db-tag><db-radio>Tag as Radio</db-radio></db-tag>\n<db-tag>Static Tag</db-tag>\n```\n\n### class\n\n| Before | Status | After | Description |\n| --------- | :----: | -------- | ----------- |\n| `elm-tag` | \u{1F501} | `db-tag` | |\n\n### sizes\n\n| Before | Status | After | Description |\n| ------- | :----: | :---: | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `small` | \u274C | \u274C | We removed small tags because of density. But you can use `type` property with value `strong` to emphasize a tag for a differentiation. |\n\n### variants\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------------- | ------------------------------------------------ |\n| `poi-*` | \u274C | \u274C | We removed all point of interest colors for now. |\n| `track` | \u274C | \u274C | We removed track for now. |\n| `error` | \u{1F501} | `critical` | |\n| `informative` | \u{1F501} | `informational` | |\n| `success` | \u{1F501} | `successful` | |\n\n### icons\n\n| Before | Status | After | Description |\n| ----------- | :----: | ----- | -------------------------------------------------------------- |\n| `iconAfter` | \u274C | \u274C | not valid anymore, for tags only icons before text are allowed |\n", "packages/components/src/components/tag/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBTag } from "@db-ux/react-core-components";\n\nconst App = () => (\n <>\n <DBTag>\n <DBButton>Tag as Button</DBButton>\n </DBTag>\n <DBTag>\n <DBLink>Tag as Link</DBLink>\n </DBTag>\n <DBTag>\n <DBCheckbox>Tag as Checkbox</DBCheckbox>\n </DBTag>\n <DBTag>\n <DBRadio>Tag as Radio</DBRadio>\n </DBTag>\n <DBTag>Static Tag</DBTag>\n <DBTag overflow={true}>\n <span>Static Tag with overflow</span>\n </DBTag>\n </>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tag/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBTag } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBTag><DBButton>Tag as Button</DBButton></DBTag>\n <DBTag>\n <DBLink> Tag as Link </DBLink>\n </DBTag>\n <DBTag><DBCheckbox>Tag as Checkbox</DBCheckbox></DBTag>\n <DBTag><DBRadio>Tag as Radio</DBRadio></DBTag>\n <DBTag>Static Tag</DBTag>\n <DBTag :overflow="true">\n <span>Static Tag with overflow</span>\n </DBTag>\n</template>\n```\n', "packages/components/src/components/textarea/docs/Angular.md": '## Angular\n\nFor general installation and configuration look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBTextarea } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBTextarea],\n // ...\n})\n```\n\n### Use component\n\n```ts app.component.ts\nimport { Component } from "@angular/core";\n\n@Component({\n selector: "app-root",\n templateUrl: "./app.component.html"\n})\nexport class AppComponent {\n textarea = "default value";\n}\n```\n\n```html app.component.html\n<!-- app.component.html -->\n\n<db-textarea\n name="textarea"\n label="Textarea Controlled"\n placeholder="Placeholder"\n message="Message"\n icon="x_placeholder"\n [value]="textarea"\n (change)="textarea = $event.target.value"\n></db-textarea>\n```\n', "packages/components/src/components/textarea/docs/HTML.md": '## HTML\n\nFor general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <div class="db-textarea">\n <label for="textarea">Label</label>\n <textarea id="textarea" rows="2" cols="33" placeholder=" "></textarea>\n </div>\n</body>\n```\n', "packages/components/src/components/textarea/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out\n> this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\n### class\n\n| Before | Status | After | Description |\n| -------------- | :----: | ------------- | ----------- |\n| `elm-textarea` | \u{1F501} | `db-textarea` | |\n\n### variants\n\n| Before | Status | After | Description |\n| ----------------- | :----: | --------------- | ----------- |\n| `semitransparent` | \u274C | | |\n| `white` | \u274C | | |\n| `solid` | \u274C | | |\n| `outline` | \u274C | | |\n| | \u{1F195} | `adaptive` | |\n| | \u{1F195} | `critical` | |\n| | \u{1F195} | `informational` | |\n| | \u{1F195} | `warning` | |\n| | \u{1F195} | `successful` | |\n\n### other\n\n| Before | Status | After | Description |\n| ------------- | :----: | --------- | ----------- |\n| `description` | \u{1F501} | `message` | |\n", "packages/components/src/components/textarea/docs/React.md": '## React\n\nFor general installation and configuration look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { useState } from "react";\nimport { DBTextarea } from "@db-ux/react-core-components";\n\nconst App = () => {\n const [textarea, setTextarea] = useState("default textarea");\n return (\n <DBTextarea\n label="Textarea Controlled"\n message="Message"\n value={textarea}\n onChange={(event) => {\n setTextarea(event.target.value);\n }}\n />\n );\n};\n\nexport default App;\n```\n', "packages/components/src/components/textarea/docs/Vue.md": '## Vue\n\nFor general installation and configuration look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### General\n\nYou cannot use a default value for [textarea in vue](https://vuejs.org/guide/essentials/forms.html#multiline-text).\nUse `v-model:value` or `:value` instead with a `_ref("My default value")`.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script setup lang="ts">\nimport { _ref } from "vue";\nimport { DBTextarea } from "@db-ux/v-core-components";\n\nconst textarea = _ref("default value");\n</script>\n\n<template>\n <DBTextarea\n label="Textarea value"\n placeholder="Placeholder"\n message="Message"\n icon="x_placeholder"\n name="textarevalue-name"\n v-model:value="textarea"\n />\n</template>\n```\n', "packages/components/src/components/tooltip/docs/Angular.md": '## Angular\n\nFor general installation and configuration take a look at the [ngx-core-components](https://www.npmjs.com/package/@db-ux/ngx-core-components) package.\n\n### Load component\n\n```ts app.component.ts\n// app.component.ts\nimport { DBTooltip } from \'@db-ux/ngx-core-components\';\n\n@Component({\n // ...\n standalone: true,\n imports: [..., DBTooltip],\n // ...\n})\n```\n\n### Use component\n\n```html app.component.html\n<!-- app.component.html -->\n<db-button aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <db-tooltip id="tooltip-01">Tooltip</db-tooltip>\n</db-button>\n```\n', "packages/components/src/components/tooltip/docs/HTML.md": '## HTML\n\nFor general installation and configuration take a look at the [components](https://www.npmjs.com/package/@db-ux/core-components) package.\n\n### Use component\n\n```html index.html\n<!-- index.html -->\n...\n<body>\n <button class="db-button" aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <i class="db-tooltip" id="tooltip-01">Tooltip</i>\n </button>\n</body>\n```\n', "packages/components/src/components/tooltip/docs/Migration.md": "## General\n\n> **Note**\n> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ux/core-components).\n\n## DB UI Core \u27A1 DB UX Design System Core components\n\nNew Component \u{1F973}\n", "packages/components/src/components/tooltip/docs/React.md": '## React\n\nFor general installation and configuration take a look at the [react-core-components](https://www.npmjs.com/package/@db-ux/react-core-components) package.\n\n### Use component\n\n```tsx App.tsx\n// App.tsx\nimport { DBTooltip, DBButton } from "@db-ux/react-core-components";\n\nconst App = () => (\n <DBButton aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <DBTooltip id="tooltip-01">Tooltip</DBTooltip>\n </DBButton>\n);\n\nexport default App;\n```\n', "packages/components/src/components/tooltip/docs/Vue.md": '## Vue\n\nFor general installation and configuration take a look at the [v-core-components](https://www.npmjs.com/package/@db-ux/v-core-components) package.\n\n### Use component\n\n```vue App.vue\n<!-- App.vue -->\n<script>\nimport { DBTooltip, DBButton } from "@db-ux/v-core-components";\n</script>\n\n<template>\n <DBButton aria-describedby="tooltip-01">\n Hover on me to open Tooltip\n <DBTooltip id="tooltip-01">Tooltip</DBTooltip>\n </DBButton>\n</template>\n```\n', "packages/foundations/docs/BrowserSupport.md": '# Browser Support\n\nWe\'re [testing our components with playwright](../../foundations/test-table) on the latest browser versions of Google Chrome, Mozilla Firefox and Apple Safari. Since all of these browsers are supposed to be evergreen, we\'re using some newer browser features that have been added specifically as part of the [interop initiative](https://web.dev/blog/interop-2025), partly as progressive enhancements, but some may not even offer graceful degradation.\n\nThis may leave some older browser versions behind. If you need to take care of these older browsers, you may not want to migrate to DB UX Design System v3 right now, but stay with DB UI Core or Elements for a little longer. In particular, the following features we use may be related to an evaluation of your browser strategy:\n\n## Stable in evergreen browsers\n\nThese are the features that we use or plan to integrate, which are stable in the Stable channel, including the ESR versions of Evergreen browsers.\n\n| Web Feature | Google Chrome | Mozilla Firefox | Apple Safari |\n| ----------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------- | ----------------- |\n| [Multiple named disclosure boxes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details#multiple_named_disclosure_boxes) | 120 (05.12.2023) | 130 (03.09.2024) | 17.2 (11.12.2023) |\n| [`scrollbar-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-color) (planned) | 121 (13.01.2024) | 64 (11.12.2018) | 26.2 (12.12.2025) |\n| [Popover](https://caniuse.com/mdn-api_htmlelement_popover) (planned) | 114 (30.05.2023) | 125 (16.04.2024) | 17 (26.09.2023) |\n| [`requestClose()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/requestClose#browser_compatibility) (planned) | 134 (04.03.2025) | 139 (27.05.2025) | 18.4 (31.03.2025) |\n| [`:open` CSS pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:open#browser_compatibility) | 133 (04.02.2025) | 136 (04.03.2025) | 26.5 |\n\nPopover is loosely depending on Anchor Positioning.\n\n## Progressive enhancement\n\n| Web Feature | Google Chrome | Mozilla Firefox | Apple Safari |\n| --------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------------- | -------------------------------------------------------------------------------------------------------- |\n| [CSS `field-sizing: content` property](https://caniuse.com/mdn-css_properties_field-sizing_content) | 123 (19.03.2024) | tbd | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [`hidden="until-found"`-HTML-attribute](https://caniuse.com/mdn-html_global_attributes_hidden_until-found) (planned) | 102 (24.05.2022) | 139 (27.05.2025) | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [`dialog[closedby="closerequest"]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closerequest) (planned) | 134 (19.03.2024) | 141 (22.07.2025) | [Technology Preview 242](https://webkit.org/blog/category/safari-technology-preview/) |\n| [Customizable `select` elements](https://caniuse.com/selectlist) (planned) | 134 (19.03.2024) | tbd | [Technology Preview 238](https://webkit.org/blog/17848/release-notes-for-safari-technology-preview-238/) |\n| [`select[multiple][size="1"]` UI optimization on Desktop browsers](https://chromestatus.com/feature/5412736871825408) (planned) | 142 (28.10.2025) | tbd | tbd |\n\n## Without graceful degradation\n\nThe following functionality relies on JavaScript for support in browsers that do not support it yet. Other solutions would be PostCSS preprocessing (planned) and declaring CSS declarations twice, both in the new and old ways (e.g., semantic overflow).\n\n| Web Feature | Google Chrome | Mozilla Firefox | Apple Safari |\n| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |\n| [semantic overflow (`overflow-block` and `overflow-inline`)](https://caniuse.com/mdn-css_properties_overflow-block) | 135 (01.04.2025) | 69 (03.09.2019) | 26 |\n| [`@property` / typed CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) | 85 (25.08.2022) | 128 (09.07.2024) | 16.4 (27.03.2023) |\n| [`light-dark()` CSS function](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) | 123 (19.03.2024) | 120 (21.11.2023) | 17.5 (13.05.2024) |\n| [`style()` container queries for custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries#container_style_queries) (planned) | 111 (07.03.2023) | [151 (tbd)](https://www.firefox.com/en-US/firefox/151.0beta/releasenotes/) | 18 (16.09.2024) |\n| [Anchor Positioning](https://caniuse.com/css-anchor-positioning) (planned) | 125 (14.05.2024) | 147 (13.01.2026) | 26 (15.09.2025) |\n| [Invoker Commands](https://caniuse.com/mdn-html_elements_button_commandfor) (planned) | 135 (01.04.2025) | 144 (14.10.2025) | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [`attr()` CSS Values 5 extensions](https://developer.mozilla.org/en-US/docs/Web/CSS/attr) (planned) | 133 (04.02.2025) | Firefox 149 (behind a config preference) | [Technology Preview 242](https://webkit.org/blog/category/safari-technology-preview/) |\n| [CSS Custom Functions](https://www.bram.us/2025/02/09/css-custom-functions-teaser/) (planned) | 139 (30.07.2025) | tbd | tbd |\n| [CSS `sibling-count()` and `sibling-index()`](https://caniuse.com/wf-sibling-count) (planned) | 138 (24.06.2025) | tbd | [26.2 (12.12.2025)](https://webkit.org/blog/17640/webkit-features-for-safari-26-2/) |\n| [CSS `@scope`](https://caniuse.com/css-cascade-scope) (planned) | 118 (10.10.2023) | 146 (09.12.2025) | 17.4 (05.03.2024) |\n', "packages/foundations/docs/Colors.md": '# Colors\n\n- You use **Colors** to highlight an area with a specific color.\n- You can also use it to change the text color for components with the `*-transparent-semi` colors.\n- Most classes/placeholders will change `color` and `background-color` and will set properties, which will be passed down to adaptive components.\n\n## How to use\n\n1. First, you can use our **[color usage guide](./color-usage-guide)** to find out which method is best for coloring your layouts or components.\n2. The colors of layouts can be easily set using the predefined **[color schemes](./color-schemes)**.\n3. When developing your own components, `SCSS` variables or `CSS Custom Properties` should be used.\n\n**\u{1F6A7} The overview of our color variables is still in the making. Please come back soon.**\n\n## How to include colors\n\nFor **CSS** and **Tailwind** you need to use the import `@import "@db-ux/core-foundations/build/styles/colors/classes/all.css";` in your root `.css` file.\nOr if you only want a single variant e.g. **informational** you can import `@import "@db-ux/core-foundations/build/styles/colors/classes/informational.css";`.\n\nIn case that you\'re either using a bundler (recommended) or importing the CSS within your JavaScript files, please adapt this `@import` syntax accordingly.\n\nFor **SCSS** you need to use the import `@use "@db-ux/core-foundations/build/styles/colors/placeholder"` in your `.scss` file, where you need to reference the specific variable.\nThen you can use e.g. **informational** color by extending our SCSS placeholders like this: `@extend %db-informational-bg-1`.\n\n## Dark- & Light-Mode\n\nWe provide tokens for both dark- and light-mode. If you include the **relative** style you get a media query `@media (prefers-color-scheme: dark)` with the relevant tokens. You can [emulate](https://developer.chrome.com/docs/devtools/rendering/emulate-css/) the modes inside the devtools.\n\nIt\'s [recommended to set a `meta`-HTML-tag](https://web.dev/articles/color-scheme#the_color-scheme_meta_tag) to provide a signal to the browser on your accepted color schemes previous to loading the CSS:\n\n```html\n<meta name="color-scheme" content="dark light" />\n```\n\nWe recommend using the default media query based on the user preference, but if you want to force a mode for your page, you could set the `color-scheme` `meta`-HTML-tag to either [`only light`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#only_light), [`dark` or `light`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#light).\n\nIf you want to set it on a specific container as e.g. shown on the documentation page "Color schemes" you can do that by adding the HTML-attributes `data-mode="dark"` or `data-mode="light"`:\n\n### HTML\n\n```html\n<div data-mode="dark">...</div>\n```\n\nWe\'re providing an example in our [color schemes documentation](./color-schemes).\n\nWe need to set the **base** background to the element with `[data-mode]` so if you want to change the background to another color, make sure to use a wrapping tag like `<div>` with the `[data-mode]` to avoid issues.\n', "packages/foundations/docs/CustomIcons.md": "# Custom Icons\n\nIf you have custom icons and want to use them for [foundations](https://www.npmjs.com/package/@db-ux/core-foundations) and/or in [components](https://www.npmjs.com/package/@db-ux/core-components), you need to generate a **woff2** file.\n\nCheck out the `icon-font-tools` [documentation](https://github.com/db-ux-design-system/icon-font-tools/blob/main/docs/GenerateIconFonts.md) to generate a **woff2** file.\n\n## Foundation Developer\n\nIf you update a **svg** inside `assets/icons/functional/images` you need to recreate the **woff2** file.\n\nFor this you just need to run the following command from root:\n\n```shell\nnpm run update:icon-fonts\n```\n\nYour new icon should be inside `assets/icons/functional/fonts/**/info.json` and you should see it inside `assets/icons/functional/fonts/**/index.html` in the browser.\n", "packages/foundations/docs/Densities.md": '# Densities\n\n- You could use **Densities** to create visual "volume levels"\n- You could change the appearance of a container rather than a component\n- Best example is the navigation on our [main page](https://design-system.deutschebahn.com/core-web/review/main/). Above the navigation is a smaller meta-navigation and even the component inside is smaller as well as all the spacings. The meta-navigation is above the real navigation, but focus of the user is on the real navigation, because the meta-navigation has less "volume"\n\nThere are three different **Densities**, you can use them to change the volume of a specific container or even the entire page based on the use-case, so change the default **density** when:\n\n1. **functional**: e.g. use this for business apps with large tables\n2. **regular**: e.g. use this for normal consumer apps\n3. **expressive**: e.g. use this for marketing apps/ single pages\n\n## How to include\n\nFor **CSS**, **SCSS** and **Tailwind** you don\'t have to include a specific file, just follow the documentation for [foundations](../README.md).\n\n### How to use\n\nWe\'re providing [examples](./examples) to see the differences.\n\nWe set the `data-density` on a container like a `<div>`:\n\n```html\n<div data-density="functional">\n <!-- Everything inside here will be smaller -->\n <DBButton>Test</DBButton>\n <DBInput label="Test" />\n</div>\n```\n\nVariants:\n\n| Variant | CSS/SCSS/Tailwind |\n| :-----------------: | --------------------------- |\n| `functional` | `data-density="functional"` |\n| `regular` (default) | `data-density="regular"` |\n| `expressive` | `data-density="expressive"` |\n\nTo change the **density** of the entire page use:\n\n```html\n<body data-density="functional">\n ...\n</body>\n```\n', "packages/foundations/docs/FontsSizes.md": '# DB Font Sizes\n\nThe font sizes of foundations consist of [two different sets](./overview) (9 sizes each) for general texts (**Body Font Sizes**) and headlines (**Headline Font Sizes**).\nAll sizes of both sets are automatically adjusted by the selected [density](./../densities/readme).\n\n## Body Font Sizes\n\n- By default, the Body Font Size `md` is set to the body tag.\n- These 9 Body Font Sizes can also be explicitly set as classes on elements in order to change their font size.\n\n## Headline Font Sizes\n\n- 9 Headline Sizes are available and are usable by custom properties\n- 6 Headline Sizes are mapped to native headline tags (`h1` to `h6`) by default. Headlines can therefore be used directly.\n\n## Available variants / sizes\n\n`3xl` | `2xl` | `xl` | `lg` | `md` | `sm` | `xs` | `2xs` | `3xs`\n\n## When to use\n\n- Use our provided **Body Font Sizes** to explicitly change the size of text elements like `<p>`, `<span>` etc.\n- Use a **Body Font Size** for a container and all text elements in it (does not affect components font-sizes) .\n- **Headline Font Sizes** can be used to override the default mapping of the `h1` - `h6` tags.\n- _Advanced: use standardised *custom properties* to define `font-size` and `line-height` in your own components._\n\n### Notes\n\n> - Some sizes may stay the same because of screen width or density.\n> - Elements such as `<p>` and all headings (`h1` - `h6`) as well as **DB UX Design System Core components** have font sizes assigned by default so that they can be used without further customisation.\n\n### How to include\n\nFor **CSS** and **Tailwind** you need to use the import `@import "@db-ux/core-foundations/build/styles/fonts/classes/all.css";` in your root `.css` file.\n\nFor **SCSS** you can use the `.css` file, or you can use a placeholder by importing `@use "@db-ux/core-foundations/build/styles/fonts"` in your `.scss` file, where you need to reference the specific font size.\nThen you can use e.g. `sm` font-size by extending our SCSS placeholders like this: `@extend %db-overwrite-font-size-sm`.\n\n> **_NOTE:_** Make sure that you import the file after all other **foundation** css files, otherwise you should overwrite a specific `font-size` with the global selector\n\n```css\n/* Global selector */\n* {\n font-size: inherit;\n line-height: inherit;\n}\n```\n\n### How to use\n\nThe following options are recommended for applying **Body Font Sizes**:\n\n- CSS classes\n- CSS `data-`attributes\n- SCSS placeholders\n- Tailwind classes\n\nAll options (except the last one) set `font-size`, `line-height` and some **CSS Custom Properties** for an element. These custom properties are internally required by some components to be displayed correctly.\n\n> All available variants / sizes, [see also the detailed overview](./overview):\n>\n> `3xl` | `2xl` | `xl` | `lg` | `md` | `sm` | `xs` | `2xs` | `3xs`\n\n**Note: We use `XX` here. You should replace it with a size from above.**\n\n| CSS class | CSS data-attribute | SCSS | Tailwind |\n| :---------------------------: | ------------------------- | ---------------------------------------- | ----------------------------- |\n| `class="db-font-size-XX"` | `data-font-size="XX"` | `@extend %db-overwrite-font-size-XX` | `class="db-font-size-XX"` |\n| `class="db-headline-size-XX"` | `data-headline-size="XX"` | `@extend %db-overwrite-headline-size-XX` | `class="db-headline-size-XX"` |\n\n#### Advanced use: CSS Custom Properties\n\n> **_Note:_** The direct use of custom properties to set font sizes should be avoided if possible. If this is unavoidable, existing restrictions should be taken into account.\n\nAll of the above options are available for applying the **Body Font Sizes** to HTML elements within custom components.\nIn some cases it may make sense to set the `font-size` and `line-height` manually in the css.\n\n**Please replace `XX` in the custom-properties with one of the sizes:**\n\n```css\n.text-element {\n font: var(--db-type-body-XX);\n}\n```\n', "packages/foundations/docs/IDESupport.md": '# IDE Support\n\nWe try to support those IDEs:\n\n- [JetBrain](https://www.jetbrains.com/) IDEs (like. IntelliJ IDEA, WebStorm, etc.)\n- [Visual Studio Code (VSCode)](https://code.visualstudio.com/)\n\nMost use cases of the Design System might work in other IDEs as well.\n\n## Autocomplete for CSS classes and CSS Custom Properties (Variables)\n\nYou can enable auto-complete of CSS classes (like e.g. `db-color-cyan`) for `HTML` or `JSX` and CSS Custom Properties (like e.g. `var(--db-bg-basic-level-1-default)`) in `.css` or `.scss` files by including `@db-ux/core-foundations/build/ide`.\n\n> **Note:** The contents of this directory shouldn\'t be included/referenced inside your app. It\'s only serving as a file containing declarations for autocompletion inside your IDE. All values for classes and properties don\'t reflect the real values, and neither does the CSS selector. The correct values my differ based on multiple circumstances like light-/dark-mode or screen-size etc. Therefore, there isn\'t a 1:1 mapping.\n\n### JetBrain IDEs (like. IntelliJ IDEA, WebStorm, etc.)\n\n1. Goto `File/Settings/Languages & Frameworks/JavaScript/Libraries`\n2. Press the `Add` button and write `db-ux` into the "name" input. This name will be shown in the auto-complete popup during coding. You can change the name if you want to. Keep the rest of the settings as default: `Framework type: <Custom>` and `Visibility: Project`.\n3. Next press the \u2795 button below `Visibility` and select `Attach Directories...`\n4. This will open a file manager. Navigate to your current projects `node_modules/@db-ux/core-foundations/build/ide` and select the `ide` folder. Press `OK`.\n5. The folder should be included in the list below the \u2795 button. Press `Apply` on the bottom.\n6. Everything should work now. Close the settings and move to a `html` or `jsx/tsx` file and write `class="db-` as attribute to an element. You should see all `db-*` classes for auto-completion. Furthermore, you can go to a `.css` file and write inside a selector `color: db-`. You should see the autocomplete for CSS Custom Properties. By pressing `ENTER` this will automatically add `var(--db-xxx)`.\n\n### VS Code\n\n1. Install [the CSS Variable Autocomplete extension](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables).\n2. If it doesn\'t exist, create a new file `.vscode/settings.json` in your project\n3. Add this to `settings.json`:\n\n```json settings.json\n{\n "cssVariables.lookupFiles": [\n "**/*.css",\n "**/*.scss",\n "**/*.sass",\n "**/*.less",\n "node_modules/@db-ux/core-foundations/build/ide/db.ide.css"\n ]\n}\n```\n\n4. Go to a `.css` file and write inside a selector `color: db-`. You should see the autocomplete for CSS Custom Properties. By pressing `ENTER` this will automatically add `var(--db-xxx)`.\n\n> **Note:** We couldn\'t find a good extension to work properly with the classes you could try out [the SCSS Everywhere extension](https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion). But we encountered some issues with this one.\n', "packages/foundations/docs/Icons.md": '# Icons\n\n- We use icon fonts as **woff2** files for all our icons.\n- We auto generate these files out of `.svg` files.\n- A lot of our [components](../../components/readme) have an `icon` property you can pass in.\n- Use the CSS Custom Property `--db-icon-color` to overwrite the icons color.\n\n## How to include icons\n\nFor **CSS**, **SCSS** and **Tailwind** you don\'t have to include a specific file, just follow the documentation for [foundations](../README.md).\n\nIf you only want to use the icons from this library and not the full CSS, take a look at the "Edge case: Using only icons without the full CSS" section of this page.\n\n### How to use\n\nWe\'re providing an [overview for all of our icons](./overview).\n\nYou can add an icon before or after a tag, by adding an `data-` attribute to your HTML code, like for example:\n\n| Variant | Data |\n| -------- | :---------------------------------------: |\n| `before` | `data-icon="icon-from-overview"` |\n| `after` | `data-icon-trailing="icon-from-overview"` |\n\n### Icon weight\n\nYou can control the size/weight of icons by using the `data-icon-weight` attribute. Available weights are: `16`, `20`, `24`, `32`, `48`, `64`.\n\n| Position | Data attribute | Example |\n| -------- | :----------------------------: | ------------------------------------------------------------------------- |\n| `before` | `data-icon-weight="24"` | `<span data-icon="user" data-icon-weight="24">Text</span>` |\n| `before` | `data-icon-weight-before="32"` | `<span data-icon="user" data-icon-weight-before="32">Text</span>` |\n| `after` | `data-icon-weight-after="20"` | `<span data-icon-trailing="user" data-icon-weight-after="20">Text</span>` |\n\nIf you need to adjust the size of the icons more precisely, you can also set the `--db-icon-font-size` CSS custom property. Please bear in mind that you need to select an `icon-weight` to go with this icon font size from the available options, as each weight includes more or fewer details depending on the resulting size.\n\n### Icon variant (family)\n\nYou can control the variant/family of icons by using the `data-icon-variant` attribute. Available variants are: `default`, `filled`.\n\n| Position | Data attribute | Example |\n| -------- | :---------------------------------: | ------------------------------------------------------------------------------ |\n| `before` | `data-icon-variant="filled"` | `<span data-icon="user" data-icon-variant="filled">Text</span>` |\n| `before` | `data-icon-variant-before="filled"` | `<span data-icon="user" data-icon-variant-before="filled">Text</span>` |\n| `after` | `data-icon-variant-after="filled"` | `<span data-icon-trailing="user" data-icon-variant-after="filled">Text</span>` |\n\n### Combining weight and variant\n\nYou can combine both weight and variant attributes for precise icon control:\n\n```html\n<!-- 32px filled icon before text -->\n<span data-icon="user" data-icon-weight="32" data-icon-variant="filled"\n >User Profile</span\n>\n\n<!-- 24px default icon after text -->\n<span\n data-icon-trailing="arrow_right"\n data-icon-weight-after="24"\n data-icon-variant-after="default"\n >Next</span\n>\n\n<!-- Different styling for before and after icons -->\n<span\n data-icon="star"\n data-icon-weight-before="20"\n data-icon-variant-before="filled"\n data-icon-trailing="arrow_right"\n data-icon-weight-after="16"\n data-icon-variant-after="default"\n>\n Favorite Item\n</span>\n```\n\n### Icons color\n\nYou could use the CSS Custom Property `--db-icon-color` to overwrite the icons color, be it icon fonts or when using the SVG files directly. Or `--db-icon-pulse-color` for the illustrative icons pulse color.\n\n## Custom Icons\n\nIf you have custom icons and want to use them for foundations and/or in components, you need to generate a **woff2** file.\n\n[More information](./CustomIcons.md)\n\n## Additional functionality\n\n### TypeScript Autocomplete\n\nTo get TypeScript autocomplete you need to include a `*.d.ts` file, where you add some icons to the whitelabel base icons:\n\n```ts\n//\nimport "@db-ux/core-foundations";\nimport { BaseIconTypes } from "@db-ux/core-foundations";\n\ndeclare module "@db-ux/core-foundations" {\n interface OverwriteIcons {\n types: BaseIconTypes | "my-custom-icon1" | "my-custom-icon2";\n }\n}\n```\n\n_**OR:**_ If you use another library which provides some overwrite you can do it like this:\n\n```ts\n//\nimport "@db-ux/core-foundations";\nimport "@db-ux/db-theme-icons";\nimport { IconTypes } from "@db-ux/db-theme-icons";\n\ndeclare module "@db-ux/core-foundations" {\n interface OverwriteIcons {\n types: IconTypes;\n }\n}\n```\n\nYou can combine it as well like this:\n\n```ts\n//\nimport "@db-ux/core-foundations";\nimport "@db-ux/db-theme-icons";\nimport { IconTypes } from "@db-ux/db-theme-icons";\n\ndeclare module "@db-ux/core-foundations" {\n interface OverwriteIcons {\n types: IconTypes | "my-custom-icon1" | "my-custom-icon2";\n }\n}\n```\n\n### Edge case: Using only icons without the full CSS\n\nIf you want to use only the icons from this library without including the complete CSS, you can copy or reference just the icon-related files:\n\n```css\n/* bundler.css */\n@import "@db-ux/core-foundations/build/styles/defaults/default-icons.css";\n@import "@db-ux/db-theme-icons/build/styles/default-font.css";\n@import "@db-ux/db-theme-icons/build/styles/[rollup|webpack|relative].css";\n```\n\nor\n\n```bash\ncp "node_modules/@db-ux/core-foundations/build/styles/defaults/default-icons.css" \u2026;\ncp "node_modules/@db-ux/db-theme-icons/build/styles/default-font.css" \u2026;\ncp "node_modules/@db-ux/db-theme-icons/build/styles/[relative|absolute].css" \u2026;\n```\n\nYou need to copy or reference the correct `.css` file out of your project. There are multiple files depending on the bundler you use:\n\n- `relative.css`: No bundler (as shown in the previous code block)\n- `absolute.css`: No bundler\n- `rollup.css`: vite, rollup\n- `webpack.css`: webpack\n\n**Important for non-bundlers usage:** If you\'re moving `relative.css` CSS file to your project, you need to copy the `fonts` folder from `node_modules/@db-ux/db-theme-icons/build/fonts` to the same directory next to the folder where you store the `relative.css` file (e.g., next to your `styles` folder), because we\'re using the reference to e.g. `src: url("../fonts/default_12/db.woff2")` out of the `relative.css` CSS file.\n', "packages/foundations/docs/Performance.md": '# Performance\n\nIf you need to improve the performance of your application, you can use the following tips:\n\n## Minify with PurgeCSS and CSSO\n\nWhen you use the full bundled `.css` file we provide, you could easily reduce the file size by removing unused CSS classes. This can be done with [PurgeCSS](https://purgecss.com/) and [CSSO](https://github.com/css/csso).\n\nInstall both with:\n\n```shell\nnpm i purgecss csso --save-dev\n```\n\nNext you should create a file, e.g. `purgecss.js` in your project root with the following content:\n\n```javascript\nimport { writeFileSync } from "node:fs";\n\nimport { PurgeCSS } from "purgecss";\nimport { minify } from "csso";\n\nconst distFolder = "dist"; // TODO: Change me if you need another folder\n\nnew PurgeCSS()\n .purge({\n content: [`${distFolder}/**/*.html`, `${distFolder}/**/*.js`],\n css: [`${distFolder}/**/*.css`],\n defaultExtractor: (content) => content.match(/[\\w-/:]+(?<!:)/g) || [],\n variables: true,\n rejectedCss: true,\n safelist: {\n variables: [\n /* TODO: Keep only the densities you need */\n /-functional-/,\n /-regular-/,\n /-expressive-/,\n /* Keep density & all color properties/variables */\n /-default$/,\n /-hovered$/,\n /-pressed$/\n ],\n /* Some components require a safelist */\n greedy: [\n /db-tabs/ // TODO: Add more components if necessary\n ]\n }\n })\n .then((purgeCSSResult) => {\n for (const result of purgeCSSResult) {\n writeFileSync(result.file, minify(result.css).css);\n\n /* Optional: for debugging */\n // writeFileSync(`rejected.css`, result.rejectedCss || "");\n }\n });\n```\n\nYou can run this script with `node purgecss.js` and it will minify your CSS files. You can also add this script to your `package.json` to run after your regular build process:\n\n```json\n{\n "scripts": {\n "postbuild": "node purgecss.js"\n }\n}\n```\n', "packages/foundations/docs/Variables.md": "# Variables\n\n- You use Variables to style your pages and custom components.\n- The Variables are primarily for paddings, margins and all kinds of sizes.\n- All variables are automatically predefined with the correct variable based on the [density](../densities/readme).\n- Based on the density and the selected theme, the \"real\" value behind the variable can change.\n\n## How to include variables\n\nFor **CSS** and **Tailwind** you don't have to include a specific file, just follow the documentation for [foundations](../README.md).\n\nFor **SCSS** you need to use the import `@use \"@db-ux/core-foundations/build/styles/variables\"` in your `.scss` file, where you want to reference the specific variable.\n\n## Simple overview for advanced\n\n| Variable type | T-Shirts \u{1F455} | Base |\n| ---------------------- | ------------------------------------------ | ---- |\n| **spacing fixed** | `3xs`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl` | `md` |\n| **spacing responsive** | `xs`, `sm`, `md`, `lg`, `xl` | `md` |\n| **sizing** | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | `md` |\n\n## Spacing fixed\n\n- We use **spacing fixed** to add margins, paddings, gaps, etc.\n- We don't use them for `width` or `height`.\n- Those are the main variables you use all the time to build your page or component.\n\n### How to use\n\nWe use **padding** as an example for this variable.\n\nYou can see a visual preview [spacings fixed examples page](./examples).\n\n| T-Shirt \u{1F455} | CSS | SCSS | Tailwind |\n| :--------: | -------------------------------------- | ------------------------------------------ | ----------- |\n| `3xs` | `padding: var(--db-spacing-fixed-3xs)` | `padding: variables.$db-spacing-fixed-3xs` | `p-fix-3xs` |\n| `2xs` | `padding: var(--db-spacing-fixed-2xs)` | `padding: variables.$db-spacing-fixed-2xs` | `p-fix-2xs` |\n| `xs` | `padding: var(--db-spacing-fixed-xs)` | `padding: variables.$db-spacing-fixed-xs` | `p-fix-xs` |\n| `sm` | `padding: var(--db-spacing-fixed-sm)` | `padding: variables.$db-spacing-fixed-sm` | `p-fix-sm` |\n| `md` | `padding: var(--db-spacing-fixed-md)` | `padding: variables.$db-spacing-fixed-md` | `p-fix-md` |\n| `lg` | `padding: var(--db-spacing-fixed-lg)` | `padding: variables.$db-spacing-fixed-lg` | `p-fix-lg` |\n| `xl` | `padding: var(--db-spacing-fixed-xl)` | `padding: variables.$db-spacing-fixed-xl` | `p-fix-xl` |\n\n## Spacing responsive\n\n- We use **spacing responsive** to add spacings which should change based on the users' device.\n- We don't use them for `width` or `height`.\n- Best example would be the padding for your `main` region which should be larger on a desktop device than mobile.\n- We recommend using `DBSection` from our [components library](../../components/readme). The component handles the responsive Layout for your app, you don't have to struggle which spacing would be the correct one.\n\n### How to use\n\nWe use **padding** as an example for this variable.\n\nYou can see a visual preview [spacings responsive examples page](./examples).\n\n| T-Shirt \u{1F455} | CSS | SCSS | Tailwind |\n| :--------: | ------------------------------------------ | ---------------------------------------------- | ---------- |\n| `xs` | `padding: var(--db-spacing-responsive-xs)` | `padding: variables.$db-spacing-responsive-xs` | `p-res-xs` |\n| `sm` | `padding: var(--db-spacing-responsive-sm)` | `padding: variables.$db-spacing-responsive-sm` | `p-res-sm` |\n| `md` | `padding: var(--db-spacing-responsive-md)` | `padding: variables.$db-spacing-responsive-md` | `p-res-md` |\n| `lg` | `padding: var(--db-spacing-responsive-lg)` | `padding: variables.$db-spacing-responsive-lg` | `p-res-lg` |\n| `xl` | `padding: var(--db-spacing-responsive-xl)` | `padding: variables.$db-spacing-responsive-xl` | `p-res-xl` |\n\n## Sizing\n\n- We use **sizing** to set a fixed height to components (Button, Input, ...).\n- We don't use them for `padding` or `margin` except for absolute elements inside a component with a fixed height.\n- You should use a sizing variable if you want to align a custom component with another component, which has a fixed height.\n\n### How to use\n\nWe use **height** as an example for this variable.\n\nYou can see a visual preview [sizings examples page](./examples).\n\n| T-Shirt \u{1F455} | CSS | SCSS | Tailwind |\n| :--------: | ------------------------------ | ---------------------------------- | ----------- |\n| `xs` | `height: var(--db-sizing-xs)` | `height: variables.$db-sizing-xs` | `h-siz-xs` |\n| `sm` | `height: var(--db-sizing-sm)` | `height: variables.$db-sizing-sm` | `h-siz-sm` |\n| `md` | `height: var(--db-sizing-md)` | `height: variables.$db-sizing-md` | `h-siz-md` |\n| `lg` | `height: var(--db-sizing-lg)` | `height: variables.$db-sizing-lg` | `h-siz-lg` |\n| `xl` | `height: var(--db-sizing-xl)` | `height: variables.$db-sizing-xl` | `h-siz-xl` |\n| `2xl` | `height: var(--db-sizing-2xl)` | `height: variables.$db-sizing-2xl` | `h-siz-2xl` |\n| `3xl` | `height: var(--db-sizing-3xl)` | `height: variables.$db-sizing-3xl` | `h-siz-3xl` |\n" }, migrationGuides: { README: "# Migration from DB UI to DB UX Design System v3\n\nThis folder contains the documentation on how to migrate from DB UI to DB UX Design System v3.\n\nIf you are even already on our current Design System generation, have a look at the [GitHub Releases page](https://github.com/db-ux-design-system/core-web/releases) for the `CHANGELOG.md` file in each Node package for detailed information on changes.\n", "color-migration": "# DB UI \u2192 DB UX Color Migration\n\nUse the **BG** column for `background-color` / `background`. Use the **FG** column for `color` / `border-color` / `outline-color` / `fill` / `stroke` / `caret-color`. For `box-shadow`, use `--db-elevation-*` tokens instead.\n\n| DB UI v2 Token | Background (BG) | Foreground (FG) |\n| --------------------------------- | ------------------------------------------------------ | ---------------------------------------------------- |\n| `db-color-yellow-100` | `--db-yellow-bg-basic-level-2-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-yellow-200` | `--db-yellow-bg-basic-level-3-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-yellow-300` | `--db-yellow-bg-basic-level-3-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-400` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-500` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-600` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-yellow-700` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-yellow-800` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-yellow-900` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-orange-100` | `--db-yellow-bg-basic-level-2-default` | `--db-yellow-on-bg-inverted-default` |\n| `db-color-orange-200` | `--db-yellow-bg-basic-level-3-default` | `--db-yellow-on-bg-inverted-default` |\n| `db-color-orange-300` | `--db-yellow-bg-basic-level-3-default` | `--db-warning-on-bg-basic-emphasis-60-default` |\n| `db-color-orange-400` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-orange-500` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-orange-600` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-orange-700` | `--db-warning-bg-inverted-contrast-low-default` | `--db-warning-on-bg-basic-emphasis-70-default` |\n| `db-color-orange-800` | `--db-warning-bg-inverted-contrast-high-default` | `--db-warning-on-bg-basic-emphasis-80-default` |\n| `db-color-red-100` | `--db-brand-bg-basic-level-3-default` | `--db-brand-on-bg-inverted-default` |\n| `db-color-red-200` | `--db-brand-bg-basic-level-3-default` | `--db-burgundy-on-bg-basic-emphasis-60-default` |\n| `db-color-red-300` | `--db-brand-bg-vibrant-default` | `--db-brand-on-bg-basic-emphasis-50-default` |\n| `db-color-red-400` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-red-500` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-red-600` | `--db-brand-bg-inverted-contrast-high-default` | `--db-brand-on-bg-basic-emphasis-80-default` |\n| `db-color-red-700` | `--db-brand-bg-inverted-contrast-high-default` | `--db-brand-on-bg-basic-emphasis-90-default` |\n| `db-color-red-800` | `--db-brand-bg-inverted-contrast-max-default` | `--db-brand-on-bg-basic-emphasis-90-default` |\n| `db-color-burgundy-100` | `--db-burgundy-bg-basic-level-3-default` | `--db-pink-on-bg-inverted-default` |\n| `db-color-burgundy-200` | `--db-pink-bg-basic-level-3-default` | `--db-burgundy-on-bg-basic-emphasis-60-default` |\n| `db-color-burgundy-300` | `--db-burgundy-bg-vibrant-default` | `--db-burgundy-on-bg-basic-emphasis-50-default` |\n| `db-color-burgundy-400` | `--db-burgundy-bg-inverted-contrast-low-default` | `--db-burgundy-on-bg-basic-emphasis-70-default` |\n| `db-color-burgundy-500` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-burgundy-600` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-burgundy-700` | `--db-pink-bg-inverted-contrast-max-default` | `--db-burgundy-on-bg-basic-emphasis-90-default` |\n| `db-color-burgundy-800` | `--db-pink-bg-inverted-contrast-max-default` | `--db-pink-on-bg-basic-emphasis-100-default` |\n| `db-color-pink-100` | `--db-pink-bg-basic-level-3-default` | `--db-pink-on-bg-inverted-default` |\n| `db-color-pink-200` | `--db-pink-bg-basic-level-3-default` | `--db-burgundy-on-bg-basic-emphasis-60-default` |\n| `db-color-pink-300` | `--db-pink-bg-vibrant-default` | `--db-pink-on-bg-basic-emphasis-60-default` |\n| `db-color-pink-400` | `--db-pink-bg-vibrant-default` | `--db-pink-on-bg-basic-emphasis-50-default` |\n| `db-color-pink-500` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-pink-600` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-pink-700` | `--db-pink-bg-inverted-contrast-high-default` | `--db-pink-on-bg-basic-emphasis-80-default` |\n| `db-color-pink-800` | `--db-pink-bg-inverted-contrast-high-default` | `--db-pink-on-bg-basic-emphasis-80-default` |\n| `db-color-violett-100` | `--db-violet-bg-basic-level-3-default` | `--db-violet-on-bg-inverted-default` |\n| `db-color-violett-200` | `--db-violet-bg-basic-level-3-default` | `--db-violet-on-bg-basic-emphasis-60-default` |\n| `db-color-violett-300` | `--db-violet-bg-vibrant-default` | `--db-violet-on-bg-basic-emphasis-50-default` |\n| `db-color-violett-400` | `--db-violet-bg-inverted-contrast-low-default` | `--db-violet-on-bg-basic-emphasis-70-default` |\n| `db-color-violett-500` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-violett-600` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-violett-700` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-90-default` |\n| `db-color-violett-800` | `--db-violet-bg-inverted-contrast-max-default` | `--db-violet-on-bg-basic-emphasis-90-default` |\n| `db-color-blue-100` | `--db-informational-bg-basic-level-3-default` | `--db-informational-on-bg-inverted-default` |\n| `db-color-blue-200` | `--db-informational-bg-basic-level-3-default` | `--db-informational-on-bg-basic-emphasis-60-default` |\n| `db-color-blue-300` | `--db-blue-bg-vibrant-default` | `--db-blue-on-bg-basic-emphasis-50-default` |\n| `db-color-blue-400` | `--db-blue-bg-inverted-contrast-low-default` | `--db-blue-on-bg-basic-emphasis-70-default` |\n| `db-color-blue-500` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-80-default` |\n| `db-color-blue-600` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-90-default` |\n| `db-color-blue-700` | `--db-blue-bg-inverted-contrast-max-default` | `--db-blue-on-bg-basic-emphasis-90-default` |\n| `db-color-blue-800` | `--db-blue-bg-inverted-contrast-max-default` | `--db-blue-on-bg-basic-emphasis-100-default` |\n| `db-color-cyan-100` | `--db-turquoise-bg-basic-level-1-default` | `--db-turquoise-on-bg-inverted-default` |\n| `db-color-cyan-200` | `--db-informational-bg-basic-level-3-default` | `--db-informational-on-bg-basic-emphasis-60-default` |\n| `db-color-cyan-300` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-60-default` |\n| `db-color-cyan-400` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-cyan-500` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-cyan-600` | `--db-informational-bg-inverted-contrast-low-default` | `--db-informational-on-bg-basic-emphasis-70-default` |\n| `db-color-cyan-700` | `--db-informational-bg-inverted-contrast-high-default` | `--db-informational-on-bg-basic-emphasis-80-default` |\n| `db-color-cyan-800` | `--db-informational-bg-inverted-contrast-high-default` | `--db-informational-on-bg-basic-emphasis-90-default` |\n| `db-color-turquoise-100` | `--db-turquoise-bg-basic-level-1-default` | `--db-turquoise-on-bg-inverted-default` |\n| `db-color-turquoise-200` | `--db-turquoise-bg-basic-level-1-default` | `--db-turquoise-on-bg-inverted-default` |\n| `db-color-turquoise-300` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-turquoise-400` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-turquoise-500` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-turquoise-600` | `--db-turquoise-bg-inverted-contrast-low-default` | `--db-turquoise-on-bg-basic-emphasis-70-default` |\n| `db-color-turquoise-700` | `--db-turquoise-bg-inverted-contrast-high-default` | `--db-turquoise-on-bg-basic-emphasis-80-default` |\n| `db-color-turquoise-800` | `--db-turquoise-bg-inverted-contrast-high-default` | `--db-turquoise-on-bg-basic-emphasis-90-default` |\n| `db-color-green-100` | `--db-green-bg-basic-level-1-default` | `--db-green-on-bg-inverted-default` |\n| `db-color-green-200` | `--db-green-bg-basic-level-2-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-green-300` | `--db-green-bg-vibrant-default` | `--db-green-on-bg-basic-emphasis-50-default` |\n| `db-color-green-400` | `--db-green-bg-vibrant-default` | `--db-green-on-bg-basic-emphasis-50-default` |\n| `db-color-green-500` | `--db-green-bg-inverted-contrast-low-default` | `--db-green-on-bg-basic-emphasis-70-default` |\n| `db-color-green-600` | `--db-green-bg-inverted-contrast-high-default` | `--db-green-on-bg-basic-emphasis-80-default` |\n| `db-color-green-700` | `--db-green-bg-inverted-contrast-high-default` | `--db-green-on-bg-basic-emphasis-80-default` |\n| `db-color-green-800` | `--db-green-bg-inverted-contrast-high-default` | `--db-green-on-bg-basic-emphasis-90-default` |\n| `db-color-light-green-100` | `--db-successful-bg-basic-level-1-default` | `--db-successful-on-bg-inverted-default` |\n| `db-color-light-green-200` | `--db-successful-bg-basic-level-3-default` | `--db-green-on-bg-basic-emphasis-60-default` |\n| `db-color-light-green-300` | `--db-successful-bg-vibrant-default` | `--db-successful-on-bg-basic-emphasis-60-default` |\n| `db-color-light-green-400` | `--db-successful-bg-vibrant-default` | `--db-successful-on-bg-basic-emphasis-50-default` |\n| `db-color-light-green-500` | `--db-successful-bg-vibrant-default` | `--db-successful-on-bg-basic-emphasis-50-default` |\n| `db-color-light-green-600` | `--db-successful-bg-inverted-contrast-low-default` | `--db-successful-on-bg-basic-emphasis-70-default` |\n| `db-color-light-green-700` | `--db-successful-bg-inverted-contrast-high-default` | `--db-successful-on-bg-basic-emphasis-80-default` |\n| `db-color-light-green-800` | `--db-successful-bg-inverted-contrast-high-default` | `--db-successful-on-bg-basic-emphasis-80-default` |\n| `db-color-warm-gray-100` | `--db-adaptive-bg-basic-level-2-default` | `--db-adaptive-on-bg-inverted-default` |\n| `db-color-warm-gray-200` | `--db-adaptive-bg-basic-level-3-default` | `--db-yellow-on-bg-inverted-default` |\n| `db-color-warm-gray-300` | `--db-adaptive-bg-vibrant-default` | `--db-adaptive-on-bg-basic-emphasis-60-default` |\n| `db-color-warm-gray-400` | `--db-adaptive-bg-vibrant-default` | `--db-adaptive-on-bg-basic-emphasis-50-default` |\n| `db-color-warm-gray-500` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-warm-gray-600` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-warm-gray-700` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-warm-gray-800` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-cool-gray-100` | `--db-adaptive-bg-basic-level-3-default` | `--db-informational-on-bg-inverted-default` |\n| `db-color-cool-gray-200` | `--db-adaptive-bg-basic-level-3-default` | `--db-adaptive-on-bg-basic-emphasis-60-default` |\n| `db-color-cool-gray-300` | `--db-adaptive-bg-vibrant-default` | `--db-adaptive-on-bg-basic-emphasis-50-default` |\n| `db-color-cool-gray-400` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-cool-gray-500` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-80-default` |\n| `db-color-cool-gray-600` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-cool-gray-700` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-cool-gray-800` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-100-default` |\n| `db-color-red` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-white` | `--db-adaptive-bg-basic-level-1-default` | `--db-adaptive-on-bg-inverted-default` |\n| `db-color-black` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-100-default` |\n| `db-color-success` | `--db-successful-bg-inverted-contrast-low-default` | `--db-successful-on-bg-basic-emphasis-70-default` |\n| `db-color-success-small-font` | `--db-successful-bg-inverted-contrast-low-default` | `--db-successful-on-bg-basic-emphasis-70-default` |\n| `db-color-error` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-error-small-font` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-warning` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-warning-small-font` | `--db-brand-bg-inverted-contrast-low-default` | `--db-brand-on-bg-basic-emphasis-70-default` |\n| `db-color-informative` | `--db-informational-bg-inverted-contrast-low-default` | `--db-informational-on-bg-basic-emphasis-70-default` |\n| `db-color-informative-small-font` | `--db-informational-bg-inverted-contrast-high-default` | `--db-informational-on-bg-basic-emphasis-80-default` |\n| `db-color-food-drink` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-health` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-things-to-know` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-community-facilities` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-db-services-facilities` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-90-default` |\n| `db-color-shopping` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-arts-culture` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-leisure` | `--db-green-bg-inverted-contrast-low-default` | `--db-green-on-bg-basic-emphasis-70-default` |\n| `db-color-services` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-guidance` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-ice` | `--db-adaptive-bg-inverted-contrast-max-default` | `--db-adaptive-on-bg-basic-emphasis-90-default` |\n| `db-color-ic` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-80-default` |\n| `db-color-ec` | `--db-adaptive-bg-inverted-contrast-high-default` | `--db-adaptive-on-bg-basic-emphasis-80-default` |\n| `db-color-re` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-rb` | `--db-adaptive-bg-inverted-contrast-low-default` | `--db-adaptive-on-bg-basic-emphasis-70-default` |\n| `db-color-s-bahn` | `--db-green-bg-inverted-contrast-low-default` | `--db-green-on-bg-basic-emphasis-70-default` |\n| `db-color-u-bahn` | `--db-blue-bg-inverted-contrast-high-default` | `--db-blue-on-bg-basic-emphasis-80-default` |\n| `db-color-tram` | `--db-burgundy-bg-inverted-contrast-high-default` | `--db-burgundy-on-bg-basic-emphasis-80-default` |\n| `db-color-bus` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-intercity-bus` | `--db-pink-bg-inverted-contrast-low-default` | `--db-pink-on-bg-basic-emphasis-70-default` |\n| `db-color-call-bus` | `--db-violet-bg-inverted-contrast-high-default` | `--db-violet-on-bg-basic-emphasis-80-default` |\n| `db-color-ev-bus` | `--db-pink-bg-inverted-contrast-high-default` | `--db-pink-on-bg-basic-emphasis-80-default` |\n| `db-color-ship` | `--db-informational-bg-vibrant-default` | `--db-informational-on-bg-basic-emphasis-50-default` |\n| `db-color-airplane` | `--db-turquoise-bg-vibrant-default` | `--db-turquoise-on-bg-basic-emphasis-50-default` |\n| `db-color-carsharing` | `--db-warning-bg-vibrant-default` | `--db-warning-on-bg-basic-emphasis-50-default` |\n| `db-color-taxi` | `--db-yellow-bg-vibrant-default` | `--db-yellow-on-bg-basic-emphasis-60-default` |\n| `db-color-bikesharing` | `--db-brand-bg-inverted-contrast-high-default` | `--db-brand-on-bg-basic-emphasis-80-default` |\n| `db-color-walk` | `--db-adaptive-bg-basic-level-3-default` | `--db-adaptive-on-bg-basic-emphasis-60-default` |\n", "component-migration": '# DB UI to DB UX v3 Component Migration\n\nPrefer JS framework packages: Angular `@db-ux/ngx-core-components` (`<db-button>`), React `@db-ux/react-core-components` (`<DBButton>`), Vue `@db-ux/v-core-components` (`<DBButton>`) in case that the user wants to build a JavaScript application with one of these frameworks. If it\'s still a JavaScript framework, but none of these apply, use `@db-ux/core-components` node package. In all other cases, use the HTML and CSS basis: `@db-ux/core-components`.\n\nLegend: [replacement]=replacement exists, [new]=new component, [removed]=removed, [planned]=planned\n\n## Direct Equivalents\n\n**accordion** \u2014 New component\n\n**accordion-item** \u2014 `cmp-accordion`->`db-accordion-item` (was single item, now multiple items in one accordion). Props: `summary`->`headline`, `emphasis`->[removed], `size`->[removed] (use density). New: `disabled`, `content`.\n\n**badge** \u2014 New component\n\n**brand** \u2014 `cmp-brand`->`db-brand`. All anchor-related props removed (`siteNameLink`,`alt`,`anchorRef`,`anchorTitle`,`anchorRelation`,`src`->[removed]). Wrap with your own `<a>` if needed. New: `hideLogo`.\n\n**button** \u2014 `elm-button`->`db-button`. Sizes: `large`->[removed], `regular`->[removed] (default is `medium`, use density). Variants: `primary`->[removed] (use `outlined`), `brand-primary`->`primary`, `secondary-outline`->`outlined`, `secondary-solid`->`solid`, `tertiary-plain`->`text`. Icons: `iconTrailing`->[removed] (only leading icons), `iconOnly`->`noText`.\n\n**card** \u2014 `cmp-card`->`db-card`. Variant: `header`->[removed], `content`->[removed] (use children/slot), `variant="interactive"` makes it act like a button. Image: `alt`->`imgAlt`, `image`->`imgSrc`. New: `imgWidth`, `imgHeight`. Removed: `illustration`, `uiCoreIllustrationPath`.\n\n**checkbox** \u2014 `elm-checkbox`->`db-checkbox`. Map `input_id` to `id` (for React/Vue), but use `propOverrides` for Web Components and Angular.\n\n**divider** \u2014 New component\n\n**drawer** \u2014 New component\n\n**header** \u2014 `rea-header`->`db-header`. `mobile`->`forceMobile`.\n\n**icon** \u2014 ->`db-icon`. `variant`->[removed] (controlled by `font-family:var(--db-icon-font-family)` and `font-weight:var(--db-icon-font-weight)`).\n\n**infotext** \u2014 New component\n\n**input** \u2014 `elm-input`->`db-input`. Old variants removed: `semitransparent`,`white`,`solid`,`outline`->[removed]. New variants: `adaptive`,`neutral`,`critical`,`informational`,`warning`,`successful`. `description`->`message`. \u26A0\uFE0F Behavior change: In v2, `description` was hidden by default (tooltip/hint). In v3, `message` is ALWAYS visible by default. To restore v2 hidden behavior, set `showMessage={false}` explicitly.\n\n**link** \u2014 `elm-link`->`db-link`. `icon`,`icononly`,`iconVariant`->[removed] (use `content` for arrow icon).\n\n**navigation** \u2014 `cmp-mainnavigation`->`db-navigation`. `data`,`siteName`->[removed] (use children/slot, features moved to `db-header`).\n\n**navigation-item** \u2014 New component\n\n**notification** \u2014 `elm-notification`->`db-notification`. Type: `notification`->`notification`, `status`->[removed] (use variants). New type: `inline`. Variants: `error`->`critical`, `informative`->`informational`, `warning`->`warning`, `success`->`successful`. New: `adaptive`.\n\n**page** \u2014 `rea-page`->`db-page`.\n\n**popover** \u2014 New component\n\n**radio** \u2014 `elm-radio`->`db-radio`. Map `input_id` to `id` (for React/Vue), but use `propOverrides` for Web Components and Angular.\n\n**section** \u2014 New component\n\n**select** \u2014 `elm-select`->`db-select`. `multiple`->[removed], `size`->[removed].\n\n**stack** \u2014 New component\n\n**switch** \u2014 `elm-toggle`->`db-switch`. `htmlid`->`id`.\n\n**tab-item** \u2014 `cmp-db-tab`->`db-tab-item`. `name`->[removed] (handled by parent `db-tabs`).\n\n**tab-list** \u2014 New component\n\n**tab-panel** \u2014 New component\n\n**tabs** \u2014 `cmp-tab-bar`->`db-tabs`.\n\n**tag** \u2014 `elm-tag`->`db-tag`. Chip+tag merged into tag only. Interactive tags: wrap `db-button`,`db-link`,`db-checkbox`,`db-radio` inside `db-tag`. `small`->[removed] (use density, `type="strong"` for emphasis). Variants: `poi-*`->[removed], `track`->[removed], `error`->`critical`, `informative`->`informational`, `success`->`successful`. `iconAfter`->[removed] (only leading icons).\n\n**textarea** \u2014 `elm-textarea`->`db-textarea`. Old variants removed: `semitransparent`,`white`,`solid`,`outline`->[removed]. New: `adaptive`,`critical`,`informational`,`warning`,`successful`. `description`->`message`. \u26A0\uFE0F Behavior change: In v2, `description` was hidden by default (tooltip/hint). In v3, `message` is ALWAYS visible by default. To restore v2 hidden behavior, set `showMessage={false}` explicitly.\n\n**tooltip** \u2014 New component\n\n## No Direct Equivalent\n\n| Old | Status | Replacement |\n| ---------------------- | :-----------: | ----------------------------------------------------------------- |\n| `rea-main` | [removed] | `db-page` (includes `<main>`) |\n| `rea-grid` | [removed] | CSS Grid or `db-stack` |\n| `rea-footer` | [planned] | Semantic `<footer>` + `db-link`, planned Q4/2025 |\n| `elm-headline` | [replacement] | Semantic headings + `db-infotext` for subtitles |\n| `elm-headline` (pulse) | [removed] | Heading + CSS animation |\n| `elm-loadingindicator` | [planned] | Planned Q4/2025, use CSS spinner + `aria-live` |\n| `elm-progress` | [planned] | Planned Q4/2025, use `<progress>` |\n| `elm-chip` | [replacement] | `db-tag` with `db-button`/`db-checkbox`/`db-radio` inside |\n| `cmp-breadcrumb` | [planned] | Planned Q4/2025, use `db-link` in `<nav aria-label="Breadcrumb">` |\n| `cmp-pagination` | [planned] | Planned Q4/2025, use `db-button` with ARIA labels |\n| `cmp-table` | [planned] | Under research, use semantic `<table>` |\n| `cmp-sidenavi` | [replacement] | `db-navigation` inside `db-drawer` |\n| `cmp-dialog` | [replacement] | `db-drawer` or custom modal, planned Q4/2025 |\n\n## Key Migration Examples\n\n`rea-main` -> `<db-page>Content</db-page>`\n\n`rea-grid` -> CSS Grid with `gap: var(--db-spacing-fixed-md)`\n\n`elm-chip` -> `<db-tag><db-button variant="ghost">Text</db-button></db-tag>`\n\n`elm-headline` -> `<h1>Title</h1>` + `<db-infotext>Subtitle</db-infotext>`\n\n`cmp-sidenavi` -> `<db-drawer><db-navigation><db-navigation-item><db-link href="/page">Item</db-link></db-navigation-item></db-navigation></db-drawer>`\n\n## A11y for Custom Solutions\n\nUse semantic HTML, ARIA labels/roles/states, keyboard navigation, focus management, screen reader support.\n\nTemporary patterns: loading -> `<div role="status"><span class="visually-hidden">Loading...</span></div>`, progress -> `<progress value="70" max="100" aria-label="Upload progress: 70%">`, breadcrumb -> `<nav aria-label="Breadcrumb"><ol>...</ol></nav>`.\n', "general-migration": '# DB UI \u2192 DB UX General Migration\n\nScan files: `.css`, `.scss`, `.html`, `.tsx`, `.jsx`, `.ts`, `.js`, `.vue`\n\n## Typography\n\nReplace hardcoded `font-size` with `font` shorthand using `--db-type-*` tokens. Use `font:` not `font-size:`. Remove redundant `line-height`/`font-weight`/`font-family` \u2014 the token sets all four.\n\nBody tokens: `--db-type-body-3xs` through `--db-type-body-3xl`. Headline tokens: `--db-type-headline-3xs` through `--db-type-headline-3xl`. SCSS: `$db-type-body-md`, etc.\n\nSize mapping: `10px`/`0.625rem`\u2192`body-3xs`, `12px`/`0.75rem`\u2192`body-2xs`, `14px`/`0.875rem`/`small`\u2192`body-sm`, `16px`/`1rem`/`medium`\u2192`body-md`, `18px`/`1.125rem`\u2192`body-lg`, `20px`/`1.25rem`/`large`\u2192`body-xl`, `24px`/`1.5rem`\u2192`headline-sm`, `32px`/`2rem`\u2192`headline-md`, `40px`/`2.5rem`\u2192`headline-lg`, `48px`/`3rem`\u2192`headline-xl`.\n\n## Colors\n\nSee `db-ui-color-migration.md` for full mapping. Token names are bare (no `var(--)` / `$`). CSS: `var(--token)`, SCSS: `$token`.\n\nBG column for: `background-color`, `background`. FG column for: `color`, `border-color`, `border`, `outline-color`, `text-decoration-color`, `fill`, `stroke`, `caret-color`, `column-rule-color`.\n\nNEVER use `opacity` to simulate lighter colors. NEVER use `--db-elevation-*` as color values.\n\n## box-shadow \u2192 elevation tokens\n\nDo NOT use color tokens for `box-shadow`. Use: `--db-elevation-sm` (subtle/pressed), `--db-elevation-md` (default/cards), `--db-elevation-lg` (prominent/hover). SCSS: `$db-elevation-sm`/`md`/`lg`. Interactive: `data-interactive="elevation"` or `.db-interactive-elevation` (auto `md`\u2192`lg` hover\u2192`sm` active).\n\n## Inline Styles\n\nReplace all inline `style` attributes, as they bypass theming, density, and dark mode. Follow this strict priority: 1) use component props, 2) use external CSS/SCSS classes with tokens, 3) use inline styles with tokens only as an absolute last resort.\n\n## Required CSS Imports & Token Architecture\n\nv3 uses a layered CSS architecture. All four imports are required in this exact order:\n\n```tsx\n// main.tsx \u2014 order matters!\nimport "@db-ux/core-foundations/build/styles/theme/rollup.css"; // Layer 1: Palette tokens (@property definitions, e.g. #16181b)\nimport "@db-ux/core-foundations/build/styles/bundle.css"; // Layer 2: Semantic tokens (light-dark mappings on :root)\nimport "@db-ux/core-foundations/build/styles/icons/rollup.css"; // Layer 3: Icon fonts (@font-face declarations)\nimport "@db-ux/core-components/build/styles/rollup.css"; // Layer 4: Component styling\n```\n\n**Layer 1 \u2013 Palette tokens:** Defines raw color values as CSS `@property` registrations. These are the primitive building blocks (hex values, numeric scales).\n\n**Layer 2 \u2013 Semantic tokens:** Maps palette tokens to semantic meanings using `light-dark()` on `:root`. Provides spacing, typography, elevation, and color intent tokens.\n\n**Layer 3 \u2013 Icon fonts:** Registers `@font-face` declarations for the icon font. Without this, icon names render as plain text instead of symbols.\n\n**Layer 4 \u2013 Component styling:** The actual component CSS rules. Depends on all three foundation layers above.\n\nMissing any layer causes specific failures:\n\n- No Layer 1/2 \u2192 components render without colors/spacing (broken layout)\n- No Layer 3 \u2192 icons display as text strings\n- No Layer 4 \u2192 components have no styling at all\n\n## Spacing\n\nReplace hardcoded `px`/`rem` in `padding`, `margin`, `gap`, `inset`, `top`/`right`/`bottom`/`left` with `--db-spacing-fixed-*` tokens. For responsive spacing use `--db-spacing-responsive-*`.\n\nFixed tokens (regular density): `3xs`=2px, `2xs`=4px, `xs`=8px, `sm`=12px, `md`=16px, `lg`=24px, `xl`=32px, `2xl`=48px, `3xl`=80px. Values adapt to active density automatically. SCSS: `$db-spacing-fixed-md`, etc.\n', "icon-migration": "# DB UI \u2192 DB UX Icon Migration\n\n<!-- cSpell:ignore steppless -->\n\n`account`\u2192`person`, `add`\u2192`plus`, `add-circle`\u2192`add_option`, `add-link`\u2192`link_chain`, `alarm`\u2192`alarm_clock`, `alarm-add`\u2192`alarm_clock_plus`, `alert`\u2192`bell`, `alert-off`\u2192`bell_disabled`, `artificial-intelligence`\u2192`artificial_intelligence`, `attachment`\u2192`paper_clip`, `augmented-reality`\u2192`augmented_reality`, `block`\u2192`block`, `bookmark`\u2192`bookmark`, `bug`\u2192`bug`, `build`\u2192`wrench`, `calendar`\u2192`calendar`, `camera`\u2192`camera`, `cash`\u2192`cash`, `check-circle`\u2192`check_circle`, `cloud`\u2192`cloud`, `cloud-download`\u2192`cloud_download`, `cloud-upload`\u2192`cloud_upload`, `copy`\u2192`copy`, `credit-card`\u2192`credit_card`, `dashboard`\u2192`speedometer`, `delete`\u2192`bin`, `discount`\u2192`discount`, `document`\u2192`document`, `document-check`\u2192`document_check`, `document-cross`\u2192`document_cross`, `done`\u2192`check`, `download`\u2192`download`, `drag-and-drop`\u2192`dots_drag_and_drop`, `edit`\u2192`pen`, `euro-sign`\u2192`euro_sign`, `face-delighted`\u2192`face_delighted`, `face-disappointed`\u2192`face_disappointed`, `face-neutral`\u2192`face_neutral`, `face-sad`\u2192`face_sad`, `face-smiling`\u2192`face_smiling`, `filter`\u2192`sliders_horizontal`, `fingerprint`\u2192`fingerprint`, `folder`\u2192`folder`, `folder-open`\u2192`folder_open`, `generic-card`\u2192`generic_card`, `giftcard`\u2192`gift`, `hearing`\u2192`ear`, `hearing-disabled`\u2192`ear_disabled`, `heart`\u2192`heart`, `help`\u2192`question_mark_circle`, `id-card`\u2192`id_card`, `image`\u2192`image`, `info`\u2192`information_circle`, `key`\u2192`key`, `legal`\u2192`paragraph_mark`, `lightbulb`\u2192`light_bulb`, `lock-close`\u2192`lock_closed`, `lock-open`\u2192`lock_open`, `log-out`\u2192`log_out`, `logbook`\u2192`notebook`, `minus`\u2192`minus`, `piggybank`\u2192`piggy_bank`, `pin`\u2192`pin`, `print`\u2192`printer`, `pulse-wave`\u2192`pulse_wave`, `push-button`\u2192`finger_pushing_button`, `remove`\u2192`minus`, `resize`\u2192`resize`, `resize-handle-corner`\u2192`resize_handle_corner`, `save`\u2192`save`, `schedule`\u2192`clock`, `search`\u2192`magnifying_glass`, `send`\u2192`paper_plane`, `sepa`\u2192`sepa`, `settings`\u2192`gear_wheel`, `share`\u2192`share`, `shopping-bag`\u2192`shopping_bag`, `shopping-basket`\u2192`shopping_basket`, `shopping-basket-disabled`\u2192`shopping_basket_disabled`, `shopping-cart`\u2192`shopping_cart`, `shopping-cart-disabled`\u2192`shopping_cart_disabled`, `sort-down`\u2192`sort_down`, `sort-up`\u2192`sort_up`, `star`\u2192`star`, `swap-horizontal`\u2192`arrows_horizontal`, `swap-vertical`\u2192`arrows_vertical`, `thumb-up`\u2192`thumbs_up`, `thumb-up-down`\u2192`thumbs_down`, `translation`\u2192`translation`, `undo`\u2192`undo`, `upload`\u2192`upload`, `visibility-off`\u2192`eye_disabled`, `visibility`\u2192`eye`, `voucher`\u2192`voucher`, `website`\u2192`globe`, `zoom-in`\u2192`zoom_in`, `zoom-out`\u2192`zoom_out`, `clapperboard`\u2192`clapperboard`, `fast-backward`\u2192`fast_backward`, `fast-backward-10`\u2192`fast_backward_10`, `fast-backward-30`\u2192`fast_backward_30`, `fast-backward-empty`\u2192`fast_backward_empty`, `fast-forward`\u2192`fast_forward`, `fast-forward-10`\u2192`fast_forward_10`, `fast-forward-30`\u2192`fast_forward_30`, `fast-forward-empty`\u2192`fast_forward_empty`, `microphone`\u2192`microphone`, `pause`\u2192`pause`, `play`\u2192`play`, `skip-backward`\u2192`skip_backward`, `skip-forward`\u2192`skip_forward`, `stop`\u2192`stop`, `subtitles`\u2192`subtitles`, `volume-down`\u2192`volume_down`, `volume-mute`\u2192`volume_silent`, `volume-off`\u2192`volume_disabled`, `volume-up`\u2192`volume_up`, `logo`\u2192`db`, `call`\u2192`telephone`, `chat`\u2192`chat`, `conversation`\u2192`speech_bubbles`, `fax`\u2192`fax_machine`, `feedback`\u2192`speech_bubble_exclamation_mark`, `mail`\u2192`envelope`, `mobile-off`\u2192`mobile_phone_disabled`, `mobile-phone`\u2192`mobile_phone`, `question`\u2192`speech_bubble_question_mark`, `receive-item`\u2192`receive_item`, `share-item`\u2192`share_item`, `wifi`\u2192`wifi`, `wifi-off`\u2192`wifi_disabled`, `mask`\u2192`mask`, `playground`\u2192`toys`, `restricted-mobility-toilet`\u2192`restricted_mobility_toilet`, `shower`\u2192`shower`, `shower-men`\u2192`shower_men`, `shower-women`\u2192`shower_women`, `sink`\u2192`hand_washing`, `wc`\u2192`toilets`, `wc-men`\u2192`toilet_men`, `wc-sign`\u2192`wc_sign`, `wc-women`\u2192`toilet_women`, `air-condition`\u2192`air_condition`, `buggy`\u2192`stroller`, `clothing-hanger`\u2192`clothes_hanger`, `day`\u2192`sun`, `dog`\u2192`dog`, `entry-aid`\u2192`vehicle_entry_aid`, `environmental-mobility-check`\u2192`mobility_service_meeting_point`, `hydrogen`\u2192`water_drop`, `iceportal`\u2192`ice_portal`, `luggage-compartment`\u2192`luggage_compartment`, `luggage-rack`\u2192`luggage_rack`, `marketplace`\u2192`market`, `medical`\u2192`medical_cross`, `night`\u2192`moon`, `no-smoking`\u2192`cigarette_disabled`, `person-with-cane`\u2192`person_with_blind_cane`, `person-with-rollator`\u2192`person_with_rollator`, `platform`\u2192`platform`, `power-outlet`\u2192`power_socket`, `regioguide`\u2192`regio_guide`, `reservation`\u2192`reservation`, `standing-room`\u2192`standing_room`, `steppless-entry`\u2192`stepless_entry`, `support-dog`\u2192`support_dog`, `breakfast`\u2192`breakfast`, `coffee-cup`\u2192`cup`, `drink`\u2192`beverage`, `restaurant`\u2192`knife_and_fork`, `database`\u2192`database`, `1st-class`\u2192`first_class`, `2nd-class`\u2192`second_class`, `alternative-connection`\u2192`alternative_connection`, `booking`\u2192`booking`, `capacity-indicator`\u2192`capacity_indicator_moderate`, `capacity-indicator-fully-booked`\u2192`capacity_indicator_fully_booked`, `capacity-indicator-high`\u2192`capacity_indicator_high`, `capacity-indicator-low`\u2192`capacity_indicator_low`, `destination`\u2192`map_pin`, `intermediary-stop`\u2192`circle_small`, `mixed-class`\u2192`mixed_class`, `monochrome-capacity-indicator-high`\u2192`capacity_indicator_high`, `monochrome-capacity-indicator-low`\u2192`capacity_indicator_low`, `monochrome-capacity-indicator-moderate`\u2192`capacity_indicator_moderate`, `round-trip`\u2192`round_trip`, `single-trip`\u2192`single_trip`, `start`\u2192`start`, `compass`\u2192`compass`, `gps`\u2192`location_arrow`, `gps-north`\u2192`location_arrow_north`, `home`\u2192`house`, `map`\u2192`map`, `navigation-straight`\u2192`navigation_straight`, `navigation-to-left`\u2192`navigation_to_left`, `navigation-to-right`\u2192`navigation_to_right`, `navigation-u-turn`\u2192`navigation_u_turn`, `parking`\u2192`parking`, `place`\u2192`location_pin`, `set-position`\u2192`location_crosshairs`, `station`\u2192`station`, `stop-sign`\u2192`road_sign`, `train-station`\u2192`train_station`, `arrow-back`\u2192`arrow_left`, `arrow-down`\u2192`arrow_down`, `arrow-forward`\u2192`arrow_right`, `arrow-up`\u2192`arrow_up`, `cancel`\u2192`cross`, `chevron-left`\u2192`chevron_left`, `chevron-right`\u2192`chevron_right`, `close`\u2192`cross`, `expand-less`\u2192`chevron_up`, `expand-more`\u2192`chevron_down`, `fullscreen`\u2192`fullscreen`, `fullscreen-exit`\u2192`fullscreen_exit`, `grid-view`\u2192`grid`, `link`\u2192`link_chain`, `link-external`\u2192`arrow_up_right`, `list`\u2192`list`, `menu`\u2192`menu`, `more-horizontal`\u2192`more_horizontal`, `more-vertical`\u2192`more_vertical`, `refresh`\u2192`circular_arrows`, `error`\u2192`exclamation_mark_circle`, `notify`\u2192`bell`, `notify-cutoff`\u2192`bell`, `warning`\u2192`exclamation_mark_triangle`, `aisle`\u2192`aisle`, `aisle-not-available`\u2192`aisle_not_available`, `bed`\u2192`bed`, `childrens-compartment`\u2192`childrens_compartment`, `couchette`\u2192`couchette`, `elderly`\u2192`person_with_wheelchair`, `handicapped`\u2192`person_with_wheelchair`, `parent-child-compartment`\u2192`family_compartment`, `priority`\u2192`traveler_with_reduced_mobility`, `quiet-zone`\u2192`quiet_zone`, `table`\u2192`seat_table`, `traveler-with-reduced-mobility`\u2192`traveler_with_reduced_mobility`, `window`\u2192`seat_window`, `bahnbonus`\u2192`bahnbonus`, `bahnbonus-card`\u2192`bahnbonus_card`, `bahncard`\u2192`bahncard`, `best-price`\u2192`crown`, `commuter-ticket`\u2192`ticket_commuter`, `komfort-check-in`\u2192`komfort_check_in`, `komfort-check-in-check`\u2192`komfort_check_in_check`, `komfort-check-in-circle`\u2192`komfort_check_in_circle`, `multiple-cards`\u2192`bahncards`, `multiple-passenger`\u2192`persons`, `my-travel`\u2192`my_journey`, `outward-journey`\u2192`outward_journey`, `qr-code`\u2192`qr_code`, `qr-code-scan`\u2192`qr_code_scan`, `return-journey`\u2192`return_journey`, `ticket`\u2192`ticket`, `ticket-discount`\u2192`ticket_discount`, `ticket-subscription`\u2192`ticket_subscription`, `ticket-multiple`\u2192`tickets`, `time-outward-journey`\u2192`time_outward_journey`, `time-return-journey`\u2192`time_return_journey`, `timetable`\u2192`timetable`, `travel-insurance`\u2192`shield_check`, `airplane`\u2192`airplane`, `bicycle`\u2192`bike`, `bicycle-trailer`\u2192`bike_trailer`, `call-a-bike`\u2192`call_a_bike`, `car`\u2192`car`, `car-sequence`\u2192`coach_sequence`, `carsharing`\u2192`car_sharing`, `electric-locomotive`\u2192`electric_locomotive`, `electric-scooter`\u2192`electric_scooter`, `ev-bus`\u2192`bus`, `ev-car`\u2192`electric_car`, `ev-train`\u2192`train`, `ferry`\u2192`ship`, `handcart`\u2192`handcart`, `ice`\u2192`train`, `ice-side-view`\u2192`ice_side_view`, `intercity-train`\u2192`ic_and_ec`, `local-bus`\u2192`bus`, `local-train`\u2192`local_train`, `long-distance-bus`\u2192`long_distance_bus`, `rail-and-fly`\u2192`rail_and_fly`, `railroad-car`\u2192`coach`, `s-bahn`\u2192`s_bahn`, `scooter`\u2192`scooter`, `sev`\u2192`replacement_service`, `speedboat`\u2192`boat`, `sprinter`\u2192`sprinter`, `subway`\u2192`subway`, `taxi`\u2192`taxi`, `train-and-car`\u2192`train_and_car`, `tram`\u2192`tram`, `walking`\u2192`pedestrian`, `walking-fast`\u2192`walking_fast`\n" } };
|
|
37974
37974
|
|
|
37975
37975
|
// src/utils/manifest.ts
|
|
37976
37976
|
var _manifest = null;
|