@db-ux/mcp-server 4.7.0-tabs-34782eb → 4.7.1

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.
Files changed (2) hide show
  1. package/dist/index.js +32 -265
  2. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -23596,7 +23596,7 @@ var EMPTY_COMPLETION_RESULT = {
23596
23596
  // package.json
23597
23597
  var package_default = {
23598
23598
  name: "@db-ux/mcp-server",
23599
- version: "4.7.0",
23599
+ version: "4.7.1",
23600
23600
  type: "module",
23601
23601
  description: "MCP server for DB UX Design System \u2013 gives LLMs access to UI components and code examples",
23602
23602
  repository: {
@@ -38910,7 +38910,7 @@ import DBStack from "../stack.vue";
38910
38910
  <script setup lang="ts">
38911
38911
  import DBInfotext from "../../infotext/infotext.vue";
38912
38912
  import DBStack from "../stack.vue";
38913
- </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 ClickEventProps,\n GlobalProps,\n GlobalState,\n IconLeadingProps,\n IconProps,\n IconTrailingProps,\n InitializedState,\n ShowIconLeadingProps,\n ShowIconProps,\n ShowIconTrailingProps,\n WidthProps\n} from '../../shared/model';\n\nexport type DBTabItemDefaultProps = {\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 * Set the tabIndex manually (internal use for roving tabindex).\n */\n tabIndex?: number | string;\n /**\n * The id of the panel this tab controls (WAI-ARIA).\n */\n ariaControls?: string;\n /**\n * Semantic value of this tab item. When set, onIndexChange will emit this value\n * (via the onValueChange event) instead of only the numeric index.\n * Useful for form binding (e.g. Angular FormControl, React useState).\n */\n value?: string;\n};\n\nexport type DBTabItemProps = DBTabItemDefaultProps &\n GlobalProps &\n ClickEventProps<HTMLButtonElement> &\n IconProps &\n ShowIconProps &\n IconTrailingProps &\n IconLeadingProps &\n ShowIconTrailingProps &\n ShowIconLeadingProps &\n ActiveProps &\n WidthProps;\n\nexport type DBTabItemDefaultState = {\n internalActive: boolean | undefined;\n internalTabIndex: number;\n getCurrentTabIndex: () => number;\n _resizeObserver: ResizeObserver | null | undefined;\n _ariaSelectedListener: { fn: (event: any) => void } | null;\n handleClick: (event: any) => void;\n isTruncated: boolean;\n checkTruncation: () => void;\n tooltipText: string;\n};\n\nexport type DBTabItemState = DBTabItemDefaultState &\n GlobalState &\n InitializedState;\n", examples: ["Density", "States", "Show Icon Leading", "Show Icon Trailing", "Behavior", "Slot with Badge", "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', "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 data-density="functional">\n <DBTabItem label="Functional" />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="(Default) Regular" />\n </DBTabList>\n <DBTabList data-density="expressive">\n <DBTabItem 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 iconTrailing="x_placeholder"\n showIconTrailing={false}\n />\n </DBTabList>\n <DBTabList>\n <DBTabItem label="True" iconTrailing="x_placeholder" showIconTrailing />\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemShowIconTrailing;\n', "slot-with-badge.example.tsx": 'import * as React from "react";\nimport DBBadge from "../../badge/badge";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemSlotWithBadge(props: any) {\n return (\n <>\n <DBTabList>\n <DBTabItem>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Messages\n <DBBadge semantic="informational">134</DBBadge>\n </span>\n </DBTabItem>\n </DBTabList>\n <DBTabList>\n <DBTabItem>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Notifications\n <DBBadge semantic="neutral">433</DBBadge>\n </span>\n </DBTabItem>\n </DBTabList>\n </>\n );\n}\n\nexport default TabItemSlotWithBadge;\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', "tab-item-alignment-full-width.example.tsx": 'import * as React from "react";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabItem from "../tab-item";\n\nfunction TabItemAlignmentFullWidth(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 TabItemAlignmentFullWidth;\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', "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 data-density="functional"\n ><db-tab-item label="Functional"></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item label="(Default) Regular"></db-tab-item\n ></db-tab-list>\n <db-tab-list data-density="expressive"\n ><db-tab-item label="Expressive"></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 iconTrailing="x_placeholder"\n [showIconTrailing]="false"\n ></db-tab-item\n ></db-tab-list>\n <db-tab-list\n ><db-tab-item\n label="True"\n iconTrailing="x_placeholder"\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', "slot-with-badge.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBBadge } from "../../badge/badge";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\n@Component({\n selector: "tab-item-slot-with-badge",\n standalone: true,\n imports: [CommonModule, DBTabList, DBTabItem, DBBadge],\n template: `<ng-container\n ><db-tab-list\n ><db-tab-item\n ><span\n [ngStyle]="{\n display: \'flex\',\n alignItems: \'center\',\n gap: \'8px\'\n }"\n >\n Messages\n\n <db-badge semantic="informational">134</db-badge></span\n ></db-tab-item\n ></db-tab-list\n >\n <db-tab-list\n ><db-tab-item\n ><span\n [ngStyle]="{\n display: \'flex\',\n alignItems: \'center\',\n gap: \'8px\'\n }"\n >\n Notifications\n\n <db-badge semantic="neutral">433</db-badge></span\n ></db-tab-item\n ></db-tab-list\n ></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemSlotWithBadge 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-slot-with-badge");\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', "tab-item-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-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 TabItemAlignmentFullWidth 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-alignment-full-width");\n }\n }\n}\n' }, vue: { "behavior.example.vue": `<template>
38913
+ </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>
38914
38914
  <DBTabList><DBTabItem label="(Default) Auto Width"></DBTabItem></DBTabList>
38915
38915
  <DBTabList
38916
38916
  :style="{
@@ -38923,42 +38923,7 @@ import DBStack from "../stack.vue";
38923
38923
  <script setup lang="ts">
38924
38924
  import DBTabList from "../../tab-list/tab-list.vue";
38925
38925
  import DBTabItem from "../tab-item.vue";
38926
- </script>`, "density.example.vue": '<template>\n <DBTabList data-density="functional"\n ><DBTabItem label="Functional"></DBTabItem\n ></DBTabList>\n <DBTabList><DBTabItem label="(Default) Regular"></DBTabItem></DBTabList>\n <DBTabList data-density="expressive"\n ><DBTabItem label="Expressive"></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>', "show-icon-leading.example.vue": '<template>\n <DBTabList\n ><DBTabItem\n label="(Default) False"\n icon="x_placeholder"\n :showIcon="false"\n ></DBTabItem\n ></DBTabList>\n <DBTabList\n ><DBTabItem label="True" icon="x_placeholder" :showIcon="true"></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>', "show-icon-trailing.example.vue": '<template>\n <DBTabList\n ><DBTabItem\n label="(Default) False"\n iconTrailing="x_placeholder"\n :showIconTrailing="false"\n ></DBTabItem\n ></DBTabList>\n <DBTabList\n ><DBTabItem\n label="True"\n iconTrailing="x_placeholder"\n :showIconTrailing="true"\n ></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>', "slot-with-badge.example.vue": `<template>
38927
- <DBTabList
38928
- ><DBTabItem
38929
- ><span
38930
- :style="{
38931
- display: 'flex',
38932
- alignItems: 'center',
38933
- gap: '8px',
38934
- }"
38935
- >
38936
- Messages
38937
- <DBBadge semantic="informational">134</DBBadge></span
38938
- ></DBTabItem
38939
- ></DBTabList
38940
- >
38941
- <DBTabList
38942
- ><DBTabItem
38943
- ><span
38944
- :style="{
38945
- display: 'flex',
38946
- alignItems: 'center',
38947
- gap: '8px',
38948
- }"
38949
- >
38950
- Notifications
38951
- <DBBadge semantic="neutral">433</DBBadge></span
38952
- ></DBTabItem
38953
- ></DBTabList
38954
- >
38955
- </template>
38956
-
38957
- <script setup lang="ts">
38958
- import DBBadge from "../../badge/badge.vue";
38959
- import DBTabList from "../../tab-list/tab-list.vue";
38960
- import DBTabItem from "../tab-item.vue";
38961
- </script>`, "states.example.vue": '<template>\n <DBTabList><DBTabItem label="(Default) Enabled"></DBTabItem></DBTabList>\n <DBTabList><DBTabItem label="active" :active="true"></DBTabItem></DBTabList>\n <DBTabList\n ><DBTabItem label="disabled" :disabled="true"></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>', "tab-item-alignment-full-width.example.vue": `<template>
38926
+ </script>`, "content-alignment-full-width.example.vue": `<template>
38962
38927
  <DBTabList
38963
38928
  :style="{
38964
38929
  blockSize: '100%',
@@ -38976,12 +38941,13 @@ import DBTabItem from "../tab-item.vue";
38976
38941
  <script setup lang="ts">
38977
38942
  import DBTabList from "../../tab-list/tab-list.vue";
38978
38943
  import DBTabItem from "../tab-item.vue";
38979
- </script>` }, "web-components": { "behavior.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-behavior",\n})\nexport class TabItemBehavior {\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, "tab-item-behavior");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list>\n <db-tab-item label="(Default) Auto Width"></db-tab-item>\n </db-tab-list>\n <db-tab-list\n style={{\n blockSize: "100%",\n }}\n >\n <db-tab-item label="Width full"></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-density",\n})\nexport class TabItemDensity {\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, "tab-item-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list data-density="functional">\n <db-tab-item label="Functional"></db-tab-item>\n </db-tab-list>\n <db-tab-list>\n <db-tab-item label="(Default) Regular"></db-tab-item>\n </db-tab-list>\n <db-tab-list data-density="expressive">\n <db-tab-item label="Expressive"></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "show-icon-leading.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-show-icon-leading",\n})\nexport class TabItemShowIconLeading {\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, "tab-item-show-icon-leading");\n }\n\n render() {\n return (\n <Fragment>\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>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "show-icon-trailing.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-show-icon-trailing",\n})\nexport class TabItemShowIconTrailing {\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, "tab-item-show-icon-trailing");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list>\n <db-tab-item\n label="(Default) False"\n iconTrailing="x_placeholder"\n showIconTrailing={false}\n ></db-tab-item>\n </db-tab-list>\n <db-tab-list>\n <db-tab-item\n label="True"\n iconTrailing="x_placeholder"\n showIconTrailing={true}\n ></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "slot-with-badge.example.tsx": 'import { DBBadge } from "../../badge/badge";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-slot-with-badge",\n})\nexport class TabItemSlotWithBadge {\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, "tab-item-slot-with-badge");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list>\n <db-tab-item>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Messages\n <db-badge semantic="informational">134</db-badge>\n </span>\n </db-tab-item>\n </db-tab-list>\n <db-tab-list>\n <db-tab-item>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Notifications\n <db-badge semantic="neutral">433</db-badge>\n </span>\n </db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "states.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-states",\n})\nexport class TabItemStates {\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, "tab-item-states");\n }\n\n render() {\n return (\n <Fragment>\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 label="disabled" disabled={true}></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "tab-item-alignment-full-width.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-alignment-full-width",\n})\nexport class TabItemAlignmentFullWidth {\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, "tab-item-alignment-full-width");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list\n style={{\n blockSize: "100%",\n }}\n >\n <db-tab-item label="Left"></db-tab-item>\n </db-tab-list>\n <db-tab-list\n style={{\n blockSize: "100%",\n }}\n >\n <db-tab-item label="Centered"></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTabItem</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <label class="db-tab-item" htmlFor="test1" role="tab">\n <input type="radio" name="test" id="test1" />\n label 1\n </label>\n\n <label class="db-tab-item" htmlFor="test2" role="tab">\n <input type="radio" name="test" id="test2" checked />\n active\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test3"\n role="tab"\n data-icon="x_placeholder"\n >\n <input type="radio" name="test" id="test3" />\n icon - text (leading)\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test4"\n role="tab"\n data-icon-trailing="x_placeholder"\n >\n <input type="radio" name="test" id="test4" />\n text - icon (trailing)\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test5"\n role="tab"\n data-icon="x_placeholder"\n data-no-text="true"\n >\n <input type="radio" name="test" id="test5" />\n </label>\n\n <label class="db-tab-item" htmlFor="test6" role="tab" data-width="full">\n <input type="radio" name="test" id="test6" />\n width (full)\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test7"\n role="tab"\n data-width="full"\n data-alignment="center"\n >\n <input type="radio" name="test" id="test7" />\n width full (centered)\n </label>\n </body>\n</html>\n' } } }, "tab-list": { props: "import { GlobalProps, GlobalState, OrientationProps } from '../../shared/model';\n\nexport type DBTabListDefaultProps = {\n /**\n * Defines a string value that labels the current element (WAI-ARIA).\n */\n ariaLabel?: string;\n\n /**\n * Identifies the element (or elements) that labels the current element (WAI-ARIA).\n */\n ariaLabelledby?: string;\n};\n\nexport type DBTabListProps = DBTabListDefaultProps &\n GlobalProps &\n OrientationProps;\n\nexport interface DBTabListState extends GlobalState {\n _id?: string;\n}\n", examples: [], exampleCode: { react: {}, angular: {}, vue: {}, "web-components": {}, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTabList</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <h1>Horizontal</h1>\n <div\n class="db-tab-list"\n data-orientation="horizontal"\n aria-orientation="horizontal"\n >\n <label class="db-tab" htmlFor="test1" role="tab">\n <input type="radio" name="test" id="test1" />\n label 1\n </label>\n\n <label class="db-tab" htmlFor="test2" role="tab">\n <input type="radio" name="test" id="test2" checked />\n active\n </label>\n\n <label\n class="db-tab"\n htmlFor="test3"\n role="tab"\n data-icon="x_placeholder"\n >\n <input type="radio" name="test" id="test3" />\n icon - text (leading)\n </label>\n\n <label\n class="db-tab"\n htmlFor="test4"\n role="tab"\n data-icon-trailing="x_placeholder"\n >\n <input type="radio" name="test" id="test4" />\n text - icon (trailing)\n </label>\n </div>\n\n <h1>Vertical</h1>\n <div\n class="db-tab-list"\n data-orientation="vertical"\n aria-orientation="vertical"\n >\n <label class="db-tab" htmlFor="test1v" role="tab">\n <input type="radio" name="testv" id="test1v" />\n label 1\n </label>\n\n <label class="db-tab" htmlFor="test2v" role="tab">\n <input type="radio" name="testv" id="test2v" checked />\n active\n </label>\n\n <label\n class="db-tab"\n htmlFor="test3v"\n role="tab"\n data-icon="x_placeholder"\n >\n <input type="radio" name="testv" id="test3v" />\n icon - text (leading)\n </label>\n\n <label\n class="db-tab"\n htmlFor="test4v"\n role="tab"\n data-icon-trailing="x_placeholder"\n >\n <input type="radio" name="testv" id="test4v" />\n text - icon (trailing)\n </label>\n </div>\n </body>\n</html>\n' } } }, "tab-panel": { props: "import { GlobalProps } from '../../shared/model';\n\nexport type DBTabPanelDefaultProps = {\n /**\n * The content if you don't want to use children.\n */\n content?: string;\n /**\n * If the panel is hidden.\n */\n hidden?: boolean;\n /**\n * The id of the tab that labels this panel (WAI-ARIA).\n */\n ariaLabelledby?: string;\n /**\n * Accessible label for the panel, overrides ariaLabelledby for the accessible name.\n */\n ariaLabel?: string;\n};\n\nexport type DBTabPanelProps = DBTabPanelDefaultProps & GlobalProps;\n", examples: [], exampleCode: { react: {}, angular: {}, vue: {}, "web-components": {}, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTabPanel</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <article class="db-tab-panel" role="tabpanel">Test</article>\n </body>\n</html>\n' } } }, tabs: { props: `import {
38944
+ </script>`, "density.example.vue": '<template>\n <DBTabList\n ><DBTabItem data-density="functional" label="Functional"></DBTabItem\n ></DBTabList>\n <DBTabList\n ><DBTabItem data-density="regular" label="(Default) Regular"></DBTabItem\n ></DBTabList>\n <DBTabList\n ><DBTabItem data-density="expressive" label="Expressive"></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>', "show-icon-leading.example.vue": '<template>\n <DBTabList\n ><DBTabItem\n label="(Default) False"\n icon="x_placeholder"\n :showIcon="false"\n ></DBTabItem\n ></DBTabList>\n <DBTabList\n ><DBTabItem label="True" icon="x_placeholder" :showIcon="true"></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>', "show-icon-trailing.example.vue": '<template>\n <DBTabList\n ><DBTabItem\n label="(Default) False"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n :showIcon="false"\n :showIconTrailing="false"\n ></DBTabItem\n ></DBTabList>\n <DBTabList\n ><DBTabItem\n label="True"\n icon="x_placeholder"\n iconTrailing="x_placeholder"\n :showIcon="true"\n :showIconTrailing="true"\n ></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>', "states.example.vue": '<template>\n <DBTabList><DBTabItem label="(Default) Enabled"></DBTabItem></DBTabList>\n <DBTabList><DBTabItem label="active" :active="true"></DBTabItem></DBTabList>\n <DBTabList\n ><DBTabItem label="disabled" :disabled="true"></DBTabItem\n ></DBTabList>\n</template>\n\n<script setup lang="ts">\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabItem from "../tab-item.vue";\n</script>' }, "web-components": { "behavior.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-behavior",\n})\nexport class TabItemBehavior {\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, "tab-item-behavior");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list>\n <db-tab-item label="(Default) Auto Width"></db-tab-item>\n </db-tab-list>\n <db-tab-list\n style={{\n blockSize: "100%",\n }}\n >\n <db-tab-item label="Width full"></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "content-alignment-full-width.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-content-alignment-full-width",\n})\nexport class TabItemContentAlignmentFullWidth {\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(\n this._ref,\n "tab-item-content-alignment-full-width"\n );\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list\n style={{\n blockSize: "100%",\n }}\n >\n <db-tab-item label="Left"></db-tab-item>\n </db-tab-list>\n <db-tab-list\n style={{\n blockSize: "100%",\n }}\n >\n <db-tab-item label="Centered"></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-density",\n})\nexport class TabItemDensity {\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, "tab-item-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-tab-list>\n <db-tab-item\n data-density="functional"\n label="Functional"\n ></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>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "show-icon-leading.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-show-icon-leading",\n})\nexport class TabItemShowIconLeading {\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, "tab-item-show-icon-leading");\n }\n\n render() {\n return (\n <Fragment>\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>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "show-icon-trailing.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-show-icon-trailing",\n})\nexport class TabItemShowIconTrailing {\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, "tab-item-show-icon-trailing");\n }\n\n render() {\n return (\n <Fragment>\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>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n', "states.example.tsx": 'import { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabItem } from "../tab-item";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-states",\n})\nexport class TabItemStates {\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, "tab-item-states");\n }\n\n render() {\n return (\n <Fragment>\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 label="disabled" disabled={true}></db-tab-item>\n </db-tab-list>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTabItem</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <label class="db-tab-item" htmlFor="test1" role="tab">\n <input type="radio" name="test" id="test1" />\n label 1\n </label>\n\n <label class="db-tab-item" htmlFor="test2" role="tab">\n <input type="radio" name="test" id="test2" checked />\n active\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test3"\n role="tab"\n data-icon="x_placeholder"\n >\n <input type="radio" name="test" id="test3" />\n icon - text (leading)\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test4"\n role="tab"\n data-icon-trailing="x_placeholder"\n >\n <input type="radio" name="test" id="test4" />\n text - icon (trailing)\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test5"\n role="tab"\n data-icon="x_placeholder"\n data-no-text="true"\n >\n <input type="radio" name="test" id="test5" />\n </label>\n\n <label class="db-tab-item" htmlFor="test6" role="tab" data-width="full">\n <input type="radio" name="test" id="test6" />\n width (full)\n </label>\n\n <label\n class="db-tab-item"\n htmlFor="test7"\n role="tab"\n data-width="full"\n data-alignment="center"\n >\n <input type="radio" name="test" id="test7" />\n width full (centered)\n </label>\n </body>\n</html>\n' } } }, "tab-list": { props: "import { GlobalProps } from '../../shared/model';\n\nexport type DBTabListDefaultProps = {};\n\nexport type DBTabListProps = DBTabListDefaultProps & GlobalProps;\n\nexport type DBTabListDefaultState = {};\n\nexport type DBTabListState = DBTabListDefaultState;\n", examples: [], exampleCode: { react: {}, angular: {}, vue: {}, "web-components": {}, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTabList</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <h1>Horizontal</h1>\n <div\n class="db-tab-list"\n data-orientation="horizontal"\n aria-orientation="horizontal"\n >\n <label class="db-tab" htmlFor="test1" role="tab">\n <input type="radio" name="test" id="test1" />\n label 1\n </label>\n\n <label class="db-tab" htmlFor="test2" role="tab">\n <input type="radio" name="test" id="test2" checked />\n active\n </label>\n\n <label\n class="db-tab"\n htmlFor="test3"\n role="tab"\n data-icon="x_placeholder"\n >\n <input type="radio" name="test" id="test3" />\n icon - text (leading)\n </label>\n\n <label\n class="db-tab"\n htmlFor="test4"\n role="tab"\n data-icon-trailing="x_placeholder"\n >\n <input type="radio" name="test" id="test4" />\n text - icon (trailing)\n </label>\n </div>\n\n <h1>Vertical</h1>\n <div\n class="db-tab-list"\n data-orientation="vertical"\n aria-orientation="vertical"\n >\n <label class="db-tab" htmlFor="test1v" role="tab">\n <input type="radio" name="testv" id="test1v" />\n label 1\n </label>\n\n <label class="db-tab" htmlFor="test2v" role="tab">\n <input type="radio" name="testv" id="test2v" checked />\n active\n </label>\n\n <label\n class="db-tab"\n htmlFor="test3v"\n role="tab"\n data-icon="x_placeholder"\n >\n <input type="radio" name="testv" id="test3v" />\n icon - text (leading)\n </label>\n\n <label\n class="db-tab"\n htmlFor="test4v"\n role="tab"\n data-icon-trailing="x_placeholder"\n >\n <input type="radio" name="testv" id="test4v" />\n text - icon (trailing)\n </label>\n </div>\n </body>\n</html>\n' } } }, "tab-panel": { props: "import { GlobalProps, GlobalState } from '../../shared/model';\n\nexport type DBTabPanelDefaultProps = {\n /**\n * The content if you don't want to use children.\n */\n content?: string;\n};\n\nexport type DBTabPanelProps = DBTabPanelDefaultProps & GlobalProps;\n\nexport type DBTabPanelDefaultState = {};\n\nexport type DBTabPanelState = DBTabPanelDefaultState & GlobalState;\n", examples: [], exampleCode: { react: {}, angular: {}, vue: {}, "web-components": {}, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBTabPanel</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <article class="db-tab-panel" role="tabpanel">Test</article>\n </body>\n</html>\n' } } }, tabs: { props: `import {
38945
+ AlignmentProps,
38980
38946
  GlobalProps,
38981
38947
  InitializedState,
38948
+ InputEvent,
38982
38949
  OrientationProps,
38983
- TabItemAlignmentProps,
38984
- WidthType
38950
+ WidthProps
38985
38951
  } from '../../shared/model';
38986
38952
  import { DBTabItemProps } from '../tab-item/model';
38987
38953
  import { DBTabPanelProps } from '../tab-panel/model';
@@ -39009,13 +38975,6 @@ export type DBTabsDefaultProps = {
39009
38975
  */
39010
38976
  initialSelectedIndex?: number | string;
39011
38977
 
39012
- /**
39013
- * Controlled active tab index. When set, the component becomes controlled:
39014
- * the consumer is responsible for updating this value in the onIndexChange handler.
39015
- * Takes precedence over initialSelectedIndex after mount.
39016
- */
39017
- activeIndex?: number | string;
39018
-
39019
38978
  /**
39020
38979
  * Default behavior is auto selecting the first tab, disable it with 'manually'
39021
38980
  */
@@ -39030,21 +38989,6 @@ export type DBTabsDefaultProps = {
39030
38989
  * Provide simple tabs with label + text as content
39031
38990
  */
39032
38991
  tabs?: DBSimpleTabProps[] | string;
39033
-
39034
- /**
39035
- * Width of the tab-items. Auto width based on tab-item size, full width based on parent elements width.
39036
- */
39037
- tabItemWidth?: WidthType | string;
39038
-
39039
- /**
39040
- * Accessible label for the "scroll towards start" button (i18n). Only used with behavior="arrows".
39041
- */
39042
- scrollStartLabel?: string;
39043
-
39044
- /**
39045
- * Accessible label for the "scroll towards end" button (i18n). Only used with behavior="arrows".
39046
- */
39047
- scrollEndLabel?: string;
39048
38992
  };
39049
38993
 
39050
38994
  export type DBTabsEventProps = {
@@ -39057,99 +39001,40 @@ export type DBTabsEventProps = {
39057
39001
  * Informs the user if the current tab index has changed.
39058
39002
  */
39059
39003
  onIndexChange?: (index?: number) => void;
39004
+ /**
39005
+ * Informs the user if another tab has been selected.
39006
+ */
39007
+ onTabSelect?: (event?: InputEvent<HTMLElement>) => void;
39060
39008
 
39061
39009
  /**
39062
- * Fires when the active tab changes and a \`value\` prop is set on the tab items.
39063
- * Payload is the \`value\` string of the newly active tab item, or undefined
39064
- * if the tab item has no \`value\` prop set.
39065
- * Use this for form binding (e.g. Angular FormControl, React controlled state).
39010
+ * Informs the user if another tab has been selected.
39066
39011
  */
39067
- onValueChange?: (value?: string) => void;
39012
+ tabSelect?: (event?: InputEvent<HTMLElement>) => void;
39068
39013
  };
39069
39014
 
39070
39015
  export type DBTabsProps = DBTabsDefaultProps &
39071
39016
  GlobalProps &
39072
39017
  OrientationProps &
39073
- TabItemAlignmentProps &
39018
+ WidthProps &
39019
+ AlignmentProps &
39074
39020
  DBTabsEventProps;
39075
39021
 
39076
39022
  export type DBTabsDefaultState = {
39077
- _generatedId: string;
39078
- _generatedName: string;
39079
- _id: () => string;
39080
- _name: () => string;
39081
- _getScrollContainer: () => Element | null;
39082
- scroll: (toStart?: boolean) => void;
39083
- showScrollStart?: boolean;
39084
- showScrollEnd?: boolean;
39085
- _isRtl: () => boolean;
39023
+ _name: string;
39024
+ scrollContainer?: Element | null;
39025
+ scroll: (left?: boolean) => void;
39026
+ showScrollLeft?: boolean;
39027
+ showScrollRight?: boolean;
39086
39028
  evaluateScrollButtons: (tabList: Element) => void;
39087
- _cachedTabs: DBSimpleTabProps[];
39088
- _updateCachedTabs: () => void;
39029
+ convertTabs: () => DBSimpleTabProps[];
39089
39030
  initTabList: () => void;
39090
- initTabs: (activeIndex?: number) => void;
39091
- _resizeObserver?: ResizeObserver | null;
39092
- _observer?: MutationObserver | null;
39093
- _pendingRafId: number | null;
39094
- _scrollListener: { fn: () => void } | null;
39095
- activeTabIndex: number;
39096
- activateTab: (index: number) => void;
39097
- getTabId: (index: number | string) => string;
39098
- getPanelId: (index: number | string) => string;
39099
- handleClick: (event: any) => void;
39100
- handleKeyDown: (event: any) => void;
39101
- isIndexActive: (index: number | string) => boolean;
39102
- getTabItemTabIndex: (index: number | string) => 0 | -1;
39031
+ initTabs: (init?: boolean) => void;
39032
+ handleChange: (event: InputEvent<HTMLElement>) => void;
39033
+ _resizeObserver?: ResizeObserver;
39103
39034
  };
39104
39035
 
39105
39036
  export type DBTabsState = DBTabsDefaultState & InitializedState;
39106
- `, examples: ["Density", "Orientation", "Width", "Overflow", "Truncation", "Icons", "Disabled", "Slot with Badge", "URL Sync", "Nested Tabs", "Examples"], exampleCode: { react: { "density.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsDensity(props: any) {\n return (\n <>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Functional:\n </DBInfotext>\n <DBTabs data-density="functional">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n (Default) Regular:\n </DBInfotext>\n <DBTabs data-density="regular">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Expressive:\n </DBInfotext>\n <DBTabs data-density="expressive">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n </>\n );\n}\n\nexport default TabsDensity;\n', "disabled.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsDisabled(props: any) {\n return (\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n with disabled tab in the middle:\n </DBInfotext>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Active Tab</DBTabItem>\n <DBTabItem disabled>Disabled Tab</DBTabItem>\n <DBTabItem>Another Tab</DBTabItem>\n </DBTabList>\n <DBTabPanel>Panel for active tab</DBTabPanel>\n <DBTabPanel>Panel for disabled tab</DBTabPanel>\n <DBTabPanel>Panel for another tab</DBTabPanel>\n </DBTabs>\n </div>\n );\n}\n\nexport default TabsDisabled;\n', "examples.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsExamples(props: any) {\n return (\n <>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n 2nd tab selected:\n </DBInfotext>\n <DBTabs initialSelectedIndex={1}>\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n nothing selected:\n </DBInfotext>\n <DBTabs initialSelectedMode="manually">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n </>\n );\n}\n\nexport default TabsExamples;\n', "icons.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsIcons(props: any) {\n return (\n <>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n with leading icons:\n </DBInfotext>\n <DBTabs>\n <DBTabList>\n <DBTabItem icon="house" showIcon>\n Home\n </DBTabItem>\n <DBTabItem icon="magnifying_glass" showIcon>\n Search\n </DBTabItem>\n <DBTabItem icon="calendar" showIcon>\n Calendar\n </DBTabItem>\n </DBTabList>\n <DBTabPanel>Home content</DBTabPanel>\n <DBTabPanel>Search content</DBTabPanel>\n <DBTabPanel>Calendar content</DBTabPanel>\n </DBTabs>\n </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n with trailing icons:\n </DBInfotext>\n <DBTabs>\n <DBTabList>\n <DBTabItem iconTrailing="exclamation_mark_circle" showIconTrailing>\n Notifications\n </DBTabItem>\n <DBTabItem iconTrailing="information_circle" showIconTrailing>\n Info\n </DBTabItem>\n <DBTabItem iconTrailing="circular_arrows" showIconTrailing>\n Settings\n </DBTabItem>\n </DBTabList>\n <DBTabPanel>Notifications content</DBTabPanel>\n <DBTabPanel>Info content</DBTabPanel>\n <DBTabPanel>Settings content</DBTabPanel>\n </DBTabs>\n </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n icon-only (noText):\n </DBInfotext>\n <DBTabs>\n <DBTabList>\n <DBTabItem label="Home" icon="house" showIcon noText />\n <DBTabItem label="Search" icon="magnifying_glass" showIcon noText />\n <DBTabItem label="Calendar" icon="calendar" showIcon noText />\n </DBTabList>\n <DBTabPanel>Home content</DBTabPanel>\n <DBTabPanel>Search content</DBTabPanel>\n <DBTabPanel>Calendar content</DBTabPanel>\n </DBTabs>\n </div>\n </>\n );\n}\n\nexport default TabsIcons;\n', "nested.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsNested(props: any) {\n return (\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Nested Tabs:\n </DBInfotext>\n <DBTabs name="outer-tabs">\n <DBTabList>\n <DBTabItem>Overview</DBTabItem>\n <DBTabItem>Details</DBTabItem>\n <DBTabItem>Settings</DBTabItem>\n </DBTabList>\n <DBTabPanel>\n <p>Overview content without nested tabs.</p>\n </DBTabPanel>\n <DBTabPanel>\n <DBTabs name="inner-tabs">\n <DBTabList>\n <DBTabItem>Sub-Tab A</DBTabItem>\n <DBTabItem>Sub-Tab B</DBTabItem>\n </DBTabList>\n <DBTabPanel>Content of inner Sub-Tab A</DBTabPanel>\n <DBTabPanel>Content of inner Sub-Tab B</DBTabPanel>\n </DBTabs>\n </DBTabPanel>\n <DBTabPanel>\n <p>Settings content without nested tabs.</p>\n </DBTabPanel>\n </DBTabs>\n </div>\n );\n}\n\nexport default TabsNested;\n', "orientation.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsOrientation(props: any) {\n return (\n <>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n horizontal:\n </DBInfotext>\n <DBTabs orientation="horizontal">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n vertical:\n </DBInfotext>\n <DBTabs orientation="vertical">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n </>\n );\n}\n\nexport default TabsOrientation;\n', "overflow.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsOverflow(props: any) {\n return (\n <>\n <div\n className="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n no overflow:\n </DBInfotext>\n <DBTabs tabItemWidth="auto">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n <div\n className="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n with overflow - behavior: arrows:\n </DBInfotext>\n <DBTabs behavior="arrows">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n <DBTabItem>Test 4</DBTabItem>\n <DBTabItem>Test 5</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n <DBTabPanel>Tab Panel 4</DBTabPanel>\n <DBTabPanel>Tab Panel 5</DBTabPanel>\n </DBTabs>\n </div>\n <div\n className="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n with overflow - behavior: scrollbar:\n </DBInfotext>\n <DBTabs behavior="scrollbar">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n <DBTabItem>Test 4</DBTabItem>\n <DBTabItem>Test 5</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n <DBTabPanel>Tab Panel 4</DBTabPanel>\n <DBTabPanel>Tab Panel 5</DBTabPanel>\n </DBTabs>\n </div>\n <div\n className="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n arrows heavy load (12 tabs, custom distance 250px):\n </DBInfotext>\n <DBTabs behavior="arrows" arrowScrollDistance={250}>\n <DBTabList>\n <DBTabItem>Berlin</DBTabItem>\n <DBTabItem>M\xFCnchen</DBTabItem>\n <DBTabItem>Hamburg</DBTabItem>\n <DBTabItem>Frankfurt</DBTabItem>\n <DBTabItem>K\xF6ln</DBTabItem>\n <DBTabItem>Stuttgart</DBTabItem>\n <DBTabItem>D\xFCsseldorf</DBTabItem>\n <DBTabItem>Leipzig</DBTabItem>\n <DBTabItem>Hannover</DBTabItem>\n <DBTabItem>N\xFCrnberg</DBTabItem>\n <DBTabItem>Dresden</DBTabItem>\n <DBTabItem>Bremen</DBTabItem>\n </DBTabList>\n <DBTabPanel>Berlin</DBTabPanel>\n <DBTabPanel>M\xFCnchen</DBTabPanel>\n <DBTabPanel>Hamburg</DBTabPanel>\n <DBTabPanel>Frankfurt</DBTabPanel>\n <DBTabPanel>K\xF6ln</DBTabPanel>\n <DBTabPanel>Stuttgart</DBTabPanel>\n <DBTabPanel>D\xFCsseldorf</DBTabPanel>\n <DBTabPanel>Leipzig</DBTabPanel>\n <DBTabPanel>Hannover</DBTabPanel>\n <DBTabPanel>N\xFCrnberg</DBTabPanel>\n <DBTabPanel>Dresden</DBTabPanel>\n <DBTabPanel>Bremen</DBTabPanel>\n </DBTabs>\n </div>\n </>\n );\n}\n\nexport default TabsOverflow;\n', "slotWithBadge.example.tsx": 'import * as React from "react";\nimport DBBadge from "../../badge/badge";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsSlotWithBadge(props: any) {\n return (\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n tab-items with badges:\n </DBInfotext>\n <DBTabs>\n <DBTabList>\n <DBTabItem>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Messages\n <DBBadge semantic="informational">134</DBBadge>\n </span>\n </DBTabItem>\n <DBTabItem>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Notifications\n <DBBadge semantic="neutral">433</DBBadge>\n </span>\n </DBTabItem>\n <DBTabItem>Settings</DBTabItem>\n </DBTabList>\n <DBTabPanel>Messages content</DBTabPanel>\n <DBTabPanel>Notifications content</DBTabPanel>\n <DBTabPanel>Settings content</DBTabPanel>\n </DBTabs>\n </div>\n );\n}\n\nexport default TabsSlotWithBadge;\n', "tabItemWidth.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabItemWidth(props: any) {\n return (\n <>\n <div\n className="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n auto:\n </DBInfotext>\n <DBTabs tabItemWidth="auto">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n <div\n className="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n full - alignment: start:\n </DBInfotext>\n <DBTabs tabItemWidth="full">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n <div\n className="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n full - alignment: center:\n </DBInfotext>\n <DBTabs tabItemWidth="full" tabItemAlignment="center">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n <div\n className="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n full - alignment: end:\n </DBInfotext>\n <DBTabs tabItemWidth="full" tabItemAlignment="end">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n </>\n );\n}\n\nexport default TabItemWidth;\n', "truncation.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsTruncation(props: any) {\n return (\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n truncated tab label (vertical only):\n </DBInfotext>\n <DBTabs orientation="vertical" tabItemWidth="auto">\n <DBTabList>\n <DBTabItem label="Very long tab label that gets truncated" />\n <DBTabItem label="Another long label" />\n <DBTabItem label="Short" />\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n </DBTabs>\n </div>\n );\n}\n\nexport default TabsTruncation;\n', "urlSync.example.tsx": `import * as React from "react";
39107
- import DBInfotext from "../../infotext/infotext";
39108
- import DBTabItem from "../../tab-item/tab-item";
39109
- import DBTabList from "../../tab-list/tab-list";
39110
- import DBTabPanel from "../../tab-panel/tab-panel";
39111
- import DBTabs from "../tabs";
39112
-
39113
- function TabsUrlSync(props: any) {
39114
- return (
39115
- <>
39116
- <div className="fit-content-container">
39117
- <DBInfotext icon="none" size="small" semantic="informational">
39118
- 3rd tab pre-selected via initialSelectedIndex with a value parsed from
39119
- URL parameter:
39120
- </DBInfotext>
39121
- <DBTabs name="url-sync-index" initialSelectedIndex={2}>
39122
- <DBTabList>
39123
- <DBTabItem>Overview</DBTabItem>
39124
- <DBTabItem>Details</DBTabItem>
39125
- <DBTabItem>Settings</DBTabItem>
39126
- </DBTabList>
39127
- <DBTabPanel>Overview content</DBTabPanel>
39128
- <DBTabPanel>Details content</DBTabPanel>
39129
- <DBTabPanel>Settings content</DBTabPanel>
39130
- </DBTabs>
39131
- </div>
39132
- <div className="fit-content-container">
39133
- <DBInfotext icon="none" size="small" semantic="informational">
39134
- 2nd tab pre-selected with value props and 'onValueChange':
39135
- </DBInfotext>
39136
- <DBTabs name="url-sync-value" initialSelectedIndex={1}>
39137
- <DBTabList>
39138
- <DBTabItem value="overview">Overview</DBTabItem>
39139
- <DBTabItem value="details">Details</DBTabItem>
39140
- <DBTabItem value="settings">Settings</DBTabItem>
39141
- </DBTabList>
39142
- <DBTabPanel>Overview content</DBTabPanel>
39143
- <DBTabPanel>Details content</DBTabPanel>
39144
- <DBTabPanel>Settings content</DBTabPanel>
39145
- </DBTabs>
39146
- </div>
39147
- </>
39148
- );
39149
- }
39150
-
39151
- export default TabsUrlSync;
39152
- ` }, angular: { "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 { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-density",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Functional:\n </db-infotext>\n <db-tabs data-density="functional"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n (Default) Regular:\n </db-infotext>\n <db-tabs data-density="regular"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Expressive:\n </db-infotext>\n <db-tabs data-density="expressive"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsDensity 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, "tabs-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 { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-disabled",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n with disabled tab in the middle:\n </db-infotext>\n <db-tabs\n ><db-tab-list\n ><db-tab-item>Active Tab</db-tab-item>\n <db-tab-item [disabled]="true">Disabled Tab</db-tab-item>\n <db-tab-item>Another Tab</db-tab-item></db-tab-list\n >\n <db-tab-panel>Panel for active tab</db-tab-panel>\n <db-tab-panel>Panel for disabled tab</db-tab-panel>\n <db-tab-panel>Panel for another tab</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsDisabled 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, "tabs-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 { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-examples",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 2nd tab selected:\n </db-infotext>\n <db-tabs [initialSelectedIndex]="1"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n nothing selected:\n </db-infotext>\n <db-tabs initialSelectedMode="manually"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsExamples 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, "tabs-examples");\n }\n }\n}\n', "icons.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 { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-icons",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n with leading icons:\n </db-infotext>\n <db-tabs\n ><db-tab-list\n ><db-tab-item icon="house" [showIcon]="true"> Home </db-tab-item>\n <db-tab-item icon="magnifying_glass" [showIcon]="true">\n Search\n </db-tab-item>\n <db-tab-item icon="calendar" [showIcon]="true">\n Calendar\n </db-tab-item></db-tab-list\n >\n <db-tab-panel>Home content</db-tab-panel>\n <db-tab-panel>Search content</db-tab-panel>\n <db-tab-panel>Calendar content</db-tab-panel></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n with trailing icons:\n </db-infotext>\n <db-tabs\n ><db-tab-list\n ><db-tab-item\n iconTrailing="exclamation_mark_circle"\n [showIconTrailing]="true"\n >\n Notifications\n </db-tab-item>\n <db-tab-item\n iconTrailing="information_circle"\n [showIconTrailing]="true"\n >\n Info\n </db-tab-item>\n <db-tab-item iconTrailing="circular_arrows" [showIconTrailing]="true">\n Settings\n </db-tab-item></db-tab-list\n >\n <db-tab-panel>Notifications content</db-tab-panel>\n <db-tab-panel>Info content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n icon-only (noText):\n </db-infotext>\n <db-tabs\n ><db-tab-list\n ><db-tab-item\n label="Home"\n icon="house"\n [showIcon]="true"\n [noText]="true"\n ></db-tab-item>\n <db-tab-item\n label="Search"\n icon="magnifying_glass"\n [showIcon]="true"\n [noText]="true"\n ></db-tab-item>\n <db-tab-item\n label="Calendar"\n icon="calendar"\n [showIcon]="true"\n [noText]="true"\n ></db-tab-item\n ></db-tab-list>\n <db-tab-panel>Home content</db-tab-panel>\n <db-tab-panel>Search content</db-tab-panel>\n <db-tab-panel>Calendar content</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsIcons 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, "tabs-icons");\n }\n }\n}\n', "nested.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 { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-nested",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Nested Tabs:\n </db-infotext>\n <db-tabs name="outer-tabs"\n ><db-tab-list\n ><db-tab-item>Overview</db-tab-item>\n <db-tab-item>Details</db-tab-item>\n <db-tab-item>Settings</db-tab-item></db-tab-list\n >\n <db-tab-panel><p>Overview content without nested tabs.</p></db-tab-panel>\n <db-tab-panel\n ><db-tabs name="inner-tabs"\n ><db-tab-list\n ><db-tab-item>Sub-Tab A</db-tab-item>\n <db-tab-item>Sub-Tab B</db-tab-item></db-tab-list\n >\n <db-tab-panel>Content of inner Sub-Tab A</db-tab-panel>\n <db-tab-panel>Content of inner Sub-Tab B</db-tab-panel></db-tabs\n ></db-tab-panel\n >\n <db-tab-panel\n ><p>Settings content without nested tabs.</p></db-tab-panel\n ></db-tabs\n >\n </div> `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsNested 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, "tabs-nested");\n }\n }\n}\n', "orientation.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 { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-orientation",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n horizontal:\n </db-infotext>\n <db-tabs orientation="horizontal"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n vertical:\n </db-infotext>\n <db-tabs orientation="vertical"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsOrientation 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, "tabs-orientation");\n }\n }\n}\n', "overflow.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 { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-overflow",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div\n class="fit-content-container"\n [ngStyle]="{\n width: \'300px\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n no overflow:\n </db-infotext>\n <db-tabs tabItemWidth="auto"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'300px\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: arrows:\n </db-infotext>\n <db-tabs behavior="arrows"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</db-tab-item></db-tab-list\n >\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-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'300px\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: scrollbar:\n </db-infotext>\n <db-tabs behavior="scrollbar"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</db-tab-item></db-tab-list\n >\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-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'300px\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n arrows heavy load (12 tabs, custom distance 250px):\n </db-infotext>\n <db-tabs behavior="arrows" [arrowScrollDistance]="250"\n ><db-tab-list\n ><db-tab-item>Berlin</db-tab-item>\n <db-tab-item>M\xFCnchen</db-tab-item>\n <db-tab-item>Hamburg</db-tab-item>\n <db-tab-item>Frankfurt</db-tab-item>\n <db-tab-item>K\xF6ln</db-tab-item>\n <db-tab-item>Stuttgart</db-tab-item>\n <db-tab-item>D\xFCsseldorf</db-tab-item>\n <db-tab-item>Leipzig</db-tab-item>\n <db-tab-item>Hannover</db-tab-item>\n <db-tab-item>N\xFCrnberg</db-tab-item>\n <db-tab-item>Dresden</db-tab-item>\n <db-tab-item>Bremen</db-tab-item></db-tab-list\n >\n <db-tab-panel>Berlin</db-tab-panel>\n <db-tab-panel>M\xFCnchen</db-tab-panel>\n <db-tab-panel>Hamburg</db-tab-panel>\n <db-tab-panel>Frankfurt</db-tab-panel>\n <db-tab-panel>K\xF6ln</db-tab-panel>\n <db-tab-panel>Stuttgart</db-tab-panel>\n <db-tab-panel>D\xFCsseldorf</db-tab-panel>\n <db-tab-panel>Leipzig</db-tab-panel>\n <db-tab-panel>Hannover</db-tab-panel>\n <db-tab-panel>N\xFCrnberg</db-tab-panel>\n <db-tab-panel>Dresden</db-tab-panel>\n <db-tab-panel>Bremen</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsOverflow 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, "tabs-overflow");\n }\n }\n}\n', "slotWithBadge.example.ts": 'import {\n Component,\n viewChild,\n ElementRef,\n effect,\n AfterViewInit,\n} from "@angular/core";\nimport { CommonModule } from "@angular/common";\n\nimport { DBBadge } from "../../badge/badge";\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-slot-with-badge",\n standalone: true,\n imports: [\n CommonModule,\n DBInfotext,\n DBTabs,\n DBTabList,\n DBTabItem,\n DBBadge,\n DBTabPanel,\n ],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n tab-items with badges:\n </db-infotext>\n <db-tabs\n ><db-tab-list\n ><db-tab-item\n ><span\n [ngStyle]="{\n display: \'flex\',\n alignItems: \'center\',\n gap: \'8px\'\n }"\n >\n Messages\n\n <db-badge semantic="informational">134</db-badge></span\n ></db-tab-item\n >\n <db-tab-item\n ><span\n [ngStyle]="{\n display: \'flex\',\n alignItems: \'center\',\n gap: \'8px\'\n }"\n >\n Notifications\n\n <db-badge semantic="neutral">433</db-badge></span\n ></db-tab-item\n >\n <db-tab-item>Settings</db-tab-item></db-tab-list\n >\n <db-tab-panel>Messages content</db-tab-panel>\n <db-tab-panel>Notifications content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsSlotWithBadge 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, "tabs-slot-with-badge");\n }\n }\n}\n', "tabItemWidth.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 { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tab-item-width",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div\n class="fit-content-container"\n [ngStyle]="{\n width: \'100%\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n auto:\n </db-infotext>\n <db-tabs tabItemWidth="auto"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'100%\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: start:\n </db-infotext>\n <db-tabs tabItemWidth="full"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'100%\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: center:\n </db-infotext>\n <db-tabs tabItemWidth="full" tabItemAlignment="center"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'100%\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: end:\n </db-infotext>\n <db-tabs tabItemWidth="full" tabItemAlignment="end"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabItemWidth 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-width");\n }\n }\n}\n', "truncation.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 { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-truncation",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n truncated tab label (vertical only):\n </db-infotext>\n <db-tabs orientation="vertical" tabItemWidth="auto"\n ><db-tab-list\n ><db-tab-item\n label="Very long tab label that gets truncated"\n ></db-tab-item>\n <db-tab-item label="Another long label"></db-tab-item>\n <db-tab-item label="Short"></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></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsTruncation 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, "tabs-truncation");\n }\n }\n}\n', "urlSync.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 { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-url-sync",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 3rd tab pre-selected via initialSelectedIndex with a value parsed from\n URL parameter:\n </db-infotext>\n <db-tabs name="url-sync-index" [initialSelectedIndex]="2"\n ><db-tab-list\n ><db-tab-item>Overview</db-tab-item>\n <db-tab-item>Details</db-tab-item>\n <db-tab-item>Settings</db-tab-item></db-tab-list\n >\n <db-tab-panel>Overview content</db-tab-panel>\n <db-tab-panel>Details content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 2nd tab pre-selected with value props and \'onValueChange\':\n </db-infotext>\n <db-tabs name="url-sync-value" [initialSelectedIndex]="1"\n ><db-tab-list\n ><db-tab-item value="overview">Overview</db-tab-item>\n <db-tab-item value="details">Details</db-tab-item>\n <db-tab-item value="settings">Settings</db-tab-item></db-tab-list\n >\n <db-tab-panel>Overview content</db-tab-panel>\n <db-tab-panel>Details content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsUrlSync 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, "tabs-url-sync");\n }\n }\n}\n' }, vue: { "density.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Functional: </DBInfotext\n ><DBTabs data-density="functional"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n (Default) Regular: </DBInfotext\n ><DBTabs data-density="regular"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Expressive: </DBInfotext\n ><DBTabs data-density="expressive"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "disabled.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n with disabled tab in the middle: </DBInfotext\n ><DBTabs\n ><DBTabList\n ><DBTabItem>Active Tab</DBTabItem\n ><DBTabItem :disabled="true">Disabled Tab</DBTabItem\n ><DBTabItem>Another Tab</DBTabItem></DBTabList\n ><DBTabPanel>Panel for active tab</DBTabPanel\n ><DBTabPanel>Panel for disabled tab</DBTabPanel\n ><DBTabPanel>Panel for another tab</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "examples.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n 2nd tab selected: </DBInfotext\n ><DBTabs :initialSelectedIndex="1"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n nothing selected: </DBInfotext\n ><DBTabs initialSelectedMode="manually"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "icons.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n with leading icons: </DBInfotext\n ><DBTabs\n ><DBTabList\n ><DBTabItem icon="house" :showIcon="true"> Home </DBTabItem\n ><DBTabItem icon="magnifying_glass" :showIcon="true"> Search </DBTabItem\n ><DBTabItem icon="calendar" :showIcon="true">\n Calendar\n </DBTabItem></DBTabList\n ><DBTabPanel>Home content</DBTabPanel\n ><DBTabPanel>Search content</DBTabPanel\n ><DBTabPanel>Calendar content</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n with trailing icons: </DBInfotext\n ><DBTabs\n ><DBTabList\n ><DBTabItem\n iconTrailing="exclamation_mark_circle"\n :showIconTrailing="true"\n >\n Notifications </DBTabItem\n ><DBTabItem iconTrailing="information_circle" :showIconTrailing="true">\n Info </DBTabItem\n ><DBTabItem iconTrailing="circular_arrows" :showIconTrailing="true">\n Settings\n </DBTabItem></DBTabList\n ><DBTabPanel>Notifications content</DBTabPanel\n ><DBTabPanel>Info content</DBTabPanel\n ><DBTabPanel>Settings content</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n icon-only (noText): </DBInfotext\n ><DBTabs\n ><DBTabList\n ><DBTabItem\n label="Home"\n icon="house"\n :showIcon="true"\n :noText="true"\n ></DBTabItem\n ><DBTabItem\n label="Search"\n icon="magnifying_glass"\n :showIcon="true"\n :noText="true"\n ></DBTabItem\n ><DBTabItem\n label="Calendar"\n icon="calendar"\n :showIcon="true"\n :noText="true"\n ></DBTabItem></DBTabList\n ><DBTabPanel>Home content</DBTabPanel\n ><DBTabPanel>Search content</DBTabPanel\n ><DBTabPanel>Calendar content</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "nested.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Nested Tabs: </DBInfotext\n ><DBTabs name="outer-tabs"\n ><DBTabList\n ><DBTabItem>Overview</DBTabItem><DBTabItem>Details</DBTabItem\n ><DBTabItem>Settings</DBTabItem></DBTabList\n ><DBTabPanel><p>Overview content without nested tabs.</p></DBTabPanel\n ><DBTabPanel\n ><DBTabs name="inner-tabs"\n ><DBTabList\n ><DBTabItem>Sub-Tab A</DBTabItem\n ><DBTabItem>Sub-Tab B</DBTabItem></DBTabList\n ><DBTabPanel>Content of inner Sub-Tab A</DBTabPanel\n ><DBTabPanel>Content of inner Sub-Tab B</DBTabPanel></DBTabs\n ></DBTabPanel\n ><DBTabPanel\n ><p>Settings content without nested tabs.</p></DBTabPanel\n ></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "orientation.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n horizontal: </DBInfotext\n ><DBTabs orientation="horizontal"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n vertical: </DBInfotext\n ><DBTabs orientation="vertical"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "overflow.example.vue": `<template>
39037
+ `, examples: ["Density", "Orientation", "Width", "Overflow", "Examples"], exampleCode: { react: { "density.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsDensity(props: any) {\n return (\n <>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Functional:\n </DBInfotext>\n <DBTabs data-density="functional">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n (Default) Regular:\n </DBInfotext>\n <DBTabs data-density="regular">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Expressive:\n </DBInfotext>\n <DBTabs data-density="expressive">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n </>\n );\n}\n\nexport default TabsDensity;\n', "examples.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsExamples(props: any) {\n return (\n <>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n 2nd tab selected:\n </DBInfotext>\n <DBTabs initialSelectedIndex={1}>\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n nothing selected:\n </DBInfotext>\n <DBTabs initialSelectedMode="manually">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n </>\n );\n}\n\nexport default TabsExamples;\n', "orientation.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsOrientation(props: any) {\n return (\n <>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n horizontal:\n </DBInfotext>\n <DBTabs orientation="horizontal">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n <div className="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n vertical:\n </DBInfotext>\n <DBTabs orientation="vertical">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n </>\n );\n}\n\nexport default TabsOrientation;\n', "overflow.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsOverflow(props: any) {\n return (\n <>\n <div\n className="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n no overflow:\n </DBInfotext>\n <DBTabs width="auto">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n <div\n className="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n with overflow - behavior: arrows:\n </DBInfotext>\n <DBTabs behavior="arrows">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n <DBTabItem>Test 4</DBTabItem>\n <DBTabItem>Test 5</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n <DBTabPanel>Tab Panel 4</DBTabPanel>\n <DBTabPanel>Tab Panel 5</DBTabPanel>\n </DBTabs>\n </div>\n <div\n className="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n with overflow - behavior: scrollbar:\n </DBInfotext>\n <DBTabs>\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 3</DBTabItem>\n <DBTabItem>Test 4</DBTabItem>\n <DBTabItem>Test 5</DBTabItem>\n </DBTabList>\n <DBTabPanel>Tab Panel 1</DBTabPanel>\n <DBTabPanel>Tab Panel 2</DBTabPanel>\n <DBTabPanel>Tab Panel 3</DBTabPanel>\n <DBTabPanel>Tab Panel 4</DBTabPanel>\n <DBTabPanel>Tab Panel 5</DBTabPanel>\n </DBTabs>\n </div>\n </>\n );\n}\n\nexport default TabsOverflow;\n', "width.example.tsx": 'import * as React from "react";\nimport DBInfotext from "../../infotext/infotext";\nimport DBTabItem from "../../tab-item/tab-item";\nimport DBTabList from "../../tab-list/tab-list";\nimport DBTabPanel from "../../tab-panel/tab-panel";\nimport DBTabs from "../tabs";\n\nfunction TabsWidth(props: any) {\n return (\n <>\n <div\n className="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n auto:\n </DBInfotext>\n <DBTabs width="auto">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n <div\n className="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n full - alignment: start:\n </DBInfotext>\n <DBTabs width="full">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n <div\n className="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <DBInfotext icon="none" size="small" semantic="informational">\n full - alignment: center:\n </DBInfotext>\n <DBTabs width="full" alignment="center">\n <DBTabList>\n <DBTabItem>Test 1</DBTabItem>\n <DBTabItem>Test 2</DBTabItem>\n <DBTabItem>Test 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 </div>\n </>\n );\n}\n\nexport default TabsWidth;\n' }, angular: { "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 { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-density",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Functional:\n </db-infotext>\n <db-tabs data-density="functional"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n (Default) Regular:\n </db-infotext>\n <db-tabs data-density="regular"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Expressive:\n </db-infotext>\n <db-tabs data-density="expressive"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsDensity 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, "tabs-density");\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 { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-examples",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 2nd tab selected:\n </db-infotext>\n <db-tabs [initialSelectedIndex]="1"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n nothing selected:\n </db-infotext>\n <db-tabs initialSelectedMode="manually"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsExamples 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, "tabs-examples");\n }\n }\n}\n', "orientation.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 { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-orientation",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n horizontal:\n </db-infotext>\n <db-tabs orientation="horizontal"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n vertical:\n </db-infotext>\n <db-tabs orientation="vertical"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsOrientation 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, "tabs-orientation");\n }\n }\n}\n', "overflow.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 { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-overflow",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div\n class="fit-content-container"\n [ngStyle]="{\n width: \'300px\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n no overflow:\n </db-infotext>\n <db-tabs width="auto"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'300px\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: arrows:\n </db-infotext>\n <db-tabs behavior="arrows"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</db-tab-item></db-tab-list\n >\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-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'300px\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: scrollbar:\n </db-infotext>\n <db-tabs\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</db-tab-item></db-tab-list\n >\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-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsOverflow 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, "tabs-overflow");\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 { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\n@Component({\n selector: "tabs-width",\n standalone: true,\n imports: [CommonModule, DBInfotext, DBTabs, DBTabList, DBTabItem, DBTabPanel],\n template: `<ng-container\n ><div\n class="fit-content-container"\n [ngStyle]="{\n width: \'100%\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n auto:\n </db-infotext>\n <db-tabs width="auto"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'100%\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: start:\n </db-infotext>\n <db-tabs width="full"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div>\n <div\n class="fit-content-container"\n [ngStyle]="{\n width: \'100%\'\n }"\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: center:\n </db-infotext>\n <db-tabs width="full" alignment="center"\n ><db-tab-list\n ><db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item></db-tab-list\n >\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></db-tabs\n >\n </div></ng-container\n > `,\n styles: `:host { display: contents; }`,\n})\nexport class TabsWidth 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, "tabs-width");\n }\n }\n}\n' }, vue: { "density.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Functional: </DBInfotext\n ><DBTabs data-density="functional"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n (Default) Regular: </DBInfotext\n ><DBTabs data-density="regular"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n Expressive: </DBInfotext\n ><DBTabs data-density="expressive"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "examples.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n 2nd tab selected: </DBInfotext\n ><DBTabs :initialSelectedIndex="1"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n nothing selected: </DBInfotext\n ><DBTabs initialSelectedMode="manually"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "orientation.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n horizontal: </DBInfotext\n ><DBTabs orientation="horizontal"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n vertical: </DBInfotext\n ><DBTabs orientation="vertical"\n ><DBTabList\n ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem\n ><DBTabItem>Test 3</DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "overflow.example.vue": `<template>
39153
39038
  <div
39154
39039
  class="fit-content-container"
39155
39040
  :style="{
@@ -39158,7 +39043,7 @@ export default TabsUrlSync;
39158
39043
  >
39159
39044
  <DBInfotext icon="none" size="small" semantic="informational">
39160
39045
  no overflow: </DBInfotext
39161
- ><DBTabs tabItemWidth="auto"
39046
+ ><DBTabs width="auto"
39162
39047
  ><DBTabList
39163
39048
  ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem
39164
39049
  ><DBTabItem>Test 3</DBTabItem></DBTabList
@@ -39192,7 +39077,7 @@ export default TabsUrlSync;
39192
39077
  >
39193
39078
  <DBInfotext icon="none" size="small" semantic="informational">
39194
39079
  with overflow - behavior: scrollbar: </DBInfotext
39195
- ><DBTabs behavior="scrollbar"
39080
+ ><DBTabs
39196
39081
  ><DBTabList
39197
39082
  ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem
39198
39083
  ><DBTabItem>Test 3</DBTabItem><DBTabItem>Test 4</DBTabItem
@@ -39202,82 +39087,15 @@ export default TabsUrlSync;
39202
39087
  ><DBTabPanel>Tab Panel 5</DBTabPanel></DBTabs
39203
39088
  >
39204
39089
  </div>
39205
- <div
39206
- class="fit-content-container"
39207
- :style="{
39208
- width: '300px',
39209
- }"
39210
- >
39211
- <DBInfotext icon="none" size="small" semantic="informational">
39212
- arrows heavy load (12 tabs, custom distance 250px): </DBInfotext
39213
- ><DBTabs behavior="arrows" :arrowScrollDistance="250"
39214
- ><DBTabList
39215
- ><DBTabItem>Berlin</DBTabItem><DBTabItem>M\xFCnchen</DBTabItem
39216
- ><DBTabItem>Hamburg</DBTabItem><DBTabItem>Frankfurt</DBTabItem
39217
- ><DBTabItem>K\xF6ln</DBTabItem><DBTabItem>Stuttgart</DBTabItem
39218
- ><DBTabItem>D\xFCsseldorf</DBTabItem><DBTabItem>Leipzig</DBTabItem
39219
- ><DBTabItem>Hannover</DBTabItem><DBTabItem>N\xFCrnberg</DBTabItem
39220
- ><DBTabItem>Dresden</DBTabItem><DBTabItem>Bremen</DBTabItem></DBTabList
39221
- ><DBTabPanel>Berlin</DBTabPanel><DBTabPanel>M\xFCnchen</DBTabPanel
39222
- ><DBTabPanel>Hamburg</DBTabPanel><DBTabPanel>Frankfurt</DBTabPanel
39223
- ><DBTabPanel>K\xF6ln</DBTabPanel><DBTabPanel>Stuttgart</DBTabPanel
39224
- ><DBTabPanel>D\xFCsseldorf</DBTabPanel><DBTabPanel>Leipzig</DBTabPanel
39225
- ><DBTabPanel>Hannover</DBTabPanel><DBTabPanel>N\xFCrnberg</DBTabPanel
39226
- ><DBTabPanel>Dresden</DBTabPanel><DBTabPanel>Bremen</DBTabPanel></DBTabs
39227
- >
39228
- </div>
39229
- </template>
39230
-
39231
- <script setup lang="ts">
39232
- import DBInfotext from "../../infotext/infotext.vue";
39233
- import DBTabItem from "../../tab-item/tab-item.vue";
39234
- import DBTabList from "../../tab-list/tab-list.vue";
39235
- import DBTabPanel from "../../tab-panel/tab-panel.vue";
39236
- import DBTabs from "../tabs.vue";
39237
- </script>`, "slotWithBadge.example.vue": `<template>
39238
- <div class="fit-content-container">
39239
- <DBInfotext icon="none" size="small" semantic="informational">
39240
- tab-items with badges: </DBInfotext
39241
- ><DBTabs
39242
- ><DBTabList
39243
- ><DBTabItem
39244
- ><span
39245
- :style="{
39246
- display: 'flex',
39247
- alignItems: 'center',
39248
- gap: '8px',
39249
- }"
39250
- >
39251
- Messages
39252
- <DBBadge semantic="informational">134</DBBadge></span
39253
- ></DBTabItem
39254
- ><DBTabItem
39255
- ><span
39256
- :style="{
39257
- display: 'flex',
39258
- alignItems: 'center',
39259
- gap: '8px',
39260
- }"
39261
- >
39262
- Notifications
39263
- <DBBadge semantic="neutral">433</DBBadge></span
39264
- ></DBTabItem
39265
- ><DBTabItem>Settings</DBTabItem></DBTabList
39266
- ><DBTabPanel>Messages content</DBTabPanel
39267
- ><DBTabPanel>Notifications content</DBTabPanel
39268
- ><DBTabPanel>Settings content</DBTabPanel></DBTabs
39269
- >
39270
- </div>
39271
39090
  </template>
39272
39091
 
39273
39092
  <script setup lang="ts">
39274
- import DBBadge from "../../badge/badge.vue";
39275
39093
  import DBInfotext from "../../infotext/infotext.vue";
39276
39094
  import DBTabItem from "../../tab-item/tab-item.vue";
39277
39095
  import DBTabList from "../../tab-list/tab-list.vue";
39278
39096
  import DBTabPanel from "../../tab-panel/tab-panel.vue";
39279
39097
  import DBTabs from "../tabs.vue";
39280
- </script>`, "tabItemWidth.example.vue": `<template>
39098
+ </script>`, "width.example.vue": `<template>
39281
39099
  <div
39282
39100
  class="fit-content-container"
39283
39101
  :style="{
@@ -39286,7 +39104,7 @@ import DBTabs from "../tabs.vue";
39286
39104
  >
39287
39105
  <DBInfotext icon="none" size="small" semantic="informational">
39288
39106
  auto: </DBInfotext
39289
- ><DBTabs tabItemWidth="auto"
39107
+ ><DBTabs width="auto"
39290
39108
  ><DBTabList
39291
39109
  ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem
39292
39110
  ><DBTabItem>Test 3</DBTabItem></DBTabList
@@ -39302,7 +39120,7 @@ import DBTabs from "../tabs.vue";
39302
39120
  >
39303
39121
  <DBInfotext icon="none" size="small" semantic="informational">
39304
39122
  full - alignment: start: </DBInfotext
39305
- ><DBTabs tabItemWidth="full"
39123
+ ><DBTabs width="full"
39306
39124
  ><DBTabList
39307
39125
  ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem
39308
39126
  ><DBTabItem>Test 3</DBTabItem></DBTabList
@@ -39318,7 +39136,7 @@ import DBTabs from "../tabs.vue";
39318
39136
  >
39319
39137
  <DBInfotext icon="none" size="small" semantic="informational">
39320
39138
  full - alignment: center: </DBInfotext
39321
- ><DBTabs tabItemWidth="full" tabItemAlignment="center"
39139
+ ><DBTabs width="full" alignment="center"
39322
39140
  ><DBTabList
39323
39141
  ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem
39324
39142
  ><DBTabItem>Test 3</DBTabItem></DBTabList
@@ -39326,57 +39144,6 @@ import DBTabs from "../tabs.vue";
39326
39144
  ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
39327
39145
  >
39328
39146
  </div>
39329
- <div
39330
- class="fit-content-container"
39331
- :style="{
39332
- width: '100%',
39333
- }"
39334
- >
39335
- <DBInfotext icon="none" size="small" semantic="informational">
39336
- full - alignment: end: </DBInfotext
39337
- ><DBTabs tabItemWidth="full" tabItemAlignment="end"
39338
- ><DBTabList
39339
- ><DBTabItem>Test 1</DBTabItem><DBTabItem>Test 2</DBTabItem
39340
- ><DBTabItem>Test 3</DBTabItem></DBTabList
39341
- ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
39342
- ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
39343
- >
39344
- </div>
39345
- </template>
39346
-
39347
- <script setup lang="ts">
39348
- import DBInfotext from "../../infotext/infotext.vue";
39349
- import DBTabItem from "../../tab-item/tab-item.vue";
39350
- import DBTabList from "../../tab-list/tab-list.vue";
39351
- import DBTabPanel from "../../tab-panel/tab-panel.vue";
39352
- import DBTabs from "../tabs.vue";
39353
- </script>`, "truncation.example.vue": '<template>\n <div class="fit-content-container">\n <DBInfotext icon="none" size="small" semantic="informational">\n truncated tab label (vertical only): </DBInfotext\n ><DBTabs orientation="vertical" tabItemWidth="auto"\n ><DBTabList\n ><DBTabItem label="Very long tab label that gets truncated"></DBTabItem\n ><DBTabItem label="Another long label"></DBTabItem\n ><DBTabItem label="Short"></DBTabItem></DBTabList\n ><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel\n ><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs\n >\n </div>\n</template>\n\n<script setup lang="ts">\nimport DBInfotext from "../../infotext/infotext.vue";\nimport DBTabItem from "../../tab-item/tab-item.vue";\nimport DBTabList from "../../tab-list/tab-list.vue";\nimport DBTabPanel from "../../tab-panel/tab-panel.vue";\nimport DBTabs from "../tabs.vue";\n</script>', "urlSync.example.vue": `<template>
39354
- <div class="fit-content-container">
39355
- <DBInfotext icon="none" size="small" semantic="informational">
39356
- 3rd tab pre-selected via initialSelectedIndex with a value parsed from URL
39357
- parameter: </DBInfotext
39358
- ><DBTabs name="url-sync-index" :initialSelectedIndex="2"
39359
- ><DBTabList
39360
- ><DBTabItem>Overview</DBTabItem><DBTabItem>Details</DBTabItem
39361
- ><DBTabItem>Settings</DBTabItem></DBTabList
39362
- ><DBTabPanel>Overview content</DBTabPanel
39363
- ><DBTabPanel>Details content</DBTabPanel
39364
- ><DBTabPanel>Settings content</DBTabPanel></DBTabs
39365
- >
39366
- </div>
39367
- <div class="fit-content-container">
39368
- <DBInfotext icon="none" size="small" semantic="informational">
39369
- 2nd tab pre-selected with value props and 'onValueChange': </DBInfotext
39370
- ><DBTabs name="url-sync-value" :initialSelectedIndex="1"
39371
- ><DBTabList
39372
- ><DBTabItem value="overview">Overview</DBTabItem
39373
- ><DBTabItem value="details">Details</DBTabItem
39374
- ><DBTabItem value="settings">Settings</DBTabItem></DBTabList
39375
- ><DBTabPanel>Overview content</DBTabPanel
39376
- ><DBTabPanel>Details content</DBTabPanel
39377
- ><DBTabPanel>Settings content</DBTabPanel></DBTabs
39378
- >
39379
- </div>
39380
39147
  </template>
39381
39148
 
39382
39149
  <script setup lang="ts">
@@ -39385,7 +39152,7 @@ import DBTabItem from "../../tab-item/tab-item.vue";
39385
39152
  import DBTabList from "../../tab-list/tab-list.vue";
39386
39153
  import DBTabPanel from "../../tab-panel/tab-panel.vue";
39387
39154
  import DBTabs from "../tabs.vue";
39388
- </script>` }, "web-components": { "density.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-density",\n})\nexport class TabsDensity {\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, "tabs-density");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Functional:\n </db-infotext>\n <db-tabs data-density="functional">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n (Default) Regular:\n </db-infotext>\n <db-tabs data-density="regular">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Expressive:\n </db-infotext>\n <db-tabs data-density="expressive">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n </Fragment>\n );\n }\n}\n', "disabled.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-disabled",\n})\nexport class TabsDisabled {\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, "tabs-disabled");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n with disabled tab in the middle:\n </db-infotext>\n <db-tabs>\n <db-tab-list>\n <db-tab-item>Active Tab</db-tab-item>\n <db-tab-item disabled={true}>Disabled Tab</db-tab-item>\n <db-tab-item>Another Tab</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Panel for active tab</db-tab-panel>\n <db-tab-panel>Panel for disabled tab</db-tab-panel>\n <db-tab-panel>Panel for another tab</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "examples.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-examples",\n})\nexport class TabsExamples {\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, "tabs-examples");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 2nd tab selected:\n </db-infotext>\n <db-tabs initialSelectedIndex={1}>\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n nothing selected:\n </db-infotext>\n <db-tabs initialSelectedMode="manually">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n </Fragment>\n );\n }\n}\n', "icons.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-icons",\n})\nexport class TabsIcons {\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, "tabs-icons");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n with leading icons:\n </db-infotext>\n <db-tabs>\n <db-tab-list>\n <db-tab-item icon="house" showIcon={true}>\n Home\n </db-tab-item>\n <db-tab-item icon="magnifying_glass" showIcon={true}>\n Search\n </db-tab-item>\n <db-tab-item icon="calendar" showIcon={true}>\n Calendar\n </db-tab-item>\n </db-tab-list>\n <db-tab-panel>Home content</db-tab-panel>\n <db-tab-panel>Search content</db-tab-panel>\n <db-tab-panel>Calendar content</db-tab-panel>\n </db-tabs>\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n with trailing icons:\n </db-infotext>\n <db-tabs>\n <db-tab-list>\n <db-tab-item\n iconTrailing="exclamation_mark_circle"\n showIconTrailing={true}\n >\n Notifications\n </db-tab-item>\n <db-tab-item\n iconTrailing="information_circle"\n showIconTrailing={true}\n >\n Info\n </db-tab-item>\n <db-tab-item\n iconTrailing="circular_arrows"\n showIconTrailing={true}\n >\n Settings\n </db-tab-item>\n </db-tab-list>\n <db-tab-panel>Notifications content</db-tab-panel>\n <db-tab-panel>Info content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel>\n </db-tabs>\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n icon-only (noText):\n </db-infotext>\n <db-tabs>\n <db-tab-list>\n <db-tab-item\n label="Home"\n icon="house"\n showIcon={true}\n noText={true}\n ></db-tab-item>\n <db-tab-item\n label="Search"\n icon="magnifying_glass"\n showIcon={true}\n noText={true}\n ></db-tab-item>\n <db-tab-item\n label="Calendar"\n icon="calendar"\n showIcon={true}\n noText={true}\n ></db-tab-item>\n </db-tab-list>\n <db-tab-panel>Home content</db-tab-panel>\n <db-tab-panel>Search content</db-tab-panel>\n <db-tab-panel>Calendar content</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "nested.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-nested",\n})\nexport class TabsNested {\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, "tabs-nested");\n }\n\n render() {\n return (\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Nested Tabs:\n </db-infotext>\n <db-tabs name="outer-tabs">\n <db-tab-list>\n <db-tab-item>Overview</db-tab-item>\n <db-tab-item>Details</db-tab-item>\n <db-tab-item>Settings</db-tab-item>\n </db-tab-list>\n <db-tab-panel>\n <p>Overview content without nested tabs.</p>\n </db-tab-panel>\n <db-tab-panel>\n <db-tabs name="inner-tabs">\n <db-tab-list>\n <db-tab-item>Sub-Tab A</db-tab-item>\n <db-tab-item>Sub-Tab B</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Content of inner Sub-Tab A</db-tab-panel>\n <db-tab-panel>Content of inner Sub-Tab B</db-tab-panel>\n </db-tabs>\n </db-tab-panel>\n <db-tab-panel>\n <p>Settings content without nested tabs.</p>\n </db-tab-panel>\n </db-tabs>\n </div>\n );\n }\n}\n', "orientation.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-orientation",\n})\nexport class TabsOrientation {\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, "tabs-orientation");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n horizontal:\n </db-infotext>\n <db-tabs orientation="horizontal">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n vertical:\n </db-infotext>\n <db-tabs orientation="vertical">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n </Fragment>\n );\n }\n}\n', "overflow.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-overflow",\n})\nexport class TabsOverflow {\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, "tabs-overflow");\n }\n\n render() {\n return (\n <Fragment>\n <div\n class="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n no overflow:\n </db-infotext>\n <db-tabs tabItemWidth="auto">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n <div\n class="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: arrows:\n </db-infotext>\n <db-tabs behavior="arrows">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</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-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel>\n </db-tabs>\n </div>\n <div\n class="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: scrollbar:\n </db-infotext>\n <db-tabs behavior="scrollbar">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</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-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel>\n </db-tabs>\n </div>\n <div\n class="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n arrows heavy load (12 tabs, custom distance 250px):\n </db-infotext>\n <db-tabs behavior="arrows" arrowScrollDistance={250}>\n <db-tab-list>\n <db-tab-item>Berlin</db-tab-item>\n <db-tab-item>M\xFCnchen</db-tab-item>\n <db-tab-item>Hamburg</db-tab-item>\n <db-tab-item>Frankfurt</db-tab-item>\n <db-tab-item>K\xF6ln</db-tab-item>\n <db-tab-item>Stuttgart</db-tab-item>\n <db-tab-item>D\xFCsseldorf</db-tab-item>\n <db-tab-item>Leipzig</db-tab-item>\n <db-tab-item>Hannover</db-tab-item>\n <db-tab-item>N\xFCrnberg</db-tab-item>\n <db-tab-item>Dresden</db-tab-item>\n <db-tab-item>Bremen</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Berlin</db-tab-panel>\n <db-tab-panel>M\xFCnchen</db-tab-panel>\n <db-tab-panel>Hamburg</db-tab-panel>\n <db-tab-panel>Frankfurt</db-tab-panel>\n <db-tab-panel>K\xF6ln</db-tab-panel>\n <db-tab-panel>Stuttgart</db-tab-panel>\n <db-tab-panel>D\xFCsseldorf</db-tab-panel>\n <db-tab-panel>Leipzig</db-tab-panel>\n <db-tab-panel>Hannover</db-tab-panel>\n <db-tab-panel>N\xFCrnberg</db-tab-panel>\n <db-tab-panel>Dresden</db-tab-panel>\n <db-tab-panel>Bremen</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "slotWithBadge.example.tsx": 'import { DBBadge } from "../../badge/badge";\nimport { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-slot-with-badge",\n})\nexport class TabsSlotWithBadge {\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, "tabs-slot-with-badge");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n tab-items with badges:\n </db-infotext>\n <db-tabs>\n <db-tab-list>\n <db-tab-item>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Messages\n <db-badge semantic="informational">134</db-badge>\n </span>\n </db-tab-item>\n <db-tab-item>\n <span\n style={{\n display: "flex",\n alignItems: "center",\n gap: "8px",\n }}\n >\n Notifications\n <db-badge semantic="neutral">433</db-badge>\n </span>\n </db-tab-item>\n <db-tab-item>Settings</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Messages content</db-tab-panel>\n <db-tab-panel>Notifications content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "tabItemWidth.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tab-item-width",\n})\nexport class TabItemWidth {\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, "tab-item-width");\n }\n\n render() {\n return (\n <Fragment>\n <div\n class="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n auto:\n </db-infotext>\n <db-tabs tabItemWidth="auto">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n <div\n class="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: start:\n </db-infotext>\n <db-tabs tabItemWidth="full">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n <div\n class="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: center:\n </db-infotext>\n <db-tabs tabItemWidth="full" tabItemAlignment="center">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n <div\n class="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: end:\n </db-infotext>\n <db-tabs tabItemWidth="full" tabItemAlignment="end">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n </Fragment>\n );\n }\n}\n', "truncation.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-truncation",\n})\nexport class TabsTruncation {\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, "tabs-truncation");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n truncated tab label (vertical only):\n </db-infotext>\n <db-tabs orientation="vertical" tabItemWidth="auto">\n <db-tab-list>\n <db-tab-item label="Very long tab label that gets truncated"></db-tab-item>\n <db-tab-item label="Another long label"></db-tab-item>\n <db-tab-item label="Short"></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 </div>\n </Fragment>\n );\n }\n}\n', "urlSync.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-url-sync",\n})\nexport class TabsUrlSync {\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, "tabs-url-sync");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 3rd tab pre-selected via initialSelectedIndex with a value parsed\n from URL parameter:\n </db-infotext>\n <db-tabs name="url-sync-index" initialSelectedIndex={2}>\n <db-tab-list>\n <db-tab-item>Overview</db-tab-item>\n <db-tab-item>Details</db-tab-item>\n <db-tab-item>Settings</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Overview content</db-tab-panel>\n <db-tab-panel>Details content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel>\n </db-tabs>\n </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 2nd tab pre-selected with value props and \'onValueChange\':\n </db-infotext>\n <db-tabs name="url-sync-value" initialSelectedIndex={1}>\n <db-tab-list>\n <db-tab-item value="overview">Overview</db-tab-item>\n <db-tab-item value="details">Details</db-tab-item>\n <db-tab-item value="settings">Settings</db-tab-item>\n </db-tab-list>\n <db-tab-panel>Overview content</db-tab-panel>\n <db-tab-panel>Details content</db-tab-panel>\n <db-tab-panel>Settings content</db-tab-panel>\n </db-tabs>\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>DBTabs</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <h2>Angular Example</h2>\n <db-tabs ng-_reflect-arrow-scroll-distance="75">\n <div class="db-tabs">\n <db-tab-list>\n <div\n role="tablist"\n class="db-tab-list"\n id="tab-list-d1abe676-4c30-4219-b957-f1a397d54a0b"\n aria-orientation="horizontal"\n >\n <db-tab\n ng-_reflect-name="functional"\n ng-_reflect-index="0"\n >\n <label\n role="tab"\n class="db-tab"\n for="functional-tab-0"\n aria-controls="functional-tab-panel-0"\n data-width="auto"\n data-alignment="start"\n >\n <input\n type="radio"\n name="functional"\n id="functional-tab-0"\n />Test 1</label\n >\n </db-tab>\n <db-tab\n ng-_reflect-name="functional"\n ng-_reflect-index="1"\n >\n <label\n role="tab"\n class="db-tab"\n for="functional-tab-1"\n aria-controls="functional-tab-panel-1"\n data-width="auto"\n data-alignment="start"\n >\n <input\n type="radio"\n name="functional"\n id="functional-tab-1"\n />\n Test 2\n </label>\n </db-tab>\n <db-tab\n ng-_reflect-name="functional"\n ng-_reflect-index="2"\n >\n <label\n role="tab"\n class="db-tab"\n for="functional-tab-2"\n aria-controls="functional-tab-panel-2"\n data-width="auto"\n data-alignment="start"\n >\n <input\n type="radio"\n name="functional"\n id="functional-tab-2"\n />\n Test 3\n </label>\n </db-tab>\n </div>\n </db-tab-list>\n <db-tab-panel\n ng-_reflect-name="functional"\n ng-_reflect-index="0"\n >\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="functional-tab-panel-0"\n aria-labelledby="functional-tab-0"\n >\n Tab Panel 1\n </article>\n </db-tab-panel>\n <db-tab-panel\n ng-_reflect-name="functional"\n ng-_reflect-index="1"\n >\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="functional-tab-panel-1"\n aria-labelledby="functional-tab-1"\n >\n Tab Panel 2\n </article>\n </db-tab-panel>\n <db-tab-panel\n ng-_reflect-name="functional"\n ng-_reflect-index="2"\n >\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="functional-tab-panel-2"\n aria-labelledby="functional-tab-2"\n >\n Tab Panel 3\n </article>\n </db-tab-panel>\n </div>\n </db-tabs>\n </body>\n</html>\n' } } }, tag: { props: `import {
39155
+ </script>` }, "web-components": { "density.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-density",\n})\nexport class TabsDensity {\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, "tabs-density");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Functional:\n </db-infotext>\n <db-tabs data-density="functional">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n (Default) Regular:\n </db-infotext>\n <db-tabs data-density="regular">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n Expressive:\n </db-infotext>\n <db-tabs data-density="expressive">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n </Fragment>\n );\n }\n}\n', "examples.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-examples",\n})\nexport class TabsExamples {\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, "tabs-examples");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n 2nd tab selected:\n </db-infotext>\n <db-tabs initialSelectedIndex={1}>\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n nothing selected:\n </db-infotext>\n <db-tabs initialSelectedMode="manually">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n </Fragment>\n );\n }\n}\n', "orientation.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-orientation",\n})\nexport class TabsOrientation {\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, "tabs-orientation");\n }\n\n render() {\n return (\n <Fragment>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n horizontal:\n </db-infotext>\n <db-tabs orientation="horizontal">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n <div class="fit-content-container">\n <db-infotext icon="none" size="small" semantic="informational">\n vertical:\n </db-infotext>\n <db-tabs orientation="vertical">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n </Fragment>\n );\n }\n}\n', "overflow.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-overflow",\n})\nexport class TabsOverflow {\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, "tabs-overflow");\n }\n\n render() {\n return (\n <Fragment>\n <div\n class="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n no overflow:\n </db-infotext>\n <db-tabs width="auto">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n <div\n class="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: arrows:\n </db-infotext>\n <db-tabs behavior="arrows">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</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-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel>\n </db-tabs>\n </div>\n <div\n class="fit-content-container"\n style={{\n width: "300px",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n with overflow - behavior: scrollbar:\n </db-infotext>\n <db-tabs>\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 3</db-tab-item>\n <db-tab-item>Test 4</db-tab-item>\n <db-tab-item>Test 5</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-tab-panel>Tab Panel 4</db-tab-panel>\n <db-tab-panel>Tab Panel 5</db-tab-panel>\n </db-tabs>\n </div>\n </Fragment>\n );\n }\n}\n', "width.example.tsx": 'import { DBInfotext } from "../../infotext/infotext";\nimport { DBTabItem } from "../../tab-item/tab-item";\nimport { DBTabList } from "../../tab-list/tab-list";\nimport { DBTabPanel } from "../../tab-panel/tab-panel";\nimport { DBTabs } from "../tabs";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "tabs-width",\n})\nexport class TabsWidth {\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, "tabs-width");\n }\n\n render() {\n return (\n <Fragment>\n <div\n class="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n auto:\n </db-infotext>\n <db-tabs width="auto">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n <div\n class="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: start:\n </db-infotext>\n <db-tabs width="full">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </div>\n <div\n class="fit-content-container"\n style={{\n width: "100%",\n }}\n >\n <db-infotext icon="none" size="small" semantic="informational">\n full - alignment: center:\n </db-infotext>\n <db-tabs width="full" alignment="center">\n <db-tab-list>\n <db-tab-item>Test 1</db-tab-item>\n <db-tab-item>Test 2</db-tab-item>\n <db-tab-item>Test 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 </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>DBTabs</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <h2>Angular Example</h2>\n <db-tabs ng-_reflect-arrow-scroll-distance="75">\n <div class="db-tabs">\n <db-tab-list>\n <div\n role="tablist"\n class="db-tab-list"\n id="tab-list-d1abe676-4c30-4219-b957-f1a397d54a0b"\n aria-orientation="horizontal"\n >\n <db-tab\n ng-_reflect-name="functional"\n ng-_reflect-index="0"\n >\n <label\n role="tab"\n class="db-tab"\n for="functional-tab-0"\n aria-controls="functional-tab-panel-0"\n data-width="auto"\n data-alignment="start"\n >\n <input\n type="radio"\n name="functional"\n id="functional-tab-0"\n />Test 1</label\n >\n </db-tab>\n <db-tab\n ng-_reflect-name="functional"\n ng-_reflect-index="1"\n >\n <label\n role="tab"\n class="db-tab"\n for="functional-tab-1"\n aria-controls="functional-tab-panel-1"\n data-width="auto"\n data-alignment="start"\n >\n <input\n type="radio"\n name="functional"\n id="functional-tab-1"\n />\n Test 2\n </label>\n </db-tab>\n <db-tab\n ng-_reflect-name="functional"\n ng-_reflect-index="2"\n >\n <label\n role="tab"\n class="db-tab"\n for="functional-tab-2"\n aria-controls="functional-tab-panel-2"\n data-width="auto"\n data-alignment="start"\n >\n <input\n type="radio"\n name="functional"\n id="functional-tab-2"\n />\n Test 3\n </label>\n </db-tab>\n </div>\n </db-tab-list>\n <db-tab-panel\n ng-_reflect-name="functional"\n ng-_reflect-index="0"\n >\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="functional-tab-panel-0"\n aria-labelledby="functional-tab-0"\n >\n Tab Panel 1\n </article>\n </db-tab-panel>\n <db-tab-panel\n ng-_reflect-name="functional"\n ng-_reflect-index="1"\n >\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="functional-tab-panel-1"\n aria-labelledby="functional-tab-1"\n >\n Tab Panel 2\n </article>\n </db-tab-panel>\n <db-tab-panel\n ng-_reflect-name="functional"\n ng-_reflect-index="2"\n >\n <article\n role="tabpanel"\n class="db-tab-panel"\n id="functional-tab-panel-2"\n aria-labelledby="functional-tab-2"\n >\n Tab Panel 3\n </article>\n </db-tab-panel>\n </div>\n </db-tabs>\n </body>\n</html>\n' } } }, tag: { props: `import {
39389
39156
  ClickEvent,
39390
39157
  ContentSlotProps,
39391
39158
  EmphasisProps,